/* ============================================================
   FitCONNECT Site Theme — Pitch Design System
   Shared CSS for all site pages (home, adherent, partenaire)
   ============================================================ */

/* ===== TOKENS ===== */
:root{
  --blue:#667EEA; --purple:#764BA2; --blue-d:#5A6FD6; --purple-d:#6B3FA0;
  --cyan:#8FD3FF; --lilac:#C4B2FF; --green:#34d399; --orange:#fb923c;
  --w90:rgba(255,255,255,.90); --w70:rgba(255,255,255,.70);
  --w45:rgba(255,255,255,.45); --w15:rgba(255,255,255,.15);
  --w10:rgba(255,255,255,.10); --w06:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.16);
  --grad:linear-gradient(135deg,#5A6FD6 0%,#6B3FA0 100%);
  --grad-warm:linear-gradient(135deg,#f59e0b 0%,#ef4444 100%);
  --shadow:0 20px 60px rgba(102,126,234,.30);
  --r:20px; --rpill:999px;
  --glass-blur:16px;
  --shadow-strong:0 24px 70px rgba(2,6,23,.55);
  --rail-gap:28px; --rail-pad:14px 18px; --rail-h:64px;
  --rail-speed:32s; --ticker-speed:34s;
  --reveal-distance-y:18px; --reveal-distance-x:42px; --reveal-duration:.68s;
}
@media (max-width:640px){
  :root{
    --glass-blur:2px; --shadow-strong:0 12px 28px rgba(2,6,23,.45);
    --rail-speed:42s; --ticker-speed:44s;
    --reveal-distance-y:12px; --reveal-distance-x:22px; --reveal-duration:.56s;
  }
}

/* ===== BASE (pitch-theme scope) ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media print{html{scroll-snap-type:none}}
html,body{max-width:100%;overflow-x:hidden}
.anchor{scroll-margin-top:96px}

body.pitch-theme{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  color:#fff;
  background:
    radial-gradient(920px 560px at 12% 14%, rgba(255,255,255,.14), transparent 62%),
    radial-gradient(760px 440px at 84% 10%, rgba(255,255,255,.10), transparent 62%),
    linear-gradient(135deg,#5A6FD6 0%, #6B3FA0 100%);
  background-size:200% 200%;
}
body.pitch-theme.anim-running{animation:bgShift 18s ease-in-out infinite}
@keyframes bgShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media (prefers-reduced-motion:reduce){body.pitch-theme{animation:none!important}}
body.pitch-theme h1,
body.pitch-theme h2,
body.pitch-theme h3{letter-spacing:-0.02em}

/* ===== SECTION BACKGROUNDS ===== */
.bg-cover{background:
  radial-gradient(900px 520px at 5% 5%,rgba(255,255,255,.16),transparent 60%),
  radial-gradient(700px 400px at 92% 8%,rgba(255,255,255,.11),transparent 60%),
  var(--grad)}
.bg-dark{background:
  radial-gradient(820px 480px at 88% 88%,rgba(118,75,162,.26),transparent 58%),
  radial-gradient(600px 360px at 3% 5%,rgba(102,126,234,.20),transparent 58%),
  linear-gradient(155deg,#0a0818 0%,#1a1040 100%)}
.bg-mid{background:
  radial-gradient(700px 400px at 12% 88%,rgba(143,211,255,.12),transparent 52%),
  radial-gradient(500px 300px at 90% 5%,rgba(196,178,255,.16),transparent 52%),
  linear-gradient(150deg,#100d28 0%,#1e1845 100%)}
.bg-accent{background:
  radial-gradient(860px 460px at 50% 50%,rgba(102,126,234,.28),transparent 58%),
  linear-gradient(140deg,#0e0c26 0%,#1f1852 100%)}
.bg-warm{background:
  radial-gradient(700px 400px at 10% 90%,rgba(245,158,11,.14),transparent 55%),
  radial-gradient(500px 300px at 90% 10%,rgba(102,126,234,.22),transparent 55%),
  linear-gradient(150deg,#0f0c22 0%,#1c1638 100%)}

/* Section containers */
.section{position:relative;width:100%;overflow:hidden;padding:56px 0}
@media (max-width:768px){.section{padding:32px 0}}

/* ===== ORBS ===== */
.orb{position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:screen}
.orb-1{width:520px;height:520px;background:radial-gradient(circle,rgba(102,126,234,.62),transparent 70%);top:-18%;left:-14%;animation:orbDrift 11s ease-in-out infinite}
.orb-2{width:400px;height:400px;background:radial-gradient(circle,rgba(156,95,224,.62),transparent 70%);top:0%;right:-12%;animation:orbDrift 14s ease-in-out infinite;animation-delay:2s}
.orb-3{width:320px;height:320px;background:radial-gradient(circle,rgba(143,211,255,.58),transparent 70%);bottom:-5%;left:35%;animation:orbDrift 9s ease-in-out infinite;animation-delay:4s}
@keyframes orbDrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(22px,-28px) scale(1.04)}66%{transform:translate(-14px,16px) scale(.97)}}
@media (prefers-reduced-motion:reduce){.orb{animation:none!important}}
@media (max-width:640px){.orb{display:none}}

/* ===== TYPOGRAPHY ===== */
.kicker{display:block;font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px}
h1.big,.big{font-size:clamp(50px,6.5vw,78px);font-weight:900;line-height:1.15;letter-spacing:-.025em;
  background:linear-gradient(140deg,#fff 0%,var(--lilac) 55%,var(--cyan) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  padding-bottom:4px;margin-bottom:14px}
h2.stitle,.stitle{font-size:clamp(28px,3.8vw,42px);font-weight:800;line-height:1.1;
  background:linear-gradient(135deg,#fff 30%,var(--lilac) 80%,var(--cyan) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:10px}
h3.ctitle{font-size:.95rem;font-weight:700;color:#fff;margin-bottom:5px}
.lead{font-size:1.06rem;color:var(--w90);line-height:1.72;max-width:650px}
.sub{font-size:.82rem;color:var(--w70);line-height:1.62}
.grad-text{background:linear-gradient(135deg,var(--cyan),var(--lilac));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.grad-h{background:linear-gradient(130deg,#fff 0%,#C8BAFF 55%,#8FD3FF 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 12px rgba(143,211,255,.24))}

/* ===== LOGO BADGE ===== */
.logo-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.32rem .9rem;border-radius:var(--rpill);border:1px solid rgba(196,178,255,.42);background:rgba(102,126,234,.18);font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--lilac);margin-bottom:18px}
.badge-app{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .7rem;border-radius:9999px;font-weight:700;font-size:.78rem;background:linear-gradient(135deg,rgba(118,75,162,.24),rgba(102,126,234,.24));border:1px solid rgba(184,167,255,.52)}

/* ===== CARDS ===== */
.p-card{background:var(--w10);border:1px solid var(--border);border-radius:var(--r);backdrop-filter:blur(12px);padding:22px}
.p-card-g{background:linear-gradient(155deg,rgba(118,75,162,.24),rgba(102,126,234,.16));border:1px solid var(--border);border-radius:var(--r);padding:22px}
.p-card-glow{background:var(--w10);border:1px solid var(--border);border-radius:var(--r);padding:22px;box-shadow:0 0 48px rgba(102,126,234,.16),0 22px 52px rgba(0,0,0,.35)}
.p-card-green{background:linear-gradient(155deg,rgba(52,211,153,.14),rgba(102,126,234,.12));border:1px solid rgba(52,211,153,.24);border-radius:var(--r);padding:22px}
.p-card-warm{background:linear-gradient(155deg,rgba(245,158,11,.16),rgba(239,68,68,.10));border:1px solid rgba(245,158,11,.28);border-radius:var(--r);padding:22px}

/* Legacy card classes (for backward compat with partials) */
.glass{background:rgba(255,255,255,.10);backdrop-filter:blur(var(--glass-blur));border:1px solid rgba(255,255,255,.18)}
.card{background:rgba(255,255,255,.08);backdrop-filter:blur(calc(var(--glass-blur) + 2px));border:1px solid rgba(255,255,255,.18)}
.card-contrast{
  background:
    linear-gradient(180deg,rgba(118,75,162,.34),rgba(102,126,234,.24)),
    radial-gradient(640px 240px at 85% 0%,rgba(255,255,255,.14),transparent 62%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 20px 56px rgba(116,75,162,.24);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.card-contrast:hover{transform:translateY(-3px);box-shadow:0 24px 56px rgba(2,6,23,.45)}
.tone-match{
  background:
    radial-gradient(980px 560px at 8% 8%, rgba(255,255,255,.15), transparent 62%),
    radial-gradient(720px 440px at 90% 12%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg,#667EEA 0%, #764BA2 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 20px 56px rgba(118,75,162,.24);
}
.tone-match-soft{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);box-shadow:0 0 26px rgba(255,255,255,.16)}

/* ===== FEATURE CARDS & ICONS ===== */
.fc{background:var(--w10);border:1px solid var(--border);border-radius:16px;padding:18px;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1),background .3s ease;position:relative;overflow:hidden;isolation:isolate}
.fc::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 80% 80% at 25% 20%,rgba(102,126,234,.14),transparent 70%);opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:0}
.fc:hover{transform:translateY(-4px);background:rgba(255,255,255,.14)!important;box-shadow:0 16px 40px rgba(102,126,234,.28),0 0 0 1px rgba(255,255,255,.26),0 0 24px rgba(143,211,255,.14)}
.fc:hover::after{opacity:1}

.fi{width:42px;height:42px;border-radius:11px;background:var(--grad);display:flex;align-items:center;justify-content:center;margin-bottom:11px;box-shadow:0 8px 20px rgba(102,126,234,.30);flex-shrink:0;position:relative;transition:box-shadow .3s ease,transform .3s ease}
.fi svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.fi::before{content:'';position:absolute;inset:-4px;border-radius:15px;background:radial-gradient(circle,rgba(102,126,234,.20),transparent 70%);animation:iconPulse 3s ease-in-out infinite;pointer-events:none;z-index:-1}
.fi-green{background:linear-gradient(135deg,#34d399,#059669)}
.fi-cyan{background:linear-gradient(135deg,#8FD3FF,#667EEA)}
.fi-lilac{background:linear-gradient(135deg,#C4B2FF,#764BA2)}
.fi-orange{background:linear-gradient(135deg,#fb923c,#ef4444)}
.fi-warm{background:linear-gradient(135deg,#f59e0b,#ef4444)}
@keyframes iconPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.7;transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.fi::before{animation:none}}

.fc:hover .fi{box-shadow:0 0 24px rgba(102,126,234,.30),0 0 48px rgba(143,211,255,.12);transform:translateY(-2px)}

/* Legacy feat-card */
.feat-card{position:relative;overflow:hidden;isolation:isolate;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1),background .3s ease}
.feat-card::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 80% 80% at 25% 20%,rgba(102,126,234,.14),transparent 70%);opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:0}
.feat-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.14)!important;box-shadow:0 16px 40px rgba(102,126,234,.28),0 0 0 1px rgba(255,255,255,.26),0 0 24px rgba(143,211,255,.14)}
.feat-card:hover::after{opacity:1}
.feat-card:hover .icon-wrap{box-shadow:0 0 24px rgba(102,126,234,.30),0 0 48px rgba(143,211,255,.12);transform:translateY(-2px)}

/* Legacy icon-wrap */
.icon-wrap{position:relative;z-index:1;width:48px;height:48px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(102,126,234,.18),rgba(143,211,255,.12));border:1px solid rgba(255,255,255,.18);box-shadow:0 0 20px rgba(102,126,234,.15),0 0 40px rgba(143,211,255,.06);margin-bottom:.6rem;transition:box-shadow .3s ease,transform .3s ease}
.icon-wrap svg{width:24px;height:24px;stroke:#fff;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(143,211,255,.30))}
.icon-wrap::before{content:'';position:absolute;inset:-4px;border-radius:18px;background:radial-gradient(circle,rgba(102,126,234,.20),transparent 70%);animation:iconPulse 3s ease-in-out infinite;pointer-events:none;z-index:-1}

/* ===== PILLS ===== */
.pill{display:inline-block;padding:.28rem .72rem;border-radius:var(--rpill);font-size:.68rem;font-weight:700;background:var(--w15);border:1px solid var(--border);color:#fff}
.pill-c{background:rgba(143,211,255,.15);border-color:rgba(143,211,255,.32);color:var(--cyan)}
.pill-g{background:rgba(52,211,153,.15);border-color:rgba(52,211,153,.32);color:#34d399}
.pill-p{background:rgba(196,178,255,.15);border-color:rgba(196,178,255,.32);color:var(--lilac)}
.pill-o{background:rgba(251,146,60,.15);border-color:rgba(251,146,60,.32);color:var(--orange)}

/* ===== STAT CARDS ===== */
.scard{background:var(--w10);border:1px solid var(--border);border-radius:16px;padding:22px 18px;text-align:center}
.snum{font-size:2.2rem;font-weight:900;background:linear-gradient(135deg,#fff 20%,var(--cyan) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1}
.slabel{font-size:.72rem;color:var(--w70);margin-top:5px;font-weight:600}
.stat-big{font-size:2.8rem;font-weight:900;letter-spacing:-.04em;line-height:1;background:linear-gradient(135deg,#fff,#8FD3FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-label{font-size:.85rem;opacity:.85;margin-top:.3rem;font-weight:500}

/* ===== STEPS ===== */
.step{display:flex;align-items:flex-start;gap:18px;margin-bottom:20px}
.stepn{min-width:40px;height:40px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:900;color:#fff;box-shadow:0 8px 20px rgba(102,126,234,.38);flex-shrink:0}
.stepb h4{font-size:.92rem;font-weight:700;color:#fff;margin-bottom:3px}
.stepb p{font-size:.78rem;color:var(--w70);line-height:1.55}

/* ===== QUOTE ===== */
.quote{background:var(--w06);border:1px solid var(--border);border-left:3px solid rgba(102,126,234,.55);border-radius:0 14px 14px 0;padding:16px 18px}
.qtext{font-size:.84rem;color:var(--w90);font-style:italic;line-height:1.6;margin-bottom:8px}
.qsrc{font-size:.68rem;color:var(--w45);font-weight:700;text-transform:uppercase;letter-spacing:.08em}

/* ===== PHONE MOCKUP ===== */
.phone-shell{
  width:200px;border-radius:36px;overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 12px 40px rgba(102,126,234,.32),0 0 60px rgba(118,75,162,.22),0 0 0 1px rgba(255,255,255,.07);
  background:#111;
}
.phone-shell img{width:100%;display:block;border-radius:26px}
.phone-glow{position:absolute;inset:-20px;border-radius:56px;background:radial-gradient(ellipse at center,rgba(102,126,234,.28),transparent 70%);pointer-events:none;z-index:-1}

/* ===== AVATAR ===== */
.avatar{width:52px;height:52px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:900;color:#fff;border:2px solid rgba(255,255,255,.22);box-shadow:0 6px 18px rgba(102,126,234,.35);flex-shrink:0}

/* ===== DIVIDER ===== */
.p-div{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);margin:20px 0}

/* ===== GRIDS ===== */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.g4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px}
.g12{display:grid;grid-template-columns:1fr 2fr;gap:32px;align-items:start}
.g21{display:grid;grid-template-columns:2fr 1fr;gap:32px;align-items:start}
.g13{display:grid;grid-template-columns:1.1fr 2.9fr;gap:36px;align-items:start}
@media (max-width:768px){
  .g2,.g3,.g4,.g12,.g21,.g13{grid-template-columns:1fr;gap:16px}
}

/* ===== FLEX UTILS ===== */
.flex{display:flex}.aic{align-items:center}.jcc{justify-content:center}
.gap2{gap:8px}.gap3{gap:12px}.gap4{gap:16px}.gap5{gap:20px}.gap6{gap:24px}
.wrap{flex-wrap:wrap}.col{flex-direction:column}
.mt2{margin-top:8px}.mt3{margin-top:12px}.mt4{margin-top:16px}
.mt5{margin-top:20px}.mt6{margin-top:24px}.mt8{margin-top:32px}
.mb2{margin-bottom:8px}.mb3{margin-bottom:12px}.mb4{margin-bottom:16px}.mb6{margin-bottom:24px}
.tc{text-align:center}.w100{width:100%}.rel{position:relative}

/* ===== PROGRESSBAR ===== */
.scroll-progress{position:fixed;top:0;left:0;width:0;height:3px;z-index:1000;transition:width .12s ease-out;background:linear-gradient(90deg,var(--lilac),var(--blue))}

/* ===== NAVBAR ===== */
.navbar{transition:all .3s ease}
.navbar.navbar-scroll{background:rgba(10,8,24,.85);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.12)}
.nav-link{position:relative}
.nav-link::after{content:'';position:absolute;left:0;bottom:-6px;height:2px;width:0;background:linear-gradient(90deg,var(--lilac),var(--blue));transition:width .25s ease}
.nav-link:hover::after{width:100%}

/* ===== BUTTONS ===== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:1rem;padding:.9rem 1.25rem;font-weight:800;letter-spacing:.01em;transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;text-decoration:none;border:none;cursor:pointer;font-family:inherit;font-size:inherit}
.btn-primary{color:#fff;background:linear-gradient(135deg,#667EEA 0%,#764BA2 100%);box-shadow:0 10px 26px rgba(118,75,162,.42),inset 0 0 0 1px rgba(255,255,255,.22),0 0 40px rgba(102,126,234,.18)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 46px rgba(118,75,162,.52),0 0 60px rgba(102,126,234,.24);filter:saturate(1.12) brightness(1.06)}
.btn-secondary{background:#fff;color:#0B1026;border:2px solid rgba(255,255,255,.55);box-shadow:0 8px 22px rgba(255,255,255,.12)}
.btn-secondary:hover{transform:translateY(-3px);box-shadow:0 16px 35px rgba(255,255,255,.22);filter:brightness(1.04)}
.btn-outline{color:#fff;border:2px solid rgba(170,152,255,.68);background:transparent;box-shadow:0 8px 22px rgba(118,75,162,.22)}
.btn-outline:hover{background:rgba(118,75,162,.16)}
.btn-swipe{overflow:hidden;isolation:isolate}
.btn-swipe::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.25) 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-130%);transition:transform .6s ease;mix-blend-mode:screen;pointer-events:none}
.btn-swipe:hover::before{transform:translateX(130%)}
.btn-ripple{position:absolute;width:12px;height:12px;border-radius:9999px;background:rgba(255,255,255,.85);transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen;filter:blur(.3px);animation:ripple .8s ease-out forwards}
@keyframes ripple{to{opacity:0;transform:translate(-50%,-50%) scale(20)}}
.btn-bounce{animation:btnBounce .42s cubic-bezier(.2,.8,.2,1)}
@keyframes btnBounce{0%{transform:scale(1)}30%{transform:scale(.97)}55%{transform:scale(1.03)}100%{transform:scale(1)}}
.magnetic{transition:transform .2s ease-out}

/* ===== LOGO ===== */
.logo-frame{position:relative;border-radius:24px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));box-shadow:0 12px 34px rgba(102,126,234,.36),0 0 52px rgba(118,75,162,.32),0 0 34px rgba(255,255,255,.44),0 0 74px rgba(255,255,255,.30),0 -4px 18px rgba(255,255,255,.72),inset 0 0 0 1px rgba(255,255,255,.32);overflow:hidden;isolation:isolate}
.logo-frame::before{
  content:"";position:absolute;inset:-40% -20%;
  background:conic-gradient(from 90deg,rgba(118,75,162,.42),rgba(102,126,234,.42),rgba(143,211,255,.42));
  filter:blur(28px);opacity:.45;pointer-events:none;z-index:0;
  animation:slowSpin 18s linear infinite;animation-play-state:paused;
}
@keyframes slowSpin{to{transform:rotate(360deg)}}
.hero-logo{width:12rem;height:12rem;border-radius:22px;position:relative;z-index:1;object-fit:contain}
@media (min-width:640px){.hero-logo{width:16rem;height:16rem}}
@media (min-width:1024px){.hero-logo{width:18rem;height:18rem}}
.heartbeat{animation:heartbeat 2.2s ease-in-out infinite;transform-origin:center;animation-play-state:paused}
@keyframes heartbeat{
  0%{transform:scale(1)}10%{transform:scale(1.06)}20%{transform:scale(1)}
  30%{transform:scale(1.06)}40%{transform:scale(1)}100%{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){.heartbeat,.logo-frame::before{animation:none!important}}
@media (max-width:640px){
  .logo-frame{box-shadow:0 8px 24px rgba(102,126,234,.32),0 0 20px rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.22)}
}

/* ===== MEDIA PHONE ===== */
.media-phone{--r:clamp(16px,3vw,28px);position:relative;border-radius:var(--r);overflow:hidden;border:1px solid rgba(255,255,255,.22);box-shadow:0 12px 30px rgba(102,126,234,.28),0 0 48px rgba(118,75,162,.22),0 0 30px rgba(255,255,255,.38),0 0 72px rgba(255,255,255,.20),0 -4px 16px rgba(255,255,255,.66),0 20px 60px rgba(0,0,0,.45);background:radial-gradient(120% 120% at 50% 10%,rgba(118,75,162,.20),transparent 62%);padding:10px;width:min(100%,420px);margin-inline:auto}
.feature-frame{--r:clamp(16px,3vw,28px);position:relative;border-radius:var(--r);overflow:hidden;border:1px solid rgba(255,255,255,.22);box-shadow:0 12px 30px rgba(102,126,234,.28),0 0 48px rgba(118,75,162,.22),0 0 30px rgba(255,255,255,.38),0 0 72px rgba(255,255,255,.20),0 -4px 16px rgba(255,255,255,.66),0 20px 60px rgba(0,0,0,.45);background:radial-gradient(120% 120% at 50% 10%,rgba(118,75,162,.20),transparent 62%);padding:10px;width:min(100%,980px);margin-inline:auto}
.media-inner{position:relative;border-radius:calc(var(--r) - 10px);overflow:hidden;display:block;background:rgba(255,255,255,.02)}
.media-img{width:100%;height:auto;object-fit:cover;display:block}
.media-native{display:inline-block;padding:10px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:radial-gradient(120% 120% at 50% 10%,rgba(118,75,162,.20),transparent 62%);box-shadow:0 20px 60px rgba(0,0,0,.5);margin-inline:auto;max-width:100%}
.native-video{display:block;width:auto;height:auto;max-width:100%;border-radius:12px}

/* Hero phone tilt */
@media (min-width:1024px){
  #apercu .reveal-right .media-phone{
    transform:perspective(1100px) rotateY(-6deg) rotateX(2deg);
    transition:transform .6s cubic-bezier(.16,1,.3,1);will-change:transform;
  }
  #apercu .reveal-right .media-phone:hover{transform:perspective(1100px) rotateY(-1.5deg) rotateX(0.5deg)}
}

/* ===== STORE BADGES ===== */
.store-badges a{display:inline-flex;align-items:center;gap:.55rem;padding:.65rem .9rem;border-radius:14px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.10);transition:transform .25s ease,box-shadow .25s ease;text-decoration:none;color:#fff}
.store-badges a:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(118,75,162,.30)}

/* ===== SWITCH / TABS ===== */
.switch-wrap{display:flex;gap:.5rem;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);padding:.4rem;border-radius:9999px;justify-content:center}
.switch-btn{padding:.55rem 1rem;border-radius:9999px;cursor:pointer;font-weight:800;opacity:.75;transition:all .2s ease;background:none;border:none;color:#fff;font-family:inherit;font-size:inherit}
.switch-btn.active{background:linear-gradient(135deg,var(--blue-d),var(--purple));color:#fff;opacity:1;box-shadow:0 10px 26px rgba(118,75,162,.36)}
.tab-panel{display:none;animation:fade .28s ease}
.tab-panel.active{display:block}
@keyframes fade{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.tab-icon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
@media (max-width:480px){.tab-icon-grid{grid-template-columns:repeat(2,1fr)}}
.tab-icon-card{text-align:center;padding:.85rem .5rem;border-radius:14px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);transition:transform .25s ease,background .25s ease,box-shadow .22s ease;cursor:default}
.tab-icon-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.16);box-shadow:0 14px 34px rgba(102,126,234,.22)}
.tab-icon-card .ti-icon{font-size:1.55rem;display:block;margin-bottom:.3rem}
.tab-icon-card .ti-title{font-weight:700;font-size:.83rem;letter-spacing:-.01em}
.tab-icon-card .ti-desc{font-size:.71rem;opacity:.70;margin-top:.18rem}

/* ===== STARS / TESTIMONIALS ===== */
.stars{letter-spacing:2px;font-size:.95rem;margin-bottom:.45rem;color:#FFD700;text-shadow:0 0 8px rgba(255,215,0,.4)}
.testimonial-card{border-left:3px solid rgba(102,126,234,.58)!important}
.testimonial-avatar{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:800;color:#fff;letter-spacing:.04em;
  box-shadow:0 4px 12px rgba(102,126,234,.32),0 0 0 2px rgba(255,255,255,.14);
}

/* ===== MODAL ===== */
.modal{position:fixed;inset:0;background:rgba(49,29,94,.66);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;z-index:100}
.modal.open{display:flex}
.modal-card{width:min(640px,92vw);border-radius:20px;padding:20px;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.18);box-shadow:var(--shadow-strong)}
.modal-card h3{font-size:1.4rem;font-weight:800;margin-bottom:.6rem}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-grid .full{grid-column:1/-1}
.modal input,.modal textarea{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:12px;color:#fff;padding:.7rem .9rem}
.modal textarea{min-height:120px;resize:vertical}
.modal-actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:10px}

/* ===== BACK TO TOP ===== */
.back-to-top{position:fixed;bottom:28px;right:28px;width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--lilac),var(--blue));color:#fff;border:none;cursor:pointer;opacity:0;visibility:hidden;font-size:20px;transition:all .3s ease;z-index:80;box-shadow:0 10px 28px rgba(118,75,162,.36)}
.back-to-top.show{opacity:1;visibility:visible;animation:btPulse 2.4s ease-in-out infinite}
@keyframes btPulse{
  0%,100%{box-shadow:0 10px 28px rgba(118,75,162,.36),0 0 0 0 rgba(102,126,234,.38)}
  50%{box-shadow:0 10px 28px rgba(118,75,162,.36),0 0 0 10px rgba(102,126,234,0)}
}
@media (prefers-reduced-motion:reduce){.back-to-top.show{animation:none}}
@media(max-width:640px){.back-to-top{bottom:28px;right:16px;width:46px;height:46px;font-size:18px}}

/* ===== MOBILE MENU ===== */
.mobile-menu{position:fixed;top:0;left:0;width:100%;height:100vh;background:rgba(49,29,94,.96);backdrop-filter:blur(16px);transform:translateY(-120%);transition:transform .35s cubic-bezier(.22,.61,.36,1);z-index:75}
.mobile-menu.open{transform:translateY(0)}
.close-btn{position:absolute;top:14px;left:14px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:12px;color:#fff;font-size:1.5rem;cursor:pointer;line-height:1;z-index:5;backdrop-filter:blur(8px);transition:background .2s ease}
.close-btn:hover,.close-btn:active{background:rgba(255,255,255,.16)}

/* ===== REVEAL ANIMATIONS ===== */
.reveal,.reveal-left,.reveal-right{opacity:0;will-change:opacity,transform}
.reveal{transform:translateY(24px);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
.reveal.show{opacity:1;transform:translateY(0)}
.reveal-left{transform:translateX(-24px);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
.reveal-right{transform:translateX(24px);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
.show-left,.show-right{opacity:1;transform:translateX(0)}
@media (prefers-reduced-motion:reduce){.reveal,.reveal-left,.reveal-right{opacity:1;transform:none!important;transition:none!important}}

/* ===== MARQUEE ===== */
.marquee{
  display:flex;overflow:hidden;position:relative;
  border-radius:18px;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee__track{
  display:flex;align-items:center;gap:var(--rail-gap);
  flex:0 0 auto;white-space:nowrap;
  padding:var(--rail-pad);
  animation:scroll var(--rail-speed) linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.logo-chip{display:flex;align-items:center;justify-content:center;flex:0 0 auto;height:var(--rail-h);padding:10px 14px;border-radius:9999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.logo-chip img{height:40px;object-fit:contain;filter:invert(1) brightness(1.35);opacity:.98}

/* ===== LOGO RAIL ===== */
.logo-rail{overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logo-track{display:flex;gap:38px;align-items:center;white-space:nowrap;animation:logoMarquee 30s linear infinite;padding:18px 22px}
.logo-track:hover{animation-play-state:paused}
@keyframes logoMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.logo-track{animation:none}}
.logo-item{display:flex;align-items:center;justify-content:center;flex:0 0 auto;height:72px;padding:10px 14px;border-radius:9999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.logo-item img{height:44px;object-fit:contain;filter:invert(1) brightness(1.35);opacity:.98}

/* ===== SPORTS TICKER ===== */
.ticker-rail{overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;gap:22px;align-items:center;white-space:nowrap;animation:ticker 32s linear infinite;padding:14px 16px}
.ticker-track:hover{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick{display:inline-flex;align-items:center;gap:8px;padding:.4rem .85rem;border-radius:9999px;font-weight:700;font-size:.9rem;color:rgba(255,255,255,.92);background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28)}

/* ===== RENDERING BOOST ===== */
@supports (content-visibility:auto){
  .cv{content-visibility:auto;contain-intrinsic-size:auto 800px}
}

/* ===== GLOW ANIMATIONS (from Pitch) ===== */
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(102,126,234,.0),0 4px 20px rgba(0,0,0,.28)}45%{box-shadow:0 0 28px 5px rgba(102,126,234,.52),0 0 52px 8px rgba(102,126,234,.18),0 4px 20px rgba(0,0,0,.28)}}
@keyframes glowPulseGreen{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.0),0 4px 20px rgba(0,0,0,.28)}45%{box-shadow:0 0 28px 5px rgba(52,211,153,.52),0 0 52px 8px rgba(52,211,153,.18),0 4px 20px rgba(0,0,0,.28)}}
@keyframes glowPulseGold{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.0),0 4px 20px rgba(0,0,0,.28)}45%{box-shadow:0 0 28px 5px rgba(245,158,11,.52),0 0 52px 8px rgba(251,146,60,.18),0 4px 20px rgba(0,0,0,.28)}}
@keyframes slideIn{from{opacity:0;transform:translateX(56px) scale(.96)}to{opacity:1;transform:none}}
@keyframes dropIn{from{opacity:0;transform:translateY(-38px) scale(.96)}to{opacity:1;transform:none}}
@keyframes lineDraw{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes ctaGlow{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes phoneGlow{0%,100%{box-shadow:0 0 60px rgba(102,126,234,.5),0 0 120px rgba(143,211,255,.2)}50%{box-shadow:0 0 90px rgba(102,126,234,.65),0 0 180px rgba(143,211,255,.3)}}

/* ===== HERO GRADIENT ===== */
.hero-gradient{
  position:relative;width:100%;overflow:hidden;
  background:
    radial-gradient(980px 560px at 8% 8%, rgba(255,255,255,.15), transparent 62%),
    radial-gradient(720px 440px at 90% 12%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg,#667EEA 0%, #764BA2 100%);
}

/* ===== SECTION ACCENT BORDERS ===== */
#services .reveal-left,#communaute .reveal-left{border-left:3px solid rgba(102,126,234,.40);padding-left:1rem}
#services .reveal-left h2,#communaute .reveal-left h2{hyphens:none}

/* ===== TOUCH DEVICES ===== */
@media (hover:none),(pointer:coarse){
  .feat-card:hover,.fc:hover,.tab-icon-card:hover,.store-badges a:hover,
  .btn-primary:hover,.btn-secondary:hover,.btn-outline:hover{transform:none}
}
@media (max-width:640px){
  .marquee,.ticker-rail{border-radius:12px}
}

/* ===== CONTACT ONBOARDING RESPONSIVE ===== */
@media (max-width:768px){
  .contact-grid{grid-template-columns:1fr!important}
  .onboarding-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:480px){
  .onboarding-grid{grid-template-columns:1fr!important}
}

/* ===== CAROUSEL ===== */
.carousel{position:relative}
.carousel-viewport{border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);overflow:hidden}
.carousel-track{display:flex;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.carousel-slide{flex:0 0 100%;padding:8px}
.slide-frame{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.slide-frame img{width:100%;display:block}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);color:#fff;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);transition:background .2s ease,transform .2s ease}
.carousel-btn:hover{background:rgba(255,255,255,.22);transform:translateY(-50%) scale(1.06)}
.carousel-prev{left:12px}
.carousel-next{right:12px}
.carousel-dots{display:flex;justify-content:center;gap:7px}
.carousel-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.30);border:none;cursor:pointer;transition:all .3s ease;padding:0}
.carousel-dot[aria-current="true"],.carousel-dot.active{background:linear-gradient(135deg,var(--blue),var(--purple));transform:scale(1.15)}

/* ===== MOBILE: 3-Phone layouts + centering fixes ===== */
@media (max-width:640px){
  /* Hero 3-phone stagger: make smaller, less overlap */
  .phone-shell{border-radius:24px!important}
  [style*="rotate(-6deg)"]{transform:rotate(-4deg) translateY(16px)!important;margin-right:-24px!important}
  [style*="rotate(6deg)"]{transform:rotate(4deg) translateY(16px)!important;margin-left:-24px!important}
  [style*="margin-top:-24px"]{margin-top:-12px!important}
  [style*="margin-top:-20px"]{margin-top:-10px!important}

  /* Phone sizes: cap all at small sizes on mobile */
  .phone-shell{max-width:100px!important;width:100px!important}
  [style*="z-index:3"] .phone-shell{max-width:120px!important;width:120px!important}

  /* Hide glow blobs on mobile (performance + overflow) */
  [style*="filter:blur(30px)"],
  [style*="filter:blur(26px)"],
  [style*="filter:blur(28px)"]{display:none!important}

  /* Center all text */
  .tc,.text-center,.lead,.sub,.kicker,.stitle,.big,.ctitle{text-align:center!important}
  .lead{margin-left:auto!important;margin-right:auto!important}

  /* Sticky phones → static on mobile */
  [style*="position:sticky"]{position:static!important}

  /* Contact grid: single column */
  .contact-grid{grid-template-columns:1fr!important}
  .contact-grid [id*="phone-carousel"]{margin-top:24px!important;margin-right:0!important}

  /* Onboarding steps: 1 column */
  .onboarding-grid,.pt-onboarding-grid{grid-template-columns:1fr!important}
  .onboarding-grid [style*="position:absolute"][style*="height:2px"],
  .pt-onboarding-grid [style*="position:absolute"][style*="height:2px"]{display:none!important}

  /* App screenshots grid: 2 columns */
  .app-screens-grid{grid-template-columns:repeat(2,1fr)!important}
  .app-screens-grid [style*="margin-bottom:22px"]{margin-bottom:0!important}

  /* Workflow steps grid */
  .wf-grid{grid-template-columns:1fr!important}

  /* Pills wrap */
  .pill{font-size:.62rem;padding:.22rem .55rem}

  /* Big title smaller */
  .big{font-size:clamp(32px,8vw,50px)!important}
  .stitle{font-size:clamp(22px,6vw,32px)!important}
}