/* Homepage-only styles (intro splash, dome, echo waves, hero, sections).
   Shared design tokens, resets, base utilities, buttons, nav and footer all live in
   style.css (loaded first on every page). Only homepage-UNIQUE rules stay in this file,
   plus the few intentional homepage-scale overrides just below. Do NOT re-add shared
   rules here: editing a shared component in style.css must be enough to update the
   homepage too (this is what caused the past homepage-only nav/footer/embed bugs). */

  /* Intentional homepage-scale overrides (a touch larger/airier than style.css defaults). */
  section{padding:88px 0}
  h2{font-size:clamp(30px,4.4vw,48px);font-weight:500}
  .lead{font-size:17px;color:var(--muted);max-width:660px;margin-top:18px}

  /* INTRO SPLASH */
  body.pre{overflow:hidden}
  #intro{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);overflow:hidden}
  #intro.done{opacity:0;transform:translateY(-4%);pointer-events:none}
  #intro::before{content:"";position:absolute;width:min(120vw,1400px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#f8fafa 0%,var(--bg) 62%);box-shadow:0 60px 140px rgba(25,35,35,.07)}
  #intro::after{content:"";position:absolute;width:min(58vw,620px);aspect-ratio:1;border-radius:50%;background:#f7f9f9;box-shadow:0 40px 90px rgba(25,35,35,.09),inset 0 1px 0 #fff}
  #intro>*{position:relative;z-index:2}
  .in-load{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(20,30,30,.07);z-index:3}
  .in-load i{display:block;height:100%;width:0;background:var(--lime-deep);animation:loadbar 1.55s cubic-bezier(.45,.05,.35,1) .1s forwards}
  @keyframes loadbar{0%{width:0}60%{width:72%}100%{width:100%}}
  .in-logo{font-family:var(--display);font-weight:800;font-size:clamp(34px,5vw,56px);color:var(--ink);letter-spacing:-.035em;position:relative;opacity:0;transform:scale(.94);animation:inlogo .9s cubic-bezier(.2,.7,.2,1) .15s forwards}
  .in-logo span{color:var(--green)}
  .in-logo img{display:block;width:clamp(240px,34vw,400px);height:auto}
  @keyframes inlogo{to{opacity:1;transform:scale(1)}}
  .in-rings{position:absolute;left:50%;top:50%;width:10px;height:10px;pointer-events:none}
  .ring{position:absolute;inset:0;border:1.5px solid rgba(0,187,82,.5);border-radius:50%;opacity:0;animation:ping 1.4s cubic-bezier(.2,.7,.3,1) .55s}
  .ring.r2{animation-delay:.85s}
  @keyframes ping{0%{transform:translate(-50%,-50%) scale(1);opacity:.9}100%{transform:translate(-50%,-50%) scale(30);opacity:0}}
  .ring{transform:translate(-50%,-50%)}
  .in-cap{font-size:10.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);opacity:0;animation:incap .7s ease .55s forwards}
  @keyframes incap{to{opacity:1}}
  /* hero reveal (after intro) */
  .hr{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
  .hr.in{opacity:1;transform:none}

  /* NAV lives entirely in style.css (loaded on every page). The homepage used to keep a
     stale copy here that overrode the shared nav (centering, hover-intent), so it was
     removed - change nav/mega styling in style.css only. */

  /* HERO */
  .hero{padding:74px 0 60px;text-align:center;position:relative;overflow:hidden}
  /* the dome: a real curved horizon whose top edge sits just above the badge */
  .dome{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:210vw;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:0;
    background:radial-gradient(circle at 50% 0%,#fbfdfd 0%,#f7f9f9 28%,var(--bg) 58%);
    box-shadow:0 -16px 40px rgba(25,35,35,.045),inset 0 1px 0 rgba(255,255,255,.55)}
  /* echo waves: rings concentric with the dome, expanding until they dissolve into the curve */
  .ambient{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
  .dring{position:absolute;left:50%;top:8px;width:210vw;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(0,187,82,.5);transform:translateX(-50%) scale(.45);opacity:0;animation:dring 6.9s cubic-bezier(.25,.5,.45,1) infinite}
  .dring.r2{animation-delay:2.3s;border-color:rgba(185,225,65,.8);border-width:2.5px;box-shadow:0 0 26px rgba(200,239,74,.28)}
  .dring.r3{animation-delay:4.6s;border-color:rgba(25,35,35,.2)}
  @keyframes dring{0%{transform:translateX(-50%) scale(.45);opacity:0}9%{opacity:.7}60%{opacity:.38}100%{transform:translateX(-50%) scale(1.012);opacity:0}}
  .adot{position:absolute;width:5px;height:5px;border-radius:50%;background:#c4cdca;opacity:.35;animation:afloat ease-in-out infinite alternate}
  .adot.g{background:rgba(0,187,82,.4)}
  .adot.l{background:rgba(170,205,70,.5)}
  @keyframes afloat{from{transform:translate(0,0)}to{transform:translate(8px,-16px)}}
  /* echo click ripple on the hero */
  .ripple{position:absolute;pointer-events:none;z-index:3}
  .ripple i{position:absolute;left:0;top:0;width:12px;height:12px;border:1.5px solid rgba(0,187,82,.5);border-radius:50%;transform:translate(-50%,-50%);opacity:.9;animation:ripl 1.1s cubic-bezier(.2,.7,.3,1) forwards}
  .ripple i:nth-child(2){animation-delay:.16s;border-color:rgba(200,239,74,.75)}
  @keyframes ripl{to{width:240px;height:240px;opacity:0}}
  .hero>.wrap{position:relative;z-index:1}
  .hero h1{font-size:clamp(42px,6.6vw,86px);font-weight:400;margin-top:34px}
  .hero .lead{font-size:clamp(16px,1.8vw,20px);margin:26px auto 0;max-width:640px;color:var(--body)}

  .leadform{max-width:760px;margin:40px auto 0;background:rgba(255,255,255,.55);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(255,255,255,.85);outline:1px solid rgba(20,30,20,.05);border-radius:20px;padding:10px;display:grid;grid-template-columns:1fr 1fr auto;gap:0;box-shadow:var(--sh-card);align-items:center}
  .leadform input{border:none;background:transparent;padding:16px 22px;font-family:'Inter',sans-serif;font-size:15.5px;color:var(--ink);outline:none;border-right:1px solid var(--line)}
  .leadform input::placeholder{color:var(--faint)}
  .leadform input:focus{background:#fff;border-radius:12px}
  .leadform .btn{margin-left:10px;white-space:nowrap}

  .heroctas{display:flex;gap:14px;justify-content:center;margin-top:38px;flex-wrap:wrap}
  .herorow{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:64px;flex-wrap:wrap}
  .chips{display:flex;gap:10px;flex-wrap:wrap}
  .chip{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:11px 18px;font-size:13.5px;font-weight:600;color:var(--ink);box-shadow:var(--sh-soft)}
  .watch{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:5px}
  .watch .play{width:42px;height:42px;border-radius:12px;background:var(--lime);display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--sh-lime);font-size:13px}
  .trust{display:flex;align-items:center;gap:14px}
  .avs{display:flex}
  .av{width:40px;height:40px;border-radius:50%;border:2.5px solid var(--bg);margin-left:-10px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:11px;color:#fff}
  .av:first-child{margin-left:0}
  .av.a1{background:#16181c}.av.a2{background:#2c6b4f}.av.a3{background:#4c4f52}.av.a4{background:#7a9a2e}
  .trust p{font-size:13.5px;color:var(--body);font-weight:500;max-width:200px;line-height:1.4;text-align:left}
  .trust .go{width:42px;height:42px;border-radius:50%;background:var(--card2);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none;box-shadow:var(--sh-soft)}

  /* TOOLS CARD */
  .toolscard{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:44px;box-shadow:var(--sh-card);display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center}
  .toolscard h2{font-size:clamp(24px,3vw,34px)}
  .toolscard .lead{font-size:15px}
  .tgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
  .ttile{aspect-ratio:1.35;background:var(--card2);border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:var(--sh-soft);transition:transform .25s}
  .ttile:hover{transform:translateY(-4px)}
  .ttile b{font-family:var(--display);font-size:13px;color:var(--ink);font-weight:700}
  .ttile span{font-size:9.5px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase;font-weight:600}

  /* SERVICES */
  .servhead{max-width:760px}
  .servgroup{margin-top:44px}
  .gl{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .gl::after{content:"";flex:1;height:1px;background:var(--line2)}
  .cards{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;margin-top:22px}
  .cards.rev{grid-template-columns:.75fr 1.25fr}
  .scard{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:36px;box-shadow:var(--sh-card);display:flex;flex-direction:column;transition:transform .3s}
  .scard:hover{transform:translateY(-5px)}
  .scard h3{font-size:clamp(21px,2.4vw,28px);font-weight:750}
  .scard .desc{font-size:14.5px;color:var(--muted);margin-top:10px;max-width:480px}
  .scard .pr{margin-top:12px;font-size:12.5px;font-weight:700;color:var(--ink);background:var(--lime);display:inline-block;padding:5px 12px;border-radius:99px;width:fit-content}
  .scard .foot{margin-top:auto;padding-top:24px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
  .scard .lm{font-size:14px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
  /* mini UI mocks */
  .mock{margin-top:26px;background:var(--card2);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--sh-soft)}
  .mock .mrow{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:11px;margin-bottom:8px;background:#fff}
  .mock .mrow:last-child{margin-bottom:0}
  .mock .mt{font-size:12.5px;font-weight:600;color:var(--ink)}
  .mock .ms{font-size:10px;font-weight:700;letter-spacing:.08em;padding:4px 10px;border-radius:99px}
  .ms.ok{color:#066e35;background:rgba(0,187,82,.14)}
  .ms.dr{color:var(--muted);background:var(--bg2)}
  .mock .cap{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:12px}
  .flowmini{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:11.5px;font-weight:700;color:var(--ink)}
  .flowmini i{font-style:normal;background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 12px;box-shadow:var(--sh-soft)}
  .flowmini em{font-style:normal;color:var(--green);font-weight:800}
  .checkmini{list-style:none}
  .checkmini li{font-size:13px;color:var(--ink);font-weight:500;padding:9px 0 9px 28px;position:relative;border-bottom:1px solid var(--line)}
  .checkmini li:last-child{border-bottom:none}
  .checkmini li::before{content:"✓";position:absolute;left:2px;color:var(--green);font-weight:800}
  /* BLACK SECTIONS - the .dark base (background/colour/radius/margin) and its h2/.lead/
     .label children all live in style.css. Only this padding override is homepage-specific
     (96px vs the shared 88px, matching the homepage's slightly airier scale). */
  .dark{padding:96px 0}
  .console{max-width:820px;margin:44px auto 0;background:#111114;border:1px solid rgba(255,255,255,.09);border-radius:20px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.5)}
  .cbar{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.07);background:#16161a}
  .cbar i{width:9px;height:9px;border-radius:50%;background:#2c2c32}
  .cbar .t{font-size:10px;letter-spacing:.16em;color:var(--wmuted);margin-left:8px;font-weight:700}
  .cbar .live{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.12em;color:var(--green);display:flex;align-items:center;gap:6px}
  .ldot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 1.8s infinite}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
  .clog{padding:20px 22px;font-family:ui-monospace,monospace;font-size:12.5px;min-height:150px}
  .clog div{padding:3px 0;color:#b9b9c2;white-space:nowrap;overflow:hidden}
  .clog .t{color:#5a5a64;margin-right:12px}
  .clog .ok{color:#3ecb7a;margin-left:8px}
  .clog .hr{color:var(--lime)}
  .cursor{display:inline-block;width:7px;height:12px;background:var(--lime);vertical-align:-2px;animation:blink 1s steps(1) infinite}
  .dstats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:820px;margin:34px auto 0}
  .dstat{border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:22px;text-align:center;background:#101014}
  .dstat b{display:block;font-family:var(--display);font-size:38px;color:var(--lime);font-weight:800;letter-spacing:-.03em}
  .dstat > span{font-size:11.5px;color:var(--wmuted)}

  /* COMPARISON */
  .cmpcard{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:14px;box-shadow:var(--sh-card);overflow-x:auto;margin-top:44px}
  table.cmp{width:100%;border-collapse:separate;border-spacing:0;min-width:760px}
  .cmp th,.cmp td{padding:16px 18px;font-size:13.5px;text-align:center;border-bottom:1px solid var(--line)}
  .cmp tr:last-child td{border-bottom:none}
  .cmp th{font-family:var(--display);font-size:13.5px;font-weight:700;color:var(--ink)}
  .cmp td:first-child,.cmp th:first-child{text-align:left;color:var(--body);font-weight:600}
  .cmp .os{background:rgba(217,252,103,.32);font-weight:600;color:var(--ink)}
  .cmp th.os{border-radius:14px 14px 0 0}
  .cmp tr:last-child .os{border-radius:0 0 14px 14px}
  .cmp .no{color:#c2c6c0}
  .cmp .yes{color:var(--green);font-weight:800}

  /* PRICING */
  .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
  .tier{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:34px 28px;box-shadow:var(--sh-card);position:relative;transition:transform .3s;text-align:left}
  .tier:hover{transform:translateY(-5px)}
  .tier.hot{background:var(--ink);color:var(--wtext)}
  .tier .tag{position:absolute;top:22px;right:22px;font-size:9.5px;font-weight:800;letter-spacing:.12em;background:var(--lime);color:var(--ink);padding:5px 12px;border-radius:99px}
  .tier .name{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  .tier.hot .name{color:var(--wmuted)}
  .tier .amt{font-family:var(--display);font-size:46px;font-weight:800;color:var(--ink);margin-top:14px;letter-spacing:-.04em}
  .tier.hot .amt{color:#fff}
  .tier .amt small{font-size:14px;font-weight:500;color:var(--muted)}
  .tier .qty{font-size:14.5px;font-weight:600;color:var(--ink);margin-top:6px}
  .tier.hot .qty{color:var(--lime)}
  .tier .for{font-size:13px;color:var(--muted);margin-top:10px;min-height:40px}
  .tier.hot .for{color:var(--wmuted)}
  .tier .btn{margin-top:20px;width:100%;justify-content:center}
  .assetdef{text-align:center;margin-top:26px;font-size:13.5px;color:var(--muted)}
  .assetdef b{color:var(--ink)}

  /* PROOF / QUOTES */
  .qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
  .qcard{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--sh-card)}
  .qcard p{font-family:var(--display);font-size:18px;font-weight:600;color:var(--ink);line-height:1.4;letter-spacing:-.01em}
  .qcard p span{background:var(--lime);padding:0 5px;border-radius:4px}
  .qcard .who{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
  .qcard .who .av{margin:0;border-color:var(--card)}
  .qcard .who div b{display:block;font-size:13px;color:var(--ink)}
  .qcard .who div span{font-size:11.5px;color:var(--faint)}
  .brandline{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:36px}
  .bpill{background:var(--card2);border:1px solid var(--line);border-radius:99px;padding:10px 22px;font-family:var(--display);font-weight:700;font-size:14px;color:var(--ink);box-shadow:var(--sh-soft)}

  /* FAQ */
  .faqgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:start}
  details{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:0 24px;margin-bottom:12px;box-shadow:var(--sh-soft)}
  details[open]{border-color:var(--ink)}
  summary{cursor:pointer;list-style:none;padding:19px 0;font-family:var(--display);font-size:16px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:14px}
  summary::after{content:"+";color:var(--ink);font-size:21px;font-weight:400;transition:transform .3s}
  details[open] summary::after{transform:rotate(45deg)}
  details p{padding:0 0 19px;font-size:14px;color:var(--muted)}

  /* NEWSLETTER (.news / .newsform) moved to style.css - it is used by both the homepage
     and the guides index (home.php), and home.php does not load home.css. Edit it there. */

  /* FOOTER BLACK (.bfoot + the Cal embed) lives entirely in style.css now. A stale
     copy here used to override it on the homepage - a narrow 520px dashed placeholder
     for .cal - so it was removed. Change .bfoot / .cal styling in style.css only. */
  /* Footer (.fcard / .ftop / .fcol / .ftag / .fsub / .fnews / .fpriv / .fwho / .fmail /
     .sysok) is rendered by footer.php on every page and lives entirely in style.css now.
     The duplicate copies here - plus dead .fcols / .fcol .tag / .fcol p - were removed;
     edit the shared footer in style.css only. .flegal was also removed - its copy here
     overrode the shared mobile centring, so the homepage footer differed from every other
     page. The whole footer now comes from style.css on every page, homepage included. */
  /* Footer bottom row (.fbot / .fbig / .aisum / .fsoc social icons) lives entirely in
     style.css now - a stale flex copy here used to override the shared 3-column layout
     on the homepage, so it was removed. Change footer-bottom styling in style.css only. */

  @media(max-width:960px){
    section{padding:60px 0}
    /* Nav + footer responsive rules (.nav-links / .ftop / .fnews / .dark / .bfoot) come
       from style.css. Copies here used to win the cascade and keep the homepage footer
       2-column on phones while every other page stacked - so they were removed. */
    .leadform{grid-template-columns:1fr;gap:8px}
    .leadform input{border-right:none;border-bottom:1px solid var(--line)}
    .leadform .btn{margin:6px}
    .herorow{justify-content:center}
    .toolscard,.faqgrid{grid-template-columns:1fr}
    .tgrid{grid-template-columns:repeat(3,1fr)}
    .cards,.cards.rev{grid-template-columns:1fr}
    .tiers,.qgrid,.dstats{grid-template-columns:1fr}
  }
  /* Homepage hero: shrink the "FOR BUSINESSES THAT RUN ON REPETITION" badge on phones. */
  @media(max-width:600px){
    .hero .pillbadge{font-size:10px;letter-spacing:.1em;padding:7px 14px;gap:7px}
    .hero .pillbadge i{width:16px;height:16px;font-size:8px}
  }
  @media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.ldot,.cursor{animation:none !important}.dring,.adot{animation:none !important;opacity:0}}