/* Digital Labs V2 (local demo) — shared styles. Direction A "Copper Foundry". */
@font-face{font-family:"Syne";src:url(Syne-wght.ttf) format("truetype");font-weight:400 800;font-display:swap}
@font-face{font-family:"Karla";src:url(Karla-wght.ttf) format("truetype");font-weight:200 800;font-display:swap}
@font-face{font-family:"JBM";src:url(JetBrainsMono-wght.ttf) format("truetype");font-weight:100 800;font-display:swap}
:root{
  --void:#090A0C;--panel:#101216;--panel2:#161920;--line:#22262E;--line2:#2E333D;
  --ink:#ECEDF0;--dim:#A3A7B0;--faint:#6B707A;
  --copper:#D2743F;--copper-hi:#E89A62;--copper-lo:#8A4A26;--teal:#1B6B72;--cyan:#5FD3DC;--jade:#3ED69B;
  --disp:"Syne","Trebuchet MS",sans-serif;--body:"Karla","Segoe UI",sans-serif;--mono:"JBM",Consolas,monospace;
  --w:1280px;--gut:clamp(16px,4.4vw,64px);--ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--ink);font:400 17px/1.6 var(--body);overflow-x:clip}
img,video,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--copper-hi);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
.mono{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.eyebrow{font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--copper)}
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;line-height:1.04;margin:0}
h1{font-weight:800}
h2{font-size:clamp(32px,4.4vw,56px)}
h3{font-size:21px;letter-spacing:-.01em;line-height:1.2}
p{margin:0}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--dim);max-width:60ch}
section{position:relative;padding:clamp(80px,11vw,150px) 0}
section+section{border-top:1px solid var(--line)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border-radius:999px;padding:13px 24px;font:700 15.5px var(--body);text-decoration:none;border:0;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,background .25s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.bp{background:var(--copper);color:#1a0d05;box-shadow:0 12px 34px -12px rgba(210,116,63,.7)}
.bp:hover{background:var(--copper-hi)}
.bg{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.bg:hover{background:var(--panel2)}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.demo-badge{display:inline-flex;align-items:center;gap:8px;font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line2);border-radius:999px;padding:6px 11px;background:rgba(9,10,12,.75)}
.draft{display:inline-block;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#1a0d05;background:#f2c14e;border-radius:6px;padding:3px 7px;vertical-align:middle}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:40;border-bottom:1px solid transparent;transition:background .35s,border-color .35s}
.nav.on{background:rgba(9,10,12,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;height:76px;gap:20px}
.brand{display:flex;align-items:center;gap:11px;min-height:44px;font:700 17px var(--disp);text-decoration:none}
.brand img{width:46px;height:auto}
.links{display:flex;gap:30px;margin-left:auto;font:500 15px var(--body)}
.links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;text-decoration:none;color:#C9CCD3;border-bottom:1.5px solid transparent}
.links a:hover{color:var(--ink)}
.links a[aria-current=page]{color:var(--ink);border-color:var(--copper)}
.nav .bp{min-height:44px;padding:10px 18px;font-size:14px}
.menu-btn{display:none;margin-left:auto;width:46px;height:46px;border-radius:12px;background:transparent;border:1px solid var(--line2);cursor:pointer}
.menu-btn span{display:block;width:18px;height:1.5px;background:var(--ink);margin:4px auto;transition:transform .3s}
.sheet{display:none}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:48px 0 40px;color:var(--dim);font-size:15px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
footer h4{font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 12px}
footer a{display:flex;align-items:center;min-height:44px;text-decoration:none;color:#C9CCD3}
footer .fine{grid-column:1/-1;border-top:1px solid var(--line);padding-top:22px;margin-top:10px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--faint);font-size:13px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.04s}.d2{transition-delay:.08s}.d3{transition-delay:.12s}

/* ---------- page hero (inner pages) ---------- */
.phero{padding:170px 0 90px;background:radial-gradient(ellipse 55% 60% at 80% 20%,rgba(210,116,63,.10),transparent 70%)}
.phero h1{font-size:clamp(40px,5.4vw,72px);max-width:16ch;margin-top:16px}
.phero .lead{margin:24px 0 32px}

/* ---------- cards ---------- */
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:22px;padding:30px}
.card p{color:var(--dim);margin-top:10px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ticks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:9px;color:var(--dim);font-size:15.5px}
.ticks li{padding-left:24px;position:relative}
.ticks li:before{content:"";position:absolute;left:2px;top:.5em;width:11px;height:6px;border-left:1.7px solid var(--copper);border-bottom:1.7px solid var(--copper);transform:rotate(-45deg)}

/* ---------- 3D stage (C3 "take it apart") ---------- */
.stage{position:relative;border-radius:28px;border:1px solid rgba(95,211,220,.22);background:radial-gradient(ellipse at 50% 42%,#17191e,#0a0b0d 72%);overflow:hidden}
.stage canvas{width:100%;height:100%;cursor:grab}
.stage canvas.grab{cursor:grabbing}
.stage .demo-badge{position:absolute;left:20px;top:18px;z-index:2}
.stage .hint{position:absolute;left:20px;bottom:18px;font:500 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);pointer-events:none}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:999px;padding:4px;background:rgba(9,10,12,.8)}
.seg button{background:none;border:0;border-radius:999px;padding:9px 18px;min-height:44px;font:600 14px var(--body);color:var(--dim);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--panel2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:9px;min-height:44px;border:1px solid var(--line2);border-radius:999px;padding:9px 16px;font:600 14.5px var(--body);color:#C9CCD3;background:none;cursor:pointer}
.chip[aria-pressed=true]{border-color:var(--copper);color:var(--ink);background:rgba(210,116,63,.1)}
.chip .sw{width:14px;height:14px;border-radius:50%}
.dots{display:flex;gap:12px}
.dot{width:44px;height:44px;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 4px var(--void);cursor:pointer}
.dot[aria-pressed=true]{border-color:var(--ink)}
.row-l{font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:24px 0 12px}

/* ---------- Talk to Jarvis guide ---------- */
.guide-btn{position:fixed;right:22px;bottom:22px;z-index:45;display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 18px 10px 12px;border-radius:999px;border:1px solid rgba(62,214,155,.35);background:rgba(12,14,16,.92);backdrop-filter:blur(10px);font:700 14.5px var(--body);cursor:pointer;box-shadow:0 14px 40px -14px rgba(0,0,0,.9)}
.guide-btn i{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--jade);display:grid;place-items:center;box-shadow:0 0 16px -4px var(--jade)}
.guide-btn i:after{content:"";width:7px;height:7px;border-radius:50%;background:var(--jade)}
.guide{position:fixed;right:22px;bottom:88px;z-index:46;width:min(400px,calc(100vw - 24px));max-height:min(620px,calc(100vh - 120px));display:flex;flex-direction:column;border-radius:22px;border:1px solid var(--line2);background:#0e1013;box-shadow:0 40px 90px -30px rgba(0,0,0,.95);overflow:hidden}
.guide[hidden]{display:none}
.g-top{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.g-top b{font:700 16px var(--disp)}
.g-top small{display:block;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.g-top button{margin-left:auto;width:44px;height:44px;border-radius:10px;border:1px solid var(--line2);background:none;cursor:pointer;font-size:18px}
.g-note{padding:10px 18px;font-size:12.5px;color:var(--faint);border-bottom:1px solid var(--line);line-height:1.45}
.g-msgs{flex:1;overflow:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.g-m{max-width:88%;padding:11px 14px;border-radius:16px;font-size:15px;line-height:1.5}
.g-m.you{align-self:flex-end;background:#1E2229;border-bottom-right-radius:5px}
.g-m.dl{align-self:flex-start;background:#122a21;border:1px solid rgba(62,214,155,.22);border-bottom-left-radius:5px}
.g-m.dl a{color:var(--jade);display:inline-flex;align-items:center;min-height:44px}
.g-sugg{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 12px}
.g-sugg button{font:600 13px var(--body);min-height:44px;background:none;border:1px solid var(--line2);border-radius:999px;padding:8px 12px;cursor:pointer;color:#C9CCD3}
.g-sugg button:hover{border-color:var(--jade);color:var(--ink)}
.g-in{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.g-in input{flex:1;min-height:44px;border-radius:12px;border:1px solid var(--line2);background:#0a0b0d;color:var(--ink);padding:0 14px;font:400 15px var(--body)}
.g-in button{min-height:44px;padding:0 16px;border-radius:12px;border:0;background:var(--jade);color:#062016;font:700 14px var(--body);cursor:pointer}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .links,.nav .bp{display:none}
  .menu-btn{display:block}
  .sheet{display:block;position:fixed;inset:76px 0 auto;z-index:39;background:rgba(9,10,12,.97);border-bottom:1px solid var(--line);padding:10px var(--gut) 24px;transform:translateY(-110%);transition:transform .35s var(--ease);visibility:hidden}
  .sheet.open{transform:none;visibility:visible}
  .sheet a{display:block;padding:14px 0;font:700 22px var(--disp);text-decoration:none;border-bottom:1px solid var(--line)}
  .sheet .btn{margin-top:18px;width:100%}
  .grid2,.grid3{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  footer .wrap{grid-template-columns:1fr}
  .card{padding:24px}
  .phero h1{font-size:clamp(34px,9.4vw,40px);overflow-wrap:break-word}
  .guide-btn span{display:none}
  .guide-btn{padding:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}