:root{
  --bg:#0a0f16; --surface:#0f1621; --text:#f8fafc; --muted:#cbd5e1; --muted-2:#94a3b8;
  --card:#0f172a; --line:rgba(148,163,184,.25);
  --brand1:#2563eb; --brand2:#0ea5a8; --danger:#ef4444;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
  --bg:#f7fbff; --surface:#ffffff; --text:#0b1320; --muted:#334155; --muted-2:#475569;
  --card:#ffffff; --line:rgba(15,23,42,.16);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in oklab, var(--surface) 88%, transparent);border-bottom:1px solid var(--line);backdrop-filter:saturate(180%) blur(16px)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:900;font-size:20px;letter-spacing:.4px}
.brand b{background:linear-gradient(90deg,var(--brand1),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;gap:12px;align-items:center}
.nav-link{padding:10px 12px;border-radius:999px}
.nav-link:hover,.nav-link.active{background:color-mix(in oklab, var(--text) 10%, transparent)}
.nav-cta{display:flex;gap:10px;align-items:center}
.btn-wa{padding:8px 12px;border-radius:999px;background:#25D366;color:#0b1117;font-weight:700}
#theme-toggle{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:999px;padding:6px 10px}
.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:22px}

/* Hero */
.hero{display:grid;place-items:center;min-height:70vh;background:
 radial-gradient(60% 40% at 70% 10%, color-mix(in oklab, var(--brand1) 35%, transparent), transparent 60%),
 linear-gradient(180deg, color-mix(in oklab, var(--bg) 94%, #000) , var(--bg));}
:root[data-theme="light"] .hero{background:linear-gradient(180deg,#e9f2ff,#ffffff)}
.hero-inner{text-align:center;padding:80px 0}
.headline{font-size:54px;font-weight:900;margin:0 0 10px;letter-spacing:-.02em}
.grad{background:linear-gradient(90deg,var(--brand1),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
.subhead{color:var(--muted);font-size:20px;max-width:880px;margin:0 auto 24px;line-height:1.6}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{padding:12px 18px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);font-weight:700}
.btn.primary{border:none;background:linear-gradient(90deg,var(--brand1),var(--brand2));color:#fff;box-shadow:var(--shadow)}

/* Sections */
.section{padding:72px 0}
.section-alt{background:linear-gradient(180deg,var(--bg) 0%, color-mix(in oklab, var(--bg) 82%, var(--surface)) 100%)}
.section-title{font-size:34px;margin:0 0 14px;text-align:center}
.lead{font-size:18px;color:var(--muted);text-align:center;max-width:920px;margin:0 auto 24px}

/* Cards & grids */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.card h3{margin:0 0 8px}
.kpi-band{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:center}
.kpi-band strong{font-size:26px;display:block}
.kpi-band span{color:var(--muted)}

/* Services tabs (detailed view on index too) */
.svc{display:grid;grid-template-columns:280px 1fr;gap:18px;margin-top:10px}
.svc-tabs{display:grid;gap:8px;align-content:start;position:sticky;top:88px;height:fit-content}
.svc-tab{padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left}
.svc-tab.active{outline:2px solid var(--brand1);background:color-mix(in oklab, var(--surface) 90%, var(--text))}
.svc-panels{display:grid;gap:14px}
.svc-panel{display:none;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.svc-panel.show{display:block}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.svc-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
.svc-card h4{margin:0 0 8px}

/* Plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:12px}
.plan.highlight{outline:2px solid var(--brand1)}
.plan-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.badge{font-size:12px;padding:6px 8px;border-radius:999px;background:color-mix(in oklab, var(--text) 10%, transparent)}
.badge-hot{background:linear-gradient(90deg,var(--brand1),var(--brand2));color:#fff}
.feat{margin:0;padding-left:18px;color:var(--text)}

/* Table */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--card);margin:10px 0}
.table{width:100%;border-collapse:collapse;min-width:680px}
.table th,.table td{border-bottom:1px solid var(--line);padding:12px 14px;text-align:left}
.table thead th{position:sticky;top:0;background:var(--surface)}

/* Contact & footer */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
input,textarea{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text)}
.footer{border-top:1px solid var(--line);padding:28px 0}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:10px}
.copy{color:var(--muted-2);font-size:14px}
.fab{position:fixed;right:18px;bottom:18px;height:52px;width:52px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(90deg,var(--brand1),var(--brand2));color:#fff;box-shadow:var(--shadow)}

@media (max-width:1024px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .svc{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .kpi-band{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .cards,.svc-grid,.plans{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .nav-links{position:fixed;top:64px;right:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px;display:none;flex-direction:column;min-width:220px}
  .nav-links.open{display:flex}
}


/* === A11y & Contrast hardening === */
:root{
  --on-brand:#0b1117;
  --on-surface:#e5efff;
  --on-card:#f8fafc;
}
h1,h2,h3,h4,h5,h6,p,li,th,td,small,span{color:var(--text)}
.section-alt, .card, .contact-card, .svc-panel, .faq-item, .price, .plan{color:var(--text)}
.btn, .btn.primary, .btn-wa{color:var(--on-brand)}
.btn, .btn.primary{border-color:transparent}
.btn.primary{background:linear-gradient(90deg,var(--brandA,var(--brand1)),var(--brandB,var(--brand2)));color:#fff}
.btn{background:color-mix(in oklab, var(--text) 8%, transparent);color:var(--text);border:1px solid var(--line)}
a.nav-link, .nav-link{color:var(--text)}
.table th, .table td{color:var(--text)}
.post-card, .tile, .p-logo{background:var(--surface)}

/* Focus states */
:where(a,button,input,textarea,select,.nav-link,.btn){outline:none}
:where(a,button,input,textarea,select,.nav-link,.btn):focus-visible{outline:2px solid color-mix(in oklab, var(--brandA) 60%, var(--brandB));outline-offset:2px;border-radius:8px}

/* Ensure alternating backgrounds never match text color */
.section, .section-alt, .footer, .nav, body{color:var(--text)}

/* Badge/labels contrast */
.badge{color:var(--text)}

/* Light theme adjustments for readability */
:root[data-theme="light"] .btn{background:#0b1117;color:#fff;border-color:#0b1117}
:root[data-theme="light"] .btn.primary{background:linear-gradient(90deg,#0b1117,#2a2f36)}
:root[data-theme="light"] .faq-item{background:#ffffff}


/* === EcritPro v4+ Base Tokens & Components === */
:root{
  --brand:#0f172a;
  --brand-accent:#2563eb;
  --brand-accent-2:#0ea5a8;
  --surface:#ffffff;
  --surface-2:#f7fbff;
  --surface-3:#e9f2ff;
  --text:#0b1320;
  --text-muted:#475569;
  --on-dark:#f8fafc;
}
/* Links & headings */
a{ color:var(--brand-accent); }
a:hover, a:focus{ text-decoration:underline; text-underline-offset:2px; }
h1,h2,h3,h4{ color:var(--text); }

/* Cards */
.grid-auto{
  display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  align-items:stretch;
}
.card{
  background:var(--surface);
  border:1px solid #e5efff;
  border-radius:16px;
  padding:24px;
  box-shadow:0 4px 18px rgba(2,6,23,.06);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 10px 26px rgba(2,6,23,.12); border-color:var(--surface-3); }
.card h3{ margin:0 0 12px; font-size:1.15rem; }
.card p{ margin:0 0 10px; color:var(--text-muted); }
.card ul{ margin:8px 0 0 0; padding-left:0; list-style:none; }
.card li{ position:relative; padding-left:28px; margin:10px 0; }
.card li::before{
  content:""; position:absolute; left:0; top:.35em; width:18px; height:18px; border-radius:10px;
  background:linear-gradient(180deg,var(--brand-accent), var(--brand));
  box-shadow:0 2px 6px rgba(37,99,235,.35);
  mask: url('#check-dot') no-repeat center / 70% 70%;
}
.icon-bullet{ display:flex; gap:12px; align-items:flex-start; }
.icon-bullet svg{ flex:0 0 28px; width:28px; height:28px; }
.icon-bullet .content{ flex:1 1 auto; }

/* Section scaffold */
.section{ padding:64px 20px; background:var(--surface); }
.section.alt{ background:var(--surface-2); }
.section .container{ max-width:1100px; margin:0 auto; }
.section .eyebrow{ color:var(--brand-accent); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.section h2{ font-size:1.9rem; margin:10px 0 18px; }
.section .lead{ font-size:1.05rem; color:var(--text-muted); max-width:70ch; }

/* Reveal */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } }

/* Buttons */
.button, .btn{ display:inline-flex; align-items:center; gap:10px; padding:.8rem 1.1rem; border-radius:10px; border:1px solid transparent; font-weight:600; text-decoration:none; }
.btn-primary{ background:var(--brand-accent); color:var(--on-dark); }
.btn-primary:hover{ filter:brightness(.95); }
.btn-ghost{ background:transparent; color:var(--brand-accent); border-color:var(--brand-accent); }
.btn-ghost:hover{ background:var(--surface-3); }

/* Contrast-only safety patch (keeps original bg if needed) */
*[style*="color:#fff"][style*="background:#fff"],
*[style*="color:#ffffff"][style*="background:#ffffff"]{ color:#0b1320 !important; }
*[style*="color:#000"][style*="background:#000"],
*[style*="color:#000000"][style*="background:#000000"]{ color:#f8fafc !important; }

/* Onboarding modal */
.onb.hidden{ display:none; }
.onb{ position:fixed; inset:0; z-index:50; }
.onb-backdrop{ position:absolute; inset:0; background:rgba(2,6,23,.55); backdrop-filter:saturate(120%) blur(6px); }
.onb-dialog{ position:relative; z-index:51; width:min(760px, calc(100% - 28px)); margin:6vh auto; background:#fff; color:#0b1320; border-radius:20px; box-shadow:0 20px 55px rgba(2,6,23,.25); padding:22px 22px 26px; }
.onb-close{ position:absolute; top:8px; right:12px; border:0; background:transparent; font-size:28px; line-height:1; cursor:pointer; }
.onb-progress{ position:relative; height:6px; background:#e9f2ff; border-radius:999px; overflow:hidden; margin:8px 0 18px; }
.onb-bar{ display:block; height:100%; background:linear-gradient(90deg, #2563eb, #0ea5a8); border-radius:999px; transition:width .3s ease; }
.onb-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:14px 0; }
.onb-chip{ border:1px solid #dbeafe; background:#fff; border-radius:999px; padding:.6rem .9rem; cursor:pointer; }
.onb-chip.is-selected{ border-color:#2563eb; background:#e5efff; }
.onb-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }
.onb-step{ display:none; }
.onb-step--active{ display:block; }
.onb-formgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.onb-formgrid input{ border:1px solid #e5efff; padding:.8rem .9rem; border-radius:10px; }
@media (max-width: 640px){ .onb-dialog{ margin:3vh auto; } .onb-formgrid{ grid-template-columns:1fr; } }

/* === Global Dark Theme (fond sombre) === */
.theme-dark{
  --surface:#0b1117;
  --surface-2:#0a0f16;
  --surface-3:#0f1621;
  --text:#f8fafc;
  --text-muted:rgba(248,250,252,.78);
}
.theme-dark, .theme-dark body{ background-color:var(--surface); color:var(--text); }
.theme-dark section, .theme-dark .section{ background:transparent; }
.theme-dark h1,.theme-dark h2,.theme-dark h3,.theme-dark h4{ color:var(--text); }
.theme-dark a{ color:#e9f2ff; }
.theme-dark a:hover{ text-decoration:underline; text-underline-offset:2px; }
.theme-dark .lead{ color:var(--text-muted); }
.theme-dark .eyebrow{ color:#93c5fd; }
.theme-dark .text-muted{ color:var(--text-muted) !important; }
.theme-dark .card{ background:#0f1621; border-color:#2a2f36; box-shadow:0 8px 28px rgba(0,0,0,.35); }
.theme-dark .card p{ color:var(--text-muted); }
.theme-dark .badge{ background:#1f2937; color:#e5e7eb; }
.theme-dark .btn-ghost{ color:#e9f2ff; border-color:#3b82f6; }
.theme-dark .btn-ghost:hover{ background:rgba(255,255,255,.06); }
.theme-dark .btn-primary{ color:#f8fafc; }
.theme-dark footer, .theme-dark .footer, .theme-dark header, .theme-dark nav{ color:var(--text); background:transparent; }
.theme-dark .onb-backdrop{ background:rgba(2,6,23,.65); }