:root{
    --bg:#060A1F;
    --surface:#0D1436;
    --surface-2:#121B47;
    --line:#212C60;
    --force:#3358FF;
    --pulse:#3DDBFF;
    --text:#F4F6FF;
    --muted:#8B94C4;
    --muted-2:#5C6499;
    --radius:14px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    line-height:1.5;
    overflow-x:hidden;
  }
  h1,h2,h3,.disp{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.02em;}
  .mono{font-family:'JetBrains Mono',monospace;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
  section{position:relative;}

  /* background force field */
  .field{
    position:fixed;inset:0;z-index:-2;
    background:
      radial-gradient(ellipse 900px 500px at 15% -5%, rgba(51,88,255,0.25), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 20%, rgba(61,219,255,0.12), transparent 60%),
      var(--bg);
  }
  .grid-overlay{
    position:fixed;inset:0;z-index:-1;opacity:0.35;
    background-image:
      linear-gradient(rgba(51,88,255,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(51,88,255,0.06) 1px, transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(ellipse 100% 60% at 50% 0%, black, transparent 75%);
  }

  /* header */
  header{
    position:sticky;top:0;z-index:100;
    background:rgba(6,10,31,0.75);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;}
  .logo{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-weight:700;font-size:1.15rem;}
  .logo-mark{
    width:30px;height:30px;border-radius:8px;
    background:linear-gradient(135deg,var(--force),var(--pulse));
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 22px rgba(51,88,255,0.55);
    position:relative;flex-shrink:0;
  }
  .logo-mark::before{
    content:"";width:12px;height:12px;background:var(--bg);
    clip-path:polygon(0 0,100% 50%,0 100%);
  }
  .navlinks{display:flex;gap:32px;font-size:0.92rem;color:var(--muted);}
  .navlinks a{transition:color .2s;}
  .navlinks a:hover{color:var(--text);}
  .cta-btn{
    background:linear-gradient(135deg,var(--force),#5A78FF);
    color:#fff;padding:11px 22px;border-radius:999px;
    font-weight:600;font-size:0.92rem;
    box-shadow:0 6px 24px rgba(51,88,255,0.35);
    transition:transform .2s, box-shadow .2s;
    white-space:nowrap;
  }
  .cta-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(51,88,255,0.5);}
  .cta-ghost{
    border:1px solid var(--line);padding:10px 20px;border-radius:999px;
    font-size:0.9rem;color:var(--text);transition:border-color .2s, background .2s;
  }
  .cta-ghost:hover{border-color:var(--force);background:rgba(51,88,255,0.08);}
  .mobile-toggle{display:none;}

  /* hero */
  .hero{padding:96px 0 64px;text-align:center;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'JetBrains Mono';font-size:0.78rem;color:var(--pulse);
    border:1px solid rgba(61,219,255,0.3);background:rgba(61,219,255,0.06);
    padding:6px 14px;border-radius:999px;margin-bottom:28px;
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--pulse);box-shadow:0 0 8px var(--pulse);}
  .hero h1{
    font-size:clamp(2.4rem,6vw,4.4rem);
    font-weight:700;line-height:1.05;max-width:920px;margin:0 auto 22px;
  }
  .hero h1 .grad{
    background:linear-gradient(135deg,var(--pulse),var(--force));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero p{
    color:var(--muted);font-size:1.12rem;max-width:600px;margin:0 auto 40px;
  }
  .hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:64px;}
  .cta-lg{padding:15px 30px;font-size:1rem;}

  /* waveform signature */
  .waveform{
    display:flex;align-items:flex-end;justify-content:center;gap:5px;
    height:120px;max-width:640px;margin:0 auto;
  }
  .waveform .bar{
    width:6px;border-radius:4px;
    background:linear-gradient(180deg,var(--pulse),var(--force));
    animation:pulse 1.4s ease-in-out infinite;
    opacity:0.85;
  }
  @keyframes pulse{
    0%,100%{transform:scaleY(0.25);}
    50%{transform:scaleY(1);}
  }
  @media (prefers-reduced-motion:reduce){
    .waveform .bar{animation:none;transform:scaleY(0.6);}
  }

  .platform-strip{
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:26px 0;overflow:hidden;background:var(--surface);
  }
  .platform-strip .label{
    text-align:center;font-size:0.78rem;color:var(--muted-2);
    font-family:'JetBrains Mono';letter-spacing:0.08em;margin-bottom:18px;text-transform:uppercase;
  }
  .marquee{display:flex;gap:56px;width:max-content;animation:scroll 26s linear infinite;}
  @keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  .marquee span{
    font-family:'Space Grotesk';font-weight:600;font-size:1.05rem;color:var(--muted);
    white-space:nowrap;
  }

  /* section heading pattern */
  .sec-head{max-width:640px;margin:0 auto 56px;text-align:center;}
  .sec-tag{
    font-family:'JetBrains Mono';font-size:0.78rem;color:var(--pulse);
    text-transform:uppercase;letter-spacing:0.1em;margin-bottom:14px;display:block;
  }
  .sec-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-bottom:14px;}
  .sec-head p{color:var(--muted);font-size:1.02rem;}

  section.pad{padding:110px 0;}

  /* features */
  .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .feat-card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:30px 26px;transition:transform .25s, border-color .25s;
  }
  .feat-card:hover{transform:translateY(-4px);border-color:var(--force);}
  .feat-num{
    font-family:'JetBrains Mono';color:var(--muted-2);font-size:0.85rem;margin-bottom:16px;display:block;
  }
  .feat-card h3{font-size:1.15rem;margin-bottom:10px;}
  .feat-card p{color:var(--muted);font-size:0.94rem;}

  /* analytics */
  .analytics-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;}
  .analytics-list{display:flex;flex-direction:column;gap:28px;}
  .a-item{display:flex;gap:16px;}
  .a-icon{
    width:42px;height:42px;border-radius:10px;background:var(--surface-2);
    border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;
    font-size:1.1rem;
  }
  .a-item h3{font-size:1.05rem;margin-bottom:4px;}
  .a-item p{color:var(--muted);font-size:0.92rem;}

  .dash{
    background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px;
    box-shadow:0 30px 80px rgba(0,0,0,0.45);
  }
  .dash-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;}
  .dash-top .l{font-family:'JetBrains Mono';font-size:0.8rem;color:var(--muted);}
  .dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px;}
  .stat-box{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:14px;}
  .stat-box .v{font-family:'Space Grotesk';font-size:1.35rem;font-weight:700;}
  .stat-box .k{font-size:0.76rem;color:var(--muted-2);margin-top:4px;}
  .track-row{
    display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);
  }
  .track-row:first-of-type{border-top:none;}
  .track-cover{width:38px;height:38px;border-radius:8px;background:linear-gradient(135deg,var(--force),var(--pulse));flex-shrink:0;}
  .track-info{flex:1;min-width:0;}
  .track-info .t{font-size:0.9rem;font-weight:600;}
  .track-info .s{font-size:0.76rem;color:var(--muted-2);}
  .track-plays{font-family:'JetBrains Mono';font-size:0.85rem;color:var(--pulse);}

  /* pricing */
  .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
  .price-card{
    background:var(--surface);border:1px solid var(--line);border-radius:20px;
    padding:34px 28px;display:flex;flex-direction:column;position:relative;
  }
  .price-card.hi{
    border-color:var(--force);
    background:linear-gradient(180deg, rgba(51,88,255,0.1), var(--surface) 40%);
    box-shadow:0 20px 60px rgba(51,88,255,0.2);
  }
  .badge{
    position:absolute;top:-13px;left:50%;transform:translateX(-50%);
    background:linear-gradient(135deg,var(--force),var(--pulse));
    color:#04081C;font-weight:700;font-size:0.74rem;padding:6px 16px;border-radius:999px;
  }
  .price-card h3{font-size:1.1rem;color:var(--muted);margin-bottom:12px;font-weight:600;}
  .price-card .amount{font-family:'Space Grotesk';font-size:2.4rem;font-weight:700;margin-bottom:4px;}
  .price-card .period{color:var(--muted-2);font-size:0.85rem;margin-bottom:26px;}
  .price-card ul{display:flex;flex-direction:column;gap:12px;margin-bottom:30px;flex:1;}
  .price-card li{display:flex;gap:10px;font-size:0.9rem;color:var(--muted);align-items:flex-start;}
  .price-card li b{color:var(--text);}
  .check{color:var(--pulse);flex-shrink:0;margin-top:1px;}
  .price-card .cta-btn, .price-card .cta-ghost{text-align:center;}

  /* comparison */
  .comp-table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:16px;overflow:hidden;}
  .comp-table th,.comp-table td{padding:18px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:0.9rem;vertical-align:top;}
  .comp-table th{background:var(--surface);font-family:'Space Grotesk';font-size:0.95rem;}
  .comp-table td{color:var(--muted);background:var(--surface);}
  .comp-table tr:last-child td{border-bottom:none;}
  .comp-table .force-col{color:var(--text);background:rgba(51,88,255,0.08);}
  .comp-table .feat-name{color:var(--text);font-weight:600;}
  .comp-table .feat-sub{display:block;color:var(--muted-2);font-weight:400;font-size:0.8rem;margin-top:4px;}
  .table-scroll{overflow-x:auto;}

  /* services */
  .service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .service-card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:26px;display:flex;flex-direction:column;
  }
  .service-card h3{font-size:1.05rem;margin-bottom:8px;}
  .service-card p{color:var(--muted);font-size:0.88rem;flex:1;margin-bottom:18px;}
  .service-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
  .service-price{font-family:'Space Grotesk';font-weight:700;color:var(--pulse);}
  .service-time{font-size:0.78rem;color:var(--muted-2);}

  /* testimonials */
  .test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .test-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;}
  .stars{color:var(--pulse);letter-spacing:3px;margin-bottom:16px;font-size:0.9rem;}
  .test-card p{color:var(--muted);font-size:0.92rem;margin-bottom:22px;}
  .test-who{display:flex;align-items:center;gap:12px;}
  .avatar{
    width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--force),var(--pulse));
    display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-weight:700;font-size:0.8rem;color:#04081C;
  }
  .test-who .name{font-weight:600;font-size:0.9rem;}
  .test-who .role{font-size:0.78rem;color:var(--muted-2);}

  /* faq */
  .faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
  .faq-item{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
  .faq-q{
    padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
    font-weight:600;font-size:0.96rem;
  }
  .faq-q .plus{color:var(--pulse);font-size:1.2rem;transition:transform .25s;flex-shrink:0;margin-left:16px;}
  .faq-item.open .plus{transform:rotate(45deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
  .faq-a p{padding:0 24px 20px;color:var(--muted);font-size:0.9rem;}

  /* final cta */
  .final-cta{
    text-align:center;padding:100px 0;
    background:radial-gradient(ellipse 700px 400px at 50% 0%, rgba(51,88,255,0.25), transparent 70%);
  }
  .final-cta h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:16px;}
  .final-cta p{color:var(--muted);margin-bottom:36px;}

  footer{border-top:1px solid var(--line);padding:64px 0 32px;background:var(--surface);}
  .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;margin-bottom:48px;}
  .footer-brand p{color:var(--muted);font-size:0.88rem;margin:16px 0 20px;max-width:280px;}
  .footer-contact{font-size:0.86rem;color:var(--muted);display:flex;flex-direction:column;gap:8px;}
  .footer-contact a:hover{color:var(--pulse);}
  .footer-col h4{font-size:0.85rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:16px;}
  .footer-col ul{display:flex;flex-direction:column;gap:10px;}
  .footer-col a{font-size:0.88rem;color:var(--muted);transition:color .2s;}
  .footer-col a:hover{color:var(--text);}
  .footer-bottom{
    border-top:1px solid var(--line);padding-top:24px;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
    font-size:0.82rem;color:var(--muted-2);
  }

  .wa-float{
    position:fixed;bottom:24px;right:24px;z-index:200;
    width:56px;height:56px;border-radius:50%;
    background:linear-gradient(135deg,var(--force),var(--pulse));
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 30px rgba(51,88,255,0.5);
    font-size:1.4rem;transition:transform .2s;
  }
  .wa-float:hover{transform:scale(1.08);}

  @media (max-width:900px){
    .navlinks{display:none;}
    .feat-grid,.service-grid,.test-grid{grid-template-columns:1fr 1fr;}
    .price-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto;}
    .analytics-layout{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:600px){
    .feat-grid,.service-grid,.test-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .hero{padding:64px 0 40px;}
    section.pad{padding:72px 0;}
    .comp-table th,.comp-table td{padding:14px;font-size:0.82rem;}
  }

/* multi-page nav additions */
.navlinks a.active{color:var(--pulse);}
.mobile-toggle{
  display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;
}
.mobile-toggle span{width:22px;height:2px;background:var(--text);border-radius:2px;}
@media (max-width:900px){
  .mobile-toggle{display:flex;}
  .navlinks{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--surface);border-bottom:1px solid var(--line);
    padding:8px 0;
  }
  .navlinks.open{display:flex;}
  .navlinks a{padding:14px 28px;border-top:1px solid var(--line);}
  .navlinks a:first-child{border-top:none;}
}

/* page hero (non-home pages) */
.page-hero{padding:64px 0 20px;text-align:center;}
.page-hero .sec-tag{display:block;margin-bottom:14px;}
.page-hero h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:14px;}
.page-hero p{color:var(--muted);max-width:560px;margin:0 auto;font-size:1.05rem;}
.crumb{
  font-family:'JetBrains Mono';font-size:0.78rem;color:var(--muted-2);
  display:flex;justify-content:center;gap:8px;margin-bottom:18px;
}
.crumb a:hover{color:var(--pulse);}

/* index teaser cards linking to full pages */
.teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.teaser-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;transition:transform .25s, border-color .25s;display:flex;flex-direction:column;
}
.teaser-card:hover{transform:translateY(-4px);border-color:var(--force);}
.teaser-card h3{font-size:1.1rem;margin-bottom:10px;}
.teaser-card p{color:var(--muted);font-size:0.9rem;margin-bottom:18px;flex:1;}
.teaser-link{font-size:0.86rem;color:var(--pulse);font-weight:600;}
.teaser-link:after{content:" →";}
@media (max-width:900px){.teaser-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.teaser-grid{grid-template-columns:1fr;}}