/* =================================================================== DS PULSE - pulse.domeraspace.com Domera Space dark shell + DS Pulse editorial product system. One family (Chakra Petch), one disciplined accent (app azure), solid surfaces, hairline borders. No glass-by-default, no scanline scaffolding, no numbered-eyebrow grammar. =================================================================== */ /* ---- Chakra Petch (shared brand family) ---- */ @font-face { font-family:'Chakra Petch'; src:url('fonts/ChakraPetch-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; } @font-face { font-family:'Chakra Petch'; src:url('fonts/ChakraPetch-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Chakra Petch'; src:url('fonts/ChakraPetch-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'Chakra Petch'; src:url('fonts/ChakraPetch-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:'Chakra Petch'; src:url('fonts/ChakraPetch-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:'Chakra Petch'; src:url('fonts/ChakraPetch-MediumItalic.ttf') format('truetype'); font-weight:500; font-style:italic; font-display:swap; } :root{ /* Semantics - state only (ratings, momentum, checks) */ --good: #4ade80; --warn: #f4b740; --bad: #f87171; --font: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif; --nav-h: 60px; --r: 10px; --r-s: 6px; --maxw: 1180px; --gutter: clamp(20px, 5vw, 56px); /* z-scale, semantic */ --z-base:1; --z-raised:10; --z-sticky:100; --z-nav:200; --z-overlay:900; } /* =================================================================== THEME LAYER - page canvas + surfaces. Two working modes, switchable at runtime via [data-theme] on . App-UI recreations (.appframe and everything nested in it) re-pin their own dark tokens below, so they read as dark dashboard hardware in either theme. =================================================================== */ html[data-theme="dark"]{ --bg: #0a0d12; --bg-2: #0e131a; --panel: #12171f; --panel-2: #191f29; --inset: #0c1016; --border: rgba(233,238,245,0.09); --border-hi: rgba(233,238,245,0.16); --ink: #e8eef5; --ink-2: #a7b4c4; --ink-3: #6d7b8b; --sel-bg: #14293a; --sel-fg: #d4e8fb; --grain-opacity: .5; } html[data-theme="hybrid"]{ --bg: #f3f2ee; --bg-2: #ffffff; --panel: #ffffff; --panel-2: #eeece5; --inset: #e9e7df; --border: rgba(11,13,10,0.11); --border-hi: rgba(11,13,10,0.20); --ink: #0c0e0b; --ink-2: #55554e; --ink-3: #82817a; --sel-bg: rgba(11,13,10,0.06); /* Page-level selected state sits on a near-white pill in this theme, so the selected text stays dark; app-UI cards re-pin both below. */ --sel-fg: var(--ink); --grain-opacity: .16; } /* =================================================================== ACCENT LAYER - one switchable instrument color, independent of theme. Drives links, active states, chart lines, tags, sliders. =================================================================== */ html[data-accent="gold"]{ --accent: #c99a2e; --accent-bright:#e0b53f; --accent-deep: #8f6c1c; --accent-dim: rgba(201,154,46,0.14); --accent-line: rgba(201,154,46,0.32); --c1:#c99a2e; --c2:#8aa0b8; --c3:#4aa3e0; --c4:#6d7b8b; } /* CTA button color: black-on-light in the hybrid theme (Nexflow's grammar), accent-filled in the dark theme (Pulse's own grammar). */ html[data-theme="hybrid"]{ --btn-primary-bg: var(--ink); --btn-primary-fg: var(--bg-2); --btn-primary-hover: #2a2a24; } html[data-theme="dark"]{ --btn-primary-bg: var(--accent); --btn-primary-fg: #071019; --btn-primary-hover: var(--accent-bright); } *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ font-size:16px; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); -webkit-text-size-adjust:100%; } body{ background:var(--bg); color:var(--ink); font-family:var(--font); font-weight:400; line-height:1.6; letter-spacing:0.005em; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; } img,svg{ display:block; max-width:100%; } button{ font-family:inherit; cursor:pointer; } ::selection{ background:var(--sel-bg); color:var(--sel-fg); } /* Ambient field - a single quiet radial, not a starfield/scanline stack */ body::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(1100px 620px at 72% -8%, var(--accent-dim), transparent 60%), radial-gradient(900px 700px at 8% 4%, var(--accent-dim), transparent 68%); opacity:.55; } .shell{ position:relative; z-index:var(--z-base); } .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } /* =========================== Typography ramps =========================== */ .eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:600; letter-spacing:0.02em; color:var(--ink-2); } .eyebrow::before{ content:''; width:20px; height:1px; background:var(--accent-line); } h1,h2,h3{ line-height:1.05; letter-spacing:-0.015em; font-weight:700; text-wrap:balance; } .h-display{ font-size:clamp(34px, 6.2vw, 76px); letter-spacing:-0.025em; line-height:0.98; } .h-section{ font-size:clamp(28px, 4vw, 46px); } .h-sub{ font-size:clamp(19px, 2.2vw, 24px); font-weight:600; letter-spacing:-0.01em; } .lead{ font-size:clamp(16px, 1.5vw, 19px); color:var(--ink-2); font-weight:400; line-height:1.62; max-width:60ch; text-wrap:pretty; } .muted{ color:var(--ink-2); } .dim{ color:var(--ink-3); } .mono-num{ font-variant-numeric:tabular-nums; } /* =========================== Buttons =========================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 24px; border-radius:var(--r-s); font-size:13px; font-weight:700; letter-spacing:0.03em; border:1px solid transparent; white-space:nowrap; transition:transform .18s cubic-bezier(.2,.7,.3,1), background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; } .btn:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:3px; } .btn svg{ width:16px; height:16px; } .btn--primary{ background:var(--btn-primary-bg); color:var(--btn-primary-fg); border-color:var(--btn-primary-bg); } .btn--primary:hover{ background:var(--btn-primary-hover); border-color:var(--btn-primary-hover); transform:translateY(-1px); box-shadow:0 10px 26px -14px rgba(0,0,0,.45); } .btn--ghost{ background:transparent; color:var(--ink); border-color:var(--border-hi); } .btn--ghost:hover{ border-color:var(--ink); color:var(--ink); background:var(--inset); transform:translateY(-1px); } .btn--sm{ padding:9px 16px; font-size:12px; } .btn--lg{ padding:16px 30px; font-size:14px; } .btn--block{ width:100%; } .linkline{ display:inline-flex; align-items:center; gap:7px; color:var(--accent-bright); font-weight:600; font-size:13px; } .linkline svg{ width:14px; height:14px; transition:transform .2s ease; } .linkline:hover svg{ transform:translateX(3px); } /* =========================== Nav =========================== */ .nav{ position:fixed; inset:0 0 auto 0; z-index:var(--z-nav); height:var(--nav-h); display:flex; align-items:center; background:color-mix(in srgb, var(--bg-2) 72%, transparent); border-bottom:1px solid var(--border); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); transition:border-color .3s ease, background .3s ease; } .nav--scrolled{ background:color-mix(in srgb, var(--bg-2) 92%, transparent); border-color:var(--border-hi); } /* Theme / accent preview switch - segmented tabs, nav-native vocabulary */ .nav__in{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:flex; align-items:center; gap:20px; } .brand{ display:flex; align-items:center; gap:11px; margin-right:auto; } .brand__logo{ height:26px; width:auto; opacity:.95; } .brand__div{ width:1px; height:20px; background:var(--border-hi); } .brand__name{ font-weight:700; font-size:15px; letter-spacing:0.01em; } .brand__name span{ color:var(--accent-bright); } .brand__tag{ font-size:10px; font-weight:600; letter-spacing:0.14em; color:var(--ink-3); border:1px solid var(--border); border-radius:4px; padding:2px 6px; margin-left:2px; } .nav__links{ display:flex; align-items:center; gap:4px; } .nav__links a{ font-size:13px; font-weight:500; color:var(--ink-2); padding:8px 12px; border-radius:var(--r-s); transition:color .18s ease, background .18s ease; } .nav__links a:hover{ color:var(--ink); background:rgba(255,255,255,0.04); } .nav__cta{ display:flex; align-items:center; gap:10px; } .nav__burger{ display:none; width:40px; height:40px; border:1px solid var(--border-hi); border-radius:var(--r-s); background:transparent; flex-direction:column; gap:4px; align-items:center; justify-content:center; } .nav__burger span{ width:17px; height:1.5px; background:var(--ink); transition:transform .25s ease, opacity .2s ease; } .nav__burger.open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); } .nav__burger.open span:nth-child(2){ opacity:0; } .nav__burger.open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); } .nav__mobile{ display:none; position:fixed; top:var(--nav-h); left:0; right:0; z-index:var(--z-nav); background:var(--bg-2); border-bottom:1px solid var(--border); padding:12px var(--gutter) 20px; } .nav__mobile.open{ display:block; } .nav__mobile a{ display:block; padding:13px 4px; font-size:15px; font-weight:500; color:var(--ink-2); border-bottom:1px solid var(--border); } .nav__mobile a:last-of-type{ border-bottom:0; } .nav__mobile .btn{ margin-top:14px; } /* =========================== Section rhythm =========================== */ .section{ position:relative; padding-block:clamp(72px, 11vw, 140px); } .section--tight{ padding-block:clamp(56px, 8vw, 100px); } .section__head{ max-width:64ch; } .section__head .lead{ margin-top:18px; } .divider-rule{ height:1px; background:linear-gradient(90deg, var(--border-hi), transparent); } /* =========================== Hero =========================== */ .hero{ position:relative; padding-top:calc(var(--nav-h) + clamp(48px,8vw,96px)); padding-bottom:clamp(48px,7vw,96px); overflow:hidden; } /* Grain corner accent - CSS-only noise + gradient, no image asset. Reads as atmospheric texture behind the dashboard card, echoing the reference's grainy corner in either theme. */ .hero::before{ content:''; position:absolute; z-index:0; pointer-events:none; top:-8%; right:-12%; width:min(720px,60%); height:78%; background-image: radial-gradient(closest-side, rgba(0,0,0,.55), transparent 72%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:auto, 180px 180px; opacity:var(--grain-opacity); mask-image:radial-gradient(closest-side, black 55%, transparent 92%); -webkit-mask-image:radial-gradient(closest-side, black 55%, transparent 92%); } .hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(32px,5vw,64px); align-items:center; } .hero__title .row{ display:block; } .hero__title em{ font-style:normal; color:var(--accent-bright); } .hero__lead{ margin-top:24px; } .hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; } .hero__note{ margin-top:18px; font-size:12.5px; color:var(--ink-3); display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .hero__note b{ color:var(--ink-2); font-weight:600; } .hero__dot{ width:5px; height:5px; border-radius:50%; background:var(--good); box-shadow:0 0 0 3px rgba(74,222,128,.16); } /* trust row under hero */ .trust{ margin-top:clamp(44px,6vw,72px); border-top:1px solid var(--border); padding-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:clamp(20px,4vw,48px); } .trust__label{ font-size:11px; font-weight:600; letter-spacing:0.12em; color:var(--ink-3); } .trust__stats{ display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,48px); } .stat__v{ font-size:22px; font-weight:700; letter-spacing:-0.01em; } .stat__v span{ color:var(--accent-bright); } .stat__l{ font-size:12px; color:var(--ink-2); margin-top:2px; } /* =========================== App-UI recreation (product imagery) =========================== */ .appframe{ /* Dashboard hardware: always dark, in either page theme. Re-pinning these custom properties here means every nested component below (tables, tiles, tabs, bars, chips) inherits dark values for free. */ --bg-2: #0a0d12; --panel: #12171f; --panel-2: #191f29; --inset: #0c1016; --border: rgba(233,238,245,0.09); --border-hi: rgba(233,238,245,0.16); --ink: #e8eef5; --ink-2: #a7b4c4; --ink-3: #6d7b8b; --sel-bg: #14293a; --sel-fg: #d4e8fb; /* color must be redeclared, not just the custom property: `color` is inherited as an already-resolved value, so a descendant that never sets its own `color` (headings, plain text) would otherwise keep the page's color instead of picking up the dark values above. */ color:var(--ink); position:relative; border:1px solid var(--border-hi); border-radius:14px; background:linear-gradient(180deg, var(--panel), var(--bg-2)); box-shadow:0 30px 80px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02) inset; overflow:hidden; } .appframe__bar{ display:flex; align-items:center; gap:10px; height:38px; padding:0 14px; background:var(--inset); border-bottom:1px solid var(--border); } .appframe__dots{ display:flex; gap:6px; } .appframe__dots i{ width:9px; height:9px; border-radius:50%; background:#2a323d; display:block; } .appframe__title{ font-size:11px; font-weight:600; color:var(--ink-3); letter-spacing:0.06em; } .appframe__chip{ margin-left:auto; font-size:10px; font-weight:600; letter-spacing:0.08em; color:var(--accent-bright); border:1px solid var(--accent-line); border-radius:4px; padding:2px 8px; background:var(--accent-dim); } .appframe__body{ padding:16px; } /* Real app screenshots sit flush inside the frame chrome */ .appframe--shot .appframe__body{ padding:0; } .appframe--shot .shot-img{ width:100%; height:auto; display:block; } .appframe__cap{ font-size:12px; color:var(--ink-3); margin-top:12px; line-height:1.5; } .appframe__cap b{ color:var(--ink-2); font-weight:600; } /* Screenshot gallery */ .gallery{ margin-top:44px; display:grid; grid-template-columns:repeat(12,1fr); gap:18px; } .gcard{ grid-column:span 6; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--panel); transition:border-color .2s ease, transform .2s ease; } .gcard:hover{ border-color:var(--border-hi); transform:translateY(-2px); } .gcard--wide{ grid-column:span 12; } .gcard__bar{ display:flex; align-items:center; gap:9px; height:34px; padding:0 13px; background:var(--inset); border-bottom:1px solid var(--border); } .gcard__bar .appframe__dots i{ width:8px; height:8px; } .gcard__name{ font-size:11px; font-weight:600; letter-spacing:0.05em; color:var(--ink-2); } .gcard__tag{ margin-left:auto; font-size:10px; font-weight:600; letter-spacing:0.07em; color:var(--accent-bright); } .gcard__img{ width:100%; height:auto; display:block; } .gcard__cap{ padding:13px 16px; } .gcard__cap h4{ font-size:14px; font-weight:700; margin-bottom:4px; } .gcard__cap p{ font-size:12.5px; color:var(--ink-2); line-height:1.5; } @media (max-width: 760px){ .gcard{ grid-column:span 12; } } /* segmented tabs (app vocabulary) */ .segtabs{ display:inline-flex; padding:3px; gap:2px; background:var(--inset); border:1px solid var(--border); border-radius:var(--r-s); } .segtabs button{ font-size:11px; font-weight:600; letter-spacing:0.03em; color:var(--ink-3); background:transparent; border:0; padding:6px 12px; border-radius:4px; transition:color .16s, background .16s; } .segtabs button[aria-selected="true"]{ background:var(--sel-bg); color:var(--sel-fg); } /* creator head row inside app */ .crhead{ display:flex; align-items:center; gap:12px; margin-bottom:14px; } .crhead__ava{ width:40px; height:40px; border-radius:9px; background:linear-gradient(135deg,#22303e,#161d26); border:1px solid var(--border-hi); display:grid; place-items:center; font-weight:700; color:var(--accent-bright); font-size:15px; } .crhead__name{ font-size:15px; font-weight:700; } .crhead__meta{ font-size:11px; color:var(--ink-2); font-weight:500; } .crhead__spark{ margin-left:auto; } /* match rows - ranked brand recommendations with explainable reasons */ .matchlist{ display:flex; flex-direction:column; gap:8px; } .matchrow{ background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-s); padding:11px 13px; } .matchrow__top{ display:flex; align-items:center; gap:10px; } .matchrow__rank{ font-size:11px; font-weight:700; color:var(--ink-3); width:20px; } .matchrow__brand{ font-size:13.5px; font-weight:600; } .matchrow__pct{ margin-left:auto; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; } .matchrow__bar{ height:4px; border-radius:2px; background:var(--inset); margin-top:9px; overflow:hidden; } .matchrow__bar i{ display:block; height:100%; border-radius:2px; background:linear-gradient(90deg,var(--accent-deep),var(--accent-bright)); } .matchrow__reasons{ margin-top:9px; display:flex; flex-wrap:wrap; gap:5px; } .reason{ font-size:10.5px; font-weight:500; color:var(--ink-2); background:var(--inset); border:1px solid var(--border); border-radius:4px; padding:3px 7px; } .reason b{ color:var(--ink); font-weight:600; } /* channel avatars + brand logo chips */ .ava-img{ width:40px; height:40px; border-radius:9px; object-fit:cover; border:1px solid var(--border-hi); flex-shrink:0; background:var(--panel-2); } .ava-img--sm{ width:24px; height:24px; border-radius:6px; } .logo-chip{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:6px; background:#f4f6f8; flex-shrink:0; overflow:hidden; } .logo-chip--sm{ width:20px; height:20px; border-radius:5px; } .logo-chip img{ width:78%; height:78%; object-fit:contain; } .matchrow__brand-wrap{ display:flex; align-items:center; gap:9px; } .apptable td .cell-ic{ display:inline-flex; align-items:center; gap:9px; } /* creator switcher chips (interactive) */ .crchips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; } .crchip{ font-size:11px; font-weight:600; color:var(--ink-2); background:var(--inset); border:1px solid var(--border); border-radius:100px; padding:5px 12px; transition:color .15s, border-color .15s, background .15s; } .crchip:hover{ color:var(--ink); border-color:var(--border-hi); } .crchip[aria-pressed="true"]{ background:var(--sel-bg); border-color:var(--accent-line); color:var(--sel-fg); } /* metric tiles */ .mtiles{ display:grid; gap:8px; } .mtiles--3{ grid-template-columns:repeat(3,1fr); } .mtiles--2{ grid-template-columns:repeat(2,1fr); } .mtile{ background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-s); padding:11px 13px; } .mtile__l{ font-size:9.5px; font-weight:600; letter-spacing:0.07em; color:var(--ink-3); text-transform:uppercase; } .mtile__v{ font-size:17px; font-weight:700; margin-top:4px; letter-spacing:-0.01em; } .mtile__v small{ font-size:11px; color:var(--ink-3); font-weight:500; } .mtile__v.accent{ color:var(--accent-bright); } /* est rate strip */ .estrip{ display:flex; align-items:center; gap:12px; background:var(--inset); border:1px solid var(--border); border-radius:var(--r-s); padding:12px 14px; margin-top:12px; } .estrip__l{ font-size:9.5px; font-weight:600; letter-spacing:0.07em; color:var(--ink-3); text-transform:uppercase; } .estrip__v{ font-size:19px; font-weight:700; letter-spacing:-0.01em; } .estrip__note{ margin-left:auto; text-align:right; font-size:10px; color:var(--ink-3); line-height:1.4; } /* momentum bars (rising / cooling) */ .mbars{ display:flex; flex-direction:column; gap:9px; } .mbar{ display:grid; grid-template-columns:1fr 1.4fr auto; align-items:center; gap:11px; } .mbar__l{ font-size:12px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:8px; } .mbar__track{ height:5px; border-radius:3px; background:var(--inset); overflow:hidden; } .mbar__track i{ display:block; height:100%; border-radius:3px; } .mbar--up .mbar__track i{ background:linear-gradient(90deg, rgba(74,222,128,.4), var(--good)); } .mbar--dn .mbar__track i{ background:linear-gradient(90deg, rgba(248,113,113,.35), var(--bad)); } .mbar__v{ font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; text-align:right; min-width:70px; } .mbar--up .mbar__v{ color:var(--good); } .mbar--dn .mbar__v{ color:var(--bad); } .mgroup__h{ font-size:10px; font-weight:700; letter-spacing:0.08em; margin:4px 0 2px; } .mgroup__h.up{ color:var(--good); } .mgroup__h.dn{ color:var(--bad); } /* cluster opportunity rows */ .oplist{ display:flex; flex-direction:column; gap:7px; } .oprow{ display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-s); padding:9px 12px; transition:border-color .15s, transform .15s; } .oprow:hover{ border-color:var(--border-hi); transform:translateX(2px); } .oprow__dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; } .oprow__name{ font-size:12.5px; font-weight:600; } .oprow__meta{ margin-left:auto; font-size:10.5px; color:var(--ink-3); font-weight:500; } .optag{ font-size:9.5px; font-weight:700; letter-spacing:0.05em; border-radius:4px; padding:2px 7px; } .optag--shared{ color:var(--good); background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.25); } .optag--cluster{ color:var(--accent-bright); background:var(--accent-dim); border:1px solid var(--accent-line); } /* deal-volume chart */ .dchart{ border:1px solid var(--border); border-radius:var(--r-s); background:var(--inset); padding:14px; } .dchart__h{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; } .dchart__t{ font-size:10px; font-weight:600; letter-spacing:0.07em; color:var(--ink-3); text-transform:uppercase; } .dchart__d{ font-size:11px; font-weight:700; color:var(--bad); } .dchart svg{ width:100%; height:auto; display:block; } .dchart__grad stop{ stop-color:var(--accent); } .dchart__line{ stroke:var(--accent); } .dchart polygon{ fill:url(#dv); } .dchart__x{ display:flex; justify-content:space-between; margin-top:5px; } .dchart__x span{ font-size:9.5px; color:var(--ink-3); } /* two-pane db split */ .dbsplit{ display:grid; grid-template-columns:1fr; gap:14px; } .dbpane__h{ display:flex; align-items:center; gap:8px; margin-bottom:9px; } .dbpane__t{ font-size:10px; font-weight:600; letter-spacing:0.06em; color:var(--ink-3); text-transform:uppercase; } .dbsearch{ margin-left:auto; font-size:10.5px; color:var(--ink-3); background:var(--inset); border:1px solid var(--border); border-radius:4px; padding:4px 9px; min-width:110px; } .apptable tbody tr{ cursor:default; } .apptable tbody tr.sel td{ background:var(--sel-bg); } .apptable tbody tr:hover td{ background:rgba(255,255,255,.03); } .apptable th.sortable{ cursor:pointer; } .apptable th .caret{ color:var(--accent-bright); font-size:9px; } .niche-chip{ font-size:10px; font-weight:600; color:var(--ink-2); background:var(--inset); border:1px solid var(--border); border-radius:4px; padding:1px 6px; } /* generic app table */ .apptable{ width:100%; border-collapse:collapse; font-size:12px; } .apptable th{ text-align:left; font-size:10px; font-weight:600; letter-spacing:0.06em; color:var(--ink-3); padding:8px 10px; border-bottom:1px solid var(--border); } .apptable td{ padding:9px 10px; border-bottom:1px solid var(--border); color:var(--ink-2); } .apptable tr:last-child td{ border-bottom:0; } .apptable tr:nth-child(even) td{ background:rgba(255,255,255,.015); } .apptable .num{ text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); } .apptable .brand{ color:var(--ink); font-weight:600; } .grade{ display:inline-block; min-width:22px; text-align:center; font-weight:700; font-size:11px; border-radius:4px; padding:1px 5px; } .grade--a{ color:var(--good); background:rgba(74,222,128,.12); } .grade--b{ color:var(--accent-bright); background:var(--accent-dim); } .grade--c{ color:var(--warn); background:rgba(244,183,64,.12); } /* momentum arrows */ .mom{ font-weight:700; font-variant-numeric:tabular-nums; } .mom--up{ color:var(--good); } .mom--dn{ color:var(--bad); } .mom--flat{ color:var(--ink-3); } /* =========================== Feature sections (alternating) =========================== */ .feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; } .feature + .feature{ margin-top:clamp(72px,10vw,128px); } .feature--flip .feature__media{ order:-1; } .feature__title{ font-size:clamp(24px,3vw,34px); margin-bottom:16px; } .feature__body{ color:var(--ink-2); font-size:15.5px; line-height:1.64; max-width:52ch; } .feature__list{ margin-top:22px; display:flex; flex-direction:column; gap:12px; } .feature__list li{ display:flex; gap:11px; font-size:14px; color:var(--ink-2); } .feature__list svg{ width:17px; height:17px; flex-shrink:0; margin-top:2px; color:var(--accent-bright); } .feature__list b{ color:var(--ink); font-weight:600; } /* jobs strip - varied rhythm, not identical card grid */ .jobs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; margin-top:44px; } @media (max-width: 760px){ .jobs{ grid-template-columns:1fr 1fr; } } @media (max-width: 480px){ .jobs{ grid-template-columns:1fr; } } .job{ background:var(--panel); padding:24px 22px; transition:background .2s ease; } .job:hover{ background:var(--panel-2); } .job__n{ font-size:11px; font-weight:700; color:var(--accent-bright); font-variant-numeric:tabular-nums; } .job__t{ font-size:15px; font-weight:700; margin:10px 0 7px; display:flex; align-items:center; gap:8px; } .job__d{ font-size:12.5px; color:var(--ink-2); line-height:1.55; } .jobtag{ font-size:9px; font-weight:700; letter-spacing:0.08em; color:var(--accent-bright); border:1px solid var(--accent-line); background:var(--accent-dim); border-radius:4px; padding:2px 6px; } .soon{ font-size:0.85em; font-weight:600; letter-spacing:0.04em; color:var(--ink-3); border:1px solid var(--border-hi); border-radius:4px; padding:1px 6px; white-space:nowrap; } /* =========================== Model / algorithm =========================== */ .model{ background:var(--bg-2); border-block:1px solid var(--border); } .model__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(32px,5vw,64px); align-items:start; } .pipeline{ display:flex; flex-direction:column; gap:10px; } .pnode{ position:relative; border:1px solid var(--border); border-radius:var(--r); background:var(--panel); padding:16px 18px; } .pnode__k{ display:flex; align-items:center; gap:10px; } .pnode__badge{ font-size:10px; font-weight:700; letter-spacing:0.08em; color:var(--accent-bright); border:1px solid var(--accent-line); background:var(--accent-dim); border-radius:4px; padding:2px 7px; } .pnode__w{ margin-left:auto; font-size:11px; font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums; } .pnode__t{ font-size:14.5px; font-weight:700; margin:9px 0 5px; } .pnode__d{ font-size:12.5px; color:var(--ink-2); line-height:1.55; } .pnode--foundation{ border-color:var(--accent-line); } .pnode__link{ display:flex; justify-content:center; color:var(--ink-3); } .pnode__link svg{ width:15px; height:15px; } .formula{ border:1px solid var(--border); border-radius:var(--r); background:var(--inset); padding:20px; } .formula code{ font-family:var(--font); font-size:13px; color:var(--ink); line-height:1.9; display:block; } .formula .op{ color:var(--accent-bright); } .formula .cm{ color:var(--ink-3); } .model__points{ margin-top:22px; display:flex; flex-direction:column; gap:16px; } .mpoint__t{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:9px; } .mpoint__t svg{ width:16px; height:16px; color:var(--accent-bright); } .mpoint__d{ font-size:13px; color:var(--ink-2); margin-top:5px; line-height:1.55; padding-left:25px; } /* =========================== Model tuning (customizability) =========================== */ .wpanel{ display:flex; flex-direction:column; gap:13px; } .wrow{ display:grid; grid-template-columns:118px 1fr 42px; align-items:center; gap:12px; } .wrow__l{ font-size:12px; font-weight:600; color:var(--ink-2); } .wrow__track{ position:relative; height:6px; border-radius:3px; background:var(--inset); border:1px solid var(--border); } .wrow__fill{ position:absolute; inset:0 auto 0 0; border-radius:3px; background:linear-gradient(90deg,var(--accent-deep),var(--accent-bright)); } .wrow__knob{ position:absolute; top:50%; width:13px; height:13px; border-radius:50%; background:var(--accent-bright); border:2px solid var(--bg-2); transform:translate(-50%,-50%); box-shadow:0 1px 4px rgba(0,0,0,.5); } .wrow__v{ font-size:12px; font-weight:700; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; } .wfoot{ margin-top:15px; padding-top:14px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .wfoot__note{ font-size:11px; color:var(--ink-3); font-weight:500; display:inline-flex; align-items:center; gap:7px; } .wfoot__note .hero__dot{ background:var(--accent-bright); box-shadow:0 0 0 3px rgba(74,163,224,.18); } /* Interactive model tuner */ .tuner__head{ display:flex; align-items:center; gap:11px; margin-bottom:16px; } .tuner__head .crhead__name{ font-size:14px; } .tuner__shuffle{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--accent-bright); background:var(--accent-dim); border:1px solid var(--accent-line); border-radius:var(--r-s); padding:6px 11px; transition:background .15s; } .tuner__shuffle:hover{ background:rgba(74,163,224,.2); } .tuner__shuffle svg{ width:13px; height:13px; } .tuner__sliders{ display:flex; flex-direction:column; gap:11px; } .tuner__row{ display:grid; grid-template-columns:110px 1fr 40px; align-items:center; gap:12px; cursor:pointer; } .tuner__l{ font-size:12px; font-weight:600; color:var(--ink-2); } .tuner__v{ font-size:12px; font-weight:700; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; } .tuner__row input[type="range"]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px; background:var(--inset); border:1px solid var(--border); outline:none; cursor:pointer; } .tuner__row input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:15px; height:15px; border-radius:50%; background:var(--accent-bright); border:2px solid var(--bg-2); box-shadow:0 1px 4px rgba(0,0,0,.5); cursor:grab; } .tuner__row input[type="range"]::-moz-range-thumb{ width:15px; height:15px; border-radius:50%; background:var(--accent-bright); border:2px solid var(--bg-2); cursor:grab; } .tuner__row input[type="range"]:focus-visible{ border-color:var(--accent); } .tuner__foot{ display:flex; align-items:center; gap:10px; margin:15px 0 4px; padding-top:14px; border-top:1px solid var(--border); } .tuner__foot .wfoot__note{ font-size:11px; color:var(--ink-3); font-weight:500; display:inline-flex; align-items:center; gap:7px; } .tuner__foot .hero__dot{ background:var(--accent-bright); box-shadow:0 0 0 3px rgba(74,163,224,.18); } .tuner__reset{ margin-left:auto; font-size:11px; font-weight:600; color:var(--ink-3); background:transparent; border:1px solid var(--border); border-radius:var(--r-s); padding:5px 11px; transition:color .15s, border-color .15s; } .tuner__reset:hover{ color:var(--ink); border-color:var(--border-hi); } .tuner__results-h{ font-size:10px; font-weight:600; letter-spacing:0.06em; color:var(--ink-3); text-transform:uppercase; margin:14px 0 10px; } /* End-to-end on-machine band */ .onmachine{ background:var(--bg-2); border-block:1px solid var(--border); } .onmachine__grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center; } .pipeflow{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-top:26px; } .pipeflow__step{ font-size:12px; font-weight:600; color:var(--ink); background:var(--panel); border:1px solid var(--border-hi); border-radius:var(--r-s); padding:9px 13px; white-space:nowrap; } .pipeflow__ar{ color:var(--accent-bright); font-weight:700; } .emlist{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; } .emitem{ background:var(--panel); padding:20px 20px; } .emitem__ic{ color:var(--accent-bright); margin-bottom:11px; } .emitem__ic svg{ width:20px; height:20px; } .emitem__t{ font-size:14px; font-weight:700; margin-bottom:6px; } .emitem__d{ font-size:12.5px; color:var(--ink-2); line-height:1.5; } @media (max-width: 640px){ .emlist{ grid-template-columns:1fr; } .onmachine__grid{ grid-template-columns:1fr; } } /* Compact 3-across dashboard previews, reusing real app-UI recreations */ .howcards{ margin-top:clamp(36px,5vw,56px); display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .howcard .appframe__body{ padding:14px; } .howcard .matchlist{ gap:6px; } .howcard .matchrow{ padding:9px 11px; } @media (max-width: 780px){ .howcards{ grid-template-columns:1fr; } } /* =========================== FAQ =========================== */ .faq{ margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; } .faqrow{ background:var(--panel); padding:18px 22px; } .faqrow summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; } .faqrow summary::-webkit-details-marker{ display:none; } .faqrow__ic{ flex-shrink:0; width:22px; height:22px; border-radius:6px; border:1px solid var(--border-hi); display:grid; place-items:center; font-size:14px; font-weight:400; color:var(--ink-3); transition:transform .2s ease; } .faqrow[open] .faqrow__ic{ transform:rotate(45deg); } .faqrow p{ margin-top:12px; font-size:13.5px; color:var(--ink-2); line-height:1.6; max-width:52ch; } @media (max-width: 780px){ .faq{ grid-template-columns:1fr; } } /* "Need a custom plan?" banner under Compare */ .custombanner{ margin-top:18px; border:1px solid var(--border); border-radius:var(--r); background:var(--panel); padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } .custombanner__t{ font-size:15px; font-weight:700; } .custombanner__d{ font-size:13px; color:var(--ink-2); margin-top:3px; } /* =========================== Rate card (interactive stats card) =========================== */ .ratecard-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center; } .rc-controls{ display:flex; flex-direction:column; gap:18px; margin-top:26px; } .rc-ctl__l{ font-size:11px; font-weight:600; letter-spacing:0.06em; color:var(--ink-3); text-transform:uppercase; margin-bottom:9px; } .rc-stage{ display:flex; justify-content:center; } .ratecard{ --border: rgba(233,238,245,0.09); --border-hi: rgba(233,238,245,0.16); --ink: #e8eef5; --ink-2: #a7b4c4; --ink-3: #6d7b8b; color:var(--ink); position:relative; width:100%; max-width:420px; overflow:hidden; border:1px solid var(--border-hi); border-radius:14px; background:linear-gradient(170deg, #0c111a, #0a0d12 60%); box-shadow:0 40px 90px -50px rgba(0,0,0,.95); padding:30px 28px 24px; } .ratecard::before{ /* faint starfield, confined to the card (faithful to the export) */ content:''; position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none; background-image: radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,.35), transparent), radial-gradient(1px 1px at 42% 32%, rgba(255,255,255,.3), transparent), radial-gradient(1px 1px at 88% 44%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 22% 62%, rgba(255,255,255,.3), transparent), radial-gradient(1px 1px at 64% 74%, rgba(255,255,255,.35), transparent), radial-gradient(1.4px 1.4px at 30% 88%, rgba(255,255,255,.3), transparent), radial-gradient(1px 1px at 92% 82%, rgba(255,255,255,.3), transparent); } .ratecard > *{ position:relative; z-index:1; } .rc-eyebrow{ font-size:11px; font-weight:700; letter-spacing:0.34em; color:var(--accent-bright); } .rc-name{ font-size:30px; font-weight:700; letter-spacing:-0.02em; margin-top:8px; line-height:1; } .rc-sub{ font-size:11.5px; color:var(--ink-2); font-weight:500; margin-top:9px; } .rc-rule{ height:1.5px; background:linear-gradient(90deg, var(--accent), rgba(74,163,224,.15)); margin:16px 0 18px; border-radius:2px; } .ratecard[data-tpl="banner"]{ text-align:center; } .ratecard[data-tpl="banner"] .rc-rule{ background:linear-gradient(90deg, transparent, var(--accent), transparent); } .ratecard[data-tpl="minimal"] .rc-eyebrow{ letter-spacing:0.18em; color:var(--ink-3); } .ratecard[data-tpl="minimal"] .rc-sub{ text-transform:uppercase; font-size:10px; letter-spacing:0.04em; } .ratecard[data-tpl="banner"] .rc-eyebrow{ letter-spacing:0.4em; } .rc-metrics{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; } .rc-cell{ background:rgba(255,255,255,.035); border:1px solid var(--border); border-radius:8px; padding:12px 13px; text-align:center; } .rc-cell__v{ font-size:19px; font-weight:700; letter-spacing:-0.01em; } .rc-cell__v.accent{ color:var(--accent-bright); } .rc-cell__l{ font-size:8.5px; font-weight:600; letter-spacing:0.08em; color:var(--ink-3); text-transform:uppercase; margin-top:5px; } /* header layout variants */ .rc-headrow{ display:flex; align-items:center; gap:13px; } .rc-headrow .ava-img{ width:46px; height:46px; border-radius:11px; } .rc-headwrap{ display:flex; flex-direction:column; align-items:center; text-align:center; } .rc-ava-c{ margin-bottom:12px; } .rc-ava-c .ava-img{ width:56px; height:56px; border-radius:14px; } .ratecard[data-tpl="minimal"] .rc-name{ font-size:34px; } /* area + sparkline charts */ .rc-area svg{ width:100%; height:70px; display:block; } .rc-area .rc-accent, .rc-spark .rc-accent{ color:var(--accent); } .rc-area stop.rc-accent, .rc-area linearGradient.rc-accent stop{ stop-color:var(--accent); } .rc-spark{ display:flex; align-items:center; gap:12px; margin-top:6px; } .rc-spark svg{ flex:1; height:26px; display:block; } .rc-spark__m{ font-size:9px; font-weight:700; color:var(--warn); white-space:nowrap; } .rc-chart-h{ font-size:10px; font-weight:700; letter-spacing:0.14em; color:var(--accent-bright); margin:20px 0 12px; } .rc-bars{ position:relative; display:flex; align-items:flex-end; gap:3px; height:120px; border-bottom:1px solid var(--border); } .rc-bars i{ flex:1; background:linear-gradient(180deg, var(--accent), var(--accent-deep)); border-radius:2px 2px 0 0; min-height:3px; transition:height .5s cubic-bezier(.2,.7,.3,1); } .rc-bars i.med{ background:linear-gradient(180deg,#3a4655,#2a323d); } .rc-median{ position:absolute; left:0; right:0; border-top:1.5px dashed var(--warn); } .rc-median span{ position:absolute; right:0; top:-15px; font-size:9px; font-weight:700; color:var(--warn); } .rc-xaxis{ display:flex; justify-content:space-between; margin-top:6px; } .rc-xaxis span{ font-size:8.5px; color:var(--ink-3); } .rc-foot{ text-align:center; font-size:9px; letter-spacing:0.14em; color:var(--ink-3); margin-top:16px; } @media (max-width: 900px){ .ratecard-wrap{ grid-template-columns:1fr; } .rc-stage{ order:2; } } /* =========================== Comparison =========================== */ .compare{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--r); background:var(--panel); margin-top:44px; } .compare table{ width:100%; border-collapse:collapse; min-width:720px; } .compare th, .compare td{ padding:15px 18px; text-align:left; border-bottom:1px solid var(--border); font-size:13.5px; } .compare thead th{ font-size:12px; font-weight:600; color:var(--ink-2); letter-spacing:0.02em; vertical-align:bottom; } .compare thead th.col-pulse{ color:var(--btn-primary-fg); } .compare .col-pulse{ background:var(--btn-primary-bg); position:relative; } .compare thead .col-pulse{ border-top-left-radius:var(--r); border-top-right-radius:var(--r); } .compare tbody td.col-pulse{ color:color-mix(in srgb, var(--btn-primary-fg) 82%, transparent); font-weight:600; } .compare .rowlabel{ color:var(--ink); font-weight:600; } .compare .rowlabel small{ display:block; color:var(--ink-3); font-weight:400; font-size:11.5px; margin-top:3px; } .compare tbody tr:last-child td{ border-bottom:0; } .compare .pulsehead{ font-size:15px; font-weight:700; color:var(--btn-primary-fg); display:flex; align-items:center; gap:8px; } .compare .pulsehead b{ color:var(--btn-primary-fg); } .compare td.col-pulse{ border-bottom:0; padding-block:19px; } .compare thead .col-pulse{ border-bottom:1px solid #262626; } /* status chips - circular icon + label, not bare svg */ .cell-yes,.cell-no,.cell-part{ font-weight:600; display:inline-flex; align-items:center; gap:8px; } .cell-yes{ color:var(--good); } .cell-no{ color:var(--ink-3); font-weight:500; } .cell-part{ color:var(--warn); } .cell-yes svg,.cell-no svg,.cell-part svg{ width:22px; height:22px; padding:5px; border-radius:50%; flex-shrink:0; } .cell-yes svg{ background:rgba(74,222,128,.14); } .cell-no svg{ background:var(--inset); } .cell-part svg{ background:rgba(244,183,64,.14); } .col-pulse .cell-yes svg{ background:color-mix(in srgb, var(--btn-primary-fg) 16%, transparent); } .compare small.note{ color:var(--ink-3); font-weight:400; } /* =========================== Use cases =========================== */ .cases{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:44px; } @media (max-width: 640px){ .cases{ grid-template-columns:1fr; } } .case{ border:1px solid var(--border); border-radius:var(--r); background:var(--panel); padding:26px 24px; display:flex; flex-direction:column; gap:12px; transition:border-color .2s ease, transform .2s ease; } .case:hover{ border-color:var(--border-hi); transform:translateY(-2px); } .case__ic{ width:38px; height:38px; border-radius:9px; background:var(--accent-dim); border:1px solid var(--accent-line); display:grid; place-items:center; color:var(--accent-bright); } .case__ic svg{ width:19px; height:19px; } .case__t{ font-size:16px; font-weight:700; } .case__d{ font-size:13.5px; color:var(--ink-2); line-height:1.6; } .case__flow{ margin-top:auto; font-size:11.5px; color:var(--ink-3); font-weight:500; display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .case__flow b{ color:var(--accent-bright); font-weight:600; } /* =========================== Pricing =========================== */ .pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; align-items:stretch; } .plan{ border:1px solid var(--border); border-radius:var(--r); background:var(--panel); padding:28px 26px; display:flex; flex-direction:column; } .plan--feature{ --panel: var(--btn-primary-bg); --border: transparent; --border-hi: transparent; --ink: var(--btn-primary-fg); --ink-2: color-mix(in srgb, var(--btn-primary-fg) 72%, transparent); --ink-3: color-mix(in srgb, var(--btn-primary-fg) 50%, transparent); --inset: color-mix(in srgb, var(--btn-primary-fg) 10%, transparent); color:var(--ink); box-shadow:0 28px 64px -36px rgba(0,0,0,.55); } .plan__badge{ align-self:flex-start; font-size:10px; font-weight:700; letter-spacing:0.1em; color:var(--btn-primary-bg); background:var(--btn-primary-fg); border-radius:4px; padding:3px 9px; margin-bottom:14px; } .plan__name{ font-size:14px; font-weight:700; letter-spacing:0.04em; color:var(--ink-2); } .plan__price{ font-size:40px; font-weight:700; letter-spacing:-0.02em; margin-top:12px; } .plan__price small{ font-size:14px; font-weight:500; color:var(--ink-3); letter-spacing:0; } .plan__price .free{ color:var(--ink); } .plan__price .pro-amt{ color:var(--accent-bright); } .plan--feature .plan__price .free{ color:var(--ink); } .plan__sub{ font-size:12.5px; color:var(--ink-3); margin-top:6px; min-height:34px; } .plan__cta{ margin:20px 0; } .plan--feature .plan__cta.btn--primary{ background:var(--ink); color:var(--panel); border-color:var(--ink); } .plan--feature .plan__cta.btn--primary:hover{ background:var(--ink-2); border-color:var(--ink-2); } .plan__feats{ display:flex; flex-direction:column; gap:11px; } .plan__feats li{ display:flex; gap:10px; font-size:13px; color:var(--ink-2); } .plan__feats svg{ width:16px; height:16px; color:var(--accent-bright); flex-shrink:0; margin-top:2px; } .plan--feature .plan__feats svg{ color:var(--ink); } .plan__feats li.off{ color:var(--ink-3); } .plan__feats li.off svg{ color:var(--ink-3); opacity:.5; } .pricing__foot{ margin-top:20px; font-size:12.5px; color:var(--ink-3); text-align:center; } /* =========================== Final CTA =========================== */ .finalcta{ position:relative; overflow:hidden; border:1px solid var(--border-hi); border-radius:16px; background:linear-gradient(150deg, var(--panel), var(--bg-2)); padding:clamp(40px,6vw,72px); text-align:center; } .finalcta::after{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(600px 300px at 50% -30%, var(--accent-dim), transparent 70%); } .finalcta > *{ position:relative; z-index:1; } .finalcta h2{ margin-bottom:16px; } .finalcta .lead{ margin:0 auto 30px; text-align:center; } .finalcta__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; } .finalcta__meta{ margin-top:22px; font-size:12.5px; color:var(--ink-3); } /* =========================== Footer =========================== */ .footer{ border-top:1px solid var(--border); background:var(--bg-2); padding-block:44px; } .footer__grid{ display:flex; flex-wrap:wrap; gap:28px 60px; justify-content:space-between; align-items:flex-start; } .footer__brand{ max-width:34ch; } .footer__brand p{ font-size:13px; color:var(--ink-3); margin-top:14px; line-height:1.6; } .footer__cols{ display:flex; flex-wrap:wrap; gap:44px; } .footer__col h4{ font-size:11px; font-weight:600; letter-spacing:0.1em; color:var(--ink-3); margin-bottom:14px; } .footer__col a{ display:block; font-size:13.5px; color:var(--ink-2); padding:5px 0; transition:color .16s; } .footer__col a:hover{ color:var(--accent-bright); } .footer__bottom{ margin-top:40px; padding-top:22px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; } .footer__bottom p{ font-size:12px; color:var(--ink-3); } /* =========================== Motion (enhances visible content) =========================== */ /* Reveals only hide when JS is present, so no-JS/crawlers see everything. */ .js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); } .js .reveal.in{ opacity:1; transform:none; } .reveal[data-d="1"]{ transition-delay:.08s; } .reveal[data-d="2"]{ transition-delay:.16s; } .reveal[data-d="3"]{ transition-delay:.24s; } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; scroll-behavior:auto !important; } .js .reveal, .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } .btn:hover, .case:hover, .plan:hover{ transform:none; } } /* =========================== Responsive =========================== */ @media (max-width: 940px){ .hero__grid{ grid-template-columns:1fr; gap:40px; } .hero__media{ order:2; } .feature{ grid-template-columns:1fr; gap:32px; } .feature--flip .feature__media{ order:0; } .feature__media{ order:2; } .model__grid{ grid-template-columns:1fr; } .pricing{ grid-template-columns:1fr; max-width:440px; } .plan--feature{ order:-1; } } @media (max-width: 780px){ .nav__links, .nav__cta .btn{ display:none; } .nav__burger{ display:flex; } .nav__cta{ margin-left:auto; } } @media (max-width: 480px){ .hero__actions .btn{ flex:1; } .trust__stats{ gap:24px; } }