:root{
  --accent:#00ced1;
  --accent-strong:#00e8ff;
  --accent-soft:rgba(0,206,209,.14);
  --silver:#b0bcc8;
  --amber:#c47a20;
  --display:'Libre Baskerville',Georgia,serif;
  --body:'Manrope',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --r:14px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --focus-ring:0 0 0 3px var(--accent-soft);
  --header-h:72px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 12px 40px rgba(0,0,0,.08);
  --shadow-lg:0 24px 64px rgba(0,0,0,.12);
  color-scheme:light;
}
:root,[data-theme="light"]{
  --bg-deep:#e8edf4;
  --bg-base:#f0f4f8;
  --bg-elev:#ffffff;
  --surface:rgba(10,21,37,.04);
  --surface-strong:#ffffff;
  --stroke:rgba(10,21,37,.12);
  --text:#0a1525;
  --muted:#4a5568;
  --placeholder:#6b7280;
  --primary:#00a8b0;
  --primary-hover:#008a91;
  --header-bg:rgba(240,244,248,.92);
  --vignette:radial-gradient(120% 90% at 50% 0%,transparent 55%,rgba(232,237,244,.88) 100%);
  --body-bg:linear-gradient(180deg,#f0f4f8 0%,var(--bg-deep) 100%);
  --card-bg:var(--surface-strong);
  --card-shadow:var(--shadow-md);
  --btn-primary-shadow:0 8px 24px rgba(0,168,176,.28);
  --particle-opacity:.3;
  --canvas-display:block;
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg-deep:#0a1525;
  --bg-base:#0f1a2e;
  --bg-elev:#141e32;
  --surface:rgba(0,232,255,.04);
  --surface-strong:rgba(20,30,50,.92);
  --stroke:rgba(176,188,200,.12);
  --text:#eef2f8;
  --muted:#a8b4c4;
  --placeholder:#8896a8;
  --primary:var(--accent-strong);
  --primary-hover:#33eeff;
  --header-bg:rgba(10,21,37,.92);
  --vignette:radial-gradient(120% 90% at 50% 0%,transparent 40%,rgba(5,10,20,.88) 100%);
  --body-bg:linear-gradient(180deg,#0f1a2e 0%,var(--bg-deep) 100%);
  --card-bg:linear-gradient(180deg,rgba(20,30,50,.95),rgba(10,21,37,.98));
  --card-shadow:0 20px 50px rgba(0,0,0,.5);
  --btn-primary-shadow:0 10px 32px rgba(0,232,255,.22);
  --particle-opacity:.55;
  --canvas-display:block;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html.js .reveal:not(.in){opacity:0;transform:translateY(20px)}
body{
  font-family:var(--body);color:var(--text);line-height:1.65;font-weight:400;
  overflow-x:hidden;background:var(--body-bg);
  transition:background .45s var(--ease),color .45s var(--ease);
}
::selection{background:var(--accent);color:#fff}
h1,h2,h3{font-family:var(--display);line-height:1.12;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
img{display:block;max-width:100%}
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--primary);outline-offset:3px;
}
.skip-link{
  position:absolute;left:-9999px;top:12px;z-index:200;padding:10px 16px;
  background:var(--bg-elev);color:var(--text);border-radius:var(--r);text-decoration:none;font-weight:600;
}
.skip-link:focus{left:12px}
.container{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.accent{color:var(--primary)}
.section-label{
  display:block;font-size:.82rem;font-weight:600;color:var(--primary);margin-bottom:12px;
}
.sec-head{margin-bottom:48px}
.sec-head h2{font-size:clamp(1.9rem,4vw,3rem);margin-top:0}
.sec-head.center{text-align:center}
.sec-head p.sub{color:var(--muted);max-width:560px;margin-top:14px;font-size:1.02rem}
.sec-head.center p.sub{margin-left:auto;margin-right:auto}

#bgCanvas{
  position:fixed;inset:0;z-index:-2;display:var(--canvas-display);
  opacity:var(--particle-opacity);transition:opacity .45s var(--ease);
}
.vignette{
  position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--vignette);
  transition:background .45s var(--ease);
}

.reveal{
  opacity:1;transform:none;
  transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);
}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .35s var(--ease),border-color .35s,box-shadow .35s;
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:var(--header-bg);backdrop-filter:blur(14px);
  border-color:var(--stroke);box-shadow:var(--shadow-sm);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(20px,4vw,48px);max-width:1400px;margin:0 auto;gap:12px;
}
.logo{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--text);
}
.logo img{
  height:52px;width:auto;border-radius:0;object-fit:contain;flex-shrink:0;
  filter:drop-shadow(0 0 10px rgba(0,232,255,.35));
}
[data-theme="light"] .logo img{
  filter:drop-shadow(0 2px 6px rgba(10,21,37,.2));
}
.logo .mark{
  width:36px;height:36px;border-radius:10px;background:var(--primary);
  display:flex;align-items:center;justify-content:center;font-family:var(--body);
  font-size:.78rem;font-weight:700;color:#fff;
}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{
  text-decoration:none;font-size:.88rem;font-weight:500;color:var(--muted);
  transition:color .25s var(--ease);position:relative;padding:4px 0;
}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a.active::after{
  content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;
  background:var(--primary);border-radius:2px;
}
.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-login{
  text-decoration:none;font-size:.88rem;font-weight:600;color:var(--muted);
  padding:8px 14px;border:1px solid var(--stroke);border-radius:10px;white-space:nowrap;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.nav-login:hover{color:var(--text);border-color:var(--primary);background:var(--surface)}
.toggle-group{display:flex;border:1px solid var(--stroke);border-radius:99px;overflow:hidden;background:var(--surface)}
.toggle-group button{
  font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.04em;
  padding:8px 13px;background:none;border:none;color:var(--muted);cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.toggle-group button.active{background:var(--primary);color:#fff}
.theme-toggle{
  width:40px;height:40px;border:1px solid var(--stroke);border-radius:10px;
  background:var(--surface);cursor:pointer;color:var(--text);font-size:1rem;
  display:flex;align-items:center;justify-content:center;transition:background .25s var(--ease);
}
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}
.burger{
  display:none;background:none;border:1px solid var(--stroke);border-radius:10px;
  width:44px;height:44px;cursor:pointer;flex-direction:column;justify-content:center;
  align-items:center;gap:5px;
}
.burger span{width:20px;height:2px;background:var(--text);border-radius:2px;transition:.3s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{
  position:fixed;inset:0;z-index:99;background:var(--bg-elev);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{
  font-family:var(--display);font-weight:700;font-size:1.75rem;text-decoration:none;
  color:var(--text);padding:8px;
}

.hero{padding:calc(var(--header-h) + 72px) 0 96px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.2rem,5vw,3.6rem);margin:0 0 20px;max-width:14ch}
.hero p.lead{color:var(--muted);font-size:1.06rem;max-width:52ch}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.btn{
  font-family:var(--body);font-weight:600;font-size:.95rem;text-decoration:none;
  padding:14px 28px;border-radius:10px;display:inline-flex;align-items:center;gap:8px;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .35s var(--ease);
  border:1px solid var(--stroke);color:var(--text);background:var(--surface-strong);cursor:pointer;
}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:var(--btn-primary-shadow)}
.btn:hover{transform:translateY(-2px)}
.btn.primary:hover{background:var(--primary-hover)}
.stats{display:flex;gap:36px;margin-top:44px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--stroke)}
.stat b{font-family:var(--display);font-weight:700;font-size:1.85rem;display:block;color:var(--primary)}
.stat span{font-size:.82rem;color:var(--muted)}

.hero3d{position:relative;height:520px;border-radius:var(--r);border:1px solid var(--stroke);overflow:hidden;background:var(--surface)}
#cardCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
.card-overlay{
  position:absolute;left:50%;top:50%;z-index:3;pointer-events:none;
  transform:translate(-50%,-50%);text-align:center;width:min(72%,320px);will-change:transform;
}
.card-overlay .co-mark{
  width:88px;height:88px;margin:0 auto 14px;
}
.card-overlay .co-mark img{
  width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 0 18px rgba(0,232,255,.4));
}
.card-overlay .card-title{font-family:var(--display);font-size:1.35rem;font-weight:700}
.card-overlay .card-meta{font-size:.82rem;color:var(--muted);margin-top:6px}
.hero3d .hint{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  font-size:.72rem;color:var(--muted);
}

.strip{border-block:1px solid var(--stroke);padding:18px 0;overflow:hidden;background:var(--surface)}
.strip-track{
  display:flex;gap:48px;width:max-content;animation:slide 36s linear infinite;
  font-weight:600;font-size:.95rem;color:var(--muted);white-space:nowrap;
}
.strip-track span i{color:var(--primary);font-style:normal;margin-right:48px}
@keyframes slide{to{transform:translateX(-50%)}}

.projects-wrap{height:380vh;position:relative;padding-bottom:var(--projects-overhang,0px)}
.projects-stage{
  position:sticky;top:0;height:100vh;overflow:visible;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:calc(var(--header-h) + 8px) 0 24px;
}
.projects-stage .sec-head{margin-bottom:8px;z-index:6;text-align:center;max-width:640px;padding:0 20px}
.scroll-hint{
  z-index:6;display:flex;align-items:center;gap:10px;margin-top:6px;
  font-size:.78rem;color:var(--muted);transition:opacity .45s var(--ease);
}
.scroll-hint .wheel{
  width:20px;height:32px;border:1.5px solid var(--muted);border-radius:99px;position:relative;
}
.scroll-hint .wheel::after{
  content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;margin-left:-1.5px;
  background:var(--primary);border-radius:3px;animation:wheel 1.8s var(--ease-out) infinite;
}
@keyframes wheel{0%{transform:translateY(0);opacity:1}100%{transform:translateY(10px);opacity:0}}
.orbit-scene{
  position:relative;width:100%;flex:1;min-height:420px;display:flex;align-items:center;
  justify-content:center;perspective:1600px;perspective-origin:50% 46%;
  overflow:visible;padding:0 clamp(12px,3vw,32px);
  transform-style:preserve-3d;transform:rotateX(-2deg);
}
#globeCanvas{position:absolute;z-index:2;pointer-events:none;transform:translateZ(0)}
.ring{
  position:absolute;width:0;height:0;transform:none;
  transform-style:preserve-3d;
}
.pcard{
  --i:0;position:absolute;width:min(280px,78vw);left:calc(min(280px,78vw)/-2);top:-110px;
  transform-style:preserve-3d;z-index:5;
  backface-visibility:visible;border-radius:var(--r);overflow:hidden;border:1px solid var(--stroke);
  background:var(--card-bg);box-shadow:var(--card-shadow);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),opacity .35s var(--ease);
}
.pcard.is-behind{z-index:1;opacity:.42;pointer-events:none;filter:brightness(.9)}
.pcard:hover{border-color:var(--primary)}
.pcard-link{cursor:pointer}
.pcard-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.pcard .thumb{height:150px;overflow:hidden;position:relative;background:var(--surface)}
.pcard .thumb img{width:100%;height:100%;object-fit:cover}
.pcard .thumb-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;background:var(--surface);pointer-events:none;transform-origin:top left}
.pcard .body{padding:14px 16px 16px;min-width:0}
.pcard .tag{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.pcard h3{font-family:var(--body);font-size:1.05rem;font-weight:700;margin:6px 0 4px;overflow-wrap:anywhere}
.pcard p{
  font-size:.8rem;color:var(--muted);line-height:1.45;margin:0;
  overflow-wrap:anywhere;word-break:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;
}

.work{padding:calc(120px + var(--projects-overhang,0px)) 0 100px}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.desk-frame{
  border-radius:var(--r);border:1px solid var(--stroke);padding:28px 22px 10px;
  background:var(--card-bg);position:relative;overflow:hidden;
}
.desk-frame svg{width:100%;height:auto;display:block}
/* Laptop mockup: the cropped code video is the screen. The lid is a real 3D
   slab (front face + filled back shell + top thickness edge) so it reads as
   solid and closes flush onto the keyboard-deck base. */
.laptop{
  width:100%;max-width:520px;margin:0 auto;perspective:2000px;
  transform-style:preserve-3d;
}
.laptop.reveal.in{transform:rotateY(-4deg)}
html.js .laptop.reveal:not(.in){transform:translateY(20px) rotateY(-4deg)}
.laptop-lid{
  position:relative;
  z-index:1;
  width:106%;
  margin:0 -3%;
  transform-style:preserve-3d;
  /* Hinge at the bottom edge so the screen pivots at the keyboard line. */
  transform-origin:center bottom;
  transform:rotateX(var(--lid,0deg));
  will-change:transform;
}
/* FRONT face: bezel + screen, with integrated top rim for closed-lid thickness. */
.laptop-front{
  position:relative;overflow:hidden;
  background:linear-gradient(#262a33,#1b1e26);
  border:1px solid var(--stroke);
  border-radius:16px 16px 8px 8px;
  padding:12px 11px 9px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  /* No drop shadow here — it's attached to the rotating lid and smears into a
     halo when the lid lies flat. Grounding comes from .laptop-base's shadow. */
}
.laptop-front::before{
  content:"";display:block;height:12px;
  margin:-12px -11px 8px;
  background:linear-gradient(180deg,#404550,#2e323c);
  border-radius:15px 15px 0 0;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.05);
}
.laptop-screen{
  aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#000;line-height:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.laptop-screen video{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:8px}
/* BACK shell + separate top edge: kept out — they caused the double-layer look. */
.laptop-shell,.laptop-edge{display:none}
.laptop-base{
  /* Higher stacking than the lid, and pulled up a touch, so the deck sits in
     FRONT of the screen's bottom edge. The screen tucks behind it and "stops"
     at the keyboard instead of poking through when the lid is near-flat. */
  position:relative;z-index:2;
  height:28px;width:106%;margin:-7px -3% 0;
  background:linear-gradient(#2c303a,#15171d);
  border-radius:4px 4px 18px 18px;
  box-shadow:0 14px 22px rgba(0,0,0,.45);
}
.laptop-base::before{
  content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
  width:26%;height:14px;border-radius:4px;
  background:rgba(0,0,0,.2);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.04);
}
.laptop-base::after{ /* deck top-edge highlight */
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:rgba(255,255,255,.07);border-radius:2px;
}
.laptop-notch{ /* hinge indent at the deck's center */
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:96px;height:7px;border-radius:0 0 9px 9px;background:#0d0f14;
}
.fl-floor{fill:#d8d8dc}
.fl-shadow{fill:#c8c8cc}
.fl-desk{fill:#ececef}
.fl-deskedge{fill:#c6c6ce}
.fl-deskhi{fill:rgba(255,255,255,.55)}
.fl-desk2{fill:#b0b0b8}
.fl-screen{fill:#141824}
.fl-led{fill:#00e8ff}
.fl-led2{fill:#c47a20}
.fl-tower{fill:#d2d2d8}
.fl-tower2{fill:#b8b8c0}
.fl-vent{fill:#a6a6ae}
.fl-chair2{fill:#5c5c66}
.fl-shirt-hi{fill:rgba(255,255,255,.15)}
.fl-skin-hi{fill:rgba(255,255,255,.20)}
.fl-skin-sh{fill:rgba(0,0,0,.10)}
.fl-frame{fill:#d4d4da}
.fl-sticky{fill:#f5e6a8}
.fl-keyboard{fill:#e2e2e8}
.fl-key{fill:#c8c8d0}
.fl-mousepad{fill:#d8d8de}
.fl-mouse{fill:#e8e8ee}
.fl-laptop{fill:#c4c4cc}
.fl-tech{fill:#b8b8c0}
.fl-tech-wire{stroke:#a8a8b0;fill:none;stroke-linecap:round}
.fl-headphones{fill:none;stroke:#3a3a42;stroke-width:3;stroke-linecap:round}
.fl-headband{stroke:#3a3a42;fill:none;stroke-linecap:round}
.fl-earcup{fill:#4a4a52}
.fl-chair{fill:#4a4a52}
.fl-chair-base{stroke:#3a3a42;fill:none;stroke-linecap:round}
.fl-chair-wheel{fill:#2a2a30}
.fl-skin{fill:#F2B98F}
.fl-hair{fill:#2a2a30}
.fl-shirt{fill:#00ced1}
.fl-shirt2{fill:#00a8b0}
.fl-pants{stroke:#3a3a42}
.fl-pants2{stroke:#333338}
.fl-sleeve{stroke:#00ced1}
.fl-sleeve2{stroke:#00a8b0}
.fl-shoe{fill:#2a2a30}
.limb{fill:none;stroke-linecap:round;stroke-linejoin:round}
[data-theme="dark"] .fl-floor{fill:#2a2e3a}
[data-theme="dark"] .fl-shadow{fill:#1e2230}
[data-theme="dark"] .fl-desk{fill:#3a3e4c}
[data-theme="dark"] .fl-deskedge{fill:#2c3040}
[data-theme="dark"] .fl-deskhi{fill:rgba(255,255,255,.14)}
[data-theme="dark"] .fl-desk2{fill:#4a4e5c}
[data-theme="dark"] .fl-tower{fill:#454a58}
[data-theme="dark"] .fl-tower2{fill:#3a3e4c}
[data-theme="dark"] .fl-vent{fill:#5a5e6c}
[data-theme="dark"] .fl-frame{fill:#5a5e6c}
[data-theme="dark"] .fl-keyboard{fill:#4a4e5c}
[data-theme="dark"] .fl-key{fill:#5a5e6c}
[data-theme="dark"] .fl-mousepad{fill:#3a3e4c}
[data-theme="dark"] .fl-mouse{fill:#5a5e6c}
[data-theme="dark"] .fl-laptop{fill:#5a5e6c}
[data-theme="dark"] .fl-tech{fill:#5a5e6c}
#walker2{animation:walkIn2 12s linear infinite}
@keyframes walkIn2{
  0%{transform:translateX(250px)}30%{transform:translateX(0)}
  31%,100%{transform:translateX(0);opacity:0}0%,30.9%{opacity:1}
}
#walker2 .wBounce{animation:wBounce 12s ease-in-out infinite}
@keyframes wBounce{
  0%,3.75%,7.5%,11.25%,15%,18.75%,22.5%,26.25%,30%,100%{transform:translateY(0)}
  1.875%,5.625%,9.375%,13.125%,16.875%,20.625%,24.375%,28.125%{transform:translateY(-8px)}
}
#walker2 .wleg1{animation:wswingA 12s ease-in-out infinite}
#walker2 .wleg2{animation:wswingB 12s ease-in-out infinite}
#walker2 .warm1{animation:wswingB 12s ease-in-out infinite}
#walker2 .warm2{animation:wswingA 12s ease-in-out infinite}
@keyframes wswingA{0%{transform:rotate(-26deg)}3.75%{transform:rotate(26deg)}7.5%{transform:rotate(-26deg)}11.25%{transform:rotate(26deg)}15%{transform:rotate(-26deg)}18.75%{transform:rotate(26deg)}22.5%{transform:rotate(-26deg)}26.25%{transform:rotate(26deg)}30%,100%{transform:rotate(0)}}
@keyframes wswingB{0%{transform:rotate(26deg)}3.75%{transform:rotate(-26deg)}7.5%{transform:rotate(26deg)}11.25%{transform:rotate(-26deg)}15%{transform:rotate(26deg)}18.75%{transform:rotate(-26deg)}22.5%{transform:rotate(26deg)}26.25%{transform:rotate(-26deg)}30%,100%{transform:rotate(0)}}
#walker2 .wHead{animation:wHead 12s ease-in-out infinite}
@keyframes wHead{0%,7.5%,15%,22.5%,30%,100%{transform:rotate(3deg)}3.75%,11.25%,18.75%,26.25%{transform:rotate(-3deg)}}
#sitter2{opacity:0;animation:sitIn2 12s linear infinite}
@keyframes sitIn2{0%,30.5%{opacity:0}31.5%,100%{opacity:1}}
#sitter2 .plop{animation:plop 12s cubic-bezier(.34,1.32,.5,1) infinite}
@keyframes plop{0%,30.5%{transform:translateY(-24px) scaleY(1)}33%{transform:translateY(4px) scaleY(.97)}35.5%{transform:translateY(-2px) scaleY(1.01)}38%,100%{transform:translateY(0) scaleY(1)}}
#sitter2 .headBob{animation:headBob 12s ease-in-out infinite}
@keyframes headBob{0%,37%{transform:rotate(0)}49%{transform:rotate(-2deg)}61%{transform:rotate(1.5deg)}73%{transform:rotate(-2deg)}85%{transform:rotate(1.5deg)}96%,100%{transform:rotate(0)}}
#sitter2 .chairSquish{animation:chairSquish 12s ease-out infinite}
@keyframes chairSquish{0%,32%{transform:scaleY(1)}34%{transform:scaleY(.94)}36.5%{transform:scaleY(1.02)}39%,100%{transform:scaleY(1)}}
#sitter2 .tArm1{animation:type1 12s ease-in-out infinite}
#sitter2 .tArm2{animation:type2 12s ease-in-out infinite}
@keyframes type1{0%,38%{transform:rotate(0)}42%{transform:rotate(-5deg)}46%{transform:rotate(0)}50%{transform:rotate(-5deg)}54%{transform:rotate(0)}58%{transform:rotate(-5deg)}62%{transform:rotate(0)}66%{transform:rotate(-5deg)}70%{transform:rotate(0)}74%{transform:rotate(-5deg)}78%{transform:rotate(0)}82%{transform:rotate(-5deg)}86%{transform:rotate(0)}90%{transform:rotate(-5deg)}94%,100%{transform:rotate(0)}}
@keyframes type2{0%,40%{transform:rotate(0)}44%{transform:rotate(-5deg)}48%{transform:rotate(0)}52%{transform:rotate(-5deg)}56%{transform:rotate(0)}60%{transform:rotate(-5deg)}64%{transform:rotate(0)}68%{transform:rotate(-5deg)}72%{transform:rotate(0)}76%{transform:rotate(-5deg)}80%{transform:rotate(0)}84%{transform:rotate(-5deg)}88%{transform:rotate(0)}92%{transform:rotate(-5deg)}96%,100%{transform:rotate(0)}}
.eyes{animation:blink 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes blink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}}
.codeL{stroke-linecap:round;stroke-width:6;stroke-dasharray:80;stroke-dashoffset:80}
.codeL.k1{stroke:#00e8ff;animation:codeA 12s linear infinite}
.codeL.k2{stroke:#00ced1;animation:codeB 12s linear infinite}
.codeL.k3{stroke:#5eead4;animation:codeC 12s linear infinite}
.codeL.k4{stroke:#c47a20;animation:codeD 12s linear infinite}
@keyframes codeA{0%,38%{stroke-dashoffset:80}48%,100%{stroke-dashoffset:0}}
@keyframes codeB{0%,50%{stroke-dashoffset:80}60%,100%{stroke-dashoffset:0}}
@keyframes codeC{0%,62%{stroke-dashoffset:80}72%,100%{stroke-dashoffset:0}}
@keyframes codeD{0%,74%{stroke-dashoffset:80}84%,100%{stroke-dashoffset:0}}
.screen-glow{animation:glow 12s linear infinite;opacity:0}
@keyframes glow{0%,34%{opacity:0}40%,100%{opacity:1}}
.sym{opacity:0;font-family:var(--mono);font-weight:600;font-size:19px}
.sym.s1{fill:#00e8ff;animation:symPop1 12s ease-out infinite}
.sym.s2{fill:#00ced1;animation:symPop2 12s ease-out infinite}
.sym.s3{fill:#c47a20;animation:symPop3 12s ease-out infinite}
@keyframes symPop1{0%,42%{opacity:0;transform:translateY(8px)}46%{opacity:1;transform:translateY(-6px)}56%{opacity:0;transform:translateY(-20px)}100%{opacity:0}}
@keyframes symPop2{0%,58%{opacity:0;transform:translateY(8px)}62%{opacity:1;transform:translateY(-6px)}72%{opacity:0;transform:translateY(-20px)}100%{opacity:0}}
@keyframes symPop3{0%,76%{opacity:0;transform:translateY(8px)}80%{opacity:1;transform:translateY(-6px)}90%{opacity:0;transform:translateY(-20px)}100%{opacity:0}}
.work-copy h2{font-size:clamp(1.85rem,3.8vw,2.75rem);margin:0 0 18px}
.work-copy p{color:var(--muted);max-width:48ch;margin-bottom:12px}
.feature-list{list-style:none;margin-top:22px;display:grid;gap:12px}
.feature-list li{
  display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r);
  border:1px solid var(--stroke);background:var(--surface-strong);font-size:.92rem;
}
.feature-list .ic{
  flex-shrink:0;width:32px;height:32px;border-radius:8px;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;color:var(--primary);
}
.feature-list .ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.clients{padding:48px 0 110px;overflow:hidden}
.marquee-wrap{overflow:hidden}
.marquee{display:flex;gap:22px;width:max-content;animation:slide 42s linear infinite;padding:10px 0}
.marquee:hover{animation-play-state:paused}
/* Static mode: each review shown once, centered, wrapping — no looping/repeat. */
.marquee.is-static{width:auto;max-width:1120px;margin:0 auto;flex-wrap:wrap;justify-content:center;animation:none}
.tcard{
  width:340px;flex-shrink:0;padding:26px;border-radius:var(--r);border:1px solid var(--stroke);
  background:var(--card-bg);box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease-out),border-color .35s var(--ease);
}
.tcard:hover{transform:translateY(-4px);border-color:var(--primary)}
.tcard .stars{color:var(--amber);letter-spacing:2px;font-size:.95rem}
.tcard p{font-size:.9rem;margin:12px 0 18px;color:var(--text)}
.tcard .who{display:flex;align-items:center;gap:12px}
.tcard .avatar{
  width:44px;height:44px;border-radius:50%;background:var(--accent-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex-shrink:0;
}
.tcard .who b{font-size:.88rem;display:block;font-weight:600}
.tcard .who span{font-size:.76rem;color:var(--muted)}

.offers{padding:32px 0 110px}
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px;align-items:stretch}
.plan{
  padding:32px 28px;border-radius:var(--r);border:1px solid var(--stroke);
  background:var(--card-bg);position:relative;display:flex;flex-direction:column;
  transition:transform .35s var(--ease-out),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.plan:hover{transform:translateY(-4px);border-color:var(--primary)}
.plan.pro{border-color:var(--primary);box-shadow:var(--btn-primary-shadow)}
.plan .flag{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--primary);color:#fff;font-size:.68rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:99px;white-space:nowrap;
}
.plan h3{font-family:var(--body);font-size:1.2rem;font-weight:700}
.plan .price{font-family:var(--display);font-weight:700;font-size:2.1rem;margin:12px 0 2px;color:var(--primary)}
.plan .per{font-size:.78rem;color:var(--muted);margin-bottom:22px}
.plan ul{list-style:none;margin-bottom:28px;display:grid;gap:10px;flex:1}
.plan li{font-size:.86rem;color:var(--muted);display:flex;gap:10px;align-items:flex-start}
.plan li::before{content:"✓";color:var(--primary);font-weight:700;flex-shrink:0}
.plan .btn{margin-top:auto;justify-content:center;width:100%}
.pricing-note{
  text-align:center;font-size:.85rem;color:var(--muted);margin-top:28px;max-width:520px;margin-inline:auto;
}

.suit{padding:16px 0 110px}
.suit-inner{
  border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;
  min-height:420px;border:1px solid var(--stroke);background:var(--card-bg);
}
.suit-img{position:relative;min-height:280px;background:var(--surface)}
.suit-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.suit-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 20%,var(--bg-elev) 85%);
}
[data-theme="dark"] .suit-img::after{background:linear-gradient(90deg,transparent 20%,rgba(18,21,30,.96) 85%)}
.suit-copy{padding:clamp(32px,5vw,56px);display:flex;flex-direction:column;justify-content:center}
.suit-copy h2{font-size:clamp(1.75rem,3.5vw,2.5rem);margin:0 0 16px}
.suit-copy p{color:var(--muted);margin-bottom:12px;max-width:46ch}
.suit-copy .btn{align-self:flex-start;margin-top:12px}

.contact{padding:16px 0 120px}
.contact-inner{max-width:640px;margin:0 auto}
.contact-form{margin-top:32px;display:grid;gap:16px}
.field{display:grid;gap:6px;text-align:left}
.field.row{grid-template-columns:1fr 1fr;gap:16px}
.field.row > .field label{min-height:2.5em}
.field label{font-size:.78rem;font-weight:600;color:var(--muted)}
.field input,.field textarea,.field select{
  font-family:var(--body);font-size:.95rem;color:var(--text);
  padding:13px 15px;border-radius:var(--r);border:1px solid var(--stroke);
  background:var(--surface-strong);transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--placeholder)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--primary);box-shadow:var(--focus-ring);
}
.field textarea{resize:vertical;min-height:128px}
.field-error{font-size:.78rem;color:#c0392b;min-height:1.1em}
[data-theme="dark"] .field-error{color:#ff8fa3}
.contact-form .btn{justify-content:center;margin-top:4px}
.form-status{min-height:22px;font-size:.88rem;text-align:center}
.form-status.ok{color:var(--primary)}
.form-status.err{color:#c0392b}
[data-theme="dark"] .form-status.err{color:#ff8fa3}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:#c0392b}
.contact-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px;
  font-size:.82rem;color:var(--muted);text-align:center;
}
.contact-steps span{padding:10px;border-radius:var(--r);border:1px solid var(--stroke);background:var(--surface)}

/* leave-a-review */
.review{padding:8px 0 120px}
.review-inner{max-width:640px;margin:0 auto}
.rating{display:inline-flex;gap:4px}
.rating .star{
  font-size:1.75rem;line-height:1;background:none;border:none;cursor:pointer;padding:2px 3px;
  color:var(--muted);opacity:.35;transition:color .15s var(--ease),opacity .15s var(--ease),transform .15s var(--ease);
}
.rating .star:hover{transform:scale(1.15)}
.rating .star.on{color:var(--amber);opacity:1}
.tcard .stars .stars-empty{color:var(--muted);opacity:.4}

footer{border-top:1px solid var(--stroke);background:var(--bg-elev);padding:56px 0 36px}
.foot-grid{display:grid;grid-template-columns:1.3fr 2fr;gap:36px}
.foot-grid p{color:var(--muted);font-size:.86rem;max-width:300px;margin-top:14px}
.foot-col h3{font-family:var(--body);font-size:.92rem;font-weight:700;margin-bottom:14px}
.foot-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px 28px}
.foot-col a{
  display:flex;align-items:center;gap:10px;color:var(--muted);text-decoration:none;
  font-size:.88rem;margin-bottom:10px;transition:color .25s var(--ease);
}
.foot-col a:hover{color:var(--text)}
.foot-col .ic{
  width:30px;height:30px;border-radius:8px;background:var(--surface);border:1px solid var(--stroke);
  display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;
}
.foot-note{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--stroke);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.78rem;
}

.contact-fab{
  position:fixed;right:20px;bottom:20px;z-index:90;display:none;
  padding:14px 22px;border-radius:99px;background:var(--primary);color:#fff;
  text-decoration:none;font-weight:600;font-size:.9rem;box-shadow:var(--btn-primary-shadow);
  transition:transform .35s var(--ease-out);
}
.contact-fab:hover{transform:translateY(-2px)}

@media(min-width:1021px) and (max-width:1280px){
  .laptop{max-width:400px}
}
@media(max-width:1020px){
  .nav-links{display:none}.burger{display:flex}
  .hero-grid,.work-grid{grid-template-columns:1fr}
  .hero3d{height:420px}
  .offer-grid{grid-template-columns:1fr;max-width:440px;margin:8px auto 0}
  .suit-inner{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .pcard{width:min(240px,82vw);left:calc(min(240px,82vw)/-2);top:-105px}
  .contact-steps{grid-template-columns:1fr}
  .contact-fab{display:inline-flex}
}
@media(max-width:560px){
  .hero{padding-top:calc(var(--header-h) + 48px)}.stats{gap:22px}
  .hero3d{height:340px}
  .pcard{width:min(210px,86vw);left:calc(min(210px,86vw)/-2);top:-98px}
  .pcard .thumb{height:120px}
  .foot-grid{grid-template-columns:1fr}
  .field.row{grid-template-columns:1fr}
  .toggle-group button{padding:8px 10px;font-size:.68rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  html.js .reveal:not(.in){opacity:1;transform:none}
}

.hint-mobile,.sub-mobile,.mobile-menu-tools{display:none}
.foot-col .foot-call-mobile{display:none}

[data-display="mobile"]{
  --canvas-display:none;
  --particle-opacity:0;
}
[data-display="mobile"] .nav-right .theme-toggle,
[data-display="mobile"] .nav-right .toggle-group.lang{display:none}
[data-display="mobile"] .mobile-menu{padding-bottom:140px}
[data-display="mobile"] .mobile-menu-tools{
  position:absolute;left:50%;bottom:max(32px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
[data-display="mobile"] .mobile-menu .theme-toggle{width:48px;height:48px;min-width:48px;min-height:48px}
[data-display="mobile"] .mobile-menu-lang button{min-width:72px;min-height:48px;font-size:.82rem}
[data-display="mobile"] #bgCanvas,
[data-display="mobile"] #cardCanvas,
[data-display="mobile"] #globeCanvas{display:none}
[data-display="mobile"] .hint-desktop,
[data-display="mobile"] .sub-desktop,
[data-display="mobile"] .foot-col .foot-call-desktop{display:none}
[data-display="mobile"] .hint-mobile,
[data-display="mobile"] .sub-mobile,
[data-display="mobile"] .foot-col .foot-call-mobile{display:flex}
[data-display="mobile"] .sub-mobile{display:block;margin-left:auto;margin-right:auto}
[data-display="mobile"] .nav{padding-top:max(14px,env(safe-area-inset-top));padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
[data-display="mobile"] .hero3d{height:220px;background:var(--surface-strong)}
[data-display="mobile"] .hero3d .hint{font-size:.82rem}
[data-display="mobile"] .projects-wrap{height:auto;padding:48px 0 64px}
[data-display="mobile"] .projects-stage{position:relative;height:auto;padding:0 0 24px}
[data-display="mobile"] .scroll-hint{display:none}
[data-display="mobile"] .orbit-scene{perspective:none;transform:none;min-height:0;padding:0;display:block}
[data-display="mobile"] .ring{position:relative;width:100%;height:auto;display:grid;grid-template-columns:1fr;gap:16px;padding:0 clamp(20px,4vw,48px)}
[data-display="mobile"] .pcard{position:relative;left:auto;top:auto;width:100%;transform:none!important;opacity:1!important;pointer-events:auto;filter:none}
[data-display="mobile"] .pcard.is-behind{opacity:1;filter:none}
[data-display="mobile"] .pcard .thumb{height:160px}
[data-display="mobile"] .pcard .tag{font-size:.72rem}
[data-display="mobile"] .marquee-wrap{overflow:visible}
[data-display="mobile"] .marquee{display:grid;grid-template-columns:1fr;gap:16px;width:100%;animation:none;padding:0 clamp(20px,4vw,48px)}
[data-display="mobile"] .tcard{width:100%;max-width:100%}
[data-display="mobile"] .contact-fab{bottom:max(20px,env(safe-area-inset-bottom));right:max(20px,env(safe-area-inset-right))}
[data-display="mobile"] .desk-frame,[data-display="mobile"] .laptop{display:none}
[data-display="mobile"] .strip-track,[data-display="mobile"] .marquee{animation-play-state:paused}
[data-display="mobile"] .plan .flag{font-size:.75rem}
[data-display="mobile"] .mobile-menu-login{
  font-size:1.05rem;font-weight:600;color:var(--primary);text-decoration:none;
  padding:8px 0;margin-top:8px;
}

.auth-page{min-height:100vh}
.auth-main{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--header-h) + 32px) clamp(20px,4vw,48px) 48px;
}
.auth-card{
  width:100%;max-width:440px;padding:clamp(28px,5vw,40px);
  background:var(--card-bg);border:1px solid var(--stroke);border-radius:calc(var(--r) + 4px);
  box-shadow:var(--card-shadow);
}
.auth-card h1{font-size:clamp(1.75rem,4vw,2.25rem);margin:0 0 10px}
.auth-lead{color:var(--muted);font-size:.98rem;margin-bottom:24px}
.auth-form{margin-top:0}
.auth-foot{margin-top:20px;font-size:.9rem}
.auth-foot a{color:var(--primary);text-decoration:none;font-weight:600}
.auth-foot a:hover{text-decoration:underline}
.auth-portal-placeholder{
  margin:24px 0;padding:28px 20px;border:1px dashed var(--stroke);border-radius:var(--r);
  text-align:center;color:var(--muted);font-weight:600;background:var(--surface);
}
.form-status.error{color:#c0392b}

.ij-cms-preview-banner{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  padding:10px 16px;text-align:center;
  background:#046e58;color:#fff;font:600 .85rem/1.3 var(--body);
  box-shadow:0 2px 12px rgba(0,0,0,.12);
}

/* ===== Customer-service assistant widget ===== */
.ij-assist{position:fixed;right:20px;bottom:20px;z-index:1200;font-family:var(--body)}

.ij-assist-fab{
  width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;
  display:grid;place-items:center;
  background:linear-gradient(180deg,var(--primary),var(--primary-hover));
  color:#fff;box-shadow:var(--btn-primary-shadow),0 8px 24px rgba(0,0,0,.18);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.ij-assist-fab:hover{transform:translateY(-2px) scale(1.04)}
.ij-assist-fab-icon{font-size:1.5rem;line-height:1}
.ij-assist.is-open .ij-assist-fab{transform:scale(.9);opacity:.85}

.ij-assist-panel{
  position:absolute;right:0;bottom:74px;width:min(370px,calc(100vw - 40px));
  height:min(540px,calc(100vh - 120px));display:flex;flex-direction:column;
  background:var(--card-bg);border:1px solid var(--stroke);border-radius:18px;
  box-shadow:var(--shadow-lg),0 24px 64px rgba(0,0,0,.28);overflow:hidden;
  animation:ijAssistIn .28s var(--ease-out);
}
/* An author `display` overrides the [hidden] attribute, so honor `hidden`
   explicitly (higher specificity) — this is what lets the ✕ and toggle close. */
.ij-assist-panel[hidden]{display:none}
@keyframes ijAssistIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

.ij-assist-head{
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  background:linear-gradient(180deg,var(--primary),var(--primary-hover));color:#fff;
}
.ij-assist-head-txt{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.ij-assist-title{font-family:var(--display);font-size:1rem}
.ij-assist-sub{font-size:.78rem;opacity:.85}
.ij-assist-x{
  background:rgba(255,255,255,.15);border:none;color:#fff;cursor:pointer;
  width:30px;height:30px;border-radius:8px;font-size:.9rem;line-height:1;
  transition:background .2s var(--ease);
}
.ij-assist-x:hover{background:rgba(255,255,255,.28)}

.ij-assist-log{
  flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;
  background:var(--bg-base);
}
.ij-msg{
  max-width:82%;padding:10px 13px;border-radius:14px;font-size:.9rem;line-height:1.5;
  word-wrap:break-word;white-space:normal;
}
.ij-msg-bot{align-self:flex-start;background:var(--surface-strong);color:var(--text);
  border:1px solid var(--stroke);border-bottom-left-radius:4px}
.ij-msg-user{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:4px}

.ij-typing{display:flex;gap:4px;align-items:center}
.ij-typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);
  animation:ijBlink 1.2s infinite ease-in-out}
.ij-typing span:nth-child(2){animation-delay:.2s}
.ij-typing span:nth-child(3){animation-delay:.4s}
@keyframes ijBlink{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}

.ij-assist-form{
  display:flex;gap:8px;align-items:flex-end;padding:10px 12px;
  border-top:1px solid var(--stroke);background:var(--card-bg);
}
.ij-assist-input{
  flex:1;resize:none;max-height:120px;padding:10px 12px;font:inherit;font-size:.9rem;
  color:var(--text);background:var(--surface);border:1px solid var(--stroke);
  border-radius:12px;line-height:1.4;
}
.ij-assist-input::placeholder{color:var(--placeholder)}
.ij-assist-send{
  flex:none;width:40px;height:40px;border:none;border-radius:12px;cursor:pointer;
  background:var(--primary);color:#fff;font-size:1rem;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.ij-assist-send:hover{background:var(--primary-hover);transform:translateY(-1px)}

@media (max-width:1020px){
  .ij-assist{right:14px;bottom:14px}
  .ij-assist-panel{bottom:70px;height:min(70vh,540px)}
  /* Lift the existing "Contact" pill so it stacks above the chat bubble
     instead of overlapping it (this selector matches the mobile rule's
     specificity and wins by being later in the file). */
  [data-display="mobile"] .contact-fab{
    bottom:max(88px,calc(env(safe-area-inset-bottom) + 74px));
    right:max(14px,env(safe-area-inset-right));
  }
}