/*
Theme Name: Blasting Subzero — Stripe UI
Theme URI: https://blastingsubzero.com
Author: Halcy (ChatGPT)
Description: Minimal, Stripe-inspired WordPress theme: bold gradients, clean typography, rounded cards, subtle motion. Includes Projects CPT, before/after slider, contact form handler, and demo seeding.
Version: 0.1.0
License: GPL-2.0-or-later
Text Domain: bs-stripe-ui
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #0a0b10;
  --panel: #0f1117;
  --border: rgba(255,255,255,0.08);
  --text: #eef1f5;
  --muted: #b6bdc7;
  --primary: #635bff;  /* Stripe indigo */
  --primary-2: #00d4ff; /* cyan accent */
  --accent: linear-gradient(90deg, #635bff, #7a5cff, #00d4ff);
}

* { box-sizing: border-box }
html, body { margin:0; padding:0; background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; }
img { max-width: 100%; height: auto }
a { color: var(--primary); text-decoration: none }
a:hover { opacity: 0.9 }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px }

/* Stripe-like nav */
.navbar { position: sticky; top:0; z-index:50; backdrop-filter: saturate(160%) blur(10px); background: rgba(10,11,16,.55); border-bottom: 1px solid var(--border); }
.navbar .inner { display:flex; align-items:center; justify-content:space-between; padding: 14px 0 }
.logo { display:flex; align-items:center; gap:12px; color:var(--text); font-weight:800; letter-spacing:.02em }
.logo .dot { width:10px; height:10px; border-radius:999px; background: var(--primary) }
.menu { display:flex; gap:18px; color:#d6d9df }
.cta { display:inline-flex; align-items:center; padding:10px 14px; border-radius:12px; font-weight:700; color:#000; background: var(--primary); transition: transform .12s ease; }
.cta:hover { transform: translateY(-1px) }

/* Hero */
.hero { position:relative; padding: 100px 0 56px; overflow:hidden; border-bottom:1px solid var(--border) }
.hero .bg { position:absolute; inset:-10% -20% 0 -20%; background: radial-gradient(1200px 500px at 0% 0%, rgba(99,91,255,.35), transparent), radial-gradient(900px 400px at 100% 40%, rgba(0,212,255,.25), transparent); filter: blur(50px); z-index:-1 }
.kicker { color: var(--muted); text-transform: uppercase; letter-spacing: .18em; font-size: 12px; margin: 0 0 14px }
.hero h1 { font-size: clamp(36px, 6vw, 64px); line-height:1.05; margin:0 0 16px; font-weight: 800 }
.hero h1 .accent { background: var(--accent); -webkit-background-clip:text; background-clip:text; color: transparent }
.hero p { color:#cbd3de; max-width: 680px }
.hero .actions { display:flex; gap:12px; margin-top: 18px; flex-wrap:wrap }
.btn { display:inline-flex; align-items:center; padding:12px 16px; border-radius:12px; font-weight:700; }
.btn-primary { background: var(--accent); color:#0b0d12 }
.btn-ghost { color:#eaf0f6; border:1px solid var(--border); background: transparent }

/* Sections */
.section { padding: 64px 0 }
.section h2 { font-size: 28px; margin: 0 0 8px }
.sub { color: var(--muted); margin: 0 0 18px }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 20px; box-shadow: 0 0 0 1px rgba(255,255,255,0.01) inset }
.grid { display: grid; gap: 18px }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }

/* Before/After */
.ba { position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--border); background:#0c0e13 }
.ba .before, .ba .after { position:absolute; inset:0; background-size:cover; background-position:center; transition: clip-path .22s ease }
.ba input[type=range] { position:absolute; left:50%; transform:translateX(-50%); bottom:14px; width:80% }
.tag { position:absolute; top:12px; background: rgba(0,0,0,.6); padding: 4px 10px; border-radius:999px; font-size:12px }
.tag.left { left:12px } .tag.right { right:12px }

/* Forms */
form .row { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px }
input, select, textarea { width:100%; background: #0c0f15; border:1px solid var(--border); color: var(--text); border-radius: 12px; padding: 12px }
textarea { min-height: 140px }

/* Footer */
footer { border-top: 1px solid var(--border); padding: 28px 0; color: #9aa1a9; text-align:center }