*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary:#BF2628;--primary-light:#e63336;--primary-dark:#8f1d1f;
  --bg:#ffffff;--bg-alt:#f5f5f7;--bg-card:#ffffff;
  --text:#1d1d1f;--text-secondary:#6e6e73;--text-tertiary:#86868b;
  --border:#d2d2d7;--shadow:0 2px 12px rgba(0,0,0,.08);
  --shadow-lg:0 8px 32px rgba(0,0,0,.12);
  --radius:16px;--radius-sm:10px;
  --transition:0.3s cubic-bezier(.4,0,.2,1);
  --header-bg:rgba(255,255,255,.72);
  --glass:rgba(255,255,255,.6);
}
[data-theme="dark"]{
  --bg:#0a0a0a;--bg-alt:#141414;--bg-card:#1c1c1e;
  --text:#f5f5f7;--text-secondary:#a1a1a6;--text-tertiary:#6e6e73;
  --border:#38383a;--shadow:0 2px 12px rgba(0,0,0,.3);
  --shadow-lg:0 8px 32px rgba(0,0,0,.5);
  --header-bg:rgba(10,10,10,.72);
  --glass:rgba(28,28,30,.6);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.5;transition:background var(--transition),color var(--transition)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
ul{list-style:none}

/* ─── Header ─── */
.header{position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--header-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);transition:background var(--transition)}
.header-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:56px;
  display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.2rem}
.logo svg,.logo img{width:32px;height:32px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{padding:7px 14px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;
  transition:background var(--transition),color var(--transition);color:var(--text-secondary)}
.nav a:hover,.nav a.active{color:var(--text);background:var(--bg-alt)}

/* ─── Controls ─── */
.controls{display:flex;align-items:center;gap:6px}
.theme-toggle{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:background var(--transition);font-size:1.1rem}
.theme-toggle:hover{background:var(--bg-alt)}
.lang-select{padding:5px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--bg-card);color:var(--text);font-size:.8rem;font-weight:500;
  transition:border-color var(--transition);outline:none;cursor:pointer}
.lang-select:hover{border-color:var(--primary)}

/* ─── Mobile menu toggle ─── */
.menu-toggle{display:none;width:36px;height:36px;border-radius:50%;align-items:center;justify-content:center;
  transition:background var(--transition)}
.menu-toggle:hover{background:var(--bg-alt)}
.menu-toggle span{display:block;width:18px;height:2px;background:var(--text);
  transition:transform var(--transition);position:relative}
.menu-toggle span::before,.menu-toggle span::after{content:'';position:absolute;
  width:18px;height:2px;background:var(--text);transition:transform var(--transition)}
.menu-toggle span::before{top:-5px}
.menu-toggle span::after{top:5px}

/* ─── Hero (side-by-side layout) ─── */
.hero{padding:80px 24px 40px;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-alt) 100%)}
.hero-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:48px}
.hero-content{flex:1;text-align:left}
.hero-badge{display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px;border-radius:999px;background:rgba(191,38,40,.1);
  color:var(--primary);font-size:.8rem;font-weight:600;margin-bottom:20px}
.hero h1{font-size:clamp(2rem,4vw,3.25rem);font-weight:800;line-height:1.1;
  letter-spacing:-.02em;margin-bottom:14px}
.hero h1 span{color:var(--primary)}
.hero p{font-size:clamp(.95rem,1.5vw,1.125rem);color:var(--text-secondary);
  max-width:520px;margin-bottom:24px;line-height:1.6}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;
  border-radius:var(--radius-sm);font-weight:600;font-size:.875rem;
  transition:all var(--transition)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-light);transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.btn-secondary{background:var(--bg-card);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--primary);transform:translateY(-1px)}
.btn svg{width:18px;height:18px}

/* ─── Phone mockup — premium clean design ─── */
.hero-image{flex-shrink:0;width:240px}
.phone-float{position:relative;animation:phoneFloat 6s ease-in-out infinite}
.phone-glow{position:absolute;top:50%;left:50%;width:240px;height:340px;
  background:radial-gradient(ellipse,rgba(191,38,40,.3) 0%,transparent 70%);
  border-radius:50%;transform:translate(-50%,-50%);filter:blur(50px);
  animation:glowPulse 4s ease-in-out infinite;z-index:0}
.phone-mockup-pro{position:relative;z-index:1;width:100%;
  background:var(--bg-card);border-radius:44px;padding:6px;
  border:2px solid var(--border);
  box-shadow:0 30px 80px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.05)}
.phone-dynamic-island{position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:72px;height:16px;background:#1c1c1e;border-radius:20px;z-index:20}
.phone-screen-pro{width:100%;border-radius:34px;aspect-ratio:9/19.5;
  overflow:hidden;position:relative;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary),var(--primary-light));
  display:flex;align-items:center;justify-content:center}
.phone-logo-screen{display:flex;align-items:center;justify-content:center}
.phone-logo-screen img{width:60px;height:60px;opacity:.9;
  animation:logoPulse 3s ease-in-out infinite}
@keyframes logoPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}

@keyframes phoneFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes glowPulse{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}

/* Dark mode phone */
[data-theme="dark"] .phone-mockup-pro{background:#000;border-color:#333;
  box-shadow:0 30px 80px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.06) inset}


/* ─── Features ─── */
.features{padding:72px 24px;background:var(--bg)}
.section-inner{max-width:1100px;margin:0 auto}
.section-header{text-align:center;margin-bottom:48px}
.section-header h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;margin-bottom:10px}
.section-header p{color:var(--text-secondary);font-size:1rem;max-width:480px;margin:0 auto}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature-card{padding:28px;border-radius:var(--radius);background:var(--bg-card);
  border:1px solid var(--border);transition:all var(--transition)}
.feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--primary)}
.feature-icon{width:44px;height:44px;border-radius:11px;
  background:rgba(191,38,40,.1);color:var(--primary);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.feature-card h3{font-size:1.05rem;font-weight:600;margin-bottom:6px}
.feature-card p{color:var(--text-secondary);font-size:.875rem;line-height:1.55}

/* ─── Legacy Protection ─── */
.legacy{padding:80px 24px;
  background:linear-gradient(180deg,var(--bg-alt) 0%,var(--bg) 100%)}
.legacy-header{text-align:center;margin-bottom:48px}
.legacy-header h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;margin:16px 0 14px;line-height:1.2}
.legacy-header h2 span{color:var(--primary)}
.legacy-subtitle{color:var(--text-secondary);font-size:1.05rem;max-width:640px;margin:0 auto;line-height:1.7}
.legacy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;margin:0 auto}
.legacy-card{padding:32px 24px;border-radius:var(--radius);
  background:var(--bg-card);border:2px solid var(--border);
  text-align:center;transition:all var(--transition)}
.legacy-card:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.legacy-icon{width:56px;height:56px;border-radius:50%;
  background:rgba(191,38,40,.1);color:var(--primary);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.legacy-card h3{font-size:1.1rem;font-weight:600;margin-bottom:8px}
.legacy-card p{color:var(--text-secondary);font-size:.875rem;line-height:1.6}

/* ─── Stats ─── */
.stats{padding:56px 24px;background:var(--bg-alt)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  max-width:1100px;margin:0 auto;text-align:center}
.stat-item h3{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:800;color:var(--primary)}
.stat-item p{color:var(--text-secondary);font-size:.875rem;margin-top:4px}

/* ─── Download ─── */
.download{padding:72px 24px;background:var(--bg);text-align:center}
.download-inner{max-width:580px;margin:0 auto}
.download h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;margin-bottom:12px}
.download p{color:var(--text-secondary);font-size:1rem;margin-bottom:32px;line-height:1.6}
.download-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.store-btn{display:flex;align-items:center;gap:10px;padding:12px 20px;
  border-radius:var(--radius-sm);background:var(--text);color:var(--bg);
  transition:all var(--transition);border:1px solid transparent}
.store-btn:hover{opacity:.85;transform:translateY(-2px)}
.store-btn svg{width:24px;height:24px;flex-shrink:0}
.store-btn-text{text-align:left}
.store-btn-text small{font-size:.65rem;opacity:.8;display:block}
.store-btn-text strong{font-size:.925rem;display:block}

/* ─── Footer ─── */
.footer{padding:24px 24px;background:var(--bg-alt);border-top:1px solid var(--border)}
.footer-inner{max-width:1100px;margin:0 auto;text-align:center}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-links a{color:var(--text-secondary);font-size:.8rem;transition:color var(--transition)}
.footer-links a:hover{color:var(--primary)}
.footer-copy{color:var(--text-tertiary);font-size:.72rem}

/* ─── Legal pages ─── */
.legal{padding:100px 24px 60px;background:var(--bg);min-height:100vh}
.legal-inner{max-width:760px;margin:0 auto}
.legal h1{font-size:clamp(1.5rem,3.5vw,2.25rem);font-weight:700;margin-bottom:8px}
.legal .updated{color:var(--text-tertiary);font-size:.85rem;margin-bottom:32px;display:block}
.legal h2{font-size:1.15rem;font-weight:600;margin:28px 0 10px;color:var(--text)}
.legal p,.legal li{color:var(--text-secondary);font-size:.9rem;line-height:1.75;margin-bottom:10px}
.legal ul{padding-left:24px;list-style:disc}
.legal a{color:var(--primary);text-decoration:underline}

/* ─── Animations ─── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .5s ease forwards}
[data-delay="1"]{animation-delay:.1s}
[data-delay="2"]{animation-delay:.15s}
[data-delay="3"]{animation-delay:.2s}
[data-delay="4"]{animation-delay:.25s}

/* Scroll reveal - starts visible, animates in when observed */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ═══════════════════════════════════════
   TABLET — 769px - 1024px
   ═══════════════════════════════════════ */
@media(max-width:1024px){
  .hero-inner{gap:32px}
  .hero-image{width:210px}
  .features-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .features{padding:60px 24px}
  .legacy{padding:60px 24px}
  .legacy-grid{grid-template-columns:repeat(3,1fr);gap:16px}
}

/* ═══════════════════════════════════════
   MOBILE — up to 768px
   ═══════════════════════════════════════ */
@media(max-width:768px){
  /* Header & Nav */
  .header-inner{padding:0 16px;height:52px}
  .logo{font-size:1.1rem;gap:8px}
  .logo svg,.logo img{width:28px;height:28px}
  .menu-toggle{display:flex}
  .nav{position:fixed;top:52px;left:0;right:0;background:var(--header-bg);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    flex-direction:column;padding:12px 16px;gap:2px;
    border-bottom:1px solid var(--border);
    transform:translateY(-120%);transition:transform var(--transition);pointer-events:none;
    visibility:hidden}
  .nav.open{transform:translateY(0);pointer-events:all;visibility:visible}
  .nav a{width:100%;padding:10px 14px;border-radius:var(--radius-sm)}

  /* Hero - stack on mobile, phone hidden or tiny */
  .hero{padding:80px 16px 40px}
  .hero-inner{flex-direction:column;gap:24px;text-align:center}
  .hero-content{text-align:center}
  .hero p{margin:0 auto 24px}
  .hero-buttons{justify-content:center}
  .hero-badge{margin-bottom:14px}
  .hero h1{font-size:clamp(1.6rem,6vw,2.25rem);margin-bottom:10px}
  .hero p{font-size:.9rem}
  .btn{padding:11px 20px;font-size:.85rem}

  /* Phone - hidden on mobile */
  .hero-image{display:none}
  /* Features */
  .features{padding:40px 16px}
  .section-header{margin-bottom:28px}
  .section-header p{font-size:.85rem}
  .features-grid{grid-template-columns:1fr 1fr;gap:10px}
  .feature-card{padding:18px 14px}
  .feature-icon{width:36px;height:36px;border-radius:9px;margin-bottom:12px}
  .feature-icon svg{width:18px;height:18px}
  .feature-card h3{font-size:.95rem;margin-bottom:4px}
  .feature-card p{font-size:.8rem;line-height:1.45}

  /* Legacy */
  .legacy{padding:40px 16px}
  .legacy-header{margin-bottom:28px}
  .legacy-subtitle{font-size:.9rem}
  .legacy-grid{grid-template-columns:1fr;gap:12px}
  .legacy-card{padding:20px 16px}
  .legacy-icon{width:44px;height:44px;margin-bottom:12px}
  .legacy-icon svg{width:22px;height:22px}

  /* Stats */
  .stats{padding:32px 16px}
  .stats-grid{grid-template-columns:repeat(4,1fr);gap:12px}
  .stat-item h3{font-size:clamp(1.25rem,5vw,1.75rem)}
  .stat-item p{font-size:.75rem}

  /* Download */
  .download{padding:40px 16px}
  .download h2{margin-bottom:10px}
  .download p{margin-bottom:24px;font-size:.9rem}
  .download-buttons{gap:10px}
  .store-btn{padding:10px 16px;gap:8px}
  .store-btn svg{width:22px;height:22px}
  .store-btn-text small{font-size:.6rem}
  .store-btn-text strong{font-size:.85rem}

  /* Footer */
  .footer{padding:24px 16px}
  .footer-inner{flex-direction:column;align-items:center;gap:12px;text-align:center}
  .footer-links{gap:14px;justify-content:center}
  .footer-links a{font-size:.8rem}
  .footer-copy{font-size:.75rem}

  /* Legal */
  .legal{padding:72px 16px 40px}
  .legal .updated{margin-bottom:24px}
  .legal h2{margin:20px 0 8px}
}

/* ═══════════════════════════════════════
   SMALL PHONES — up to 380px
   ═══════════════════════════════════════ */
@media(max-width:380px){
  .hero h1{font-size:1.5rem}
  .hero-image{display:none}
  .features-grid{grid-template-columns:1fr;gap:10px}
  .hero-buttons{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .download-buttons{flex-direction:column;align-items:stretch}
  .store-btn{justify-content:center}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:12px}
}