/* home.css — homepage-only styles. Shared chrome lives in site.css. */ *{box-sizing:border-box} html{scroll-behavior:smooth} ::selection{background:rgba(var(--tint-hi-rgb),.28);color:var(--text)} body{ margin:0;cursor:default; background: radial-gradient(ellipse 65% 45% at 18% -8%, rgba(var(--tint-rgb),.16), transparent 58%), radial-gradient(ellipse 55% 40% at 100% 6%, rgba(var(--tint-2-rgb),.12), transparent 55%), var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; } .wrap{max-width:1120px;margin:0 auto;padding:0 24px} /* ── grain texture overlay ──────────────── */ .grain{position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.05;mix-blend-mode:overlay} /* ── cursor glow ────────────────────────── */ .glow{position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%; background:radial-gradient(circle,rgba(var(--tint-hi-rgb),.10) 0%,transparent 68%); pointer-events:none;z-index:1;transform:translate(-50%,-50%); transition:opacity .3s;will-change:transform;display:none} @media(hover:hover){.glow{display:block}} /* reveal-on-scroll lives in assets/site.css */ /* ── Header ─────────────────────────────── */ body > header{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);background:var(--hdr);border-bottom:1px solid var(--line)} /* .theme-toggle lives in assets/site.css; only the offset is local */ .hdr-right .theme-toggle{margin-left:10px} /* padding-BLOCK, not the shorthand: .hdr-inner and .wrap sit on the same element, so `padding:18px 0` also zeroed the 24px inline padding .wrap provides and the logo rendered hard against the screen edge, on this page alone. Only the vertical halves belong to the header. */ .hdr-inner{display:flex;align-items:center;justify-content:space-between;padding-block:18px} body > header{transition:box-shadow .25s ease} .hdr-inner{transition:padding .22s cubic-bezier(.16,.8,.28,1)} body > header.compact .hdr-inner{padding-block:11px} body > header.compact .mark-img{width:29px;height:29px} .mark-img{transition:width .22s,height .22s} .hdr-left{display:flex;align-items:center;gap:22px} .logo-3d{perspective:600px} .word{letter-spacing:-.01em;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:12px;transform-style:preserve-3d;transition:transform .2s ease-out;font:500 1.125rem/1.2 var(--font-display)} .word .wtext{display:inline-block;transition:transform .2s ease-out;transform-style:preserve-3d} .mark-img{width:34px;height:34px;border-radius:10px;flex-shrink:0;object-fit:cover; box-shadow:0 0 0 1px var(--line),0 6px 18px -8px rgba(var(--shadow-rgb),.4); transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s} .word:hover .mark-img{transform:scale(1.08) rotate(-6deg);box-shadow:0 0 0 1px var(--line-bright),0 10px 24px -8px rgba(var(--tint-rgb),.5)} nav{display:flex;gap:32px;align-items:center} nav a{position:relative;color:var(--muted);text-decoration:none;transition:color .2s;padding-bottom:2px;font:500 .875rem/1 var(--font-interface);letter-spacing:-.004em} nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold-bright);transition:width .25s cubic-bezier(.16,.8,.28,1)} nav a:hover{color:var(--gold-bright)} nav a:hover::after{width:100%} /* ── Scroll progress ────────────────────── */ .scroll-progress{position:fixed;top:0;left:0;height:2.5px;width:0%;z-index:70; background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright)); box-shadow:0 0 8px rgba(var(--tint-rgb),.5);transition:width .1s linear} /* ── Scroll to top ──────────────────────── */ .to-top{position:fixed;right:26px;bottom:26px;width:46px;height:46px;border-radius:50%; background:var(--panel);border:1px solid var(--line);color:var(--gold); display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:55; box-shadow:0 10px 26px -10px rgba(var(--shadow-rgb),.35); opacity:0;transform:translateY(12px) scale(.9);pointer-events:none; transition:opacity .35s cubic-bezier(.16,.8,.28,1),transform .35s cubic-bezier(.16,.8,.28,1),border-color .25s,background .25s} .to-top.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto} .to-top:hover{border-color:var(--gold-dim);background:var(--bg2);transform:translateY(-3px) scale(1.04)} /* ── Hero ───────────────────────────────── */ .hero{padding:72px 0 64px;text-align:center;position:relative;overflow:hidden} .aurora{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0;opacity:.55;will-change:transform} .aurora-1{width:420px;height:420px;background:radial-gradient(circle,rgba(var(--tint-rgb),.35),transparent 70%);top:-120px;left:6%;animation:auroraDrift1 22s ease-in-out infinite} .aurora-2{width:360px;height:360px;background:radial-gradient(circle,rgba(var(--tint-2-rgb),.22),transparent 70%);top:40%;right:2%;animation:auroraDrift2 26s ease-in-out infinite} @keyframes auroraDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.12)}} @keyframes auroraDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-35px,-25px) scale(1.08)}} .orbit-svg{position:absolute;top:38%;left:50%;width:840px;max-width:none;height:auto;transform:translate(-50%,-50%);opacity:.34;pointer-events:none;z-index:0} .orbit{fill:none;stroke-linecap:round;transform-origin:400px 400px} .orbit-a{stroke:var(--gold-dim);stroke-width:1.1;stroke-dasharray:1700;stroke-dashoffset:1700;animation:draw 2.8s cubic-bezier(.16,.8,.28,1) .25s forwards,spin 70s linear infinite} .orbit-b{stroke:var(--gold);stroke-width:1.3;stroke-dasharray:1250;stroke-dashoffset:1250;animation:draw 2.8s cubic-bezier(.16,.8,.28,1) .45s forwards,spinRev 50s linear infinite} .orbit-c{stroke:var(--gold-bright);stroke-width:1.5;stroke-dasharray:800;stroke-dashoffset:800;animation:draw 2.8s cubic-bezier(.16,.8,.28,1) .65s forwards,spin 34s linear infinite} @keyframes draw{to{stroke-dashoffset:0}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes spinRev{to{transform:rotate(-360deg)}} .ember{position:absolute;border-radius:50%;background:var(--gold-bright);pointer-events:none;filter:blur(.3px);box-shadow:0 0 10px 2px rgba(var(--tint-hi-rgb),.85)} @keyframes rise{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.85}90%{opacity:.5}100%{transform:translateY(-260px) translateX(var(--drift,20px));opacity:0}} .hero-content{position:relative;z-index:2} .eyebrow{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:34px;opacity:0;animation:fadeUp .7s cubic-bezier(.16,.8,.28,1) .1s forwards} .eyebrow .rule{width:36px;height:1px;background:var(--line-bright)} .eyebrow .label{letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;row-gap:8px;padding:0 12px;font:var(--t-eyebrow)} .eyebrow .label::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold-bright);box-shadow:0 0 8px var(--gold-bright);animation:pulse 2.4s ease-in-out infinite;flex-shrink:0;margin-right:11px} .eb-part{white-space:nowrap} .eb-sep{width:4px;height:4px;border-radius:50%;background:var(--gold-dim);opacity:.75; margin:0 13px;flex-shrink:0;transform:rotate(45deg);border-radius:1px} @media(max-width:560px){ .eb-sep{margin:0 9px} } @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.75)}} @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} h1{ margin:0 auto 26px;letter-spacing:var(--ls-hero);font:var(--t-hero); max-width:20ch;text-wrap:balance} h1 .line{display:block;overflow:hidden} h1 .line span{display:block;opacity:0;transform:translateY(100%);animation:lineUp .9s cubic-bezier(.16,.8,.28,1) forwards} h1 .line:nth-child(1) span{animation-delay:.35s} h1 .line:nth-child(2) span{animation-delay:.48s} @keyframes lineUp{to{opacity:1;transform:translateY(0)}} h1 em{font-style:normal;font-weight:500;background:linear-gradient(120deg,var(--gold-bright),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent} .lede-sub{max-width:560px;margin:14px auto 0;color:var(--muted2);opacity:.85;font:var(--t-body-sm);letter-spacing:var(--ls-body-sm)} .lede{max-width:680px;margin:0 auto;color:var(--muted);text-wrap:balance;opacity:0;animation:fadeUp .8s cubic-bezier(.16,.8,.28,1) .75s forwards;font:var(--t-body-lg);letter-spacing:var(--ls-body-lg)} /* ── hero composition ─────────────────────────── Two columns on desktop: the argument on the left, the product itself on the right. The stack is real CSS 3D — perspective on the stage, preserve-3d on the group, each panel pushed back on Z — so the parallax is geometric rather than three fake offsets. No library: a WebGL runtime would cost more than the entire page currently weighs. */ .hero-stage{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,4vw,64px);align-items:center;text-align:left} .hero-stage .hero-copy{max-width:44rem} .hero-stage h1,.hero-stage .lede,.hero-stage .lede-sub{margin-left:0;margin-right:0} .hero-stage .eyebrow{align-items:flex-start} .hero-stage .hero-actions,.hero-stage .hero-signals{justify-content:flex-start} .hero-showcase{perspective:1400px;perspective-origin:50% 42%; display:flex;justify-content:center;opacity:0; animation:fadeUp .9s cubic-bezier(.16,.8,.28,1) .55s forwards} .dev-stack{position:relative;width:min(300px,72vw);aspect-ratio:560/1120; transform-style:preserve-3d; transform:rotateX(var(--rx,8deg)) rotateY(var(--ry,-16deg)) rotateZ(var(--rz,2deg)); transition:transform .5s cubic-bezier(.16,.8,.28,1); animation:devFloat 9s ease-in-out 1.4s infinite} .dev{position:absolute;inset:0;margin:0;border-radius:26px;overflow:hidden; border:1px solid var(--line-bright);background:var(--panel); box-shadow:0 40px 90px -30px rgba(0,0,0,.65),0 0 0 1px rgba(255,246,230,.05) inset} .dev img{display:block;width:100%;height:100%;object-fit:cover} .dev-1{transform:translateZ(48px)} .dev-2{transform:translateZ(4px) translateX(11%) rotateZ(4deg);opacity:.72;filter:saturate(.8)} .dev-3{transform:translateZ(-40px) translateX(22%) rotateZ(8deg);opacity:.45;filter:saturate(.6)} /* a single moving highlight sells the glass better than any extra shadow */ .dev-glare{position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 32%,rgba(255,246,230,.16) 46%,transparent 58%); transform:translateX(-40%);animation:devGlare 7s ease-in-out 2s infinite} @keyframes devGlare{0%,72%{transform:translateX(-45%)}100%{transform:translateX(45%)}} @keyframes devFloat{0%,100%{translate:0 0}50%{translate:0 -14px}} .dev-badge{position:absolute;left:-16%;bottom:11%;transform:translateZ(96px); display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px; background:var(--glass-strong);border:1px solid var(--glass-brd); -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shd),inset 0 1px 0 var(--glass-hi);white-space:nowrap} .dev-badge img{border-radius:9px;flex-shrink:0} .dev-badge b{display:block;color:var(--text);font:600 .8125rem/1.25 var(--font-interface)} .dev-badge i{display:block;font-style:normal;color:var(--ok); font:var(--t-status);letter-spacing:var(--ls-status);text-transform:uppercase} @media(max-width:940px){ .hero-stage{grid-template-columns:1fr;text-align:center;gap:44px} .hero-stage .hero-copy{max-width:none;margin:0 auto} .hero-stage .eyebrow{align-items:center} .hero-stage .hero-actions,.hero-stage .hero-signals{justify-content:center} .dev-badge{left:auto;right:-6%} } @media(prefers-reduced-motion:reduce){ .dev-stack{animation:none;transition:none} .dev-glare{animation:none;opacity:0} .hero-showcase{animation:none;opacity:1} } /* ── hero composition ─────────────────────────── Two columns: the argument on the left, the product itself on the right. Depth is real CSS 3D — perspective on the stage, preserve-3d on the group, each panel pushed back on its own Z — so the parallax is geometric rather than three faked offsets. No WebGL: a 3D runtime would weigh more than this entire page currently does. */ .hero-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); gap:clamp(30px,4.5vw,68px);align-items:center;text-align:left} .hero-copy{max-width:42rem} .hero-copy h1{max-width:15ch} .hero-copy .lede{max-width:var(--measure-tight)} .hero-copy h1,.hero-copy .lede,.hero-copy .lede-sub{margin-left:0;margin-right:0} .hero-copy .eyebrow{align-items:flex-start} .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px; opacity:0;animation:fadeUp .7s var(--e-out) .9s forwards} .hero-showcase{perspective:1500px;perspective-origin:50% 44%; display:flex;justify-content:center;opacity:0; animation:fadeUp .8s var(--e-out) .5s forwards} .dev-stack{position:relative;width:min(292px,68vw);aspect-ratio:560/1120; transform-style:preserve-3d; transform:rotateX(var(--rx,7deg)) rotateY(var(--ry,-17deg)) rotateZ(var(--rz,2deg)); transition:transform 420ms var(--e-out); animation:devFloat 9s ease-in-out 1.5s infinite} .dev{position:absolute;inset:0;margin:0;border-radius:24px;overflow:hidden; border:1px solid var(--line-bright);background:var(--panel); box-shadow:0 42px 92px -34px rgba(var(--shadow-rgb),.8)} .dev img{display:block;width:100%;height:100%;object-fit:cover} .dev-1{transform:translateZ(46px)} .dev-2{transform:translateZ(2px) translateX(10%) rotateZ(4deg);opacity:.7} .dev-3{transform:translateZ(-42px) translateX(20%) rotateZ(8deg);opacity:.42} /* one travelling highlight sells glass better than another shadow */ .dev-glare{position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.14) 47%,transparent 60%); transform:translateX(-45%);animation:devGlare 8s ease-in-out 2.2s infinite} @keyframes devGlare{0%,74%{transform:translateX(-48%)}100%{transform:translateX(48%)}} @keyframes devFloat{0%,100%{translate:0 0}50%{translate:0 -13px}} .dev-chip{position:absolute;left:-14%;bottom:12%;transform:translateZ(92px); display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:13px; background:var(--glass-strong);border:1px solid var(--glass-brd); -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shd),inset 0 1px 0 var(--glass-hi);white-space:nowrap} .dev-chip img{border-radius:8px;flex-shrink:0} .dev-chip b{display:block;color:var(--text);font:600 .8125rem/1.25 var(--font-interface)} .dev-chip i{display:block;font-style:normal;color:var(--ok); font:var(--t-status);letter-spacing:var(--ls-status);text-transform:uppercase} @media(max-width:940px){ .hero-grid{grid-template-columns:1fr;text-align:center;gap:42px} .hero-copy{max-width:none;margin:0 auto} .hero-copy .eyebrow{align-items:center} .hero-cta{justify-content:center} .dev-chip{left:auto;right:-4%} } @media(prefers-reduced-motion:reduce){ .dev-stack{animation:none;transition:none} .dev-glare{animation:none;opacity:0} .hero-showcase,.hero-cta{animation:none;opacity:1} } /* ── Lyvorian Product Universe ─────────────────── Every colour below is an existing variable or the gold tint already used throughout this sheet. No new colour, no new gradient. */ .universe{max-width:1010px;margin:32px auto 0;text-align:left; display:grid;grid-template-columns:45% 55%;align-items:center;gap:8px; border:1px solid var(--line-bright);border-radius:24px; background:linear-gradient(180deg,rgba(var(--tint-rgb),.05),transparent 72%); padding:34px 38px;position:relative; opacity:0;animation:fadeUp .8s cubic-bezier(.16,.8,.28,1) .88s forwards} .uni-eyebrow{letter-spacing:var(--ls-eyebrow); text-transform:uppercase;color:var(--gold);margin:0 0 12px;font:var(--t-eyebrow)} .uni-title{letter-spacing:-.006em;color:var(--text);margin:0 0 12px;max-width:17ch;font:500 clamp(1.1875rem,1.5vw,1.375rem)/1.3 var(--font-display)} .uni-sub{color:var(--muted);margin:0 0 22px;max-width:32ch;font:var(--t-body-sm);letter-spacing:var(--ls-body-sm)} .uni-cta{min-height:44px} /* orbit */ .uni-orbit{display:flex;flex-direction:column;align-items:center;gap:14px} .orb-stage{position:relative;width:min(330px,100%);aspect-ratio:1;flex-shrink:0} .orb-rings{position:absolute;inset:0;width:100%;height:100%;color:var(--line-bright); opacity:.75;animation:orbDrift 90s linear infinite} @keyframes orbDrift{to{transform:rotate(360deg)}} .orb-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); display:flex;flex-direction:column;align-items:center;gap:5px; width:84px;height:84px;justify-content:center;border-radius:50%; border:1px solid var(--line-bright);background:var(--panel)} .orb-core img{border-radius:9px;opacity:.95} .orb-core span{letter-spacing:.07em; text-transform:uppercase;color:var(--gold);font:600 .6875rem/1 var(--font-interface)} .orb-node{position:absolute;transform:translate(-50%,-50%); display:inline-flex;align-items:center;gap:6px;cursor:pointer;letter-spacing:var(--ls-status); text-transform:uppercase;color:var(--muted2); background:var(--panel);border:1px solid var(--line);border-radius:100px; padding:6px 11px;white-space:nowrap; transition:color .2s,border-color .2s,transform .2s cubic-bezier(.16,.8,.28,1);font:var(--t-status)} .orb-dot{width:5px;height:5px;border-radius:50%;background:var(--gold-dim); flex-shrink:0;transition:background .2s,box-shadow .2s} .orb-node:hover,.orb-node:focus-visible,.orb-node[aria-expanded="true"]{ color:var(--text);border-color:var(--gold-dim);transform:translate(-50%,-50%) scale(1.05)} .orb-node:hover .orb-dot,.orb-node:focus-visible .orb-dot, .orb-node[aria-expanded="true"] .orb-dot{background:var(--gold-bright); box-shadow:0 0 7px var(--gold-bright)} .orb-node.n1{left:50%;top:4%} .orb-node.n2{left:92%;top:28%} .orb-node.n3{left:92%;top:72%} .orb-node.n4{left:50%;top:96%} .orb-node.n5{left:8%;top:72%} .orb-node.n6{left:8%;top:28%} .orb-readout{color:var(--muted2);text-align:center; margin:0;min-height:2.6em;max-width:34ch;font:var(--t-body-sm);letter-spacing:var(--ls-body-sm)} .orb-readout.on{color:var(--muted)} @media(max-width:1080px){ .universe{max-width:900px;padding:30px 30px;gap:6px} .orb-stage{width:min(300px,100%)} } /* tablet - stack, message first */ @media(max-width:900px){ .universe{grid-template-columns:1fr;gap:28px;padding:30px 28px;max-width:620px;text-align:center} .uni-title,.uni-sub{max-width:none;margin-left:auto;margin-right:auto} .uni-msg{display:flex;flex-direction:column;align-items:center} .orb-readout{margin-inline:auto} } @media(max-width:640px){ .universe{margin-top:28px;padding:26px 20px;border-radius:22px} .orb-stage{width:min(280px,100%)} .orb-node{font-size:8.5px;padding:5px 9px} } /* very narrow - four nodes on the ring, the rest as a text row */ @media(max-width:430px){ .orb-stage{width:min(250px,100%)} .orb-node.n2,.orb-node.n5{display:none} /* the side nodes carry the longest labels ("In development" is 129px at the 11px floor) and clear the panel edge at 92%; pulled inboard rather than shrunk, since 11px is the readable minimum */ .orb-node.n3{left:80%} .orb-node.n6{left:20%} .uni-cta{width:100%;justify-content:center} } .btn{display:inline-flex;align-items:center;gap:9px;padding:14px 27px;border-radius:11px;text-decoration:none;transition:transform .25s cubic-bezier(.16,.8,.28,1),box-shadow .25s;position:relative;overflow:hidden;font:var(--t-button);letter-spacing:var(--ls-button)} .btn svg{transition:transform .22s cubic-bezier(.34,1.56,.64,1)} .btn-gold:hover svg{transform:translateX(3px)} .btn-gold{background:linear-gradient(160deg,var(--gold-bright),var(--gold));color:#1a1206;box-shadow:0 10px 34px -10px rgba(var(--tint-rgb),.55)} .btn-gold::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%; background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg);transition:left .6s cubic-bezier(.16,.8,.28,1)} .btn-gold:hover::after{left:120%} .btn-gold:hover{transform:translateY(-3px);box-shadow:0 16px 40px -10px rgba(var(--tint-rgb),.7)} .btn-gold svg{transition:transform .25s cubic-bezier(.16,.8,.28,1)} .btn-gold:hover svg{transform:translateX(4px)} .btn-ghost{border:1px solid var(--line);color:var(--text)} .btn-ghost:hover{border-color:var(--gold-dim);background:rgba(var(--tint-rgb),.07);transform:translateY(-3px)} /* ── Ticker ─────────────────────────────── */ .ticker-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--bg2)} .ticker{display:flex;width:max-content;white-space:nowrap;animation:tickerScroll 26s linear infinite} .ticker-wrap:hover .ticker,.ticker-wrap:focus-within .ticker{animation-play-state:paused} @media(max-width:640px){ .ticker{animation:none;width:auto;white-space:normal;flex-wrap:wrap;justify-content:center} .ticker span:nth-child(n+2){display:none} .ticker span{flex-wrap:wrap;justify-content:center;gap:12px;padding:12px 14px} } .ticker span{letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--muted2);padding:16px 22px;display:inline-flex;align-items:center;gap:22px;font:var(--t-eyebrow)} .ticker span em{font-style:normal;color:var(--gold)} @keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ── Section shell ──────────────────────── */ section{padding:96px 0} .sec-head{max-width:600px;margin:0 auto 60px;text-align:center} /* --gold at 11px measures 3.15:1 on the light page; same treatment as the .kicker on every other page. Dark already passes and keeps the token. */ .sec-eyebrow{letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:#7d5a0e;margin-bottom:14px;font:var(--t-eyebrow)} @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .sec-eyebrow{color:var(--gold)} } :root[data-theme="dark"] .sec-eyebrow{color:var(--gold)} /* max-width:none is load-bearing. This heading was an h2 until the page was given a real h1; home.css carries a bare `h1{max-width:20ch}` for the homepage hero, and with nothing on .sec-title to override it the promoted heading was squeezed from 600px on one line to 292px over three. */ .sec-title{max-width:none;margin:0 0 14px;text-wrap:balance;font:var(--t-h2);letter-spacing:var(--ls-h2)} .sec-sub{color:var(--muted);text-wrap:balance;font:var(--t-body-lg);letter-spacing:var(--ls-body-lg);max-width:62ch} /* ── Product card ───────────────────────── */ /* per-platform availability badges */ /* whole card links to the product page; the CTA sits above it and wins the click */ .card-stretch{position:absolute;inset:0;z-index:1;border-radius:var(--r)} /* not-yet-shipped cards — one on the bench, one on the drawing board */ .tease-stamp{position:absolute;top:22px;right:24px;letter-spacing:var(--ls-status);color:var(--gold);border:1px dashed var(--gold-dim); padding:4px 10px;border-radius:7px;transform:rotate(6deg);opacity:.75;font:var(--t-status)} /* clear the hover arrow */ .tease-icon{background:transparent;border:1.5px dashed var(--line-bright);box-shadow:none;color:var(--gold);flex-shrink:0} .tease-icon span{ display:inline-block;transition:opacity .3s,transform .3s;font:500 1.1875rem/1 var(--font-display)} .tease-icon span.swap{opacity:0;transform:rotate(90deg) scale(.6)} .tease-name{display:flex;flex-direction:column;gap:6px;min-width:0} .redact{display:block;height:13px;border-radius:6px; background:repeating-linear-gradient(-45deg,rgba(var(--shadow-rgb),.32) 0 6px,rgba(var(--shadow-rgb),.16) 6px 12px); position:relative;overflow:hidden} .redact::after{content:'';position:absolute;inset:0; background:linear-gradient(100deg,transparent 20%,rgba(250,243,227,.55),transparent 80%); transform:translateX(-100%);animation:redactShine 3.2s ease-in-out infinite} .redact-a{width:118px} .redact-b{width:76px;animation-delay:.2s} .redact-b::after{animation-delay:.35s} @keyframes redactShine{0%,55%{transform:translateX(-100%)}85%,100%{transform:translateX(100%)}} .tease-hint{letter-spacing:var(--ls-status); text-transform:uppercase;color:var(--muted2);font:var(--t-status)} .tease-typeline{color:var(--muted);min-height:44px;font:450 .875rem/1.6 var(--font-interface);letter-spacing:0em} .type-prefix{color:var(--gold);opacity:.8} .type-caret{display:inline-block;width:7px;height:15px;margin-left:3px;vertical-align:text-bottom; background:var(--gold-bright);animation:caretBlink 1s steps(1) infinite} @keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}} .tease-progress{height:3px;border-radius:3px;background:rgba(var(--shadow-rgb),.15);overflow:hidden;position:relative} .tease-progress i{position:absolute;top:0;bottom:0;width:34%;border-radius:3px; background:linear-gradient(90deg,transparent,var(--gold),var(--gold-bright),var(--gold),transparent); animation:labSweep 2.4s cubic-bezier(.45,.05,.55,.95) infinite} @keyframes labSweep{0%{left:-34%}100%{left:100%}} /* ── Preview button ─────────────────────── */ .btn-preview{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:11px;color:var(--text);cursor:pointer; background:var(--panel);border:1px solid var(--line); box-shadow:0 10px 26px -14px rgba(var(--shadow-rgb),.3); transition:transform .25s cubic-bezier(.16,.8,.28,1),border-color .25s,box-shadow .25s;font:var(--t-button);letter-spacing:var(--ls-button)} .btn-preview:hover{transform:translateY(-3px);border-color:var(--gold-dim);box-shadow:0 16px 36px -14px rgba(var(--tint-rgb),.4)} /* ── Gallery modal (all screens) ────────── */ .gallery{position:fixed;inset:0;z-index:290;overflow-y:auto; background:rgba(var(--shadow-rgb),.55);backdrop-filter:blur(16px); opacity:0;pointer-events:none;transition:opacity .35s ease} .gallery.open{opacity:1;pointer-events:auto} .gallery-inner{max-width:1060px;margin:0 auto;padding:80px 24px 60px} .gallery-head{text-align:center;margin-bottom:38px} .gallery-title{color:#faf3e3;margin:0 0 8px; text-shadow:0 2px 18px rgba(0,0,0,.35);font:var(--t-h3);letter-spacing:var(--ls-h3)} .gallery-sub{letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:rgba(250,243,227,.75);font:var(--t-eyebrow)} .gallery-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px} @media(max-width:900px){.gallery-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:600px){.gallery-grid{grid-template-columns:repeat(2,1fr)}} .shot{border-radius:18px;overflow:hidden;position:relative;cursor:pointer; border:1px solid rgba(250,243,227,.22);background:var(--panel); box-shadow:0 18px 44px -18px rgba(0,0,0,.5); opacity:0;transform:translateY(22px) scale(.96); transition:transform .4s cubic-bezier(.16,.8,.28,1),box-shadow .4s,opacity .5s} .gallery.open .shot{opacity:1;transform:translateY(0) scale(1)} .gallery.open .shot:nth-child(1){transition-delay:.05s} .gallery.open .shot:nth-child(2){transition-delay:.12s} .gallery.open .shot:nth-child(3){transition-delay:.19s} .gallery.open .shot:nth-child(4){transition-delay:.26s} .gallery.open .shot:nth-child(5){transition-delay:.33s} .shot:hover{transform:translateY(-8px) scale(1.03)!important;box-shadow:0 30px 60px -20px rgba(var(--tint-rgb),.55)} .shot img{display:block;width:100%;height:auto} .shot-name{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;text-align:center; background:linear-gradient(180deg,transparent,rgba(var(--shadow-rgb),.72));letter-spacing:var(--ls-status);text-transform:uppercase;color:#faf3e3;font:var(--t-status)} .gallery .lb-close{z-index:295} /* ── Click sparkle ──────────────────────── */ .sparkle{position:fixed;pointer-events:none;z-index:500;width:10px;height:10px; transform:translate(-50%,-50%)} .sparkle::before{content:'';position:absolute;inset:0;border-radius:50%; background:radial-gradient(circle,#fff 0%,#ffe9a8 35%,var(--gold-bright) 70%,transparent 100%); box-shadow:0 0 12px 3px rgba(255,214,120,.95),0 0 26px 8px rgba(var(--tint-rgb),.6)} @keyframes sparkleFly{ 0%{transform:translate(-50%,-50%) translate(0,0) scale(1);opacity:1} 100%{transform:translate(-50%,-50%) translate(var(--sx),var(--sy)) scale(0);opacity:0} } .sparkle-star{position:fixed;pointer-events:none;z-index:500;color:#ffdf8e; transform:translate(-50%,-50%);filter:drop-shadow(0 0 8px rgba(255,214,120,1)) drop-shadow(0 0 18px rgba(var(--tint-rgb),.8))} @keyframes starPop{ 0%{transform:translate(-50%,-50%) scale(0) rotate(0deg);opacity:1} 55%{transform:translate(-50%,-50%) scale(1.25) rotate(140deg);opacity:1} 100%{transform:translate(-50%,-50%) scale(0) rotate(220deg);opacity:0} } /* ── Lightbox ───────────────────────────── */ .lightbox{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center; background:rgba(var(--shadow-rgb),.6);backdrop-filter:blur(14px); opacity:0;pointer-events:none;transition:opacity .35s ease} .lightbox.open{opacity:1;pointer-events:auto} .lb-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:92vw} .lightbox img{max-height:82vh;max-width:88vw;border-radius:22px;display:block; box-shadow:0 40px 110px -30px rgba(0,0,0,.6); transform:scale(.92) translateY(12px);transition:transform .4s cubic-bezier(.16,.8,.28,1)} .lightbox.open img{transform:scale(1) translateY(0)} .lb-caption{letter-spacing:var(--ls-status);text-transform:uppercase; color:#faf3e3;text-shadow:0 1px 8px rgba(0,0,0,.5);font:var(--t-status)} .lb-close{position:fixed;top:22px;right:26px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(250,243,227,.3); background:rgba(250,243,227,.12);color:#faf3e3;font-size:20px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s} .lb-close:hover{background:rgba(250,243,227,.25);transform:rotate(90deg)} .lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%; border:1px solid rgba(250,243,227,.3);background:rgba(250,243,227,.12);color:#faf3e3;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s} .lb-nav:hover{background:rgba(250,243,227,.25)} .lb-prev{left:26px}.lb-prev:hover{transform:translateY(-50%) translateX(-3px)} .lb-next{right:26px}.lb-next:hover{transform:translateY(-50%) translateX(3px)} @media(max-width:820px){.lb-nav{width:40px;height:40px}.lb-prev{left:10px}.lb-next{right:10px}} /* ── Custom cursor ──────────────────────────────────────────────── Three jobs, in priority order: 1. POSITION TRUTH. The dot never lags. Whatever else moves, the 6px dot is exactly where the pointer is, so precision is never traded for style. 2. NAME THE TARGET. The ring morphs to the hovered element's own box and corner radius instead of vaguely swelling. A generic circle says "something is here"; a ring the size and shape of the button says "this, exactly". That is the real usability gain over the previous version. 3. MASS. The ring stretches along its own lag vector, so a fast flick squashes and settles. Motion reads as physical rather than as a value being interpolated. Transform is owned entirely by JS (position + stretch), so no rule here may set it — width/height/radius carry the morph via these transitions instead. */ .cursor-dot,.cursor-ring,.cursor-label{position:fixed;top:0;left:0; pointer-events:none;z-index:400;display:none;will-change:transform} .cursor-dot{width:8px;height:8px;border-radius:50%; background:var(--gold-bright); box-shadow:0 0 14px rgba(var(--tint-hi-rgb),.9),0 0 4px rgba(var(--tint-hi-rgb),1); transition:opacity .18s ease} .cursor-ring{width:40px;height:40px;border-radius:50%; border:1.5px solid var(--gold);opacity:.75; background:rgba(var(--tint-rgb),.07); box-shadow:0 0 20px rgba(var(--tint-rgb),.28),inset 0 0 14px rgba(var(--tint-rgb),.10); transition:width .3s cubic-bezier(.16,.8,.28,1), height .3s cubic-bezier(.16,.8,.28,1), border-radius .3s cubic-bezier(.16,.8,.28,1), opacity .25s ease,border-color .25s ease,background-color .25s ease, box-shadow .25s ease} /* locked onto something clickable — brighter, fuller, unmistakable */ .cursor-ring.snap{opacity:1;border-color:var(--gold-bright); background:rgba(var(--tint-rgb),.16); box-shadow:0 0 30px rgba(var(--tint-rgb),.45),inset 0 0 18px rgba(var(--tint-rgb),.16)} .cursor-ring.press{background:rgba(var(--tint-rgb),.3); box-shadow:0 0 36px rgba(var(--tint-hi-rgb),.55)} /* the dot would only clutter the middle of a snapped outline */ .cursor-dot.quiet{opacity:0} /* stop nagging while the page is being read, not navigated */ .cursor-ring.idle{opacity:.3} .cursor-dot.off,.cursor-ring.off,.cursor-label.off{opacity:0} /* Says what the click will DO, not merely that it can be clicked. Only appears where the answer is not obvious from the element itself. */ .cursor-label{z-index:401; font:700 .625rem/1 var(--font-interface);letter-spacing:.12em;text-transform:uppercase; color:#1a1206;background:var(--gold-bright); padding:7px 11px;border-radius:100px;white-space:nowrap; box-shadow:0 8px 22px -8px rgba(0,0,0,.6); opacity:0;transition:opacity .16s ease} .cursor-label.on{opacity:1} @media(hover:hover) and (pointer:fine){ body.custom-cursor,body.custom-cursor a,body.custom-cursor button, body.custom-cursor label,body.custom-cursor .shot{cursor:none} /* text fields keep a real caret — hiding it there costs usability for no aesthetic gain, and you cannot see where you are typing */ body.custom-cursor input,body.custom-cursor textarea,body.custom-cursor select, body.custom-cursor [contenteditable="true"]{cursor:auto} body.custom-cursor .cursor-dot,body.custom-cursor .cursor-ring, body.custom-cursor .cursor-label{display:block} } /* ── Roadmap ────────────────────────────── */ .roadmap-list{max-width:560px;margin:0 auto;display:flex;flex-direction:column} .roadmap-item{display:flex;gap:20px;align-items:flex-start;padding:22px 4px;border-bottom:1px solid var(--line)} .roadmap-item:last-child{border-bottom:none} .roadmap-dot{width:12px;height:12px;border-radius:50%;margin-top:6px;flex-shrink:0;position:relative} .roadmap-dot.done{background:#5da271;box-shadow:0 0 0 4px rgba(93,162,113,.18)} .roadmap-dot.next{background:var(--gold);box-shadow:0 0 0 4px rgba(var(--tint-rgb),.18)} .roadmap-dot.next::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--gold);animation:ripple 2s ease-out infinite} .roadmap-dot.later{background:transparent;border:2px solid var(--muted2)} @keyframes ripple{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.8);opacity:0}} .roadmap-title{margin:0 0 4px;color:var(--text);font:600 1.0625rem/1.35 var(--font-interface);letter-spacing:-.016em} .roadmap-desc{color:var(--muted);margin:0;font:var(--t-body-sm);letter-spacing:var(--ls-body-sm)} .roadmap-tag{letter-spacing:var(--ls-status);text-transform:uppercase;color:var(--gold);margin-left:10px;font:var(--t-status)} /* ── Values ─────────────────────────────── */ .values{padding-top:0} .value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .value-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px; text-align:left;transition:transform .4s cubic-bezier(.16,.8,.28,1),border-color .3s,box-shadow .4s} .value-card:hover{transform:translateY(-6px);border-color:var(--gold-dim);box-shadow:0 20px 44px -18px rgba(var(--shadow-rgb),.25)} .value-num{letter-spacing:-.01em;color:var(--gold);margin-bottom:16px;display:block;font:600 .6875rem/1 var(--font-interface)} .value-title{margin:0 0 10px;color:var(--text);font:500 1.1875rem/1.3 var(--font-display);letter-spacing:-.006em} .value-desc{color:var(--muted);margin:0;font:var(--t-body-sm);letter-spacing:var(--ls-body-sm)} /* ── Story (About) ──────────────────────── */ .story{ padding:64px 0; background:radial-gradient(circle at 50% 30%, rgba(var(--tint-rgb),.07), transparent 62%), var(--bg2); border-top:1px solid var(--line);border-bottom:1px solid var(--line); position:relative;overflow:hidden; display:flex;align-items:center;min-height:440px; } .orbit-figure{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); height:min(70vh,400px);width:auto;max-width:90vw;opacity:.18;pointer-events:none;z-index:0} .orbit-figure .orbit{stroke:var(--gold-bright)} .story-inner{max-width:620px;margin:0 auto;text-align:center;position:relative;z-index:1;padding:0 24px} .story blockquote{color:var(--text);margin:0 0 20px;text-wrap:balance; text-shadow:0 2px 20px rgba(var(--shadow-rgb),.1);font:var(--t-quote);letter-spacing:var(--ls-quote);font-style:normal} .story blockquote .word{display:inline-block;opacity:0;filter:blur(3px);transition:opacity .6s ease,filter .6s ease} .story blockquote.in .word{opacity:1;filter:blur(0)} .story cite{color:var(--gold);letter-spacing:var(--ls-status);text-transform:uppercase;font:var(--t-status);font-style:normal} /* ── Ideas / share thoughts ─────────────── */ .f-label{letter-spacing:var(--ls-form-label); text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px;font:var(--t-form-label)} .field-wrap{position:relative} @media(max-width:600px){.two-col{grid-template-columns:1fr}} .char-count{position:absolute;bottom:10px;right:14px;letter-spacing:var(--ls-caption);color:var(--muted);pointer-events:none; transition:color .25s;font:var(--t-caption)} .char-count.warm{color:var(--gold)} .btn-send{display:inline-flex;align-items:center;gap:9px;padding:14px 28px;border-radius:12px;border:none;cursor:pointer;color:#1a1206; background:linear-gradient(160deg,var(--gold-bright),var(--gold)); box-shadow:0 10px 30px -10px rgba(var(--tint-rgb),.55);position:relative;overflow:hidden; transition:transform .25s cubic-bezier(.16,.8,.28,1),box-shadow .25s;font:var(--t-button);letter-spacing:var(--ls-button)} .btn-send::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%; background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg);transition:left .6s cubic-bezier(.16,.8,.28,1)} .btn-send:hover::after{left:120%} .btn-send:hover{transform:translateY(-3px);box-shadow:0 16px 38px -10px rgba(var(--tint-rgb),.7)} .btn-send svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)} .btn-send:hover svg{transform:translateX(3px) rotate(-12deg)} .idea-toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);z-index:320; background:var(--text);color:var(--bg); padding:13px 22px;border-radius:100px;box-shadow:0 18px 44px -14px rgba(var(--shadow-rgb),.5); display:flex;align-items:center;gap:9px;opacity:0;pointer-events:none; transition:opacity .4s cubic-bezier(.16,.8,.28,1),transform .4s cubic-bezier(.16,.8,.28,1);font:550 .875rem/1.4 var(--font-interface);letter-spacing:-.004em} .idea-toast.show{opacity:1;transform:translate(-50%,0)} .idea-toast svg{color:#8fe09f} @media(max-width:820px){ } /* ── Studio notes ───────────────────────── */ .notes{padding:0 0 96px} .notes-list{max-width:560px;margin:0 auto;display:flex;flex-direction:column} .notes-more{text-align:center;margin-top:26px} .notes-more a{letter-spacing:var(--ls-button); text-transform:uppercase;color:var(--gold);text-decoration:none; border:1px solid var(--line-bright);border-radius:100px;padding:9px 18px; display:inline-block;transition:border-color .2s,color .2s,transform .2s;font:var(--t-button)} .notes-more a:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-2px)} .note-item{display:flex;gap:22px;align-items:baseline;padding:13px 4px;border-bottom:1px solid var(--line);color:var(--muted);font:var(--t-body-sm);letter-spacing:var(--ls-body-sm)} .note-item:last-child{border-bottom:none} .note-date{letter-spacing:var(--ls-status);color:var(--gold); flex-shrink:0;width:86px;font:var(--t-status)} /* ── Footer ─────────────────────────────── */ footer{padding:52px 0 44px;position:relative;overflow:hidden} footer::before{content:'';position:absolute;top:0;left:50%;width:60%;height:1px;transform:translateX(-50%); background:linear-gradient(90deg,transparent,var(--line-bright),transparent)} .foot-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px} .foot-word{color:var(--muted);font:500 .9375rem/1.5 var(--font-display);letter-spacing:0em} .foot-links{display:flex;gap:26px} .foot-links a{color:var(--muted2);text-decoration:none;transition:color .2s;font:400 .875rem/1.5 var(--font-interface);letter-spacing:0em} .foot-links a:hover{color:var(--gold)} @media(max-width:820px){ .value-grid{grid-template-columns:1fr} nav{display:none} .hero{padding:96px 0 76px} .orbit-svg{width:620px;opacity:.32} .ticker span{font-size:11px;padding:13px 16px} .aurora-1,.aurora-2{width:260px;height:260px} .to-top{right:18px;bottom:18px;width:42px;height:42px} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .reveal{opacity:1;transform:none} } /* ── Shape what comes next ─────────────────── Existing variables only; no new colour, no new gradient. */ .fb-panel{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:38% 62%; border:1px solid var(--line-bright);border-radius:24px;overflow:hidden; background:linear-gradient(180deg,rgba(var(--tint-rgb),.045),transparent 60%)} .fb-intro{padding:40px 36px;border-right:1px solid var(--line)} .fb-eyebrow{letter-spacing:var(--ls-eyebrow); text-transform:uppercase;color:var(--gold);margin:0 0 12px;font:var(--t-eyebrow)} .fb-title{ letter-spacing:-.006em;color:var(--text);margin:0 0 12px;font:500 clamp(1.25rem,1.6vw,1.5rem)/1.3 var(--font-display)} .fb-lead{color:var(--muted);margin:0 0 24px;font:var(--t-body-sm);letter-spacing:var(--ls-body-sm)} .fb-steps-list{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:12px} .fb-steps-list li{display:flex;align-items:flex-start;gap:11px;color:var(--muted);font:var(--t-body-sm);letter-spacing:var(--ls-body-sm)} .fb-steps-list span{flex-shrink:0;width:21px;height:21px;border-radius:50%; border:1px solid var(--line-bright);color:var(--gold); display:flex;align-items:center;justify-content:center;font:600 .75rem/1 var(--font-interface);letter-spacing:0em} .fb-privacy{display:flex;gap:9px;align-items:flex-start;color:var(--muted);margin:0;font:var(--t-caption);letter-spacing:var(--ls-caption)} .fb-privacy svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;color:var(--gold-dim)} .fb-form{padding:36px 34px} .fb-progress{list-style:none;display:flex;gap:10px;padding:0;margin:0 0 26px;flex-wrap:wrap} .fb-progress li{display:flex;align-items:center;gap:7px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted); padding:6px 12px;border:1px solid var(--line);border-radius:100px;font:500 .6875rem/1 var(--font-interface)} .fb-pnum{width:16px;height:16px;border-radius:50%;border:1px solid var(--line-bright); display:flex;align-items:center;justify-content:center;font:600 .6875rem/1 var(--font-interface)} .fb-progress li.on{color:var(--text);border-color:var(--gold-dim);font-weight:700} .fb-progress li.on .fb-pnum{background:var(--gold);color:#1a1206;border-color:var(--gold)} .fb-progress li.done .fb-pnum::after{content:'✓';font-size:9px} .fb-progress li.done .fb-pnum{color:var(--gold)} .fb-progress li.done{color:var(--muted)} .fb-srstep{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .fb-step{display:none;border:0;padding:0;margin:0;min-inline-size:0} .fb-step.on{display:block;animation:fbIn .26s cubic-bezier(.16,.8,.28,1)} @keyframes fbIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .fb-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin:14px 0 22px} .fb-cat{position:relative;display:block;cursor:pointer} .fb-cat input{position:absolute;opacity:0;width:1px;height:1px} .fb-cat-in{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto; gap:3px 11px;align-items:start;padding:15px 15px;border-radius:16px; border:1px solid var(--line);background:var(--panel);position:relative; transition:border-color .19s,transform .19s cubic-bezier(.16,.8,.28,1)} .fb-cat-icon{width:19px;height:19px;color:var(--gold);grid-row:1/3;align-self:center} .fb-cat-t{color:var(--text);font:600 .9375rem/1.35 var(--font-interface);letter-spacing:-.012em} .fb-cat-d{color:var(--muted);font:400 .8125rem/1.55 var(--font-interface);letter-spacing:0em} .fb-tick{width:15px;height:15px;position:absolute;top:13px;right:13px;color:var(--gold); opacity:0;transition:opacity .19s} .fb-cat:hover .fb-cat-in{border-color:var(--gold-dim);transform:translateY(-2px)} .fb-cat input:focus-visible + .fb-cat-in{outline:2px solid var(--focus);outline-offset:3px} .fb-cat input:checked + .fb-cat-in{border-color:var(--gold);background:var(--bg2)} .fb-cat input:checked + .fb-cat-in .fb-tick{opacity:1} .fb-nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:20px} .fb-back{background:none;border:1px solid var(--line);border-radius:11px;color:var(--muted);padding:12px 20px;min-height:44px;cursor:pointer; transition:border-color .19s,color .19s;font:var(--t-button);letter-spacing:var(--ls-button)} .fb-back:hover{border-color:var(--gold-dim);color:var(--text)} .fb-sm{display:block;margin-top:16px} .fb-opt{opacity:.6;font-weight:400} .fb-hint{color:var(--muted);margin:8px 0 0;font:var(--t-caption);letter-spacing:var(--ls-caption)} .fb-err{color:var(--maroon);margin:8px 0 0;font:550 .8125rem/1.5 var(--font-interface);letter-spacing:0em} .fb-addname{background:none;border:0;color:var(--gold);cursor:pointer; padding:12px 0;min-height:44px;font:550 .8125rem/1.5 var(--font-interface);letter-spacing:-.002em} .fb-addname:hover{color:var(--gold-bright)} .fb-done{padding:52px 36px;text-align:center;display:flex;flex-direction:column; align-items:center;gap:12px;grid-column:1/-1} /* The confirmation panel replaces the whole card, not just the form column. .fb-panel is a 38%/62% grid: hiding the form left the intro aside sitting in column 1, so .fb-done — which spans 1/-1 — wrapped onto a SECOND ROW underneath it, with an empty 62% gap above. The panel looked like it had fallen to the bottom of the card, because it had. Hiding the aside too leaves .fb-done as the only child, so it centres in the card. */ .fb-panel.is-done{grid-template-columns:1fr} .fb-panel.is-done > .fb-intro{display:none} /* The mark is an emoji, not an SVG. A 48px BOX does nothing for a glyph — it needs a font-size — and the box would leave it on the text baseline inside a flex column. Sized as type, keeping the fbPop entrance. */ .fb-done-namaste{font-size:40px;line-height:1.1;display:block; width:auto;height:auto;text-align:center} .fb-done-mark{width:48px;height:48px;color:var(--gold); animation:fbPop .42s cubic-bezier(.34,1.56,.64,1)} @keyframes fbPop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}} .fb-done h3{color:var(--text);margin:6px 0 0;font:var(--t-h3);letter-spacing:var(--ls-h3)} .fb-done p{color:var(--muted);margin:0;max-width:44ch;font:var(--t-body-sm);letter-spacing:var(--ls-body-sm)} .fb-done-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:10px} .fb-done-actions .btn-send{text-decoration:none} @media(max-width:960px){ .fb-panel{grid-template-columns:1fr} .fb-intro{border-right:0;border-bottom:1px solid var(--line);padding:32px 26px} .fb-form{padding:28px 26px} } @media(max-width:560px){ .fb-cats{grid-template-columns:1fr} .fb-nav .btn-send,.fb-nav .fb-back{flex:1 1 100%;justify-content:center} .fb-progress li{font-size:9px;padding:5px 9px} .fb-intro,.fb-form{padding:24px 18px} } /* ── Products grid ─────────────────────────── One reusable card; the grid takes any number of them. Existing vars only. */ .pfilters{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:0 0 14px} .pfilter{letter-spacing:var(--ls-status); text-transform:uppercase;color:var(--muted2);background:none; border:1px solid var(--line);border-radius:100px;padding:9px 16px;min-height:38px; cursor:pointer;transition:color .19s,border-color .19s;font:var(--t-status)} .pfilter:hover{color:var(--text);border-color:var(--gold-dim)} .pfilter.on{color:var(--text);border-color:var(--gold);background:var(--bg2)} /* selection is carried by a mark as well as colour */ .pfilter.on::before{content:'✓ ';color:var(--gold)} .pfilter-count{text-align:center;color:var(--muted2);margin:0 0 30px;font:var(--t-caption);letter-spacing:var(--ls-caption)} /* five products: 3 + 2. At two columns the fifth card would sit alone. */ .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch} .pcard{position:relative;display:flex;flex-direction:column;gap:12px;text-align:left; padding:22px 20px;border:1px solid var(--line);border-radius:22px; background:var(--panel);overflow:hidden; transition:transform .22s cubic-bezier(.16,.8,.28,1),border-color .22s} .pcard:hover{transform:translateY(-3px);border-color:var(--gold-dim)} .pcard[hidden]{display:none} .pcard-head{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center} .pcard-icon{border-radius:13px;flex-shrink:0;transition:transform .22s cubic-bezier(.34,1.56,.64,1)} .pcard:hover .pcard-icon{transform:scale(1.06) rotate(-4deg)} .pcard-name{ color:var(--text);margin:0 0 7px;letter-spacing:var(--ls-card-title);font:var(--t-card-title)} .pcard-arrow{color:var(--gold-dim);opacity:0;transform:translateX(-4px); transition:opacity .22s,transform .22s;align-self:start;margin-top:4px} .pcard:hover .pcard-arrow{opacity:1;transform:none} .pchip{display:inline-flex;align-items:center;gap:7px;letter-spacing:var(--ls-status);text-transform:uppercase;color:var(--muted2); border:0;padding:0;font:var(--t-status)} .pchip i{width:5px;height:5px;border-radius:50%;flex-shrink:0} .pchip-live{color:var(--ok)} .pchip-live i{background:var(--ok-dot);box-shadow:0 0 6px var(--ok-dot)} .pchip-wip{color:var(--gold)} .pchip-wip i{background:var(--gold-bright)} .pcard-benefit{color:var(--muted);margin:0;font:400 .875rem/1.6 var(--font-interface);letter-spacing:0em} .pcard-feats{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px} /* --muted, not --muted2: on the card surface muted2 measured 3.8:1 in light and 4.0:1 in dark — both under the 4.5:1 AA floor, and already failing before the glass layer existed. This reads 6.3 / 6.0. */ .pcard-feats li{position:relative;padding-left:18px;color:var(--muted);font:400 .8125rem/1.55 var(--font-interface);letter-spacing:0em} .pcard-feats li::before{content:'';position:absolute;left:4px;top:8px;width:5px;height:5px; border-radius:50%;background:var(--gold);opacity:.65} /* -- platform row ----------------------------- One live-state pill and the real Play badge, matched to the same 40px height so they read as a pair rather than two unrelated objects. The badge is Google's artwork: no background, no filter, no recolour, and its built-in clear space left intact -- only the hover lift is ours. z-index sits on the ROW, not just the link: `.pcard > *` makes each direct child its own stacking context, so a z-index on the anchor alone could never rise past the .card-stretch overlay. */ .pcard-plat{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0; position:relative;z-index:3} .pcard-plat span{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px; border-radius:11px;background:var(--glass);border:1px solid var(--glass-brd); box-shadow:inset 0 1px 0 var(--glass-hi); font:var(--t-status);letter-spacing:var(--ls-status);text-transform:uppercase; color:var(--muted2);white-space:nowrap} .pcard-plat span.plat-live{color:var(--ok);border-color:var(--ok-dot)} .pcard-plat span.plat-live::before{content:'';width:6px;height:6px;border-radius:50%; background:var(--ok-dot);box-shadow:0 0 7px var(--ok-dot);flex-shrink:0} .plat-play{display:inline-flex;border-radius:9px; transition:transform .25s cubic-bezier(.16,.8,.28,1)} .plat-play img{display:block;height:40px;width:auto} .plat-play:hover{transform:translateY(-2px)} .plat-play:focus-visible{outline:2px solid var(--focus);outline-offset:3px} @media(prefers-reduced-motion:reduce){.plat-play:hover{transform:none}} .pcard-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:10px;align-items:center;position:relative;z-index:2} .pcard-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--gold);text-decoration:none; transition:color .19s;font:var(--t-button);letter-spacing:var(--ls-button)} .pcard-go:hover{color:var(--gold-bright)} .pcard-go svg{transition:transform .19s cubic-bezier(.34,1.56,.64,1)} .pcard-go:hover svg{transform:translateX(3px)} /* inline-flex so this works as an as well as a