@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { --bg: #0a0c10; --bg-1: #12151b; --bg-2: #171b23; --line: #262c36; --line-soft: #1c2129; --ink: #f2f3f5; --dim: #9aa1ac; --faint: #5c6470; --accent: #ff7a33; --accent-2: #ffb066; --accent-ink: #140900; --good: #4fd39a; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } * { box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } html { background: var(--bg); } body { margin: 0; background: radial-gradient(1200px 600px at 15% -10%, rgba(255,122,51,0.10), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(255,122,51,0.06), transparent 55%), var(--bg); color: var(--ink); font-family: 'Space Grotesk', -apple-system, 'Segoe UI', sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } .grid-field { background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px), radial-gradient(1200px 600px at 15% -10%, rgba(255,122,51,0.10), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(255,122,51,0.06), transparent 55%); background-size: 48px 48px, 48px 48px, auto, auto; } a { color: var(--accent-2); } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; width: 100%; } .topbar { border-bottom: 1px solid var(--line-soft); background: rgba(10,12,16,0.72); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; } .topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; flex-wrap: wrap; } .mark { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: 0.01em; } .mark .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); } .navlinks { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .navlinks a { color: var(--dim); text-decoration: none; font-size: 0.92rem; } .navlinks a:hover { color: var(--ink); } .navlinks .nav-cta { color: var(--accent-2); border: 1px solid rgba(255,122,51,0.35); border-radius: 999px; padding: 0.32rem 0.85rem; } .navlinks .nav-cta:hover { background: rgba(255,122,51,0.12); color: var(--ink); } .hero { padding: 4.5rem 0 2.5rem; } .hero-sub { padding: 3rem 0 1.25rem; } .hud-badge { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.8rem; background: rgba(18,21,27,0.7); } .led { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px var(--good); } .hero h1 { font-size: clamp(2rem, 5.2vw, 3.35rem); line-height: 1.1; letter-spacing: -0.02em; margin: 1.25rem 0 0.9rem; max-width: 20ch; } .hero-sub h1 { max-width: 24ch; } .accent { color: var(--accent); display: block; } .accent-sub { display: block; font-size: clamp(0.98rem, 1.9vw, 1.15rem); font-weight: 400; color: var(--dim); letter-spacing: 0; line-height: 1.5; margin-top: 0.9rem; max-width: 46ch; } .lede { color: var(--dim); font-size: 1.05rem; max-width: 62ch; } .cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.6rem; } .btn { display: inline-block; text-decoration: none; border-radius: 8px; padding: 0.7rem 1.25rem; font-weight: 600; font-size: 0.95rem; border: 1px solid transparent; transition: transform 0.12s ease, background 0.12s ease; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { background: var(--accent-2); } .btn-ghost { border-color: var(--line); color: var(--ink); background: var(--bg-1); } .btn-ghost:hover { border-color: var(--faint); } .section { padding: 2.75rem 0; } .section-head { margin-bottom: 1.6rem; max-width: 62ch; } .section-head h2, .compare-card h2, .layer-long h2 { font-size: clamp(1.35rem, 3vw, 1.85rem); letter-spacing: -0.015em; margin: 0.35rem 0 0.5rem; } .section-head p { color: var(--dim); margin: 0; } .kicker { font-family: var(--mono); font-size: 0.71rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .prose { color: var(--dim); max-width: 68ch; } .prose p { margin: 0 0 0.9rem; } .more { margin-top: 1.6rem; font-size: 0.95rem; color: var(--faint); } .more a { text-decoration: none; } .more a:hover { text-decoration: underline; } .readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.6rem; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.03em; color: var(--faint); border: 1px solid var(--line-soft); border-radius: 10px; padding: 1rem 1.1rem; background: rgba(18,21,27,0.55); margin-bottom: 1.5rem; } .readout .ok { color: var(--good); } .layer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } .layer-card { display: flex; gap: 0.9rem; border: 1px solid var(--line-soft); border-radius: 12px; padding: 1.15rem; background: linear-gradient(180deg, var(--bg-1), rgba(18,21,27,0.4)); } .layer-card h3 { margin: 0 0 0.35rem; font-size: 1.02rem; } .layer-card p { margin: 0; color: var(--dim); font-size: 0.93rem; } .layer-num { font-family: var(--mono); font-size: 0.8rem; color: var(--accent); opacity: 0.85; padding-top: 0.15rem; } .layers-long { display: grid; gap: 1rem; } .layer-long { display: flex; gap: 1.25rem; border: 1px solid var(--line-soft); border-left: 2px solid rgba(255,122,51,0.4); border-radius: 12px; padding: 1.5rem; background: linear-gradient(180deg, var(--bg-1), rgba(18,21,27,0.35)); } .layer-long p { color: var(--dim); margin: 0 0 0.75rem; max-width: 66ch; } .layer-long p:last-child { margin-bottom: 0; } .layer-long .layer-num { font-size: 1.4rem; font-weight: 600; opacity: 0.5; } .compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; } .compare-card { border: 1px solid var(--line-soft); border-radius: 12px; padding: 1.5rem; background: var(--bg-1); } .compare-card.us { border-color: rgba(255,122,51,0.35); background: linear-gradient(180deg, rgba(255,122,51,0.07), var(--bg-1)); } .compare-card ul { margin: 0.75rem 0 0; padding-left: 1.1rem; color: var(--dim); } .compare-card li { margin-bottom: 0.5rem; } .compare-card .aside { color: var(--faint); font-size: 0.88rem; margin: 1rem 0 0; } .sheet { border: 1px solid var(--line-soft); border-radius: 12px; background: var(--bg-1); overflow-x: auto; margin: 0 0 1.5rem; } .sheet table { border-collapse: collapse; width: 100%; min-width: 44rem; font-size: 0.9rem; } .sheet th { text-align: left; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); font-weight: 500; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); white-space: nowrap; } .sheet td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--line-soft); color: var(--dim); vertical-align: top; } .sheet tbody tr:last-child td { border-bottom: 0; } .sheet .num { font-family: var(--mono); white-space: nowrap; color: var(--ink); } .sheet .amt { font-family: var(--mono); white-space: nowrap; color: var(--accent-2); } .sheet .no { font-family: var(--mono); white-space: nowrap; color: var(--faint); } .sheet tfoot td { border-top: 1px solid var(--line); border-bottom: 0; color: var(--ink); font-weight: 600; background: rgba(23,27,35,0.5); } .steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; max-width: 72ch; } .steps li { counter-increment: s; position: relative; padding: 1.1rem 1.25rem 1.1rem 3.4rem; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--bg-1); color: var(--dim); } .steps li b { color: var(--ink); } .steps li::before { content: '0' counter(s); position: absolute; left: 1.25rem; top: 1.1rem; font-family: var(--mono); font-size: 0.8rem; color: var(--accent); } .signup-panel { border: 1px solid rgba(255,122,51,0.28); border-radius: 14px; padding: 2rem 1.75rem; background: linear-gradient(180deg, rgba(255,122,51,0.08), var(--bg-1)); max-width: 640px; } .signup-panel h2 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin: 0.4rem 0 0.5rem; letter-spacing: -0.015em; } .signup-panel > p { color: var(--dim); margin: 0 0 1.25rem; } .signup-slot { margin-top: 0.25rem; } .ln-signup { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin: 0; } .ln-signup-email { flex: 1 1 260px; min-width: 0; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 0.72rem 0.9rem; font: inherit; font-size: 0.95rem; } .ln-signup-email::placeholder { color: var(--faint); } .ln-signup-email:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,122,51,0.18); } .ln-signup-submit { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; padding: 0.72rem 1.35rem; font: inherit; font-weight: 600; font-size: 0.95rem; cursor: pointer; } .ln-signup-submit:hover { background: var(--accent-2); } .ln-fallback { color: var(--accent-2); } .ln-empty { color: var(--faint); font-family: var(--mono); font-size: 0.8rem; } .ln-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .ln-item { border: 1px solid var(--line-soft); border-radius: 12px; padding: 1rem; background: var(--bg-1); } .ln-item-media img { max-width: 100%; border-radius: 8px; display: block; } .ln-item-title { font-weight: 600; margin: 0.5rem 0 0.25rem; } .ln-item-price { font-family: var(--mono); color: var(--accent-2); font-size: 0.9rem; } .ln-item-note { color: var(--dim); font-size: 0.9rem; } .ln-item-sep { border: 0; border-top: 1px solid var(--line-soft); margin: 0.75rem 0; } footer { margin-top: auto; border-top: 1px solid var(--line-soft); padding: 1.75rem 0; color: var(--faint); font-size: 0.86rem; } footer .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .footnav a { color: var(--faint); text-decoration: none; margin-left: 0.9rem; } .footnav a:hover { color: var(--accent-2); } @media (max-width: 640px) { .hero { padding: 3rem 0 2rem; } .layer-long { flex-direction: column; gap: 0.5rem; } .topbar .wrap { min-height: 54px; padding-top: 0.5rem; padding-bottom: 0.5rem; } }