/* index.html — moved out of an inline <style>.
   This page is served as a STATIC file, so no per-request nonce can reach
   it, and style-src-elem carries no 'unsafe-inline'. */
:root{
    /* Brand — the NOW mark: vibrant red letters + an orange→gold swirl. */
    --red:#F02531; --red-dk:#CE1F29; --orange:#FB8C1A; --orange-lt:#FFB20A;
    --grad:linear-gradient(135deg,#F02531 0%,#FB7A0A 100%);
    --navy:#1D3557; --navy-dk:#0f1b31;
    --ink:#141a2b; --sub:#5a6677; --line:#e7ebf2; --bg:#ffffff; --bg-alt:#f7f8fb; --card:#fff;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{margin:0;font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans Telugu",sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
  a{color:var(--red);text-decoration:none}
  img{max-width:100%}
  h1,h2,h3{letter-spacing:-.5px}
  :focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
  .wrap{max-width:1120px;margin:0 auto;padding:0 20px}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--grad);color:#fff;font-weight:700;padding:14px 26px;border-radius:999px;box-shadow:0 8px 20px -8px rgba(240,37,49,.55);transition:box-shadow .18s,filter .18s;border:0;cursor:pointer;font-size:15px}
  .btn:hover{filter:brightness(1.05);box-shadow:0 12px 28px -8px rgba(240,37,49,.6)}
  .btn svg{width:18px;height:18px}
  .btn.sm{padding:10px 18px;font-size:14px}
  .btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55);box-shadow:none}
  .btn.ghost:hover{background:rgba(255,255,255,.12);filter:none}
  .btn.light{background:#fff;color:var(--red);box-shadow:0 8px 20px -10px rgba(0,0,0,.3)}
  .btn.light:hover{filter:none;background:#fff8f8}

  /* Header */
  header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.82);backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
  .logo img{height:28px;width:auto;display:block}
  .nav-links{display:flex;gap:26px;align-items:center}
  .nav-links a{color:var(--sub);font-weight:600;font-size:15px}
  .nav-links a:hover{color:var(--ink)}
  @media(max-width:720px){.nav-links{display:none}}

  /* Hero */
  .hero{position:relative;overflow:hidden;color:#fff;
    background:
      radial-gradient(900px 440px at 78% -8%,rgba(251,122,10,.32),transparent 60%),
      radial-gradient(760px 440px at 8% 115%,rgba(240,37,49,.30),transparent 60%),
      linear-gradient(160deg,#16294a,#0e1a30 60%);
    padding:72px 0 84px}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
  @media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:40px;text-align:center}.hero{padding:56px 0 64px}}
  .badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#eaf0f8;font-size:13px;font-weight:600;padding:7px 15px;border-radius:999px;margin-bottom:22px}
  .badge svg{width:15px;height:15px;color:var(--orange-lt)}
  .hero h1{font-size:clamp(34px,6vw,56px);line-height:1.06;font-weight:900;letter-spacing:-1.4px;margin:0 0 18px}
  .hero h1 .accent{background:linear-gradient(100deg,#ff6b4a,var(--orange-lt));-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero .lead{font-size:clamp(16px,2.2vw,19px);color:#cdd8e8;max-width:540px;margin:0 0 28px}
  @media(max-width:860px){.hero .lead{margin-left:auto;margin-right:auto}}
  .cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
  @media(max-width:860px){.cta{justify-content:center}}
  .fine{font-size:13px;color:#9fb0c7;margin:0}
  .trust{margin-top:26px;display:flex;gap:9px;flex-wrap:wrap}
  @media(max-width:860px){.trust{justify-content:center}}
  .trust span{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:8px 13px;font-size:13.5px;font-weight:600;color:#e7eef7}
  .trust svg{width:14px;height:14px;color:var(--orange-lt)}

  /* Phone mockup */
  .phone-col{display:flex;justify-content:center}
  .phone{width:270px;max-width:78vw;border-radius:38px;padding:11px;background:linear-gradient(160deg,#2b3858,#18233c);box-shadow:0 40px 80px -30px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06) inset;position:relative}
  .phone::before{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);width:84px;height:6px;border-radius:99px;background:rgba(255,255,255,.18);z-index:3}
  .screen{background:#f5f6fa;border-radius:28px;overflow:hidden;aspect-ratio:9/19}
  .s-top{display:flex;align-items:center;justify-content:space-between;padding:26px 16px 10px}
  .s-logo{height:17px;width:auto;display:block}
  .s-search{width:30px;height:30px;border-radius:50%;background:#eceff5;display:flex;align-items:center;justify-content:center;color:#8b95a5}
  .s-search svg{width:15px;height:15px}
  .s-row{display:flex;align-items:center;justify-content:space-between;padding:4px 16px 10px}
  .s-row .t{font-weight:800;font-size:15px;color:var(--navy)}
  .s-play{display:inline-flex;align-items:center;gap:5px;background:rgba(251,140,26,.15);color:var(--orange);font-weight:700;font-size:11px;padding:5px 10px;border-radius:99px}
  .s-play svg{width:11px;height:11px}
  .s-card{background:#fff;margin:0 12px 9px;border:1px solid #edf0f5;border-radius:14px;padding:11px 12px;display:flex;gap:10px;align-items:flex-start}
  .s-card .cat{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:2px 7px;border-radius:99px;display:inline-block;margin-bottom:5px}
  .s-card h4{margin:0;font-size:11.5px;line-height:1.35;color:#1b2234;font-weight:700}
  .s-card .meta{margin-top:5px;font-size:9px;color:#9aa4b2}
  .s-card .pbtn{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;color:#fff;margin-top:2px}
  .s-card .pbtn svg{width:12px;height:12px;margin-left:1px}
  .s-nowbar{position:absolute;left:14px;right:14px;bottom:64px;background:#17203a;border-radius:16px;padding:9px 11px;display:flex;align-items:center;gap:9px;box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
  .s-nowbar .eq{width:30px;height:30px;border-radius:50%;background:rgba(251,140,26,.18);display:flex;align-items:center;justify-content:center;color:var(--orange)}
  .s-nowbar .eq svg{width:15px;height:15px}
  .s-nowbar .info{flex:1;min-width:0}
  .s-nowbar .lab{font-size:8.5px;font-weight:800;letter-spacing:.5px;color:var(--orange-lt)}
  .s-nowbar .ti{font-size:10px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .s-nowbar .pp{width:28px;height:28px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;color:#fff}
  .s-nowbar .pp svg{width:12px;height:12px}
  .s-tabs{position:absolute;left:0;right:0;bottom:11px;height:46px;background:#fff;border-top:1px solid #edf0f5;display:flex;align-items:center;justify-content:space-around;color:#b8c0cc}
  .s-tabs svg{width:17px;height:17px}
  .s-tabs .on{color:var(--red)}

  /* Sections */
  section{padding:72px 0}
  .alt{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .eyebrow{display:block;text-align:center;color:var(--red);font-weight:800;font-size:13px;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
  h2{font-size:clamp(25px,4vw,36px);font-weight:800;text-align:center;margin:0 0 10px}
  .sub{color:var(--sub);text-align:center;max-width:580px;margin:0 auto 46px;font-size:17px}

  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}
  .feat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px 26px;transition:box-shadow .18s,border-color .18s}
  .feat:hover{box-shadow:0 16px 40px -22px rgba(20,26,43,.28);border-color:#dde3ee}
  .feat .ic{width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;background:linear-gradient(135deg,rgba(240,37,49,.12),rgba(251,140,26,.18));color:var(--red)}
  .feat .ic svg{width:25px;height:25px}
  .feat h3{margin:0 0 7px;font-size:19px}
  .feat p{margin:0;color:var(--sub);font-size:15px;line-height:1.6}

  /* Listen spotlight */
  .spot{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  @media(max-width:860px){.spot{grid-template-columns:1fr;gap:30px;text-align:center}}
  .spot h2{text-align:left}
  @media(max-width:860px){.spot h2{text-align:center}}
  .spot .lead{color:var(--sub);font-size:17px;margin:0 0 22px}
  .checks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
  @media(max-width:860px){.checks{display:inline-grid;text-align:left}}
  .checks li{display:flex;gap:11px;align-items:flex-start;font-weight:600;color:var(--ink)}
  .checks .tick{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,rgba(240,37,49,.14),rgba(251,140,26,.2));color:var(--red);display:flex;align-items:center;justify-content:center}
  .checks .tick svg{width:14px;height:14px}
  .checks small{display:block;font-weight:400;color:var(--sub);font-size:14px}
  .spot-art{background:linear-gradient(160deg,#16294a,#0e1a30);border-radius:24px;padding:36px;color:#fff;position:relative;overflow:hidden}
  .spot-art .wave{display:flex;align-items:flex-end;gap:5px;height:66px;margin-bottom:22px}
  .spot-art .wave i{flex:1;background:linear-gradient(180deg,var(--orange-lt),var(--orange));border-radius:4px;opacity:.9}
  .spot-art .npill{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:12px 15px}
  .spot-art .npill .d{width:34px;height:34px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center}
  .spot-art .npill .d svg{width:15px;height:15px;color:#fff}
  .spot-art .npill .lab{font-size:10px;font-weight:800;letter-spacing:.6px;color:var(--orange-lt)}
  .spot-art .npill .ti{font-size:13px;color:#fff;font-weight:600}

  /* Steps */
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px;text-align:center}
  .steps .n{width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 8px 18px -8px rgba(240,37,49,.5)}
  .steps h3{margin:0 0 5px;font-size:18px}
  .steps p{margin:0;color:var(--sub);font-size:15px}

  /* FAQ */
  .faq{max-width:760px;margin:0 auto}
  details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 20px;margin-bottom:12px}
  details[open]{border-color:#dde3ee;box-shadow:0 10px 30px -20px rgba(20,26,43,.3)}
  summary{list-style:none;cursor:pointer;font-weight:700;font-size:16.5px;padding:16px 0;display:flex;justify-content:space-between;align-items:center;gap:16px}
  summary::-webkit-details-marker{display:none}
  summary .chev{flex:0 0 auto;color:var(--red);transition:transform .2s}
  details[open] summary .chev{transform:rotate(180deg)}
  details p{margin:0 0 18px;color:var(--sub);line-height:1.7}

  /* Final CTA */
  .final{background:linear-gradient(135deg,#F02531,#FB7A0A);color:#fff;border-radius:26px;padding:56px 32px;text-align:center}
  .final h2{color:#fff}
  .final p{color:rgba(255,255,255,.92);max-width:540px;margin:0 auto 28px;font-size:17px}
  .final .cta{justify-content:center}

  /* Footer */
  footer{background:var(--navy-dk);color:#b9c6da;padding:50px 0 40px;font-size:14.5px}
  .frow{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}
  footer a{color:#fff}
  footer a:hover{color:var(--orange-lt)}
  .muted{color:#7d8ea8}
  .flogo{font-weight:900;font-size:21px;color:#fff;letter-spacing:-.5px}
  .fnav{display:flex;gap:22px;flex-wrap:wrap}
  .fbar{border-top:1px solid rgba(255,255,255,.1);margin-top:30px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------------------------------------------------------------------------
   Utilities replacing inline style="" attributes.

   style-src-attr is 'none' on this domain: a CSP nonce covers an inline <style>
   ELEMENT but never a style ATTRIBUTE, so only a class can carry these. Last in
   the file with doubled selectors (.u-x.u-x, specificity (0,2,0)), because an
   inline style outranked every author rule. Each name is its own declaration
   plus a short hash of it, so a name cannot drift from the rule it carries.
   For a genuinely per-record value, pass it through a data attribute and set it
   from JS via element.style.prop — see the [data-bar-height] and [data-indent]
   handling in public/admin/assets/admin.js. CSSOM is not governed by CSP.
   --------------------------------------------------------------------------- */
.u-background-rgba-240-37-49-12-c-ddac.u-background-rgba-240-37-49-12-c-ddac { background:rgba(240,37,49,.12); color:#F02531; }
.u-background-rgba-251-140-26-14-d265.u-background-rgba-251-140-26-14-d265 { background:rgba(251,140,26,.14); color:#FB8C1A; }
.u-background-rgba-29-53-87-12-co-9ec0.u-background-rgba-29-53-87-12-co-9ec0 { background:rgba(29,53,87,.12); color:#1D3557; }
.u-height-28-7d1c.u-height-28-7d1c { height:28%; }
.u-height-30-d8e3.u-height-30-d8e3 { height:30%; }
.u-height-34-e207.u-height-34-e207 { height:34%; }
.u-height-38-12cc.u-height-38-12cc { height:38%; }
.u-height-40-bad8.u-height-40-bad8 { height:40%; }
.u-height-44-791b.u-height-44-791b { height:44%; }
.u-height-45-50a5.u-height-45-50a5 { height:45%; }
.u-height-48-c8c8.u-height-48-c8c8 { height:48%; }
.u-height-58-2131.u-height-58-2131 { height:58%; }
.u-height-62-7202.u-height-62-7202 { height:62%; }
.u-height-66-e731.u-height-66-e731 { height:66%; }
.u-height-72-ab92.u-height-72-ab92 { height:72%; }
.u-height-74-3d26.u-height-74-3d26 { height:74%; }
.u-height-80-4c05.u-height-80-4c05 { height:80%; }
.u-height-85-c178.u-height-85-c178 { height:85%; }
.u-margin-10px-0-0-8246.u-margin-10px-0-0-8246 { margin:10px 0 0; }
.u-max-width-360px-4a72.u-max-width-360px-4a72 { max-width:360px; }
.u-text-align-left-6be0.u-text-align-left-6be0 { text-align:left; }