:root { 
  --bg:#0b0b0f; 
  --fg:#e9eef7; 
  --muted:#a6b0c3; 
  --acc:#7cf; 
  --green: #10b981;
  --yellow: #f59e0b;
  --magenta: #ec4899;
}
*{box-sizing:border-box} 
html {
  scroll-behavior: smooth;
}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Inter,system-ui,Arial;
  background-image: radial-gradient(circle at 10% 10%, #7cf1 0%, transparent 25%), radial-gradient(circle at 90% 80%, #7cf1 0%, transparent 25%);
}
.nav{position:fixed;top:0;left:0;right:0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:linear-gradient(180deg,#0b0b0fec,#0b0b0f00);backdrop-filter:saturate(160%) blur(8px);z-index:50;border-bottom:1px solid #111826}
.nav a{color:var(--fg);text-decoration:none;margin:0 8px; transition: color 0.2s ease; opacity:.9}
.nav a:hover { color: #fff; opacity:1 }
.brand{font-weight:800; font-size: 1.2rem;}
.nav .btn-home { background:#1f88ff; color:#031119; padding:8px 14px; border-radius:10px; font-weight:700 }
.nav .btn-home:hover { box-shadow:0 6px 20px #1f88ff33 }
.nav .btn-nav {
  background-color: var(--green);
  color: white;
  padding: 8px 18px;
  font-size: 0.9rem;
  margin-left: 8px;
  margin-top: 0;
}
.nav .btn-nav:hover {
  background-color: #12c98e;
  box-shadow: 0 5px 20px #10b98130;
}

.panel{min-height:100svh;display:flex;flex-direction: column; align-items:center;justify-content:center;padding:96px 20px 40px; text-align: center; position: relative; overflow: hidden;}
.hero h1{font-size: clamp(36px,7vw,80px);line-height:1.05;margin:.2em 0; font-weight: 800;}
.hero p{max-width:720px;color:var(--muted);font-size: clamp(16px,2.2vw,22px); margin: 24px 0 32px; }
.btn{display:inline-block;background:var(--acc);color:#001a2a;padding:16px 28px;border-radius:12px;font-weight:700;margin-top:14px; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease;}
.btn:hover { transform: scale(1.05); box-shadow: 0 10px 30px #00c6ff20; }
.hero-art{width:min(860px,88vw);margin-top:40px;filter:drop-shadow(0 10px 40px #00c6ff20)}
.steps{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));max-width:1100px; width: 100%;}
.steps li{list-style:none;background:#10131a99;border:1px solid #1f2533;border-radius:16px;padding:24px; text-align: left;}
.steps li::before { content: counter(step-counter); counter-increment: step-counter; margin-right: 12px; font-weight: 600; background: var(--acc); color: var(--bg); border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;}
.steps strong{display:block;margin-bottom:8px; font-size: 1.2rem;}
.steps span { color: var(--muted); }
.pin-wrap{position:relative}
.pin-spacer{position:relative;height:100svh;overflow:hidden}
.h-strip{display:flex;gap:24px;position:absolute;top:50%;transform:translateY(-50%);left:0;will-change:transform;padding-left:10vw}
.card{flex:0 0 clamp(320px, 70vw, 720px);max-width:720px;background:#10131a99;border:1px solid #1f2533;border-radius:20px;padding:32px; backdrop-filter: blur(8px); text-align: left;}
.card h3 { font-size: clamp(20px, 3vw, 28px); }
.proof .stats{display:flex;gap:32px;flex-wrap:wrap;justify-content:center}
.proof .stats div{background:#10131a99;border:1px solid #1f2533;border-radius:16px;padding:24px 32px;text-align:center}
.proof .stats strong { font-size: 2rem; display: block; }
.proof .stats span { color: var(--muted); }
.price-card{background:#10131a99;border:1px solid #1f2533;border-radius:20px;padding:40px;max-width:540px;text-align:center;}
.price-card h2 { font-size: 2.5rem; margin-top: 0; }
.footer{padding:40px 20px;color:var(--muted);text-align:center}
.footer a { color: var(--muted); text-decoration: none; transition: color 0.2s ease;}
.footer a:hover { color: var(--fg); }
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  *{scroll-behavior:auto; scroll-snap-type: none !important; }
  .animated { transition: none !important; animation: none !important; }
}

/* Add some more styling for a polished look */
body {
  overscroll-behavior: none;
  counter-reset: step-counter;
}

.hero-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card h3 {
  margin-top: 0;
  font-size: 1.5rem;
}

.card-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
}

.card p {
  color: var(--muted);
}

/* Interactive Dashboard Section */
.interactive {
  gap: 24px;
}
.interactive h2 {
  font-size: clamp(28px, 5vw, 48px);
  margin: 0;
}
.interactive .subtitle {
  color: var(--muted);
  font-size: clamp(16px, 2.2vw, 20px);
  max-width: 500px;
  margin: 8px 0 24px;
}

.dashboard-perspective {
  perspective: 2000px;
}

.dashboard-ui {
  width: 70vw;
  max-width: 900px;
  height: 500px;
  background: #10131acc;
  border: 1px solid #1f2533;
  border-radius: 20px;
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 80px #00000080;
  transform: rotateX(25deg) rotateZ(-5deg) scale(0.9);
  transition: transform 0.2s ease;
}
.dashboard-ui:hover {
  transform: rotateX(15deg) rotateZ(0deg) scale(1);
}

.dashboard-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #1f2533;
}
.dashboard-header .dots { display: flex; gap: 6px; margin-right: 12px; }
.dashboard-header .dots span { width: 12px; height: 12px; border-radius: 50%; background: #2a3142; }
.dashboard-header .dots span:first-child { background: #ff5f56; }
.dashboard-header .dots span:nth-child(2) { background: #ffbd2e; }

.dashboard-body {
  flex-grow: 1;
  display: flex;
  gap: 16px;
  padding: 16px;
  overflow: hidden;
}

.transcript {
  flex: 2;
  background: #0b0b0f80;
  border-radius: 12px;
  padding: 16px;
}
.message { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: #10131a; border-radius: 8px; margin-bottom: 8px; }
.message span { font-weight: 600; }
.message small { color: var(--muted); }

.dialpad {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.dialpad .key {
  background: #1a1f2b;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.dialpad .key:hover { background: #2a3142; }
.dialpad .key span { font-size: 0.75rem; color: var(--muted); font-weight: 400; }


.dashboard-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid #1f2533;
}
.controls { display: flex; align-items: center; gap: 8px; }
.speaker-btn, .end-call-btn {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.speaker-btn { background: #2a3142; color: var(--fg); }
.end-call-btn { background: #ff5f56; color: white; }
.end-call-btn svg { transform: rotate(135deg); }

.btn.secondary { background: #1f2533; color: var(--fg); }
.btn.secondary:hover { background: #2a3142; box-shadow: 0 10px 30px #00000030; }

/* Testimonials */
.testimonials {
  margin-top: 80px;
  width: 100%;
  max-width: 1100px;
}
.testimonials h2 {
  font-size: clamp(24px, 4vw, 36px);
  margin-bottom: 32px;
}
.testimonial-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.testimonial {
  display: flex;
  flex-direction: column;
}
.testimonial p {
  flex-grow: 1;
}
.testimonial footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.testimonial footer img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.testimonial footer strong {
  display: block;
}
.testimonial footer span {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Pricing Section */
.pricing.panel {
  padding-top: 60px;
  padding-bottom: 60px;
}
.pricing h2 { font-size: clamp(28px, 5vw, 48px); margin: 0; }
.pricing .subtitle { color: var(--muted); font-size: clamp(16px, 2.2vw, 20px); max-width: 500px; margin: 8px 0 24px; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 1200px;
}

.price-tier {
  background: var(--panel-bg, #10131a99);
  border: 1px solid var(--border-color, #1f2533);
  border-radius: 20px;
  padding: 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}
.price-tier:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px #00000040;
}
.price-tier.token-pack {
  grid-column: span 2;
}
.price-tier.subscription {
  grid-column: span 3;
}

.price-tier .badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 600;
}
.price-tier.popular { border-color: var(--yellow); }
.price-tier.popular .badge { background: var(--yellow); color: #2d1e00; }
.price-tier.best-value { border-color: var(--magenta); }
.price-tier.best-value .badge { background: var(--magenta); color: white; }

.price-tier h3 { font-size: 1.25rem; margin: 0 0 8px; font-weight: 600; }
.price-tier .description { color: var(--muted); font-size: 0.9rem; margin: 0; min-height: 36px;}
.price-tier .price { font-size: 2.5rem; font-weight: 800; margin: 8px 0; }
.price-tier .price span { font-size: 1rem; color: var(--muted); font-weight: 400;}
.price-tier .btn { margin-top: auto; text-align: center; width: 100%; padding: 10px; font-size: 0.9rem; }

.btn-green { background: var(--green); color: white; }
.btn-yellow { background: var(--yellow); color: #2d1e00; }
.btn-magenta { background: var(--magenta); color: white; }

.stripe-note {
  margin-top: 24px;
  color: var(--muted);
  font-size: 0.9rem;
}

/* FAQ Section */
.faq { gap: 32px; }
.faq h2 { font-size: clamp(28px, 5vw, 48px); margin: 0; }
.faq-accordion {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq-accordion details {
  background: var(--panel-bg, #10131a99);
  border: 1px solid var(--border-color, #1f2533);
  border-radius: 12px;
  padding: 16px 20px;
  text-align: left;
}
.faq-accordion summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary::after {
  content: '+';
  font-size: 1.5rem;
  transition: transform 0.2s ease;
}
.faq-accordion details[open] summary::after {
  transform: rotate(45deg);
}
.faq-accordion p {
  margin-top: 16px;
  color: var(--muted);
  line-height: 1.6;
}

/* CTA Section */
.cta {
  background-color: #10131a;
}
.cta h2 {
  font-size: clamp(28px, 5vw, 48px);
  margin: 0 0 16px;
}


@media (max-width: 900px) {
  .price-tier.token-pack, .price-tier.subscription {
    grid-column: span 3;
  }
}

@media (max-width: 768px) {
  .nav { font-size:.95rem; padding:0 12px }
  .brand-text { display:none }
  .nav a.btn-home { display:inline-block }
  .nav a.btn-nav { display:inline-block }

  .panel {
    min-height: auto;
    padding: 80px 20px;
  }
  .hero {
    min-height: 100svh;
  }

  .h-strip {
    padding-left: 5vw;
  }
  .card {
    flex: 0 0 80vw;
  }

  .dashboard-perspective {
    perspective: none;
  }

  .dashboard-ui {
    transform: none !important;
    width: 90vw;
    max-width: 400px;
    height: auto;
    margin-top: 24px;
  }

  .dashboard-body {
    flex-direction: column;
  }

  .dialpad .key {
    padding: 12px 0;
    min-height: 60px;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .price-tier.token-pack, .price-tier.subscription {
    grid-column: span 1;
  }
}

/* Hero Animated additions */
.hero-animated { gap: 16px; }
#hero-wave { width: min(1100px, 92vw); height: 160px; display: block; margin-top: 24px; opacity: .9; filter: drop-shadow(0 6px 24px #00c6ff20); }
.supersonik-inline { margin-top: 10px; color: var(--muted); letter-spacing: .08em; }

/* Problem compact */
.problem .problem-content { max-width: 900px; }
.problem h2 { font-size: clamp(28px,5vw,48px); margin: 0 0 8px; }

/* How v2 cards */
.how-v2 { padding-top: 70px; padding-bottom: 70px; }
.steps-v2 { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 16px; max-width: 1100px; width: 100%; }
.step-card { background:#10131a99; border:1px solid #1f2533; border-radius:16px; padding:18px 20px; text-align:left; }
.step-card h3 { margin:0 0 6px; font-size:1.15rem; }
.step-card p { color: var(--muted); margin:0; }

/* Visualization */
.visualization .viz-canvas { width:min(900px,92vw); height:auto; margin-top: 16px; }

/* Hold-for-me */
.hold-for-me .incoming-banner { margin-top: 18px; background:#1a1f2b; border:1px solid #36415A; border-radius:12px; padding:12px 16px; color:#cfe7ff; box-shadow:0 10px 30px #00000040; }

/* Features grid (parallax-ready) - keep old features strip intact */
.features-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:16px; max-width:1100px; width:100%; }
.features-grid .feature-card { background:#10131a99; border:1px solid #1f2533; border-radius:16px; padding:18px; text-align:left; }

/* History preview + Request (compact) */
.history-preview { max-width:1000px; width:100%; }
.history-preview .table { display:grid; grid-template-columns:1.2fr 1.8fr .8fr 1fr .8fr; gap:8px; padding:12px; border:1px solid #1f2533; border-radius:12px; background:#10131a99; }
.history-preview .table .head { color: var(--muted); }
.request .request-form { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; max-width:600px; width:100%; }
.request .request-form input { flex:1 1 220px; background:#1f2533; border:1px solid #36415A; border-radius:12px; padding:14px; color:var(--fg); }
.request .request-form .btn { padding:12px 16px; }

/* Brand image in header */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); }
.brand-img { height: 20px; width: auto; display: inline-block; }
.brand-text { display: none; }

/* Features grid section */
.features-grid-section { padding-top: 70px; padding-bottom: 70px; }
.features-grid-section h2 { margin: 0; font-size: clamp(28px,5vw,48px); }
.features-grid-section .subtitle { color: var(--muted); margin: 8px 0 24px; }
.features-grid .feature-card { transition: transform .2s ease, box-shadow .2s ease; }
.features-grid .feature-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px #00000050; }

/* Ensure Pricing panel is never clipped */
.pricing.panel { min-height: auto; overflow: visible; }

/* History & Request spacing */
.history-preview h2, .request h2 { font-size: clamp(26px,4.6vw,40px); margin: 0 0 12px; }
.history-preview, .request { padding-top: 70px; padding-bottom: 70px; }