/* ==================================================
   SISTÈM VARYAB TÈM — sous verite SÈL pou koulè/fon/kontou/lonbraj.
   Chak konpozan (header, dropdown, kat, fòm...) itilize SÈLMAN varyab sa
   yo, JANM yon koulè "hardcode" pou eleman ki dwe adapte ant klè/sonm.
   `--blue-deep`/`--blue-mid`/`--green-deep`/`--charcoal` rete APA EGZATMAN
   (pa nan sistèm klè/sonm lan) : yo se koulè MAK fiks pou gradient
   Hero/CTA/modal, MENM valè nan 2 tèm yo espre (yon deklarasyon vizyèl
   "toujou nwa", pa yon reyaksyon a tèm sit la).
   ================================================== */
:root{
  --text:#0c1220; --bg:#f6f8fb; --surface:#ffffff; --surface-secondary:#f6f8fb;
  --blue-deep:#16295c; --blue-mid:#1e3a8a; --green-deep:#0d3d24; --charcoal:#0c1220;
  --primary:#2563eb; --accent:#16a34a;
  --border:#e2e8f0; --text-secondary:#5b6b8c;
  --shadow-sm:0 2px 8px -4px rgba(15,23,42,.14);
  --shadow-md:0 18px 34px -18px rgba(15,23,42,.28);
  --shadow-lg:0 16px 34px -12px rgba(15,23,42,.28);
  --shadow-card:0 20px 40px -24px rgba(15,23,42,.22);
  --shadow:var(--shadow-lg);
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px;
}
:root[data-theme="dark"]{
  --text:#e7ecf7; --bg:#0a0e18; --surface:#131a2b; --surface-secondary:#0a0e18;
  --primary:#5b93f5; --accent:#34c974;
  --border:#232c42; --text-secondary:#8b96b8;
  --shadow-sm:0 2px 8px -4px rgba(0,0,0,.35);
  --shadow-md:0 18px 34px -18px rgba(0,0,0,.5);
  --shadow-lg:0 16px 34px -12px rgba(0,0,0,.45);
  --shadow-card:0 20px 40px -24px rgba(0,0,0,.4);
  --shadow:var(--shadow-lg);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--text);
  font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; }
svg.ic{ width:1em; height:1em; flex-shrink:0; vertical-align:-0.125em; }
[hidden]{ display:none !important; }
a{ color:inherit; }
/* Reset kontwòl natif navigatè — SÈL kote sa fèt, yon sèl fwa. San sa,
   `appearance` OS la (Safari/iOS sitou) ka kite yon rès chrome natif sou
   `<button>`/`<select>` menm apre `border:none;background:none`, ki fè yo
   parèt tankou bouton/select "natif" olye eleman design sit la. */
button, select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  font-family:inherit; font-size:inherit; margin:0; color:inherit;
}
h1,h2,h3{
  text-wrap:balance; margin:0; font-weight:700; letter-spacing:-.01em;
  font-family:'Fraunces', Georgia, 'Times New Roman', serif;
}
.trial-price{ font-family:'Fraunces', Georgia, serif; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }
@media (max-width:480px){ .wrap{ padding:0 16px; } }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; color:var(--primary);
}
.eyebrow::before{ content:''; width:16px; height:2px; background:var(--primary); border-radius:2px; }
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:14px 24px; border-radius:11px;
  font-weight:700; font-size:14.5px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease; text-decoration:none;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:#fff; color:var(--blue-deep); box-shadow:0 10px 24px -8px rgba(0,0,0,.35); }
.btn-primary:hover{ box-shadow:0 14px 30px -8px rgba(0,0,0,.45); }
.btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.28); }
.btn-ghost:hover{ background:rgba(255,255,255,.16); }
.btn-dark{ background:var(--text); color:var(--surface); }
.btn-dark:hover{ box-shadow:0 10px 24px -8px rgba(12,18,32,.4); }
/* .btn-primary se pou fon gradient/sonm (Hero, CTA final, trial) kote yon pil
   blan pwodwi kontras. Pou menm bouton "primary" sou yon sèksyon fon klè
   (var(--bg)/var(--surface)), itilize .btn-solid: li ranpli ak var(--primary)
   pou l rete vizib nan LE de tèm yo, olye pil blan an ki disparèt sou fon klè. */
.btn-solid{ background:var(--primary); color:#fff; box-shadow:var(--shadow-sm); }
.btn-solid:hover{ background:var(--blue-deep); box-shadow:var(--shadow-md); }
nav{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
nav .wrap{ display:flex; align-items:center; height:68px; gap:40px; flex-wrap:nowrap; }
.brand{
  display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; letter-spacing:-.01em;
  text-decoration:none; color:inherit; flex-shrink:0; margin-right:auto;
}
.brand-mark{ width:30px; height:30px; border-radius:9px; flex-shrink:0; display:block; }
@media (max-width:400px){
  .brand{ gap:7px; font-size:15px; }
  .brand-mark{ width:26px; height:26px; }
}
nav .links{ display:flex; gap:22px; font-size:12.5px; font-weight:600; color:var(--text-secondary); flex-shrink:0; }
nav .links a{ position:relative; padding-bottom:5px; white-space:nowrap; text-decoration:none; transition:color .15s ease; }
nav .links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
nav .links a:hover{ color:var(--primary); }
nav .links a:hover::after{ transform:scaleX(1); }
nav .links a.active{ color:var(--primary); }
nav .links a.active::after{ transform:scaleX(1); }
.nav-more{ position:relative; flex-shrink:0; }
.nav-more-btn{
  display:inline-flex; align-items:center; gap:5px; border:none; background:none; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:600; color:var(--text-secondary); padding:0 0 5px; position:relative;
}
.nav-more-btn::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav-more-btn:hover{ color:var(--primary); }
.nav-more-btn:hover::after{ transform:scaleX(1); }
.nav-more-btn.active{ color:var(--primary); }
.nav-more-btn.active::after{ transform:scaleX(1); }
.nav-more-btn svg{ width:11px; height:11px; transition:transform .15s ease; flex-shrink:0; }
.nav-more-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.nav-more-menu{
  position:absolute; top:calc(100% + 14px); left:0; z-index:30; min-width:190px; max-width:calc(100vw - 32px);
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:8px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:2px;
}
.nav-more-menu a{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; font-size:13px; font-weight:600;
  color:var(--text); text-decoration:none; white-space:nowrap;
}
.nav-more-menu a:hover{ background:var(--bg); color:var(--primary); }
.nav-more-menu a.active{ color:var(--primary); background:var(--bg); }
.nav-more-menu a svg{ width:15px; height:15px; flex-shrink:0; color:var(--primary); }
/* 1180px — MENM valè ke `.wrap{max-width:1180px}` (pi ba), pa yon chif
   deplase o aza : nav la fèt pou rantre nan lajè sa a EGZAKTEMAN, kidonk
   nenpòt ekran PI JENN pase sa a dwe itilize meni mobil la (ki gen plas)
   olye mete nan menas tout kontni desktop la nan mwens espas pase sa l
   bezwen (sa te lakòz eleman kwense/dekale nan yon zòn "entèmedyè", ant
   ansyen 1080px lan ak vrè lajè kontni an bezwen). */
@media (max-width:1180px){
  .nav-more{ width:100%; }
  .nav-more-btn{
    padding:17px 28px; width:100%; box-sizing:border-box; font-size:15.5px; border-bottom:1px solid var(--border);
    justify-content:space-between;
  }
  .nav-more-btn::after{ display:none; }
  .nav-more-menu{
    position:static; box-shadow:none; border:none; border-radius:0; background:var(--bg); padding:4px 0; margin-top:0;
  }
  .nav-more-menu a{ padding:14px 28px 14px 40px; border-radius:0; border-bottom:1px solid var(--border); }
}
/* Zòn dwat nav la (Konekte/Achte/Lang/Tèm/Hamburger) — gwoup apa ak pwòp
   ti espas (24px) pou li rete kontwole, olye eritye gap:40px `nav .wrap`
   la itilize ant brand/lyen/zòn dwat la. 24px (pa 18px) espesyalman ant
   "Se connecter" (tèks senp) ak bouton "Achte" a (pil ranpli) — 2 pwa
   vizyèl diferan ki bezwen plis respire lè yo youn bò kot lòt. */
.nav-actions{ display:flex; align-items:center; gap:24px; flex-shrink:0; }
/* Telefòn etwat (360-480px, egzanp Android antre gam) — 24px ant chak
   aksyon ta depase lajè ekran ki rete a (`Se connecter` deja kache, tèks
   "Achte"/"Kreyòl" deja redwi a ikòn sèlman, gade pi ba). Sere gap la SPESYAL
   isit la olye kite eleman yo kwense/depase, RÈG REYÈL responsive, pa yon
   redwiksyon desktop senp. */
@media (max-width:480px){
  nav .wrap{ gap:16px; }
  .nav-actions{ gap:10px; }
}
.nav-login{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--text-secondary);
  text-decoration:none; white-space:nowrap;
}
.nav-login svg{ width:15px; height:15px; flex-shrink:0; }
.nav-login:hover{ color:var(--primary); }
@media (max-width:480px){ .nav-login{ display:none; } }
.nav-buy-btn{
  display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border-radius:9px;
  background:var(--primary); color:#fff !important; font-size:13px; font-weight:700; text-decoration:none;
  white-space:nowrap; box-shadow:0 6px 16px -6px rgba(37,99,235,.5); transition:transform .15s ease, box-shadow .15s ease;
}
.nav-buy-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -6px rgba(37,99,235,.6); }
.nav-buy-btn svg{ width:15px; height:15px; flex-shrink:0; }
@media (max-width:560px){ .nav-buy-btn .full{ display:none; } }
.nav-account{ position:relative; flex-shrink:0; }
.nav-avatar-btn{ display:flex; align-items:center; padding:0; border:none; background:none; cursor:pointer; }
.nav-avatar{
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--primary), var(--accent)); color:#fff; font-size:12px; font-weight:700;
  letter-spacing:.02em;
}
/* `left:0` (pa `right:0`) : lè yon itilizatè konekte, `.nav-login` kache
   epi `.nav-account` vin PREMYE eleman vizib nan `.nav-actions` (tou pre
   logo a, bò gòch). Yon meni ki "lonje" agoch apati de yon bouton ki deja
   bò gòch ekran an sòti nèt sou ekran etwat (bug reyèl konfime sou Android).
   `left:0` fè l ouvri VÈ DWAT, kote gen plas, kèlkeswa lajè ekran an. */
.nav-account-menu{
  position:absolute; top:calc(100% + 10px); left:0; z-index:30; min-width:220px; max-width:calc(100vw - 32px);
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px; box-shadow:var(--shadow);
}
.nav-account-email{ font-size:12.5px; color:var(--text-secondary); word-break:break-all; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.nav-account-logout{
  width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg);
  color:var(--text); font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
}
.nav-account-logout:hover{ border-color:#dc2626; color:#dc2626; }
.lang-dropdown{ position:relative; flex-shrink:0; }
.lang-dropdown-btn{
  display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border:1px solid var(--border);
  background:var(--bg); border-radius:999px; cursor:pointer; color:var(--text); font:inherit; font-size:12.5px; font-weight:600;
}
.lang-dropdown-btn:hover{ border-color:var(--text-secondary); }
.lang-dropdown-btn:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.lang-dropdown-icon{
  display:flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--accent)); color:#fff; flex-shrink:0;
}
.lang-dropdown-icon svg{ width:11px; height:11px; }
.lang-dropdown-btn svg.chevron{ width:10px; height:10px; color:var(--text-secondary); transition:transform .15s ease; flex-shrink:0; }
.lang-dropdown-btn[aria-expanded="true"] svg.chevron{ transform:rotate(180deg); }
@media (max-width:480px){ .lang-dropdown-label{ display:none; } }
.lang-dropdown-menu{
  position:absolute; top:calc(100% + 10px); right:0; z-index:30; min-width:150px; max-width:calc(100vw - 32px);
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:6px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:2px;
}
.lang-dropdown-menu button{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:8px;
  border:none; background:none; cursor:pointer; font:inherit; font-size:13px; font-weight:600; color:var(--text); text-align:left;
}
.lang-dropdown-menu button:hover{ background:var(--bg); }
.lang-dropdown-menu button[aria-pressed="true"]{ color:var(--primary); }
.lang-dropdown-menu button svg{ width:13px; height:13px; color:var(--primary); flex-shrink:0; visibility:hidden; }
.lang-dropdown-menu button[aria-pressed="true"] svg{ visibility:visible; }
.theme-toggle{
  display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0;
  border:1px solid var(--border); background:var(--bg); border-radius:8px; color:var(--text-secondary); cursor:pointer;
  transition:transform .15s ease, color .15s ease, border-color .15s ease;
}
.theme-toggle:hover{ color:var(--text); border-color:var(--text-secondary); transform:translateY(-1px); }
.theme-toggle:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.theme-toggle svg{ width:16px; height:16px; display:block; flex-shrink:0; }
.theme-toggle .icon-moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }
.theme-toggle-label{ display:none; }
.nav-account-label{ display:none; }
.nav-toggle{
  display:none; background:none; border:none; padding:8px; margin-left:8px;
  cursor:pointer; color:var(--text); flex-shrink:0;
}
.nav-toggle svg{ width:22px; height:22px; display:block; }
body.nav-locked{ overflow:hidden; }
@media (max-width:1180px){
  /* z-index:20, MENM nivo ke `nav` li menm (pa 19 kòm anvan) — meni mobil
     la se yon EKSTANSYON header la, pa yon kouch pi ba pase l. Yo pa janm
     chanje (meni a kòmanse egzakteman kote header la fini, `top:68px`),
     men yon nivo pi ba te ka lakòz konfli vizyèl si yon lòt eleman (egzanp
     yon dropdown ki poko fèmen) rete anlè. */
  nav .links{
    display:none; position:fixed; top:68px; left:0; right:0; z-index:20;
    height:calc(100vh - 68px); flex-direction:column; gap:2px; background:var(--surface); overflow-y:auto;
    padding:18px 0 28px;
  }
  nav .links.nav-open{ display:flex; }
  nav .links a{
    padding:17px 28px; width:100%; box-sizing:border-box; font-size:15.5px;
    border-bottom:1px solid var(--border);
  }
  nav .links a::after{ display:none; }
  nav .links a.active{ background:var(--bg); color:var(--primary); }
  .nav-toggle{ display:flex; }
  /* Kont (avata) rive isit la (deplase pa JS, gade nav.js) lè meni "hamburger"
     lan aktif — li vin yon liy konplè nan meni an, menm estil ke lòt lyen
     yo, olye yon ti bouton wonn izole. Bouton tèm lan pa touche, li rete
     toujou nan bar la (gade .theme-toggle pi wo, san override isit la). */
  .links-account-slot{ position:relative; }
  .links-account-slot .nav-account{ width:100%; }
  .links-account-slot .nav-avatar-btn{
    width:100%; justify-content:flex-start; gap:12px; padding:17px 28px;
    border-bottom:1px solid var(--border); color:var(--text); font-size:15.5px; font-weight:600;
  }
  .links-account-slot .nav-avatar-btn:hover{ background:var(--bg); }
  .links-account-slot .nav-account-label{ display:inline; }
  .links-account-slot .nav-account-menu{ left:28px; right:28px; width:auto; }
}
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(155deg, var(--blue-deep) 0%, var(--blue-mid) 48%, var(--green-deep) 100%);
  padding:76px 0 120px;
}
.hero-blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.35; pointer-events:none; }
.hero-blob-1{ width:420px; height:420px; background:var(--accent); top:-140px; right:-100px; }
.hero-blob-2{ width:340px; height:340px; background:#60a5fa; bottom:-160px; left:-100px; }
.hero .wrap{ position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center; }
@media (max-width:900px){ .hero .wrap{ grid-template-columns:1fr; } }
.hero h1{ font-size:clamp(34px, 4.6vw, 54px); line-height:1.06; margin-bottom:20px; }
.hero h1 em{ font-style:normal; background:linear-gradient(120deg,#bbf7d0,#93c5fd); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead{ font-size:16.5px; color:rgba(255,255,255,.86); max-width:480px; margin-bottom:32px; }
.hero .eyebrow{ color:#bbf7d0; margin-bottom:18px; }
.hero .eyebrow::before{ background:#bbf7d0; }
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
/* 3 fè reyèl ki te sou YON SÈL liy tèks anvan (14 jou gratis / san kat
   kredi / san entènèt) — MENM 3 enfòmasyon yo, prezante kòm 3 badj apa
   pou pi vizib, pa yon nouvo pwomès envante. */
.trust-badges{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.trust-badges li{
  display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  color:rgba(255,255,255,.9); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:999px; padding:7px 13px;
}
.trust-badges svg.ic{ color:#86efac; flex-shrink:0; }

@media (prefers-reduced-motion: no-preference){
  .hero .eyebrow, .hero h1, .hero p.lead, .hero .cta-row, .hero .trust-badges{
    opacity:0; animation:heroRise .7s cubic-bezier(.16,1,.3,1) forwards;
  }
  .hero .eyebrow{ animation-delay:.05s; }
  .hero h1{ animation-delay:.16s; }
  .hero p.lead{ animation-delay:.3s; }
  .hero .cta-row{ animation-delay:.42s; }
  .hero .trust-badges{ animation-delay:.52s; }
  .hero .mock-stage{ opacity:0; animation:heroRiseIn .85s cubic-bezier(.16,1,.3,1) .38s forwards; }
}
@keyframes heroRise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes heroRiseIn{
  from{ opacity:0; transform:translateY(14px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
/* Aparisyon dousman lè w desann (`js/reveal.js` ajoute chan sa yo, gade
   fichye a) — si JS pa chaje, `.reveal` pa janm ajoute, eleman yo rete
   vizib nòmalman (okenn risk paj ki rete "vid"). */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(16px); transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); }
  .reveal-in{ opacity:1; transform:translateY(0); }
}

.mock-stage{ position:relative; }
.mock-window{
  position:relative; z-index:2; width:100%; border-radius:14px; overflow:hidden;
  background:#0f172a; box-shadow:0 30px 60px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  transform:rotate(1.4deg);
}
/* Ba navigatè/lojisyèl anlè kapti ekran an — fè mokup la sanble ak yon
   vrè lojisyèl ki louvri sou yon lòdinatè, pa jis yon imaj ki flote. */
.mock-window-bar{ display:flex; align-items:center; gap:6px; padding:11px 14px; background:#1a2338; }
.mock-window-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.mock-window-dot:nth-child(1){ background:#f56158; }
.mock-window-dot:nth-child(2){ background:#f6bd3b; }
.mock-window-dot:nth-child(3){ background:#3dc84a; }
.mock-window img{ display:block; width:100%; height:auto; }
/* Telefòn ki chevoche kwen anba-gòch laptop la — MENM lojik ke mockup
   referans lan (laptop + mobil ansanm), men ak vrè kapti ekran Accueil
   Android lan (pa yon dezyèm kopi enfidèl/envante). */
.mock-window-phone{
  position:absolute; z-index:4; left:-8%; bottom:-9%; width:34%; max-width:150px;
  border-radius:20px; overflow:hidden; background:#0f172a;
  box-shadow:0 20px 40px -14px rgba(0,0,0,.55), 0 0 0 6px var(--surface), 0 0 0 7px rgba(255,255,255,.1);
  transform:rotate(-3deg);
}
/* Ti notch kamera anlè telefòn nan — menm lojik ke ba navigatè laptop la:
   fè l sanble ak yon vrè telefòn, pa yon imaj kwen won senp. */
.mock-window-phone-notch{
  position:absolute; top:6px; left:50%; transform:translateX(-50%); z-index:1;
  width:26px; height:5px; border-radius:4px; background:rgba(255,255,255,.22);
}
.mock-window-phone img{ display:block; width:100%; height:auto; }
.mock-float{
  position:absolute; z-index:5; background:var(--surface); color:var(--text); border-radius:12px;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.35); padding:12px 14px; font-size:12px; font-weight:700;
  display:flex; align-items:center; gap:9px; width:max-content;
}
.mock-float-badge{ width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; flex-shrink:0; }
.mock-float-1{ top:-6%; left:22%; }
.mock-float-1 .mock-float-badge{ background:var(--accent); }
.mock-float-2{ bottom:6%; right:-9%; }
.mock-float-2 .mock-float-badge{ background:var(--primary); }
@media (max-width:900px){ .mock-window{ transform:none; } .mock-float{ display:none; } .mock-window-phone{ display:none; } }

section{ padding:96px 0; border-top:1px solid var(--border); }
#biznis, #apwopo, #telechaje{ background:var(--bg); }
#ekran, #pri{ background:var(--surface); }
#konsey-akey, #konsey-fonksyone{ background:var(--surface); }
#konsey-biznis, #konsey-gid{ background:var(--bg); }
.section-head{ max-width:620px; margin-bottom:52px; }
.section-head h1, .section-head h2{ font-size:clamp(26px, 3.2vw, 36px); margin:14px 0 12px; font-family:'Fraunces', Georgia, serif; font-weight:700; letter-spacing:-.01em; }
.section-head p{ color:var(--text-secondary); font-size:15px; }
.shot-note{ color:var(--text-secondary); font-size:12.5px; margin-top:-8px; }
.biz-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:920px){ .biz-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .biz-grid{ grid-template-columns:1fr; } }
.biz-card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:26px 22px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.biz-card[id]{ scroll-margin-top:96px; }
.biz-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
/* Foto antreprenè anlè kat la — bòday negatif "senyen" jiska kwen kat la
   (menm valè ke padding kat la, 26px/22px) pou l rete koresponn ak
   border-radius kat la anba a, san n pa bezwen yon 2yèm wrapper. */
.biz-photo{
  margin:-26px -22px 18px; border-radius:16px 16px 0 0; overflow:hidden; aspect-ratio:16/10; background:var(--bg);
}
.biz-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.biz-icon{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:19px; margin-bottom:18px; }
.biz-card h3{ font-size:16.5px; margin-bottom:8px; font-weight:700; }
.biz-card p{ font-size:13.5px; color:var(--text-secondary); margin:0; }
.biz-card-link{ display:inline-block; margin-top:12px; font-size:13px; font-weight:600; color:var(--primary); text-decoration:none; }
.biz-card-link:hover{ text-decoration:underline; }
.section-cta{ display:flex; justify-content:center; margin-top:40px; }
.biz-1 .biz-icon{ background:linear-gradient(135deg,#2563eb,#1d4ed8); }
.biz-2 .biz-icon{ background:linear-gradient(135deg,#16a34a,#14532d); }
.biz-3 .biz-icon{ background:linear-gradient(135deg,#f97316,#c2410c); }
.biz-4 .biz-icon{ background:linear-gradient(135deg,#7c3aed,#5b21b6); }
.biz-5 .biz-icon{ background:linear-gradient(135deg,#0891b2,#0e7490); }
.biz-6 .biz-icon{ background:linear-gradient(135deg,#db2777,#9d174d); }
.biz-7 .biz-icon{ background:linear-gradient(135deg,#65a30d,#3f6212); }
.biz-8 .biz-icon{ background:linear-gradient(135deg,#475569,#1e293b); }
.biz-ecole .biz-icon{ background:linear-gradient(135deg,#0284c7,#0c4a6e); }
.biz-grid-types{ grid-template-columns:repeat(3,1fr); }
@media (max-width:760px){ .biz-grid-types{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .biz-grid-types{ grid-template-columns:1fr; } }
/* Lè URL la gen yon #ankraj ki matche yon kat (egzanp #commerce), CSS
   `:target`/`:has()` kache lòt kat yo TOUT SÈL — okenn JavaScript pa
   bezwen kouri apre paj la fin parèt, kidonk pa gen "vakelman"/"jump"
   vizyèl (kontrèman ak yon ansyen vèsyon ki te kache kat yo pa JS apre
   yo te deja fin parèt). Sa mache menm si JS dezaktive. */
.biz-header-shot{
  max-width:280px; margin:0 auto 40px; border-radius:16px; overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow-card);
}
.biz-header-shot img{ display:block; width:100%; height:auto; }
.biz-grid-types:has(.biz-card:target) .biz-card:not(:target){ display:none; }
.biz-grid-types:has(.biz-card:target){ grid-template-columns:1fr; max-width:480px; margin:0 auto; }
/* Kat "Konsèy Biznis" yo pa gen `id` (deja pran pa kat Solisyon an), yo
   gen `data-biz` — kidonk yo pa ka matche `:target` dirèkteman, n itilize
   `body:has(#X:target)` pou konekte de grid separe yo pa non tip biznis lan. */
body:has(#commerce:target) .tip-card:not([data-biz="commerce"]),
body:has(#pharmacie:target) .tip-card:not([data-biz="pharmacie"]),
body:has(#restaurant:target) .tip-card:not([data-biz="restaurant"]),
body:has(#pressing:target) .tip-card:not([data-biz="pressing"]),
body:has(#ecole:target) .tip-card:not([data-biz="ecole"]){ display:none; }
body:has(#commerce:target, #pharmacie:target, #restaurant:target, #pressing:target, #ecole:target) #konsey-biznis .tip-grid{
  grid-template-columns:1fr; max-width:600px; margin:0 auto;
}
.biz-filter-bar{
  display:none; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:12px 18px; margin-bottom:28px; font-size:13.5px; color:var(--text-secondary);
}
body:has(.biz-card:target) .biz-filter-bar{ display:flex; }
.biz-filter-bar a{ color:var(--primary); font-weight:700; text-decoration:none; white-space:nowrap; }
.biz-filter-bar a:hover{ text-decoration:underline; }
.security-list{ display:flex; flex-direction:column; gap:0; max-width:680px; margin:0 auto; }
.security-item{
  display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-top:1px solid var(--border);
}
.security-item:last-child{ padding-bottom:0; }
.security-icon{
  width:38px; height:38px; border-radius:10px; flex-shrink:0; background:var(--bg);
  border:1px solid var(--border); color:var(--primary); display:flex; align-items:center; justify-content:center;
}
.security-item h4{ font-size:14.5px; margin-bottom:4px; }
.security-item p{ font-size:13.5px; color:var(--text-secondary); margin:0; }
.tip-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.tip-grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .tip-grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .tip-grid, .tip-grid-3{ grid-template-columns:1fr; } }
.tip-card{
  display:flex; gap:16px; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:22px; align-items:flex-start;
}
.tip-card-num{
  font-family:'Fraunces', Georgia, serif; font-size:22px; font-weight:700; color:var(--primary);
  flex-shrink:0; width:34px;
}
.tip-card h4{ font-size:14.5px; margin-bottom:6px; font-weight:700; }
.tip-card p{ font-size:13px; color:var(--text-secondary); margin:0; }
.tip-card p em{ font-style:normal; color:var(--accent); font-weight:600; }
.shot-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:760px){ .shot-grid{ grid-template-columns:1fr; } }
.shot-card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.shot-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
/* aspect-ratio fiks (menm valè ke kapti dekstòp orijinal yo, ~1917x995)
   + object-fit:cover : chak kat rete MENM wotè nan grid la, kèlkeswa si
   sous imaj la se yon kapti "peyizaj" dekstòp oswa "pòtrè" tablèt/telefòn
   (egzanp RH/Paie, Asistan) — san sa, yon imaj pòtrè ta parèt 3 fwa pi
   gwo pase lòt yo nan menm grid la. */
.shot-card img{ display:block; width:100%; aspect-ratio:1917/995; object-fit:cover; object-position:top; border-bottom:1px solid var(--border); }
/* Kat kapti a koupe (`object-fit:cover` pi wo a) pou li rete menm wotè ak
   lòt yo nan grid la — men klike sou li louvri imaj la AN ANTYE, san
   koupe, nan yon lightbox. Gade js/shot-lightbox.js. */
/* Seksyon "spotlight" — 2 fonksyonalite reyèl (RH/Paie, Asistan) prezante
   youn apre lòt ak plas pou respire, olye kwense yo nan menm grid kapti
   ekran an (sa te lakòz yon santiman "twò pwè" ant seksyon yo). Imaj yo
   rete nan pwòp fòma pòtrè natirèl yo, san koupe. */
.spotlight{ padding:96px 0; }
.spotlight-row{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.spotlight-row:not(:last-child){ margin-bottom:80px; }
.spotlight-row.reverse .spotlight-media{ order:2; }
.spotlight-row.reverse .spotlight-text{ order:1; }
.spotlight-media{
  max-width:300px; margin:0 auto; border-radius:20px; overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow-card);
}
.spotlight-media img{ display:block; width:100%; height:auto; }
.spotlight-text h3{ font-size:clamp(22px,2.6vw,28px); font-family:'Fraunces', Georgia, serif; margin:14px 0 12px; letter-spacing:-.01em; }
.spotlight-text p{ color:var(--text-secondary); font-size:15px; max-width:420px; }
@media (max-width:820px){
  .spotlight-row{ grid-template-columns:1fr; gap:28px; text-align:center; }
  .spotlight-row.reverse .spotlight-media, .spotlight-row.reverse .spotlight-text{ order:0; }
  .spotlight-text p{ margin-left:auto; margin-right:auto; }
}
.shot-card-zoom{ cursor:zoom-in; }
.shot-card-zoom:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.shot-lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(6,10,20,.86); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:48px 32px;
}
.shot-lightbox img{ display:block; max-width:100%; max-height:100%; border-radius:14px; box-shadow:0 30px 70px -20px rgba(0,0,0,.6); }
.shot-lightbox-close{
  position:absolute; top:20px; right:20px; width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s ease;
}
.shot-lightbox-close:hover{ background:rgba(255,255,255,.2); }
.shot-lightbox-close svg{ width:20px; height:20px; }
.shot-card-label{ display:flex; align-items:center; gap:10px; padding:14px 18px; }
.shot-card-label .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.shot-card-label strong{ font-size:13.5px; }
.shot-card-label span{ font-size:12px; color:var(--text-secondary); }
.features{ background:var(--charcoal); color:#fff; }
.feat-list{ display:flex; flex-direction:column; gap:0; }
.feat-row{
  display:grid; grid-template-columns:340px 1fr; gap:48px; align-items:center;
  padding:38px 0; border-top:1px solid rgba(255,255,255,.1);
}
.feat-row:last-child{ border-bottom:1px solid rgba(255,255,255,.1); }
@media (max-width:760px){ .feat-row{ grid-template-columns:1fr; gap:18px; } }
.feat-num{ font-size:12px; font-weight:700; letter-spacing:.1em; color:#7dd3a8; text-transform:uppercase; margin-bottom:10px; }
.feat-row h3{ font-size:21px; color:#fff; margin-bottom:6px; }
.feat-row .feat-copy p{ color:rgba(255,255,255,.68); font-size:14.5px; max-width:460px; margin:0; }
.apwopo-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:860px){ .apwopo-wrap{ grid-template-columns:1fr; gap:34px; } }
.apwopo-text p{ color:var(--text-secondary); font-size:15px; margin-top:14px; max-width:480px; }
.apwopo-values{ display:flex; flex-direction:column; gap:18px; }
.apwopo-value{ display:flex; gap:16px; align-items:flex-start; }
.apwopo-value-icon{
  width:42px; height:42px; border-radius:12px; flex-shrink:0; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.apwopo-value strong{ display:block; font-size:14.5px; margin-bottom:3px; }
.apwopo-value p{ font-size:13px; color:var(--text-secondary); margin:0; }
.faq-list{ display:flex; flex-direction:column; max-width:760px; margin:0 auto; }
.faq-item{ padding:24px 0; border-top:1px solid var(--border); }
.faq-item:last-child{ padding-bottom:0; }
.faq-item h3{ font-size:16px; margin-bottom:8px; }
.faq-item p{ font-size:14px; color:var(--text-secondary); margin:0; }
.faq-item strong{ color:var(--text); }
.cta-final{
  background:linear-gradient(155deg, var(--blue-deep) 0%, var(--blue-mid) 55%, var(--green-deep) 100%);
  border-radius:26px; margin:0 28px; padding:64px 48px; text-align:center; color:#fff;
  max-width:1180px; margin-left:auto; margin-right:auto;
}
.cta-final h2{ color:#fff; font-size:clamp(24px,3vw,32px); margin-bottom:12px; }
.cta-final p{ color:rgba(255,255,255,.78); font-size:15px; max-width:480px; margin:0 auto 28px; }
.cta-final .cta-row{ justify-content:center; margin-bottom:0; }
.trial{
  background:linear-gradient(120deg, var(--green-deep), #0a2e1a);
  color:#fff; border-radius:26px; margin:0 28px; padding:64px 48px;
  display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center;
  max-width:1180px; margin-left:auto; margin-right:auto;
}
@media (max-width:820px){ .trial{ grid-template-columns:1fr; padding:44px 28px; } }
.trial h2{ font-size:clamp(24px,3vw,32px); margin-bottom:14px; color:#fff; }
.trial p{ color:rgba(255,255,255,.78); font-size:14.5px; max-width:440px; }
.trial-card{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:16px; padding:26px; }
.trial-price{ font-size:38px; font-weight:800; margin-bottom:4px; }
.trial-price span{ font-size:14px; font-weight:600; color:rgba(255,255,255,.65); }
.trial-feat{ list-style:none; margin:18px 0 22px; padding:0; display:flex; flex-direction:column; gap:9px; font-size:13px; }
.trial-feat li{ display:flex; gap:9px; align-items:flex-start; color:rgba(255,255,255,.85); }
.trial-feat svg.ic{ color:#86efac; margin-top:2px; }
.trial-price-link{ display:block; text-align:center; margin-top:12px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.78); text-decoration:none; }
.trial-price-link:hover{ color:#fff; text-decoration:underline; }
.pw-strength{ margin-top:8px; }
.pw-strength-track{ height:4px; border-radius:2px; background:var(--border); overflow:hidden; }
.pw-strength-fill{ height:100%; width:0%; border-radius:2px; background:#dc2626; transition:width .2s ease, background-color .2s ease; }
.pw-strength-label{ display:block; margin-top:4px; font-size:11.5px; font-weight:600; }
/* Kenbe 1 sèl plan santre jan l te ye a, men pare pou plizyè plan
   (grid) san n pa bezwen chanje CSS ankò lè gen 2yèm/3yèm plan pibliye. */
.price-plans-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 380px));
  gap:24px; justify-content:center; align-items:start;
}
.price-card{
  max-width:380px; width:100%; margin:0 auto; text-align:center; background:var(--surface);
  border:1px solid var(--border); border-radius:20px; padding:38px 34px;
  box-shadow:var(--shadow-card);
}
.price-card-plan{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--primary); margin-bottom:10px; }
.price-card-amount{ font-family:'Fraunces', Georgia, serif; font-size:34px; font-weight:700; color:var(--text); }
.price-card-amount span{ font-size:14px; font-weight:600; color:var(--text-secondary); font-family:'Segoe UI', system-ui, sans-serif; }
.price-card-feat{ text-align:left; margin:24px 0; }
.price-card-feat li{ color:var(--text); }
.price-card-feat svg.ic{ color:var(--accent); }
.price-card-cta{ width:100%; justify-content:center; position:relative; background:var(--primary); color:#fff; box-shadow:none; }
.price-card-cta:hover{ background:var(--blue-deep); box-shadow:none; }
.price-card-cta:disabled{ opacity:.6; cursor:not-allowed; }
.price-card-cta:disabled:hover{ transform:none; }
.price-card-soon{
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  background:#ea580c; color:#fff; padding:2px 7px; border-radius:20px;
}
.price-card-whatsapp{
  width:100%; justify-content:center; margin-top:10px;
  background:#25d366; color:#fff; scroll-margin-top:96px;
}
.price-card-whatsapp:hover{ background:#20bd5a; }
.price-card-note{ display:block; font-size:12px; color:var(--text-secondary); margin-top:14px; }
.guide-steps{ display:flex; flex-direction:column; max-width:720px; margin:0 auto; }
.guide-step{ display:flex; gap:24px; position:relative; padding-bottom:44px; }
.guide-step:last-child{ padding-bottom:0; }
.guide-step:not(:last-child)::before{
  content:''; position:absolute; left:23px; top:52px; bottom:0; width:2px; background:var(--border);
}
.guide-step-num{
  width:48px; height:48px; border-radius:50%; flex-shrink:0; z-index:1;
  background:linear-gradient(135deg, var(--primary), var(--accent)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', Georgia, serif; font-size:19px; font-weight:700;
}
.guide-step-body{ padding-top:8px; }
.guide-step-body h3{ font-size:17.5px; margin-bottom:8px; }
.guide-step-body p{ font-size:14px; color:var(--text-secondary); margin:0; max-width:520px; }
.guide-step-tag{
  display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--primary); background:var(--bg); border:1px solid var(--border);
  border-radius:20px; padding:2px 9px; margin-bottom:8px;
}

.download{ text-align:center; }
.download .section-head{ margin:0 auto 40px; text-align:center; }
.member-modal-backdrop{
  position:fixed; inset:0; z-index:100; background:var(--bg); overflow-y:auto;
}
.member-modal-shell{ min-height:100%; display:grid; grid-template-columns:1.05fr 1fr; }
@media (max-width:860px){ .member-modal-shell{ grid-template-columns:1fr; } }
.member-modal-brand{
  position:relative; overflow:hidden; color:#fff; display:flex; align-items:center; padding:48px;
  background:linear-gradient(155deg, var(--blue-deep) 0%, var(--blue-mid) 48%, var(--green-deep) 100%);
}
@media (max-width:860px){ .member-modal-brand{ display:none; } }
.member-modal-brand-inner{ position:relative; z-index:1; max-width:400px; }
.member-modal-brand .brand{ display:inline-flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:15px; text-decoration:none; margin-bottom:52px; }
.member-modal-brand .brand-mark{ width:28px; height:28px; border-radius:8px; }
.member-modal-brand h2{ font-family:'Fraunces', Georgia, serif; font-size:clamp(24px,2.6vw,32px); line-height:1.16; margin-bottom:16px; }
.member-modal-brand p{ font-size:14.5px; color:rgba(255,255,255,.8); line-height:1.6; margin-bottom:28px; max-width:360px; }
.member-modal-points{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.member-modal-points li{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:rgba(255,255,255,.92); }
.member-modal-points svg{ width:18px; height:18px; flex-shrink:0; color:#86efac; }
.member-modal-form-side{ display:flex; align-items:center; justify-content:center; padding:48px 20px; }
.member-modal{
  width:100%; max-width:440px; background:var(--surface);
  border-radius:20px; padding:36px 32px; text-align:left; position:relative;
  box-shadow:0 10px 40px -18px rgba(0,0,0,.2);
  animation:heroRiseIn .3s cubic-bezier(.16,1,.3,1) both;
}
@media (prefers-reduced-motion: reduce){ .member-modal{ animation:none; } }
.member-modal-close{
  position:absolute; top:16px; right:16px; width:32px; height:32px; border:none; background:var(--bg);
  border-radius:9px; color:var(--text-secondary); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.member-modal-close:hover{ color:var(--text); }
.member-modal-close svg{ width:16px; height:16px; }
.member-modal-icon{
  width:48px; height:48px; border-radius:13px; background:var(--bg); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.member-modal-icon img{ width:28px; height:28px; }
.member-modal h3{ font-family:'Fraunces', Georgia, serif; font-size:20px; margin-bottom:8px; }
.member-modal-note{ font-size:13px; color:var(--text-secondary); line-height:1.55; margin:0 0 24px; }
.btn-google{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:44px;
  border-radius:10px; background:#fff; border:1px solid #dadce0; color:#3c4043;
  font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:box-shadow .15s, background .15s;
}
.btn-google:hover{ background:#f8f9fa; box-shadow:0 1px 4px rgba(15,23,42,.15); }
.btn-google svg{ flex-shrink:0; }
.member-divider{ display:flex; align-items:center; gap:12px; margin:18px 0; font-size:12px; color:var(--text-secondary); }
.member-divider::before, .member-divider::after{ content:''; flex:1; height:1px; background:var(--border); }
.member-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.member-form-row{ margin-bottom:14px; }
.member-form-row label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--text); }
.member-form-row input{
  width:100%; box-sizing:border-box; padding:11px 13px; border:1.5px solid var(--border); border-radius:10px;
  font-size:14px; font-family:inherit; background:var(--bg); color:var(--text);
}
.member-form-row input:focus{ outline:none; border-color:var(--primary); background:var(--surface); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.member-form-tip{ display:block; font-size:11.5px; color:var(--text-secondary); margin-top:5px; }
.member-field-password{ position:relative; }
.member-field-password input{ padding-right:42px; }
.member-pw-toggle{
  position:absolute; right:4px; top:50%; transform:translateY(-50%); width:32px; height:32px;
  border:none; background:none; color:var(--text-secondary); cursor:pointer; display:flex; align-items:center; justify-content:center;
  border-radius:7px;
}
.member-pw-toggle:hover{ color:var(--text); background:var(--bg); }
.member-pw-toggle svg{ width:17px; height:17px; }
.member-form .btn{ width:100%; justify-content:center; margin-top:4px; background:var(--primary); color:#fff; box-shadow:none; }
.member-form .btn:hover{ background:var(--blue-deep); box-shadow:none; }
.member-form-hint{ font-size:13px; color:var(--text-secondary); margin:0 0 16px; }
.member-form-error{ font-size:12.5px; color:#dc2626; margin:12px 0 0; }
.member-form-success{ font-size:12.5px; color:var(--accent); margin:12px 0 0; text-align:center; }
.member-form-link{
  display:block; width:100%; text-align:center; background:none; border:none; margin-top:14px;
  font-size:12.5px; color:var(--primary); text-decoration:underline; cursor:pointer; padding:4px;
}
.member-welcome{
  max-width:480px; margin:20px auto 0; font-size:13px; color:var(--text-secondary); text-align:center;
}
.member-welcome strong{ color:var(--accent); }
.comment-form-card{
  max-width:760px; margin:0 auto 48px; background:var(--surface); border:1px solid var(--border);
  border-radius:18px; padding:34px; box-shadow:var(--shadow-card);
}
.comment-form-card textarea{
  width:100%; box-sizing:border-box; min-height:140px; padding:15px 17px; border:1.5px solid var(--border);
  border-radius:12px; font-size:14.5px; font-family:inherit; background:var(--bg); color:var(--text); resize:vertical;
}
.comment-form-card textarea:focus{ outline:none; border-color:var(--primary); background:var(--surface); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.comment-form-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:14px; flex-wrap:wrap; }
.comment-form-note{ font-size:12px; color:var(--text-secondary); }
.comment-form-success{ font-size:13px; color:var(--accent); margin:14px 0 0; font-weight:600; }
.comment-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.comment-item{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px 22px; }
.comment-item-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px; }
.comment-item-head strong{ font-size:14px; }
.comment-item-head span{ font-size:11.5px; color:var(--text-secondary); white-space:nowrap; }
.comment-item p{ font-size:13.5px; color:var(--text); margin:0; line-height:1.6; white-space:pre-wrap; }
.dl-row{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.dl-card{
  width:220px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:26px 20px;
  text-align:left; text-decoration:none; color:var(--text); transition:transform .18s ease, box-shadow .18s ease;
}
.dl-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.dl-card.dl-disabled{ opacity:.55; cursor:default; }
.dl-card.dl-disabled:hover{ transform:none; box-shadow:none; }
.dl-card svg.ic.dl-icon{ font-size:22px; color:var(--primary); margin-bottom:14px; display:block; }
.dl-card:nth-child(2) svg.ic.dl-icon{ color:var(--accent); }
.dl-card h4{ font-size:15px; margin:0 0 4px; }
.dl-card span{ font-size:12px; color:var(--text-secondary); }
.dl-version{
  display:block; margin-top:8px; font-size:11px; font-weight:700; color:var(--primary) !important;
  text-transform:uppercase; letter-spacing:.04em;
}
.dl-note{ margin:20px auto 0; font-size:12.5px; color:var(--text-secondary); max-width:480px; }
.dl-details{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:680px; margin:32px auto 0; text-align:left; }
@media (max-width:640px){ .dl-details{ grid-template-columns:1fr; } }
.dl-detail-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px 20px; }
.dl-detail-card h4{ font-size:13.5px; margin:0 0 10px; }
.dl-detail-card ul, .dl-detail-card ol{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }
.dl-detail-card li{ font-size:12.5px; color:var(--text-secondary); line-height:1.5; }
.dl-detail-note{ margin:10px 0 0; font-size:12px; color:var(--text-secondary); font-weight:600; }
.dl-source-note{ margin:20px auto 0; font-size:11.5px; color:var(--text-secondary); max-width:480px; }

#announcement-banner{
  background:linear-gradient(120deg, var(--primary), var(--accent)); color:#fff;
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:10px 20px; font-size:13px; font-weight:600; text-align:center; position:relative;
}
#announcement-banner .announcement-text{ color:#fff; text-decoration:none; }
a.announcement-text:hover{ text-decoration:underline; }
#announcement-banner .announcement-close{
  background:none; border:none; color:#fff; font-size:18px; line-height:1; cursor:pointer;
  position:absolute; right:16px; top:50%; transform:translateY(-50%); padding:4px;
}
footer{ border-top:1px solid var(--border); padding:56px 0 0; background:var(--bg); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; padding-bottom:40px; }
@media (max-width:700px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand p{ font-size:13px; color:var(--text-secondary); margin-top:12px; max-width:280px; }
footer .brand{ font-size:15px; }
footer .brand-mark{ width:24px; height:24px; border-radius:7px; }
.footer-col h5{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text); margin-bottom:14px; }
.footer-col{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:13.5px; color:var(--text-secondary); text-decoration:none; }
.footer-col a:hover{ color:var(--primary); }
.footer-bottom{
  border-top:1px solid var(--border); padding:18px 0; display:flex;
  justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
}
footer p{ font-size:12px; color:var(--text-secondary); margin:0; }
.footer-legal{ display:flex; gap:18px; }
.footer-legal a{ font-size:12px; color:var(--text-secondary); text-decoration:none; }
.footer-legal a:hover{ color:var(--primary); }
.legal-content{ max-width:720px; margin:0 auto; }
.legal-content h3{ font-size:18px; margin:32px 0 10px; }
.legal-content h3:first-child{ margin-top:0; }
.legal-content p{ font-size:14.5px; color:var(--text-secondary); line-height:1.7; margin:0 0 12px; }
.legal-content .legal-note{
  background:var(--bg); border:1px solid var(--border); border-radius:12px;
  padding:16px 18px; font-size:13px; margin-bottom:36px;
}