*{box-sizing:border-box}
:root{
  --bg:#06100e;
  --ink:#f3f8f6;
  --muted:rgba(235,245,241,.68);
  --faint:rgba(235,245,241,.42);
  --accent:#5be0c4;
  --accent-2:#99f7e2;
  --line:rgba(255,255,255,.14);
  --edge:clamp(22px,5vw,84px);
  --phone-w:clamp(252px,18vw,326px);
  --phone-h:calc(var(--phone-w) * 2.16);
}
html{scroll-behavior:auto;background:#030706}
body{margin:0;overflow-x:hidden;background:#030706;color:var(--ink);font-family:Inter,"SF Pro Display","PingFang SC","Microsoft YaHei UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
main{position:relative;z-index:1}
.scroll-spacer{position:relative;height:800vh;width:1px;pointer-events:none}
.cinematic-stage{position:fixed;inset:0;width:100%;height:100dvh;overflow:hidden;isolation:isolate}
.scene{position:absolute;inset:0;width:100%;height:100%;will-change:opacity,transform,filter}
.phone-scene,.works-scene,.closing-scene{opacity:0;pointer-events:none}

.background-canvas{position:fixed;inset:0;z-index:0;width:100vw;height:100dvh;overflow:hidden;background:radial-gradient(circle at 18% 18%,rgba(42,199,174,.2),transparent 31%),radial-gradient(ellipse at 84% 22%,rgba(93,91,190,.16),transparent 34%),radial-gradient(ellipse at 55% 86%,rgba(220,171,82,.08),transparent 36%),linear-gradient(135deg,#020504 0%,#071410 48%,#030706 100%)}
.background-canvas::before{content:"";position:absolute;inset:-16%;background:linear-gradient(115deg,transparent 0 28%,rgba(180,255,237,.08) 29%,transparent 31% 58%,rgba(255,218,137,.045) 59%,transparent 61%),repeating-linear-gradient(100deg,rgba(180,255,237,.055) 0 1px,transparent 1px 42px);opacity:.72;transform:rotate(-8deg);mask-image:radial-gradient(ellipse at center,#000 0%,#000 44%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse at center,#000 0%,#000 44%,transparent 78%)}
.background-canvas::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,transparent 0 36%,rgba(0,0,0,.38) 74%,rgba(0,0,0,.74) 100%),radial-gradient(circle,rgba(255,255,255,.06) .7px,transparent .9px);background-size:100% 100%,22px 22px;opacity:.8}

.site-header{position:fixed;top:clamp(12px,2.6vh,26px);left:50%;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:min(720px,calc(100vw - 48px));height:54px;padding:0 18px;border:1px solid rgba(255,255,255,.11);border-radius:999px;background:rgba(7,13,12,.28);box-shadow:none;backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);transform:translateX(-50%)}
.brand{justify-self:start;text-decoration:none;font-size:11px;font-weight:720;letter-spacing:.16em;color:rgba(255,255,255,.8)}
.main-nav{grid-column:2;display:flex;align-items:center;gap:34px}
.main-nav a{position:relative;padding:12px 0;text-decoration:none;color:rgba(245,250,248,.68);font-size:13px;letter-spacing:.02em;transition:color .25s ease}
.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:1px;background:var(--accent-2);transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.main-nav a:hover{color:#fff}.main-nav a:hover::after{transform:scaleX(1)}

.icon{width:19px;height:19px;flex:0 0 19px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6}
.feature-icon{width:38px;height:38px;padding:7px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.4}
.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:54px;padding:0 25px;border:none;border-radius:999px;text-decoration:none;font-size:14px;font-weight:620;letter-spacing:.01em;white-space:nowrap;transition:transform 300ms cubic-bezier(.34,1.56,.64,1),background-color 240ms ease,color 240ms ease,border-color 240ms ease,box-shadow 240ms ease,backdrop-filter 240ms ease}
.button:hover{transform:translateY(-2px) scale(1.02)}
.button:active{transform:translateY(0) scale(.98)}
.button .icon-arrow{transition:transform 220ms ease}
.button:hover .icon-arrow{transform:translateX(4px)}
.button--primary{background:linear-gradient(120deg,rgb(43,203,174),rgb(9,128,108));color:#fff}
.button--primary:hover{background:linear-gradient(120deg,rgb(43,203,174),rgb(9,128,108));box-shadow:0 14px 38px rgba(43,203,108,.28)}
.hero-action.button--primary,.closing__actions .button--primary{min-height:48px;padding:0 18px;gap:10px;font-size:14px;font-weight:620}
.hero-action.button--primary .icon-arrow,.closing__actions .button--primary .icon-arrow{width:17px;height:17px;flex:0 0 17px}
.button--ghost{position:relative;background:transparent;color:var(--ink);border:none;box-shadow:0 16px 50px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04);isolation:isolate}
.button--ghost::before{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(5,15,13,.1);backdrop-filter:blur(20px) saturate(115%);-webkit-backdrop-filter:blur(20px) saturate(115%);content:"";transition:background-color 240ms ease;pointer-events:none}
.button--ghost:hover{color:var(--accent-2)}
.button--ghost:hover::before{background:rgba(99,229,203,.16)}
.hero-action.button--ghost,.closing__actions .button--ghost{padding:0 14px;box-shadow:none}
.hero-action.button--ghost::before,.closing__actions .button--ghost::before{background:rgba(5,15,13,.16)}

/* HERO scene */
.hero{position:absolute;inset:0;z-index:2}
#scene{position:absolute;inset:0;display:block;width:100%;height:100%;background:#07100e url("frames/frame_000_delay-0.042s.webp") center/cover no-repeat;transform-origin:center;will-change:opacity,transform,filter}
.hero-stage{position:absolute;inset:0;z-index:3;padding:0 var(--edge);pointer-events:none;will-change:opacity}
.hero__content{position:absolute;left:50%;top:47%;width:min(760px,calc(100vw - var(--edge) * 2));transform:translate(-50%,-50%);text-align:center;pointer-events:auto}
.hero h1{margin:0;font-size:clamp(44px,4.15vw,72px);font-weight:780;line-height:1.06;letter-spacing:.02em;color:#fff;text-wrap:balance}
.hero__content>p{max-width:620px;margin:22px auto 0;color:rgba(245,250,248,.74);font-size:clamp(15px,1.18vw,19px);line-height:1.8;letter-spacing:.01em}
.hero-cta{display:flex;justify-content:center;gap:12px;margin-top:44px;flex-wrap:wrap}
.hero h1,.hero__content>p,.hero-action,.scroll-cue{backface-visibility:hidden;will-change:opacity,transform,filter,clip-path}
.hero-step{backface-visibility:hidden;will-change:opacity,transform}
.hero-step__line{will-change:opacity,transform}
.hero-steps{position:absolute;left:50%;bottom:clamp(38px,7vh,72px);display:flex;justify-content:center;align-items:stretch;gap:clamp(20px,3vw,42px);width:min(860px,calc(100vw - var(--edge) * 2));transform:translateX(-50%);pointer-events:none}
.hero-step{position:relative;display:grid;grid-template-columns:42px 1fr;align-items:center;gap:12px;width:min(240px,32%);min-width:0;padding:36px 0 10px;color:#fff;pointer-events:auto}
.hero-step--1,.hero-step--2,.hero-step--3{top:auto;left:auto}
.hero-step__number{position:absolute;top:8px;left:0;font:520 11px/1 Arial,sans-serif;letter-spacing:.15em;color:rgba(255,255,255,.9)}
.hero-step__line{position:absolute;top:27px;left:0;width:100%;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(153,247,226,.06))}
.hero-step .feature-icon{color:#fff}
.hero-step h3{margin:0;font-size:14px;font-weight:650;line-height:1.25}.hero-step p{margin:5px 0 0;color:rgba(240,247,244,.48);font-size:11px;line-height:1.5}
.scroll-cue{position:absolute;bottom:24px;left:50%;z-index:3;display:block;transform:translateX(-50%);pointer-events:auto}
.scroll-cue span{position:relative;display:block;width:22px;height:38px;border:1px solid rgba(255,255,255,.48);border-radius:999px}
.scroll-cue i{position:absolute;top:7px;left:50%;width:2px;height:7px;border-radius:2px;background:var(--accent-2);transform:translateX(-50%);animation:scrollDot 1.8s ease-in-out infinite}
@keyframes scrollDot{0%,100%{opacity:.25;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,13px)}}

/* 首屏入场前预隐藏，避免刷新时内容先闪现再播放入场；hero.js reveal() 会移除 .hero-pending */
.hero-pending .site-header,.hero-pending .hero h1,.hero-pending .hero__content>p,.hero-pending .hero-action,.hero-pending .hero-step,.hero-pending .hero-step__line,.hero-pending .scroll-cue{opacity:0;visibility:hidden}

.stage-kicker{position:absolute;top:clamp(90px,12vh,124px);left:var(--edge);z-index:8;display:flex;align-items:center;gap:12px;color:rgba(239,248,244,.42);font:600 10px/1 Arial,sans-serif;letter-spacing:.14em}
.stage-kicker i{display:block;width:34px;height:1px;background:rgba(153,247,226,.42)}

.scene-decor{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.decor-corner{position:absolute;width:clamp(42px,5.2vw,76px);height:clamp(42px,5.2vw,76px);border-color:rgba(214,255,244,.38);opacity:.72}
.decor-corner--tl{left:var(--edge);top:clamp(104px,13vh,142px);border-top:1px solid;border-left:1px solid}
.decor-corner--tr{right:var(--edge);top:clamp(104px,13vh,142px);border-top:1px solid;border-right:1px solid}
.decor-corner--bl{left:var(--edge);bottom:clamp(112px,15vh,168px);border-bottom:1px solid;border-left:1px solid}
.decor-corner--br{right:var(--edge);bottom:clamp(112px,15vh,168px);border-bottom:1px solid;border-right:1px solid}
.decor-line{position:absolute;display:block;background:linear-gradient(180deg,rgba(153,247,226,0),rgba(153,247,226,.42),rgba(153,247,226,0));opacity:.42}
.decor-line--left,.decor-line--right{top:27vh;width:1px;height:36vh}
.decor-line--left{left:calc(var(--edge) + 18px)}
.decor-line--right{right:calc(var(--edge) + 18px)}
.decor-dots{position:absolute;display:block;width:180px;height:116px;opacity:.32;background-image:radial-gradient(circle,rgba(235,255,248,.72) 1px,transparent 1.8px);background-size:18px 18px;mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
.decor-dots--hero{right:8vw;bottom:20vh}
.phone-decor,.works-decor,.closing-decor{z-index:3}
.decor-dots--phone-left{left:18vw;top:30vh;transform:rotate(-8deg)}
.decor-dots--phone-right{right:5vw;bottom:19vh;transform:rotate(7deg)}
.decor-rail{position:absolute;display:block;border:1px solid rgba(153,247,226,.18);border-left:0;border-right:0;opacity:.5}
.decor-rail--phone{left:8vw;right:7vw;top:18vh;height:58vh;transform:skewY(-4deg)}
.decor-ring{position:absolute;display:block;border:1px solid rgba(153,247,226,.18);border-radius:50%;opacity:.6}
.decor-ring--phone{right:16vw;top:21vh;width:min(32vw,460px);aspect-ratio:1.45;transform:rotate(-13deg)}
.decor-grid{position:absolute;display:block;opacity:.24;background-image:linear-gradient(rgba(153,247,226,.26) 1px,transparent 1px),linear-gradient(90deg,rgba(153,247,226,.2) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at center,#000 0%,#000 42%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at center,#000 0%,#000 42%,transparent 72%)}
.decor-grid--works{left:7vw;right:7vw;top:14vh;bottom:12vh;transform:perspective(900px) rotateX(58deg) translateY(14vh)}
.decor-line--works-top,.decor-line--works-bottom{left:9vw;right:9vw;width:auto;height:1px;background:linear-gradient(90deg,rgba(153,247,226,0),rgba(153,247,226,.34),rgba(153,247,226,0))}
.decor-line--works-top{top:16vh}
.decor-line--works-bottom{bottom:12vh}
.decor-dots--works{left:6vw;bottom:15vh;width:220px;height:90px;opacity:.22}
.decor-frame{position:absolute;display:block;border:1px solid rgba(235,255,248,.16);border-radius:28px;opacity:.78}
.decor-frame--closing{left:12vw;right:12vw;top:20vh;bottom:20vh}
.decor-slash{position:absolute;display:block;width:1px;height:38vh;background:linear-gradient(180deg,rgba(153,247,226,0),rgba(153,247,226,.32),rgba(153,247,226,0));opacity:.5;transform:rotate(24deg)}
.decor-slash--one{left:24vw;top:18vh}
.decor-slash--two{right:22vw;bottom:16vh}
.decor-dots--closing{right:17vw;top:24vh;width:160px;height:100px;opacity:.24}

/* PHONE scene — fixed stage, scroll only drives transition. */
.phone-stage{position:absolute;inset:0;overflow:hidden;isolation:isolate}
.phone-copy{position:absolute;left:var(--edge);top:50%;z-index:8;width:min(410px,31vw);transform:translateY(-46%)}
.phone-copy h2{margin:0;font-size:clamp(38px,4vw,66px);font-weight:730;line-height:1.08;letter-spacing:-.05em}
.phone-copy p{max-width:390px;margin:21px 0 0;color:var(--muted);font-size:14px;line-height:1.85}
.phone-status{display:flex;align-items:center;gap:10px;margin-top:26px;font:600 11px/1 Arial,sans-serif;letter-spacing:.12em;color:rgba(255,255,255,.48)}
.phone-status span:first-child{color:#fff}.phone-status i{width:42px;height:1px;background:rgba(255,255,255,.24)}
.phone-showcase{position:absolute;left:65%;top:51%;z-index:6;width:min(760px,52vw);height:min(730px,78vh);transform:translate(-50%,-50%);perspective:1200px;touch-action:pan-y;user-select:none}
.phone-track{position:absolute;inset:0;transform-style:preserve-3d}
.phone-slide{position:absolute;left:50%;top:50%;width:var(--phone-w);height:var(--phone-h);overflow:hidden;border-radius:clamp(34px,2.6vw,44px);background:#09110f;box-shadow:0 24px 70px rgba(0,0,0,.35);transform-style:preserve-3d;transform-origin:center;transition:transform .62s cubic-bezier(.22,.72,.24,1),opacity .5s ease,filter .5s ease;will-change:transform,opacity,filter;pointer-events:none}
.phone-slide video{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.01)}
.phone-slide.is-active{pointer-events:auto}
.phone-frame{position:absolute;left:50%;top:50%;z-index:8;width:var(--phone-w);height:var(--phone-h);border:clamp(5px,.44vw,8px) solid rgba(250,253,252,.96);border-radius:clamp(34px,2.6vw,44px);box-shadow:0 26px 80px rgba(0,0,0,.4),inset 0 0 0 1px rgba(0,0,0,.08);transform:translate(-50%,-50%);pointer-events:none}
.phone-frame::before,.phone-frame::after{content:"";position:absolute;top:18%;width:3px;height:46px;border-radius:3px;background:rgba(250,253,252,.98)}
.phone-frame::before{left:-7px}.phone-frame::after{right:-7px}
.phone-frame__notch{position:absolute;top:10px;left:50%;width:37%;height:21px;border-radius:999px;background:rgba(4,9,8,.66);transform:translateX(-50%)}
.phone-arrow{position:absolute;top:50%;z-index:60;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(4,11,9,.46);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;cursor:pointer;transition:background .25s ease,transform .25s ease,border-color .25s ease}
.phone-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.phone-arrow:hover{background:rgba(67,209,180,.46);border-color:rgba(153,247,226,.42)}.phone-arrow:active{transform:scale(.94)}
.phone-arrow--prev{left:4%}.phone-arrow--next{right:4%}
.phone-orbit{position:absolute;left:64%;top:52%;z-index:2;width:min(760px,54vw);aspect-ratio:1.7;border:1px solid rgba(153,247,226,.09);border-radius:50%;transform:translate(-50%,-50%) rotateX(66deg);box-shadow:0 0 80px rgba(72,221,192,.04),inset 0 0 80px rgba(72,221,192,.03)}

/* WORKS scene — 3D world driven by global scroll progress. */
.works-stage{position:absolute;inset:0;overflow:hidden;perspective:1500px;isolation:isolate}
.works-kicker{left:auto;right:var(--edge)}
.works-world{position:absolute;inset:0;z-index:4;transform-style:preserve-3d;perspective:inherit}
.work-card{position:absolute;left:50%;top:43%;display:block;width:min(52vw,900px);aspect-ratio:16/9;overflow:hidden;border:1px solid rgba(255,255,255,.17);border-radius:12px;background:#07100e;box-shadow:0 34px 110px rgba(0,0,0,.5);transform-style:preserve-3d;transform-origin:center;will-change:transform,opacity,filter;backface-visibility:hidden;text-decoration:none}
.work-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 48%,rgba(0,0,0,.32) 100%),linear-gradient(90deg,rgba(0,0,0,.1),transparent 32%);pointer-events:none}
.work-card video{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.015)}
.work-card__number{position:absolute;top:16px;left:17px;z-index:3;padding:6px 8px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(0,0,0,.2);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);font:600 10px/1 Arial,sans-serif;letter-spacing:.1em;color:rgba(255,255,255,.82)}
.work-card.is-front{border-color:rgba(255,255,255,.34);box-shadow:0 44px 140px rgba(0,0,0,.62),0 0 0 1px rgba(153,247,226,.06)}
.tutorial-pip{position:absolute;right:18px;bottom:18px;z-index:4;width:29%;aspect-ratio:16/9;overflow:hidden;border:1px solid rgba(255,255,255,.4);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.38);background:#000}
.tutorial-pip video{width:100%;height:100%;object-fit:cover}

.works-info{position:absolute;left:var(--edge);bottom:clamp(38px,6vh,66px);z-index:10;width:min(560px,40vw);height:180px;pointer-events:none}
.work-info{position:absolute;left:0;bottom:0;width:100%;opacity:0;transform:translateY(8px);transition:opacity .18s linear,transform .18s linear;pointer-events:none}
.work-info.is-active{pointer-events:auto}
.work-info__meta{margin:0 0 10px;color:rgba(153,247,226,.66);font:600 10px/1.2 Arial,sans-serif;letter-spacing:.15em}
.work-info h2{margin:0;font-size:clamp(30px,3vw,49px);font-weight:690;line-height:1.08;letter-spacing:-.045em;text-wrap:balance}
.work-info>p:not(.work-info__meta){max-width:520px;margin:12px 0 0;color:rgba(238,247,244,.62);font-size:13px;line-height:1.65}
.work-info a{display:inline-flex;gap:8px;align-items:center;margin-top:14px;text-decoration:none;color:#fff;font-size:12px;font-weight:650;letter-spacing:.02em;pointer-events:auto}.work-info a span{color:var(--accent-2);transition:transform .2s ease}.work-info a:hover span{transform:translate(3px,-3px)}
.works-progress{position:absolute;right:var(--edge);bottom:clamp(42px,6vh,70px);z-index:10;display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.45);font:600 10px/1 Arial,sans-serif;letter-spacing:.11em}
.works-progress>span:first-child{color:#fff}.works-progress__track{position:relative;width:90px;height:1px;background:rgba(255,255,255,.18);overflow:hidden}.works-progress__track i{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--accent-2);transform:scaleX(0);transform-origin:left center}
.works-hint{position:absolute;right:var(--edge);top:50%;z-index:8;margin:0;transform:translateY(-50%) rotate(90deg);transform-origin:right top;color:rgba(255,255,255,.28);font:600 9px/1 Arial,sans-serif;letter-spacing:.17em}

.closing{position:absolute;inset:0;display:grid;place-items:center;padding:100px var(--edge);overflow:hidden}
.closing__inner{text-align:center}.closing__inner>p{margin:0 0 18px;color:rgba(153,247,226,.62);font-size:12px;letter-spacing:.12em}.closing h2{margin:0;font-size:clamp(40px,5.2vw,82px);font-weight:720;line-height:1.08;letter-spacing:-.055em}.closing__actions{display:flex;justify-content:center;gap:12px;margin-top:32px;flex-wrap:wrap}

@media (max-width:900px){
  :root{--edge:28px;--phone-w:min(31vw,292px)}
  .hero__content{width:min(660px,calc(100vw - var(--edge) * 2))}
  .phone-copy{width:34vw}.phone-showcase{left:67%;width:60vw}
  .work-card{width:min(64vw,760px)}
}

@media (max-width:680px){
  :root{--edge:20px;--phone-w:min(52vw,calc((100svh - 260px) / 2.05),210px);--phone-h:calc(var(--phone-w) * 2.05)}
  .background-canvas{background:radial-gradient(circle at 28% 17%,rgba(38,184,163,.16),transparent 34%),radial-gradient(ellipse at 84% 28%,rgba(89,87,164,.14),transparent 38%),radial-gradient(ellipse at 50% 90%,rgba(224,174,92,.07),transparent 34%),linear-gradient(160deg,#020504 0%,#07110f 52%,#030706 100%)}
  .background-canvas::before{inset:-28%;opacity:.46;background:linear-gradient(118deg,transparent 0 33%,rgba(180,255,237,.065) 34%,transparent 36% 65%,rgba(255,218,137,.04) 66%,transparent 68%),repeating-linear-gradient(100deg,rgba(180,255,237,.04) 0 1px,transparent 1px 54px)}
  .background-canvas::after{background:radial-gradient(circle at 50% 42%,transparent 0 28%,rgba(0,0,0,.45) 72%,rgba(0,0,0,.82) 100%),radial-gradient(circle,rgba(255,255,255,.045) .65px,transparent .85px);background-size:100% 100%,20px 20px;opacity:.86}
  .site-header{top:max(10px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:center;width:min(252px,calc(100vw - 36px));height:48px;padding:0 16px}.brand{display:none}.main-nav{display:flex;grid-column:auto;justify-self:auto;gap:24px}.main-nav a{font-size:12px;white-space:nowrap}
  .hero-stage{padding:0 var(--edge)}
  .hero__content{left:50%;right:auto;top:46%;bottom:auto;width:min(360px,calc(100vw - var(--edge) * 2));transform:translate(-50%,-50%);text-align:center}
  .hero h1{font-size:clamp(38px,11vw,54px);line-height:1.04;letter-spacing:.01em;white-space:normal}.hero__content>p{max-width:100%;margin:15px auto 0;font-size:13px;line-height:1.7}.hero-cta{justify-content:center;margin-top:21px}.button{min-height:45px;padding:0 16px;font-size:12px}
  .hero-steps{left:var(--edge);right:var(--edge);bottom:max(24px,env(safe-area-inset-bottom));width:auto;transform:none;height:auto;gap:10px}.hero-step{position:relative;top:auto;left:auto!important;display:block;flex:1;width:auto;min-width:0;padding:20px 0 0;text-align:left}.hero-step__number{top:0;left:0;font-size:9px}.hero-step__line{top:13px;width:100%}.hero-step .feature-icon{display:none}.hero-step h3{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-step p{display:none}.scroll-cue{display:none}
  .stage-kicker{top:78px;left:var(--edge);font-size:9px}.stage-kicker i{width:24px}
  .decor-corner{width:34px;height:34px;opacity:.48}
  .decor-corner--tl,.decor-corner--tr{top:82px}
  .decor-corner--bl,.decor-corner--br{bottom:90px}
  .decor-line--left,.decor-line--right{height:26vh;opacity:.26}
  .decor-dots{width:112px;height:78px;background-size:14px 14px;opacity:.22}
  .decor-dots--hero{right:-22px;bottom:18vh}
  .decor-dots--phone-left{left:-34px;top:23vh}
  .decor-dots--phone-right{right:-30px;bottom:18vh}
  .decor-rail--phone{left:-10vw;right:-10vw;top:24vh;height:48vh}
  .decor-ring--phone{right:-22vw;top:24vh;width:74vw}
  .decor-grid--works{left:-24vw;right:-24vw;top:22vh;bottom:20vh;background-size:42px 42px}
  .decor-frame--closing{left:20px;right:20px;top:24vh;bottom:24vh;border-radius:18px}
  .decor-slash{height:28vh}
  .decor-dots--closing{right:-28px;top:22vh}

  .phone-copy{left:var(--edge);right:var(--edge);top:14vh;width:auto;transform:none;text-align:left}.phone-copy h2{font-size:clamp(31px,9vw,43px);line-height:1.05}.phone-copy p{max-width:330px;margin-top:12px;font-size:12px;line-height:1.65}.phone-status{margin-top:12px}
  .phone-showcase{left:50%;top:50%;width:100vw;height:min(56vh,calc(100svh - 240px));min-height:320px;max-height:480px;transform:translate(-50%,-50%);perspective:900px;overflow:visible}
  .phone-slide{border-radius:34px}.phone-frame{border-width:5px;border-radius:34px}.phone-frame::before,.phone-frame::after{height:34px}.phone-frame::before{left:-6px}.phone-frame::after{right:-6px}.phone-frame__notch{top:8px;height:17px}
  .phone-arrow{top:calc(50% - 19px);bottom:auto;width:38px;height:38px}.phone-arrow--prev{left:22px}.phone-arrow--next{right:22px}.phone-orbit{left:50%;top:65%;width:116vw;opacity:.7}

  .works-stage{perspective:1000px}.works-kicker{left:auto;right:var(--edge)}
  .work-card{top:42%;width:84vw;max-width:none;border-radius:9px}.work-card__number{top:10px;left:10px}.tutorial-pip{right:10px;bottom:10px;width:34%;border-radius:5px}
  .works-info{left:var(--edge);right:var(--edge);bottom:7.5vh;width:auto;height:142px}.work-info__meta{font-size:8px;margin-bottom:7px}.work-info h2{font-size:clamp(27px,8vw,36px);line-height:1.05}.work-info>p:not(.work-info__meta){max-width:90%;margin-top:8px;font-size:11px;line-height:1.5}.work-info a{margin-top:9px;font-size:11px}
  .works-progress{right:var(--edge);bottom:3.2vh}.works-progress__track{width:56px}.works-hint{display:none}
  .closing{padding:80px var(--edge)}.closing h2{font-size:clamp(38px,11vw,54px)}
}

@media (max-height:680px) and (min-width:681px){
  .hero__content{top:44%;transform:translate(-50%,-50%)}
  .phone-showcase{height:74vh}.phone-copy{transform:translateY(-38%)}
  .works-info{bottom:26px}.works-progress{bottom:30px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  #scene,.work-card,.phone-slide{filter:none!important}
}