/* ConnectBack AI — "The Console" shared styles */

:root {
  --base: #05070A;
  --signal: #84FF12;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--base);
  color: #E7ECF1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .font-display { font-family: 'Satoshi', 'Inter', sans-serif; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

::selection { background: rgba(132,255,18,0.25); color: #fff; }

/* ---- Readable muted text (raise contrast on black) ---- */
.text-slate-600 { color:#94a3b8 !important; }   /* was too dark */
.text-slate-500 { color:#aeb9c6 !important; }
.text-slate-400 { color:#c2ccd8 !important; }

/* ---- Premium pass: muted green, no spotlights, softer buttons ---- */
.text-signal { color:#6FC233 !important; }
.eyebrow { color:#6FC233 !important; }
.eyebrow::before { background:#5FB62B !important; box-shadow:none !important; }
.btn-primary { background:#5FB62B !important; }
.btn-primary:hover { background:#6FC93A !important; box-shadow:0 6px 16px -8px rgba(95,182,43,0.45) !important; }
.wave span { background:#5FB62B !important; }
.beam, .beam-core, .glow-signal { display:none !important; }
::selection { background:rgba(95,182,43,0.28) !important; color:#fff !important; }

/* ---- Premium upgrades (site-wide) ---- */
.stat { font-size:12px !important; }
.surface, .surface-2 { border-radius:16px !important; }
.surface, .surface-2, .card { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.surface:hover, .surface-2:hover, .card:hover, .card-hover:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.16) !important; box-shadow: 0 20px 44px -26px rgba(0,0,0,0.92); }
.btn { transition: all .2s ease; }
.btn-primary { background-image: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0)); }
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-2px); }
.btn-ghost:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.22) !important; }
.acc-panel p { font-size:15px; line-height:1.65; }

/* Softer section dividers (~30% lighter) */
.hairline { border-color: rgba(255,255,255,0.045) !important; }
.border-white\/\[0\.06\] { border-color: rgba(255,255,255,0.045) !important; }

/* Floating Book a Demo button — premium polish */
#stickyCta { border-radius: 14px !important; box-shadow: 0 14px 30px -10px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04) !important; }
#stickyCta:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* ===== Launch pass: glass cards + larger typography ===== */
/* Glass card style site-wide */
.surface, .surface-2, .card {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.085) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,0.7) !important;
}
/* Larger card titles (titles only, not body) */
h3.text-lg { font-size: 1.4rem !important; line-height: 1.25 !important; }
h3.text-xl { font-size: 1.55rem !important; line-height: 1.25 !important; }

/* Bigger hero + section headings on desktop */
@media (min-width: 1024px) {
  .sm\:text-\[3\.5rem\] { font-size: 4.5rem !important; line-height: 1.03 !important; }
  .sm\:text-\[3\.6rem\] { font-size: 4.3rem !important; line-height: 1.04 !important; }
  .sm\:text-\[3\.4rem\] { font-size: 4.25rem !important; line-height: 1.04 !important; }
  .sm\:text-\[3\.2rem\] { font-size: 4rem !important; line-height: 1.05 !important; }
  .sm\:text-5xl { font-size: 3.5rem !important; line-height: 1.06 !important; }
  .sm\:text-4xl { font-size: 3.15rem !important; line-height: 1.07 !important; }
  .sm\:text-\[2\.6rem\] { font-size: 3.25rem !important; line-height: 1.06 !important; }
}

/* Clean pricing numbers */
.price-num { font-family:'Satoshi','Inter',sans-serif !important; font-weight:900; letter-spacing:-0.01em; }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #05070A; }
::-webkit-scrollbar-thumb { background: #1B2430; border-radius: 99px; border: 3px solid #05070A; }
::-webkit-scrollbar-thumb:hover { background: #2A3645; }

/* ---- Signal text / gradient ---- */
.text-signal { color: #84FF12; }
.text-grad {
  background: linear-gradient(180deg, #FFFFFF 0%, #C7D0DA 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- Section labels — one unified style for sec-label and eyebrow ---- */
.eyebrow, .sec-label {
  font-family: 'Inter', 'Satoshi', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #6FC233 !important;
  display: inline-block !important;
  margin-bottom: .65rem;
  gap: 0 !important;
}
.eyebrow::before { display:none !important; }

/* ---- Surfaces ---- */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
}
.card-hover { transition: border-color .25s ease, background-color .25s ease; }
.card-hover:hover { border-color: rgba(132,255,18,0.30); background-color: rgba(132,255,18,0.02); }
.hairline { border-color: rgba(255,255,255,0.07); }

/* ---- Background grid + glow ---- */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
}
.grid-fade {
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 0%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 60% at 50% 0%, #000 50%, transparent 100%);
}
.glow-signal {
  background: radial-gradient(circle, rgba(132,255,18,0.16) 0%, transparent 65%);
  filter: blur(20px);
}
.fade-x { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius: 11px; font-weight: 600; font-size: 14px; transition: all .2s ease; cursor: pointer; }
.btn-primary { background: #84FF12; color: #05070A; padding: 0.7rem 1.15rem; }
.btn-primary:hover { background: #9AFF3A; box-shadow: 0 0 0 1px rgba(132,255,18,.3), 0 16px 40px -12px rgba(132,255,18,.5); }
.btn-ghost { background: rgba(255,255,255,0.04); color: #fff; border: 1px solid rgba(255,255,255,0.10); padding: 0.7rem 1.15rem; }
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }

/* ---- Nav active state ---- */
.nav-link { position: relative; color: #9BA7B4; transition: color .2s ease; }
.nav-link:hover { color: #fff; }
.nav-link.active { color: #fff; }
.nav-link.active::after {
  content:""; position:absolute; left:0.75rem; right:0.75rem; bottom:-1.05rem; height:2px;
  background:#84FF12; box-shadow:0 0 8px #84FF12; border-radius:2px;
}

/* ---- Dropdown ---- */
.dropdown-panel { opacity:0; visibility:hidden; transform: translateY(6px); transition: all .18s ease; }
.dropdown-panel.open { opacity:1; visibility:visible; transform: none; }

/* ---- Reveal ---- */
.reveal { opacity:0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }

/* ---- Console waveform ---- */
.wave { display:flex; align-items:center; gap:3px; height:34px; }
.wave span { width:3px; border-radius:99px; background:#84FF12; opacity:.85; animation: waveMove 1.1s ease-in-out infinite; }
@keyframes waveMove { 0%,100%{ height:18%; } 50%{ height:100%; } }

/* ---- Console log lines ---- */
.logline { opacity:0; transform: translateY(4px); transition: opacity .4s ease, transform .4s ease; }
.logline.show { opacity:1; transform:none; }

/* ---- FAQ ---- */
.acc-panel { max-height:0; overflow:hidden; transition: max-height .35s ease; }

/* ---- Sticky CTA ---- */
#stickyCta { opacity:0; transform: translateY(12px); pointer-events:none; transition: all .3s ease; }
#stickyCta.show { opacity:1; transform:none; pointer-events:auto; }

/* ---- Hero light beam (Botify-style) ---- */
.beam {
  position: absolute; top: -8%; left: 50%; width: 70%; height: 80%;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(132,255,18,0.55) 0%, rgba(132,255,18,0.12) 38%, rgba(132,255,18,0) 70%);
  filter: blur(26px);
  clip-path: polygon(44% 0, 56% 0, 82% 100%, 18% 100%);
  pointer-events: none;
}
.beam-core {
  position: absolute; top: -6%; left: 50%; width: 2px; height: 52%;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(180,255,120,0.9), rgba(132,255,18,0));
  pointer-events: none;
}

/* ---- Dashboard area chart fill ---- */
.area-grad { fill: url(#areaGrad); }

/* ---- Pillar number tag ---- */
.pillar-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .15em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity:1 !important; transform:none !important; }
  .logline { opacity:1 !important; transform:none !important; }
  .wave span { height: 55% !important; }
}

/* ============================================================
   Premium refinement pass — spacing, scale, hierarchy
   Visual polish only. No color or copy changes.
   ============================================================ */

/* Navbar: a touch taller with more breathing room */
#siteNav nav { height: 4.5rem; }
#siteNav .btn-primary { padding: 0.62rem 1.25rem; }

/* Buttons: slightly larger label for a more premium feel */
.btn { font-size: 15px; }

/* Section intro paragraphs: a little wider for readability */
.max-w-2xl { max-width: 45rem !important; }

/* More space below section headings (h2 -> intro paragraph) */
section h2 + p { margin-top: 1.5rem; }

/* Card hover: subtle premium lift + glow (restrained) */
.surface, .surface-2, .card { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.surface:hover, .surface-2:hover, .card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.16) !important;
  box-shadow: 0 22px 48px -26px rgba(0,0,0,0.95), 0 0 0 1px rgba(95,182,43,0.10) !important;
}

@media (min-width: 1024px) {
  /* Navbar height on desktop */
  #siteNav nav { height: 5rem; }
  /* Hero headline: ~12% larger + tighter line-height */
  .sm\:text-\[3\.4rem\] { font-size: 4.75rem !important; line-height: 1.0 !important; }
  /* Section headings: ~5% larger */
  .sm\:text-4xl { font-size: 3.3rem !important; }
  /* Roomier vertical rhythm between sections */
  .sm\:py-12 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
}

/* ============================================================
   Premium SaaS polish — glassmorphism, gloss, depth
   Restrained. Keeps black/white/green identity. No neon.
   ============================================================ */

/* Glass surfaces: layered depth + soft inner top highlight */
.surface, .surface-2, .card {
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.014)) !important;
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
  border: 1px solid rgba(255,255,255,0.085) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 1px 2px rgba(0,0,0,0.30),
    0 14px 36px -20px rgba(0,0,0,0.80) !important;
}
.surface:hover, .surface-2:hover, .card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    0 24px 52px -26px rgba(0,0,0,0.95),
    0 0 0 1px rgba(95,182,43,0.12) !important;
}

/* Glossy top reflection — apply to feature/hero cards via .glass-gloss */
.glass-gloss { position: relative; }
.glass-gloss::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 44%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 55%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.glass-gloss > * { position: relative; z-index: 1; }

/* Navbar: premium floating glass */
#siteNav {
  background: rgba(6,8,11,0.68) !important;
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 30px -16px rgba(0,0,0,0.55);
}

/* Buttons: soft glossy finish + depth (green branding preserved) */
.btn-primary {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 8px 20px -10px rgba(95,182,43,0.45) !important;
}
.btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 0 12px 26px -10px rgba(95,182,43,0.55) !important;
}
.btn-ghost {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 6px 16px -10px rgba(0,0,0,0.6) !important;
}