/* =====================================================================
   TRADE BRAINS PORTAL: SMALLCASE LANDING PAGE  |  style.css
   =====================================================================
   HOW TO USE THIS FILE
   - To change COLOURS or FONTS: edit the variables in section 1 (:root).
     Every colour on the page comes from there.
   - To change MOBILE behaviour: go to section 20 (the @media blocks at the
     very bottom). Search "MOBILE HERO ORDER" for the form-on-top rule.
   - Text and images are NOT here: see index.html and script.js.

   TABLE OF CONTENTS (search for the section number, e.g. "/* 7.")
     1.  Design tokens (colours, fonts, radius)
     2.  Reset and base
     3.  Buttons
     4.  Nav bar
     5.  Hero
     6.  Lead form (all forms) + success message + inline variant
     7.  Smallcase-name ticker
     8.  Generic section layout
     9.  Video
     10. Analyst
     11. Smallcase cards
     12. Mid-page banner
     13. How-it-works steps
     14. Reviews (kept for when the section is re-enabled)
     15. FAQ
     16. Final CTA
     17. Footer
     18. Pop-up (modal) form
     19. Sticky mobile bar + scroll animation
     20. Responsive rules (tablet <= 980px, phone <= 760px)
   ===================================================================== */

/* ===== 1. DESIGN TOKENS =============================================
   Change a value here and it updates everywhere on the page. */
:root{
  --navy:#081226;      /* dark background: hero, final CTA */
  --navy-2:#0d1c3a;    /* slightly lighter navy: banner */
  --blue:#1f7ae0;      /* brand blue (matches the portal's #1f7ae0 theme) */
  --blue-2:#3b95ff;
  --teal:#19d3a2;      /* accent green: ticks, play button, main CTA */
  --ink:#0f1b33;       /* main text colour */
  --muted:#5b6b86;     /* secondary / grey text */
  --bg:#ffffff;        /* page background */
  --bg-alt:#f4f8fe;    /* light-blue background for alternate sections */
  --line:#e3e9f4;      /* borders */
  --radius:18px;       /* roundness of cards */
  --shadow:0 10px 30px rgba(12,32,70,.08);
  --shadow-lg:0 24px 60px rgba(8,18,38,.22);
  --font-h:'Plus Jakarta Sans',system-ui,sans-serif;  /* headings */
  --font-b:'Inter',system-ui,sans-serif;              /* body text */
}

/* ===== 2. RESET AND BASE ============================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}   /* 76px = leaves room for the sticky nav when jumping to a section */
body{font-family:var(--font-b);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-h);line-height:1.15;letter-spacing:-.02em}
.container{width:min(1160px,100% - 40px);margin-inline:auto}   /* centred content column, max 1160px */
.center{text-align:center;margin-top:36px}

/* ===== 3. BUTTONS ===================================================
   .btn-primary = the green call-to-action button used everywhere. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px var(--font-b);padding:13px 24px;border-radius:12px;border:0;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s;text-decoration:none!important}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,#19d3a2,#35e6bb);color:#032a20;box-shadow:0 8px 22px rgba(25,211,162,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(25,211,162,.45)}
.btn-ghost{background:transparent;color:var(--blue);border:1.5px solid var(--blue)}
.btn-ghost:hover{background:var(--blue);color:#fff}
.btn-call{background:var(--navy);color:#fff}      /* the "Call" button in the mobile sticky bar */
.btn-sm{padding:9px 16px;font-size:14px}
.btn-block{width:100%}
.btn[disabled]{opacity:.7;cursor:progress}

/* ===== 4. NAV BAR ================================================== */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.brand img{height:34px;width:auto}
.nav-links{display:flex;gap:28px}
.nav-links a{color:var(--ink);font-weight:500;font-size:15px}
.nav-links a:hover{color:var(--blue);text-decoration:none}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;align-items:center}  /* hamburger: phones only */
.nav-toggle span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}

/* ===== 5. HERO ====================================================== */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;padding:72px 0 0}
.hero-bg{position:absolute;inset:0;pointer-events:none}
/* soft glowing blobs + faint grid behind the hero */
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}
.o1{width:520px;height:520px;background:#1f7ae0;top:-160px;left:-120px}
.o2{width:460px;height:460px;background:#19d3a2;opacity:.28;bottom:-180px;right:-100px}
.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
/* desktop: text (1.1 part) | form (0.9 part) */
.hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding-bottom:64px}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:7px 14px;border-radius:999px;font-size:13px;font-weight:500;color:#cfe0ff}
.dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(25,211,162,.25)}   /* (.pill and .dot are no longer used in the hero; kept for reuse) */

/* ANALYST CREDIBILITY CARD at the top of the hero (photo + name + role + SEBI no.)
   --av = size of the round photo. 72px on desktop; 52px on phones (set in section 20).
   The photo is a portrait, so it is zoomed (width 215%) and shifted (left / top) to put the face
   in the centre of the circle. If you swap the photo, adjust width / left / top below until the face is centred. */
.hero-analyst{--av:72px;display:inline-flex;align-items:center;gap:14px;padding:8px 22px 8px 8px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);max-width:100%}
.hero-analyst .avatar{position:relative;flex:none;width:var(--av);height:var(--av);border-radius:50%;overflow:hidden;border:2.5px solid var(--teal);background:#dbe9ff;box-shadow:0 0 0 4px rgba(25,211,162,.18)}
.hero-analyst .avatar img{position:absolute;max-width:none;width:215%;height:auto;left:-70%;top:-10%}
.avatar-initials{position:absolute;inset:0;display:grid;place-items:center;font:800 calc(var(--av) * .36) var(--font-h);color:var(--blue)}   /* shown only if the photo cannot load */
.hero-analyst .who-text{display:grid;gap:2px;line-height:1.3;min-width:0}
.hero-analyst .who-text strong{font:700 18px var(--font-h);color:#fff;letter-spacing:-.01em}
.hero-analyst .who-text span{font-size:13px;color:#b9c8e6}
.hero h1{font-size:clamp(34px,5.2vw,62px);font-weight:800;margin:22px 0 18px}
.grad{background:linear-gradient(90deg,#6db3ff,#19d3a2);-webkit-background-clip:text;background-clip:text;color:transparent}   /* gradient text */
.lead{font-size:18px;color:#b9c8e6;max-width:560px}
/* tick-mark lists (used in the hero and beside the video) */
.checks{list-style:none;margin:24px 0 30px;display:grid;gap:10px}
.checks li{position:relative;padding-left:30px;color:#dbe6fb;font-size:15.5px}
.checks li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:rgba(25,211,162,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%2319d3a2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.checks.dark li{color:var(--ink)}   /* same list on a light background */
.hero-trust{display:flex;gap:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.hero-trust strong{display:block;font:800 28px var(--font-h);color:#fff}
.hero-trust span{font-size:13px;color:#9fb2d6}

/* ===== 6. LEAD FORM (shared by ALL forms) ============================ */
/* White card that holds a form (hero and final CTA) */
.form-card{background:#fff;color:var(--ink);border-radius:22px;padding:30px;box-shadow:var(--shadow-lg)}
.form-card-head h2{font-size:23px;margin-bottom:6px}
.form-card-head p{font-size:14.5px;color:var(--muted);margin-bottom:20px}
/* The form itself */
.lead-form{display:grid;gap:14px}
.field{display:grid;gap:6px}
.lbl{font-size:13px;font-weight:600;color:#2a3956}
.req{color:#e5484d}                                   /* red asterisk for compulsory fields */
.opt{font-style:normal;font-weight:400;color:var(--muted)}   /* "(optional)" */
.field input{width:100%;font:500 15px var(--font-b);color:var(--ink);padding:13px 14px;border:1.5px solid var(--line);border-radius:11px;background:#fff;transition:border .15s,box-shadow .15s}
.field input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(31,122,224,.15)}
.field input.invalid{border-color:#e5484d;box-shadow:0 0 0 4px rgba(229,72,77,.1)}   /* set by script.js when validation fails */
/* "+91" box attached to the phone input */
.phone{display:flex;align-items:stretch}
.phone .cc{display:flex;align-items:center;padding:0 13px;border:1.5px solid var(--line);border-right:0;border-radius:11px 0 0 11px;background:#f4f7fc;font-weight:600;font-size:15px;color:#2a3956}
.phone input{border-radius:0 11px 11px 0}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}   /* invisible bot-trap field */
.form-error{color:#c8323a;font-size:13.5px;font-weight:500;background:#fdeced;padding:9px 12px;border-radius:9px}
.fine{font-size:12px;color:var(--muted);line-height:1.5}
.fine.dark{margin-top:16px}
/* BIGGER CTA: every submit button inside a white form card is taller and bolder */
.form-card .submit{padding:16px 24px;font-size:16.5px;font-weight:700}
/* Gentle pulsing glow on the hero button to draw the eye (disabled for users who prefer reduced motion, see section 20) */
#hero-form-card .submit{animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 8px 22px rgba(25,211,162,.35)}50%{box-shadow:0 8px 34px rgba(25,211,162,.75)}}
/* loading spinner shown inside the button while a lead is being sent */
.spinner{display:none;width:18px;height:18px;border:2.5px solid rgba(3,42,32,.25);border-top-color:#032a20;border-radius:50%;animation:spin .7s linear infinite}
.is-loading .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
/* "Thank you" message that replaces the form after submitting */
.form-success{text-align:center;padding:12px 4px}
.form-success .tick{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:rgba(25,211,162,.15);display:grid;place-items:center}
.form-success h3{font-size:22px;margin-bottom:8px}
.form-success p{color:var(--muted);font-size:15px;margin-bottom:18px}
/* INLINE variant (data-variant="inline"): name | phone | email | button in one row */
.lead-form--inline{grid-template-columns:1fr 1fr 1fr auto;align-items:end;gap:12px}
.lead-form--inline .fine,.lead-form--inline .form-error{grid-column:1/-1}
.lead-form--inline .btn-block{width:auto;white-space:nowrap}
.lead-form--inline .lbl{font-size:12px}
/* Dark theme (data-theme="dark"): light labels for the banner */
.theme-dark .lbl{color:#cfe0ff}
.theme-dark .fine{color:#9fb2d6}
.theme-dark .opt{color:#9fb2d6}

/* ===== 7. TICKER (scrolling smallcase names under the hero) ========= */
.ticker{position:relative;border-top:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);overflow:hidden;padding:16px 0}
.ticker-track{display:flex;gap:14px;width:max-content;animation:scroll 40s linear infinite}   /* change 40s to speed up / slow down */
.ticker:hover .ticker-track{animation-play-state:paused}
.tk{white-space:nowrap;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:14px;color:#dbe6fb;font-weight:500}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ===== 8. GENERIC SECTION LAYOUT ==================================== */
.section{padding:92px 0}                 /* vertical spacing between sections */
.section.alt{background:var(--bg-alt)}   /* light-blue background variant */
.section-head{max-width:680px;margin:0 auto 48px;text-align:center}
.section-head.left{text-align:left;margin:0}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}   /* small blue label above headings */
.section-head h2,.analyst-copy h2{font-size:clamp(28px,3.6vw,42px);font-weight:800;margin-bottom:14px}
.section-head p{color:var(--muted);font-size:17px}
.section-head.left .btn{margin-top:22px}

/* ===== 9. VIDEO ====================================================== */
.video-wrap{display:grid;grid-template-columns:1.6fr 1fr;gap:36px;align-items:center}   /* video | text */
.video-frame{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:var(--navy);box-shadow:var(--shadow-lg)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-poster{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;background:linear-gradient(135deg,#0d1c3a,#1f7ae0);color:#fff;display:grid;place-items:center}
.video-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.video-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,18,38,.7),rgba(8,18,38,.1))}   /* dark fade for the caption */
.play{position:relative;z-index:2;width:84px;height:84px;border-radius:50%;background:var(--teal);color:#032a20;display:grid;place-items:center;box-shadow:0 0 0 12px rgba(25,211,162,.25);transition:transform .2s}
.video-poster:hover .play{transform:scale(1.08)}
.video-cap{position:absolute;z-index:2;left:20px;bottom:16px;font-weight:600;font-size:15px}
.video-side h3{font-size:22px;margin-bottom:6px}
.video-side .checks{margin:16px 0 22px}

/* ===== 10. ANALYST =================================================== */
.analyst-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}   /* photo | bio */
.analyst-photo{position:relative}
.photo-frame{aspect-ratio:1/1;border-radius:28px;overflow:hidden;background:linear-gradient(135deg,#dbe9ff,#e4fbf4);box-shadow:var(--shadow-lg)}
.photo-frame img{width:100%;height:100%;object-fit:cover}
.avatar-fallback{width:100%;height:100%;display:grid;place-items:center;font:800 90px var(--font-h);color:var(--blue)}   /* shown if the photo fails to load */
.photo-badge{position:absolute;right:-14px;bottom:26px;background:#fff;border-radius:14px;padding:12px 18px;box-shadow:var(--shadow);display:grid}
.photo-badge strong{font-size:14px}
.photo-badge span{font-size:12px;color:var(--muted)}
.role{color:var(--blue);font-weight:600;margin-bottom:16px}
.analyst-copy p{color:#3b4a66;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 26px}
.chip{padding:7px 14px;background:#fff;border:1px solid var(--line);border-radius:999px;font-size:13.5px;font-weight:500}
.inline-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.inline-card h3{font-size:17px;margin-bottom:14px}

/* ===== 11. SMALLCASE CARDS =========================================== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}   /* 3 per row; 2 on tablet, 1 on phone (section 20) */
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#c9dcf7}
.card .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:26px;background:linear-gradient(135deg,#e8f1ff,#e3fbf3);margin-bottom:16px}
.card h3{font-size:19px;margin-bottom:8px}
.card p{color:var(--muted);font-size:14.5px;flex:1}
.tags{display:flex;gap:6px;margin:14px 0 18px;flex-wrap:wrap}
.tag{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:#eef4ff;color:var(--blue)}
.card-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-actions a{font-size:14px;font-weight:600}

/* ===== 12. MID-PAGE BANNER =========================================== */
.banner{background:linear-gradient(120deg,var(--navy-2),#12356e);color:#fff;padding:54px 0}
.banner-inner{display:grid;grid-template-columns:.9fr 1.4fr;gap:40px;align-items:center}
.banner h2{font-size:clamp(24px,3vw,32px);margin-bottom:8px}
.banner p{color:#b9c8e6}
.banner-form input{background:#fff}

/* ===== 13. HOW-IT-WORKS STEPS ======================================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{position:relative;padding:32px 28px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.step .num{font:800 46px var(--font-h);background:linear-gradient(135deg,var(--blue),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{font-size:21px;margin:6px 0}
.step p{color:var(--muted);font-size:15px}

/* ===== 14. REVIEWS (unused while the section is hidden in index.html) ==
   Kept here so nothing needs to be rewritten when you bring reviews back. */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.review{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:16px}
.stars{color:#f5a623;letter-spacing:2px;font-size:17px}
.review q{quotes:none;font-size:15.5px;color:#2a3956;flex:1}
.who{display:flex;align-items:center;gap:12px}
.av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;display:grid;place-items:center;font-weight:700}
.who strong{display:block;font-size:14.5px}
.who span{font-size:13px;color:var(--muted)}
.sample{position:absolute;top:14px;right:14px;font-size:11px;font-weight:700;background:#fff4d6;color:#8a5a00;padding:3px 9px;border-radius:999px}

/* ===== 15. FAQ ======================================================= */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}   /* heading | questions */
.faq-wrap .section-head{position:sticky;top:96px}   /* heading stays in view while scrolling the questions (desktop) */
.faq-list{display:grid;gap:12px}
details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 22px;transition:border-color .2s,box-shadow .2s}
details[open]{border-color:#c9dcf7;box-shadow:var(--shadow)}
summary{list-style:none;cursor:pointer;padding:19px 30px 19px 0;font:600 16.5px var(--font-h);position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:26px;color:var(--blue);transition:transform .2s}   /* "+" turns into "x" when open */
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details div{padding:0 0 20px;color:#3b4a66;font-size:15px}

/* ===== 16. FINAL CTA ================================================= */
.final{position:relative;background:var(--navy);color:#fff;padding:90px 0;overflow:hidden}
.final-inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.final h2{font-size:clamp(30px,4vw,46px);font-weight:800;margin-bottom:14px}
.final p{color:#b9c8e6;font-size:18px}

/* ===== 17. FOOTER ==================================================== */
.footer{background:#050c1a;color:#9fb2d6;padding:60px 0 28px}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:32px}
.footer h4{color:#fff;font-size:14px;margin:0 0 8px}
.footer .small{font-size:13.5px;margin-bottom:14px}
.footer a{color:#9fb2d6}
.footer a:hover{color:#fff}
.footer-logo{margin-bottom:16px;background:#fff;padding:6px 10px;border-radius:8px;height:44px;width:auto}   /* white chip so the logo is visible on the dark footer */
.disclaimer{font-size:12px;line-height:1.7;border-top:1px solid rgba(255,255,255,.1);padding-top:22px}
.copy{font-size:12.5px;margin-top:14px}

/* ===== 18. POP-UP (MODAL) FORM ======================================= */
.modal{border:0;border-radius:22px;padding:34px;width:min(460px,calc(100% - 32px));margin:auto;box-shadow:var(--shadow-lg);position:fixed}
.modal::backdrop{background:rgba(5,12,26,.65);backdrop-filter:blur(4px)}   /* dimmed page behind the pop-up */
.modal h2{font-size:24px;margin-bottom:6px;padding-right:30px}
.modal-sub{color:var(--muted);font-size:14.5px;margin-bottom:20px}
.modal-close{position:absolute;right:16px;top:12px;font-size:30px;line-height:1;border:0;background:none;cursor:pointer;color:var(--muted)}
.modal-close:hover{color:var(--ink)}

/* ===== 19. STICKY MOBILE BAR + SCROLL ANIMATION ====================== */
/* Hidden on desktop. Shown on phones (section 20). Slides up once .show is added by script.js */
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .3s;display:none;gap:10px}
.sticky-bar.show{transform:none}
.sticky-bar .btn{padding:15px 18px;font-size:16px;font-weight:700}
.sticky-bar .btn-primary{flex:1}   /* the green button takes all remaining width; "Call" stays compact */
/* Fade-and-rise animation for elements with class "reveal" (only active when JS is running) */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.js .reveal.in{opacity:1;transform:none}

/* ===== 20. RESPONSIVE RULES =========================================== */

/* ---- Tablet and below (<= 980px): everything stacks into one column ---- */
@media (max-width:980px){
  .hero-grid,.video-wrap,.analyst-grid,.faq-wrap,.final-inner,.banner-inner{grid-template-columns:1fr}
  .hero{padding-top:48px}
  .cards,.reviews,.steps{grid-template-columns:repeat(2,1fr)}
  .analyst-photo{max-width:380px;margin:0 auto}
  .faq-wrap .section-head{position:static}
  .footer-top{grid-template-columns:1fr 1fr}
  .lead-form--inline{grid-template-columns:1fr 1fr}
  .lead-form--inline .btn-block{width:100%;grid-column:1/-1}

  /* ===== MOBILE HERO ORDER: FORM ON TOP =================================
     On phones/tablets the hero reads: badge -> headline -> FORM -> description -> bullets -> numbers.
     How it works: "display:contents" removes the .hero-copy wrapper so its children
     can be re-ordered around the form card with the "order" property.
     To move the form further down, raise its order number (currently 3). */
  .hero-grid{gap:18px;padding-bottom:36px}
  .hero-copy{display:contents}
  .hero-copy .hero-analyst{order:1;justify-self:start}
  .hero-copy h1{order:2;margin:6px 0 0}
  #hero-form-card{order:3}
  .hero-copy .lead{order:4}
  .hero-copy .checks{order:5;margin:6px 0 0}
  .hero-copy .hero-trust{order:6}
}

/* ---- Phones (<= 760px) ---- */
@media (max-width:760px){
  /* nav: links collapse into the hamburger menu; the green CTA stays visible */
  .nav-links{position:absolute;top:68px;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:8px 20px 16px;border-bottom:1px solid var(--line);display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;border-bottom:1px solid var(--line)}
  .nav-toggle{display:flex}
  .nav-actions .btn{padding:9px 14px;font-size:13.5px;font-weight:700;white-space:nowrap}   /* compact, single-line, always-visible CTA */
  .brand img{height:30px}

  .section{padding:64px 0}
  .cards,.reviews,.steps,.footer-top{grid-template-columns:1fr}
  .lead-form--inline{grid-template-columns:1fr}

  /* hero: tighter so the form is visible on the first screen */
  .hero{padding-top:26px}
  .hero h1{font-size:31px}
  /* analyst card on phones: smaller photo (52px) and tighter text, still the first thing visitors see */
  .hero-analyst{--av:52px;gap:11px;padding:6px 16px 6px 6px}
  .hero-analyst .who-text strong{font-size:15.5px}
  .hero-analyst .who-text span{font-size:12px}
  .hero-trust{gap:22px}
  .form-card{padding:20px}
  .form-card-head h2{font-size:20px}
  .form-card-head p{margin-bottom:14px;font-size:14px}
  .lead{font-size:16px}

  /* sticky bottom bar (Call + Get a free call back) */
  .sticky-bar{display:flex}
  body{padding-bottom:78px}   /* stops the bar covering the footer text */
  .photo-badge{right:10px}
}

/* ---- Accessibility: users who ask their device for less motion get no animations ---- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}