/* ==========================================================================
   VirtualSky Digital — "5D" homepage
   depth (3D) + time (scroll-driven motion) + you (pointer interaction)
   ========================================================================== */
:root{
  --bg:#03050b;
  --bg-2:#070b16;
  --panel:rgba(12,17,30,.72);
  --panel-solid:#0b1020;
  --text:#f3f2ee;
  --muted:#9ea6bd;
  --muted-2:#c5cddd;
  --line:rgba(243,242,238,.08);
  --line-2:rgba(243,242,238,.16);
  --blue:#2f8fff;
  --blue-2:#57a6ff;
  --blue-3:#b9dcff;
  --deep:#2f6bff;
  --warm:#e8a35c;
  --glow:rgba(47,143,255,.45);
  --ease:cubic-bezier(.22,.8,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --sans:'Manrope',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --inline:clamp(16px,5vw,72px);
  --container:1240px;
  --section:clamp(96px,14vh,170px);
  --r:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);overflow-x:clip}
html:not(.js-motion){scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.02}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:rgba(47,143,255,.4);color:#fff}
:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px}
.skip-link{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--blue);color:#04101f;padding:10px 16px;border-radius:100px;transition:top .2s}
.skip-link:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--inline)}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-2);display:inline-flex;align-items:center;gap:.8em}
.kicker::before{content:'';width:22px;height:1px;background:currentColor;box-shadow:0 0 10px var(--glow)}
.grad{background:linear-gradient(110deg,var(--blue-3) 0%,var(--blue-2) 35%,var(--deep) 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--muted);font-size:clamp(15px,1.4vw,18px);line-height:1.65;max-width:56ch}
.h2{font-size:clamp(34px,5.4vw,76px)}
/* one elegant italic word inside a bold headline (used across pages) */
.accent-serif{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:1.1em;letter-spacing:-.01em;padding-right:.06em;background:linear-gradient(100deg,#b9dcff,#57a6ff 50%,#e6f2ff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- WebGL depth field (fixed behind everything) ---------- */
#depthField{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.6s var(--ease)}
#depthField.on{opacity:1}
.bg-fallback{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 50% at 50% 0%,rgba(47,107,255,.14),transparent 70%),radial-gradient(40% 40% at 90% 70%,rgba(232,163,92,.05),transparent 70%)}
main,footer{position:relative;z-index:1}
.grain{position:fixed;inset:-20%;z-index:900;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- cursor ---------- */
.cursor,.cursor-dot{position:fixed;left:0;top:0;z-index:1001;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s}
.cursor{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(87,166,255,.75);transition:opacity .3s,width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),background .3s;display:grid;place-items:center;font:600 10px/1 var(--mono);letter-spacing:.12em;color:#04101f}
.cursor-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--blue-2)}
html.has-cursor .cursor,html.has-cursor .cursor-dot{opacity:1}
.cursor.hot{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(47,143,255,.14)}
.cursor.label{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--blue-2);border-color:transparent}
html.has-cursor body,html.has-cursor a,html.has-cursor button{cursor:none}

/* ---------- nav ---------- */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:300;width:min(1240px,calc(100% - 24px));display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 10px 10px 18px;border-radius:100px;border:1px solid transparent;transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s}
.nav.scrolled{background:rgba(5,8,16,.62);border-color:var(--line-2);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:30px;width:auto;filter:drop-shadow(0 0 10px rgba(47,143,255,.5))}
.brand span{font-weight:800;font-size:15px;letter-spacing:-.02em}
.nav-links{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav-links a{display:block;padding:9px 14px;border-radius:100px;text-decoration:none;font-size:14px;font-weight:600;color:var(--muted-2);transition:color .25s,background .25s}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-cta{display:flex;align-items:center;gap:8px}
.mobile-nav{display:none;position:relative}
.mobile-nav summary{list-style:none;cursor:pointer;padding:10px 16px;border-radius:100px;border:1px solid var(--line-2);font-size:13px;font-weight:600}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav-links{position:absolute;right:0;top:52px;min-width:230px;padding:10px;border-radius:18px;background:#0a0f1d;border:1px solid var(--line-2);box-shadow:0 30px 60px #000a}
.mobile-nav-links a{display:block;padding:12px 14px;border-radius:10px;text-decoration:none;font-size:15px}
.mobile-nav-links a:hover{background:rgba(255,255,255,.05)}
.brand span,.nav-links a{white-space:nowrap}
/* "Create your own": the one playful link, with a soft glowing outline and a sparkle */
.nav-links a.nav-create{color:#e6f2ff;border:1px solid rgba(87,166,255,.45);background:rgba(47,143,255,.1);box-shadow:0 0 16px -4px rgba(47,143,255,.7)}
.nav-links a.nav-create::before{content:'✦';margin-right:6px;color:#8cc4ff;text-shadow:0 0 8px #57a6ff}
.nav-links a.nav-create:hover{background:rgba(47,143,255,.22);border-color:rgba(140,196,255,.8)}
.mobile-nav-links a.nav-create{color:#8cc4ff}
@media (max-width:1180px){.nav-links{display:none}.mobile-nav{display:block}}
@media (max-width:980px){.nav-cta .btn-primary{display:none}}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:100px;font-weight:700;font-size:14.5px;text-decoration:none;white-space:nowrap;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,border-color .3s;will-change:transform}
.btn-primary{background:linear-gradient(110deg,var(--blue),var(--blue-2));color:#03101f;box-shadow:0 0 30px rgba(47,143,255,.45),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-primary:hover{box-shadow:0 0 50px rgba(47,143,255,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-glass{background:rgba(243,242,238,.05);border:1px solid var(--line-2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-glass:hover{border-color:rgba(87,166,255,.6);background:rgba(47,143,255,.1)}
.btn-sm{padding:10px 18px;font-size:13px}
.btn-icon{width:44px;height:44px;padding:0}
.btn-icon svg{width:19px;height:19px}
.btn .arr{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

/* ==========================================================================
   1 · PORTAL HERO — the film stays; scrolling flies you through it
   ========================================================================== */
.portal{position:relative;height:100svh}
html.js-motion .portal{height:220svh}
.portal-stage{position:sticky;top:0;height:100svh;overflow:hidden;perspective:1400px;perspective-origin:50% 40%}
/* the film fades out through soft, shadowed edges as you scroll (the script closes --fa/--fb):
   at the start the mask covers everything, so the film is untouched */
.portal-window{--fa:100%;--fb:160%;position:absolute;inset:0;transform-origin:50% 55%;overflow:hidden;will-change:transform;background:#000;-webkit-mask-image:radial-gradient(ellipse farthest-corner at 50% 50%,#000 var(--fa),transparent var(--fb));mask-image:radial-gradient(ellipse farthest-corner at 50% 50%,#000 var(--fa),transparent var(--fb))}
.portal-window video,.portal-window .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portal-window::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,5,11,.45) 0%,transparent 22%,transparent 50%,rgba(3,5,11,.85) 100%),radial-gradient(80% 60% at 0% 100%,rgba(3,5,11,.75),transparent 70%);pointer-events:none}
.portal-rim{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(185,220,255,0);transition:box-shadow .4s}
.portal-copy{position:absolute;left:0;right:0;bottom:max(90px,10vh);z-index:3;transform-style:preserve-3d}
/* headline hugs the left edge, description + buttons hug the right edge: the middle of the film stays clear */
.portal-copy .container{max-width:none;display:flex;justify-content:space-between;gap:40px;align-items:flex-end}
.portal-copy .container>div:first-child{flex:none}
.chip{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:100px;border:1px solid var(--line-2);background:rgba(5,8,16,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.chip::before{content:'';width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px 2px rgba(74,222,128,.6);animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.portal h1{margin-top:22px;font-size:clamp(34px,min(3.9vw,10vh),68px);font-weight:800;letter-spacing:-.045em;line-height:.98;text-shadow:0 4px 40px rgba(0,0,0,.6)}
/* room under each line so letters that hang below (g, y, p) aren't clipped; the negative margin keeps the spacing */
.portal h1 .line{display:block;overflow:hidden;padding-bottom:.26em;margin-bottom:-.18em;white-space:nowrap}
@media (max-width:860px){.portal h1{font-size:clamp(30px,9.4vw,64px)}}
.portal h1 .line>span{display:inline-block}
/* the one elegant word: italic serif with a blue glow, like a signature */
.portal h1 .accent{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:1.18em;letter-spacing:-.01em;line-height:1;padding:0 .08em .12em 0;background:linear-gradient(100deg,#b9dcff 0%,#57a6ff 45%,#8fb8ff 75%,#e6f2ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(47,143,255,.55));text-shadow:none}
.portal-side{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-bottom:10px;width:min(340px,30vw);margin-right:44px}
.portal-side .cta-row{flex-direction:column;align-items:stretch;width:100%}
.portal-side .cta-row .btn{justify-content:center}
.portal-side p{color:var(--muted-2);font-size:clamp(15px,1.3vw,17px);line-height:1.6;text-shadow:0 2px 20px #000}
.scroll-cue{position:absolute;z-index:4;right:var(--inline);bottom:clamp(36px,9vh,96px);display:flex;flex-direction:column;align-items:center;gap:12px;font:500 10px/1 var(--mono);letter-spacing:.2em;color:var(--muted);writing-mode:vertical-rl}
.scroll-cue i{width:1px;height:56px;background:linear-gradient(var(--blue-2),transparent);position:relative;overflow:hidden}
.scroll-cue i::after{content:'';position:absolute;left:0;top:-30%;width:100%;height:30%;background:#fff;animation:cue 2s var(--ease) infinite}
@keyframes cue{to{top:100%}}
/* end of the film: logo + name arrive over the sunrise, above the headline */
.hero-end{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-end-shade{position:absolute;inset:0;background:radial-gradient(ellipse 55% 45% at 50% 34%,rgba(3,8,19,.72),rgba(3,8,19,.18) 75%,transparent);opacity:0;transition:opacity 2s ease}
.hero-end-logo{position:absolute;left:50%;top:30%;display:flex;flex-direction:column;align-items:center;gap:18px;opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(.12);filter:blur(8px)}
.hero-end-logo img{width:clamp(110px,13vw,220px);height:auto;filter:brightness(1.5) drop-shadow(0 0 18px rgba(47,143,255,.75))}.hero-end-logo span{font-size:clamp(24px,3vw,44px);font-weight:700;letter-spacing:-.03em;color:#fff;white-space:nowrap;text-shadow:0 3px 18px #000}
.film-complete .hero-end-shade{opacity:1}
.film-complete .hero-end-logo{animation:logo-arrival 4.8s cubic-bezier(.16,.65,.22,1) both}
@keyframes logo-arrival{0%{opacity:0;visibility:visible;transform:translate(-50%,-50%) scale(.12);filter:blur(8px)}35%{opacity:.65}100%{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);filter:blur(0)}}
@media (max-width:860px){.hero-end-logo{top:26%}}
@media (prefers-reduced-motion:reduce){.hero-end-shade{transition:none}.film-complete .hero-end-logo{animation:none;opacity:1;visibility:visible;transform:translate(-50%,-50%);filter:none}}
.video-toggle{position:absolute;z-index:5;right:var(--inline);top:96px;padding:7px 12px;opacity:.7;border-radius:100px;border:1px solid var(--line-2);background:rgba(5,8,16,.6);font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--muted-2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.portal-next{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;pointer-events:none;opacity:0}
.portal-next h2{font-size:clamp(36px,6vw,96px);font-weight:800;letter-spacing:-.045em;text-shadow:0 6px 50px rgba(0,0,0,.9)}
.portal-next p{margin-top:14px;font:500 12px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--blue-2)}
/* while the cookie bar is up, lift the hero text so the bar never sits on it */
.portal-copy,.scroll-cue{transition:bottom .5s var(--ease-out)}
html.cc-open .portal-copy,html.cc-open .scroll-cue{bottom:calc(max(90px,10vh) + 60px)}
@media (max-width:820px){html.cc-open .portal-copy{bottom:calc(max(90px,10vh) + 130px)}}
@media (max-width:860px){
  .portal-copy .container{flex-direction:column;align-items:flex-start;gap:22px}
  .portal-side{width:100%;margin-right:0}
  .portal-side .cta-row{flex-direction:row;flex-wrap:wrap}
  .scroll-cue,.portal-hud{display:none}
  .video-toggle{top:auto;bottom:16px;left:auto;right:16px}
}

/* ==========================================================================
   2 · MANIFESTO — words light up as you scroll
   ========================================================================== */
.manifesto{padding:clamp(80px,12vh,140px) 0;position:relative;text-align:center}
.manifesto .kicker{justify-content:center}
.manifesto p.big{font-size:clamp(34px,5.6vw,88px);font-weight:800;letter-spacing:-.045em;line-height:1.05;max-width:none;margin-left:auto;margin-right:auto}
.manifesto .w.blue{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:1.12em;letter-spacing:-.01em}
.manifesto .w{opacity:.14;transition:opacity .25s linear}
.manifesto .w.lit{opacity:1}
.manifesto .w.blue{color:var(--blue-2)}
.manifesto-foot{margin-top:48px;display:flex;flex-wrap:wrap;gap:40px;align-items:center;justify-content:space-between}
.facts{display:flex;flex-wrap:wrap;gap:12px}
.fact{padding:16px 20px;border-radius:16px;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.fact b{display:block;font-size:26px;letter-spacing:-.03em}
.fact span{font-size:13px;color:var(--muted)}

/* ==========================================================================
   3 · LIVE WORK GALLERY — big 3D browser windows, real websites inside
   ========================================================================== */
.work{position:relative;padding-top:0}
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.work-head .h2{max-width:13ch}
.work-head .lede{max-width:42ch}
.work-pin{position:relative}
.work-viewport{height:100svh;display:flex;align-items:flex-start;padding-top:max(92px,11svh);overflow:hidden;perspective:1800px}
.work-track{display:flex;gap:clamp(40px,6vw,110px);padding:0 calc((100vw - var(--win-w)) / 2);will-change:transform;transform-style:preserve-3d;pointer-events:none}
.work-track>*{pointer-events:auto}
.work{--win-w:min(60vw,1100px,calc((100svh - 260px) * 1.6));--win-h:calc(100svh - max(92px,11svh) - 190px)}
/* curved carousel: big centre window, neighbours peek in tilted at the edges */
.work-viewport::before{content:'';position:absolute;left:50%;top:45%;width:80vw;height:70svh;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(47,107,255,.28),rgba(47,143,255,.08) 55%,transparent);pointer-events:none;filter:blur(20px)}
.work-viewport{position:relative}
.work-track{position:relative;gap:clamp(18px,2.4vw,40px)}
.win{transition:box-shadow .5s}
.win .win-meta{opacity:0;transition:opacity .5s}
.win.is-center .win-meta{opacity:1}
.win.is-center .win-frame{box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(185,220,255,.25),0 0 0 6px rgba(87,166,255,.08),0 0 120px -10px rgba(47,143,255,.45)}
.work-tabs{position:absolute;left:50%;bottom:max(18px,3svh);transform:translateX(-50%);z-index:4;display:flex;gap:2px;padding:6px;border-radius:100px;background:rgba(243,242,238,.94);box-shadow:0 20px 50px -10px rgba(0,0,0,.7)}
.work-tabs{max-width:calc(100vw - 32px);overflow-x:auto;scrollbar-width:none}
.work-tabs::-webkit-scrollbar{display:none}
.work-tabs button{flex:none;position:relative;z-index:1;padding:10px 16px;border-radius:100px;font-size:14px;font-weight:700;color:#0b1020;white-space:nowrap;transition:color .35s}
.work-tabs button[aria-current="true"]{color:#fff}
.work-tabs-pill{position:absolute;z-index:0;top:6px;bottom:6px;left:0;width:0;border-radius:100px;background:linear-gradient(110deg,#0b1020,#16244a);box-shadow:0 0 0 1px rgba(87,166,255,.35),0 6px 20px -4px rgba(47,107,255,.6);transition:transform .5s var(--ease-out),width .5s var(--ease-out)}
.work:not(.stacked) .win-num,.work:not(.stacked) .win-meta p{display:none}
.work:not(.stacked) .win-meta{top:calc(100% + 16px);justify-content:center;text-align:center}
.work:not(.stacked) .win-meta .tag{margin-bottom:6px}
.work:not(.stacked) .win{cursor:pointer}
.work:not(.stacked) .win:not(.is-center) .win-shield span{opacity:0}
.work:not(.stacked) .win:not(.is-center):hover .win-frame{box-shadow:0 0 0 1px rgba(185,220,255,.4),0 0 80px -10px rgba(47,143,255,.5)}
.work.stacked .work-tabs{display:none}

/* ---------- spiral: every window sits in the same spot and the script flies it along a spiral ---------- */
.work.spiral .work-viewport{perspective:1100px;perspective-origin:50% 44%}
.work.spiral .work-track{position:absolute;inset:0;display:block;padding:0;gap:0}
.work.spiral .win{position:absolute;left:50%;top:max(92px,11svh);margin-left:calc(var(--win-w) / -2);opacity:0}
/* the vortex picture has its own glow; the extra glow layer was clipped by the section edge into a visible line */
.work.spiral .work-viewport::before{display:none}
/* the very top and bottom of the section also melt away, so nothing is ever cut by a straight edge */
.work.spiral .work-viewport{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 7%,#000 97%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 7%,#000 97%,transparent 100%)}

/* ---------- the Higgsfield portal picture behind the windows ----------
   the vortex centre (24% down the picture) is lined up with the centre window */
.work-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:url(work-portal-bg.webp?v=2) 50% calc(44svh - 42.2vw)/cover no-repeat;transform-origin:50% 44%;animation:work-bg-breathe 14s ease-in-out infinite;transition:filter .9s var(--ease)}
/* soft edges: the picture fades to transparent at the top and bottom, so the starry sky runs
   straight into the vortex with no hard line (instead of a solid colour band) */
.work-bg{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 80%,transparent 100%)}
.work-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 44%,transparent 55%,rgba(3,5,11,.5))}
.work-bg.flash{filter:brightness(1.35) saturate(1.2)}

/* shine: copies of the same picture, boosted and revealed only where light passes, so the real
   vortex lines glow while the dark sky stays dark */
@property --sweep{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --wave{syntax:'<percentage>';inherits:false;initial-value:0%}
.work-bg .shine{position:absolute;inset:0;background:inherit;mix-blend-mode:screen;pointer-events:none}
/* two beams of light rotating around the vortex */
.work-bg .sweep{filter:brightness(1.8) saturate(1.45) contrast(1.3);-webkit-mask-image:conic-gradient(from var(--sweep) at 50% 44%,transparent 0deg,#000 16deg,transparent 44deg,transparent 180deg,#000 196deg,transparent 224deg);mask-image:conic-gradient(from var(--sweep) at 50% 44%,transparent 0deg,#000 16deg,transparent 44deg,transparent 180deg,#000 196deg,transparent 224deg);animation:bg-sweep 9s linear infinite}
@keyframes bg-sweep{to{--sweep:360deg}}
/* a ring of energy rippling out from the centre */
.work-bg .wave{filter:brightness(2.2) saturate(1.3);-webkit-mask-image:radial-gradient(ellipse 100% 80% at 50% 44%,transparent calc(var(--wave) - 9%),#000 var(--wave),transparent calc(var(--wave) + 5%));mask-image:radial-gradient(ellipse 100% 80% at 50% 44%,transparent calc(var(--wave) - 9%),#000 var(--wave),transparent calc(var(--wave) + 5%));animation:bg-wave 5s cubic-bezier(.25,0,.2,1) infinite}
@keyframes bg-wave{0%{--wave:0%;opacity:0}12%{opacity:1}70%{opacity:.8}100%{--wave:85%;opacity:0}}
/* twinkling glints along the streaks */
.work-bg .glints{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background-image:radial-gradient(2px 2px at 22% 30%,#fff,transparent),radial-gradient(3px 3px at 71% 22%,#e6f2ff,transparent),radial-gradient(2px 2px at 63% 61%,#fff,transparent),radial-gradient(3px 3px at 35% 72%,#cfe6ff,transparent),radial-gradient(2px 2px at 84% 48%,#fff,transparent),radial-gradient(2px 2px at 12% 58%,#e6f2ff,transparent),radial-gradient(3px 3px at 48% 18%,#fff,transparent),radial-gradient(2px 2px at 57% 84%,#cfe6ff,transparent);filter:drop-shadow(0 0 6px #8cc4ff) drop-shadow(0 0 14px #2f8fff);animation:bg-twinkle 3.2s ease-in-out infinite}
.work-bg .glints.two{background-position:0 0;transform:rotate(180deg) scale(1.1);transform-origin:50% 44%;animation-delay:-1.6s;animation-duration:4.1s}
@keyframes bg-twinkle{0%,100%{opacity:.15}50%{opacity:1}}
/* circuit-style light pulses racing along the swirl (drawn by the script) */
.work-bg .pulses{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;z-index:1}
.work.stacked .work-bg .shine,.work.stacked .work-bg .glints,.work.stacked .work-bg .pulses{display:none}
@media (prefers-reduced-motion:reduce){.work-bg .shine,.work-bg .glints{animation:none;opacity:0}}
@keyframes work-bg-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.work.stacked .work-bg{background-position:50% 0;background-size:100% auto;opacity:.75}
.work.stacked .work-viewport{position:relative;overflow:hidden}
@media (prefers-reduced-motion:reduce){.work-bg{animation:none}}

/* ---------- light portal behind the windows: the websites come out of it ---------- */
.portal-fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.portal-logo{position:absolute;left:50%;top:var(--portal-y,44%);width:clamp(56px,6vw,90px);transform:translate(-50%,-50%);z-index:0;pointer-events:none;filter:brightness(1.6) drop-shadow(0 0 14px #57a6ff) drop-shadow(0 0 40px #2f8fff);animation:portal-logo 3.2s ease-in-out infinite}
@keyframes portal-logo{50%{filter:brightness(2) drop-shadow(0 0 20px #8cc4ff) drop-shadow(0 0 60px #2f8fff)}}
.work-track{z-index:1}
.work-viewport::before{z-index:0}
.work.stacked .portal-fx,.work.stacked .portal-logo{display:none}
@media (prefers-reduced-motion:reduce){.portal-logo{animation:none}}

/* ---------- hologram: the centre window floats over a light pedestal with an electric edge ---------- */
.holo{position:absolute;inset:-18px;z-index:3;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.holo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.zap-glow,.zap-core,.sparks path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.zap-glow{stroke:#2f8fff;stroke-width:9;opacity:.75;filter:url(#electric) blur(6px)}
.zap-core{stroke:#cfe6ff;stroke-width:1.6;filter:url(#electric) drop-shadow(0 0 3px #57a6ff) drop-shadow(0 0 10px #2f8fff)}
.sparks path{stroke:#e6f2ff;stroke-width:1.3;filter:drop-shadow(0 0 4px #57a6ff) drop-shadow(0 0 10px #2f8fff)}
.win.is-center .holo{opacity:1}
/* glass sheen + faint scanlines sweeping across the screen */
@keyframes holo-sweep{from{background-position:120% 0,0 0}to{background-position:-120% 0,0 0}}
/* gentle float */
.win.is-center .win-frame,.win.is-center .holo{animation:holo-float 5s ease-in-out infinite}
@keyframes holo-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
/* the light pedestal: a glowing disc + beam under the window */
.pedestal{position:absolute;left:6%;right:6%;bottom:-14px;height:34px;pointer-events:none}
.pedestal::before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,rgba(230,242,255,.95),rgba(87,166,255,.75) 30%,rgba(47,107,255,.3) 60%,transparent);filter:blur(4px)}
.pedestal::after{content:'';position:absolute;left:4%;right:4%;top:40%;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,#e6f2ff 30%,#fff 50%,#e6f2ff 70%,transparent);box-shadow:0 0 18px 4px rgba(87,166,255,.8),0 0 60px 10px rgba(47,107,255,.5)}
.work:not(.stacked) .win.is-center .win-meta{top:calc(100% + 38px)}
@media (prefers-reduced-motion:reduce){.holo{opacity:0!important}.win-frame::after{animation:none}}
.work.stacked .win .win-meta{opacity:1}
.win{position:relative;flex:none;width:var(--win-w);height:var(--win-h);border-radius:18px;transform-style:preserve-3d;will-change:transform}
.win-frame{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:#0a0e1a;border:1px solid rgba(185,220,255,.16);box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4),0 0 80px -20px rgba(47,143,255,.25);display:flex;flex-direction:column}
.win-bar{flex:none;height:46px;display:flex;align-items:center;gap:14px;padding:0 14px;background:linear-gradient(180deg,#141a2b,#0e1322);border-bottom:1px solid rgba(255,255,255,.06)}
.dots{display:flex;gap:7px}
.dots i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.dots i:nth-child(2){background:#febc2e}.dots i:nth-child(3){background:#28c840}
.url{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:8px;background:rgba(255,255,255,.05);font:500 12px/1 var(--mono);color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.url svg{width:12px;height:12px;flex:none;color:#4ade80}
.win-actions{display:flex;gap:6px}
.win-actions button,.win-actions a{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:8px;font:600 12px/1 var(--sans);text-decoration:none;color:var(--muted-2);background:rgba(255,255,255,.05);transition:background .25s,color .25s}
.win-actions button:hover,.win-actions a:hover{background:var(--blue);color:#03101f}
.win-actions svg{width:13px;height:13px}
.win-screen{position:relative;flex:1;overflow:hidden;background:#05070d}
.win-screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transition:opacity .6s,transform 1.2s var(--ease-out)}
.win:hover .win-screen>img{transform:scale(1.02)}
.win-screen iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#fff;opacity:0;transition:opacity .8s}
.win-screen iframe{pointer-events:none}
.win-screen.interactive iframe{pointer-events:auto}
.win-screen.live iframe{opacity:1}
.win-screen.live>img{opacity:0}
.win-shield{position:absolute;inset:0;z-index:2;width:100%;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:22px;background:linear-gradient(180deg,transparent 60%,rgba(3,5,11,.55));transition:opacity .4s}
.win-shield span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:100px;background:rgba(5,8,16,.78);border:1px solid var(--line-2);font:600 12.5px/1 var(--sans);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.win-screen.interactive .win-shield{opacity:0;pointer-events:none}
.win-meta{position:absolute;left:0;right:0;top:calc(100% + 22px);display:flex;justify-content:space-between;gap:20px;align-items:flex-start;transform:translateZ(40px)}
.win-meta h3{font-size:clamp(20px,2vw,28px)}
.win-meta .tag{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2);margin-bottom:10px;display:block}
.win-meta p{color:var(--muted);font-size:14.5px;max-width:52ch;margin-top:6px}
.win-num{font:800 clamp(60px,9vw,140px)/.8 var(--sans);letter-spacing:-.06em;position:absolute;right:-.12em;top:-.55em;color:transparent;-webkit-text-stroke:1px rgba(185,220,255,.25);transform:translateZ(80px);pointer-events:none}
.win.next .win-frame{display:grid;place-items:center;text-align:center;background:radial-gradient(70% 70% at 50% 40%,rgba(47,143,255,.22),transparent 70%),#070b16;border-style:dashed}
.win.next h3{font-size:clamp(30px,4vw,60px);max-width:14ch;margin:0 auto 18px}
.win.next p{color:var(--muted);margin:0 auto 28px;max-width:40ch}
.work-progress{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);width:min(320px,60vw);height:2px;background:var(--line-2);border-radius:2px;overflow:hidden;z-index:3}
.work-progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--blue),var(--blue-3));transform-origin:0 50%;transform:scaleX(0)}
/* no pinning (mobile / reduced motion): windows stack */
.work.stacked .work-viewport{height:auto;display:block;overflow:visible;padding:60px 0 40px}
.work.stacked .work-track{flex-direction:column;padding:0 var(--inline);gap:150px;transform:none!important}
.work.stacked .win{width:100%;height:auto;aspect-ratio:4/3.4;transform:none!important}
.work.stacked .work-progress{display:none}
@media (max-width:860px){.work{--win-w:100%}.win-actions .hide-sm{display:none}.win-num{display:none}.work.stacked .win{aspect-ratio:3/3.6}}

/* ---------- theatre: full-screen live preview with device switcher ---------- */
.theatre{position:fixed;inset:0;z-index:950;display:flex;flex-direction:column;background:rgba(2,4,9,.86);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.theatre.open{opacity:1;visibility:visible}
.theatre[hidden]{display:none}
.theatre-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(14px,3vw,28px);flex-wrap:wrap}
.theatre-title{display:flex;flex-direction:column;gap:4px;min-width:0}
.theatre-title b{font-size:17px;letter-spacing:-.02em}
.theatre-title span{font:500 12px/1 var(--mono);color:var(--muted)}
.devices{display:flex;gap:4px;padding:4px;border-radius:100px;border:1px solid var(--line-2);background:rgba(255,255,255,.04)}
.devices button{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:100px;font-size:13px;font-weight:600;color:var(--muted-2);transition:background .25s,color .25s}
.devices button svg{width:15px;height:15px}
.devices button[aria-pressed="true"]{background:var(--blue);color:#03101f}
.theatre-tools{display:flex;gap:8px;align-items:center}
.theatre-stage{flex:1;min-height:0;display:flex;justify-content:center;padding:0 clamp(10px,3vw,28px) clamp(10px,3vw,28px)}
.device{position:relative;width:100%;height:100%;border-radius:16px;overflow:hidden;background:#fff;border:1px solid rgba(185,220,255,.2);box-shadow:0 40px 120px -30px rgba(47,143,255,.4);transform:scale(.94) translateY(20px);transition:width .6s var(--ease-out),transform .6s var(--ease-out),border-radius .6s}
.theatre.open .device{transform:none}
.device[data-mode="tablet"]{width:min(820px,100%)}
.device[data-mode="mobile"]{width:min(390px,100%);border-radius:34px;border:10px solid #10141f}
.device iframe{width:100%;height:100%;border:0;display:block}
.device-loading{position:absolute;inset:0;display:grid;place-items:center;background:#070b16;font:500 12px/1 var(--mono);letter-spacing:.16em;color:var(--muted);transition:opacity .5s}
.device.loaded .device-loading{opacity:0;pointer-events:none}
@media (max-width:700px){.devices button span{display:none}.theatre-title span{display:none}}
html.theatre-open{overflow:hidden}

/* ==========================================================================
   4 · SERVICES — tilting glass cards with layered depth
   ========================================================================== */
.services{padding:var(--section) 0}
.services-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.svc-grid{margin-top:clamp(48px,8vh,84px);display:grid;grid-template-columns:repeat(3,1fr);gap:18px;perspective:1200px}
.svc{position:relative;display:flex;flex-direction:column;min-height:300px;padding:30px;border-radius:var(--r);text-decoration:none;border:1px solid var(--line);background:linear-gradient(160deg,rgba(47,143,255,.08),transparent 45%),var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transform-style:preserve-3d;transition:transform .6s var(--ease-out),border-color .4s,box-shadow .4s;--mx:50%;--my:50%}
.svc.lit{transition:transform .1s linear,border-color .4s,box-shadow .4s;border-color:rgba(87,166,255,.35);box-shadow:0 40px 80px -40px rgba(47,143,255,.5)}
.svc::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(380px circle at var(--mx) var(--my),rgba(87,166,255,.2),transparent 60%);opacity:0;transition:opacity .4s}
.svc.lit::before{opacity:1}
.svc .ico{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#57c8ff,#2f8fff 50%,#2f6bff);box-shadow:inset 0 2px 6px rgba(255,255,255,.4),0 14px 30px -10px rgba(47,143,255,.7);transform:translateZ(50px)}
.svc .ico svg{width:24px;height:24px}
.svc h3{margin-top:auto;padding-top:40px;font-size:clamp(21px,1.9vw,26px);transform:translateZ(36px)}
.svc p{margin-top:10px;color:var(--muted);font-size:14.5px;line-height:1.6;transform:translateZ(22px)}
.svc .go{position:absolute;right:24px;top:28px;font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--blue-2);transform:translateZ(30px)}
.svc.wide{grid-column:span 2}
@media (min-width:981px){.svc-grid .svc:last-child{grid-column:1/-1;min-height:200px}}

/* pop-up glass tiles: the icon rises out of the card on a stack of glass layers,
   a light trail swooshes past and a small label floats in beside it */
.svc .pop{position:relative;width:54px;height:54px;transform-style:preserve-3d;transform:translateZ(50px)}
.svc .pop .ico{position:absolute;inset:0;transform:translateY(14px) scale(.55);opacity:0;transition:transform .9s cubic-bezier(.34,1.56,.64,1) .35s,opacity .4s .35s,box-shadow .4s}
.svc .pop .layer{position:absolute;inset:0;border-radius:15px;border:1px solid rgba(185,220,255,.4);background:linear-gradient(145deg,rgba(87,166,255,.35),rgba(47,107,255,.12));backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 0 18px rgba(47,143,255,.35);opacity:0;transform:translateY(0) scaleX(.7);transition:transform .7s var(--ease-out),opacity .5s}
.svc .pop .layer.l1{transition-delay:.18s}.svc .pop .layer.l2{transition-delay:.05s}
.svc .pop .trail{position:absolute;left:-26px;top:-20px;width:120px;height:90px;overflow:visible;pointer-events:none}
.svc .pop .trail path{fill:none;stroke:url(#popTrail);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:160;stroke-dashoffset:160;filter:drop-shadow(0 0 5px #57a6ff);opacity:0}
.svc .pop .pop-label{position:absolute;left:calc(100% + 14px);top:50%;padding:7px 12px;border-radius:100px;border:1px solid rgba(185,220,255,.25);background:rgba(10,16,32,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:600 12px/1 var(--sans);color:#e6f2ff;white-space:nowrap;opacity:0;transform:translate(-8px,-50%);transition:opacity .5s .75s,transform .6s var(--ease-out) .75s;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.svc .pop .pop-label::before{content:'';display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#57a6ff;box-shadow:0 0 8px #57a6ff;vertical-align:1px}
/* popped */
.svc.popped .pop .ico{transform:translateY(-8px) scale(1);opacity:1}
.svc.popped .pop .layer.l1{opacity:.8;transform:translateY(6px) scaleX(.94)}
.svc.popped .pop .layer.l2{opacity:.45;transform:translateY(14px) scaleX(.86)}
.svc.popped .pop .pop-label{opacity:1;transform:translate(0,-50%)}
.svc.swoosh .pop .trail path{animation:pop-trail 1.1s var(--ease-out) forwards}
@keyframes pop-trail{0%{stroke-dashoffset:160;opacity:0}15%{opacity:1}70%{opacity:1}100%{stroke-dashoffset:-160;opacity:0}}
/* hover: the tile lifts higher and glows */
@media (hover:hover){
  .svc.popped:hover .pop .ico{transform:translateY(-16px) scale(1.06);box-shadow:inset 0 2px 6px rgba(255,255,255,.4),0 22px 40px -10px rgba(47,143,255,.9),0 0 40px rgba(87,166,255,.6);transition-delay:0s}
  .svc.popped:hover .pop .layer.l1{transform:translateY(8px) scaleX(.96);transition-delay:0s}
  .svc.popped:hover .pop .layer.l2{transform:translateY(20px) scaleX(.88);transition-delay:0s}
}
@media (prefers-reduced-motion:reduce){.svc .pop .ico,.svc .pop .layer,.svc .pop .pop-label{transition:none}.svc.swoosh .pop .trail path{animation:none}}
@media (max-width:980px){.svc-grid{grid-template-columns:1fr 1fr}.services-head{grid-template-columns:1fr}}
@media (max-width:620px){.svc-grid{grid-template-columns:1fr}.svc.wide{grid-column:auto}.svc{min-height:240px}}

/* ==========================================================================
   5 · PROCESS — a deck of panels that stack in depth as you scroll
   ========================================================================== */
.process{padding:var(--section) 0}
/* process teaser: one glass panel, the 12 step names gliding past like a stream of light */
.proc-teaser{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;padding:clamp(40px,6vw,80px) 0;border-radius:32px;overflow:hidden;text-decoration:none;text-align:center;border:1px solid var(--line-2);background:radial-gradient(60% 120% at 50% 0%,rgba(47,143,255,.2),transparent 70%),var(--panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:border-color .4s,box-shadow .4s}
.proc-teaser:hover{border-color:rgba(87,166,255,.45);box-shadow:0 40px 100px -40px rgba(47,143,255,.55)}
.pt-title{font-size:clamp(34px,5vw,72px);font-weight:800;letter-spacing:-.04em;line-height:1}
.pt-steps{display:flex;gap:12px;width:max-content;animation:pt-flow 38s linear infinite;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.pt-steps span{flex:none;padding:10px 16px;border-radius:100px;border:1px solid rgba(87,166,255,.28);background:rgba(47,143,255,.08);font-size:14px;font-weight:600;color:var(--muted-2);white-space:nowrap}
.pt-steps span:nth-child(odd){border-color:rgba(185,220,255,.2);background:rgba(255,255,255,.03)}
@keyframes pt-flow{from{transform:translateX(20%)}to{transform:translateX(-60%)}}
@media (prefers-reduced-motion:reduce){.pt-steps{animation:none;flex-wrap:wrap;width:auto;justify-content:center;padding:0 20px}}
.deck{margin-top:clamp(48px,8vh,84px);display:flex;flex-direction:column;gap:40px;padding-bottom:var(--section)}
.card-step{position:sticky;top:calc(110px + var(--i) * 22px);display:grid;grid-template-columns:1fr 1fr;min-height:min(62svh,560px);border-radius:28px;overflow:hidden;border:1px solid var(--line-2);background:var(--panel-solid);box-shadow:0 -30px 80px -30px rgba(0,0,0,.9);transform-origin:50% 0;will-change:transform}
.card-step .txt{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:space-between;gap:30px}
.card-step .n{font:800 clamp(64px,8vw,120px)/.8 var(--sans);letter-spacing:-.06em;background:linear-gradient(180deg,var(--blue-3),rgba(47,107,255,.2));-webkit-background-clip:text;background-clip:text;color:transparent}
.card-step h3{font-size:clamp(26px,3vw,42px)}
.card-step p{margin-top:14px;color:var(--muted);font-size:16px;line-height:1.65;max-width:42ch}
.card-step .pic{position:relative;overflow:hidden}
.card-step .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-step .pic::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--panel-solid),transparent 35%)}
@media (max-width:820px){.card-step{grid-template-columns:1fr;top:calc(90px + var(--i) * 14px)}.card-step .pic{height:200px;order:-1}.card-step .pic::after{background:linear-gradient(0deg,var(--panel-solid),transparent 50%)}}

/* ==========================================================================
   6 · PRICE — a glowing object you can push around
   ========================================================================== */
.price{padding:var(--section) 0;text-align:center;position:relative}
.price-orb{position:relative;margin:0 auto;width:min(560px,92vw);aspect-ratio:1;display:grid;place-items:center;perspective:900px}
.price-orb .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(87,166,255,.25);transform-style:preserve-3d}
.price-orb .ring:nth-child(1){animation:spin 26s linear infinite;transform:rotateX(70deg)}
.price-orb .ring:nth-child(2){inset:8%;animation:spin2 18s linear infinite;transform:rotateY(70deg);border-color:rgba(232,163,92,.22)}
.price-orb .ring:nth-child(3){inset:18%;border-style:dashed;animation:spin3 40s linear infinite}
@keyframes spin{to{transform:rotateX(70deg) rotateZ(360deg)}}
@keyframes spin2{to{transform:rotateY(70deg) rotateZ(-360deg)}}
@keyframes spin3{to{transform:rotate(360deg)}}
.price-core{position:relative;transform-style:preserve-3d;transition:transform .2s linear}
.price-core .from{font:500 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--blue-2)}
.price-core .amt{display:block;margin:14px 0 10px;font-size:clamp(84px,14vw,190px);font-weight:800;letter-spacing:-.06em;line-height:.9;background:linear-gradient(180deg,#fff 10%,var(--blue-2) 60%,var(--deep));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 20px 60px rgba(47,143,255,.45));transform:translateZ(60px)}
.price-core .sub{color:var(--muted-2);font-size:15px;max-width:34ch;margin:0 auto}
.price .cta-row{justify-content:center;margin-top:36px}
.price-note{margin:22px auto 0;color:var(--muted);font-size:13.5px;max-width:64ch}

/* ==========================================================================
   7 · FAQ + CONTACT + FOOTER
   ========================================================================== */
.faq{padding:var(--section) 0}
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,90px)}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 2px;text-align:left;font-weight:700;font-size:clamp(16px,1.6vw,19px);letter-spacing:-.015em}
.faq-q:hover{color:var(--blue-2)}
.plus{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);position:relative;transition:transform .4s var(--ease),background .3s}
.plus::before,.plus::after{content:'';position:absolute;left:50%;top:50%;width:13px;height:1.5px;margin:-.75px 0 0 -6.5px;background:currentColor}
.plus::after{transform:rotate(90deg)}
.faq-item.open .plus{transform:rotate(45deg);background:rgba(47,143,255,.15);border-color:var(--blue)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq-a p{padding:0 2px 26px;color:var(--muted);font-size:15px;line-height:1.7;max-width:64ch}
@media (max-width:860px){.faq-wrap{grid-template-columns:1fr}}

.contact{padding:var(--section) 0;position:relative}
.contact-card{position:relative;border-radius:34px;overflow:hidden;border:1px solid var(--line-2);background:radial-gradient(60% 80% at 0% 0%,rgba(47,143,255,.18),transparent 60%),var(--panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:clamp(26px,5vw,64px);display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,70px)}
.contact-card h2{font-size:clamp(34px,4.6vw,64px)}
.contact-links{margin-top:30px;display:flex;flex-direction:column;gap:10px}
.contact-links a,.contact-links .loc{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(3,5,11,.4);text-decoration:none;font-size:15px;transition:border-color .3s}
.contact-links a:hover{border-color:rgba(87,166,255,.5)}
.contact-links svg{width:18px;height:18px;color:var(--blue-2);flex:none}
.map{margin-top:10px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.map iframe{display:block;width:100%;height:220px;border:0;filter:invert(.9) hue-rotate(180deg) saturate(.6) brightness(.9)}
.field{margin-bottom:14px}
.field label{display:block;margin-bottom:8px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{width:100%;padding:14px 15px;border-radius:12px;border:1px solid var(--line-2);background:rgba(3,5,11,.6);color:var(--text);font:15px var(--sans);transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(47,143,255,.16)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field-error{display:none;margin-top:7px;font-size:12.5px;color:#ff9b9b}
.field.invalid .field-error{display:block}
.field.invalid input,.field.invalid textarea{border-color:#ff6b6b}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{display:none;margin-top:14px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,107,107,.4);background:rgba(255,107,107,.08);color:#ffb3b3;font-size:13.5px}
.form-error.show{display:block}
.form-error a{color:#fff}
#submitBtn{width:100%;margin-top:6px;padding:16px}
#submitBtn.is-sending{opacity:.65;pointer-events:none}
.form-success{display:none;text-align:center;padding:50px 10px}
.form-success.show{display:block}
.form-success svg{width:46px;height:46px;color:var(--blue-2);margin:0 auto 16px}
.form-success p{color:var(--muted-2)}
@media (max-width:900px){.contact-card{grid-template-columns:1fr}}
@media (max-width:520px){.field-row{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding:70px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.foot-grid h4{margin-bottom:16px;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.foot-grid a{text-decoration:none;color:var(--muted-2);font-size:14px}
.foot-grid a:hover{color:var(--blue-2)}
.foot-grid li,.foot-grid .desc{color:var(--muted);font-size:14px;line-height:1.6}
.foot-giant{margin-top:60px;font-size:clamp(48px,11.5vw,190px);font-weight:800;letter-spacing:-.06em;line-height:.85;text-align:center;background:linear-gradient(180deg,rgba(185,220,255,.22),rgba(185,220,255,0) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none}
.foot-bottom{margin-top:26px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--muted)}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}

.to-top{position:fixed;right:22px;bottom:22px;z-index:200;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#57c8ff,#2f8fff 50%,#2f6bff);box-shadow:0 10px 30px rgba(47,143,255,.45);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .35s,transform .35s,visibility .35s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top svg{width:18px;height:18px}

/* ---------- reveal ---------- */
html.js-motion .rv{opacity:0;transform:translate3d(0,40px,0) rotateX(8deg);transform-origin:50% 100%}
html.js-motion .rv.in{opacity:1;transform:none;transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .card-step{position:relative;top:auto}
}

/* Stacked projects reserve space for the complete caption, including wrapped text. */
.work.stacked .work-track{gap:56px}
.work.stacked .win{aspect-ratio:auto;height:auto}
.work.stacked .win-frame{position:relative;inset:auto;height:auto;aspect-ratio:4/3.4}
.work.stacked .win .win-meta{position:relative;inset:auto;margin-top:28px;transform:none;opacity:1}
.work.stacked .win-meta>div{min-width:0}
.work.stacked .win-meta .tag{line-height:1.5}
.work.stacked .win.next .win-frame{min-height:420px;padding:28px}
@media(max-width:860px){.work.stacked .win-frame{aspect-ratio:3/3.6}}

.work.stacked .holo,.work.stacked .pedestal{display:none}