/* ========================================================================== Beanome — brand site · one stylesheet 1. Tokens — every colour the page uses, light first, dark as one override 2. Base — reset, type, helpers 3. Parts — nav, buttons, chips, glass 4. Sections — hero, ticker, questions, steps, isaac, bento, principles, status, cta, footer 5. Motion + responsive Theming: the resolved appearance is stamped on (explicit choice, else system — the same precedence the app uses). Only the token block changes between appearances; no rule below it names a raw colour except the fixed surfaces (product mock, map canvas, the bean). ========================================================================== */ /* ---------- 0. TYPEFACES — served from this origin, same files as the app (SIL OFL) ---------- */ @font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/hanken-grotesk-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/hanken-grotesk-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/jetbrains-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/jetbrains-mono-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ---------- 1. TOKENS ---------- */ :root{ color-scheme:light; /* page */ --bg:#f1f4f5; --bg-deep:#e7ecee; --panel:#ffffff; --heading:#0f1c24; --ink:#14201f; --ink-2:#3f5153; --ink-3:#6d7f82; --outline:#c4cdcf; --hairline:rgba(20,32,31,.08); --hairline-strong:rgba(20,32,31,.12); --tint:rgba(20,32,31,.05); /* hover wash */ /* accent — the product's teal on a light ground */ --accent:#0a6273; --accent-hi:#0e8a9e; --accent-soft:rgba(10,98,115,.10); --accent-line:rgba(10,98,115,.16); --accent-ring:rgba(14,138,158,.18); --accent-shadow:rgba(10,98,115,.28); --accent-shadow-hi:rgba(10,98,115,.38); --gradient-text:linear-gradient(95deg,var(--accent) 0%,var(--accent-hi) 55%,var(--roast-hi) 140%); /* glass surfaces + elevation */ --glass:rgba(255,255,255,.72); --glass-solid:rgba(255,255,255,.86); --glass-edge:rgba(255,255,255,.6); --glass-border:rgba(20,32,31,.08); --chip-bg:rgba(255,255,255,.8); --input-bg:rgba(255,255,255,.75); --node-bg:rgba(255,255,255,.7); --ticker-bg:rgba(255,255,255,.55); --shadow-1:0 20px 40px rgba(15,28,36,.05),0 4px 8px rgba(15,28,36,.03); --shadow-2:0 30px 60px rgba(15,28,36,.09),0 6px 12px rgba(15,28,36,.04); --frame-ring:rgba(255,255,255,.5); /* halo around the product mock */ --bean-shadow:rgba(15,28,36,.2); /* ambient glows */ --glow-a:linear-gradient(60deg,rgba(14,138,158,.18),rgba(0,229,255,.10),transparent 70%); --glow-b:radial-gradient(circle,rgba(168,102,60,.16),rgba(245,177,61,.05) 45%,transparent 70%); --cta-wash:linear-gradient(120deg,rgba(255,255,255,.85),rgba(255,255,255,.55)); --cta-glow-1:rgba(0,229,255,.2); --cta-glow-2:rgba(168,102,60,.18); /* status */ --green:#1f9d6a; --amber:#d4901c; --red:#d8434f; /* brand — fixed in both appearances (a logo that changes colour is not a logo) */ --blue:#3c6494; --roast:#6f3c22; --roast-hi:#a8663c; --wordmark-brown:#8c4a32; /* the product's dark appearance — used by the mock and the Isaac band in BOTH themes; the map canvas is a data surface and does not theme */ --d-bg-deep:#0a0f10; --d-bg:#0d1516; --d-panel:#101a1b; --d-panel-hi:#15211f; --d-border:#1e2a2b; --d-border-strong:#26383a; --d-text:#e8f1f1; --d-text2:#a7b7b9; --d-text3:#91a1a4; --cyan:#00e5ff; --cyan-soft:rgba(0,229,255,.10); --cyan-line:rgba(0,229,255,.25); --green-d:#34d399; --amber-d:#f5b13d; --red-d:#ff6978; --map-canvas:#070d0e; --map-land:#0b1618; --sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --r-card:1rem; --r-btn:.5rem; --r-pill:9999px; --container:1200px; --gutter:24px; --nav-h:64px; } :root[data-theme="dark"]{ color-scheme:dark; --bg:#0d1516; --bg-deep:#0a0f10; --panel:#101a1b; --heading:#f2f7f7; --ink:#e8f1f1; --ink-2:#a7b7b9; --ink-3:#91a1a4; --outline:#26383a; --hairline:rgba(255,255,255,.08); --hairline-strong:rgba(255,255,255,.14); --tint:rgba(255,255,255,.05); --accent:#00e5ff; --accent-hi:#5ef0ff; --accent-soft:rgba(0,229,255,.10); --accent-line:rgba(0,229,255,.22); --accent-ring:rgba(0,229,255,.22); --accent-shadow:rgba(0,229,255,.18); --accent-shadow-hi:rgba(0,229,255,.28); --gradient-text:linear-gradient(95deg,var(--accent) 0%,#8fd0ff 60%,#f0c39a 140%); --glass:rgba(16,26,27,.72); --glass-solid:rgba(13,21,22,.9); --glass-edge:rgba(255,255,255,.12); --glass-border:rgba(255,255,255,.08); --chip-bg:rgba(255,255,255,.05); --input-bg:rgba(255,255,255,.05); --node-bg:rgba(255,255,255,.05); --ticker-bg:rgba(255,255,255,.02); --shadow-1:0 20px 40px rgba(0,0,0,.28),0 4px 8px rgba(0,0,0,.2); --shadow-2:0 30px 60px rgba(0,0,0,.45),0 6px 12px rgba(0,0,0,.3); --frame-ring:rgba(255,255,255,.06); --bean-shadow:rgba(0,0,0,.5); --glow-a:linear-gradient(60deg,rgba(0,229,255,.14),rgba(0,229,255,.05),transparent 70%); --glow-b:radial-gradient(circle,rgba(168,102,60,.2),rgba(245,177,61,.04) 45%,transparent 70%); --cta-wash:linear-gradient(120deg,rgba(16,26,27,.85),rgba(16,26,27,.6)); --cta-glow-1:rgba(0,229,255,.16); --cta-glow-2:rgba(168,102,60,.22); --green:#34d399; --amber:#f5b13d; --red:#ff6978; } /* ---------- 2. BASE ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;letter-spacing:.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .25s ease,color .25s ease} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit} h1,h2,h3,h4{margin:0;color:var(--heading);font-weight:600;letter-spacing:-.01em} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} code{font-family:var(--mono);font-size:.85em} .mono{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:500} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .skip{position:absolute;left:-999px;top:8px;background:var(--heading);color:var(--bg);padding:8px 12px;border-radius:var(--r-btn);z-index:100} .skip:focus{left:8px} .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)} .good{color:var(--accent)}.warn{color:var(--amber)}.bad{color:var(--red)} /* artwork that has a per-appearance variant: mark the light one, hide the other */ [data-theme="dark"] .only-light,:root:not([data-theme="dark"]) .only-dark{display:none} .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:18px} .eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--roast-hi),var(--accent-hi))} .eyebrow-light{color:var(--cyan)} .display{font-size:clamp(38px,5.2vw,64px);line-height:1.04;letter-spacing:-.025em;font-weight:700} h2{font-size:clamp(28px,3.4vw,42px);line-height:1.12;letter-spacing:-.02em;font-weight:700} h3{font-size:20px;line-height:1.3} h1 em,h2 em{font-style:normal;background:var(--gradient-text);-webkit-background-clip:text;background-clip:text;color:transparent} .lede{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:60ch} .lede strong{color:var(--heading);font-weight:600} .section-head{max-width:760px;margin-bottom:56px} .section-head p{margin-top:18px;font-size:17px;color:var(--ink-2);line-height:1.6} .section{padding:112px 0;position:relative} .section-slim{padding:40px 0 96px} .section-tint{background:linear-gradient(180deg,var(--bg),var(--bg-deep) 30%,var(--bg-deep) 70%,var(--bg))} /* ---------- 3. PARTS ---------- */ .glass{background:var(--glass);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--glass-border);border-top-color:var(--glass-edge);border-left-color:var(--glass-edge);box-shadow:var(--shadow-1);border-radius:var(--r-card)} .glass-dark{background:rgba(16,26,27,.85);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--d-border-strong);border-top-color:rgba(255,255,255,.14);border-radius:var(--r-card);box-shadow:0 30px 80px rgba(0,0,0,.4)} .led{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none;position:relative;background:var(--led);box-shadow:0 0 0 3px color-mix(in srgb,var(--led) 18%,transparent)} .led-teal{--led:var(--accent-hi)} .led-cyan{--led:var(--cyan)} .led-green{--led:var(--green-d)} .led-amber{--led:var(--amber-d)} .led-red{--led:var(--red-d)} .led-grey{--led:#7c8f92} .chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-pill);background:var(--chip-bg);border:1px solid var(--glass-border);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)} .chip-sm{padding:3px 9px;font-size:10px} .chip-dark{background:rgba(255,255,255,.05);border-color:var(--d-border-strong);color:var(--d-text2)} .chip-live .led::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid var(--accent-hi);animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite} @keyframes ping{75%,100%{transform:scale(2.2);opacity:0}} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:var(--r-btn);border:1px solid transparent;font-weight:600;font-size:14px;letter-spacing:0;line-height:1.2;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease;white-space:nowrap} .btn:active{transform:scale(.98)} .btn-lg{padding:15px 24px;font-size:16px;border-radius:.75rem} .btn-sm{padding:8px 14px;font-size:13px} .btn-primary{color:#fff;background:linear-gradient(135deg,#0e8a9e,#0a6273);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 2px 12px var(--accent-shadow)} .btn-primary:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 6px 20px var(--accent-shadow-hi);transform:translateY(-1px)} .btn-glass{color:var(--heading);background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:var(--glass-edge);box-shadow:var(--shadow-1)} .btn-glass:hover{background:var(--glass-solid)} .btn-ghost{color:var(--accent);background:transparent;letter-spacing:.02em} .btn-ghost:hover{background:var(--accent-soft)} .btn-light{color:var(--d-bg-deep);background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.3)} .btn-light:hover{background:#e6fbff;transform:translateY(-1px)} .btn-ghost-light{color:var(--d-text2);background:transparent;border-color:var(--d-border-strong)} .btn-ghost-light:hover{background:rgba(255,255,255,.06);color:#fff} .ico{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round} /* nav */ .nav-wrap{position:fixed;top:14px;left:0;right:0;z-index:50;padding:0 var(--gutter);pointer-events:none} .nav{pointer-events:auto;max-width:var(--container);margin:0 auto;height:var(--nav-h);display:flex;align-items:center;gap:24px;padding:0 10px 0 16px;border-radius:var(--r-pill);transition:box-shadow .25s ease,background .25s ease} .nav.scrolled{box-shadow:var(--shadow-2);background:var(--glass-solid)} .brand{display:flex;align-items:center;gap:10px} .brand img{width:36px;height:36px} .brand-word{font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--blue)} .brand-word b{color:var(--wordmark-brown);font-weight:600} [data-theme="dark"] .brand-word{color:#8fb0da} [data-theme="dark"] .brand-word b{color:#d08a66} .nav-links{display:flex;align-items:center;gap:6px;margin-left:8px} .nav-links a{display:block;padding:8px 12px;border-radius:var(--r-btn);font-size:14px;color:var(--ink-2);transition:color .15s,background .15s} .nav-links a:hover{color:var(--heading);background:var(--tint)} .nav-cta-mobile{display:none} .nav-actions{margin-left:auto;display:flex;align-items:center;gap:6px} .nav-toggle{display:none;margin-left:auto;width:40px;height:40px;border:0;background:transparent;border-radius:50%;position:relative;cursor:pointer} .nav-toggle span{position:absolute;left:10px;width:20px;height:2px;background:var(--heading);border-radius:2px;transition:transform .2s,top .2s} .nav-toggle span:first-child{top:15px}.nav-toggle span:last-child{top:23px} .nav-toggle[aria-expanded="true"] span{top:19px} .nav-toggle[aria-expanded="true"] span:first-child{transform:rotate(45deg)} .nav-toggle[aria-expanded="true"] span:last-child{transform:rotate(-45deg)} /* theme switch — three states, like the app: system / light / dark */ .theme{display:inline-flex;align-items:center;padding:3px;border-radius:var(--r-pill);background:var(--tint);border:1px solid var(--hairline)} .theme button{width:30px;height:28px;border:0;border-radius:var(--r-pill);background:transparent;display:grid;place-items:center;color:var(--ink-3);cursor:pointer;transition:background .15s,color .15s} .theme button svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round} .theme button[aria-pressed="true"]{background:var(--panel);color:var(--accent);box-shadow:var(--shadow-1)} .theme button:hover{color:var(--heading)} /* ---------- 4. SECTIONS ---------- */ /* hero — a scroll-driven stage: sticky viewport while the network grows */ .hero{position:relative;overflow:clip} .hero-glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(120px);z-index:0} .hero-glow-a{width:900px;height:520px;left:-10%;top:-10%;background:var(--glow-a)} .hero-glow-b{width:640px;height:640px;right:-14%;top:30%;background:var(--glow-b)} .hero .container{position:relative;z-index:1} .hero>.container{padding-bottom:40px} .stage{position:relative;height:180vh;z-index:1} .stage-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:var(--nav-h)} .stage-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center} .hero-copy .chip{margin-bottom:22px} .hero-copy .display{margin-bottom:18px;max-width:19ch;font-size:clamp(34px,4.4vw,58px)} .hero-copy .lede{font-size:17px} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .stage-steps{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:34px;font-size:10px;color:var(--ink-3)} .stage-steps li{display:inline-flex;align-items:center;gap:8px;transition:color .3s} .stage-steps li i{width:18px;height:2px;border-radius:2px;background:var(--hairline-strong);transition:background .3s} .stage-steps li.on{color:var(--accent)} .stage-steps li.on i{background:var(--accent)} .stage-steps li.done i{background:var(--accent);opacity:.4} .grow-wrap{position:relative} .grow{width:100%;height:auto;max-height:78vh;display:block;overflow:visible} .grow .lane{stroke:var(--accent);stroke-width:2;stroke-linecap:round;opacity:.8} .grow .svc{stroke:var(--accent);stroke-opacity:.45;stroke-width:1.3;stroke-linecap:round} .grow .svc-cut{stroke:#ff6978;stroke-opacity:.9;stroke-dasharray:3 4} .grow .svc-new{stroke:var(--accent);stroke-opacity:.95;stroke-width:2.2} .grow .site circle{fill:var(--panel);stroke:var(--accent);stroke-width:2.2} .grow .site text{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;fill:var(--heading)} .grow .site text.sub{font-size:9px;fill:var(--ink-3);letter-spacing:.04em} .grow .customers circle{fill:var(--accent-hi);fill-opacity:.85} .grow .closed text{font-family:var(--mono);font-size:9px;fill:#ff6978;letter-spacing:.06em} .grow .packets circle{fill:var(--accent-hi);filter:drop-shadow(0 0 6px var(--accent-hi))} .grow .frozen-tag rect{fill:var(--glass-solid);stroke:var(--accent-line)} .grow .frozen-tag text{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;fill:var(--heading)} .grow-caption{position:absolute;left:0;bottom:-6px;display:flex;gap:16px;font-size:10px;color:var(--ink-3)} .grow-caption span{display:inline-flex;align-items:center;gap:7px} .fx[data-fx="fade"]{opacity:0} .fx[data-fx="pop"]{opacity:0;transform-box:fill-box;transform-origin:center} .mock-note{margin-top:14px;color:var(--ink-3);font-size:10px;text-align:right} /* the product-shaped mock — fixed in the product's dark appearance */ .app-frame{background:var(--d-bg);border:1px solid var(--d-border-strong);border-radius:var(--r-card);box-shadow:var(--shadow-2),0 0 0 6px var(--frame-ring);overflow:hidden;color:var(--d-text);font-size:13px} .app-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--d-border);background:var(--d-bg-deep)} .app-crumb{display:flex;align-items:center;gap:8px;color:var(--d-text3);font-size:12.5px;margin-right:auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .app-crumb i{font-style:normal;opacity:.5} .app-crumb b{color:var(--d-text);font-weight:600} .app-body{display:grid;grid-template-columns:52px 1fr 300px;min-height:360px} .app-rail{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0;border-right:1px solid var(--d-border);background:var(--d-panel)} .rail-item{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--d-text3)} .rail-item svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round} .rail-item.on{background:var(--cyan-soft);color:var(--cyan);box-shadow:inset 2px 0 0 var(--cyan)} .rail-item.bottom{margin-top:auto} .rail-item img{width:26px;height:26px;border-radius:50%;object-fit:cover;object-position:50% 28%;box-shadow:0 0 0 2px var(--d-panel),0 0 0 3px var(--roast-hi)} .app-map{position:relative;background:var(--map-canvas);border-right:1px solid var(--d-border)} .map{width:100%;height:100%;display:block} .map-labels text{font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.06em;fill:var(--d-text2)} .lane-flow{animation:dash 2.4s linear infinite} .lane-cut{opacity:.8} .halo-pulse{animation:halo 2.6s ease-in-out infinite;transform-origin:150px 120px} @keyframes halo{50%{transform:scale(1.15);opacity:.7}} @keyframes dash{to{stroke-dashoffset:-48}} .map-legend{position:absolute;left:12px;right:12px;bottom:10px;display:flex;gap:14px;align-items:center;padding:8px 12px;border-radius:8px;background:rgba(8,16,18,.85);border:1px solid var(--d-border-strong);font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--d-text2)} .map-legend span{display:inline-flex;align-items:center;gap:7px} .map-legend .right{margin-left:auto;color:var(--d-text3)} .app-side{background:var(--d-panel);display:flex;flex-direction:column;gap:12px;padding:14px} .side-block{padding:12px 14px;border-radius:10px;background:var(--d-bg);border:1px solid var(--d-border)} .side-title{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--d-text3);margin-bottom:10px} .obj-list li,.obj-demo li{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px} .obj-list li+li{border-top:1px solid var(--d-border)} .obj-list em{font-style:normal;color:var(--d-text3)} .obj-n{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:700;background:var(--cyan-soft);color:var(--cyan);flex:none} .side-note{display:block;margin-top:8px;font-size:11.5px;color:var(--d-text3)} .solve-block{display:flex;align-items:center;gap:12px} .solve-block b{display:block;font-size:13px;color:var(--d-text)} .solve-block .mono{display:block;font-size:10px;color:var(--d-text3);text-transform:none;letter-spacing:.03em;margin-top:2px} .frozen li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:12.5px;color:var(--d-text2)} .frozen li+li{border-top:1px solid var(--d-border)} .frozen code{color:var(--cyan);font-size:11px} .isaac-strip{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--d-border);background:linear-gradient(90deg,var(--cyan-soft),transparent 60%)} .isaac-strip img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 28%;flex:none;box-shadow:0 0 0 2px var(--d-bg),0 0 0 3px var(--roast-hi)} .isaac-strip p{font-size:13px;color:var(--d-text2);line-height:1.45} .isaac-strip p b{color:var(--d-text)} .isaac-strip p b.warn{color:var(--amber-d)} .isaac-strip .mono{margin-left:auto;flex:none;font-size:10px;color:var(--cyan)} /* the bean loader — signal study; the mark keeps its own colours */ .bean-loader{width:52px;height:52px;flex:none} .bean-loader .edges line{stroke:#b3c3ce;stroke-width:2;stroke-linecap:round;opacity:.55} .bean-loader .nodes circle{fill:#b3c3ce} .bean-loader .rim{fill:none;stroke:rgba(0,0,0,.28);stroke-width:2} .bean-loader .crease{fill:none;stroke:rgba(0,0,0,.32);stroke-width:2.2} .bean-loader .sigs line{stroke:#8fd0ff;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:14 200;stroke-dashoffset:214;animation:run 2.6s linear infinite;animation-delay:calc(var(--i) * .17s - .6s);filter:drop-shadow(0 0 3px #4da3ff)} @keyframes run{to{stroke-dashoffset:-14}} .bean-loader .flares circle{fill:#8fd0ff;opacity:0;animation:flare 2.6s ease-out infinite;animation-delay:calc(var(--i) * .17s - .35s)} @keyframes flare{0%,100%{opacity:0;r:3.2}6%{opacity:.95;r:6.4}26%{opacity:0;r:3.2}} /* ticker */ .ticker{overflow:hidden;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:var(--ticker-bg);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .ticker-track{display:flex;gap:40px;padding:14px 0;width:max-content;animation:ticker 60s linear infinite} .ticker-track span{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap} .ticker-track span::before{content:"";width:6px;height:6px;border-radius:2px;transform:rotate(45deg);background:var(--accent-hi);opacity:.5} .ticker-track .tk-head{color:var(--accent);font-weight:700} .ticker-track .tk-head::before{background:var(--roast-hi);opacity:1} @keyframes ticker{to{transform:translateX(-50%)}} .ticker:hover .ticker-track{animation-play-state:paused} /* three questions */ .q-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .q{padding:28px;transition:transform .25s ease,box-shadow .25s ease} .q:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)} .q-mark,.step-icon,.tile-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:20px;background:var(--accent-soft);border:1px solid var(--accent-line)} .q-mark{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--accent)} .q h3{margin-bottom:10px;font-size:19px} .q p{color:var(--ink-2);font-size:15px;line-height:1.55} /* steps */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .steps-4{grid-template-columns:repeat(4,1fr);gap:20px} .step{padding:26px;position:relative;transition:transform .25s ease,box-shadow .25s ease;display:flex;flex-direction:column} .step:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)} .step-n{position:absolute;top:22px;right:22px;color:var(--outline);font-size:13px} .step-icon svg,.tile-icon svg{width:22px;height:22px;stroke:var(--accent);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round} .step h3{margin-bottom:10px;font-size:19px} .step p{color:var(--ink-2);font-size:14.5px;line-height:1.55} .step p em{font-style:italic;color:var(--heading)} .step-meta{display:block;margin-top:auto;padding-top:14px;border-top:1px solid var(--hairline);color:var(--accent);font-size:10.5px;line-height:1.5} .step-meta{margin-top:18px} /* Isaac — the product's dark band, in both appearances */ .section-dark{background:radial-gradient(1000px 600px at 85% 15%,#173036 0%,var(--d-bg) 55%);color:var(--d-text2);overflow:hidden;border-top:1px solid var(--d-border);border-bottom:1px solid var(--d-border)} .section-dark h2{color:#fff} .section-dark h2 em{background:linear-gradient(95deg,var(--cyan),#8fd0ff 60%,#f0c39a 140%);-webkit-background-clip:text;background-clip:text} .section-dark p{color:var(--d-text2)} .dark-glow{position:absolute;width:700px;height:700px;right:-200px;bottom:-300px;border-radius:50%;background:radial-gradient(circle,rgba(0,229,255,.12),transparent 60%);filter:blur(60px);pointer-events:none} .isaac-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:center;position:relative} .isaac-copy>p{font-size:17px;line-height:1.6;margin-top:18px} .check-list{margin:32px 0 36px;display:grid;gap:18px} .check-list li{display:flex;gap:14px;align-items:flex-start} .check-list svg{flex:none;width:22px;height:22px;stroke:var(--cyan);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:2px;border-radius:50%;padding:3px;background:var(--cyan-soft)} .check-list b{display:block;color:#fff;font-weight:600;margin-bottom:2px} .check-list span{font-size:14px;color:var(--d-text3);line-height:1.5} .chat{padding:0;overflow:hidden} .chat-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--d-border)} .chat-head b{display:block;color:#fff;font-size:15px} .chat-head .mono{color:var(--d-text3);font-size:10px;text-transform:none;letter-spacing:.03em} .avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 28%;box-shadow:0 0 0 2px var(--d-panel),0 0 0 3.5px var(--roast-hi),0 0 18px rgba(0,229,255,.3)} .chat-body{padding:20px 18px;display:grid;gap:18px} .msg .who{display:block;color:var(--d-text3);font-size:10px;margin-bottom:8px} .msg.user p{font-size:14.5px;color:var(--d-text);line-height:1.5;padding:12px 14px;border-radius:12px 12px 12px 4px;background:rgba(255,255,255,.05);border:1px solid var(--d-border);min-height:44px} .typed::after{content:"";display:inline-block;width:2px;height:1em;background:var(--cyan);margin-left:2px;vertical-align:-2px;animation:blink 1s step-end infinite} .typed.done::after{display:none} @keyframes blink{50%{opacity:0}} .msg.isaac{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease} .msg.isaac.show{opacity:1;transform:none} .answer{padding:16px;border-radius:12px 12px 12px 4px;background:linear-gradient(160deg,rgba(0,229,255,.12),rgba(0,229,255,.03));border:1px solid var(--cyan-line)} .answer-head{display:flex;justify-content:space-between;gap:8px;color:#8fd0ff;font-size:10px;margin-bottom:10px} .answer-head .conf{color:var(--cyan)} .answer p{font-size:14px;color:var(--d-text);line-height:1.5} .answer p b{color:var(--amber-d)} .answer-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0} .answer-metrics div{padding:10px 12px;border-radius:8px;background:rgba(10,15,16,.6);border:1px solid var(--d-border)} .answer-metrics .mono{display:block;font-size:9px;color:var(--d-text3);margin-bottom:4px} .answer-metrics b{color:#fff;font-size:16px;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .answer-metrics b.good{color:var(--green-d)}.answer-metrics b.bad{color:var(--red-d)} .answer-foot{font-size:13px!important;color:var(--d-text2)!important;padding-top:12px;border-top:1px solid var(--cyan-line);margin-bottom:14px} .answer-foot code{color:var(--cyan)} .answer-actions{display:flex;gap:8px;flex-wrap:wrap} .chat-suggest{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px 18px;border-top:1px solid var(--d-border);background:rgba(0,0,0,.2)} .chat-suggest .mono{color:var(--d-text3);font-size:10px} .chat-suggest span:not(.mono){font-size:12px;padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--d-border-strong);background:rgba(255,255,255,.04);color:var(--d-text2)} /* bento */ .bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(200px,auto);gap:24px} .tile{padding:28px;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease} .tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)} .tile-wide{grid-column:span 2} .tile-tag{color:var(--ink-3);font-size:10px;margin-bottom:8px} .tile h3{margin-bottom:8px} .tile p{color:var(--ink-2);font-size:15px;line-height:1.55} .tile p em{font-style:italic;color:var(--heading)} .tile-foot{margin-top:12px;color:var(--ink-3);font-size:10px} .obj-demo{margin-top:auto;padding-top:22px} .obj-demo li{font-size:14px;color:var(--heading)} .obj-demo li+li{border-top:1px solid var(--hairline)} .obj-demo .obj-n{background:var(--accent-soft);color:var(--accent)} .obj-demo .mono{margin-left:auto;color:var(--ink-3);font-size:10px} .stress-demo{margin-top:auto;padding-top:22px;display:grid;gap:10px} .stress-row{display:grid;grid-template-columns:110px 1fr 44px;align-items:center;gap:10px;font-size:13px;color:var(--heading)} .stress-row .mono{text-align:right;color:var(--ink-3);font-size:10px} .bar{height:8px;border-radius:var(--r-pill);background:var(--hairline);overflow:hidden} .bar i{display:block;height:100%;width:0;border-radius:var(--r-pill);transition:width 1.2s cubic-bezier(.2,.8,.2,1)} .in-view .bar i{width:var(--w)} .bar-green{background:linear-gradient(90deg,var(--green-d),var(--green))} .bar-amber{background:linear-gradient(90deg,var(--amber-d),var(--amber))} .bar-red{background:var(--red)} .lineage{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:22px} .ln-node{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:var(--node-bg);border:1px solid var(--hairline-strong);font-size:13px;color:var(--heading);font-weight:500} .ln-node code{color:var(--ink-3);font-size:11px} .ln-draft{border-style:dashed} .ln-arrow{width:22px;height:1px;background:var(--outline);position:relative} .ln-arrow::after{content:"";position:absolute;right:-1px;top:-3px;border:3.5px solid transparent;border-left-color:var(--outline)} /* principles */ .principles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .principle{padding:26px;position:relative} .principle>.mono{display:block;color:var(--roast-hi);font-size:11px;margin-bottom:14px;font-weight:700} .principle h3{font-size:18px;margin-bottom:10px;line-height:1.35} .principle p{font-size:14.5px;color:var(--ink-2);line-height:1.55} /* status */ .status{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;padding:40px 44px} .status-head h3{font-size:24px;letter-spacing:-.015em;margin-bottom:12px} .status-head p{font-size:15px;color:var(--ink-2);line-height:1.55} .status-key{display:flex;gap:18px;margin-top:20px;color:var(--ink-3);font-size:10px} .status-key span{display:inline-flex;align-items:center;gap:8px} .status-list li{display:grid;grid-template-columns:auto 220px 1fr;gap:14px;align-items:baseline;padding:12px 0;border-top:1px solid var(--hairline);font-size:14px} .status-list li:first-child{border-top:0} .status-list b{color:var(--heading);font-weight:600} .status-list span{color:var(--ink-2);font-size:13.5px;line-height:1.5} .status-list .led{position:relative;top:-1px} /* CTA */ .cta{position:relative;overflow:hidden;padding:72px 64px;background:var(--cta-wash),radial-gradient(700px 400px at 100% 0%,var(--cta-glow-1),transparent 60%),radial-gradient(500px 400px at 0% 100%,var(--cta-glow-2),transparent 60%),var(--bg)} .cta-bean{position:absolute;right:-30px;bottom:-50px;width:300px;height:300px;opacity:.92;filter:drop-shadow(0 30px 40px var(--bean-shadow));animation:float 9s ease-in-out infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} .cta-inner{position:relative;max-width:620px} .cta-inner h2{margin-bottom:14px} .cta-inner>p{color:var(--ink-2);font-size:17px;line-height:1.6} .cta-form{display:grid;gap:10px;margin-top:30px;max-width:560px} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} .cta-form label{display:block} .cta-form input,.cta-form textarea{width:100%;padding:13px 16px;border-radius:var(--r-btn);font:inherit;font-size:15px;color:var(--ink);background:var(--input-bg);border:1px solid var(--outline);transition:border-color .2s,box-shadow .2s;resize:vertical} .cta-form ::placeholder{color:var(--ink-3)} .cta-form input:focus,.cta-form textarea:focus{outline:none;border-color:var(--accent-hi);box-shadow:0 0 0 4px var(--accent-ring)} .cta-form .invalid{border-color:var(--red);box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 18%,transparent)} .cta-form .invalid:focus{border-color:var(--red);box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 22%,transparent)} .cta-form label.consent{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:start;font-size:12.5px;line-height:1.5;color:var(--ink-2);margin-top:2px;cursor:pointer} .consent input{margin:4px 0 0;width:15px;height:15px;accent-color:var(--accent)} .consent a{color:var(--accent);text-decoration:underline;text-underline-offset:2px} .cta-form.sent .consent{display:none} .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .form-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:4px} .cf-turnstile:empty{display:none} .form-hint{margin:-4px 0 0;font-size:12px;text-transform:none;letter-spacing:.02em;color:var(--ink-2)} .form-hint button{font:inherit;border:0;background:none;padding:0;cursor:pointer} .form-hint .hint-use{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px} .form-hint .hint-keep{margin-left:10px;color:var(--ink-3)} .form-hint .hint-keep:hover,.form-hint .hint-use:hover{color:var(--heading)} .form-status{min-height:1.2em;font-size:11px;text-transform:none;letter-spacing:.02em;color:var(--ink-3)} .form-status.ok{color:var(--green)} .form-status.err{color:var(--red)} .cta-form.sent .field-row,.cta-form.sent textarea,.cta-form.sent .form-foot{display:none} .cta-form.sent .form-status{font-size:14px;font-family:var(--sans)} .trust-marks{display:flex;flex-wrap:wrap;gap:24px;margin-top:40px;color:var(--ink-2);font-size:11px} .trust-marks li{display:inline-flex;align-items:center;gap:8px} /* footer */ .footer{padding:64px 0 32px;border-top:1px solid var(--hairline);background:linear-gradient(180deg,var(--bg),var(--bg-deep))} .footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;margin-bottom:48px} .footer-brand img{width:130px;margin-bottom:18px} .footer-brand p{font-size:14px;color:var(--ink-2);max-width:36ch;line-height:1.55} .footer nav{display:grid;gap:10px;align-content:start} .footer h4{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;font-weight:600} .footer nav a{font-size:14px;color:var(--ink-2)} .footer nav a:hover{color:var(--accent)} .footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--hairline);color:var(--ink-3);font-size:10px;text-transform:none;letter-spacing:.03em} .footer-bottom a{margin-left:18px} .footer-bottom a:hover{color:var(--accent)} /* ---------- product tour (auto-cycling tabs) ---------- */ .tour{display:grid;gap:18px} .tour-tabs{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:8px;align-items:stretch} .tour-tabs [role=tab]{position:relative;text-align:left;padding:12px 14px 14px;border-radius:12px;border:1px solid var(--hairline);background:var(--glass);cursor:pointer;overflow:hidden;transition:border-color .2s,background .2s} .tour-tabs [role=tab] span{display:block;font-weight:600;color:var(--heading);font-size:15px} .tour-tabs [role=tab] small{display:block;font-size:12px;color:var(--ink-3);margin-top:2px} .tour-tabs [role=tab] i{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent)} .tour-tabs [role=tab][aria-selected="true"]{border-color:var(--accent-line);background:var(--glass-solid)} .tour-tabs [role=tab][aria-selected="true"] i{width:100%;transition:width var(--tour-ms,6000ms) linear} .tour.paused .tour-tabs [role=tab][aria-selected="true"] i{transition:none;width:100%} .tour-tabs [role=tab]:hover{border-color:var(--accent-line)} .tour-tabs [role=tab]:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .tour-pause{width:44px;border-radius:12px;border:1px solid var(--hairline);background:var(--glass);display:grid;place-items:center;cursor:pointer;color:var(--ink-3)} .tour-pause svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round} .tour-pause .i-play{display:none} .tour-pause[aria-pressed="true"] .i-play{display:block}.tour-pause[aria-pressed="true"] .i-pause{display:none} .tour-pause:hover{color:var(--heading)} .tour-screen{min-height:420px} .tour-screen .panel{animation:panel-in .45s cubic-bezier(.2,.8,.2,1)} @keyframes panel-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .grid-shell{display:grid;grid-template-columns:230px 1fr;min-height:400px} .grid-side{padding:14px;border-right:1px solid var(--d-border);background:var(--d-panel)} .tbl-list{display:grid;gap:2px;margin-bottom:16px} .tbl-list li{display:flex;justify-content:space-between;padding:6px 8px;border-radius:6px;font-size:12.5px;color:var(--d-text2)} .tbl-list li b{font-family:var(--mono);font-weight:500;font-size:11px;color:var(--d-text3)} .tbl-list li.on{background:var(--cyan-soft);color:var(--cyan)} .tbl-list li.on b{color:var(--cyan)} .slicer{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:8px;border:1px solid var(--d-border);background:var(--d-bg);margin-bottom:8px;font-size:12px;color:var(--d-text)} .slicer .mono{font-size:9px;color:var(--d-text3)} .grid-main{padding:14px;overflow-x:auto} .grid-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px} .grid-bar .mono{font-size:10px;color:var(--d-text3)} .grid{width:100%;border-collapse:collapse;font-size:12.5px} .grid th{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--d-text3);text-align:left;padding:8px 10px;border-bottom:1px solid var(--d-border-strong)} .grid td{padding:9px 10px;border-bottom:1px solid var(--d-border);color:var(--d-text2)} .grid tr:nth-child(even) td{background:rgba(255,255,255,.015)} .grid .num{font-family:var(--mono);font-size:11.5px;text-align:right;font-variant-numeric:tabular-nums;color:var(--d-text)} .grid .edited{color:var(--amber-d);box-shadow:inset 2px 0 0 var(--amber-d)} .map-shell{display:grid;grid-template-columns:1fr 260px;min-height:400px} .map-shell .map{background:var(--map-canvas);border-right:1px solid var(--d-border)} .bottleneck-list{padding:14px;background:var(--d-panel)} .bn{display:grid;grid-template-columns:auto 1fr;column-gap:10px;padding:9px 0;border-top:1px solid var(--d-border);font-size:12.5px;color:var(--d-text)} .bn:first-of-type{border-top:0} .bn b{grid-column:2;font-weight:400;font-size:11px;color:var(--d-text3);font-family:var(--mono)} .cmp{width:100%;border-collapse:collapse;font-size:13px} .cmp th{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--d-text3);text-align:left;padding:14px 16px;border-bottom:1px solid var(--d-border-strong);font-weight:500} .cmp th code{color:var(--cyan);text-transform:none;letter-spacing:0} .cmp td{padding:12px 16px;border-bottom:1px solid var(--d-border);color:var(--d-text2)} .cmp td:first-child{color:var(--d-text)} .cmp .num{font-family:var(--mono);font-size:12px;text-align:right;font-variant-numeric:tabular-nums;color:var(--d-text)} .cmp .num.bad{color:var(--red-d)}.cmp .num.good{color:var(--green-d)}.cmp .num.warn{color:var(--amber-d)} .cmp-foot{display:flex;flex-wrap:wrap;gap:20px;padding:12px 16px;font-size:10px;color:var(--d-text3)} .cmp-foot span{display:inline-flex;align-items:center;gap:8px} .isaac-pane{padding:20px;display:grid;gap:16px;max-width:760px} /* ---------- tile micro-animations ---------- */ .obj-demo li{position:relative} .obj-demo .lock{margin-left:8px;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--accent);opacity:0} .anim-sweep li:nth-child(1) .lock{animation:lock 6s infinite} .anim-sweep li:nth-child(2) .lock{animation:lock 6s 2s infinite} .anim-sweep li:nth-child(3) .lock{animation:lock 6s 4s infinite} .anim-sweep li:nth-child(1){animation:rowhi 6s infinite} .anim-sweep li:nth-child(2){animation:rowhi 6s 2s infinite} .anim-sweep li:nth-child(3){animation:rowhi 6s 4s infinite} @keyframes lock{0%,10%{opacity:0}20%,100%{opacity:1}} @keyframes rowhi{0%{background:transparent}8%{background:var(--accent-soft)}30%,100%{background:transparent}} .mini-slice{margin-top:auto;padding-top:22px;display:grid;gap:10px} .ms-chip{display:inline-flex;gap:8px;align-items:center;padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--accent-line);background:var(--accent-soft);font-size:10px;color:var(--accent);width:max-content} .ms-chip b{color:var(--heading);font-weight:600} .ms-rows{display:grid;gap:5px} .ms-rows i{display:block;height:8px;border-radius:3px;background:var(--hairline-strong);transform-origin:left} .anim-slice .ms-rows i:not(.keep){animation:slice-out 5s infinite} .anim-slice .ms-rows i.keep{animation:slice-keep 5s infinite} @keyframes slice-out{0%,30%{opacity:1;transform:scaleX(1)}45%,80%{opacity:.15;transform:scaleX(.35)}95%,100%{opacity:1;transform:scaleX(1)}} @keyframes slice-keep{0%,30%{background:var(--hairline-strong)}45%,80%{background:var(--accent)}95%,100%{background:var(--hairline-strong)}} .mini-futures{margin-top:auto;padding-top:18px;width:100%;height:auto} .mini-futures .f{stroke-width:2;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:300} .mini-futures .f1{stroke:var(--accent)}.mini-futures .f2{stroke:var(--accent);opacity:.55}.mini-futures .f3{stroke:var(--roast-hi);opacity:.7} .anim-futures .f{animation:futures 6s infinite} .anim-futures .f2{animation-delay:.3s}.anim-futures .f3{animation-delay:.6s} @keyframes futures{0%{stroke-dashoffset:300}25%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}} .mini-futures text{font-family:var(--mono);font-size:8px;fill:var(--ink-3)} .led-blink{animation:blink 1.4s step-end infinite} .anim-lineage .ln-arrow{overflow:visible} .anim-lineage .ln-arrow::before{content:"";position:absolute;top:-2px;left:0;width:5px;height:5px;border-radius:50%;background:var(--accent);animation:packet 2.4s linear infinite} .anim-lineage .ln-arrow:nth-of-type(2)::before{animation-delay:1.2s} @keyframes packet{from{left:0;opacity:0}15%{opacity:1}85%{opacity:1}to{left:100%;opacity:0}} /* ---------- document pages (privacy) ---------- */ .doc{max-width:760px;padding-top:calc(var(--nav-h) + 72px);padding-bottom:96px} .doc h1{font-size:clamp(32px,4vw,44px);letter-spacing:-.02em;font-weight:700;margin-bottom:12px} .doc .updated{color:var(--ink-3);font-size:11px;margin-bottom:40px;display:block} .doc h2{font-size:22px;margin:44px 0 12px} .doc h3{font-size:17px;margin:26px 0 8px} .doc p,.doc li{font-size:16px;line-height:1.65;color:var(--ink-2)} .doc p+p{margin-top:12px} .doc ul{list-style:disc;padding-left:22px;display:grid;gap:8px;margin:12px 0} .doc a{color:var(--accent);text-decoration:underline;text-underline-offset:3px} .doc strong{color:var(--heading)} .doc table{width:100%;border-collapse:collapse;font-size:14.5px;margin:16px 0} .doc th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:8px 10px 8px 0;border-bottom:1px solid var(--hairline-strong)} .doc td{padding:10px 10px 10px 0;border-bottom:1px solid var(--hairline);vertical-align:top;color:var(--ink-2);line-height:1.5} .doc td:first-child{color:var(--heading);font-weight:500;width:22%} .doc td:nth-child(2){width:24%} .doc td:nth-child(3){width:34%} .doc .todo{background:var(--accent-soft);border:1px dashed var(--accent-line);border-radius:6px;padding:0 6px;color:var(--accent);font-family:var(--mono);font-size:.85em} .doc-wrap{overflow-x:auto} /* preview server badge */ .preview-badge{position:fixed;left:12px;bottom:12px;z-index:60;padding:6px 10px;border-radius:var(--r-pill);background:var(--amber);color:#1a1200;font-size:10px;letter-spacing:.08em;box-shadow:var(--shadow-1)} /* ---------- 5. MOTION + RESPONSIVE ---------- */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)} .reveal.in-view{opacity:1;transform:none} .steps .step:nth-child(2),.bento .tile:nth-child(2),.q-grid .q:nth-child(2),.principles .principle:nth-child(2){transition-delay:.1s} .steps .step:nth-child(3),.bento .tile:nth-child(3),.q-grid .q:nth-child(3),.principles .principle:nth-child(3){transition-delay:.2s} .steps .step:nth-child(4),.bento .tile:nth-child(4){transition-delay:.3s} .bento .tile:nth-child(5){transition-delay:.4s}.bento .tile:nth-child(6){transition-delay:.5s} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .cta-bean,.ticker-track,.lane-flow,.halo-pulse,.bean-loader .sigs line,.bean-loader .flares circle,.chip-live .led::after,.anim-sweep *,.anim-slice *,.anim-futures *,.led-blink,.anim-lineage .ln-arrow::before{animation:none} .mini-futures .f{stroke-dashoffset:0} .tour-screen .panel{animation:none} html{scroll-behavior:auto} } @media (max-width:1100px){ .stage-grid{grid-template-columns:1fr 1fr;gap:28px} .tour-tabs{grid-template-columns:repeat(2,1fr) auto} .grid-shell{grid-template-columns:1fr} .grid-side{border-right:0;border-bottom:1px solid var(--d-border)} .map-shell{grid-template-columns:1fr} .app-body{grid-template-columns:52px 1fr} .app-side{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;border-top:1px solid var(--d-border)} .app-side .side-block{flex:1 1 220px} .app-map{min-height:300px} .isaac-grid{grid-template-columns:1fr;gap:48px} .q-grid,.principles{grid-template-columns:1fr 1fr} .steps-4{grid-template-columns:1fr 1fr} .bento{grid-template-columns:repeat(2,1fr)} .status{grid-template-columns:1fr;gap:28px} .footer-grid{grid-template-columns:1fr 1fr 1fr} .footer-brand{grid-column:1/-1} } @media (max-width:860px){ .nav-links{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;align-items:stretch;gap:4px;padding:12px;background:var(--glass-solid);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--glass-border);border-radius:var(--r-card);box-shadow:var(--shadow-2)} .nav-links.open{display:flex} .nav-links a{padding:12px 14px;font-size:15px} .nav-cta-mobile{display:block;margin-top:6px} .nav-cta-mobile .btn{width:100%} .nav-actions .btn{display:none} .nav-actions{margin-left:auto} .nav-toggle{margin-left:0;display:flex} .nav{position:relative} .section{padding:80px 0} /* no sticky stage on small screens: the network is shown fully grown above the copy */ .stage{height:auto} .stage-sticky{position:static;height:auto;padding-top:calc(var(--nav-h) + 40px);padding-bottom:24px} .stage-grid{grid-template-columns:1fr;gap:20px} .grow-wrap{order:-1} .grow{max-height:52vh} .stage-steps{display:none} .tour-tabs{grid-template-columns:1fr 1fr} .tour-pause{grid-column:1/-1;width:100%;height:36px} .cmp{font-size:12px} .cmp td,.cmp th{padding:10px} .answer-metrics{grid-template-columns:1fr 1fr} .app-top{flex-wrap:wrap} .app-rail{display:none} .app-body{grid-template-columns:1fr} .isaac-strip{flex-wrap:wrap} .isaac-strip .mono{margin-left:42px} .q-grid,.principles,.steps-4{grid-template-columns:1fr} .status-list li{grid-template-columns:auto 1fr;grid-template-rows:auto auto} .status-list li span{grid-column:2} .cta{padding:48px 28px} .cta-bean{width:200px;height:200px;right:-50px;bottom:-60px;opacity:.5} .field-row{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr} } @media (max-width:560px){ :root{--gutter:16px} .btn-lg{width:100%} .bento{grid-template-columns:1fr} .tile-wide{grid-column:auto} .answer-metrics{grid-template-columns:1fr 1fr} .stress-row{grid-template-columns:90px 1fr 44px} .footer-grid{grid-template-columns:1fr} .map-legend .right{display:none} }