/* InstantSDR — Premium SaaS redesign (P0 Home)
   Hard rules:
   - No copy changes (text content preserved; only wrappers/classes/styles)
   - No invented proof; keep [INSERT: ...] placeholders
   - Constraint must remain visible above the fold
*/

/* =========================
   1) TOKENS
   ========================= */
:root{
  /* Color system (HSL for easy tuning) */
  --bg: hsl(225 38% 5%);
  --panel: hsl(225 32% 8%);
  --panel-2: hsl(225 30% 10%);

  --text: hsl(220 40% 96%);
  --text-2: hsl(224 28% 88%);
  --muted: hsl(224 18% 72%);

  --border: hsl(224 24% 22% / 0.55);
  --border-strong: hsl(224 28% 34% / 0.75);

  --accent: hsl(190 100% 60%);
  --accent-2: hsl(96 100% 65%);

  --danger: hsl(350 100% 64%);

  /* Shadows & glow */
  --shadow-1: 0 10px 26px hsl(0 0% 0% / 0.35);
  --shadow-2: 0 18px 44px hsl(0 0% 0% / 0.45);
  --glow: 0 0 0 6px hsl(190 100% 60% / 0.12);

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 80px;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --fz-1: 13px;
  --fz-2: 14px;
  --fz-3: 16px;
  --fz-4: 18px;
  --fz-5: 22px;
  --fz-6: clamp(40px, 4.4vw, 58px);

  --lh-tight: 1.06;
  --lh-normal: 1.45;

  /* Layout */
  --max: 1180px;
}

/* =========================
   2) BASE
   ========================= */
*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme:dark}
body{
  margin:0;
  font-family:var(--font-sans);
  line-height:var(--lh-normal);
  color:var(--text);
  background:
    radial-gradient(1100px 600px at 12% -12%, hsl(190 100% 60% / 0.16), transparent 60%),
    radial-gradient(900px 520px at 92% 6%, hsl(96 100% 65% / 0.10), transparent 58%),
    radial-gradient(800px 420px at 55% 40%, hsl(230 90% 68% / 0.06), transparent 58%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{color:inherit}
a:hover{color:var(--text)}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--space-6);
}

/* Focus visibility */
:focus{outline:none}
:focus-visible{
  outline:2px solid hsl(190 100% 60% / 0.9);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{scroll-behavior:auto !important; transition:none !important; animation:none !important}
}

/* =========================
   3) UTILITIES (layout)
   ========================= */
.stack{display:flex; flex-direction:column; gap:var(--space-4)}
.stack--sm{gap:var(--space-3)}
.stack--lg{gap:var(--space-6)}

.cluster{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3)}

.grid{display:grid; gap:var(--space-4)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}

.divider{
  height:1px;
  background:linear-gradient(90deg, transparent, hsl(224 30% 42% / 0.22), transparent);
}

/* =========================
   4) SECTIONS
   ========================= */
.section{padding:var(--space-9) 0}
.section--tight{padding:var(--space-8) 0}
.section--panel{
  background:linear-gradient(180deg, transparent, hsl(225 30% 9% / 0.55), transparent);
}

.section h2{
  font-size:28px;
  margin:0 0 var(--space-3);
  letter-spacing:-0.3px;
}
.section p{margin:0 0 var(--space-3); color:var(--muted)}

/* =========================
   5) NAV
   ========================= */
.nav{
  position:sticky; top:0; z-index:60;
  background:hsl(225 38% 5% / 0.70);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand-mark{width:10px;height:10px;border-radius:999px;background:var(--accent); box-shadow:0 0 0 7px hsl(190 100% 60% / 0.12)}
.brand-name{font-weight:800; letter-spacing:.2px}
.nav-links{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.nav-links a{color:hsl(224 18% 78%); text-decoration:none; font-size:var(--fz-2)}
.nav-links a:hover{color:var(--text)}
.nav-links a[aria-current="page"]{color:var(--text); text-decoration:underline; text-underline-offset:6px}

/* =========================
   6) BUTTONS
   ========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:hsl(0 0% 100% / 0.03);
  color:var(--text);
  text-decoration:none;
  font-weight:750;
  font-size:var(--fz-2);
  line-height:1;
  min-height:44px;
}
.btn:hover{border-color:var(--border-strong); box-shadow:0 0 0 4px hsl(190 100% 60% / 0.08)}
.btn:active{transform: translateY(1px)}

.btn--primary, .btn-primary{
  background:linear-gradient(180deg, hsl(190 100% 60% / 0.20), hsl(190 100% 60% / 0.08));
  border-color:hsl(190 100% 60% / 0.55);
}
.btn--secondary, .btn-secondary{background:hsl(0 0% 100% / 0.02)}
.btn--ghost{background:transparent}
.btn--lg{padding:14px 16px; border-radius:14px; font-size:15px}

/* =========================
   7) CARDS
   ========================= */
.card{
  background:linear-gradient(180deg, hsl(225 32% 9% / 0.88), hsl(225 32% 9% / 0.62));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
}
.card.pad{padding:18px}
.card--hover{transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease}
.card--hover:hover{transform: translateY(-2px); border-color:var(--border-strong); box-shadow:var(--shadow-2)}
.card__title{font-weight:800; letter-spacing:-.15px}
.card__body{color:var(--muted); font-size:var(--fz-1)}

/* legacy helper blocks */
.kpi{padding:16px; border-radius:var(--radius-md); border:1px solid var(--border); background:hsl(0 0% 100% / 0.02)}
.kpi .t{font-weight:800}
.kpi .d{color:var(--muted); font-size:var(--fz-1); margin-top:6px}

/* =========================
   8) PILLS / BADGES
   ========================= */
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:hsl(0 0% 100% / 0.03);
  color:hsl(224 18% 80%);
  font-size:var(--fz-1);
}
.pill strong{color:var(--text); font-weight:850}
.pill svg{width:16px; height:16px; color:var(--text-2); opacity:.95}

.badge{
  font-size:12px; padding:7px 10px; border-radius:999px;
  border:1px solid var(--border);
  color:hsl(224 18% 80%);
  background:hsl(0 0% 100% / 0.02);
}
.badge.ok{border-color:hsl(96 100% 65% / 0.35)}
.badge.warn{border-color:hsl(350 100% 64% / 0.38)}

/* =========================
   9) NOTICE / BANNER
   ========================= */
.notice{
  display:flex; gap:10px; align-items:flex-start;
  border:1px solid hsl(190 100% 60% / 0.22);
  border-radius:var(--radius-md);
  padding:10px 12px;
  background:hsl(190 100% 60% / 0.06);
  color:var(--text-2);
}
.notice strong{color:var(--text)}
.notice__icon{margin-top:2px; width:18px; height:18px; flex:0 0 auto; color:hsl(190 100% 70% / 0.95)}

/* =========================
   10) HERO
   ========================= */
.hero{padding:72px 0 26px}
.hero__grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:var(--space-6); align-items:start}
.hero__copy{display:flex; flex-direction:column; gap:var(--space-4)}

.h1{
  font-size:var(--fz-6);
  line-height:var(--lh-tight);
  margin:0;
  letter-spacing:-0.9px;
}
.sub{
  color:var(--muted);
  font-size:var(--fz-4);
  margin:0;
}

.hero__cta{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

.hero__pills{margin-top:2px}
.hero__pills .pill{background:hsl(0 0% 100% / 0.02)}

/* =========================
   11) MOCK WINDOW
   ========================= */
.mock{
  border-radius:var(--radius-xl);
  border:1px solid var(--border);
  background:linear-gradient(180deg, hsl(225 30% 10% / 0.95), hsl(225 30% 8% / 0.78));
  box-shadow:var(--shadow-2);
  overflow:hidden;
}
.mock__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background:hsl(0 0% 100% / 0.02);
}
.mock__dots{display:flex; gap:7px}
.mock__dot{width:10px;height:10px;border-radius:999px;background:hsl(0 0% 100% / 0.08);border:1px solid var(--border)}
.mock__title{font-size:12px; color:hsl(224 18% 78%)}
.mock__content{padding:14px}
.mock__row{display:flex; flex-direction:column; gap:10px}
.mock__bubble{
  max-width:92%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:hsl(0 0% 100% / 0.02);
  color:var(--text-2);
  font-size:13px;
}
.mock__bubble--me{margin-left:auto; background:hsl(190 100% 60% / 0.08); border-color:hsl(190 100% 60% / 0.26)}
.mock__meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px}
.mock__badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:999px;
  border:1px solid hsl(96 100% 65% / 0.35);
  background:hsl(96 100% 65% / 0.08);
  font-size:12px; color:var(--text-2);
}
.mock__ping{font-size:12px; color:hsl(224 18% 78%)}

/* =========================
   12) STEPS
   ========================= */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); position:relative}
.step{padding:16px; border-radius:var(--radius-lg); border:1px solid var(--border); background:hsl(0 0% 100% / 0.02)}
.step__head{display:flex; align-items:center; gap:10px}
.step__num{
  width:28px;height:28px;border-radius:999px;
  display:grid; place-items:center;
  border:1px solid hsl(190 100% 60% / 0.35);
  color:var(--text);
  font-weight:850;
  background:hsl(190 100% 60% / 0.08);
  flex:0 0 auto;
}
.step__title{font-weight:850}
.step__body{margin-top:8px; color:var(--muted); font-size:var(--fz-1)}

/* =========================
   13) METRICS
   ========================= */
.metric{padding:16px; border-radius:var(--radius-lg); border:1px solid var(--border); background:hsl(0 0% 100% / 0.02)}
.metric__label{color:var(--muted); font-size:12px}
.metric__value{font-weight:900; font-size:18px; margin-top:6px; letter-spacing:-.2px}

/* =========================
   14) ACCORDION (FAQ)
   ========================= */
.accordion{margin-top:10px}
.acc__item{border:1px solid var(--border); border-radius:var(--radius-md); background:hsl(0 0% 100% / 0.02); overflow:hidden; margin-bottom:10px}
.acc__btn{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 14px;
  background:transparent;
  border:none;
  color:var(--text);
  cursor:pointer;
  font:inherit;
  font-weight:800;
  text-align:left;
  min-height:44px;
}
.acc__chev{width:18px;height:18px; opacity:.9; color:var(--muted); transition: transform .18s ease}
.acc__panel{padding:0 14px 14px; color:var(--muted); font-size:var(--fz-2)}
.acc__item[data-open="true"] .acc__chev{transform: rotate(180deg)}

/* =========================
   15) CTA BAR / LISTS / FOOTER
   ========================= */
.cta-bar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px;
  border:1px solid hsl(190 100% 60% / 0.22);
  border-radius:var(--radius-lg);
  background:hsl(190 100% 60% / 0.06);
}

.list{margin:12px 0 0; padding-left:18px; color:var(--muted)}
.list li{margin:7px 0}

.hr{height:1px; background:linear-gradient(90deg, transparent, hsl(224 30% 42% / 0.22), transparent); margin:22px 0}

.pricing{display:grid; grid-template-columns: 1.1fr .9fr; gap:14px}
.price{font-size:40px; font-weight:950; letter-spacing:-.8px}
.small{font-size:var(--fz-1); color:var(--muted)}

.footer{padding:34px 0 72px; border-top:1px solid var(--border); color:var(--muted)}
.footer a{color:var(--muted); text-decoration:none}
.footer a:hover{color:var(--text)}
.footer-grid{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap}

/* =========================
   16) CTA DOCK (mobile)
   ========================= */
.cta-dock{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:70;
  display:none;
  padding:10px 14px;
  background:hsl(225 38% 5% / 0.78);
  backdrop-filter: blur(12px);
  border-top:1px solid var(--border);
}
.cta-dock__row{display:flex; gap:10px}

/* Keep existing mobile-cta hidden if present (we replace with cta-dock) */
.mobile-cta{display:none !important}

/* =========================
   17) RESPONSIVE
   ========================= */
@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr}
  .grid--3{grid-template-columns:1fr}
  .grid--2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
}
@media (max-width: 780px){
  .nav-links{display:none}
  .cta-dock{display:block}
  .container{padding:0 var(--space-5)}
}

/* Backward-compat class mapping for existing grids */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4)}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4)}
@media (max-width: 980px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}

/* =========================
   P0 RESPONSIVE FIXES (CSS-only)
   - Make grids truly responsive across desktop/tablet/mobile
   - Improve text measure on desktop
   - Make CTA bars wrap/stack correctly
   - Ensure dock doesn't cover content
   ========================= */

/* Global text measure */
.hero__copy .sub{max-width: 58ch}
.section p{max-width: 72ch}

/* Better grid behavior (avoid rigid columns) */
.grid--3{grid-template-columns: repeat(3, minmax(0, 1fr))}
.grid--2{grid-template-columns: repeat(2, minmax(0, 1fr))}

/* Ensure hero grid doesn't overflow */
.hero__grid{grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr)}

/* CTA bar: wrap gracefully, stack on small screens */
.cta-bar{flex-wrap:wrap}
.cta-bar > *{min-width: 240px}
.cta-bar a.btn{white-space:nowrap}

/* Cards + metrics: reduce excessive height in tighter viewports */
.metric{min-height: unset}
.metric__value{line-height:1.15}

/* Provide room for mobile dock (so it won't cover bottom content) */
@media (max-width: 780px){
  body{padding-bottom: 86px}
  .section{padding: var(--space-8) 0}
  .hero{padding: 56px 0 18px}
  .h1{letter-spacing:-0.7px}
  .hero__copy .sub{max-width: 40ch}

  .cta-bar{flex-direction:column; align-items:stretch}
  .cta-bar > *{min-width: unset}
  .cta-bar a.btn{width:100%; justify-content:center}

  .grid--3, .grid--2{grid-template-columns: 1fr}
  .pricing{grid-template-columns: 1fr}
}

@media (max-width: 980px){
  .grid--3{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .hero__grid{grid-template-columns: 1fr}
  .hero__copy .sub{max-width: 64ch}
}

@media (min-width: 1200px){
  .hero__copy .sub{max-width: 62ch}
}

/* Brand logo image alignment */
.brand img{border-radius:6px}

/* Screenshot component */
.screenshot{
  border-radius: var(--radius-xl);
  border:1px solid var(--border);
  background: linear-gradient(180deg, hsl(225 32% 10% / 0.92), hsl(225 32% 8% / 0.72));
  box-shadow: var(--shadow-2);
  overflow:hidden;
}
.screenshot img{display:block; width:100%; height:auto}
.screenshot__caption{
  padding: 10px 12px;
  border-top:1px solid var(--border);
  color: hsl(224 18% 78%);
  font-size: 12px;
}

/* =========================
   RESPONSIVE TUNING (Hero + Proof + CTA bars)
   Goal: make full-width desktop feel intentional, not just "stretched".
   ========================= */

/* HERO: more balanced composition on large screens */
@media (min-width: 1200px){
  .hero__grid{gap: var(--space-8)}
  .hero__visual{max-width: 520px; margin-left:auto}
  .hero__copy{padding-right: var(--space-3)}
}

/* HERO: keep screenshot from becoming a tall block */
@media (min-width: 980px){
  .screenshot img{
    max-height: 320px;
    object-fit: cover;
    object-position: 50% 35%;
  }
}

/* PROOF screenshot: constrain height so cards stay visible */
#proof .screenshot img{
  max-height: 420px;
  object-fit: cover;
  object-position: 50% 30%;
}
@media (max-width: 980px){
  #proof .screenshot img{max-height: 300px; object-position: 50% 25%}
}

/* CTA bars: stop forcing weird wraps on wide screens */
@media (min-width: 980px){
  .cta-bar > *{min-width: unset}
  .cta-bar{align-items:center}
}

/* Mid breakpoint: prevent "half responsive" feel */
@media (max-width: 1200px){
  .hero__visual{max-width: 560px}
}

/* Slightly tighter section rhythm on huge screens (less vertical emptiness) */
@media (min-width: 1400px){
  .section{padding: 64px 0}
  .hero{padding: 72px 0 22px}
}

/* =========================
   BLOCK-STYLE RESPONSIVE (auto-fit/minmax)
   Goal: stop "boxes dancing" by using stable, self-adjusting grids.
   Reference: repeat(auto-fit, minmax(...))
   ========================= */

/* Make grids behave like responsive blocks */
.grid{
  align-items: stretch;
}

/* Default responsive grids */
.grid--3,
.grid--2{
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Hero: keep it stable on wide screens, collapse earlier on medium screens */
.hero__grid{
  grid-template-columns: minmax(520px, 1.15fr) minmax(360px, .85fr);
}

@media (max-width: 1100px){
  .hero__grid{grid-template-columns: 1fr}
}

/* Keep right column blocks consistent */
.hero__visual{gap: var(--space-4)}

/* Screenshot: lock aspect ratio to avoid height jitter */
.screenshot img{
  width:100%;
  aspect-ratio: 16 / 9;
  height:auto;
  object-fit: cover;
}

/* Proof screenshot slightly taller (dashboard-like) but still stable */
#proof .screenshot img{
  aspect-ratio: 16 / 9;
}

/* CTA bars: always predictable wrapping */
.cta-bar{flex-wrap: wrap; align-items: center}
.cta-bar a.btn{white-space: nowrap}

@media (max-width: 780px){
  .cta-bar{flex-direction: column; align-items: stretch}
  .cta-bar a.btn{width:100%}
}

/* Reduce sudden rhythm changes on ultra wide screens */
@media (min-width: 1500px){
  .container{max-width: 1200px}
}