/* ══════════ Fideliio — styles ══════════ */
:root{
  --coral:#E88A74; --coral-light:#F2A38E; --coral-deep:#D9694E; --coral-600:#C4573D; --coral-50:#FCEEE9;
  --reward:#5B8A5B; --reward-50:#EAF2EA;
  --ink:#2A211E; --bg:#FAF7F5; --bg-2:#F0E8E4; --surface:#FFFFFF;
  --text:#2A211E; --muted:#6A5C56; --faint:#A2938C;
  --border:rgba(74,59,54,.12); --border-soft:rgba(74,59,54,.08);
  --sans:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --r:14px; --r-lg:20px; --r-xl:28px;
  --shadow-sm:0 1px 3px rgba(74,59,54,.06),0 1px 2px rgba(74,59,54,.04);
  --shadow-md:0 8px 24px rgba(74,59,54,.08),0 2px 6px rgba(74,59,54,.05);
  --shadow-lg:0 24px 60px rgba(74,59,54,.14),0 8px 20px rgba(74,59,54,.07);
  --maxw:1140px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--sans); color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv11"; line-height:1.5;
}
h1,h2,h3,h4{margin:0; letter-spacing:-.035em; line-height:1.05; font-weight:800;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.eyebrow{font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint);}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans);
  font-weight:600; font-size:15px; letter-spacing:-.01em; border-radius:12px;
  padding:0 20px; height:50px; border:1px solid transparent; cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;}
.btn svg{width:18px; height:18px;}
.btn-primary{background:var(--coral-deep); color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 8px 20px rgba(217,105,78,.30);}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 12px 28px rgba(217,105,78,.38);}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--border); box-shadow:var(--shadow-sm);}
.btn-ghost:hover{transform:translateY(-1px); box-shadow:var(--shadow-md);}
.btn-sm{height:42px; font-size:14px; padding:0 16px;}

/* brand logo image */
.mark-img{width:34px; height:34px; border-radius:10px; display:block; box-shadow:0 4px 12px rgba(217,105,78,.28);}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; font-size:20px; letter-spacing:-.04em; color:var(--ink);}

/* ───────── NAV ───────── */
header.nav{position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(14px);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom:1px solid transparent; transition:border-color .2s, background .2s;}
header.nav.scrolled{border-color:var(--border-soft); background:color-mix(in srgb,var(--bg) 90%, transparent);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:74px;}
.nav-links{display:flex; align-items:center; gap:34px;}
.nav-links a{font-size:14.5px; font-weight:500; color:var(--muted); transition:color .14s; cursor:pointer;}
.nav-links a:hover{color:var(--ink);}
.nav-cta{display:flex; align-items:center; gap:14px;}
.nav-cta .login{font-size:14.5px; font-weight:600; color:var(--ink);}
@media(max-width:880px){ .nav-links{display:none;} }

/* ───────── HERO ───────── */
.hero{padding:72px 0 40px; position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.hero-badge{display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px 0 10px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  font-size:12.5px; font-weight:600; color:var(--muted); box-shadow:var(--shadow-sm); margin-bottom:26px;}
.hero-badge .pill{display:inline-flex; align-items:center; gap:5px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.06em; color:var(--coral-deep); background:var(--coral-50);
  padding:3px 7px; border-radius:6px;}
.hero h1{font-size:62px; font-weight:900; letter-spacing:-.045em;}
.hero h1 .hl{position:relative; white-space:nowrap;}
.hero h1 .hl::after{content:""; position:absolute; left:-2px; right:-2px; bottom:.06em; height:.30em;
  background:var(--coral-light); z-index:-1; border-radius:3px; transform:rotate(-.6deg);}
.hero .sub{font-size:19px; line-height:1.55; color:var(--muted); margin-top:24px; max-width:30ch;}
.hero .cta-row{display:flex; align-items:center; gap:14px; margin-top:34px; flex-wrap:wrap;}
.hero .reassure{display:flex; gap:20px; margin-top:26px; flex-wrap:wrap;}
.hero .reassure span{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--muted); font-weight:500;}
.hero .reassure svg{width:16px; height:16px; color:var(--reward);}
@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr; gap:44px;}
  .hero h1{font-size:46px;}
  .hero .sub{max-width:none;}
}

/* hero visual */
.stage{position:relative; height:520px;}
.dash-card{position:absolute; right:0; top:14px; width:430px; background:var(--surface);
  border-radius:var(--r-lg); border:1px solid var(--border); box-shadow:var(--shadow-lg); overflow:hidden;}
.dash-top{display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--border-soft);}
.dash-top .tl{width:11px; height:11px; border-radius:50%; background:#E7DDD6;}
.dash-top .url{margin-left:10px; font-family:var(--mono); font-size:11px; color:var(--faint);
  background:var(--bg); padding:4px 12px; border-radius:7px;}
.dash-body{padding:20px;}
.stat-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:18px;}
.stat{background:var(--bg); border-radius:12px; padding:13px 14px;}
.stat .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);}
.stat .v{font-size:23px; font-weight:800; letter-spacing:-.03em; margin-top:5px;}
.stat .v small{font-size:12px; color:var(--reward); font-weight:700; margin-left:4px; letter-spacing:0;}
.chart{height:96px; background:var(--bg); border-radius:12px; padding:12px; position:relative; overflow:hidden;}
.chart svg{position:absolute; left:0; bottom:0; width:100%; height:78px;}
.chart .lbl{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);}

.phone{position:absolute; left:-8px; bottom:0; width:236px; height:478px; border-radius:40px;
  background:#2A211E; padding:7px; box-shadow:var(--shadow-lg); z-index:2;}
.phone-screen{width:100%; height:100%; border-radius:33px; overflow:hidden; background:#F7F5F1; position:relative;}
.notch{position:absolute; top:9px; left:50%; transform:translateX(-50%); width:78px; height:20px; background:#2A211E; border-radius:0 0 12px 12px; z-index:5;}
.ph-head{padding:30px 18px 14px;}
.ph-resto{display:flex; align-items:center; gap:10px;}
.ph-logo{width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,#C2410C,#7C2D12); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;}
.ph-resto .n{font-weight:700; font-size:14px; letter-spacing:-.02em;}
.ph-resto .t{font-size:10.5px; color:var(--faint);}
.loyalty{margin:14px 16px 0; border-radius:18px; padding:17px; color:#fff;
  background:linear-gradient(150deg,#E88A74,#D9694E); box-shadow:0 12px 26px rgba(217,105,78,.34); position:relative; overflow:hidden;}
.loyalty::after{content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.10);}
.loyalty .pl{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.85; font-weight:600;}
.loyalty .pts{font-size:34px; font-weight:800; letter-spacing:-.04em; line-height:1; margin-top:5px;}
.loyalty .pts small{font-size:13px; font-weight:600; opacity:.8;}
.loyalty .bar{height:6px; background:rgba(255,255,255,.28); border-radius:99px; margin-top:14px; overflow:hidden;}
.loyalty .bar i{display:block; height:100%; width:72%; background:#FAF7F5; border-radius:99px;}
.loyalty .next{font-size:10.5px; opacity:.92; margin-top:8px; display:flex; justify-content:space-between;}
.stamps{margin:16px 16px 0; display:grid; grid-template-columns:repeat(5,1fr); gap:9px;}
.stamp{aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.stamp.on{background:var(--coral-50); border:1.5px solid var(--coral-light); color:var(--coral-deep);}
.stamp.off{background:#fff; border:1.5px dashed var(--border);}
.stamp svg{width:15px; height:15px;}
.ph-reward{margin:16px 16px 0; background:#fff; border:1px solid var(--border-soft); border-radius:13px; padding:12px 13px; display:flex; align-items:center; gap:11px; box-shadow:var(--shadow-sm);}
.ph-reward .ic{width:34px; height:34px; border-radius:9px; background:var(--reward-50); color:var(--reward); display:flex; align-items:center; justify-content:center;}
.ph-reward .n{font-size:12.5px; font-weight:700;}
.ph-reward .c{font-size:10.5px; color:var(--faint);}
.float-tag{position:absolute; z-index:4; background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow-md); border-radius:12px; padding:9px 13px; display:flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:600;}
.float-tag .ic{width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center;}
.float-tag svg{width:15px; height:15px;}
@media(max-width:920px){ .stage{height:560px; max-width:480px; margin:0 auto;} }
@media(max-width:520px){ .dash-card{width:330px;} .stage{height:600px;} }

/* ───────── TRUST ───────── */
.trust{padding:30px 0 4px;}
.trust .line{display:flex; align-items:center; justify-content:center; gap:34px; flex-wrap:wrap;
  padding-top:24px; border-top:1px solid var(--border-soft);}
.trust .t-lbl{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);}
.trust .t-name{font-weight:700; font-size:17px; letter-spacing:-.02em; color:#BCA99F; display:inline-flex; align-items:center; gap:8px;}
.trust .t-name svg{width:17px; height:17px; opacity:.7;}

/* ───────── SECTION SHELL ───────── */
section{padding:96px 0;}
.sec-head{max-width:620px;}
.sec-head.center{margin:0 auto; text-align:center;}
.sec-head h2{font-size:42px; font-weight:850; letter-spacing:-.04em; margin-top:14px;}
.sec-head p{font-size:18px; color:var(--muted); margin-top:18px; line-height:1.55;}
@media(max-width:680px){ .sec-head h2{font-size:32px;} section{padding:72px 0;} }

/* ───────── HOW ───────── */
.how{background:var(--surface);}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:54px;}
.step{position:relative; padding:28px; border:1px solid var(--border-soft); border-radius:var(--r-lg); background:var(--bg);}
.step .num{font-family:var(--mono); font-size:12px; font-weight:600; color:var(--coral-deep); letter-spacing:.1em;}
.step .ic{width:48px; height:48px; border-radius:13px; background:var(--coral-50); color:var(--coral-deep);
  display:flex; align-items:center; justify-content:center; margin:16px 0 18px;}
.step .ic svg{width:24px; height:24px;}
.step h3{font-size:20px; font-weight:750; letter-spacing:-.03em;}
.step p{font-size:14.5px; color:var(--muted); margin-top:9px; line-height:1.55;}
.step .arr{position:absolute; right:-22px; top:54px; color:var(--border); z-index:2;}
.step:last-child .arr{display:none;}
@media(max-width:820px){ .steps{grid-template-columns:1fr;} .step .arr{display:none;} }

/* ───────── FEATURES ───────── */
.feat-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:20px; margin-top:54px;}
.feat{border:1px solid var(--border-soft); border-radius:var(--r-lg); background:var(--surface);
  padding:26px; box-shadow:var(--shadow-sm); transition:transform .16s, box-shadow .16s; overflow:hidden; position:relative;}
.feat:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.feat .ic{width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.feat .ic svg{width:21px; height:21px;}
.feat h3{font-size:18px; font-weight:750; letter-spacing:-.03em;}
.feat p{font-size:14px; color:var(--muted); margin-top:8px; line-height:1.55;}
.col-6{grid-column:span 6;} .col-4{grid-column:span 4;} .col-12{grid-column:span 12;}
.feat-wide{display:flex; gap:30px; align-items:center;}
.feat-wide .copy{flex:1;}
.ic-coral{background:var(--coral-50); color:var(--coral-deep);}
.ic-reward{background:var(--reward-50); color:var(--reward);}
@media(max-width:820px){ .col-6,.col-4{grid-column:span 12;} .feat-wide{flex-direction:column; align-items:flex-start;} }

.wallet-mini{width:248px; flex-shrink:0; background:linear-gradient(150deg,#4A3B36,#2A211E); border-radius:16px;
  padding:18px; color:#fff; box-shadow:var(--shadow-md); position:relative; overflow:hidden;}
.wallet-mini .top{display:flex; align-items:center; justify-content:space-between;}
.wallet-mini .top .nm{font-weight:700; font-size:13.5px;}
.wallet-mini .mk{width:30px; height:30px; border-radius:9px; background:var(--coral-deep); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:15px; position:relative;}
.wallet-mini .mk .d{position:absolute; right:5px; top:5px; width:6px; height:6px; border-radius:50%; background:var(--coral-light);}
.wallet-mini .qr{margin:16px auto 0; width:96px; height:96px; background:#fff; border-radius:10px; padding:8px; display:block;}
.wallet-mini .ptline{display:flex; justify-content:space-between; align-items:baseline; margin-top:14px;}
.wallet-mini .ptline .b{font-size:22px; font-weight:800; letter-spacing:-.03em;}

/* ───────── SPLIT ───────── */
.split{background:var(--ink); color:#fff;}
.split .sec-head h2{color:#fff;}
.split .sec-head p{color:rgba(255,255,255,.62);}
.aud-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:54px;}
.aud{border:1px solid rgba(255,255,255,.12); border-radius:var(--r-xl); padding:34px; background:rgba(255,255,255,.03);}
.aud .tag{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5);}
.aud h3{font-size:26px; font-weight:800; letter-spacing:-.035em; margin-top:12px;}
.aud ul{list-style:none; padding:0; margin:22px 0 0;}
.aud li{display:flex; gap:12px; padding:11px 0; border-top:1px solid rgba(255,255,255,.09); font-size:15px; color:rgba(255,255,255,.82);}
.aud li:first-child{border-top:none;}
.aud li svg{width:19px; height:19px; color:var(--coral-light); flex-shrink:0; margin-top:1px;}
.aud.client li svg{color:#8FBF8F;}
@media(max-width:820px){ .aud-grid{grid-template-columns:1fr;} }

/* ───────── PRICING ───────── */
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:54px; max-width:860px; margin-left:auto; margin-right:auto;}
.plan{border:1px solid var(--border); border-radius:var(--r-xl); background:var(--surface); padding:34px; position:relative;}
.plan.pop{border-color:var(--coral-deep); box-shadow:0 0 0 4px var(--coral-50), var(--shadow-md);}
.plan .pop-tag{position:absolute; top:-13px; left:34px; background:var(--coral-deep); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.04em; padding:5px 12px; border-radius:999px; font-family:var(--mono);}
.plan .pn{font-size:14px; font-weight:700; font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--coral-deep);}
.plan.classic .pn{color:var(--faint);}
.plan .price{display:flex; align-items:baseline; gap:6px; margin-top:18px;}
.plan .price .amt{font-size:48px; font-weight:850; letter-spacing:-.04em;}
.plan .price .per{font-size:15px; color:var(--faint); font-weight:500;}
.plan .desc{font-size:14.5px; color:var(--muted); margin-top:12px; line-height:1.5;}
.plan ul{list-style:none; padding:0; margin:24px 0 28px;}
.plan li{display:flex; gap:11px; padding:9px 0; font-size:14.5px; color:var(--text);}
.plan li svg{width:18px; height:18px; color:var(--reward); flex-shrink:0; margin-top:1px;}
.plan .btn{width:100%; justify-content:center;}
.price-note{text-align:center; font-size:13px; color:var(--faint); margin-top:24px;}
@media(max-width:680px){ .price-grid{grid-template-columns:1fr;} }

/* ───────── TESTIMONIAL ───────── */
.quote-sec{background:var(--surface);}
.quote{max-width:840px; margin:0 auto; text-align:center;}
.quote .stars{display:flex; justify-content:center; gap:4px; color:var(--coral); margin-bottom:24px;}
.quote .stars svg{width:20px; height:20px;}
.quote blockquote{font-size:30px; font-weight:700; letter-spacing:-.03em; line-height:1.32; margin:0;}
.quote .by{display:flex; align-items:center; justify-content:center; gap:13px; margin-top:30px;}
.quote .by .av{width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#C2410C,#7C2D12); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;}
.quote .by .meta{text-align:left;}
.quote .by .nm{font-weight:700; font-size:15px;}
.quote .by .ro{font-size:13px; color:var(--faint);}
@media(max-width:680px){ .quote blockquote{font-size:23px;} }

/* ───────── FAQ ───────── */
.faq-grid{max-width:760px; margin:50px auto 0;}
.faq{border-top:1px solid var(--border);}
.faq:last-child{border-bottom:1px solid var(--border);}
.faq summary{list-style:none; cursor:pointer; padding:24px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:18px; font-weight:700; letter-spacing:-.02em;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .pm{width:30px; height:30px; border-radius:9px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:.2s; color:var(--muted);}
.faq[open] summary .pm{background:var(--coral-deep); border-color:var(--coral-deep); color:#fff; transform:rotate(45deg);}
.faq .ans{padding:0 4px 24px; font-size:15.5px; color:var(--muted); line-height:1.6; max-width:64ch;}

/* ───────── FINAL CTA ───────── */
.final{padding:0 0 96px;}
.final-card{background:linear-gradient(155deg,#E88A74,#C4573D); border-radius:var(--r-xl); padding:64px 48px;
  text-align:center; color:#fff; position:relative; overflow:hidden; box-shadow:var(--shadow-lg);}
.final-card::before{content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 20% 0%, rgba(255,255,255,.16), transparent 45%),
             radial-gradient(circle at 90% 100%, rgba(250,215,200,.28), transparent 40%);}
.final-card>*{position:relative;}
.final-card h2{font-size:42px; font-weight:850; letter-spacing:-.04em;}
.final-card p{font-size:18px; color:rgba(255,255,255,.9); margin-top:16px; max-width:46ch; margin-left:auto; margin-right:auto;}
.final-card .cta-row{display:flex; gap:14px; justify-content:center; margin-top:32px; flex-wrap:wrap;}
.final-card .btn-primary{background:#fff; color:var(--coral-deep); box-shadow:0 10px 24px rgba(0,0,0,.18);}
.final-card .btn-ghost{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.28); box-shadow:none;}
.final-card .small{font-size:13px; color:rgba(255,255,255,.78); margin-top:20px;}
@media(max-width:680px){ .final-card{padding:48px 26px;} .final-card h2{font-size:30px;} }

/* ───────── FOOTER ───────── */
footer{padding:56px 0 40px; border-top:1px solid var(--border-soft);}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px;}
.foot-brand p{font-size:14px; color:var(--muted); margin-top:16px; max-width:30ch; line-height:1.55;}
.foot-col h4{font-size:12px; font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:600;}
.foot-col a{display:block; font-size:14.5px; color:var(--muted); margin-top:13px; transition:color .14s; cursor:pointer;}
.foot-col a:hover{color:var(--ink);}
.foot-bot{display:flex; align-items:center; justify-content:space-between; margin-top:48px; padding-top:24px; border-top:1px solid var(--border-soft); flex-wrap:wrap; gap:14px;}
.foot-bot .cp{font-size:13px; color:var(--faint);}
.foot-bot .made{font-family:var(--mono); font-size:12px; color:var(--faint);}
@media(max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr;} }

/* ───────── REVEAL ───────── */
.reveal{opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i, 0) * 80ms);}
.reveal.in{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;} }

/* ───────── RDV MODAL ───────── */
.modal-overlay{position:fixed; inset:0; z-index:100; background:rgba(42,33,30,.42); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:24px; animation:fade .2s ease;}
@keyframes fade{from{opacity:0;} to{opacity:1;}}
.modal{width:100%; max-width:460px; background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
  overflow:hidden; animation:pop .24s cubic-bezier(.2,.7,.2,1);}
@keyframes pop{from{opacity:0; transform:translateY(14px) scale(.98);} to{opacity:1; transform:none;}}
.modal-head{padding:26px 28px 0; position:relative;}
.modal-head .close{position:absolute; top:20px; right:20px; width:34px; height:34px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.14s;}
.modal-head .close:hover{background:var(--bg); color:var(--ink);}
.modal-head .kick{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--coral-deep); background:var(--coral-50); padding:5px 10px; border-radius:8px;}
.modal-head h3{font-size:24px; font-weight:850; letter-spacing:-.035em; margin-top:14px;}
.modal-head p{font-size:14px; color:var(--muted); margin-top:8px; line-height:1.5;}
.modal-body{padding:22px 28px 28px; display:flex; flex-direction:column; gap:14px;}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--text); margin-bottom:7px;}
.field input,.field textarea,.field select{width:100%; border:1px solid var(--border); border-radius:11px; background:var(--surface);
  padding:12px 14px; font-family:var(--sans); font-size:14.5px; color:var(--text); transition:border-color .14s, box-shadow .14s;}
.field textarea{resize:vertical; min-height:76px;}
.field input::placeholder,.field textarea::placeholder{color:var(--faint);}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--coral-deep); box-shadow:0 0 0 4px var(--coral-50);}
.field .err{font-size:12px; color:#C4573D; margin-top:6px;}
.modal .btn-primary{width:100%; justify-content:center; margin-top:4px;}
.modal .legal{font-size:12px; color:var(--faint); text-align:center; line-height:1.5;}
.modal-success{padding:44px 32px; text-align:center;}
.modal-success .badge{width:64px; height:64px; border-radius:50%; background:var(--reward-50); color:var(--reward);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;}
.modal-success .badge svg{width:30px; height:30px;}
.modal-success h3{font-size:23px; font-weight:850; letter-spacing:-.035em;}
.modal-success p{font-size:14.5px; color:var(--muted); margin-top:10px; line-height:1.55;}
.modal-success .btn{margin-top:22px;}
@media(max-width:480px){ .frow{grid-template-columns:1fr;} }

/* ══════════ Enhancements — ambiance & animations ══════════ */

/* Accessibilité : anneau de focus cohérent au clavier */
a:focus-visible, button:focus-visible, .btn:focus-visible,
summary:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--coral-deep);
  border-radius:8px;}
.field input:focus-visible, .field textarea:focus-visible{box-shadow:0 0 0 4px var(--coral-50);}

/* Halo lumineux d'ambiance derrière le hero */
.hero::before{content:""; position:absolute; inset:-10% -20% auto auto; width:720px; height:620px;
  background:radial-gradient(closest-side, rgba(242,163,142,.30), rgba(242,163,142,.10) 55%, transparent 72%);
  filter:blur(8px); z-index:0; pointer-events:none;}
.hero::after{content:""; position:absolute; left:-14%; bottom:-30%; width:520px; height:520px;
  background:radial-gradient(closest-side, rgba(91,138,91,.12), transparent 70%);
  z-index:0; pointer-events:none;}
.hero > .wrap{position:relative; z-index:1;}

/* Entrée du hero au chargement (staggered) */
@keyframes riseIn{from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;}}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
.hero-copy > *{animation:riseIn .8s cubic-bezier(.2,.7,.2,1) both;}
.hero-copy > *:nth-child(1){animation-delay:.02s;}
.hero-copy > *:nth-child(2){animation-delay:.10s;}
.hero-copy > *:nth-child(3){animation-delay:.18s;}
.hero-copy > *:nth-child(4){animation-delay:.26s;}
.hero-copy > *:nth-child(5){animation-delay:.34s;}
.stage{animation:fadeIn 1s ease .25s both;}

/* Éléments flottants animés */
@keyframes floaty{0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);}}
.float-tag{animation:floaty 5.5s ease-in-out infinite;}
.float-tag:nth-of-type(4){animation-delay:-2.6s; animation-duration:6.5s;}

/* Remplissage animé de la jauge de points quand le hero apparaît */
@keyframes barGrow{from{width:0;} to{width:72%;}}
.loyalty .bar i{animation:barGrow 1.4s cubic-bezier(.2,.7,.2,1) .6s both;}

/* Tracé animé de la courbe du dashboard */
.chart path[stroke]{stroke-dasharray:600; stroke-dashoffset:600; animation:draw 1.8s ease .5s forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}

/* Micro-interactions au survol */
.mark-img{transition:transform .25s cubic-bezier(.2,.7,.2,1);}
.brand:hover .mark-img{transform:rotate(-6deg) scale(1.06);}
.stat{transition:transform .18s ease, box-shadow .18s ease;}
.dash-card:hover .stat{box-shadow:var(--shadow-sm);}
.step{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.step:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--border);}
.plan{transition:transform .18s ease, box-shadow .18s ease;}
.plan:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.plan.pop:hover{box-shadow:0 0 0 4px var(--coral-50), var(--shadow-lg);}
.aud{transition:transform .18s ease, background .18s ease, border-color .18s ease;}
.aud:hover{transform:translateY(-3px); background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.18);}
.foot-col a, .nav-links a{position:relative;}
.trust .t-name{transition:color .2s ease;}
.trust .line:hover .t-name{color:#CBB8AE;}

/* Lueur discrète et animée sur la carte CTA finale (le ::before reste derrière le texte) */
.final-card::before{animation:ctaPulse 7s ease-in-out infinite;}
@keyframes ctaPulse{0%,100%{opacity:.75; transform:scale(1);} 50%{opacity:1; transform:scale(1.04);}}

/* Ouverture douce des réponses de FAQ */
.faq[open] .ans{animation:riseIn .35s ease both;}

@media(prefers-reduced-motion:reduce){
  .hero-copy > *, .stage, .float-tag, .loyalty .bar i, .chart path[stroke],
  .final-card::before, .faq[open] .ans{animation:none;}
  .loyalty .bar i{width:72%;}
  .chart path[stroke]{stroke-dashoffset:0;}
}

/* ══════════ Boutons « Ajouter au Wallet » (dans le téléphone) ══════════ */
.wallet-btns{display:flex; gap:8px; margin:16px 16px 0;}
.wbtn{flex:1; display:flex; align-items:center; justify-content:center; gap:6px; height:42px;
  border-radius:11px; font-family:var(--sans); font-weight:600;}
.wbtn svg{flex-shrink:0;}
.wbtn-tx{display:flex; flex-direction:column; line-height:1.05; text-align:left;
  font-size:10.5px; letter-spacing:-.01em; white-space:nowrap;}
.wbtn-tx small{font-size:7.5px; font-weight:500; opacity:.7; letter-spacing:.04em; text-transform:uppercase;}
.wbtn.apple{background:#000; color:#fff; box-shadow:0 4px 10px rgba(0,0,0,.18);}
.wbtn.google{background:#fff; color:#3c4043; border:1px solid var(--border); box-shadow:var(--shadow-sm);}

/* ══════════ Notification push envoyée au client ══════════ */
.push-notif{position:absolute; left:-14px; top:16px; z-index:6; width:252px;
  display:flex; gap:11px; padding:12px 13px;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(160%) blur(12px);
  border:1px solid rgba(255,255,255,.7); border-radius:17px;
  box-shadow:var(--shadow-lg);
  animation:pushIn .8s cubic-bezier(.2,.7,.2,1) .7s both, notifFloat 5.5s ease-in-out 1.6s infinite;}
.push-notif .pn-icon{width:34px; height:34px; border-radius:9px; overflow:hidden; flex-shrink:0;
  box-shadow:0 3px 8px rgba(217,105,78,.3);}
.push-notif .pn-icon img{width:100%; height:100%; display:block;}
.pn-body{flex:1; min-width:0;}
.pn-head{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.pn-app{font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint);}
.pn-time{font-size:10px; color:var(--faint);}
.pn-title{font-size:13px; font-weight:750; letter-spacing:-.02em; color:var(--ink); margin-top:3px;}
.pn-text{font-size:11.5px; line-height:1.4; color:var(--muted); margin-top:2px;}
@keyframes pushIn{from{opacity:0; transform:translateY(-18px) scale(.94);} to{opacity:1; transform:none;}}
@keyframes notifFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);}}
@media(max-width:520px){ .push-notif{width:224px; left:-6px;} }

@media(prefers-reduced-motion:reduce){
  .push-notif{animation:none;}
}