/* FanPearl landing — replica of CEO mockups (09-27) */
:root{
  --bg:#fdfdfe; --hero-bg:#f2f3fd; --ink:#0b0c16; --ink2:#2a2f5e; --muted:#4f5a7d; --muted2:#6b7393;
  --navy1:#0e1831; --navy2:#2c3c60; --card:#ffffff; --line:#e9ecf6; --tile1:#f6effe; --tile2:#eaf0fb;
  --panel1:#eef2fd; --panel2:#f8f7fe; --panel3:#f2f5fe; --icon:#0a1a63;
  --g-word:linear-gradient(90deg,#9a8ef3 0%,#8f86fb 45%,#7792fc 100%);
  --g-love:linear-gradient(90deg,#6672fb 0%,#8d71f8 45%,#943dfa 100%);
  --g-conn:linear-gradient(90deg,#8ba7fa 0%,#7d8ffa 35%,#a17cfb 70%,#c68ef9 100%);
  --g-join:linear-gradient(90deg,#b787fc 0%,#8f76f8 45%,#729dfd 100%);
  --shadow-pill:0 6px 18px rgba(80,90,160,.14),0 1px 2px rgba(80,90,160,.08);
  --script:'Nothing You Could Do',cursive;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0a1029; --hero-bg:#0d1433; --ink:#f4f5ff; --ink2:#d7dbf5; --muted:#aab2d6; --muted2:#8f98c2;
  --navy1:#f4f5ff; --navy2:#dfe3fb; --card:#141c42; --line:#232c57; --tile1:#231f55; --tile2:#1a2552;
  --panel1:#121a40; --panel2:#171f4a; --panel3:#131b43; --icon:#c9cffc;
  --g-word:linear-gradient(90deg,#b3a9ff 0%,#a79dff 45%,#8fa6ff 100%);
  --shadow-pill:0 6px 18px rgba(0,0,0,.35);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0a1029; --hero-bg:#0d1433; --ink:#f4f5ff; --ink2:#d7dbf5; --muted:#aab2d6; --muted2:#8f98c2;
    --navy1:#f4f5ff; --navy2:#dfe3fb; --card:#141c42; --line:#232c57; --tile1:#231f55; --tile2:#1a2552;
    --panel1:#121a40; --panel2:#171f4a; --panel3:#131b43; --icon:#c9cffc;
    --g-word:linear-gradient(90deg,#b3a9ff 0%,#a79dff 45%,#8fa6ff 100%);
    --shadow-pill:0 6px 18px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1304px;margin:0 auto;padding:0 32px}
.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gw{background:var(--g-word);-webkit-background-clip:text;background-clip:text;color:transparent}
.gl{background:var(--g-love);-webkit-background-clip:text;background-clip:text;color:transparent}
.gc{background:var(--g-conn);-webkit-background-clip:text;background-clip:text;color:transparent}
.script{font-family:var(--script);color:#2c3772;font-weight:400;line-height:1.05;white-space:nowrap}
:root[data-theme="dark"] .script{color:#cdd3ff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .script{color:#cdd3ff}}
.caps{letter-spacing:.34em;text-transform:uppercase;font-size:11px;font-weight:500;color:var(--muted2)}

/* buttons */
.btn-navy{display:inline-flex;align-items:center;justify-content:center;gap:26px;height:43px;padding:0 24px 0 40px;border-radius:999px;
  background:linear-gradient(90deg,#0e1831 0%,#16223f 55%,#2c3c60 100%);color:#fff;font-size:15px;font-weight:500;letter-spacing:-.005em;
  box-shadow:0 8px 20px rgba(14,24,49,.22)}
.btn-navy svg{width:20px;height:20px}
:root[data-theme="dark"] .btn-navy{background:linear-gradient(90deg,#b787fc,#8f76f8 50%,#729dfd);box-shadow:0 8px 24px rgba(120,110,250,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-navy{background:linear-gradient(90deg,#b787fc,#8f76f8 50%,#729dfd);box-shadow:0 8px 24px rgba(120,110,250,.35)}}
.pill-white{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 21px;border-radius:999px;background:#fff;color:#0d1330;
  font-size:13.5px;font-weight:500;box-shadow:var(--shadow-pill)}
.pill-join{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 22px;border-radius:999px;background:var(--g-join);color:#fff;
  font-size:13px;font-weight:500;box-shadow:0 6px 18px rgba(140,120,250,.35)}

/* header */
header.site{position:absolute;top:0;left:0;right:0;z-index:20}
.nav{height:72px;display:flex;align-items:center;max-width:1304px;margin:0 auto;padding:0 32px}
.brand{display:flex;align-items:center}
.brand img{height:42px;width:auto}
.nav>.brand{margin-left:-4px}
.dark-logo{display:none}
:root[data-theme="dark"] .light-logo{display:none} :root[data-theme="dark"] .dark-logo{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .light-logo{display:none} :root:not([data-theme="light"]) .dark-logo{display:block}}
.navlinks{display:flex;gap:39px;margin-left:92px;font-size:12px;color:var(--ink2);font-weight:400}
.navlinks a:hover{color:#6f63f0}
.navactions{margin-left:auto;display:flex;align-items:center;gap:13px}
.navsearch{width:36px;height:36px;display:grid;place-items:center;color:#10163a;margin-right:16px}
.navsearch svg{width:17px;height:17px;stroke-width:2}
.navburger{display:none;background:none;border:0;color:var(--ink);width:40px;height:40px;place-items:center;cursor:pointer}
.mobilemenu{display:none}

/* hero */
.hero{position:relative;height:495px;background:
  radial-gradient(60% 80% at 0% 100%,#e6ecfd 0%,rgba(230,236,253,0) 70%),
  radial-gradient(50% 70% at 20% 0%,#f0f2fe 0%,rgba(240,242,254,0) 70%),
  linear-gradient(180deg,#f4f4fd 0%,#f5f5fd 60%,#eef1fd 100%);overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(180deg,rgba(253,253,254,0),var(--bg));pointer-events:none;z-index:2}
:root[data-theme="dark"] .hero{background:radial-gradient(60% 80% at 0% 100%,#1a2156 0%,rgba(26,33,86,0) 70%),linear-gradient(180deg,#0d1433,#0f1740)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero{background:radial-gradient(60% 80% at 0% 100%,#1a2156 0%,rgba(26,33,86,0) 70%),linear-gradient(180deg,#0d1433,#0f1740)}}
.hero-inner{position:relative;max-width:1536px;height:100%;margin:0 auto}
.hero-copy{position:absolute;left:max(32px,calc((100% - 1240px) / 2));top:109px;width:600px;z-index:3}
.hero-copy .caps{font-size:11px;letter-spacing:.335em;color:#5c688f}
.hero h1{margin-top:15px;font-size:57.5px;line-height:58px;font-weight:800;letter-spacing:-.037em;color:var(--ink);white-space:nowrap}
.hero .lead{margin-top:14px;font-size:16.5px;line-height:25px;color:var(--muted);max-width:565px;font-weight:400}
.hero .btn-navy{margin-top:19px;min-width:209px;white-space:nowrap}
.btn-navy,.pill-white,.pill-join{white-space:nowrap}
html[lang="fr"] .hero h1{font-size:50px;line-height:52px;letter-spacing:-.035em}
html[lang="fr"] .hero .lead{margin-top:16px}
.fanrow{margin-top:26px;display:flex;align-items:center;gap:13px}
.fanrow img{height:43px;width:auto}
.fanrow span{font-size:12px;line-height:16px;color:var(--muted);max-width:132px}
/* overlays */
.ov{position:absolute;z-index:4}
.chatcard{left:7.3%;top:106px;width:180px;padding:12px 12px 12px 12px;background:rgba(255,255,255,.93);border-radius:14px;display:flex;gap:9px;
  box-shadow:0 10px 26px rgba(90,90,150,.14);backdrop-filter:blur(10px)}
.chatcard img{width:32px;height:32px;border-radius:50%;flex:none}
.chatcard small{display:block;font-size:9.5px;color:#9aa1bb;margin-bottom:2px;white-space:nowrap}
.chatcard p{font-size:11.5px;line-height:15px;color:#1a1f3d}
.bub{background:rgba(255,255,255,.9);box-shadow:0 10px 24px rgba(90,90,150,.16);backdrop-filter:blur(10px)}
.bheart{left:12.1%;top:197px;width:52px;height:50px;border-radius:15px;display:grid;place-items:center}
.bheart svg{width:22px;height:22px}
.bdots{left:6.4%;top:286px;width:100px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:9px}
.bdots::after{content:"";position:absolute;left:24px;bottom:-9px;width:16px;height:16px;background:inherit;transform:rotate(45deg);border-radius:0 0 4px 0;box-shadow:4px 4px 8px rgba(90,90,150,.08)}
.bdots i{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c5d0ff,#6f86f5);display:block}
.sendbar{left:6.4%;top:361px;width:412px;height:56px;border-radius:30px;transform:rotate(-5.4deg);transform-origin:left center;
  background:linear-gradient(90deg,rgba(255,255,255,.88),rgba(255,255,255,.72) 60%,rgba(255,255,255,.82));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 12px 30px rgba(90,90,150,.16);display:flex;align-items:center;padding:0 8px 0 12px;gap:14px;
  color:#8088a7;font-size:12.5px}
.sendbar img{width:32px;height:32px;border-radius:50%}
.sendbar .go{margin-left:auto;width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;color:#6d7df4;box-shadow:0 3px 10px rgba(90,90,150,.15)}
.sendbar .go svg{width:16px;height:16px;stroke-width:2.2}
.hscript{left:72.2%;top:118px;font-size:25px;line-height:1.3;transform-origin:left top}
.hscript span{display:block}
.script span{display:block;transform:rotate(-17deg);transform-origin:left center}
.hscript span:nth-child(2){margin-left:3px}.hscript span:nth-child(3){margin-left:20px}.hscript span:nth-child(4){margin-left:12px}
.hcaps{left:81.6%;top:418px;font-size:11.5px;white-space:nowrap;line-height:19px;letter-spacing:.33em;text-transform:uppercase;color:#2c3772;transform:rotate(-10deg);transform-origin:left top;font-weight:500}

/* dark-mode specifics */
:root[data-theme="dark"] .hscript{color:#2c3772}
:root[data-theme="dark"] .pcard{box-shadow:0 10px 30px rgba(0,0,0,.4)}
:root[data-theme="dark"] .band{box-shadow:0 0 0 1px rgba(255,255,255,.06)}
@media (prefers-color-scheme:dark){

:root:not([data-theme="light"]) .hscript{color:#2c3772}
:root:not([data-theme="light"]) .pcard{box-shadow:0 10px 30px rgba(0,0,0,.4)}
:root:not([data-theme="light"]) .band{box-shadow:0 0 0 1px rgba(255,255,255,.06)}
}
/* feature strip */
.strip{background:var(--bg)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding-top:64px;padding-bottom:64px}
.feat{display:flex;gap:22px;padding:0 0 0 0;position:relative}
.feat+.feat{padding-left:32px}
.feat+.feat::before{content:"";position:absolute;left:0;top:4px;bottom:-2px;width:1px;background:var(--line)}
.tile{width:59px;height:59px;border-radius:16px;flex:none;display:grid;place-items:center;color:var(--icon);
  background:linear-gradient(135deg,var(--tile1),var(--tile2));box-shadow:0 8px 20px rgba(150,140,230,.12),inset 0 0 0 1px rgba(255,255,255,.6)}
.tile svg{width:42px;height:42px;stroke-width:1.6}
.feat h3{font-size:16px;font-weight:600;letter-spacing:-.01em;margin-top:4px;color:var(--ink)}
.feat p{font-size:15px;line-height:22px;color:var(--muted);margin-top:5px;padding-right:12px}

/* fans panel */
.fans{padding:32px 32px 0}
.fans .panel{position:relative;max-width:1240px;margin:0 auto;height:288px;border-radius:22px;overflow:hidden;
  background:url(/img/landing/r/fans-panel.webp) left top/cover no-repeat,linear-gradient(90deg,var(--panel1) 0%,var(--panel2) 45%,var(--panel3) 100%)}
.fans .collage{display:none}
.fans .collage{position:absolute;left:26px;top:3px;width:563px;height:282px}
.fans .collage img{width:100%;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(0deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(0deg,transparent,#000 7%,#000 93%,transparent);mask-composite:intersect}
.fans .txt{position:absolute;left:630px;top:22px}
.fans .txt .caps{font-size:10.5px;line-height:14px;letter-spacing:.34em;color:#5c688f;margin:0;max-width:none}
.fans h2{margin-top:9px;font-size:35.2px;line-height:39px;font-weight:800;letter-spacing:-.035em;color:var(--ink)}
.fans .txt p{margin-top:10px;font-size:16px;line-height:23px;color:var(--muted);max-width:385px}
.fans .btn-navy{margin-top:18px;width:216px;padding:0 24px 0 36px;gap:28px}
.fscript{position:absolute;right:30px;top:204px;width:180px;font-size:21px;line-height:1.2;transform-origin:left top}
.fscript span{display:block}.fscript span:nth-child(2){margin-left:10px}.fscript span:nth-child(3){margin-left:20px}
.orb-corner{display:none;position:absolute;right:-60px;bottom:-60px;width:260px;height:260px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(220,215,255,.35) 45%,rgba(180,200,255,.15) 70%,transparent 72%);
  box-shadow:inset 8px 8px 30px rgba(255,255,255,.7),inset -10px -10px 40px rgba(170,150,255,.25)}

/* connection section (mockup 2) */
.conn{padding:128px 0 0}
.conn .wrap{display:grid;grid-template-columns:1fr 590px;gap:40px;align-items:start}
.conn h2{font-size:54px;line-height:56px;font-weight:800;letter-spacing:-.035em;color:var(--ink)}
.conn .lead{margin-top:30px;font-size:17px;line-height:27px;color:var(--muted2);max-width:520px}
.grid4{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fcard{background:var(--card);border-radius:18px;padding:26px 28px 24px;min-height:140px;border:1px solid rgba(235,237,248,.9);
  box-shadow:0 10px 30px rgba(120,120,190,.07)}
:root[data-theme="dark"] .fcard{border-color:var(--line)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fcard{border-color:var(--line)}}
.fcard svg{width:36px;height:36px;color:#6d82f6;stroke-width:1.6}
.fcard p{margin-top:14px;font-size:16px;line-height:23px;font-weight:500;color:#2a2f5e}
:root[data-theme="dark"] .fcard p{color:var(--ink2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fcard p{color:var(--ink2)}}

.people{padding:72px 0 0}
.people .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pcard{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:136/134;background:#222;box-shadow:0 10px 26px rgba(40,40,90,.14)}
.pcard img{width:100%;height:100%;object-fit:cover}
.pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,25,0) 45%,rgba(10,12,25,.72) 100%)}
.pcard .cat{position:absolute;left:18px;bottom:20px;z-index:2;color:#fff;font-size:14px;font-weight:500;letter-spacing:-.01em}
.pcard .plus{position:absolute;right:16px;bottom:13px;z-index:2;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);
  background:rgba(20,22,40,.55);display:grid;place-items:center;color:#fff}
.pcard .plus svg{width:18px;height:18px;stroke-width:2}

.ctaband{padding:96px 0 0}
.band{position:relative;overflow:hidden;border-radius:22px;height:142px;display:flex;align-items:center;padding:0 56px;
  background:radial-gradient(38% 150% at 90% 50%,rgba(214,204,255,.95) 0%,rgba(150,140,215,.65) 35%,rgba(80,78,130,0) 75%),linear-gradient(90deg,#0f121b 0%,#191c2e 38%,#34374f 62%,#4e5170 80%,#6d6c93 100%)}
.band h2{font-size:34px;font-weight:700;letter-spacing:-.025em;color:#fff}
.band p{margin-top:6px;font-size:17px;color:#e6e8f3}
.band .pill-white{position:relative;z-index:2;margin-left:auto;margin-right:250px;height:56px;padding:0 30px;font-size:15px;gap:16px;background:linear-gradient(90deg,#fff,#eef0fb)}
.band .pill-white svg{width:18px;height:18px}
.band .orb{position:absolute;right:-34px;top:50%;width:150px;height:150px;transform:translateY(-50%)}

.faq{padding:112px 0 0}
.faq h2{font-size:34px;font-weight:800;letter-spacing:-.03em;margin-bottom:28px}
.faqlist{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;align-items:start}
.faq details{border-top:1px solid var(--line);padding:22px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:16.5px;line-height:24px;color:var(--ink);list-style:none;min-height:28px}
.faq summary::-webkit-details-marker{display:none}
.faq details p{margin-top:10px;color:var(--muted);font-size:15.5px;line-height:24px}

footer.site{padding:112px 0 32px}
footer.site .wrap{border-top:0}
.footgrid{border-top:1px solid var(--line);padding-top:26px}
.footgrid{display:flex;align-items:center;gap:40px}
.footgrid .brand img{height:32px}
.footlinks{display:flex;flex-wrap:wrap;gap:12px 38px;margin-left:120px;font-size:14px;color:var(--ink2)}
.footright{margin-left:auto;display:flex;align-items:center;gap:14px}
.langsw{display:flex;gap:4px;font-size:13px}
.langsw a{padding:4px 8px;border-radius:8px;color:var(--muted)}
.langsw a.on{background:var(--tile2);color:var(--ink);font-weight:600}
.themebtn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.foot18{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;font-size:12.5px;color:var(--muted2)}
.foot18 .legal{display:flex;gap:18px;flex-wrap:wrap}

/* mobile-only blocks hidden on desktop */
.m-only{display:none}
.mbr{display:none}

/* ---------- tablet ---------- */
@media (max-width:1300px){
  .hero h1{font-size:50px;line-height:51px}
  html[lang="fr"] .hero h1{font-size:44px;line-height:46px}
  .fans .txt{left:600px}
  .fscript{right:30px}
}
@media (max-width:1180px){
  .fscript{display:none}
}
@media (max-width:1100px){
  .hero h1{font-size:42px;line-height:44px}
  html[lang="fr"] .hero h1{font-size:38px;line-height:40px}
  .strip .wrap{grid-template-columns:1fr 1fr;row-gap:32px}
  .faqlist{grid-template-columns:1fr}
  .feat:nth-child(3){padding-left:0}.feat:nth-child(3)::before{display:none}
  .fans .panel{height:auto;padding:24px;display:flex;align-items:center;gap:28px}
  .fans .collage,.fans .txt{position:relative;left:auto;top:auto}
  .fans .panel{background:linear-gradient(90deg,var(--panel1),var(--panel2) 45%,var(--panel3))}
  .fans .collage{display:block;flex:0 0 48%;width:48%;height:auto;aspect-ratio:563/282}
  .fans h2{font-size:30px;line-height:33px}
  .conn .wrap{grid-template-columns:1fr}
  .band .pill-white{margin-right:120px}
  .navlinks{margin-left:48px}
}
@media (max-width:899px){
  .navlinks,.navactions .pill-white,.navactions .pill-join,.navsearch{display:none}
  .navburger{display:grid}
  .hero{height:auto}
  .hero-inner{display:flex;flex-direction:column}
  .hero-copy{position:relative;left:auto;top:auto;width:auto;padding:104px 32px 24px}
  .mobilemenu.on{display:flex;flex-direction:column;gap:6px;position:fixed;inset:64px 0 0;background:var(--bg);padding:20px 24px;z-index:30}
  .mobilemenu a{padding:12px 4px;font-size:17px;font-weight:500;border-bottom:1px solid var(--line)}
  .mobilemenu .actions{display:flex;flex-direction:column;gap:10px;margin-top:14px}
  .mobilemenu .actions a{border:0;height:50px;font-size:15px}
  .footgrid{flex-wrap:wrap}.footlinks{margin-left:0}
}

/* ---------- phone (mockup 2 screens) ---------- */
@media (max-width:600px){
  .d-only{display:none!important}
  .m-only{display:block}
  .nav{height:64px;padding:0 20px}
  .wrap{padding:0 20px}
  .brand img{height:38px}
  .hero{background:linear-gradient(180deg,#f6f5fd 0%,#f3f3fc 100%)}
  :root[data-theme="dark"] .hero{background:linear-gradient(180deg,#0d1433,#101844)}
  .hero-copy{padding:94px 20px 0}
  .hero-copy .caps{font-size:9.5px;letter-spacing:.3em}
  .hero h1{margin-top:14px;font-size:37px;line-height:39px;white-space:nowrap;letter-spacing:-.04em}
  html[lang="fr"] .hero h1{font-size:36px;line-height:38px}
  html[lang="fr"] .mbr{display:inline}
  html[lang="fr"] .hero-copy .caps{letter-spacing:.2em;font-size:9px}
  .hero .lead{margin-top:14px;font-size:15px;line-height:22px;color:var(--muted2)}
  .hero .btn-navy{margin-top:22px;width:100%;height:52px;font-size:16px;gap:14px;padding:0 20px}
  .fanrow{margin-top:18px}
  .fanrow img{height:40px}
  .fanrow span{max-width:none;font-size:13px}
  .mcollage{position:relative;margin:28px 12px 0;padding-bottom:6px}
  .mcollage>img{width:100%;height:auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(0deg,transparent,#000 12%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(0deg,transparent,#000 12%,#000 90%,transparent);mask-composite:intersect}
  .mc-card{position:absolute;background:rgba(255,255,255,.95);border-radius:12px;box-shadow:0 8px 22px rgba(80,80,140,.16);display:flex;gap:7px;padding:8px 10px}
  .mc-card img{width:22px;height:22px;border-radius:50%;flex:none}
  .mc-card small{display:block;font-size:9px;color:#9aa1bb}
  .mc-card p{font-size:10.5px;line-height:13px;color:#1a1f3d}
  .mc-a{left:4%;top:59%;width:46%;transform:rotate(7deg)}
  .mc-b{right:3%;top:78%;width:40%}
  .scrollhint{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:2px;padding-bottom:26px;font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:#4d5578}
  .scrollhint svg{width:16px;height:16px}
  .strip,.fans,.people,.band-d{display:none}
  .conn{padding:64px 0 0}
  .conn .wrap{padding:0 20px;gap:32px}
  .conn h2{font-size:32px;line-height:33px}
  .conn .lead{margin-top:20px;font-size:16px;line-height:25px}
  .grid4{gap:12px}
  .fcard{padding:20px 18px 18px;min-height:112px;border-radius:14px}
  .fcard svg{width:30px;height:30px}
  .fcard p{margin-top:10px;font-size:13.5px;line-height:19px}
  .ctaband{padding:72px 0 0}
  .ctaband .wrap{padding:0 20px}
  .mcard{position:relative;overflow:hidden;border-radius:18px;padding:30px 24px 30px;min-height:260px;
    background:radial-gradient(60% 70% at 95% 55%,rgba(214,204,255,.9) 0%,rgba(140,130,205,.55) 40%,rgba(80,78,130,0) 80%),linear-gradient(110deg,#11131f 0%,#22253b 45%,#44476a 80%,#5e5f88 100%)}
  .mcard h2{font-size:30px;line-height:32px;font-weight:700;letter-spacing:-.025em;color:#fff;max-width:230px}
  .mcard p{margin-top:16px;font-size:15px;line-height:23px;color:#e6e8f3}
  .mcard .pill-white{margin-top:22px;height:48px;padding:0 24px;gap:14px;font-size:15px}
  .mcard .pill-white svg{width:17px;height:17px}
  .mcard .orb{position:absolute;right:-38px;top:50%;transform:translateY(-50%);width:150px;height:150px}
  .mcard h2,.mcard p,.mcard .pill-white{position:relative;z-index:2}
  .safe{display:block;padding:72px 20px 0}
  .safe h2{font-size:30px;line-height:33px;font-weight:700;letter-spacing:-.03em}
  .safe ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;margin-top:28px}
  .safe li{display:flex;align-items:center;gap:10px;font-size:14px;line-height:19px;color:var(--ink2)}
  .safe li svg{width:24px;height:24px;flex:none;color:var(--ink)}
  .safe .btn-navy{margin-top:36px;width:100%;height:56px;font-size:16px;gap:14px;padding:0 20px}
  .faq{padding:80px 0 0}.faq .wrap{padding:0 20px}
  .faq h2{font-size:28px;margin-bottom:16px}
  .faq details{padding:18px 0}
  footer.site{padding-top:72px}
  footer.site .wrap{padding:0 20px}
  .footgrid{border-top:0;padding-top:0}
  .footgrid{gap:18px}
  .footlinks{gap:10px 22px;font-size:13.5px}
  .footright{margin-left:0}
}

/* pearl orb (crop of brand pearl, alpha) */
.orb{pointer-events:none;filter:drop-shadow(0 0 40px rgba(210,196,255,.55));opacity:.96}
/* hovers */
.btn-navy,.pill-white,.pill-join,.pcard,.fcard,.navsearch,.tile{transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
.btn-navy:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(14,24,49,.28)}
.btn-navy:hover svg{transform:translateX(3px)} .btn-navy svg{transition:transform .25s ease}
.pill-white:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(80,90,160,.2)}
.pill-join:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 10px 24px rgba(140,120,250,.45)}
.pcard:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(40,40,90,.2)}
.pcard .plus{transition:background .2s ease}.pcard:hover .plus{background:rgba(120,110,250,.8)}
.fcard:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(120,120,190,.12)}
.feat:hover .tile{transform:translateY(-2px)}
.footlinks a:hover,.foot18 a:hover{color:#6f63f0}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::after{content:"";width:9px;height:9px;border-right:1.8px solid var(--muted2);border-bottom:1.8px solid var(--muted2);transform:rotate(45deg);transition:transform .2s ease;flex:none;margin-right:4px}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq summary:hover{color:#6f63f0}
/* motion: CSS-only, always ends visible, no JS dependency, no opacity:0 start */
@keyframes fpRise{from{transform:translateY(10px)}to{transform:none}}
.hero-copy{animation:fpRise .6s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){
  .hero-copy{animation:none}
  *{transition:none!important;scroll-behavior:auto!important}
}


/* pearl accents (brand pearl, crisp webp) */
.pdot{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:10px;background:url(/img/landing/r/pearl-40.webp) center/contain no-repeat;filter:drop-shadow(0 1px 3px rgba(120,110,230,.35))}
.m-only .pdot{display:inline-block}
.tile{position:relative}
.tile::after{content:"";position:absolute;top:-5px;right:-5px;width:16px;height:16px;background:url(/img/landing/r/pearl-40.webp) center/contain no-repeat;filter:drop-shadow(0 2px 4px rgba(120,110,230,.35))}
.sec-eye{display:block;margin-bottom:18px}
.faq summary::after{width:22px;height:22px;border:0;transform:none;background:url(/img/landing/r/pearl-64.webp) center/contain no-repeat;opacity:.6;filter:saturate(.5);transition:transform .3s ease,opacity .3s ease,filter .3s ease;margin-right:0}
.faq details[open] summary::after{transform:scale(1.18) rotate(180deg);opacity:1;filter:none}
.faq summary:hover::after{opacity:1;filter:none}
.band .spark{position:absolute;border-radius:50%;background:url(/img/landing/r/pearl-40.webp) center/contain no-repeat;pointer-events:none;opacity:.8}
.band .s1{width:20px;height:20px;left:50%;top:18px;opacity:.9}.band .s2{width:9px;height:9px;left:62%;bottom:22px;opacity:.6}.band .s3{width:26px;height:26px;right:175px;bottom:18px;opacity:.95}
:root[data-theme="dark"] .hero::after{height:28px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero::after{height:28px}}
.pcard .cat{max-width:calc(100% - 80px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* hero visual: ONE continuous image (mockup hero, text+overlays inpainted), overlays in image px coords */
.hero-visual{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hcanvas{position:absolute;top:0;left:calc(45% - 690px);width:1536px;height:495px;
  background:url(/img/landing/r/hero-full.webp) 0 0/1536px 495px no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%)}
.hcanvas .ov{pointer-events:none}
.hcanvas .chatcard{left:752px;top:106px}
.hcanvas .bheart{left:793px;top:197px}
.hcanvas .bdots{left:744px;top:286px}
.hcanvas .sendbar{left:744px;top:361px}
.hcanvas .hscript{left:1302px;top:118px}
.hcanvas .hcaps{left:1380px;top:418px}
html[lang="fr"] .hcanvas .hcaps{left:1362px}
.hero-copy{z-index:5}
:root[data-theme="dark"] .hcanvas .ov{z-index:4}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .hcanvas .ov{z-index:4}
}
@media (max-width:1300px){
  .hcanvas{left:calc(100% - 1496px)}
  .hero h1{font-size:46px;line-height:48px}
  html[lang="fr"] .hero h1{font-size:40px;line-height:42px}
  .hero .lead{max-width:440px;font-size:16px;line-height:24px}
  .hero-copy{width:470px}
}
@media (max-width:1240px) and (min-width:601px){
  .hero{height:auto}
  .hero-inner{display:flex;flex-direction:column}
  .hero-copy{position:relative;left:auto;top:auto;width:auto;padding:110px 32px 32px}
  .hero h1{font-size:50px;line-height:52px}
  html[lang="fr"] .hero h1{font-size:46px;line-height:48px}
  .hero .lead{max-width:600px}
  .hero-visual{position:relative;inset:auto;height:495px}
  .hero-visual{margin-top:-110px}
  .hcanvas{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 190px),linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 190px),linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);mask-composite:intersect}
}
@media (max-width:600px){.hero-visual{display:none}.hero-copy{width:auto;position:relative;left:auto;top:auto}.hero .lead{max-width:none;font-size:15px;line-height:22px}html[lang="fr"] .hero h1{font-size:36px;line-height:38px}.hero h1{font-size:37px;line-height:39px}}
/* keep hero right-side text >=32px (+scrollbar buffer) from viewport edge */
.hcanvas .hscript{left:min(1302px,calc(100vw - (45vw - 690px) - 205px))}
.hcanvas .hcaps{left:min(1380px,calc(100vw - (45vw - 690px) - 185px))}
html[lang="fr"] .hcanvas .hcaps{left:min(1362px,calc(100vw - (45vw - 690px) - 195px))}
@media (max-width:1300px){
  .hcanvas .hscript{left:min(1302px,calc(1496px - 205px))}
  .hcanvas .hcaps{left:min(1380px,calc(1496px - 185px))}
  html[lang="fr"] .hcanvas .hcaps{left:calc(1496px - 195px)}
}

/* ---- round 5: hero CTA pair ---- */
.ctarow{display:flex;align-items:center;gap:12px;margin-top:19px}
.hero .ctarow .btn-navy{margin-top:0}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;height:43px;padding:0 26px;border-radius:999px;white-space:nowrap;
  font-size:15px;font-weight:500;color:#0e1831;background:rgba(255,255,255,.6);border:1.5px solid rgba(14,24,49,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .25s ease,border-color .25s ease,background .25s ease}
.btn-ghost:hover{transform:translateY(-1px);border-color:rgba(14,24,49,.35);background:#fff}

/* ---- mobile hero visual (hidden on desktop) ---- */
.mhero{display:none}
.mh-img{width:100%;aspect-ratio:660/485;background:url(/img/landing/r/hero-mobile.webp) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent 0,#000 8%,#000 86%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent 0,#000 8%,#000 86%,transparent);mask-composite:intersect}
.pglow{display:none}

/* ---- dark hero: graded photo with alpha, glassy dark overlays, pearl glow ---- */
:root[data-theme="dark"] .hcanvas{background-image:url(/img/landing/r/hero-full-dark-v2.webp)}
:root[data-theme="dark"] .mh-img{background-image:url(/img/landing/r/hero-mobile-dark.webp)}
:root[data-theme="dark"] .hero{background:radial-gradient(55% 90% at 8% 100%,#1b2260 0%,rgba(27,34,96,0) 70%),#0d1433}
:root[data-theme="dark"] .chatcard,:root[data-theme="dark"] .bub,:root[data-theme="dark"] .sendbar{background:rgba(24,32,78,.62);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:0 14px 34px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08)}
:root[data-theme="dark"] .chatcard p{color:#eef0ff}:root[data-theme="dark"] .chatcard small{color:#a9b0d6}
:root[data-theme="dark"] .sendbar{color:#b9c0e6}
:root[data-theme="dark"] .sendbar .go{background:rgba(255,255,255,.14);color:#dfe3ff;box-shadow:none}
:root[data-theme="dark"] .bdots::after{background:rgba(24,32,78,.62);box-shadow:none}
:root[data-theme="dark"] .hero .script,:root[data-theme="dark"] .hscript,:root[data-theme="dark"] .mh-script{color:#e7e9ff;text-shadow:0 0 18px rgba(170,160,255,.45)}
:root[data-theme="dark"] .hcaps{color:#dfe3ff;text-shadow:0 0 12px rgba(0,0,0,.35)}
:root[data-theme="dark"] .pglow{display:block;position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:screen;z-index:3;
  background:radial-gradient(circle,rgba(200,180,255,.55) 0,rgba(130,150,255,.22) 38%,rgba(120,120,255,0) 68%)}
:root[data-theme="dark"] .hcanvas .pglow{left:1218px;top:208px;width:260px;height:260px}
:root[data-theme="dark"] .btn-ghost{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}
:root[data-theme="dark"] .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}

@media (max-width:600px){
  .mcollage{display:none!important}
  .mhero{display:block;position:relative;margin:26px 0 0}
  .ctarow{flex-direction:column;align-items:stretch;gap:10px;margin-top:22px}
  .hero .ctarow .btn-navy{margin-top:0}
  .btn-ghost{height:50px;font-size:16px;width:100%}
  .fanrow{margin-top:20px}
  .mhero .ov{position:absolute;z-index:4}
  .mhero .chatcard{left:3%;top:1%;width:58%;padding:9px 10px;gap:7px;border-radius:12px;transform:none}
  .mhero .chatcard img{width:24px;height:24px}
  .mhero .chatcard small{font-size:8.5px}
  .mhero .chatcard p{font-size:10.5px;line-height:13px}
  .mhero .bheart{left:6%;top:37%;width:38px;height:36px;border-radius:11px}
  .mhero .bheart svg{width:17px;height:17px}
  .mhero .bdots{left:4%;top:55%;width:70px;height:38px;border-radius:12px;gap:6px}
  .mhero .bdots i{width:9px;height:9px}
  .mhero .bdots::after{left:16px;bottom:-6px;width:11px;height:11px}
  .mhero .sendbar{left:3%;top:73%;width:72%;height:42px;padding:0 5px 0 8px;gap:9px;font-size:11px;transform:rotate(-5deg)}
  .mhero .sendbar img{width:26px;height:26px}
  .mhero .sendbar .go{width:28px;height:28px}
  .mhero .mh-script{right:3%;top:24%;font-size:16px;line-height:1.15;text-align:left}
  .mhero .mh-script span{transform:rotate(-12deg)}
  :root[data-theme="dark"] .mhero .pglow{right:0;top:44%;width:50%;aspect-ratio:1}
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .hcanvas{background-image:url(/img/landing/r/hero-full-dark-v2.webp)}
:root:not([data-theme="light"]) .mh-img{background-image:url(/img/landing/r/hero-mobile-dark.webp)}
:root:not([data-theme="light"]) .hero{background:radial-gradient(55% 90% at 8% 100%,#1b2260 0%,rgba(27,34,96,0) 70%),#0d1433}
:root:not([data-theme="light"]) .chatcard,:root:not([data-theme="light"]) .bub,:root:not([data-theme="light"]) .sendbar{background:rgba(24,32,78,.62);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:0 14px 34px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08)}
:root:not([data-theme="light"]) .chatcard p{color:#eef0ff}:root:not([data-theme="light"]) .chatcard small{color:#a9b0d6}
:root:not([data-theme="light"]) .sendbar{color:#b9c0e6}
:root:not([data-theme="light"]) .sendbar .go{background:rgba(255,255,255,.14);color:#dfe3ff;box-shadow:none}
:root:not([data-theme="light"]) .bdots::after{background:rgba(24,32,78,.62);box-shadow:none}
:root:not([data-theme="light"]) .hero .script,:root:not([data-theme="light"]) .hscript,:root:not([data-theme="light"]) .mh-script{color:#e7e9ff;text-shadow:0 0 18px rgba(170,160,255,.45)}
:root:not([data-theme="light"]) .hcaps{color:#dfe3ff;text-shadow:0 0 12px rgba(0,0,0,.35)}
:root:not([data-theme="light"]) .pglow{display:block;position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:screen;z-index:3;background:radial-gradient(circle,rgba(200,180,255,.55) 0,rgba(130,150,255,.22) 38%,rgba(120,120,255,0) 68%)}
:root:not([data-theme="light"]) .hcanvas .pglow{left:1218px;top:208px;width:260px;height:260px}
:root:not([data-theme="light"]) .btn-ghost{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}
:root:not([data-theme="light"]) .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
}
@media (prefers-color-scheme:dark) and (max-width:600px){
:root:not([data-theme="light"]) .mhero .pglow{right:0;top:44%;width:50%;aspect-ratio:1}
}

/* ---- round 6: dark fans panel ---- */
:root[data-theme="dark"] .fans .panel{background:radial-gradient(60% 90% at 25% 50%,rgba(122,108,255,.22),rgba(122,108,255,0) 70%),linear-gradient(135deg,#1a2257 0%,#141b47 55%,#18205a 100%);border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
:root[data-theme="dark"] .fans .collage{display:block;background:url(/img/landing/r/fans-collage-dark.webp) center/contain no-repeat}
:root[data-theme="dark"] .fans .collage img{display:none}
:root[data-theme="dark"] .fans .txt .caps{color:#a9b0d6}
:root[data-theme="dark"] .fans h2{color:#f4f5ff}
:root[data-theme="dark"] .fans .txt p{color:#c3c9ea}
:root[data-theme="dark"] .fans .script{color:#e7e9ff;text-shadow:0 0 16px rgba(170,160,255,.4)}
:root[data-theme="dark"] .fans .orb-corner{display:none}
@media (prefers-color-scheme:dark){
/* ---- round 6: dark fans panel ---- */
:root:not([data-theme="light"]) .fans .panel{background:radial-gradient(60% 90% at 25% 50%,rgba(122,108,255,.22),rgba(122,108,255,0) 70%),linear-gradient(135deg,#1a2257 0%,#141b47 55%,#18205a 100%);border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
:root:not([data-theme="light"]) .fans .collage{display:block;background:url(/img/landing/r/fans-collage-dark.webp) center/contain no-repeat}
:root:not([data-theme="light"]) .fans .collage img{display:none}
:root:not([data-theme="light"]) .fans .txt .caps{color:#a9b0d6}
:root:not([data-theme="light"]) .fans h2{color:#f4f5ff}
:root:not([data-theme="light"]) .fans .txt p{color:#c3c9ea}
:root:not([data-theme="light"]) .fans .script{color:#e7e9ff;text-shadow:0 0 16px rgba(170,160,255,.4)}
:root:not([data-theme="light"]) .fans .orb-corner{display:none}
}