/* ============================================================
   ZEEPIT — Vitrine stylesheet
   Design tokens 1:1 with /todo/design/zeepit-design.html
   Sections inspired by abrege.app methodology
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --blue-50:#EEF3FF;
  --blue-100:#DCE6FF;
  --blue-200:#B9CBFF;
  --blue-300:#8EAAFF;
  --blue-400:#6E93FF;
  --blue-500:#3D6EF5;
  --blue-600:#2E59E6;
  --blue-700:#1F3FC2;
  --blue-800:#1A3399;
  --grad-blue:linear-gradient(158deg,#5B8DEF 0%,#3D6EF5 46%,#1F3FC2 100%);
  --grad-blue-soft:linear-gradient(158deg,#7AA0F5 0%,#4C7BF0 100%);

  --sunny:#FFC247;
  --sunny-soft:#FFEFC9;
  --sunny-deep:#9A6A00;
  --coral:#FF6B6B;
  --coral-soft:#FFE3E0;
  --coral-deep:#C14040;
  --mint:#2FD3A5;
  --mint-soft:#D6F7EC;
  --mint-deep:#11936F;
  --wa:#25D366;
  --wa-bg:#DCF8C6;

  --ink:#111A2E;
  --ink-2:#5B6373;
  --ink-3:#9AA2B2;
  --surface:#FFFFFF;
  --bg:#F4F7FD;
  --bg-2:#EAF0FB;
  --line:#E7ECF6;
  --line-2:#EFF2F9;

  --r-lg:28px;
  --r-md:20px;
  --r-sm:14px;
  --r-xs:10px;

  --shadow-card:0 1px 2px rgba(16,26,46,.04), 0 8px 24px rgba(31,63,194,.07);
  --shadow-card-lg:0 1px 2px rgba(16,26,46,.04), 0 30px 60px rgba(31,63,194,.12);
  --shadow-pop:0 12px 40px rgba(31,63,194,.18);
  --shadow-btn:0 6px 16px rgba(45,89,230,.35), inset 0 1px 0 rgba(255,255,255,.35);

  --ease:cubic-bezier(.2,.7,.2,1);

  --display:"Fredoka","Inter",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
}
h1,h2,h3,h4,.fred{ font-family:var(--display); letter-spacing:-.3px; font-weight:600; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:0; color:inherit; }
img,svg{ display:block; max-width:100%; }
::selection{ background:var(--blue-200); color:var(--ink); }

.wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }
.wrap-narrow{ max-width:860px; margin:0 auto; padding:0 24px; }

/* ============ TOPBAR ============ */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  background:rgba(244,247,253,.82);
  border-bottom:1px solid var(--line);
}
.topbar .inner{
  display:flex; align-items:center; gap:14px;
  padding:14px 0;
}
.brand-row{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:600; font-size:20px;
  color:var(--ink);
}
.brand-row img,.brand-row svg{ width:30px; height:30px; }

.nav-links{
  margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; align-items:center;
}
.nav-links a{
  font-size:14px; font-weight:600; color:var(--ink-2);
  padding:8px 14px; border-radius:999px;
  transition:background .15s, color .15s;
}
.nav-links a:hover{ background:var(--blue-50); color:var(--blue-600); }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; }

@media(max-width:880px){
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:12px; background:var(--surface);
    border:1px solid var(--line); color:var(--ink); font-size:18px; }
  .nav-actions .btn-nav-cta{ display:none; }
}

/* ============ BUTTONS ============ */
.btn{
  border:0; cursor:pointer;
  font-family:var(--display); font-weight:600;
  border-radius:14px; font-size:15px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 22px;
  transition:transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  white-space:nowrap;
  line-height:1;
}
.btn:active{ transform:scale(.97); }
.btn-primary{
  background:var(--grad-blue); color:#fff;
  box-shadow:var(--shadow-btn);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(45,89,230,.45);
}
.btn-ghost{ background:var(--blue-50); color:var(--blue-600); }
.btn-ghost:hover{ background:var(--blue-100); }
.btn-soft{ background:var(--surface); color:var(--ink); border:1px solid var(--line); }
.btn-soft:hover{ background:var(--bg-2); }
.btn-sun{
  background:var(--sunny); color:#5a3d00;
  box-shadow:0 10px 22px rgba(255,194,71,.35);
}
.btn-sun:hover{ background:#FFD478; transform:translateY(-2px); }
.btn-clear{
  background:rgba(255,255,255,.16); color:#fff;
  border:1px solid rgba(255,255,255,.28);
}
.btn-clear:hover{ background:rgba(255,255,255,.24); transform:translateY(-2px); }
.btn-dark{
  background:var(--ink); color:#fff;
}
.btn-dark:hover{ background:#0a1224; transform:translateY(-2px); }
.btn-lg{ padding:16px 24px; font-size:16px; border-radius:16px; }
.btn-block{ width:100%; }
.btn .arr{ display:inline-block; transition:transform .15s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }
.btn-wa{
  background:var(--wa); color:#fff;
  box-shadow:0 8px 20px rgba(37,211,102,.32);
}
.btn-wa:hover{ background:#1FBC57; transform:translateY(-2px); }

/* ============ LANGUAGE SWITCHER (dropdown) ============ */
.language-switcher{ position:relative; }
.lang-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink-2);
  font-family:inherit; font-size:13px; font-weight:600;
  cursor:pointer;
  transition:background .15s, border .15s, color .15s;
}
.lang-btn:hover{
  background:#fff;
  border-color:var(--blue-400);
  color:var(--blue-600);
}
.lang-btn .ic-globe{ width:14px; height:14px; flex-shrink:0; }
.lang-btn .ic-chevron{ width:11px; height:11px; flex-shrink:0; transition:transform .2s ease; }
.lang-btn[aria-expanded="true"] .ic-chevron{ transform:rotate(180deg); }
.lang-btn .current-lang{ line-height:1; }

.lang-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow-pop);
  min-width:170px;
  overflow:hidden;
  opacity:0; visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:60;
}
.lang-dropdown-open{
  opacity:1; visibility:visible; transform:translateY(0);
}
.lang-option{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px;
  text-decoration:none;
  color:var(--ink);
  font-size:14px; font-weight:500;
  border-bottom:1px solid var(--line-2);
  transition:background .15s, color .15s;
}
.lang-option:last-child{ border-bottom:0; }
.lang-option:hover{ background:var(--bg); color:var(--blue-600); }
.lang-option.active{ background:var(--blue-500); color:#fff; }
.lang-option.active:hover{ background:var(--blue-600); color:#fff; }
.lang-option .flag{ font-size:18px; line-height:1; }

/* ============ HERO ============ */
.hero{
  margin:34px auto 8px;
  padding:60px 56px;
  border-radius:36px;
  color:#fff;
  position:relative; overflow:hidden;
  background:var(--grad-blue);
  box-shadow:0 30px 80px rgba(31,63,194,.28);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(700px 320px at 88% -10%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(500px 400px at 0% 110%, rgba(255,194,71,.18), transparent 70%);
  pointer-events:none;
}
.hero-grid{
  display:grid; grid-template-columns:1.3fr 1fr;
  gap:48px; align-items:center; position:relative; z-index:1;
}
.hero .pill{
  display:inline-flex; gap:8px; align-items:center;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
  padding:7px 14px; border-radius:999px;
  font-size:13px; font-weight:600;
}
.hero h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.4rem, 5.6vw, 4.2rem); line-height:1.0;
  letter-spacing:-.025em;
  margin:18px 0 8px;
  text-wrap:balance;
}

/* — Zee mascot inside the "Transfère-le" action card — */
.action-mascot{
  position:relative;
  display:grid; place-items:center;
  animation:flt 4s ease-in-out infinite;
}
.action-mascot::before{
  content:""; position:absolute; inset:-14px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.28), rgba(255,255,255,0) 65%);
  filter:blur(3px);
  z-index:0; pointer-events:none;
}
.action-mascot > *{ position:relative; z-index:1; }

/* — Zee mascot next to features H2 — */
.features-row{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.features-row h2{
  margin:12px 0; flex:1; min-width:0;
}
.features-mascot{
  flex-shrink:0;
  animation:flt 3.6s ease-in-out infinite;
}
@media(max-width:700px){
  .features-row{ gap:14px; }
  .features-mascot [data-mascot]{ transform:scale(.7); transform-origin:right center; }
}
.hero h1 .b1{ color:var(--sunny); }
.hero h1 .b2{ color:var(--mint); }
.hero h1 small{
  display:block; font-family:var(--mono); font-weight:500;
  font-size:.28em; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.72); margin-top:14px;
}
.hero .math{
  display:inline-flex; flex-direction:column; gap:6px;
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.4rem,5.4vw,4rem); line-height:.98;
  letter-spacing:-.025em;
  margin:6px 0 18px;
}
.hero .math .line1{ color:rgba(255,255,255,.62); text-decoration:line-through; text-decoration-thickness:3px; }
.hero .math .line2{ color:#fff; }
.hero .math .line2 b{ color:var(--sunny); font-weight:600; }

.hero p.lede{
  font-size:18px; max-width:48ch; margin:18px 0 30px;
  color:rgba(255,255,255,.92); text-wrap:pretty; line-height:1.55;
}
.hero .cta-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero .meta{
  margin-top:22px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.75);
}
.hero .meta b{ color:var(--mint); font-weight:500; }

@media(max-width:960px){
  .hero{ padding:36px 26px; border-radius:28px; margin-top:20px; }
  .hero-grid{ grid-template-columns:1fr; gap:30px; }
  .hero-mockup{ order:-1; }
}

/* ============ CHAT MOCKUP (HERO) ============ */
.hero-mockup{
  position:relative;
  display:flex; align-items:center; justify-content:center;
}

/* — auto-cycling carousel of chat examples (JS-driven) — */
.chat-carousel{
  width:100%; max-width:420px;
  position:relative;
}
.chat-viewport{
  overflow:hidden;
  border-radius:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.25);
}
.chat-track{
  display:flex;
  transition:transform .8s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.chat-track > .chat{
  flex:0 0 100%;
  max-width:none;
  margin:0;
  box-shadow:none;
  border-radius:0;
}
.chat-dots{
  display:flex; justify-content:center; gap:10px;
  margin-top:20px;
}
.chat-dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.4);
  border:0; padding:0; cursor:pointer;
  transition:background .3s ease, width .3s ease, border-radius .3s ease;
}
.chat-dot:hover{ background:rgba(255,255,255,.7); }
.chat-dot.is-active{
  background:#fff;
  width:24px; border-radius:4px;
  cursor:default;
}

.chat{
  width:100%; max-width:380px;
  background:#E5DDD5;
  background-image:
    linear-gradient(rgba(229,221,213,.96), rgba(229,221,213,.96)),
    radial-gradient(circle at 25% 25%, #d8cfc5 1px, transparent 1.5px),
    radial-gradient(circle at 75% 75%, #d8cfc5 1px, transparent 1.5px);
  background-size:100% 100%, 24px 24px, 24px 24px;
  border-radius:22px;
  padding:14px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.4);
  position:relative;
}
.chat-head{
  display:flex; align-items:center; gap:10px;
  padding:6px 4px 12px;
  border-bottom:1px solid rgba(0,0,0,.06);
  margin-bottom:10px;
}
.chat-head .av{
  width:38px; height:38px; border-radius:50%;
  background:var(--grad-blue); display:grid; place-items:center;
  color:#fff; font-family:var(--display); font-weight:600;
  font-size:14px;
}
.chat-head .ttl{ font-weight:600; font-size:14px; color:#111B21; }
.chat-head .sub{ font-size:11px; color:#667781; }
.chat-head .info{ flex:1; min-width:0; }
.chat-head .ic{ color:#54656F; font-size:14px; }
.chat-msgs{
  display:flex; flex-direction:column; gap:6px;
  min-height:280px;
  justify-content:flex-start;
}
.bubble{
  max-width:78%; padding:9px 13px;
  border-radius:16px; font-size:13.5px; line-height:1.4;
  position:relative;
  box-shadow:0 1px .5px rgba(0,0,0,.13);
  color:#111B21;
}
.bubble .time{
  display:inline-block; margin-left:8px; font-size:10px;
  color:#667781; vertical-align:bottom;
}
.bubble.in{ background:#fff; align-self:flex-start; }
.bubble.out{ background:var(--wa-bg); align-self:flex-end; }
.bubble.zeepit{
  background:#fff; align-self:flex-start;
  border-left:3px solid var(--blue-500);
  max-width:88%;
}
.bubble.zeepit .from{
  display:flex; align-items:center; gap:6px;
  font-size:10px; font-weight:700; color:var(--blue-600);
  letter-spacing:.04em; margin-bottom:4px;
}
.bubble.zeepit ul{
  margin:4px 0 0; padding-left:18px;
  font-size:13px; color:#111B21;
}
.bubble.zeepit li{ margin:3px 0; }
.bubble-vocal{
  align-self:flex-end;
  display:flex; align-items:center; gap:10px;
  background:var(--wa-bg);
  border-radius:16px;
  padding:10px 12px;
  box-shadow:0 1px .5px rgba(0,0,0,.13);
}
.bubble-vocal .play{
  width:30px; height:30px; border-radius:50%;
  background:var(--wa); color:#fff;
  display:grid; place-items:center; font-size:11px; flex-shrink:0;
}
.bubble-vocal .vw{
  display:inline-flex; align-items:center; gap:2px; height:18px; flex:1;
}
.bubble-vocal .vw i{
  width:2px; border-radius:2px; background:#54656F; opacity:.55;
}
.bubble-vocal .dur{
  font-size:11px; color:#667781; font-variant-numeric:tabular-nums;
}

.chat-foot{
  margin-top:14px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:11px;
  color:#54656F; letter-spacing:.06em;
  padding:0 8px;
}
.chat-foot span{ display:inline-flex; align-items:center; gap:6px; }

/* ============ SECTIONS ============ */
section.block{ padding:90px 0 30px; }
section.block.tight{ padding:60px 0 30px; }
.sec-head{
  margin-bottom:42px;
  max-width:760px;
}
.sec-head.center{ margin:0 auto 42px; text-align:center; }
.sec-kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-500);
}
.sec-kicker::before{
  content:""; width:22px; height:2px; background:var(--blue-500); border-radius:2px;
}
.sec-head.center .sec-kicker{ justify-content:center; }
.sec-head h2{
  font-size:clamp(2rem, 4vw, 2.8rem);
  margin:12px 0 12px;
  line-height:1.05;
}
.sec-head p{
  margin:0; color:var(--ink-2); font-size:17px; line-height:1.6;
}

/* ============ STATS BAND ============ */
.stats{
  background:#fff; border:1px solid var(--line);
  border-radius:32px; padding:48px 40px;
  box-shadow:var(--shadow-card);
  display:grid; grid-template-columns:repeat(4, 1fr); gap:32px;
  align-items:center;
}
.stats .src{
  grid-column:1 / -1;
  margin-top:8px;
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
  letter-spacing:.08em; text-transform:uppercase;
  text-align:center;
}
.stat{ text-align:center; }
.stat b{
  display:block; font-family:var(--display); font-weight:600;
  font-size:clamp(2rem, 3.5vw, 3rem); line-height:1;
  color:var(--blue-700); letter-spacing:-.02em;
}
.stat span{
  display:block; margin-top:8px;
  font-size:13.5px; color:var(--ink-2); line-height:1.4;
}
.stat .acc{ color:var(--coral); }
@media(max-width:780px){
  .stats{ grid-template-columns:repeat(2,1fr); padding:30px 24px; gap:24px; }
}

/* ============ QUOTE XL ============ */
.quote-xl{
  margin:30px auto;
  max-width:860px;
  text-align:center;
}
.quote-xl blockquote{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.4rem, 2.6vw, 2.1rem); line-height:1.2;
  color:var(--ink); margin:0;
  letter-spacing:-.015em;
}
.quote-xl blockquote span{ color:var(--coral); font-style:italic; }
.quote-xl .src-quote{
  margin-top:18px; font-size:13.5px; color:var(--ink-2);
}
.quote-xl .src-quote b{ color:var(--ink); }

/* ============ LE GESTE (visual flow, 3 stages) ============ */
.geste-flow{
  display:grid; grid-template-columns:1fr 90px 1fr 90px 1fr; gap:0;
  align-items:stretch;
  position:relative;
}
@media(max-width:880px){
  .geste-flow{ grid-template-columns:1fr; gap:18px; }
}

.geste-step{
  display:flex; flex-direction:column; gap:18px;
}
.geste-stage{
  border-radius:32px; padding:28px;
  min-height:520px;
  display:flex; flex-direction:column;
  position:relative;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.geste-step:hover .geste-stage{ transform:translateY(-3px); }

/* — left & right stages: real phone silhouette with bezel + sand screen — */
.geste-stage--chat{
  background:#EDEEF4;
  padding:9px;
  border-radius:46px;
  box-shadow:
    0 18px 40px rgba(31,63,194,.15),
    inset 0 0 0 1px rgba(17,26,46,.04);
  min-height:560px;
}
.geste-screen{
  flex:1;
  background:#E5DDD5;
  background-image:
    linear-gradient(rgba(229,221,213,.96), rgba(229,221,213,.96)),
    radial-gradient(circle at 25% 25%, #d8cfc5 1.5px, transparent 2px),
    radial-gradient(circle at 75% 75%, #d8cfc5 1.5px, transparent 2px);
  background-size:100% 100%, 24px 24px, 24px 24px;
  border-radius:38px;
  padding:24px 20px;
  display:flex; flex-direction:column;
  position:relative;
}
/* iPhone-like notch on top of screen */
.geste-screen::before{
  content:""; position:absolute;
  top:8px; left:50%; transform:translateX(-50%);
  width:84px; height:22px; background:#0c1530;
  border-radius:99px; opacity:.85;
  z-index:2;
}
.geste-screen > *{ margin-top:30px; }
.geste-screen > * + *{ margin-top:18px; }

/* — middle action stage centered vertically in row — */
.geste-step--action{ align-self:center; }
.geste-stage--action{ min-height:360px; }

/* — curved dashed arrows between stages (desktop only) — */
.geste-arrow{
  width:100%; height:auto;
  align-self:center;
  pointer-events:none;
  overflow:visible;
}
@media(max-width:880px){
  .geste-arrow{ display:none; }
  .geste-stage--chat{ min-height:auto; }
  .geste-step--action{ align-self:stretch; }
}

/* — middle stage: vibrant blue action card — */
.geste-stage--action{
  background:var(--grad-blue);
  color:#fff;
  text-align:center;
  align-items:center; justify-content:center;
  gap:18px;
  box-shadow:0 20px 50px rgba(31,63,194,.28);
}
.geste-stage--action::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(400px 240px at 80% 0%, rgba(255,255,255,.18), transparent 60%);
}
.geste-stage--action > *{ position:relative; z-index:1; }
.action-ic{
  width:68px; height:68px; border-radius:18px;
  background:rgba(255,255,255,.18);
  display:grid; place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.action-ic svg{ width:32px; height:32px; }
.geste-stage--action h3{
  font-family:var(--display); font-weight:600; font-style:italic;
  font-size:clamp(1.4rem, 2.4vw, 1.8rem);
  margin:0; letter-spacing:.04em; text-transform:uppercase;
  line-height:1;
}
.geste-stage--action p{
  font-size:14.5px; color:rgba(255,255,255,.92);
  margin:0; max-width:240px; line-height:1.55;
}
.geste-stage--action p b{ color:var(--sunny); font-weight:600; }

/* — voice message component (stage 1) — */
.vmessage{
  background:#fff; border-radius:16px;
  padding:14px 16px;
  display:flex; align-items:center; gap:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.vmessage .vplay{
  width:32px; height:32px; border-radius:50%;
  background:var(--blue-500); color:#fff;
  display:grid; place-items:center; font-size:11px;
  flex-shrink:0;
  box-shadow:0 4px 10px rgba(45,89,230,.35);
}
.vmessage .vbar{
  flex:1; height:5px;
  background:#E5E7EB; border-radius:5px; position:relative;
}
.vmessage .vbar-done{
  position:absolute; left:0; top:0; bottom:0; width:24%;
  background:var(--blue-500); border-radius:5px;
}
.vmessage .vtime{
  font-family:var(--mono); font-size:12px;
  color:#6b6f80; font-variant-numeric:tabular-nums; flex-shrink:0;
}
.vquote{
  margin:24px 4px 0;
  font-style:italic; color:#6b6f80;
  font-size:14px; line-height:1.5;
}

/* — zeepit result bubble (stage 3) — */
.zresult{
  background:var(--wa-bg); border-radius:14px;
  padding:14px 16px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.zresult-head{
  display:flex; align-items:center; gap:8px;
  font-weight:600; font-size:13.5px; color:var(--blue-600);
  margin-bottom:10px;
}
.zresult-head b{ color:var(--blue-600); font-weight:700; }
.zresult ul{
  list-style:disc; padding-left:18px; margin:0;
}
.zresult li{
  font-size:13.5px; color:#111B21;
  line-height:1.5; margin:5px 0;
}

/* — step label below each stage — */
.geste-label{
  text-align:center;
  font-family:var(--display); font-weight:600; font-size:15px;
  color:var(--ink); padding:0 8px;
  line-height:1.4;
}
.geste-label b{
  color:var(--blue-500); font-weight:700; margin-right:6px;
}

/* ============ USE CASES ============ */
.cases{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
@media(max-width:980px){ .cases{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .cases{ grid-template-columns:1fr; } }
.case{
  background:#fff; border:1px solid var(--line);
  border-radius:24px; padding:28px;
  box-shadow:var(--shadow-card);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.case:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card-lg); }
.case .emoji{ font-size:38px; line-height:1; }
.case h3{
  font-size:1.15rem; margin:18px 0 8px;
  line-height:1.2;
}
.case p{ color:var(--ink-2); font-size:14.5px; margin:0; line-height:1.55; }

/* ============ "PARTOUT" — apps grid ============ */
.everywhere{
  background:#fff; border:1px solid var(--line);
  border-radius:32px; padding:48px;
  box-shadow:var(--shadow-card);
  text-align:center;
}
.everywhere h3{
  font-size:clamp(1.5rem, 3vw, 2.2rem);
  margin:0 0 14px; line-height:1.15;
}
.everywhere h3 b{
  background:linear-gradient(120deg, var(--blue-500), var(--mint));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:600;
}
.everywhere p{ color:var(--ink-2); font-size:16px; max-width:560px; margin:0 auto 32px; }
.app-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:16px;
  max-width:620px; margin:0 auto;
}
@media(max-width:780px){ .app-grid{ grid-template-columns:repeat(3,1fr); max-width:300px; } }
.app-tile{
  aspect-ratio:1/1; border-radius:20px;
  display:grid; place-items:center;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .25s var(--ease);
  padding:22%;
}
.app-tile:hover{ transform:translateY(-3px) scale(1.05); }
.app-tile img{ width:100%; height:100%; object-fit:contain; display:block; }
/* brand-coloured square backgrounds */
.app-tile.wa{ background:linear-gradient(150deg,#25D366,#128C7E); }
.app-tile.ig{ background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4); }
.app-tile.tg{ background:linear-gradient(150deg,#3CA0EB,#0088CC); }
.app-tile.sg{ background:#3A76F0; }
.app-tile.no{ background:linear-gradient(160deg,#FFE7A8,#FFC34A 35%,#FF9F1A); padding:18%; }
.app-tile.sa{ background:linear-gradient(150deg,#1FA9F6,#006FE6); padding:14%; }
.app-tile.yt{ background:#FF0000; padding:24%; }
.app-tile.ma{ background:linear-gradient(150deg,#5BC2FF,#0884F4); padding:24%; }
.app-tile.po{ background:linear-gradient(150deg,#B96BFF,#7232C8); }
.app-tile.vm{ background:linear-gradient(150deg,#FF6B6B,#E83E3E); padding:24%; }
.app-tile.dr{ background:#fff; padding:18%; box-shadow:0 8px 18px -8px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.06); }
.app-tile.dr img{ filter:none; }
.app-tile.tw{ background:#000; padding:28%; }

/* ============ FEATURES BENTO ============ */
.bento{
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
}
@media(max-width:780px){ .bento{ grid-template-columns:1fr; } }
.fcard{
  background:#fff; border:1px solid var(--line);
  border-radius:26px; padding:30px;
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:14px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.fcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card-lg); }
.fcard .ic{
  width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center; font-size:22px;
}
.ic-blue{ background:var(--blue-50); color:var(--blue-600); }
.ic-coral{ background:var(--coral-soft); color:var(--coral-deep); }
.ic-mint{ background:var(--mint-soft); color:var(--mint-deep); }
.ic-sun{ background:var(--sunny-soft); color:var(--sunny-deep); }
.fcard h3{
  font-size:1.3rem; margin:0; line-height:1.2;
}
.fcard p{ color:var(--ink-2); font-size:15px; margin:0; line-height:1.6; }

/* ============ PRIVACY (Abrège style) ============ */
.privacy-card{
  background:#fff; border:1px solid var(--line);
  border-radius:32px; padding:48px;
  box-shadow:var(--shadow-card);
}
.privacy-head{ text-align:center; margin-bottom:36px; }
.privacy-head .kicker{
  color:var(--mint-deep); font-weight:700;
  font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px;
}
.privacy-head .kicker::before{
  content:""; width:22px; height:2px; background:var(--mint-deep); border-radius:2px;
}
.privacy-head h2{
  font-size:clamp(1.8rem, 3.6vw, 2.6rem);
  margin:12px 0 8px;
}
.privacy-head p{
  color:var(--ink-2); max-width:560px; margin:0 auto;
  font-size:16px; line-height:1.6;
}
.privacy-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-bottom:28px;
}
@media(max-width:780px){ .privacy-grid{ grid-template-columns:1fr; } }
.pv-card{
  background:var(--bg); border:1px solid var(--line-2);
  border-radius:18px; padding:22px;
}
.pv-card .ic{
  width:42px; height:42px; border-radius:12px;
  background:var(--mint-soft); color:var(--mint-deep);
  display:grid; place-items:center; font-size:18px;
  margin-bottom:14px;
}
.pv-card h4{ font-size:1.05rem; margin:0 0 6px; }
.pv-card p{ color:var(--ink-2); font-size:14px; margin:0; line-height:1.55; }

/* server logs block */
.term{
  background:#0c1530; border-radius:18px; padding:22px 24px;
  font-family:var(--mono); font-size:12.5px;
  color:#A6B4E5; line-height:1.65;
  position:relative; overflow:hidden;
  border:1px solid #1a2660;
}
.term::before{
  content:"● ● ●"; position:absolute; top:14px; left:18px;
  font-size:14px; letter-spacing:4px; color:#FF6B6B;
  opacity:.85;
}
.term .term-body{ padding-top:24px; }
.term .ts{ color:#5d6fa8; }
.term .lv-info{ color:var(--blue-400); }
.term .lv-proc{ color:var(--sunny); }
.term .lv-ok{ color:var(--mint); }
.term .lv-del{ color:var(--coral); }
.term .cmd{ color:#fff; font-weight:600; }

/* ============ PRICING ============ */
.pricing-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  align-items:stretch;
}
@media(max-width:920px){ .pricing-grid{ grid-template-columns:1fr; } }
.tier{
  background:#fff; border:1px solid var(--line);
  border-radius:26px; padding:32px;
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:18px;
}
.tier.featured{
  background:linear-gradient(180deg,#13205A 0%,#0C1530 100%);
  color:#fff; border:0;
  box-shadow:var(--shadow-pop);
  position:relative; overflow:hidden;
}
.tier.featured::after{
  content:"★"; position:absolute; right:-30px; bottom:-90px;
  font-size:280px; line-height:1; color:rgba(255,194,71,.06);
  font-family:var(--display); font-weight:700;
}
.tier .name{
  font-family:var(--display); font-weight:600; font-size:1.25rem;
}
.tier .tag{ font-size:13.5px; color:var(--ink-2); line-height:1.5; }
.tier.featured .tag{ color:rgba(255,255,255,.72); }
.tier .price{
  display:flex; align-items:baseline; gap:10px;
  font-family:var(--display); font-weight:600;
  font-size:2.6rem; letter-spacing:-.02em; line-height:1;
  margin-top:4px;
}
.tier .price .strike{ font-size:1.2rem; color:var(--ink-3); text-decoration:line-through; font-weight:500; }
.tier.featured .price{ color:var(--sunny); }
.tier .price small{ font-size:1rem; font-weight:500; color:var(--ink-2); }
.tier.featured .price small{ color:rgba(255,255,255,.7); }
.tier ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px;
  flex:1;
}
.tier li{
  display:flex; align-items:center; gap:10px;
  font-size:14.5px;
}
.tier li::before{
  content:""; width:20px; height:20px; border-radius:6px;
  background:var(--mint-soft); color:var(--mint-deep); flex-shrink:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7.5l3 3 5-6' stroke='%2311936F' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size:14px 14px; background-position:center; background-repeat:no-repeat;
}
.tier.featured li::before{
  background-color:rgba(47,211,165,.18);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7.5l3 3 5-6' stroke='%232FD3A5' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.tier .badge-row{ display:flex; gap:6px; flex-wrap:wrap; }
.tier .badge{
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px;
  background:var(--sunny); color:#5a3d00;
}
.toggle-row{
  display:inline-flex; padding:4px;
  background:var(--bg-2); border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.06em;
  align-self:flex-start;
  margin-bottom:6px;
}
.toggle-row button{
  padding:7px 14px; border-radius:999px; color:var(--ink-2);
  text-transform:uppercase; font-family:var(--body);
}
.toggle-row button[aria-pressed="true"]{
  background:#fff; color:var(--blue-600);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.pricing-foot{
  text-align:center; color:var(--ink-2);
  margin-top:24px; font-size:14px;
}

/* ============ CTA BANNER ============ */
.cta-banner{
  background:var(--grad-blue);
  color:#fff;
  border-radius:36px; padding:64px 56px;
  position:relative; overflow:hidden;
  text-align:center;
  box-shadow:0 30px 80px rgba(31,63,194,.28);
}
.cta-banner::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(600px 300px at 50% -10%, rgba(255,255,255,.25), transparent 60%);
  pointer-events:none;
}
.cta-banner > *{ position:relative; z-index:1; }
.cta-banner h2{
  font-size:clamp(2rem, 4vw, 3rem);
  margin:0 0 14px; line-height:1.05;
}
.cta-banner h2 em{ color:var(--sunny); font-style:italic; }
.cta-banner p{
  font-size:17px; max-width:520px; margin:0 auto 32px;
  color:rgba(255,255,255,.92); line-height:1.55;
}
.cta-banner .cta-row{
  display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center;
}

@media(max-width:720px){
  .cta-banner{ padding:40px 24px; border-radius:28px; }
}

/* ============ FAQ ============ */
.faq{
  background:#fff; border:1px solid var(--line);
  border-radius:24px; box-shadow:var(--shadow-card);
  overflow:hidden;
  max-width:840px; margin:0 auto;
}
.faq details{ border-top:1px solid var(--line); }
.faq details:first-child{ border-top:0; }
.faq summary{
  list-style:none; cursor:pointer;
  padding:24px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  font-family:var(--display); font-weight:500; font-size:1.05rem;
  color:var(--ink);
  transition:background .15s, color .15s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-family:var(--display); font-weight:500;
  width:32px; height:32px; border-radius:50%;
  background:var(--blue-50); color:var(--blue-600);
  display:grid; place-items:center;
  font-size:20px; line-height:1; flex-shrink:0;
  padding-bottom:2px;
  transition:background .2s, color .2s;
}
.faq summary:hover{ background:var(--bg); }
.faq details[open] summary{ color:var(--blue-600); }
.faq details[open] summary::after{
  content:"\2212"; background:var(--blue-500); color:#fff;
}
.faq .body{
  padding:0 28px 24px; color:var(--ink-2);
  font-size:15px; line-height:1.65; max-width:700px;
}
.faq .body b{ color:var(--ink); font-weight:600; }
.faq .body p{ margin:0 0 10px; }
.faq .body p:last-child{ margin-bottom:0; }

/* ============ FOOTER ============ */
footer{
  border-top:1px solid var(--line);
  padding:54px 0 50px; margin-top:90px;
  color:var(--ink-2); font-size:13.5px;
}
.foot-grid{
  display:grid; grid-template-columns:1.6fr repeat(2,1fr); gap:36px;
}
@media(max-width:780px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:28px; } }
.foot-left .brand-row{ font-size:22px; margin-bottom:12px; }
.foot-left p{ margin:0; max-width:300px; line-height:1.55; }
.foot-left .stores{
  display:flex; gap:6px; margin-top:18px; flex-wrap:wrap; align-items:center;
}

/* — Official App Store + Google Play badges (reused from rolecut) — */
.store-badge{
  display:inline-flex; align-items:center;
  transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.store-badge:hover{ transform:translateY(-2px); opacity:.92; }
.store-badge img{ display:block; height:44px; width:auto; }
/* Google Play PNG ships with thick built-in padding — bump height and crop with negative margin */
.store-badge.google img{ height:64px; margin:-10px -12px; }

/* larger variant inside the hero — matches rolecut.app sizing */
.hero .store-badge img{ height:80px; }
.hero .store-badge.google img{ height:120px; margin:-15px -12px; }
.hero-cta{ align-items:center; gap:4px; flex-wrap:nowrap; }
@media(max-width:960px){ .hero-cta{ flex-wrap:wrap; } }
.foot-col h4{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 14px;
}
.foot-col ul{ list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px; }
.foot-col a{ color:var(--ink); transition:color .15s; }
.foot-col a:hover{ color:var(--blue-500); }
.legal{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  color:var(--ink-3); font-size:12.5px;
}

/* SEO long-tail block */
.seo-block{
  background:var(--bg-2); border-radius:24px;
  padding:34px 32px;
  margin-bottom:36px;
}
.seo-block h3{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 18px;
}
.seo-block ul{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px 24px;
}
@media(max-width:720px){ .seo-block ul{ grid-template-columns:1fr; } }
.seo-block a{
  color:var(--ink-2); font-size:13px; line-height:1.5;
  display:block; padding:4px 0;
  transition:color .15s;
}
.seo-block a:hover{ color:var(--blue-600); }

/* ============ LEGAL / DOC PAGES ============ */
.doc{
  background:#fff; border:1px solid var(--line);
  border-radius:32px; padding:60px;
  box-shadow:var(--shadow-card);
  margin:30px auto;
  max-width:860px;
}
@media(max-width:780px){ .doc{ padding:30px 24px; border-radius:24px; } }
.doc .doc-head{ margin-bottom:36px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.doc h1{
  font-size:clamp(2rem, 4vw, 2.8rem);
  margin:8px 0 8px; line-height:1.05;
}
.doc .doc-head p{
  font-family:var(--mono); font-size:12px;
  color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase;
  margin:0;
}
.doc h2{
  font-size:1.5rem; margin:36px 0 12px; color:var(--ink);
}
.doc h3{
  font-size:1.15rem; margin:24px 0 8px; color:var(--ink);
}
.doc p, .doc li{
  color:var(--ink-2); font-size:15px; line-height:1.7; margin:0 0 12px;
}
.doc ul, .doc ol{ padding-left:24px; }
.doc li{ margin:6px 0; }
.doc strong, .doc b{ color:var(--ink); }
.doc a{ color:var(--blue-600); text-decoration:underline; text-underline-offset:3px; }
.doc code{
  font-family:var(--mono); font-size:13px;
  background:var(--bg); padding:2px 6px; border-radius:4px;
}
.doc hr{
  border:0; border-top:1px solid var(--line); margin:32px 0;
}

/* ============ CONTACT ============ */
.contact-hero{
  margin:34px 0 30px;
  padding:64px 48px;
  border-radius:36px;
  color:#fff;
  text-align:center;
  background:var(--grad-blue);
  box-shadow:0 30px 80px rgba(31,63,194,.28);
  position:relative; overflow:hidden;
}
.contact-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(700px 320px at 88% -10%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(500px 400px at 0% 110%, rgba(255,194,71,.18), transparent 70%);
}
.contact-hero > *{ position:relative; z-index:1; }
.contact-hero h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.2rem, 5vw, 3.4rem); line-height:1.05;
  letter-spacing:-.02em;
  margin:0 0 14px;
}
.contact-hero p{
  font-size:17px; max-width:540px; margin:0 auto;
  color:rgba(255,255,255,.92); line-height:1.55;
}
@media(max-width:720px){
  .contact-hero{ padding:40px 24px; border-radius:24px; }
}

.contact-section{ padding:30px 0 90px; }
.contact-form-container{
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  padding:48px;
  max-width:620px; margin:0 auto;
  box-shadow:var(--shadow-card);
}
@media(max-width:720px){
  .contact-form-container{ padding:30px 22px; border-radius:22px; }
}
.contact-form .form-group{
  display:flex; flex-direction:column; gap:8px;
  margin-bottom:22px;
}
.contact-form .form-group:last-of-type{ margin-bottom:28px; }
.contact-form label{
  font-family:var(--mono);
  font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2);
}
.contact-form input,
.contact-form textarea{
  font-family:inherit; font-size:15px; color:var(--ink);
  border:1px solid var(--line);
  background:var(--bg);
  border-radius:14px;
  padding:14px 16px;
  transition:border .15s, background .15s, box-shadow .15s;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:var(--ink-3); }
.contact-form input:focus,
.contact-form textarea:focus{
  outline:0;
  border-color:var(--blue-400);
  background:#fff;
  box-shadow:0 0 0 4px rgba(61,110,245,.12);
}
.contact-form textarea{ min-height:160px; resize:vertical; }

.btn-submit{
  border:0; cursor:pointer;
  background:var(--grad-blue); color:#fff;
  font-family:var(--display); font-weight:600;
  font-size:16px; line-height:1;
  border-radius:14px;
  padding:16px 28px;
  box-shadow:var(--shadow-btn);
  display:inline-flex; align-items:center; gap:10px;
  transition:transform .15s var(--ease), box-shadow .2s var(--ease);
}
.btn-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(45,89,230,.45);
}
.btn-submit:active{ transform:scale(.97); }
.btn-submit svg{ display:block; }

/* ============ 404 ============ */
.notfound{
  text-align:center; padding:100px 0;
  max-width:560px; margin:0 auto;
}
.notfound .num{
  font-family:var(--display); font-weight:600;
  font-size:clamp(7rem, 18vw, 12rem); line-height:1;
  letter-spacing:-.03em;
  color:var(--blue-100);
  margin-bottom:20px;
}
.notfound h1{
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  margin:0 0 16px;
}
.notfound p{ color:var(--ink-2); font-size:16px; margin:0 0 32px; line-height:1.6; }
.notfound .ctas{ display:inline-flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.notfound .mascot-wrap{ display:flex; justify-content:center; margin-bottom:20px; }

/* ============ MOTION HELPERS ============ */
.float{ animation:flt 4s ease-in-out infinite; }
@keyframes flt{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} }
.blink{ animation:bk 4.5s infinite; transform-origin:center; }
@keyframes bk{ 0%,94%,100%{transform:scaleY(1);} 97%{transform:scaleY(.1);} }
.sparkle{ animation:spk 2.4s ease-in-out infinite; transform-origin:center; }
@keyframes spk{ 0%,100%{transform:scale(.7) rotate(0); opacity:.5;} 50%{transform:scale(1.1) rotate(20deg); opacity:1;} }

.reveal{ opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}