@font-face{font-family:Kalameh;src:url('../assets/KalamehWeb-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:Kalameh;src:url('../assets/KalamehWeb-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Kalameh;src:url('../assets/KalamehWeb-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap}

:root{
  --green:#007063;
  --green-2:#009982;
  --dark:#06483f;
  --deep:#062824;
  --soft:#e5f3f0;
  --gold:#d2ab67;
  --ink:#101827;
  --muted:#667085;
  --line:#d9e5e2;
  --bg:#f3f7f6;
  --shadow:0 26px 80px rgba(5,54,49,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 7% 3%,rgba(0,153,130,.07),transparent 24%),var(--bg);color:var(--ink);font-family:Kalameh,Tahoma,sans-serif;font-weight:500;line-height:1.8}
button,a,label,input{font:inherit}
button{color:inherit}
button:focus-visible,a:focus-visible,label:has(input:focus-visible),input:focus-visible{outline:3px solid rgba(0,112,99,.23);outline-offset:3px}
[hidden]{display:none!important}

.bot-header{width:min(1260px,calc(100% - 48px));height:86px;margin:auto;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.bot-header>a:first-child{display:flex;width:max-content}
.bot-header img{width:118px;height:auto}
.bot-header>span{color:var(--green);font:800 .58rem system-ui;letter-spacing:.14em}
.bot-header>a:last-child{justify-self:end;display:flex;align-items:center;gap:8px;color:var(--dark);font-size:.74rem;text-decoration:none}
.bot-header svg{width:16px}

.bot-shell{width:min(1260px,calc(100% - 48px));margin:32px auto 80px;display:grid;grid-template-columns:minmax(380px,.84fr) minmax(560px,1.16fr);gap:24px;align-items:start}
.bot-intro,.studio{position:relative;border:1px solid rgba(0,112,99,.14);border-radius:32px;background:#fff;overflow:hidden;box-shadow:var(--shadow)}
.bot-intro{min-height:870px;padding:58px 48px;background:linear-gradient(165deg,#fff 0%,#f5fbf9 48%,#dff1ed 100%)}
.bot-intro:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(0,112,99,.08)),url('./assets/data-center-hall.png') center bottom/auto 55% no-repeat;opacity:.26;mix-blend-mode:multiply}
.bot-intro>*{position:relative}
.eyebrow{margin:0;color:var(--green);font:800 .6rem system-ui;letter-spacing:.14em}
.bot-intro h1{margin:16px 0 20px;font-size:clamp(2.65rem,4.1vw,4.6rem);line-height:1.08;letter-spacing:-.045em}
.bot-intro h1 em{color:var(--green);font-style:normal;font-weight:300}
.hero-copy{max-width:470px;margin:0;color:var(--muted);font-size:.88rem;line-height:2}

.experience-steps{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(0,112,99,.13);border-radius:20px;background:rgba(255,255,255,.76);overflow:hidden;backdrop-filter:blur(12px)}
.experience-steps article{min-width:0;padding:14px 12px;display:grid;border-left:1px solid rgba(0,112,99,.12)}
.experience-steps article:last-child{border-left:0}
.experience-steps b{color:var(--green);font:800 1.05rem/1.2 system-ui}
.experience-steps span{margin-top:5px;color:var(--dark);font-size:.69rem;font-weight:800}
.experience-steps small{color:var(--muted);font-size:.55rem;white-space:nowrap}
.privacy{margin-top:16px;padding:13px 14px;border:1px solid rgba(0,112,99,.13);border-radius:16px;display:flex;align-items:flex-start;gap:11px;background:rgba(255,255,255,.8);color:#42615b;font-size:.68rem;line-height:1.7;backdrop-filter:blur(12px)}
.privacy svg{flex:0 0 auto;width:20px;color:var(--green)}
.privacy span{display:grid}
.privacy b{color:var(--dark)}

.robot-showcase{position:absolute;right:0;bottom:0;left:0;height:400px;overflow:hidden}
.bot-robot{position:absolute;z-index:2;right:50%;bottom:-54px;width:58%;max-height:430px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 30px 34px rgba(2,42,38,.22));transform:translateX(50%)}
.robot-orbit{position:absolute;right:50%;bottom:46px;border:1px solid rgba(0,112,99,.18);border-radius:50%;transform:translateX(50%)}
.orbit-one{width:330px;height:330px;animation:orbitPulse 4s ease-in-out infinite}
.orbit-two{width:250px;height:250px;border-color:rgba(210,171,103,.32);animation:orbitPulse 4s 1s ease-in-out infinite}
.robot-message{position:absolute;z-index:3;top:82px;left:22px;padding:12px 14px;border:1px solid rgba(255,255,255,.85);border-radius:16px;display:flex;align-items:flex-start;gap:9px;background:rgba(255,255,255,.9);box-shadow:0 15px 36px rgba(0,45,40,.13);color:#42615b;font-size:.64rem;line-height:1.55;backdrop-filter:blur(12px)}
.robot-message:after{content:"";position:absolute;right:18px;bottom:-8px;width:16px;height:16px;background:rgba(255,255,255,.9);transform:rotate(45deg)}
.robot-message svg{width:18px;color:var(--gold)}
.robot-message span{display:grid}.robot-message b{color:var(--dark)}

.studio{padding:30px}
.studio-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.studio-head span{color:var(--green);font:800 .56rem system-ui;letter-spacing:.12em}
.studio-head h2{margin:4px 0 0;font-size:1.55rem}
.studio-head>b{flex:0 0 auto;padding:7px 12px;border-radius:99px;background:var(--soft);color:var(--green);font-size:.64rem}
.studio-head>b i{display:inline-block;width:6px;height:6px;margin-inline-end:5px;border-radius:50%;background:var(--green)}
.studio-head>b[data-type="live"],.studio-head>b[data-type="processing"]{background:#e8f6f3;color:#007d6d}
.studio-head>b[data-type="processing"] i{animation:statusPulse 1s infinite}
.studio-head>b[data-type="done"]{background:#e9f8ee;color:#08783d}
.studio-head>b[data-type="error"]{background:#fff0ed;color:#b42318}
.studio-head>b[data-type="error"] i{background:#b42318}

.flow-steps{margin:0 0 18px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.flow-steps:before{content:"";position:absolute;top:16px;right:16%;left:16%;height:1px;background:var(--line)}
.flow-steps li{position:relative;z-index:1;display:grid;justify-items:center;gap:4px;color:#98a2b3;font-size:.59rem}
.flow-steps b{width:32px;height:32px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:#fff;font:800 .58rem system-ui}
.flow-steps li.is-current,.flow-steps li.is-done{color:var(--green)}
.flow-steps li.is-current b{border-color:var(--green);background:var(--green);color:#fff;box-shadow:0 0 0 5px rgba(0,112,99,.08)}
.flow-steps li.is-done b{border-color:#90d0c6;background:var(--soft);color:var(--green)}

.camera-stage{position:relative;aspect-ratio:1240/1754;border-radius:25px;background:#0b2522;overflow:hidden;isolation:isolate}
.camera-stage video,.camera-stage canvas{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover}
.camera-stage video{transform:scaleX(-1)}
.empty-camera{position:absolute;z-index:2;inset:0;display:grid;place-items:center;align-content:center;padding:28px;text-align:center;background:radial-gradient(circle at 50% 42%,rgba(0,153,130,.24),transparent 31%),linear-gradient(145deg,#103a36,#061e1c);color:#fff}
.camera-icon{width:72px;height:72px;border:1px solid rgba(255,255,255,.22);border-radius:24px;display:grid;place-items:center;background:rgba(255,255,255,.06);box-shadow:0 18px 40px rgba(0,0,0,.16)}
.camera-icon svg{width:30px;color:#b4e8de}
.empty-camera h3{margin:20px 0 3px;font-size:1.12rem}
.empty-camera>p{margin:0;color:rgba(255,255,255,.65);font-size:.72rem}
.pose-guide{margin-top:26px;display:grid;justify-items:center;gap:8px}
.pose-guide span{width:126px;height:170px;border:1px dashed rgba(255,255,255,.36);border-radius:58% 58% 42% 42%}
.pose-guide small{color:rgba(255,255,255,.55);font-size:.56rem}
.frame-badge{position:absolute;z-index:4;right:18px;bottom:18px;padding:8px 11px;border:1px solid rgba(255,255,255,.5);border-radius:11px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.88);backdrop-filter:blur(12px)}
.frame-badge img{width:52px}.frame-badge span{color:var(--dark);font:800 .42rem/1.25 system-ui;letter-spacing:.05em}
.corner{position:absolute;z-index:4;width:27px;height:27px;border-color:rgba(255,255,255,.72);pointer-events:none}.corner-tr{top:18px;right:18px;border-top:2px solid;border-right:2px solid}.corner-tl{top:18px;left:18px;border-top:2px solid;border-left:2px solid}.corner-br{right:18px;bottom:18px;border-right:2px solid;border-bottom:2px solid}.corner-bl{left:18px;bottom:18px;border-left:2px solid;border-bottom:2px solid}

.countdown{position:absolute;z-index:6;inset:0;padding:30px;display:grid;place-items:center;align-content:center;text-align:center;background:linear-gradient(180deg,rgba(4,34,31,.72),rgba(3,26,24,.93));color:#fff;backdrop-filter:blur(9px)}
.timer-ring{--progress:0deg;width:172px;height:172px;padding:8px;border-radius:50%;display:grid;place-items:center;align-content:center;background:radial-gradient(circle,#092f2b 63%,transparent 64%),conic-gradient(var(--gold) var(--progress),rgba(255,255,255,.13) 0);box-shadow:0 22px 56px rgba(0,0,0,.24)}
.timer-ring span{font:800 2.15rem/1 system-ui;direction:ltr}.timer-ring small{margin-top:9px;color:#bfe8e1;font-size:.58rem}
.countdown>p{margin:24px 0 13px;font-size:.84rem}
.process-track{width:min(330px,86%);height:5px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}.process-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold),#f2d9a9);transition:width .5s linear}
.countdown>small{max-width:390px;margin-top:13px;color:rgba(255,255,255,.6);font-size:.56rem}

.consent{margin-top:14px;padding:12px 13px;border:1px solid var(--line);border-radius:15px;display:flex;align-items:flex-start;gap:10px;background:#fbfdfc;cursor:pointer}
.consent input{width:18px;height:18px;margin:4px 0 0;accent-color:var(--green)}
.consent span{display:grid}.consent b{color:var(--dark);font-size:.68rem}.consent small{color:var(--muted);font-size:.56rem}
.studio-actions{margin-top:10px;display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:8px}
.button{min-height:50px;padding:0 13px;border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;justify-content:center;gap:7px;background:#fff;color:var(--dark);cursor:pointer;font-size:.67rem;font-weight:800;text-align:center}
.button.primary{border-color:var(--green);background:var(--green);color:#fff}.button.primary:hover{background:var(--dark)}
.button.capture{border-color:rgba(210,171,103,.7);background:#fff9ed;color:#725b32}
.button:disabled,.button.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.button svg{width:17px}

.styles{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.styles button{min-width:0;padding:8px;border:1px solid var(--line);border-radius:15px;display:grid;grid-template-columns:42px 1fr;align-items:center;gap:8px;background:#fff;color:var(--muted);cursor:pointer;text-align:right}
.styles button>span:last-child{min-width:0;display:grid}.styles button b{color:var(--dark);font-size:.62rem}.styles button small{font-size:.49rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.styles button.is-active{border-color:var(--green);background:#f5fbf9;box-shadow:0 0 0 2px rgba(0,112,99,.07)}
.style-swatch{width:42px;height:42px;border-radius:11px;background:url('./assets/data-center-hall.png') center/cover}.style-swatch.tech{filter:contrast(1.12) saturate(1.35) hue-rotate(7deg)}.style-swatch.future{filter:brightness(1.2) saturate(.9)}.style-swatch.mono{filter:grayscale(1) sepia(.2)}

.delivery{margin-top:18px;padding:20px;border:1px solid rgba(0,112,99,.2);border-radius:21px;background:linear-gradient(145deg,#fff,#f0f8f6);box-shadow:0 18px 45px rgba(5,55,49,.08)}
.delivery-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.delivery-head span{color:var(--green);font:800 .51rem system-ui;letter-spacing:.1em}.delivery-head h3{margin:3px 0 0;font-size:1.15rem}.delivery-head>b{padding:7px 10px;border-radius:9px;background:var(--deep);color:#fff;font:800 .58rem system-ui;direction:ltr}
.delivery-grid{margin-top:15px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.delivery-grid article{padding:12px;border:1px solid var(--line);border-radius:14px;display:flex;gap:9px;background:#fff}.delivery-grid svg{flex:0 0 auto;width:19px;color:var(--green)}.delivery-grid div{display:grid}.delivery-grid b{color:var(--dark);font-size:.61rem}.delivery-grid span{color:var(--muted);font-size:.52rem;line-height:1.65}
.printer-email{margin-top:10px;padding:9px 11px;border:1px solid var(--line);border-radius:13px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;background:#fff}.printer-email>span{color:var(--dark);font-size:.6rem;font-weight:800}.printer-email small{color:var(--muted);font-weight:500}.printer-email input{width:100%;min-width:0;padding:7px 9px;border:0;border-radius:8px;outline:0;background:#f4f8f7;color:var(--ink);font:500 .65rem system-ui;text-align:left}
.output-actions{margin-top:10px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.output-actions button{min-height:46px;padding:0 10px;border:1px solid var(--line);border-radius:13px;display:flex;align-items:center;justify-content:center;gap:7px;background:#fff;color:var(--dark);font-weight:800;font-size:.63rem;cursor:pointer}.output-actions .primary-output{border-color:var(--green);background:var(--green);color:#fff}.output-actions svg{width:16px}
.delivery-note{margin:10px 0 0;color:var(--muted);font-size:.55rem;text-align:center}
.integration-note{margin:16px 0 0;padding:13px;border-radius:14px;display:flex;align-items:flex-start;gap:10px;background:#fff8eb;color:#6c5a37;font-size:.61rem;line-height:1.75}.integration-note svg{flex:0 0 auto;width:18px;color:#9a6b17}.integration-note b{color:#5c471f}

@keyframes orbitPulse{50%{opacity:.5;transform:translateX(50%) scale(1.06)}}
@keyframes statusPulse{50%{box-shadow:0 0 0 6px rgba(0,112,99,.14)}}

@media(max-width:1040px){
  .bot-shell{grid-template-columns:1fr}.bot-intro{min-height:700px}.robot-showcase{height:330px}.bot-robot{width:44%;max-height:350px}.studio{max-width:720px;width:100%;margin:auto}
}

@media(max-width:640px){
  .bot-header{width:calc(100% - 24px);height:70px;grid-template-columns:1fr auto}.bot-header>span{display:none}.bot-header>a:last-child{font-size:0}.bot-header svg{width:20px}
  .bot-shell{width:calc(100% - 24px);margin:16px auto 42px;gap:14px}.bot-intro,.studio{border-radius:23px}.bot-intro{min-height:670px;padding:34px 24px}.bot-intro h1{font-size:2.75rem}.hero-copy{font-size:.78rem}.experience-steps article{padding:11px 8px}.experience-steps span{font-size:.6rem}.experience-steps small{font-size:.48rem}.privacy{font-size:.61rem}.robot-showcase{height:310px}.bot-robot{width:70%;max-height:320px}.robot-message{top:54px;left:0}
  .studio{padding:17px}.studio-head{margin-bottom:16px}.studio-head h2{font-size:1.2rem}.studio-head>b{padding:6px 9px}.flow-steps li{font-size:.52rem}.camera-stage{border-radius:18px}.empty-camera h3{font-size:.94rem}.pose-guide span{width:100px;height:135px}.frame-badge{right:12px;bottom:12px}.corner-tr,.corner-br{right:12px}.corner-tl,.corner-bl{left:12px}.corner-tr,.corner-tl{top:12px}.corner-br,.corner-bl{bottom:12px}
  .timer-ring{width:142px;height:142px}.timer-ring span{font-size:1.75rem}.countdown>p{font-size:.72rem}.consent b{font-size:.61rem}.consent small{font-size:.51rem}
  .studio-actions{grid-template-columns:1fr 1fr}.studio-actions .primary{grid-column:span 2}.button{font-size:.61rem}.styles{grid-template-columns:1fr}.styles button{grid-template-columns:40px 1fr}.delivery{padding:15px}.delivery-grid{grid-template-columns:1fr}.printer-email{grid-template-columns:1fr;gap:5px}.output-actions button{font-size:.58rem}.integration-note{font-size:.56rem}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

@media print{
  @page{size:A5 portrait;margin:0}
  html,body{width:148mm!important;height:210mm!important;margin:0!important;background:#fff!important;overflow:hidden!important}
  body>*:not(.bot-shell){display:none!important}
  .bot-shell{display:block!important;width:148mm!important;height:210mm!important;margin:0!important}
  .bot-intro,.studio>*:not(.camera-stage){display:none!important}
  .studio{display:block!important;width:148mm!important;height:210mm!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important}
  .camera-stage{display:block!important;width:148mm!important;height:210mm!important;aspect-ratio:auto!important;border-radius:0!important}
  .camera-stage>*:not(canvas){display:none!important}
  .camera-stage canvas{display:block!important;position:static!important;width:148mm!important;height:210mm!important;object-fit:fill!important}
}