*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:root{--color-accent:#f2c200;--color-accent-dim:#c9a200;--color-accent-glow:rgba(242, 194, 0, 0.24);--color-bg:#0c0c0e;--color-bg-2:#141417;--color-bg-3:#1e1e23;--color-ink:#0c0c0e;--color-text:#f4f2ea;--color-text-dim:rgba(244, 242, 234, 0.56);--color-border:rgba(244, 242, 234, 0.13);--color-border-hover:rgba(242, 194, 0, 0.55);--color-text-inv:#0c0c0e;--text-rgb:244,242,234;--bg-rgb:12,12,14;--topbar-glass:rgba(12, 12, 14, 0.82);--footer-bg:#08080a;--font-display:'Space Grotesk', sans-serif;--font-body:'Inter', -apple-system, sans-serif;--ease:cubic-bezier(0.16, 1, 0.3, 1);--ease-out:cubic-bezier(0.33, 1, 0.68, 1);--container:min(1400px, 88vw);--topbar-h:76px;--bottombar-h:44px;--sidebar-w:48px}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:17px;background:var(--color-bg)}body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);line-height:1.6;overflow-x:hidden}::selection{background:var(--color-accent);color:var(--color-ink)}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{background:none;border:none;color:inherit;cursor:pointer;font:inherit}.container{width:var(--container);margin:0 auto}.loader{position:fixed;inset:0;z-index:9999;background:var(--color-bg);display:flex;align-items:center;justify-content:center;transition:transform 0.9s var(--ease)}.loader.is-done{transform:translateY(-100%);pointer-events:none}.loader__inner{display:flex;flex-direction:column;align-items:center;gap:32px}.loader__count{font-family:var(--font-display);font-size:clamp(80px, 18vw, 240px);font-weight:300;color:var(--color-text);letter-spacing:-.06em;line-height:1}.loader__bar{width:200px;height:1px;background:var(--color-border)}.loader__progress{height:100%;width:0%;background:var(--color-accent);transition:width 0.15s linear}.cursor{position:fixed;top:0;left:0;z-index:9998;pointer-events:none}.cursor__dot{width:10px;height:10px;background:var(--color-text);border-radius:50%;transform:translate(-50%,-50%);transition:width 0.4s var(--ease),height 0.4s var(--ease),background 0.3s}.cursor.is-hover .cursor__dot{width:56px;height:56px;background:var(--color-accent)}@media (hover:none),(pointer:coarse){.cursor{display:none}}.topbar{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px, 4vw, 56px);transition:background 0.4s,backdrop-filter 0.4s}.topbar--scrolled{background:var(--topbar-glass);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border-bottom:1px solid var(--color-border)}.topbar__logo{display:flex;align-items:center;font-family:var(--font-display);font-size:23px;font-weight:700;letter-spacing:.01em;transition:opacity 0.3s}.topbar__logo:hover{opacity:.78}.topbar__go{color:var(--color-accent)}.topbar__social{color:var(--color-text)}@keyframes dot-pulse{0%,100%{opacity:1}50%{opacity:.3}}.topbar__nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:clamp(20px, 2.5vw, 42px)}.topbar__navlink{font-family:var(--font-display);font-size:15px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-dim);position:relative;padding:8px 2px;transition:color 0.3s var(--ease)}.topbar__navlink::after{content:'';position:absolute;left:0;bottom:2px;width:0;height:2px;background:var(--color-accent);transition:width 0.4s var(--ease)}.topbar__navlink:hover{color:var(--color-text)}.topbar__navlink:hover::after{width:100%}.topbar__navlink.is-active{color:var(--color-accent)}.topbar__navlink.is-active::after{width:100%}.topbar__spotify{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--color-border);color:var(--color-text-dim);transition:color 0.3s,border-color 0.3s,transform 0.45s var(--ease)}.topbar__spotify svg{width:19px;height:19px}.topbar__spotify:hover{color:var(--color-accent);border-color:var(--color-accent);transform:translateY(-2px) rotate(8deg)}.topbar__toggle{display:flex;align-items:center;gap:12px;cursor:pointer}.topbar__toggle-label{font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.15em;color:var(--color-text);transition:color 0.3s}.topbar__hamburger{display:flex;flex-direction:column;gap:6px;width:24px}.topbar__hamburger span{display:block;width:100%;height:1.5px;background:var(--color-text);transition:transform 0.4s var(--ease),opacity 0.3s;transform-origin:center}.topbar__toggle[aria-expanded="true"] .topbar__hamburger span:first-child{transform:translateY(3.75px) rotate(45deg)}.topbar__toggle[aria-expanded="true"] .topbar__hamburger span:last-child{transform:translateY(-3.75px) rotate(-45deg)}.overlay{position:fixed;inset:0;z-index:190;background:var(--color-bg);display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity 0.5s var(--ease),visibility 0.5s;overflow-y:auto}.overlay.is-open{opacity:1;visibility:visible}.overlay__inner{width:100%;min-height:100%;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--topbar-h) + 48px) clamp(40px, 7vw, 110px) 56px}.overlay__main{display:grid;grid-template-columns:1fr 380px;gap:56px;flex:1;align-items:center}.overlay__links{display:flex;flex-direction:column}.overlay__link{font-family:var(--font-display);font-size:clamp(34px, 5.4vw, 72px);font-weight:500;letter-spacing:-.03em;line-height:1.34;color:var(--color-text);position:relative;padding:4px 0 4px 56px;opacity:0;transform:translateY(30px);transition:opacity 0.5s var(--ease),transform 0.5s var(--ease),color 0.3s,padding 0.4s var(--ease)}.overlay.is-open .overlay__link{opacity:1;transform:translateY(0)}.overlay.is-open .overlay__link:nth-child(1){transition-delay:0.05s}.overlay.is-open .overlay__link:nth-child(2){transition-delay:0.1s}.overlay.is-open .overlay__link:nth-child(3){transition-delay:0.15s}.overlay.is-open .overlay__link:nth-child(4){transition-delay:0.2s}.overlay.is-open .overlay__link:nth-child(5){transition-delay:0.25s}.overlay.is-open .overlay__link:nth-child(6){transition-delay:0.3s}.overlay.is-open .overlay__link:nth-child(7){transition-delay:0.35s}.overlay__link::before{content:attr(data-num);font-family:var(--font-display);font-size:12px;font-weight:400;letter-spacing:.1em;color:var(--color-accent);position:absolute;left:0;top:50%;transform:translateY(-50%)}.overlay__link:hover{color:var(--color-accent);padding-left:70px}.overlay__panel{display:flex;flex-direction:column;gap:22px;padding:26px 0 0;border-top:1px solid var(--color-border);opacity:0;transform:translateY(24px);transition:opacity 0.6s var(--ease) 0.3s,transform 0.6s var(--ease) 0.3s}.overlay.is-open .overlay__panel{opacity:1;transform:translateY(0)}.overlay__panel-label{display:block;font-family:var(--font-display);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-dim);margin-bottom:10px}.overlay__clock{padding-bottom:22px;border-bottom:1px solid var(--color-border)}.overlay__time{display:block;font-family:var(--font-display);font-size:38px;font-weight:400;letter-spacing:-.02em;color:var(--color-text);line-height:1;font-variant-numeric:tabular-nums}.overlay__zone{display:block;font-size:11px;letter-spacing:.1em;color:var(--color-accent);margin-top:10px}.overlay__footer{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-top:44px;padding-top:36px;border-top:1px solid var(--color-border);opacity:0;transform:translateY(20px);transition:opacity 0.5s var(--ease) 0.4s,transform 0.5s var(--ease) 0.4s}.overlay.is-open .overlay__footer{opacity:1;transform:translateY(0)}.overlay__info{display:flex;flex-direction:column;gap:4px}.overlay__info p{font-size:14px;color:var(--color-text-dim);line-height:1.6}.overlay__info a{transition:color 0.3s}.overlay__info a:hover{color:var(--color-accent)}.overlay__ctas{display:flex;gap:12px;flex-wrap:wrap}.sidebar{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:50;padding:0 16px;pointer-events:none}.sidebar__text{display:block;writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);font-family:var(--font-display);font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--color-text-dim);transition:opacity 0.4s}.bottombar{position:fixed;bottom:0;left:0;right:0;z-index:50;height:var(--bottombar-h);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px, 4vw, 48px);font-family:var(--font-display);font-size:10px;font-weight:400;letter-spacing:.15em;color:var(--color-text-dim);pointer-events:none}.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:14px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;padding:14px 32px;border-radius:100px;transition:all 0.4s var(--ease);cursor:pointer}.btn--primary{background:var(--color-accent);color:var(--color-ink)}.btn--primary:hover{background:var(--color-text);color:var(--color-ink);transform:translateY(-2px)}.btn--ghost{background:#fff0;color:var(--color-text);border:1px solid var(--color-border)}.btn--ghost:hover{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-ink);transform:translateY(-2px)}.btn--lg{font-size:15px;padding:18px 44px}@property --beam-a{syntax:"<angle>";initial-value:0deg;inherits:false}.btn{position:relative;isolation:isolate}.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--beam-a),transparent 0deg 275deg,var(--beam-color,#f2c200) 350deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1;animation:beam-a 3s linear infinite}.btn:hover::before{animation-duration:1.4s}.btn--primary{--beam-color:#ffffff}@keyframes beam-a{to{--beam-a:360deg}}@media (prefers-reduced-motion:reduce){.btn::before{animation:none}}.tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-dim);transition:color 0.3s}.tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--color-accent);flex-shrink:0}.tag:hover{color:var(--color-text)}.tag--sm{font-size:10px;letter-spacing:.1em;gap:7px}.tag--sm::before{width:4px;height:4px}.label{display:inline-block;font-family:var(--font-display);font-size:12px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-dim);margin-bottom:24px}.section-title{font-family:var(--font-display);font-size:clamp(35px, 5.8vw, 100px);font-weight:700;line-height:1.01;letter-spacing:-.042em;text-transform:uppercase;color:var(--color-text);max-width:1180px}.reveal{opacity:0;transform:perspective(1400px) translateY(46px) rotateX(13deg);transform-origin:center top;transition:opacity 0.9s var(--ease),transform 0.95s var(--ease)}.reveal.is-visible{opacity:1;transform:perspective(1400px) translateY(0) rotateX(0deg)}.split-text .word{display:inline-block;overflow:hidden;vertical-align:top}.split-text .word-inner{display:inline-block;transform:translateY(110%);transition:transform 0.8s var(--ease)}.split-text.is-visible .word-inner{transform:translateY(0)}.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:calc(var(--topbar-h) + 40px) 20px calc(var(--bottombar-h) + 40px)}.hero__content{position:relative;z-index:2;max-width:1100px}.hero__title{font-family:var(--font-display);font-size:clamp(44px, 9.4vw, 140px);font-weight:700;line-height:1;letter-spacing:-.055em;text-transform:uppercase;margin-bottom:36px}.hero__line{display:block}.hero__line--accent{display:inline-block;background:var(--color-accent);color:var(--color-ink);padding:0 .14em}.typewriter{display:inline}.typewriter__cursor{display:inline-block;width:3px;height:.85em;background:var(--color-ink);margin-left:4px;vertical-align:text-bottom;animation:cursor-blink 0.8s step-end infinite}@keyframes cursor-blink{0%,100%{opacity:1}50%{opacity:0}}.hero__tags{display:flex;gap:14px 28px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}.hero__sub{font-size:clamp(17px, 2vw, 25px);color:var(--color-text);line-height:1.55;max-width:1040px;margin:0 auto 40px}.hero__actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.hero__scroll{position:absolute;bottom:calc(var(--bottombar-h) + 20px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:2}.hero__scroll span{font-family:var(--font-display);font-size:10px;font-weight:500;letter-spacing:.2em;color:var(--color-text-dim)}.hero__scroll-line{width:1px;height:48px;background:linear-gradient(to bottom,var(--color-accent),transparent);animation:scroll-line 2.2s ease-in-out infinite}@keyframes scroll-line{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.01%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}.insight{padding:28px 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.insight__inner{width:var(--container);margin:0 auto;display:flex;align-items:center;justify-content:center;gap:clamp(24px, 4vw, 56px);flex-wrap:wrap}.insight__item{display:flex;align-items:baseline;gap:10px}.insight__label{font-family:var(--font-display);font-size:10px;font-weight:400;letter-spacing:.15em;color:var(--color-text-dim);text-transform:uppercase}.insight__value{font-family:var(--font-display);font-size:clamp(24px, 3vw, 40px);font-weight:600;color:var(--color-text);letter-spacing:-.03em}.insight__sep{width:1px;height:32px;background:var(--color-border)}.about{padding:clamp(120px, 14vw, 200px) 0}.about__grid{display:grid;grid-template-columns:150px 1fr;gap:48px;align-items:start}.about__heading{font-family:var(--font-display);font-size:clamp(26px, 4vw, 60px);font-weight:600;line-height:1.18;letter-spacing:-.032em;color:var(--color-text);margin-bottom:40px}.about__body{font-size:clamp(20px, 1.75vw, 26px);color:var(--color-text-dim);line-height:1.5;max-width:1240px}.services{padding:clamp(100px, 12vw, 180px) 0;border-top:1px solid var(--color-border)}.services__header{margin-bottom:72px}.svc{display:grid;grid-template-columns:72px 1fr 40px;align-items:start;gap:24px;padding:36px 0;border-bottom:1px solid var(--color-border);cursor:pointer;transition:border-color 0.4s;text-decoration:none;color:inherit}.svc:first-child{border-top:1px solid var(--color-border)}.svc:hover{border-color:var(--color-border-hover)}.svc__num{font-family:var(--font-display);font-size:14px;font-weight:400;color:var(--color-accent);letter-spacing:.08em;padding-top:4px}.svc__title{font-family:var(--font-display);font-size:clamp(24px, 3.2vw, 46px);font-weight:600;letter-spacing:-.02em;line-height:1.12;transition:color 0.3s}.svc:hover .svc__title{color:var(--color-accent)}.svc__desc{max-height:0;overflow:hidden;opacity:0;margin-top:0;font-family:var(--font-body);font-size:16px;color:var(--color-text-dim);line-height:1.65;max-width:560px;transition:max-height 0.6s var(--ease),opacity 0.5s var(--ease),margin 0.5s var(--ease)}.svc:hover .svc__desc{max-height:120px;opacity:1;margin-top:14px}.svc__tags{display:flex;flex-wrap:wrap;gap:10px 20px;max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height 0.6s var(--ease),opacity 0.5s var(--ease),margin 0.5s var(--ease)}.svc:hover .svc__tags{max-height:60px;opacity:1;margin-top:16px}.svc__arrow{color:var(--color-text-dim);transition:color 0.3s,transform 0.5s var(--ease);margin-top:4px;flex-shrink:0}.svc:hover .svc__arrow{color:var(--color-accent);transform:rotate(45deg)}.process{padding:clamp(100px, 12vw, 180px) 0;background:var(--color-bg-2)}.process__header{margin-bottom:72px}.process__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.process__step{padding:36px 26px 38px 0;border-top:1px solid var(--color-border);transition:border-color 0.45s var(--ease)}.process__step:hover{border-top-color:var(--color-accent)}.process__num{font-family:var(--font-display);font-size:clamp(36px, 4vw, 52px);font-weight:300;color:var(--color-accent);opacity:.4;line-height:1;margin-bottom:28px;letter-spacing:-.04em;transition:opacity 0.3s}.process__step:hover .process__num{opacity:1}.process__title{font-family:var(--font-display);font-size:clamp(15px, 1.4vw, 18px);font-weight:600;letter-spacing:.02em;text-transform:uppercase;margin-bottom:14px;line-height:1.3}.process__desc{font-size:15px;color:var(--color-text-dim);line-height:1.65}.slides{position:relative;background:var(--color-bg)}.slides__intro{padding:clamp(90px, 12vw, 170px) 0 clamp(40px, 6vw, 72px)}.slide{position:sticky;top:0;min-height:100vh;display:flex;overflow:hidden;border-radius:32px 32px 0 0}.slide--1{background:radial-gradient(circle at 78% 24%,rgb(242 194 0 / .16),transparent 54%),#1a1810}.slide--2{background:linear-gradient(155deg,#f4c81e,#ecbb00)}.slide--3{background:radial-gradient(circle at 22% 76%,rgb(242 194 0 / .16),transparent 54%),#1a1810}.slide__ghost{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:clamp(120px, 27vw, 440px);font-weight:700;letter-spacing:-.05em;line-height:1;white-space:nowrap;text-transform:uppercase;color:rgb(242 194 0 / .1);z-index:0;pointer-events:none;user-select:none;will-change:transform}.slide--2 .slide__ghost{color:rgb(23 22 15 / .13)}.slide__inner{position:relative;z-index:1;width:var(--container);margin:0 auto;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:calc(var(--topbar-h) + 64px) 0 76px}.slide__row{display:flex;justify-content:space-between;align-items:flex-start;gap:28px}.slide__row--bottom{align-items:flex-end}.slide__index,.slide__cat{font-family:var(--font-display);font-size:14px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-dim)}.slide__name{font-family:var(--font-display);font-size:clamp(48px, 9vw, 150px);font-weight:700;letter-spacing:-.04em;line-height:.98;text-transform:uppercase;color:var(--color-text)}.slide__caption{max-width:460px;font-size:16px;line-height:1.65;color:var(--color-text-dim)}.slide__link{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text);padding:15px 28px;border:1px solid var(--color-border);border-radius:100px;white-space:nowrap;flex-shrink:0;transition:background 0.4s var(--ease),color 0.4s,border-color 0.4s,transform 0.4s var(--ease)}.slide__link:hover{background:var(--color-accent);color:var(--color-accent);border-color:var(--color-accent)}.slide--2 .slide__index,.slide--2 .slide__cat{color:rgb(23 22 15 / .64)}.slide--2 .slide__name{color:var(--color-accent)}.slide--2 .slide__caption{color:rgb(23 22 15 / .76)}.slide--2 .slide__link{color:var(--color-accent);border-color:rgb(23 22 15 / .3)}.slide--2 .slide__link:hover{background:var(--color-ink);color:var(--color-accent);border-color:var(--color-accent)}.slide--1 .slide__name,.slide--3 .slide__name{color:#f5f2e8}.slide--1 .slide__index,.slide--3 .slide__index,.slide--1 .slide__cat,.slide--3 .slide__cat{color:rgb(245 242 232 / .55)}.slide--1 .slide__caption,.slide--3 .slide__caption{color:rgb(245 242 232 / .66)}.slide--1 .slide__link,.slide--3 .slide__link{color:#f5f2e8;border-color:rgb(245 242 232 / .26)}.slide--1 .slide__link:hover,.slide--3 .slide__link:hover{background:var(--color-accent);color:var(--color-accent);border-color:var(--color-accent)}@media (max-width:768px){.slide__inner{gap:32px;padding-top:calc(var(--topbar-h) + 40px)}.slide__row{flex-direction:column;gap:14px}.slide__row--bottom{gap:26px;align-items:flex-start}.slide__ghost{font-size:clamp(96px, 40vw, 240px)}}.testimonials{padding:clamp(100px, 12vw, 180px) 0;background:var(--color-bg-2)}.testimonials__header{margin-bottom:64px}.testimonials__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.testimonial{padding:40px 30px 42px 0;border-top:1px solid var(--color-border);display:flex;flex-direction:column;transition:border-color 0.45s var(--ease)}.testimonial:hover{border-top-color:var(--color-accent)}.testimonial__text{font-size:17px;line-height:1.75;color:var(--color-text-dim);font-style:italic;margin-bottom:32px;flex:1}.testimonial__author{display:flex;flex-direction:column;gap:4px}.testimonial__name{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--color-text)}.testimonial__company{font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--color-accent)}.faq{padding:clamp(100px, 12vw, 180px) 0}.faq__grid{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;align-items:start}.faq__item{border-bottom:1px solid var(--color-border)}.faq__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;font-family:var(--font-body);font-size:17px;font-weight:500;text-align:left;color:var(--color-text);cursor:pointer;transition:color 0.3s}.faq__trigger:hover{color:var(--color-accent)}.faq__icon{width:24px;height:24px;position:relative;flex-shrink:0}.faq__icon::before,.faq__icon::after{content:'';position:absolute;top:50%;left:50%;width:14px;height:1.5px;background:var(--color-text);transform:translate(-50%,-50%);transition:transform 0.4s var(--ease),background 0.3s}.faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)}.faq__item--open .faq__icon::after{transform:translate(-50%,-50%) rotate(0deg)}.faq__item--open .faq__icon::before,.faq__item--open .faq__icon::after{background:var(--color-accent)}.faq__content{max-height:0;overflow:hidden;transition:max-height 0.5s var(--ease)}.faq__content p{padding:0 0 24px;font-size:16px;color:var(--color-text-dim);line-height:1.7;max-width:540px}.cta{padding:clamp(120px, 16vw, 240px) 0;position:relative;overflow:hidden;text-align:center}.cta__glow{position:absolute;width:800px;height:800px;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgb(242 194 0 / .16) 0%,transparent 65%);pointer-events:none}.cta__content{position:relative;z-index:1}.cta__title{font-family:var(--font-display);font-size:clamp(40px, 7vw, 116px);font-weight:700;line-height:1;letter-spacing:-.045em;text-transform:uppercase;margin-bottom:24px}.cta__sub{font-size:clamp(17px, 2vw, 25px);color:var(--color-text-dim);margin-bottom:44px;line-height:1.55;max-width:760px;margin-left:auto;margin-right:auto}.cta__actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.footer{padding:80px 0 calc(var(--bottombar-h) + 40px);border-top:1px solid var(--color-border)}.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:60px;margin-bottom:60px}.footer__tagline{font-size:15px;color:var(--color-text-dim);line-height:1.65;margin-top:20px;max-width:320px}.footer__address{font-size:14px;color:var(--color-text-dim);line-height:1.7;margin-top:16px;opacity:.6}.footer__heading{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--color-text);margin-bottom:20px}.footer__col{display:flex;flex-direction:column;gap:12px}.footer__link{font-size:15px;color:var(--color-text-dim);transition:color 0.3s}.footer__link:hover{color:var(--color-accent)}.footer__bottom{padding-top:32px;border-top:1px solid var(--color-border);font-size:12px;color:var(--color-text-dim);letter-spacing:.03em}@media (max-width:1024px){.topbar__nav{display:none}.about__grid{grid-template-columns:1fr;gap:32px}.process__grid{grid-template-columns:repeat(2,1fr)}.testimonials__grid{grid-template-columns:1fr}.faq__grid{grid-template-columns:1fr;gap:48px}.project__bottom{flex-direction:column;align-items:flex-start}.project__details{flex-direction:column;gap:24px}.sidebar{display:none}.overlay__link::before{display:none}}@media (max-width:768px){.topbar{padding:0 18px}.process__grid{grid-template-columns:1fr}.svc{grid-template-columns:48px 1fr 32px;gap:16px}.hero__title{font-size:clamp(31px, 10.5vw, 66px)}.hero{padding:calc(var(--topbar-h) + 20px) 16px calc(var(--bottombar-h) + 20px)}.footer__grid{grid-template-columns:1fr;gap:40px}.bottombar{display:none}.frame{display:none}.insight__inner{flex-direction:column;gap:16px}.insight__sep{width:40px;height:1px}.project{padding:32px 24px}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}.reveal{opacity:1;transform:none}.split-text .word-inner{transform:none}.loader{transition:none}.loader.is-done{transform:none;opacity:0;visibility:hidden}}.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0%;background:var(--color-accent);z-index:300;box-shadow:0 0 12px var(--color-accent-glow)}.pf-hero{position:relative;padding-top:calc(var(--topbar-h) + 80px);overflow:hidden}.pf-hero__orb{position:absolute;width:60vw;height:60vw;max-width:760px;max-height:760px;top:-18%;right:-8%;background:radial-gradient(circle,rgb(242 194 0 / .18) 0%,transparent 65%);filter:blur(40px);pointer-events:none;animation:orb-float 16s ease-in-out infinite}@keyframes orb-float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6%,8%) scale(1.12)}}.pf-hero__top{display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:end;padding-bottom:64px}.pf-hero__headline{position:relative;z-index:1}.pf-hero__title{font-family:var(--font-display);font-size:clamp(60px, 12vw, 196px);font-weight:700;line-height:.92;letter-spacing:-.05em;text-transform:uppercase}.pf-hero__title--accent{color:var(--color-accent)}.pf-hero__meta{padding-bottom:16px}.pf-hero__lead{font-size:clamp(15px, 1.5vw, 19px);color:var(--color-text-dim);line-height:1.65;max-width:420px;margin-bottom:36px}.pf-hero__stats{display:flex;gap:48px}.pf-hero__stat{display:flex;flex-direction:column;gap:8px}.pf-hero__stat-num{font-family:var(--font-display);font-size:clamp(38px, 4.5vw, 64px);font-weight:600;color:var(--color-text);letter-spacing:-.03em;line-height:1}.pf-hero__stat-label{font-family:var(--font-display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-dim)}.pf-hero__marquee{border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);overflow:hidden;padding:18px 0}.pf-hero__marquee-track{display:flex;align-items:center;width:max-content;animation:pf-marquee 30s linear infinite}.pf-hero__marquee-track span:not(.pf-dot){font-family:var(--font-display);font-size:clamp(15px, 2vw, 26px);font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--color-text-dim);padding:0 26px;white-space:nowrap}.pf-dot{width:7px;height:7px;border-radius:50%;background:var(--color-accent);flex-shrink:0}@keyframes pf-marquee{to{transform:translateX(-50%)}}.pf-section-head{margin-bottom:56px}.pf-featured{padding:clamp(90px, 11vw, 150px) 0}.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}.feat-grid>.feat-card:nth-child(even){margin-top:0}.feat-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:320px;padding:34px 28px 40px 0;overflow:hidden;border-top:1px solid var(--color-border);transition:border-color 0.45s var(--ease)}.feat-card:hover{border-top-color:var(--color-accent)}.feat-card__bg{display:none}.feat-card:hover .feat-card__bg{transform:scale(1.07)}.feat-card--1 .feat-card__bg{background:radial-gradient(circle at 28% 22%,rgb(242 194 0 / .22),transparent 60%),linear-gradient(165deg,#1c1c22,#0e0e11 72%)}.feat-card--2 .feat-card__bg{background:radial-gradient(circle at 78% 78%,rgb(242 194 0 / .2),transparent 58%),linear-gradient(150deg,#1c1c22,#0e0e11 70%)}.feat-card--3 .feat-card__bg{background:radial-gradient(circle at 50% 108%,rgb(242 194 0 / .22),transparent 62%),linear-gradient(200deg,#1c1c22,#0e0e11 74%)}.feat-card--4 .feat-card__bg{background:radial-gradient(circle at 85% 14%,rgb(242 194 0 / .22),transparent 58%),linear-gradient(135deg,#1c1c22,#0e0e11 72%)}.feat-card--5 .feat-card__bg{background:radial-gradient(circle at 18% 85%,rgb(242 194 0 / .2),transparent 60%),linear-gradient(120deg,#1c1c22,#0e0e11 68%)}.feat-card--6 .feat-card__bg{background:radial-gradient(circle at 60% 22%,rgb(242 194 0 / .2),transparent 62%),linear-gradient(175deg,#1c1c22,#0e0e11 74%)}.feat-card::before{content:attr(data-mono);position:absolute;right:-8px;bottom:-64px;font-family:var(--font-display);font-size:220px;font-weight:700;color:rgb(244 242 234 / .05);z-index:0;line-height:1;transition:color 0.5s,transform 0.7s var(--ease);pointer-events:none}.feat-card:hover::before{color:rgb(242 194 0 / .2);transform:translateY(-12px)}.feat-card__top,.feat-card__body{position:relative;z-index:1}.feat-card__top{display:flex;justify-content:space-between;align-items:flex-start}.feat-card__index{font-family:var(--font-display);font-size:14px;font-weight:500;color:var(--color-accent);letter-spacing:.08em}.feat-card__arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;color:var(--color-text);transition:background 0.4s,color 0.4s,transform 0.5s var(--ease),border-color 0.4s}.feat-card:hover .feat-card__arrow{background:var(--color-accent);color:var(--color-accent);border-color:var(--color-accent);transform:rotate(45deg)}.feat-card__cat{display:block;font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.12em;color:var(--color-accent);margin-bottom:14px}.feat-card__name{font-family:var(--font-display);font-size:clamp(26px, 3vw, 40px);font-weight:600;letter-spacing:-.02em;line-height:1.04;text-transform:uppercase;margin-bottom:16px}.feat-card__desc{font-size:15px;color:var(--color-text-dim);line-height:1.6;margin-bottom:22px;max-width:420px}.feat-card__cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text);transition:color 0.3s}.feat-card__cta::after{content:'→';transition:transform 0.3s var(--ease)}.feat-card:hover .feat-card__cta{color:var(--color-accent)}.feat-card:hover .feat-card__cta::after{transform:translateX(6px)}.archive{padding:clamp(90px, 11vw, 150px) 0;background:var(--color-bg-2)}.archive__bar{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:30px;flex-wrap:wrap}.archive__filters{display:flex;flex-wrap:wrap;gap:10px 22px}.filter-pill{font-family:var(--font-display);font-size:12px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;padding:6px 0;color:var(--color-text-dim);transition:color 0.3s}.filter-pill:hover{color:var(--color-text)}.filter-pill.is-active{color:var(--color-accent)}.archive__count{font-family:var(--font-display);font-size:11px;letter-spacing:.12em;color:var(--color-text-dim);white-space:nowrap}.archive__head{display:grid;grid-template-columns:72px 1fr 300px 64px 36px;gap:24px;padding:0 24px 14px;border-bottom:1px solid var(--color-border);font-family:var(--font-display);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-dim)}.archive__head span:last-child{text-align:right}.archive__list{display:flex;flex-direction:column}.arch-row{display:grid;grid-template-columns:72px 1fr 300px 64px 36px;gap:24px;align-items:center;padding:22px 24px;border-bottom:1px solid var(--color-border);color:var(--color-text);position:relative;transition:background 0.4s var(--ease),padding 0.4s var(--ease)}.arch-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--color-accent);transform:scaleY(0);transform-origin:bottom;transition:transform 0.4s var(--ease)}.arch-row:hover{background:rgb(242 194 0 / .1);padding-left:34px}.arch-row:hover::before{transform:scaleY(1);transform-origin:top}.arch-row__idx{font-family:var(--font-display);font-size:12px;color:var(--color-text-dim);letter-spacing:.05em}.arch-row__name{font-family:var(--font-display);font-size:clamp(17px, 1.7vw, 22px);font-weight:600;letter-spacing:-.01em;transition:color 0.3s}.arch-row:hover .arch-row__name{color:var(--color-accent)}.arch-row__tag{font-size:14px;color:var(--color-text-dim)}.arch-row__year{font-family:var(--font-display);font-size:14px;color:var(--color-text-dim);text-align:right}.arch-row__arrow{justify-self:end;color:var(--color-text-dim);display:flex;transition:transform 0.4s var(--ease),color 0.3s}.arch-row:hover .arch-row__arrow{color:var(--color-accent);transform:translateX(6px)}.arch-row.is-hidden{display:none}.arch-row.is-in{animation:row-in 0.5s var(--ease) both}@keyframes row-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.archive__empty{display:none;text-align:center;padding:64px 0;font-family:var(--font-display);color:var(--color-text-dim);letter-spacing:.05em}.archive__empty.is-shown{display:block}.pf-preview{position:fixed;top:0;left:0;z-index:160;width:218px;pointer-events:none;opacity:0;transition:opacity 0.28s var(--ease);will-change:transform}.pf-preview.is-active{opacity:1}.pf-preview__art{height:148px;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border);background:linear-gradient(135deg,#f4c81e,#d9ad00);transform:scale(.9);transition:transform 0.32s var(--ease)}.pf-preview.is-active .pf-preview__art{transform:scale(1)}.pf-preview__mono{font-family:var(--font-display);font-size:46px;font-weight:700;color:rgb(10 10 10 / .82);letter-spacing:-.02em}.pf-preview__meta{margin-top:12px;text-align:center}.pf-preview__name{display:block;font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--color-text)}.pf-preview__cat{display:block;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent);margin-top:5px}.pf-cta{padding:clamp(110px, 14vw, 200px) 0;position:relative;overflow:hidden;text-align:center;border-top:1px solid var(--color-border)}.pf-cta__content{position:relative;z-index:1}.footer--portfolio{padding-top:90px}.footer--portfolio .footer__grid{grid-template-columns:1.7fr 1fr 1fr 1fr;gap:48px;margin-bottom:44px}.footer--portfolio .footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.footer__time{font-family:var(--font-display);font-size:11px;letter-spacing:.1em;color:var(--color-text-dim)}@media (max-width:1024px){.overlay{align-items:flex-start}.overlay__inner{justify-content:flex-start}.overlay__main{grid-template-columns:1fr;gap:40px;align-items:start}.overlay__panel{max-width:420px}.overlay__footer{flex-direction:column;align-items:stretch;gap:28px}.overlay__ctas{flex-direction:column;flex-wrap:nowrap}.overlay__ctas .btn{width:100%;justify-content:center;text-align:center}.pf-hero__top{grid-template-columns:1fr;gap:32px;align-items:start}.feat-grid{grid-template-columns:1fr}.feat-grid>.feat-card:nth-child(even){margin-top:0}.footer--portfolio .footer__grid{grid-template-columns:repeat(2,1fr)}.archive__head{grid-template-columns:56px 1fr 200px 48px 32px}.arch-row{grid-template-columns:56px 1fr 200px 48px 32px}}@media (max-width:680px){.archive__head{display:none}.arch-row{grid-template-columns:44px 1fr 40px;gap:14px;padding:20px 16px}.arch-row__tag{display:none}.arch-row__year{grid-column:2;grid-row:2;margin-top:2px;text-align:left}.arch-row:hover{padding-left:22px}.feat-card{min-height:400px;padding:28px}.feat-card::before{font-size:160px}.footer--portfolio .footer__grid{grid-template-columns:1fr;gap:32px}.pf-hero__stats{gap:32px}}@media (hover:none),(pointer:coarse){.pf-preview{display:none}}@media (prefers-reduced-motion:reduce){.pf-hero__orb,.pf-hero__marquee-track{animation:none}.arch-row.is-in{animation:none}}.topbar__right{display:flex;align-items:center;gap:20px}.btn--signal{background:var(--color-bg-2);border:1px solid var(--color-border);color:var(--color-text);padding:11px 22px;font-size:12px}.btn--signal:hover{border-color:var(--color-accent);color:var(--color-text);transform:translateY(-2px);box-shadow:none}.btn__dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent);flex-shrink:0;animation:dot-pulse 1.5s ease-in-out infinite}.hud__dot{width:7px;height:7px;border-radius:50%;background:var(--color-accent);flex-shrink:0;animation:dot-pulse 1.4s ease-in-out infinite}.bento{padding:clamp(80px, 10vw, 140px) 0;border-bottom:1px solid var(--color-border)}.bento__head{margin-bottom:52px}.bento__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.bento-card{position:relative;display:flex;flex-direction:column;padding:28px 24px 34px 0;min-height:200px;border-top:1px solid var(--color-border);transition:border-color 0.45s var(--ease)}.bento-card--wide{grid-column:span 2}.bento-card:hover{border-top-color:var(--color-accent)}.bento-card__tag{font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-dim)}.bento-card__num{font-family:var(--font-display);font-size:clamp(50px, 7vw, 118px);font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--color-text);margin-top:auto}.bento-card__label{font-size:14px;color:var(--color-text-dim);line-height:1.55;margin-top:12px;max-width:320px}.bento-card--cta{text-decoration:none;color:inherit}.bento-card__cta-text{font-family:var(--font-display);font-size:clamp(22px, 2.6vw, 34px);font-weight:600;letter-spacing:-.02em;text-transform:uppercase;line-height:1.05;color:var(--color-text);margin-top:auto}.bento-card__cta-arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;color:var(--color-text);margin-top:18px;transition:background 0.4s,color 0.4s,border-color 0.4s,transform 0.5s var(--ease)}.bento-card--cta:hover .bento-card__cta-arrow{background:var(--color-accent);color:var(--color-accent);border-color:var(--color-accent);transform:rotate(-45deg)}.bento-card--accent{border-top-color:var(--color-accent)}.bento-card--accent .bento-card__cta-arrow,.bento-card--accent.bento-card--cta:hover .bento-card__cta-arrow{background:var(--color-accent);color:var(--color-ink);border-color:var(--color-accent)}.bento-card--accent .bento-card__cta-text{color:var(--color-accent)}.bento-card--accent .bento-card__tag{color:var(--color-text-dim)}.cta__status{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-dim);margin-bottom:24px}@media (max-width:1024px){.bento__grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.topbar__cta{display:none}}@media (max-width:600px){.bento__grid{grid-template-columns:1fr}.bento-card--wide{grid-column:span 1}.bento-card{min-height:168px}}@media (prefers-reduced-motion:reduce){.hud__dot,.btn__dot{animation:none}}@media (min-width:1025px){.topbar__toggle{display:none}}.overlay__spotify{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--color-border);border-radius:14px;color:var(--color-text);transition:border-color 0.3s,background 0.3s,transform 0.4s var(--ease)}.overlay__spotify svg{width:30px;height:30px;color:var(--color-accent);flex-shrink:0}.overlay__spotify:hover{border-color:var(--color-border-hover);background:rgb(242 194 0 / .1);transform:translateY(-2px)}.overlay__spotify .overlay__panel-label{margin-bottom:2px}.overlay__spotify-meta{display:flex;flex-direction:column}.overlay__spotify-text{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--color-text)}.ct-hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:calc(var(--topbar-h) + 60px) 20px calc(var(--bottombar-h) + 60px)}.ct-hero__orb{position:absolute;width:clamp(340px, 50vw, 680px);height:clamp(340px, 50vw, 680px);top:44%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 42% 38%,rgb(242 194 0 / .22),rgb(242 194 0 / .07) 45%,transparent 70%);filter:blur(46px);z-index:0;animation:orb-breathe 11s ease-in-out infinite}@keyframes orb-breathe{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.08);opacity:.8}}@keyframes chip-in{to{opacity:1}}.ct-hero__content{position:relative;z-index:3;max-width:1180px}.ct-hero__title{font-family:var(--font-display);font-size:clamp(42px, 7.3vw, 114px);font-weight:700;line-height:1;letter-spacing:-.05em;text-transform:uppercase;margin:26px 0 30px}.ct-hero__line{display:block}.ct-hero__line--accent{color:var(--color-accent)}.ct-hero__sub{font-size:clamp(17px, 2vw, 26px);color:var(--color-text-dim);line-height:1.55;max-width:760px;margin:0 auto 38px}.ct-hero__actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.ct-hero__scroll{position:absolute;bottom:calc(var(--bottombar-h) + 16px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:3}.ct-hero__scroll span{font-family:var(--font-display);font-size:10px;font-weight:500;letter-spacing:.2em;color:var(--color-text-dim)}.ct-hero__scroll-line{width:1px;height:46px;background:linear-gradient(to bottom,var(--color-accent),transparent);animation:scroll-line 2.2s ease-in-out infinite}.ct-method{padding:clamp(90px, 12vw, 160px) 0}.ct-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-bottom:72px}.ct-method__title{font-family:var(--font-display);font-size:clamp(33px, 5vw, 84px);font-weight:700;letter-spacing:-.038em;line-height:1;text-transform:uppercase;margin-top:16px}.ct-method__lead{font-size:clamp(17px, 1.8vw, 22px);color:var(--color-text);line-height:1.5;margin-bottom:22px}.ct-method__body{font-size:17px;color:var(--color-text-dim);line-height:1.75}.ct-method__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:60px}.ct-method-card{padding:32px 24px 36px 0;border-top:1px solid var(--color-border);transition:border-color 0.45s var(--ease)}.ct-method-card:hover{border-top-color:var(--color-accent)}.ct-method-card__num{font-family:var(--font-display);font-size:14px;font-weight:500;color:var(--color-accent);letter-spacing:.08em}.ct-method-card__title{font-family:var(--font-display);font-size:clamp(20px, 2vw, 26px);font-weight:600;letter-spacing:-.01em;margin:18px 0 10px}.ct-method-card__desc{font-size:15px;color:var(--color-text-dim);line-height:1.6}.ct-challenges{padding:clamp(90px, 12vw, 160px) 0;background:var(--color-bg-2)}.ct-challenges__head{margin-bottom:56px}.ct-challenges__intro{font-size:16px;color:var(--color-text-dim);margin-top:18px}.ct-challenges__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.challenge{position:relative;display:flex;flex-direction:column;padding:28px 22px 32px 0;min-height:218px;border-top:1px solid var(--color-border);transition:border-color 0.45s var(--ease)}.challenge:hover{border-top-color:var(--color-accent)}.challenge__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.challenge__index{font-family:var(--font-display);font-size:12px;font-weight:500;color:var(--color-accent);letter-spacing:.08em}.challenge__arrow{display:flex;color:var(--color-text-dim);transition:color 0.3s,transform 0.5s var(--ease)}.challenge:hover .challenge__arrow{color:var(--color-accent);transform:rotate(45deg)}.challenge__problem{font-family:var(--font-display);font-size:clamp(18px, 1.7vw, 22px);font-weight:600;letter-spacing:-.01em;line-height:1.2;margin-bottom:16px}.challenge__swap{position:relative;margin-top:auto;min-height:72px}.challenge__cost,.challenge__fix{font-size:13.5px;line-height:1.6;margin:0}.challenge__cost{color:var(--color-text-dim);transition:opacity 0.35s var(--ease)}.challenge__fix{position:absolute;left:0;top:0;right:0;color:var(--color-text);opacity:0;transform:translateY(8px);transition:opacity 0.35s var(--ease),transform 0.35s var(--ease)}.challenge__fix span{color:var(--color-accent);font-weight:600}.challenge:hover .challenge__cost{opacity:0}.challenge:hover .challenge__fix{opacity:1;transform:translateY(0)}.ct-form-section{padding:clamp(90px, 12vw, 160px) 0}.ct-form-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:72px;align-items:start}.ct-form-intro__title{font-family:var(--font-display);font-size:clamp(30px, 4.2vw, 66px);font-weight:600;letter-spacing:-.03em;line-height:1.12;text-transform:uppercase;margin:16px 0 22px}.ct-form-intro__lead{font-size:17px;color:var(--color-text-dim);line-height:1.7;margin-bottom:36px}.ct-steps{list-style:none;display:flex;flex-direction:column}.ct-step{display:flex;align-items:center;gap:18px;padding:17px 0;border-top:1px solid var(--color-border)}.ct-step:last-child{border-bottom:1px solid var(--color-border)}.ct-step__num{font-family:var(--font-display);font-size:14px;font-weight:500;color:var(--color-accent);letter-spacing:.05em}.ct-step__text{font-size:16px;color:var(--color-text)}.ct-form-intro__alt{margin-top:32px}.ct-form-intro__alt-label{display:block;font-family:var(--font-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-dim);margin-bottom:9px}.ct-textlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--color-accent);transition:gap 0.3s var(--ease)}.ct-textlink:hover{gap:13px}.ct-form-wrap{padding:38px 0 0;border-top:1px solid var(--color-border)}.ct-form{display:flex;flex-direction:column;gap:8px}.field{position:relative;padding-top:20px}.field__input{width:100%;background:#fff0;border:0;border-bottom:1px solid var(--color-border);padding:11px 0;font-family:var(--font-body);font-size:17px;color:var(--color-text);outline:none}.field__input::placeholder{color:#fff0}.field__label{position:absolute;left:0;top:31px;font-size:17px;color:var(--color-text-dim);pointer-events:none;transition:transform 0.3s var(--ease),color 0.3s;transform-origin:left top}.field__opt{font-size:.78em;opacity:.55}input.field__input:focus+.field__label,input.field__input:not(:placeholder-shown)+.field__label,textarea.field__input:focus+.field__label,textarea.field__input:not(:placeholder-shown)+.field__label,.field__select:focus+.field__label,.field__select:valid+.field__label{transform:translateY(-30px) scale(.74);color:var(--color-accent)}.field__line{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--color-accent);transition:width 0.4s var(--ease)}.field__input:focus~.field__line{width:100%}.field__input--error{border-bottom-color:#ff6b6b}.field__input--error~.field__line{background:#ff6b6b;width:100%}.field__select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:28px}.field__select option{background:var(--color-bg-2);color:var(--color-text)}.field__chevron{position:absolute;right:2px;top:33px;color:var(--color-text-dim);pointer-events:none;transition:transform 0.3s,color 0.3s}.field--select:focus-within .field__chevron{transform:rotate(180deg);color:var(--color-accent)}.field__textarea{resize:vertical;min-height:54px;line-height:1.6}.ct-form__submit{width:100%;justify-content:center;margin-top:24px}.ct-form__micro{font-size:12.5px;color:var(--color-text-dim);text-align:center;margin-top:14px;line-height:1.5}.ct-form__success{display:none;flex-direction:column;align-items:center;text-align:center;padding:20px 0}.ct-form.is-sent .field,.ct-form.is-sent .ct-form__submit,.ct-form.is-sent .ct-form__micro{display:none}.ct-form.is-sent .ct-form__success{display:flex;animation:chip-in 0.5s var(--ease)}.ct-form__success-mark{width:60px;height:60px;border-radius:50%;background:var(--color-accent);color:var(--color-ink);display:flex;align-items:center;justify-content:center;margin-bottom:22px}.ct-form__success-title{font-family:var(--font-display);font-size:26px;font-weight:600;letter-spacing:-.02em;margin-bottom:12px}.ct-form__success-text{font-size:16px;color:var(--color-text-dim);line-height:1.6;max-width:350px;margin-bottom:26px}.ct-final{padding:clamp(110px, 14vw, 200px) 0;position:relative;overflow:hidden;text-align:center;border-top:1px solid var(--color-border)}.ct-final__content{position:relative;z-index:1}@media (max-width:1024px){.ct-split{grid-template-columns:1fr;gap:28px}.ct-method__grid{grid-template-columns:repeat(2,1fr)}.ct-challenges__grid{grid-template-columns:repeat(2,1fr)}.ct-form-grid{grid-template-columns:1fr;gap:48px}}@media (hover:none){.challenge__swap{min-height:0}.challenge__cost{opacity:1}.challenge__fix{position:static;opacity:1;transform:none;margin-top:10px;padding-top:10px;border-top:1px solid var(--color-border)}}@media (max-width:600px){.ct-method__grid{grid-template-columns:1fr}.ct-challenges__grid{grid-template-columns:1fr}.ct-form-wrap{padding:28px 22px}.challenge{min-height:0}}@media (prefers-reduced-motion:reduce){.ct-hero__orb{animation:none}.slide__ghost{transform:translate(-50%,-50%)!important}}.testimonials__intro{font-size:17px;color:var(--color-text-dim);line-height:1.65;margin-top:18px;max-width:540px}.footer__fomo{font-family:var(--font-display);font-size:clamp(16px, 1.9vw, 23px);font-weight:500;letter-spacing:-.01em;color:var(--color-text);max-width:660px;padding-top:36px;margin-bottom:30px;border-top:1px solid var(--color-border)}.hero__glow{position:absolute;width:min(960px, 96vw);height:min(960px, 96vw);top:40%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgb(242 194 0 / .17) 0%,rgb(242 194 0 / .05) 38%,transparent 70%);filter:blur(34px);z-index:0;pointer-events:none;will-change:transform}.frame{position:fixed;inset:0;z-index:180;pointer-events:none}.frame__c{position:absolute;width:17px;height:17px;border:1.5px solid var(--color-accent);opacity:0;animation:frame-in 0.7s var(--ease) 0.35s forwards}.frame__c--tl{top:16px;left:16px;border-right:0;border-bottom:0}.frame__c--tr{top:16px;right:16px;border-left:0;border-bottom:0}.frame__c--bl{bottom:16px;left:16px;border-right:0;border-top:0}.frame__c--br{bottom:16px;right:16px;border-left:0;border-top:0}@keyframes frame-in{from{opacity:0;transform:scale(.35)}to{opacity:.6;transform:scale(1)}}.dock{position:fixed;bottom:calc(var(--bottombar-h) + 14px);left:50%;z-index:170;display:flex;align-items:center;gap:6px;padding:7px;border-radius:100px;background:rgb(20 20 23 / .82);border:1px solid var(--color-border);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 20px 54px -18px rgb(0 0 0 / .85);opacity:0;transform:translateX(-50%) translateY(26px);animation:dock-in 0.75s var(--ease) 0.95s forwards}@keyframes dock-in{to{opacity:1;transform:translateX(-50%) translateY(0)}}.dock__btn{position:relative;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--color-text);transition:background 0.32s var(--ease),color 0.32s var(--ease),transform 0.42s var(--ease)}.dock__btn svg{width:19px;height:19px}.dock__btn:hover{background:rgb(244 242 234 / .09);transform:translateY(-3px)}.dock__btn--accent{background:var(--color-accent);color:var(--color-ink)}.dock__btn--accent:hover{background:var(--color-accent);color:var(--color-ink);transform:translateY(-3px) scale(1.07)}.dock__label{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(4px);font-family:var(--font-display);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text);background:var(--color-bg-3);border:1px solid var(--color-border);padding:5px 10px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.28s var(--ease),transform 0.28s var(--ease)}.dock__btn:hover .dock__label{opacity:1;transform:translateX(-50%) translateY(0)}@media (max-width:768px){.dock{bottom:18px}}@media (prefers-reduced-motion:reduce){.frame__c{animation:none;opacity:.6}.dock{animation:none;opacity:1;transform:translateX(-50%)}}.marquee-band{padding:clamp(34px, 6vw, 96px) 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);overflow:hidden;background:var(--color-bg)}.marquee__row{display:flex;overflow:hidden}.marquee__row+.marquee__row{margin-top:clamp(2px, 0.7vw, 12px)}.marquee__track{display:flex;align-items:center;flex-shrink:0;width:max-content;will-change:transform}.marquee__track span{font-family:var(--font-display);font-size:clamp(38px, 8.4vw, 132px);font-weight:700;letter-spacing:-.045em;line-height:1;text-transform:uppercase;white-space:nowrap;padding:0 clamp(12px, 2vw, 34px);color:var(--color-text)}.marquee__track--rev span{color:#fff0;-webkit-text-stroke:1.3px rgb(244 242 234 / .5)}.marquee__dot{flex-shrink:0;width:clamp(10px, 1.3vw, 22px);height:clamp(10px, 1.3vw, 22px);border-radius:50%;background:var(--color-accent);margin:0 clamp(8px, 1.4vw, 22px)}@media (prefers-reduced-motion:reduce){.marquee__track{transform:none!important}}.section-intro{font-size:clamp(17px, 1.9vw, 25px);color:var(--color-text-dim);line-height:1.55;max-width:720px;margin-top:24px}.hero__micro{font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-dim);margin-top:30px}.textlink{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--color-accent);margin-top:30px;transition:gap 0.3s var(--ease)}.textlink:hover{gap:16px}.textlink svg{width:15px;height:15px;flex-shrink:0}.dash{padding:clamp(100px, 12vw, 180px) 0;border-top:1px solid var(--color-border);background:var(--color-bg-2)}.dash__head{margin-bottom:40px}.dash__body{max-width:780px}.dash__body p{font-size:17px;color:var(--color-text-dim);line-height:1.78;margin-bottom:16px}.dash__caps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 30px;padding:44px 0;margin:36px 0 48px;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.dash__foot{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}.dash__line{font-family:var(--font-display);font-size:clamp(19px, 2.4vw, 34px);font-weight:600;letter-spacing:-.025em;line-height:1.28;max-width:600px;color:var(--color-text)}.process__cta{margin-top:60px;display:flex;justify-content:center}[data-tilt]{transform-style:preserve-3d;will-change:transform}@media (max-width:1024px){.dash__caps{grid-template-columns:repeat(2,1fr)}}@media (max-width:600px){.dash__caps{grid-template-columns:1fr;gap:14px}.dash__foot{flex-direction:column;align-items:flex-start;gap:28px}}@media (prefers-reduced-motion:reduce){[data-tilt]{transform:none!important}}html{scroll-padding-top:100px}:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:3px}.btn:focus-visible,.dock__btn:focus-visible{outline-offset:4px}.hero__content{max-width:1200px}.svc{transition:border-color 0.45s var(--ease),padding-left 0.5s var(--ease)}.svc:hover{padding-left:clamp(8px, 1.7vw, 28px)}.section-title,.cta__title,.hero__title,.ct-hero__title,.pf-hero__title{text-wrap:balance}.dash__line{text-wrap:balance}.work{padding:clamp(90px, 11vw, 160px) 0;background:var(--color-bg-2)}.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:8px}.work-card{display:block;text-decoration:none;color:inherit}.work-card__frame{border:1px solid var(--color-border);border-radius:12px;overflow:hidden;background:#08080a;transition:border-color 0.45s var(--ease),box-shadow 0.55s var(--ease)}.work-card:hover .work-card__frame{border-color:var(--color-accent);box-shadow:0 34px 80px -30px rgb(0 0 0 / .92)}.work-card__bar{display:flex;align-items:center;gap:7px;padding:12px 15px;background:var(--color-bg-3);border-bottom:1px solid var(--color-border)}.work-card__bar span{width:9px;height:9px;border-radius:50%;background:rgb(244 242 234 / .2)}.work-card__bar span:first-child{background:var(--color-accent)}.work-card__shot{position:relative;height:300px;overflow:hidden}.work-card__shot img{width:100%;display:block;transition:transform 5.5s linear}.work-card:hover .work-card__shot img{transform:translateY(calc(-100% + 300px))}.work-card__meta{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:22px 2px 0}.work-card__name{font-family:var(--font-display);font-size:clamp(20px, 2vw, 27px);font-weight:600;letter-spacing:-.02em;color:var(--color-text)}.work-card__cta{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--color-text-dim);white-space:nowrap;transition:color 0.3s,gap 0.3s var(--ease)}.work-card:hover .work-card__cta{color:var(--color-accent);gap:12px}@media (max-width:1024px){.work-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:600px){.work-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.work-card__shot img{transition:none}.work-card:hover .work-card__shot img{transform:none}}body[data-page="contact"] .ct-split{grid-template-columns:1fr;gap:20px;text-align:center;justify-items:center;margin-bottom:60px}body[data-page="contact"] .ct-method__title{margin-left:auto;margin-right:auto;max-width:16ch}body[data-page="contact"] .ct-method__lead,body[data-page="contact"] .ct-method__body{margin-left:auto;margin-right:auto;max-width:660px}body[data-page="contact"] .ct-split__right{display:flex;flex-direction:column;align-items:center}body[data-page="contact"] .process__header,body[data-page="contact"] .ct-form-intro{text-align:center}body[data-page="contact"] .process__header{display:flex;flex-direction:column;align-items:center}body[data-page="contact"] .ct-form-intro{display:flex;flex-direction:column;align-items:center}body[data-page="contact"] .ct-form-intro__lead,body[data-page="contact"] .ct-form-intro .ct-method__body{max-width:620px}body[data-page="contact"] .ct-form-intro__alt{display:flex;flex-direction:column;align-items:center}body[data-page="contact"] .ct-form-grid{grid-template-columns:1fr;max-width:680px;margin:0 auto;gap:46px}body[data-page="contact"] .ct-form{text-align:left}body[data-page="contact"] .dash__caps{justify-items:center}body[data-page="contact"] .ct-method__body[style]{text-align:center}.about-viz{margin-top:clamp(44px, 6vw, 84px);padding-top:26px;border-top:1px solid var(--color-border)}.about-viz__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}.about-viz__live,.about-viz__count{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-dim)}.about-viz__live i{width:7px;height:7px;border-radius:50%;background:var(--color-accent);animation:about-viz-ping 1.9s ease-out infinite}@keyframes about-viz-ping{0%{box-shadow:0 0 0 0 rgb(242 194 0 / .5)}70%,100%{box-shadow:0 0 0 9px #fff0}}.about-viz__count b{font-size:16px;font-weight:600;color:var(--color-accent);font-variant-numeric:tabular-nums;letter-spacing:.01em}.about-viz__svg{display:block;width:100%;height:auto}.vz-lanes line{stroke:rgb(244 242 234 / .1);stroke-width:1;stroke-dasharray:2 9}.vz-cap{font-family:var(--font-display);font-size:15px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;fill:var(--color-text-dim)}.vz-cap--line{fill:var(--color-accent);font-size:13px}.vz-cap--lost{fill:rgb(244 242 234 / .32)}.vz-line__glow{fill:rgb(242 194 0 / .12)}.vz-line__bar{fill:var(--color-accent);animation:vz-breathe 2.6s ease-in-out infinite}.vz-line__scan{fill:rgb(242 194 0 / .55);animation:vz-scan 2.9s ease-in-out infinite}@keyframes vz-breathe{0%,100%{opacity:.9}50%{opacity:.5}}@keyframes vz-scan{0%{transform:translateY(0);opacity:0}16%{opacity:1}84%{opacity:1}100%{transform:translateY(200px);opacity:0}}.vz-dash__top{stroke:var(--color-border);stroke-width:1}.vz-row{animation:vz-rowwave var(--rd,6.5s) ease-in-out infinite var(--t,0s)}.vz-row__dot{fill:var(--color-accent)}.vz-row__track{fill:rgb(244 242 234 / .07)}.vz-row__fill{fill:var(--color-accent)}@keyframes vz-rowwave{0%,100%{opacity:.3}46%{opacity:1}}.vz{animation:vz-run var(--d,10s) linear infinite var(--t,0s)}.vz--lost{animation-name:vz-run-lost;animation-timing-function:ease-in}.vz__ghost{fill:none;stroke:rgb(244 242 234 / .6);stroke-width:1.6;animation:vz-ghost var(--d,10s) linear infinite var(--t,0s)}.vz--lost .vz__ghost{animation-name:vz-ghost-lost}.vz__lead{fill:var(--color-accent);opacity:0;animation:vz-lead var(--d,10s) linear infinite var(--t,0s)}.vz__ring{fill:none;stroke:var(--color-accent);stroke-width:1.8;opacity:0;transform-box:fill-box;transform-origin:center;animation:vz-ring var(--d,10s) ease-out infinite var(--t,0s)}@keyframes vz-run{0%{transform:translateX(56px)}100%{transform:translateX(992px)}}@keyframes vz-run-lost{0%{transform:translate(56px,0)}100%{transform:translate(486px,30px)}}@keyframes vz-ghost{0%,5%{opacity:0}13%{opacity:.58}64%{opacity:.58}71%,100%{opacity:0}}@keyframes vz-ghost-lost{0%,7%{opacity:0}24%{opacity:.5}66%{opacity:.4}100%{opacity:0}}@keyframes vz-lead{0%,67%{opacity:0}73%{opacity:1}90%{opacity:1}100%{opacity:0}}@keyframes vz-ring{0%,68%{opacity:0;transform:scale(.34)}71%{opacity:.85;transform:scale(.55)}87%,100%{opacity:0;transform:scale(2.6)}}@media (max-width:600px){.about-viz{margin-top:38px}.vz-cap{display:none}}@media (prefers-reduced-motion:reduce){.about-viz__live i{animation:none!important;box-shadow:none}.vz{display:none!important}.vz-line__scan{display:none!important}.vz-line__bar{animation:none!important;opacity:.85}.vz-row{animation:none!important;opacity:.82}}#dashboard .section-intro{font-family:var(--font-display);font-size:clamp(23px, 3.2vw, 46px);font-weight:500;line-height:1.2;letter-spacing:-.022em;color:var(--color-text);max-width:940px;text-wrap:balance}#dashboard .section-intro .hl-accent{color:var(--color-accent)}.cmd{position:relative;margin:clamp(40px, 5vw, 66px) 0;padding:clamp(15px, 1.9vw, 26px);background:var(--color-bg);border:1px solid var(--color-border);border-radius:16px;overflow:hidden;box-shadow:0 44px 100px -54px rgb(0 0 0 / .92)}.cmd::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 42%,rgb(242 194 0 / .06) 50%,transparent 58%);background-size:260% 100%;animation:cmd-sweep 7.5s linear infinite}@keyframes cmd-sweep{0%{background-position:200% 0}100%{background-position:-60% 0}}.cmd__top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:15px;border-bottom:1px solid var(--color-border)}.cmd__title{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--color-text)}.cmd__dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent);flex-shrink:0;animation:cmd-ping 1.9s ease-out infinite}@keyframes cmd-ping{0%{box-shadow:0 0 0 0 rgb(242 194 0 / .5)}70%,100%{box-shadow:0 0 0 9px #fff0}}.cmd__status{font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-dim)}.cmd__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:18px 0}.cmd__kpi{display:flex;flex-direction:column;gap:9px;padding:17px 16px 19px;background:var(--color-bg-2);border:1px solid var(--color-border);border-radius:11px}.cmd__kpi-label{font-family:var(--font-display);font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--color-text-dim)}.cmd__kpi-num{font-family:var(--font-display);font-size:clamp(30px, 3vw, 46px);font-weight:600;letter-spacing:-.035em;line-height:1;color:var(--color-text);font-variant-numeric:tabular-nums}.cmd__kpi-num--accent{color:var(--color-accent)}.cmd__kpi-delta{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--color-accent)}.cmd__grid{display:grid;grid-template-columns:1.5fr 1fr;gap:12px}.cmd__panel{background:var(--color-bg-2);border:1px solid var(--color-border);border-radius:11px;padding:18px}.cmd__panel--feed{display:flex;flex-direction:column}.cmd__panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.cmd__panel-title{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--color-text)}.cmd__panel-tag{font-family:var(--font-display);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-dim)}.cmd__chart{display:block;width:100%;height:auto}.cmd__grid-l{stroke:rgb(244 242 234 / .07);stroke-width:1}.cmd__line{fill:none;stroke:var(--color-accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;animation:cmd-line 9s ease-in-out infinite}.cmd__area{opacity:0;animation:cmd-area 9s ease-in-out infinite}.cmd__node{fill:var(--color-accent);opacity:0;animation:cmd-node 9s ease-in-out infinite}.cmd__node-ring{fill:none;stroke:var(--color-accent);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:cmd-nodering 9s ease-in-out infinite}@keyframes cmd-line{0%{stroke-dashoffset:1;opacity:0}3%{opacity:1}30%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}@keyframes cmd-area{0%,11%{opacity:0}37%{opacity:1}88%{opacity:1}100%{opacity:0}}@keyframes cmd-node{0%,28%{opacity:0}34%{opacity:1}88%{opacity:1}100%{opacity:0}}@keyframes cmd-nodering{0%,30%{opacity:0;transform:scale(.6)}34%{opacity:.7;transform:scale(1)}48%,100%{opacity:0;transform:scale(3)}}.cmd__feed{list-style:none;flex:1;display:flex;flex-direction:column;justify-content:space-between}.cmd__feed li{display:flex;align-items:center;gap:11px;padding:11px 2px;border-bottom:1px solid var(--color-border);animation:cmd-feed var(--fd,7s) ease-in-out infinite var(--t,0s)}.cmd__feed li:last-child{border-bottom:0}.cmd__feed i{width:7px;height:7px;border-radius:50%;background:var(--color-accent);flex-shrink:0}.cmd__feed-txt{flex:1;font-size:13px;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cmd__feed-time{font-family:var(--font-display);font-size:10.5px;font-weight:500;letter-spacing:.05em;color:var(--color-text-dim);flex-shrink:0}@keyframes cmd-feed{0%,100%{opacity:.38}46%{opacity:1}}@media (max-width:900px){.cmd__kpis{grid-template-columns:repeat(2,1fr)}.cmd__grid{grid-template-columns:1fr}}@media (max-width:540px){.cmd__kpis{gap:8px}.cmd__kpi{padding:14px 13px 16px}}@media (prefers-reduced-motion:reduce){.cmd::after{animation:none!important}.cmd__dot{animation:none!important;box-shadow:none}.cmd__line{animation:none!important;stroke-dashoffset:0;opacity:1}.cmd__area{animation:none!important;opacity:1}.cmd__node{animation:none!important;opacity:1}.cmd__node-ring{animation:none!important;opacity:0}.cmd__feed li{animation:none!important;opacity:1}}@media (max-width:768px){.bento,.about,.services,.dash,.process,.fwork,.faq{padding-top:60px!important;padding-bottom:60px!important}.testimonials.gcs-sec{padding-top:56px!important;padding-bottom:64px!important}.ghg-sec{padding-top:52px!important;padding-bottom:52px!important}.cta{padding-top:72px!important;padding-bottom:84px!important}.bento-card__num{font-size:clamp(38px, 12vw, 54px)!important;line-height:.96;letter-spacing:-.03em}.svc__title{font-size:18px!important}.hero__title,.section-title,.label,.split-text,.split-text .word,.split-text .word-inner,.bento__head .section-title,.gcs-title,.ghg-title{transform:none!important;opacity:1!important}}@media (max-width:768px){.services__list{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 24px;gap:14px;padding:4px 24px 18px;margin:0 -24px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.services__list::-webkit-scrollbar{display:none}.svc{flex:0 0 80%!important;scroll-snap-align:center;box-sizing:border-box;border:1px solid rgb(242 194 0 / .18)!important;border-radius:14px;padding:22px 18px!important;background:rgb(255 255 255 / .02)}}@media (max-width:768px){.bento__grid{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 24px;gap:14px;padding:4px 24px 18px;margin:0 -24px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.bento__grid::-webkit-scrollbar{display:none}.bento-card{flex:0 0 78%!important;scroll-snap-align:center;grid-column:auto!important;grid-row:auto!important;box-sizing:border-box;min-height:200px}}@media (max-width:768px){.m-hide{display:none!important}}@media (max-width:768px){.services .svc,.services .svc.reveal{display:block!important;position:relative;padding:22px 18px!important;opacity:1!important;transform:none!important}.services .svc__num{position:absolute;top:20px;left:18px;padding-top:0}.services .svc__arrow{position:absolute;top:18px;right:16px;margin:0}.services .svc__main{margin-top:28px}.services .svc__title{font-size:18px!important;line-height:1.18}.services .svc__desc{max-height:none!important;opacity:1!important;overflow:visible!important;margin-top:10px!important;font-size:13px!important;max-width:none}.services .svc__tags{display:none!important}}@media (max-width:768px){#approach .services__list{display:block!important;flex-wrap:initial!important;overflow:visible!important;padding:0!important;margin:0!important}#approach .svc{flex:none!important;width:100%!important;display:block!important;position:relative;margin-bottom:14px}#approach .svc__num{position:absolute;top:20px;left:18px;padding-top:0}#approach .svc__arrow{position:absolute;top:18px;right:16px;margin:0}#approach .svc__main{margin-top:28px}#approach .svc__title{font-size:20px!important;line-height:1.18}#approach .svc__desc{max-height:none!important;opacity:1!important;overflow:visible!important;margin-top:10px!important;font-size:14px!important;max-width:none}}@media (max-width:768px){#process .process__step.ksh{touch-action:auto!important;cursor:default!important}#process .process__step.ksh.ksh-dragging{cursor:default!important}.ksh-hint{display:none!important}}@media (max-width:768px){.dash__foot .btn--lg{font-size:11.5px!important;letter-spacing:0.02em!important;padding:14px 22px!important;white-space:nowrap!important;gap:8px}.dash__foot .btn--lg span{white-space:nowrap!important}}@media (max-width:768px){.process__grid{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:4px 24px 22px;margin:0 -24px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.process__grid::-webkit-scrollbar{display:none}.process__step{flex:0 0 80%!important;scroll-snap-align:center;opacity:1!important;transform:none!important}}@media (max-width:768px){.dash__caps{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}.dash__caps .tag{border:1px solid rgb(242 194 0 / .16);border-radius:10px;padding:10px 11px!important;background:rgb(255 255 255 / .025);font-size:10px!important;line-height:1.25;letter-spacing:.02em;align-items:center;gap:8px;box-sizing:border-box;transition:border-color 0.3s,background 0.3s}}@media (max-width:768px){.btn--lg{font-size:11.5px!important;letter-spacing:0.02em!important;padding:15px 22px!important;white-space:nowrap!important;gap:8px}.btn--lg span{white-space:nowrap!important}}@media (max-width:768px){.gcs-bg span{white-space:normal!important;font-size:21vw!important;line-height:.88;display:inline-block;max-width:94vw}.ghg-stage{height:auto!important;min-height:0!important;padding:6px 0!important}.ghg-sec{padding-bottom:28px!important}.cta{padding-top:40px!important}}@media (max-width:768px){.hero{min-height:auto!important;padding-top:calc(var(--topbar-h) + 22px)!important;padding-bottom:38px!important}.bento,.about,.services,.dash,.process,.fwork,.faq{padding-top:44px!important;padding-bottom:44px!important}.cta{padding-top:38px!important;padding-bottom:56px!important}}.about-viz__stage{position:relative}.acap-canvas{display:block;width:100%;height:clamp(230px, 23vw, 330px)}@media (max-width:768px){.acap-canvas{height:250px}}.cmd2{border:1px solid var(--color-border);border-radius:18px;background:linear-gradient(180deg,var(--color-bg-2),var(--color-bg));overflow:hidden}.cmd2__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid rgb(255 255 255 / .06)}.cmd2__title{font-family:var(--font-display);font-weight:600;font-size:14px;display:flex;align-items:center;gap:10px;color:#fff}.cmd2__title i{width:8px;height:8px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 10px var(--color-accent);flex:none}.cmd2__live{font-family:var(--font-display);font-size:11px;letter-spacing:.16em;color:var(--color-text-dim);white-space:nowrap}.cmd2__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px}.cmd2__kpi{border:1px solid rgb(255 255 255 / .07);border-radius:14px;background:rgb(255 255 255 / .02);padding:16px 18px;position:relative;overflow:hidden;min-height:116px;display:flex;flex-direction:column;gap:6px}.cmd2__kl{font-family:var(--font-display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-dim)}.cmd2__kn{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3vw,42px);letter-spacing:-.03em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}.cmd2__kpi--accent .cmd2__kn{color:var(--color-accent)}.cmd2__kd{font-family:ui-monospace,monospace;font-size:12px;color:var(--color-accent)}.cmd2__spark{position:absolute;right:14px;bottom:14px;width:66px;height:22px;opacity:.7}.cmd2__panel{border:1px solid rgb(255 255 255 / .07);border-radius:14px;background:rgb(255 255 255 / .02);position:relative;overflow:hidden;display:flex;flex-direction:column}.cmd2__ph{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px 6px;position:relative;z-index:2}.cmd2__ph h4{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0}.cmd2__ph span{font-family:ui-monospace,monospace;font-size:10px;color:var(--color-text-dim);letter-spacing:.1em;white-space:nowrap}.cmd2__now{color:var(--color-accent)!important}.cmd2__area{grid-column:span 2;grid-row:span 2;min-height:280px}.cmd2__area canvas{position:absolute;left:0;right:0;top:38px;bottom:0;width:100%;height:calc(100% - 38px)}.cmd2__feed{grid-column:span 2;grid-row:span 2}.cmd2__feedbody{padding:4px 8px 10px}.cmd2__frow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 10px;border-bottom:1px solid rgb(255 255 255 / .05)}.cmd2__frow:last-child{border-bottom:0}.cmd2__frow i{width:8px;height:8px;border-radius:50%;flex:none}.cmd2__frow span{font-size:13px;color:#fff}.cmd2__frow em{font-family:ui-monospace,monospace;font-size:11px;color:var(--color-text-dim);font-style:normal}.cmd2__frow.enter{animation:cmd2in .5s cubic-bezier(.22,1,.36,1)}@keyframes cmd2in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}.cmd2__gauge{grid-column:span 1;min-height:150px}.cmd2__gwrap{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:110px}.cmd2__gwrap canvas{position:absolute;inset:0}.cmd2__gnum{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.02em;position:relative;z-index:1;font-variant-numeric:tabular-nums;color:#fff}.cmd2__bars{grid-column:span 3;min-height:150px}.cmd2__bars canvas{position:absolute;left:0;right:0;top:36px;bottom:0;width:100%;height:calc(100% - 36px)}@media(max-width:820px){.cmd2__grid{grid-template-columns:repeat(2,1fr);padding:14px;gap:10px}.cmd2__area,.cmd2__feed,.cmd2__bars,.cmd2__gauge{grid-column:span 2}.cmd2__area{grid-row:auto;min-height:230px}.cmd2__feed{grid-row:auto}}.home-cta{margin-top:clamp(24px, 3vw, 38px);white-space:nowrap;align-self:flex-start}.home-cta svg{flex:none;transition:transform 0.4s var(--ease)}.home-cta:hover svg{transform:translateX(4px)}.home-cta--center{align-self:center}@media (max-width:768px){.home-cta{padding:12px 20px;font-size:12px;letter-spacing:.03em;gap:8px}.home-cta svg{width:15px;height:15px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:root[data-theme="light"]{--color-accent:#e3b400;--color-accent-dim:#b89200;--color-accent-glow:rgba(227, 180, 0, 0.28);--color-bg:#f3f1ea;--color-bg-2:#e9e6dc;--color-bg-3:#dedacd;--color-text:#121214;--color-text-dim:rgba(18, 18, 20, 0.62);--color-border:rgba(18, 18, 20, 0.14);--color-border-hover:rgba(184, 146, 0, 0.7);--color-text-inv:#f3f1ea;--text-rgb:18,18,20;--bg-rgb:243,241,234;--topbar-glass:rgba(243, 241, 234, 0.86);--footer-bg:#e9e6dc;color-scheme:light}:root[data-theme="light"] .topbar__logo img,:root[data-theme="light"] .footer__logo img,:root[data-theme="light"] .loader__logo img{filter:invert(1) hue-rotate(180deg) saturate(1.3)}:root[data-theme="light"] .btn--primary{--beam-color:#0c0c0e}.topbar__theme{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--color-border);color:var(--color-text-dim);transition:color 0.3s,border-color 0.3s,transform 0.45s var(--ease)}.topbar__theme svg{position:absolute;transition:opacity .35s var(--ease),transform .5s var(--ease)}.topbar__theme-moon{opacity:0;transform:rotate(-90deg) scale(.6)}:root[data-theme="light"] .topbar__theme-sun{opacity:0;transform:rotate(90deg) scale(.6)}:root[data-theme="light"] .topbar__theme-moon{opacity:1;transform:none}.topbar__theme:hover{color:var(--color-accent);border-color:var(--color-accent);transform:translateY(-2px) rotate(-12deg)}.topbar__theme:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}@media (max-width:768px){.topbar__right{gap:10px}.topbar__theme{width:36px;height:36px}}p,li,dd,figcaption,blockquote,.hero__sub,.hero__micro,.section-intro,.caps-p,.hlo__say,.cta__sub,.msv__lead,.msv__desc,.fwork__lead,.about__body,.needs__close,.rehome__close,.rehome__desc,.proof__note,.proof__row p,.aiau__lead,.aiau__close,.whyg__both,.whyg__item p,.proc7__step p,.story-lead,.process__desc,.bento-card__label,.blogx__desc,.faq__content p{text-wrap:pretty}h1,h2,h3,.section-title,.caps-lead-title,.cta__title,.msv__title,.fwork__title,.whyg__h{text-wrap:balance}.topbar__nav{position:absolute}.topbar__nav.has-neon>.topbar__navlink::after{display:none}.topbar__neon{position:absolute;left:0;bottom:2px;height:2px;width:0;border-radius:2px;background:var(--color-accent);pointer-events:none;box-shadow:0 0 6px var(--color-accent),0 0 18px color-mix(in srgb,var(--color-accent) 60%,transparent);opacity:0;transition:transform .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1),opacity .3s}.topbar__neon::before{content:'';position:absolute;left:-30%;right:-30%;top:-14px;height:30px;background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--color-accent) 38%,transparent),transparent 70%);filter:blur(4px);pointer-events:none}.topbar__neon.is-on{opacity:1}.topbar--scrolled{border-bottom-color:color-mix(in srgb,var(--color-accent) 18%,var(--color-border))}.overlay{background:rgba(var(--bg-rgb),.78);backdrop-filter:blur(28px) saturate(1.35);-webkit-backdrop-filter:blur(28px) saturate(1.35)}.overlay__links{position:relative}.overlay__link{border-radius:10px}.overlay__link:hover,.overlay__link:focus-visible{background:linear-gradient(90deg,color-mix(in srgb,var(--color-accent) 12%,transparent),transparent 55%);outline:none}.overlay__neon{position:absolute;left:30px;top:0;width:3px;height:0;border-radius:3px;background:var(--color-accent);pointer-events:none;opacity:0;box-shadow:0 0 8px var(--color-accent),0 0 26px color-mix(in srgb,var(--color-accent) 65%,transparent),0 0 60px color-mix(in srgb,var(--color-accent) 30%,transparent);transition:transform .5s cubic-bezier(.22,1,.36,1),height .5s cubic-bezier(.22,1,.36,1),opacity .35s}.overlay__neon.is-on{opacity:1}.overlay.is-open .overlay__link.is-active{color:var(--color-accent)}@media (max-width:768px){.overlay{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.overlay__neon{left:22px}}@media (prefers-reduced-motion:reduce){.topbar__neon,.overlay__neon{transition:opacity .2s}}@media (min-width:1025px){.topbar__toggle{display:flex}}.overlay{align-items:stretch;justify-content:flex-start;background:rgba(var(--bg-rgb),.42);backdrop-filter:blur(8px) saturate(1.2);-webkit-backdrop-filter:blur(8px) saturate(1.2);overflow:hidden}.overlay__inner{box-sizing:border-box;width:min(372px, 90vw);min-height:0;height:calc(100% - var(--topbar-h, 76px) - 18px);margin:calc(var(--topbar-h, 76px) + 4px) 14px 14px;padding:18px 16px 18px;border-radius:22px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;justify-content:flex-start;gap:18px;background:linear-gradient(170deg,rgba(var(--text-rgb),.07),rgba(var(--text-rgb),.02)),rgba(var(--bg-rgb),.74);backdrop-filter:blur(30px) saturate(1.4);-webkit-backdrop-filter:blur(30px) saturate(1.4);border:1px solid rgba(var(--text-rgb),.13);box-shadow:0 30px 90px rgb(0 0 0 / .45),inset 0 1px 0 rgb(255 255 255 / .08),0 0 0 1px rgb(0 0 0 / .25);transform:translateX(-32px);opacity:0;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .4s,width .45s cubic-bezier(.22,1,.36,1)}.overlay.is-open .overlay__inner{transform:none;opacity:1}.overlay__head{display:flex;align-items:center;gap:10px;padding:2px 6px 14px;border-bottom:1px solid rgba(var(--text-rgb),.1)}.overlay__head img{height:22px;width:auto;display:block}.overlay__collapse{margin-left:auto;width:30px;height:30px;border-radius:50%;border:1px solid rgba(var(--text-rgb),.14);background:rgba(var(--text-rgb),.04);color:var(--color-text-dim);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:color .25s,border-color .25s,transform .4s var(--ease)}.overlay__collapse svg{width:14px;height:14px}.overlay__collapse:hover{color:var(--color-accent);border-color:var(--color-accent)}.overlay__main{display:flex;flex-direction:column;gap:18px;flex:1;align-items:stretch}.overlay__links{gap:2px;padding-top:4px}.overlay__links::before{content:'Menu';display:block;padding:0 14px 8px;font-family:var(--font-display);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-dim)}.overlay__link{display:flex;align-items:center;min-height:46px;padding:10px 14px 10px 46px;border-radius:12px;font-size:16px;font-weight:500;letter-spacing:0;line-height:1.1;color:var(--color-text-dim);transition:opacity .5s var(--ease),transform .5s var(--ease),color .25s,background .25s}.overlay__link::before{content:'';left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);background:var(--ic,currentColor);color:inherit;-webkit-mask:var(--icon) center / contain no-repeat;mask:var(--icon) center / contain no-repeat;display:block;font-size:0}.overlay__link[data-num="01"]{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11l9-8 9 8v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/></svg>"); }
.overlay__link[data-num="02"] { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z'/></svg>"); }
.overlay__link[data-num="03"] { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2l10 5-10 5L2 7zM2 12l10 5 10-5M2 17l10 5 10-5'/></svg>"); }
.overlay__link[data-num="04"] { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M3 5h18v14H3zM3 6l9 7 9-7'/></svg>"); }
.overlay__link[data-num="05"] { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M3 5h18v16H3zM3 10h18M8 3v4M16 3v4'/></svg>"); }
.overlay__link:hover, .overlay__link:focus-visible, .overlay.is-open .overlay__link.is-active {
  color: var(--color-text); padding-left: 46px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 16%, transparent), color-mix(in srgb, var(--color-accent) 4%, transparent) 60%, transparent);
}
.overlay__link:hover::before, .overlay.is-open .overlay__link.is-active::before { --ic: var(--color-accent); }
.overlay.is-open .overlay__link.is-active { color: var(--color-text); }
.overlay__sublink { margin: 0 0 2px 46px; padding: 7px 10px; font-size: 11px; letter-spacing: .12em; border-radius: 8px; opacity: .8; transition: background .25s, opacity .25s; }
.overlay__sublink:hover { opacity: 1; background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.overlay__neon { left: 0; width: 3px; border-radius: 0 3px 3px 0; }
.overlay__panel { gap: 14px; padding: 16px 6px 0; margin-top: auto; border-top: 1px solid rgba(var(--text-rgb), .1); }
.overlay__clock { padding-bottom: 14px; }
.overlay__time { font-size: 24px; }
.overlay__spotify { padding: 8px 10px; border-radius: 12px; }
.overlay__footer { margin-top: 0; padding-top: 14px; flex-direction: column; align-items: stretch; gap: 14px; border-top: 1px solid rgba(var(--text-rgb), .1); }
.overlay__info p { font-size: 12.5px; line-height: 1.5; }
.overlay__ctas { flex-direction: column; gap: 8px; }
.overlay__ctas .btn { width: 100%; justify-content: center; text-align: center; font-size: 12px; padding: 12px 14px; }
/* collapsed: icons only */
.overlay--compact .overlay__inner { width: 78px; padding-left: 12px; padding-right: 12px; }
.overlay--compact .overlay__head { justify-content: center; padding-bottom: 12px; }
.overlay--compact .overlay__head img, .overlay--compact .overlay__links::before, .overlay--compact .overlay__sublink,
.overlay--compact .overlay__panel, .overlay--compact .overlay__footer { display: none; }
.overlay--compact .overlay__collapse { margin: 0; transform: rotate(180deg); }
.overlay--compact .overlay__link { font-size: 0; padding: 0; width: 46px; height: 46px; justify-content: center; --ic: var(--color-text-dim); }
.overlay--compact .overlay__link::before { position: static; transform: none; }
.overlay--compact .overlay__link:hover, .overlay--compact .overlay__link.is-active { --ic: var(--color-accent); }
.overlay--compact .overlay__link:hover, .overlay.is-open.overlay--compact .overlay__link.is-active { padding: 0; background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
@media (max-width: 768px) {
  .overlay__inner { width: min(340px, 88vw); height: calc(100% - var(--topbar-h, 64px) - 16px); margin: calc(var(--topbar-h, 64px) + 4px) 12px 12px; padding: 16px 14px; }
  .overlay__neon { left: 0; }
}

/* ---- cards: glass + neon edge (home) ---- */
@media (min-width: 900px) {
  #services .msv__card, #all-services .svc8__card, #realestate .rehome__card { backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
}
#services .msv__card, #all-services .svc8__card, #realestate .rehome__card {
  background: linear-gradient(165deg, rgba(var(--text-rgb), .07), rgba(var(--text-rgb), .02)), rgba(var(--bg-rgb), .55);
  border: 1px solid rgba(var(--text-rgb), .12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 60px -34px rgba(0,0,0,.7);
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease), background .45s var(--ease);
}
#services .msv__card:hover, #services .msv__card.is-live,
#all-services .svc8__card:hover, #realestate .rehome__card:hover {
  background: linear-gradient(165deg, color-mix(in srgb, var(--color-accent) 10%, transparent), rgba(var(--text-rgb), .02)), rgba(var(--bg-rgb), .6);
  border-color: color-mix(in srgb, var(--color-accent) 75%, transparent);
  color: var(--color-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px color-mix(in srgb, var(--color-accent) 35%, transparent), 0 0 28px color-mix(in srgb, var(--color-accent) 30%, transparent), 0 24px 60px -34px rgba(0,0,0,.7);
}
#services .msv__card:hover .msv__desc, #services .msv__card.is-live .msv__desc { color: var(--color-text); }
#services .msv__card:hover .msv__icon, #services .msv__card.is-live .msv__icon,
#services .msv__card:hover .msv__psy, #services .msv__card.is-live .msv__psy { color: var(--color-accent); }
#services .msv__card:hover .msv__name, #services .msv__card.is-live .msv__name { color: var(--color-text); }
#all-services .svc8__card--acc { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.overlay__inner { scrollbar-width: none; }
.overlay__inner::-webkit-scrollbar { display: none; }
:root[data-theme="light"] .overlay__head img { filter: invert(1) hue-rotate(180deg) saturate(1.3); }
/* build 2026-10-13f */

/* ============ NEON GLASS — wave 3 (2026-10-13) ============
   Desktop: the glass sidebar is DOCKED on the left (icons only, expands on
   hover, pin with the chevron). CWV bars glow. "Design that thinks" panels
   become stacked glass cards with a neon top rule. */
@media (min-width: 1025px) {
  :root { --container: min(1400px, calc(100vw - 184px)); }
  .topbar__toggle { display: none; }
  .sidebar { display: none; }
  .overlay--docked { opacity: 1; visibility: visible; pointer-events: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .overlay--docked .overlay__inner { pointer-events: auto; transform: none; opacity: 1; box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(0,0,0,.2); }
  .overlay--docked .overlay__link, .overlay--docked .overlay__panel, .overlay--docked .overlay__footer { opacity: 1; transform: none; transition-delay: 0s; }
  .overlay--docked .overlay__link.is-active { color: var(--color-text); background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 16%, transparent), color-mix(in srgb, var(--color-accent) 4%, transparent) 60%, transparent); }
  .overlay--docked .overlay__link.is-active::before { --ic: var(--color-accent); }
  .overlay--docked.overlay--compact .overlay__inner { width: 64px; padding-left: 9px; padding-right: 9px; }
  .overlay--docked.overlay--compact .overlay__link.is-active { padding: 0; background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
  .overlay--docked.overlay--compact .overlay__collapse { transform: rotate(180deg); }
  .overlay--docked.overlay--pinned .overlay__collapse { color: var(--color-accent); border-color: var(--color-accent); }
}

/* ---- Core Web Vitals: bars that glow ---- */
#performance .hlo__vital-bar { overflow: visible; background: rgba(var(--text-rgb), .08); }
#performance .hlo__vital-bar i { border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 55%, transparent), var(--color-accent)); box-shadow: 0 0 6px var(--color-accent), 0 0 18px color-mix(in srgb, var(--color-accent) 55%, transparent); }
#performance .hlo__vital-k { text-shadow: 0 0 14px color-mix(in srgb, var(--color-accent) 55%, transparent); }
#performance .hlo__vital { border-top-color: color-mix(in srgb, var(--color-accent) 25%, var(--color-border)); }

/* ---- "Design that thinks": stacked glass panels ---- */
#design .story-panel { background: transparent; }
#design .story-inner {
  box-sizing: border-box; height: calc(100vh - 28px); margin: 14px; border-radius: 22px;
  border: 1px solid rgba(var(--text-rgb), .14);
  background: linear-gradient(170deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%), color-mix(in srgb, var(--sbg) 74%, transparent);
  backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3);
  box-shadow: 0 30px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  --neon: var(--color-accent);
}
#design .story-panel:nth-child(2) .story-inner { --neon: var(--sfg); }
#design .story-inner > .story-rule:first-of-type { border-top-color: var(--neon); opacity: 1; box-shadow: 0 0 8px var(--neon), 0 0 22px color-mix(in srgb, var(--neon) 55%, transparent); }
#design .story-eyebrow { color: var(--neon); opacity: 1; }
@media (max-width: 768px) {
  #design .story-inner { height: auto; margin: 12px; }
}
/* build 2026-10-13g */

/* ============ Topbar hides on scroll (desktop), rail stays (2026-10-13) ============ */
@media (min-width: 1025px) {
  .topbar { transition: background .4s, backdrop-filter .4s, transform .5s cubic-bezier(.22,1,.36,1), opacity .35s; }
  .topbar--scrolled { transform: translateY(-110%); opacity: 0; pointer-events: none; }
  body:has(.topbar--scrolled) .overlay--docked .overlay__inner { margin-top: 14px; height: calc(100% - 28px); }
  .overlay--docked .overlay__inner { transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .4s, width .45s cubic-bezier(.22,1,.36,1), margin-top .5s cubic-bezier(.22,1,.36,1), height .5s cubic-bezier(.22,1,.36,1); }
}
/* build 2026-10-13h */
/* full-bleed blocks clear the docked rail (2026-10-13) */
@media (min-width: 1025px) {
  #design .story-inner { padding-left: 100px; }
  #rebuild .rdf__stack { padding-left: 100px; }
  .bottombar { padding-left: 96px; }
}
/* build 2026-10-13j */

/* ============ NEON GLASS — wave 4: cards on the other pages (2026-10-13) ============ */
main .lux__card, main .pcs__card, main .mno__card, main .blogx__card {
  background: linear-gradient(165deg, rgba(var(--text-rgb), .07), rgba(var(--text-rgb), .02)), rgba(var(--bg-rgb), .55);
  border: 1px solid rgba(var(--text-rgb), .12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 60px -34px rgba(0,0,0,.7);
}
@media (min-width: 900px) {
  main .lux__card, main .pcs__card, main .mno__card, main .blogx__card { backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
}
main .swall__card { border: 1px solid rgba(var(--text-rgb), .12); transition: border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease); }
main .work-card__frame { border-color: rgba(var(--text-rgb), .14); }
main .lux__card:hover, main .mno__card:hover, main .blogx__card:hover, main .swall__card:hover, main .work-card:hover .work-card__frame {
  border-color: color-mix(in srgb, var(--color-accent) 75%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px color-mix(in srgb, var(--color-accent) 35%, transparent), 0 0 28px color-mix(in srgb, var(--color-accent) 30%, transparent), 0 24px 60px -34px rgba(0,0,0,.7);
}
/* build 2026-10-13k */
/* portfolio / real-estate grids clear the docked rail (2026-10-13) */
@media (min-width: 1025px) { main .work-grid { padding-left: 20px; } }
/* build 2026-10-13l */
/* mobile: stacked cards must be opaque (no backdrop blur below 900px, so glass would show the card beneath) */
@media (max-width: 899px) {
  #services .msv__card, main .lux__card, main .pcs__card, main .mno__card, main .blogx__card, #all-services .svc8__card, #realestate .rehome__card {
    background: linear-gradient(165deg, rgba(var(--text-rgb), .06), rgba(var(--text-rgb), .02)), var(--color-bg-2);
  }
  #services .msv__card:hover, #services .msv__card.is-live {
    background: linear-gradient(165deg, color-mix(in srgb, var(--color-accent) 10%, transparent), rgba(var(--text-rgb), .02)), var(--color-bg-2);
  }
}
/* build 2026-10-13m */
/* contact: fixed 260px grid rows let taller cards overlap the CTA on phones (2026-10-13) */
@media (max-width: 768px) {
  main .mno__grid { grid-template-rows: none; grid-auto-rows: auto; }
  main .mno__card { height: auto; min-height: 220px; }
}
/* build 2026-10-13n */
/* story glass cards: width 100% + side margins pushed the card past the right edge (2026-10-13) */
#design .story-inner { width: auto; }
/* build 2026-10-13o */
/* docked rail stops above the fixed bottom bar (2026-10-13) */
@media (min-width: 1025px) {
  .overlay--docked .overlay__inner { height: calc(100% - var(--topbar-h, 76px) - var(--bottombar-h, 40px) - 22px); }
  body:has(.topbar--scrolled) .overlay--docked .overlay__inner { height: calc(100% - var(--bottombar-h, 40px) - 28px); }
}
/* build 2026-10-13p */
/* Pastel #5: process intro bigger and closer to the title (2026-10-13) */
#process .process__header .section-intro { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.32; letter-spacing: -.01em; color: var(--color-text); max-width: 32ch; margin-top: 14px; }
#process .process__header { margin-bottom: clamp(36px, 4vw, 52px); }
/* build 2026-10-13q */
/* Pastel #13: testimonial covers show the client's site (2026-10-13) */
#reviews .gcs-cover { background: #0e0e11; }
#reviews .gcs-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform 1.2s var(--ease, cubic-bezier(.22,1,.36,1)), object-position 3s ease; }
#reviews .gcs-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,12,14,0) 55%, rgba(12,12,14,.55)); pointer-events: none; }
#reviews .gcs-card:hover .gcs-shot { transform: scale(1.04); object-position: center 30%; }
#reviews .gcs-badge { z-index: 2; }
/* build 2026-10-13r */
/* Pastel #4: process steps as an open, box-free row (2026-10-13) */
.pflow { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--color-border); }
.pflow::before { content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent), 0 0 22px color-mix(in srgb, var(--color-accent) 55%, transparent); transform: scaleX(0); transform-origin: left center; transition: transform 1.6s cubic-bezier(.22,1,.36,1); }
.pflow.is-visible::before { transform: scaleX(1); }
.pflow__step { position: relative; padding: 30px 26px 4px; border-left: 1px solid var(--color-border); transition: opacity .35s var(--ease); }
.pflow__step:first-child { border-left: 0; padding-left: 0; }
.pflow__n { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 4.4vw, 64px); line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px var(--color-accent); transition: color .3s ease, text-shadow .3s ease; }
.pflow__t { margin: 20px 0 10px; font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text); }
.pflow__d { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text-dim); max-width: 24ch; text-wrap: pretty; }
.pflow__step:hover .pflow__n { color: var(--color-accent); text-shadow: 0 0 22px color-mix(in srgb, var(--color-accent) 55%, transparent); }
@media (hover: hover) { .pflow:hover .pflow__step:not(:hover) { opacity: .45; } }
@media (max-width: 900px) {
  .pflow { grid-template-columns: minmax(0, 1fr); }
  .pflow__step, .pflow__step:first-child { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--color-border); }
  .pflow__n { grid-row: 1 / span 2; font-size: 40px; }
  .pflow__t { margin: 2px 0 6px; }
  .pflow__d { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .pflow::before { transition: none; transform: scaleX(1); } }
#process .process__cta { margin-top: clamp(40px, 5vw, 64px); }
/* build 2026-10-13s */
/* Pastel #4+: process steps — staggered motion + one sliding glass panel (2026-10-13) */
.pflow { isolation: isolate; margin-inline: -22px; }
.pflow__step, .pflow__step:first-child { z-index: 1; padding: 30px 22px 28px; }
.pflow__step:first-child { border-left: 0; }
.pflow__step:nth-child(1) { --i: 0; } .pflow__step:nth-child(2) { --i: 1; } .pflow__step:nth-child(3) { --i: 2; } .pflow__step:nth-child(4) { --i: 3; } .pflow__step:nth-child(5) { --i: 4; }
.pflow:not(.is-visible) .pflow__step { opacity: 0; }
.pflow.is-visible .pflow__step { animation: pflowIn .9s cubic-bezier(.22,1,.36,1) backwards; animation-delay: calc(.55s + var(--i) * .12s); }
.pflow.is-visible .pflow__n { animation: pflowNum 1.1s cubic-bezier(.22,1,.36,1) backwards; animation-delay: calc(.65s + var(--i) * .12s); }
@keyframes pflowIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes pflowNum { from { opacity: 0; transform: translateY(35%); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.pflow.has-glass .pflow__step { transition: opacity .45s var(--ease); }
.pflow.has-glass .pflow__step:not(.is-active) { opacity: .5; }
@media (hover: hover) { .pflow:hover .pflow__step:not(:hover) { opacity: .5; } }
.pflow__step.is-active .pflow__n { color: var(--color-accent); text-shadow: 0 0 22px color-mix(in srgb, var(--color-accent) 55%, transparent); }
.pflow__glass { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; pointer-events: none; border-radius: 18px; opacity: 0;
  background: linear-gradient(165deg, rgba(var(--text-rgb), .10), rgba(var(--text-rgb), .02)), rgba(var(--bg-rgb), .35);
  border: 1px solid rgba(var(--text-rgb), .14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent), 0 0 44px color-mix(in srgb, var(--color-accent) 20%, transparent), 0 30px 70px -30px rgba(0,0,0,.6);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  transition: transform .75s cubic-bezier(.22,1,.36,1), width .75s cubic-bezier(.22,1,.36,1), height .75s cubic-bezier(.22,1,.36,1), opacity .45s; }
.pflow__glass::before { content: ''; position: absolute; left: 18%; right: 18%; top: -1px; height: 2px; border-radius: 2px; background: var(--color-accent); box-shadow: 0 0 10px var(--color-accent), 0 0 26px color-mix(in srgb, var(--color-accent) 60%, transparent); }
.pflow__glass::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(70% 55% at 50% 0%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 70%); }
.pflow__glass.is-on { opacity: 1; }
.pflow::after { content: ''; position: absolute; top: -2px; left: 22px; width: 90px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--color-accent), transparent); box-shadow: 0 0 12px var(--color-accent); opacity: 0; pointer-events: none; }
.pflow.is-visible::after { opacity: 1; animation: pflowRun 4.8s linear 1.8s infinite; }
@keyframes pflowRun { from { left: 22px; } to { left: calc(100% - 112px); } }
.pflow::before { left: 22px; width: calc(100% - 44px); }
@media (max-width: 900px) {
  .pflow { margin-inline: -14px; }
  .pflow__step, .pflow__step:first-child { padding: 22px 14px; }
  .pflow::after { display: none; }
  .pflow::before { left: 14px; width: calc(100% - 28px); }
  .pflow__glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(165deg, rgba(var(--text-rgb), .08), rgba(var(--text-rgb), .02)), var(--color-bg-2); }
}
@media (prefers-reduced-motion: reduce) {
  .pflow.is-visible .pflow__step, .pflow.is-visible .pflow__n, .pflow.is-visible::after { animation: none; }
  .pflow:not(.is-visible) .pflow__step { opacity: 1; }
}
/* build 2026-10-13t */
.pflow.has-glass .pflow__step:not(.is-active) { opacity: .65; }
@media (hover: hover) { .pflow:hover .pflow__step:not(:hover) { opacity: .65; } }
/* build 2026-10-13u */
/* Pastel #6: "Fast is part of the pitch" as a load waterfall with motion (2026-10-13) */
.hwf { width: var(--container); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 90px); align-items: center; }
.hwf__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5.2vw, 84px); line-height: .98; letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance; color: var(--color-text); }
.hwf__say { margin: 22px 0 0; max-width: 34ch; font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 24px); line-height: 1.35; color: var(--color-text-dim); text-wrap: pretty; }
.hwf__say b { color: var(--color-accent); font-weight: 500; }
.hwf__rows { list-style: none; margin: 0; padding: 18px 0; position: relative; display: grid; gap: 14px; }
.hwf__row { display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); align-items: center; gap: 18px; }
.hwf__k { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text); white-space: nowrap; }
.hwf__track { position: relative; height: 12px; border-radius: 7px; background: repeating-linear-gradient(90deg, rgba(var(--text-rgb), .08) 0 1px, transparent 1px 10%), rgba(var(--text-rgb), .05); overflow: visible; }
.hwf__track i { position: absolute; top: 0; bottom: 0; left: var(--s); width: 0; border-radius: 7px; background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 45%, transparent), var(--color-accent)); box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 65%, transparent), 0 0 26px color-mix(in srgb, var(--color-accent) 30%, transparent); }
.hwf__track i::after { content: ''; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 12px var(--color-accent); transform: translateY(-50%) scale(0); }
.hwf__rows::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(min(190px, 30%) + 18px); width: 2px; border-radius: 2px; background: linear-gradient(180deg, transparent, var(--color-accent), transparent); box-shadow: 0 0 14px var(--color-accent); opacity: 0; pointer-events: none; }
/* motion, keyed off the existing .hlo.is-lit trigger */
.hlo:not(.is-lit) .hwf__title, .hlo:not(.is-lit) .hwf__say, .hlo:not(.is-lit) .hwf__row { opacity: 0; }
.hlo.is-lit .hwf__title { animation: hwfUp 1s cubic-bezier(.22,1,.36,1) backwards; }
.hlo.is-lit .hwf__say { animation: hwfUp 1s cubic-bezier(.22,1,.36,1) .18s backwards; }
.hlo.is-lit .hwf__row { animation: hwfUp .8s cubic-bezier(.22,1,.36,1) backwards; animation-delay: calc(.25s + var(--i) * .09s); }
.hlo.is-lit .hwf__track i { animation: hwfLoad .9s cubic-bezier(.65,0,.35,1) forwards; animation-delay: calc(.7s + var(--i) * .16s); }
.hlo.is-lit .hwf__track i::after { animation: hwfDot .5s cubic-bezier(.22,1,.36,1) forwards; animation-delay: calc(1.5s + var(--i) * .16s); }
.hlo.is-lit .hwf__rows::after { animation: hwfSweep 3.6s cubic-bezier(.45,0,.55,1) 1.9s infinite; }
@keyframes hwfUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes hwfLoad { from { width: 0; } to { width: var(--w); } }
@keyframes hwfDot { from { transform: translateY(-50%) scale(0); } to { transform: translateY(-50%) scale(1); } }
@keyframes hwfSweep { 0% { opacity: 0; left: calc(min(190px, 30%) + 18px); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; left: calc(100% - 2px); } }
@media (max-width: 900px) {
  .hwf { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hwf__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hwf__rows { gap: 16px; }
  .hwf__rows::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hlo .hwf__title, .hlo .hwf__say, .hlo .hwf__row { opacity: 1 !important; animation: none !important; }
  .hwf__track i { width: var(--w); animation: none !important; }
  .hwf__track i::after { transform: translateY(-50%) scale(1); animation: none !important; }
  .hwf__rows::after { display: none; }
}
/* build 2026-10-13v */

/* Pastel #2/#3: "five seconds" becomes a live 5-second countdown (2026-10-13) */
.five { position: relative; padding: clamp(90px, 12vw, 170px) 0; overflow: hidden; isolation: isolate; }
.five::before { content: ''; position: absolute; left: 50%; top: 40%; width: min(900px, 120vw); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 70%); z-index: -1; opacity: .7; }
.five__inner { width: var(--container); margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(36px, 5vw, 96px); align-items: center; }
.five__clock { position: relative; width: clamp(180px, 18vw, 260px); aspect-ratio: 1; }
.five__clock svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.five__track { fill: none; stroke: rgba(var(--text-rgb), .10); stroke-width: 3; }
.five__arc { fill: none; stroke: var(--color-accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px var(--color-accent)) drop-shadow(0 0 18px color-mix(in srgb, var(--color-accent) 50%, transparent)); }
.five.is-run .five__arc { stroke-dashoffset: 100; transition: stroke-dashoffset 5s linear; }
.five.is-done .five__arc { stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(.22,1,.36,1); }
.five__num { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 12%; font-family: var(--font-display); font-weight: 700; font-size: clamp(76px, 7.4vw, 116px); line-height: 1; letter-spacing: -.04em; color: var(--color-text); font-variant-numeric: tabular-nums; }
.five__num.is-tick { animation: fiveTick .55s cubic-bezier(.22,1,.36,1); }
.five.is-done .five__num { color: var(--color-accent); text-shadow: 0 0 28px color-mix(in srgb, var(--color-accent) 50%, transparent); }
@keyframes fiveTick { from { transform: scale(1.28); opacity: .35; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }
.five__unit { position: absolute; left: 0; right: 0; bottom: 26%; text-align: center; font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--color-text-dim); }
.five__line { margin: 0; max-width: 17ch; font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 4.5vw, 72px); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; color: var(--color-text); }
.five.is-js .five__w { color: rgba(var(--text-rgb), .16); transition: color .55s ease, text-shadow .55s ease; }
.five.is-run .five__w { color: var(--color-text); transition-delay: var(--d, 0s); }
.five.is-run .five__w--acc { color: var(--color-accent); text-shadow: 0 0 26px color-mix(in srgb, var(--color-accent) 45%, transparent); }
.five__facts { position: relative; width: var(--container); margin: clamp(56px, 7vw, 100px) auto 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-border); }
.five__facts::before { content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--color-accent); box-shadow: 0 0 10px var(--color-accent); transform: scaleX(0); transform-origin: left center; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.five.is-done .five__facts::before { transform: scaleX(1); }
.five__facts li { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 0 0; }
.five__facts li + li { border-left: 1px solid var(--color-border); padding-left: 26px; }
.five__facts span { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--color-text-dim); }
.five__facts b { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.3vw, 50px); line-height: 1; letter-spacing: -.025em; color: var(--color-text); font-variant-numeric: tabular-nums; }
.five.is-js:not(.is-done) .five__facts li { opacity: 0; transform: translateY(24px); }
.five.is-done .five__facts li { opacity: 1; transform: none; transition: opacity .7s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.five.is-done .five__facts li:nth-child(2) { transition-delay: .12s; }
.five.is-done .five__facts li:nth-child(3) { transition-delay: .24s; }
@media (max-width: 768px) {
  .five { padding: 80px 0 72px; }
  .five__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 30px; }
  .five__clock { width: 150px; }
  .five__num { font-size: 64px; }
  .five__unit { bottom: 24%; font-size: 10px; }
  .five__line { max-width: none; font-size: clamp(28px, 8.2vw, 40px); }
  .five__facts { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .five__facts li, .five__facts li + li { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--color-border); }
  .five__facts b { font-size: 26px; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .five .five__w { color: var(--color-text) !important; transition: none !important; }
  .five .five__facts li { opacity: 1 !important; transform: none !important; }
  .five__arc { transition: none !important; }
}
/* build 2026-10-13w */

/* All Services: icon draw, neon sweep, cursor spotlight + tilt (2026-10-13) */
#all-services .svc8__grid { position: relative; }
#all-services .svc8__card { --mx: 50%; --my: 0%; overflow: hidden; isolation: isolate; transform-style: preserve-3d; will-change: auto; }
#all-services .svc8__card::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(280px circle at var(--mx) var(--my), color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 70%); }
#all-services .svc8__card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(220px circle at var(--mx) var(--my), var(--color-accent), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@media (hover: hover) {
  #all-services .svc8__card:hover::before, #all-services .svc8__card:hover::after { opacity: 1; }
  #all-services .svc8__card.is-tilt { transition: transform .18s ease-out, border-color .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease); }
}
/* icons draw themselves */
#all-services .svc8__icon [pathLength] { stroke-dasharray: 100; stroke-dashoffset: 100; }
#all-services.is-in .svc8__icon [pathLength] { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(.65,0,.35,1); transition-delay: calc(.35s + var(--i, 0) * .1s); }
#all-services .svc8__icon svg { filter: drop-shadow(0 0 0 transparent); transition: filter .5s ease; }
#all-services.is-in .svc8__icon svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-accent) 55%, transparent)); transition-delay: calc(1.2s + var(--i, 0) * .1s); }
/* numbers slide up */
#all-services .svc8__card .rehome__num { display: inline-block; }
#all-services.is-in .svc8__card .rehome__num { animation: svcNum .7s cubic-bezier(.22,1,.36,1) backwards; animation-delay: calc(.5s + var(--i, 0) * .1s); }
@keyframes svcNum { from { opacity: 0; transform: translateY(70%); } to { opacity: 1; transform: none; } }
/* one neon sweep across the grid */
#all-services .svc8__grid::after { content: ''; position: absolute; top: -12px; bottom: -12px; left: 0; width: 2px; border-radius: 2px; pointer-events: none; opacity: 0; z-index: 3;
  background: linear-gradient(180deg, transparent, var(--color-accent), transparent); box-shadow: 0 0 16px var(--color-accent), 0 0 40px color-mix(in srgb, var(--color-accent) 40%, transparent); }
#all-services.is-in .svc8__grid::after { animation: svcSweep 1.8s cubic-bezier(.65,0,.35,1) .25s 1 both; }
@keyframes svcSweep { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #all-services .svc8__icon [pathLength] { stroke-dashoffset: 0; transition: none; }
  #all-services.is-in .svc8__card .rehome__num, #all-services.is-in .svc8__grid::after { animation: none; }
}
/* build 2026-10-13x */

/* All Services as a live system: the website at the core, 7 services wired around it (2026-10-13) */
.ssys { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) minmax(0, 1fr); gap: clamp(56px, 7vw, 116px); align-items: center; margin-top: clamp(30px, 4vw, 56px); }
.ssys__wires { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.ssys__wire { fill: none; stroke: rgba(var(--text-rgb), .16); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.3s cubic-bezier(.65,0,.35,1), stroke .35s ease, stroke-width .35s ease; transition-delay: calc(.55s + var(--i, 0) * .09s), 0s, 0s; }
.ssys.is-in .ssys__wire { stroke-dashoffset: 0; }
.ssys__wire.is-hot, .ssys.is-core-hot .ssys__wire { stroke: var(--color-accent); stroke-width: 2; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-accent) 70%, transparent)); transition-delay: 0s; }
.ssys__pulse { fill: var(--color-accent); opacity: 0; filter: drop-shadow(0 0 5px var(--color-accent)) drop-shadow(0 0 12px color-mix(in srgb, var(--color-accent) 60%, transparent)); transition: opacity .5s ease 1.8s; }
.ssys.is-in .ssys__pulse { opacity: 1; }
.ssys__col { position: relative; z-index: 1; display: grid; gap: 14px; }
.ssys__node, .ssys__core { --mx: 50%; --my: 0%; position: relative; isolation: isolate; overflow: hidden; display: block; text-decoration: none; color: inherit;
  background: linear-gradient(165deg, rgba(var(--text-rgb), .07), rgba(var(--text-rgb), .02)), rgba(var(--bg-rgb), .62);
  border: 1px solid rgba(var(--text-rgb), .12); border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 60px -34px rgba(0,0,0,.7);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease), transform .5s cubic-bezier(.22,1,.36,1), opacity .7s ease; }
@media (min-width: 900px) { .ssys__node, .ssys__core { backdrop-filter: blur(12px) saturate(1.25); -webkit-backdrop-filter: blur(12px) saturate(1.25); } }
.ssys__node { padding: 16px 20px 16px; }
.ssys__head { display: flex; align-items: center; gap: 12px; }
.ssys__ic { display: block; width: 26px; height: 26px; color: var(--color-accent); flex: none; }
.ssys__ic svg { width: 100%; height: 100%; display: block; }
.ssys__num { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--color-accent); }
.ssys__t { margin: 10px 0 4px; font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 1.2vw, 19px); letter-spacing: -.01em; color: var(--color-text); }
.ssys__d { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-text-dim); text-wrap: pretty; }
.ssys__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease; }
.ssys__go svg { transition: transform .25s ease; }
.ssys__node:hover .ssys__go, .ssys__node:focus-visible .ssys__go, .ssys__core .ssys__go { opacity: 1; transform: none; }
.ssys__node:hover .ssys__go svg, .ssys__core:hover .ssys__go svg { transform: translate(3px, -3px); }
/* the core: the website */
.ssys__core { z-index: 2; padding: clamp(28px, 2.6vw, 38px); border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); border-radius: 22px; overflow: visible;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px color-mix(in srgb, var(--color-accent) 20%, transparent), 0 0 60px color-mix(in srgb, var(--color-accent) 18%, transparent), 0 30px 80px -30px rgba(0,0,0,.7); }
.ssys__eyebrow { display: block; margin-bottom: 18px; font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--color-text-dim); }
.ssys__ic--core { width: 54px; height: 54px; margin-bottom: 18px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-accent) 60%, transparent)); }
.ssys__t--core { margin-top: 10px; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.08; letter-spacing: -.02em; }
.ssys__core .ssys__d { font-size: 15.5px; }
.ssys__ring { position: absolute; inset: -12px; border-radius: 30px; border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent); opacity: 0; pointer-events: none; }
.ssys.is-in .ssys__ring { animation: ssysRing 3.2s cubic-bezier(.22,1,.36,1) 1.4s infinite; }
.ssys.is-in .ssys__ring--2 { animation-delay: 3s; }
@keyframes ssysRing { 0% { opacity: .7; transform: scale(.97); } 100% { opacity: 0; transform: scale(1.12); } }
/* spotlight that follows the cursor */
.ssys__node::before, .ssys__core::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(240px circle at var(--mx) var(--my), color-mix(in srgb, var(--color-accent) 17%, transparent), transparent 70%); }
@media (hover: hover) {
  .ssys__node:hover::before, .ssys__core:hover::before { opacity: 1; }
  .ssys__node:hover { border-color: color-mix(in srgb, var(--color-accent) 70%, transparent); transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent), 0 0 30px color-mix(in srgb, var(--color-accent) 22%, transparent), 0 24px 60px -34px rgba(0,0,0,.7); }
}
/* entrance: core lights up, then nodes arrive from the core's direction */
.ssys:not(.is-in) .ssys__core { opacity: 0; transform: scale(.92); }
.ssys.is-in .ssys__core { transition-delay: .1s; }
.ssys__col--l { --dx: 46px; } .ssys__col--r { --dx: -46px; }
.ssys:not(.is-in) .ssys__node { opacity: 0; transform: translateX(var(--dx)); }
.ssys.is-in .ssys__node { transition-delay: calc(.85s + var(--i, 0) * .08s), calc(.85s + var(--i, 0) * .08s), 0s, calc(.85s + var(--i, 0) * .08s), calc(.85s + var(--i, 0) * .08s); }
.ssys.is-in .ssys__node:hover { transition-delay: 0s; }
/* phones: the core on top, services down a neon spine */
@media (max-width: 899px) {
  .ssys { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ssys__wires { display: none; }
  .ssys__core { order: -1; margin-bottom: 28px; }
  .ssys__col { padding-left: 30px; }
  .ssys__col::before { content: ''; position: absolute; left: 10px; top: -28px; bottom: 18px; width: 1px; background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 70%, transparent), rgba(var(--text-rgb), .14)); }
  .ssys__col--r::before { top: -14px; }
  .ssys__col::after { content: ''; position: absolute; left: 7px; top: -28px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 10px var(--color-accent); opacity: 0; }
  .ssys.is-in .ssys__col::after { animation: ssysDrop 2.8s cubic-bezier(.45,0,.55,1) 1.2s infinite; }
  .ssys.is-in .ssys__col--r::after { animation-delay: 2.6s; }
  @keyframes ssysDrop { 0% { top: -28px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 22px); opacity: 0; } }
  .ssys__node { padding: 14px 16px; }
  .ssys__node::after { content: ''; position: absolute; left: -21px; top: 26px; width: 18px; height: 1px; background: color-mix(in srgb, var(--color-accent) 55%, transparent); }
  .ssys__node { overflow: visible; }
  .ssys__go { opacity: 1; transform: none; }
  .ssys__col--l, .ssys__col--r { --dx: 0px; }
  .ssys:not(.is-in) .ssys__node { transform: translateY(18px); }
}
@media (prefers-reduced-motion: reduce) {
  .ssys .ssys__node, .ssys .ssys__core { opacity: 1 !important; transform: none !important; }
  .ssys__wire { stroke-dashoffset: 0; transition: none; }
  .ssys__ring, .ssys__col::after { animation: none !important; }
}
/* build 2026-10-13y */
/* Selected Work on phones: caption moves below the screenshot instead of over it (2026-10-13) */
@media (max-width: 860px) {
  #work .fwork__slide { display: flex; flex-direction: column; }
  #work .fwork__slide-bar { position: static; padding: 16px 18px 18px; background: var(--color-bg-2); border-top: 1px solid var(--color-border); }
  #work .fwork__slide-name { font-size: 18px; }
  #work .fwork__slide-desc { color: var(--color-text-dim); margin-top: 6px; }
  #work .fwork__slide-index { background: rgba(var(--bg-rgb), .72); mix-blend-mode: normal; padding: 3px 8px; border-radius: 6px; }
}
/* build 2026-10-13z */
/* "Design that thinks" on phones: cards stick under the topbar and the next one slides over (2026-10-13) */
@media (max-width: 768px) {
  #design.story-wrap .story-panel { position: sticky !important; top: calc(var(--topbar-h, 64px) + 8px + var(--k, 0) * 10px) !important; height: auto !important; overflow: visible !important; }
  #design.story-wrap .story-panel:nth-child(1) { --k: 0; }
  #design.story-wrap .story-panel:nth-child(2) { --k: 1; }
  #design.story-wrap .story-panel:nth-child(3) { --k: 2; }
  #design.story-wrap .story-panel:nth-child(4) { --k: 3; }
  #design.story-wrap { padding-bottom: 24px; }
  #design .story-inner { background: linear-gradient(170deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%), var(--sbg); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 -18px 40px -10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); }
}
/* build 2026-10-13za */

/* ===== Portfolio: sector filters, show-more, richer cards (2026-10-13) ===== */
.pf-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: -18px 0 36px; }
.pf-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(var(--text-rgb), .14);
  background: linear-gradient(165deg, rgba(var(--text-rgb), .06), rgba(var(--text-rgb), .015)), rgba(var(--bg-rgb), .5);
  color: var(--color-text-dim); font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease; }
.pf-chip i { font-style: normal; font-size: 11px; color: var(--color-accent); opacity: .85; font-variant-numeric: tabular-nums; }
.pf-chip:hover { color: var(--color-text); border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); transform: translateY(-1px); }
.pf-chip.is-on { color: #0c0c0e; background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent), 0 0 24px color-mix(in srgb, var(--color-accent) 35%, transparent); }
.pf-chip.is-on i { color: #0c0c0e; }
.pf-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (max-width: 768px) {
  .pf-chips { flex-wrap: nowrap; overflow-x: auto; margin: -10px -20px 24px; padding: 2px 20px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .pf-chips::-webkit-scrollbar { display: none; }
  .pf-chip { flex: none; height: 38px; scroll-snap-align: start; }
}
.work-card.is-cat-out, .work-card.is-paged { display: none !important; }
/* show more */
.pf-more { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 44px 0 0; }
.pf-more[hidden] { display: none; }
.pf-more__btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent); background: rgba(var(--bg-rgb), .5); color: var(--color-text); font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.pf-more__btn:hover { background: var(--color-accent); color: #0c0c0e; box-shadow: 0 0 26px color-mix(in srgb, var(--color-accent) 40%, transparent); }
.pf-more__left { font-family: var(--font-display); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-text-dim); }
.pf-more__bar { width: min(260px, 70%); height: 2px; border-radius: 2px; background: rgba(var(--text-rgb), .1); overflow: hidden; }
.pf-more__bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent); transition: width .6s cubic-bezier(.22,1,.36,1); }
/* cards: browser chrome with the domain, glass, spotlight, neon edge */
#archive .work-card { --mx: 50%; --my: 0%; }
#archive .work-card.reveal { transition-delay: var(--rd, 0s); }
#archive .work-card__bar { display: flex; align-items: center; gap: 6px; }
#archive .work-card__url { margin-left: 10px; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-family: var(--font-display); font-size: 10.5px; letter-spacing: .06em; color: var(--color-text-dim);
  padding: 3px 10px; border-radius: 999px; background: rgba(var(--text-rgb), .05); border: 1px solid rgba(var(--text-rgb), .07); }
#archive .work-card__frame { position: relative; isolation: isolate; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px -34px rgba(0,0,0,.75); }
#archive .work-card__frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; z-index: 3; transition: opacity .4s ease;
  background: radial-gradient(240px circle at var(--mx) var(--my), var(--color-accent), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
#archive .work-card__frame::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(320px circle at var(--mx) var(--my), color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 70%); mix-blend-mode: screen; }
@media (hover: hover) {
  #archive .work-card:hover .work-card__frame::after, #archive .work-card:hover .work-card__frame::before { opacity: 1; }
  #archive .work-card:hover .work-card__url { color: var(--color-text); }
}
#archive .work-card__name { transition: color .25s ease; }
#archive .work-card:hover .work-card__name { color: var(--color-accent); }
/* phones: the centred card scrolls its site on its own */
@media (max-width: 768px) {
  #archive .work-card.is-center .work-card__shot img { transform: translateY(var(--shot-end, 0px)); }
}
/* entering cards after a filter change */
.work-card.pf-enter { animation: pfEnter .55s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--pe, 0s); }
@keyframes pfEnter { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .work-card.pf-enter { animation: none; } #archive .work-card.reveal { transition-delay: 0s; } }
/* build 2026-10-13zb */

/* ===== Portfolio round 2 (2026-10-13): hero wall, featured strip, flow, system ===== */
/* hero: a slow wall of real builds, tilted in 3D behind the title */
.pfm { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; perspective: 1700px; opacity: 0; transition: opacity 1.6s ease; }
.pfm.is-on { opacity: 1; }
.pfm__plane { position: absolute; left: 50%; top: 50%; width: 175%; display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 24px; transform: translate(-50%, -50%) rotateX(32deg) rotateZ(-16deg); transform-origin: 50% 50%; }
.pfm__col { display: flex; flex-direction: column; animation: pfmUp var(--dur, 70s) linear infinite; will-change: transform; }
.pfm__col:nth-child(even) { animation-direction: reverse; margin-top: -180px; }
@keyframes pfmUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.pfm__tile { display: block; margin: 0 0 24px; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--color-bg-2); border: 1px solid rgba(var(--text-rgb), .1); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.pfm__tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: .78; }
.pfm__veil { position: absolute; inset: 0; background:
  radial-gradient(ellipse 72% 64% at 50% 52%, rgba(var(--bg-rgb), .96) 0%, rgba(var(--bg-rgb), .9) 50%, rgba(var(--bg-rgb), .6) 80%, rgba(var(--bg-rgb), .4) 100%),
  linear-gradient(180deg, rgba(var(--bg-rgb), .85) 0%, transparent 18%, transparent 78%, var(--color-bg) 100%); }
#top .hero__content { position: relative; z-index: 2; }
/* the counter that lights up on load */
.pfm-count { display: inline-flex; align-items: baseline; gap: 12px; margin: 26px auto 0; padding: 12px 22px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  background: linear-gradient(165deg, rgba(var(--text-rgb), .07), rgba(var(--text-rgb), .02)), rgba(var(--bg-rgb), .6); box-shadow: 0 0 30px color-mix(in srgb, var(--color-accent) 18%, transparent); }
@media (min-width: 900px) { .pfm-count { backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); } }
.pfm-count b { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.6vw, 36px); line-height: 1; letter-spacing: -.03em; color: var(--color-accent); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px color-mix(in srgb, var(--color-accent) 50%, transparent); min-width: 4.2ch; text-align: right; }
.pfm-count span { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-dim); }
@media (max-width: 899px) {
  .pfm__plane { width: 260%; gap: 14px; transform: translate(-50%, -50%) rotateX(30deg) rotateZ(-14deg); }
  .pfm__tile { margin-bottom: 14px; border-radius: 10px; }
  .pfm__col:nth-child(even) { margin-top: -90px; }
  .pfm__tile img { opacity: .6; }
  .pfm-count { padding: 10px 18px; gap: 10px; }
}
/* how a build runs: four steps in the home's flow pattern */
.pf-steps .pflow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-steps .pflow__d { max-width: 30ch; }
.pf-steps .pflow__t { letter-spacing: .02em; }
@media (max-width: 899px) { .pf-steps .pflow--4 { grid-template-columns: minmax(0, 1fr); } .pf-steps .pflow__d { max-width: none; } }
/* under the hood: the count at the core, the machinery wired around it */
.pf-inside { padding: clamp(100px, 12vw, 180px) 0; }
.pf-inside .section-intro { margin-top: 18px; }
.ssys__big { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(68px, 7vw, 108px); line-height: .9; letter-spacing: -.05em; color: var(--color-accent); font-variant-numeric: tabular-nums; text-shadow: 0 0 30px color-mix(in srgb, var(--color-accent) 45%, transparent); }
.ssys--pf .ssys__t--core { margin-top: 14px; font-size: clamp(20px, 1.7vw, 26px); text-transform: uppercase; letter-spacing: .02em; }
.ssys--pf .ssys__node { padding: 18px 20px; }
.ssys--pf .ssys__t { margin-top: 12px; }
/* build 2026-10-13zc */
.pfm.is-paused .pfm__col { animation-play-state: paused; }
.pfm-count { width: fit-content; max-width: 100%; }
.pfm-count span { text-align: left; }
@media (max-width: 899px) {
  .pfm-count span { font-size: 11px; letter-spacing: .12em; }
  .pfm__veil { background: radial-gradient(ellipse 90% 52% at 50% 46%, rgba(var(--bg-rgb), .9) 0%, rgba(var(--bg-rgb), .78) 55%, rgba(var(--bg-rgb), .5) 100%), linear-gradient(180deg, rgba(var(--bg-rgb), .7) 0%, transparent 14%, transparent 80%, var(--color-bg) 100%); }
  .pfm__tile img { opacity: .75; }
}

/* ===== Five: yellow paint thrown at the screen at zero (2026-10-13) ===== */
.five-splash { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 9990; pointer-events: none; transition: opacity .9s ease; }
.five-splash.is-out { opacity: 0; }
.five__clock { isolation: isolate; }
.five__paint { position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -50%); pointer-events: none; }
.five.is-done.is-splat .five__num { color: #0c0c0e; text-shadow: none; }
.five.is-splat .five__unit { color: rgba(12,12,14,.72); }
.five.is-splat .five__arc { stroke: #0c0c0e; filter: none; }
.five.is-splat .five__track { stroke: rgba(12,12,14,.18); }
/* build 2026-10-13zd */

/* ===== Portfolio: "What every one of them has inside" as a checklist that lights up (2026-10-13) ===== */
.pf-inside .pfk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.pfk__aside { position: sticky; top: calc(var(--topbar-h, 64px) + 40px); }
.pfk__aside .section-title { margin-top: 18px; }
.pfk__aside .section-intro { margin-top: 18px; }
.pfk__count { display: flex; align-items: flex-end; gap: 18px; margin-top: clamp(30px, 3.5vw, 48px); padding-top: 26px; border-top: 1px solid var(--color-border); }
.pfk__count b { font-family: var(--font-display); font-weight: 700; font-size: clamp(84px, 9vw, 144px); line-height: .82; letter-spacing: -.05em; color: var(--color-accent); font-variant-numeric: tabular-nums; text-shadow: 0 0 34px color-mix(in srgb, var(--color-accent) 40%, transparent); }
.pfk__count span { padding-bottom: 6px; max-width: 11ch; font-family: var(--font-display); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; color: var(--color-text-dim); }
.pfk__note { margin: 16px 0 0; max-width: 36ch; font-size: 15px; line-height: 1.6; color: var(--color-text-dim); }
.pfk__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.pfk__item { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 24px; padding: clamp(26px, 3vw, 42px) 0; border-bottom: 1px solid var(--color-border); }
.pfk__item::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--color-accent); box-shadow: 0 0 10px var(--color-accent); transform: scaleX(0); transform-origin: left center; transition: transform 1.1s cubic-bezier(.22,1,.36,1) .2s; }
.pfk__item.is-lit::after { transform: scaleX(1); }
.pfk__tick svg { display: block; width: 46px; height: 46px; overflow: visible; transition: filter .5s ease; }
.pfk__tick circle { fill: transparent; stroke: rgba(var(--text-rgb), .2); stroke-width: 1.4; transition: fill .45s ease, stroke .45s ease; }
.pfk__tick path { stroke: var(--color-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .6s cubic-bezier(.65,0,.35,1) .25s, stroke .3s ease; }
.pfk__item.is-lit .pfk__tick svg { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--color-accent) 55%, transparent)); }
.pfk__item.is-lit .pfk__tick circle { fill: var(--color-accent); stroke: var(--color-accent); }
.pfk__item.is-lit .pfk__tick path { stroke: #0c0c0e; stroke-dashoffset: 0; }
.pfk__t { margin: 6px 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.3vw, 36px); line-height: 1.1; letter-spacing: -.02em; color: rgba(var(--text-rgb), .4); transition: color .55s ease; text-wrap: balance; }
.pfk__item.is-lit .pfk__t { color: var(--color-text); }
.pfk__d { margin: 10px 0 0; max-width: 52ch; font-size: 15.5px; line-height: 1.6; color: var(--color-text-dim); opacity: .55; transition: opacity .55s ease; text-wrap: pretty; }
.pfk__item.is-lit .pfk__d { opacity: 1; }
@media (max-width: 899px) {
  .pf-inside .pfk { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .pfk__aside { position: static; }
  .pfk__item { grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding: 24px 0; }
  .pfk__tick svg { width: 36px; height: 36px; }
  .pfk__t { margin-top: 3px; }
}
@media (prefers-reduced-motion: reduce) { .pfk__item::after, .pfk__tick path, .pfk__tick circle, .pfk__t, .pfk__d { transition: none; } }
/* build 2026-10-13ze */

/* ===== Home: bullet in slow motion that never reaches the can (2026-10-13) ===== */
.shot { padding: clamp(70px, 9vw, 130px) 0; }
.shot__frame { position: relative; width: var(--container); margin: 0 auto; aspect-ratio: 16 / 9; max-height: 82vh; overflow: hidden; isolation: isolate; border-radius: 22px; border: 1px solid rgba(var(--text-rgb), .1);
  background: radial-gradient(ellipse 55% 60% at 64% 46%, rgba(var(--text-rgb), .085), transparent 70%), radial-gradient(ellipse 120% 80% at 50% 120%, rgba(0,0,0,.45), transparent 60%), var(--color-bg-2); }
.shot__corner { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(var(--text-rgb), .4); z-index: 3; }
.shot__corner--tl { left: 22px; top: 22px; border-left-width: 1.5px; border-top-width: 1.5px; }
.shot__corner--tr { right: 22px; top: 22px; border-right-width: 1.5px; border-top-width: 1.5px; }
.shot__corner--bl { left: 22px; bottom: 22px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.shot__corner--br { right: 22px; bottom: 22px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.shot__hud { position: absolute; top: 30px; z-index: 3; display: flex; align-items: center; gap: 8px; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .12em; color: rgba(var(--text-rgb), .62); font-variant-numeric: tabular-nums; }
.shot__hud--tl { left: 58px; } .shot__hud--tr { right: 58px; }
.shot__rec { width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 8px #ff3b30; animation: shotRec 1.2s steps(2, jump-none) infinite; }
@keyframes shotRec { 50% { opacity: .2; } }
.shot__stage { position: absolute; inset: 0; transition: opacity 1s ease, filter 1s ease; }
.shot__can { position: absolute; left: 64%; top: 50%; height: 58%; width: auto; transform: translate(-50%, -48%); filter: drop-shadow(18px 0 30px rgba(0,0,0,.5)); overflow: visible; }
.shot__logo { font-family: var(--font-display); font-weight: 700; font-size: 25px; letter-spacing: .01em; }
.shot__logo-go { fill: #f2c200; } .shot__logo-so { fill: #f4f4f2; }
.shot__tag { font-family: var(--font-display); font-weight: 600; font-size: 7px; letter-spacing: .12em; fill: rgba(244,244,242,.7); }
.shot__tag--sm { font-size: 7.5px; fill: rgba(244,244,242,.45); }
.shot__b { position: absolute; left: 0; top: 50%; width: clamp(64px, 9%, 130px); aspect-ratio: 3 / 1; transform: translate3d(var(--bx, -200px), calc(-50% + var(--by, 0px)), 0); will-change: transform; }
.shot__bullet { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); }
.shot__mach { position: absolute; right: 2%; top: 50%; width: 260%; height: 1px; transform-origin: right center; background: linear-gradient(90deg, transparent, rgba(var(--text-rgb), .16)); }
.shot__mach--up { transform: rotate(16deg); } .shot__mach--dn { transform: rotate(-16deg); }
.shot__trail { position: absolute; left: 0; top: 50%; height: 2px; width: var(--tw, 0px); transform: translateY(-50%); background: linear-gradient(90deg, transparent, rgba(var(--text-rgb), .1) 40%, rgba(var(--text-rgb), .38)); filter: blur(.4px); }
.shot__count { position: absolute; left: 50%; bottom: 9%; z-index: 3; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; transition: opacity .6s ease; }
.shot__count span { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(var(--text-rgb), .55); }
.shot__count b { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 3.6vw, 54px); line-height: 1; letter-spacing: .04em; color: var(--color-accent); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px color-mix(in srgb, var(--color-accent) 40%, transparent); }
.shot__end { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 0 8%; text-align: center; pointer-events: none; }
.shot__l1, .shot__l2 { margin: 0; opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.22,1,.36,1); }
.shot__l1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3.4vw, 52px); line-height: 1.12; letter-spacing: -.02em; color: var(--color-text); text-wrap: balance; }
.shot__l1 b { color: var(--color-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.shot__l2 { max-width: 40ch; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.6; color: var(--color-text-dim); transition-delay: .9s; text-wrap: balance; }
.shot.is-end .shot__stage { opacity: .22; filter: blur(2px); }
.shot.is-end .shot__count { opacity: 0; }
.shot.is-end .shot__l1, .shot.is-end .shot__l2 { opacity: 1; transform: none; }
@media (max-width: 767px) {
  .shot__frame { aspect-ratio: 4 / 5; max-height: none; border-radius: 18px; }
  .shot__can { left: 66%; height: 46%; }
  .shot__b { width: 18%; }
  .shot__hud { top: 22px; font-size: 9.5px; letter-spacing: .08em; }
  .shot__hud--tl { left: 44px; } .shot__hud--tr { right: 44px; }
  .shot__corner { width: 20px; height: 20px; }
  .shot__corner--tl, .shot__corner--bl { left: 14px; } .shot__corner--tr, .shot__corner--br { right: 14px; }
  .shot__corner--tl, .shot__corner--tr { top: 14px; } .shot__corner--bl, .shot__corner--br { bottom: 14px; }
  .shot__count { bottom: 8%; }
}
@media (prefers-reduced-motion: reduce) { .shot__rec { animation: none; } .shot__l1, .shot__l2, .shot__stage { transition: none; } }
/* build 2026-10-13zf */
.shot__paint { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
/* build 2026-10-13zg */
.shot__boom { position: absolute; left: 50%; top: 50%; z-index: 3; margin: 0; pointer-events: none; font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: .9; letter-spacing: -.02em; text-transform: uppercase; text-align: center; white-space: nowrap; color: #0c0c0e; opacity: 0; transform: translate(-50%, -50%) rotate(-5deg) scale(1.9); transition: opacity .18s ease, transform .45s cubic-bezier(.2,1.7,.45,1); }
.shot__boom.is-boom { opacity: 1; transform: translate(-50%, -50%) rotate(-5deg) scale(1); }
.shot.is-end .shot__boom { opacity: 0; transition: opacity .6s ease; }
/* build 2026-10-13zh */
/* bullet scene: paint pours out of the can instead of bursting (2026-10-13) */
.shot__boom { color: var(--color-accent); text-shadow: 0 0 28px color-mix(in srgb, var(--color-accent) 45%, transparent); transform: translate(-50%, -50%) rotate(-4deg) scale(1.9); }
.shot__boom.is-boom { transform: translate(-50%, -50%) rotate(-4deg) scale(1); }
.shot.is-hit .shot__count { opacity: 0; transition: opacity .6s ease 1.1s; }
/* build 2026-10-13zi */

/* ===== Services: hero tags as one connected line (2026-10-13) ===== */
.hero--svc .hero__tags { position: relative; isolation: isolate; }
@media (min-width: 900px) {
  .hero--svc .hero__tags { flex-wrap: nowrap; justify-content: center; gap: 18px; }
  .hero--svc .hero__tags::before { content: ''; position: absolute; left: 4%; right: 4%; top: 50%; height: 1px; z-index: -1; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent) 70%, transparent) 12%, color-mix(in srgb, var(--color-accent) 70%, transparent) 88%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 50%, transparent); transform: scaleX(0); transform-origin: left center; transition: transform 1.6s cubic-bezier(.22,1,.36,1) .9s; }
  .hero--svc .hero__tags.is-visible::before { transform: scaleX(1); }
  .hero--svc .hero__tags::after { content: ''; position: absolute; left: 4%; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; z-index: -1; background: var(--color-accent); box-shadow: 0 0 12px var(--color-accent), 0 0 26px var(--color-accent); opacity: 0; }
  .hero--svc .hero__tags.is-visible::after { animation: svxPulse 4.2s cubic-bezier(.45,0,.55,1) 2.4s infinite; }
  .hero--svc .hero__tags .tag { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(var(--text-rgb), .14); background: var(--color-bg); }
}
@keyframes svxPulse { 0% { left: 4%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 96%; opacity: 0; } }

/* ===== Services explorer: sticky index + one animated screen per service ===== */
.svx { width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(36px, 4.5vw, 80px); align-items: start; }
.svx__nav { position: sticky; top: 110px; padding: clamp(70px, 8vw, 120px) 0 0; }
.svx__index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.svx__link { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; padding: 16px 0 18px; border-bottom: 1px solid var(--color-border); text-decoration: none; color: var(--color-text-dim); transition: color .35s ease; }
.svx__n { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: rgba(var(--text-rgb), .35); transition: color .35s ease; }
.svx__name { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.005em; line-height: 1.25; }
.svx__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; }
.svx__bar b { display: block; height: 100%; width: 100%; background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent); transform: scaleX(var(--p, 0)); transform-origin: left center; }
.svx__link:hover { color: var(--color-text); }
.svx__link.is-active { color: var(--color-text); }
.svx__link.is-active .svx__n { color: var(--color-accent); }
.svx__link.is-done .svx__n { color: color-mix(in srgb, var(--color-accent) 60%, transparent); }
.svx__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(28px, 3.5vw, 56px); row-gap: clamp(26px, 3vw, 40px); align-items: center; padding: clamp(70px, 8vw, 120px) 0; border-bottom: 1px solid var(--color-border); scroll-margin-top: 40px; }
.svx__copy .label { display: inline-block; }
.svx__title { margin: 16px 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 2.8vw, 42px); line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; color: var(--color-text); text-wrap: balance; }
.svx__intro { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--color-text); opacity: .86; text-wrap: pretty; }
.svx__body { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: var(--color-text-dim); text-wrap: pretty; }
.svx__caps { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.svx__caps li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(var(--text-rgb), .12); font-family: var(--font-display); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--text-rgb), .42); transition: color .45s ease, border-color .45s ease, background .45s ease; transition-delay: calc(.35s + var(--k, 0) * .07s); }
.svx__caps li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--text-rgb), .25); transition: background .45s ease, box-shadow .45s ease; transition-delay: inherit; }
.svx__panel.is-on .svx__caps li { color: var(--color-text); border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.svx__panel.is-on .svx__caps li::before { background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent); }
.svx__foot { grid-column: 1 / -1; }
/* the screen */
.svx__screen { --c: var(--color-accent); --l: rgba(var(--text-rgb), .14); --l2: rgba(var(--text-rgb), .08); position: relative; aspect-ratio: 16 / 11; border-radius: 18px; overflow: hidden; border: 1px solid rgba(var(--text-rgb), .12);
  background: radial-gradient(ellipse 80% 70% at 70% 20%, color-mix(in srgb, var(--color-accent) 9%, transparent), transparent 70%), linear-gradient(165deg, rgba(var(--text-rgb), .06), rgba(var(--text-rgb), .015)), var(--color-bg-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 40px 80px -40px rgba(0,0,0,.8); }
.svx__screen * { animation-play-state: paused; }
.svx__panel.is-on .svx__screen * { animation-play-state: running; }
.svx__chrome { position: absolute; left: 0; right: 0; top: 0; height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid var(--l2); }
.svx__chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--l); }
.svx__chrome i:first-child { background: var(--c); }
.svx__chrome em { margin-left: 10px; width: 38%; height: 14px; border-radius: 999px; background: var(--l2); }
.svx__screen > div { position: absolute; left: 0; right: 0; top: 34px; bottom: 0; padding: 7% 7%; }
/* web: a page assembles, the form fills, a lead lands */
.svx__wnav { display: flex; gap: 8px; } .svx__wnav i { height: 7px; width: 13%; border-radius: 4px; background: var(--l); } .svx__wnav i:first-child { width: 18%; background: var(--c); margin-right: auto; }
.svx__whero { margin-top: 9%; width: 56%; }
.svx__wh1, .svx__wh2 { display: block; height: 14px; border-radius: 6px; background: rgba(var(--text-rgb), .6); transform-origin: left; animation: svxGrow 7s cubic-bezier(.22,1,.36,1) infinite; }
.svx__wh2 { width: 70%; margin-top: 9px; animation-delay: .25s; }
.svx__wbtn { display: block; width: 40%; height: 22px; margin-top: 18px; border-radius: 999px; background: var(--c); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 50%, transparent); animation: svxPop 7s ease infinite; animation-delay: .6s; }
.svx__wform { position: absolute; right: 7%; top: 30%; width: 32%; padding: 12px; border-radius: 12px; border: 1px solid var(--l); background: rgba(var(--bg-rgb), .6); display: flex; flex-direction: column; gap: 9px; }
.svx__wf { display: block; height: 16px; border-radius: 5px; border: 1px solid var(--l); overflow: hidden; }
.svx__wf b { display: block; height: 100%; background: rgba(var(--text-rgb), .35); transform-origin: left; transform: scaleX(0); animation: svxType 7s steps(12) infinite; }
.svx__wf:nth-child(2) b { animation-delay: .9s; }
.svx__wsend { height: 18px; border-radius: 999px; background: var(--c); animation: svxPress 7s ease infinite; }
.svx__wcur { position: absolute; width: 22px; color: var(--color-text); filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); left: 30%; top: 70%; animation: svxCursor 7s cubic-bezier(.65,0,.35,1) infinite; }
.svx__toast { position: absolute; right: 7%; bottom: 9%; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #0c0c0e; background: var(--c); box-shadow: 0 0 24px var(--c); opacity: 0; transform: scale(.4); animation: svxToast 7s cubic-bezier(.2,1.6,.4,1) infinite; }
.svx__toast svg { width: 22px; }
@keyframes svxGrow { 0%, 4% { transform: scaleX(0); } 14%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes svxPop { 0%, 10% { transform: scale(0); } 18%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes svxType { 0%, 24% { transform: scaleX(0); } 40%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes svxPress { 0%, 55% { transform: none; filter: none; } 58% { transform: scale(.92); filter: brightness(1.3); } 62%, 100% { transform: none; filter: none; } }
@keyframes svxCursor { 0%, 18% { left: 30%; top: 72%; } 30% { left: 70%; top: 40%; } 50% { left: 70%; top: 52%; } 56%, 60% { left: 80%; top: 64%; } 75%, 100% { left: 30%; top: 72%; } }
@keyframes svxToast { 0%, 60% { opacity: 0; transform: scale(.4); } 66%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.4); } }
/* dashboard: bars rise, a line draws, a ring fills */
.svx__dash { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr auto; gap: 14px; }
.svx__dbars { grid-row: 1 / span 2; display: flex; align-items: flex-end; gap: 8%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--l2); }
.svx__dbars i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 45%, transparent)); transform-origin: bottom; animation: svxBar 6s cubic-bezier(.22,1,.36,1) infinite; }
.svx__dbars i:nth-child(2) { animation-delay: .1s; } .svx__dbars i:nth-child(3) { animation-delay: .2s; } .svx__dbars i:nth-child(4) { animation-delay: .3s; } .svx__dbars i:nth-child(5) { animation-delay: .4s; } .svx__dbars i:nth-child(6) { animation-delay: .5s; }
.svx__dline { width: 100%; height: 100%; min-height: 70px; padding: 8px; border-radius: 12px; border: 1px solid var(--l2); overflow: visible; }
.svx__dline path { fill: none; stroke: var(--c); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; animation: svxDraw 6s ease infinite; filter: drop-shadow(0 0 4px var(--c)); }
.svx__ddonut { position: absolute; right: 9%; bottom: 10%; width: 22%; }
.svx__ddonut circle { fill: none; stroke: var(--l); stroke-width: 6; }
.svx__ddonut .svx__ddarc { stroke: var(--c); stroke-linecap: round; stroke-dasharray: 100; transform: rotate(-90deg); transform-origin: 50% 50%; animation: svxRing 6s ease infinite; }
.svx__dk { display: none; }
@keyframes svxBar { 0%, 4% { transform: scaleY(0); } 22%, 90% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes svxDraw { 0%, 15% { stroke-dashoffset: 100; } 45%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
@keyframes svxRing { 0%, 30% { stroke-dashoffset: 100; } 60%, 90% { stroke-dashoffset: 28; } 100% { stroke-dashoffset: 100; } }
/* ai: a conversation that qualifies and routes */
.svx__ai { display: flex; flex-direction: column; gap: 10px; }
.svx__msg { display: block; height: 22px; width: var(--w, 50%); border-radius: 14px; opacity: 0; transform: translateY(10px); animation: svxMsg 8s ease infinite; }
.svx__msg--in { align-self: flex-start; background: rgba(var(--text-rgb), .16); border-bottom-left-radius: 4px; }
.svx__msg--bot { align-self: flex-end; background: color-mix(in srgb, var(--c) 85%, transparent); border-bottom-right-radius: 4px; }
.svx__typing { width: 56px; display: flex; align-items: center; justify-content: center; gap: 5px; background: rgba(var(--text-rgb), .1); animation-name: svxTyping; animation-delay: .6s; }
.svx__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); animation: svxDots 1s ease infinite; }
.svx__typing i:nth-child(2) { animation-delay: .15s; } .svx__typing i:nth-child(3) { animation-delay: .3s; }
.svx__msg--b1 { animation-delay: 1.8s; } .svx__msg--i2 { animation-delay: 2.8s; } .svx__msg--b2 { animation-delay: 3.8s; }
.svx__route { position: absolute; right: 7%; bottom: 9%; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); color: var(--c); opacity: 0; animation: svxMsg 8s ease infinite; animation-delay: 4.8s; }
.svx__route svg { width: 20px; }
@keyframes svxMsg { 0% { opacity: 0; transform: translateY(10px); } 6%, 80% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes svxTyping { 0% { opacity: 0; } 4%, 13% { opacity: 1; } 16%, 100% { opacity: 0; height: 0; margin: -5px 0; } }
@keyframes svxDots { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }
/* seo: an AI answer lights up and the result climbs to the top */
.svx__seo { display: flex; flex-direction: column; gap: 12px; }
.svx__search { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--l); color: rgba(var(--text-rgb), .6); }
.svx__search svg { width: 18px; }
.svx__search b { height: 8px; width: 40%; border-radius: 4px; background: rgba(var(--text-rgb), .4); transform-origin: left; animation: svxType 7s steps(10) infinite; }
.svx__answer { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); color: var(--c); animation: svxGlow 7s ease infinite; }
.svx__answer svg { width: 18px; flex: none; } .svx__answer i { height: 7px; flex: 1; border-radius: 4px; background: color-mix(in srgb, var(--c) 55%, transparent); } .svx__answer i + i { flex: .6; }
.svx__results { position: relative; height: 120px; }
.svx__res { position: absolute; left: 0; right: 0; height: 32px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--l2); top: calc(var(--o) * 40px); transition: top .8s cubic-bezier(.22,1,.36,1); }
.svx__res i { height: 6px; width: 50%; border-radius: 3px; background: rgba(var(--text-rgb), .3); } .svx__res i + i { width: 75%; background: rgba(var(--text-rgb), .14); }
.svx__res--you { border-color: color-mix(in srgb, var(--c) 70%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--c) 20%, transparent); }
.svx__res--you i { background: var(--c); }
.svx__panel.is-on .svx__res { animation: svxDown 7s cubic-bezier(.22,1,.36,1) infinite; }
.svx__panel.is-on .svx__res--you { animation: svxUp 7s cubic-bezier(.22,1,.36,1) infinite; }
@keyframes svxUp { 0%, 35% { top: 80px; } 55%, 92% { top: 0; } 100% { top: 80px; } }
@keyframes svxDown { 0%, 35% { transform: none; } 55%, 92% { transform: translateY(40px); } 100% { transform: none; } }
@keyframes svxGlow { 0%, 20% { opacity: .35; box-shadow: none; } 30%, 90% { opacity: 1; box-shadow: 0 0 22px color-mix(in srgb, var(--c) 30%, transparent); } 100% { opacity: .35; } }
/* social: posts slide in, a heart pops, a DM arrives */
.svx__feed { display: flex; flex-direction: column; gap: 10px; width: 62%; }
.svx__post { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--l2); opacity: 0; transform: translateY(16px); animation: svxPost 7s cubic-bezier(.22,1,.36,1) infinite; animation-delay: calc(var(--k) * .35s); }
.svx__post i { width: 28px; height: 28px; border-radius: 8px; background: rgba(var(--text-rgb), .16); flex: none; }
.svx__post b { flex: 1; height: 8px; border-radius: 4px; background: rgba(var(--text-rgb), .25); }
.svx__post:first-child i { background: var(--c); }
.svx__heart { position: absolute; left: 52%; top: 26%; width: 38px; color: var(--c); filter: drop-shadow(0 0 10px var(--c)); opacity: 0; animation: svxHeart 7s cubic-bezier(.2,1.6,.4,1) infinite; }
.svx__dm { position: absolute; right: 7%; bottom: 12%; width: 34%; padding: 12px; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--c) 88%, transparent); display: flex; flex-direction: column; gap: 6px; opacity: 0; transform: translateX(30px); animation: svxDm 7s cubic-bezier(.22,1,.36,1) infinite; }
.svx__dm i { height: 7px; border-radius: 4px; background: rgba(12,12,14,.55); } .svx__dm i + i { width: 60%; }
@keyframes svxPost { 0% { opacity: 0; transform: translateY(16px); } 10%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes svxHeart { 0%, 28% { opacity: 0; transform: scale(.3); } 34% { opacity: 1; transform: scale(1.15); } 42%, 52% { opacity: 1; transform: scale(1); } 60%, 100% { opacity: 0; transform: translateY(-20px) scale(.9); } }
@keyframes svxDm { 0%, 50% { opacity: 0; transform: translateX(30px); } 58%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* shop: add to cart, the cart bumps, checkout completes */
.svx__prod { position: absolute; left: 7%; top: 12%; width: 40%; padding: 10px; border-radius: 14px; border: 1px solid var(--l); display: flex; flex-direction: column; gap: 8px; }
.svx__pimg { display: block; aspect-ratio: 4 / 3; border-radius: 9px; background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--c) 70%, transparent), transparent 55%), rgba(var(--text-rgb), .08); }
.svx__prod i { height: 8px; width: 70%; border-radius: 4px; background: rgba(var(--text-rgb), .35); } .svx__prod b { height: 8px; width: 35%; border-radius: 4px; background: var(--c); }
.svx__add { height: 22px; border-radius: 999px; border: 1px solid var(--c); animation: svxAdd 7s ease infinite; }
.svx__cart { position: absolute; right: 12%; top: 16%; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: var(--color-text); border: 1px solid var(--l); animation: svxBump 7s cubic-bezier(.2,1.6,.4,1) infinite; }
.svx__cart svg { width: 26px; }
.svx__badge { position: absolute; right: -2px; top: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); transform: scale(0); animation: svxBadge 7s cubic-bezier(.2,1.6,.4,1) infinite; }
.svx__dot { position: absolute; left: 27%; top: 64%; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); opacity: 0; animation: svxFly 7s cubic-bezier(.45,0,.35,1) infinite; }
.svx__check { position: absolute; right: 7%; bottom: 12%; width: 44%; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: 999px; border: 1px solid var(--l); overflow: hidden; }
.svx__check i { position: relative; z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--text-rgb), .25); }
.svx__check b { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: color-mix(in srgb, var(--c) 30%, transparent); transform-origin: left; transform: scaleX(0); animation: svxCheck 7s cubic-bezier(.22,1,.36,1) infinite; }
@keyframes svxAdd { 0%, 22% { background: transparent; } 25%, 32% { background: var(--c); transform: scale(.94); } 36%, 100% { background: transparent; transform: none; } }
@keyframes svxFly { 0%, 25% { opacity: 0; left: 27%; top: 64%; } 28% { opacity: 1; } 42% { opacity: 1; left: 80%; top: 22%; } 44%, 100% { opacity: 0; left: 80%; top: 22%; } }
@keyframes svxBump { 0%, 42% { transform: none; } 47% { transform: scale(1.18); } 54%, 100% { transform: none; } }
@keyframes svxBadge { 0%, 43% { transform: scale(0); } 50%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes svxCheck { 0%, 55% { transform: scaleX(0); } 85%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
/* tablet / phone */
@media (max-width: 1024px) {
  .svx { grid-template-columns: minmax(0, 1fr); }
  .svx__nav { display: none; }
}
@media (max-width: 767px) {
  .svx__panel { grid-template-columns: minmax(0, 1fr); padding: 64px 0; }
  .svx__screen { aspect-ratio: 4 / 3; }
  .svx__caps li { font-size: 10.5px; padding: 6px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .svx__screen *, .hero--svc .hero__tags::after { animation: none !important; opacity: 1 !important; transform: none !important; }
  .svx__caps li { transition: none; }
}
/* build 2026-10-13zj */

/* ===== Contact: live form (2026-10-13) ===== */
.ct-progress { height: 2px; margin: 0 0 28px; border-radius: 2px; background: rgba(var(--text-rgb), .1); overflow: hidden; }
.ct-progress i { display: block; height: 100%; width: 100%; background: var(--color-accent); box-shadow: 0 0 10px var(--color-accent); transform: scaleX(var(--p, 0)); transform-origin: left center; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.ct-progress.is-full i { animation: ctFull 1.6s ease infinite; }
@keyframes ctFull { 50% { box-shadow: 0 0 18px var(--color-accent), 0 0 30px var(--color-accent); } }
.ct-chips__label { margin: 8px 0 12px; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-dim); }
.ct-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }
.ct-chip { height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid rgba(var(--text-rgb), .16); background: transparent; color: var(--color-text-dim); font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: .03em; cursor: pointer; transition: color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease; }
.ct-chip:hover { color: var(--color-text); border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); transform: translateY(-1px); }
.ct-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ct-chip.is-on { background: var(--color-accent); border-color: var(--color-accent); color: #0c0c0e; box-shadow: 0 0 22px color-mix(in srgb, var(--color-accent) 40%, transparent); }
.ct-chip.is-ping { animation: ctPing 1s ease-out 2; }
@keyframes ctPing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 70%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
.ct-chips.is-error { animation: ctShake .45s ease; }
.ct-chips.is-error .ct-chip { border-color: #ff6b6b; }
@keyframes ctShake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.field.is-hidden-select { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden; opacity: 0; pointer-events: none; clip-path: inset(50%); }
.ct-form .field:focus-within .field__label { color: var(--color-accent); }
.ct-form .field:focus-within .field__line { box-shadow: 0 0 12px var(--color-accent); }
.ct-form.is-sent .ct-form__success-mark { animation: ctMark .7s cubic-bezier(.2,1.6,.4,1) both; box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 60%, transparent); }
.ct-form.is-sent .ct-form__success-mark path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: ctCheck .6s ease .35s forwards; }
@keyframes ctMark { 0% { transform: scale(.3); } 60% { transform: scale(1.12); box-shadow: 0 0 0 18px transparent; } 100% { transform: none; } }
@keyframes ctCheck { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ct-chip.is-ping, .ct-chips.is-error, .ct-progress.is-full i, .ct-form.is-sent .ct-form__success-mark { animation: none; } .ct-form.is-sent .ct-form__success-mark path { animation: none; stroke-dashoffset: 0; } }
/* build 2026-10-13zk */
@media (min-width: 1025px) {
  body[data-page="contact"] .ct-form-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); max-width: none; gap: clamp(48px, 6vw, 110px); align-items: start; }
  body[data-page="contact"] .ct-form-intro { text-align: left; position: sticky; top: 120px; }
  body[data-page="contact"] .ct-form-intro .ct-method__body { margin-left: 0; }
  body[data-page="contact"] .ct-form-intro__alt { justify-content: flex-start; align-items: flex-start; }
}
/* build 2026-10-13zl */
@media (min-width: 1025px) {
  body[data-page="contact"] .ct-form-intro > *, body[data-page="contact"] .ct-form-intro .label { text-align: left; margin-left: 0; margin-right: auto; }
  body[data-page="contact"] .ct-form-intro__alt { display: flex; flex-direction: column; align-items: flex-start; }
}
/* bullet scene: the can bursts into the big yellow paint, the line is stamped in ink (2026-10-13) */
.shot__boom { color: #0c0c0e; text-shadow: none; line-height: .88; transform: translate(-50%, -50%) rotate(-4deg) scale(2.2); }
.shot__boom.is-boom { transform: translate(-50%, -50%) rotate(-4deg) scale(1); }
/* build 2026-10-13zm */
.shot.is-end .shot__stage { opacity: .16; filter: blur(3px) saturate(.6); }
.shot.is-end .shot__end { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(var(--bg-rgb), .82), rgba(var(--bg-rgb), .35) 75%, transparent); transition: background .8s ease; }
/* contact form: the growing underline and the lit label are the focus state; no box outline */
.ct-form .field__input:focus, .ct-form .field__input:focus-visible { outline: none; box-shadow: none; }
.ct-form .field:focus-within .field__line { box-shadow: 0 0 6px color-mix(in srgb, var(--color-accent) 70%, transparent); }
/* build 2026-10-13zn */
/* contact form: the progress bar is the top rule (no second line above it) */
.ct-form-section .ct-form-wrap { border-top: 0; padding-top: 0; }
.ct-form-section .ct-progress { height: 2px; margin: 0 0 38px; background: rgba(var(--text-rgb), .13); }
/* build 2026-10-13zo */

/* ===== Real Estate: one section, a tab per player (2026-10-14) ===== */
.ret { padding: clamp(80px, 10vw, 150px) 0 clamp(70px, 8vw, 120px); }
.ret .section-title { margin: 14px 0 clamp(28px, 3.5vw, 46px); }
.ret__tabs { position: sticky; top: 14px; z-index: 6; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--color-border); background: rgba(var(--bg-rgb), .86); }
@media (min-width: 900px) { .ret__tabs { backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); } }
.ret__tab { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 20px 6px 20px 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--color-text-dim); transition: color .3s ease; }
.ret__tab + .ret__tab { padding-left: 22px; }
.ret__n { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .12em; color: rgba(var(--text-rgb), .35); transition: color .3s ease; }
.ret__tl { font-family: var(--font-display); font-size: clamp(16px, 1.5vw, 22px); font-weight: 600; letter-spacing: -.01em; }
.ret__c { min-width: 30px; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(var(--text-rgb), .14); font-family: var(--font-display); font-size: 11.5px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; transition: background .3s ease, color .3s ease, border-color .3s ease; }
.ret__tab:hover { color: var(--color-text); }
.ret__tab.is-on { color: var(--color-text); }
.ret__tab.is-on .ret__n { color: var(--color-accent); }
.ret__tab.is-on .ret__c { background: var(--color-accent); border-color: var(--color-accent); color: #0c0c0e; }
.ret__tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.ret__ink { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--color-accent); box-shadow: 0 0 10px var(--color-accent); transition: transform .5s cubic-bezier(.22,1,.36,1), width .5s cubic-bezier(.22,1,.36,1); }
.ret__panel { padding-top: clamp(34px, 4vw, 56px); }
.ret__panel[hidden] { display: none; }
.ret__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 90px); align-items: start; margin-bottom: clamp(30px, 3.5vw, 50px); }
.ret__panel.is-on .ret__intro > * { animation: retIn .7s cubic-bezier(.22,1,.36,1) both; }
.ret__panel.is-on .ret__group { animation-delay: .1s; }
@keyframes retIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ret__q { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.02em; color: var(--color-accent); }
.ret__a { margin: 14px 0 0; max-width: 56ch; font-size: 15.5px; line-height: 1.7; color: var(--color-text-dim); text-wrap: pretty; }
.ret__a strong { color: var(--color-text); font-weight: 600; }
.ret__title { margin: 12px 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.4vw, 50px); line-height: 1.04; letter-spacing: -.02em; text-transform: uppercase; color: var(--color-text); }
.ret__lead { margin: 12px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.6; color: var(--color-text-dim); }
/* cards: same treatment as the portfolio */
.ret .work-card { --mx: 50%; --my: 0%; }
.ret .work-card__bar { display: flex; align-items: center; gap: 6px; }
.ret .work-card__url { margin-left: 10px; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-family: var(--font-display); font-size: 10.5px; letter-spacing: .06em; color: var(--color-text-dim); padding: 3px 10px; border-radius: 999px; background: rgba(var(--text-rgb), .05); border: 1px solid rgba(var(--text-rgb), .07); }
.ret .work-card__frame { position: relative; isolation: isolate; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px -34px rgba(0,0,0,.75); }
.ret .work-card__frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; z-index: 3; transition: opacity .4s ease; background: radial-gradient(240px circle at var(--mx) var(--my), var(--color-accent), transparent 65%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.ret .work-card__frame::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .4s ease; background: radial-gradient(320px circle at var(--mx) var(--my), color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 70%); mix-blend-mode: screen; }
@media (hover: hover) { .ret .work-card:hover .work-card__frame::after, .ret .work-card:hover .work-card__frame::before { opacity: 1; } .ret .work-card:hover .work-card__url { color: var(--color-text); } }
.ret .work-card__name { transition: color .25s ease; }
.ret .work-card:hover .work-card__name { color: var(--color-accent); }
@media (max-width: 768px) { .ret .work-card.is-center .work-card__shot img { transform: translateY(var(--shot-end, 0px)); } }
@media (max-width: 899px) {
  .ret__tabs { top: 8px; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
  .ret__tabs::-webkit-scrollbar { display: none; }
  .ret__tab, .ret__tab + .ret__tab { padding: 16px 18px 16px 0; gap: 10px; }
  .ret__tl { font-size: 15px; white-space: nowrap; }
  .ret__intro { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (prefers-reduced-motion: reduce) { .ret__panel.is-on .ret__intro > * { animation: none; } .ret__ink { transition: none; } }
/* build 2026-10-14a */

/* bullet scene: the five-seconds line is the stamp; no end card (2026-10-14) */
.shot__boom { white-space: normal; width: min(84%, 15ch); text-wrap: balance; line-height: .92; }
/* dock: out of the way on the first screen, slides in after scrolling */
.dock { transition: opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1); }
.dock.is-away { opacity: 0 !important; transform: translateX(-50%) translateY(30px) !important; pointer-events: none; }
/* build 2026-10-14b */

/* ===== Booking page: own scheduler for the Blueprint Briefing (2026-10-14) ===== */
.bk-hero { padding: clamp(150px, 16vw, 210px) 0 clamp(30px, 4vw, 50px); text-align: center; }
.bk-hero__title { margin: 18px auto 0; max-width: 16ch; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 6.4vw, 96px); line-height: .98; letter-spacing: -.03em; text-transform: uppercase; color: var(--color-text); }
.bk-hero__sub { margin: 22px auto 0; max-width: 58ch; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.7; color: var(--color-text-dim); text-wrap: pretty; }
.bk { padding: 0 0 clamp(90px, 10vw, 150px); }
.bk-app { position: relative; border-radius: 26px; border: 1px solid rgba(var(--text-rgb), .12); overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 85% 0%, color-mix(in srgb, var(--color-accent) 9%, transparent), transparent 70%), linear-gradient(165deg, rgba(var(--text-rgb), .06), rgba(var(--text-rgb), .015)), rgba(var(--bg-rgb), .7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 50px 100px -50px rgba(0,0,0,.85); }
@media (min-width: 900px) { .bk-app { backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); } }
.bk-app__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 520px; }
.bk-info { padding: clamp(26px, 3vw, 40px); border-right: 1px solid rgba(var(--text-rgb), .1); display: flex; flex-direction: column; gap: 14px; }
.bk-info__eyebrow { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--color-accent); }
.bk-info__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2vw, 28px); line-height: 1.12; letter-spacing: -.02em; color: var(--color-text); }
.bk-info__meta { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bk-info__meta li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--color-text-dim); }
.bk-info__meta svg { width: 19px; height: 19px; flex: none; color: var(--color-accent); }
.bk-tz { width: 100%; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(var(--text-rgb), .16); background: var(--color-bg-2); color: var(--color-text); font: inherit; font-size: 13.5px; cursor: pointer; }
.bk-tz:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.bk-info__pick span { display: block; margin-top: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); color: var(--color-text); font-size: 14px; font-weight: 600; line-height: 1.45; animation: bkIn .45s cubic-bezier(.22,1,.36,1) both; }
.bk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bk-stage { position: relative; min-width: 0; }
.bk-pane { display: none; padding: clamp(24px, 3vw, 40px); }
.bk-pane.is-on { display: block; animation: bkIn .5s cubic-bezier(.22,1,.36,1) both; }
.bk-pane--pick.is-on { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: clamp(22px, 3vw, 44px); }
@keyframes bkIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.bk-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.bk-cal__month { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -.01em; color: var(--color-text); }
.bk-nav { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(var(--text-rgb), .14); background: none; color: var(--color-text); cursor: pointer; transition: background .25s ease, border-color .25s ease, opacity .25s ease; }
.bk-nav svg { width: 18px; height: 18px; }
.bk-nav:hover:not(:disabled) { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.bk-nav:disabled { opacity: .3; cursor: default; }
.bk-cal__dow, .bk-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bk-cal__dow span { text-align: center; font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .14em; color: rgba(var(--text-rgb), .4); padding-bottom: 8px; }
.bk-day { position: relative; aspect-ratio: 1; max-height: 56px; display: grid; place-items: center; border-radius: 14px; border: 1px solid transparent; background: none; color: rgba(var(--text-rgb), .25); font-family: var(--font-display); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: default; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.bk-day--pad { border: 0; }
.bk-day.is-open { color: var(--color-text); border-color: color-mix(in srgb, var(--color-accent) 38%, transparent); background: color-mix(in srgb, var(--color-accent) 7%, transparent); cursor: pointer; }
.bk-day.is-open:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.bk-day.is-sel { background: var(--color-accent); border-color: var(--color-accent); color: #0c0c0e; box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 40%, transparent); }
.bk-day.is-today::after { content: ''; position: absolute; bottom: 7px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; opacity: .8; }
.bk-day:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.bk-cal__grid.is-in .bk-day { animation: bkDay .45s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--k, 0) * 22ms); }
@keyframes bkDay { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.bk-times { display: flex; flex-direction: column; min-width: 0; }
.bk-times__day { margin: 6px 0 16px; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--color-text); }
.bk-times__list { display: flex; flex-direction: column; gap: 8px; max-height: 400px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.bk-slot { flex: none; height: 46px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--color-accent) 50%, transparent); background: none; color: var(--color-accent); font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: .02em; cursor: pointer; animation: bkIn .4s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 28ms); transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.bk-slot:hover, .bk-slot:focus-visible { background: var(--color-accent); color: #0c0c0e; box-shadow: 0 0 20px color-mix(in srgb, var(--color-accent) 35%, transparent); outline: none; }
.bk-empty { margin: 0; font-size: 14px; color: var(--color-text-dim); }
.bk-app.is-loading .bk-cal__grid, .bk-app.is-loading .bk-times__list { opacity: .35; transition: opacity .2s ease; }
/* form */
.bk-back { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--color-text-dim); font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.bk-back svg { width: 16px; height: 16px; }
.bk-back:hover { color: var(--color-accent); }
.bk-form__when, .bk-done__when { margin: 20px 0 26px; display: flex; flex-direction: column; gap: 4px; }
.bk-form__when b, .bk-done__when b { font-family: var(--font-display); font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; letter-spacing: -.01em; color: var(--color-text); }
.bk-form__when span, .bk-done__when span { font-size: 13.5px; color: var(--color-text-dim); }
.bk-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bk-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.bk-field span { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-dim); }
.bk-field input { height: 50px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(var(--text-rgb), .16); background: var(--color-bg-2); color: var(--color-text); font: inherit; font-size: 16px; transition: border-color .2s ease, box-shadow .2s ease; }
.bk-field input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent); }
.bk-field input.is-bad { border-color: #ff6b6b; }
.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bk-form__err { min-height: 1.4em; margin: 0 0 14px; color: #ff6b6b; font-size: 14px; }
.bk-submit.is-busy { opacity: .7; pointer-events: none; }
/* done */
.bk-pane--done { text-align: center; padding-top: clamp(40px, 5vw, 70px); padding-bottom: clamp(40px, 5vw, 70px); }
.bk-pane--done .bk-done__when { align-items: center; }
.bk-done__mark { display: inline-grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--color-accent); color: #0c0c0e; box-shadow: 0 0 40px color-mix(in srgb, var(--color-accent) 45%, transparent); animation: bkMark .7s cubic-bezier(.2,1.6,.4,1) both; }
.bk-done__mark svg { width: 34px; height: 34px; }
.bk-done__mark path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: bkCheck .55s ease .35s forwards; }
@keyframes bkMark { from { transform: scale(.3); } to { transform: none; } }
@keyframes bkCheck { to { stroke-dashoffset: 0; } }
.bk-done__title { margin: 22px 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -.02em; text-transform: uppercase; color: var(--color-text); }
.bk-done__note { margin: 18px auto 0; max-width: 44ch; font-size: 14.5px; color: var(--color-text-dim); }
.bk-noscript { padding: 30px; color: var(--color-text-dim); }
/* tablet / phone */
@media (max-width: 1080px) {
  .bk-app__grid { grid-template-columns: minmax(0, 1fr); }
  .bk-info { border-right: 0; border-bottom: 1px solid rgba(var(--text-rgb), .1); }
  .bk-info__meta { flex-direction: row; flex-wrap: wrap; gap: 12px 22px; }
  .bk-info__tz { flex-basis: 100%; }
}
@media (max-width: 760px) {
  .bk-pane--pick.is-on { grid-template-columns: minmax(0, 1fr); }
  .bk-times__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: none; overflow: visible; padding-right: 0; }
  .bk-slot { height: 44px; font-size: 14px; }
  .bk-form__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bk-day { border-radius: 10px; font-size: 14px; }
  .bk-app { border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) { .bk-pane.is-on, .bk-cal__grid.is-in .bk-day, .bk-slot, .bk-done__mark, .bk-info__pick span { animation: none; } .bk-done__mark path { animation: none; stroke-dashoffset: 0; } }
/* build 2026-10-14c */

/* booking: manage a booking from the email link (2026-10-14) */
.bk-pane--manage, .bk-pane--resched { max-width: 640px; }
.bk-manage__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bk-manage__actions[hidden] { display: none; }
.bk-cancel-go.is-armed { border-color: #ff6b6b; color: #ff6b6b; }
.bk-manage__new { display: inline-block; margin-top: 8px; color: var(--color-accent); font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.bk-manage__new[hidden] { display: none; }
.bk-pane--resched .bk-back { margin-bottom: 18px; }
/* build 2026-10-14d */

/* bullet scene: 5-second clock + line above the frame, brand in the paint, loops (2026-10-14) */
.shot__head { width: var(--container); margin: 0 auto clamp(26px, 3vw, 46px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 3.6vw, 64px); align-items: center; }
.shot__clock { position: relative; width: clamp(118px, 11vw, 172px); aspect-ratio: 1; }
.shot__clock svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.shot__ctrack { fill: none; stroke: rgba(var(--text-rgb), .1); stroke-width: 4; }
.shot__arc { fill: none; stroke: var(--color-accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px var(--color-accent)); }
.shot__num { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 14%; font-family: var(--font-display); font-weight: 700; font-size: clamp(46px, 4.6vw, 76px); line-height: 1; letter-spacing: -.04em; color: var(--color-text); font-variant-numeric: tabular-nums; }
.shot__num.is-tick { animation: shotTick .5s cubic-bezier(.22,1,.36,1); }
@keyframes shotTick { from { transform: scale(1.18); opacity: .55; } to { transform: none; opacity: 1; } }
.shot__unit { position: absolute; left: 0; right: 0; bottom: 25%; text-align: center; font-family: var(--font-display); font-size: 10.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--color-text-dim); }
.shot__clock.is-zero .shot__num { color: var(--color-accent); text-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 55%, transparent); }
.shot__line { margin: 0; max-width: 21ch; font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.7vw, 60px); line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.shot__w { color: rgba(var(--text-rgb), .18); transition: color .45s ease, text-shadow .45s ease; }
.shot__w.is-lit { color: var(--color-text); }
.shot__w--acc.is-lit { color: var(--color-accent); text-shadow: 0 0 26px color-mix(in srgb, var(--color-accent) 45%, transparent); }
.shot__boom { width: auto; white-space: nowrap; line-height: .9; letter-spacing: -.03em; }
.shot__boom b { display: block; margin-top: .45em; font-size: .19em; font-weight: 700; letter-spacing: .2em; }
@media (max-width: 767px) {
  .shot__head { grid-template-columns: 92px minmax(0, 1fr); gap: 18px; }
  .shot__clock { width: 92px; }
  .shot__num { font-size: 38px; }
  .shot__unit { font-size: 8.5px; bottom: 23%; }
  .shot__line { font-size: clamp(21px, 6.2vw, 30px); }
}
@media (prefers-reduced-motion: reduce) { .shot__w { transition: none; } .shot__num.is-tick { animation: none; } }
/* build 2026-10-14e */

/* bullet scene: portfolio-style wall of live sites inside the frame (2026-10-14) */
.shot__frame > .pfm--shot { z-index: 0; border-radius: inherit; }
.shot__frame > .shot__stage { z-index: 1; }
.pfm--shot .pfm__tile img { opacity: .55; }
.pfm--shot .pfm__veil { background: radial-gradient(ellipse 75% 75% at 62% 50%, rgba(var(--bg-rgb), .66) 0%, rgba(var(--bg-rgb), .8) 55%, rgba(var(--bg-rgb), .93) 100%); }
@media (max-width: 767px) { .pfm--shot .pfm__plane { width: 300%; } .pfm--shot .pfm__veil { background: rgba(var(--bg-rgb), .8); } }
/* build 2026-10-14f */

/* booking done: Google Calendar + WhatsApp side by side (2026-10-14) */
.bk-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 520px) { .bk-done__actions { flex-direction: column; align-items: stretch; } .bk-done__actions .btn { justify-content: center; } }
/* build 2026-10-14g */

/* ===== Five seconds scene v3: clock + line in the frame, at zero a real client site is blasted together (2026-10-14) ===== */
.shot__frame { container-type: inline-size; }
.shot__center { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: center; gap: clamp(20px, 4cqw, 56px); padding: 0 clamp(26px, 8cqw, 110px); transition: opacity .45s ease, transform .7s cubic-bezier(.22,1,.36,1), filter .45s ease; }
.shot__center::before { content: ''; position: absolute; inset: 8% 4%; z-index: -1; background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(var(--bg-rgb), .82), rgba(var(--bg-rgb), 0) 72%); pointer-events: none; }
.shot__center .shot__clock { width: clamp(100px, 15cqw, 190px); }
.shot__center .shot__num { font-size: clamp(40px, 6.4cqw, 84px); }
.shot__center .shot__line { max-width: 18ch; font-size: clamp(24px, 5cqw, 66px); text-shadow: 0 2px 24px rgba(var(--bg-rgb), .9); }
.shot__center .shot__w { color: rgba(var(--text-rgb), .3); }
.shot__center .shot__w.is-lit { color: var(--color-text); }
.shot__center .shot__w--acc.is-lit { color: var(--color-accent); }
/* darker wall so the line reads */
.pfm--shot .pfm__tile img { opacity: .4; }
.pfm--shot .pfm__veil { background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(var(--bg-rgb), .84) 0%, rgba(var(--bg-rgb), .88) 55%, rgba(var(--bg-rgb), .95) 100%); }
.shot.is-build .shot__center { opacity: 0; transform: scale(.88); filter: blur(8px); }
/* the wall is sucked into the centre */
.pfm--shot .pfm__plane { transition: transform 1s cubic-bezier(.22,1,.36,1), opacity .7s ease; }
.shot.is-build .pfm--shot .pfm__plane { transform: translate(-50%, -50%) rotateX(0deg) rotateZ(0deg) scale(.04); opacity: 0; transition: transform .8s cubic-bezier(.65,0,.9,.35), opacity .45s ease .3s; }
/* explosion: flash, two shock rings, sparks (canvas) */
.shot__fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; border-radius: inherit; }
.shot__sparks { position: absolute; inset: 0; width: 100%; height: 100%; }
.shot__flash { position: absolute; left: 50%; top: 50%; width: 120cqw; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.2); border-radius: 50%; background: radial-gradient(circle, rgba(255,250,230,1) 0%, rgba(242,194,0,.85) 14%, rgba(242,194,0,.25) 34%, rgba(242,194,0,0) 60%); opacity: 0; mix-blend-mode: screen; }
.shot.is-bang .shot__flash { animation: sxFlash .75s cubic-bezier(.2,.8,.3,1) both; }
@keyframes sxFlash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
.shot__wave { position: absolute; left: 50%; top: 50%; width: 30cqw; aspect-ratio: 1; border-radius: 50%; border: 3px solid #f2c200; box-shadow: 0 0 30px rgba(242,194,0,.8), inset 0 0 30px rgba(242,194,0,.5); transform: translate(-50%, -50%) scale(0); opacity: 0; }
.shot.is-bang .shot__wave { animation: sxWave .9s cubic-bezier(.1,.7,.3,1) both; }
.shot.is-bang .shot__wave--2 { animation-delay: .12s; animation-duration: 1.15s; border-width: 1px; }
@keyframes sxWave { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(4.4); } }
/* the real site */
.shot__site { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; }
.shot__win { position: relative; width: min(80%, 820px); aspect-ratio: 16 / 10; display: flex; flex-direction: column; border-radius: 16px; opacity: 0; }
.shot__win::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #0c0c0e; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 0 0 1px rgba(242,194,0,.2), 0 40px 90px -30px rgba(0,0,0,.9), 0 0 80px rgba(242,194,0,.2); opacity: 0; }
.shot.is-bang .shot__win { opacity: 1; }
.shot.is-bang .shot__win::before { animation: sxShell .6s ease 1.05s both; }
@keyframes sxShell { from { opacity: 0; } to { opacity: 1; } }
.shot.is-out .shot__win::before, .shot.is-out .shot__bar { transition: opacity .35s ease; opacity: 0 !important; animation: none; }
.shot__bar { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 6px; height: clamp(22px, 4cqw, 34px); padding: 0 12px; border-radius: 16px 16px 0 0; background: #17171a; border-bottom: 1px solid rgba(255,255,255,.08); opacity: 0; }
.shot.is-bang .shot__bar { animation: sxShell .45s ease 1.15s both; }
.shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); }
.shot__bar i:first-child { background: #f2c200; }
.shot__bar em { margin-left: 10px; padding: 2px 12px; border-radius: 999px; background: rgba(255,255,255,.06); font-style: normal; font-family: var(--font-display); font-size: clamp(9px, 1.3cqw, 12px); letter-spacing: .06em; color: rgba(244,242,234,.75); }
.shot__view { position: relative; z-index: 1; flex: 1; }
.shot__img { position: absolute; inset: 0; border-radius: 0 0 16px 16px; background: #0c0c0e no-repeat 0 0 / 102.5% auto; opacity: 0; }
.shot.is-whole .shot__img { opacity: 1; }
.shot.is-scroll .shot__img { background-position: 0 100%; transition: background-position 3.4s cubic-bezier(.45,0,.3,1) .25s; }
.shot__tiles { position: absolute; inset: 0; }
.shot__tiles i { position: absolute; background-repeat: no-repeat; opacity: 0; will-change: transform; }
.shot.is-whole .shot__tiles { visibility: hidden; }
.shot.is-still .shot__win, .shot.is-still .shot__win::before, .shot.is-still .shot__bar { opacity: 1 !important; animation: none !important; }
.shot.is-still .shot__fx { display: none; }
@media (max-width: 767px) {
  .shot__center { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 18px; padding: 0 22px; }
  .shot__center .shot__clock { width: 110px; }
  .shot__center .shot__num { font-size: 44px; }
  .shot__center .shot__line { font-size: clamp(22px, 7cqw, 32px); }
  .shot__win { width: 88%; aspect-ratio: 4 / 5; }
  .pfm--shot .pfm__veil { background: rgba(var(--bg-rgb), .88); }
}
@media (prefers-reduced-motion: reduce) { .shot__center, .pfm--shot .pfm__plane { transition: none; } }
/* build 2026-10-14i */

/* ===================== Web Development v2 (wdx-*) — one visual idea per section (2026-10-14) ===================== */
.wdx { position: relative; padding: clamp(84px, 10vw, 150px) 0; overflow: clip; }
.wdx .section-intro { max-width: 62ch; }
.wdx-head { max-width: 920px; margin-bottom: clamp(40px, 5vw, 70px); }
.wdx h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
.wdx-note { margin-top: 40px; color: var(--color-text-dim); font-size: 16px; max-width: 62ch; }
.wdx-close { margin-top: 56px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; max-width: 70ch; }
.wdx:nth-of-type(even) { background: var(--color-bg-2); }
.wdx .reveal { transition-duration: .9s; }
/* scroll progress helper: --p for each item from the section's --rp and its own --t */
.wdx.is-ride [style*="--t"] { --p: clamp(0, calc((var(--rp, 0) - var(--t, 0)) * 6), 1); }

/* ---------- HERO: a page blueprint draws itself behind the headline ---------- */
#top .wdx-bp { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 85%); }
#top .hero__content { position: relative; z-index: 2; }
.wdx-bp__svg { position: absolute; inset: -4%; width: 108%; height: 108%; transform: translate3d(calc(var(--gx, 0) * -14px), calc(var(--gy, 0) * -10px), 0); transition: transform .6s var(--ease); }
.wdx-bp__draw > *, .wdx-bp__dims > * { fill: none; stroke: rgba(var(--text-rgb), .1); stroke-width: 1.2; stroke-dasharray: 100; stroke-dashoffset: 100; animation: bpDraw 1.6s var(--ease) forwards; animation-delay: calc(.5s + var(--d, 0) * 1s); }
.wdx-bp__dims > * { stroke: rgba(242,194,0,.45); stroke-width: 1; }
.wdx-bp__draw rect:nth-of-type(5) { stroke: rgba(242,194,0,.5); }
@keyframes bpDraw { to { stroke-dashoffset: 0; } }
.wdx-bp__labels text { font-family: var(--font-display); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; fill: rgba(242,194,0,.75); opacity: 0; animation: bpFade .8s ease forwards; animation-delay: calc(.6s + var(--d, 0) * 1s); }
@keyframes bpFade { to { opacity: 1; } }
.wdx-bp__scan { fill: rgba(242,194,0,.32); opacity: 0; animation: bpScan 5.5s cubic-bezier(.45,0,.55,1) 2.6s infinite; }
@keyframes bpScan { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: .9; } 85% { opacity: .9; } 100% { transform: translateY(558px); opacity: 0; } }
.wdx-bp__grid { stroke: rgba(var(--text-rgb), .035); }
@media (max-width: 768px) { #top .wdx-bp { opacity: .55; } .wdx-bp__labels { display: none; } }

/* ---------- PROBLEM: a leak line runs down the rows ---------- */
.wdx-leak__list { list-style: none; margin: 0; padding: 0 0 0 clamp(28px, 4vw, 64px); position: relative; }
.wdx-leak__list::before, .wdx-leak__list::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--color-border); }
.wdx-leak__list::after { background: linear-gradient(var(--color-accent), rgba(242,194,0,.2)); box-shadow: 0 0 14px rgba(242,194,0,.5); transform-origin: top; transform: scaleY(1); }
.wdx.is-ride .wdx-leak__list::after { transform: scaleY(clamp(0, calc(var(--rp, 0) * 2.1 - .1), 1)); }
.wdx-leak__row { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.6fr); gap: 32px; align-items: baseline; padding: 30px 0; border-bottom: 1px solid var(--color-border); transition: opacity .35s ease, padding-left .4s var(--ease); }
.wdx-leak__row::before { content: ''; position: absolute; left: calc(-1 * clamp(28px, 4vw, 64px) - 5px); top: 38px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-bg); border: 2px solid var(--color-accent); box-shadow: 0 0 12px rgba(242,194,0,.6); }
.wdx.is-ride .wdx-leak__row { opacity: calc(.25 + var(--p) * .75); transform: translateX(calc((1 - var(--p)) * 30px)); }
.wdx.is-ride .wdx-leak__row::before { transform: scale(var(--p)); }
.wdx-leak__i { font-family: var(--font-display); font-size: 12px; letter-spacing: .2em; color: var(--color-text-dim); }
.wdx-leak__k { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2vw, 28px); letter-spacing: -.015em; line-height: 1.15; transition: color .25s ease; }
.wdx-leak__row p { margin: 0; color: var(--color-text-dim); font-size: 16.5px; line-height: 1.6; max-width: 58ch; }
.wdx-leak__row p::before { content: '\2192  '; color: var(--color-accent); }
.wdx-leak__list:hover .wdx-leak__row:not(:hover) { opacity: .35; }
.wdx-leak__row:hover { padding-left: 14px; }
.wdx-leak__row:hover .wdx-leak__k { color: var(--color-accent); }
.wdx-leak__close { margin: 64px 0 0 auto; max-width: 30ch; font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 34px); line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
.wdx-leak__close b { color: var(--color-accent); font-weight: 600; }

/* ---------- APPROACH: four lines converge into one point ---------- */
.wdx-merge__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.wdx-merge__col { position: relative; padding-top: 26px; border-top: 1px solid var(--color-border); transition: opacity .35s ease; }
.wdx-merge__cols:hover .wdx-merge__col:not(:hover) { opacity: .4; }
.wdx-merge__n { position: absolute; right: 0; top: -4px; font-family: var(--font-display); font-weight: 700; font-size: 110px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(var(--text-rgb), .16); transition: -webkit-text-stroke-color .3s ease; pointer-events: none; }
.wdx-merge__col:hover .wdx-merge__n { -webkit-text-stroke-color: var(--color-accent); }
.wdx-merge__col h3 { font-size: clamp(20px, 1.8vw, 26px); margin: 0 0 12px; }
.wdx-merge__col p { margin: 0; color: var(--color-text-dim); font-size: 16px; line-height: 1.6; max-width: 32ch; }
.wdx-merge__lines { display: block; width: 100%; height: clamp(120px, 14vw, 220px); margin-top: 26px; overflow: visible; }
.wdx-merge__lines path { fill: none; stroke: var(--color-accent); stroke-width: 1.5; vector-effect: none; stroke-dasharray: 100; stroke-dashoffset: 0; opacity: .7; filter: drop-shadow(0 0 4px rgba(242,194,0,.6)); }
.wdx.is-ride .wdx-merge__lines path { stroke-dashoffset: calc(100 - clamp(0, calc((var(--rp, 0) - .3) * 3.2), 1) * 100); }
.wdx-merge__point { width: 18px; height: 18px; margin: -9px auto 0; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 8px rgba(242,194,0,.14), 0 0 40px rgba(242,194,0,.8); }
.wdx.is-ride .wdx-merge__point { transform: scale(clamp(0, calc((var(--rp, 0) - .55) * 6), 1)); }
.wdx-merge__close { margin: 28px auto 0; max-width: 34ch; text-align: center; font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 34px); line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
.wdx-merge__close b { color: var(--color-accent); font-weight: 600; }

/* ---------- 01 CUSTOM: editor + code lines ---------- */
.wdx-code__split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.wdx-code__ways { display: flex; flex-direction: column; border-top: 1px solid var(--color-border); }
.wdx-code__way { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 26px 0; border: 0; border-bottom: 1px solid var(--color-border); background: none; color: var(--color-text-dim); text-align: left; cursor: pointer; font-family: var(--font-display); font-size: clamp(19px, 1.8vw, 26px); font-weight: 600; letter-spacing: -.01em; transition: color .3s ease; }
.wdx-code__way:hover, .wdx-code__way.is-on { color: var(--color-text); }
.wdx-code__way:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.wdx-code__wn { font-size: 12px; letter-spacing: .2em; color: var(--color-accent); }
.wdx-code__bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 10px rgba(242,194,0,.7); }
.wdx-code__way.is-on .wdx-code__bar { animation: wdxBar var(--wdx-dwell, 6s) linear forwards; }
.wdx-code.is-paused .wdx-code__way.is-on .wdx-code__bar { animation-play-state: paused; }
@keyframes wdxBar { to { transform: scaleX(1); } }
.wdx-code__ed { position: relative; border-radius: 14px; background: #0a0a0c; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 80px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(242,194,0,.08); padding: 54px clamp(22px, 3vw, 40px) 40px; min-height: 280px; overflow: hidden; color: #f4f2ea; }
.wdx-code__ed::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 85% 0%, rgba(242,194,0,.12), transparent 70%); pointer-events: none; }
.wdx-code__top { position: absolute; left: 0; right: 0; top: 0; height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02); }
.wdx-code__top i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.wdx-code__top i:first-child { background: #f2c200; }
.wdx-code__pane { position: relative; z-index: 1; }
.wdx-code__pane.is-on { animation: wdxPane .55s var(--ease) both; }
@keyframes wdxPane { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.wdx-code__c { margin: 0 0 18px; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 14px; letter-spacing: .02em; color: #f2c200; }
.wdx-code__txt { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2.3vw, 34px); line-height: 1.3; letter-spacing: -.015em; }
.wdx-code__txt .wdx-ch { opacity: 0; transition: opacity .08s linear; }
.wdx-code__txt .wdx-ch.is-in { opacity: 1; }
.wdx-code__txt::after { content: ''; display: inline-block; width: .5em; height: .95em; margin-left: 4px; vertical-align: -.1em; background: #f2c200; animation: wdxCaret 1s steps(1) infinite; }
@keyframes wdxCaret { 50% { opacity: 0; } }
.wdx-code__lines { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; border-top: 1px solid var(--color-border); counter-reset: none; }
.wdx-code__lines li { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.6fr); gap: 32px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--color-border); transition: background .3s ease; }
.wdx-code__lines li:hover { background: linear-gradient(90deg, rgba(242,194,0,.07), transparent 70%); }
.wdx-code__ln { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 13px; color: var(--color-text-dim); }
.wdx-code__k { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 1.6vw, 22px); }
.wdx-code__k::before { content: '{ '; color: var(--color-accent); font-weight: 400; }
.wdx-code__k::after { content: ' }'; color: var(--color-accent); font-weight: 400; }
.wdx-code__lines p { margin: 0; color: var(--color-text-dim); font-size: 16px; line-height: 1.6; }

/* ---------- 02 CONVERSION: journey path ---------- */
.wdx-path__cap { position: relative; margin: 0 0 clamp(40px, 5vw, 70px); max-width: 860px; padding-left: 30px; border-left: 4px solid var(--color-accent); }
.wdx-path__tag { display: block; margin-bottom: 14px; font-family: var(--font-display); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--color-accent); }
.wdx-path__cap p { margin: 0; font-family: var(--font-display); font-size: clamp(20px, 2.1vw, 30px); line-height: 1.35; letter-spacing: -.01em; }
.wdx-path__cap em { font-style: normal; color: var(--color-accent); }
.wdx-path__map { position: relative; padding-top: 30px; }
.wdx-path__svg { display: block; width: 100%; height: 160px; overflow: visible; }
.wdx-path__track { fill: none; stroke: var(--color-border); stroke-width: 2; stroke-dasharray: 4 8; }
.wdx-path__fill { fill: none; stroke: var(--color-accent); stroke-width: 2.5; stroke-dasharray: 100; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px rgba(242,194,0,.7)); }
.wdx.is-ride .wdx-path__fill { stroke-dashoffset: calc(100 - var(--pp, 1) * 100); }
.wdx-path__dot { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 7px rgba(242,194,0,.16), 0 0 30px rgba(242,194,0,.9); transform: translate(var(--dx, 0px), var(--dy, 0px)); display: none; }
.wdx.is-ride .wdx-path__dot { display: block; }
.wdx-path__end { position: absolute; top: 0; font-family: var(--font-display); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--color-text-dim); }
.wdx-path__end--a { left: 0; }
.wdx-path__end--b { right: 0; color: var(--color-accent); }
.wdx-path__stops { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }
.wdx-path__stops li { position: relative; padding-top: 18px; border-top: 1px solid var(--color-border); transition: border-color .4s ease, opacity .4s ease; }
.wdx-path__stops h3 { font-size: clamp(16px, 1.3vw, 19px); margin: 0 0 8px; transition: color .4s ease; }
.wdx-path__stops p { margin: 0; color: var(--color-text-dim); font-size: 14.5px; line-height: 1.55; }
.wdx.is-ride .wdx-path__stops li { opacity: .4; }
.wdx.is-ride .wdx-path__stops li.is-hit { opacity: 1; border-top-color: var(--color-accent); }
.wdx.is-ride .wdx-path__stops li.is-hit h3 { color: var(--color-accent); }

/* ---------- 03 PERFORMANCE: speed dial ---------- */
.wdx-dial__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.wdx-dial__stick { position: sticky; top: calc(var(--topbar-h) + 60px); }
.wdx-dial__gauge { position: relative; width: min(100%, 460px); aspect-ratio: 240 / 160; margin: 0 auto; }
.wdx-dial__gauge svg { width: 100%; height: auto; overflow: visible; }
.wdx-dial__arc { fill: none; stroke: var(--color-border); stroke-width: 14; stroke-linecap: round; }
.wdx-dial__arcon { fill: none; stroke: var(--color-accent); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--dv, 0) * 100); transition: stroke-dashoffset .8s var(--ease); filter: drop-shadow(0 0 10px rgba(242,194,0,.6)); }
.wdx-dial__ticks line { stroke: rgba(var(--text-rgb), .35); stroke-width: 2; }
.wdx-dial__ticks line.is-on { stroke: var(--color-accent); }
.wdx-dial__needle { position: absolute; left: 50%; top: 81.25%; width: 36%; height: 4px; margin-top: -2px; border-radius: 4px; background: linear-gradient(90deg, rgba(242,194,0,.15), var(--color-accent)); transform-origin: 0 50%; transform: rotate(calc(-180deg + var(--dv, 0) * 180deg)); transition: transform .9s cubic-bezier(.3,1.5,.5,1); box-shadow: 0 0 14px rgba(242,194,0,.6); }
.wdx-dial__needle::before { content: ''; position: absolute; left: -9px; top: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-accent); }
.wdx-dial__now { position: absolute; left: 0; right: 0; top: 90%; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5vw, 68px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.wdx-dial__name { position: absolute; left: 0; right: 0; top: calc(90% + clamp(50px, 5.6vw, 78px)); text-align: center; font-family: var(--font-display); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--color-accent); }
.wdx-dial__steps { list-style: none; margin: 0; padding: 0; }
.wdx-dial__step { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 18px; padding: clamp(26px, 4vh, 48px) 0; border-bottom: 1px solid var(--color-border); opacity: .38; transition: opacity .45s ease; }
.wdx-dial__step.is-on { opacity: 1; }
.wdx-dial__n { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--color-accent); transition: color .4s ease; }
.wdx-dial__step.is-on .wdx-dial__n { color: var(--color-accent); }
.wdx-dial__step h3 { font-size: clamp(20px, 1.8vw, 26px); margin: 4px 0 8px; }
.wdx-dial__step p { margin: 0; color: var(--color-text-dim); font-size: 16px; line-height: 1.6; }

/* ---------- 04 DISCOVERABILITY: one source, three beams ---------- */
.wdx-beam__stage { position: relative; }
.wdx-beam__src { width: 86px; height: 86px; margin: 0 auto; border-radius: 22px; display: grid; place-items: center; background: var(--color-accent); color: #0c0c0e; font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; font-size: 24px; box-shadow: 0 0 0 10px rgba(242,194,0,.1), 0 0 60px rgba(242,194,0,.5); position: relative; z-index: 1; }
.wdx-beam__svg { display: block; width: 100%; height: clamp(110px, 12vw, 180px); overflow: visible; }
.wdx-beam__ray { fill: none; stroke: rgba(242,194,0,.5); stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: 0; }
.wdx.is-ride .wdx-beam__ray { stroke-dashoffset: calc(100 - clamp(0, calc((var(--rp, 0) - .22) * 4), 1) * 100); }
.wdx-beam__pulse { fill: none; stroke: #fff6cc; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 94; stroke-dashoffset: 100; animation: wdxPulse 2.4s linear infinite; }
.wdx-beam__pulse:nth-of-type(5) { animation-delay: .5s; }
.wdx-beam__pulse:nth-of-type(6) { animation-delay: 1s; }
@keyframes wdxPulse { to { stroke-dashoffset: 0; } }
.wdx-beam__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.wdx-beam__col { position: relative; text-align: center; padding: 0 8px; }
.wdx-beam__k { display: inline-grid; place-items: center; min-width: 64px; height: 64px; padding: 0 12px; margin-bottom: 20px; border-radius: 50%; border: 1px solid rgba(242,194,0,.6); font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--color-accent); background: var(--color-bg); transition: background .3s ease, color .3s ease, box-shadow .3s ease; }
.wdx-beam__col:hover .wdx-beam__k { background: var(--color-accent); color: #0c0c0e; box-shadow: 0 0 30px rgba(242,194,0,.6); }
.wdx-beam__col h3 { font-size: clamp(20px, 1.8vw, 26px); margin: 0 0 12px; }
.wdx-beam__col p { margin: 0 auto; color: var(--color-text-dim); font-size: 16px; line-height: 1.6; max-width: 36ch; }
.wdx-beam .wdx-close { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- 05 INTEGRATIONS: orbit + event log ---------- */
.wdx-orbit__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 4vw, 70px); align-items: center; }
.wdx-orbit__sys { position: relative; aspect-ratio: 1; width: min(100%, 640px); margin: 0 auto; }
.wdx-orbit__sys::before, .wdx-orbit__sys::after { content: ''; position: absolute; border-radius: 50%; border: 1px dashed rgba(var(--text-rgb), .14); }
.wdx-orbit__sys::before { inset: 4%; }
.wdx-orbit__sys::after { inset: 15%; border-style: solid; border-color: rgba(242,194,0,.18); }
.wdx-orbit__core { position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; text-align: center; background: radial-gradient(circle, rgba(242,194,0,.95), #c99f00); color: #0c0c0e; font-family: var(--font-display); font-weight: 700; font-size: clamp(12px, 1.3vw, 17px); letter-spacing: .14em; line-height: 1.25; box-shadow: 0 0 0 12px rgba(242,194,0,.1), 0 0 80px rgba(242,194,0,.45); z-index: 2; }
.wdx-orbit__core::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid rgba(242,194,0,.6); animation: wdxPing 2.6s ease-out infinite; }
@keyframes wdxPing { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.wdx-orbit__list { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; animation: wdxSpin 70s linear infinite; }
.wdx-orbit__sys:hover .wdx-orbit__list, .wdx-orbit__sys:hover .wdx-orbit__list li span { animation-play-state: paused; }
@keyframes wdxSpin { to { transform: rotate(360deg); } }
.wdx-orbit__list li { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); }
.wdx-orbit__list li span { position: absolute; left: 0; top: 0; display: block; width: max-content; max-width: 168px; padding: 8px 13px; transform: translate(-50%, -50%); border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-bg); font-family: var(--font-display); font-size: 12px; line-height: 1.35; letter-spacing: .04em; text-align: center; color: var(--color-text); animation: wdxUnspin 70s linear infinite; transition: border-color .25s ease, color .25s ease, box-shadow .25s ease; }
.wdx-orbit__list li span:hover { border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 0 24px rgba(242,194,0,.35); }
@keyframes wdxUnspin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
.wdx-log { margin-top: clamp(60px, 7vw, 100px); padding-top: 48px; border-top: 1px solid var(--color-border); }
.wdx-log__t { font-size: clamp(20px, 2vw, 28px); line-height: 1.3; letter-spacing: -.015em; max-width: 30ch; margin: 0 0 30px; }
.wdx-log__rows { margin: 0; border-top: 1px solid var(--color-border); max-width: 980px; }
.wdx-log__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; padding: 22px 0 22px 28px; border-bottom: 1px solid var(--color-border); align-items: baseline; }
.wdx-log__row::before { content: ''; position: absolute; left: 0; top: 30px; width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--text-rgb), .2); }
.wdx-log__row::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(242,194,0,.12), transparent 60%); opacity: 0; pointer-events: none; }
.wdx-log__row.is-visible::before { animation: wdxFire 6s ease-in-out infinite; animation-delay: calc(var(--e) * 1.5s); }
.wdx-log__row.is-visible::after { animation: wdxFlash 6s ease-in-out infinite; animation-delay: calc(var(--e) * 1.5s); }
@keyframes wdxFire { 0%, 22%, 100% { background: rgba(var(--text-rgb), .2); box-shadow: none; } 4%, 14% { background: var(--color-accent); box-shadow: 0 0 0 5px rgba(242,194,0,.2), 0 0 14px rgba(242,194,0,.9); } }
@keyframes wdxFlash { 0%, 22%, 100% { opacity: 0; } 4%, 12% { opacity: 1; } }
.wdx-log__row dt { font-family: var(--font-display); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent); display: flex; align-items: baseline; gap: 12px; }
.wdx-log__row dt::after { content: ''; flex: 1; border-bottom: 1px dotted rgba(var(--text-rgb), .28); transform: translateY(-4px); }
.wdx-log__row dd { margin: 0; font-size: 16px; line-height: 1.6; }

/* ---------- INCLUDED: a checklist that ticks itself ---------- */
.wdx-tick__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
.wdx-tick__side { position: sticky; top: calc(var(--topbar-h) + 50px); }
.wdx-tick__meter { margin-top: 40px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wdx-tick__count { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 8vw, 120px); line-height: .9; letter-spacing: -.04em; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.wdx-tick__of { font-family: var(--font-display); font-size: 22px; color: var(--color-text-dim); }
.wdx-tick__bar { flex: 0 0 100%; height: 3px; margin-top: 18px; background: var(--color-border); border-radius: 3px; overflow: hidden; }
.wdx-tick__bar b { display: block; height: 100%; width: calc(var(--tk, 0) * 100%); background: var(--color-accent); box-shadow: 0 0 12px rgba(242,194,0,.8); transition: width .5s var(--ease); }
.wdx-tick__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.wdx-tick__list li { position: relative; padding: 20px 0 20px 46px; border-bottom: 1px solid var(--color-border); font-family: var(--font-display); font-size: clamp(17px, 1.5vw, 21px); color: var(--color-text-dim); transition: color .4s ease, padding-left .4s var(--ease); }
.wdx-tick__list li::before { content: ''; position: absolute; left: 0; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 7px; border: 1.5px solid var(--color-border); transition: border-color .3s ease, background .3s ease; }
.wdx-tick__list li::after { content: ''; position: absolute; left: 8px; top: 50%; width: 6px; height: 12px; margin-top: -8px; border: solid #0c0c0e; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.wdx-tick__list li.is-done { color: var(--color-text); }
.wdx-tick__list li.is-done::before { border-color: var(--color-accent); background: var(--color-accent); box-shadow: 0 0 14px rgba(242,194,0,.5); }
.wdx-tick__list li.is-done::after { transform: rotate(45deg) scale(1); }
.wdx-tick__list li:hover { padding-left: 54px; color: var(--color-accent); }

/* ---------- PROCESS: a filling rail ---------- */
.wdx-rail__list { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 22px; }
.wdx-rail__list::before, .wdx-rail__list::after { content: ''; position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: var(--color-border); }
.wdx-rail__list::after { background: var(--color-accent); box-shadow: 0 0 12px rgba(242,194,0,.7); transform-origin: left; transform: scaleX(1); }
.wdx.is-ride .wdx-rail__list::after { transform: scaleX(clamp(0, calc((var(--rp, 0) - .1) * 1.9), 1)); }
.wdx-rail__list li { position: relative; padding-top: 70px; }
.wdx-rail__n { position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--color-bg); border: 2px solid var(--color-accent); font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--color-accent); transition: background .35s ease, color .35s ease, box-shadow .35s ease; z-index: 1; }
.wdx:nth-of-type(even) .wdx-rail__n { background: var(--color-bg-2); }
.wdx-rail__list li h3 { font-size: clamp(16px, 1.3vw, 19px); margin: 0 0 8px; }
.wdx-rail__list li p { margin: 0; color: var(--color-text-dim); font-size: 14.5px; line-height: 1.55; }
.wdx.is-ride .wdx-rail__list li { opacity: calc(.3 + var(--p) * .7); }
.wdx.is-ride .wdx-rail__list li .wdx-rail__n { background: color-mix(in srgb, var(--color-accent) calc(var(--p) * 100%), var(--color-bg)); color: color-mix(in srgb, #0c0c0e calc(var(--p) * 100%), var(--color-accent)); }

/* ---------- WHY GOSOCIAL: inverted band with a two-way arrow ---------- */
.wdx-both { background: var(--color-accent) !important; color: #0c0c0e; }
.wdx-both .label { color: rgba(12,12,14,.65); }
.wdx-both .section-title, .wdx-both h3 { color: #0c0c0e; }
.wdx-both p { color: rgba(12,12,14,.78); }
.wdx-both__wm { position: absolute; right: -20px; bottom: -70px; font-family: var(--font-display); font-weight: 700; font-size: clamp(180px, 26vw, 360px); line-height: 1; color: rgba(12,12,14,.07); pointer-events: none; user-select: none; }
.wdx-both__arrow { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; margin-bottom: clamp(48px, 6vw, 80px); }
.wdx-both__end { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 2vw, 28px); letter-spacing: -.01em; }
.wdx-both__arrow svg { width: 100%; height: 40px; overflow: visible; }
.wdx-both__arrow path { fill: none; stroke: #0c0c0e; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.wdx-both__ln { stroke-dasharray: 100; stroke-dashoffset: 0; }
.wdx-both__head { transition: opacity .3s ease; }
.wdx.is-ride .wdx-both__head { opacity: clamp(0, calc((var(--rp, 0) - .45) * 8), 1); }
.wdx.is-ride .wdx-both__ln { stroke-dashoffset: calc(100 - clamp(0, calc((var(--rp, 0) - .2) * 3), 1) * 100); }
.wdx-both__mid { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; font-family: var(--font-display); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: rgba(12,12,14,.7); }
.wdx-both__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.wdx-both__cols > div { border-top: 1px solid rgba(12,12,14,.25); padding-top: 18px; }
.wdx-both__cols h3 { font-size: clamp(18px, 1.6vw, 23px); margin: 0 0 10px; }
.wdx-both__cols p { margin: 0; font-size: 16px; line-height: 1.6; }

/* ---------- PROOF: the searches typed out ---------- */
.wdx-serp__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.wdx-serp__item { position: relative; padding-top: 8px; transition: opacity .35s ease; }
.wdx-serp__cols:hover .wdx-serp__item:not(:hover) { opacity: .45; }
.wdx-serp__q { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 20px; margin-bottom: 26px; border-radius: 999px; border: 1px solid var(--color-border); background: rgba(var(--text-rgb), .03); font-size: 15px; color: var(--color-text); overflow: hidden; white-space: nowrap; transition: border-color .3s ease, box-shadow .3s ease; }
.wdx-serp__item:hover .wdx-serp__q { border-color: var(--color-accent); box-shadow: 0 0 30px rgba(242,194,0,.2); }
.wdx-serp__q svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linecap: round; }
.wdx-serp__typed { overflow: hidden; text-overflow: ellipsis; }
.wdx-serp__caret { flex: none; width: 2px; height: 20px; background: var(--color-accent); animation: wdxCaret 1s steps(1) infinite; }
.wdx-serp__item h3 { font-size: clamp(20px, 1.8vw, 26px); margin: 0 0 12px; }
.wdx-serp__item p { margin: 0; color: var(--color-text-dim); font-size: 16px; line-height: 1.6; }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .wdx-rail__list { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 48px; }
  .wdx-rail__list::before, .wdx-rail__list::after { display: none; }
  .wdx-path__stops { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
}
@media (max-width: 1100px) { .wdx-merge__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wdx-merge__lines, .wdx-merge__point { display: none; } .wdx-merge__close { text-align: left; margin-left: 0; margin-top: 48px; } }
@media (max-width: 900px) {
  .wdx-code__split, .wdx-dial__grid, .wdx-orbit__grid, .wdx-tick__grid { grid-template-columns: minmax(0, 1fr); }
  .wdx-dial__stick, .wdx-tick__side { position: static; }
  .wdx-dial__stick { display: none; }
  .wdx-dial__step { opacity: 1; }
  .wdx-dial__step .wdx-dial__n { color: var(--color-accent); }
  .wdx-beam__cols, .wdx-serp__cols, .wdx-both__cols { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .wdx-beam__svg { display: none; }
  .wdx-beam__src { display: none; }
  .wdx-beam__col { text-align: left; padding: 0; }
  .wdx-beam__col p { margin: 0; }
  .wdx-beam .wdx-close { text-align: left; margin-left: 0; }
  .wdx-path__svg, .wdx-path__end, .wdx-path__dot { display: none !important; }
  .wdx-path__map { padding-top: 0; }
  .wdx-orbit__sys { aspect-ratio: auto; width: 100%; }
  .wdx-orbit__sys::before, .wdx-orbit__sys::after, .wdx-orbit__core { display: none; }
  .wdx-orbit__list { position: static; animation: none; display: flex; flex-wrap: wrap; gap: 10px; }
  .wdx-orbit__list li { position: static; width: auto; height: auto; transform: none; }
  .wdx-orbit__list li span { position: static; transform: none; animation: none; max-width: 100%; width: auto; border-radius: 999px; padding: 10px 16px; text-transform: uppercase; font-size: 12px; text-align: left; }
}
@media (max-width: 768px) {
  .wdx { padding: 68px 0; }
  .wdx-leak__list { padding-left: 26px; }
  .wdx-leak__row::before { left: -31px; top: 28px; }
  .wdx-leak__row, .wdx-code__lines li, .wdx-log__row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 20px 0; }
  .wdx-log__row { padding-left: 24px; }
  .wdx-log__row dt::after { display: none; }
  .wdx-leak__close, .wdx-merge__close { margin-left: 0; max-width: none; }
  .wdx-merge__cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .wdx-merge__n { font-size: 72px; top: 0; }
  .wdx-path__stops { grid-template-columns: minmax(0, 1fr); gap: 0; border-left: 2px solid var(--color-accent); padding-left: 22px; }
  .wdx-path__stops li { border-top: 0; padding: 0 0 26px; }
  .wdx-path__stops li::before { content: ''; position: absolute; left: -29px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 10px rgba(242,194,0,.7); }
  .wdx-path__cap { padding-left: 20px; }
  .wdx-dial__step { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 22px 0; }
  .wdx-dial__n { font-size: 36px; }
  .wdx-code__ed { min-height: 0; padding-top: 52px; }
  .wdx-code__way { padding: 20px 0; }
  .wdx-tick__list li { padding-left: 40px; }
  .wdx-rail__list { grid-template-columns: minmax(0, 1fr); row-gap: 0; border-left: 2px solid var(--color-accent); margin-left: 23px; }
  .wdx-rail__list li { padding: 0 0 30px 40px; }
  .wdx-rail__n { left: -25px; top: -6px; }
  .wdx-both__arrow { grid-template-columns: minmax(0, 1fr); gap: 10px; text-align: center; }
  .wdx-both__arrow svg { height: 26px; }
  .wdx-both__mid { position: static; transform: none; white-space: normal; margin-top: 6px; }
  .wdx-both__wm { font-size: 200px; bottom: -50px; }
  .wdx .label { text-wrap: balance; }
}
@media (hover: none) { .wdx-leak__list:hover .wdx-leak__row:not(:hover), .wdx-merge__cols:hover .wdx-merge__col:not(:hover), .wdx-serp__cols:hover .wdx-serp__item:not(:hover) { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .wdx-bp__draw > *, .wdx-bp__dims > * { animation: none; stroke-dashoffset: 0; }
  .wdx-bp__labels text { animation: none; opacity: 1; }
  .wdx-bp__scan, .wdx-beam__pulse, .wdx-orbit__core::after { display: none; }
  .wdx-orbit__list, .wdx-orbit__list li span { animation: none !important; }
  .wdx-log__row::before, .wdx-log__row::after { animation: none !important; }
}
@media (min-width: 901px) { .wdx-tick__side .section-title, .wdx-orbit__grid .section-title { font-size: clamp(34px, 4vw, 62px); } }
#top .wdx-bp::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 46% 42% at 50% 52%, rgba(var(--bg-rgb), .92), rgba(var(--bg-rgb), 0) 100%); }
/* build 2026-10-14j */

/* ===================== SEO, AEO & GEO v2 (sx-*) — shares the wdx base (2026-10-14) ===================== */
.sx-outcome { font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; margin: 22px 0 14px; padding-left: 18px; border-left: 3px solid var(--color-accent); max-width: 60ch; }
.sx-outcome b { color: var(--color-accent); font-weight: 600; }

/* ---------- HERO: three screens behind the three sentences ---------- */
#top .sx-hero { position: absolute; inset: 0; z-index: 0; pointer-events: none; perspective: 1400px; }
#top .hero__content { position: relative; z-index: 2; }
.sx-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 48% 46% at 50% 52%, rgba(var(--bg-rgb), .9), rgba(var(--bg-rgb), 0) 100%); }
.sx-hero__card { position: absolute; width: clamp(220px, 22vw, 340px); aspect-ratio: 4 / 3; border-radius: 16px; border: 1px solid rgba(var(--text-rgb), .1); background: rgba(var(--text-rgb), .025); padding: 18px; display: flex; flex-direction: column; gap: 10px; opacity: .35; transition: opacity .8s ease, border-color .8s ease, box-shadow .8s ease, transform 1.2s var(--ease); transform: translate3d(calc(var(--gx, 0) * var(--k, 10px)), calc(var(--gy, 0) * var(--k, 10px)), 0) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); overflow: hidden; }
.sx-hero__card.is-on { opacity: .95; border-color: rgba(242,194,0,.55); box-shadow: 0 0 60px rgba(242,194,0,.18); }
.sx-hero__card--serp { left: 4%; top: 16%; --ry: 18deg; --rx: 4deg; --k: -18px; }
.sx-hero__card--ai { right: 4%; top: 12%; --ry: -18deg; --rx: 4deg; --k: -12px; }
.sx-hero__card--map { right: 12%; bottom: 8%; --ry: -10deg; --rx: -6deg; --k: -24px; padding: 0; }
.sx-hero__bar { height: 26px; border-radius: 999px; border: 1px solid rgba(var(--text-rgb), .2); }
.sx-hero__card--serp i { height: 7px; border-radius: 4px; background: rgba(var(--text-rgb), .14); }
.sx-hero__card--serp i:nth-of-type(3n+1) { width: 60%; background: rgba(242,194,0,.5); height: 9px; margin-top: 6px; }
.sx-hero__card--serp i:nth-of-type(3n+2) { width: 90%; }
.sx-hero__card--serp i:nth-of-type(3n) { width: 75%; }
.sx-hero__q { align-self: flex-end; width: 55%; height: 26px; border-radius: 14px 14px 4px 14px; background: rgba(var(--text-rgb), .14); }
.sx-hero__a { display: flex; flex-direction: column; gap: 7px; padding: 12px; border-radius: 14px 14px 14px 4px; border: 1px solid rgba(242,194,0,.3); }
.sx-hero__a i { height: 6px; border-radius: 4px; background: rgba(var(--text-rgb), .16); }
.sx-hero__a i:nth-child(2) { width: 85%; } .sx-hero__a i:nth-child(4) { width: 60%; }
.sx-hero__chips { display: flex; gap: 6px; }
.sx-hero__chips b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; color: #0c0c0e; background: var(--color-accent); }
.sx-hero__card--map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sx-hero__card--map path { fill: none; stroke: rgba(var(--text-rgb), .2); stroke-width: 6; }
.sx-hero__pin { position: absolute; left: 52%; top: 44%; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--color-accent); box-shadow: 0 0 20px rgba(242,194,0,.8); }
.sx-hero__pin::after { content: ''; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px; border-radius: 50%; border: 2px solid rgba(242,194,0,.6); animation: wdxPing 2.4s ease-out infinite; }
#top .hero__line { transition: color .6s ease, opacity .6s ease; }
#top.sx-cycling .hero__line:not(.hero__line--accent) { opacity: .45; }
#top.sx-cycling .hero__line.sx-lit { opacity: 1; }
@media (max-width: 1100px) { .sx-hero__card--serp { left: -6%; } .sx-hero__card--ai { right: -6%; } .sx-hero__card--map { display: none; } }
@media (max-width: 768px) { #top .sx-hero { display: none; } }

/* ---------- WHY: three circles that become one ---------- */
.sx-venn__stage { position: relative; height: clamp(220px, 26vw, 360px); margin: 0 auto clamp(30px, 4vw, 56px); max-width: 900px; }
.sx-venn__c { --m: 1; position: absolute; top: 50%; left: 50%; width: clamp(160px, 19vw, 260px); aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--color-accent); background: radial-gradient(circle, rgba(242,194,0,.1), rgba(242,194,0,.02) 70%); display: grid; place-items: center; mix-blend-mode: screen; transform: translate(-50%, -50%) translateX(calc(var(--dx) * var(--m))); transition: transform .3s linear; }
.sx-venn__c b { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3vw, 44px); color: var(--color-accent); opacity: calc(var(--m) * 1); }
.sx-venn__c--1 { --dx: -150%; } .sx-venn__c--2 { --dx: 0%; } .sx-venn__c--3 { --dx: 150%; }
.wdx.is-ride .sx-venn__c { --m: clamp(.22, calc(1 - (var(--rp, 0) - .28) * 3), 1); }
.sx-venn__c--2 { top: calc(50% - 0px); }
.wdx.is-ride .sx-venn__c--2 { transform: translate(-50%, -50%) translateY(calc((1 - var(--m)) * -18%)); }
.sx-venn__core { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 10px rgba(242,194,0,.15), 0 0 50px rgba(242,194,0,.9); transform: scale(0); }
.wdx.is-ride .sx-venn__core { transform: scale(clamp(0, calc((var(--rp, 0) - .45) * 5), 1)); }
.sx-venn__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.sx-venn__col { position: relative; padding-top: 24px; border-top: 1px solid var(--color-border); transition: opacity .35s ease; }
.sx-venn__cols:hover .sx-venn__col:not(:hover) { opacity: .4; }
.sx-venn__n { position: absolute; right: 0; top: -4px; font-family: var(--font-display); font-weight: 700; font-size: 100px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(var(--text-rgb), .16); pointer-events: none; transition: -webkit-text-stroke-color .3s ease; }
.sx-venn__col:hover .sx-venn__n { -webkit-text-stroke-color: var(--color-accent); }
.sx-venn__col h3 { font-size: clamp(20px, 1.8vw, 26px); margin: 0 0 12px; }
.sx-venn__col p { margin: 0; color: var(--color-text-dim); font-size: 16px; line-height: 1.6; max-width: 34ch; }
.sx-venn__close { margin: 64px 0 0; max-width: 40ch; font-family: var(--font-display); font-size: clamp(21px, 2.2vw, 31px); line-height: 1.3; letter-spacing: -.015em; text-wrap: balance; }
.sx-venn__close b { color: var(--color-accent); font-weight: 600; }

/* ---------- 01 WEB DEVELOPMENT: exploded isometric stack ---------- */
.sx-stack__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.sx-stack__iso { position: sticky; top: calc(var(--topbar-h) + 40px); height: clamp(360px, 38vw, 520px); display: grid; place-items: center; }
.sx-stack__tower { --gap: 64px; position: relative; width: min(78%, 340px); aspect-ratio: 1; transform: rotateX(58deg) rotateZ(-42deg); transform-style: preserve-3d; }
.wdx.is-ride .sx-stack__tower { --gap: calc(14px + clamp(0, calc((var(--rp, 0) - .18) * 2.6), 1) * 56px); }
.sx-stack__plate { position: absolute; inset: 0; border-radius: 14px; border: 1.5px solid rgba(242,194,0,.55); background: linear-gradient(135deg, rgba(var(--bg-rgb), .92), rgba(var(--bg-rgb), .75)); box-shadow: 0 0 0 1px rgba(var(--text-rgb), .04), 0 20px 40px rgba(0,0,0,.4); transform: translateZ(calc(var(--i) * var(--gap))); transition: border-color .3s ease, background .3s ease, box-shadow .3s ease; }
.sx-stack__plate span { position: absolute; left: 14px; bottom: 12px; font-family: var(--font-display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--text-rgb), .7); }
.sx-stack__plate.is-on { border-color: var(--color-accent); background: linear-gradient(135deg, rgba(242,194,0,.32), rgba(242,194,0,.1)); box-shadow: 0 0 60px rgba(242,194,0,.35); }
.sx-stack__plate.is-on span { color: var(--color-accent); }
.sx-stack__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.sx-stack__rows li { padding: 24px 0 24px 0; border-bottom: 1px solid var(--color-border); cursor: default; transition: padding-left .35s var(--ease); }
.sx-stack__k { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 1.7vw, 24px); margin-bottom: 8px; transition: color .25s ease; }
.sx-stack__rows p { margin: 0; color: var(--color-text-dim); font-size: 16px; line-height: 1.6; }
.sx-stack__rows li.is-on { padding-left: 16px; }
.sx-stack__rows li.is-on .sx-stack__k { color: var(--color-accent); }

/* ---------- 02 SEO: anatomy of a result ---------- */
.sx-anat__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.sx-anat__serp { position: sticky; top: calc(var(--topbar-h) + 50px); padding: clamp(22px, 3vw, 36px); border-radius: 18px; background: #fdfcf7; color: #1d1d1f; box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(242,194,0,.2); }
.sx-anat__serp [data-part] { position: relative; border-radius: 6px; transition: box-shadow .35s ease, background .35s ease; }
.sx-anat__serp [data-part].is-on { background: rgba(242,194,0,.28); box-shadow: 0 0 0 6px rgba(242,194,0,.28); }
.sx-anat__bar { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 18px; margin-bottom: 26px; border-radius: 999px !important; border: 1px solid #dadce0; font-size: 15px; color: #202124; }
.sx-anat__bar svg { width: 18px; height: 18px; fill: none; stroke: #5f6368; stroke-width: 2; stroke-linecap: round; flex: none; }
.sx-anat__res { display: flex; flex-direction: column; gap: 6px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid #ececec; }
.sx-anat__url { align-self: flex-start; font-size: 13px; color: #4d5156; }
.sx-anat__title { align-self: flex-start; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.3; color: #1a0dab; }
.sx-anat__desc { font-size: 14.5px; line-height: 1.55; color: #4d5156; }
.sx-anat__stars { align-self: flex-start; display: flex; gap: 3px; padding: 2px 4px; }
.sx-anat__stars i { width: 13px; height: 13px; background: #f2c200; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.sx-anat__ghost { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; opacity: .55; }
.sx-anat__ghost i { height: 8px; border-radius: 4px; background: #e6e6e6; }
.sx-anat__ghost i:first-child { width: 45%; background: #d6d9f5; height: 11px; } .sx-anat__ghost i:last-child { width: 80%; }
.sx-anat__steps { list-style: none; margin: 0; padding: 0; }
.sx-anat__steps li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: clamp(22px, 3.4vh, 40px) 0; border-bottom: 1px solid var(--color-border); opacity: .4; transition: opacity .4s ease; cursor: default; }
.sx-anat__steps li:first-child { border-top: 1px solid var(--color-border); }
.sx-anat__steps li.is-on { opacity: 1; }
.sx-anat__n { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--color-accent); transition: color .35s ease; }
.sx-anat__steps li.is-on .sx-anat__n { color: var(--color-accent); }
.sx-anat__steps h3 { font-size: clamp(19px, 1.7vw, 24px); margin: 4px 0 8px; }
.sx-anat__steps p { margin: 0; color: var(--color-text-dim); font-size: 16px; line-height: 1.6; }

/* ---------- 03 AEO: the answer lifts out of the page ---------- */
.sx-lift__stage { position: relative; display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 60px); align-items: center; margin-bottom: clamp(48px, 6vw, 80px); }
.sx-lift__page { position: relative; padding: 26px; border-radius: 14px; border: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 12px; }
.sx-lift__page i { height: 9px; border-radius: 5px; background: rgba(var(--text-rgb), .12); }
.sx-lift__page i:nth-child(2) { width: 82%; } .sx-lift__page i:nth-child(6) { width: 70%; } .sx-lift__page i:nth-child(7) { width: 50%; }
.sx-lift__hole { height: 54px !important; background: transparent !important; border: 1.5px dashed rgba(242,194,0,.7); border-radius: 8px !important; }
.sx-lift__ans { position: relative; margin: 0; padding: clamp(24px, 3vw, 38px); border-radius: 16px; border: 1px solid rgba(242,194,0,.5); background: linear-gradient(180deg, rgba(242,194,0,.1), rgba(242,194,0,.03)); box-shadow: 0 30px 70px -30px rgba(0,0,0,.8), 0 0 50px rgba(242,194,0,.12); }
.wdx.is-ride .sx-lift__ans { --lp: clamp(0, calc((var(--rp, 0) - .18) * 3), 1); transform: translate(calc((1 - var(--lp)) * -42%), calc((1 - var(--lp)) * 10px)) scale(calc(.6 + var(--lp) * .4)); opacity: calc(.35 + var(--lp) * .65); transform-origin: left center; }
.wdx.is-ride .sx-lift__hole { border-color: rgba(242,194,0, calc(.2 + var(--lp, 0) * .8)); }
.sx-lift__tag { display: block; margin-bottom: 14px; font-family: var(--font-display); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--color-accent); }
.sx-lift__ans p { margin: 0; font-family: var(--font-display); font-size: clamp(20px, 2vw, 28px); line-height: 1.38; letter-spacing: -.01em; }
.sx-lift__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.sx-lift__grid > div { padding-top: 20px; border-top: 2px solid var(--color-accent); }
.sx-lift__grid h3 { font-size: clamp(18px, 1.5vw, 22px); margin: 0 0 10px; }
.sx-lift__grid p { margin: 0; color: var(--color-text-dim); font-size: 15.5px; line-height: 1.6; }

/* ---------- 04 GEO: AI answer with citations + map ---------- */
.sx-cite__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.sx-cite__chat { position: sticky; top: calc(var(--topbar-h) + 50px); padding: clamp(24px, 3vw, 40px); border-radius: 22px 22px 22px 6px; background: #0a0a0c; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 90px -40px rgba(0,0,0,.9); color: #f4f2ea; }
.sx-cite__dots { display: flex; gap: 6px; margin-bottom: 18px; }
.sx-cite__dots i { width: 8px; height: 8px; border-radius: 50%; background: #f2c200; animation: sxDot 1.2s ease-in-out infinite; }
.sx-cite__dots i:nth-child(2) { animation-delay: .15s; } .sx-cite__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes sxDot { 0%, 100% { opacity: .3; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }
.sx-cite__ans { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2.3vw, 32px); line-height: 1.35; letter-spacing: -.015em; }
.sx-cite__ans sup { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin: 0 2px; border-radius: 50%; font-size: .5em; font-family: var(--font-body); font-weight: 700; vertical-align: super; color: #0c0c0e; background: rgba(242,194,0,.5); transition: background .3s ease, box-shadow .3s ease, transform .3s ease; }
.sx-cite__ans sup.is-on { background: #f2c200; box-shadow: 0 0 16px rgba(242,194,0,.9); transform: scale(1.2); }
.sx-cite__src { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.sx-cite__src li { padding: 24px 0; border-bottom: 1px solid var(--color-border); transition: background .3s ease; }
.sx-cite__src li.is-on { background: linear-gradient(90deg, rgba(242,194,0,.08), transparent 70%); }
.sx-cite__k { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 1.7vw, 24px); margin-bottom: 8px; }
.sx-cite__k i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; border: 1px solid var(--color-accent); color: var(--color-accent); transition: background .3s ease, color .3s ease; }
.sx-cite__src li.is-on .sx-cite__k i { background: var(--color-accent); color: #0c0c0e; }
.sx-cite__src p { margin: 0 0 0 44px; color: var(--color-text-dim); font-size: 16px; line-height: 1.6; }
.sx-map { margin-top: clamp(70px, 8vw, 120px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.sx-map__view { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(242,194,0,.08), transparent 60%), var(--color-bg-3); border: 1px solid var(--color-border); }
.sx-map__streets { position: absolute; inset: 0; width: 100%; height: 100%; }
.sx-map__streets path { fill: none; stroke: rgba(var(--text-rgb), .12); stroke-width: 7; stroke-linecap: round; }
.sx-map__streets path:nth-child(2n) { stroke-width: 3; }
.sx-map__pin { position: absolute; left: 50%; top: 46%; width: 48px; height: 48px; margin: -48px 0 0 -24px; fill: var(--color-accent); stroke: #0c0c0e; stroke-width: 1.4; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); animation: sxPin 2.4s ease-in-out infinite; }
.sx-map__pin circle { fill: #0c0c0e; }
@keyframes sxPin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.sx-map__ring { position: absolute; left: 50%; top: 46%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.1); border-radius: 50%; border: 2px solid rgba(242,194,0,.6); animation: sxRadar 3.2s ease-out infinite; }
.sx-map__ring--2 { animation-delay: 1.6s; }
@keyframes sxRadar { 0% { transform: translate(-50%, -50%) scale(.1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; } }
.sx-map__body h3 { font-size: clamp(24px, 2.4vw, 34px); margin: 0 0 10px; letter-spacing: -.02em; }
.sx-map__lead { margin: 0 0 30px; color: var(--color-text-dim); font-size: 17px; }
.sx-map__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 36px; }
.sx-map__items h4 { font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.4vw, 20px); margin: 0 0 8px; }
.sx-map__items p { margin: 0; color: var(--color-text-dim); font-size: 15.5px; line-height: 1.6; }
.sx-map__items > div { padding-left: 18px; border-left: 2px solid rgba(242,194,0,.5); }

/* ---------- 05 DASHBOARD ---------- */
.sx-dash__screen { border-radius: 20px; background: #0a0a0c; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 50px 100px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(242,194,0,.1); overflow: hidden; color: #f4f2ea; }
.sx-dash__top { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid rgba(255,255,255,.08); font-family: var(--font-display); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(244,242,234,.6); }
.sx-dash__tiles { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-dash__tile { position: relative; padding: clamp(22px, 2.6vw, 34px); border-right: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); transition: background .3s ease; }
.sx-dash__tile:nth-child(2n) { border-right: 0; }
.sx-dash__tile--wide { grid-column: 1 / -1; border-bottom: 0; border-right: 0; }
.sx-dash__tile:hover { background: rgba(242,194,0,.05); }
.sx-dash__tile dt { font-family: var(--font-display); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #f2c200; margin-bottom: 10px; }
.sx-dash__tile dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(244,242,234,.82); max-width: 44ch; }
.sx-dash__spark { display: block; width: 100%; height: 44px; margin-top: 18px; overflow: visible; }
.sx-dash__spark path { fill: none; stroke: #f2c200; stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.sx-dash__screen.is-visible .sx-dash__spark path { animation: bpDraw 1.6s var(--ease) .4s forwards, sxDrift 6s ease-in-out 2s infinite alternate; }
@keyframes sxDrift { to { transform: translateY(-3px); } }
.sx-dash__spark--bars rect { fill: rgba(242,194,0,.7); transform-origin: bottom; transform-box: fill-box; transform: scaleY(0); }
.sx-dash__screen.is-visible .sx-dash__spark--bars rect { animation: sxBar 1s var(--ease) forwards; }
.sx-dash__spark--bars rect:nth-child(2) { animation-delay: .1s !important; } .sx-dash__spark--bars rect:nth-child(3) { animation-delay: .2s !important; } .sx-dash__spark--bars rect:nth-child(4) { animation-delay: .3s !important; } .sx-dash__spark--bars rect:nth-child(5) { animation-delay: .4s !important; }
@keyframes sxBar { to { transform: scaleY(1); } }
.sx-dash__tile--wide dd::after { content: ''; display: inline-block; width: .5em; height: 1em; margin-left: 6px; vertical-align: -.15em; background: #f2c200; animation: wdxCaret 1s steps(1) infinite; }
.sx-dash__close { margin: 56px 0 0 auto; max-width: 28ch; font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 34px); line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
.sx-dash__close b { color: var(--color-accent); font-weight: 600; }

/* ---------- DEVELOPERS: terminal on yellow ---------- */
.sx-dev__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; margin-bottom: clamp(48px, 6vw, 80px); }
.sx-dev__term { border-radius: 16px; background: #0c0c0e; color: #f4f2ea; padding: 52px clamp(20px, 3vw, 34px) 28px; position: relative; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: clamp(14px, 1.2vw, 16px); }
.sx-dev__tbar { position: absolute; left: 0; right: 0; top: 0; height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sx-dev__tbar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.sx-dev__tbar i:first-child { background: #f2c200; }
.sx-dev__ln { margin: 0 0 12px; color: #f4f2ea !important; opacity: 0; transform: translateX(-8px); }
.sx-dev__term.is-visible .sx-dev__ln { animation: sxLine .4s ease forwards; animation-delay: calc(.3s + var(--l) * .45s); }
@keyframes sxLine { to { opacity: 1; transform: none; } }
.sx-dev__ln b { color: #f2c200; margin-right: 6px; }
.sx-dev__ln em { font-style: normal; color: rgba(244,242,234,.6); }
.sx-dev__cur { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: #f2c200; animation: wdxCaret 1s steps(1) infinite; }
.sx-dev__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.sx-dev__cols > div { border-top: 1px solid rgba(12,12,14,.25); padding-top: 18px; }
.sx-dev__cols h3 { font-size: clamp(17px, 1.5vw, 21px); margin: 0 0 10px; }
.sx-dev__cols p { margin: 0; font-size: 15.5px; line-height: 1.6; }

/* ---------- HOW IT STARTS: rings ---------- */
.sx-rings__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
.sx-rings__r { position: relative; display: grid; place-items: center; width: clamp(92px, 9vw, 130px); aspect-ratio: 1; margin-bottom: 24px; }
.sx-rings__r svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sx-rings__r circle { fill: none; stroke: var(--color-border); stroke-width: 3; }
.sx-rings__r .sx-rings__on { stroke: var(--color-accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px rgba(242,194,0,.6)); }
.wdx.is-ride .sx-rings__list li .sx-rings__on { stroke-dashoffset: calc(100 - var(--p) * 100); }
.sx-rings__r b { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.6vw, 36px); color: var(--color-accent); }
.sx-rings__list h3 { font-size: clamp(19px, 1.6vw, 23px); margin: 0 0 10px; }
.sx-rings__list p { margin: 0; color: var(--color-text-dim); font-size: 15.5px; line-height: 1.6; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .sx-lift__grid, .sx-dev__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sx-rings__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .sx-stack__grid, .sx-anat__grid, .sx-cite__grid, .sx-map, .sx-dev__grid, .sx-lift__stage { grid-template-columns: minmax(0, 1fr); }
  .sx-stack__iso, .sx-anat__serp, .sx-cite__chat { position: static; }
  .sx-stack__iso { height: 320px; }
  .sx-anat__steps li { opacity: 1; }
  .sx-anat__steps li .sx-anat__n { color: var(--color-accent); }
  .sx-venn__cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sx-lift__page { display: none; }
  .sx-dash__tiles { grid-template-columns: minmax(0, 1fr); }
  .sx-dash__tile { border-right: 0 !important; }
}
@media (max-width: 768px) {
  .sx-venn__stage { height: 180px; }
  .sx-venn__c { width: 120px; }
  .sx-venn__c--1 { --dx: -78%; } .sx-venn__c--3 { --dx: 78%; }
  .sx-venn__n { font-size: 64px; }
  .sx-venn__close, .sx-dash__close { margin-left: 0; max-width: none; }
  .sx-stack__iso { height: 260px; }
  .sx-stack__tower { --gap: 34px; width: 62%; }
  .sx-stack__plate span { font-size: 9px; letter-spacing: .08em; }
  .sx-anat__steps li { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; }
  .sx-anat__n { font-size: 34px; }
  .sx-lift__grid, .sx-dev__cols, .sx-rings__list, .sx-map__items { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .sx-cite__src p { margin-left: 0; }
  .sx-rings__list li { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 18px; }
  .sx-rings__r { width: 76px; margin: 0; grid-row: span 2; }
  .sx-rings__r b { font-size: 22px; }
}
@media (hover: none) { .sx-venn__cols:hover .sx-venn__col:not(:hover) { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sx-hero__pin::after, .sx-map__ring, .sx-map__pin, .sx-cite__dots i { animation: none !important; }
  .sx-dash__spark path { stroke-dashoffset: 0; animation: none !important; }
  .sx-dash__spark--bars rect { transform: none; animation: none !important; }
  .sx-dev__ln { opacity: 1; transform: none; animation: none !important; }
}
/* hero: keep the copy clear of the docked rail (web dev + seo) */
#top .wdx-bp ~ .hero__content .hero__sub, #top .sx-hero ~ .hero__content .hero__sub { max-width: 62ch; margin-left: auto; margin-right: auto; }
@media (min-width: 1025px) { #top .wdx-bp ~ .hero__content, #top .sx-hero ~ .hero__content { padding-left: 100px; padding-right: 100px; } }
/* topbar: between 1025 and 1220px the centred nav ran into the theme toggle */
@media (min-width: 1025px) and (max-width: 1220px) { .topbar__nav { left: 46%; gap: 16px; } .topbar__navlink { font-size: 13px; letter-spacing: .04em; } }
/* build 2026-10-14m */

/* ===== Home on phones (2026-10-14): typographic five seconds + even section rhythm ===== */
@media (max-width: 767px) {
  #attention .shot__site, #attention .shot__fx, #attention .pfm { display: none !important; }
  #attention .shot__center::before { display: none; }
  #attention .shot__frame { aspect-ratio: auto; min-height: 0; height: auto; padding: 34px 22px 38px; background: var(--color-bg-2); transition: background .5s ease; }
  #attention .shot__center { position: relative; inset: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; }
  #attention .shot__center .shot__clock { width: auto; aspect-ratio: auto; height: auto; display: flex; flex-direction: column; align-items: center; }
  #attention .shot__clock svg { display: none; }
  #attention .shot__center .shot__num { position: relative; inset: auto; display: block; padding: 0; font-size: min(64vw, 260px); line-height: .82; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px var(--color-accent); background: linear-gradient(to top, var(--color-accent) calc(var(--f, 0) * 100%), transparent calc(var(--f, 0) * 100%)); -webkit-background-clip: text; background-clip: text; text-shadow: none; }
  #attention .shot__num.is-tick { animation: shotTickM .45s cubic-bezier(.22,1,.36,1); }
  @keyframes shotTickM { from { transform: translateY(18%); opacity: 0; } to { transform: none; opacity: 1; } }
  #attention .shot__unit { position: static; margin-top: 6px; font-size: 11px; letter-spacing: .32em; }
  #attention .shot__center .shot__line { margin-top: 18px; font-size: clamp(24px, 7.4vw, 32px); text-align: center; text-wrap: balance; }
  #attention.is-flash .shot__frame { background: var(--color-accent); }
  #attention.is-flash .shot__num { -webkit-text-stroke-color: #0c0c0e; background: none; color: #0c0c0e; }
  #attention.is-flash .shot__unit { color: rgba(12,12,14,.6); }
  #attention.is-flash .shot__w, #attention.is-flash .shot__w.is-lit { color: #0c0c0e; text-shadow: none; }
  #attention.is-flash .shot__w--acc { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; }
  #attention.is-flash .shot__corner { border-color: #0c0c0e; }
  /* even vertical rhythm: about 48px of air above and below each section's content */
  #hero { padding-top: calc(var(--topbar-h) + 48px) !important; padding-bottom: 30px !important; }
  #hero ~ #attention { padding-top: 34px !important; padding-bottom: 48px !important; }
  #hero ~ #work { padding-top: 48px !important; padding-bottom: 48px !important; }
  #hero ~ #rebuild { padding-top: 48px !important; padding-bottom: 43px !important; }
  #hero ~ #all-services { padding-top: 42px !important; padding-bottom: 42px !important; }
  #hero ~ #process { padding-top: 42px !important; padding-bottom: 78px !important; }
  #hero ~ #one-website { padding-top: 42px !important; padding-bottom: 52px !important; }
  #hero ~ #performance { padding-top: 48px !important; padding-bottom: 34px !important; }
  #hero ~ #ai-automation { padding-top: 0 !important; padding-bottom: 60px !important; }
  #hero ~ #realestate { padding-top: 42px !important; padding-bottom: 81px !important; }
  #hero ~ #reviews { padding-top: 48px !important; padding-bottom: 31px !important; }
  #hero ~ #faq { padding-top: 42px !important; }
  #hero ~ #insights { padding-top: 42px !important; padding-bottom: 76px !important; }
  #hero ~ #start { padding-top: 0 !important; padding-bottom: 75px !important; }
}
/* seo page, phones/tablets: the 3D stack rises ~45% of its width above its own box, so reserve that room */
@media (max-width: 900px) { .sx-stack__iso { display: block; height: auto; padding: 190px 0 0; } .sx-stack__tower { margin: 0 auto; } }
@media (max-width: 768px) { .sx-stack__iso { padding: 134px 0 0; } }
/* build 2026-10-14o */

/* ===== Home on phones (2026-10-14b): five seconds as a scrolling feed that locks on a yellow card ===== */
.sf { display: none; }
@media (max-width: 767px) {
  #attention .shot__frame { padding: 0; height: 460px; background: var(--color-bg-2); }
  #attention .shot__center { position: absolute; inset: auto; top: 14px; right: 14px; z-index: 5; display: block; padding: 0; }
  #attention .shot__center .shot__clock { flex-direction: row; align-items: baseline; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(var(--bg-rgb), .82); border: 1px solid var(--color-border); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  #attention .shot__center .shot__num { font-size: 18px; line-height: 1; letter-spacing: 0; color: var(--color-accent); -webkit-text-stroke: 0; background: none; }
  #attention .shot__num.is-tick { animation: sfTick .4s cubic-bezier(.22,1,.36,1); }
  @keyframes sfTick { from { transform: translateY(-40%); opacity: 0; } to { transform: none; opacity: 1; } }
  #attention .shot__unit { margin: 0; font-size: 9.5px; letter-spacing: .24em; }
  #attention.is-flash .shot__center { opacity: 0; transition: opacity .3s ease; }
  #attention.is-flash .shot__frame { background: var(--color-bg-2); }
  .sf { --step: 0; --ch: 150px; display: block; position: absolute; inset: 0; overflow: hidden; border-radius: inherit; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
  .sf__track { position: absolute; left: 20px; right: 20px; top: 40px; display: flex; flex-direction: column; gap: 14px; transform: translateY(calc(var(--step) * var(--ch) * -1)); transition: transform .5s cubic-bezier(.3,1.3,.5,1); }
  #attention.is-flash .sf__track { transform: translateY(calc(9 * var(--ch) * -1 + 80px)); transition: transform .9s cubic-bezier(.2,1.25,.4,1); }
  .sf__card { flex: none; height: 136px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(var(--text-rgb), .05); border: 1px solid rgba(var(--text-rgb), .08); filter: grayscale(1); opacity: .55; transition: opacity .4s ease, filter .4s ease; }
  .sf__bar { display: flex; gap: 4px; }
  .sf__bar b { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--text-rgb), .25); }
  .sf__img { display: block; border-radius: 8px; background: rgba(var(--text-rgb), .1); }
  .sf__l { display: block; height: 7px; width: 80%; border-radius: 4px; background: rgba(var(--text-rgb), .14); }
  .sf__l--2 { width: 55%; }
  .sf__card--hit { height: auto; min-height: 220px; justify-content: center; padding: 26px 22px; background: var(--color-accent); border-color: var(--color-accent); filter: none; opacity: 1; box-shadow: 0 20px 50px -20px rgba(242,194,0,.6); }
  #attention .sf__card--hit .shot__line { margin: 0; max-width: none; font-size: clamp(26px, 8vw, 34px); line-height: 1.08; text-align: left; color: #0c0c0e; text-shadow: none; }
  #attention .sf__card--hit .shot__w, #attention .sf__card--hit .shot__w.is-lit { color: #0c0c0e; text-shadow: none; }
  #attention .sf__card--hit .shot__w--acc { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; }
  .sf__thumb { position: absolute; right: 26px; bottom: 70px; width: 38px; height: 38px; border-radius: 50%; background: rgba(var(--text-rgb), .18); border: 1px solid rgba(var(--text-rgb), .3); animation: sfSwipe 1s cubic-bezier(.5,0,.3,1) infinite; }
  #attention.is-flash .sf__thumb { animation: none; opacity: 0; transition: opacity .2s ease; }
  @keyframes sfSwipe { 0% { transform: translateY(40px) scale(.8); opacity: 0; } 25% { opacity: 1; transform: translateY(30px) scale(1); } 75% { opacity: 1; transform: translateY(-90px) scale(1); } 100% { transform: translateY(-110px) scale(.8); opacity: 0; } }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .sf__thumb { display: none; } .sf__track { transition: none; } }
/* build 2026-10-14p */

/* ===== Home on phones (2026-10-14c): five seconds = slow site + Back button ===== */
.sl { display: none; }
@media (max-width: 767px) {
  .sf { display: none !important; }
  .sl { --u: 0; display: block; position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
  .sl__reveal { position: absolute; inset: 0; display: flex; align-items: center; padding: 28px 24px; background: var(--color-accent); }
  #attention .sl__reveal .shot__line { margin: 0; max-width: none; font-size: clamp(30px, 9vw, 40px); line-height: 1.05; text-align: left; color: #0c0c0e; text-shadow: none; }
  #attention .sl__reveal .shot__w, #attention .sl__reveal .shot__w.is-lit { color: #0c0c0e; text-shadow: none; }
  #attention .sl__reveal .shot__w--acc { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; }
  .sl__phone { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; background: var(--color-bg-2); transition: transform .65s cubic-bezier(.6,0,.2,1), filter .65s ease; }
  #attention.is-flash .sl__phone { transform: translateX(105%); filter: brightness(.6); transition-delay: .28s; }
  .sl__bar { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 14px; border-bottom: 1px solid var(--color-border); }
  .sl__back { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; color: var(--color-text); background: rgba(var(--text-rgb), .06); }
  .sl__url { flex: 1; min-width: 0; height: 30px; display: flex; align-items: center; padding: 0 12px; border-radius: 999px; background: rgba(var(--text-rgb), .06); font-family: var(--font-display); font-size: 12px; letter-spacing: .04em; color: var(--color-text-dim); white-space: nowrap; overflow: hidden; }
  .sl__spin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(var(--text-rgb), .15); border-top-color: var(--color-accent); animation: slSpin .8s linear infinite; }
  @keyframes slSpin { to { transform: rotate(360deg); } }
  .sl__prog { display: block; height: 3px; width: calc((var(--u) * var(--u) * 62% + 6%)); background: var(--color-accent); box-shadow: 0 0 10px rgba(242,194,0,.7); transition: width .25s linear; }
  .sl__page { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 0; }
  .sl__page i { display: block; border-radius: 8px; background: linear-gradient(90deg, rgba(var(--text-rgb), .06) 0%, rgba(var(--text-rgb), .13) 50%, rgba(var(--text-rgb), .06) 100%); background-size: 200% 100%; animation: slShimmer 1.4s ease-in-out infinite; }
  @keyframes slShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
  .sl__nav { height: 14px; width: 40%; }
  .sl__hero { height: 120px; }
  .sl__ln { height: 12px; width: 88%; }
  .sl__ln--2 { width: 70%; }
  .sl__ln--3 { width: 52%; }
  .sl__btn { height: 36px; width: 46%; border-radius: 999px !important; }
  .sl__grid { height: 90px; }
  .sl__tap { position: absolute; left: 22px; top: 70px; width: 44px; height: 44px; margin: -22px 0 0 -6px; border-radius: 50%; background: rgba(var(--text-rgb), .22); border: 1px solid rgba(var(--text-rgb), .4); opacity: 0; transform: translate(150px, 220px) scale(.9); transition: opacity .3s ease, transform 1.1s cubic-bezier(.3,.8,.3,1); }
  .sl.is-late .sl__tap, #attention.is-flash .sl__tap { opacity: 1; transform: translate(0, -42px) scale(1); }
  #attention.is-flash .sl__tap { animation: slTap .35s ease 0s 1 both; }
  @keyframes slTap { 50% { transform: translate(0, -42px) scale(.8); background: rgba(242,194,0,.5); } 100% { transform: translate(0, -42px) scale(1); } }
  #attention.is-flash .sl__back { background: rgba(242,194,0,.35); }
  #attention.is-flash .shot__center { opacity: 0; transition: opacity .3s ease; }
  #attention .shot__center { top: auto; bottom: 16px; right: 16px; }
  #attention .shot__corner { display: none; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .sl__spin, .sl__page i { animation: none; } .sl__phone, .sl__tap { transition: none; } }
/* build 2026-10-14q */

/* ===================== Blog post template v1 (gp-*) — v16 look, reading-first (2026-10-14) ===================== */
.gp { --gp-measure: 68ch; position: relative; }
.gp__progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 120; pointer-events: none; }
.gp__progress i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--gp-read, 0)); background: var(--color-accent); box-shadow: 0 0 12px rgba(242,194,0,.7); }

/* hero */
.gp-hero { position: relative; padding: calc(var(--topbar-h) + clamp(40px, 6vw, 90px)) 0 0; overflow: hidden; }
.gp-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 80% 0%, rgba(242,194,0,.12), transparent 70%); pointer-events: none; }
.gp-hero__inner { position: relative; width: var(--container); max-width: 980px; margin: 0 auto; }
.gp-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: 26px; }
.gp-crumbs a { color: var(--color-text-dim); text-decoration: none; transition: color .2s ease; }
.gp-crumbs a:hover { color: var(--color-accent); }
.gp-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--color-accent); }
.gp-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 10px var(--color-accent); }
.gp-title { margin: 18px 0 22px; font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.gp-dek { margin: 0; max-width: 60ch; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: var(--color-text-dim); text-wrap: pretty; }
.gp-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; font-family: var(--font-display); font-size: 13px; letter-spacing: .06em; color: var(--color-text-dim); }
.gp-cover { position: relative; width: var(--container); max-width: 1180px; margin: clamp(40px, 5vw, 64px) auto 0; }
.gp-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 22px; border: 1px solid var(--color-border); box-shadow: 0 50px 100px -50px rgba(0,0,0,.9); }
.gp-cover figcaption { margin-top: 12px; font-size: 13px; color: var(--color-text-dim); }

/* layout: sticky contents on the left, reading column on the right */
.gp-layout { width: var(--container); max-width: 1180px; margin: clamp(48px, 6vw, 88px) auto 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.gp-toc { position: sticky; top: calc(var(--topbar-h) + 30px); font-family: var(--font-display); }
.gp-toc__label { display: block; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: 14px; }
.gp-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--color-border); counter-reset: toc; }
.gp-toc li { counter-increment: toc; }
.gp-toc a { position: relative; display: block; padding: 8px 0 8px 18px; font-size: 14px; line-height: 1.35; color: var(--color-text-dim); text-decoration: none; transition: color .25s ease; }
.gp-toc a::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--color-accent); transform: scaleY(0); transition: transform .3s var(--ease); }
.gp-toc a:hover, .gp-toc a.is-on { color: var(--color-text); }
.gp-toc a.is-on::before { transform: none; box-shadow: 0 0 10px rgba(242,194,0,.7); }
.gp-toc__cta { display: inline-block; margin-top: 24px; padding: 12px 18px; border-radius: 999px; border: 1px solid rgba(242,194,0,.6); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text); text-decoration: none; transition: background .25s ease, color .25s ease; }
.gp-toc__cta:hover { background: var(--color-accent); color: #0c0c0e; }

/* reading column */
.gp-body { max-width: var(--gp-measure); font-size: 18.5px; line-height: 1.75; color: var(--color-text); }
.gp-body > p, .gp-body > ul, .gp-body > ol { margin: 0 0 1.15em; }
.gp-body p { color: rgba(var(--text-rgb), .86); text-wrap: pretty; }
.gp-body h2 { scroll-margin-top: calc(var(--topbar-h) + 24px); margin: 2.2em 0 .6em; font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.gp-body h3 { margin: 1.6em 0 .4em; font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.3; }
.gp-body a { color: var(--color-accent); text-decoration: none; border-bottom: 1px solid rgba(242,194,0,.45); transition: border-color .2s ease; }
.gp-body a:hover { border-bottom-color: var(--color-accent); }
.gp-body b, .gp-body strong { color: var(--color-text); font-weight: 600; }
.gp-body ul { list-style: none; padding: 0; }
.gp-body ul > li { position: relative; padding-left: 26px; margin-bottom: .6em; }
.gp-body ul > li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 8px; height: 8px; border-radius: 2px; background: var(--color-accent); transform: rotate(45deg); }
.gp-quick { margin: 0 0 2em; padding: 24px 28px; border-radius: 18px; background: linear-gradient(180deg, rgba(242,194,0,.1), rgba(242,194,0,.03)); border: 1px solid rgba(242,194,0,.45); }
.gp-quick__label { display: block; margin-bottom: 10px; font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--color-accent); }
.gp-quick p { margin: 0; font-size: 19px; line-height: 1.6; color: var(--color-text); }
.gp-table { margin: 1.4em 0; overflow-x: auto; border-radius: 16px; border: 1px solid var(--color-border); }
.gp-table table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
.gp-table th, .gp-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.gp-table thead th { font-family: var(--font-display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); background: rgba(var(--text-rgb), .03); }
.gp-table tbody th { font-family: var(--font-display); font-weight: 600; color: var(--color-text); }
.gp-table td { color: rgba(var(--text-rgb), .8); }
.gp-table tr:last-child th, .gp-table tr:last-child td { border-bottom: 0; }
.gp-table tbody tr:hover { background: rgba(242,194,0,.05); }
.gp-note { font-size: 16px; color: var(--color-text-dim) !important; }
.gp-pull { margin: 1.8em 0; padding: 6px 0 6px 26px; border-left: 4px solid var(--color-accent); }
.gp-pull p { margin: 0; font-family: var(--font-display); font-size: clamp(21px, 2vw, 26px); line-height: 1.35; letter-spacing: -.01em; color: var(--color-text) !important; }
.gp-steps { list-style: none; padding: 0; counter-reset: st; }
.gp-steps > li { counter-increment: st; position: relative; padding: 0 0 18px 56px; margin: 0; }
.gp-steps > li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: -2px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #0c0c0e; background: var(--color-accent); }

/* FAQ */
.gp-faq { margin-top: 2.6em; padding-top: 1.4em; border-top: 1px solid var(--color-border); }
.gp-faq h2 { margin-top: .4em; }
.gp-faq__item { padding: 18px 0; border-bottom: 1px solid var(--color-border); }
.gp-faq__item h3 { margin: 0 0 8px; font-size: 19px; }
.gp-faq__item p { margin: 0; font-size: 17px; }

/* CTA + author */
.gp-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; margin: 2.6em 0 0; padding: 28px 30px; border-radius: 20px; background: var(--color-accent); color: #0c0c0e; }
.gp-cta__label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.01em; margin-bottom: 6px; }
.gp-cta p { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.55; color: rgba(12,12,14,.8) !important; }
.gp-cta .btn { background: #0c0c0e !important; color: var(--color-accent) !important; border-color: #0c0c0e !important; border-bottom: 0 !important; }
.gp-author { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 2.2em; padding-top: 1.6em; border-top: 1px solid var(--color-border); font-size: 15.5px; line-height: 1.55; }
.gp-author__mark { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: #0c0c0e; background: var(--color-accent); }
.gp-author p { margin: 2px 0 0; color: var(--color-text-dim) !important; }

/* related */
.gp-related { width: var(--container); max-width: 1180px; margin: clamp(70px, 8vw, 120px) auto clamp(60px, 7vw, 100px); }
.gp-related h2 { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 32px); margin: 0 0 24px; }
.gp-related__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gp-related__list a { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 18px; border: 1px solid var(--color-border); background: rgba(var(--text-rgb), .02); text-decoration: none; color: var(--color-text); transition: border-color .3s ease, transform .3s var(--ease); }
.gp-related__list a:hover { border-color: rgba(242,194,0,.6); transform: translateY(-4px); }
.gp-related__list span { font-family: var(--font-display); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-accent); }
.gp-related__list b { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.3; }

@media (max-width: 1024px) { .gp-layout { grid-template-columns: minmax(0, 1fr); } .gp-toc { display: none; } .gp-body { max-width: none; } .gp-related__list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .gp-hero { padding-top: calc(var(--topbar-h) + 34px); }
  .gp-title { font-size: clamp(32px, 9vw, 42px); }
  .gp-cover img { border-radius: 16px; }
  .gp-body { font-size: 17.5px; }
  .gp-quick { padding: 20px; }
  .gp-steps > li { padding-left: 50px; }
  .gp-cta { padding: 22px; }
  .gp-cta .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .gp__progress { display: none; } }
/* build gp-1 */

/* ===== Home on phones (2026-10-14d): the slow-site screen shatters at zero ===== */
@media (max-width: 767px) {
  #attention.is-flash .sl__phone { transform: none; filter: none; transition: none; }
  .sl.is-broken .sl__phone { opacity: 0; }
  .sl__glass { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
  .sl::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(circle at 12% 7%, rgba(255,255,255,.95), rgba(242,194,0,.55) 30%, rgba(242,194,0,0) 65%); opacity: 0; }
  .sl.is-broken::after { animation: slFlash .55s ease-out both; }
  @keyframes slFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
  #attention .sl__reveal .shot__line { opacity: 0; transform: scale(1.35); }
  .sl.is-broken .sl__reveal .shot__line { animation: slSlam .6s cubic-bezier(.2,1.6,.4,1) .22s both; }
  @keyframes slSlam { 0% { opacity: 0; transform: scale(1.35) rotate(-2deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
  .sl.is-broken .sl__reveal { animation: slPulse .9s ease-out .25s both; }
  @keyframes slPulse { 0% { background: #fff6c8; } 100% { background: var(--color-accent); } }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .sl.is-broken .sl__reveal .shot__line { animation: none; opacity: 1; transform: none; } .sl.is-broken::after { animation: none; } }
/* build 2026-10-14r */

/* ===== Home on phones (2026-10-14e): five seconds as kinetic typography ===== */
.kt { display: none; }
@media (max-width: 767px) {
  .sl { display: none !important; }
  #attention .shot__center { display: none; }
  .kt { display: block; position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #0c0c0e; transition: background .18s ease; }
  .kt[data-b="1"], .kt[data-b="3"] { background: var(--color-accent); }
  .kt__stage { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 26px 22px; }
  .kt__num { position: absolute; right: -6%; bottom: -14%; font-family: var(--font-display); font-weight: 700; font-size: 150vw; line-height: .8; letter-spacing: -.08em; color: transparent; -webkit-text-stroke: 2px rgba(242,194,0,.28); pointer-events: none; }
  .kt[data-b="1"] .kt__num, .kt[data-b="3"] .kt__num { -webkit-text-stroke-color: rgba(12,12,14,.22); }
  .kt__word { position: relative; z-index: 1; max-width: 100%; font-family: var(--font-display); font-weight: 700; font-size: clamp(54px, 17vw, 82px); line-height: .9; letter-spacing: -.045em; text-transform: uppercase; text-align: center; color: #f4f2ea; text-wrap: balance; }
  .kt[data-b="1"] .kt__word, .kt[data-b="3"] .kt__word { color: #0c0c0e; }
  .kt[data-b="2"] .kt__word { color: var(--color-accent); }
  .kt.is-hit .kt__word { animation: ktSlam .5s cubic-bezier(.2,1.5,.35,1) both; }
  @keyframes ktSlam { 0% { opacity: 0; transform: scale(2.6) rotate(-4deg); filter: blur(10px); } 55% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: none; filter: none; } }
  .kt.is-hit .kt__num { animation: ktNum .5s ease-out both; }
  @keyframes ktNum { 0% { opacity: 0; transform: translateY(12%) scale(.9); } 100% { opacity: 1; transform: none; } }
  .kt__bar { position: absolute; left: 22px; right: 22px; bottom: 22px; height: 4px; border-radius: 4px; background: rgba(var(--text-rgb), .14); overflow: hidden; }
  .kt__bar::after { content: ''; position: absolute; inset: 0; background: var(--color-accent); transform-origin: left; transform: scaleX(var(--u, 0)); transition: transform .25s linear; }
  .kt[data-b="1"] .kt__bar::after, .kt[data-b="3"] .kt__bar::after { background: #0c0c0e; }
  .kt__reveal { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; padding: 28px 24px; background: var(--color-accent); opacity: 0; visibility: hidden; }
  #attention .kt__reveal .shot__line { margin: 0; max-width: none; font-size: clamp(30px, 9vw, 40px); line-height: 1.05; text-align: left; color: #0c0c0e; text-shadow: none; position: relative; z-index: 2; }
  #attention .kt__reveal .shot__w, #attention .kt__reveal .shot__w.is-lit { color: #0c0c0e; text-shadow: none; }
  #attention .kt__reveal .shot__w--acc { display: inline-block; padding: 0 .12em; background: #0c0c0e; color: var(--color-accent) !important; text-decoration: none; }
  .kt__rays { position: absolute; left: 50%; top: 50%; z-index: 3; width: 180%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.2); border-radius: 50%; background: repeating-conic-gradient(rgba(12,12,14,.16) 0deg 7deg, transparent 7deg 18deg); opacity: 0; pointer-events: none; }
  .kt.is-broken .kt__reveal { visibility: visible; animation: ktReveal .35s ease-out both; }
  @keyframes ktReveal { 0% { opacity: 0; background: #fff6c8; } 100% { opacity: 1; background: var(--color-accent); } }
  .kt.is-broken .kt__reveal .shot__line { animation: ktLine .7s cubic-bezier(.2,1.5,.35,1) .08s both; }
  @keyframes ktLine { 0% { opacity: 0; transform: scale(1.5) rotate(-3deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
  .kt.is-broken .kt__rays { z-index: 4; animation: ktRays 3s linear both; }
  @keyframes ktRays { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.2) rotate(0deg); } 25% { opacity: .55; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3) rotate(80deg); } }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .kt.is-hit .kt__word, .kt.is-hit .kt__num, .kt.is-broken .kt__reveal .shot__line, .kt.is-broken .kt__rays { animation: none; } .kt.is-broken .kt__reveal { animation: none; opacity: 1; } }
/* build 2026-10-14s */

/* ===== Home, desktop (2026-10-15): the explosion assembles a grid of real sites ===== */
.shot__site.has-grid > .shot__win { display: none; }
.shot__grid { position: relative; width: min(92%, 1180px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8cqw, 26px); }
.shot__grid--4 { width: min(78%, 860px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shot__grid .shot__win { width: 100%; border-radius: 12px; }
.shot__grid .shot__win::before { box-shadow: 0 0 0 1px rgba(242,194,0,.18), 0 30px 60px -28px rgba(0,0,0,.9), 0 0 40px rgba(242,194,0,.14); }
.shot__grid .shot__bar { height: clamp(20px, 2.4cqw, 28px); padding: 0 9px; gap: 5px; border-radius: 12px 12px 0 0; }
.shot__grid .shot__bar i { width: 7px; height: 7px; }
.shot__grid .shot__bar em { margin-left: 6px; padding: 1px 9px; font-size: clamp(8px, .95cqw, 11px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.shot__grid .shot__img { border-radius: 0 0 12px 12px; }
.shot__grid .shot__win:nth-child(2) .shot__bar, .shot__grid .shot__win:nth-child(2)::before { animation-delay: 1.2s; }
.shot__grid .shot__win:nth-child(3) .shot__bar, .shot__grid .shot__win:nth-child(3)::before { animation-delay: 1.25s; }
.shot__grid .shot__win:nth-child(n+4) .shot__bar, .shot__grid .shot__win:nth-child(n+4)::before { animation-delay: 1.3s; }
@media (max-width: 767px) { .shot__grid { display: none; } .shot__site.has-grid > .shot__win { display: flex; } }
/* build 2026-10-15a */

/* ===== Contact (2026-10-15): one liquid-glass form ===== */
.lgx { position: relative; isolation: isolate; min-height: 100svh; display: grid; place-items: center; padding: clamp(120px, 14vw, 170px) 0 clamp(80px, 9vw, 120px); overflow: hidden; }
.lgx__liquid { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.lgx__blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.lgx__blob--a { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; left: 8%; top: 12%; background: radial-gradient(circle at 35% 35%, rgba(242,194,0,.75), rgba(242,194,0,0) 65%); animation: lgxA 18s ease-in-out infinite alternate; }
.lgx__blob--b { width: 38vw; height: 38vw; max-width: 520px; max-height: 520px; right: 6%; top: 34%; background: radial-gradient(circle at 60% 40%, rgba(255,140,40,.5), rgba(255,140,40,0) 65%); animation: lgxB 22s ease-in-out infinite alternate; }
.lgx__blob--c { width: 30vw; height: 30vw; max-width: 420px; max-height: 420px; left: 38%; bottom: -6%; background: radial-gradient(circle, rgba(255,236,170,.45), rgba(255,236,170,0) 65%); animation: lgxC 26s ease-in-out infinite alternate; }
@keyframes lgxA { to { transform: translate(14vw, 10vh) scale(1.15); } }
@keyframes lgxB { to { transform: translate(-16vw, -12vh) scale(.9); } }
@keyframes lgxC { to { transform: translate(-10vw, -18vh) scale(1.2); } }
.lgx__inner { width: min(var(--container, 92vw), 880px); display: grid; gap: clamp(28px, 4vw, 44px); }
.lgx__head { text-align: center; display: grid; justify-items: center; gap: 14px; }
.lgx__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 6.4vw, 92px); line-height: .95; letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance; color: var(--color-text); }
.lgx__lead { margin: 0; font-size: clamp(17px, 1.6vw, 21px); color: var(--color-text-dim); }
/* the glass: translucent body, bright rim on top, soft inner shade, neon hairline */
.lgx__card { position: relative; border-radius: 30px; padding: clamp(22px, 4vw, 52px); background: linear-gradient(150deg, rgba(var(--text-rgb), .10), rgba(var(--text-rgb), .025) 45%, rgba(var(--text-rgb), .06)); backdrop-filter: blur(26px) saturate(1.6); -webkit-backdrop-filter: blur(26px) saturate(1.6); border: 1px solid rgba(var(--text-rgb), .14); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -18px 40px -24px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--color-accent) 14%, transparent), 0 50px 120px -50px rgba(0,0,0,.85); overflow: hidden; }
.lgx__card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(130deg, rgba(255,255,255,.55), rgba(255,255,255,0) 30%, rgba(242,194,0,0) 70%, rgba(242,194,0,.55)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.lgx__spec { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--mx, 30%) var(--my, 0%), rgba(255,255,255,.16), rgba(255,255,255,0) 42%); mix-blend-mode: screen; transition: background .2s linear; }
.lgx__form { position: relative; gap: 14px; }
.lgx__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* glass inputs with the label floating inside */
.lgx .field { padding-top: 0; }
.lgx .field__input { height: 60px; padding: 24px 18px 8px; border: 1px solid rgba(var(--text-rgb), .13); border-radius: 16px; background: rgba(var(--text-rgb), .045); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.lgx .field__textarea { height: auto; min-height: 112px; padding-top: 28px; resize: vertical; }
.lgx .field__label { left: 18px; top: 19px; font-size: 16px; }
.lgx input.field__input:focus + .field__label, .lgx input.field__input:not(:placeholder-shown) + .field__label, .lgx textarea.field__input:focus + .field__label, .lgx textarea.field__input:not(:placeholder-shown) + .field__label { transform: translateY(-11px) scale(.72); }
.lgx .field__input:focus { border-color: color-mix(in srgb, var(--color-accent) 70%, transparent); background: rgba(var(--text-rgb), .07); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 16%, transparent), 0 0 28px color-mix(in srgb, var(--color-accent) 18%, transparent); }
.lgx .field__input--error { border-color: #ff6b6b; }
.lgx .field__line { display: none; }
.lgx .ct-progress { margin: 0 0 10px; }
.lgx .ct-chips__label { margin: 10px 0 2px; }
.lgx .ct-chips { margin: 0 0 6px; }
.lgx .ct-chip { height: 42px; padding: 0 18px; background: rgba(var(--text-rgb), .05); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.lgx .ct-chip.is-on { background: var(--color-accent); }
.lgx__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 10px; }
.lgx .ct-form__submit { width: auto; margin-top: 0; }
.lgx__alt { font-size: 14px; color: var(--color-text-dim); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(var(--text-rgb), .25); transition: color .2s ease; }
.lgx__alt:hover { color: var(--color-accent); }
.lgx .ct-form__micro { margin-top: 4px; }
@media (max-width: 900px) { .lgx__card { background: var(--color-bg-2); } }
@media (max-width: 640px) { .lgx__row { grid-template-columns: minmax(0, 1fr); } .lgx .ct-form__submit { width: 100%; justify-content: center; } .lgx__foot { justify-content: center; text-align: center; } .lgx__blob { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .lgx__blob { animation: none; } }
/* build 2026-10-15b */

/* ===== spacing: tags under the hero buttons + location line under the CTA buttons (2026-10-16) ===== */
.hero__actions + .hero__tags { margin-top: 30px; margin-bottom: 0; }
.cta__actions + .sv-cta__place, .sv-cta__place { margin-top: 26px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-dim); }
@media (max-width: 640px) { .hero__actions + .hero__tags { margin-top: 24px; } .sv-cta__place { margin-top: 22px; line-height: 1.7; } }
.hero__actions + .hero__tags { margin-bottom: 32px; }

/* v112 — menu icons by link (Blog added 2026-10-19) */
.overlay__link[href="/blog/"] { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h9l4 4v14H6zM14 3v5h5M9 12h7M9 16h7'/></svg>"); }
.overlay__link[href="/contact/"] { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M3 5h18v14H3zM3 6l9 7 9-7'/></svg>"); }
.overlay__link[href="/book-now/"] { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M3 5h18v16H3zM3 10h18M8 3v4M16 3v4'/></svg>")}@media (min-width:1025px) and (max-width:1220px){.topbar__nav{left:44%;gap:12px}.topbar__navlink{font-size:12.5px;letter-spacing:.03em}}@media (min-width:1221px) and (max-width:1400px){.topbar__nav{gap:22px}.topbar__navlink{font-size:14px;letter-spacing:.05em}}