/* =====================================================================
   monsaas.app — Hero : iPhone 3D (CSS 3D) + notifications de paiement
   ===================================================================== */
@property --edge{syntax:'<angle>';inherits:true;initial-value:0deg}

.hero.hx-hero{text-align:left;overflow:visible;overflow-x:clip;z-index:2}
.hero.hx-hero::before{background:
  radial-gradient(42% 46% at 76% 46%,rgba(124,140,255,.20),transparent 72%),
  radial-gradient(36% 40% at 14% 6%,rgba(196,168,255,.10),transparent 70%),
  radial-gradient(50% 40% at 50% -6%,rgba(124,140,255,.16),transparent 70%)}
.hx-hero .grid-bg{-webkit-mask-image:radial-gradient(55% 60% at 70% 40%,#000,transparent 75%);mask-image:radial-gradient(55% 60% at 70% 40%,#000,transparent 75%);opacity:.45}

.hx{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;gap:32px;min-height:min(800px,calc(100svh - 10px));padding-top:56px;padding-bottom:40px}
.hx-copy{max-width:600px}
.hx-hero h1{font-size:clamp(42px,5.4vw,76px);line-height:1;letter-spacing:-.05em;max-width:12ch;margin:26px 0 0}
.hx-hero .lead{margin:26px 0 0;max-width:33em;font-size:clamp(17px,1.45vw,19px)}
.hx-hero .ctas{justify-content:flex-start;align-items:center;gap:14px 26px;margin-top:38px}
.hx-hero .note{margin-top:20px}
.hx-hero .pill-label b{display:inline-flex;align-items:center;gap:7px}
.hx-hero .pill-label b::before{content:"";width:6px;height:6px;border-radius:50%;background:#7C8CFF;box-shadow:0 0 0 3px rgba(124,140,255,.22)}

/* ---------- Bouton principal « Créer mon SaaS » ---------- */
.btn-create{position:relative;isolation:isolate;height:62px;padding:0 10px 0 30px;gap:16px;font-size:17px;letter-spacing:-.015em;background:#F4F6FA;color:#07080B;border:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 18px 50px -12px rgba(124,140,255,.75),0 0 90px -20px rgba(124,140,255,.6)}
.btn-create::before{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;padding:1px;background:conic-gradient(from var(--edge),rgba(124,140,255,0) 0deg,rgba(124,140,255,.95) 60deg,rgba(196,168,255,.9) 110deg,rgba(124,140,255,0) 170deg,rgba(124,140,255,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:edgeSpin 6s linear infinite}
.btn-create .arr{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#07080B;color:#F4F6FA;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn-create:hover{background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.3),0 22px 60px -12px rgba(124,140,255,.9),0 0 110px -20px rgba(124,140,255,.75)}
.btn-create:hover .arr{transform:translateX(3px)}
.btn-textlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--soft);font-weight:500;font-size:15px;text-decoration:none;transition:color .2s}
.btn-textlink:hover{color:var(--ink)}
.btn-textlink svg{transition:transform .2s}
.btn-textlink:hover svg{transform:translateX(2px)}
@keyframes edgeSpin{to{--edge:360deg}}
#navStart{font-weight:600}

/* ---------- Scène ---------- */
.hx-stage{position:relative;height:700px;margin-right:-24px;pointer-events:none;--px:0;--py:0}
.hx-scene{position:absolute;inset:0;perspective:1700px;perspective-origin:50% 42%}
.hx-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;transform:translate3d(calc(var(--px) * -14px),calc(var(--py) * -10px),0)}
.hx-orb.o1{width:340px;height:340px;left:22%;top:16%;background:radial-gradient(circle,rgba(124,140,255,.55),transparent 70%)}
.hx-orb.o2{width:260px;height:260px;left:52%;top:52%;background:radial-gradient(circle,rgba(196,168,255,.38),transparent 70%)}
.hx-ring{position:absolute;left:50%;top:50%;width:560px;height:560px;margin:-300px 0 0 -280px;border-radius:50%;border:1px solid rgba(174,184,255,.10);
  transform:rotateX(74deg) rotateZ(calc(var(--px) * 6deg));box-shadow:0 0 60px rgba(124,140,255,.05) inset}
.hx-ring::after{content:"";position:absolute;inset:70px;border-radius:50%;border:1px dashed rgba(174,184,255,.07)}

/* Carte d'arrière-plan (profondeur de champ) */
.hx-back{position:absolute;left:62%;top:9%;width:190px;padding:14px 16px;border-radius:18px;background:rgba(20,23,32,.55);border:1px solid rgba(255,255,255,.08);
  filter:blur(1.4px);opacity:.75;transform:translate3d(calc(var(--px) * -18px),calc(var(--py) * -12px),0) rotate(4deg)}
.hx-back span{display:block;font-size:11px;color:var(--mute)}
.hx-back b{display:block;margin-top:4px;font-family:var(--display);font-size:20px;letter-spacing:-.03em;color:var(--ink);font-weight:600}
.hx-back svg{display:block;margin-top:8px}

/* ---------- Téléphone ---------- */
.ph-rig{position:absolute;left:50%;top:50%;width:300px;height:614px;margin:-318px 0 0 -150px;transform-style:preserve-3d;will-change:transform;
  transform:translate3d(0,var(--fy,0px),0) rotateX(calc(7deg + var(--py) * -5deg + var(--ix,0deg))) rotateY(calc(-19deg + var(--px) * 7deg + var(--iy,0deg))) rotateZ(1.5deg)}
.ph-l{position:absolute;inset:0;border-radius:52px;background:linear-gradient(90deg,#2b2e35 0%,#7d828d 22%,#42464f 50%,#8d929c 78%,#2a2d33 100%)}
.ph-l:nth-child(1){transform:translateZ(-1.2px)}
.ph-l:nth-child(2){transform:translateZ(-2.6px)}
.ph-l:nth-child(3){transform:translateZ(-4px)}
.ph-l:nth-child(4){transform:translateZ(-5.4px)}
.ph-l:nth-child(5){transform:translateZ(-6.8px)}
.ph-l:nth-child(6){transform:translateZ(-8.2px);background:#1c1e23;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.ph-face{position:absolute;inset:0;border-radius:52px;padding:4px;transform:translateZ(0);
  background:linear-gradient(145deg,#c9ccd3 0%,#6c717b 18%,#2f3238 42%,#9a9fa8 64%,#3a3d44 84%,#b8bcc4 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 0 2px 1px rgba(0,0,0,.6)}
/* reflet de lumière qui tourne lentement sur le contour */
.ph-face::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--edge),transparent 0deg,rgba(255,255,255,.9) 18deg,transparent 52deg,transparent 180deg,rgba(255,255,255,.45) 205deg,transparent 236deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:edgeSpin 14s linear infinite;opacity:.8}
.ph-bezel{position:relative;height:100%;border-radius:48px;background:#050506;padding:9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ph-screen{position:relative;height:100%;border-radius:40px;overflow:hidden;background:#F6F7F9;color:#0A0D14;font-family:var(--body);
  -webkit-font-smoothing:antialiased;isolation:isolate}
.ph-island{position:absolute;left:50%;top:10px;width:92px;height:27px;margin-left:-46px;border-radius:20px;background:#000;z-index:5;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.ph-island::after{content:"";position:absolute;right:12px;top:9px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2a3550,#05070c 70%)}
/* boutons latéraux */
.ph-btn{position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#4a4e57,#9aa0aa);transform:translateZ(-4px)}
.ph-btn.b1{left:-3px;top:118px;height:26px}
.ph-btn.b2{left:-3px;top:166px;height:52px}
.ph-btn.b3{left:-3px;top:228px;height:52px}
.ph-btn.b4{right:-3px;top:186px;height:82px}
/* verre : reflet qui suit la souris */
.ph-glare{position:absolute;inset:0;border-radius:52px;pointer-events:none;transform:translateZ(.6px);overflow:hidden;
  background:radial-gradient(120% 60% at 20% -10%,rgba(255,255,255,.10),transparent 60%)}
.ph-glare::before{content:"";position:absolute;top:-10%;bottom:-10%;left:-80%;width:260%;
  background:linear-gradient(112deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.17) 43%,rgba(255,255,255,.05) 47%,rgba(255,255,255,0) 54%);
  transform:translate3d(calc(var(--px) * 9%),0,0)}
.ph-shadow{position:absolute;left:50%;top:50%;width:300px;height:70px;margin:290px 0 0 -170px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),rgba(0,0,0,.35) 55%,transparent);
  filter:blur(14px);transform:translate3d(calc(var(--px) * -16px),0,0) scale(calc(1 - var(--fs,0)));opacity:calc(.85 - var(--fs,0) * 2)}
.ph-glow{position:absolute;left:50%;top:50%;width:420px;height:560px;margin:-300px 0 0 -210px;border-radius:50%;background:radial-gradient(closest-side,rgba(124,140,255,.30),transparent);filter:blur(30px)}

/* ---------- Écran : application ---------- */
.app{position:absolute;inset:0;padding:50px 16px 0;display:flex;flex-direction:column;font-size:12px;letter-spacing:-.01em}
.app-status{position:absolute;left:0;right:0;top:0;height:46px;display:flex;align-items:center;justify-content:space-between;padding:4px 26px 0 30px;font-weight:600;font-size:13.5px;letter-spacing:-.02em;font-family:var(--display)}
.app-status .ic{display:flex;gap:5px;align-items:center}
.app-head{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.app-brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;font-family:var(--display);letter-spacing:-.03em}
.app-brand svg{border-radius:7px}
.app-av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#E5E7FF,#C9CEFF);display:grid;place-items:center;font-size:11px;font-weight:600;color:#3E47B8}
.app-bal{margin-top:16px}
.app-bal .k{font-size:11.5px;color:#6B7280;font-weight:500}
.app-bal .v{display:flex;align-items:baseline;gap:8px;margin-top:3px}
.app-bal .v b{font-family:var(--display);font-size:31px;letter-spacing:-.045em;font-weight:600;font-variant-numeric:tabular-nums;color:#0A0D14}
.app-chip{white-space:nowrap;flex:none;display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px;background:#E8F7EF;color:#14804A;font-weight:600;font-size:10.5px}
.app-chart{position:relative;margin:8px -16px 0;height:78px}
.app-chart svg{display:block;width:100%;height:100%;overflow:visible}
.app-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.app-kpi{background:#fff;border-radius:14px;padding:10px 12px;box-shadow:0 1px 0 rgba(10,13,20,.04),0 0 0 1px rgba(10,13,20,.05)}
.app-kpi span{display:block;font-size:10.5px;color:#6B7280;font-weight:500}
.app-kpi b{display:block;margin-top:2px;font-family:var(--display);font-size:16px;letter-spacing:-.03em;font-weight:600;font-variant-numeric:tabular-nums}
.app-list{margin-top:12px;background:#fff;border-radius:16px;padding:4px 12px;box-shadow:0 1px 0 rgba(10,13,20,.04),0 0 0 1px rgba(10,13,20,.05);overflow:hidden;flex:1;margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.app-list h5{margin:8px 0 2px;font-size:11.5px;font-weight:600;color:#0A0D14;display:flex;justify-content:space-between}
.app-list h5 span{color:#635BFF;font-weight:500}
.tx{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #F0F1F4;overflow:hidden}
.tx:first-of-type{border-top:0}
.tx .ini{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:600}
.tx .who{flex:1;min-width:0;line-height:1.3}
.tx .who b{display:block;font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx .who span{display:block;color:#8A919E;font-size:10.5px}
.tx .amt{font-weight:600;font-size:12px;font-variant-numeric:tabular-nums;color:#0A0D14;text-align:right;line-height:1.3}
.tx .amt span{display:block;font-weight:500;color:#14804A;font-size:10px}
.tx.new{animation:txIn .7s cubic-bezier(.2,.8,.2,1) both}
.tx.new .ini{animation:txPop .7s .1s cubic-bezier(.2,.8,.2,1) both}
@keyframes txIn{from{max-height:0;opacity:0;padding:0}to{max-height:48px;opacity:1}}
@keyframes txPop{from{transform:scale(.6)}to{transform:none}}
.app-home{position:absolute;left:50%;bottom:7px;width:110px;height:4px;margin-left:-55px;border-radius:3px;background:#0A0D14;opacity:.85;z-index:3}
.app-fade{position:absolute;left:0;right:0;bottom:0;height:38px;background:linear-gradient(rgba(246,247,249,0),#F6F7F9);z-index:2}
.bal-pulse{animation:balPulse .9s ease}
@keyframes balPulse{0%{color:#0A0D14}30%{color:#14804A}100%{color:#0A0D14}}

/* ---------- Notifications ---------- */
.hx-notifs{position:absolute;inset:0;perspective:1200px}
.ntf{position:absolute;left:-4%;top:10%;width:292px;display:flex;gap:12px;align-items:flex-start;padding:12px 14px 13px 12px;border-radius:20px;
  background:rgba(246,247,251,.78);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:0 0 0 .5px rgba(255,255,255,.7) inset,0 0 0 1px rgba(10,13,20,.06),0 24px 48px -18px rgba(0,0,0,.55),0 8px 16px -10px rgba(0,0,0,.35);
  color:#0A0D14;font-size:13px;line-height:1.3;letter-spacing:-.01em;opacity:0;will-change:transform,opacity;transform-origin:50% 0}
.ntf img{flex:none;width:38px;height:38px;border-radius:10px;box-shadow:0 0 0 1px rgba(10,13,20,.06)}
.ntf .nt-b{flex:1;min-width:0}
.ntf .nt-h{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.ntf .nt-h b{font-weight:600;font-size:13.5px}
.ntf .nt-h time{font-size:11.5px;color:#7A808C;white-space:nowrap}
.ntf .nt-a{display:block;margin-top:2px;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ntf .nt-s{display:block;margin-top:1px;color:#5B6270;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ntf.s1{left:auto;right:-7%;top:45%}
.ntf.s2{left:1%;top:75%}
/* Sans JS ou mouvement réduit : composition statique */
.hx-static .ntf{opacity:1}

/* ---------- Responsive ---------- */
@media (max-width:1180px){.hx-stage{margin-right:0}.ntf.s1{right:-2%}}
@media (max-width:1080px){
  .hx{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:12px}
  .hx-stage{height:620px}
  .ph-rig{transform:translate3d(0,var(--fy,0px),0) scale(.88) rotateX(calc(7deg + var(--py) * -5deg + var(--ix,0deg))) rotateY(calc(-19deg + var(--px) * 7deg + var(--iy,0deg))) rotateZ(1.5deg)}
  .ntf{width:268px}.ntf.s0{left:-8%}.ntf.s1{right:-3%}.ntf.s2{left:-4%}
}
@media (max-width:900px){
  .hx{grid-template-columns:1fr;min-height:0;padding-top:44px;padding-bottom:0;gap:8px}
  .hx-copy{max-width:640px}
  .hx-stage{height:600px;margin:0 -24px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
  .ph-rig{width:270px;height:553px;margin:-262px 0 0 -135px;transform:translate3d(0,var(--fy,0px),0) rotateX(calc(6deg + var(--ix,0deg))) rotateY(calc(-12deg + var(--px) * 4deg + var(--iy,0deg))) rotateZ(1deg)}
  .ph-l{border-radius:47px}.ph-face,.ph-glare{border-radius:47px}.ph-bezel{border-radius:43px;padding:8px}.ph-screen{border-radius:36px}
  .ph-l:nth-child(n+4){display:none}
  .ph-shadow{width:260px;margin:258px 0 0 -140px}
  .app{padding:46px 14px 0;font-size:11px}
  .app-bal .v b{font-size:27px}
  .hx-back{display:none}
  .ntf,.ntf.s0,.ntf.s1,.ntf.s2{left:50%;right:auto;top:84px;width:min(300px,calc(100vw - 48px));margin-left:calc(min(300px,calc(100vw - 48px)) / -2)}
}
@media (max-width:640px){
  .hx-hero h1{font-size:clamp(38px,11vw,52px)}
  .hx-hero .ctas{flex-direction:column;align-items:stretch;gap:6px}
  .btn-create{width:100%;justify-content:space-between}
  .btn-textlink{justify-content:center}
  .hx-hero .note{text-align:center}
  .hx-stage{height:540px;margin:0 -16px}
  .ph-rig{width:240px;height:492px;margin:-232px 0 0 -120px}
  .ph-l{border-radius:42px}.ph-face,.ph-glare{border-radius:42px}.ph-bezel{border-radius:39px;padding:7px}.ph-screen{border-radius:33px}
  .ph-island{width:76px;height:22px;margin-left:-38px;top:8px}
  .app{padding:40px 12px 0}
  .app-status{height:38px;padding:2px 20px 0 24px;font-size:12px}
  .app-bal{margin-top:10px}.app-bal .v b{font-size:24px}
  .app-chart{height:58px}
  .app-kpi b{font-size:14px}
  .app-kpi span{font-size:9.5px;white-space:nowrap}
  .ph-shadow{width:230px;margin:226px 0 0 -125px}
  .ntf,.ntf.s0,.ntf.s1,.ntf.s2{top:64px;padding:10px 12px;border-radius:18px;gap:10px}
  .ntf img{width:32px;height:32px;border-radius:8px}
  .ntf .nt-a{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.btn-create::before,.ph-face::before{animation:none}}