/* ============================================================ DAY7 — Natoma-inspired rebuild Dark-first, mono-labelled, accent-glow, grain + connection net. ┌───────────────────────────────────────────────────────────┐ │ THEMING — change colors in ONE place. │ │ The :root block below is the ACTIVE theme. │ │ To switch the whole site to another palette, either: │ │ (a) edit the brand tokens in :root, OR │ │ (b) set to use the preset │ │ Natoma-green brand defined further down. │ │ Everything else (glows, borders, buttons, the animated │ │ network) derives from these tokens automatically via │ │ color-mix(), so nothing else needs to change. │ └───────────────────────────────────────────────────────────┘ ============================================================ */ :root { /* ===== ACTIVE BRAND THEME — Day7 (navy + yellow) ===== */ --brand: #F2C61F; /* yellow accent: buttons, links, glows, dots */ --brand-2: #1E2D4D; /* navy (logo "DAY"): gradient depth */ --brand-contrast: #1E2D4D; /* navy text/icons placed ON TOP of yellow */ --dot-core: #fff4c2; /* bright core of the traveling network dots */ /* base background ramp (top→bottom of the page gradient) — navy-black */ --app-bg: #070b14; --bg-1: #0c1322; --bg-2: #0a0f1c; --bg-3: #090d18; --bg-4: #070a12; /* surface tint used by the CTA band / elevated panels */ --surface-1: #0d1424; --surface-2: #0a0f1c; /* ======================================================== */ /* ---- Neutrals (theme-independent) ---- */ --white: #ffffff; --n-100: #f5f5f5; --n-200: #e5e5e5; --n-300: #d4d4d4; --n-400: #a1a1a1; --n-500: #737373; --n-600: #525252; --n-700: #404040; --n-800: #262626; --n-850: #1f1f1f; --n-900: #171717; --n-950: #0a0a0a; /* ---- Text ---- */ --text: #ffffff; --text-muted: #a1a1a1; --text-soft: #737373; /* ---- Card / panel surfaces ---- */ --card-bg: #0c1322; --elevated: #111a2e; /* ---- Derived brand tints (auto-follow --brand; do not edit) ---- */ --brand-05: color-mix(in srgb, var(--brand) 5%, transparent); --brand-08: color-mix(in srgb, var(--brand) 8%, transparent); --brand-10: color-mix(in srgb, var(--brand) 10%, transparent); --brand-14: color-mix(in srgb, var(--brand) 14%, transparent); --brand-20: color-mix(in srgb, var(--brand) 20%, transparent); --brand-26: color-mix(in srgb, var(--brand) 26%, transparent); --brand-33: color-mix(in srgb, var(--brand) 33%, transparent); --brand-40: color-mix(in srgb, var(--brand) 40%, transparent); --brand-50: color-mix(in srgb, var(--brand) 50%, transparent); --brand-80: color-mix(in srgb, var(--brand) 80%, transparent); --brand2-05: color-mix(in srgb, var(--brand-2) 5%, transparent); --brand2-10: color-mix(in srgb, var(--brand-2) 10%, transparent); /* ---- Borders ---- */ --border: #ffffff14; --border-soft: #ffffff0d; --border-brand: var(--brand-33); /* ---- Type ---- */ --font-display: 'Instrument Sans', -apple-system, system-ui, sans-serif; --font-sans: 'Inter', -apple-system, system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* ---- Layout ---- */ --max: 1200px; --max-narrow: 880px; --gutter: 24px; --section-y: 112px; /* ---- Radius ---- */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 100px; --ease: cubic-bezier(.4, 0, .2, 1); } /* ===== PRESET THEME — "aurora" (Natoma green) ===== Optional. Activate by adding data-theme="aurora" to the tag. */ html[data-theme="aurora"] { --brand: #7bf1a8; --brand-2: #05df72; --brand-contrast: #06140c; --dot-core: #d6ffe9; --app-bg: #070807; --bg-1: #0e1210; --bg-2: #0a0c0b; --bg-3: #0a0a0a; --bg-4: #080908; --surface-1: #0d1512; --surface-2: #0a0c0b; --card-bg: #0c1310; --elevated: #111512; } /* (Add more presets the same way, e.g. html[data-theme="..."] { --brand: ...; }) */ /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--text); background-color: var(--app-bg); background-image: radial-gradient(ellipse 100% 55% at 50% -15%, var(--brand-14), transparent 52%), radial-gradient(ellipse 50% 40% at 0% 30%, var(--brand2-05), transparent 50%), radial-gradient(ellipse 45% 35% at 100% 65%, var(--brand-05), transparent 50%), linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 18%, var(--bg-3) 45%, var(--bg-4) 100%); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } ::selection { background: var(--brand-40); color: var(--brand-contrast); } /* Interactive fluid topographic background — rendered live by assets/topo.js onto this canvas (contour lines that bend around the cursor). */ .topo-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-mask-image: radial-gradient(140% 110% at 50% 5%, #000 60%, transparent 100%); mask-image: radial-gradient(140% 110% at 50% 5%, #000 60%, transparent 100%); } body > canvas.topo-canvas { z-index: 0; } /* sit behind content */ /* Film-grain overlay */ body::before { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } body > * { position: relative; z-index: 2; } h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 .5em; color: var(--white); } h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); font-weight: 600; } h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); } h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); } h4 { font-size: 1.1rem; } p { margin: 0 0 1em; color: var(--text-muted); } a { color: var(--brand); text-decoration: none; transition: opacity .18s var(--ease), color .18s var(--ease); } img, svg { max-width: 100%; display: block; } /* ---------- Utility ---------- */ .container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .narrow { max-width: var(--max-narrow); } .section { padding: var(--section-y) 0; } .center { text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand); margin-bottom: 22px; } .eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand); } .section-head { max-width: 680px; margin: 0 auto 64px; } .section-head.center { text-align: center; } .section-head h2 { margin-bottom: 18px; } .section-head p { font-size: 1.12rem; color: var(--text-muted); margin: 0; } .lead { font-size: 1.2rem; color: var(--text-muted); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 24px; border-radius: var(--r-sm); font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; border: 1px solid transparent; transition: all .18s var(--ease); white-space: nowrap; } .btn-primary { background: var(--brand); color: var(--brand-contrast); box-shadow: 0 0 0 1px var(--brand-33), 0 8px 30px -8px var(--brand-40); } .btn-primary:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 0 0 1px var(--brand-50), 0 12px 36px -8px var(--brand-50); } .btn-ghost { background: #ffffff08; color: var(--white); border-color: var(--border); backdrop-filter: blur(6px); } .btn-ghost:hover { opacity: 1; border-color: var(--border-brand); background: var(--brand-08); } .btn .arrow { transition: transform .18s var(--ease); } .btn:hover .arrow { transform: translateX(3px); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--app-bg) 72%, transparent); backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid var(--border-soft); } .header-inner { max-width: var(--max); margin: 0 auto; padding: 15px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 32px; } .logo { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.04em; color: var(--white); display: inline-flex; align-items: center; gap: 9px; } .logo .dot { color: var(--brand); } .logo-img { height: 24px; width: auto; display: block; } .site-footer .logo-img { height: 26px; } .logo-mark { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); display: inline-grid; place-items: center; color: var(--brand-contrast); font-weight: 800; font-size: 0.95rem; box-shadow: 0 0 18px -2px var(--brand-40); } .nav { display: flex; align-items: center; gap: 30px; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { position: relative; font-family: var(--font-sans); color: var(--text-muted); font-size: 0.92rem; font-weight: 500; } .nav-links a:hover { color: var(--white); opacity: 1; } .nav-links a.current { color: var(--white); } .nav-links a.current::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: var(--brand); box-shadow: 0 0 8px var(--brand); } .menu-toggle { display: none; background: none; border: 0; color: var(--white); cursor: pointer; padding: 6px; } /* ---------- Hero ---------- */ .hero { padding: 96px 0 80px; text-align: center; position: relative; } .hero .container { position: relative; z-index: 2; } .hero .eyebrow { justify-content: center; } /* Animated connection network (Natoma-style lines + traveling dots) */ .hero-net { position: absolute; inset: -40px 0 0; z-index: 0; width: 100%; height: calc(100% + 40px); pointer-events: none; overflow: hidden; -webkit-mask-image: radial-gradient(120% 90% at 50% 35%, #000 55%, transparent 100%); mask-image: radial-gradient(120% 90% at 50% 35%, #000 55%, transparent 100%); } .hero-net svg { width: 100%; height: 100%; display: block; } .net-line { fill: none; stroke: url(#netStroke); stroke-width: 1; opacity: .16; } #netStroke stop { stop-color: var(--brand); } /* gradient follows brand */ .net-node { fill: var(--brand); opacity: .35; animation: sol-dot-pulse 3.4s ease-in-out infinite; } .net-dot-core { fill: var(--dot-core); } .net-dot-halo { fill: var(--brand); opacity: .55; } @keyframes sol-dot-pulse { 0%, 100% { opacity: .18; r: 2; } 50% { opacity: .55; r: 3; } } @media (prefers-reduced-motion: reduce) { .hero-net { display: none; } } /* Human / Agent view-mode toggle */ .view-toggle { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 26px; border: 1px solid var(--border); border-radius: var(--r-pill); background: color-mix(in srgb, var(--app-bg) 60%, transparent); backdrop-filter: blur(8px); } .view-toggle button { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: lowercase; font-weight: 500; color: var(--text-muted); background: transparent; border: 0; border-radius: var(--r-pill); padding: 8px 20px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: color .2s var(--ease), background .2s var(--ease); } .view-toggle button .vt-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; } .view-toggle button:hover { color: var(--text); } .view-toggle button.active { background: var(--brand); color: var(--brand-contrast); } .view-toggle button.active .vt-dot { opacity: 1; box-shadow: 0 0 8px var(--brand-contrast); } /* fade applied to swapping hero copy */ .hero-swap { transition: opacity .18s var(--ease), transform .18s var(--ease); } .hero.swapping .hero-swap { opacity: 0; transform: translateY(6px); } .hero h1 { margin: 0 auto 26px; max-width: 14ch; } .hero h1 .accent { color: var(--brand); } .hero-sub { font-size: 1.22rem; color: var(--text-muted); max-width: 620px; margin: 0 auto 38px; } .hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .hero-note { margin-top: 22px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-soft); text-transform: uppercase; } /* Hero diagram strip */ .hero-rail { margin: 64px auto 0; max-width: 940px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 14px; padding: 26px; border: 1px solid var(--border); border-radius: var(--r-lg); background: radial-gradient(80% 120% at 50% 0%, var(--brand-05), transparent 60%), var(--card-bg); } .rail-node { padding: 18px 14px; border: 1px solid var(--border-soft); border-radius: var(--r-md); background: #ffffff05; text-align: center; } .rail-node .rail-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 8px; } .rail-node .rail-name { font-family: var(--font-display); font-weight: 600; color: var(--white); font-size: 1.02rem; } .rail-node.mid { border-color: var(--border-brand); background: var(--brand-05); box-shadow: 0 0 40px -12px var(--brand-50); } .rail-node.mid .rail-name { color: var(--brand); } .rail-arrow { color: var(--brand); font-size: 1.1rem; opacity: .8; } /* ---------- Interior page hero ---------- */ .page-hero { padding: 84px 0 8px; text-align: center; } .page-hero .eyebrow { justify-content: center; } .page-hero h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); margin: 0 auto 22px; max-width: 18ch; } .page-hero .hero-sub { font-size: 1.18rem; color: var(--text-muted); max-width: 640px; margin: 0 auto; } /* mono tag / pill */ .tag { display: inline-block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 5px 12px; margin-bottom: 16px; } .tag.accent { color: var(--brand); border-color: var(--border-brand); background: var(--brand-08); } /* team avatar */ .avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--brand-contrast); background: linear-gradient(135deg, var(--brand), var(--brand-2)); margin-bottom: 18px; box-shadow: 0 0 24px -6px var(--brand-40); } .card .role { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; } /* arrow bullet list */ .bullets { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; } .bullets li { position: relative; padding-left: 26px; color: var(--text-muted); font-size: 0.98rem; } .bullets li::before { content: '→'; position: absolute; left: 0; color: var(--brand); } .bullets li strong { color: var(--text); font-weight: 600; } /* offering card (wide, stacked) */ .offer-card { padding: 38px; } .offer-card .num { font-family: var(--font-mono); font-size: 0.78rem; color: var(--brand); letter-spacing: 0.12em; margin-bottom: 10px; } /* contact rows */ .contact-line { color: var(--text-muted); margin: 0 0 6px; } .contact-line strong { color: var(--text); } /* generic prose link inside content */ .section a.inline { color: var(--brand); } .section a.inline:hover { text-decoration: underline; } /* ---------- Logo strip ---------- */ .logo-strip { padding: 52px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); } .logo-strip .label { text-align: center; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 28px; } .logo-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 40px; } .logo-row span { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--n-500); letter-spacing: -0.02em; transition: color .2s var(--ease); } .logo-row span:hover { color: var(--n-300); } /* ---------- Quote ---------- */ .quote-block { text-align: center; max-width: 860px; margin: 0 auto; } .quote-block blockquote { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 500; line-height: 1.32; letter-spacing: -0.02em; color: var(--white); margin: 0 0 28px; } .quote-block blockquote .accent { color: var(--brand); } .quote-cite { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--text-soft); text-transform: uppercase; } .quote-cite strong { color: var(--text-muted); font-weight: 500; } /* ---------- Cards / grids ---------- */ .grid { display: grid; gap: 18px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .card { position: relative; padding: 30px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card-bg); overflow: hidden; transition: border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease); } .card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 0%, var(--brand-05), transparent 55%); opacity: 0; transition: opacity .25s var(--ease); pointer-events: none; } .card:hover { border-color: var(--border-brand); transform: translateY(-3px); } .card:hover::before { opacity: 1; } .card .badge { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; font-weight: 500; color: var(--brand); margin-bottom: 16px; } .card .stage-chip { position: absolute; top: 26px; right: 26px; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px 9px; } .card .icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-14); border: 1px solid var(--border-brand); color: var(--brand); margin-bottom: 18px; font-size: 1.1rem; } .card h3 { font-size: 1.18rem; margin-bottom: 10px; } .card p { color: var(--text-muted); margin: 0; font-size: 0.96rem; } /* Feature row (2-up large) */ .feature-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; } .feature-split .card { padding: 38px; } .feature-split .card.wide { grid-column: span 2; } /* ---------- Stats ---------- */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 56px; border: 1px solid var(--border); border-radius: var(--r-lg); background: radial-gradient(70% 140% at 50% 0%, var(--brand-05), transparent 60%), var(--card-bg); } .stat { text-align: center; } .stat .num { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 600; letter-spacing: -0.03em; color: var(--brand); line-height: 1; margin-bottom: 12px; } .stat .lbl { font-size: 0.95rem; color: var(--text-muted); } /* ---------- Why / split content ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .why-list li { padding: 22px 0; border-bottom: 1px solid var(--border-soft); } .why-list li:last-child { border-bottom: 0; } .why-list h4 { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-family: var(--font-display); font-size: 1.15rem; color: var(--white); } .why-list h4 .tick { color: var(--brand); flex: none; } .why-list p { margin: 0; color: var(--text-muted); padding-left: 30px; font-size: 0.96rem; } /* ---------- CTA band ---------- */ .cta-band { position: relative; text-align: center; padding: 84px var(--gutter); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(65% 90% at 50% 80%, var(--brand-10), transparent 58%), radial-gradient(40% 50% at 20% 40%, var(--brand2-05), transparent 50%), linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 100%); } .cta-band h2 { margin-bottom: 16px; max-width: 18ch; margin-left: auto; margin-right: auto; } .cta-band p { font-size: 1.12rem; max-width: 540px; margin: 0 auto 32px; } .cta-band .hero-ctas { justify-content: center; } /* ---------- FAQ ---------- */ .faq-wrap { max-width: 820px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--border-soft); } .faq-q { width: 100%; background: none; border: 0; text-align: left; cursor: pointer; padding: 26px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: var(--font-display); font-size: 1.18rem; font-weight: 500; color: var(--white); letter-spacing: -0.02em; } .faq-q .plus { flex: none; color: var(--brand); transition: transform .25s var(--ease); font-size: 1.3rem; line-height: 1; } .faq-item.open .faq-q .plus { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); } .faq-a p { color: var(--text-muted); padding: 0 0 26px; margin: 0; max-width: 70ch; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border-soft); padding: 72px 0 36px; background: color-mix(in srgb, var(--app-bg) 88%, #000); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; } .footer-brand .logo { margin-bottom: 16px; } .footer-brand p { color: var(--text-soft); font-size: 0.95rem; max-width: 32ch; } .footer-col h5 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); margin: 0 0 18px; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin-bottom: 12px; } .footer-col a { color: var(--text-muted); font-size: 0.94rem; } .footer-col a:hover { color: var(--white); opacity: 1; } .footer-bottom { border-top: 1px solid var(--border-soft); padding-top: 28px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer-bottom .copy { color: var(--text-soft); font-size: 0.85rem; font-family: var(--font-mono); letter-spacing: 0.02em; } .footer-badges { display: flex; gap: 10px; flex-wrap: wrap; } .footer-badges span { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--text-soft); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 5px 12px; } /* ---------- Reveal animation ---------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ---------- Responsive ---------- */ @media (max-width: 920px) { :root { --section-y: 76px; } .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .feature-split, .split { grid-template-columns: 1fr; gap: 28px; } .feature-split .card.wide { grid-column: auto; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } .hero-rail { grid-template-columns: 1fr; } .rail-arrow { transform: rotate(90deg); } .nav-links { display: none; } .menu-toggle { display: inline-flex; } .nav.open .nav-links { display: flex; flex-direction: column; gap: 6px; position: absolute; top: 100%; left: 0; right: 0; background: var(--app-bg); border-bottom: 1px solid var(--border); padding: 18px var(--gutter); } } @media (max-width: 600px) { .grid-3, .grid-4, .grid-2, .stats { grid-template-columns: 1fr; } .stats { padding: 32px; gap: 32px; } .footer-grid { grid-template-columns: 1fr; } .hero-ctas .btn, .cta-band .btn { width: 100%; } }