/*
Theme Name:  Navigui
Theme URI:   https://navigui.app
Author:      Navigui
Author URI:  https://navigui.app
Description: Landing page theme for Navigui — navigation multimodale pour les transports en commun d'Alger.
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: navigui
Tags:        one-page, dark, custom-menu, custom-logo, responsive-layout
*/

/* ─── RESET & BASE ──────────────────────────────────────────── */
:root {
  --brand-red:     #FF3D57;
  --brand-red-dark:#CC1F3A;
  --metro-blue:    #1A73E8;
  --bus-orange:    #FF6B00;
  --tram-green:    #00C17C;
  --bg-dark:       #0D0D0D;
  --bg-card:       #161616;
  --bg-elevated:   #1F1F1F;
  --text-primary:  #FFFFFF;
  --text-secondary:#A0A0A0;
  --text-muted:    #5A5A5A;
  --hairline:      rgba(255,255,255,0.08);
  --hairline-2:    rgba(255,255,255,0.14);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-dark);
  color: var(--text-primary);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}
p  { margin: 0; }
a  { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
img, svg { display: block; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* ─── NAVBAR ────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 16px 16px auto 16px; z-index: 50;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  background: rgba(13,13,13,0.7);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 12px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: 1240px; margin: 0 auto;
}
.logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "Nunito"; font-weight: 900; font-size: 22px; letter-spacing: -0.02em;
}
.logo .pin {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand-red);
  filter: drop-shadow(0 4px 14px rgba(255,61,87,0.5));
}
.logo span b { color: var(--brand-red); font-weight: 900; }

/* WordPress nav_menu outputs a <ul> with menu_class */
.nav-links {
  display: flex; align-items: center; gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.nav-links li { margin: 0; }
.nav-links a {
  padding: 9px 14px; border-radius: 10px;
  font-weight: 500; font-size: 14.5px; color: var(--text-secondary);
  transition: color .2s ease, background .2s ease;
  display: block;
}
.nav-links a:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
/* Hide WP sub-menus — single-page theme */
.nav-links ul { display: none; }

.nav-cta {
  background: var(--brand-red); color: #fff;
  padding: 10px 18px; border-radius: 11px;
  font-weight: 600; font-size: 14.5px;
  box-shadow: 0 8px 24px -8px rgba(255,61,87,0.6), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--brand-red-dark);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -8px rgba(255,61,87,0.7);
}
.nav-burger { display: none; }

/* ─── HERO ──────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  padding: 160px 0 120px;
  isolation: isolate;
}
.hero-bg {
  position: absolute; inset: -10% -10% -10% -10%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(800px 600px at 70% 30%, rgba(255,61,87,0.18), transparent 60%),
    radial-gradient(700px 500px at 20% 80%, rgba(26,115,232,0.12), transparent 60%),
    radial-gradient(900px 600px at 50% 0%, rgba(255,255,255,0.04), transparent 70%);
}
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(80px); pointer-events: none; z-index: -1; will-change: transform;
}
.blob-1 { width:520px; height:520px; background:var(--metro-blue); opacity:.30; left:-120px; top:80px;    animation:blob1 18s ease-in-out infinite; }
.blob-2 { width:480px; height:480px; background:var(--bus-orange); opacity:.28; right:-100px; top:200px;   animation:blob2 22s ease-in-out infinite; }
.blob-3 { width:560px; height:560px; background:var(--tram-green); opacity:.25; left:30%; bottom:-200px;   animation:blob3 26s ease-in-out infinite; }

@keyframes blob1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(40px,-30px) scale(1.1); }
  66%     { transform: translate(-20px,20px) scale(.9); }
}
@keyframes blob2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-50px,40px) scale(1.08); }
}
@keyframes blob3 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(60px,-50px) scale(.92); }
  80%     { transform: translate(-30px,30px) scale(1.06); }
}

.hero-grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center;
}
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,61,87,0.10);
  border: 1px solid rgba(255,61,87,0.28);
  color: #FFD3DA;
  padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
}
.badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-red);
  box-shadow: 0 0 0 4px rgba(255,61,87,0.18);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.55; } }

.hero h1 { font-size: clamp(48px, 7.2vw, 86px); margin-top: 22px; }
.hero h1 .accent { color: var(--brand-red); }
.hero .sub {
  margin-top: 22px; font-size: 19px;
  color: var(--text-secondary); max-width: 560px; line-height: 1.55;
}
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.btn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 15px 22px; border-radius: 14px; font-weight: 600; font-size: 15px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  border: 1px solid transparent; will-change: transform;
}
.btn .ico { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary {
  background: var(--brand-red); color: #fff;
  box-shadow: 0 14px 38px -12px rgba(255,61,87,0.65), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover {
  transform: scale(1.04);
  box-shadow: 0 22px 48px -10px rgba(255,61,87,0.8), inset 0 1px 0 rgba(255,255,255,0.22);
  background: #FF4F66;
}
.btn-secondary {
  background: rgba(255,255,255,0.04);
  border-color: var(--hairline-2);
  color: #fff;
}
.btn-secondary:hover {
  transform: scale(1.04);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
}

.stats {
  margin-top: 46px;
  display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap;
  color: var(--text-secondary); font-size: 14.5px;
}
.stats b { color: #fff; font-weight: 700; }
.stats .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); }
.stars { color: #FFC542; letter-spacing: .05em; }

/* ── Phone mockup ── */
.phone-stage {
  position: relative; display: flex; justify-content: center; align-items: center;
  perspective: 1600px; min-height: 640px;
}
.phone {
  position: relative;
  width: 320px; height: 640px; border-radius: 46px;
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  padding: 12px;
  box-shadow:
    0 60px 120px -20px rgba(0,0,0,0.7),
    0 30px 60px -20px rgba(255,61,87,0.25),
    inset 0 0 0 1.5px rgba(255,255,255,0.06),
    inset 0 0 0 4px #050505;
  transform: perspective(1200px) rotateY(-15deg) rotateX(5deg);
  animation: float 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes float {
  0%,100% { transform: perspective(1200px) rotateY(-15deg) rotateX(5deg) translateY(0); }
  50%     { transform: perspective(1200px) rotateY(-15deg) rotateX(5deg) translateY(-16px); }
}
.phone .notch {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 28px; border-radius: 18px; background: #000; z-index: 5;
}
.phone-screen {
  width: 100%; height: 100%; border-radius: 36px; overflow: hidden;
  background: #0a0a0a; position: relative; display: flex; flex-direction: column;
}
.pstatus {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px 6px; font-size: 12px; font-weight: 600; color: #fff;
}
.pstatus .right { display: flex; align-items: center; gap: 5px; }
.psearch {
  margin: 36px 14px 12px;
  background: #1a1a1a; border: 1px solid #232323; border-radius: 14px;
  padding: 13px 14px; display: flex; align-items: center; gap: 10px;
  color: #9a9a9a; font-size: 13.5px;
}
.psearch .ico { width: 16px; height: 16px; color: var(--brand-red); }
.pmap {
  flex: 1; margin: 6px 14px; border-radius: 18px;
  background:
    radial-gradient(circle at 30% 20%, rgba(26,115,232,0.18), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(0,193,124,0.15), transparent 50%),
    #101010;
  position: relative; overflow: hidden; border: 1px solid #1d1d1d;
}
.pmap::before, .pmap::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  transform: perspective(400px) rotateX(40deg);
  transform-origin: center 70%;
  opacity: .6;
}
.proute { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.pchips { display: flex; gap: 7px; padding: 0 14px; margin-top: 6px; flex-wrap: wrap; }
.pchip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #1a1a1a; border: 1px solid #242424; color: #fff;
  padding: 7px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
}
.pchip .sw { width: 8px; height: 8px; border-radius: 50%; }
.pchip.m .sw { background: var(--metro-blue); }
.pchip.b .sw { background: var(--bus-orange); }
.pchip.t .sw { background: var(--tram-green); }
.pchip.active { background: rgba(255,61,87,0.14); border-color: rgba(255,61,87,0.4); color: #fff; }
.ptrip {
  margin: 12px 14px 18px; background: #141414; border: 1px solid #1f1f1f; border-radius: 16px;
  padding: 14px; display: flex; align-items: center; gap: 12px;
}
.ptrip-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,61,87,0.15); color: var(--brand-red);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ptrip-title { font-size: 14px; font-weight: 700; color: #fff; }
.ptrip-sub   { font-size: 11.5px; color: #888; margin-top: 2px; }
.ptrip-time  { margin-left: auto; font-family: "Nunito"; font-weight: 900; font-size: 18px; color: #fff; }

.float-card {
  position: absolute;
  background: rgba(22,22,22,0.85);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hairline-2);
  border-radius: 14px; padding: 11px 14px;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.55);
  display: flex; align-items: center; gap: 10px;
  z-index: 2;
}
.float-card .pill {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-family: "Nunito"; font-size: 14px;
}
.float-card .t1 { font-size: 12.5px; font-weight: 700; color: #fff; }
.float-card .t2 { font-size: 11px; color: var(--text-secondary); }
.fc-1 { left: -10px; top: 90px; animation: float 7s ease-in-out infinite; }
.fc-1 .pill { background: var(--metro-blue); }
.fc-2 { right: -20px; top: 320px; animation: float 6.4s ease-in-out infinite reverse; }
.fc-2 .pill { background: var(--tram-green); }

/* ─── SECTION HEADERS ───────────────────────────────────────── */
section { position: relative; }
.section { padding: 120px 0; }
.section-head { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.eyebrow {
  display: inline-block; color: var(--brand-red);
  font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 14px;
}
.section-head h2 { font-size: clamp(36px, 5vw, 56px); }
.section-head p  { margin-top: 18px; color: var(--text-secondary); font-size: 18px; }

/* ─── FEATURES ──────────────────────────────────────────────── */
.features { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.f-card {
  position: relative;
  background: linear-gradient(180deg, var(--bg-card) 0%, #121212 100%);
  border: 1px solid var(--hairline);
  border-radius: 22px; padding: 30px 26px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  transform-style: preserve-3d; will-change: transform;
  overflow: hidden;
}
.f-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(400px 200px at var(--mx,50%) var(--my,50%), rgba(255,61,87,0.10), transparent 60%);
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.f-card:hover { border-color: var(--hairline-2); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6); }
.f-card:hover::before { opacity: 1; }
.f-icon {
  width: 54px; height: 54px; border-radius: 14px;
  background: rgba(255,61,87,0.10); color: var(--brand-red);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  transform: translateZ(30px);
}
.f-card h3 { font-size: 22px; margin-bottom: 10px; transform: translateZ(20px); }
.f-card p  { color: var(--text-secondary); font-size: 15px; line-height: 1.6; transform: translateZ(10px); }

.f-card.tone-metro .f-icon { background: rgba(26,115,232,0.12); color: var(--metro-blue); }
.f-card.tone-bus   .f-icon { background: rgba(255,107,0,0.12);  color: var(--bus-orange); }
.f-card.tone-tram  .f-icon { background: rgba(0,193,124,0.12);  color: var(--tram-green); }

/* ─── MODES ─────────────────────────────────────────────────── */
.modes { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.mode {
  position: relative;
  border-radius: 24px; padding: 32px;
  color: #fff; overflow: hidden;
  min-height: 300px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .3s ease, box-shadow .3s ease;
  isolation: isolate;
}
.mode::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.16), transparent 60%);
}
.mode::after {
  content: ""; position: absolute; right: -60px; bottom: -60px;
  width: 240px; height: 240px; border-radius: 50%;
  background: rgba(255,255,255,0.10); z-index: -1;
}
.mode:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5); }
.mode.metro { background: var(--metro-blue); }
.mode.bus   { background: var(--bus-orange); }
.mode.tram  { background: var(--tram-green); }
.mode-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mode-icon {
  width: 60px; height: 60px; border-radius: 16px;
  background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px);
}
.mode .av-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff; padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.mode .av-badge .d {
  width: 7px; height: 7px; border-radius: 50%;
  background: #9CFFB7; box-shadow: 0 0 0 3px rgba(156,255,183,0.25);
}
.mode h3   { font-size: 32px; margin-top: 24px; }
.mode .net { margin-top: 8px; font-size: 14.5px; color: rgba(255,255,255,0.9); font-weight: 600; letter-spacing: .01em; }
.mode .route {
  margin-top: 18px; font-size: 14px; color: rgba(255,255,255,0.85);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.mode .route .chip {
  background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.18);
  padding: 5px 10px; border-radius: 8px; font-weight: 600; font-size: 12.5px;
}

/* ─── DOWNLOAD CTA ──────────────────────────────────────────── */
.download {
  position: relative; overflow: hidden;
  border-radius: 32px;
  margin: 120px auto; max-width: 1180px;
  padding: 90px 60px;
  text-align: center;
  background: linear-gradient(180deg, #141414 0%, #0a0a0a 100%);
  border: 1px solid var(--hairline);
  isolation: isolate;
}
.download::before {
  content: ""; position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  width: 700px; height: 700px; border-radius: 50%;
  background: var(--brand-red);
  filter: blur(140px); opacity: .35; z-index: -1;
}
.download h2 { font-size: clamp(40px, 5.4vw, 64px); }
.download h2 .accent { color: var(--brand-red); }
.download p.sub {
  margin-top: 18px; color: var(--text-secondary); font-size: 18px;
  max-width: 580px; margin-left: auto; margin-right: auto;
}
.dl-actions { margin-top: 36px; display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; }
.dl-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--brand-red); color: #fff;
  padding: 14px 22px; border-radius: 14px; font-weight: 600;
  box-shadow: 0 14px 38px -12px rgba(255,61,87,0.65), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.store-btn:hover { transform: scale(1.04); background: #FF4F66; box-shadow: 0 22px 48px -10px rgba(255,61,87,0.8); }
.store-btn .ico { width: 28px; height: 28px; }
.store-btn .t { display: flex; flex-direction: column; text-align: left; line-height: 1.1; }
.store-btn .t small { font-size: 10.5px; font-weight: 500; opacity: .85; letter-spacing: .04em; }
.store-btn .t b { font-size: 17px; font-weight: 700; font-family: "Nunito"; }
.qr {
  width: 128px; height: 128px; border-radius: 18px;
  background: #fff; color: #0d0d0d;
  display: flex; align-items: center; justify-content: center;
  font-family: "Nunito"; font-weight: 900; font-size: 14px;
  border: 6px solid #fff;
  box-shadow: 0 14px 38px -12px rgba(255,255,255,0.15);
  background-image:
    linear-gradient(45deg,  #0d0d0d 25%, transparent 25%),
    linear-gradient(-45deg, #0d0d0d 25%, transparent 25%),
    linear-gradient(45deg,  transparent 75%, #0d0d0d 75%),
    linear-gradient(-45deg, transparent 75%, #0d0d0d 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}
.qr span { background: #fff; padding: 5px 10px; border-radius: 6px; }
.review {
  margin-top: 44px; color: var(--text-secondary); font-size: 15px;
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
}
.review .quote { color: #fff; font-weight: 500; font-style: italic; max-width: 480px; }
.review .who   { color: var(--text-muted); font-size: 13px; }

/* ─── FOOTER ────────────────────────────────────────────────── */
footer { padding: 60px 0 80px; border-top: 1px solid var(--hairline); margin-top: 40px; }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-copy { color: var(--text-muted); font-size: 13.5px; }
.foot-links { display: flex; gap: 6px; flex-wrap: wrap; }
.foot-links a { padding: 8px 12px; border-radius: 9px; color: var(--text-secondary); font-size: 13.5px; font-weight: 500; transition: color .2s ease, background .2s ease; }
.foot-links a:hover { color: #fff; background: rgba(255,255,255,0.05); }

/* ─── GENERIC PAGE (page.php) ───────────────────────────────── */
.page-wrap { max-width: 800px; margin: 0 auto; padding: 140px 32px 80px; }
.page-wrap h1 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 28px; }
.page-wrap .entry-content {
  color: var(--text-secondary); font-size: 17px; line-height: 1.75;
}
.page-wrap .entry-content p  { margin-bottom: 16px; }
.page-wrap .entry-content a  { color: var(--brand-red); text-decoration: underline; }
.page-wrap .entry-content h2 { font-size: 28px; margin: 36px 0 14px; color: #fff; }
.page-wrap .entry-content h3 { font-size: 22px; margin: 28px 0 10px; color: #fff; }

/* ─── SCROLL REVEAL ─────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-grid { gap: 40px; }
  .hero { padding: 140px 0 80px; }
}
@media (max-width: 860px) {
  .nav { inset: 10px 10px auto 10px; padding: 10px 14px; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: rgba(13,13,13,0.96); border: 1px solid var(--hairline);
    border-radius: 14px; padding: 12px; gap: 4px;
  }
  .nav-burger {
    display: inline-flex; width: 40px; height: 40px;
    align-items: center; justify-content: center;
    border-radius: 10px; background: rgba(255,255,255,0.05);
    border: 1px solid var(--hairline);
  }
  .hero { padding: 140px 0 60px; }
  .hero-grid { grid-template-columns: 1fr; text-align: left; }
  .phone-stage { order: -1; min-height: 560px; margin-bottom: 8px; }
  .phone { animation: floatPlain 6s ease-in-out infinite; transform: none; }
  @keyframes floatPlain {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-12px); }
  }
  .features { grid-template-columns: 1fr; }
  .modes    { grid-template-columns: 1fr; }
  .section  { padding: 80px 0; }
  .download { padding: 60px 28px; margin: 80px 16px; }
  .dl-actions { flex-direction: column; gap: 24px; }
  .foot { flex-direction: column; align-items: flex-start; }
  .page-wrap { padding: 120px 20px 60px; }
}
@media (max-width: 520px) {
  .wrap { padding: 0 20px; }
  .hero h1 { font-size: 46px; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .stats { font-size: 13.5px; }
  .phone { width: 280px; height: 560px; }
  .phone-stage { min-height: 520px; }
  .fc-1 { left: -4px; top: 60px; transform: scale(.85); }
  .fc-2 { right: -4px; top: 280px; transform: scale(.85); }
}