/* ══════════════════════════════════════════════════════════════
   Petro AI — marketing site
   Visual language matched to website assets/website_reference.png:
   high-contrast serif display with a two-tone heading treatment,
   humanist sans body, vivid blue gradient pill CTAs, hairline-bordered
   badge pills, soft blurred blue blobs on near-white.
   ══════════════════════════════════════════════════════════════ */

:root{
  --ink:#071A2E;          /* headline navy, near-black */
  --ink-2:#5C7284;        /* second line of a two-tone heading */
  --body:#48606F;         /* body copy */
  --muted:#7C90A1;
  --blue:#0A63F8;
  --blue-lt:#3B8CFF;
  --blue-dk:#0847C4;
  --bg:#FFFFFF;
  --soft:#F4F8FC;         /* tinted card / section */
  --soft-2:#EAF2FA;
  --line:#E4EBF2;
  --line-2:#D6E1EC;

  --r-card:26px;
  --r-sm:14px;
  --shadow-sm:0 1px 2px rgba(7,26,46,.05);
  --shadow-md:0 2px 6px rgba(7,26,46,.05), 0 14px 34px -14px rgba(7,26,46,.16);
  --shadow-lg:0 4px 12px rgba(7,26,46,.06), 0 30px 70px -26px rgba(7,26,46,.28);
  --shadow-blue:0 10px 28px -8px rgba(10,99,248,.5), inset 0 1px 0 rgba(255,255,255,.28);

  --ease:cubic-bezier(.16,1,.3,1);
  --t:200ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.wrap{max-width:1180px; margin:0 auto; padding:0 24px; position:relative; z-index:1}
.narrow{max-width:820px}

/* ─── type ─── */
.serif{font-family:'Instrument Serif',Georgia,serif; font-weight:400; color:var(--ink);
  letter-spacing:-.015em; line-height:1.02}
h1.serif{font-size:clamp(46px,7.4vw,88px)}
h2.serif{font-size:clamp(38px,5.4vw,68px)}
h3.serif{font-size:clamp(28px,3.4vw,40px)}
.serif .dim{color:var(--ink-2); display:block}   /* two-tone heading */
.lede{font-size:clamp(17px,2vw,21px); color:var(--body); line-height:1.6; margin:20px 0 0}
.eyebrow{font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.center{text-align:center}
.center .lede{margin-left:auto; margin-right:auto; max-width:60ch}

/* ─── badge pill ─── */
.badge{
  display:inline-flex; align-items:center; gap:9px; padding:9px 18px 9px 14px;
  border-radius:999px; background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-sm); font-size:14.5px; font-weight:500; color:var(--ink);
}
.badge svg{width:17px; height:17px; color:var(--blue); flex:none}

/* ─── buttons ─── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 30px; border-radius:999px; border:0; cursor:pointer;
  font-family:inherit; font-size:16.5px; font-weight:700; line-height:1;
  background:linear-gradient(180deg,var(--blue-lt) 0%,var(--blue) 45%,var(--blue-dk) 100%);
  color:#fff; box-shadow:var(--shadow-blue);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), filter var(--t) var(--ease);
}
.btn:hover{filter:saturate(1.08) brightness(1.05); box-shadow:0 14px 34px -8px rgba(10,99,248,.6), inset 0 1px 0 rgba(255,255,255,.3)}
.btn:active{transform:scale(.975)}
.btn svg{width:16px; height:16px}
.btn-lg{padding:22px 40px; font-size:18px}
.btn-ghost{
  background:#fff; color:var(--ink); border:1px solid var(--line-2); box-shadow:var(--shadow-sm);
}
.btn-ghost:hover{filter:none; background:var(--soft); box-shadow:var(--shadow-md)}
.btn-block{width:100%}
.btn-row{display:flex; gap:14px; flex-wrap:wrap}
.center .btn-row{justify-content:center}

:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:3px solid rgba(10,99,248,.45); outline-offset:2px; border-radius:8px;
}

/* ─── blobs ─── */
/* Soft washes, not shapes: the falloff has to reach zero well inside the box or
   the element's own silhouette shows as a hard-edged ellipse. */
.blob{position:absolute; border-radius:50%; filter:blur(100px); pointer-events:none; z-index:0}
.blob-a{width:min(1000px,110vw); height:min(660px,80vw); left:50%; top:-180px; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 42%,
    rgba(10,99,248,.34) 0%, rgba(59,140,255,.20) 34%, rgba(120,180,255,.08) 54%, transparent 72%)}
.blob-b{width:min(760px,92vw); height:min(560px,70vw); right:-220px; top:14%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(59,140,255,.22) 0%, rgba(120,180,255,.09) 40%, transparent 70%)}
.blob-c{width:min(940px,104vw); height:min(560px,70vw); left:-240px; bottom:-200px;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(90,160,255,.20) 0%, rgba(140,195,255,.08) 42%, transparent 72%)}

/* ─── wavy background ───
   Animated noise-driven wave field. The scrims matter as much as the waves:
   without them the headline sits on moving colour and contrast wanders. */
.waves{position:absolute; top:0; left:0; right:0; height:100%;
  z-index:0; pointer-events:none; overflow:hidden;
  /* legibility veil, tunable per section. The ellipse must be wide enough to
     cover the full headline measure, or the ends of long lines fall onto
     saturated blue and drop under the 3:1 floor for large text. */
  --scrim:.86; --scrim-mid:.45; --scrim-w:56%; --scrim-h:34%;}
.waves canvas{position:absolute; inset:0; display:block}

/* Animated multi-colour gradient. Lives inside .waves as the first child, so
   the wave canvas paints over it and the ::after legibility scrim covers both. */
.agb{position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:0;
  animation:agb-in 1.8s cubic-bezier(.25,.1,.25,1) forwards}
.agb-layer{position:absolute; inset:0; filter:blur(var(--agb-blur,44px)); will-change:background}
@keyframes agb-in{
  from{opacity:0; transform:scale(1.35)}
  to{opacity:var(--agb-o,.6); transform:none}
}
@media (prefers-reduced-motion:reduce){
  .agb{animation:none; opacity:var(--agb-o,.6); transform:none}
}
/* A tight veil behind the headline only — wide enough to hold the type on
   near-white, small enough that the wave field still reads around it. */
.waves::after{
  content:''; position:absolute; inset:0;
  background:
    /* Column guard. The saturated end of the ramp sits at almost the same
       luminance as the grey second heading line, so no amount of radial
       softening rescues it — the centre column has to composite to near-white.
       The waves stay vivid in the margins, which is where they read best. */
    linear-gradient(90deg,
      transparent 0%, rgba(255,255,255,.58) 15%,
      rgba(255,255,255,.93) 33%, rgba(255,255,255,.93) 67%,
      rgba(255,255,255,.58) 85%, transparent 100%),
    radial-gradient(ellipse var(--scrim-w) var(--scrim-h) at 50% 44%,
      rgba(255,255,255,var(--scrim)) 0%, rgba(255,255,255,var(--scrim-mid)) 58%, transparent 80%),
    linear-gradient(180deg, #fff 0%, rgba(255,255,255,.42) 9%, transparent 22%,
                    transparent 80%, rgba(255,255,255,.55) 93%, #fff 100%);
}
/* more headroom for the two-tone second line where it sits over the field */
.hero .serif .dim{color:#445D70}

/* ─── dot pattern ───
   Masked OUT of the centre so the grid rings the content instead of sitting
   behind the headline. Drifts exactly one tile per cycle, so it loops
   seamlessly; the svg is oversized so the drift never exposes an edge. */
.dots{
  position:absolute; top:0; left:0; right:0; height:100%;
  z-index:0; pointer-events:none; overflow:hidden;
  -webkit-mask-image:radial-gradient(closest-side circle at 50% 42%,
     transparent 0%, transparent 40%, #000 74%, #000 100%);
  mask-image:radial-gradient(closest-side circle at 50% 42%,
     transparent 0%, transparent 40%, #000 74%, #000 100%);
}
.dots svg{
  position:absolute; top:calc(-1 * var(--dot-tile,18px)); left:calc(-1 * var(--dot-tile,18px));
  width:calc(100% + var(--dot-tile,18px) * 2); height:calc(100% + var(--dot-tile,18px) * 2);
  opacity:var(--dot-opacity,.55);
  /* second mask on the child, so it composites with the radial one on the
     parent: without it the grid stops dead at the bottom of the hero */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 9%, #000 80%, transparent 99%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 9%, #000 80%, transparent 99%);
}
@media (prefers-reduced-motion:no-preference){
  .dots svg{animation:dot-drift var(--dot-speed,14s) linear infinite}
}
@keyframes dot-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--dot-tile,18px), var(--dot-tile,18px), 0)}
}

/* ─── header ─── */
.hdr{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px); border-bottom:1px solid transparent;
  transition:border-color var(--t) var(--ease), background var(--t) var(--ease)}
.hdr[data-stuck="true"]{border-bottom-color:var(--line); background:rgba(255,255,255,.93)}
.hdr-in{display:flex; align-items:center; gap:26px; height:76px}
.logo{display:flex; align-items:center; gap:11px; font-family:'Inter',sans-serif;
  font-weight:800; font-size:24px; letter-spacing:-.03em; color:var(--ink)}
.logo svg{width:34px; height:34px; flex:none}
.logo sup{font-size:11px; font-weight:600; vertical-align:super; color:var(--muted); margin-left:1px}
.nav{display:flex; align-items:center; gap:4px; margin-left:18px}
.nav a{padding:9px 15px; border-radius:10px; font-size:15.5px; font-weight:500; color:var(--body);
  transition:background var(--t) var(--ease), color var(--t) var(--ease)}
.nav a:hover{background:var(--soft); color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink); font-weight:600}
.hdr-cta{margin-left:auto; display:flex; align-items:center; gap:12px}
.link-login{padding:10px 16px; border-radius:10px; font-size:15.5px; font-weight:600; color:var(--ink);
  transition:background var(--t) var(--ease)}
.link-login:hover{background:var(--soft)}
.burger{display:none; margin-left:auto; width:44px; height:44px; border:0; background:transparent;
  cursor:pointer; align-items:center; justify-content:center; border-radius:10px}
.burger:hover{background:var(--soft)}
.burger span{display:block; width:22px; height:2.5px; background:var(--ink); border-radius:2px;
  position:relative; transition:transform var(--t) var(--ease), opacity var(--t) var(--ease)}
.burger span::before,.burger span::after{content:''; position:absolute; left:0; width:22px; height:2.5px;
  background:var(--ink); border-radius:2px; transition:transform var(--t) var(--ease)}
.burger span::before{top:-7px} .burger span::after{top:7px}
.burger[aria-expanded="true"] span{transform:rotate(45deg)}
.burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(-90deg)}
.burger[aria-expanded="true"] span::after{opacity:0}
.drawer{display:none; border-top:1px solid var(--line); background:#fff; padding:14px 24px 24px}
.drawer[data-open="true"]{display:block}
.drawer a{display:block; padding:13px 4px; font-size:17px; font-weight:500; color:var(--ink);
  border-bottom:1px solid var(--line)}
.drawer .btn{margin-top:16px; width:100%}

/* ─── sections ─── */
section{position:relative}
.sec{padding:clamp(72px,10vw,140px) 0}
.sec-tight{padding:clamp(48px,6vw,88px) 0}
.sec-soft{background:var(--soft)}
.hero{padding:clamp(56px,8vw,110px) 0 clamp(60px,7vw,96px); text-align:center; overflow:hidden}
.hero .badge{margin-bottom:30px}

/* ─── cards ─── */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--shadow-md); padding:32px; position:relative; overflow:hidden}
.card-soft{background:var(--soft); box-shadow:none}
.grid{display:grid; gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.shot{border-radius:var(--r-card); border:1px solid var(--line); box-shadow:var(--shadow-lg);
  overflow:hidden; background:#fff}
.shot img{width:100%}

.pill-link{display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:26px; border-radius:22px; background:var(--soft); border:1px solid var(--line);
  font-size:22px; font-weight:700; color:var(--ink); letter-spacing:-.01em;
  transition:background var(--t) var(--ease), transform var(--t) var(--ease)}
.pill-link:hover{background:var(--soft-2)}
.pill-link:active{transform:scale(.995)}

/* ─── feature checklist ─── */
.checks{display:grid; grid-template-columns:repeat(2,1fr); gap:16px 34px; margin:34px 0 0; padding:0; list-style:none}
.checks li{display:flex; align-items:center; gap:13px; font-size:17.5px; color:var(--ink)}
.check{width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(180deg,#5BA4FF,var(--blue));
  box-shadow:0 4px 10px -3px rgba(10,99,248,.5), inset 0 1px 0 rgba(255,255,255,.4); color:#fff}
.check svg{width:15px; height:15px}
.soon{font-size:12px; font-weight:600; color:var(--muted); background:var(--soft-2);
  padding:3px 9px; border-radius:999px}

/* ─── feature rows ─── */
.frow{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center}
.frow + .frow{margin-top:clamp(64px,8vw,120px)}
.frow.flip .fr-media{order:-1}
.fr-body h3{margin:18px 0 0}
.fr-body p{margin:16px 0 0}
.fr-list{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:11px}
.fr-list li{display:flex; gap:11px; align-items:flex-start; font-size:16px}
.fr-list .dot{width:7px; height:7px; border-radius:50%; background:var(--blue); flex:none; margin-top:9px}

/* ─── pricing ─── */
.toggle{display:inline-flex; padding:5px; background:var(--soft); border:1px solid var(--line);
  border-radius:999px; gap:4px}
.toggle button{padding:10px 22px; border-radius:999px; border:0; background:transparent; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:600; color:var(--body);
  transition:background var(--t) var(--ease), color var(--t) var(--ease)}
.toggle button[aria-pressed="true"]{background:#fff; color:var(--ink); box-shadow:var(--shadow-sm)}
.save{font-size:12.5px; font-weight:700; color:var(--blue)}

.plan{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-card); padding:34px 30px; box-shadow:var(--shadow-md)}
.plan-feat{border:2px solid var(--blue); box-shadow:0 6px 18px rgba(10,99,248,.14), 0 34px 70px -30px rgba(10,99,248,.5)}
.plan-tag{position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:linear-gradient(180deg,var(--blue-lt),var(--blue)); color:#fff; font-size:12.5px;
  font-weight:700; padding:6px 16px; border-radius:999px; letter-spacing:.02em; white-space:nowrap;
  box-shadow:0 6px 16px -4px rgba(10,99,248,.6)}
.plan h3{font-family:'Inter',sans-serif; font-size:19px; font-weight:700; color:var(--ink); margin:0}
.plan-desc{font-size:15px; margin:9px 0 0; min-height:48px}
.price{display:flex; align-items:baseline; gap:6px; margin:22px 0 4px}
.price .amt{font-family:'Instrument Serif',Georgia,serif; font-size:56px; line-height:1; color:var(--ink)}
/* Instrument Serif carries no ₹ glyph — it falls back to a mismatched face and
   renders malformed. Set the symbol in the sans at a smaller optical size. */
.price .cur{font-family:'Inter',sans-serif; font-size:.58em; font-weight:600;
  margin-right:3px; vertical-align:.1em; letter-spacing:-.02em}
.price .per{font-size:14.5px; color:var(--muted)}
.plan .btn{margin:24px 0 0}
.plan ul{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:13px}
.plan ul li{display:flex; gap:11px; align-items:flex-start; font-size:15.5px; color:var(--body)}
.plan ul svg{width:19px; height:19px; flex:none; color:var(--blue); margin-top:3px}
.plan-foot{margin-top:auto}

table.cmp{width:100%; border-collapse:collapse; font-size:15.5px}
.cmp th,.cmp td{padding:15px 16px; text-align:left; border-bottom:1px solid var(--line)}
.cmp thead th{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700}
.cmp td:not(:first-child),.cmp th:not(:first-child){text-align:center}
.cmp tbody tr:hover{background:var(--soft)}
.cmp .yes{color:var(--blue)}
.cmp .no{color:var(--line-2)}
.tbl-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-card); background:#fff}

/* ─── roadmap ───
   Numbered because this genuinely is a sequence — a build order where each
   step depends on the one before it, not decoration. */
.road{list-style:none; padding:0; margin:0 auto; max-width:900px}
.road-step{display:grid; grid-template-columns:auto 1fr; gap:26px; padding-bottom:38px; position:relative}
.road-step:last-child{padding-bottom:0}
.road-step:not(:last-child)::before{
  content:''; position:absolute; left:23px; top:56px; bottom:-2px; width:2px;
  background:linear-gradient(180deg, var(--line-2), var(--line));
}
.road-n{
  width:48px; height:48px; border-radius:50%; flex:none; display:grid; place-items:center;
  position:relative; z-index:1; font-size:18px; font-weight:700; color:#fff;
  background:linear-gradient(180deg,#5BA4FF,var(--blue));
  box-shadow:0 6px 16px -4px rgba(10,99,248,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
.road-step h3{font-size:clamp(21px,2.4vw,27px); margin:7px 0 0}
.road-step p{margin:11px 0 0; font-size:16.5px; max-width:60ch}
.road-note{
  margin:44px auto 0; max-width:640px; text-align:center; font-size:15px; color:var(--muted);
  padding-top:24px; border-top:1px solid var(--line);
}
@media (max-width:640px){
  .road-step{gap:16px; padding-bottom:30px}
  .road-n{width:40px; height:40px; font-size:16px}
  .road-step:not(:last-child)::before{left:19px; top:48px}
}

/* ─── FAQ ─── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex; align-items:center; gap:18px; padding:24px 4px; cursor:pointer;
  font-size:18.5px; font-weight:600; color:var(--ink); list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .mark{margin-left:auto; width:32px; height:32px; border-radius:50%; flex:none;
  border:1px solid var(--line); display:grid; place-items:center; color:var(--ink);
  transition:transform var(--t) var(--ease), background var(--t) var(--ease)}
.faq summary:hover .mark{background:var(--soft)}
.faq details[open] summary .mark{transform:rotate(45deg); background:var(--blue); color:#fff; border-color:var(--blue)}
.faq .ans{padding:0 60px 26px 4px; margin:0; font-size:16.5px}

/* ─── auth ─── */
.auth{min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr}
.auth-side{background:linear-gradient(165deg,#062A6B 0%,#0A47B8 45%,#0A63F8 100%);
  color:#fff; padding:56px 52px; display:flex; flex-direction:column; position:relative; overflow:hidden}
.auth-side::after{content:''; position:absolute; width:560px; height:560px; right:-200px; bottom:-220px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.20),transparent 65%)}
.auth-side .logo{color:#fff}
.auth-quote{margin-top:auto; position:relative; z-index:1}
.auth-quote p{font-family:'Instrument Serif',Georgia,serif; font-size:clamp(26px,2.6vw,36px);
  line-height:1.18; color:#fff; margin:0}
.auth-quote cite{display:block; margin-top:20px; font-style:normal; font-size:15px; color:rgba(255,255,255,.78)}
.auth-stats{display:flex; gap:34px; margin-top:34px; position:relative; z-index:1}
.auth-stats b{display:block; font-family:'Instrument Serif',Georgia,serif; font-size:34px; color:#fff; line-height:1}
.auth-stats span{font-size:13.5px; color:rgba(255,255,255,.72)}
.auth-main{display:flex; align-items:center; justify-content:center; padding:48px 32px; background:var(--bg)}
.auth-card{width:100%; max-width:432px}
.tabs{display:flex; padding:5px; background:var(--soft); border:1px solid var(--line);
  border-radius:999px; gap:4px; margin:0 0 30px}
.tabs button{flex:1; padding:12px; border-radius:999px; border:0; background:transparent; cursor:pointer;
  font-family:inherit; font-size:15.5px; font-weight:600; color:var(--body);
  transition:background var(--t) var(--ease), color var(--t) var(--ease)}
.tabs button[aria-selected="true"]{background:#fff; color:var(--ink); box-shadow:var(--shadow-sm)}
.field{margin-bottom:18px}
.field label{display:block; font-size:14.5px; font-weight:600; color:var(--ink); margin-bottom:8px}
.field input,.field select{width:100%; padding:15px 16px; border-radius:14px; border:1px solid var(--line-2);
  background:#fff; font-family:inherit; font-size:16px; color:var(--ink);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease)}
.field input::placeholder{color:#9BADBC}
.field input:hover,.field select:hover{border-color:#BFD0E0}
.field input:focus,.field select:focus{outline:0; border-color:var(--blue); box-shadow:0 0 0 4px rgba(10,99,248,.14)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.hint{font-size:13.5px; color:var(--muted); margin:8px 0 0}
.checkrow{display:flex; align-items:flex-start; gap:11px; font-size:14.5px; margin:6px 0 22px}
.checkrow input{width:19px; height:19px; margin-top:2px; accent-color:var(--blue); flex:none}
.divider{display:flex; align-items:center; gap:16px; margin:26px 0; color:var(--muted); font-size:13.5px}
.divider::before,.divider::after{content:''; flex:1; height:1px; background:var(--line)}
.demo-note{margin-top:26px; padding:15px 18px; border-radius:16px; background:var(--soft);
  border:1px solid var(--line); font-size:14px; line-height:1.6; color:var(--body)}

/* ─── footer ─── */
.ftr{background:var(--ink); color:#B9C9D6; padding:76px 0 40px; margin-top:0}
.ftr .logo{color:#fff}
.ftr-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:44px}
.ftr h4{font-family:'Inter',sans-serif; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:#7E93A5; margin:0 0 18px; font-weight:700}
.ftr ul{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.ftr a{font-size:15.5px; color:#B9C9D6; transition:color var(--t) var(--ease)}
.ftr a:hover{color:#fff}
.ftr-bot{margin-top:56px; padding-top:26px; border-top:1px solid rgba(255,255,255,.11);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:14px; color:#7E93A5}

/* ─── responsive ─── */
@media (max-width:980px){
  .nav,.hdr-cta{display:none}
  .burger{display:flex}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .frow{grid-template-columns:1fr; gap:30px}
  .frow.flip .fr-media{order:0}
  .auth{grid-template-columns:1fr}
  .auth-side{display:none}
  .ftr-grid{grid-template-columns:1fr 1fr; gap:36px}
}
@media (max-width:640px){
  body{font-size:16px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  .card{padding:24px}
  .plan{padding:28px 22px}
  .faq .ans{padding-right:8px}
  .ftr-grid{grid-template-columns:1fr}
  .hdr-in{height:66px}
  .btn{width:100%}
  .btn-row{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}