/* ============================================================= Kiwi Dynamics, /new-lander concept. Layout DNA borrowed from magebinary.com (hero split + the slide-out side drawer). Header, footer and everything else is built fresh. Palette and type are the real site's tokens, lifted from src/styles/global.css so this reads as Kiwi Dynamics and not a separate brand. Themes run off shared token names so no component rule ever hardcodes a colour: default white the dark build red instead of lime, either theme ============================================================= */ @font-face{font-family:'Haffer';font-style:normal;font-weight:100 900;font-display:swap; src:url('/fonts/Haffer-VF.ttf') format('truetype-variations')} @font-face{font-family:'Haffer XH';font-style:normal;font-weight:400;font-display:swap; src:url('/fonts/HafferXH-Regular.woff2') format('woff2')} @font-face{font-family:'Haffer Mono';font-style:normal;font-weight:400;font-display:swap; src:url('/fonts/HafferMono-Regular.woff2') format('woff2')} @font-face{font-family:'Haffer Mono';font-style:normal;font-weight:500;font-display:swap; src:url('/fonts/HafferMono-Medium.woff2') format('woff2')} /* ---------- LIGHT (default) ---------- */ :root{ --ink:#ffffff; /* page */ --ink-2:#f4f4f4; /* the real site's canvas, used as a band */ --ink-3:#eaeaea; --fg:#201d1d; --muted:#6f6b6b; --muted-2:#948f8f; --line:rgba(32,29,29,.14); --line-2:rgba(32,29,29,.26); --accent:#a1ff62; --accent-ink:#16210c; /* text sitting on the accent */ --accent-soft:rgba(161,255,98,.17); --halo:rgba(161,255,98,.30); --accent-glow:rgba(161,255,98,.8); --deco:var(--fg); /* rules, quote marks, headings */ --hover:var(--fg); --dot:var(--fg); --wash:rgba(32,29,29,.035); --card-bg:linear-gradient(180deg,rgba(32,29,29,.028),rgba(32,29,29,.006)); --hover-fill:rgba(32,29,29,.045); --bar-bg:rgba(255,255,255,.8); --drawer-bg:rgba(255,255,255,.98); --scrim-bg:rgba(20,17,15,.34); /* emblem */ --trace-base:#201d1d; --trace-op:.13; --hot:#201d1d; /* on white the sweep darkens the copper */ --hot-2:rgba(32,29,29,.5); --pulse:#201d1d; --pulse-glow:rgba(161,255,98,1); --ripple:rgba(32,29,29,.7); --ripple-blend:normal; --bloom-op:.16; --core-bg:var(--ink); --sans:'Haffer',system-ui,-apple-system,'Segoe UI',sans-serif; --display:'Haffer XH','Haffer',system-ui,sans-serif; --mono:'Haffer Mono',ui-monospace,'SF Mono',monospace; --ease:cubic-bezier(.19,1,.22,1); --ease-2:cubic-bezier(.16,1,.3,1); --hdr-h:76px; --wrap:1280px; --gut:clamp(20px,5vw,64px); --pad-sect:clamp(80px,11vw,168px); --h-xl:clamp(2.4rem,5.8vw,4.8rem); --h-lg:clamp(1.95rem,4.2vw,3.5rem); --h-md:clamp(1.4rem,2.5vw,2.1rem); } /* ---------- DARK ---------- */ html[data-theme="dark"]{ --ink:#14110f; --ink-2:#181513; --ink-3:#221e1b; --fg:#ffffff; --muted:#a49e9a; --muted-2:#7a736f; --line:rgba(244,244,244,.12); --line-2:rgba(244,244,244,.24); --accent-soft:rgba(161,255,98,.13); --halo:rgba(161,255,98,.20); --accent-glow:rgba(161,255,98,.55); --deco:var(--accent); --hover:var(--accent); --dot:var(--accent); --wash:rgba(255,255,255,.045); --card-bg:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.008)); --hover-fill:rgba(255,255,255,.05); --bar-bg:rgba(20,17,15,.74); --drawer-bg:rgba(12,10,9,.97); --scrim-bg:rgba(6,5,4,.62); --trace-base:var(--accent); --trace-op:.17; --hot:var(--accent); --hot-2:var(--accent-glow); --pulse:#ffffff; --pulse-glow:var(--accent-glow); --ripple:#ffffff; --ripple-blend:screen; --bloom-op:.5; --core-bg:var(--ink); } /* ---------- ACCENT SWAP ---------- */ html[data-accent="crimson"]{ --accent:#e8102f; --accent-ink:#ffffff; --accent-soft:rgba(232,16,47,.12); --accent-glow:rgba(232,16,47,.7); --pulse-glow:rgba(232,16,47,.9); } html[data-theme="dark"][data-accent="crimson"]{ --accent:#ff2a44; --accent-soft:rgba(255,42,68,.14); --accent-glow:rgba(255,42,68,.6); } *{margin:0;padding:0;box-sizing:border-box} html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;background:var(--ink)} body{ background:var(--ink);color:var(--fg);font-family:var(--sans); font-size:16px;line-height:1.55;overflow-x:hidden; } body.nav-open{overflow:hidden} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} img,svg{display:block;max-width:100%} ::selection{background:var(--accent);color:var(--accent-ink)} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)} .skip{position:fixed;top:-100px;left:16px;z-index:200;background:var(--accent); color:var(--accent-ink);padding:10px 16px;border-radius:8px;transition:top .2s} .skip:focus{top:16px} :focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:4px} /* ---------- type ---------- Sizes and tracking match .hero2__h and .brand on the live site. */ .h-xl{font-family:var(--display);font-size:var(--h-xl);line-height:.96; letter-spacing:-.02em;font-weight:400} .h-lg{font-family:var(--display);font-size:var(--h-lg);line-height:1.02; letter-spacing:-.02em;font-weight:400} .h-md{font-family:var(--display);font-size:var(--h-md);line-height:1.15; letter-spacing:-.02em;font-weight:400} .center{text-align:center} /* on white the lime cannot carry text, so it becomes a marker highlight */ em{font-style:normal;background:var(--accent);color:var(--accent-ink); padding:0 .08em;border-radius:.04em} html[data-theme="dark"] em{background:none;color:var(--accent);padding:0} /* line-by-line hero reveal */ .ln{display:block;overflow:hidden;padding-bottom:.06em} .ln>span{display:block;transform:translateY(105%); animation:lineUp 1s var(--ease) forwards} .ln:nth-child(1)>span{animation-delay:.15s} .ln:nth-child(2)>span{animation-delay:.27s} .ln:nth-child(3)>span{animation-delay:.39s} @keyframes lineUp{to{transform:none}} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em; height:44px;padding:0 20px;border-radius:999px;font-size:.9rem;font-weight:500; letter-spacing:-.01em;transition:transform .35s var(--ease),background .25s, color .25s,border-color .25s,box-shadow .3s;white-space:nowrap} .btn.lg{height:54px;padding:0 30px;font-size:1rem} .btn:hover{transform:translateY(-2px)} .btn-accent{background:var(--fg);color:var(--ink)} .btn-accent:hover{box-shadow:0 10px 26px -12px rgba(32,29,29,.45)} .btn-line{border:1px solid var(--line-2);color:var(--fg)} .btn-line:hover{border-color:var(--fg);background:var(--hover-fill)} .status{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono); font-size:.72rem;letter-spacing:.02em;color:var(--muted)} .status i{width:6px;height:6px;border-radius:50%;background:var(--dot); animation:pulseDot 2.4s infinite} @keyframes pulseDot{ 0%{box-shadow:0 0 0 0 var(--accent-glow)} 70%{box-shadow:0 0 0 7px rgba(0,0,0,0)} 100%{box-shadow:0 0 0 0 rgba(0,0,0,0)} } /* ============================================================= HEADER ============================================================= */ .hdr{position:fixed;top:0;left:0;right:0;z-index:90; transition:transform .5s var(--ease)} .hdr::before{content:'';position:absolute;inset:0;background:var(--bar-bg); backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%); opacity:0;transition:opacity .35s;border-bottom:1px solid transparent} .hdr.stuck::before{opacity:1;border-bottom-color:var(--line)} .hdr.hide{transform:translateY(-100%)} body.nav-open .hdr{transform:none} .hdr-in{position:relative;width:100%;padding:0 var(--gut); height:var(--hdr-h);gap:24px; display:grid;grid-template-columns:1fr auto 1fr;align-items:center} .hdr-l{justify-self:start;display:flex;align-items:center;gap:18px;min-width:0} .hdr-c{justify-self:center} .hdr-r{justify-self:end;display:flex;align-items:center;gap:18px;min-width:0} /* same mark + wordmark pairing as .brand in the live header */ .wordmark{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display); font-size:1.15rem;letter-spacing:-.02em;color:var(--fg)} .wordmark svg{width:26px;height:26px;fill:currentColor;flex:none} .wordmark.lg{font-size:1.5rem;gap:.9rem} .wordmark.lg svg{width:38px;height:38px} .ghost{font-family:var(--mono);font-size:.78rem;color:var(--muted);transition:color .25s} .ghost:hover{color:var(--fg)} /* burger, morphs to X */ .burger{position:relative;display:inline-flex;align-items:center;gap:11px; height:40px;margin-left:-8px;padding:0 8px} .burger-bars{display:flex;flex-direction:column;justify-content:center;gap:5px; width:24px;height:24px} .burger-bars i{display:block;height:2px;background:var(--fg);border-radius:2px; transition:transform .45s var(--ease),opacity .25s,width .45s var(--ease)} .burger-bars i:nth-child(1){width:24px} .burger-bars i:nth-child(2){width:17px} .burger-bars i:nth-child(3){width:21px} .burger:hover .burger-bars i{width:24px} body.nav-open .burger-bars i{width:24px} body.nav-open .burger-bars i:nth-child(1){transform:translateY(7px) rotate(45deg)} body.nav-open .burger-bars i:nth-child(2){opacity:0;transform:translateX(-10px)} body.nav-open .burger-bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .burger-label{font-family:var(--sans);font-size:.95rem;font-weight:500; letter-spacing:-.01em;color:var(--fg);transition:color .25s} .burger-label::after{content:'Menu'} body.nav-open .burger-label::after{content:'Close'} .burger:hover .burger-label{opacity:.6} /* ============================================================= DRAWER (the bit copied from magebinary) fixed panel, translateX(-100%) -> 0 on a long ease-out curve. Page content never moves, a scrim just drops over it. ============================================================= */ .scrim{position:fixed;inset:0;z-index:80;background:var(--scrim-bg); backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); opacity:0;pointer-events:none;transition:opacity .5s var(--ease)} body.nav-open .scrim{opacity:1;pointer-events:auto} .drawer{ position:fixed;top:0;bottom:0;left:0;z-index:85; width:min(440px,88vw); background:var(--drawer-bg); border-right:1px solid var(--line); transform:translateX(-100%); transition:transform .62s var(--ease); display:flex;flex-direction:column; overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain; } body.nav-open .drawer{transform:translateX(0)} /* accent edge that draws down once open */ .drawer::after{content:'';position:absolute;top:0;right:0;width:3px;height:100%; background:linear-gradient(180deg,transparent,var(--accent),transparent); transform:scaleY(0);transform-origin:top; transition:transform .9s var(--ease) .15s} body.nav-open .drawer::after{transform:scaleY(1)} .drawer-inner{flex:1;display:flex;flex-direction:column;justify-content:space-between; padding:calc(var(--hdr-h) + 34px) clamp(28px,5vw,52px) 40px} .drawer-nav{display:flex;flex-direction:column} .lnk{position:relative;display:flex;align-items:baseline;gap:16px; padding:11px 0;font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.15rem); letter-spacing:-.02em;line-height:1.1;color:var(--fg); opacity:0;transform:translateX(-26px); transition:opacity .6s var(--ease),transform .6s var(--ease),color .25s} body.nav-open .lnk{opacity:1;transform:none; transition-delay:calc(140ms + var(--i) * 45ms)} .lnk-n{font-family:var(--mono);font-size:.68rem;color:var(--muted-2); transition:color .25s;flex:none;width:22px} .lnk-t{position:relative} /* underline wipe, right to left, same gesture as the live nav */ .lnk-t::after{content:'';position:absolute;left:0;bottom:.06em;height:3px;width:100%; background:var(--accent);transform:scaleX(0);transform-origin:right; transition:transform .6s var(--ease)} .lnk:hover .lnk-t::after{transform:scaleX(1);transform-origin:left} .lnk:hover{color:var(--hover)} .lnk:hover .lnk-n{color:var(--hover)} .drawer-foot{padding-top:36px} .drawer-meta{display:flex;justify-content:space-between;gap:16px; padding:12px 0;border-top:1px solid var(--line);font-size:.86rem; opacity:0;transform:translateX(-26px); transition:opacity .6s var(--ease),transform .6s var(--ease)} body.nav-open .drawer-meta{opacity:1;transform:none; transition-delay:calc(140ms + var(--i) * 45ms)} .drawer-meta .k{color:var(--muted-2);font-family:var(--mono);font-size:.74rem} .drawer-meta .v{color:var(--fg);font-family:var(--mono);font-size:.8rem} .drawer-social{display:flex;gap:20px;padding-top:22px; opacity:0;transform:translateX(-26px); transition:opacity .6s var(--ease),transform .6s var(--ease)} body.nav-open .drawer-social{opacity:1;transform:none; transition-delay:calc(140ms + var(--i) * 45ms)} .drawer-social a{font-size:.82rem;color:var(--muted);transition:color .25s} .drawer-social a:hover{color:var(--hover)} /* ============================================================= HERO ============================================================= */ .hero{position:relative;min-height:100svh;display:flex;align-items:center; padding:calc(var(--hdr-h) + 40px) 0 120px;overflow:hidden; background:var(--accent);color:var(--accent-ink); --core-bg:var(--accent); --halo:transparent; --muted:rgba(22,33,12,.74); --muted-2:rgba(22,33,12,.56); --trace-base:var(--accent-ink); --trace-op:.16; --hot:var(--accent-ink); --hot-2:rgba(22,33,12,.5); --pulse:var(--accent-ink); --pulse-glow:rgba(255,255,255,.85); --ripple:rgba(22,33,12,.55); --bloom-op:.13} /* on lime the button inverts to black with lime type, same as .hero2__cta */ .hero .btn-accent{background:var(--accent-ink);color:var(--accent)} .hero .btn-accent:hover{box-shadow:0 10px 26px -12px rgba(22,33,12,.6)} .hero .btn-line{border-color:rgba(22,33,12,.34);color:var(--accent-ink)} .hero .btn-line:hover{border-color:var(--accent-ink);background:rgba(22,33,12,.08)} .hero em{background:var(--accent-ink);color:var(--accent)} .hero .scroll-cue svg{stroke:rgba(22,33,12,.55)} .hero .scroll-cue:hover svg{stroke:var(--accent-ink)} .hero-grid{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut); width:100%;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,80px); align-items:center} .emblem-wrap{position:relative;display:grid;place-items:center; aspect-ratio:1;width:100%;max-width:620px;margin-inline:auto} .emblem-halo{position:absolute;inset:8%;border-radius:50%; background:radial-gradient(circle,var(--halo) 0%,transparent 62%); filter:blur(28px);animation:breathe 7s ease-in-out infinite} @keyframes breathe{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.05)}} .emblem{position:relative;width:100%;height:100%} .emblem svg{width:100%;height:100%} .hero-copy{max-width:660px} .lead{margin-top:22px;font-size:clamp(1rem,1.35vw,1.15rem);color:var(--muted); max-width:52ch;opacity:0;animation:fadeUp .9s var(--ease) .62s forwards} .hero-cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px; opacity:0;animation:fadeUp .9s var(--ease) .75s forwards} .hero-foot{margin-top:34px;display:flex;align-items:center;gap:14px;flex-wrap:wrap; font-family:var(--mono);font-size:.74rem;color:var(--muted-2); opacity:0;animation:fadeUp .9s var(--ease) .88s forwards} .hero-foot i{width:4px;height:4px;border-radius:50%;background:var(--muted-2);display:block} @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .scroll-cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%); display:grid;gap:2px;opacity:0;animation:fadeUp .9s var(--ease) 1.1s forwards} .scroll-cue svg{width:22px;height:13px;fill:none;stroke:var(--muted);stroke-width:2.4; animation:cue 2s ease-in-out infinite} .scroll-cue svg:last-child{animation-delay:.18s;opacity:.5} .scroll-cue:hover svg{stroke:var(--fg)} @keyframes cue{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(5px);opacity:1}} /* ---------- PCB emblem layers ---------- Every layer is absolutely stacked in the same box. Layers 1 and 2 are static and get painted once. Only .sweep and .ripple move, and both are plain transforms, so the board never repaints. */ .emblem>svg,.emblem>div{position:absolute;inset:0;width:100%;height:100%} .pcb-dim{stroke:var(--trace-base);fill:var(--trace-base);stroke-width:2.5; opacity:var(--trace-op);stroke-linecap:round;stroke-linejoin:round} .pcb-dim path{fill:none} .pcb-bloom{filter:blur(7px);opacity:var(--bloom-op)} .pcb-lit{overflow:hidden; -webkit-mask-size:100% 100%;mask-size:100% 100%; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .pcb-lit.soft{filter:blur(1px);opacity:.85} .sweep{position:absolute;inset:-50%;will-change:transform; animation:pcbSpin 26s linear infinite; background:conic-gradient( transparent 0deg, var(--hot) 26deg, transparent 62deg, transparent 128deg, var(--hot) 158deg, transparent 196deg, transparent 300deg, var(--hot-2) 322deg, transparent 348deg)} @keyframes pcbSpin{to{transform:rotate(360deg)}} .ripple{position:absolute;inset:0;mix-blend-mode:var(--ripple-blend); will-change:transform,opacity; background:radial-gradient(circle,transparent 38%,var(--ripple) 50%,transparent 62%); animation:pcbRipple 6s linear infinite} @keyframes pcbRipple{ 0%{transform:scale(.3);opacity:0} 22%{opacity:.85} 100%{transform:scale(1.25);opacity:0} } .pcb-pulse{filter:drop-shadow(0 0 5px var(--pulse-glow))} .pcb-pulse path{fill:none;stroke:var(--pulse);stroke-width:3;stroke-linecap:round} .pcb-mark{fill:var(--fg)} .core-stop{stop-color:var(--core-bg)} /* ============================================================= MARQUEE ============================================================= */ .marquee{padding:26px 0;overflow:hidden;background:#14110f} .marquee-track{display:flex;width:max-content;animation:slide 46s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .marquee-set{display:flex;align-items:center;gap:26px;padding-right:26px} .marquee-set span{font-family:var(--display);font-size:clamp(1.05rem,1.9vw,1.5rem); letter-spacing:-.02em;color:#ffffff;white-space:nowrap} .marquee-set i{color:var(--accent);font-style:normal} @keyframes slide{to{transform:translateX(-50%)}} /* ============================================================= SECTIONS ============================================================= */ .sect{padding:var(--pad-sect) 0;position:relative} .sect.tight{padding-top:0} #value{padding-bottom:clamp(56px,7vw,104px)} main>.sect:last-child{padding-bottom:clamp(56px,7vw,104px)} .sect-head{max-width:720px;margin-bottom:clamp(40px,5vw,70px)} .sect-head p{margin-top:16px;color:var(--muted);font-size:1.05rem} .h-lg.center{margin-bottom:clamp(48px,6vw,88px)} /* reveal on scroll */ .reveal{opacity:0;transform:translateY(26px); transition:opacity .85s var(--ease-2),transform .85s var(--ease-2); transition-delay:var(--d,0ms)} .reveal.in{opacity:1;transform:none} /* value columns */ .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,44px)} .col{position:relative;padding-top:22px;border-top:1px solid var(--line)} .col::before{content:'';position:absolute;top:-2px;left:0;width:38px;height:3px; background:var(--accent)} .col h3{font-family:var(--display);font-size:1.3rem;letter-spacing:-.02em; line-height:1.15;color:var(--deco);font-weight:400;margin-bottom:14px} .col p{color:var(--muted);font-size:.95rem} /* stats */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px)} .stat{border-top:1px solid var(--line);padding-top:20px;position:relative} .stat::before{content:'';position:absolute;top:-2px;left:0;width:0;height:3px; background:var(--accent);transition:width 1.1s var(--ease) .1s} .stat.in::before{width:100%} .stat b{font-family:var(--display);font-size:clamp(2.2rem,4vw,3.2rem); font-weight:400;letter-spacing:-.03em;line-height:1} .stat .u{font-family:var(--display);font-size:clamp(1.1rem,1.6vw,1.4rem); color:var(--muted);margin-left:8px;letter-spacing:-.02em} .stat small{display:block;margin-top:10px;color:var(--muted-2);font-size:.82rem; max-width:26ch} /* service cards */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)} .card{position:relative;display:flex;flex-direction:column; padding:clamp(26px,2.6vw,36px);padding-bottom:78px; border:1px solid var(--line);border-radius:16px; background:var(--ink); overflow:hidden;min-height:250px; transition:border-color .4s,transform .5s var(--ease),background .4s} .card:hover{border-color:var(--fg);background:var(--ink-2);transform:translateY(-5px)} .card-n{font-family:var(--mono);font-size:.7rem;color:var(--muted-2);margin-bottom:auto} .card h3{font-family:var(--display);font-size:1.5rem;letter-spacing:-.02em; font-weight:400;margin:38px 0 12px} .card p{color:var(--muted);font-size:.93rem} .card-go{position:absolute;right:clamp(22px,2.4vw,32px);bottom:clamp(22px,2.4vw,32px); width:34px;height:34px;display:grid;place-items:center;border-radius:50%; border:1px solid var(--line);color:var(--muted);font-size:.9rem; transition:transform .45s var(--ease),background .3s,color .3s,border-color .3s} .card:hover .card-go{background:var(--fg);color:var(--ink); border-color:var(--fg);transform:translateX(4px)} /* the last card is a solid lime block, the way the site uses flat colour */ .card-cta{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .card-cta h3{margin-top:auto;color:var(--accent-ink)} .card-cta p{color:rgba(22,33,12,.78)} .card-cta .card-go{border-color:rgba(22,33,12,.34);color:var(--accent-ink)} .card-cta:hover{background:var(--accent);border-color:var(--accent-ink)} .card-cta:hover .card-go{background:var(--accent-ink);color:var(--accent); border-color:var(--accent-ink)} /* testimonials */ .quotes{background:#14110f; --fg:#ffffff;--muted:#a49e9a;--muted-2:#7a736f; --line:rgba(255,255,255,.15);--line-2:rgba(255,255,255,.28);--deco:var(--accent); color:var(--fg)} .quote-box{position:relative;max-width:860px;margin:0 auto;padding:0 clamp(0px,4vw,60px)} .q-stage{position:relative;min-height:270px} .q{position:absolute;inset:0;opacity:0;transform:translateY(14px); transition:opacity .6s var(--ease-2),transform .6s var(--ease-2);pointer-events:none} .q.is-on{opacity:1;transform:none;position:relative;pointer-events:auto} .q blockquote{font-family:var(--display);font-size:clamp(1.2rem,2.2vw,1.75rem); line-height:1.4;letter-spacing:-.02em} .q blockquote::before{content:'“';color:var(--deco)} .q blockquote::after{content:'”';color:var(--deco)} .q figcaption{margin-top:28px;display:flex;flex-direction:column;gap:2px} .q figcaption b{font-weight:500;font-size:.95rem} .q figcaption span{color:var(--muted-2);font-family:var(--mono);font-size:.76rem} .q-arrow{position:absolute;top:50%;transform:translateY(-50%); width:44px;height:44px;border-radius:50%; border:1px solid var(--line);color:var(--muted);font-size:1.5rem;line-height:0; display:grid;place-items:center;transition:border-color .3s,color .3s} .q-arrow:hover{border-color:var(--fg);color:var(--fg)} .q-arrow.prev{left:-8px} .q-arrow.next{right:-8px} .q-dots{display:flex;gap:9px;justify-content:center;margin-top:36px} .q-dots button{width:8px;height:8px;border-radius:50%;border:1px solid var(--line-2); transition:all .3s} .q-dots button[aria-current="true"]{background:var(--accent);border-color:var(--fg)} /* logo wall */ .logo-wall{display:grid;grid-template-columns:repeat(5,1fr);gap:1px; background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden} .logo-wall .cell{background:var(--ink);aspect-ratio:16/7;display:grid;place-items:center; font-family:var(--display);font-size:clamp(.8rem,1.2vw,1rem);letter-spacing:-.02em; color:var(--muted-2);transition:color .35s,background .35s} .logo-wall .cell:hover{color:var(--fg);background:var(--ink-3)} /* ============================================================= FOOTER ============================================================= */ .ftr{background:var(--ink-2);border-top:1px solid var(--line)} .ftr-cta{padding:clamp(80px,10vw,150px) 0;position:relative;overflow:hidden; border-bottom:1px solid var(--line)} .ftr-cta .wrap{position:relative;display:flex;align-items:flex-end; justify-content:space-between;gap:40px;flex-wrap:wrap} .ftr-cta .h-xl .ln>span{animation:none;transform:translateY(105%); transition:transform .9s var(--ease)} .ftr-cta .h-xl.in .ln>span{transform:none} .ftr-cta .h-xl.in .ln:nth-child(2)>span{transition-delay:.1s} .big-go{display:inline-flex;align-items:center;gap:16px;height:66px;padding:0 12px 0 34px; border-radius:999px;background:var(--fg);color:var(--ink); font-size:1.05rem;font-weight:500;letter-spacing:-.01em; transition:transform .45s var(--ease),box-shadow .4s} .big-go i{width:42px;height:42px;border-radius:50%;background:var(--accent); color:var(--accent-ink);display:grid;place-items:center;font-style:normal; transition:transform .45s var(--ease)} .big-go:hover{transform:translateY(-3px);box-shadow:0 18px 38px -16px rgba(32,29,29,.55)} .big-go:hover i{transform:translateX(4px)} .ftr-body{padding:clamp(56px,7vw,90px) 0} .ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,56px)} .ftr-brand p{margin:20px 0 24px;color:var(--muted);font-size:.92rem;max-width:34ch} .ftr-live{display:flex;align-items:center;gap:16px} .ftr-live .clock{font-family:var(--mono);font-size:.78rem;color:var(--muted-2)} .ftr-col{display:flex;flex-direction:column;gap:11px} .ftr-col h4{font-family:var(--mono);font-size:.72rem;font-weight:500;color:var(--muted-2); text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px} .ftr-col a{font-size:.93rem;color:var(--muted);transition:color .25s,transform .25s var(--ease); width:fit-content} .ftr-col a:hover{color:var(--fg);transform:translateX(3px)} .ftr-bar{border-top:1px solid var(--line);padding:22px 0} .ftr-bar .wrap{display:flex;align-items:center;justify-content:space-between; gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:.74rem;color:var(--muted-2)} .ftr-bar-r{display:flex;align-items:center;gap:24px} .ftr-bar a:hover,.to-top:hover{color:var(--fg)} .to-top{font-family:var(--mono);font-size:.74rem;color:var(--muted-2); display:inline-flex;align-items:center;gap:8px;transition:color .25s} .to-top i{font-style:normal;transition:transform .35s var(--ease)} .to-top:hover i{transform:translateY(-3px)} /* ============================================================= RESPONSIVE ============================================================= */ @media (max-width:1080px){ .cols{grid-template-columns:repeat(2,1fr);row-gap:40px} .stats{grid-template-columns:repeat(2,1fr);row-gap:38px} .cards{grid-template-columns:repeat(2,1fr)} .ftr-grid{grid-template-columns:1fr 1fr} .logo-wall{grid-template-columns:repeat(4,1fr)} } @media (max-width:900px){ .hero-grid{grid-template-columns:1fr} .emblem-wrap{max-width:min(74vw,420px);order:-1} .hero{min-height:auto;padding-bottom:90px} .hero-copy{max-width:none} .scroll-cue{display:none} .burger-label{display:none} } @media (max-width:640px){ :root{--hdr-h:66px} .cols,.stats,.cards,.ftr-grid{grid-template-columns:1fr} .logo-wall{grid-template-columns:repeat(2,1fr)} .q-arrow{display:none} .wordmark.hdr-c span{display:none} .ftr-cta .wrap{align-items:flex-start} .ftr-bar .wrap{justify-content:flex-start} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;transition-duration:.001ms !important} .ln>span,.reveal{transform:none;opacity:1} }