/* ============================================================
   MoveQuicka website — brand system
   Colors: azure #2F7FEE · iris #674CD9 · navy #14143C
   Type:   Space Grotesk (display) · Manrope (body)
   ============================================================ */
:root{
  --azure:#2F7FEE; --iris:#674CD9; --navy:#14143C;
  --ink:#1B1E33; --body:#454A63; --muted:#7A8099;
  --bg:#FFFFFF; --bg-soft:#F6F7FB; --bg-tint:#F1F0FC;
  --line:#E7E9F2; --white:#fff;
  --grad:linear-gradient(120deg,var(--azure),var(--iris));
  --grad-dark:linear-gradient(150deg,#191a45,#0E0E28 70%);
  --radius:18px; --radius-sm:12px;
  --shadow:0 20px 50px -20px rgba(20,20,60,.28);
  --shadow-sm:0 8px 24px -12px rgba(20,20,60,.22);
  --wrap:1200px;
  --disp:"Space Grotesk", system-ui, sans-serif;
  --sans:"Manrope", system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); color:var(--body);
  background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; width:100%; max-width:100%;
}
img,video,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--disp); color:var(--ink); line-height:1.08; margin:0; letter-spacing:-.02em}
p{margin:0}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,40px)}
.wrap.narrow{max-width:820px}
.skip{position:absolute; left:-999px}
.skip:focus{left:16px; top:16px; background:#fff; padding:10px 16px; border-radius:8px; z-index:200}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-weight:700; font-size:15px; cursor:pointer;
  padding:13px 24px; border-radius:999px; border:1.5px solid transparent;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--grad); color:#fff; box-shadow:0 12px 26px -12px rgba(103,76,217,.6)}
.btn--primary:hover{box-shadow:0 16px 34px -12px rgba(103,76,217,.75); transform:translateY(-1px)}
.btn--ghost{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.55); backdrop-filter:blur(6px)}
.btn--ghost:hover{background:rgba(255,255,255,.16)}
.btn--light{background:#fff; color:var(--navy)}
.btn--light:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm)}
.btn--lg{padding:16px 30px; font-size:16px}
.btn--sm{padding:10px 18px; font-size:14px}

/* ── Header ──────────────────────────────────────────────── */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding:18px 0;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand-logo{height:34px; width:auto}
.brand-logo--dark{display:none}
.nav{display:flex; align-items:center; gap:28px}
.nav a{font-weight:600; font-size:15px; color:#fff; opacity:.92; transition:opacity .2s}
.nav a:hover{opacity:1}
.nav a.btn{color:#fff; opacity:1}
.site-header.scrolled{background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(12px); box-shadow:0 1px 0 var(--line); padding:12px 0}
.site-header.scrolled .brand-logo--light{display:none}
.site-header.scrolled .brand-logo--dark{display:block}
.site-header.scrolled .nav a{color:var(--ink)}
.site-header.scrolled .nav a.btn--primary{color:#fff}
.hamburger{display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; cursor:pointer}
.hamburger span{width:24px; height:2px; background:#fff; border-radius:2px; transition:.3s}
.site-header.scrolled .hamburger span{background:var(--ink)}

/* ── Hero ────────────────────────────────────────────────── */
.hero{position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; color:#fff; background:var(--grad-dark); overflow:hidden}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-video{width:100%; height:100%; object-fit:cover}
/* Darker, left-weighted scrim so the left-aligned white text stays crisp over
   any video frame, while the scene stays visible on the right. */
.hero-overlay{position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(9,9,26,.86) 0%, rgba(9,9,26,.62) 42%, rgba(9,9,26,.3) 100%),
  linear-gradient(180deg, rgba(9,9,26,.5), rgba(9,9,26,.35) 38%, rgba(9,9,26,.9)),
  radial-gradient(1200px 600px at 15% 10%, rgba(47,127,238,.28), transparent 60%)}
.hero-inner{position:relative; z-index:1; padding:120px 0 90px}
.hero-inner .eyebrow,.hero-sub{text-shadow:0 2px 18px rgba(0,0,0,.5)}
.hero-title{text-shadow:0 2px 14px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.55)}
.eyebrow{display:inline-block; font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:#cfe0ff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  padding:7px 14px; border-radius:999px; margin-bottom:22px}
.hero-title{font-size:clamp(34px,7vw,80px); font-weight:700; margin-bottom:18px; max-width:14ch; color:#fff}
.hero-sub{font-size:clamp(16px,2.2vw,20px); color:#dfe3f4; max-width:56ch; margin-bottom:34px}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:56px}
.hero-stats{display:flex; flex-wrap:wrap; gap:14px}
.stat{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-sm);
  padding:16px 22px; min-width:130px; backdrop-filter:blur(4px)}
.stat-value{display:block; font-family:var(--disp); font-size:26px; font-weight:700; color:#fff}
.stat-label{font-size:13px; color:#c3c8e0}
.scroll-hint{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:1;
  color:rgba(255,255,255,.7); font-size:22px; animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ── Sections ────────────────────────────────────────────── */
.section{padding:clamp(64px,9vw,120px) 0}
.section.alt{background:var(--bg-soft)}
.section-head{max-width:760px; margin-bottom:52px}
.section-head.center{margin-inline:auto; text-align:center}
.tag{display:inline-block; font-weight:700; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--iris); background:var(--bg-tint); padding:6px 13px; border-radius:999px; margin-bottom:16px}
h2{font-size:clamp(28px,4.4vw,46px); font-weight:700}
.lead{font-size:clamp(16px,2vw,19px); color:var(--body); margin-top:16px}

/* Before / after */
.ba-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.ba-card{border-radius:var(--radius); padding:32px; border:1px solid var(--line)}
.ba-card ul{margin:0; padding:0; list-style:none; display:grid; gap:14px}
.ba-card li{position:relative; padding-left:30px; font-size:16px; color:var(--ink); font-weight:500}
.ba-card li::before{position:absolute; left:0; top:0; font-weight:800}
.ba-label{display:inline-block; font-family:var(--disp); font-weight:700; margin-bottom:20px; font-size:15px; letter-spacing:.02em}
.ba-before{background:#FBF2F2; border-color:#F3D9D9}
.ba-before .ba-label{color:#C0392B}
.ba-before li::before{content:"✕"; color:#C0392B}
.ba-after{background:var(--bg-tint); border-color:#DED9FA}
.ba-after .ba-label{color:var(--iris)}
.ba-after li::before{content:"✓"; color:var(--iris)}

/* Steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:34px 30px; box-shadow:var(--shadow-sm)}
.step-no{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:14px;
  background:var(--grad); color:#fff; font-family:var(--disp); font-weight:700; font-size:20px; margin-bottom:20px}
.step h3{font-size:21px; margin-bottom:10px}

/* Audience two-col */
.two-col{display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center}
.two-col.reverse .col-text{order:2}
.two-col.reverse .col-visual{order:1}
.feature-list{list-style:none; margin:22px 0 30px; padding:0; display:grid; gap:16px}
.feature-list li{position:relative; padding-left:32px; font-size:16.5px; color:var(--body)}
.feature-list li b{color:var(--ink)}
.feature-list li::before{content:""; position:absolute; left:0; top:7px; width:18px; height:18px; border-radius:6px;
  background:var(--grad); box-shadow:0 4px 10px -4px rgba(103,76,217,.6)}
.col-visual{border-radius:24px; min-height:400px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.visual-customers{background:linear-gradient(150deg,#2F7FEE,#674CD9)}
.visual-movers{background:linear-gradient(150deg,#14143C,#3a2f8a)}
.visual-drivers{background:linear-gradient(150deg,#0E9F8E,#2F7FEE)}
.col-visual::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px 260px at 75% 20%, rgba(255,255,255,.28), transparent 60%)}
.col-visual img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* Trust */
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.trust-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm)}
.trust-card h3{font-size:18px; margin-bottom:10px}
.trust-card p{font-size:15px}

/* FAQ */
.faq-list{display:grid; gap:12px}
.faq-list details{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:6px 6px}
.faq-list summary{cursor:pointer; list-style:none; padding:18px 20px; font-family:var(--disp); font-weight:600;
  font-size:17px; color:var(--ink); display:flex; justify-content:space-between; align-items:center}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+"; font-size:22px; color:var(--iris); font-weight:400}
.faq-list details[open] summary::after{content:"–"}
.faq-list details p{padding:0 20px 20px; font-size:15.5px}

/* Download CTA */
.cta-card{background:var(--grad-dark); border-radius:28px; padding:clamp(40px,6vw,72px); text-align:center; color:#fff; position:relative; overflow:hidden}
.cta-card::before{content:""; position:absolute; inset:0; background:radial-gradient(700px 320px at 80% 0%, rgba(47,127,238,.4), transparent 60%)}
.cta-card>*{position:relative}
.cta-card h2{color:#fff; margin-bottom:14px}
.cta-card p{color:#dfe3f4; max-width:52ch; margin:0 auto 28px}
.store-badges{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:26px}
.store-badge{display:flex; flex-direction:column; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
  border-radius:12px; padding:12px 22px; font-family:var(--disp); font-weight:600; color:#fff; font-size:16px}
.store-badge small{font-family:var(--sans); font-weight:500; color:#b9c0e0; font-size:11px}

/* ── Footer ──────────────────────────────────────────────── */
.site-footer{background:var(--navy); color:#c9cde3; padding:70px 0 34px}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px}
.footer-logo{height:30px; margin-bottom:16px}
.footer-brand p{font-size:14.5px; max-width:36ch; color:#a6abca}
.social{display:flex; gap:10px; margin-top:18px}
.social a{width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center; color:#fff; transition:background .2s,border-color .2s}
.social a svg{width:17px; height:17px; fill:currentColor}
.social a:hover{background:var(--grad); border-color:transparent}
.footer-col h4{color:#fff; font-size:14px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px}
.footer-col a{display:block; padding:6px 0; font-size:14.5px; color:#a6abca}
.footer-col a:hover{color:#fff}
.footer-legal{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:44px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1); font-size:13px; color:#8b90b0}

/* ── Legal pages ─────────────────────────────────────────── */
.legal{padding:140px 0 90px}
.legal .wrap{max-width:840px}
.legal h1{font-size:clamp(30px,5vw,44px); margin-bottom:8px}
.legal .updated{color:var(--muted); font-size:14px; margin-bottom:24px}
.legal .intro{background:var(--bg-tint); border:1px solid #DED9FA; border-radius:14px;
  padding:18px 20px; margin-bottom:12px; color:var(--ink); font-size:15.5px; line-height:1.65}
.legal h2{font-size:21px; margin:34px 0 12px; color:var(--ink)}
.legal p{font-size:16px; color:var(--body); margin-bottom:12px; line-height:1.6}
.legal ul{padding-left:20px; margin:0 0 10px}
.legal li{font-size:15.5px; color:var(--body); margin-bottom:10px; line-height:1.55}
.legal a{color:var(--azure); font-weight:600}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:960px){
  .nav{position:fixed; inset:0 0 0 auto; width:min(320px,86vw); flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:6px; background:var(--navy); padding:96px 28px 28px; transform:translateX(100%); transition:transform .3s ease; z-index:90}
  .nav.open{transform:translateX(0); box-shadow:-20px 0 60px -20px rgba(0,0,0,.5)}
  .nav a{color:#fff !important; font-size:17px; padding:12px 0; width:100%}
  .nav a.btn{margin-top:14px; width:100%}
  .hamburger{display:flex; z-index:95}
  .hamburger.active span{background:#fff !important}
  .hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hamburger.active span:nth-child(2){opacity:0}
  .hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .steps{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr; gap:34px}
  .two-col.reverse .col-text,.two-col.reverse .col-visual{order:0}
  .col-visual{min-height:280px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:600px){
  .ba-grid{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-inner{padding:110px 0 80px}
  .hero-cta .btn{flex:1 1 auto}
  .stat{flex:1 1 40%; min-width:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; scroll-behavior:auto !important}
}