/* MapMyAi marketing — logo-driven theme (teal + peach) */
:root{
  --bg:#0a0a0c;
  --bg2:#121216;
  --paper:#e8e4dc;
  --ink:#eef6f8;
  --mut:#8a9aa3;
  --line:rgba(238,246,248,.10);
  --card:rgba(255,255,255,.04);
  /* Official logo: M + wordmark = cyan · A + arc = salmon */
  --cyan:#5ba5b0;
  --cyan-deep:#48929c;
  --salmon:#dd816b;
  --salmon-soft:#e8a090;
  --teal:var(--cyan);
  --teal-deep:var(--cyan-deep);
  --peach:var(--salmon);
  --peach-soft:var(--salmon-soft);
  --a1:var(--cyan);
  --a2:var(--salmon);
  --on-accent:#0a1214;
  --glow:0 0 0 1px color-mix(in srgb,var(--cyan) 40%,transparent),0 28px 70px -24px color-mix(in srgb,var(--cyan) 35%,transparent);
  --font-display:"Sora",system-ui,sans-serif;
  --font:"Figtree",system-ui,sans-serif;
  --pad:clamp(16px,4vw,44px);
  --max:1080px;
  --r:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100dvh;color:var(--ink);background:var(--bg);
  font:400 16px/1.55 var(--font);overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* Atmosphere — warm charcoal, teal + peach wash (matches logo) */
.sky{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(90% 60% at 50% -5%,#243038 0%,var(--bg) 55%),
  var(--bg)}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.28;will-change:transform}
.orb-a{width:50vw;height:50vw;background:var(--teal);top:-20vw;left:-8vw;animation:drift 24s ease-in-out infinite}
.orb-b{width:42vw;height:42vw;background:var(--peach);bottom:-18vw;right:-12vw;opacity:.22;animation:drift 30s ease-in-out infinite reverse}
.mesh{position:absolute;inset:0;opacity:.09;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(65% 50% at 50% 20%,#000,transparent 70%);
  -webkit-mask-image:radial-gradient(65% 50% at 50% 20%,#000,transparent 70%)}
@keyframes drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(3vw,5vh,0)}}

/* Top */
.top{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
  padding:10px var(--pad);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  border-bottom:1px solid transparent;
}
.brand{display:flex;align-items:center}
.brand-logo{
  height:40px;width:auto;max-width:min(168px,46vw);display:block;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.4));
}
.brand-logo-foot{height:52px;max-width:min(210px,62vw)}
.top-nav{display:none;gap:20px;margin-inline:auto;font-size:13.5px;color:var(--mut);font-weight:550}
.top-nav a:hover{color:var(--ink)}
.lang-slot{position:relative;flex:none;z-index:50}
.top-cta{flex:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 22px;border-radius:999px;border:0;
  font:650 15px/1 var(--font-display);letter-spacing:-.015em;cursor:pointer;
  color:var(--on-accent);
  background:linear-gradient(125deg,var(--teal) 0%,var(--teal-deep) 45%,var(--peach) 100%);
  background-size:180% 100%;
  box-shadow:0 16px 40px -18px color-mix(in srgb,var(--teal) 55%,transparent);
  transition:transform .15s cubic-bezier(.3,1.4,.5,1),background-position .4s ease;
}
.btn:hover{transform:translateY(-1px);background-position:100% 50%}
.btn:active{transform:scale(.98)}
.btn.ghost{
  color:var(--ink);background:transparent;
  border:1px solid var(--line);box-shadow:none;
}
.btn.ghost:hover{border-color:color-mix(in srgb,var(--teal) 45%,var(--line));color:var(--teal)}
.btn-sm{min-height:40px;padding:0 14px;font-size:13px}

main{width:min(100%,var(--max));margin:0 auto;padding:0 var(--pad) 72px}

/* ——— 1. HERO: brand + tagline + video (one composition) ——— */
.hero{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:18px;padding:clamp(20px,5vw,48px) 0 12px;
  min-height:min(92dvh,900px);
}
.hero-brand{
  margin:0;
}
.hero-brand img{
  height:clamp(88px,18vw,128px);width:auto;max-width:min(100%,420px);
  margin-inline:auto;
  filter:drop-shadow(0 16px 40px rgba(0,0,0,.5));
}
.hero-tag{
  margin:0;max-width:28ch;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(22px,4.2vw,34px);line-height:1.2;letter-spacing:-.03em;
  color:var(--ink);
}
.hero-lede{
  margin:0;max-width:42ch;color:var(--mut);font-size:clamp(15px,2vw,17px);
}
.hero .cta-row{justify-content:center;margin-top:4px}
.hero .fine{color:color-mix(in srgb,var(--mut) 90%,var(--peach))}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:4px}
.fine{margin:0;font-size:13px;color:var(--mut)}
.eyebrow{
  margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal);
}

/* Video = dominant visual in first composition */
.hero-reel{width:min(100%,920px);margin-top:8px}
.reel-frame{
  position:relative;border-radius:22px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--teal) 25%,var(--line));
  background:#0c0f12;
  aspect-ratio:16/9;
  box-shadow:var(--glow),0 40px 90px -40px rgba(0,0,0,.9);
}
.reel-video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.reel-play{
  position:absolute;inset:0;margin:auto;width:min(200px,72%);height:54px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  border:0;border-radius:999px;cursor:pointer;
  font:650 14px/1 var(--font-display);color:var(--on-accent);
  background:linear-gradient(125deg,var(--teal),var(--peach));
  box-shadow:0 18px 44px -14px color-mix(in srgb,var(--peach) 50%,transparent);
  transition:transform .2s ease,opacity .25s ease;
}
.reel-play:hover{transform:scale(1.03)}
.reel-play-ico{
  width:0;height:0;border-style:solid;
  border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent var(--on-accent);
}
.reel.playing .reel-play,.reel.started .reel-play{opacity:0;pointer-events:none}
.reel-chrome{
  position:absolute;inset-inline-end:12px;bottom:12px;display:flex;gap:8px;z-index:2;
}
.reel-mute,.reel-skip{
  appearance:none;border:1px solid rgba(255,255,255,.14);
  background:rgba(12,15,18,.75);color:var(--ink);
  font:600 12px/1 var(--font);padding:8px 12px;border-radius:999px;
  backdrop-filter:blur(10px);cursor:pointer;text-decoration:none;
}
.reel-mute:hover,.reel-skip:hover{border-color:var(--teal);color:var(--teal)}

.trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;
  margin:28px 0 8px;padding:14px 0;border-block:1px solid var(--line);
  color:var(--mut);font-size:12.5px;font-weight:600;letter-spacing:.04em;
}
.trust span{white-space:nowrap}

/* ——— Shared bands ——— */
.band{padding:clamp(48px,9vw,88px) 0}
.sec{text-align:center;margin:0 auto 28px;max-width:40rem}
.sec h2,.flow h2,.proof h2,.who h2{
  margin:0 0 10px;font-family:var(--font-display);font-weight:750;
  font-size:clamp(26px,4.5vw,40px);letter-spacing:-.03em;line-height:1.15;
}
.sub{margin:0 auto;max-width:46ch;color:var(--mut);font-size:15.5px}

/* ——— 2. FLOW: three moves ——— */
.flow-grid{display:grid;gap:12px}
.flow-card{
  padding:22px 20px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--card);
  transition:border-color .2s ease,transform .2s ease;
}
.flow-card:hover{border-color:color-mix(in srgb,var(--peach) 40%,var(--line));transform:translateY(-2px)}
.flow-card .n{
  font-family:var(--font-display);font-size:12px;font-weight:700;
  letter-spacing:.12em;color:var(--peach);
}
.flow-card h3{margin:10px 0 8px;font-family:var(--font-display);font-size:20px;letter-spacing:-.02em}
.flow-card p{margin:0;color:var(--mut);font-size:14.5px}

/* ——— 3. PROOF ——— */
.proof-grid{
  display:grid;gap:20px;align-items:center;
}
.proof-copy p{color:var(--mut);margin:0 0 14px}
.ticks{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:10px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink)}
.feat-ico{flex:none;width:18px;height:18px;margin-top:2px;color:var(--teal)}
.shot{
  margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--card);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.8);
}
.shot img{width:100%;aspect-ratio:16/12;object-fit:cover;object-position:top}

.kpi-strip{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px;
}
.kpi{
  padding:14px 12px;border-radius:14px;border:1px solid var(--line);background:var(--card);text-align:center;
}
.kpi b{display:block;font-family:var(--font-display);font-size:26px;letter-spacing:-.03em;color:var(--teal)}
.kpi small{color:var(--mut);font-size:11.5px}

/* ——— 4. WHO ——— */
.who-grid{display:grid;gap:12px}
.who-card{
  position:relative;padding:20px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--card);
}
.who-card.featured{
  border-color:color-mix(in srgb,var(--teal) 40%,var(--line));
  background:
    radial-gradient(100% 80% at 0% 0%,color-mix(in srgb,var(--teal) 12%,transparent),transparent 55%),
    var(--card);
}
.who-badge{
  position:absolute;top:14px;inset-inline-end:14px;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-accent);background:var(--teal);padding:4px 8px;border-radius:999px;
}
.who-head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.cust-logo{height:32px;width:auto;max-width:110px;object-fit:contain}
.cust-mark{width:36px;height:36px}
.who-card h3{margin:0;font-family:var(--font-display);font-size:18px}
.who-meta{margin:2px 0 0;font-size:12.5px;color:var(--mut)}
.who-quote{margin:0;color:var(--mut);font-size:14.5px}

.lang-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:16px;
}
.lang-pill{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 8px;border-radius:16px;border:1px solid var(--line);
  background:var(--card);cursor:pointer;color:var(--ink);
  font:600 13px/1.2 var(--font);appearance:none;
}
.lang-pill:hover,.lang-pill.on{
  border-color:color-mix(in srgb,var(--teal) 50%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--teal) 25%,transparent);
}
.lang-pill.on{background:color-mix(in srgb,var(--teal) 10%,transparent)}
.lang-mark{width:28px;height:28px;display:grid;place-items:center}
.lang-mark svg{width:100%;height:100%}
.lang-chip{font-size:10px;font-weight:700;color:var(--mut);letter-spacing:.08em}

/* ——— 5. ISO strip ——— */
.iso-strip{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 24px;border-radius:var(--r);
  border:1px solid color-mix(in srgb,var(--peach) 30%,var(--line));
  background:
    linear-gradient(120deg,color-mix(in srgb,var(--peach) 8%,transparent),color-mix(in srgb,var(--teal) 8%,transparent));
}
.iso-strip h2{margin:0 0 6px;font-family:var(--font-display);font-size:clamp(20px,3vw,26px);letter-spacing:-.02em}
.iso-strip p{margin:0;color:var(--mut);font-size:14px;max-width:42ch}

/* ——— 6. PLANS ——— */
.plan-grid{display:grid;gap:14px;margin-top:8px}
.plan-card{
  position:relative;display:flex;flex-direction:column;gap:8px;
  padding:22px 20px 20px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--card);
  transition:border-color .2s ease,transform .2s ease;
}
.plan-card:hover{border-color:color-mix(in srgb,var(--teal) 35%,var(--line));transform:translateY(-2px)}
.plan-hot{
  border-color:color-mix(in srgb,var(--teal) 50%,var(--line));
  background:
    radial-gradient(120% 80% at 50% -20%,color-mix(in srgb,var(--teal) 14%,transparent),transparent 55%),
    var(--card);
  box-shadow:var(--glow);
}
.plan-badge{
  position:absolute;top:14px;inset-inline-end:14px;margin:0;
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut);padding:4px 9px;border-radius:999px;border:1px solid var(--line);
}
.plan-badge.on{color:var(--on-accent);background:var(--teal);border-color:transparent}
.plan-card h3{margin:0;font-family:var(--font-display);font-size:24px;letter-spacing:-.03em}
.plan-tag{margin:0;color:var(--mut);font-size:14px}
.plan-price{margin:6px 0 0;font-family:var(--font-display);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.plan-price strong{font-size:clamp(28px,5vw,34px);letter-spacing:-.03em}
.plan-price span{color:var(--mut);font-size:14px;font-weight:600}
.plan-period{margin:0;font-size:12.5px;color:var(--mut)}
.plan-list{margin:10px 0 16px;padding:0;list-style:none;display:grid;gap:8px;flex:1}
.plan-list li{position:relative;padding-inline-start:22px;font-size:14px;line-height:1.4}
.plan-list li::before{
  content:"";position:absolute;inset-inline-start:0;top:.45em;
  width:11px;height:11px;border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--teal);
  background:color-mix(in srgb,var(--teal) 20%,transparent);
}
.plan-card .btn,.plan-card .btn.ghost{width:100%;justify-content:center}
.plans-note{text-align:center;margin:22px 0 0}

/* Lang menu (header) */
.lang{position:relative}
.lang-trigger{
  display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 10px;
  border-radius:999px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);font:600 13px/1 var(--font);cursor:pointer;
}
.lang-globe,.lang-chev{display:grid;width:16px;height:16px;place-items:center;opacity:.8}
.lang-globe svg,.lang-chev svg{width:100%;height:100%}
.lang-menu{
  position:absolute;top:calc(100% + 6px);inset-inline-end:0;min-width:140px;
  padding:6px;border-radius:14px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--bg2) 96%,#000);box-shadow:0 20px 50px -20px rgba(0,0,0,.7);
  display:none;z-index:60;
}
.lang.open .lang-menu{display:grid;gap:2px}
.lang-menu button{
  appearance:none;border:0;background:transparent;color:var(--ink);
  text-align:start;padding:10px 12px;border-radius:10px;font:600 13px/1 var(--font);cursor:pointer;
}
.lang-menu button:hover,.lang-menu button[aria-selected=true]{background:color-mix(in srgb,var(--teal) 14%,transparent)}

.foot{
  width:min(100%,var(--max));margin:0 auto;
  padding:28px var(--pad) calc(28px + env(safe-area-inset-bottom));
  display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;
  border-top:1px solid var(--line);color:var(--mut);font-size:13.5px;
}
.foot .brand{align-items:flex-start;gap:6px;display:flex;flex-direction:column}
.foot .brand small{font-family:var(--font);font-weight:400;color:var(--mut);font-size:12px}
.foot a{color:var(--teal);font-weight:600;margin-inline-start:auto}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s cubic-bezier(.22,1,.36,1)}
.reveal.on{opacity:1;transform:none}
.delay-1{transition-delay:.1s}
.delay-2{transition-delay:.2s}

@media (prefers-reduced-motion:reduce){
  .orb,.btn,.reveal{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .reel-play{transition:none}
}

html[dir=rtl] .hero-tag,html[dir=rtl] .sec h2,html[dir=rtl] .sub{letter-spacing:normal}

@media (min-width:640px){
  .flow-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kpi-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .who-grid{grid-template-columns:1.25fr 1fr 1fr}
  .plan-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
}
@media (min-width:900px){
  .top-nav{display:flex}
  .proof-grid{grid-template-columns:1fr 1.15fr;gap:36px;text-align:start}
  .proof .sec{text-align:start;margin-inline:0}
  .proof-copy .cta-row{justify-content:flex-start}
}
@media (max-width:639px){
  .lang-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .top-cta{display:none}
}