:root{--bg:#05070a;--text:#f4f7fb;--muted:#788392;--cyan:#80d7ff;--violet:#8e7dff;--line:#ffffff16;--scroll:0}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}.progress{position:fixed;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,var(--cyan),var(--violet));transform-origin:left;z-index:80}.nav{position:fixed;inset:0 0 auto;z-index:50;padding:24px 5vw;display:flex;justify-content:space-between;align-items:center}.brand{font-weight:800;letter-spacing:.18em}.nav span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.16em}.hero{min-height:100svh;display:grid;place-items:center;padding:100px 5vw 60px;position:relative}.copy{position:relative;z-index:5;text-align:center;max-width:1040px}.eyebrow{text-transform:uppercase;letter-spacing:.22em;color:var(--cyan);font-size:11px}h1,h2{letter-spacing:-.065em;line-height:.92;margin:14px 0}h1{font-size:clamp(60px,11vw,158px)}h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #ffffffaa}.lead{max-width:650px;margin:28px auto;color:#99a3af;font-size:20px}.stage{position:absolute;inset:8vh 5vw 5vh;perspective:1200px;pointer-events:none}.world{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s ease}.orb{position:absolute;border-radius:50%;filter:blur(.2px);box-shadow:0 0 80px #80d7ff22}.o1{width:190px;height:190px;left:10%;top:17%;background:radial-gradient(circle at 30% 30%,#b6edff,#2d708d 48%,#08131d 75%);transform:translateZ(120px) translateY(calc(var(--scroll)*120px))}.o2{width:90px;height:90px;right:17%;top:24%;background:radial-gradient(circle at 35% 30%,#c4baff,#5947b4 52%,#120d30);transform:translateZ(220px) translateY(calc(var(--scroll)*-170px))}.o3{width:120px;height:120px;right:27%;bottom:12%;background:radial-gradient(circle at 35% 35%,#c2ffe7,#397e67 55%,#081b16);transform:translateZ(80px) translateY(calc(var(--scroll)*-90px))}.ring{position:absolute;border:1px solid #ffffff20;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%) rotateX(72deg)}.r1{width:62vw;height:62vw}.r2{width:42vw;height:42vw;border-color:#80d7ff33;transform:translate(-50%,-50%) rotateX(64deg) rotateZ(35deg)}.grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(transparent,#000 35%,#000 70%,transparent);transform:perspective(600px) rotateX(62deg) translateY(35%)}.section{min-height:100vh;padding:100px 8vw;display:grid;align-items:center;border-top:1px solid var(--line)}.section-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}.section h2{font-size:clamp(54px,8vw,108px)}.section p{color:#909ba8;font-size:20px;max-width:570px}.panel{min-height:520px;border:1px solid var(--line);border-radius:30px;background:radial-gradient(circle at 70% 30%,#80d7ff18,transparent 28%),#090d13;position:relative;overflow:hidden}.panel::before,.panel::after{content:"";position:absolute;border:1px solid #ffffff18}.panel::before{width:55%;height:55%;left:14%;top:20%;transform:rotate(28deg)}.panel::after{width:42%;height:42%;right:12%;bottom:15%;border-radius:50%;border-color:#8e7dff55}.numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px}.number{border-top:1px solid var(--line);padding-top:16px}.number strong{font-size:30px}.number span{display:block;color:var(--muted);font-size:12px}.final{text-align:center}.final h2{max-width:1000px;margin:auto}.final p{margin:28px auto}.signature{margin-top:60px;color:var(--muted);letter-spacing:.2em;font-size:12px}.reveal{opacity:0;transform:translateY(30px);transition:.8s}.reveal.visible{opacity:1;transform:none}@media(max-width:850px){.section-grid{grid-template-columns:1fr}.panel{min-height:360px}.r1{width:95vw;height:95vw}.r2{width:70vw;height:70vw}.numbers{grid-template-columns:1fr}.nav span{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.world{transform:none!important}.reveal{opacity:1;transform:none;transition:none}}
/* mobile-hardening-2026-09-29 */
html,body{width:100%;max-width:100%;overflow-x:clip;-webkit-text-size-adjust:100%;touch-action:pan-y}
main,.hero,.section,.section-grid,.copy,.stage,.world,.panel{min-width:0}
@media(max-width:850px){
  .nav{padding:20px;max-width:100vw}
  .hero{min-height:100svh;width:100%;max-width:100vw;padding:96px 20px 64px;overflow:hidden;place-items:end start}
  .copy{width:100%;max-width:100%;text-align:left}
  h1{font-size:clamp(48px,14vw,72px);line-height:.92;overflow-wrap:normal}
  .lead{max-width:34rem;margin:20px 0 0;font-size:17px}
  .stage{inset:64px -24vw 0;max-width:none;perspective:800px;overflow:hidden}
  .world{max-width:none}
  .o1{width:130px;height:130px;left:20%;top:15%}
  .o2{width:72px;height:72px;right:24%;top:26%}
  .o3{width:88px;height:88px;right:34%;bottom:14%}
  .r1{width:125vw;height:125vw}
  .r2{width:88vw;height:88vw}
  .grid{background-size:44px 44px}
  .section{width:100%;max-width:100vw;min-height:auto;padding:88px 20px}
  .section-grid{width:100%;grid-template-columns:1fr;gap:38px}
  .section h2{font-size:clamp(42px,12vw,64px);line-height:.94}
  .section p{font-size:17px;max-width:100%}
  .panel{width:100%;min-height:300px;border-radius:22px}
  .numbers{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .number strong{font-size:24px}
  .final{text-align:left}
  .final h2{max-width:100%;margin:0}
  .final p{margin:24px 0}
}
@media(max-width:480px){
  .numbers{grid-template-columns:1fr}
  .stage{inset:64px -34vw 0}
  .panel{min-height:250px}
}

/* portfolio-polish-2026-09-29 */
:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}.nav{background:linear-gradient(to bottom,rgba(5,7,10,.78),transparent)}.brand{position:relative}.brand::after{content:"";position:absolute;left:0;bottom:-8px;width:32%;height:1px;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}.panel{transition:transform .6s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s}.panel:hover{transform:perspective(900px) rotateX(1.5deg) rotateY(-2deg) translateY(-4px);border-color:#ffffff30;box-shadow:0 30px 80px rgba(0,0,0,.28)}.panel::before{box-shadow:40px 26px 0 -1px #80d7ff12}.panel::after{box-shadow:-30px -18px 0 -1px #8e7dff16}.number strong{background:linear-gradient(90deg,var(--text),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:850px){.panel:hover{transform:none}.nav{background:linear-gradient(to bottom,rgba(5,7,10,.9),transparent)}.copy{padding-bottom:max(8px,env(safe-area-inset-bottom))}}

@media(max-width:850px){
  .nav{gap:14px}
  .nav span{display:flex!important;gap:10px;max-width:70vw;overflow-x:auto;white-space:nowrap}
  .nav span a{font-size:11px}
}
