/* ===========================
   Proofgrid — Clean, modern, production-ready
   =========================== */

:root{
  --bg:#0B0F1A; --bg-alt:#0E1320; --card:#0E1526; --line:#1E2636;
  --text:#E5E7EB; --muted:#A3AAB8; --accent:#7C5CFF; --accent-2:#22D3EE;
  --radius:14px; --radius-sm:10px; --container:1120px;
  --shadow:0 16px 60px -24px rgba(0,0,0,.45);

  --h1: clamp(2.1rem, 2.2rem + 1vw, 3rem);
  --h2: clamp(1.6rem, 1.5rem + .6vw, 2.1rem);
  --h3: clamp(1.15rem, 1.1rem + .25vw, 1.35rem);

  --t-fast: 140ms; --t-med: 220ms; --ease: cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.small{font-size:.9rem}
.muted{color:var(--muted)}
.container{max-width:var(--container); margin-inline:auto; padding-inline:20px}
.stack{display:grid; gap:18px}
.stack-lg{display:grid; gap:26px}
.split{display:grid; grid-template-columns:1.08fr .92fr; gap:40px}
.center{text-align:center}
@media (max-width:960px){ .split{grid-template-columns:1fr; gap:24px} }

.skip{position:absolute;top:-1000px;left:-1000px;background:#000;color:#fff;padding:8px;border-radius:8px}
.skip:focus{top:10px;left:10px;z-index:1000}

/* Brand / Nav */
.brand{display:flex; align-items:center; gap:10px}
.brand__icon{width:28px;height:28px}
.brand__type{
  font: 700 20px/1 "Space Grotesk", Inter, system-ui;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:.2px;
}

.nav{
  position:sticky; top:0; z-index:30;
  backdrop-filter: saturate(110%) blur(8px); -webkit-backdrop-filter: saturate(110%) blur(8px);
  background:rgba(11,15,26,.66); border-bottom:1px solid var(--line)
}
.nav__inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.nav__menu{display:flex; gap:18px; align-items:center}
.nav__menu a{opacity:.9; padding:6px 8px; border-radius:8px}
.nav__menu a:hover{background:rgba(255,255,255,.05)}
.nav__cta{display:flex; gap:10px}
.nav__toggle{display:none; background:var(--card); border:1px solid var(--line); width:40px; height:40px; border-radius:10px}
.nav__hamburger{display:inline-block; width:18px; height:2px; background:#fff; position:relative}
.nav__hamburger::before,.nav__hamburger::after{content:""; position:absolute; left:0; width:18px; height:2px; background:#fff}
.nav__hamburger::before{top:-6px}.nav__hamburger::after{top:6px}
@media (max-width:960px){
  .nav__menu,.nav__cta{display:none}
  .nav__toggle{display:inline-flex; align-items:center; justify-content:center}
  .nav__panel{position:fixed; inset:64px 12px 12px; background:var(--bg-alt); border:1px solid var(--line); border-radius:12px; padding:14px; display:grid; gap:10px; box-shadow:var(--shadow)}
  .nav__panel a{display:block; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--card)}
}

/* Buttons (glow) */
@keyframes glowPulse {
  0%   { box-shadow: 0 0 0 rgba(124,92,255,0), 0 10px 28px -12px rgba(0,0,0,.35) }
  50%  { box-shadow: 0 0 22px rgba(124,92,255,.28), 0 12px 32px -12px rgba(0,0,0,.45) }
  100% { box-shadow: 0 0 0 rgba(124,92,255,0), 0 10px 28px -12px rgba(0,0,0,.35) }
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:10px; border:1px solid var(--line);
  background:linear-gradient(180deg,var(--card),#0b1224);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  color:var(--text);
}
.btn:hover{ transform:translateY(-1px) }
.btn:focus-visible{ outline:2px solid rgba(124,92,255,.5); outline-offset:2px }
.btn--primary{ background:linear-gradient(180deg,var(--accent),#5b3fff); border-color:#6b54ff; color:#fff; animation: glowPulse 3.2s var(--ease) infinite; }
.btn--ghost{ background:transparent; animation: glowPulse 4s var(--ease) infinite; }
.btn--wide{ padding-inline:22px }
@media (prefers-reduced-motion: reduce){ .btn, .btn--primary, .btn--ghost { animation: none !important; transition: none !important } }

/* Hero */
.hero{
  padding:72px 0 48px;
  background:
    radial-gradient(1200px 600px at 70% -20%, rgba(124,92,255,.15), transparent 60%),
    radial-gradient(1000px 400px at 20% -10%, rgba(34,211,238,.16), transparent 50%);
}
.hero__h1{font-size:var(--h1); line-height:1.1; margin:8px 0 8px; font-weight:900}
.hero__sub{color:var(--muted); max-width:62ch}
.hero__benefits{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:8px}
.hero__media{align-self:center}
.hero-mock{height:280px; border-radius:14px; border:1px solid var(--line); box-shadow:var(--shadow);
  background:
    linear-gradient(180deg,#0f1628,#0c1324),
    radial-gradient(400px 160px at 20% 10%, rgba(124,92,255,.18), transparent 70%),
    radial-gradient(320px 140px at 80% 0%, rgba(34,211,238,.16), transparent 70%);
}

.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px}
.kpi{border:1px solid var(--line); border-radius:12px; background:var(--card); padding:14px}
.kpi__num{font-size:1.6rem; font-weight:800}
.kpi__label{color:var(--muted)}
@media (max-width:960px){ .kpis{grid-template-columns:repeat(2,1fr)} }

/* Sections & cards */
.section{padding:72px 0; border-top:1px solid var(--line); background:linear-gradient(180deg,var(--bg) 0%, #0b1224 100%)}
.section--alt{background:linear-gradient(180deg,#0b1224 0%, var(--bg) 100%)}
.section__head{display:grid; gap:8px}
.section__h2{font-size:var(--h2); margin:0}
.section__sub{color:var(--muted); margin:0}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:960px){ .grid-3{grid-template-columns:1fr} }
.card{border:1px solid var(--line); border-radius:12px; background:var(--card); padding:18px; box-shadow:var(--shadow)}
.icon{width:18px;height:18px}
.icon-lg{width:28px;height:28px;color:#B8C1FF; margin-bottom:6px}
.li-icon{display:flex; gap:10px; align-items:flex-start}
.li-icon .icon{margin-top:5px}
.ticks{list-style:none; margin:0; padding-left:0; display:grid; gap:8px}
.ticks li{position:relative; padding-left:22px}
.ticks li::before{content:""; position:absolute; left:0; top:9px; width:10px; height:10px; border-radius:999px; background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.steps .step__num{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:999px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; font-weight:800; margin-bottom:6px}

/* Showcase (browser + tabs) */
.showcase{padding:72px 0; border-top:1px solid var(--line); background:linear-gradient(180deg,var(--bg) 0%, #0b1224 100%)}
.showcase__wrap{display:grid; grid-template-columns:1fr 1.2fr; gap:28px; align-items:center}
@media (max-width:1000px){ .showcase__wrap{grid-template-columns:1fr} }
.browser{border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); overflow:hidden}
.browser__bar{display:flex; align-items:center; gap:8px; height:38px; padding:0 12px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#0f1628,#0c1324)}
.browser__dot{width:10px;height:10px;border-radius:999px;background:#f87171}
.browser__dot:nth-child(2){background:#fbbf24}
.browser__dot:nth-child(3){background:#34d399}
.browser__url{margin-left:8px;color:var(--muted);font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.tabs{display:grid}
.tabs__list{display:flex; gap:8px; padding:10px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#0f1628,#0c1324)}
.tabs__trigger{appearance:none; border:1px solid var(--line); background:var(--bg-alt); color:var(--text); border-radius:10px; padding:8px 12px; font-weight:600; cursor:pointer; transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease)}
.tabs__trigger:hover{ background:#0d1529 }
.tabs__trigger.is-active{ border-color:#6b54ff; background:linear-gradient(180deg,var(--accent),#5b3fff) }
.tabs__panel{ display:none; padding:18px }
.tabs__panel.is-active{ display:block }
.tabs__grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:18px }
.tabs__pane{ border:1px solid var(--line); border-radius:12px; background:#0b1221; padding:14px; min-height:220px }
.mock{width:100%; height:160px; border:1px dashed #2b3650; border-radius:10px; background:repeating-linear-gradient( -45deg, rgba(124,92,255,.1), rgba(124,92,255,.1) 10px, rgba(34,211,238,.08) 10px, rgba(34,211,238,.08) 20px) }
.mock.video{height:200px}
.mock.grid{height:200px}
.mock.list{height:200px}
.mock.chat{height:200px}
.mock.cards{height:200px}
.mock.calendar{height:200px}
.mock.notes{height:200px}
@media (max-width:900px){ .tabs__grid{ grid-template-columns:1fr } }

/* Systems (clean pills) */
.frameworks{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media (max-width:960px){ .frameworks{grid-template-columns:1fr 1fr} }
.pill{display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(180deg,var(--bg-alt),var(--card))}
.pill__icon{display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.pill__icon .icon{color:#fff}
.pill__text{display:grid; line-height:1.2}

/* Pricing */
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch}
.price header{display:grid; gap:4px}
.price__tag{font-size:2rem; font-weight:900}
.price__unit{font-size:1rem; font-weight:700; opacity:.8}
.price--featured{position:relative; border-color:#6b54ff; box-shadow:0 24px 60px -24px rgba(124,92,255,.5)}
.ribbon{position:absolute; top:14px; right:-6px; background:#ffd666; color:#1a1a1a; font-weight:800; padding:6px 10px; border-radius:8px; transform:rotate(3deg)}
.guarantee{display:flex; align-items:center; gap:8px; margin-top:10px}
.payments{margin-top:8px}
@media (max-width:960px){ .pricing{grid-template-columns:1fr} }

/* FAQ */
.faq{display:grid; gap:10px}
.faq__item{border:1px solid var(--line); border-radius:12px; background:var(--card); padding:10px}
.faq__item summary{cursor:pointer; font-weight:600; list-style:none}
.faq__item[open]{background:linear-gradient(180deg,var(--card), #0b1224)}

/* Footer */
.footer{padding:28px 0; border-top:1px solid var(--line); color:var(--muted)}
.footer__links{display:flex; gap:12px; flex-wrap:wrap}
.footer__links a{color:var(--muted)}
.footer__links a:hover{text-decoration:underline}

/* Sticky CTA */
.sticky{position:fixed; inset:auto 0 12px 0; z-index:40; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease)}
.sticky--on{opacity:1; transform:translateY(0); pointer-events:auto}
.sticky__inner{display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(180deg,var(--bg-alt),var(--card)); padding:12px; margin-inline:20px; box-shadow:var(--shadow)}

/* Reveal */
.reveal{opacity:.001; transform:translateY(8px); transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease)}
.reveal-in{opacity:1; transform:none}