/* ProofLine Design System v2 — DARK PREMIUM (drop-in: same class contracts as v1) Set per-business accent: */ :root{ --bg:#070A10; --bg-2:#0A0F17; --surface:#0D1320; --surface-2:#111A2B; --surface-alt:#131C2E; --border:rgba(148,163,184,.14); --border-strong:rgba(148,163,184,.24); --ink:#E7ECF3; --ink-2:#9AA7B8; --ink-3:#5B6B80; --success:#34D399; --warning:#FBBF24; --danger:#F87171; --info:#60A5FA; --accent:#2563EB; --accent-soft:color-mix(in srgb,var(--accent) 14%,transparent); --glow:color-mix(in srgb,var(--accent) 45%,transparent); --font:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif; --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace; --r-sm:10px; --r-md:14px; --r-lg:20px; --shadow-card:0 1px 0 rgba(255,255,255,.03) inset,0 8px 30px rgba(0,0,0,.35); --shadow-pop:0 16px 48px rgba(0,0,0,.55); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4{line-height:1.12;margin:0 0 .5em;letter-spacing:-.025em;font-weight:700} h1{font-size:clamp(32px,5vw,54px)} h2{font-size:clamp(24px,3.4vw,34px)} h3{font-size:17px} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:none} p{margin:0 0 1em;color:var(--ink-2)} .muted{color:var(--ink-2)}.faint{color:var(--ink-3)} .mono{font-family:var(--mono);font-size:.88em} .wrap{max-width:1140px;margin:0 auto;padding:0 24px;position:relative} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font-family:inherit;font-size:15px;font-weight:600;padding:11px 22px;border-radius:var(--r-md);transition:transform .12s,box-shadow .2s,filter .15s,background .15s;text-decoration:none;letter-spacing:.01em} .btn:hover{text-decoration:none;filter:brightness(1.1)} .btn:active{transform:translateY(1px) scale(.99)} .btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 40%,transparent)} .btn[disabled]{opacity:.45;cursor:not-allowed} .btn-primary{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,#fff 8%),var(--accent));color:#fff;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent),0 6px 24px -6px var(--glow)} .btn-primary:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 80%,transparent),0 10px 32px -6px var(--glow)} .btn-ghost{background:rgba(255,255,255,.04);border:1px solid var(--border-strong);color:var(--ink)} .btn-ghost:hover{background:rgba(255,255,255,.08)} .btn-danger{background:linear-gradient(180deg,#F87171,#DC2626);color:#fff} .btn-sm{padding:7px 13px;font-size:13px;border-radius:var(--r-sm)} .btn-lg{padding:14px 30px;font-size:16px;border-radius:16px} .btn .spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* ---------- Cards / layout ---------- */ .card{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 40%),var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:26px;transition:transform .18s,border-color .18s,box-shadow .18s} .card:hover{border-color:var(--border-strong)} .card-hover:hover{transform:translateY(-3px);box-shadow:0 18px 44px -12px rgba(0,0,0,.6),0 0 0 1px var(--accent-soft)} .grid{display:grid;gap:18px} .grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)} .row{display:flex;align-items:center;gap:12px} .between{justify-content:space-between} .stack{display:flex;flex-direction:column;gap:12px} .section{padding:88px 0;position:relative} .section-alt{background:var(--bg-2)} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px} .eyebrow::before{content:"";width:22px;height:1px;background:var(--accent)} .section-title{max-width:22ch} .lead{font-size:17px;max-width:56ch} /* ---------- Forms ---------- */ label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:0 0 6px} input,select,textarea{width:100%;padding:11px 14px;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--bg-2);color:var(--ink);font-family:inherit;font-size:15px;transition:border-color .15s,box-shadow .15s} input::placeholder,textarea::placeholder{color:var(--ink-3)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)} .field{margin-bottom:16px} .hint{font-size:12px;color:var(--ink-3);margin-top:4px} /* ---------- Badges / status ---------- */ .badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid transparent} .badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor} .badge-success{background:color-mix(in srgb,var(--success) 12%,transparent);color:var(--success);border-color:color-mix(in srgb,var(--success) 25%,transparent)} .badge-warning{background:color-mix(in srgb,var(--warning) 12%,transparent);color:var(--warning);border-color:color-mix(in srgb,var(--warning) 25%,transparent)} .badge-danger{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 25%,transparent)} .badge-info{background:var(--accent-soft);color:color-mix(in srgb,var(--accent) 80%,#fff);border-color:color-mix(in srgb,var(--accent) 30%,transparent)} .badge-neutral{background:rgba(255,255,255,.05);color:var(--ink-2);border-color:var(--border)} /* ---------- Table ---------- */ table{width:100%;border-collapse:collapse;font-size:14px} th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);padding:10px 12px;border-bottom:1px solid var(--border-strong);font-weight:700} td{padding:12px;border-bottom:1px solid var(--border)} tr:last-child td{border-bottom:none} tr:hover td{background:rgba(255,255,255,.025)} /* ---------- States ---------- */ .empty{text-align:center;padding:56px 24px;color:var(--ink-2)} .empty .icon{font-size:36px;margin-bottom:10px;opacity:.8} .error-box{background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 25%,transparent);border-radius:var(--r-md);padding:14px 16px;font-size:14px} .success-box{background:color-mix(in srgb,var(--success) 10%,transparent);color:var(--success);border:1px solid color-mix(in srgb,var(--success) 25%,transparent);border-radius:var(--r-md);padding:14px 16px;font-size:14px} .skeleton{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-sm)} @keyframes shimmer{to{background-position:-200% 0}} /* ---------- Nav / shell ---------- */ .nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--border)} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px} .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;color:var(--ink);letter-spacing:-.01em} .logo-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000));color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800;box-shadow:0 4px 14px -2px var(--glow)} .app-shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh} .sidebar{background:var(--bg-2);border-right:1px solid var(--border);padding:22px 12px} .sidebar a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);color:var(--ink-2);font-size:14px;font-weight:500;transition:background .12s,color .12s} .sidebar a:hover{background:rgba(255,255,255,.05);text-decoration:none;color:var(--ink)} .sidebar a.active{background:var(--accent-soft);color:color-mix(in srgb,var(--accent) 85%,#fff);font-weight:600} .main{padding:32px;max-width:1000px} /* ---------- Toast ---------- */ .toast{position:fixed;bottom:24px;right:24px;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--ink);padding:13px 20px;border-radius:var(--r-md);box-shadow:var(--shadow-pop);font-size:14px;opacity:0;transform:translateY(10px);transition:all .28s cubic-bezier(.2,.9,.3,1.2);z-index:100} .toast.show{opacity:1;transform:none} /* ---------- Hero / marketing ---------- */ .hero{padding:110px 0 80px;text-align:center;position:relative;overflow:hidden} .hero::before{content:"";position:absolute;inset:-40% -20% auto;height:620px;background: radial-gradient(42% 55% at 25% 30%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%), radial-gradient(38% 48% at 75% 20%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%); pointer-events:none;filter:blur(10px)} .hero>*{position:relative} .hero h1{font-size:clamp(36px,6vw,64px);max-width:18ch;margin:0 auto .4em;font-weight:800} .hero h1 .grad{background:linear-gradient(100deg,var(--accent) 10%,color-mix(in srgb,var(--accent) 55%,#fff) 90%);-webkit-background-clip:text;background-clip:text;color:transparent} .hero p{font-size:18px;max-width:54ch;margin:0 auto 1.8em;color:var(--ink-2)} .pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--border-strong);border-radius:999px;padding:7px 16px;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:26px} .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 10px var(--success)} .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .stat-num{font-size:clamp(28px,3.6vw,40px);font-weight:800;letter-spacing:-.03em;background:linear-gradient(180deg,#fff,var(--ink-2));-webkit-background-clip:text;background-clip:text;color:transparent} .price-card{display:flex;flex-direction:column;gap:10px} .price-card .amount{font-size:38px;font-weight:800;letter-spacing:-.03em} .price-card .per{font-size:13px;color:var(--ink-3)} .feature-li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2);margin-bottom:11px} .feature-li::before{content:"✓";color:var(--accent);font-weight:800;flex:none} .divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-strong),transparent);border:none;margin:0} .foot{padding:44px 0;color:var(--ink-3);font-size:13px} /* ---------- Responsive ---------- */ @media (max-width:960px){ .grid-4{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} .app-shell{grid-template-columns:1fr} .sidebar{display:flex;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);padding:10px} .sidebar a{white-space:nowrap} .hero{padding:72px 0 56px} .section{padding:60px 0} } @media (max-width:560px){ .grid-4{grid-template-columns:1fr} .cta-row{flex-direction:column;align-items:stretch} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} }