/* ============================================================
   Revend v2 – Simple & Clean Stylesheet
   kPrimary=#2660EF(Merchant) kSecondary=#FD7D00(Customer) kTrimary=#00897B(SP)
   Mobile-first · WCAG 2.1 AA
   ============================================================ */

:root {
  --orange:      #FD7D00;
  --orange-dark: #C46200;
  --orange-light:#FFF3E0;
  --blue:        #2660EF;
  --blue-dark:   #1D4ED8;
  --blue-light:  #EEF3FF;
  --teal:        #00897B;
  --teal-dark:   #00695C;
  --teal-light:  #E0F2F1;
  --dark:        #0F172A;
  --dark-2:      #1E293B;
  --gray-6:      #475569;
  --gray-5:      #64748B;
  --gray-4:      #94A3B8;
  --gray-2:      #E2E8F0;
  --gray-1:      #F1F5F9;
  --gray-0:      #F8FAFC;
  --white:       #FFFFFF;
  --radius:      12px;
  --radius-lg:   20px;
  --shadow:      0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.06);
  --font:        'Inter', system-ui, -apple-system, sans-serif;
  --ease:        .2s ease;
  --nav-h:       68px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); color: var(--dark-2); background: var(--white); line-height: 1.6; overflow-x: hidden; }
img  { max-width: 100%; height: auto; display: block; }
a    { color: inherit; text-decoration: none; }
ul   { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
svg  { display: block; }

/* ── Accessibility ── */
.skip-link { position: absolute; top: -100%; left: 0; background: var(--blue); color: var(--white); padding: .75rem 1.5rem; font-weight: 600; z-index: 9999; transition: top var(--ease); }
.skip-link:focus { top: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

/* ── Layout ── */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px)  { .container { padding: 0 2rem; } }
@media (min-width: 1024px) { .container { padding: 0 2.5rem; } }

/* ── Navbar ── */
.navbar {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  background: var(--white); border-bottom: 1px solid var(--gray-2);
  transition: box-shadow var(--ease);
}
.navbar.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo-full  { display: block; height: 44px; width: auto; object-fit: contain; }
.nav-logo-brand { display: none; height: 32px; width: auto; object-fit: contain; }
.navbar.scrolled .nav-logo-full  { display: none; }
.navbar.scrolled .nav-logo-brand { display: block; }

.nav-links { display: none; align-items: center; gap: 2rem; }
@media (min-width: 960px) { .nav-links { display: flex; } }
.nav-links a { font-size: .9375rem; color: var(--gray-5); font-weight: 500; transition: color var(--ease); }
.nav-links a:hover { color: var(--dark); }

.nav-right { display: flex; align-items: center; gap: .75rem; }
.btn-nav {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px;
  border-radius: 8px; font-size: .875rem; font-weight: 700; cursor: pointer;
  background: var(--orange); color: var(--white); transition: background var(--ease);
}
.btn-nav:hover { background: var(--orange-dark); }

.hamburger { display: flex; flex-direction: column; gap: 5px; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--dark); border-radius: 2px; transition: var(--ease); }
@media (min-width: 960px) { .hamburger { display: none; } }

.nav-mobile {
  display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
  background: var(--white); border-bottom: 1px solid var(--gray-2);
  padding: 1.25rem 1.5rem; flex-direction: column; gap: .25rem; z-index: 99;
}
.nav-mobile.open { display: flex; }
.nav-mobile a { font-size: .9375rem; font-weight: 500; color: var(--gray-6); padding: .625rem 0; border-bottom: 1px solid var(--gray-1); }

/* ── Section ── */
.section { padding: 5rem 0; }
@media (min-width: 768px) { .section { padding: 6rem 0; } }
.section-gray { background: var(--gray-0); }
.section-dark { background: var(--dark); }

/* ── Section Header ── */
.sec-head { text-align: center; max-width: 640px; margin: 0 auto 3.5rem; }
.sec-label {
  display: inline-block; padding: 4px 14px; border-radius: 999px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: .875rem;
}
.label-orange { background: var(--orange-light); color: var(--orange-dark); }
.label-blue   { background: var(--blue-light);   color: var(--blue-dark); }
.label-white  { background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }
.sec-title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 700; line-height: 1.15; color: var(--dark); letter-spacing: -.02em; }
.sec-title-white { color: var(--white); }
.sec-sub { margin-top: .875rem; font-size: 1.0625rem; color: var(--gray-5); line-height: 1.7; }
.sec-sub-white { color: rgba(255,255,255,.55); }

/* ── Hero ── */
.hero {
  background: var(--dark);
  min-height: 100vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.hero > .container {
  flex: 1; display: flex; flex-direction: column;
  padding-top: 5rem; padding-bottom: 4rem;
}
.hero-inner {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3rem;
}
.hero-left {
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
  width: 100%;
}
/* Hero fade-in — content slides up gently on load */
.hero-inner {
  animation: rv-hero-in .65s cubic-bezier(.22,.68,0,1.2) both;
  animation-delay: .05s;
}
@keyframes rv-hero-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ── Desktop: fluid from 900px → 1440px+ ── */
@media (min-width: 900px) {
  .hero > .container {
    padding-top:    clamp(2rem,   2.2vw, 3rem);
    padding-bottom: clamp(2rem,   2.2vw, 3rem);
  }
  .hero-inner {
    flex-direction: row; text-align: left; align-items: center;
    gap: clamp(1.5rem, calc(0.463vw - 2.667rem), 4rem);
  }
  .hero-left {
    flex: 0 0 clamp(320px, calc(14.8vw + 187px), 410px);
    align-items: flex-start;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(1rem, 1.5vw, 2rem) 0;
    margin-left: clamp(-4rem, calc(-0.556vw + 4rem), -1rem);
  }
  .hero-pills { justify-content: flex-start; flex-wrap: nowrap; }
  .hero-ctas  { justify-content: flex-start; flex-wrap: nowrap; }
  .ps-btn  { padding: clamp(.5rem, .4vw + .14rem, .6rem) clamp(.75rem, .4vw + .39rem, .9rem); gap: clamp(.45rem, .4vw + .09rem, .55rem); }
  .ps-name { font-size: clamp(.8rem, .3vw + .53rem, .85rem); }
  /* Fluid text — hero-left only (does not affect any other section) */
  .hero-badge     { font-size: clamp(.70rem, .9vw, .80rem); }
  .hero-pill      { font-size: clamp(.71rem, .9vw, .8125rem); }
  .hero-desc      { font-size: clamp(.82rem, 1.04vw, .9375rem); }
  .hstat-l        { font-size: clamp(.61rem, .78vw, .70rem); }
  .hero-free-note { font-size: clamp(.71rem, .9vw, .8125rem); }
}

/* ── Short screens: landscape laptops / small-height monitors ── */
@media (min-width: 900px) and (max-height: 820px) {
  .hero > .container { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .hero-left { padding: 1rem 0; }
}

/* Hero inline stats */
.hero-stats {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
  justify-content: center;
}
@media (min-width: 900px) { .hero-stats { justify-content: flex-start; } }
.hstat { display: flex; flex-direction: column; gap: .15rem; }
.hstat-n {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 800; color: var(--white); line-height: 1;
  letter-spacing: -.02em;
}
.hstat-n.clr-o { color: var(--orange); }
.hstat-n.clr-t { color: #4DB6AC; }
.hstat-n.clr-b { color: #7BAAFF; }
.hstat-l {
  font-size: .7rem; font-weight: 600;
  color: rgba(255,255,255,.38);
  text-transform: uppercase; letter-spacing: .07em;
}

.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .625rem 1.25rem;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  font-size: .8rem; font-weight: 500;
  color: rgba(255,255,255,.65);
  letter-spacing: .02em;
}
.hero-badge svg { color: var(--orange); flex-shrink: 0; }

.hero-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.hero-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; font-size: .8125rem; font-weight: 600; }
.pill-c { background: rgba(253,125,0,.15); color: var(--orange); }
.pill-m { background: rgba(38,96,239,.15);  color: #7BAAFF; }
.pill-s { background: rgba(0,137,123,.15);  color: #4DB6AC; }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.hero-h1 { font-size: clamp(2.25rem, 4.5vw, 3.75rem); font-weight: 800; color: var(--white); line-height: 1.1; letter-spacing: -.03em; white-space: nowrap; }
.hero-h1 span { color: var(--orange); }

.hero-rating {
  display: flex; align-items: center; gap: .5rem;
}
.rating-stars { display: flex; gap: 1px; }
.rating-stars svg { width: 16px; height: 16px; }
.rating-score {
  font-size: 1rem; font-weight: 700; color: var(--white);
}
.rating-label {
  font-size: .75rem; color: rgba(255,255,255,.4); font-weight: 500;
}

.hero-sub { font-size: clamp(1rem, 2vw, 1.25rem); color: rgba(255,255,255,.45); }
.hero-desc { font-size: .9375rem; color: rgba(255,255,255,.55); line-height: 1.75; max-width: 520px; }

/* Play Store Buttons */
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: .875rem; }
.ps-btn {
  display: inline-flex; align-items: center; gap: .875rem;
  padding: .75rem 1.5rem; border-radius: var(--radius); cursor: pointer;
  text-decoration: none; transition: opacity var(--ease), transform var(--ease);
}
.ps-btn:hover { opacity: .88; transform: translateY(-1px); }
.ps-btn-dark   { background: #111827; }
.ps-btn-orange { background: var(--orange); }
.ps-btn-blue   { background: var(--blue); }
.ps-btn-teal   { background: var(--teal-dark); }
.ps-icon { width: 26px; height: 26px; flex-shrink: 0; }
.ps-text { display: flex; flex-direction: column; text-align: left; }
.ps-pre  { font-size: .5625rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.7); line-height: 1; margin-bottom: 2px; }
.ps-name { font-size: .9375rem; font-weight: 700; color: var(--white); line-height: 1.2; }
.ps-tag  { font-size: .625rem; font-weight: 600; color: rgba(255,255,255,.65); margin-top: 2px; }

.hero-free-note {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8125rem; font-weight: 500; color: rgba(255,255,255,.45);
}
.hero-free-note svg { color: #4ade80; flex-shrink: 0; }

/* ── Location Ticker ── */
.hero-map {
  display: flex; flex-direction: column; gap: .75rem;
  width: 100%; margin-top: 0;
}
/* Map — centered in hero on desktop */
@media (min-width: 900px) {
  .hero-map {
    flex: 1; min-width: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .india-svg {
    max-width: none;
    width: auto;
    height: 150vh;
    display: block;
    flex-shrink: 0;
  }
}

/* ── India SVG Map ── */
.india-svg {
  width: 100%;
  height: auto;
  max-width: 1080px;
  display: block;
  overflow: visible;
}

.india-border {
  fill: rgba(255,255,255,.04);
  stroke: rgba(255,255,255,.5);
  stroke-width: 2;
  stroke-dasharray: 1 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Ambient scatter dots */
.amb-dot {
  fill: rgba(255,255,255,.55);
  animation: mp-blink var(--spd, 2.2s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

.mp-dot {
  fill: var(--clr, rgba(255,255,255,.7));
  animation: mp-blink 2.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.mp-ring {
  fill: none;
  stroke: var(--clr, rgba(255,255,255,.5));
  stroke-width: 1.5;
  transform-origin: center;
  transform-box: fill-box;
  animation: mp-ring-out 2.5s ease-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes mp-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}
@keyframes mp-ring-out {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(3.5); opacity: 0; }
}
.mp-name {
  fill: rgba(255,255,255,.85);
  font-size: 8px;
  font-weight: 700;
  font-family: 'Inter', system-ui, sans-serif;
  pointer-events: none;
}
.mp-cnt {
  fill: rgba(255,255,255,.45);
  font-size: 7px;
  font-family: 'Inter', system-ui, sans-serif;
  pointer-events: none;
}

/* ── Tier city label visibility ── */
/* Default (mobile): all cities show dots only — no labels */
.map-pin .mp-name,
.map-pin .mp-cnt { display: none; }
/* 900px+: tier-1 major metros get labels */
@media (min-width: 900px) {
  .map-pin.tier-1 .mp-name,
  .map-pin.tier-1 .mp-cnt { display: block; }
}
/* 1280px+: tier-2 cities also get labels */
@media (min-width: 1280px) {
  .map-pin.tier-2 .mp-name,
  .map-pin.tier-2 .mp-cnt { display: block; }
}
/* 1600px+: tier-3 smaller cities also get labels */
@media (min-width: 1600px) {
  .map-pin.tier-3 .mp-name,
  .map-pin.tier-3 .mp-cnt { display: block; }
}

.loc-header {
  display: flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 600;
  color: rgba(255,255,255,.45); letter-spacing: .06em; text-transform: uppercase;
  justify-content: flex-end;
}
.loc-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
  animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}

.loc-ticker {
  position: relative;
  height: 420px;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
}
/* Top & bottom fade */
.loc-ticker::before,
.loc-ticker::after {
  content: ''; position: absolute; left: 0; right: 0; height: 56px; z-index: 2; pointer-events: none;
}
.loc-ticker::before { top: 0;    background: linear-gradient(to bottom, #0F172A 20%, transparent); }
.loc-ticker::after  { bottom: 0; background: linear-gradient(to top,    #0F172A 20%, transparent); }

.loc-track {
  animation: ticker-up 90s linear infinite;
}
.loc-ticker:hover .loc-track { animation-play-state: paused; }

@keyframes ticker-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.loc-item {
  display: flex; align-items: center; gap: .875rem;
  padding: .6rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .15s;
}
.loc-item:hover { background: rgba(255,255,255,.05); }

.loc-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.loc-dot-o { background: #FD7D00; box-shadow: 0 0 5px #FD7D00; }
.loc-dot-b { background: #2660EF; box-shadow: 0 0 5px #2660EF; }
.loc-dot-t { background: #4DB6AC; box-shadow: 0 0 5px #4DB6AC; }
.loc-dot-w { background: rgba(255,255,255,.4); }

.loc-name {
  flex: 1;
  font-size: .9rem; font-weight: 600;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
}
.loc-count {
  font-size: .78rem; font-weight: 700;
  color: rgba(255,255,255,.35);
  letter-spacing: .04em;
  white-space: nowrap;
}

/* Blinking city groups */
.cblink {
  animation: city-blink 5s ease-in-out infinite both;
  animation-delay: var(--d, 0s);
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes city-blink {
  0%        { opacity: 0; transform: scale(0.4); }
  10%       { opacity: 1; transform: scale(1.15); }
  22%, 72%  { opacity: 1; transform: scale(1);    }
  90%       { opacity: .1; transform: scale(0.7); }
  100%      { opacity: 0; transform: scale(0.4); }
}

/* Expanding pulse ring per city */
.cring {
  animation: ring-expand 5s ease-out infinite both;
  animation-delay: var(--d, 0s);
}

@keyframes ring-expand {
  0%        { r: 5;  opacity: 0;   }
  12%       { r: 5;  opacity: 0.5; }
  88%       { r: 16; opacity: 0;   }
  100%      { r: 5;  opacity: 0;   }
}

/* City labels */
.clbl {
  font-family: var(--font);
  font-size: 7px; font-weight: 600;
  fill: rgba(255,255,255,.82);
  pointer-events: none;
  letter-spacing: .01em;
}

/* City count numbers */
.cnum {
  font-family: var(--font);
  font-size: 5.5px; font-weight: 700;
  fill: rgba(255,255,255,.38);
  pointer-events: none;
  letter-spacing: .04em;
}

/* Caption */
.india-map-caption {
  display: flex; align-items: center; gap: .5rem;
  margin-top: 1.25rem; flex-wrap: wrap; justify-content: center;
  font-size: .75rem; font-weight: 500;
  color: rgba(255,255,255,.4); letter-spacing: .02em;
}
.imc-pill {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.imc-o { background: #FD7D00; box-shadow: 0 0 6px #FD7D00; }
.imc-b { background: #2660EF; box-shadow: 0 0 6px #2660EF; }
.imc-t { background: #4DB6AC; box-shadow: 0 0 6px #4DB6AC; }

/* ── Trust bar ── */
.trust { background: var(--orange); }
.trust-inner { display: grid; grid-template-columns: repeat(2,1fr); }
@media (min-width: 640px)  { .trust-inner { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1024px) { .trust-inner { grid-template-columns: repeat(5,1fr); } }
.trust-item { padding: 0.75rem 1rem 1.5rem; text-align: center; border-right: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); }
.trust-num { display: block; font-size: 1.625rem; font-weight: 800; color: var(--white); line-height: 1; }
.trust-lbl { display: block; font-size: .75rem; color: rgba(255,255,255,.82); margin-top: .25rem; }

/* ── Role cards ── */
.roles-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .roles-grid { grid-template-columns: repeat(3,1fr); } }

.role-card {
  background: var(--white); border: 1px solid var(--gray-2); border-radius: var(--radius-lg);
  padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem;
  box-shadow: var(--shadow);
}
.rc-head { display: flex; align-items: center; gap: .875rem; }
.rc-icon {
  width: 48px; height: 48px; border-radius: var(--radius); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.rc-icon-o { background: var(--orange-light); color: var(--orange-dark); }
.rc-icon-b { background: var(--blue-light);   color: var(--blue-dark); }
.rc-icon-t { background: var(--teal-light);   color: var(--teal-dark); }
.rc-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rc-badge-o { background: var(--orange-light); color: var(--orange-dark); }
.rc-badge-b { background: var(--blue-light);   color: var(--blue-dark); }
.rc-badge-t { background: var(--teal-light);   color: var(--teal-dark); }
.rc-head-text h3 { font-size: 1rem; font-weight: 700; color: var(--dark); margin-top: .25rem; }
.rc-desc { font-size: .875rem; color: var(--gray-5); line-height: 1.65; }
.rc-list { display: flex; flex-direction: column; gap: .625rem; flex: 1; }
.rc-item { display: flex; align-items: flex-start; gap: .625rem; font-size: .875rem; color: var(--dark-2); }
.rc-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: .45rem; }
.dot-o { background: var(--orange); }
.dot-b { background: var(--blue); }
.dot-t { background: var(--teal); }

/* ── Why cards (dark) ── */
.why-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px)  { .why-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(4,1fr); } }
.why-card { padding: 1.5rem; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; gap: .875rem; }
.why-card h3 { font-size: 1rem; font-weight: 700; color: var(--white); }
.why-card p  { font-size: .875rem; color: rgba(255,255,255,.55); line-height: 1.65; }
.w-icon { width: 40px; height: 40px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.w-icon-o { background: rgba(253,125,0,.15); color: var(--orange); }
.w-icon-t { background: rgba(0,137,123,.15);  color: #4DB6AC; }

/* ── Sell split ── */
.sell-split { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .sell-split { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.sell-text { display: flex; flex-direction: column; gap: 1.25rem; }
.sell-title { font-size: clamp(1.625rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.2; color: var(--dark); letter-spacing: -.02em; }
.sell-desc  { font-size: .9375rem; color: var(--gray-5); line-height: 1.75; }
.sell-points { display: flex; flex-direction: column; gap: .875rem; }
.sell-pt { display: flex; align-items: flex-start; gap: .75rem; }
.sp-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--orange-light); color: var(--orange-dark); }
.sp-text h4 { font-size: .9375rem; font-weight: 700; color: var(--dark); }
.sp-text p  { font-size: .8125rem; color: var(--gray-5); margin-top: 2px; }
.sell-img { border-radius: var(--radius-lg); overflow: hidden; height: 360px; position: relative; }
.sell-img img { width: 100%; height: 100%; object-fit: cover; }
.sell-img-caption {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,23,42,.75) 0%, transparent 50%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem;
}
.sell-img-caption strong { color: var(--white); font-size: 1rem; font-weight: 700; }
.sell-img-caption span   { color: rgba(255,255,255,.7); font-size: .8125rem; }

/* ── Free cards ── */
.free-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px)  { .free-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .free-grid { grid-template-columns: repeat(4,1fr); } }
.free-card { background: var(--white); border: 1px solid var(--gray-2); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.fc-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--blue-light); color: var(--blue-dark); }
.free-card h3 { font-size: .9375rem; font-weight: 700; color: var(--dark); }
.free-card p  { font-size: .875rem; color: var(--gray-5); line-height: 1.65; }

/* ── Download CTA ── */
.cta-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.cta-title { font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 700; color: var(--white); line-height: 1.15; letter-spacing: -.02em; }
.cta-sub { font-size: 1rem; color: rgba(255,255,255,.5); line-height: 1.75; max-width: 520px; }
.cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .875rem; }
.cta-store { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.cta-store-label { font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.cta-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; }
.cta-check { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; color: rgba(255,255,255,.4); }
.cta-check svg { color: rgba(255,255,255,.35); }

/* ── Footer ── */
.footer { background: var(--dark); padding: 4rem 0 0; }
.footer-top { display: grid; grid-template-columns: 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.07); }
@media (min-width: 768px) { .footer-top { grid-template-columns: 240px 1fr; } }
.footer-brand { display: flex; flex-direction: column; gap: 1rem; }
.footer-logo img { height: 32px; width: auto; object-fit: contain; }
.footer-tagline { font-size: .9375rem; color: rgba(255,255,255,.4); line-height: 1.65; }
.footer-made { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 600; color: var(--orange); }
.footer-cols { display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem; }
@media (min-width: 640px) { .footer-cols { grid-template-columns: repeat(3,1fr); } }
.footer-col h4 { font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: .875rem; }
.footer-col a, .footer-col span { display: block; font-size: .9375rem; color: rgba(255,255,255,.55); margin-bottom: .5rem; transition: color var(--ease); }
.footer-col a:hover { color: var(--white); }
.footer-col .fc-highlight { color: var(--orange); }
.footer-bottom { padding: 1.5rem 0 .75rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.footer-copy { font-size: .8125rem; color: rgba(255,255,255,.25); }
.footer-ai-note {
  padding: .75rem 0 1rem;
  font-size: .7rem; color: rgba(255,255,255,.18);
  text-align: center; line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,.05);
}
.footer-ai-note a { color: rgba(255,255,255,.3); text-decoration: underline; text-underline-offset: 2px; }
.footer-ai-note a:hover { color: rgba(255,255,255,.5); }
.footer-roles { display: flex; align-items: center; gap: 1rem; }
.f-role { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; color: rgba(255,255,255,.25); }
.f-dot { width: 7px; height: 7px; border-radius: 50%; }

/* ── Performance: skip rendering off-screen sections ── */
/* content-visibility:auto tells browser to skip layout+paint until section scrolls into view */
.section { content-visibility: auto; contain-intrinsic-size: 0 500px; }