:root{
  --ink:#0d0e1c; --ink-2:#2a2c40; --muted:#5d6073;
  --bg:#f6f4ef; --card:#fff; --line:#e4e1d8;
  --violet:#5b3df5; --violet-2:#7b62ff; --lilac:#eeeafe;
  --mint:#19d3a2; --mint-soft:#dcf8ef;
  --p-lilac:#cbbfff; --p-sky:#a9e4ff; --p-peach:#ffc6b3; --p-butter:#fff1a8;
  --neon:#c86bff;
  --radius:22px; --shadow:0 20px 50px -20px rgba(13,14,28,.25);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}
h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.02em;line-height:1.05}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.hl{color:var(--violet)} .hl-mint{color:var(--mint)}
.script{font-family:Yellowtail,cursive;font-weight:400;letter-spacing:0}

/* ===== floating pill nav ===== */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--violet),var(--mint));z-index:70}
.navpill{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:7px 7px 7px 16px;box-shadow:0 12px 40px -12px rgba(13,14,28,.35);width:max-content;max-width:calc(100% - 24px)}
.logo{display:flex;align-items:center;gap:9px;font-family:"Space Grotesk";font-weight:700;font-size:16px;margin-right:10px;white-space:nowrap}
.logo-mark{width:30px;height:30px;border-radius:9px;background:var(--ink);display:grid;place-items:center;position:relative;overflow:hidden;flex:none}
.logo-mark::after{content:"";position:absolute;right:-5px;bottom:-5px;width:15px;height:15px;border-radius:50%;background:var(--mint)}
.logo-mark span{color:#fff;font-size:13px;z-index:1}
.logo b{color:var(--violet)}
.navpill .links{display:flex;gap:2px}
.navpill .links a{padding:10px 14px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;transition:background .25s}
.navpill .links a:hover,.navpill .links a.on{background:var(--p-butter)}
.navpill .cta{background:var(--violet);color:#fff;padding:11px 18px;border-radius:999px;font-weight:700;font-size:14px;white-space:nowrap}
.burger{display:none;background:var(--ink);color:#fff;border:0;width:40px;height:40px;border-radius:50%;font-size:18px;cursor:pointer}

.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:700;font-size:15px;transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer;border:0}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--violet);color:#fff;box-shadow:0 12px 30px -10px rgba(91,61,245,.8)}
.btn-mint{background:var(--mint);color:#053d2e;box-shadow:0 12px 30px -10px rgba(25,211,162,.8)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn-light{background:#fff;border:1px solid var(--line)}

/* ===== hero (dark, neon) ===== */
.hero{position:relative;margin:0 10px;border-radius:0 0 46px 46px;background:var(--ink);color:#fff;padding:140px 0 110px;overflow:hidden;isolation:isolate}
.hero .grid-bg{position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 60% 40%,#000 30%,transparent 75%)}
.blob{position:absolute;border-radius:50%;filter:blur(70px);z-index:-1;animation:float 14s ease-in-out infinite}
.b1{width:520px;height:520px;background:rgba(91,61,245,.55);top:-160px;right:-120px}
.b2{width:380px;height:380px;background:rgba(25,211,162,.32);bottom:-140px;left:-100px;animation-delay:-6s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-25px) scale(1.08)}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.dot{width:8px;height:8px;border-radius:50%;background:var(--mint);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(25,211,162,.6)}70%{box-shadow:0 0 0 10px rgba(25,211,162,0)}100%{box-shadow:0 0 0 0 rgba(25,211,162,0)}}
.neon{display:block;font-family:Yellowtail,cursive;font-size:clamp(46px,6.4vw,84px);line-height:1;color:#fbe9ff;margin:26px 0 6px;transform:rotate(-4deg);transform-origin:left;
  text-shadow:0 0 4px #fff,0 0 12px var(--neon),0 0 26px var(--neon),0 0 52px var(--violet),0 0 90px var(--violet);animation:flicker 6s infinite}
@keyframes flicker{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.55}}
.hero .h1{font-size:clamp(40px,5.6vw,74px);margin-bottom:22px}
.swap{color:var(--mint);display:inline-block;min-height:1em;transition:opacity .25s,transform .25s}
.swap.out{opacity:0;transform:translateY(-14px)}
.lead{font-size:18px;color:#c9cbe0;max-width:540px}
.lead b{color:#fff}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 22px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 13px;border-radius:999px;font-size:13.5px;font-weight:600;background:#fff;border:1px solid var(--line);color:var(--ink)}
.chip.v{background:var(--violet);color:#fff;border-color:var(--violet)}
.chip.m{background:var(--mint-soft);border-color:#b6ecdc;color:#0a7a5c}
.hero .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.hero .chip.v{background:var(--violet);border-color:var(--violet)}
.hero .chip.m{background:rgba(25,211,162,.16);border-color:rgba(25,211,162,.5);color:#8ff3d2}

/* hero visual */
.stage{position:relative;height:520px}
.ring{position:absolute;inset:40px 10px;border-radius:50%;border:2px dashed rgba(200,107,255,.45);animation:spin 40s linear infinite}
.ring.r2{inset:90px 60px;border-color:rgba(25,211,162,.5);animation-duration:28s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.browser{position:absolute;top:48px;left:0;width:84%;height:330px;background:#fff;border-radius:18px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);overflow:hidden;color:var(--ink);transform:rotate(-3deg);animation:bob 7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-10px)}}
.bbar{height:34px;background:#f1efe9;display:flex;align-items:center;gap:6px;padding:0 12px}
.bbar i{width:10px;height:10px;border-radius:50%}
.bbar i:nth-child(1){background:#ff6b6b}.bbar i:nth-child(2){background:#ffc84a}.bbar i:nth-child(3){background:#2fd27a}
.url{margin-left:10px;flex:1;height:20px;border-radius:6px;background:#fff;font-size:11px;color:var(--muted);display:flex;align-items:center;padding:0 8px}
.screen{height:calc(100% - 34px);overflow:hidden;position:relative}
.scroller{animation:scrollsite 12s ease-in-out infinite}
@keyframes scrollsite{0%,12%{transform:translateY(0)}45%,60%{transform:translateY(-230px)}88%,100%{transform:translateY(0)}}
.s-hero{height:170px;background:linear-gradient(135deg,#2b1a0f,#7a3d17);color:#fff;padding:34px 22px 22px;position:relative}
.s-hero h4{font-family:"Space Grotesk";font-size:22px;max-width:60%}
.s-hero small{opacity:.8;font-size:11px}
.s-btn{display:inline-block;margin-top:10px;background:#f4a64b;color:#2b1a0f;font-size:11px;font-weight:700;padding:6px 10px;border-radius:8px}
.s-plate{position:absolute;right:20px;top:24px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#ffe2b8,#d98a3a 60%,#8b4a1a)}
.s-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px}
.s-row div{height:70px;border-radius:10px;background:#f4eee4}
.s-row div:nth-child(2){background:#fde7cf}
.s-lines{padding:0 16px 16px}
.s-lines span{display:block;height:9px;border-radius:5px;background:#ece7dd;margin:8px 0}
.s-lines span:nth-child(2){width:80%}.s-lines span:nth-child(3){width:60%}
.s-book{margin:6px 16px;padding:12px;border-radius:12px;background:#2b1a0f;color:#fff;font-size:12px;display:flex;justify-content:space-between}
.demo-tag{position:absolute;top:8px;left:8px;font-size:10.5px;color:var(--muted);background:rgba(255,255,255,.9);padding:3px 8px;border-radius:8px;z-index:3}
.phone{position:absolute;right:4%;bottom:12px;width:190px;height:380px;border-radius:34px;background:#000;padding:10px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08);transform:rotate(6deg);animation:bob2 6s ease-in-out infinite;color:var(--ink)}
@keyframes bob2{0%,100%{transform:rotate(6deg) translateY(0)}50%{transform:rotate(6deg) translateY(12px)}}
.pscreen{height:100%;border-radius:26px;background:linear-gradient(180deg,#f7f5ff,#fff);overflow:hidden;position:relative;padding:30px 14px 14px}
.notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:70px;height:18px;border-radius:12px;background:#000}
.pay-title{font-size:11px;color:var(--muted)}
.pay-amount{font-family:"Space Grotesk";font-size:30px;font-weight:700;margin:4px 0 12px}
.cardv{height:96px;border-radius:14px;background:linear-gradient(135deg,var(--violet),#2a1a8f);color:#fff;padding:12px;font-size:10px;position:relative;overflow:hidden}
.cardv::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.12);right:-40px;top:-40px}
.cardv b{display:block;margin-top:34px;letter-spacing:.18em;font-size:11px}
.split{margin-top:12px;font-size:11px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px}
.split div{display:flex;justify-content:space-between;margin:3px 0}
.toast{position:absolute;left:12px;right:12px;bottom:16px;background:var(--mint);color:#053d2e;border-radius:14px;padding:10px 12px;font-weight:700;font-size:12px;animation:toast 6s ease-in-out infinite}
@keyframes toast{0%,35%{transform:translateY(140%);opacity:0}45%,85%{transform:translateY(0);opacity:1}100%{transform:translateY(140%);opacity:0}}
.tpe{position:absolute;left:4%;bottom:0;width:120px;height:170px;border-radius:20px;background:#1d1f33;box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1);padding:10px;transform:rotate(-8deg);animation:bob 8s ease-in-out infinite}
.tpe .sc{height:62px;border-radius:10px;background:#0f2a24;color:var(--mint);font-family:"Space Grotesk";font-size:13px;display:grid;place-items:center;text-align:center}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:9px}
.keys i{height:15px;border-radius:5px;background:#33364f}
.keys i:last-child{background:var(--mint)}
.nfc{position:absolute;top:-26px;right:-14px;width:46px;height:46px}
.nfc span{position:absolute;inset:0;border:2px solid var(--mint);border-radius:50%;opacity:0;animation:wave 2.4s infinite}
.nfc span:nth-child(2){animation-delay:.8s}.nfc span:nth-child(3){animation-delay:1.6s}
@keyframes wave{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.3);opacity:0}}

/* ===== marquee ===== */
.band{background:var(--violet);color:#fff;transform:rotate(-2deg);margin:-34px -20px 0;padding:20px 0;overflow:hidden;position:relative;z-index:2;box-shadow:0 20px 40px -20px rgba(91,61,245,.7)}
.track{display:flex;gap:34px;white-space:nowrap;width:max-content;animation:marquee 28s linear infinite;font-family:Anton,sans-serif;font-size:clamp(28px,4.2vw,52px);text-transform:uppercase;letter-spacing:.01em}
.track.rev{animation-direction:reverse;animation-duration:34s;color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.85);margin-top:6px}
.track span{display:flex;align-items:center;gap:34px}
.track span::after{content:"✦";color:var(--mint);font-size:.7em}
.track.rev span::after{color:var(--p-butter);-webkit-text-stroke:0}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ===== common ===== */
section{padding:100px 0}
.head{text-align:center;max-width:740px;margin:0 auto 50px}
.kicker{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violet)}
.head h2{font-size:clamp(34px,4.6vw,58px);margin:12px 0 14px}
.head p{color:var(--muted);font-size:17px}

/* ===== manifesto (oval video + scroll text) ===== */
.manifesto{background:linear-gradient(180deg,var(--bg),#ece6ff 40%,#e3f7ff)}
.mani-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:60px;align-items:center}
.oval{aspect-ratio:9/15;border-radius:999px;overflow:hidden;position:relative;background:var(--ink);box-shadow:0 30px 60px -25px rgba(91,61,245,.6)}
.oval video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.oval .anim{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(160deg,#2a1a8f,var(--violet) 45%,#19d3a2)}
.oval .anim::before{content:"";position:absolute;width:160%;height:160%;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.25),transparent 30%);animation:spin 8s linear infinite}
.oval .word{position:relative;color:#fff;font-family:Yellowtail;font-size:clamp(40px,5vw,64px);text-shadow:0 0 18px rgba(255,255,255,.6)}
.oval .word span{display:block;text-align:center;opacity:0;animation:words 9s infinite;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap}
.oval .word span:nth-child(2){animation-delay:3s}.oval .word span:nth-child(3){animation-delay:6s}
@keyframes words{0%{opacity:0;transform:translate(-50%,-30%)}8%,28%{opacity:1;transform:translate(-50%,-50%)}36%,100%{opacity:0;transform:translate(-50%,-70%)}}
.reveal-text{font-family:"Space Grotesk";font-weight:600;font-size:clamp(26px,3.3vw,44px);line-height:1.18;letter-spacing:-.015em}
.reveal-text .w{color:rgba(13,14,28,.18);transition:color .25s}
.reveal-text .w.on{color:var(--ink)}
.reveal-text .w.hl.on{color:var(--violet)}

/* ===== giant letters ===== */
.giant{background:var(--p-butter);padding:60px 0 30px;overflow:hidden;position:relative}
.letters{display:flex;justify-content:center;gap:clamp(6px,2vw,26px);font-family:Anton,sans-serif;font-size:clamp(70px,15vw,230px);line-height:.85;user-select:none}
.letters span{display:inline-block;transition:transform .2s linear}
.letters span:nth-child(odd){color:var(--p-lilac)}
.letters span:nth-child(even){color:var(--p-sky);position:relative;top:.16em}
.letters span:nth-child(3n){color:var(--p-peach)}
.giant p{text-align:center;font-family:"Space Grotesk";font-weight:700;font-size:clamp(20px,2.4vw,30px);margin-top:28px;color:var(--ink)}
.spark{position:absolute;color:var(--violet);font-size:44px;animation:spin 12s linear infinite}
.spark.s1{top:30px;left:6%}.spark.s2{bottom:40px;right:7%;color:var(--mint);font-size:60px;animation-duration:16s}

/* ===== services tabs ===== */
.tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;background:var(--ink);border-radius:999px;padding:6px;width:max-content;max-width:100%;margin:0 auto 34px}
.tab{border:0;background:none;color:#fff;font:700 13px/1 Inter;letter-spacing:.06em;text-transform:uppercase;padding:14px 20px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.tab.on{background:var(--mint);color:#053d2e}
.panel{display:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:32px;padding:46px;animation:pin .5s ease}
.panel.on{display:grid}
@keyframes pin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.panel h3{font-size:clamp(30px,3.6vw,46px);margin-bottom:14px}
.panel p{color:var(--muted);font-size:17px;margin-bottom:18px}
.panel ul{list-style:none;display:grid;gap:10px}
.panel li{display:flex;gap:10px;font-weight:500}
.panel li::before{content:"✦";color:var(--violet)}
.panel .from{margin-top:22px;font-weight:700}
.panel .from b{color:var(--violet);font-size:22px}
.visual{aspect-ratio:4/3;border-radius:24px;position:relative;overflow:hidden;display:grid;place-items:center}
.v1{background:linear-gradient(135deg,var(--p-lilac),var(--p-sky))}
.v2{background:linear-gradient(135deg,var(--p-peach),var(--p-butter))}
.v3{background:linear-gradient(135deg,#1b1340,var(--violet))}
.v4{background:linear-gradient(135deg,var(--p-butter),var(--p-lilac))}
.v5{background:linear-gradient(135deg,var(--ink),#123d33)}
.v6{background:linear-gradient(135deg,var(--p-sky),var(--mint-soft))}
.mini-site{width:72%;height:68%;background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:14px;animation:bob3 5s ease-in-out infinite}
.mini-site i{display:block;height:10px;border-radius:5px;background:#ece7dd;margin:8px 0}
.mini-site i:first-child{height:60px;background:linear-gradient(135deg,var(--violet),var(--mint));border-radius:10px}
@keyframes bob3{50%{transform:translateY(-10px)}}
.mini-phone{width:34%;height:82%;background:#000;border-radius:26px;padding:7px;box-shadow:var(--shadow);animation:bob3 5s ease-in-out infinite}
.mini-phone div{height:100%;border-radius:20px;background:#fff;padding:22px 10px;display:grid;gap:8px;align-content:start}
.mini-phone span{height:34px;border-radius:10px;background:var(--lilac)}
.mini-phone span:nth-child(2){background:var(--mint-soft)}
.play{width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.15);display:grid;place-items:center;backdrop-filter:blur(4px);box-shadow:0 0 0 0 rgba(255,255,255,.4);animation:ping2 2s infinite}
.play::after{content:"";border-left:26px solid #fff;border-top:16px solid transparent;border-bottom:16px solid transparent;margin-left:8px}
@keyframes ping2{70%{box-shadow:0 0 0 24px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.bcard{width:60%;aspect-ratio:1.75;border-radius:12px;background:var(--ink);color:#fff;padding:16px;box-shadow:var(--shadow);transform:rotate(-6deg);position:relative;font-family:"Space Grotesk"}
.bcard+.bcard{position:absolute;background:#fff;color:var(--ink);transform:rotate(8deg) translate(20%,14%)}
.bcard small{display:block;font-family:Inter;font-size:10px;opacity:.7;margin-top:4px}
.bigtpe{width:34%;height:72%;border-radius:22px;background:#1d1f33;padding:12px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 60px rgba(25,211,162,.35)}
.bigtpe .sc{height:38%;border-radius:12px;background:#0f2a24;color:var(--mint);display:grid;place-items:center;font-family:"Space Grotesk";font-size:clamp(12px,1.4vw,18px)}
.bigtpe .keys i{height:16%}
.doc{width:52%;height:70%;background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:16px;position:relative}
.doc i{display:block;height:9px;border-radius:5px;background:#ece7dd;margin:9px 0}
.doc .stamp{position:absolute;right:-16px;bottom:-16px;width:74px;height:74px;border-radius:50%;background:var(--mint);color:#053d2e;display:grid;place-items:center;font-weight:800;font-size:12px;transform:rotate(-12deg)}

/* ===== payment glow ===== */
.glow{position:relative;border-radius:46px;padding:70px;background:linear-gradient(135deg,#0d0e1c,#1a1450);color:#fff;box-shadow:0 0 0 1px rgba(25,211,162,.35),0 0 60px rgba(25,211,162,.35),0 0 120px rgba(91,61,245,.35);overflow:hidden}
.glow::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(91,61,245,.6),transparent 65%);right:-160px;top:-180px}
.glow-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:50px;position:relative}
.glow h2{font-size:clamp(32px,4vw,52px);margin:14px 0 18px}
.glow p{color:#c7c9dc;font-size:17px}
.checks{display:grid;gap:12px;margin-top:26px}
.checks div{display:flex;gap:12px;align-items:flex-start}
.checks b{color:#fff}
.tick{flex:none;width:24px;height:24px;border-radius:50%;background:var(--mint);color:#053d2e;display:grid;place-items:center;font-size:13px;font-weight:800;margin-top:2px}
.creds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:center}
.creds div{border:1px solid #2f3150;border-radius:18px;padding:18px;background:rgba(255,255,255,.04)}
.creds small{color:#9ea1bd;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.creds strong{display:block;font-family:"Space Grotesk";font-size:19px;margin-top:4px}

/* ===== video steps ===== */
.video{position:relative;border-radius:36px;overflow:hidden;background:linear-gradient(135deg,#1a1240,#0d0e1c);aspect-ratio:16/8;box-shadow:var(--shadow)}
.scene{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#fff;opacity:0;animation:scene 16s infinite;padding:20px}
.scene:nth-child(2){animation-delay:4s}.scene:nth-child(3){animation-delay:8s}.scene:nth-child(4){animation-delay:12s}
@keyframes scene{0%{opacity:0;transform:scale(1.04)}4%,22%{opacity:1;transform:scale(1)}26%,100%{opacity:0}}
.scene .big{font-family:"Space Grotesk";font-weight:700;font-size:clamp(28px,5vw,64px)}
.scene .step{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-bottom:10px}
.scene .sub{color:#c7c9dc;margin-top:10px}
.vbar{position:absolute;left:24px;right:24px;bottom:20px;height:4px;border-radius:4px;background:rgba(255,255,255,.15);overflow:hidden}
.vbar i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--mint));transform-origin:left;animation:vprog 16s linear infinite}
@keyframes vprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.vlabel{position:absolute;top:18px;left:22px;color:#fff;font-size:13px;display:flex;gap:8px;align-items:center;opacity:.85}
.rec{width:9px;height:9px;border-radius:50%;background:#ff5b5b}

/* ===== demos ===== */
.demos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;perspective:1200px}
.demo{border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--line);transition:transform .4s,box-shadow .4s}
.demo:hover{transform:rotateY(-6deg) rotateX(4deg) translateY(-6px);box-shadow:var(--shadow)}
.demo .shot{height:210px;position:relative;padding:20px;color:#fff;overflow:hidden}
.demo .shot h4{font-family:"Space Grotesk";font-size:22px;max-width:75%;line-height:1.1;margin-top:4px}
.demo .shot small{opacity:.85;font-size:12px}
.fake-btn{display:inline-block;margin-top:12px;padding:6px 10px;border-radius:8px;font-size:11px;font-weight:700}
.d1 .shot{background:linear-gradient(135deg,#2b1a0f,#8a4a1d)}.d1 .fake-btn{background:#f4a64b;color:#2b1a0f}
.d2 .shot{background:linear-gradient(135deg,#0f3d3a,#1d7c6d)}.d2 .fake-btn{background:#fff;color:#0f3d3a}
.d3 .shot{background:linear-gradient(135deg,#1b1b3a,#5b3df5)}.d3 .fake-btn{background:var(--mint);color:#053d2e}
.deco{position:absolute;right:-20px;bottom:-20px;width:140px;height:140px;border-radius:30px;background:rgba(255,255,255,.12);transform:rotate(18deg)}
.demo .meta{padding:16px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.demo .meta b{font-family:"Space Grotesk"}
.demo .meta span{font-size:12px;color:var(--muted)}
.note{text-align:center;color:var(--muted);font-size:14px;margin-top:18px}

/* ===== packs ===== */
.packs-sec{background:linear-gradient(180deg,var(--bg),#e9fbf4 30%,#efeaff);position:relative;overflow:hidden}
.script-title{font-family:Yellowtail,cursive;font-size:clamp(110px,18vw,260px);color:#fff;text-align:center;line-height:.8;margin-bottom:-40px;text-shadow:0 10px 40px rgba(91,61,245,.18);user-select:none}
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch;position:relative}
.price{background:#fff;border:1px solid var(--line);border-radius:28px;padding:32px;display:flex;flex-direction:column;position:relative}
.price.pop{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-12px);box-shadow:0 30px 60px -25px rgba(91,61,245,.7),0 0 0 2px var(--violet)}
.price .tag{position:absolute;top:-13px;left:32px;background:var(--mint);color:#053d2e;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px}
.price h3{font-size:24px}
.price .for{color:var(--muted);font-size:14.5px;margin:6px 0 20px}
.price.pop .for{color:#b9bbd0}
.amount{font-family:"Space Grotesk";font-weight:700;font-size:52px;line-height:1}
.amount small{font-size:16px;font-weight:600;color:var(--muted)}
.price.pop .amount small{color:#b9bbd0}
.split-pay{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;color:#0a7a5c;background:var(--mint-soft);padding:5px 10px;border-radius:999px;width:max-content}
.price ul{list-style:none;display:grid;gap:10px;margin:24px 0 28px;font-size:15px}
.price li{display:flex;gap:10px}
.price li::before{content:"✓";color:var(--violet);font-weight:800}
.price.pop li::before{color:var(--mint)}
.price .btn{margin-top:auto;justify-content:center}
.fine{text-align:center;color:var(--muted);font-size:14px;margin-top:26px}

/* ===== steps / founder / faq ===== */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:s}
.st{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:transform .3s,box-shadow .3s}
.st:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.st::before{counter-increment:s;content:"0" counter(s);font-family:Anton;font-size:48px;color:transparent;-webkit-text-stroke:1.5px var(--violet);display:block;margin-bottom:10px}
.st h3{font-size:20px;margin-bottom:6px}
.st p{color:var(--muted);font-size:15px}
.founder{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:50px;align-items:center}
.avatar{aspect-ratio:9/12;border-radius:999px;background:linear-gradient(160deg,var(--violet),#2a1a8f);position:relative;overflow:hidden;display:grid;place-items:center;max-width:360px;width:100%;margin:0 auto}
.avatar span{font-family:Yellowtail;font-size:96px;color:#fff;text-shadow:0 0 20px rgba(255,255,255,.5)}
.avatar::after{content:"";position:absolute;width:70%;height:50%;border-radius:50%;background:var(--mint);opacity:.3;right:-20%;bottom:-10%;filter:blur(10px);animation:float 10s ease-in-out infinite}
.founder h2{font-size:clamp(32px,4vw,48px);margin:12px 0 16px}
.founder p{color:var(--ink-2);font-size:17px;margin-bottom:12px}
.cred{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
details{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 24px}
summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:24px;color:var(--violet);transition:transform .25s;line-height:1}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--muted);margin-top:12px}

/* ===== contact ===== */
.final{background:linear-gradient(135deg,var(--violet),#2a1a8f);color:#fff;border-radius:46px;padding:70px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;width:400px;height:400px;border-radius:50%;background:rgba(25,211,162,.3);filter:blur(40px);left:-120px;bottom:-160px}
.final h2{font-size:clamp(34px,4.4vw,56px);position:relative}
.final .neon-sm{font-family:Yellowtail;font-size:clamp(34px,4vw,52px);display:block;color:#fbe9ff;text-shadow:0 0 10px var(--neon),0 0 30px var(--neon);margin-bottom:6px}
.final p{color:#dcd7ff;margin-top:14px;position:relative}
form{display:grid;gap:12px;position:relative}
input,select,textarea{width:100%;padding:15px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;font:inherit}
input::placeholder,textarea::placeholder{color:#c9c2ff}
select option{color:var(--ink)}
footer{padding:50px 0 40px;color:var(--muted);font-size:14px}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;border-top:1px solid var(--line);padding-top:30px}
.wa{position:fixed;right:20px;bottom:20px;z-index:55;display:flex;align-items:center;gap:10px;background:#1fae5b;color:#fff;font-weight:600;padding:14px 20px;border-radius:999px;box-shadow:0 14px 30px -10px rgba(31,174,91,.8);transition:transform .2s}
.wa:hover{transform:translateY(-2px)}

/* reveal */
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.d-1{transition-delay:.1s}.d-2{transition-delay:.2s}.d-3{transition-delay:.3s}

/* ===== responsive ===== */
@media (max-width:1060px){
  .navpill .links a{padding:10px 10px;font-size:12px}
}
@media (max-width:980px){
  .hero-grid,.glow-grid,.founder,.final,.mani-grid,.panel.on{grid-template-columns:minmax(0,1fr)}
  .stage{height:460px;max-width:520px;margin:0 auto;width:100%}
  .demos,.prices,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .price.pop{transform:none}
  .glow,.final{padding:46px 26px}
  .panel{padding:30px}
  .oval{max-width:280px;margin:0 auto;width:100%}
}
@media (max-width:820px){
  .navpill .links{display:none}
  .navpill .links.open{display:flex;flex-direction:column;position:absolute;top:calc(100% + 10px);left:0;right:0;background:#fff;border-radius:24px;padding:10px;box-shadow:0 20px 40px -15px rgba(13,14,28,.35)}
  .burger{display:block}
  .navpill{width:calc(100% - 24px);justify-content:space-between}
}
@media (max-width:640px){
  .navpill .cta{display:none}
  .demos,.prices,.steps{grid-template-columns:minmax(0,1fr)}
  section{padding:70px 0}
  .hero{margin:0;border-radius:0 0 32px 32px;padding:110px 0 80px}
  .stage{height:410px}
  .browser{width:94%;height:260px}
  .phone{width:150px;height:300px;right:0}
  .pay-amount{font-size:24px}
  .cardv{height:78px}.cardv b{margin-top:22px}
  .tpe{width:96px;height:140px}
  .tab{padding:12px 14px;font-size:12px}
  .tabs{border-radius:24px}
  .wa span{display:none}.wa{padding:14px}
  .video{aspect-ratio:4/5}
  .script-title{margin-bottom:-20px}
  .glow{border-radius:32px}
  .final{border-radius:32px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .scene:first-child,.oval .word span:first-child{opacity:1}
  .reveal-text .w{color:var(--ink)}
}

/* ===================== V3 : 3D, vidéo, scroll ===================== */
/* intro */
#loader{position:fixed;inset:0;z-index:200;background:radial-gradient(circle at 50% 45%,#2a1a8f,#0d0e1c 70%);display:grid;place-items:center;transition:clip-path 1s cubic-bezier(.77,0,.18,1);clip-path:inset(0 0 0 0)}
#loader.out{clip-path:inset(0 0 100% 0)}
#loader .ln{font-family:Yellowtail,cursive;font-size:clamp(54px,9vw,120px);color:#fbe9ff;text-shadow:0 0 6px #fff,0 0 20px var(--neon),0 0 50px var(--neon),0 0 90px var(--violet);animation:flicker 2.4s infinite}
#loader .bar{position:absolute;bottom:18%;left:50%;width:200px;height:3px;margin-left:-100px;background:rgba(255,255,255,.15);border-radius:3px;overflow:hidden}
#loader .bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--violet),var(--mint));transform-origin:left;animation:lbar 1.2s ease-out forwards}
@keyframes lbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* curseur */
.cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:150;border-radius:50%;mix-blend-mode:difference;display:none}
.cursor{width:42px;height:42px;border:2px solid #fff;margin:-21px 0 0 -21px;transition:width .25s,height .25s,margin .25s,background .25s}
.cursor.big{width:90px;height:90px;margin:-45px 0 0 -45px;background:#fff}
.cursor-dot{width:6px;height:6px;background:#fff;margin:-3px 0 0 -3px}
@media (hover:hover) and (pointer:fine){.cursor,.cursor-dot{display:block}}

/* hero 3D */
.stage3d{position:relative;height:560px}
.stage3d canvas#hero3d{position:absolute;inset:-60px -40px;width:calc(100% + 80px);height:calc(100% + 120px);display:block;z-index:0}
.stage3d .phone{z-index:3;right:0;bottom:-10px}
.stage3d .tpe{z-index:3;left:2%;bottom:-20px}
.pscreen.vid{padding:0;background:#000}
.pscreen.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pscreen.vid .toast{z-index:2}
.no3d .stage3d::before{content:"";position:absolute;inset:40px;border-radius:50%;background:radial-gradient(circle,rgba(91,61,245,.6),transparent 65%)}
.hint3d{position:absolute;top:6px;right:6px;z-index:4;font-size:12px;color:#b9bbd0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:6px 10px;border-radius:999px}

/* titres mot à mot */
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.wi{display:inline-block;will-change:transform}

/* film */
.film{background:var(--ink);color:#fff;margin:0 10px;border-radius:46px;overflow:hidden;position:relative;isolation:isolate}
.film::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 75% 40%,rgba(91,61,245,.55),transparent 55%),radial-gradient(circle at 15% 85%,rgba(25,211,162,.25),transparent 50%)}
.film .vbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.13;z-index:-1;transform:scale(1.15)}
.film-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:60px;align-items:center}
.film h2{font-size:clamp(38px,5vw,68px);margin:14px 0 18px}
.film p{color:#c9cbe0;font-size:18px;max-width:480px}
.film .kicker{color:var(--mint)}
.film-stage{perspective:1400px;display:grid;place-items:center;padding:20px 0}
.film-phone{width:min(330px,72vw);aspect-ratio:9/19;border-radius:52px;background:#000;padding:12px;position:relative;transform-style:preserve-3d;transform:rotateY(-14deg) rotateX(5deg);box-shadow:-40px 60px 100px -30px rgba(0,0,0,.8),0 0 0 2px rgba(255,255,255,.08),0 0 80px rgba(91,61,245,.45)}
.film-phone::after{content:"";position:absolute;inset:0;border-radius:52px;background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 30%);pointer-events:none}
.film-phone video{width:100%;height:100%;object-fit:cover;border-radius:42px;display:block;background:#0d0e1c}
.film-phone .island{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:96px;height:28px;border-radius:20px;background:#000;z-index:2}
.sound{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.eq{display:inline-flex;gap:3px;align-items:flex-end;height:16px}
.eq i{width:3px;background:currentColor;border-radius:2px;height:30%;animation:eq 1s infinite ease-in-out}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}.eq i:nth-child(4){animation-delay:.1s}
.muted .eq i{animation:none;height:30%}
@keyframes eq{0%,100%{height:30%}50%{height:100%}}
.film-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.film-tags span{padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.2);font-size:13px;color:#dcdcf0}

/* services : défilement horizontal */
.hs{padding:100px 0 60px;overflow:hidden}
.hs .head{margin-bottom:40px}
.hs-track{display:flex;gap:28px;padding:20px max(16px,calc((100vw - 1180px)/2));width:max-content;perspective:1600px}
.hs-card{width:min(540px,82vw);flex:none;background:#fff;border:1px solid var(--line);border-radius:34px;padding:26px;display:flex;flex-direction:column;gap:18px;transform-style:preserve-3d;will-change:transform;box-shadow:0 30px 60px -35px rgba(13,14,28,.35)}
.hs-card .visual{aspect-ratio:16/10}
.hs-card .n{font-family:Anton;font-size:56px;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--violet)}
.hs-card h3{font-size:32px;margin-top:-6px}
.hs-card p{color:var(--muted)}
.hs-card ul{list-style:none;display:grid;gap:6px;font-weight:500;font-size:15px}
.hs-card li::before{content:"✦ ";color:var(--violet)}
.hs-card .from{margin-top:auto;font-weight:700}
.hs-card .from b{color:var(--violet);font-size:21px}
.hs-card.feat{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 0 0 1px rgba(25,211,162,.4),0 0 60px rgba(25,211,162,.3)}
.hs-card.feat p{color:#b9bbd0}.hs-card.feat li::before{color:var(--mint)}.hs-card.feat .n{-webkit-text-stroke-color:var(--mint)}
.hs-progress{width:min(1180px,100% - 32px);margin:26px auto 0;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.hs-progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--violet),var(--mint));transform-origin:left;transform:scaleX(0)}
.letters{perspective:900px}
.letters span{transform-origin:50% 100%}
@media (max-width:900px){
  .hs-track{flex-direction:column;width:auto;padding:0 16px;align-items:center}
  .hs-card{width:100%;max-width:560px}
  .hs-progress{display:none}
  .film-grid{grid-template-columns:minmax(0,1fr)}
  .film{margin:0;border-radius:32px}
  .stage3d{height:440px}
}
@media (max-width:640px){
  .stage3d{height:400px}
  .stage3d .phone{width:150px;height:300px}
}
@media (prefers-reduced-motion:reduce){#loader{display:none}}
@media (hover:none){.hint3d{display:none}}


/* ===================== V4 : fluidité, lumières, cartes ===================== */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
/* blobs sans flou CSS (beaucoup plus fluide) */
.blob{filter:none;animation:float 14s ease-in-out infinite;will-change:transform}
.b1{background:radial-gradient(circle,rgba(91,61,245,.62),rgba(91,61,245,0) 68%);width:760px;height:760px;top:-300px;right:-260px}
.b2{background:radial-gradient(circle,rgba(25,211,162,.38),rgba(25,211,162,0) 68%);width:620px;height:620px;bottom:-260px;left:-220px}

/* faisceaux de lumière */
.beams{position:absolute;left:-10%;right:-10%;top:-30%;height:140%;z-index:-1;pointer-events:none;mix-blend-mode:screen;transform-origin:72% 0;
  background:conic-gradient(from 196deg at 72% 0%,transparent 0deg,rgba(200,107,255,.22) 6deg,transparent 13deg,rgba(25,211,162,.14) 22deg,transparent 30deg,rgba(123,98,255,.2) 41deg,transparent 52deg,rgba(255,241,168,.08) 60deg,transparent 70deg);
  -webkit-mask-image:linear-gradient(#000 20%,transparent 85%);mask-image:linear-gradient(#000 20%,transparent 85%);animation:beam 10s ease-in-out infinite alternate}
@keyframes beam{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.beams.b-film{transform-origin:20% 0;background:conic-gradient(from 160deg at 20% 0%,transparent 0deg,rgba(25,211,162,.16) 7deg,transparent 15deg,rgba(200,107,255,.2) 26deg,transparent 36deg,rgba(123,98,255,.18) 47deg,transparent 58deg)}

/* lampe torche qui suit la souris */
.torch{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .5s;background:radial-gradient(520px circle at var(--tx,50%) var(--ty,50%),rgba(123,98,255,.2),rgba(25,211,162,.06) 40%,transparent 65%)}
[data-torch]:hover>.torch{opacity:1}
.glow-grid,.film-grid,.hero-grid{position:relative;z-index:1}

/* cartes : lumière + contour qui suivent la souris */
.spot{position:relative;isolation:isolate}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),rgba(123,98,255,.1) 30%,transparent 55%);mix-blend-mode:soft-light}
.spot::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;z-index:3;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),#19d3a2,#7b62ff 40%,transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.spot:hover::after,.spot:hover::before{opacity:1}
/* reflet qui traverse la carte */
.shine{overflow:hidden}
.shine .sheen{position:absolute;inset:-40%;z-index:4;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.35) 50%,transparent 58%);transform:translateX(-80%);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.shine:hover .sheen{transform:translateX(80%)}

/* bordures animées sur les cartes vedettes */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.price.pop,.hs-card.feat{border:2px solid transparent;background:linear-gradient(var(--ink),var(--ink)) padding-box,conic-gradient(from var(--ang),#5b3df5,#19d3a2,#c86bff,#fff1a8,#5b3df5) border-box;animation:spinb 5s linear infinite}
@keyframes spinb{to{--ang:360deg}}
.price.pop::after{mix-blend-mode:screen}

/* texte dégradé qui brille */
.hl,.hl .wi{background:linear-gradient(90deg,#5b3df5,#c86bff,#19d3a2,#5b3df5);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite}
.hl-mint,.hl-mint .wi{background:linear-gradient(90deg,#19d3a2,#a9e4ff,#c86bff,#19d3a2);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:300% 0}}
.swap{text-shadow:0 0 24px rgba(25,211,162,.45)}

/* bandeau lumineux */
.band{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 20px 60px -10px rgba(91,61,245,.9),0 0 120px rgba(200,107,255,.35)}
.track:not(.rev) span{text-shadow:0 0 18px rgba(255,255,255,.35)}

/* ligne des étapes */
.steps{position:relative}
.stepline{position:absolute;left:4%;right:4%;top:54px;height:3px;border-radius:3px;background:var(--line);z-index:0;pointer-events:none}
.stepline i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--violet),var(--mint));box-shadow:0 0 18px rgba(91,61,245,.7)}
.st{position:relative;z-index:1}
@media (max-width:980px){.stepline{display:none}}

/* particules lumineuses dans le hero */
.sparks{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sparks i{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px rgba(200,107,255,.9);animation:rise linear infinite;opacity:0}
.sparks i:nth-child(3n){box-shadow:0 0 10px 2px rgba(25,211,162,.9)}
@keyframes rise{0%{transform:translateY(0) scale(.6);opacity:0}10%{opacity:1}90%{opacity:.8}100%{transform:translateY(-110vh) scale(1.2);opacity:0}}

/* performances */
.hs-card,.price,.demo,.film-phone,.stage3d{will-change:transform}
@media (prefers-reduced-motion:reduce){.beams,.sparks,.torch{display:none}.hl,.hl .wi,.hl-mint,.hl-mint .wi{animation:none}}


/* ===================== V5 : deuxième moitié, thème nuit ===================== */
.hero .neon{margin-bottom:20px}
.night{position:relative;background:#0a0a16;color:#fff;margin-top:90px;border-radius:56px 56px 0 0;isolation:isolate;overflow:clip}
.night-lights{position:absolute;inset:0;z-index:-1;pointer-events:none}
.night-lights i{position:absolute;border-radius:50%;width:900px;height:900px;background:radial-gradient(circle,rgba(91,61,245,.28),transparent 62%)}
.night-lights i:nth-child(1){top:-200px;left:-300px}
.night-lights i:nth-child(2){top:38%;right:-350px;background:radial-gradient(circle,rgba(25,211,162,.16),transparent 62%)}
.night-lights i:nth-child(3){bottom:-200px;left:20%;background:radial-gradient(circle,rgba(200,107,255,.2),transparent 62%)}
.night .head p,.night p{color:#b9bbd0}
.night h2{color:#fff}
.kick-mint{color:var(--mint)!important}
.night .head h2{color:#fff}

/* ---- méthode : scène figée ---- */
.scrolly{min-height:100vh;display:flex;align-items:center;padding:110px 0}
.scrolly-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center}
.sc-left h2{font-size:clamp(36px,4.6vw,62px);margin:14px 0 30px}
.sc-steps{display:grid;gap:10px}
.sc-step{display:flex;gap:18px;align-items:flex-start;padding:16px 18px;border-radius:20px;border:1px solid transparent;opacity:.35;transform:translateX(-6px);transition:opacity .5s,transform .5s,background .5s,border-color .5s}
.sc-step.on{opacity:1;transform:none;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);box-shadow:0 0 40px rgba(91,61,245,.25)}
.sc-n{font-family:Anton;font-size:40px;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--mint);min-width:56px}
.sc-step h3{font-size:22px;margin-bottom:4px}
.sc-step p{font-size:15px}
.sc-bar{height:3px;border-radius:3px;background:rgba(255,255,255,.12);margin-top:22px;overflow:hidden}
.sc-bar i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(.25);background:linear-gradient(90deg,var(--violet),var(--mint));transition:transform .5s;box-shadow:0 0 14px rgba(25,211,162,.8)}
.sc-right{perspective:1400px;display:grid;place-items:center}
.device{position:relative;width:min(440px,100%);aspect-ratio:4/5;border-radius:38px;background:linear-gradient(160deg,#1b1640,#0d0e1c);padding:16px;transform-style:preserve-3d;transform:rotateY(-14deg) rotateX(6deg);box-shadow:0 0 0 1px rgba(255,255,255,.1),-30px 50px 90px -30px rgba(0,0,0,.9);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.dv-glow{position:absolute;inset:-30px;border-radius:60px;background:radial-gradient(circle at 50% 40%,rgba(91,61,245,.55),transparent 65%);z-index:-1;filter:blur(10px)}
.dv-screen{position:relative;height:100%;border-radius:26px;overflow:hidden;background:#f7f5ff}
.layer{position:absolute;inset:0;padding:24px;opacity:0;transform:translateY(30px) scale(.96) rotateX(8deg);transition:opacity .55s,transform .65s cubic-bezier(.2,.7,.2,1);color:var(--ink)}
.layer{transition:opacity .3s,transform .4s}
.layer.on{opacity:1;transform:none;transition:opacity .5s .28s,transform .65s .28s cubic-bezier(.2,.7,.2,1)}
.dv-tag{position:absolute;bottom:-46px;left:50%;transform:translateX(-50%);font-size:13px;color:#b9bbd0;letter-spacing:.1em;text-transform:uppercase}
.chat{display:grid;gap:12px;align-content:start;height:100%}
.msg{max-width:85%;padding:12px 14px;border-radius:18px;font-size:14px;line-height:1.4;animation:pop .5s both}
.msg b{display:block;font-size:11px;opacity:.6;margin-bottom:3px}
.msg.in{background:#fff;border:1px solid var(--line)}
.msg.out{background:var(--violet);color:#fff;justify-self:end;animation-delay:.4s}
.msg.typing{display:flex;gap:5px;width:max-content;animation-delay:.8s}
.msg.typing span{width:7px;height:7px;border-radius:50%;background:#9a9cae;animation:typ 1s infinite}
.msg.typing span:nth-child(2){animation-delay:.15s}.msg.typing span:nth-child(3){animation-delay:.3s}
@keyframes typ{50%{transform:translateY(-4px);opacity:.4}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:none}}
.call{margin-top:auto;display:flex;gap:10px;align-items:center;justify-content:center;padding:14px;border-radius:16px;background:var(--mint);color:#053d2e;font-weight:700}
.ring-ic{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#053d2e;color:var(--mint);animation:ping 1.4s infinite}
.quote{background:#fff;border-radius:18px;padding:18px;box-shadow:0 20px 40px -20px rgba(13,14,28,.3);position:relative;height:100%;display:flex;flex-direction:column;gap:10px}
.q-head{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:10px}
.q-head b{color:var(--ink)}
.q-line{display:flex;justify-content:space-between;font-size:14px;padding:6px 0;border-bottom:1px dashed var(--line)}
.q-line b{color:var(--mint)}
.q-total{display:flex;justify-content:space-between;margin-top:auto;font-family:"Space Grotesk";font-size:24px;font-weight:700}
.q-split{align-self:flex-end;font-size:13px;font-weight:700;color:#0a7a5c;background:var(--mint-soft);padding:5px 10px;border-radius:999px}
.stampv{position:absolute;right:18px;top:70px;transform:rotate(-14deg);border:3px solid var(--mint);color:#0a7a5c;font-weight:800;padding:6px 12px;border-radius:10px;font-size:18px;opacity:0}
.layer.on .stampv{animation:stamp .5s .6s both}
@keyframes stamp{from{opacity:0;transform:rotate(-14deg) scale(2.2)}to{opacity:1;transform:rotate(-14deg) scale(1)}}
.build{height:100%;display:grid;gap:12px;align-content:start;position:relative}
.build>*{opacity:0}
.layer.on .build>*{animation:pop .5s both}
.layer.on .b-hero{animation-delay:.2s}.layer.on .b-tiles{animation-delay:.45s}.layer.on .b-lines{animation-delay:.7s}.layer.on .b-cursor{animation:curs 1.6s .9s both}
.b-nav{display:flex;gap:6px}.b-nav i{width:40px;height:8px;border-radius:4px;background:#ddd6f5}
.b-hero{height:150px;border-radius:16px;background:linear-gradient(135deg,#2b1a0f,#8a4a1d);color:#fff;padding:18px;display:flex;flex-direction:column;justify-content:space-between}
.b-hero span{font-family:"Space Grotesk";font-weight:700;font-size:22px}
.b-hero em{font-style:normal;align-self:flex-start;background:#f4a64b;color:#2b1a0f;font-weight:700;font-size:12px;padding:6px 12px;border-radius:999px}
.b-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.b-tiles i{height:80px;border-radius:12px;background:#ece4d6}
.b-lines i{display:block;height:10px;border-radius:5px;background:#e6e1f5;margin:8px 0}.b-lines i:last-child{width:60%}
.b-cursor{position:absolute;font-size:30px;color:var(--ink)}
@keyframes curs{from{opacity:1;left:80%;top:90%}to{opacity:1;left:22%;top:28%}}
.launch{height:100%;display:grid;place-items:center;align-content:center;gap:10px;text-align:center;position:relative;background:radial-gradient(circle at 50% 30%,#e9fbf4,#f7f5ff 70%)}
.l-badge{width:84px;height:84px;border-radius:50%;background:var(--mint);color:#053d2e;display:grid;place-items:center;font-size:40px;font-weight:800;box-shadow:0 0 0 0 rgba(25,211,162,.6);animation:ping 1.6s infinite}
.l-title{font-family:"Space Grotesk";font-weight:700;font-size:34px}
.l-url{color:var(--violet);font-weight:700}
.l-notif{width:100%;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;text-align:left;font-size:13px;box-shadow:0 10px 20px -12px rgba(13,14,28,.3);opacity:0}
.l-notif b{display:block}.l-notif span{color:var(--muted)}
.layer.on .l-notif{animation:pop .5s .5s both}.layer.on .l-notif.d2{animation-delay:.9s}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-10px;width:8px;height:14px;border-radius:2px;background:var(--violet);opacity:0}
.layer.on .confetti i{animation:conf 2.2s ease-in both}
.confetti i:nth-child(3n){background:var(--mint)}.confetti i:nth-child(4n){background:#f4a64b}.confetti i:nth-child(5n){background:var(--neon)}
.confetti i:nth-child(1){left:8%;animation-delay:.1s}.confetti i:nth-child(2){left:18%;animation-delay:.4s}.confetti i:nth-child(3){left:28%;animation-delay:.2s}.confetti i:nth-child(4){left:38%;animation-delay:.6s}.confetti i:nth-child(5){left:48%;animation-delay:.3s}.confetti i:nth-child(6){left:58%;animation-delay:.5s}.confetti i:nth-child(7){left:68%;animation-delay:.15s}.confetti i:nth-child(8){left:78%;animation-delay:.45s}.confetti i:nth-child(9){left:88%;animation-delay:.25s}.confetti i:nth-child(10){left:13%;animation-delay:.7s}.confetti i:nth-child(11){left:63%;animation-delay:.8s}.confetti i:nth-child(12){left:93%;animation-delay:.55s}
@keyframes conf{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(520px) rotate(540deg)}}

/* ---- réalisations : anneau 3D ---- */
.ring-sec{padding:110px 0 60px;overflow:hidden}
.ring-stage{position:relative;height:560px;perspective:1700px;cursor:grab;touch-action:pan-y;user-select:none}
.ring-stage:active{cursor:grabbing}
.ring3d{position:absolute;left:50%;top:40px;width:300px;height:400px;margin-left:-150px;transform-style:preserve-3d;--R:440px}
.rcard{position:absolute;inset:0;transform:rotateY(calc(var(--i) * 60deg)) translateZ(var(--R));border-radius:24px;overflow:hidden;background:#13122a;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 60px -30px rgba(0,0,0,.9);display:flex;flex-direction:column;will-change:opacity}
.rshot{flex:1;padding:16px;position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;gap:8px}
.rshot::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);transform:translateX(-100%);animation:rsheen 5s infinite;animation-delay:calc(var(--i,0) * .6s)}
@keyframes rsheen{0%,60%{transform:translateX(-100%)}80%,100%{transform:translateX(100%)}}
.rnav{display:flex;gap:5px;margin-bottom:auto}.rnav i{width:26px;height:6px;border-radius:3px;background:rgba(255,255,255,.35)}
.rshot small{opacity:.8;font-size:12px}
.rshot h4{font-family:"Space Grotesk";font-size:26px;line-height:1.05}
.rbtn{align-self:flex-start;font-size:12px;font-weight:700;padding:7px 12px;border-radius:999px;background:#fff;color:var(--ink)}
.rtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}.rtiles i{height:54px;border-radius:10px;background:rgba(255,255,255,.18)}
.r1{background:linear-gradient(160deg,#2b1a0f,#8a4a1d)}.r1 .rbtn{background:#f4a64b}
.r2{background:linear-gradient(160deg,#0f3d3a,#1d7c6d)}
.r3{background:linear-gradient(160deg,#5b3df5,#c86bff)}.r3 .rbtn{background:var(--mint);color:#053d2e}
.r4{background:linear-gradient(160deg,#111,#3a3020)}.r4 .rbtn{background:#d8b45a}
.r5{background:linear-gradient(160deg,#0d0e1c,#19d3a2)}
.r6{background:linear-gradient(160deg,#1b2a5a,#ffb59c)}
.rmeta{padding:12px 16px;display:flex;justify-content:space-between;align-items:center;background:#0f0e22;font-size:13px}
.rmeta b{font-family:"Space Grotesk";font-size:16px}.rmeta span{color:#9ea1bd}
.ring-floor{position:absolute;left:50%;bottom:20px;width:900px;height:120px;margin-left:-450px;border-radius:50%;background:radial-gradient(ellipse,rgba(91,61,245,.45),transparent 65%)}

/* ---- packs : aurore + verre ---- */
.packs2{position:relative;padding:120px 0;overflow:hidden;isolation:isolate}
.aurora{position:absolute;inset:0;z-index:-1;pointer-events:none}
.aurora i{position:absolute;width:70vw;height:70vw;max-width:1000px;max-height:1000px;border-radius:50%;background:radial-gradient(circle,rgba(91,61,245,.5),transparent 60%);animation:aur 16s ease-in-out infinite alternate;will-change:transform}
.aurora i:nth-child(1){top:-30%;left:-15%}
.aurora i:nth-child(2){top:10%;right:-20%;background:radial-gradient(circle,rgba(25,211,162,.32),transparent 60%);animation-duration:20s;animation-delay:-6s}
.aurora i:nth-child(3){bottom:-40%;left:25%;background:radial-gradient(circle,rgba(200,107,255,.35),transparent 60%);animation-duration:24s;animation-delay:-12s}
@keyframes aur{0%{transform:translate(0,0) scale(1)}50%{transform:translate(8%,6%) scale(1.15)}100%{transform:translate(-6%,10%) scale(.95)}}
.neon-title{display:block;font-family:Yellowtail,cursive;font-size:clamp(90px,13vw,190px);line-height:.8;color:#fbe9ff;text-shadow:0 0 6px #fff,0 0 22px var(--neon),0 0 60px var(--neon),0 0 110px var(--violet);margin-bottom:6px;animation:flicker 7s infinite}
.paytoggle{position:relative;display:flex;width:max-content;margin:0 auto 46px;padding:6px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.paytoggle button{position:relative;z-index:1;border:0;background:none;color:#cfd0e6;font:700 14px Inter;padding:12px 22px;border-radius:999px;cursor:pointer;transition:color .3s}
.paytoggle button.on{color:#053d2e}
.paytoggle .knob{position:absolute;top:6px;bottom:6px;left:6px;border-radius:999px;background:var(--mint);box-shadow:0 0 24px rgba(25,211,162,.7);transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s}
.packs2 .price{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.packs2 .price .for{color:#b9bbd0}
.packs2 .price .amount small{color:#b9bbd0}
.packs2 .price li::before{color:var(--mint)}
.packs2 .price.pop{background:linear-gradient(#15123a,#15123a) padding-box,conic-gradient(from var(--ang),#5b3df5,#19d3a2,#c86bff,#fff1a8,#5b3df5) border-box;border:2px solid transparent}
.amount .num{display:inline-block;min-width:1ch}
.amount .pfx{font-size:16px;font-weight:600;color:#b9bbd0}
.btn-glass{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22)}
.packs2 .split-pay{background:rgba(25,211,162,.14);color:#8ff3d2}
.packs2 .fine{color:#9ea1bd}

/* ---- fondateur ---- */
.founder2{display:block!important;padding:110px 0 0}
.fgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:70px;align-items:center}
.fvis{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:460px;width:100%;margin:0 auto;perspective:1200px}
.fvis .avatar{width:58%;aspect-ratio:9/12;max-width:none;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 80px rgba(91,61,245,.6)}
@property --spin{syntax:'<angle>';inherits:true;initial-value:0deg}
.orbit{position:absolute;inset:0;animation:orb 40s linear infinite;pointer-events:none}
@keyframes orb{to{--spin:360deg}}
.orbit span{position:absolute;left:50%;top:50%;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;transform:translate(-50%,-50%) rotate(calc(var(--a) + var(--spin))) translateY(-215px) rotate(calc((var(--a) + var(--spin)) * -1))}
.orbit span:nth-child(odd){color:var(--mint);border-color:rgba(25,211,162,.4)}
.ftext h2{font-size:clamp(34px,4.2vw,56px);margin:12px 0 16px}
.ftext p{font-size:17px;margin-bottom:18px}
.typed{list-style:none;display:grid;gap:10px;margin:0 0 26px}
.typed li{font-family:"Space Grotesk";font-weight:600;font-size:18px;min-height:1.4em;color:#fff}
.typed li::before{content:"✓ ";color:var(--mint)}
.typed li.caret::after{content:"▍";color:var(--mint);animation:blink .8s infinite}
@keyframes blink{50%{opacity:0}}
.techband{margin-top:90px;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);padding:22px 0;overflow:hidden}
.ttrack{display:flex;gap:40px;width:max-content;animation:marquee 40s linear infinite;font-family:Anton;font-size:clamp(26px,3.4vw,44px);text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.45)}
.ttrack span{display:flex;align-items:center;gap:40px}
.ttrack span::after{content:"✦";color:var(--mint);-webkit-text-stroke:0;font-size:.6em}
.ttrack span:nth-child(3n){color:#fff;-webkit-text-stroke:0}

/* ---- FAQ ---- */
.faq2{padding:110px 0}
.fq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:60px;align-items:start}
.fq-left{position:sticky;top:120px}
.fq-left h2{font-size:clamp(34px,4.2vw,56px);margin:12px 0 16px}
.fq-left p{margin-bottom:22px}
.faq2 .faq{max-width:none}
.faq2 details{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:22px;padding:22px 24px;transition:background .3s,border-color .3s}
.faq2 details[open]{background:rgba(91,61,245,.12);border-color:rgba(123,98,255,.5);box-shadow:0 0 40px rgba(91,61,245,.25)}
.faq2 summary{font-size:18px;align-items:center;justify-content:flex-start;text-align:left}
.faq2 summary::after{margin-left:auto;padding-left:16px}
.qn{font-family:Anton;color:var(--mint);font-size:18px;margin-right:14px}
.faq2 summary::after{color:var(--mint)}
.faq2 .ans p{color:#c9cbe0;margin-top:12px;padding-left:36px}
.faq2 details[open] .ans{animation:pop .45s both}

/* ---- contact ---- */
.contact2{padding:40px 0 110px}
.bigmarq{overflow:hidden;padding:30px 0 50px}
.bmt{display:flex;gap:60px;width:max-content;animation:marquee 26s linear infinite;font-family:Anton;font-size:clamp(60px,10vw,150px);text-transform:uppercase;line-height:1}
.bmt span{display:flex;align-items:center;gap:60px;background:linear-gradient(90deg,#fff,#c86bff,#19d3a2,#fff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
.bmt span::after{content:"✦";-webkit-text-fill-color:var(--mint);font-size:.5em}
.contact2 .final{background:linear-gradient(135deg,rgba(91,61,245,.9),#2a1a8f);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 100px -30px rgba(91,61,245,.8)}
.contact2 .final h2{font-size:clamp(30px,3.6vw,48px)}
.cinfo{display:grid;gap:10px;margin-top:26px;position:relative}
.cinfo a{display:flex;gap:12px;align-items:center;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font-weight:600;transition:background .3s,transform .3s;width:max-content;max-width:100%}
.cinfo a:hover{background:rgba(255,255,255,.18);transform:translateX(6px)}
.fl{position:relative;display:block}
.fl input,.fl textarea,.fl select{padding:24px 16px 10px}
.fl span{position:absolute;left:17px;top:18px;color:#d6d0ff;font-size:15px;pointer-events:none;transition:transform .25s,font-size .25s,top .25s,color .25s}
.fl input:focus+span,.fl input:not(:placeholder-shown)+span,.fl textarea:focus+span,.fl textarea:not(:placeholder-shown)+span,.fl span.up{top:8px;font-size:11px;color:var(--mint);letter-spacing:.06em;text-transform:uppercase}
.fl input:focus,.fl textarea:focus,.fl select:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(25,211,162,.25)}
.send{justify-content:center;position:relative;overflow:hidden}
.burst{position:fixed;pointer-events:none;z-index:300;width:8px;height:12px;border-radius:2px}

/* ---- footer ---- */
.foot2{padding:60px 0 30px;color:#9ea1bd;border-top:1px solid rgba(255,255,255,.08)}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1.2fr auto;gap:30px}
.fcols h4{color:#fff;font-family:"Space Grotesk";margin-bottom:12px}
.fcols a{display:block;margin:6px 0;transition:color .25s}
.fcols a:hover{color:var(--mint)}
.foot2 .logo{color:#fff}
.foot2 .logo-mark{box-shadow:0 0 0 1px rgba(255,255,255,.3)}
.foot2 p{margin-top:12px;max-width:300px}
.totop{width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-size:24px;cursor:pointer;transition:background .3s,transform .3s}
.totop:hover{background:var(--mint);color:#053d2e;transform:translateY(-4px)}
.wordmark{font-family:Anton;font-size:clamp(52px,12.4vw,196px);overflow:hidden;line-height:.85;text-align:center;margin:60px 0 20px;white-space:nowrap;letter-spacing:-.01em;background:linear-gradient(180deg,#fff 10%,rgba(91,61,245,.9) 60%,rgba(25,211,162,.2));-webkit-background-clip:text;background-clip:text;color:transparent}
.wordmark .lt{display:inline-block;background:inherit;-webkit-background-clip:text;background-clip:text}
.fbottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;border-top:1px solid rgba(255,255,255,.08);padding-top:20px}

/* ---- responsive ---- */
@media (max-width:980px){
  .scrolly-grid,.fgrid,.fq-grid{grid-template-columns:minmax(0,1fr)}
  .scrolly{min-height:auto}
  .sc-right{order:-1}
  .device{width:min(360px,100%)}
  .fq-left{position:static}
  .fcols{grid-template-columns:1fr 1fr}
  .night{border-radius:36px 36px 0 0}
}
@media (max-width:640px){
  .ring-stage{height:440px}
  .ring3d{width:220px;height:300px;margin-left:-110px;--R:300px}
  .rshot h4{font-size:20px}
  .orbit span{transform:translate(-50%,-50%) rotate(calc(var(--a) + var(--spin))) translateY(-160px) rotate(calc((var(--a) + var(--spin)) * -1));font-size:11px;padding:6px 10px}
  .paytoggle button{padding:10px 14px;font-size:13px}
  .fcols{grid-template-columns:1fr}
  .cinfo a{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.aurora i,.orbit,.ttrack,.bmt,.rshot::after{animation:none!important}}


/* ===================== V6 : produits + correctifs ===================== */
.letters span{transition:none!important}
.film .vbg{display:none}
/* ---- produits ---- */
.prods{padding:120px 0 80px;position:relative}
.pfilter{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 40px;max-width:900px}
.pfilter button{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#d6d7ea;font:600 14px Inter;padding:11px 18px;border-radius:999px;cursor:pointer;transition:background .3s,color .3s,border-color .3s,transform .3s}
.pfilter button:hover{transform:translateY(-2px);border-color:rgba(25,211,162,.6)}
.pfilter button.on{background:var(--mint);color:#053d2e;border-color:var(--mint);box-shadow:0 0 24px rgba(25,211,162,.5)}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.prod{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:26px;overflow:hidden;display:flex;flex-direction:column;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,opacity .4s;transform-style:preserve-3d}
.prod:hover{transform:translateY(-8px);box-shadow:0 30px 60px -25px rgba(91,61,245,.6)}
.prod.hide{display:none}
.prod.feat-p{border-color:rgba(25,211,162,.45);box-shadow:0 0 40px rgba(25,211,162,.18)}
.pv{position:relative;height:220px;display:grid;place-items:center;background:radial-gradient(circle at 50% 60%,rgba(91,61,245,.35),transparent 70%),linear-gradient(160deg,#17153a,#0e0d22);overflow:hidden;perspective:900px}
.prod:nth-child(4n+2) .pv{background:radial-gradient(circle at 50% 60%,rgba(25,211,162,.28),transparent 70%),linear-gradient(160deg,#10222a,#0b0f1c)}
.prod:nth-child(4n+3) .pv{background:radial-gradient(circle at 50% 60%,rgba(200,107,255,.3),transparent 70%),linear-gradient(160deg,#1d1236,#0e0d22)}
.pt{padding:18px 20px 22px}
.pcat{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mint)}
.pt h3{font-size:20px;margin:6px 0 6px;color:#fff}
.pt p{font-size:14px;color:#b9bbd0;line-height:1.45}
.prods-note{text-align:center;color:#9ea1bd;margin-top:28px}
/* animation commune */
.pv>*{animation:hov 5s ease-in-out infinite}
.pv>*:nth-child(2){animation-delay:-2.5s}
@keyframes hov{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.pv>.tri{animation:none}
.prod:hover .pv>*{animation-duration:2.5s}
/* cartes de visite */
.bc{position:absolute;width:190px;height:110px;border-radius:10px;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;font-family:"Space Grotesk";box-shadow:0 18px 30px -12px rgba(0,0,0,.7);rotate:-8deg}
.bc.b2{rotate:10deg;translate:30px 20px;opacity:.9}
.bc b{font-size:17px}.bc small{font-family:Inter;font-size:10px;opacity:.75}
.bc-classic{background:#fff;color:var(--ink)}
.bc-classic .dotm{position:absolute;top:12px;right:12px;width:18px;height:18px;border-radius:50%;background:var(--violet)}
.bc-gold{background:linear-gradient(135deg,#111,#2a2a2a);color:transparent}
.bc-gold b,.bc-gold small{background:linear-gradient(90deg,#b88a2f,#f6e6a6,#b88a2f);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:shine 3s linear infinite}
.bc-nfc{background:linear-gradient(135deg,#5b3df5,#2a1a8f);color:#fff;rotate:-6deg;translate:-30px 0}
.nfcw{position:absolute;right:14px;top:14px;width:30px;height:30px}
.nfcw i{position:absolute;inset:0;border:2px solid var(--mint);border-radius:50%;opacity:0;animation:wave 2.2s infinite}
.nfcw i:nth-child(2){animation-delay:.7s}.nfcw i:nth-child(3){animation-delay:1.4s}
.nfcw.big{position:absolute;width:60px;height:60px;right:22%;top:18%}
.nfcw.big.s{right:auto;left:22%}
.phone-mini{position:absolute;right:16%;bottom:-30px;width:70px;height:140px;border-radius:16px;background:#000;border:2px solid #333;rotate:12deg}
.phone-mini i{position:absolute;inset:6px;border-radius:11px;background:linear-gradient(160deg,#c86bff,#19d3a2)}
.bc-clear{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);color:#fff;box-shadow:inset 0 0 30px rgba(255,255,255,.1),0 18px 30px -12px rgba(0,0,0,.6)}
.bc-metal{background:linear-gradient(115deg,#2b2b2e 0%,#5a5a60 40%,#1f1f22 60%,#46464b 100%);color:#e9e9ee;letter-spacing:.12em;rotate:-4deg;width:200px}
/* flyers */
.fly{position:absolute;background:#fff;border-radius:6px;box-shadow:0 18px 30px -12px rgba(0,0,0,.7);padding:10px;overflow:hidden}
.fly.a5{width:120px;height:170px;rotate:-7deg;translate:-35px 0}
.fly.a6{width:90px;height:128px;rotate:9deg;translate:55px 25px}
.fly .fh{height:45%;border-radius:4px;margin-bottom:8px}
.fly i{display:block;height:6px;border-radius:3px;background:#e6e1f5;margin:5px 0}.fly i.s{width:60%}
.fly em{position:absolute;right:8px;top:8px;font-style:normal;font-weight:800;font-size:12px;color:#fff;background:#ff4d5e;padding:3px 6px;border-radius:6px}
.tri{display:flex;transform:rotateX(14deg) rotateY(-18deg);transform-style:preserve-3d}
.tri span{width:70px;height:150px;background:linear-gradient(180deg,#fff 0 38%,#f1edff 38%);border:1px solid #e4e1d8;transform:rotateY(calc((var(--k) - 1) * 22deg));box-shadow:0 18px 30px -14px rgba(0,0,0,.6)}
.tri span:nth-child(2){background:linear-gradient(180deg,#5b3df5 0 38%,#fff 38%)}
.menu{width:130px;height:180px;background:#2b1a0f;border-radius:6px;padding:14px 12px;color:#f6e6c8;display:flex;flex-direction:column;gap:9px;box-shadow:0 18px 30px -12px rgba(0,0,0,.7);rotate:-4deg}
.menu b{text-align:center;font-family:"Space Grotesk";letter-spacing:.2em;font-size:15px;color:#f4a64b}
.menu span{display:flex;align-items:center;gap:4px;font-size:10px}
.menu span i{flex:1;border-bottom:1px dotted rgba(246,230,200,.5)}
.rollup{position:absolute;left:28%;bottom:18px;width:70px;height:180px;display:flex;flex-direction:column;align-items:center}
.rb{flex:1;width:100%;background:linear-gradient(180deg,#19d3a2,#0f3d3a);border-radius:3px;display:grid;place-items:center;text-align:center;color:#fff;font-family:Anton;font-size:13px;padding:6px}
.rb small{font-family:Inter;font-size:8px;display:block}
.rs{width:90px;height:10px;border-radius:5px;background:#9aa0b5}
.poster{position:absolute;right:22%;top:32px;width:100px;height:140px;background:linear-gradient(160deg,#ff4d5e,#c86bff);border-radius:4px;display:grid;place-items:center;font-family:Anton;color:#fff;font-size:24px;rotate:6deg;box-shadow:0 18px 30px -12px rgba(0,0,0,.7)}
.stick{position:absolute;width:100px;height:100px;border-radius:50%;background:var(--butter,#fff1a8);display:grid;place-items:center;font-size:44px;color:#f59e0b;rotate:-10deg;translate:-50px 0;box-shadow:0 12px 24px -10px rgba(0,0,0,.6)}
.stick.s2{width:130px;height:60px;border-radius:12px;background:#fff;font-size:14px;color:var(--ink);translate:50px 30px;rotate:8deg;font-family:"Space Grotesk"}
.stick.s2 b{display:flex;gap:4px;align-items:center}
/* appareils */
.tab{position:relative;display:flex;flex-direction:column;align-items:center}
.ts{width:190px;height:125px;border-radius:12px;background:#0d0e1c;border:6px solid #2a2c40;padding:8px;display:grid;grid-template-columns:repeat(2,1fr);gap:6px;position:relative}
.ts i{border-radius:6px;background:rgba(123,98,255,.4)}
.ts i:nth-child(2){background:rgba(25,211,162,.4)}
.ts b{position:absolute;right:8px;bottom:6px;color:var(--mint);font-family:"Space Grotesk";font-size:13px}
.tstand{width:40px;height:40px;background:linear-gradient(#3a3d55,#22243a);clip-path:polygon(35% 0,65% 0,100% 100%,0 100%)}
.kiosk{display:flex;flex-direction:column;align-items:center}
.ks{width:100px;height:160px;border-radius:12px;background:#fff;border:5px solid #1d1f33;padding:8px;display:flex;flex-direction:column;gap:5px;font-size:9px;color:var(--ink)}
.ks b{font-family:"Space Grotesk";font-size:10px}
.ks i{height:22px;border-radius:5px;background:#eeeafe}
.ks em{margin-top:auto;font-style:normal;text-align:center;background:var(--violet);color:#fff;border-radius:6px;padding:4px;font-weight:700}
.kb{width:30px;height:40px;background:#1d1f33}
.screen-w{width:220px;height:130px;border-radius:8px;background:#000;border:5px solid #2a2c40;box-shadow:0 0 40px rgba(91,61,245,.5);overflow:hidden}
.sw{position:relative;height:100%;padding:12px;background:linear-gradient(135deg,#2b1a0f,#7a3d17);color:#fff;display:flex;flex-direction:column;gap:4px}
.sw b{font-family:"Space Grotesk";font-size:16px;color:#f4a64b}.sw span{font-size:11px}
.sw .anim{position:absolute;right:-30px;bottom:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#ffe2b8,#d98a3a 60%,#8b4a1a);animation:spin 8s linear infinite}
.printer{position:relative;display:flex;flex-direction:column;align-items:center}
.pp{width:90px;background:#fff;color:var(--ink);font-family:monospace;font-size:9px;padding:8px;display:flex;flex-direction:column;gap:4px;border-radius:2px 2px 0 0;animation:paper 3s ease-in-out infinite;transform-origin:bottom}
@keyframes paper{0%{clip-path:inset(100% 0 0 0)}40%,80%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0);opacity:0}}
.pb{width:140px;height:60px;border-radius:12px;background:linear-gradient(#3a3d55,#1d1f33);box-shadow:0 18px 30px -12px rgba(0,0,0,.7)}
/* TPE */
.tpe2{width:96px;border-radius:16px;background:#1d1f33;padding:8px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 20px 30px -12px rgba(0,0,0,.7)}
.tpe2.port{height:170px;rotate:-6deg}
.tpe2.counter{height:150px;rotate:4deg}
.sc2{height:56px;border-radius:9px;background:#0f2a24;color:#8ff3d2;font-size:10px;display:grid;place-items:center;text-align:center;line-height:1.3}
.sc2 b{color:var(--mint);font-size:11px}
.kp{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:8px}.kp i{height:13px;border-radius:4px;background:#33364f}.kp i:last-child{background:var(--mint)}
.cable{position:absolute;right:28%;bottom:20px;width:60px;height:40px;border:4px solid #2a2c40;border-left:none;border-top:none;border-radius:0 0 30px 0}
.aio{position:relative;width:110px;height:180px;border-radius:18px;background:#111225;border:2px solid #2f3150;padding:8px;box-shadow:0 0 40px rgba(25,211,162,.35)}
.aios{height:118px;border-radius:12px;background:linear-gradient(160deg,#0f2a24,#0d0e1c);padding:8px;display:flex;flex-direction:column;gap:8px}
.aios b{color:var(--mint);font-size:10px}
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.apps i{height:18px;border-radius:5px;background:rgba(123,98,255,.5)}.apps i:nth-child(even){background:rgba(25,211,162,.45)}
.aiob{position:absolute;left:8px;right:8px;bottom:8px;height:36px;border-radius:8px;background:#1d1f33}
.paper{position:absolute;left:50%;top:-58px;width:70px;margin-left:-35px;background:#fff;color:var(--ink);font-size:8px;font-family:monospace;padding:6px;display:flex;flex-direction:column;gap:3px;animation:paper 3.2s ease-in-out infinite}
.mpos{width:80px;height:80px;border-radius:16px;background:linear-gradient(160deg,#2a2c40,#16172a);padding:10px;position:relative;rotate:-8deg;translate:-40px 0;box-shadow:0 18px 30px -12px rgba(0,0,0,.7)}
.mpos .led{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint);animation:blink 1.2s infinite}
.mk{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin-top:20px}.mk i{height:14px;border-radius:4px;background:#3a3d55}
/* SoftPOS */
.spos{width:110px;height:200px;border-radius:22px;background:#000;border:3px solid #2f3150;padding:6px;rotate:-6deg}
.sps{height:100%;border-radius:16px;background:linear-gradient(160deg,#5b3df5,#1d1170);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.sps small{font-size:9px;opacity:.8}.sps b{font-family:"Space Grotesk";font-size:22px}
.tap{font-size:9px;background:rgba(255,255,255,.15);padding:4px 8px;border-radius:999px}
.card-tap{position:absolute;right:22%;bottom:40px;width:90px;height:56px;border-radius:8px;background:linear-gradient(135deg,#19d3a2,#0f3d3a);box-shadow:0 12px 20px -8px rgba(0,0,0,.6);animation:tapc 3s ease-in-out infinite}
@keyframes tapc{0%,100%{transform:translate(40px,20px) rotate(-12deg)}45%,60%{transform:translate(0,-10px) rotate(-18deg)}}
.qr{position:relative;width:120px;height:120px;background:#fff;border-radius:10px;padding:10px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;rotate:-5deg;box-shadow:0 18px 30px -12px rgba(0,0,0,.7)}
.qr i{border:8px solid var(--ink);border-radius:4px}
.qr b{background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 10px),repeating-linear-gradient(0deg,var(--ink) 0 6px,transparent 6px 10px);background-blend-mode:multiply;opacity:.85;border-radius:3px}
.qr::after{content:"";position:absolute;left:8px;right:8px;height:3px;background:var(--mint);box-shadow:0 0 12px var(--mint);animation:scan 2s ease-in-out infinite}
@keyframes scan{0%,100%{top:10px}50%{top:105px}}
.link-chip{position:absolute;bottom:22px;right:14%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:11px;padding:6px 10px;border-radius:999px}
@media (max-width:1100px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.pgrid{grid-template-columns:minmax(0,1fr)}.pfilter button{padding:9px 13px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.pv>*,.pv *{animation:none!important}}


/* ===================== V7 : fluidité + objets 3D par domaine ===================== */
/* pause des animations hors écran */
.off,.off *,.off *::before,.off *::after{animation-play-state:paused!important}
/* effets de fusion coûteux remplacés */
.cursor,.cursor-dot{mix-blend-mode:normal}
.cursor{border-color:rgba(123,98,255,.9);background:rgba(123,98,255,.08)}
.cursor.big{background:rgba(25,211,162,.18);border-color:var(--mint)}
.cursor-dot{background:var(--mint)}
.spot::after{mix-blend-mode:normal;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.12),rgba(123,98,255,.08) 30%,transparent 55%)}
.beams{mix-blend-mode:normal;opacity:.8}
/* orbite : rotation par transform (GPU) */
.orbit{animation:spin 40s linear infinite!important}
.orbit span{transform:translate(-50%,-50%) rotate(var(--a)) translateY(-215px) rotate(calc(var(--a) * -1))!important}
.orbit span em{display:inline-block;font-style:normal;animation:spin 40s linear infinite reverse}
@media (max-width:640px){.orbit span{transform:translate(-50%,-50%) rotate(var(--a)) translateY(-160px) rotate(calc(var(--a) * -1))!important}}

/* ---- objets 3D ---- */
.head,.sc-left,.sc-right,.ftext,.final{position:relative}
@media (max-width:980px){.fq-left{position:relative;top:0}}
.o3d{position:absolute;pointer-events:none;z-index:2;perspective:800px;width:120px;height:120px}
.o3d .f3{position:absolute;inset:0;transform-style:preserve-3d;animation:o3float 6s ease-in-out infinite}
@keyframes o3float{0%,100%{translate:0 0}50%{translate:0 -14px}}
.o3d .rot{position:absolute;inset:0;transform-style:preserve-3d}
/* cube */
.cube .rot{animation:cubespin 14s linear infinite}
@keyframes cubespin{from{transform:rotateX(-20deg) rotateY(0)}to{transform:rotateX(-20deg) rotateY(360deg)}}
.cube .face{position:absolute;left:15px;top:15px;width:90px;height:90px;border-radius:16px;display:grid;place-items:center;font-family:"Space Grotesk";font-weight:700;font-size:26px;color:#fff;
  background:linear-gradient(135deg,rgba(91,61,245,.92),rgba(42,26,143,.92));border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 0 22px rgba(255,255,255,.18);backface-visibility:hidden}
.cube .face:nth-child(even){background:linear-gradient(135deg,rgba(25,211,162,.92),rgba(15,61,58,.92))}
.cube .face:nth-child(1){transform:translateZ(45px)}
.cube .face:nth-child(2){transform:rotateY(90deg) translateZ(45px)}
.cube .face:nth-child(3){transform:rotateY(180deg) translateZ(45px)}
.cube .face:nth-child(4){transform:rotateY(-90deg) translateZ(45px)}
.cube .face:nth-child(5){transform:rotateX(90deg) translateZ(45px)}
.cube .face:nth-child(6){transform:rotateX(-90deg) translateZ(45px)}
/* glyphe extrudé */
.glyph .rot{animation:glyphsway 6s ease-in-out infinite}
@keyframes glyphsway{0%,100%{transform:rotateY(-38deg) rotateX(10deg)}50%{transform:rotateY(38deg) rotateX(-6deg)}}
.glyph .ly{position:absolute;inset:0;display:grid;place-items:center;font-family:"Space Grotesk";font-weight:700;font-size:96px;line-height:1;color:#2a1a8f}
.glyph .ly.front{background:linear-gradient(135deg,#c86bff,#5b3df5 50%,#19d3a2);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(200,107,255,.55))}
/* pièce */
.coin .rot{animation:coinspin 5s linear infinite}
@keyframes coinspin{from{transform:rotateX(12deg) rotateY(0)}to{transform:rotateX(12deg) rotateY(360deg)}}
.coin .disc{position:absolute;left:10px;top:10px;width:100px;height:100px;border-radius:50%;background:#b8902f}
.coin .cface{position:absolute;left:10px;top:10px;width:100px;height:100px;border-radius:50%;display:grid;place-items:center;font-family:"Space Grotesk";font-weight:700;font-size:48px;color:#6b4b10;
  background:radial-gradient(circle at 35% 30%,#fff6cf,#f2d27a 45%,#c99b35);box-shadow:inset 0 0 0 6px rgba(255,255,255,.35),inset 0 0 0 9px rgba(160,120,40,.5);backface-visibility:hidden}
.coin .cface.back{transform:rotateY(180deg) translateZ(4px)}
.coin .cface.frontc{transform:translateZ(4px)}
/* carte bancaire qui se retourne */
.ccard{width:170px;height:110px}
.ccard .rot{animation:cflip 7s cubic-bezier(.6,0,.4,1) infinite}
@keyframes cflip{0%,35%{transform:rotateY(-20deg) rotateX(12deg)}50%,85%{transform:rotateY(160deg) rotateX(12deg)}100%{transform:rotateY(340deg) rotateX(12deg)}}
.ccard .cs{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;padding:14px;color:#fff;font-family:"Space Grotesk";box-shadow:0 20px 40px -15px rgba(0,0,0,.7)}
.ccard .cs.fr{background:linear-gradient(135deg,#6b4dff,#1d1170);border:1px solid rgba(255,255,255,.3)}
.ccard .cs.fr i{position:absolute;left:14px;top:38px;width:30px;height:22px;border-radius:5px;background:linear-gradient(135deg,#f6e6a6,#c9a54a)}
.ccard .cs.fr b{position:absolute;left:14px;bottom:12px;font-size:12px;letter-spacing:.15em}
.ccard .cs.fr em{position:absolute;right:14px;top:12px;font-style:normal;font-size:11px;color:var(--mint)}
.ccard .cs.bk{transform:rotateY(180deg);background:linear-gradient(135deg,#1b1240,#0d0e1c);border:1px solid rgba(255,255,255,.2)}
.ccard .cs.bk::before{content:"";position:absolute;left:0;right:0;top:18px;height:22px;background:#000}
.ccard .cs.bk span{position:absolute;right:14px;bottom:14px;font-size:10px;color:#b9bbd0}
/* pile de cartes de visite */
.stack{width:160px;height:120px}
.stack .rot{animation:stacksway 7s ease-in-out infinite}
@keyframes stacksway{0%,100%{transform:rotateX(55deg) rotateZ(-25deg)}50%{transform:rotateX(45deg) rotateZ(15deg)}}
.stack .bcs{position:absolute;left:10px;top:20px;width:140px;height:80px;border-radius:8px;background:#fff;box-shadow:0 10px 20px -8px rgba(0,0,0,.6);padding:10px;font-family:"Space Grotesk";font-size:12px;font-weight:700;color:var(--ink)}
.stack .bcs:nth-child(1){transform:translateZ(0)}
.stack .bcs:nth-child(2){transform:translateZ(14px) rotateZ(-6deg);background:#0d0e1c;color:#f2d27a}
.stack .bcs:nth-child(3){transform:translateZ(28px) rotateZ(5deg);background:linear-gradient(135deg,#5b3df5,#19d3a2);color:#fff;animation:stacklift 7s ease-in-out infinite}
@keyframes stacklift{0%,100%{translate:0 0}50%{translate:0 -10px}}
/* emplacements */
.o3d.p-right{right:-190px;top:0}
.o3d.p-left{left:-190px;top:0}
@media (max-width:1200px){.o3d.p-right{right:-60px;top:-110px}.o3d.p-left{left:-60px;top:-110px}}
.o3d.p-glow{right:30px;top:24px}
.o3d.p-final{right:24px;top:20px}
.o3d.p-sc{right:-40px;top:-50px;z-index:5}
.o3d.p-fd{right:-10px;bottom:-40px;top:auto}
@media (max-width:1320px){.o3d.p-sc{right:-10px}}
.o3d.p-ft{right:0;top:-40px}
.o3d.p-fq{left:auto;right:-135px;top:10px}
@media (max-width:1100px){.o3d.p-fq{right:0;top:-120px}}
@media (max-width:980px){.o3d{transform:scale(.7);transform-origin:top right}.o3d.p-left{transform-origin:top left}}
@media (max-width:640px){.o3d{transform:scale(.55)}.o3d.p-right,.o3d.p-sc,.o3d.p-ft{top:-70px;right:-10px}.o3d.p-left{left:-10px;top:-70px}.o3d.p-glow,.o3d.p-final{top:6px;right:0}}
@media (prefers-reduced-motion:reduce){.o3d .rot,.o3d .f3,.o3d *{animation:none!important}}


/* ===================== V8 : intro Tour Eiffel + finitions ===================== */
#loader{background:#05060f;clip-path:none;transition:opacity .95s cubic-bezier(.65,0,.35,1),transform 1s cubic-bezier(.65,0,.35,1),filter .95s;display:block;overflow:hidden}
#loader.out{clip-path:none;opacity:0;transform:scale(1.6);filter:blur(6px);pointer-events:none}
#loader canvas{position:absolute;inset:0;display:block}
#loader .itxt{position:absolute;left:0;right:0;bottom:3.5vh;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;z-index:2}
#loader .ln{font-size:clamp(40px,5.2vw,78px);opacity:0;transform:translateY(20px) scale(.96);animation:none}
#loader .ip{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(13px,1.4vw,17px);letter-spacing:1.1em;margin-right:-1.1em;text-transform:uppercase;color:#ffd27e;opacity:0;text-shadow:0 0 14px rgba(255,180,80,.8)}
#loader.go .ln{animation:introTxt 1s cubic-bezier(.2,.8,.2,1) 1.7s forwards,flicker 2.4s 2.7s infinite}
#loader.go .ip{animation:introSub 1.2s ease 2.1s forwards}
#loader.fast .ln{animation-delay:.25s,1.2s}
#loader.fast .ip{animation-delay:.5s}
@keyframes introTxt{to{opacity:1;transform:none}}
@keyframes introSub{from{opacity:0;letter-spacing:1.8em}to{opacity:1;letter-spacing:1.1em}}
#loader .iskip{position:absolute;right:22px;top:22px;z-index:3;background:rgba(255,255,255,.08);color:#e9e6ff;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 16px;font:600 13px Inter,sans-serif;letter-spacing:normal;cursor:pointer;backdrop-filter:blur(6px);opacity:0;animation:introFade .6s ease .6s forwards}
@keyframes introFade{to{opacity:1}}
#loader .bar{display:none}
@media (max-width:640px){#loader .itxt{bottom:5vh}}

/* boutons magnétiques */
.btn,.navpill .cta,.wa{transition:transform .2s,box-shadow .2s,background .2s,translate .35s cubic-bezier(.2,.8,.2,1)}
.btn.mag,.navpill .cta.mag,.wa.mag{transition:transform .2s,box-shadow .2s,background .2s,translate .08s linear}

/* titres de section qui se décodent */
.kicker.scr{font-variant-numeric:tabular-nums}

/* pied de page : petite Tour Eiffel qui scintille */
.foot2 .wrap{position:relative}
.ftower{display:block;margin:10px auto -6px;width:min(420px,100%);height:230px;pointer-events:none}
@media (max-width:640px){.ftower{height:170px}}

/* ===================== V9 : finitions de détail ===================== */
/* badge « Le plus demandé » dans la carte (n'est plus rogné) */
.price .tag{top:16px;left:auto;right:18px}
/* @ du contact : au-dessus de la carte, plus sur le formulaire */
.o3d.p-final{top:-74px;right:56px}
/* ▶ du film : dans le bloc */
#film .o3d.p-ft{top:6px}
/* écrans d'ordinateur peu hauts (portables) */
@media (min-width:981px) and (max-height:1000px){
  .hero{padding:104px 0 70px}
  .hero .h1{font-size:clamp(38px,min(5.6vw,7.4vh),74px);margin-bottom:16px}
  .hero .neon{font-size:clamp(40px,min(6.4vw,8vh),84px);margin:10px 0 24px}
  #services .head{margin-bottom:18px}
  #services .head h2{font-size:clamp(30px,min(4.6vw,6vh),58px);margin:8px 0 8px}
  .hs-card{width:min(800px,64vw);display:grid;grid-template-columns:44% minmax(0,1fr);grid-auto-rows:min-content;column-gap:28px;row-gap:10px;align-content:start}
  .hs-card .visual{grid-column:1;grid-row:1/span 6;aspect-ratio:auto;height:100%;min-height:min(330px,44vh)}
  .hs-card>*:not(.visual):not(.sheen){grid-column:2}
  .hs-card .n{font-size:44px}
  .hs-card h3{font-size:27px}
}
.hero .neon{margin-bottom:28px}

/* mobile : carrousels à glisser (services + produits) */
.mb-only,.swipe-hint{display:none}
@media (max-width:640px){
  .dk-only{display:none}.mb-only{display:inline}
  .hs-track{flex-direction:row;align-items:stretch;width:auto;gap:14px;padding:6px 16px 18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .hs-track::-webkit-scrollbar,.pgrid::-webkit-scrollbar,.pfilter::-webkit-scrollbar{display:none}
  .hs-card{flex:0 0 84vw;width:84vw;max-width:none;scroll-snap-align:center}
  .pgrid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:6px 16px 18px;scrollbar-width:none;overscroll-behavior-x:contain}
  .pgrid .prod{flex:0 0 80vw;scroll-snap-align:center}
  .pfilter{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:0 -16px 18px;padding:4px 16px;scrollbar-width:none}
  .pfilter button{flex:none}
  .swipe-hint{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);margin:2px 0 0}
  .night .swipe-hint{color:#9ea1bd}
  .swipe-hint i{font-style:normal;display:inline-block;animation:nudge 1.4s ease-in-out infinite}
}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* pied de page : logo sur une ligne */
.fcols a.logo{display:flex}
/* méthode sur mobile : titre, puis écran, puis étapes */
@media (max-width:980px){
  .scrolly-grid{row-gap:0}
  .sc-left{display:contents}
  .sc-left .kicker{order:0}.sc-left h2{order:1;margin-bottom:22px}.sc-right{order:2;margin-bottom:64px}
  .o3d.p-sc{top:auto;bottom:-24px;right:-8px}.sc-steps{order:3}.sc-bar{order:4}
}
@media (max-width:640px){.o3d.p-fq{top:-64px}}
/* formulaire : confirmation + WhatsApp */
.form-ok{display:none;margin-top:14px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:14px;line-height:1.5}
.form-ok.on{display:block;animation:introFade .4s ease}
.form-ok b{display:block;font-size:16px;margin-bottom:4px}
.form-ok a{display:inline-flex;margin-top:10px;padding:10px 16px;border-radius:999px;background:#25d366;color:#fff;font-weight:700}

/* SEO : badge en H1, grand titre en paragraphe */
.hero .h1{font-family:"Space Grotesk",Inter,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.hero h1.pill{font-family:Inter,sans-serif;line-height:1.3;margin:0}
.foot-zone{margin-top:8px;font-size:13px;opacity:.75}

/* ===================== V12 : fond de la 2e moitié, même langage que le haut ===================== */
.night{background:var(--ink)}
.night-lights{display:none}
.soft::before{display:none}
.night::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 55% 520px at 50% 380px,#000 0%,rgba(0,0,0,.35) 55%,transparent 75%);mask-image:radial-gradient(ellipse 55% 520px at 50% 380px,#000 0%,rgba(0,0,0,.35) 55%,transparent 75%);
  -webkit-mask-size:100% 1700px;mask-size:100% 1700px;-webkit-mask-repeat:repeat-y;mask-repeat:repeat-y}
.night::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(1px 1px at 20px 30px,rgba(255,255,255,.55),transparent 60%),radial-gradient(1px 1px at 140px 90px,rgba(255,255,255,.35),transparent 60%),radial-gradient(1.5px 1.5px at 260px 40px,rgba(255,255,255,.5),transparent 60%),radial-gradient(1px 1px at 330px 210px,rgba(255,255,255,.3),transparent 60%),radial-gradient(1.5px 1.5px at 90px 260px,rgba(200,190,255,.45),transparent 60%),radial-gradient(1px 1px at 210px 330px,rgba(255,255,255,.35),transparent 60%),radial-gradient(1px 1px at 380px 360px,rgba(160,240,220,.4),transparent 60%),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,160px 160px;opacity:.9}
/* un trait de lumière fin entre les sections, comme une signature */
.night>section{position:relative}
.night>section+section::after{content:"";position:absolute;top:0;left:50%;width:min(720px,70%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(124,98,255,.55),rgba(25,211,162,.55),transparent);pointer-events:none}
.aurora{opacity:.45}

/* ===================== V13 : section Logiciels en clair, aux couleurs du site ===================== */
#logiciels{position:relative;padding:110px 0 100px;background:var(--bg);color:var(--ink)}
#logiciels svg:not(.cv):not(.wires){width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
#logiciels .head p{color:var(--muted)}
.lg-show{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:30px;align-items:center}
/* fenêtre d'application (claire) */
.lg-app{background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:0 40px 80px -40px rgba(13,14,28,.35);overflow:hidden}
.lg-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#faf9f6;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.lg-bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.lg-bar i:nth-child(2){background:#febc2e}.lg-bar i:nth-child(3){background:#28c840}
.lg-bar span{margin-left:10px;font-family:"Space Grotesk"}
.lg-bar em{margin-left:auto;font-style:normal;display:flex;align-items:center;gap:6px;color:#0e9a76;font-weight:600}
.lg-bar em b{width:7px;height:7px;border-radius:50%;background:var(--mint);animation:lgPulse 1.6s infinite}
@keyframes lgPulse{0%{box-shadow:0 0 0 0 rgba(25,211,162,.55)}70%{box-shadow:0 0 0 8px rgba(25,211,162,0)}100%{box-shadow:0 0 0 0 rgba(25,211,162,0)}}
.lg-tabs{display:flex;gap:6px;padding:14px 16px 0;flex-wrap:wrap}
.lg-tabs button{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:999px;padding:8px 14px;font:600 13px Inter,sans-serif;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.lg-tabs button svg{width:15px!important;height:15px!important}
.lg-tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.lg-panes{position:relative;height:350px}
.lg-pane{position:absolute;inset:0;padding:18px;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s;pointer-events:none}
.lg-pane.on{opacity:1;transform:none;pointer-events:auto}
.lg-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lg-kpis div{background:var(--bg);border-radius:16px;padding:11px 13px}
.lg-kpis small{display:block;font-size:11.5px;color:var(--muted)}
.lg-kpis b{font:700 26px "Space Grotesk";color:var(--ink)}.lg-kpis span{color:#0e9a76;font-weight:700;margin-left:2px}
.lg-chart{display:flex;align-items:flex-end;gap:9px;height:120px;margin:16px 0 12px;padding:0 2px;border-bottom:1px solid var(--line)}
.lg-chart i{flex:1;height:var(--h);border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--p-sky),var(--mint-soft));transform-origin:bottom;transform:scaleY(.05);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.lg-chart i.hi{background:linear-gradient(180deg,var(--mint),#7fe8c8)}
.lg-pane.on .lg-chart i{transform:none}
.lg-chart i:nth-child(2){transition-delay:.05s}.lg-chart i:nth-child(3){transition-delay:.1s}.lg-chart i:nth-child(4){transition-delay:.15s}.lg-chart i:nth-child(5){transition-delay:.2s}.lg-chart i:nth-child(6){transition-delay:.25s}.lg-chart i:nth-child(7){transition-delay:.3s}.lg-chart i:nth-child(8){transition-delay:.35s}
.lg-feed p{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);margin:6px 0;opacity:0;transform:translateX(-10px);transition:opacity .5s,transform .5s}
.lg-feed p svg{color:#0e9a76}
.lg-pane.on .lg-feed p{opacity:1;transform:none}
.lg-pane.on .lg-feed p:nth-child(1){transition-delay:.6s}.lg-pane.on .lg-feed p:nth-child(2){transition-delay:1s}.lg-pane.on .lg-feed p:nth-child(3){transition-delay:1.4s}
/* WhatsApp réaliste */
.lg-wa{height:100%;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--line)}
.lg-wa-head{display:flex;align-items:center;gap:10px;padding:9px 14px;background:#008069;color:#fff}
.lg-wa-head i{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--p-peach),var(--p-butter))}
.lg-wa-head span{display:flex;flex-direction:column;font-size:13px}.lg-wa-head small{font-size:10.5px;opacity:.85}
.lg-wa-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:12px;background:#efeae2}
.lg-wa-body .m{max-width:78%;padding:7px 11px;border-radius:10px;font-size:13px;line-height:1.4;color:#111b21;box-shadow:0 1px .5px rgba(11,20,26,.13);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.lg-wa-body .m.in{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.lg-wa-body .m.out{align-self:flex-end;background:#d9fdd3;border-top-right-radius:2px}
.lg-wa-body .m.sys{align-self:center;background:#fff7d6;color:#54656f;font-size:11.5px;box-shadow:none}
.lg-wa-body .m.show{opacity:1;transform:none}
/* automatisation */
.lg-flow{display:flex;flex-direction:column;align-items:center}
.lg-flow .nd{display:flex;align-items:center;gap:10px;width:min(330px,92%);background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 13px;font-size:13.5px;font-weight:500;color:var(--ink);box-shadow:0 6px 16px -10px rgba(13,14,28,.25);transition:border-color .3s,background .3s}
.lg-flow .nd svg{color:var(--muted);transition:color .3s}
.lg-flow .nd.lit{border-color:var(--mint);background:var(--mint-soft)}.lg-flow .nd.lit svg{color:#0e9a76}
.lg-flow .lk{position:relative;width:2px;height:15px;background:var(--line);overflow:hidden}
.lg-flow .lk i{position:absolute;left:-2px;width:6px;height:7px;border-radius:3px;background:var(--mint);animation:lgFlow 1.1s linear infinite}
@keyframes lgFlow{from{top:-8px}to{top:16px}}
.lg-note{text-align:center;font-size:12px;color:var(--muted);margin-top:10px}
/* bénéfices */
.lg-gains{display:grid;gap:12px}
.lg-gains>div{display:grid;grid-template-columns:48px 1fr;gap:3px 14px;padding:16px 18px;border-radius:20px;background:#fff;border:1px solid var(--line);transition:transform .3s,box-shadow .3s}
.lg-gains>div:hover{transform:translateX(4px);box-shadow:var(--shadow)}
.lg-gains .ico{grid-row:span 2;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--ink)}
.lg-gains .ico svg{width:22px!important;height:22px!important}
.ico.c1{background:var(--p-butter)}.ico.c2{background:var(--lilac)}.ico.c3{background:var(--mint-soft)}.ico.c4{background:#dff3ff}
.lg-gains h3{font-size:16px;margin:3px 0 0;color:var(--ink)}
.lg-gains p{font-size:13.5px;color:var(--muted);margin:0}
/* grille bento claire */
.lg-sub{text-align:center;font-size:clamp(26px,3.2vw,40px);margin:80px 0 28px;color:var(--ink)}
#logiciels .bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(250px,auto);grid-template-areas:"a a b c" "a a b f" "d d e e" "g g h h";gap:16px}
#logiciels .bx-a{grid-area:a}#logiciels .bx-b{grid-area:b}#logiciels .bx-c{grid-area:c}#logiciels .bx-f{grid-area:f}#logiciels .bx-d{grid-area:d}#logiciels .bx-e{grid-area:e}#logiciels .bx-g{grid-area:g}#logiciels .bx-h{grid-area:h}
#logiciels .bx{--mx:50%;--my:50%;position:relative;display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 24px 50px -36px rgba(13,14,28,.35);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
#logiciels .bx::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(380px circle at var(--mx) var(--my),rgba(91,61,245,.07),transparent 60%)}
#logiciels .bx:hover{transform:translateY(-6px);box-shadow:0 34px 70px -34px rgba(13,14,28,.45)}
#logiciels .bx:hover::after{opacity:1}
#logiciels .bv{position:relative;flex:1;min-height:170px;margin:10px 10px 0;border-radius:20px;overflow:hidden;display:grid;place-items:center}
#logiciels .bt{padding:16px 22px 22px}
#logiciels .bt .no{font:700 11px "Space Grotesk";letter-spacing:.14em;color:var(--violet)}
#logiciels .bt h4{font:700 20px/1.2 "Space Grotesk",sans-serif;color:var(--ink);margin:6px 0}
#logiciels .bt p{font-size:14px;line-height:1.55;color:var(--muted);margin:0}
#logiciels .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
#logiciels .chips i{font-style:normal;font-size:12px;font-weight:600;color:var(--ink-2);padding:5px 11px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
#logiciels .bx-d,#logiciels .bx-e,#logiciels .bx-g,#logiciels .bx-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch}
#logiciels .bx-d .bv,#logiciels .bx-e .bv,#logiciels .bx-g .bv,#logiciels .bx-h .bv{order:2;margin:10px 10px 10px 0;min-height:230px}
#logiciels .bx-d .bt,#logiciels .bx-e .bt,#logiciels .bx-g .bt,#logiciels .bx-h .bt{order:1;padding:26px;align-self:center}
#logiciels .bx-a .bt h4{font-size:25px}
/* fonds pastel, comme les cartes Services */
.v-a{background:linear-gradient(135deg,var(--p-lilac),var(--p-sky))}
.v-b{background:linear-gradient(135deg,var(--p-peach),var(--p-butter))}
.v-c{background:linear-gradient(135deg,var(--mint-soft),#c9f1ff)}
.v-f{background:linear-gradient(135deg,var(--p-butter),var(--p-lilac))}
.v-d{background:#faf9f6;border:1px solid var(--line)}
.v-g{background:linear-gradient(135deg,var(--p-sky),var(--mint-soft))}
.v-h{background:linear-gradient(135deg,var(--lilac),#fff7cf)}
/* spécialité : carte noire comme le bloc Paiement */
#logiciels .bx-e{background:var(--ink);border-color:var(--ink)}
#logiciels .bx-e .bt h4{color:#fff}#logiciels .bx-e .bt p{color:#b9bbd0}#logiciels .bx-e .bt .no{color:var(--mint)}
#logiciels .bx-e .chips i{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}
#logiciels .bx-e .badge{position:absolute;top:18px;left:26px;z-index:2;font:700 11px Inter,sans-serif;color:#053d2e;background:var(--mint);padding:4px 10px;border-radius:999px}
#logiciels .bx-e .bt{padding-top:50px}
.v-e{background:radial-gradient(circle at 60% 40%,#1d3d36,#14152a 70%)}
/* 01 gestion */
.v-a{padding:24px 24px 0;place-items:start center!important}
.v-a .win{width:100%;max-width:520px;min-height:270px;display:grid;grid-template-columns:44px 1fr;background:#fff;border-radius:16px 16px 0 0;box-shadow:0 -10px 40px -16px rgba(13,14,28,.35)}
.v-a .side{display:flex;flex-direction:column;align-items:center;gap:11px;padding:16px 0;border-right:1px solid var(--line);background:#faf9f6;border-radius:16px 0 0 0}
.v-a .side i{width:18px;height:18px;border-radius:6px;background:var(--line)}.v-a .side i.on{background:var(--ink)}
.v-a .mn{padding:14px 16px}
.v-a .tp{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.v-a .tp b{font:700 14px "Space Grotesk"}
.v-a .sr{flex:1;font-size:11px;color:#9ea1bd;background:var(--bg);border-radius:8px;padding:5px 9px}
.v-a .ad{font-size:11px;font-weight:700;color:#fff;background:var(--ink);border-radius:8px;padding:5px 9px}
.v-a .rw{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;animation:lgRow 8s infinite}
.v-a .rw:nth-of-type(3){animation-delay:2s}.v-a .rw:nth-of-type(4){animation-delay:4s}.v-a .rw:nth-of-type(5){animation-delay:6s}
@keyframes lgRow{0%,22%,100%{background:transparent}6%,16%{background:var(--lilac)}}
.v-a .rw i{width:22px;height:22px;border-radius:50%;background:var(--c);flex:none}
.v-a .rw span{height:8px;width:var(--w);border-radius:4px;background:var(--line)}
.v-a .rw em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px}
.v-a em.ok{background:var(--mint-soft);color:#0e7a5f}.v-a em.run{background:#fff1c2;color:#8a5b00}.v-a em.new{background:var(--lilac);color:var(--violet)}
.v-a .pl{position:relative;height:30px;margin-top:10px;border-radius:9px;background:var(--bg)}
.v-a .pl span{position:absolute;top:5px;left:var(--x);width:var(--w);height:20px;border-radius:6px;font-size:10px;font-weight:600;display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.v-a .mb{margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--bg)}
.v-a .mb b{display:block;font:600 10.5px Inter,sans-serif;color:var(--muted);margin-bottom:8px}
.v-a .mb div{display:flex;align-items:flex-end;gap:7px;height:50px}
.v-a .mb i{flex:1;height:var(--h);border-radius:5px 5px 0 0;background:var(--ink);opacity:.85;transform-origin:bottom;animation:lgBar 6s ease-in-out infinite}
.v-a .mb i:nth-child(odd){background:var(--mint)}
.v-a .mb i:nth-child(2){animation-delay:.1s}.v-a .mb i:nth-child(3){animation-delay:.2s}.v-a .mb i:nth-child(4){animation-delay:.3s}.v-a .mb i:nth-child(5){animation-delay:.4s}.v-a .mb i:nth-child(6){animation-delay:.5s}.v-a .mb i:nth-child(7){animation-delay:.6s}
@keyframes lgBar{0%{transform:scaleY(.15)}30%,85%{transform:scaleY(1)}100%{transform:scaleY(.15)}}
.v-a .tst{position:absolute;right:26px;bottom:24px;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ink);background:#fff;border-radius:12px;padding:9px 13px;box-shadow:0 14px 30px -12px rgba(13,14,28,.4);animation:lgToast 6s ease-in-out infinite}
.v-a .tst svg{color:#0e9a76}
@keyframes lgToast{0%,10%{opacity:0;transform:translateY(8px)}18%,80%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(8px)}}
/* 02 chatbot */
.v-b{padding:22px 18px 0;place-items:end center!important}
.v-b .ph{width:min(250px,100%);height:100%;min-height:330px;display:flex;flex-direction:column;background:#efeae2;border-radius:22px 22px 0 0;overflow:hidden;box-shadow:0 -10px 40px -16px rgba(13,14,28,.35);border:6px solid #fff;border-bottom:0}
.v-b .wh{display:flex;align-items:center;gap:8px;padding:9px 11px;background:#008069;color:#fff}
.v-b .wh i{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--mint),var(--p-sky))}
.v-b .wh span{display:flex;flex-direction:column;font-size:12px}.v-b .wh small{font-size:10px;opacity:.85}
.v-b .wb{flex:1;display:flex;flex-direction:column;gap:6px;padding:10px 9px}
.v-b .wb p{margin:0;max-width:86%;padding:6px 9px;border-radius:9px;font-size:11.5px;line-height:1.35;color:#111b21;box-shadow:0 1px .5px rgba(11,20,26,.13);opacity:0;animation:lgMsg 10s infinite}
.v-b .wb .u{align-self:flex-end;background:#d9fdd3;border-top-right-radius:2px}
.v-b .wb .a{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.v-b .wb p:nth-child(2){animation-delay:1.2s}.v-b .wb p:nth-child(3){animation-delay:2.6s}.v-b .wb p:nth-child(4){animation-delay:3.8s}
@keyframes lgMsg{0%{opacity:0;transform:translateY(8px)}4%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
.v-b .wb .ty{align-self:flex-start;background:#fff;display:flex;gap:4px;padding:8px 10px;animation:lgTy 10s infinite}
.v-b .wb .ty i{width:5px;height:5px;border-radius:50%;background:#8696a0;animation:lgDot 1s infinite}.v-b .wb .ty i:nth-child(2){animation-delay:.15s}.v-b .wb .ty i:nth-child(3){animation-delay:.3s}
@keyframes lgTy{0%,45%{opacity:0}50%,85%{opacity:1}90%,100%{opacity:0}}
@keyframes lgDot{50%{transform:translateY(-3px)}}
.v-b .wip{display:flex;justify-content:space-between;align-items:center;margin:0 8px 8px;padding:7px 8px 7px 12px;border-radius:999px;background:#fff;font-size:11px;color:#8696a0}
.v-b .wip b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#008069;color:#fff}
.v-b .wip svg{width:13px!important;height:13px!important}
/* 03 automatisations */
.v-c .rng{position:relative;width:132px;height:132px;border-radius:50%;border:1.5px dashed rgba(13,14,28,.25);animation:spin 16s linear infinite}
.v-c .rng span{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px;border-radius:12px;display:grid;place-items:center;background:#fff;color:var(--ink);box-shadow:0 8px 18px -8px rgba(13,14,28,.35);transform:rotate(var(--a)) translateY(-66px) rotate(calc(var(--a) * -1));animation:lgCounter 16s linear infinite}
@keyframes lgCounter{to{rotate:-360deg}}
.v-c .core{position:absolute;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--mint);box-shadow:0 0 0 8px rgba(13,14,28,.06);animation:lgCore 2.4s ease-in-out infinite}
.v-c .core svg{width:24px!important;height:24px!important}
@keyframes lgCore{50%{box-shadow:0 0 0 14px rgba(25,211,162,.18)}}
/* 04 application métier */
.v-f .tb{position:absolute;width:150px;height:100px;left:50%;top:50%;transform:translate(-62%,-56%) rotate(-6deg);border-radius:12px;background:#fff;border:4px solid var(--ink);padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:6px;box-shadow:0 20px 40px -18px rgba(13,14,28,.5)}
.v-f .tb i{border-radius:6px;background:var(--lilac)}.v-f .tb i:nth-child(2){background:var(--mint-soft)}.v-f .tb i:nth-child(3){background:#fff1c2}
.v-f .mp{position:absolute;width:62px;height:118px;left:50%;top:50%;transform:translate(30%,-44%) rotate(6deg);border-radius:14px;background:#fff;border:4px solid var(--ink);padding:14px 6px 6px;display:flex;flex-direction:column;gap:5px;box-shadow:0 20px 40px -14px rgba(13,14,28,.55);animation:bob3 5s ease-in-out infinite}
.v-f .mp b{position:absolute;top:4px;left:50%;width:16px;height:4px;margin-left:-8px;border-radius:3px;background:var(--ink)}
.v-f .mp i{height:17px;border-radius:5px;background:var(--bg)}.v-f .mp i:first-of-type{height:34px;background:linear-gradient(135deg,var(--mint),var(--p-sky))}
/* 05 tableaux de bord */
.v-d{padding:18px 20px;display:flex!important;flex-direction:column;justify-content:center;gap:10px;place-items:unset!important}
.v-d .pills{display:flex;gap:6px}
.v-d .pills span{font-size:11px;font-weight:600;color:var(--muted);padding:4px 11px;border-radius:999px;background:#fff;border:1px solid var(--line)}.v-d .pills .on{color:#fff;background:var(--ink);border-color:var(--ink)}
.v-d .cv{width:100%;height:120px;overflow:visible}
.v-d .lne{stroke-dasharray:520;stroke-dashoffset:520;animation:lgDraw 6s ease-in-out infinite}
.v-d .ar{opacity:0;animation:lgFill 6s ease-in-out infinite}
.v-d .dt{opacity:0;animation:lgDt 6s ease-in-out infinite}
@keyframes lgDraw{0%{stroke-dashoffset:520}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes lgFill{0%,25%{opacity:0}50%,85%{opacity:1}100%{opacity:0}}
@keyframes lgDt{0%,42%{opacity:0}48%,85%{opacity:1}100%{opacity:0}}
.v-d .lv{display:flex;align-items:center;gap:6px;font-size:11px;color:#0e9a76;font-weight:600}
.v-d .lv b{width:7px;height:7px;border-radius:50%;background:var(--mint);animation:lgPulse 1.6s infinite}
/* 06 caisse & TPE (carte noire) */
.v-e .tm{position:absolute;left:50%;top:46%;width:96px;height:150px;transform:translate(-80%,-58%) rotate(-8deg);border-radius:16px;background:linear-gradient(160deg,#2c2e44,#15162a);border:1px solid rgba(255,255,255,.16);padding:10px;box-shadow:0 26px 50px -20px rgba(0,0,0,.9)}
.v-e .tsc{height:56px;border-radius:9px;background:#0d0e1c;color:var(--mint);font:700 15px "Space Grotesk";display:flex;flex-direction:column;align-items:center;justify-content:center}
.v-e .tsc small{font:600 9px Inter,sans-serif;color:#9ea1bd}
.v-e .kpd{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:9px}
.v-e .kpd i{height:12px;border-radius:4px;background:rgba(255,255,255,.14)}.v-e .kpd .g{grid-column:3;background:var(--mint)}
.v-e .rc{position:absolute;left:50%;top:46%;width:104px;transform:translate(8%,-50%) rotate(5deg);background:#fff;color:var(--ink);border-radius:8px 8px 3px 3px;padding:10px 10px 12px;display:flex;flex-direction:column;gap:5px;font:600 10px "SF Mono",Menlo,monospace;box-shadow:0 20px 40px -16px rgba(0,0,0,.8);animation:lgRc 5s ease-in-out infinite}
.v-e .rc b{color:#0e9a76;font-size:11px}
@keyframes lgRc{0%,8%{clip-path:inset(0 0 100% 0)}40%,88%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0);opacity:0}}
.v-e .sy{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:#fff}
.v-e .sy i{font-style:normal;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.v-e .sy b{color:var(--mint)}
/* 07 portail client */
.v-g .pc{width:min(260px,88%);border-radius:18px;background:#fff;padding:16px;box-shadow:0 26px 50px -24px rgba(13,14,28,.45);transform:rotate(-3deg)}
.v-g .wo{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.v-g .wo i{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--p-peach),var(--p-lilac))}
.v-g .wo span{display:flex;flex-direction:column;font-size:13px}.v-g .wo small{color:var(--muted);font-size:10.5px}
.v-g .tk{position:relative;display:flex;justify-content:space-between;padding-top:16px;font-size:10px;color:#9ea1bd;font-weight:600}
.v-g .tk::before{content:"";position:absolute;top:4px;left:6px;right:6px;height:4px;border-radius:4px;background:var(--line)}
.v-g .tk .br{position:absolute;top:4px;left:6px;height:4px;border-radius:4px;background:var(--mint);animation:lgTk 5s ease-in-out infinite}
@keyframes lgTk{0%{width:0}50%,85%{width:calc(100% - 12px)}100%{width:calc(100% - 12px);opacity:0}}
.v-g .tk .on{color:var(--ink)}
.v-g .fid{display:flex;align-items:center;gap:6px;margin-top:14px;font-size:11.5px;font-weight:600;color:#8a5b00;background:#fff4c7;border-radius:10px;padding:7px 10px}
.v-g .fid svg{width:14px!important;height:14px!important}
/* 08 intégrations */
.v-h .wires{position:absolute;inset:0;width:100%;height:100%}
.v-h .wires path{stroke:rgba(13,14,28,.28);stroke-width:1.5;fill:none;stroke-dasharray:4 6;animation:lgDash 1.2s linear infinite}
@keyframes lgDash{to{stroke-dashoffset:-20}}
.v-h .hub{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px;border-radius:18px;display:grid;place-items:center;font:700 15px "Space Grotesk";letter-spacing:.04em;color:#fff;background:var(--ink);box-shadow:0 0 0 7px rgba(13,14,28,.06),0 16px 30px -12px rgba(13,14,28,.6);animation:lgCore 2.4s ease-in-out infinite}
.v-h .sat{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:11px;font-weight:600;color:var(--ink);padding:5px 10px;border-radius:999px;background:#fff;box-shadow:0 8px 18px -10px rgba(13,14,28,.4);animation:lgSat 6s infinite}
.v-h .sat i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.v-h .sat:nth-of-type(2){animation-delay:1s}.v-h .sat:nth-of-type(3){animation-delay:2s}.v-h .sat:nth-of-type(4){animation-delay:3s}.v-h .sat:nth-of-type(5){animation-delay:4s}.v-h .sat:nth-of-type(6){animation-delay:5s}
@keyframes lgSat{0%,20%,100%{box-shadow:0 8px 18px -10px rgba(13,14,28,.4)}8%{box-shadow:0 0 0 3px var(--mint),0 8px 18px -10px rgba(13,14,28,.4)}}
/* appel à l'action : bloc noir comme le haut du site */
.lg-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:40px;padding:28px 32px;border-radius:30px;background:var(--ink);color:#fff;box-shadow:var(--shadow)}
.lg-cta b{font:700 22px "Space Grotesk"}.lg-cta p{color:#b9bbd0;margin:5px 0 0;font-size:14.5px}
.lg-btns{display:flex;gap:10px;flex-wrap:wrap}
.lg-light{background:#fff;color:var(--ink)}
/* carte service n°7 (Services) */
.v7{background:linear-gradient(135deg,var(--p-lilac),var(--p-sky))}
.codewin{width:78%;height:72%;border-radius:14px;background:var(--ink);padding:12px 14px;position:relative;font:600 11px/1.7 "SF Mono",Menlo,monospace;color:#9ea1bd;box-shadow:0 20px 40px -18px rgba(13,14,28,.6)}
.codewin p{margin:0;white-space:nowrap;overflow:hidden}
.codewin .k{color:#c86bff}.codewin .s{color:var(--mint)}.codewin .f{color:#ffd27e}
.codewin p:last-of-type::after{content:"▌";color:var(--mint);animation:lgBlink 1s steps(2) infinite}
@keyframes lgBlink{50%{opacity:0}}
.codewin .bot{position:absolute;right:-14px;bottom:-16px;background:#d9fdd3;color:#111b21;font:600 11px Inter,sans-serif;padding:8px 11px;border-radius:12px 12px 2px 12px;box-shadow:0 12px 24px -10px rgba(13,14,28,.5);animation:bob3 4s ease-in-out infinite}
/* responsive */
@media (max-width:1100px){#logiciels .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a a" "a a" "b c" "b f" "d d" "e e" "g g" "h h"}}
@media (max-width:980px){.lg-show{grid-template-columns:minmax(0,1fr)}.lg-cta{flex-direction:column;align-items:flex-start}}
@media (max-width:640px){
  #logiciels{padding:80px 0 70px}
  .lg-panes{height:370px}.lg-kpis b{font-size:19px}.lg-kpis{gap:6px}.lg-kpis div{padding:8px}
  .lg-tabs button{font-size:12px;padding:7px 11px}
  #logiciels .bento{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:6px 16px 22px;scrollbar-width:none;overscroll-behavior-x:contain}
  #logiciels .bento::-webkit-scrollbar{display:none}
  #logiciels .bx{flex:0 0 84vw;scroll-snap-align:center;display:flex!important;flex-direction:column;align-items:stretch!important}
  #logiciels .bx .bv{order:0!important;margin:10px 10px 0!important;min-height:210px!important}
  #logiciels .bx .bt{order:1!important;padding:16px 18px 20px!important}
  #logiciels .bx-e .bt{padding-top:16px!important}
  #logiciels .bx-a .bt h4{font-size:20px}
  .v-a .tst{display:none}.v-a .win{min-height:210px}.v-b .ph{min-height:280px}
  .lg-sub{margin-top:56px}
}
@media (prefers-reduced-motion:reduce){#logiciels *{animation:none!important}.v-b .wb p{opacity:1}.v-d .lne{stroke-dashoffset:0}.v-d .ar,.v-d .dt{opacity:1}}

/* ===================== V14 : Produits en clair, aux couleurs du site ===================== */
#produits{background:var(--bg);color:var(--ink);padding:100px 0 90px}
#produits .kicker{color:var(--violet)}
#produits .head h2{color:var(--ink)}
#produits .head p{color:var(--muted)}
#produits .pfilter button{background:#fff;border:1px solid var(--line);color:var(--ink-2);box-shadow:0 6px 16px -12px rgba(13,14,28,.3)}
#produits .pfilter button:hover{border-color:var(--ink)}
#produits .pfilter button.on{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none}
#produits .prod{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 24px 50px -36px rgba(13,14,28,.35)}
#produits .prod:hover{box-shadow:0 34px 70px -34px rgba(13,14,28,.45)}
#produits .prod.feat-p{border-color:var(--mint);box-shadow:0 0 0 1px var(--mint),0 24px 50px -36px rgba(13,14,28,.35)}
#produits .pv{margin:10px 10px 0;border-radius:20px;background:linear-gradient(135deg,var(--p-lilac),var(--p-sky))}
#produits .prod:nth-child(4n+2) .pv{background:linear-gradient(135deg,var(--mint-soft),#c9f1ff)}
#produits .prod:nth-child(4n+3) .pv{background:linear-gradient(135deg,var(--p-peach),var(--p-butter))}
#produits .prod:nth-child(4n+4) .pv{background:linear-gradient(135deg,var(--p-butter),var(--p-lilac))}
#produits .pcat{color:var(--violet)}
#produits .pt h3{color:var(--ink)}
#produits .pt p{color:var(--muted)}
#produits .prods-note{color:var(--muted)}
#produits .swipe-hint{color:var(--muted)}

#produits .kicker.kick-mint,#methode .kicker.kick-mint{color:var(--violet)!important}
/* ===================== V15 : Méthode en clair ===================== */
#methode{background:var(--bg);color:var(--ink)}
#methode .sc-left h2{color:var(--ink)}
#methode .sc-step h3{color:var(--ink)}
#methode .sc-step p{color:var(--muted)}
#methode .sc-step.on{background:#fff;border-color:var(--line);box-shadow:0 20px 40px -26px rgba(13,14,28,.35)}
#methode .sc-n{-webkit-text-stroke:1.5px var(--ink)}
#methode .sc-step.on .sc-n{color:var(--mint);-webkit-text-stroke:0}
#methode .sc-bar{background:var(--line)}
#methode .sc-bar i{background:var(--ink);box-shadow:none}
#methode .device{background:var(--ink);box-shadow:0 50px 90px -40px rgba(13,14,28,.55)}
#methode .dv-glow{display:none}
#methode .dv-screen{background:#fff}
#methode .msg.out{background:var(--ink)}
#methode .dv-tag{color:var(--muted)}

/* ===================== V16 : fin du site en clair (pied de page noir) ===================== */
.night{background:var(--bg);color:var(--ink);margin-top:0;border-radius:0}
.night::before,.night::after,.night>section+section::after{display:none}
.night .head p,.night p{color:var(--muted)}
.night h2,.night .head h2{color:var(--ink)}
.night .kicker.kick-mint,.night .kicker{color:var(--violet)!important}
.night .swipe-hint{color:var(--muted)}
.night .btn-glass{background:#fff;color:var(--ink);border:1px solid var(--line)}
.night .btn-glass:hover{border-color:var(--ink)}
/* réalisations */
.ring-floor{background:radial-gradient(ellipse,rgba(13,14,28,.16),transparent 70%)!important}
.ring-sec .rcard{box-shadow:0 30px 60px -30px rgba(13,14,28,.45)}
/* packs */
.packs2 .aurora{display:none}
.packs2 .neon-title{color:var(--ink);text-shadow:none;animation:none}
.paytoggle{background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px -16px rgba(13,14,28,.35)}
.paytoggle button{color:var(--muted)}
.paytoggle button.on{color:#fff}
.paytoggle .knob{background:var(--ink);box-shadow:none}
.packs2 .price{background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:0 24px 50px -36px rgba(13,14,28,.35)}
.packs2 .price .for,.packs2 .price .amount small{color:var(--muted)}
.packs2 .price li::before{color:var(--violet)}
.packs2 .price.pop{background:linear-gradient(var(--ink),var(--ink)) padding-box,conic-gradient(from var(--ang),#5b3df5,#19d3a2,#c86bff,#fff1a8,#5b3df5) border-box;border:2px solid transparent;color:#fff;box-shadow:0 30px 60px -30px rgba(13,14,28,.6)}
.packs2 .price.pop .for,.packs2 .price.pop .amount small{color:#b9bbd0}
.packs2 .price.pop li::before{color:var(--mint)}
.packs2 .price.pop p,.packs2 .price.pop li{color:#fff}
.packs2 .split-pay{background:var(--mint-soft);color:#0a7a5c}
.packs2 .price.pop .split-pay{background:rgba(25,211,162,.16);color:#8ff3d2}
.packs2 .fine{color:var(--muted)}
/* fondateur */
.fvis .avatar{box-shadow:0 40px 80px -30px rgba(13,14,28,.55)}
.orbit span{background:#fff!important;border:1px solid var(--line)!important;color:var(--ink)!important;box-shadow:0 8px 18px -12px rgba(13,14,28,.35)}
.orbit span:nth-child(odd){color:#0e9a76!important}
.founder2 .ftext p{color:var(--muted)}
.typed li{color:var(--ink)}
.techband{border-color:var(--line)}
.ttrack{-webkit-text-stroke:1px rgba(13,14,28,.45)!important}
.ttrack span:nth-child(3n){color:var(--ink)!important}
/* FAQ */
.faq2 details{background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:0 12px 30px -24px rgba(13,14,28,.3)}
.faq2 details[open]{background:#fff;border-color:var(--ink);box-shadow:0 24px 50px -30px rgba(13,14,28,.4)}
.faq2 summary::after{color:var(--violet)}
.faq2 .ans p{color:var(--muted)}
/* contact : grand bandeau + bloc noir */
.bmt span{background:linear-gradient(90deg,var(--ink),var(--violet),var(--mint),var(--ink));background-size:200% 100%;-webkit-background-clip:text;background-clip:text}
.contact2 .final{background:var(--ink);box-shadow:0 40px 90px -40px rgba(13,14,28,.6)}
.contact2 .final::before{display:none}
.contact2 .final p{color:#b9bbd0}
.contact2 .final h2{color:#fff}
.contact2 .final .btn-glass{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22)}
/* pied de page noir, comme le haut du site */
.foot2{background:var(--ink);color:#9ea1bd;border-top:0;border-radius:40px 40px 0 0;margin:0 10px}
.foot2 p{color:#9ea1bd}
@media (max-width:640px){.foot2{border-radius:28px 28px 0 0;margin:0}}

.fvis .avatar{background:var(--ink)!important}
.fvis .avatar span{text-shadow:0 0 18px rgba(25,211,162,.55)}

@media (max-width:640px){.fvis .avatar span{font-size:64px}}
@media (min-width:641px) and (max-width:980px){.fvis .avatar span{font-size:80px}}

/* ===================== V17 : finitions de détail (revue complète) ===================== */
/* titres et textes : plus de mot seul sur la dernière ligne */
h1,h2,h3,h4{text-wrap:balance}
.head p,.lead,.ftext p,.glow p,.final p,.pt p,.bt p,.lg-gains p{text-wrap:pretty}
/* bloc Paiement : noir uni, sans halo bleu */
.glow{background:var(--ink)!important;box-shadow:0 40px 90px -45px rgba(13,14,28,.6)!important}
.glow::before{display:none}
.creds div{border-color:rgba(255,255,255,.1)}
/* appel à l'action Logiciels : carte blanche (évite deux blocs noirs à la suite) */
.lg-cta{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 24px 50px -36px rgba(13,14,28,.35)}
.lg-cta p{color:var(--muted)}
.lg-cta .lg-light{background:var(--ink);color:#fff}
/* réalisations : pas de texte à l'envers, moins de vide */
.ring-sec{padding:80px 0 20px}
.rcard{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.packs2{padding:80px 0 70px}
/* fondateur */
.typed li::before{content:"✓";margin-right:.45em}
.o3d.p-fd{bottom:30px}
/* FAQ : le « ? » ne recouvre plus la première question */
@media (min-width:1101px){.o3d.p-fq{right:20px;left:auto;top:auto;bottom:-110px}}
/* film : le ▶ reste dans le bloc */
#film .o3d.p-ft{top:34px;right:40px}
/* haut de page : l'indication « Bougez la souris » sous la sphère */
.hint3d{top:auto;bottom:10px;right:10px}
/* pied de page */
.wordmark{background-image:linear-gradient(180deg,#fff 15%,rgba(25,211,162,.75) 95%)!important}
@media (min-width:900px){.fbottom{padding-right:230px}}

.v-a .ad{white-space:nowrap}
@media (max-width:640px){.v-a .sr{display:none}.v-a .tp{justify-content:space-between}.o3d.p-fd{bottom:auto;top:-30px;right:-6px}}

.v-a .rw em{white-space:nowrap}
@media (max-width:640px){.v-a .rw span{max-width:40%}}

/* ===================== V18 : hero clair et explicite ===================== */
.hero.hero2{background:var(--bg);color:var(--ink);margin:0;border-radius:0;padding:138px 0 110px;overflow:hidden;isolation:isolate}
.hero2::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(13,14,28,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(13,14,28,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 35%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 70% 35%,#000,transparent 75%)}
.hero2 .beams,.hero2 .sparks,.hero2 .torch{display:none!important}
.h2-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:48px;align-items:center}
.h2-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink-2)}
.h2-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(25,211,162,.2)}
.h2-title{font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(36px,min(4.3vw,6.9vh),62px);line-height:1.04;letter-spacing:-.025em;margin:20px 0 18px;color:var(--ink)}
.h2-title .hl{display:inline}
.hero2 .lead{font-size:18px;line-height:1.6;color:var(--muted);max-width:560px}
.hero2 .lead b{color:var(--ink);font-weight:600}
.hero2 .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 22px}
.btn-ink{background:var(--ink);color:#fff;box-shadow:0 14px 30px -14px rgba(13,14,28,.7)}
.btn-ink:hover{background:#000}
.h2-proof{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;padding:0;margin:0}
.h2-proof li{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink-2)}
.h2-proof svg,.h2-toast svg{width:17px;height:17px;fill:none;stroke:#0e9a76;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* collage des réalisations */
.h2-visual{position:relative;width:100%;max-width:580px;aspect-ratio:1/0.92;margin-left:auto}
.h2-visual>*{position:absolute;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.h2-bg{inset:8% 4% 6% 10%;border-radius:44px;background:linear-gradient(135deg,var(--p-lilac),var(--p-sky) 55%,var(--mint-soft))}
.h2-browser{left:0;top:10%;width:74%;background:#fff;border-radius:20px;box-shadow:0 40px 80px -36px rgba(13,14,28,.45);overflow:hidden;animation:h2f 7s ease-in-out infinite}
.hb-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#faf9f6;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.hb-bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.hb-bar i:nth-child(2){background:#febc2e}.hb-bar i:nth-child(3){background:#28c840}
.hb-bar span{margin-left:10px;padding:3px 10px;border-radius:7px;background:#fff;border:1px solid var(--line)}
.hb-hero{margin:12px;padding:22px 20px 20px;border-radius:14px;background:linear-gradient(135deg,var(--p-peach),var(--p-butter));display:flex;flex-direction:column;gap:6px}
.hb-hero small{font-size:11px;font-weight:600;color:#8a5b00}
.hb-hero b{font:700 clamp(20px,2.1vw,27px)/1.1 "Space Grotesk",sans-serif;color:var(--ink)}
.hb-hero em{margin-top:6px;align-self:flex-start;font-style:normal;font-size:12px;font-weight:700;color:#fff;background:var(--ink);padding:7px 13px;border-radius:999px}
.hb-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 12px 14px}
.hb-tiles i{height:56px;border-radius:10px;background:var(--bg)}.hb-tiles i:nth-child(2){background:var(--mint-soft)}.hb-tiles i:nth-child(3){background:var(--lilac)}
.h2-phone{right:2%;top:24%;width:30%;aspect-ratio:9/19;border-radius:34px;background:var(--ink);padding:7px;box-shadow:0 40px 70px -30px rgba(13,14,28,.6);animation:h2f 8s ease-in-out -2s infinite}
.hp-screen{width:100%;height:100%;border-radius:27px;overflow:hidden;background:#000}
.hp-screen video{width:100%;height:100%;object-fit:cover;display:block}
.h2-pos{left:6%;bottom:2%;width:23%;aspect-ratio:3/4.4;border-radius:18px;background:linear-gradient(160deg,#2c2e44,var(--ink));padding:10px;box-shadow:0 30px 50px -22px rgba(13,14,28,.7);transform:rotate(-7deg);animation:h2f 6s ease-in-out -1s infinite}
.hp-scr{border-radius:10px;background:#0d0e1c;color:var(--mint);font:700 clamp(13px,1.3vw,17px) "Space Grotesk";padding:10px 8px;text-align:center;box-shadow:inset 0 0 16px rgba(25,211,162,.25)}
.hp-scr small{display:block;font:600 9px Inter,sans-serif;color:#9ea1bd;margin-bottom:2px}
.hp-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:9px}
.hp-keys i{height:11px;border-radius:4px;background:rgba(255,255,255,.16)}.hp-keys .g{background:var(--mint)}
.h2-toast{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:#fff;font-size:13px;font-weight:600;color:var(--ink);box-shadow:0 18px 36px -18px rgba(13,14,28,.45);white-space:nowrap}
.h2-toast.t1{left:0;bottom:39%;animation:h2pop 6s ease-in-out infinite}
.h2-toast.t2{right:0;top:4%;background:#d9fdd3;color:#111b21;animation:h2pop 6s ease-in-out -3s infinite}
.h2-toast .bot{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#008069;color:#fff;font:700 9.5px Inter,sans-serif}
.h2-card{right:22%;bottom:0;width:30%;aspect-ratio:1.7/1;border-radius:12px;background:#fff;padding:12px 14px;box-shadow:0 26px 44px -22px rgba(13,14,28,.5);transform:rotate(6deg);display:flex;flex-direction:column;justify-content:flex-end}
.h2-card b{font:700 clamp(12px,1.15vw,15px) "Space Grotesk";color:var(--ink)}
.h2-card small{font-size:9.5px;color:var(--muted)}
.h2-card i{position:absolute;top:12px;right:12px;width:14px;height:14px;border-radius:50%;background:var(--violet)}
@keyframes h2f{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes h2pop{0%,100%{translate:0 0;scale:1}50%{translate:0 -6px;scale:1.02}}
/* bande des services */
.h2-services{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-top:46px}
.h2-services a{display:flex;flex-direction:column;gap:2px;padding:14px 14px 13px;border-radius:18px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.h2-services a:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:0 18px 34px -22px rgba(13,14,28,.45)}
.h2-services .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:8px}
.h2-services svg{width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.h2-services b{font:700 14px/1.2 "Space Grotesk",sans-serif}
.h2-services small{font-size:12px;color:var(--muted)}
.ic.c1{background:var(--lilac)}.ic.c2{background:#dff3ff}.ic.c3{background:var(--mint-soft)}.ic.c4{background:#ffe3d8}.ic.c5{background:var(--p-butter)}.ic.c6{background:var(--ink)}.ic.c6 svg{stroke:var(--mint)}.ic.c7{background:#efe9ff}
/* responsive */
@media (max-width:1100px){.h2-services{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:980px){.h2-grid{grid-template-columns:minmax(0,1fr);gap:30px}.h2-visual{margin:0 auto;max-width:520px}}
@media (max-width:640px){
  .hero.hero2{padding:112px 0 30px}
  .h2-title{font-size:clamp(32px,9vw,40px)}
  .hero2 .lead{font-size:16px}
  .hero2 .cta-row .btn{width:100%;justify-content:center}
  .h2-toast{font-size:11.5px;padding:8px 11px}
  .h2-services{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:30px -16px 0;padding:4px 16px 10px;scrollbar-width:none}
  .h2-services::-webkit-scrollbar{display:none}
  .h2-services a{flex:0 0 42%;scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){.h2-visual *{animation:none!important}}

@media (max-width:640px){
  .h2-visual{aspect-ratio:1/0.86}
  .h2-pos,.h2-card{display:none}
  .h2-browser{width:80%;top:12%}
  .h2-phone{width:31%;top:20%}
  .h2-toast.t1{left:6%;bottom:6%;top:auto}
  .h2-toast.t2{top:0;right:2%}
  .hb-tiles i{height:40px}
}

/* ===================== V19 : formulaire en 2 étapes ===================== */
#form .fs{display:none}#form .fs.on{display:block;animation:introFade .35s ease}
#form .fq{margin:0 0 8px;font:700 14px Inter,sans-serif;color:#fff}
#form .fq:not(:first-child){margin-top:16px}
#form .chipset{display:flex;flex-wrap:wrap;gap:7px}
#form .ch{position:relative;cursor:pointer}
#form .ch input{position:absolute;opacity:0;pointer-events:none}
#form .ch span{display:inline-block;padding:8px 13px;border-radius:999px;font-size:13px;font-weight:600;color:#e6e6f2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);transition:background .2s,color .2s,border-color .2s}
#form .ch:hover span{border-color:rgba(255,255,255,.45)}
#form .ch input:checked+span{background:var(--mint);border-color:var(--mint);color:#053d2e}
#form .ch input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
#form .next,#form .send{margin-top:18px;width:100%;justify-content:center}
#form .fstep{margin-top:10px;font-size:12px;color:#9ea1bd;text-align:center}
#form .fstep a{color:#c9cbe0}
#form .ferr{display:none;margin-top:12px;font-size:13px;font-weight:600;color:#ffb4a8}
#form .ferr.on{display:block}
#form .frecap{margin:0 0 12px;padding:10px 14px;border-radius:14px;background:rgba(25,211,162,.12);border:1px solid rgba(25,211,162,.35);font-size:13px;color:#c9f3e6}
#form .frecap b{color:#fff}
#form .fl{margin-bottom:10px}
#form .fback{display:block;margin:10px auto 0;background:none;border:0;color:#c9cbe0;font:600 13px Inter,sans-serif;cursor:pointer}
#form .fback:hover{color:#fff}

/* ===================== V20 : pages de détail + bloc confiance ===================== */
.navpill .links a[aria-current="page"]{color:var(--violet)}
.phead{position:relative;padding:150px 0 70px;background:radial-gradient(800px 420px at 85% 0%,rgba(91,61,245,.10),transparent 60%),radial-gradient(700px 380px at 0% 30%,rgba(25,211,162,.10),transparent 60%),var(--bg)}
.phead .crumbs{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:22px}
.phead .crumbs a{color:var(--muted);text-decoration:none}
.phead .crumbs a:hover{color:var(--violet)}
.phead .crumbs [aria-current]{color:var(--ink);font-weight:600}
.ph-title{font:700 clamp(38px,6vw,72px)/1.04 "Space Grotesk",sans-serif;letter-spacing:-.02em;color:var(--ink);margin:12px 0 18px;max-width:16ch}
.phead .lead{max-width:640px;font-size:clamp(16px,1.6vw,19px);color:var(--muted);line-height:1.6}
.phead .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ph-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.ph-chips a{padding:9px 15px;border-radius:999px;background:#fff;border:1px solid rgba(13,14,28,.1);color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;transition:border-color .2s,color .2s}
.ph-chips a:hover{border-color:var(--violet);color:var(--violet)}

.trust{padding:110px 0}
.trust .head{text-align:center;max-width:720px;margin:0 auto 46px}
.tr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tr-card{background:#fff;border:1px solid rgba(13,14,28,.08);border-radius:24px;padding:26px 24px;box-shadow:0 20px 40px -32px rgba(13,14,28,.35);transition:transform .3s,box-shadow .3s}
.tr-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(91,61,245,.35)}
.tr-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(91,61,245,.08);margin-bottom:16px}
.tr-ic svg{width:22px;height:22px;fill:none;stroke:var(--violet);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tr-card:nth-child(even) .tr-ic{background:rgba(25,211,162,.12)}
.tr-card:nth-child(even) .tr-ic svg{stroke:#0e9f78}
.tr-card h3{font:700 19px "Space Grotesk",sans-serif;color:var(--ink);margin-bottom:6px}
.night .tr-card p,.tr-card p{font-size:15px;line-height:1.55;color:var(--muted)}
.tr-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}
.more-link{text-align:center;margin-top:26px}
.more-link a{color:var(--violet);font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(91,61,245,.3)}
.more-link a:hover{border-color:var(--violet)}
.cinfo a span svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.tr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.phead{padding:120px 0 50px}.tr-grid{grid-template-columns:1fr}.trust{padding:80px 0}.phead .cta-row .btn{width:100%;justify-content:center}}
/* le message principal s'affiche tout de suite (lisible dès la première seconde) */
.hero2 .h2-copy .rv,.phead .rv{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}