/* ============================================================
   CLEVER SECURE — EXPÉRIENCE
   "Une journée dans votre résidence."
   Le ciel vit de l'aube à la nuit au scroll. Un téléphone collant
   morphe son écran en temps réel à chaque acte.
   Self-contained. S'appuie sur tokens.css + app.js (icônes).
   ============================================================ */

:root{
  --maxw: 1280px;
  --phone-w: 300px;
  --ease: cubic-bezier(.22,.61,.18,1);
  --ease-out: cubic-bezier(0,.7,.2,1);
}

html{ scroll-behavior:smooth; }
body.xp{
  margin:0; background:#05060d; color:var(--text-1);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.xp ::selection{ background:var(--brand-copper); color:#1a1206; }

/* ---------------- Living sky (fixed) ---------------- */
.sky{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at var(--glow-x,50%) var(--glow-y,24%),
      var(--glow-col,#1a2348) 0%, transparent 55%),
    linear-gradient(180deg, var(--sky-top,#05060d) 0%, var(--sky-base,#05060d) 70%);
  transition:none;
}
.sky::after{ /* fine star/dust field, fades by day */
  content:""; position:absolute; inset:0; opacity:var(--stars,1);
  background-image:
    radial-gradient(1.2px 1.2px at 18% 22%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 62% 14%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.3px 1.3px at 81% 33%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 33% 41%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.1px 1.1px at 47% 9%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 9% 52%, rgba(255,255,255,.3), transparent);
  transition:opacity 1.2s linear;
}
/* sun / moon disc that arcs across the day */
.celest{ position:fixed; z-index:0; width:min(46vw,520px); aspect-ratio:1; border-radius:50%;
  left:var(--cx,50%); top:var(--cy,30%); transform:translate(-50%,-50%);
  background:radial-gradient(circle, var(--disc,#C68A4E) 0%, transparent 62%);
  opacity:var(--disc-op,.5); filter:blur(8px); pointer-events:none; }

/* cursor lamp */
.lamp{ position:fixed; z-index:1; width:640px; height:640px; left:0; top:0;
  margin:-320px 0 0 -320px; border-radius:50%; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(198,138,78,.16) 0%, rgba(198,138,78,.05) 35%, transparent 66%);
  transition:opacity .6s; opacity:0; }
@media (hover:hover){ .lamp.live{ opacity:1; } }

/* film grain */
.grain{ position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------------- Top chrome ---------------- */
.xpnav{ position:fixed; top:0; left:0; right:0; z-index:30; display:flex; align-items:center;
  justify-content:space-between; padding:18px clamp(20px,4vw,46px);
  transition:background .4s, backdrop-filter .4s; }
.xpnav.scrolled{ background:linear-gradient(180deg, rgba(5,6,13,.72), transparent);
  backdrop-filter:blur(6px); }
.xpnav .brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em;
  color:var(--text-1); text-decoration:none; font-size:18px; }
.xpnav .brand .mark{ width:26px; height:26px; color:var(--brand-copper); display:block; }
.xpnav .brand .mark svg{ width:100%; height:100%; }
/* live now-chip: reflects the residence as you scroll */
.nowchip{ display:flex; align-items:center; gap:12px; padding:8px 14px; border-radius:var(--r-full);
  background:rgba(18,23,37,.55); border:1px solid var(--glass-border); backdrop-filter:blur(10px);
  font-size:13px; font-variant-numeric:tabular-nums; }
.nowchip .nc-time{ font-weight:600; color:var(--text-1); }
.nowchip .nc-sep{ width:1px; height:14px; background:var(--border-default); }
.nowchip .nc-state{ display:flex; align-items:center; gap:7px; color:var(--text-2); white-space:nowrap; }
.nowchip .nc-dot{ width:8px; height:8px; border-radius:50%; background:var(--safety-disarmed);
  box-shadow:0 0 10px currentColor; color:var(--safety-disarmed); transition:background .5s,color .5s; }
.xpnav .nav-cta{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--r-full);
  background:var(--brand-copper); color:#1a1206; font-weight:600; font-size:14px; text-decoration:none;
  box-shadow:var(--glow-copper); transition:transform .3s var(--ease); }
.xpnav .nav-cta:hover{ transform:translateY(-2px); }
.xpnav .nav-cta [data-icon]{ width:18px; height:18px; display:block; flex:none; }
@media(max-width:880px){ .nowchip{ display:none; } }

/* day rail (vertical timeline) */
.rail{ position:fixed; right:clamp(14px,2vw,30px); top:50%; transform:translateY(-50%); z-index:25;
  display:flex; flex-direction:column; gap:0; align-items:flex-end; }
.rail .seg{ display:flex; align-items:center; gap:10px; height:62px; position:relative; cursor:pointer;
  background:none; border:0; font:inherit; padding:0; }
.rail .seg:hover .lbl{ color:var(--brand-copper-soft); opacity:1; }
.rail .seg:hover .pt{ border-color:var(--brand-copper); transform:scale(1.15); }
.rail .seg:focus-visible{ outline:2px solid var(--brand-copper); outline-offset:5px; border-radius:8px; }
.rail .seg .lbl{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3);
  transition:color .4s, opacity .4s; opacity:.5; }
.rail .seg .pt{ width:9px; height:9px; border-radius:50%; border:1.5px solid var(--border-strong);
  background:transparent; transition:all .4s var(--ease); flex:none; }
.rail .seg.on .lbl{ color:var(--brand-copper-soft); opacity:1; }
.rail .seg.on .pt{ border-color:var(--brand-copper); background:var(--brand-copper); box-shadow:var(--glow-copper); transform:scale(1.25); }
.rail .track{ position:absolute; right:4px; top:8px; bottom:8px; width:1.5px; background:var(--border-subtle); }
.rail .track .fill{ position:absolute; top:0; left:0; right:0; height:var(--rf,0%); background:linear-gradient(var(--brand-copper),var(--brand-copper-deep)); transition:height .2s linear; }
@media(max-width:1100px){ .rail .lbl{ display:none; } }
@media(max-width:760px){ .rail{ display:none; } }

/* ---------------- shared layout ---------------- */
.xp section, .xp header, .xp footer{ position:relative; z-index:5; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,60px); }
.eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brand-copper-soft); font-weight:600; }
.eyebrow .pulse{ width:7px; height:7px; border-radius:50%; background:var(--brand-copper);
  box-shadow:0 0 0 0 rgba(198,138,78,.6); animation:pulse 2.6s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(198,138,78,.5)} 70%{box-shadow:0 0 0 12px rgba(198,138,78,0)} 100%{box-shadow:0 0 0 0 rgba(198,138,78,0)} }

/* ---------------- ACT 0 — Seuil / ouverture ---------------- */
.opening{ min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding:140px 0 80px; }
.op-clock{ font-variant-numeric:tabular-nums; font-family:var(--font-signature); font-weight:500;
  font-size:clamp(15px,2vw,18px); color:var(--text-2); letter-spacing:.02em; margin:22px 0 0; }
.op-clock b{ color:var(--brand-copper-soft); font-weight:600; }
.kicker{ overflow:hidden; }
.huge{ font-family:var(--font-signature); font-weight:600; letter-spacing:-.025em; line-height:.96;
  font-size:clamp(46px,9vw,128px); margin:14px 0 0; color:var(--text-1); }
.huge .ln{ display:block; overflow:hidden; }
.huge .ln > span{ display:block; }
/* animated entrance only once the CSS timeline is confirmed live (body.anim-ready) */
body.anim-ready .huge .ln > span{ transform:translateY(105%); animation:rise 1.05s cubic-bezier(.16,1,.3,1) both; }
body.anim-ready .huge .ln:nth-child(1) > span{ animation-delay:.12s; }
body.anim-ready .huge .ln:nth-child(2) > span{ animation-delay:.24s; }
body.anim-ready .huge .ln:nth-child(3) > span{ animation-delay:.36s; }
@keyframes rise{ from{ transform:translateY(105%); } to{ transform:translateY(0); } }
.huge .sig{ color:var(--brand-copper); font-style:normal; }
.op-lede{ max-width:560px; margin:30px 0 0; font-size:clamp(17px,1.7vw,21px); line-height:1.55; color:var(--text-2); }
.op-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; align-items:center; }
.btn-copper{ display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:var(--r-full);
  background:var(--brand-copper); color:#1a1206; font-weight:600; font-size:15px; text-decoration:none;
  box-shadow:var(--glow-copper); }
.btn-copper [data-icon]{ width:18px; height:18px; display:block; }
.btn-ghost{ display:inline-flex; align-items:center; gap:9px; padding:15px 22px; border-radius:var(--r-full);
  border:1px solid var(--border-strong); color:var(--text-1); text-decoration:none; font-weight:500; font-size:15px;
  transition:border-color .3s, background .3s; }
.btn-ghost:hover{ border-color:var(--brand-copper); background:rgba(198,138,78,.06); }
.scroll-cue{ position:absolute; left:50%; bottom:30px; transform:translateX(-50%); display:flex; flex-direction:column;
  align-items:center; gap:8px; color:var(--text-3); font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.scroll-cue .bar{ width:1px; height:40px; background:linear-gradient(var(--text-3),transparent); position:relative; overflow:hidden; }
.scroll-cue .bar::after{ content:""; position:absolute; top:-40%; left:0; width:100%; height:40%;
  background:var(--brand-copper); animation:cue 2.2s var(--ease) infinite; }
@keyframes cue{ 0%{top:-40%} 60%,100%{top:100%} }

/* opening living plan widget */
.op-stage{ position:relative; margin-top:6px; }
.breath{ position:absolute; right:-2%; top:50%; transform:translateY(-50%); width:min(40vw,440px); aspect-ratio:1;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(198,138,78,.14), transparent 60%);
  animation:breathe 7s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{transform:translateY(-50%) scale(1); opacity:.7} 50%{transform:translateY(-50%) scale(1.08); opacity:1} }

/* ---------------- Journey (sticky phone + acts) ---------------- */
.journey{ display:flex; align-items:flex-start; gap:clamp(30px,5vw,90px);
  max-width:var(--maxw); margin:0 auto;
  padding-left:clamp(20px,5vw,60px); padding-right:clamp(20px,9vw,150px); }
.narrative{ flex:1 1 auto; min-width:0; max-width:none; margin:0; padding:0; }
.phone-col{ flex:0 0 var(--phone-w); align-self:stretch; }
.phone-sticky{ position:sticky; top:var(--nav-h,84px); height:calc(100vh - var(--nav-h,84px)); display:flex; align-items:center; justify-content:center; }

/* the living phone */
.device{ position:relative; width:var(--phone-w); height:calc(var(--phone-w) * 2.06);
  border-radius:46px; padding:11px;
  background:linear-gradient(160deg,#23262f,#0d0f15);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8), inset 0 0 0 1.5px rgba(255,255,255,.06),
    0 0 0 1px rgba(0,0,0,.5);
  transition:box-shadow .6s; }
.device.alarm{ box-shadow:0 40px 90px -28px rgba(194,80,78,.55), inset 0 0 0 1.5px rgba(194,80,78,.4),
    0 0 0 1px rgba(0,0,0,.5); }
.device .screen{ position:relative; width:100%; height:100%; border-radius:36px; overflow:hidden;
  background:var(--bg); }
.device .notch{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:96px; height:26px;
  background:#05060a; border-radius:14px; z-index:8; }

/* phone state layers */
.pstate{ position:absolute; inset:0; opacity:0; transform:scale(1.02); pointer-events:none;
  padding:42px 16px 16px; overflow:hidden; }
.pstate.show{ opacity:1; transform:none; }
body.anim-ready .pstate{ transition:opacity .7s var(--ease), transform .7s var(--ease); }
.p-statusbar{ position:absolute; top:14px; left:20px; right:20px; display:flex; justify-content:space-between;
  align-items:center; font-size:12px; font-weight:600; color:var(--text-1); z-index:7; }
.p-statusbar .sb-r{ display:flex; gap:6px; align-items:center; }
.p-statusbar .sb-r [data-icon]{ width:15px; height:15px; display:block; }

.p-greet{ font-size:13px; color:var(--text-2); }
.p-res{ font-family:var(--font-signature); font-weight:600; font-size:22px; color:var(--text-1); margin:2px 0 0; }
.p-sub{ font-size:12px; margin-top:2px; }

.p-card{ background:var(--surface-1); border:1px solid var(--border-subtle); border-radius:var(--r-lg);
  padding:14px; margin-top:14px; }
.p-secrow{ display:flex; align-items:center; gap:11px; }
.p-secrow .ic{ width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:rgba(91,121,235,.14); color:var(--safety-disarmed); }
.p-secrow .ic [data-icon]{ width:19px; height:19px; display:block; }
.p-secrow .st{ font-weight:600; font-size:15px; color:var(--text-1); }
.p-secrow .mt{ font-size:11.5px; color:var(--text-3); }
.p-secrow .live-dot{ margin-left:auto; width:9px; height:9px; border-radius:50%; background:var(--safety-disarmed);
  box-shadow:0 0 10px currentColor; color:var(--safety-disarmed); }

.p-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.p-tile{ background:var(--surface-1); border:1px solid var(--border-subtle); border-radius:var(--r-md);
  padding:11px; transition:background .5s,border-color .5s; }
.p-tile.on{ background:linear-gradient(160deg,rgba(198,138,78,.16),rgba(198,138,78,.03)); border-color:rgba(198,138,78,.3); }
.p-tile .tt{ display:flex; justify-content:space-between; align-items:center; }
.p-tile .tt [data-icon]{ width:18px; height:18px; display:block; color:var(--text-2); }
.p-tile.on .tt [data-icon]{ color:var(--brand-copper-soft); }
.p-tile .tl{ font-size:12.5px; font-weight:600; color:var(--text-1); margin-top:14px; }
.p-tile .ts{ font-size:11px; color:var(--text-3); margin-top:1px; font-variant-numeric:tabular-nums; }
.sw{ width:34px; height:20px; border-radius:999px; background:var(--surface-3); position:relative; transition:background .4s; }
.sw::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; transition:left .4s var(--ease); }
.sw.on{ background:var(--brand-copper); }
.sw.on::after{ left:16px; }

.p-secbig{ text-align:center; padding-top:8px; }
.p-ring{ width:140px; height:140px; margin:6px auto 0; border-radius:50%; position:relative;
  display:flex; align-items:center; justify-content:center; }
.p-ring > svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.p-ring .rc{ stroke:var(--surface-3); }
.p-ring .rp{ stroke:var(--safety-away); stroke-linecap:round;
  stroke-dasharray:402; stroke-dashoffset:402; transition:stroke-dashoffset 1.4s var(--ease), stroke .6s; }
.p-ring .in{ text-align:center; }
.p-ring .in [data-icon]{ width:30px; height:30px; display:block; margin:0 auto; color:var(--safety-away); transition:color .6s; }
.p-ring .in .mode{ font-size:12px; color:var(--text-2); margin-top:5px; }
.p-secbig h4{ margin:16px 0 0; font-size:17px; font-weight:600; }
.p-secbig p{ margin:5px 0 0; font-size:12.5px; color:var(--text-3); }

/* alert state */
.p-alert{ text-align:center; display:flex; flex-direction:column; justify-content:center;
  padding:42px 16px 72px; }
.p-alert .pulse-ic{ width:72px; height:72px; margin:6px auto 0; border-radius:50%;
  background:radial-gradient(circle,rgba(194,80,78,.3),rgba(194,80,78,.08));
  display:flex; align-items:center; justify-content:center; color:var(--alert-critical);
  animation:alarmpulse 1.4s ease-in-out infinite; }
.p-alert .pulse-ic [data-icon]{ width:34px; height:34px; display:block; }
@keyframes alarmpulse{ 0%,100%{box-shadow:0 0 0 0 rgba(194,80,78,.35)} 60%{box-shadow:0 0 0 22px rgba(194,80,78,0)} }
.p-alert h4{ margin:16px 0 0; font-size:18px; font-weight:600; color:#F4D7D6; }
.p-alert .loc{ font-size:12px; color:var(--text-3); margin-top:4px; }
.p-alert .acts{ display:flex; flex-direction:column; gap:9px; margin-top:18px; }
.p-alert .ab{ padding:13px; border-radius:var(--r-md); font-weight:600; font-size:14px; }
.p-alert .ab.solid{ background:var(--alert-critical); color:#fff; }
.p-alert .ab.line{ border:1px solid var(--border-default); color:var(--text-1); }
.p-alert .resolved{ margin-top:20px; opacity:0; transition:opacity .6s; display:flex; align-items:center; gap:9px;
  justify-content:center; color:var(--safety-away); font-size:13px; font-weight:600; }
.p-alert.done .resolved{ opacity:1; }
.p-alert.done .acts{ opacity:.25; }
.p-alert .resolved [data-icon]{ width:18px; height:18px; display:block; }

.p-tabbar{ position:absolute; bottom:0; left:0; right:0; height:64px; display:flex; justify-content:space-around;
  align-items:center; padding:6px 8px 14px; background:rgba(8,11,20,.7); backdrop-filter:blur(12px);
  border-top:1px solid var(--border-subtle); }
.p-tabbar .tb{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:9.5px; color:var(--text-3); }
.p-tabbar .tb [data-icon]{ width:21px; height:21px; display:block; }
.p-tabbar .tb.act{ color:var(--brand-copper-soft); }

/* ---------------- Acts (narrative text) ---------------- */
.act{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:90px 0; }
.act .moment{ font-variant-numeric:tabular-nums; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-3); display:flex; align-items:center; gap:12px; }
.act .moment .idx{ color:var(--brand-copper); font-weight:700; }
.act .moment .ln{ width:36px; height:1px; background:var(--border-default); }
.act h2{ font-family:var(--font-signature); font-weight:600; letter-spacing:-.02em; line-height:1.02;
  font-size:clamp(34px,4.6vw,62px); margin:18px 0 0; color:var(--text-1); }
.act h2 .sig{ color:var(--brand-copper); }
.act .lede{ max-width:480px; margin:22px 0 0; font-size:clamp(16px,1.5vw,19px); line-height:1.6; color:var(--text-2); }
.act .detail{ display:flex; flex-direction:column; gap:14px; margin-top:30px; max-width:460px; }
.act .d-row{ display:flex; gap:14px; align-items:flex-start; }
.act .d-row .di{ flex:none; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-1); border:1px solid var(--border-subtle); color:var(--brand-copper-soft); }
.act .d-row .di [data-icon]{ width:20px; height:20px; display:block; }
.act .d-row h5{ margin:0; font-size:15px; font-weight:600; color:var(--text-1); }
.act .d-row p{ margin:3px 0 0; font-size:13.5px; color:var(--text-3); line-height:1.5; }

/* reveal primitives — VISIBLE by default; hidden state applies only under body.anim-ready
   so content can never stay blank if the CSS timeline is suspended (offscreen/throttled). */
.rv{ transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
body.anim-ready .rv{ opacity:0; transform:translateY(26px); }
body.anim-ready .rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.08s } .rv.d2{ transition-delay:.16s } .rv.d3{ transition-delay:.24s } .rv.d4{ transition-delay:.32s }
.clip{ transition:clip-path 1s var(--ease); }
body.anim-ready .clip{ clip-path:inset(0 100% 0 0); }
body.anim-ready .clip.in{ clip-path:inset(0 0 0 0); }

/* ---------------- Constellation (multi-résidence) ---------------- */
.constel{ padding:120px 0; text-align:center; }
.constel .map{ position:relative; max-width:880px; margin:46px auto 0; aspect-ratio:16/8; }
.constel .node{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:10px; }
.constel .node .halo{ width:16px; height:16px; border-radius:50%; background:var(--c,var(--safety-away));
  box-shadow:0 0 0 0 var(--c,var(--safety-away)); animation:nodepulse 3.4s ease-in-out infinite; }
@keyframes nodepulse{ 0%,100%{box-shadow:0 0 0 0 rgba(78,138,107,.45)} 60%{box-shadow:0 0 0 16px rgba(78,138,107,0)} }
.constel .node .tag{ background:rgba(18,23,37,.7); border:1px solid var(--glass-border); backdrop-filter:blur(8px);
  border-radius:var(--r-full); padding:6px 13px; font-size:12.5px; white-space:nowrap; }
.constel .node .tag b{ font-family:var(--font-signature); font-weight:600; }
.constel .node .tag .s{ color:var(--text-3); margin-left:7px; font-size:11px; }
.constel svg.links{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.constel svg.links path{ stroke:var(--border-default); stroke-width:1; fill:none; stroke-dasharray:5 6; opacity:.6;
  animation:dashflow 22s linear infinite; }
@keyframes dashflow{ to{ stroke-dashoffset:-220; } }

/* ---------------- Outro / Cleverixe ---------------- */
.outro{ padding:140px 0; }
.cx-band{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:30px;
  border:1px solid var(--border-subtle); border-radius:var(--r-xl); padding:clamp(28px,4vw,48px);
  background:linear-gradient(160deg, rgba(27,34,49,.5), rgba(8,11,20,.2)); }
.cx-band .k{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--brand-copper-soft); font-weight:600; }
.cx-band h3{ font-family:var(--font-signature); font-weight:600; font-size:clamp(24px,3vw,38px); margin:12px 0 0; max-width:560px; line-height:1.08; }
.cx-band p{ margin:14px 0 0; color:var(--text-2); max-width:520px; font-size:15px; line-height:1.55; }

/* CTA / form */
.cta{ position:relative; overflow:hidden; margin-top:30px; border-radius:var(--r-xl); padding:clamp(40px,6vw,80px) clamp(24px,4vw,60px);
  text-align:center; border:1px solid var(--border-subtle);
  background:radial-gradient(120% 120% at 50% 0%, rgba(198,138,78,.12), transparent 60%), var(--surface-inset); }
.cta h2{ font-family:var(--font-signature); font-weight:600; font-size:clamp(30px,4.5vw,58px); margin:14px auto 0; max-width:640px; line-height:1.04; }
.cta h2 .sig{ color:var(--brand-copper); }
.cta p{ margin:18px auto 0; max-width:520px; color:var(--text-2); font-size:16px; line-height:1.55; }
.cta-form{ display:flex; gap:12px; max-width:520px; margin:30px auto 0; flex-wrap:wrap; }
.cta-form .inp{ flex:1 1 160px; min-width:0; padding:15px 18px; border-radius:var(--r-md);
  background:var(--surface-1); border:1px solid var(--border-default); color:var(--text-1); font-size:15px; font-family:inherit; }
.cta-form .inp::placeholder{ color:var(--text-3); }
.cta-form .inp:focus{ outline:none; border-color:var(--brand-copper); }
.cta-form button{ flex:0 0 auto; padding:15px 26px; border-radius:var(--r-md); border:none; cursor:pointer;
  background:var(--brand-copper); color:#1a1206; font-weight:600; font-size:15px; font-family:inherit;
  box-shadow:var(--glow-copper); transition:transform .25s; }
.cta-form button:hover{ transform:translateY(-2px); }
.cta .fine{ font-size:12.5px; color:var(--text-3); margin-top:16px; }

/* footer */
.xpfoot{ border-top:1px solid var(--border-subtle); padding:48px 0; margin-top:80px; }
.xpfoot .row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; align-items:center; }
.xpfoot .brand{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--text-1); text-decoration:none; }
.xpfoot .brand .mark{ width:24px; height:24px; color:var(--brand-copper); display:block; }
.xpfoot .brand .mark svg{ width:100%; height:100%; }
.xpfoot .meta{ font-size:13px; color:var(--text-3); display:flex; gap:18px; flex-wrap:wrap; }
.xpfoot a.lk{ color:var(--text-3); text-decoration:none; }
.xpfoot a.lk:hover{ color:var(--brand-copper-soft); }

/* responsive: collapse sticky phone gracefully */
@media(max-width:860px){
  .journey{ flex-direction:column; padding-right:clamp(20px,5vw,60px); }
  .phone-col{ order:-1; flex:none; align-self:center; width:100%; }
  .phone-sticky{ position:sticky; top:64px; height:auto; padding:14px 0; }
  .device{ --phone-w:240px; transform:scale(1); }
  .act{ min-height:auto; padding:64px 0; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; }
  .clip{ clip-path:inset(0 0 0 0); }
  .huge .ln > span{ transform:none; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* ---------------- Theme toggle (clair / sombre) ---------------- */
.nav-right{ display:flex; align-items:center; gap:12px; }
.theme-toggle{ width:42px; height:42px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-full); border:1px solid var(--border-default); background:var(--glass);
  color:var(--text-1); cursor:pointer; backdrop-filter:blur(10px);
  transition:border-color .3s, transform .3s, background .3s; }
.theme-toggle:hover{ border-color:var(--brand-copper); transform:translateY(-2px); }
.theme-toggle .ti{ width:19px; height:19px; display:block; }
[data-theme="dark"] .theme-toggle .ti-moon{ display:none; }
[data-theme="light"] .theme-toggle .ti-sun{ display:none; }

/* ---------------- Store badges ---------------- */
.store-badges{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.store-badge{ display:inline-flex; align-items:center; gap:11px; padding:9px 18px; border-radius:var(--r-md);
  border:1px solid var(--border-strong); background:var(--surface-1); color:var(--text-1); text-decoration:none;
  transition:border-color .3s, transform .3s, background .3s; }
.store-badge:hover{ border-color:var(--brand-copper); transform:translateY(-2px); }
.store-badge .sb-ic{ width:22px; height:22px; display:block; color:var(--brand-copper-soft); flex:none; }
.store-badge .sb-tx{ display:flex; flex-direction:column; line-height:1.12; }
.store-badge .t1{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.store-badge .t2{ font-family:var(--font-signature); font-weight:600; font-size:15px; color:var(--text-1); }

/* ---------------- Light theme (clair) ---------------- */
[data-theme="light"]{ --sky-base:#EEF1F6; }
[data-theme="light"] body.xp{ background:#EEF1F6; }
[data-theme="light"] .xp ::selection{ background:var(--brand-copper); color:#fff; }
[data-theme="light"] .grain{ mix-blend-mode:multiply; opacity:.03; }
[data-theme="light"] .celest{ filter:blur(18px); }
[data-theme="light"] .xpnav.scrolled{ background:linear-gradient(180deg, rgba(246,248,251,.85), transparent); }
[data-theme="light"] .nowchip{ background:rgba(255,255,255,.72); }
[data-theme="light"] .cx-band{ background:linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
  box-shadow:var(--shadow-card); }
[data-theme="light"] .constel .node .tag{ background:rgba(255,255,255,.85); box-shadow:var(--shadow-card); }
[data-theme="light"] .p-tabbar{ background:rgba(255,255,255,.82); }
[data-theme="light"] .p-alert h4{ color:var(--alert-critical); }
[data-theme="light"] .nav-cta,
[data-theme="light"] .btn-copper,
[data-theme="light"] .cta-form button{ color:#fff; }