/* ============================================================ Phinome — Financial Genome Infrastructure ============================================================ */ /* ---------- tokens ---------- Dark is the base theme. The light palette is applied when the system asks for it, and either theme can be pinned with data-theme on . */ :root{ --bg: #05070d; --bg-2: #080b14; --bg-3: #0c111c; --bg-rgb: 5,7,13; --surface-hover: #0c111c; --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.16); --ink: #e9edf6; --ink-2: #aab3c7; --ink-3: #6f7a91; --cyan: #3ddbd9; --violet: #a78bfa; --amber: #fbbf5c; --green: #5ee9a4; --rose: #fb7185; --accent-rgb: 61,219,217; --violet-rgb: 167,139,250; --rose-rgb: 251,113,133; /* button / gradient surfaces */ --grad: linear-gradient(100deg,#3ddbd9,#7dd3fc 45%,#a78bfa); --on-grad: #04101a; --btn-hover-fill:#e9f7ff; --btn-hover-ink: #04101a; /* code + inputs */ --code-bg: #04060c; --code-ink: #aab3c7; --c-k: #8ab4f8; --c-s: #7ee2b8; --c-n: #f5c86b; --input-bg: #04060c; --placeholder: #4b5568; --nav-bg: rgba(5,7,13,.72); --panel-bg: rgba(8,11,20,.7); --big-grad: linear-gradient(160deg,#fff,#93a3bd); --card-shadow: none; --card-glow: 12%; --grain-blend: overlay; --grain-opacity: .035; /* canvas visuals read these — see assets/js/canvas.js */ --viz-helix-a: 61,219,217; --viz-helix-b: 167,139,250; --viz-node: 160,190,220; --viz-node-a: .42; --viz-edge: 255,255,255; --viz-edge-a: .085; --viz-mule: 251,191,92; --viz-sink: 251,113,133; --viz-pulse: 255,236,196; --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236f7a91' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); color-scheme: dark; --ff-sans: "Space Grotesk", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ff-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif; --ff-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --maxw: 1220px; --pad: clamp(20px, 5vw, 56px); --radius: 14px; --ease: cubic-bezier(.22,1,.36,1); --ease-io: cubic-bezier(.65,.05,.36,1); } /* system preference — unless the visitor pinned dark */ @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --bg: #fcfcfe; --bg-2: #f4f6fb; --bg-3: #ffffff; --bg-rgb: 252,252,254; --surface-hover: #f4f6fb; --line: rgba(12,18,38,.11); --line-strong: rgba(12,18,38,.22); --ink: #0c111d; --ink-2: #4a5468; --ink-3: #656f84; --cyan: #0f766e; --violet: #7c3aed; --amber: #b45309; --green: #047857; --rose: #be123c; --accent-rgb: 15,118,110; --violet-rgb: 124,58,237; --rose-rgb: 190,18,60; --grad: linear-gradient(100deg,#0f766e,#1d4ed8 45%,#6d28d9); --on-grad: #ffffff; --btn-hover-fill:#0c111d; --btn-hover-ink: #ffffff; --code-bg: #f7f9fd; --code-ink: #414a5c; --c-k: #1d4ed8; --c-s: #047857; --c-n: #b45309; --input-bg: #ffffff; --placeholder: #7b8497; --nav-bg: rgba(252,252,254,.78); --panel-bg: rgba(255,255,255,.78); --big-grad: linear-gradient(160deg,#111827,#64748b); --card-shadow: 0 1px 2px rgba(12,18,38,.05), 0 12px 28px -16px rgba(12,18,38,.16); --card-glow: 7%; --grain-blend: multiply; --grain-opacity: .022; --viz-helix-a: 15,118,110; --viz-helix-b: 124,58,237; --viz-node: 100,116,139; --viz-node-a: .5; --viz-edge: 12,18,38; --viz-edge-a: .14; --viz-mule: 217,119,6; --viz-sink: 190,18,60; --viz-pulse: 124,45,18; --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23656f84' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); color-scheme: light; } } /* explicit choice from the theme toggle */ :root[data-theme="light"]{ --bg: #fcfcfe; --bg-2: #f4f6fb; --bg-3: #ffffff; --bg-rgb: 252,252,254; --surface-hover: #f4f6fb; --line: rgba(12,18,38,.11); --line-strong: rgba(12,18,38,.22); --ink: #0c111d; --ink-2: #4a5468; --ink-3: #656f84; --cyan: #0f766e; --violet: #7c3aed; --amber: #b45309; --green: #047857; --rose: #be123c; --accent-rgb: 15,118,110; --violet-rgb: 124,58,237; --rose-rgb: 190,18,60; --grad: linear-gradient(100deg,#0f766e,#1d4ed8 45%,#6d28d9); --on-grad: #ffffff; --btn-hover-fill:#0c111d; --btn-hover-ink: #ffffff; --code-bg: #f7f9fd; --code-ink: #414a5c; --c-k: #1d4ed8; --c-s: #047857; --c-n: #b45309; --input-bg: #ffffff; --placeholder: #7b8497; --nav-bg: rgba(252,252,254,.78); --panel-bg: rgba(255,255,255,.78); --big-grad: linear-gradient(160deg,#111827,#64748b); --card-shadow: 0 1px 2px rgba(12,18,38,.05), 0 12px 28px -16px rgba(12,18,38,.16); --card-glow: 7%; --grain-blend: multiply; --grain-opacity: .022; --viz-helix-a: 15,118,110; --viz-helix-b: 124,58,237; --viz-node: 100,116,139; --viz-node-a: .5; --viz-edge: 12,18,38; --viz-edge-a: .14; --viz-mule: 217,119,6; --viz-sink: 190,18,60; --viz-pulse: 124,45,18; --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23656f84' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); color-scheme: light; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } html.lenis, html.lenis body{ height:auto; } .lenis.lenis-smooth{ scroll-behavior:auto !important; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--ff-sans); font-size:clamp(15.5px,1.05vw,17px); line-height:1.62; letter-spacing:-.003em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,svg,canvas{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; } ::selection{ background:rgba(var(--accent-rgb),.26); color:var(--ink); } /* focus */ :focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; } .skip-link{ position:fixed; top:-100px; left:16px; z-index:200; background:var(--cyan); color:var(--on-grad); padding:10px 16px; border-radius:8px; font-weight:600; font-size:14px; transition:top .2s var(--ease); } .skip-link:focus{ top:16px; } /* ---------- atmosphere ---------- */ .grain{ position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:var(--grain-opacity); mix-blend-mode:var(--grain-blend); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 8s steps(6) infinite; } @keyframes grain{ 0%,100%{ transform:translate(0,0) } 20%{ transform:translate(-2%,1%) } 40%{ transform:translate(1%,-2%) } 60%{ transform:translate(-1%,-1%) } 80%{ transform:translate(2%,1%) } } .cursor{ position:fixed; top:0; left:0; z-index:150; pointer-events:none; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; border:1px solid rgba(var(--accent-rgb),.55); background:radial-gradient(circle, rgba(var(--accent-rgb),.16), transparent 65%); opacity:0; transform:translate3d(-100px,-100px,0); transition:opacity .3s var(--ease), width .28s var(--ease), height .28s var(--ease), margin .28s var(--ease), background .28s var(--ease); } .cursor.is-on{ opacity:1; } .cursor.is-hot{ width:52px; height:52px; margin:-26px 0 0 -26px; background:radial-gradient(circle, rgba(var(--accent-rgb),.10), transparent 70%); } .scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:120; background:transparent; pointer-events:none; } .scroll-progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--cyan),var(--violet)); box-shadow:0 0 14px rgba(var(--accent-rgb),.6); } /* ---------- layout ---------- */ .container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:2; } .section{ padding-block:clamp(84px,11vw,168px); position:relative; z-index:2; } .section__head{ max-width:760px; margin-bottom:clamp(48px,6vw,84px); } /* ---------- type ---------- */ .eyebrow{ font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin:0 0 20px; display:flex; align-items:center; gap:10px; } .pulse-dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6); animation:pulse 2.4s infinite; } @keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55) } 70%{ box-shadow:0 0 0 9px rgba(var(--accent-rgb),0) } 100%{ box-shadow:0 0 0 0 rgba(var(--accent-rgb),0) } } .h2{ font-size:clamp(34px,5.2vw,62px); line-height:1.04; letter-spacing:-.022em; font-weight:500; margin:0 0 22px; } h3{ letter-spacing:-.017em; } em{ font-family:var(--ff-serif); font-style:italic; font-weight:400; letter-spacing:-.01em; background:linear-gradient(100deg,var(--cyan),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; } .lede{ font-size:clamp(17px,1.5vw,21px); line-height:1.55; color:var(--ink-2); margin:0 0 20px; letter-spacing:-.008em; } .lede--wide{ max-width:64ch; } /* ---------- buttons ---------- */ .btn{ --btn-bg:transparent; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px 26px; border-radius:100px; border:1px solid var(--line-strong); font-size:14.5px; font-weight:500; letter-spacing:-.01em; cursor:pointer; background:var(--btn-bg); overflow:hidden; isolation:isolate; transition:border-color .3s var(--ease), transform .3s var(--ease), color .3s var(--ease); will-change:transform; } .btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--grad); transform:translateY(101%); transition:transform .45s var(--ease); } .btn:hover::before{ transform:translateY(0); } .btn:hover{ color:var(--on-grad); border-color:transparent; } .btn--primary{ background:var(--grad); color:var(--on-grad); border-color:transparent; font-weight:600; } .btn--primary::before{ background:var(--btn-hover-fill); } .btn--primary:hover{ color:var(--btn-hover-ink); } .btn--ghost{ color:var(--ink); } .btn--sm{ padding:10px 18px; font-size:13.5px; } .btn--block{ width:100%; padding:16px 26px; font-size:15.5px; } .btn__icon{ width:15px; height:15px; transition:transform .3s var(--ease); } .btn:hover .btn__icon{ transform:translateX(3px); } .btn span{ position:relative; z-index:1; } /* ---------- nav ---------- */ .nav{ position:fixed; top:0; left:0; right:0; z-index:110; transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s; border-bottom:1px solid transparent; } .nav.is-stuck{ background:var(--nav-bg); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--line); } .nav__inner{ display:flex; align-items:center; gap:28px; height:70px; } .brand{ display:flex; align-items:center; gap:10px; margin-right:auto; } /* the mark is taller than it is wide, so pin the height and let width follow */ .brand__mark{ width:auto; height:26px; } .brand:hover .brand__mark{ animation:spinY 1.4s var(--ease); } @keyframes spinY{ to{ transform:rotateY(360deg) } } .brand__word{ font-size:18px; font-weight:600; letter-spacing:-.02em; } .nav__links{ display:flex; gap:30px; } .nav__links a{ font-size:14px; color:var(--ink-2); position:relative; padding-block:4px; transition:color .25s var(--ease); } .nav__links a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--cyan); transition:width .3s var(--ease); } .nav__links a:hover{ color:var(--ink); } .nav__links a:hover::after, .nav__links a.is-active::after{ width:100%; } .nav__links a.is-active{ color:var(--ink); } .theme-toggle{ width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--line); border-radius:100px; background:transparent; color:var(--ink-2); cursor:pointer; transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); } .theme-toggle:hover{ color:var(--ink); border-color:var(--line-strong); background:var(--bg-3); } .theme-toggle__icon{ width:17px; height:17px; grid-area:1/1; transition:opacity .3s var(--ease), transform .45s var(--ease); } /* dark theme → offer the sun; light theme → offer the moon */ .theme-toggle__moon{ opacity:0; transform:rotate(-70deg) scale(.6); } :root[data-theme="light"] .theme-toggle__sun{ opacity:0; transform:rotate(70deg) scale(.6); } :root[data-theme="light"] .theme-toggle__moon{ opacity:1; transform:none; } @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .theme-toggle__sun{ opacity:0; transform:rotate(70deg) scale(.6); } :root:not([data-theme="dark"]) .theme-toggle__moon{ opacity:1; transform:none; } } .nav__toggle{ display:none; width:40px; height:40px; border:1px solid var(--line); border-radius:10px; background:transparent; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; } .nav__toggle span{ display:block; width:16px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease), opacity .3s; } .nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); } .nav__mobile{ display:none; flex-direction:column; gap:2px; padding:8px var(--pad) 24px; background:rgba(var(--bg-rgb),.96); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); } .nav__mobile a{ padding:13px 0; border-bottom:1px solid var(--line); font-size:16px; } .nav__mobile-cta{ color:var(--cyan) !important; border-bottom:0 !important; } /* ---------- hero ---------- */ .hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding-block:130px 90px; overflow:hidden; } .hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; } .hero__veil{ position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(120% 85% at 78% 42%, transparent 0%, rgba(var(--bg-rgb),.55) 55%, var(--bg) 88%), linear-gradient(180deg, rgba(var(--bg-rgb),.86) 0%, rgba(var(--bg-rgb),.20) 34%, rgba(var(--bg-rgb),.72) 82%, var(--bg) 100%); } .hero__inner{ z-index:2; max-width:1080px; } .hero__eyebrow{ opacity:0; } .hero__title{ font-size:clamp(38px,6vw,82px); line-height:1.02; letter-spacing:-.028em; font-weight:500; margin:0 0 30px; } .hero__title .line{ overflow:hidden; display:block; } .hero__title .word{ display:inline-block; } .hero__title em .word{ background:linear-gradient(100deg,var(--cyan),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .hero__lede{ max-width:58ch; font-size:clamp(16px,1.4vw,19.5px); line-height:1.6; color:var(--ink-2); margin:0 0 38px; letter-spacing:-.006em; } .hero__lede em{ font-size:1.08em; } .hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:clamp(48px,7vw,88px); } .hero__stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,3vw,40px); margin:0; border-top:1px solid var(--line); padding-top:26px; max-width:820px; } .stat dt{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; } .stat dd{ margin:0; font-size:clamp(24px,3vw,38px); font-weight:500; letter-spacing:-.028em; line-height:1; display:flex; align-items:baseline; gap:2px; } .stat dd i{ font-style:normal; font-size:.44em; color:var(--ink-3); letter-spacing:0; } .hero__scrollcue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3; width:1px; height:52px; background:linear-gradient(180deg,transparent,var(--line-strong)); overflow:hidden; } .hero__scrollcue span{ position:absolute; top:0; left:0; width:100%; height:16px; background:var(--cyan); animation:cue 2.2s var(--ease-io) infinite; } @keyframes cue{ 0%{ transform:translateY(-16px) } 60%,100%{ transform:translateY(52px) } } /* ---------- marquee ---------- */ .marquee{ border-block:1px solid var(--line); background:var(--bg-2); overflow:hidden; padding-block:14px; position:relative; z-index:2; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .marquee__track{ display:flex; gap:44px; width:max-content; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.2em; color:var(--ink-3); text-transform:uppercase; white-space:nowrap; animation:marquee 44s linear infinite; } .marquee__track b{ color:var(--cyan); font-weight:400; } @keyframes marquee{ to{ transform:translateX(-50%) } } /* ---------- thesis ---------- */ .statement{ font-size:clamp(28px,4.4vw,56px); line-height:1.14; letter-spacing:-.022em; font-weight:400; max-width:19ch; margin:0 0 clamp(56px,7vw,96px); color:var(--ink-3); } .statement .w{ color:var(--ink-3); } .statement em .w{ background:linear-gradient(100deg,var(--cyan),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent !important; -webkit-text-fill-color:transparent; } .statement em{ font-size:1.06em; } .thesis__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .thesis__card{ background:var(--bg); padding:clamp(26px,3vw,38px); transition:background .4s var(--ease); } .thesis__card:hover{ background:var(--surface-hover); } .thesis__num{ font-family:var(--ff-serif); font-style:italic; font-size:30px; color:var(--cyan); display:block; margin-bottom:18px; opacity:.8; } .thesis__card h3{ font-size:19px; margin:0 0 10px; font-weight:600; } .thesis__card p{ margin:0; color:var(--ink-2); font-size:15px; } /* ---------- helix ---------- */ .helix{ background:linear-gradient(180deg,var(--bg),var(--bg-2) 40%,var(--bg)); } .helix__layout{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:start; } .helix__copy p{ color:var(--ink-2); } .pull{ margin:30px 0; padding:22px 26px; border-left:2px solid var(--cyan); background:linear-gradient(90deg,rgba(var(--accent-rgb),.06),transparent); font-size:clamp(17px,1.5vw,20px); line-height:1.45; color:var(--ink); letter-spacing:-.012em; border-radius:0 10px 10px 0; } .specs{ list-style:none; margin:34px 0 0; padding:0; border-top:1px solid var(--line); } .specs li{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:13px 0; border-bottom:1px solid var(--line); } .specs span{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); } .specs b{ font-weight:500; font-size:14.5px; text-align:right; } .helix__viz{ position:sticky; top:100px; } .viz-frame{ position:relative; aspect-ratio:1/1; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background: radial-gradient(80% 80% at 50% 40%, rgba(var(--accent-rgb),.05), transparent 70%), var(--bg-3); } .viz-frame canvas{ position:absolute; inset:0; width:100%; height:100%; } .viz-frame__hud{ position:absolute; left:14px; bottom:14px; display:flex; gap:8px; flex-wrap:wrap; font-family:var(--ff-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; } .hud__tag, .hud__metric{ padding:5px 9px; border:1px solid var(--line); border-radius:100px; background:rgba(var(--bg-rgb),.6); color:var(--ink-3); backdrop-filter:blur(6px); } .hud__tag{ color:var(--cyan); border-color:rgba(var(--accent-rgb),.3); } .viz-frame__corners i{ position:absolute; width:12px; height:12px; border:1px solid rgba(var(--accent-rgb),.4); } .viz-frame__corners i:nth-child(1){ top:10px; left:10px; border-right:0; border-bottom:0; } .viz-frame__corners i:nth-child(2){ top:10px; right:10px; border-left:0; border-bottom:0; } .viz-frame__corners i:nth-child(3){ bottom:10px; left:10px; border-right:0; border-top:0; } .viz-frame__corners i:nth-child(4){ bottom:10px; right:10px; border-left:0; border-top:0; } .viz-caption{ margin:14px 0 0; font-size:12.5px; color:var(--ink-3); font-family:var(--ff-mono); letter-spacing:.01em; line-height:1.5; } /* ---------- product cards ---------- */ .cards{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(18px,2vw,26px); grid-template-columns:repeat(2,1fr); } .card{ --c:var(--cyan); position:relative; padding:clamp(26px,2.6vw,38px); border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--card-shadow); transition:border-color .45s var(--ease), transform .45s var(--ease), background .45s var(--ease); } .card[data-marker="chimera"]{ --c:var(--violet); } .card[data-marker="vector"]{ --c:var(--amber); } .card[data-marker="phenotype"]{ --c:var(--green); } .card[data-marker="crispr"]{ --c:var(--rose); } .card::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--c) var(--card-glow), transparent), transparent 65%); transition:opacity .4s var(--ease); } .card:hover{ border-color:color-mix(in srgb, var(--c) 42%, transparent); transform:translateY(-4px); background:var(--bg-3); } .card:hover::after{ opacity:1; } .card__rail{ position:absolute; left:0; top:0; bottom:0; width:2px; background:linear-gradient(180deg,transparent,var(--c),transparent); opacity:.35; transition:opacity .4s var(--ease); } .card:hover .card__rail{ opacity:1; } .card__head{ display:flex; justify-content:space-between; align-items:center; gap:14px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:22px; } .card__num{ color:var(--c); } .card__analogy{ color:var(--ink-3); } .card__title{ font-size:clamp(24px,2.5vw,32px); letter-spacing:-.024em; font-weight:500; margin:0 0 4px; } .card__sub{ margin:0 0 18px; font-size:14px; color:var(--c); opacity:.85; letter-spacing:-.004em; } .card__body{ margin:0 0 22px; color:var(--ink-2); font-size:15.2px; } .card__meta{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:22px; } .chip{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.08em; padding:5px 10px; border-radius:100px; border:1px solid var(--line); color:var(--ink-3); text-transform:uppercase; } .card__out{ display:flex; align-items:baseline; gap:10px; padding:14px 0; border-top:1px solid var(--line); margin-bottom:20px; margin-top:auto; } .card__out-label{ font-family:var(--ff-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); } .card__out-value{ font-size:15px; font-weight:600; color:var(--c); letter-spacing:-.008em; } .code{ margin:0; padding:16px 18px; border-radius:10px; background:var(--code-bg); border:1px solid var(--line); overflow-x:auto; font-family:var(--ff-mono); font-size:12px; line-height:1.75; color:var(--code-ink); letter-spacing:0; } .code code{ font:inherit; } .c-p{ color:var(--c); } .c-k{ color:var(--c-k); } .c-s{ color:var(--c-s); } .c-n{ color:var(--c-n); } .suite__foot{ margin:clamp(40px,5vw,64px) 0 0; text-align:center; font-size:clamp(19px,2.4vw,30px); letter-spacing:-.02em; line-height:1.35; color:var(--ink-2); } /* ---------- pipeline ---------- */ .pipeline{ background:var(--bg-2); border-block:1px solid var(--line); } .steps{ position:relative; padding-left:clamp(28px,5vw,72px); } .steps__thread{ position:absolute; left:clamp(6px,1.6vw,22px); top:8px; bottom:8px; width:4px; height:calc(100% - 16px); color:var(--cyan); opacity:.55; } .step{ display:flex; gap:clamp(18px,3vw,44px); align-items:flex-start; padding-block:clamp(26px,3.4vw,44px); border-bottom:1px solid var(--line); } .step:last-child{ border-bottom:0; } .step__idx{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.16em; color:var(--ink-3); padding-top:8px; min-width:34px; } .step__body{ max-width:62ch; } .step__body h3{ font-size:clamp(22px,2.6vw,32px); margin:0 0 10px; font-weight:500; letter-spacing:-.022em; } .step__body p{ margin:0 0 14px; color:var(--ink-2); } .step__code{ display:inline-block; font-family:var(--ff-mono); font-size:12px; padding:6px 11px; border-radius:7px; background:var(--code-bg); border:1px solid var(--line); color:var(--cyan); } /* ---------- numbers ---------- */ .numbers__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(28px,4vw,48px); } .bignum b{ display:flex; align-items:baseline; gap:2px; font-size:clamp(44px,6vw,80px); font-weight:500; letter-spacing:-.034em; line-height:1; margin-bottom:14px; background:var(--big-grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .bignum b i{ font-style:normal; font-size:.36em; -webkit-text-fill-color:var(--cyan); } .bignum p{ margin:0; color:var(--ink-2); font-size:14.5px; max-width:32ch; } .numbers__note{ margin-top:clamp(34px,4vw,54px); font-size:12.5px; color:var(--ink-3); font-family:var(--ff-mono); } /* ---------- access / form ---------- */ .access{ background: radial-gradient(90% 70% at 15% 0%, rgba(var(--violet-rgb),.07), transparent 60%), radial-gradient(80% 70% at 85% 100%, rgba(var(--accent-rgb),.07), transparent 60%), var(--bg); border-top:1px solid var(--line); } .access__layout{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,5vw,80px); align-items:start; } .access__copy{ position:sticky; top:110px; } .access__list{ list-style:none; padding:0; margin:26px 0 0; } .access__list li{ display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line); color:var(--ink-2); font-size:15px; } .access__list span{ color:var(--cyan); font-size:12px; padding-top:4px; } .access__reply{ margin-top:22px; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); } .access__formwrap{ position:relative; } .form{ border:1px solid var(--line); border-radius:var(--radius); background:var(--panel-bg); backdrop-filter:blur(10px); padding:clamp(24px,3vw,40px); } .form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .field{ display:flex; flex-direction:column; gap:7px; min-width:0; border:0; padding:0; margin:0; } .field--full{ grid-column:1 / -1; } .field label, .field legend{ font-size:12.5px; font-weight:500; color:var(--ink-2); letter-spacing:.01em; padding:0; } .hint{ color:var(--ink-3); font-weight:400; } .req{ color:var(--cyan); } .field input[type="text"], .field input[type="email"], .field select, .field textarea{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:var(--input-bg); color:var(--ink); font-family:inherit; font-size:15px; letter-spacing:-.004em; transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s; appearance:none; } .field textarea{ resize:vertical; min-height:104px; line-height:1.55; } .field select{ background-image:var(--select-caret); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; cursor:pointer; } .field select option{ background:var(--input-bg); color:var(--ink); } .field input::placeholder, .field textarea::placeholder{ color:var(--placeholder); } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:rgba(var(--accent-rgb),.55); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12); } .field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea{ border-color:rgba(var(--rose-rgb),.6); } .field.is-invalid .check span{ color:var(--rose); } .err{ font-size:12px; color:var(--rose); min-height:0; display:none; } .field.is-invalid .err{ display:block; } .checks{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; } .check{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; padding:9px 14px; border:1px solid var(--line-strong); border-radius:100px; font-size:13.5px; color:var(--ink-2); transition:border-color .25s var(--ease), color .25s, background .25s; user-select:none; } .check input{ appearance:none; width:14px; height:14px; border-radius:4px; margin:0; border:1px solid var(--line-strong); background:transparent; cursor:pointer; display:grid; place-content:center; transition:background .2s, border-color .2s; flex:0 0 auto; } .check input::after{ content:""; width:7px; height:7px; border-radius:1.5px; transform:scale(0); background:var(--on-grad); transition:transform .18s var(--ease); } .check input:checked{ background:var(--cyan); border-color:var(--cyan); } .check input:checked::after{ transform:scale(1); } .check:has(input:checked){ color:var(--ink); border-color:rgba(var(--accent-rgb),.45); background:rgba(var(--accent-rgb),.06); } .check--consent{ border:0; padding:0; border-radius:0; align-items:flex-start; font-size:13.5px; line-height:1.5; } .check--consent:has(input:checked){ background:transparent; } .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } #submitBtn{ margin-top:22px; } .btn__spinner{ width:15px; height:15px; border-radius:50%; display:none; flex:0 0 auto; border:2px solid color-mix(in srgb, var(--on-grad) 28%, transparent); border-top-color:var(--on-grad); animation:spin .7s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg) } } .form.is-sending #submitBtn{ pointer-events:none; opacity:.75; } .form.is-sending .btn__spinner{ display:block; } .form__legal{ margin:16px 0 0; font-size:12px; color:var(--ink-3); line-height:1.5; } .form__status{ margin:12px 0 0; font-size:13px; color:var(--rose); min-height:0; } .form__status:empty{ margin:0; } .form__success{ border:1px solid rgba(var(--accent-rgb),.32); border-radius:var(--radius); background:linear-gradient(180deg,rgba(var(--accent-rgb),.07),var(--panel-bg)); padding:clamp(34px,4vw,56px); text-align:center; } .form__success-mark{ width:56px; height:56px; margin:0 auto 20px; color:var(--cyan); border:1px solid rgba(var(--accent-rgb),.4); border-radius:50%; padding:12px; background:rgba(var(--accent-rgb),.08); } .form__success-mark svg path{ stroke-dasharray:44; stroke-dashoffset:44; animation:draw .6s .1s var(--ease) forwards; } @keyframes draw{ to{ stroke-dashoffset:0 } } .form__success h3{ font-size:clamp(22px,2.6vw,30px); margin:0 0 10px; font-weight:500; letter-spacing:-.02em; } .form__success p{ margin:0 0 24px; color:var(--ink-2); font-size:15px; } .form__success a{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; } /* ---------- 404 ---------- */ .notfound{ min-height:100svh; display:grid; place-items:center; text-align:center; padding:100px var(--pad) 80px; position:relative; z-index:2; } .notfound__inner{ max-width:56ch; } .notfound__code{ font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); margin:0 0 22px; } .notfound h1{ font-size:clamp(38px,6vw,76px); line-height:1.02; letter-spacing:-.028em; font-weight:500; margin:0 0 22px; } .notfound p{ color:var(--ink-2); font-size:clamp(16px,1.4vw,19px); margin:0 0 34px; } .notfound__strand{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.3em; color:var(--ink-3); opacity:.45; margin-top:44px; } /* ---------- footer ---------- */ .footer{ border-top:1px solid var(--line); background:var(--bg-2); padding-block:clamp(48px,6vw,80px) 28px; position:relative; z-index:2; } .footer__inner{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:clamp(28px,4vw,60px); padding-bottom:40px; border-bottom:1px solid var(--line); } .footer__brand p{ margin:16px 0 0; color:var(--ink-3); font-size:14px; max-width:34ch; } .footer__col{ display:flex; flex-direction:column; gap:9px; } .footer__col h4{ margin:0 0 8px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); font-weight:400; } .footer__col a{ font-size:14px; color:var(--ink-2); transition:color .25s var(--ease); width:fit-content; } .footer__col a:hover{ color:var(--cyan); } .footer__base{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:22px; font-size:12.5px; color:var(--ink-3); } .footer__seq{ font-family:var(--ff-mono); letter-spacing:.24em; opacity:.5; } .footer__version{ font-family:var(--ff-mono); letter-spacing:.08em; opacity:.55; } /* ---------- reveal (pre-GSAP + no-js safe) ---------- */ .js [data-reveal]{ opacity:0; transform:translateY(22px); } .no-js [data-reveal]{ opacity:1; transform:none; } /* ---------- responsive ---------- */ @media (max-width:1020px){ .helix__layout{ grid-template-columns:1fr; } .helix__viz{ position:static; } .viz-frame{ max-width:520px; } .access__layout{ grid-template-columns:1fr; } .access__copy{ position:static; } .cards{ grid-template-columns:1fr; } } @media (max-width:800px){ .nav__links, .nav__cta{ display:none; } .theme-toggle{ margin-left:auto; margin-right:10px; } .nav__toggle{ display:flex; } /* :not([hidden]) matters — a bare display:flex here would beat the hidden attribute and pin the menu open */ .nav__mobile:not([hidden]){ display:flex; } .nav.is-open{ background:rgba(var(--bg-rgb),.96); } .footer__inner{ grid-template-columns:1fr 1fr; } .footer__brand{ grid-column:1 / -1; } .hero__stats{ grid-template-columns:repeat(2,1fr); gap:24px 16px; } .statement{ max-width:none; } } @media (max-width:620px){ .form__grid{ grid-template-columns:1fr; } .hero{ min-height:auto; padding-block:120px 70px; } .cursor{ display:none; } .specs li{ flex-direction:column; gap:4px; } .specs b{ text-align:left; } .step{ flex-direction:column; gap:10px; } .footer__inner{ grid-template-columns:1fr; } } /* ---------- motion preferences ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .js [data-reveal]{ opacity:1 !important; transform:none !important; } .grain, .hero__scrollcue{ display:none; } .marquee__track{ animation:none; } }