/* Scrapless site — hand-written, no build step (prod has no Vite assets). */ /* Fonts (landing "Graphite" v4 design): Space Grotesk from Google Fonts — linked from layout.blade.php so the browser starts it in parallel with this file — and JetBrains Mono self-hosted in /fonts (OFL). */ @font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } :root { --bg: #06090f; --bg-soft: #0a0f18; --card: #0c121d; --border: #1a2434; --border-soft: #141d2b; --text: #e9eff7; --muted: #8e9cb0; --lime: #b8f24b; --green: #3ddc84; --cyan: #38e1c6; --grad: linear-gradient(90deg, var(--lime), var(--cyan)); /* Landing v4 tokens. The design's warm graphite surfaces are mapped onto the site's navy-dark palette so the page background stays as it is. */ --font-sans: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; --l-card: #0c121d; --l-card-grad: linear-gradient(180deg, #121a28, #0c121d); --l-inset: #0a0f18; --l-control: #141d2b; --l-control-hover: #1a2434; --l-alt: #1e2a3c; --l-alt2: #27344a; --l-hairline: rgb(255 255 255 / 0.07); --l-hairline-soft: rgb(255 255 255 / 0.05); --l-lime: #A3E635; --l-lime-hover: #B4F04E; --l-lime-link: #C6F06E; --l-lime-deep: #7CB528; --l-lime-deep2: #86BC22; --l-on-lime: #161A10; --l-yellow: #FACC15; --l-red: #F87171; --l-white: #FFFFFF; --l-body: #98a2b3; --l-soft: #b6bfcc; --l-bright: #ccd3dd; --l-brighter: #dde2ea; --l-muted: #7e8899; /* ≥ 4.5:1 on the page ground (WCAG AA for the small captions) */ /* the hero nest: parts as the app draws them — light grey, black cut lines */ --l-sheet: #0f1622; --l-part: #d6dbe1; --l-cut: #0b0d10; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; } .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .muted { color: var(--muted); } a { color: inherit; text-decoration: none; } img { max-width: 100%; } h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 10px; font-weight: 600; font-size: 15px; cursor: pointer; border: 1px solid transparent; transition: filter .15s, background .15s; } .btn-sm { padding: 9px 16px; font-size: 14px; } .btn-primary { background: var(--grad); color: #06130a; } .btn-primary:hover { filter: brightness(1.1); } .btn-ghost { border-color: var(--border); color: var(--text); background: transparent; } .btn-ghost:hover { background: var(--bg-soft); } .btn-lg { padding: 14px 28px; font-size: 16px; } /* ---------- nav ---------- */ .nav-wrap { position: sticky; top: 0; z-index: 50; background: rgba(6, 9, 15, .82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); } .nav { display: flex; align-items: center; gap: 28px; height: 64px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; } .brand img { border-radius: 8px; } .nav-links { display: flex; gap: 24px; margin-left: auto; font-size: 14.5px; color: var(--muted); } .nav-links a:hover { color: var(--text); } /* ===================================================================== Landing v4 ("Graphite" design on the site's navy-dark ground) ===================================================================== */ .lp { font-family: var(--font-sans); color: var(--l-body); } .lp .wrap { max-width: 1120px; margin: 0 auto; padding-left: 16px; padding-right: 16px; } .lp .mono { font-family: var(--font-mono); } .lp h1, .lp h2, .lp h3 { color: var(--l-white); font-weight: 700; } .lp p { text-wrap: pretty; } .lp a { transition: color 150ms ease-in-out; } .lp a, .lp button, .lp input[type=range] { cursor: pointer; } .lp :focus-visible, .footer :focus-visible { outline: 2px solid var(--l-lime); outline-offset: 3px; border-radius: 6px; } .lp h2 { text-wrap: balance; } @keyframes rise { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: none; } } @keyframes p1 { 0%,2% { opacity: 0; transform: translateY(-12px); } 7%,93% { opacity: 1; transform: none; } 99%,100% { opacity: 0; } } @keyframes p2 { 0%,6% { opacity: 0; transform: translateY(-12px); } 11%,93% { opacity: 1; transform: none; } 99%,100% { opacity: 0; } } @keyframes p3 { 0%,10% { opacity: 0; transform: translateY(-12px); } 15%,93% { opacity: 1; transform: none; } 99%,100% { opacity: 0; } } @keyframes p4 { 0%,14% { opacity: 0; transform: translateY(-12px); } 19%,93% { opacity: 1; transform: none; } 99%,100% { opacity: 0; } } @keyframes p5 { 0%,18% { opacity: 0; transform: translateY(-12px); } 23%,93% { opacity: 1; transform: none; } 99%,100% { opacity: 0; } } @keyframes p6 { 0%,22% { opacity: 0; transform: translateY(-12px); } 27%,93% { opacity: 1; transform: none; } 99%,100% { opacity: 0; } } @keyframes p7 { 0%,26% { opacity: 0; transform: translateY(-12px); } 31%,93% { opacity: 1; transform: none; } 99%,100% { opacity: 0; } } @keyframes p8 { 0%,30% { opacity: 0; transform: translateY(-12px); } 35%,93% { opacity: 1; transform: none; } 99%,100% { opacity: 0; } } @keyframes p9 { 0%,34% { opacity: 0; transform: translateY(-12px); } 39%,93% { opacity: 1; transform: none; } 99%,100% { opacity: 0; } } @keyframes p10 { 0%,38% { opacity: 0; transform: translateY(-12px); } 43%,93% { opacity: 1; transform: none; } 99%,100% { opacity: 0; } } @keyframes p11 { 0%,42% { opacity: 0; transform: translateY(-12px); } 47%,93% { opacity: 1; transform: none; } 99%,100% { opacity: 0; } } @keyframes p12 { 0%,46% { opacity: 0; transform: translateY(-12px); } 51%,93% { opacity: 1; transform: none; } 99%,100% { opacity: 0; } } @keyframes utilbar { 0%,3% { transform: scaleX(0); } 55%,93% { transform: scaleX(0.914); } 100% { transform: scaleX(0); } } .lp .rise { animation: rise 600ms ease-out both; } .lp .rise-2 { animation-delay: 120ms; } .lp .rise-3 { animation-delay: 240ms; } .lp .nest g { animation: 8s ease-out infinite; } .lp .nest .s1 { animation-name: p1; } .lp .nest .s2 { animation-name: p2; } .lp .nest .s3 { animation-name: p3; } .lp .nest .s4 { animation-name: p4; } .lp .nest .s5 { animation-name: p5; } .lp .nest .s6 { animation-name: p6; } .lp .nest .s7 { animation-name: p7; } .lp .nest .s8 { animation-name: p8; } .lp .nest .s9 { animation-name: p9; } .lp .nest .s10 { animation-name: p10; } .lp .nest .s11 { animation-name: p11; } .lp .nest .s12 { animation-name: p12; } @media (prefers-reduced-motion: reduce) { .lp .rise, .lp .nest g, .lp .util-fill { animation: none !important; opacity: 1 !important; transform: none !important; } .lp .util-fill { transform: scaleX(0.914) !important; } } /* buttons & links */ .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 28px; border-radius: 14px; background: var(--l-lime); color: var(--l-on-lime); font-size: 15.5px; font-weight: 700; box-shadow: 0 14px 34px -12px rgb(163 230 53 / 0.6); transition: background 150ms ease-in-out, transform 200ms ease-out; } .lp-btn:hover { background: var(--l-lime-hover); transform: translateY(-1px); color: var(--l-on-lime); } .lp-btn svg { width: 16px; height: 16px; } .lp-btn.sm { height: 38px; padding: 0 20px; border-radius: 12px; font-size: 13px; box-shadow: none; } .lp-btn.ghost { background: var(--l-control); color: var(--l-white); border: 1px solid var(--l-hairline); box-shadow: none; } .lp-btn.ghost:hover { background: var(--l-control-hover); color: var(--l-white); transform: none; } .lp-btn.wide { display: flex; width: 100%; height: 46px; border-radius: 13px; font-size: 14px; } .lp-textlink { font-size: 14px; font-weight: 700; color: var(--l-white); padding-bottom: 3px; border-bottom: 2px solid var(--l-lime); } .lp-textlink:hover { color: var(--l-lime-link); } /* surfaces */ .lp-card { border-radius: 22px; background: var(--l-card); border: 1px solid var(--l-hairline); } .lp-card.grad { background: var(--l-card-grad); } .lp-card.hover { transition: border-color 150ms ease-in-out; } .lp-card.hover:hover { border-color: rgb(163 230 53 / 0.4); } .lp-glow-tr { background: radial-gradient(120% 160% at 100% 0%, rgb(163 230 53 / 0.14), transparent 55%), var(--l-card-grad); } .lp-glow-br { background: radial-gradient(110% 160% at 100% 120%, rgb(163 230 53 / 0.16), transparent 55%), var(--l-card-grad); } .lp-glow-b { background: radial-gradient(120% 180% at 50% 130%, rgb(163 230 53 / 0.2), transparent 60%), var(--l-card-grad); } .lp-tile { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; background: rgb(163 230 53 / 0.12); color: var(--l-lime); } .lp-tile svg { width: 20px; height: 20px; } .lp-tile.sm { width: 38px; height: 38px; border-radius: 12px; background: rgb(163 230 53 / 0.1); } .lp-tile.sm svg { width: 18px; height: 18px; } .lp-bar { display: inline-block; width: 4px; height: 26px; border-radius: 2px; background: var(--l-lime); flex: none; } /* section rhythm */ .lp-section { padding-top: 96px; } .lp-head { display: flex; align-items: center; gap: 12px; } .lp-head h2 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.03em; line-height: 1.1; } .lp-grid { display: grid; gap: 14px; margin-top: 28px; } .lp-grid.two { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); } .lp-grid.three { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } .lp-grid.four { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); margin-top: 14px; } .lp-grid.three-tight { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); margin-top: 14px; } .lp-grid.six { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 10px; margin-top: 22px; } .lp-sub { margin-top: 12px; max-width: 640px; font-size: 15px; line-height: 1.6; } .lp-mini { padding: 16px 18px; border-radius: 16px; min-height: 84px; } .lp-mini b { display: block; font-size: 14px; font-weight: 700; color: var(--l-white); letter-spacing: -0.01em; } .lp-mini span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--l-muted); } .lp-body { margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: var(--l-soft); } /* ---------- hero ---------- */ .lp-hero { padding-top: 72px; } .lp-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 18px; align-items: center; } .lp-hero-copy { padding: 8px; } .lp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 10px; background: var(--l-card); border: 1px solid var(--l-hairline); font-size: 12px; font-weight: 600; color: var(--l-bright); } .lp-chip i { width: 7px; height: 7px; border-radius: 2px; background: var(--l-lime); } .lp-hero h1 { margin-top: 22px; font-size: clamp(40px, 5.4vw, 62px); line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; } .lp-hero h1 u { text-decoration: none; white-space: nowrap; border-bottom: 4px solid var(--l-lime); } .lp-lead { margin-top: 18px; max-width: 480px; font-size: 16px; line-height: 1.6; } .lp-cta-row { display: flex; align-items: center; gap: 22px; margin-top: 28px; flex-wrap: wrap; } .lp-fine { margin-top: 16px; font-size: 12.5px; color: var(--l-muted); } .lp-shot { display: grid; gap: 14px; } .lp-demo { padding: 18px; box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.85); } .lp-demo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .lp-demo-head .file { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--l-white); } .lp-demo-head .file i { width: 3px; height: 16px; border-radius: 2px; background: var(--l-lime); } .lp-demo-head .meta { font-family: var(--font-mono); font-size: 11px; color: var(--l-muted); } .lp-sheet { position: relative; aspect-ratio: 2.1; border-radius: 14px; background: var(--l-sheet); overflow: hidden; } .lp-sheet svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .lp-sheet .part { fill: var(--l-part); stroke: var(--l-cut); stroke-width: 1.5; stroke-linejoin: round; } .lp-sheet .hole { fill: var(--l-sheet); stroke: var(--l-cut); stroke-width: 1.5; stroke-linejoin: round; } .lp-sheet .offcut { fill: rgb(163 230 53 / 0.08); stroke: var(--l-lime); stroke-width: 2; stroke-dasharray: 7 5; stroke-linejoin: round; } .lp-sheet text { font-family: var(--font-mono); font-size: 11px; fill: var(--l-lime); } .lp-util { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .lp-util .track { flex: 1; height: 7px; border-radius: 999px; background: var(--l-control); overflow: hidden; } .lp-util .util-fill { height: 100%; border-radius: 999px; transform-origin: left; background: linear-gradient(90deg, var(--l-lime-deep), var(--l-lime-hover)); animation: utilbar 8s ease-out infinite; } .lp-util .meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--l-muted); white-space: nowrap; } .lp-half { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .lp-half > .lp-card { padding: 18px; } .lp-donut-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .lp-donut { position: relative; width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(var(--l-lime) 0 65.8%, var(--l-yellow) 65.8% 78%, var(--l-alt) 0); } .lp-donut > span { position: absolute; inset: 11px; border-radius: 50%; background: #111a28; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--l-white); } .lp-donut > span small { font-size: 10px; color: var(--l-body); } .lp-legend { display: grid; gap: 6px; font-size: 11.5px; } .lp-legend span { display: flex; align-items: center; gap: 7px; } .lp-legend i { width: 7px; height: 7px; border-radius: 50%; } .lp-shelf .cap { font-size: 11.5px; } .lp-shelf .val { margin-top: 4px; font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--l-white); } .lp-shelf .val small { font-size: 12px; color: var(--l-lime); } .lp-bars { display: flex; align-items: flex-end; gap: 5px; height: 34px; margin-top: 10px; } .lp-bars span { flex: 1; border-radius: 3px; background: var(--l-alt); } .lp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; margin-top: 40px; } .lp-stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; padding: 18px 22px; border-radius: 18px; } .lp-stat i { width: 3px; height: 22px; border-radius: 2px; background: var(--l-lime); align-self: center; flex: none; } .lp-stat b { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--l-white); white-space: nowrap; } .lp-stat span { font-size: 12.5px; } /* ---------- product bento ---------- */ .lp-feature { padding: 26px; } .lp-feature h3 { margin-top: 14px; font-size: 18px; letter-spacing: -0.015em; } .lp-feature p { margin-top: 7px; font-size: 13.5px; line-height: 1.6; } .lp-feature .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .lp-feature .top .mono { font-size: 11.5px; color: var(--l-muted); } .lp-blocks { display: flex; gap: 8px; margin-top: 18px; } .lp-blocks span { height: 44px; border-radius: 9px; } .lp-rows { display: grid; gap: 8px; margin-top: 14px; } .lp-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--l-control); } .lp-row .sw { width: 26px; height: 18px; border-radius: 4px; flex-shrink: 0; } .lp-row .name { font-size: 13px; font-weight: 600; color: var(--l-white); } .lp-row .size { font-family: var(--font-mono); font-size: 11.5px; color: var(--l-muted); } .lp-row .val { margin-left: auto; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--l-lime); } .lp-small { padding: 22px; } .lp-small h3 { margin-top: 12px; font-size: 15px; letter-spacing: -0.01em; } .lp-small p { margin-top: 6px; font-size: 12.5px; line-height: 1.55; } .lp-steps { padding: 10px; margin-top: 14px; } .lp-steps > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px; } .lp-step { padding: 20px 22px; border-radius: 16px; background: var(--l-inset); } .lp-step .n { display: flex; align-items: center; gap: 10px; } .lp-step .n b { font-family: var(--font-mono); font-size: 13px; font-weight: 800; color: var(--l-lime); } .lp-step .n i { flex: 1; height: 1px; background: var(--l-control); } .lp-step h3 { margin-top: 12px; font-size: 16px; letter-spacing: -0.01em; } .lp-step p { margin-top: 6px; font-size: 12.5px; line-height: 1.55; } /* ---------- compare ---------- */ .lp-cmp { padding: 26px 24px; } .lp-cmp.win { border-color: rgb(163 230 53 / 0.4); } .lp-cmp .tag { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .lp-cmp h3 { margin-top: 8px; font-size: 17.5px; letter-spacing: -0.015em; } .lp-cmp ul { list-style: none; display: grid; gap: 10px; margin-top: 16px; } .lp-cmp li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--l-soft); } .lp-cmp li svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; } .c-red { color: var(--l-red); } .c-yellow { color: var(--l-yellow); } .c-lime { color: var(--l-lime); } /* ---------- ROI ---------- */ .lp-roi-wrap { max-width: 940px; margin: 0 auto; padding-left: 16px; padding-right: 16px; } .lp-roi { border-radius: 24px; padding: 34px 32px 32px; } .lp-roi h2 { font-size: clamp(24px, 3.2vw, 32px); letter-spacing: -0.03em; } .lp-roi > p { margin-top: 10px; max-width: 560px; font-size: 14px; line-height: 1.6; } .lp-roi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 28px; margin-top: 26px; align-items: center; } .lp-roi .lab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; font-weight: 600; color: var(--l-bright); } .lp-roi .lab b { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--l-white); } .lp-roi input[type=range] { width: 100%; margin-top: 14px; accent-color: var(--l-lime); cursor: pointer; } .lp-roi .ticks { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--l-muted); margin-top: 6px; } .lp-roi-rows { display: grid; gap: 10px; } .lp-roi-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; } .lp-roi-rows b { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--l-white); } .lp-roi-rows b.dim { color: var(--l-body); } .lp-roi-rows .net { padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 0.1); font-size: 14px; font-weight: 600; color: var(--l-white); } .lp-roi-rows .net b { font-size: 26px; color: var(--l-lime); } /* ---------- pricing ---------- */ .lp-pricing-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .lp-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: var(--l-card); border: 1px solid var(--l-hairline); } .lp-toggle button { height: 38px; padding: 0 18px; border-radius: 9px; border: none; cursor: pointer; font-family: var(--font-sans); font-size: 13px; font-weight: 700; background: transparent; color: var(--l-body); transition: background 150ms ease-in-out; } .lp-toggle button.is-on { background: var(--l-lime); color: var(--l-on-lime); } .lp-plan { position: relative; padding: 28px 26px 26px; } .lp-plan.popular { border-color: rgb(163 230 53 / 0.4); } .lp-plan .pop { position: absolute; top: 22px; right: 22px; padding: 4px 12px; border-radius: 8px; background: var(--l-lime); color: var(--l-on-lime); font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .lp-plan h3 { font-size: 15px; } .lp-price { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; } .lp-price b { font-family: var(--font-mono); font-size: 42px; font-weight: 700; letter-spacing: -0.02em; color: var(--l-white); line-height: 1.1; } .lp-price span { font-size: 13px; color: var(--l-muted); } .lp-plan ul { list-style: none; margin-top: 14px; display: grid; gap: 5px; font-size: 13.5px; } .lp-plan .lp-btn { margin-top: 22px; } .lp-plan .lp-btn.ghost:hover { filter: brightness(1.12); } .lp-foot-note { text-align: center; font-size: 12.5px; color: var(--l-muted); margin-top: 18px; } /* ---------- quotes ---------- */ .lp-quote { padding: 26px 24px; } .lp-quote p { font-size: 15px; line-height: 1.6; color: var(--l-brighter); } .lp-quote .who { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 12.5px; color: var(--l-muted); } .lp-quote .who b { width: 30px; height: 30px; border-radius: 10px; background: var(--l-control); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--l-lime); } /* ---------- FAQ ---------- */ .lp-faq-wrap { max-width: 800px; margin: 0 auto; padding-left: 16px; padding-right: 16px; } .lp-faq-wrap .lp-head { margin-bottom: 24px; } .lp-faq { border-radius: 16px; margin-top: 10px; background: var(--l-card); border: 1px solid var(--l-hairline); overflow: hidden; } .lp-faq-q { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; background: transparent; border: none; cursor: pointer; font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--l-white); text-align: left; } .lp-faq-q::after { content: "+"; font-family: var(--font-mono); font-size: 19px; line-height: 1; color: var(--l-lime); flex-shrink: 0; } .lp-faq.is-open .lp-faq-q::after { content: "−"; } .lp-faq h3 { margin: 0; font-size: inherit; font-weight: inherit; } .lp-faq-a { display: none; padding: 0 20px 18px; font-size: 14px; line-height: 1.6; } .lp-more { margin-top: 22px; font-size: 14px; font-weight: 600; } .lp-more a { color: var(--l-lime-link); } .lp-faq.is-open .lp-faq-a { display: block; } /* ---------- final CTA ---------- */ .lp-final-wrap { max-width: 900px; margin: 0 auto; padding-left: 16px; padding-right: 16px; } .lp-final { border-radius: 26px; padding: 52px 32px; text-align: center; } .lp-final h2 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.035em; text-wrap: balance; } .lp-final p { margin: 14px auto 0; max-width: 440px; font-size: 14.5px; line-height: 1.6; } .lp-final .lp-btn { margin-top: 26px; } .lp-final .lp-fine { margin-top: 14px; } /* ---------- footer (shared by every public page) ---------- */ .footer { max-width: 1120px; margin: 90px auto 0; padding: 44px 16px 20px; border-top: 1px solid var(--l-hairline); font-family: var(--font-sans); } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 32px; } .footer-brand { min-width: 200px; } .footer-brand .brand { font-size: 15px; letter-spacing: -0.02em; color: var(--l-white); } .footer-brand p { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--l-muted); max-width: 200px; } .footer-brand .lp-btn { margin-top: 16px; } .footer h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--l-muted); } .footer-col { display: grid; gap: 11px; margin-top: 16px; } .footer-col a { font-size: 13px; color: var(--l-body); transition: color 150ms ease-in-out; } .footer-col a:hover { color: var(--l-white); } .footer-legal { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--l-hairline-soft); font-size: 12px; color: var(--l-muted); } .footer-legal .mono { font-family: var(--font-mono); font-size: 11px; } /* ---------- auth: register + log in (split card from the v4 "Register" design) ---------- */ @keyframes drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,30px) scale(1.12); } } .auth-wrap { min-height: calc(100vh - 64px); display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .au-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); width: 100%; max-width: 1060px; border-radius: 26px; overflow: hidden; background: var(--l-card); border: 1px solid var(--l-hairline); box-shadow: 0 40px 100px -40px rgb(0 0 0 / 0.9); } .au-side { position: relative; overflow: hidden; min-height: 560px; padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; gap: 28px; background: radial-gradient(130% 110% at 30% 15%, rgb(163 230 53 / 0.22), transparent 60%), var(--l-card-grad); } .au-side .glow { position: absolute; inset: 0; pointer-events: none; } .au-side .glow i { position: absolute; border-radius: 50%; filter: blur(40px); } .au-side .glow .a { top: -120px; left: -80px; width: 480px; height: 480px; background: radial-gradient(circle, rgb(163 230 53 / 0.15), transparent 65%); animation: drift 14s ease-in-out infinite; } .au-side .glow .b { bottom: -140px; right: -100px; width: 520px; height: 520px; background: radial-gradient(circle, rgb(163 230 53 / 0.06), transparent 65%); animation: drift 18s ease-in-out infinite reverse; } .au-side .glow .c { inset: 0; border-radius: 0; filter: none; background: linear-gradient(180deg, rgb(6 9 15 / 0) 40%, rgb(6 9 15 / 0.55)); } .au-title { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; } .au-title h1 { font-size: clamp(34px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; } .au-title p { margin-bottom: 6px; max-width: 240px; font-size: 13.5px; line-height: 1.55; color: rgb(255 255 255 / 0.8); } .au-steps { position: relative; display: flex; gap: 10px; flex-wrap: wrap; list-style: none; } .au-step { flex: 1; min-width: 130px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px 16px 15px; border-radius: 16px; border: 1px solid rgb(255 255 255 / 0.2); background: rgb(6 9 15 / 0.6); color: rgb(255 255 255 / 0.7); backdrop-filter: blur(8px); box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.15); font-size: 13px; font-weight: 600; line-height: 1.35; } .au-step .n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgb(255 255 255 / 0.18); color: var(--l-white); font-size: 12px; font-weight: 800; } .au-step .n svg { width: 13px; height: 13px; } .au-step.is-on { background: var(--l-white); border-color: var(--l-white); color: #0a0d10; box-shadow: 0 16px 36px -14px rgb(0 0 0 / 0.8); } .au-step.is-on .n { background: #0a0d10; color: var(--l-white); } .au-step.lit { color: rgb(255 255 255 / 0.9); } .au-step.lit .n { background: var(--l-lime); color: #0a0d10; } .au-form { position: relative; padding: 44px 44px 40px; display: flex; flex-direction: column; justify-content: center; } .au-form > div { width: 100%; max-width: 380px; margin: 0 auto; animation: rise 400ms ease-out both; } .au-form h2 { font-size: 24px; letter-spacing: -0.025em; text-align: center; } .au-form .sub { margin-top: 8px; font-size: 13px; color: var(--l-muted); text-align: center; } .au-form .alert-err, .au-form .alert-ok { margin: 18px 0 0; } .au-social { display: flex; gap: 10px; margin-top: 22px; } .au-social button { position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: 12px; background: var(--l-control); border: 1px solid var(--l-hairline); color: var(--l-white); font-family: var(--font-sans); font-size: 13px; font-weight: 600; cursor: pointer; transition: filter 150ms ease-in-out; } .au-social button:hover { filter: brightness(1.3); } .au-social button:disabled { cursor: not-allowed; color: var(--l-muted); filter: none; } .au-social button:disabled svg { opacity: 0.45; } .au-social svg { width: 15px; height: 15px; } .au-social .soon { position: absolute; top: -8px; right: 10px; padding: 1px 7px; border-radius: 6px; background: var(--l-alt); color: var(--l-bright); font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .au-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 6px; font-size: 11px; color: var(--l-muted); letter-spacing: 0.06em; } .au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: rgb(255 255 255 / 0.09); } .au-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .au-hint { margin-top: 7px; font-size: 11.5px; color: var(--l-muted); } .au-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 12.5px; } .au-row .check { margin: 0; font-size: 12.5px; } .au-form .lp-btn.wide { margin-top: 20px; font-size: 14.5px; box-shadow: 0 12px 28px -10px rgb(163 230 53 / 0.55); } .au-form .lp-btn.wide:hover { transform: translateY(-1px); } .au-form .below { margin-top: 16px; font-size: 12.5px; color: var(--l-muted); text-align: center; } .au-form .below + .below { margin-top: 8px; } .au-form .below a, .au-row a, .auth-card .below a { color: var(--l-lime); font-weight: 600; } .au-form .below a:hover, .au-row a:hover, .auth-card .below a:hover { color: var(--l-lime-link); } .au-row a { font-weight: 600; } /* single-column auth card (forgot / reset / verify) — same tokens, no side panel */ .auth-card { width: 100%; max-width: 440px; background: var(--l-card); font-family: var(--font-sans); border: 1px solid var(--l-hairline); border-radius: 22px; padding: 36px; } .auth-card .brand { justify-content: center; margin-bottom: 22px; display: flex; } .auth-card h1 { font-size: 24px; text-align: center; margin-bottom: 6px; } .auth-card .sub { text-align: center; color: var(--muted); font-size: 14px; margin-bottom: 26px; } .field { margin-bottom: 12px; } .field label { display: block; font-size: 12px; font-weight: 600; color: var(--l-soft); margin-bottom: 6px; } .field input { width: 100%; height: 42px; padding: 0 13px; border-radius: 12px; border: 1px solid rgb(255 255 255 / 0.08); background: var(--l-inset); color: var(--l-white); font-family: var(--font-sans); font-size: 13.5px; outline: none; } .field input::placeholder { color: #5b6470; } .field input:focus { border-color: var(--l-lime); } .field input:focus-visible { outline: none; } /* the lime border is the focus ring */ .field .err { color: var(--l-red); font-size: 12px; margin-top: 5px; } .auth-card .btn { width: 100%; justify-content: center; margin-top: 8px; } .auth-card .below { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: 20px; } .alert-err { border: 1px solid #5c2430; background: #2a1218; color: #ffb4b4; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 18px; } .alert-ok { border: 1px solid #1f5a3a; background: #0f2419; color: #b9f5d0; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 18px; } .linklike { background: none; border: none; padding: 0; color: var(--green); font: inherit; cursor: pointer; } .check { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--muted); margin: 4px 0 6px; cursor: pointer; } .check input { accent-color: var(--l-lime); } .trial-note { display: flex; gap: 8px; align-items: baseline; color: var(--muted); font-size: 13px; margin-top: 14px; } .trial-note::before { content: "✓"; color: var(--green); font-weight: 700; } /* success page */ .done-steps { margin: 22px 0 6px; display: grid; gap: 14px; } .done-steps li { display: flex; gap: 12px; font-size: 14.5px; align-items: baseline; list-style: none; } .done-steps .n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--grad); color: #06130a; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; transform: translateY(3px); } /* ===================================================================== Blog (.bl-*): index cards, the article page, table of contents ===================================================================== */ .bl-head { padding-top: 56px; } .bl-head h1 { font-size: clamp(32px, 4.4vw, 48px); letter-spacing: -0.03em; line-height: 1.05; margin-top: 14px; } .bl-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--l-muted); font-family: var(--font-mono); } .bl-crumbs a:hover { color: var(--l-lime-link); } .bl-crumbs .cur { color: var(--l-soft); } .bl-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; } .bl-cats a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 10px; background: var(--l-card); border: 1px solid var(--l-hairline); font-size: 13px; font-weight: 600; color: var(--l-bright); } .bl-cats a small { font-family: var(--font-mono); font-weight: 400; font-size: 11px; color: var(--l-muted); } .bl-cats a:hover { border-color: rgb(163 230 53 / 0.4); } .bl-cats a.on { background: var(--l-lime); border-color: var(--l-lime); color: var(--l-on-lime); } .bl-cats a.on small { color: var(--l-on-lime); opacity: .7; } .bl-grid { display: grid; gap: 14px; margin-top: 34px; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); } .bl-card { overflow: hidden; display: flex; flex-direction: column; } .bl-card.wide { grid-column: 1 / -1; } .bl-card.wide .bl-card-link { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); align-items: center; } .bl-card-link { display: flex; flex-direction: column; height: 100%; } .bl-cover { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--l-inset); } .bl-cover-empty { background: radial-gradient(120% 160% at 100% 0%, rgb(163 230 53 / 0.18), transparent 55%), var(--l-card-grad); } .bl-card-body { padding: 20px 22px 24px; } .bl-card h2, .bl-card h3 { font-size: 19px; letter-spacing: -0.02em; line-height: 1.25; margin-top: 10px; } .bl-card.wide h2 { font-size: clamp(22px, 2.6vw, 30px); } .bl-card p { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--l-soft); } .bl-card:hover h2, .bl-card:hover h3 { color: var(--l-lime-link); } .bl-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--font-mono); font-size: 11.5px; color: var(--l-muted); } .bl-cat { color: var(--l-lime); font-weight: 700; } .bl-empty { padding: 40px; text-align: center; color: var(--l-muted); margin-top: 34px; } .bl-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; font-size: 14px; color: var(--l-bright); } .bl-pager a:hover { color: var(--l-lime-link); } .bl-pager .off { color: var(--l-muted); opacity: .5; } .bl-preview { background: var(--l-yellow); color: #1a1500; text-align: center; font-size: 13px; font-weight: 600; padding: 8px 16px; } .bl-article { padding-top: 48px; } .bl-article-head { max-width: 760px; } .bl-article h1 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.03em; line-height: 1.08; margin-top: 16px; text-wrap: balance; } .bl-lead { margin-top: 16px; font-size: 18px; line-height: 1.55; color: var(--l-soft); text-wrap: pretty; } .bl-byline { display: flex; align-items: center; gap: 12px; margin-top: 24px; } .bl-byline b { display: block; font-size: 14px; color: var(--l-white); } .bl-avatar { width: 40px; height: 40px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: rgb(163 230 53 / 0.14); color: var(--l-lime); font-weight: 700; font-size: 16px; } .bl-hero { margin: 36px 0 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--l-hairline); } .bl-hero img { display: block; width: 100%; height: auto; } .bl-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 40px; } @media (min-width: 981px) { .bl-layout:has(.bl-toc) { grid-template-columns: 240px minmax(0, 720px); } } .bl-toc { align-self: start; position: sticky; top: 84px; font-size: 13px; } .bl-toc-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--l-muted); } .bl-toc ol { list-style: none; margin-top: 12px; border-left: 1px solid var(--l-hairline); } .bl-toc li a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 1px solid transparent; color: var(--l-soft); line-height: 1.4; } .bl-toc li a:hover { color: var(--l-white); border-left-color: var(--l-lime); } /* article typography: the Markdown output */ .bl-body { max-width: 720px; font-size: 17px; line-height: 1.75; color: var(--l-brighter); } .bl-body > * + * { margin-top: 1.1em; } .bl-body h2 { font-size: 27px; letter-spacing: -0.025em; line-height: 1.2; margin-top: 2em; scroll-margin-top: 84px; } .bl-body h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.3; margin-top: 1.6em; scroll-margin-top: 84px; } .bl-body h4 { font-size: 17px; margin-top: 1.4em; } .bl-body h2 .anchor, .bl-body h3 .anchor { margin-left: 8px; color: var(--l-muted); opacity: 0; font-weight: 400; } .bl-body h2:hover .anchor, .bl-body h3:hover .anchor { opacity: .7; } .bl-body a { color: var(--l-lime-link); text-decoration: underline; text-decoration-color: rgb(198 240 110 / .35); text-underline-offset: 3px; } .bl-body a:hover { text-decoration-color: currentColor; } .bl-body strong { color: var(--l-white); } .bl-body ul, .bl-body ol { padding-left: 1.4em; } .bl-body li + li { margin-top: .4em; } .bl-body li::marker { color: var(--l-lime); } .bl-body blockquote { border-left: 3px solid var(--l-lime); padding: 4px 0 4px 20px; color: var(--l-soft); font-size: 16.5px; } .bl-body blockquote p + p { margin-top: .6em; } .bl-body img { display: block; max-width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--l-hairline); } .bl-body figure { margin: 1.6em 0; } .bl-body figcaption { margin-top: 8px; font-size: 13px; color: var(--l-muted); text-align: center; } .bl-body hr { border: 0; border-top: 1px solid var(--l-hairline); margin: 2.4em 0; } .bl-body code { font-family: var(--font-mono); font-size: .85em; background: var(--l-inset); border: 1px solid var(--l-hairline); border-radius: 6px; padding: 2px 6px; color: var(--l-bright); } .bl-body pre { background: var(--l-inset); border: 1px solid var(--l-hairline); border-radius: 14px; padding: 16px 18px; overflow-x: auto; font-size: 13.5px; line-height: 1.6; } .bl-body pre code { background: none; border: 0; padding: 0; font-size: inherit; } .bl-body table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; } .bl-body th, .bl-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--l-hairline); vertical-align: top; } .bl-body th { color: var(--l-white); font-weight: 600; background: var(--l-inset); } .bl-body iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 16px; } .bl-body details { background: var(--l-card); border: 1px solid var(--l-hairline); border-radius: 14px; padding: 14px 18px; } .bl-body summary { cursor: pointer; font-weight: 600; color: var(--l-white); } .bl-body .task-list-item { list-style: none; margin-left: -1.4em; } .bl-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3em; padding-top: 1.6em; border-top: 1px solid var(--l-hairline); } .bl-tags a { font-family: var(--font-mono); font-size: 12px; color: var(--l-muted); padding: 5px 10px; border: 1px solid var(--l-hairline); border-radius: 8px; } .bl-tags a:hover { color: var(--l-lime-link); border-color: rgb(163 230 53 / 0.4); } .bl-cta { margin-top: 72px; } .bl-cta-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 32px 34px; } .bl-cta-card h2 { font-size: 24px; letter-spacing: -0.025em; } .bl-cta-card p { margin-top: 8px; max-width: 520px; font-size: 14px; line-height: 1.6; } .bl-related { margin-top: 72px; } .bl-related .bl-grid { margin-top: 24px; } /* ---------- responsive ---------- */ @media (max-width: 980px) { .nav-links { display: none; } } @media (max-width: 480px) { /* phone: the header keeps its look, but the two buttons must not wrap */ .nav { gap: 12px; } .nav .btn { white-space: nowrap; } .nav .btn-ghost { display: none; } } @media (max-width: 620px) { .lp-hero { padding-top: 48px; } .lp-half { grid-template-columns: 1fr; } .lp-demo, .lp-feature, .lp-cmp, .lp-plan, .lp-quote { padding: 20px 18px; } .lp-roi { padding: 26px 20px; } .lp-final { padding: 40px 20px; } .auth-wrap { padding: 20px 12px; } .au-side { min-height: 0; padding: 32px 22px 28px; gap: 22px; } .au-form { padding: 30px 22px 28px; } .au-split { border-radius: 20px; } }