:root{
  --accent:#0A84FF;
  --bg: #0b0c10;
  --bg-2: #0f1116;
  --card: #0c0f14cc;
  --text: #0e1111;
  --muted: #5a6169;
  --radius: 20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:#0b0d12; background:#f7f9fc; line-height:1.6; letter-spacing:-.01em
}
@media (prefers-color-scheme: dark){
  body{ color:#e5e9f2; background: radial-gradient(1200px 800px at 20% -10%, #0a1730, #0a0d14 60%) fixed }
  header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.72);backdrop-filter:saturate(1.15) blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.06)}
  .card, .feature-card{ background: rgba(16,19,26,.5); border-color: rgba(255,255,255,.08) }
  .hero .device{ box-shadow: 0 20px 60px rgba(0,0,0,.6) }
}
.container{ max-width:1200px; margin:auto; padding:0 20px }
.btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:600; color:white; background:var(--accent); border:1px solid rgba(0,0,0,.06); box-shadow: 0 10px 24px rgba(10,132,255,.25)}
.btn.ghost{ background:transparent; color:inherit; border-color:rgba(0,0,0,.12) }
.store{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid rgba(0,0,0,.08);background:transparent;font-weight:700;text-decoration:none;color:inherit;font-size:14px}
.store .meta{ line-height:1.1; font-size:12px; opacity:.7 }
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.72);backdrop-filter:saturate(1.15) blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.06)}
.nav .inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 0 }
.logo{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px }
.logo img{ width:34px; height:34px; border-radius:8px }
.logo span{ font-size:clamp(1.05rem,1.6vw,1.35rem); font-weight:900; letter-spacing:-.01em }

.hero{ padding:84px 0 34px }
.hero .grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:center }
h1{ font-size:clamp(2.2rem, 4.2vw, 3.6rem); line-height:1.05; letter-spacing:-.02em; margin:0 0 10px; font-weight:800 }
h2{ font-size:clamp(1.6rem, 2.6vw, 2.2rem); margin:0 0 6px }
p.lead{ font-size:clamp(1.05rem,1.4vw,1.2rem); color:#5e6a75 }
.eyebrow{ font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:.78rem; opacity:.7 }

.device{ border-radius:34px; padding:14px; background:linear-gradient(135deg,#0a0f1a,#101727); border:1px solid rgba(255,255,255,.08) }
.device .screen{ aspect-ratio: 9/19.5; border-radius:26px; background:#0e1422; overflow:hidden; position:relative; border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) }
.device .screen img{ width:100%; height:100%; object-fit:cover }
.notch{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:140px; height:22px; background:#0e1422; border-radius:14px; border:1px solid rgba(255,255,255,.06) }

/* Chips */
.types-row{ display:flex; gap:10px; overflow:auto; padding:10px 0; white-space:nowrap; -webkit-overflow-scrolling:touch }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid rgba(0,0,0,.08); border-radius:999px; font-weight:700; font-size:.95rem; background:rgba(10,132,255,.06) }
.chip svg{ width:14px; height:14px; opacity:.9 }
@media (prefers-color-scheme: dark){ .chip{ border-color:rgba(255,255,255,.1) } }

/* Section génériques */
.section{ padding:56px 0 }
.kicker{ font-weight:800; font-size:.9rem; opacity:.65; text-transform:uppercase; letter-spacing:.1em }
.grid-3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px }
.feature-card{ padding:18px; border-radius:16px; border:1px solid rgba(0,0,0,.06); background:rgba(255,255,255,.6); backdrop-filter: blur(10px) saturate(1.1) }
.feature-card p{ color:#5e6a75 }

/* Phone component + small screens rail */
.phone{ width:clamp(180px, 28vw, 240px); margin:0 auto; border-radius:30px; padding:12px; background:linear-gradient(135deg,#0a0f1a,#101727); border:1px solid rgba(255,255,255,.08); box-shadow: 0 10px 30px rgba(0,0,0,.35) }
.phone .screen{ aspect-ratio:9/19.5; border-radius:22px; overflow:hidden; position:relative; border:1px solid rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) }
.phone .screen img{ width:100%; height:100%; object-fit:cover; display:block }
.phone .notch{ position:absolute; top:8px; left:50%; transform:translateX(-50%); width:120px; height:20px; background:#0e1422; border:1px solid rgba(255,255,255,.06); border-radius:12px }

.screens .rail{ display:flex; gap:12px; overflow-x:auto; padding:8px 2px 2px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch }
.screens .item{ flex:0 0 auto; scroll-snap-align:center; text-align:center }
.screens figcaption{ font-size:.85rem; opacity:.75; margin-top:6px }

/* FAQ */
.faq details{ padding:12px 0; border-bottom:1px solid rgba(0,0,0,.08) }
.faq summary{ cursor:pointer; font-weight:700 }
.faq p{ color:#5e6a75 }

/* Scroll reveal */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease }
.reveal.in{ opacity:1; transform: none }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none } }

/* Footer */
footer{ padding:40px 0; border-top:1px solid rgba(0,0,0,.08) }
.footer-grid{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px }
footer a{ color:inherit; text-decoration:none; opacity:.85 }

/* Responsive */
@media (max-width:980px){ .grid-3{ grid-template-columns:1fr } .hero .grid{ grid-template-columns:1fr } }
@media (max-width:560px){ .phone{ width:clamp(160px, 58vw, 200px) } }

.store svg{width:16px;height:16px}
@media (max-width:560px){
  .store{padding:6px 8px;font-size:12px}
  .store svg{width:14px;height:14px}
}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.nav .links{ display:flex; gap:16px; align-items:center }
.nav .links a{ text-decoration:none; font-weight:600; opacity:.9 }
.nav .links a:link,.nav .links a:visited{ color:inherit }
.nav .links a:hover{ opacity:1; text-decoration:none }

.logo,.logo:link,.logo:visited{ text-decoration:none; color:inherit }
@media (prefers-color-scheme: dark){ header.nav{ background:rgba(12,14,20,.58); border-bottom:1px solid rgba(255,255,255,.08) } }

/* Feature cards — improved readability */
.feature-card{ padding:22px; border-radius:18px; border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.7); backdrop-filter: blur(8px) saturate(1.05);
  transition: box-shadow .2s ease, transform .2s ease }
.feature-card h3{ font-size:1.1rem; margin:0 0 6px }
.feature-card p{ color:#3c4654 }
.feature-card:hover{ box-shadow:0 10px 26px rgba(10,132,255,.10); transform: translateY(-1px) }
@media (prefers-color-scheme: dark){
  .feature-card{ background:rgba(18,22,29,.55); border-color:rgba(255,255,255,.08) }
  .feature-card p{ color:#b9c3cf }
}

/* Feature icons */
.feature-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px }
.feature-icon{ width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; background:linear-gradient(180deg, rgba(10,132,255,.18), rgba(10,132,255,.06));
  border:1px solid rgba(10,132,255,.25) }
.feature-icon svg{ width:16px; height:16px; color:#0A84FF }

/* FAQ — centered, colorful, mobile-friendly */
.faq h2{ text-align:center; margin-bottom:12px }
.faq .sub{ text-align:center; opacity:.7; margin-bottom:16px }
.faq .wrap{ max-width:860px; margin:0 auto }
.faq details{ margin:10px 0; border-radius:14px; border:1px solid rgba(0,0,0,.08); background:rgba(255,255,255,.7); overflow:hidden; }
.faq summary{ list-style:none; cursor:pointer; padding:14px 16px; font-weight:800; display:flex; align-items:center; justify-content:space-between }
.faq summary::-webkit-details-marker{ display:none }
.faq summary .caret{ width:18px; height:18px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:rgba(10,132,255,.12); color:#0A84FF; margin-left:10px }
.faq details[open]{ box-shadow: 0 10px 26px rgba(10,132,255,.12) }
.faq details[open] summary{ color:#0A84FF }
.faq .content{ padding:0 16px 16px 16px; color:#3c4654 }
@media (prefers-color-scheme: dark){
  .faq details{ border-color:rgba(255,255,255,.08); background:rgba(18,22,29,.55) }
  .faq .content{ color:#b9c3cf }
}
/* Mobile tweaks */
@media (max-width: 560px){
  .faq summary{ padding:14px 12px; font-size:1.05rem }
  .faq .content{ padding:0 12px 14px 12px }
}

/* Prevent horizontal scroll globally */
html, body{ overflow-x:hidden }

/* Hero device size on mobile */
@media (max-width: 560px){
  .hero .device{ width:min(88vw, 360px); margin:8px auto 0 }
  .nav .inner{ padding:8px 0 }
  .logo img{ width:28px; height:28px }
  .logo span{ font-size:1rem; font-weight:900 }
}

/* Mobile nav (burger) */
.burger{ display:none; background:transparent; border:none; padding:8px; border-radius:10px; cursor:pointer }
.burger svg{ width:22px; height:22px }
@media (max-width: 820px){
  .nav .links{ display:none }
  .burger{ display:inline-flex }
}
.mobile-menu{ position:fixed; right:16px; width:min(90vw,260px); background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:8px; box-shadow:0 20px 40px rgba(0,0,0,.2); z-index:60 }
.mobile-menu a{ display:block; padding:12px; border-radius:10px; text-decoration:none; font-weight:600; color:inherit }
.mobile-menu a:hover{ background:rgba(10,132,255,.08) }
.hidden{ display:none !important }
@media (prefers-color-scheme: dark){
  .mobile-menu{ background:rgba(14,18,25,.82); border-color:rgba(255,255,255,.08) }
}

/* Better FAQ text */
.faq details > p{ padding:0 16px 16px 16px; margin:0; font-size:1rem; line-height:1.6; color:#3c4654 }
@media (max-width:560px){ .faq details > p{ padding:0 12px 14px 12px } }
@media (prefers-color-scheme: dark){ .faq details > p{ color:#b9c3cf } }

/* --- Mobile polish v6.6 --- */
img{max-width:100%;height:auto}
@media (max-width:560px){
  .container{padding:0 16px}
  h1{font-size:1.8rem; line-height:1.15}
  p.lead{font-size:1rem}
  .types-row{justify-content:center}
  .cta-row{justify-content:center}
  .hero{padding:64px 0 24px}
  .hero .device{width:min(82vw, 320px); margin:10px auto 0}
  .device{border-radius:28px; padding:10px}
  .device .screen{border-radius:20px}
  .notch{width:120px;height:18px;border-radius:12px}
}
/* Clip large shadows inside hero to avoid side glow visual */
.hero .container{overflow:hidden}
/* Ensure no accidental width expansion anywhere */
*{min-width:0}

/* === Mobile : chips icônes seules (pas de texte) === */
@media (max-width:560px){
  .types-row{ justify-content:center; gap:8px }
  .types-row .chip{ padding:10px; font-size:0 }   /* masque le texte sur mobile */
  .types-row .chip svg{ width:22px; height:22px } /* icônes plus lisibles */
}