/* ══════════════════════════════════════
   CHRONO SEO — main.css v1.0
   Source : Homepage v5
══════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --f: 'Onest', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', monospace;

  --paper:       #FFFFFF;
  --paper-soft:  #FBFAFE;
  --paper-warm:  #FAF7F1;
  --bg:          #F6F2EB;
  --bg-mid:      #F0EAFB;

  --p-50:        #F7F3FF;
  --p-100:       #EDE2FF;
  --p-200:       #DCC5FF;
  --p-300:       #B895F3;
  --p-400:       #8C5EE5;
  --p-500:       #7B35D4;
  --p-600:       #5B1FA0;
  --p-700:       #44177A;
  --p-800:       #2E0F55;

  --g-100:       #FFFAD9;
  --g-200:       #FFEE99;
  --g-300:       #FFE066;
  --g-400:       #FFD93D;
  --g-500:       #F7CC18;
  --g-600:       #D4AA00;
  --g-700:       #A07F00;

  --ink:         #14091F;
  --text:        #2A2240;
  --text-2:      #4A4060;
  --mute:        #6F6587;
  --dim:         #A89FBF;

  --line:        #EAE3F4;
  --line-soft:   #F3EEF9;

  --green:       #16A34A;
  --green-bg:    #DCFCE7;
  --red:         #DC2626;
  --red-bg:      #FEE2E2;
  --blue:        #0EA5E9;
  --pink:        #EC4899;

  --sh-sm:       0 1px 2px rgba(20,9,31,0.04), 0 2px 6px rgba(20,9,31,0.04);
  --sh-md:       0 4px 12px rgba(91,31,160,0.04), 0 12px 32px rgba(20,9,31,0.06);
  --sh-lg:       0 8px 24px rgba(91,31,160,0.06), 0 24px 60px rgba(20,9,31,0.08);
  --sh-xl:       0 16px 48px rgba(91,31,160,0.10), 0 32px 80px rgba(20,9,31,0.10);
  --sh-purple:   0 16px 48px rgba(91,31,160,0.16), 0 32px 80px rgba(91,31,160,0.12);
  --sh-gold:     0 6px 18px rgba(247,204,24,0.35);
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--f);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-feature-settings: 'ss01';
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: var(--f); cursor: pointer; border: none; background: none; }
.w { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* ════════ AMBIENT ════════ */
.ambient {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(45% 35% at 12% 8%, rgba(247,204,24,0.14) 0%, transparent 55%),
    radial-gradient(50% 40% at 88% 15%, rgba(124,53,238,0.12) 0%, transparent 55%),
    radial-gradient(45% 40% at 70% 70%, rgba(124,53,238,0.07) 0%, transparent 60%),
    radial-gradient(40% 35% at 20% 70%, rgba(247,204,24,0.06) 0%, transparent 60%),
    linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 35%, var(--paper-soft) 70%, var(--bg) 100%);
}
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.32;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.05 0 0 0 0 0.2 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.aurora {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 15% 25%, rgba(124,53,238,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 75%, rgba(247,204,24,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 60% 10%, rgba(14,165,233,0.04) 0%, transparent 50%);
  animation: auroraShift 25s ease-in-out infinite alternate;
}

/* ════════ ANIMATIONS ════════ */
@keyframes pulseGreen  { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.92)} }
@keyframes pulseGlow   { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.15)} }
@keyframes spin        { to{transform:rotate(360deg)} }
@keyframes floatBob    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes floatRot    { 0%,100%{transform:translateY(0) rotate(-.5deg)} 50%{transform:translateY(-8px) rotate(.5deg)} }
@keyframes shimmer     { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes typing      { 0%,60%,100%{transform:translateY(0);opacity:.5} 30%{transform:translateY(-4px);opacity:1} }
@keyframes barLoad     { from{width:0} }
@keyframes fadeUp      { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes blink       { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes lineFlow    { from{stroke-dashoffset:1000} to{stroke-dashoffset:0} }
@keyframes auroraShift { 0%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-25px) scale(1.04)} 66%{transform:translate(-25px,35px) scale(.97)} 100%{transform:translate(15px,-10px) scale(1.02)} }
@keyframes mascotBreathe { 0%,100%{transform:scale(1) translateY(0)} 50%{transform:scale(1.018) translateY(-6px)} }
@keyframes slideUp     { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* ════════ ANNOUNCE ════════ */
.announce {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 9px 0; font-size: 13px;
}
.announce-inner { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.announce-tag { background:linear-gradient(135deg,var(--g-500),var(--g-400)); color:var(--ink); font-family:var(--mono); font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:100px; text-transform:uppercase; letter-spacing:.05em; }
.announce-text { color:var(--mute); }
.announce-text strong { color:var(--ink); font-weight:700; }
.announce-link { color:var(--p-600); font-weight:600; }
.announce-link::after { content:' →'; }

/* ════════ NAV ════════ */
.nav-wrap { position:sticky; top:0; z-index:200; padding:14px 0; }
.nav {
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,0.84);
  backdrop-filter:saturate(1.8) blur(24px);
  -webkit-backdrop-filter:saturate(1.8) blur(24px);
  border:1px solid rgba(234,227,244,0.9);
  border-radius:100px;
  padding:8px 8px 8px 22px;
  box-shadow:0 1px 2px rgba(20,9,31,0.03),0 16px 40px rgba(20,9,31,0.04);
  position:relative;
}
.nav-logo img { height:42px; }
.nav-links { display:flex; align-items:center; gap:1px; }
.nav-a {
  padding:8px 13px; font-size:14px; font-weight:500; color:var(--mute);
  border-radius:100px; transition:color .15s,background .15s;
  display:inline-flex; align-items:center; gap:4px;
  white-space:nowrap; cursor:pointer;
  font-family:var(--f); border:none; background:none;
}
.nav-a:hover, .nav-a.current-menu-item { color:var(--p-600); background:var(--p-50); }
.nav-right { display:flex; align-items:center; gap:6px; }
.nb-ghost { display:inline-flex; align-items:center; padding:8px 16px; border-radius:100px; font-size:14px; font-weight:500; color:var(--text-2); font-family:var(--f); cursor:pointer; background:none; border:none; transition:color .15s,background .15s; text-decoration:none; }
.nb-ghost:hover { color:var(--p-600); background:var(--p-50); }
.nb-primary { padding:9px 20px; border-radius:100px; background:linear-gradient(135deg,var(--p-700),var(--p-500)); color:white; font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:7px; transition:transform .15s,box-shadow .2s; font-family:var(--f); cursor:pointer; border:none; position:relative; overflow:hidden; }
.nb-primary::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent); pointer-events:none; }
.nb-primary:hover { transform:translateY(-1px); box-shadow:0 0 0 3px rgba(124,53,238,0.22),0 8px 28px rgba(91,31,160,0.35); }
.nb-primary .gold-orb { width:18px; height:18px; border-radius:50%; background:conic-gradient(from 0deg,var(--g-500),var(--g-300),var(--g-500)); color:var(--ink); font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; animation:spin 4s linear infinite; flex-shrink:0; }

/* ════════ MEGA MENU ════════ */
.mega-wrap { position:static; }
.mega-chevron { width:14px; height:14px; flex-shrink:0; transition:transform .22s ease,color .15s; color:var(--dim); }
.mega-wrap:hover .mega-chevron, .mega-wrap.is-open .mega-chevron { transform:rotate(180deg); color:var(--p-500); }
.mega-wrap:hover > .nav-a, .mega-wrap.is-open > .nav-a { color:var(--p-600); background:var(--p-50); }
.mega-panel {
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(-6px);
  width:900px; padding-top:12px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease .09s,transform .22s ease .09s,visibility .18s ease .09s;
  z-index:400;
}
.mega-wrap:hover .mega-panel, .mega-wrap.is-open .mega-panel {
  opacity:1; visibility:visible; pointer-events:all;
  transform:translateX(-50%) translateY(0);
  transition-delay:0s;
}
.mega-inner { background:rgba(255,255,255,0.98); backdrop-filter:saturate(2) blur(32px); -webkit-backdrop-filter:saturate(2) blur(32px); border:1px solid rgba(234,227,244,0.85); border-radius:20px; box-shadow:0 0 0 .5px rgba(124,53,238,0.06),0 8px 16px rgba(20,9,31,0.04),0 20px 48px rgba(91,31,160,0.07),0 40px 88px rgba(20,9,31,0.08); overflow:hidden; }
.mega-header { display:flex; align-items:center; justify-content:space-between; padding:13px 20px; border-bottom:1px solid var(--line-soft); background:linear-gradient(90deg,rgba(247,243,255,0.7),rgba(251,250,254,0.4)); }
.mega-header-label { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--p-600); text-transform:uppercase; letter-spacing:.07em; }
.mega-header-dot { width:5px; height:5px; border-radius:50%; background:var(--p-400); animation:pulseGreen 2s ease-in-out infinite; }
.mega-header-cta { font-size:12.5px; font-weight:500; color:var(--mute); display:inline-flex; align-items:center; gap:5px; transition:color .15s,gap .15s; }
.mega-header-cta:hover { color:var(--p-600); gap:8px; }
.mega-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:12px; }
.mega-card { display:flex; align-items:flex-start; gap:12px; padding:13px 15px; border-radius:12px; cursor:pointer; text-decoration:none; color:inherit; transition:background .18s,transform .18s,box-shadow .18s,border-color .18s; border:1px solid transparent; position:relative; overflow:hidden; }
.mega-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(124,53,238,0.04),transparent 60%); opacity:0; transition:opacity .2s; }
.mega-card:hover { background:var(--paper-soft); border-color:var(--line); transform:translateY(-1px); box-shadow:0 2px 10px rgba(91,31,160,0.06),0 6px 20px rgba(20,9,31,0.04); }
.mega-card:hover::before { opacity:1; }
.mega-icon { width:36px; height:36px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:17px; position:relative; z-index:1; transition:transform .18s; }
.mega-card:hover .mega-icon { transform:scale(1.08); }
.mega-icon.c-violet { background:linear-gradient(135deg,var(--p-100),var(--p-50)); }
.mega-icon.c-gold   { background:linear-gradient(135deg,#FEF9C3,#FFFDE7); }
.mega-icon.c-blue   { background:linear-gradient(135deg,#DBEAFE,#EFF6FF); }
.mega-icon.c-green  { background:linear-gradient(135deg,#DCFCE7,#F0FDF4); }
.mega-icon.c-pink   { background:linear-gradient(135deg,#FCE7F3,#FDF4FF); }
.mega-icon.c-teal   { background:linear-gradient(135deg,#CCFBF1,#F0FDFA); }
.mega-icon.c-orange { background:linear-gradient(135deg,#FFEDD5,#FFF7ED); }
.mega-card-body { flex:1; min-width:0; position:relative; z-index:1; }
.mega-card-name { font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:3px; line-height:1.3; transition:color .15s; }
.mega-card:hover .mega-card-name { color:var(--p-700); }
.mega-card-desc { font-size:12px; color:var(--mute); line-height:1.45; }
.mega-card.mega-featured { grid-column:1/-1; background:linear-gradient(135deg,var(--p-50),rgba(247,243,255,0.6) 50%,rgba(247,204,24,0.05)); border-color:var(--line); align-items:center; padding:14px 18px; }
.mega-card.mega-featured:hover { background:linear-gradient(135deg,var(--p-100),rgba(247,243,255,0.8) 50%,rgba(247,204,24,0.08)); border-color:var(--p-200); box-shadow:0 4px 20px rgba(91,31,160,0.09),0 8px 32px rgba(20,9,31,0.05); }
.mega-card.mega-featured .mega-icon { width:40px; height:40px; font-size:19px; background:linear-gradient(135deg,var(--p-200),var(--p-100)); }
.mega-featured-badge { margin-left:auto; flex-shrink:0; font-family:var(--mono); font-size:10px; font-weight:700; color:var(--p-600); text-transform:uppercase; letter-spacing:.06em; background:var(--p-100); border:1px solid var(--p-200); padding:3px 10px; border-radius:100px; }
.mega-featured-arrow { color:var(--p-400); flex-shrink:0; margin-left:10px; font-size:16px; transition:transform .18s; }
.mega-card.mega-featured:hover .mega-featured-arrow { transform:translateX(3px); }

/* ════════ SECTION BASE ════════ */
.section { padding:110px 0; position:relative; }
.section-eyebrow { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--p-600); margin-bottom:16px; }
.section-eyebrow .se-orb { width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg,var(--p-500),var(--p-700)); display:inline-flex; align-items:center; justify-content:center; color:var(--g-500); font-size:10px; }
.section-h2 { font-size:clamp(34px,4.4vw,56px); font-weight:700; line-height:1.02; letter-spacing:-.038em; color:var(--ink); margin-bottom:18px; max-width:22ch; }
.section-h2.center { margin:0 auto 18px; text-align:center; }
.section-h2 .grad-acc { background:linear-gradient(120deg,var(--p-600),var(--p-400)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.section-h2 .gold-acc { position:relative; display:inline-block; z-index:1; }
.section-h2 .gold-acc::before { content:''; position:absolute; left:-6px; right:-6px; bottom:6px; height:30%; background:var(--g-500); z-index:-1; border-radius:4px; transform:skewX(-6deg); }
.section-sub { font-size:18px; color:var(--mute); line-height:1.55; max-width:58ch; }
.section-sub.center { margin:0 auto; text-align:center; }

/* ════════ REVEAL ════════ */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1); }
.reveal.revealed { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.08s; }
.reveal-d2 { transition-delay:.16s; }
.reveal-d3 { transition-delay:.24s; }
.reveal-d4 { transition-delay:.32s; }
.reveal-scale { opacity:0; transform:scale(.94); transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1); }
.reveal-scale.revealed { opacity:1; transform:scale(1); }

/* ════════ BUTTONS ════════ */
.activation-form { background:var(--paper); border:1.5px solid var(--line); border-radius:16px; padding:7px 7px 7px 18px; display:flex; align-items:center; box-shadow:0 4px 24px rgba(124,53,238,0.06),0 1px 0 rgba(255,255,255,0.8) inset; max-width:520px; transition:border-color .2s,box-shadow .2s,transform .2s; }
.activation-form:focus-within { border-color:var(--p-500); box-shadow:0 0 0 4px rgba(124,53,238,0.14),0 4px 24px rgba(124,53,238,0.15); transform:translateY(-1px); }
.activation-icon { width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,var(--p-100),var(--p-50)); border:1px solid var(--p-200); display:flex; align-items:center; justify-content:center; color:var(--p-600); flex-shrink:0; margin-right:12px; }
.activation-form input { flex:1; border:none; outline:none; font-family:var(--f); font-size:15px; background:transparent; color:var(--text); font-weight:500; min-width:0; }
.activation-form input::placeholder { color:var(--dim); font-weight:400; }
.activation-btn { background:var(--ink); color:white; padding:12px 20px; border-radius:11px; font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition:background .15s; cursor:pointer; border:none; font-family:var(--f); }
.activation-btn:hover { background:var(--p-700); }
.activation-btn .spark-orb, .btn-primary-lg .spark-orb, .fb-btn .spark-orb { width:18px; height:18px; border-radius:50%; background:conic-gradient(from 0deg,var(--g-500),var(--g-400),var(--g-500)); display:inline-flex; align-items:center; justify-content:center; color:var(--ink); font-size:10px; font-weight:800; animation:spin 3s linear infinite; }

.btn-primary-lg { padding:13px 28px; border-radius:100px; background:linear-gradient(135deg,var(--p-700),var(--p-500)); color:white; font-size:15px; font-weight:600; display:inline-flex; align-items:center; gap:8px; transition:transform .15s,box-shadow .2s; cursor:pointer; border:none; font-family:var(--f); }
.btn-primary-lg:hover { transform:translateY(-2px); box-shadow:0 0 0 3px rgba(124,53,238,0.22),0 10px 32px rgba(91,31,160,0.35); }
.btn-ghost-lg { padding:12px 24px; border-radius:100px; border:1.5px solid var(--line); color:var(--text-2); font-size:15px; font-weight:500; display:inline-flex; align-items:center; gap:7px; transition:border-color .15s,color .15s,background .15s; cursor:pointer; background:var(--paper); font-family:var(--f); }
.btn-ghost-lg:hover { border-color:var(--p-300); color:var(--p-600); background:var(--p-50); }

/* Trust pills */
.t-pill { display:inline-flex; align-items:center; gap:5px; background:var(--g-100); border:1px solid rgba(247,204,24,0.45); color:var(--g-700); font-weight:600; padding:5px 11px; border-radius:100px; font-size:12.5px; }
.t-meta { color:var(--mute); display:flex; align-items:center; gap:5px; }
.t-meta .ck { color:var(--green); font-weight:700; }

/* ════════ TRUST BAR ════════ */
.trust-bar { padding:36px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); }
.trust-inner { display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.trust-label { font-size:12.5px; color:var(--dim); font-weight:600; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.trust-logos { display:flex; align-items:center; gap:32px; flex:1; justify-content:center; flex-wrap:wrap; }
.tl-item { display:inline-flex; align-items:center; gap:7px; font-size:16px; font-weight:600; color:var(--mute); opacity:.78; transition:opacity .2s; }
.tl-item:hover { opacity:1; }
.tl-dot { width:8px; height:8px; border-radius:50%; }
.trust-rating { display:flex; align-items:center; gap:8px; }
.tr-stars { color:var(--g-500); font-size:14px; letter-spacing:1px; }
.tr-text { font-size:13px; color:var(--text); }
.tr-text strong { font-weight:700; }

/* ════════ METRICS STRIP ════════ */
.metrics-strip { padding:72px 0; background:var(--paper); border-bottom:1px solid var(--line); }
.metrics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.metric { position:relative; padding:0 24px; border-right:1px solid var(--line); }
.metric:last-child { border-right:none; }
.metric-eyebrow { font-family:var(--mono); font-size:11px; color:var(--p-600); text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; font-weight:600; display:inline-flex; align-items:center; gap:5px; }
.metric-eyebrow::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--green); animation:pulseGreen 2s infinite; }
.metric-val { font-size:52px; font-weight:700; color:var(--ink); letter-spacing:-.045em; line-height:.95; }
.metric-val .gold-num { position:relative; display:inline-block; z-index:1; }
.metric-val .gold-num::after { content:''; position:absolute; left:2px; right:2px; bottom:4px; height:18%; background:var(--g-500); z-index:-1; opacity:.55; border-radius:3px; }
.metric-desc { font-size:14px; color:var(--mute); margin-top:12px; line-height:1.5; max-width:22ch; }

/* ════════ CONCRETE FEATURES ════════ */
.concrete-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:56px; }
.cf-card { background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:28px; position:relative; overflow:hidden; transition:transform .25s,box-shadow .25s,border-color .25s; grid-column:span 2; }
.cf-card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--p-200); }
.cf-glow { position:absolute; top:-50px; right:-50px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,rgba(124,53,238,0.10),transparent 70%); pointer-events:none; opacity:.7; transition:opacity .3s; }
.cf-card:hover .cf-glow { opacity:1; }
.cf-card .cf-ico { width:44px; height:44px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:14px; border:1px solid; }
.cf-ico.purple { background:linear-gradient(135deg,var(--p-100),var(--p-50)); color:var(--p-600); border-color:var(--p-200); }
.cf-ico.gold   { background:linear-gradient(135deg,var(--g-200),var(--g-100)); color:var(--g-700); border-color:rgba(247,204,24,0.4); }
.cf-ico.green  { background:linear-gradient(135deg,#BBF7D0,var(--green-bg)); color:var(--green); border-color:rgba(22,163,74,0.3); }
.cf-ico.pink   { background:linear-gradient(135deg,#FCE7F3,#FDF2F8); color:var(--pink); border-color:#F9A8D4; }
.cf-ico.blue   { background:linear-gradient(135deg,#DBEAFE,#EFF6FF); color:var(--blue); border-color:#BFDBFE; }
.cf-name { font-family:var(--mono); font-size:10.5px; font-weight:600; color:var(--mute); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.cf-card h3 { font-size:19px; font-weight:700; color:var(--ink); margin-bottom:10px; letter-spacing:-.015em; line-height:1.2; }
.cf-card p { font-size:14px; color:var(--mute); line-height:1.55; }
.cf-stat-row { margin-top:16px; display:flex; align-items:baseline; gap:6px; padding:10px 12px; background:var(--p-50); border-radius:10px; border:1px solid var(--p-100); }
.cf-stat-num { font-size:20px; font-weight:700; color:var(--p-700); letter-spacing:-.5px; }
.cf-stat-label { font-size:12.5px; color:var(--p-600); font-weight:500; }
.cf-stat-tag { margin-left:auto; font-family:var(--mono); font-size:10px; font-weight:700; color:var(--g-700); background:var(--g-100); padding:2px 7px; border-radius:100px; }

/* ════════ STEPS ════════ */
.steps-section { padding:110px 0; background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:56px; }
.step-card { position:relative; padding:28px 26px; background:var(--paper); border:1px solid var(--line); border-radius:18px; transition:transform .2s,box-shadow .2s,border-color .2s; }
.step-card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--p-200); }
.step-num { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--p-100),var(--p-50)); color:var(--p-700); font-family:var(--mono); font-size:16px; font-weight:700; margin-bottom:18px; border:1px solid var(--p-200); }
.step-card h3 { font-size:17px; font-weight:700; color:var(--ink); margin-bottom:8px; letter-spacing:-.015em; }
.step-card p { font-size:14px; color:var(--mute); line-height:1.55; }
.step-time { display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-family:var(--mono); font-size:11.5px; color:var(--dim); background:var(--line-soft); padding:4px 10px; border-radius:100px; }

/* ════════ TESTIMONIALS ════════ */
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; }
.testi-card { background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:30px 28px; position:relative; transition:transform .2s,box-shadow .2s,border-color .2s; }
.testi-card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--p-200); }
.testi-card.featured { background:linear-gradient(180deg,var(--p-50),var(--paper)); border-color:var(--p-200); }
.t-stars { color:var(--g-500); font-size:15px; margin-bottom:14px; letter-spacing:2px; }
.t-result { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,var(--g-100),rgba(247,204,24,0.08)); border:1px solid rgba(247,204,24,0.4); color:var(--g-700); font-family:var(--mono); font-size:12px; font-weight:700; padding:5px 11px; border-radius:8px; margin-bottom:18px; }
.t-quote { font-size:15px; color:var(--ink); line-height:1.6; margin-bottom:22px; }
.t-author { display:flex; align-items:center; gap:12px; padding-top:18px; border-top:1px solid var(--line); }
.t-av { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--p-600),var(--p-400)); color:white; font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.t-name { font-size:14.5px; font-weight:700; color:var(--ink); }
.t-role { font-size:12.5px; color:var(--mute); margin-top:2px; }

/* ════════ PRICING ════════ */
.pricing-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:56px; }
.price-card { background:var(--paper); border:1.5px solid var(--line); border-radius:20px; padding:32px 26px; position:relative; transition:transform .2s,box-shadow .2s,border-color .2s; }
.price-card:hover { transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--p-200); }
.price-card.pop { border-color:var(--p-500); background:linear-gradient(180deg,var(--p-50),var(--paper)); transform:scale(1.03); box-shadow:0 16px 48px rgba(91,31,160,0.14); }
.price-card.pop::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--g-500),var(--g-400),var(--g-500)); border-radius:20px 20px 0 0; }
.pop-badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--g-500),var(--g-400)); color:var(--ink); font-size:11px; font-weight:700; padding:5px 16px; border-radius:100px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; box-shadow:0 4px 16px rgba(247,204,24,0.45); }
.pr-name { font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--p-600); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.pr-credits-row { display:flex; align-items:baseline; gap:6px; margin-bottom:4px; }
.pr-credits-big { font-size:34px; font-weight:700; letter-spacing:-1px; color:var(--ink); line-height:1; }
.pr-credits-unit { font-size:14px; color:var(--mute); }
.pr-desc { font-size:13px; color:var(--mute); margin-bottom:20px; }
.pr-price-row { display:flex; align-items:baseline; gap:4px; margin-bottom:6px; }
.pr-eur { font-size:34px; font-weight:700; letter-spacing:-.5px; color:var(--p-700); line-height:1; }
.pr-per { font-size:13px; color:var(--dim); }
.pr-save { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:11.5px; font-weight:700; background:var(--g-100); color:var(--g-700); padding:3px 9px; border-radius:100px; margin-bottom:22px; }
.pr-btn { display:block; width:100%; text-align:center; padding:12px; border-radius:11px; font-size:14px; font-weight:600; border:1.5px solid var(--ink); background:transparent; color:var(--ink); margin-bottom:22px; transition:all .15s; cursor:pointer; font-family:var(--f); }
.pr-btn:hover { background:var(--ink); color:white; }
.price-card.pop .pr-btn { background:var(--ink); color:white; }
.pr-feats { display:flex; flex-direction:column; gap:9px; }
.pf-row { display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:var(--text); }
.pf-row::before { content:'✓'; flex-shrink:0; width:16px; height:16px; border-radius:50%; font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; margin-top:2px; background:var(--g-100); color:var(--g-700); }
.no-sub-pill { display:inline-flex; align-items:center; gap:6px; background:var(--p-50); border:1px solid var(--p-200); color:var(--p-700); font-family:var(--mono); font-size:12.5px; font-weight:600; padding:6px 14px; border-radius:100px; margin-bottom:16px; }
.no-sub-pill::before { content:'✓'; color:var(--g-700); background:var(--g-100); width:16px; height:16px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; }
.free-trial-band { margin-top:40px; display:flex; align-items:center; justify-content:center; gap:20px; background:var(--paper); border:1.5px solid var(--p-200); border-radius:18px; padding:20px 36px; box-shadow:var(--sh-md); flex-wrap:wrap; }
.fb-gift { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--g-500),var(--g-400)); display:flex; align-items:center; justify-content:center; font-size:18px; box-shadow:var(--sh-gold); }
.fb-text { font-size:15px; font-weight:500; color:var(--text); }
.fb-text strong { color:var(--p-700); font-weight:700; }
.fb-btn { background:var(--ink); color:white; padding:11px 22px; border-radius:11px; font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:none; font-family:var(--f); }

/* ════════ CTA FINAL ════════ */
.cta-final-wrap { padding:40px 32px 80px; }
.cta-final { position:relative; border-radius:32px; overflow:hidden; background:var(--paper); border:1px solid var(--line); padding:72px; max-width:1280px; margin:0 auto; box-shadow:var(--sh-xl); }
.cta-final-aura { position:absolute; inset:0; background:radial-gradient(40% 60% at 15% 50%,rgba(247,204,24,0.18),transparent 60%),radial-gradient(50% 50% at 85% 30%,rgba(124,53,238,0.12),transparent 60%); }
.cta-final-grid { position:absolute; inset:0; opacity:.5; background-image:linear-gradient(rgba(124,53,238,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(124,53,238,0.05) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent 80%); mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent 80%); }
.cta-grid { position:relative; display:grid; grid-template-columns:1fr 280px; gap:56px; align-items:center; }
.cta-eyebrow { display:inline-flex; align-items:center; gap:7px; background:var(--paper); border:1px solid var(--line); border-radius:100px; padding:5px 14px 5px 6px; font-family:var(--mono); font-size:12px; color:var(--p-700); font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:22px; box-shadow:var(--sh-sm); }
.cta-eyebrow-dot { width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,var(--g-500),var(--g-400)); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; }
.cta-h2 { font-size:clamp(36px,4.5vw,58px); font-weight:700; line-height:1.05; letter-spacing:-.038em; margin-bottom:18px; color:var(--ink); }
.cta-h2 .y-bg { position:relative; display:inline-block; z-index:1; }
.cta-h2 .y-bg::before { content:''; position:absolute; left:-6px; right:-6px; bottom:6px; height:30%; background:var(--g-500); z-index:-1; border-radius:4px; transform:skewX(-6deg); }
.cta-sub { font-size:17px; color:var(--mute); line-height:1.5; max-width:50ch; margin-bottom:28px; }
.cta-guarantee { display:flex; align-items:center; gap:16px; font-size:13px; color:var(--mute); margin-top:16px; flex-wrap:wrap; }
.cta-guarantee strong { color:var(--text); font-weight:600; }
.cta-guarantee-pill { display:inline-flex; align-items:center; gap:5px; background:var(--g-100); color:var(--g-700); font-weight:600; padding:4px 10px; border-radius:100px; font-size:12px; border:1px solid rgba(247,204,24,0.4); }
.cta-mascotte { position:relative; width:280px; height:360px; display:flex; align-items:flex-end; justify-content:center; }
.cta-mascotte::before { content:''; position:absolute; inset:10% -10% 0 -10%; background:radial-gradient(50% 40% at 50% 60%,rgba(247,204,24,0.35),transparent 65%),radial-gradient(70% 70% at 50% 50%,rgba(124,53,238,0.25),transparent 70%); filter:blur(8px); animation:pulseGlow 5s ease-in-out infinite; }
.cta-mascotte-img { position:relative; width:100%; height:100%; animation:floatBob 5s ease-in-out infinite; }
.cta-mascotte-img img { width:100%; height:100%; object-fit:contain; object-position:bottom; }

/* ════════ FOOTER ════════ */
.footer { background:linear-gradient(180deg,var(--paper),var(--p-50)); border-top:1px solid var(--p-100); padding:80px 0 32px; color:var(--text-2); position:relative; overflow:hidden; }
.footer::before { content:''; position:absolute; top:-100px; right:10%; width:400px; height:400px; background:radial-gradient(circle,rgba(247,204,24,0.08),transparent 60%); pointer-events:none; }
.footer::after  { content:''; position:absolute; bottom:-100px; left:10%; width:400px; height:400px; background:radial-gradient(circle,rgba(124,53,238,0.08),transparent 60%); pointer-events:none; }
.f-inner { position:relative; }
.f-grid { display:grid; grid-template-columns:2.4fr 1fr 1fr 1fr; gap:48px; }
.f-brand img:not(.f-mascotte) { height:40px; margin-bottom:18px; }
.f-brand p { font-size:14.5px; color:var(--mute); line-height:1.6; max-width:36ch; margin-bottom:22px; }
.f-social { display:flex; gap:10px; }
.f-s-icon { width:36px; height:36px; border-radius:50%; background:var(--paper); border:1px solid var(--p-100); display:flex; align-items:center; justify-content:center; color:var(--p-600); font-weight:700; transition:all .15s; box-shadow:var(--sh-sm); }
.f-s-icon:hover { background:var(--p-600); color:white; border-color:var(--p-600); transform:translateY(-1px); }
.f-col h4 { font-size:12px; font-weight:700; color:var(--p-700); margin-bottom:16px; text-transform:uppercase; letter-spacing:.08em; font-family:var(--mono); }
.f-col a { display:block; font-size:14px; color:var(--mute); margin-bottom:11px; transition:color .15s; }
.f-col a:hover { color:var(--p-700); }
.f-status-bar { margin-top:56px; background:var(--paper); border:1px solid var(--p-100); border-radius:16px; padding:16px 22px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; box-shadow:var(--sh-sm); }
.f-stat-l { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.f-stat-item { font-size:12.5px; color:var(--mute); display:flex; align-items:center; gap:5px; font-family:var(--mono); }
.f-stat-item strong { color:var(--text); font-weight:700; }
.f-stat-dot { width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulseGreen 1.5s infinite; }
.f-bottom { margin-top:32px; padding-top:22px; border-top:1px solid var(--p-100); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.f-copy { font-size:12.5px; color:var(--dim); }
.f-tag { font-size:11.5px; color:var(--mute); display:flex; align-items:center; gap:6px; font-family:var(--mono); }
.f-made { font-size:12px; color:var(--mute); display:flex; align-items:center; gap:5px; }
.f-made-heart { color:var(--g-500); }

/* ════════ BLOG ════════ */
.blog-hero { padding:88px 0 64px; text-align:center; position:relative; overflow:hidden; }
.blog-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 80% at 50% 0%, rgba(123,53,212,.08) 0%, transparent 70%),radial-gradient(ellipse 40% 50% at 80% 60%, rgba(247,204,24,.06) 0%, transparent 60%); pointer-events:none; }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.article-card { background:var(--paper); border:1px solid var(--line); border-radius:20px; overflow:hidden; transition:transform .2s,box-shadow .2s,border-color .2s; display:flex; flex-direction:column; }
.article-card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--p-200); }
.article-card-img { aspect-ratio:16/9; background:linear-gradient(135deg,var(--p-100),var(--p-50)); position:relative; overflow:hidden; }
.article-card-img img { width:100%; height:100%; object-fit:cover; }
.article-card-img-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:40px; }
.article-card-body { padding:24px; flex:1; display:flex; flex-direction:column; }
.article-card-cat { font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--p-600); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
.article-card-title { font-size:18px; font-weight:700; color:var(--ink); line-height:1.3; letter-spacing:-.015em; margin-bottom:10px; flex:1; }
.article-card-title a:hover { color:var(--p-700); }
.article-card-excerpt { font-size:14px; color:var(--mute); line-height:1.55; margin-bottom:16px; }
.article-card-meta { display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--line); }
.article-card-author { font-size:12.5px; color:var(--mute); }
.article-card-date { font-family:var(--mono); font-size:11.5px; color:var(--dim); }
.article-card-read { font-size:12.5px; font-weight:600; color:var(--p-600); }

/* Single post */
.single-hero { padding:64px 0 40px; }
.single-cat { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--p-600); text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; display:inline-flex; align-items:center; gap:6px; }
.single-title { font-size:clamp(32px,4vw,52px); font-weight:700; line-height:1.06; letter-spacing:-.035em; color:var(--ink); margin-bottom:20px; max-width:20ch; }
.single-meta { display:flex; align-items:center; gap:16px; font-size:13.5px; color:var(--mute); margin-bottom:32px; flex-wrap:wrap; }
.single-layout { display:grid; grid-template-columns:1fr 300px; gap:64px; align-items:start; padding-bottom:80px; }
.single-content { font-size:16.5px; line-height:1.75; color:var(--text); }
.single-content h2 { font-size:clamp(22px,2.8vw,30px); font-weight:700; color:var(--ink); margin:48px 0 16px; letter-spacing:-.02em; line-height:1.2; }
.single-content h3 { font-size:clamp(18px,2.2vw,22px); font-weight:700; color:var(--ink); margin:36px 0 12px; }
.single-content p { margin-bottom:20px; }
.single-content strong { color:var(--ink); font-weight:700; }
.single-content a { color:var(--p-600); text-decoration:underline; text-underline-offset:3px; }
.single-content ul, .single-content ol { padding-left:24px; margin-bottom:20px; }
.single-content li { margin-bottom:8px; }
.single-content blockquote { border-left:4px solid var(--p-400); padding:20px 24px; background:var(--p-50); border-radius:0 12px 12px 0; margin:28px 0; font-style:italic; color:var(--text-2); font-size:17px; }
.single-content img { border-radius:16px; box-shadow:var(--sh-md); margin:28px 0; }
.single-sidebar { position:sticky; top:80px; }
.sidebar-cta { background:linear-gradient(135deg,var(--p-700),var(--p-500)); border-radius:20px; padding:28px 24px; color:white; }
.sidebar-cta-title { font-size:18px; font-weight:700; margin-bottom:10px; line-height:1.3; }
.sidebar-cta-sub { font-size:13px; opacity:.8; margin-bottom:20px; line-height:1.5; }
.sidebar-cta-btn { display:block; background:white; color:var(--p-700); text-align:center; padding:12px; border-radius:11px; font-weight:700; font-size:14px; transition:background .15s; }
.sidebar-cta-btn:hover { background:var(--g-200); }

/* ════════ PAGE ════════ */
.page-hero { padding:80px 0 56px; }
.page-title { font-size:clamp(36px,5vw,64px); font-weight:700; line-height:1.0; letter-spacing:-.04em; color:var(--ink); margin-bottom:20px; }
.page-content { max-width:780px; padding-bottom:80px; }
.page-content p { font-size:17px; line-height:1.7; color:var(--text); margin-bottom:20px; }
.page-content h2 { font-size:28px; font-weight:700; color:var(--ink); margin:40px 0 14px; letter-spacing:-.02em; }

/* ════════ 404 ════════ */
.not-found { min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:80px 0; }
.not-found-code { font-size:clamp(80px,14vw,180px); font-weight:800; color:var(--p-200); letter-spacing:-.05em; line-height:1; margin-bottom:0; }
.not-found-title { font-size:clamp(24px,3vw,36px); font-weight:700; color:var(--ink); margin-bottom:14px; }
.not-found-sub { font-size:17px; color:var(--mute); margin-bottom:32px; max-width:44ch; }

/* ════════ PAGINATION ════════ */
.pagination { display:flex; align-items:center; justify-content:center; gap:8px; padding:48px 0; }
.page-numbers { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; font-size:14px; font-weight:600; color:var(--mute); border:1px solid var(--line); background:var(--paper); transition:all .15s; }
.page-numbers:hover, .page-numbers.current { background:var(--p-600); color:white; border-color:var(--p-600); }

/* ════════ RESPONSIVE ════════ */
@media (max-width:1024px) {
  .f-grid { grid-template-columns:1fr 1fr; }
  .metrics-grid { grid-template-columns:1fr 1fr; }
  .metric { border-right:none; padding:0; }
  .concrete-grid { grid-template-columns:repeat(2,1fr); }
  .cf-card { grid-column:span 1; }
  .steps-grid { grid-template-columns:repeat(2,1fr); }
  .testi-grid { grid-template-columns:1fr 1fr; }
  .pricing-grid { grid-template-columns:repeat(3,1fr); }
  .cta-grid { grid-template-columns:1fr; }
  .cta-mascotte { display:none; }
  .blog-grid { grid-template-columns:1fr 1fr; }
  .single-layout { grid-template-columns:1fr; }
  .single-sidebar { display:none; }
  .mega-panel { width:720px; }
}
@media (max-width:768px) {
  .nav-links { display:none; }
  .mega-panel { display:none; }
  .f-grid { grid-template-columns:1fr; }
  .testi-grid, .pricing-grid, .blog-grid { grid-template-columns:1fr; }
  .price-card.pop { transform:scale(1); }
  .section { padding:64px 0; }
  .w { padding:0 20px; }
  .cta-final { padding:40px 24px; }
  .steps-grid { grid-template-columns:1fr; }
  .concrete-grid { grid-template-columns:1fr; }
}

/* ════════ MEGA MENU — ENTERPRISE COLUMN LABELS ════════ */
.mega-col-label {
  grid-column:span 1;
  font-family:var(--mono); font-size:10px; font-weight:700;
  color:var(--p-600); text-transform:uppercase; letter-spacing:.1em;
  padding:10px 15px 4px;
  display:flex; align-items:center; gap:6px;
  pointer-events:none; user-select:none;
}
.mega-col-label::after {
  content:''; flex:1; height:1px; background:var(--line-soft);
}

/* ════════ AGENCY SECTION ════════ */
.agency-section {
  padding:110px 0; position:relative;
  background:var(--paper-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.agency-aura {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:1200px; height:100%;
  background:
    radial-gradient(40% 50% at 80% 50%,rgba(124,53,238,0.08),transparent 60%),
    radial-gradient(35% 40% at 20% 50%,rgba(247,204,24,0.07),transparent 60%);
  pointer-events:none;
}
.agency-inner {
  display:grid; grid-template-columns:1fr 1fr; gap:80px;
  align-items:center; position:relative;
}
.agency-eyebrow-tag {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,var(--p-100),var(--p-50));
  border:1px solid var(--p-200); border-radius:100px;
  padding:5px 14px 5px 6px;
  font-family:var(--mono); font-size:11px; font-weight:700;
  color:var(--p-600); text-transform:uppercase; letter-spacing:.07em;
  margin-bottom:20px; width:fit-content;
}
.agency-eyebrow-tag .tag-orb {
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg,var(--p-500),var(--p-700));
  color:white; font-size:11px;
  display:flex; align-items:center; justify-content:center;
}
.agency-h2 {
  font-size:clamp(32px,4vw,52px); font-weight:700; line-height:1.02;
  letter-spacing:-.038em; color:var(--ink); margin-bottom:16px;
}
.agency-h2 .grad-acc {
  background:linear-gradient(120deg,var(--p-600),var(--p-400));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.agency-sub { font-size:16.5px; color:var(--mute); line-height:1.6; max-width:46ch; margin-bottom:32px; }
.agency-features { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:36px; }
.agency-feat {
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  transition:border-color .18s,box-shadow .18s;
}
.agency-feat:hover { border-color:var(--p-200); box-shadow:0 2px 12px rgba(91,31,160,0.06); }
.agency-feat-icon {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0;
}
.agency-feat-text { font-size:13px; font-weight:600; color:var(--text); line-height:1.35; }
.agency-feat-text span { display:block; font-weight:400; color:var(--mute); font-size:11.5px; margin-top:2px; }
.agency-ctas { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.agency-cta-primary {
  padding:13px 24px; border-radius:12px;
  background:linear-gradient(135deg,var(--p-700),var(--p-500));
  color:white; font-size:14.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s,box-shadow .2s;
  font-family:var(--f); cursor:pointer; border:none;
}
.agency-cta-primary:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(91,31,160,0.35); }
.agency-cta-ghost {
  padding:12px 20px; border-radius:12px;
  border:1.5px solid var(--line); background:var(--paper);
  color:var(--text-2); font-size:14.5px; font-weight:500;
  display:inline-flex; align-items:center; gap:7px;
  transition:border-color .15s,color .15s;
  font-family:var(--f); cursor:pointer; text-decoration:none;
}
.agency-cta-ghost:hover { border-color:var(--p-300); color:var(--p-600); }
.agency-free-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--g-100); border:1px solid rgba(247,204,24,0.5);
  color:var(--g-700); font-weight:700; font-size:12px;
  padding:4px 11px; border-radius:100px;
}
/* Agency mockup */
.agency-right { position:relative; }
.agency-mockup { position:relative; }
.agency-mockup-card {
  background:var(--paper); border:1px solid var(--line);
  border-radius:20px; box-shadow:var(--sh-xl); overflow:hidden;
  animation:floatBob 7s ease-in-out infinite;
}
.agency-mockup-bar {
  background:linear-gradient(135deg,var(--p-700),var(--p-500));
  padding:14px 20px; display:flex; align-items:center; justify-content:space-between;
}
.agency-mockup-bar-title { color:rgba(255,255,255,0.92); font-size:13px; font-weight:700; display:flex; align-items:center; gap:8px; }
.agency-mockup-bar-dots { display:flex; gap:5px; }
.agency-mockup-bar-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.28); }
.agency-mockup-body { padding:18px 20px; }
.agency-mockup-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.agency-stat-card { background:var(--paper-soft); border:1px solid var(--line-soft); border-radius:10px; padding:12px; text-align:center; }
.agency-stat-num { font-size:24px; font-weight:700; color:var(--ink); letter-spacing:-.04em; line-height:1; margin-bottom:4px; }
.agency-stat-label { font-size:10px; color:var(--mute); font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.agency-client-list { display:flex; flex-direction:column; gap:7px; }
.agency-client-row {
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  background:var(--paper-soft); border:1px solid var(--line-soft); border-radius:10px;
}
.agency-client-avatar { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.agency-client-name { font-size:13px; font-weight:600; color:var(--ink); flex:1; min-width:0; }
.agency-client-score { font-size:11px; font-weight:700; padding:2px 8px; border-radius:100px; font-family:var(--mono); white-space:nowrap; flex-shrink:0; }
.agency-client-score.up { background:var(--green-bg); color:var(--green); }
.agency-client-score.mid { background:var(--g-100); color:var(--g-700); }
.agency-mockup-badge {
  position:absolute; bottom:-16px; left:-22px;
  background:var(--paper); border:1px solid var(--line);
  border-radius:14px; padding:11px 16px; box-shadow:var(--sh-lg);
  display:flex; align-items:center; gap:10px;
  animation:floatRot 6s ease-in-out infinite 1s;
}
.agency-mockup-badge-icon {
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,var(--g-500),var(--g-400));
  color:var(--ink); font-size:17px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-gold); flex-shrink:0;
}
.agency-mockup-badge-text { font-size:13px; font-weight:600; color:var(--ink); line-height:1.35; }
.agency-mockup-badge-text span { display:block; font-size:11.5px; font-weight:400; color:var(--mute); }

@media (max-width:1024px) {
  .agency-inner { grid-template-columns:1fr; gap:48px; }
  .agency-right { display:none; }
}
@media (max-width:768px) {
  .agency-section { padding:64px 0; }
  .agency-features { grid-template-columns:1fr; }
}

/* ════════ FEATURE PAGES — shared styles ════════ */
.feat-hero { padding:56px 0 80px; position:relative; overflow:hidden; }
.feat-hero-aura { position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:1200px;height:600px;background:radial-gradient(35% 35% at 30% 50%,rgba(247,204,24,0.16),transparent 60%),radial-gradient(40% 45% at 70% 40%,rgba(124,53,238,0.14),transparent 65%);filter:blur(2px);pointer-events:none; }
.feat-hero-grid-bg { position:absolute;inset:0;background-image:linear-gradient(rgba(124,53,238,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(124,53,238,0.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,black,transparent 80%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,black,transparent 80%);pointer-events:none; }
.feat-hero-inner { position:relative;display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:center;min-height:480px; }
.feat-hero-left { animation:fadeUp .7s ease-out; }
.hero-module-badge { display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:5px 16px 5px 6px;font-size:13px;font-weight:500;margin-bottom:24px;box-shadow:var(--sh-sm);width:fit-content; }
.hero-module-icon { width:24px;height:24px;border-radius:50%;color:var(--ink);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center; }
.hero-module-label { font-family:var(--mono);font-size:11px;font-weight:700;color:var(--p-600);text-transform:uppercase;letter-spacing:.06em; }
.feat-hero-h1 { font-size:clamp(36px,4.8vw,64px);font-weight:700;line-height:1.0;letter-spacing:-.04em;color:var(--ink);margin-bottom:20px; }
.feat-hero-h1 .grad { background:linear-gradient(120deg,var(--p-600),var(--p-400) 50%,var(--p-600));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shimmer 6s ease-in-out infinite; }
.feat-hero-h1 .y-bg { position:relative;display:inline-block;z-index:1; }
.feat-hero-h1 .y-bg::before { content:'';position:absolute;left:-4px;right:-4px;bottom:4px;height:36%;background:var(--g-500);z-index:-1;border-radius:4px;transform:skewX(-6deg); }
.feat-hero-sub { font-size:17px;color:var(--mute);line-height:1.55;max-width:48ch;margin-bottom:28px; }
.feat-hero-sub strong { color:var(--text);font-weight:600; }
.feat-hero-ctas { display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px; }
.feat-hero-pills { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.h-pill { display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--mute); }
.h-pill .ck { color:var(--green);font-weight:700; }
.feat-hero-right { position:relative;height:440px; }
.feat-mascotte-wrap { position:absolute;bottom:0;right:0;width:280px;height:360px;pointer-events:none;z-index:1; }
.feat-mascotte-halo { position:absolute;inset:-10% -20% -5% -20%;background:radial-gradient(50% 45% at 50% 60%,rgba(247,204,24,0.32),transparent 65%),radial-gradient(70% 70% at 50% 50%,rgba(124,53,238,0.22),transparent 70%);filter:blur(8px);animation:pulseGlow 5s ease-in-out infinite; }
.feat-mascotte-img { position:relative;width:100%;height:100%;animation:floatBob 6s ease-in-out infinite; }
.feat-mascotte-img img { width:100%;height:100%;object-fit:contain;object-position:bottom; }

/* Shared floating cards */
.hfc { position:absolute;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-lg);z-index:3;overflow:hidden; }

/* Pain section */
.pain-section { padding:80px 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.pain-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px; }
.pain-card { background:var(--red-bg);border:1px solid rgba(220,38,38,0.12);border-radius:20px;padding:28px;position:relative;overflow:hidden; }
.pain-card::before { content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),rgba(220,38,38,0.3)); }
.pain-icon { font-size:28px;margin-bottom:14px; }
.pain-title { font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px; }
.pain-desc { font-size:14px;color:var(--mute);line-height:1.55; }
.pain-stat { margin-top:12px;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--red);background:rgba(220,38,38,0.08);padding:4px 10px;border-radius:100px;display:inline-flex;align-items:center;gap:4px; }

/* Steps 3-col */
.steps-section-feat { padding:96px 0; }
.steps-3-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:56px;position:relative; }
.steps-3-grid::before { content:'';position:absolute;top:40px;left:calc(16.66% + 20px);right:calc(16.66% + 20px);height:2px;background:linear-gradient(90deg,var(--p-200),var(--p-400),var(--p-200));opacity:.5; }
.step-card-3 { background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:32px;text-align:center;position:relative;transition:transform .2s,box-shadow .2s; }
.step-card-3:hover { transform:translateY(-4px);box-shadow:var(--sh-lg); }
.step-num-3 { width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--p-500),var(--p-700));color:white;font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 8px 24px rgba(91,31,160,0.3); }
.step-title-3 { font-size:17px;font-weight:700;color:var(--ink);margin-bottom:10px; }
.step-desc-3 { font-size:14px;color:var(--mute);line-height:1.55; }
.step-badge-3 { display:inline-flex;align-items:center;gap:4px;margin-top:14px;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--p-600);background:var(--p-50);border:1px solid var(--p-100);padding:4px 10px;border-radius:100px; }

/* Benefits grid */
.benefits-section { padding:96px 0;background:var(--paper);border-top:1px solid var(--line); }
.benefits-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px; }
.benefit-card { background:var(--paper-soft);border:1px solid var(--line);border-radius:18px;padding:28px;transition:transform .2s,box-shadow .2s,border-color .2s; }
.benefit-card:hover { transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--p-200); }
.benefit-icon { width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px; }
.benefit-title { font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px; }
.benefit-desc { font-size:14px;color:var(--mute);line-height:1.55; }
.benefit-metric { margin-top:12px;font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--p-600);background:var(--p-50);border:1px solid var(--p-100);padding:4px 10px;border-radius:100px;display:inline-flex;align-items:center;gap:4px; }

/* Feature siblings nav */
.feat-nav { padding:80px 0;border-top:1px solid var(--line);background:var(--paper-soft); }
.feat-nav-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px; }
.feat-nav-card { display:flex;align-items:center;gap:14px;padding:18px 20px;background:var(--paper);border:1px solid var(--line);border-radius:16px;text-decoration:none;color:inherit;transition:border-color .18s,box-shadow .18s,transform .18s; }
.feat-nav-card:hover { border-color:var(--p-200);box-shadow:var(--sh-md);transform:translateY(-2px); }
.feat-nav-icon { width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0; }
.feat-nav-body { flex:1;min-width:0; }
.feat-nav-name { font-size:14px;font-weight:700;color:var(--ink); }
.feat-nav-desc { font-size:12px;color:var(--mute);margin-top:2px; }
.feat-nav-arrow { color:var(--dim);font-size:16px;transition:transform .15s;flex-shrink:0; }
.feat-nav-card:hover .feat-nav-arrow { transform:translateX(3px);color:var(--p-400); }

/* Responsive feature pages */
@media (max-width:1024px) {
  .feat-hero-inner { grid-template-columns:1fr; }
  .feat-hero-right { display:none; }
  .pain-grid,.steps-3-grid,.benefits-grid { grid-template-columns:1fr 1fr; }
  .feat-nav-grid { grid-template-columns:1fr 1fr; }
  .steps-3-grid::before { display:none; }
}
@media (max-width:768px) {
  .feat-hero { padding:40px 0 56px; }
  .steps-section-feat,.benefits-section,.feat-nav { padding:64px 0; }
  .pain-grid,.steps-3-grid,.benefits-grid,.feat-nav-grid { grid-template-columns:1fr; }
}

/* ════════ BLOG — LAYOUT WITH SIDEBAR ════════ */
.blg-layout { display:grid; grid-template-columns:1fr 296px; gap:48px; align-items:start; padding-bottom:80px; }
.blg-main {}

/* Category pills navigation */
.blg-cat-nav { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.blg-cat-pill { display:inline-flex; align-items:center; padding:7px 16px; border-radius:20px; font-size:13px; font-weight:600; border:1.5px solid var(--line); background:var(--paper); color:var(--mute); transition:all .15s; white-space:nowrap; text-decoration:none; }
.blg-cat-pill:hover { background:var(--p-50); border-color:var(--p-200); color:var(--p-600); }
.blg-cat-pill.active, .blg-cat-pill.all { background:var(--p-600); color:white; border-color:var(--p-600); }

/* Featured article */
.blg-featured { display:grid; grid-template-columns:1fr 1fr; background:var(--paper); border:1px solid var(--line); border-radius:24px; overflow:hidden; margin-bottom:36px; transition:box-shadow .2s; }
.blg-featured:hover { box-shadow:var(--sh-lg); }
.blg-featured-img { aspect-ratio:4/3; background:#f8f6ff; overflow:hidden; min-height:280px; display:flex; align-items:center; justify-content:center; }
.blg-featured-img img { width:100%; height:100%; object-fit:contain; display:block; }
.blg-featured-img-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:60px; }
.blg-featured-body { padding:36px; display:flex; flex-direction:column; justify-content:center; }
.blg-featured-eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.blg-featured-label { font-family:var(--mono); font-size:10px; font-weight:700; color:var(--p-600); text-transform:uppercase; letter-spacing:.1em; }
.blg-featured-title { font-size:clamp(20px,2.2vw,26px); font-weight:700; color:var(--ink); line-height:1.2; letter-spacing:-.02em; margin-bottom:14px; }
.blg-featured-title a { color:inherit; }
.blg-featured-title a:hover { color:var(--p-700); }
.blg-featured-excerpt { font-size:14.5px; color:var(--mute); line-height:1.6; margin-bottom:20px; flex:1; }
.blg-featured-meta { font-size:12.5px; color:var(--mute); display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.blg-featured-meta span.sep { color:var(--dim); }
.blg-featured-read { font-size:13.5px; font-weight:700; color:var(--p-600); display:inline-flex; align-items:center; gap:6px; transition:gap .15s; }
.blg-featured-read:hover { gap:10px; color:var(--p-700); }

/* 2-col article grid (inside main area) */
.blg-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }

/* Category badge on cards */
.cat-badge { font-family:var(--mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; padding:3px 9px; border-radius:5px; display:inline-block; }
.cat-seo { background:var(--p-50); color:var(--p-700); }
.cat-geo-ia-search, .cat-geo { background:#e8f5e9; color:#2e7d32; }
.cat-contenus-ia, .cat-contenu-ia, .cat-ia { background:#e3f2fd; color:#1565c0; }
.cat-e-commerce, .cat-ecommerce { background:#fff3e0; color:#e65100; }
.cat-etudes-de-cas, .cat-etudes { background:#fef9e7; color:#b7791f; }

/* ════════ BLOG SIDEBAR ════════ */
.blg-sidebar { position:sticky; top:88px; display:flex; flex-direction:column; gap:20px; }
.blg-sb-block { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:20px 18px; }
.blg-sb-title { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--p-700); text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.blg-sb-search { position:relative; }
.blg-sb-search input { width:100%; background:var(--bg); border:1.5px solid var(--line); border-radius:10px; padding:10px 14px 10px 36px; font-size:13.5px; color:var(--ink); font-family:var(--f); transition:border-color .2s; box-sizing:border-box; }
.blg-sb-search input:focus { outline:none; border-color:var(--p-400); box-shadow:0 0 0 3px rgba(123,53,212,.07); }
.blg-sb-search svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--mute); pointer-events:none; }
.blg-sb-cats { list-style:none; margin:0; padding:0; }
.blg-sb-cats li { border-bottom:1px solid var(--line); }
.blg-sb-cats li:last-child { border-bottom:none; }
.blg-sb-cats a { display:flex; align-items:center; justify-content:space-between; padding:9px 0; font-size:13.5px; color:var(--text); transition:color .15s; text-decoration:none; }
.blg-sb-cats a:hover { color:var(--p-700); }
.blg-sb-cats .count { font-family:var(--mono); font-size:11px; color:var(--mute); background:var(--p-50); padding:2px 7px; border-radius:20px; flex-shrink:0; }
.blg-sb-recent { list-style:none; margin:0; padding:0; }
.blg-sb-recent li { border-bottom:1px solid var(--line); padding:10px 0; }
.blg-sb-recent li:last-child { border-bottom:none; padding-bottom:0; }
.blg-sb-recent a { font-size:13px; font-weight:600; color:var(--ink); line-height:1.4; display:block; transition:color .15s; margin-bottom:4px; text-decoration:none; }
.blg-sb-recent a:hover { color:var(--p-700); }
.blg-sb-recent .date { font-size:11px; color:var(--mute); font-family:var(--mono); }
.blg-sb-tags { display:flex; flex-wrap:wrap; gap:6px; }
.blg-sb-tag { font-size:12px; color:var(--mute); background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:4px 10px; transition:all .15s; text-decoration:none; }
.blg-sb-tag:hover { color:var(--p-700); border-color:var(--p-200); background:var(--p-50); }

/* ════════ CATEGORY PAGE ════════ */
.blg-cat-hero { padding:56px 0 36px; }
.blg-breadcrumb { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--mute); margin-bottom:24px; flex-wrap:wrap; }
.blg-breadcrumb a { color:var(--mute); transition:color .15s; text-decoration:none; }
.blg-breadcrumb a:hover { color:var(--p-700); }
.blg-breadcrumb-sep { color:var(--dim); font-size:11px; }
.blg-cat-icon { width:64px; height:64px; border-radius:16px; background:linear-gradient(135deg,var(--p-600),var(--p-400)); display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:20px; }
.blg-cat-stats { display:flex; gap:20px; font-family:var(--mono); font-size:12px; color:var(--mute); margin-top:12px; flex-wrap:wrap; }
.blg-cat-stats strong { color:var(--ink); font-weight:700; }

/* Newsletter card in grid */
.blg-newsletter-card { background:linear-gradient(135deg,var(--p-700),var(--p-500)); border-radius:20px; padding:28px 24px; color:white; display:flex; flex-direction:column; gap:12px; }
.blg-newsletter-card h3 { font-size:17px; font-weight:700; color:white; margin:0; line-height:1.3; }
.blg-newsletter-card p { font-size:13px; opacity:.85; margin:0; line-height:1.5; }
.blg-newsletter-form { display:flex; flex-direction:column; gap:8px; }
.blg-newsletter-form input { padding:10px 13px; border-radius:9px; border:none; font-size:13px; background:rgba(255,255,255,.18); color:white; font-family:var(--f); }
.blg-newsletter-form input::placeholder { color:rgba(255,255,255,.55); }
.blg-newsletter-form input:focus { outline:2px solid rgba(255,255,255,.4); }
.blg-newsletter-btn { background:white; color:var(--p-700); font-weight:700; font-size:13px; padding:10px 13px; border-radius:9px; text-align:center; border:none; cursor:pointer; transition:background .15s; font-family:var(--f); }
.blg-newsletter-btn:hover { background:var(--g-200); }

/* ════════ SINGLE ARTICLE — sng- ════════ */

/* Article header */
.sng-title { font-size:clamp(28px,3.8vw,48px); font-weight:700; color:var(--ink); line-height:1.08; letter-spacing:-.035em; margin:14px 0 20px; }
.sng-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:13.5px; color:var(--mute); margin-bottom:32px; }
.sng-meta-author { display:flex; align-items:center; gap:6px; color:var(--text); font-weight:600; }
.sng-meta-sep { color:var(--dim); }
.sng-meta-read { display:flex; align-items:center; gap:5px; }
.sng-thumb { border-radius:20px; overflow:hidden; margin-bottom:40px; aspect-ratio:16/9; background:linear-gradient(135deg,var(--p-100),var(--p-50)); }
.sng-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

/* Content layout */
.sng-layout { display:grid; grid-template-columns:1fr 296px; gap:56px; align-items:start; padding:40px 0 80px; }

/* TOC */
.sng-toc { background:var(--p-50); border:1px solid var(--p-100); border-left:3px solid var(--p-400); border-radius:0 14px 14px 0; padding:20px 22px; margin-bottom:40px; }
.sng-toc-title { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--p-700); text-transform:uppercase; letter-spacing:.08em; display:flex; align-items:center; gap:7px; margin-bottom:14px; }
.sng-toc-list { list-style:none; margin:0; padding:0; counter-reset:sng-toc; }
.sng-toc-list li { counter-increment:sng-toc; }
.sng-toc-list li + li { border-top:1px solid var(--p-100); }
.sng-toc-list a { display:flex; align-items:baseline; gap:10px; padding:8px 0; font-size:13.5px; color:var(--text); transition:color .15s; text-decoration:none; line-height:1.4; }
.sng-toc-list a::before { content:counter(sng-toc,decimal-leading-zero); font-family:var(--mono); font-size:10px; color:var(--p-400); font-weight:700; flex-shrink:0; }
.sng-toc-list a:hover { color:var(--p-700); }

/* Article body */
.sng-body { font-size:16.5px; line-height:1.78; color:var(--text); }
.sng-body h2 { font-size:clamp(22px,2.8vw,30px); font-weight:700; color:var(--ink); margin:56px 0 18px; letter-spacing:-.025em; line-height:1.2; padding-top:16px; border-top:1px solid var(--line); scroll-margin-top:100px; }
.sng-body h3 { font-size:clamp(18px,2.2vw,22px); font-weight:700; color:var(--ink); margin:36px 0 12px; letter-spacing:-.015em; scroll-margin-top:100px; }
.sng-body h4 { font-size:17px; font-weight:700; color:var(--ink); margin:28px 0 10px; }
.sng-body p { margin-bottom:22px; }
.sng-body strong { color:var(--ink); font-weight:700; }
.sng-body em { font-style:italic; }
.sng-body a { color:var(--p-600); text-decoration:underline; text-underline-offset:3px; }
.sng-body a:hover { color:var(--p-700); }
.sng-body ul, .sng-body ol { padding-left:24px; margin-bottom:22px; }
.sng-body li { margin-bottom:9px; }
.sng-body blockquote { border-left:4px solid var(--p-400); padding:22px 26px; background:var(--p-50); border-radius:0 16px 16px 0; margin:36px 0; font-style:italic; color:var(--text); font-size:17px; line-height:1.65; }
.sng-body blockquote p:last-child { margin-bottom:0; }
.sng-body img { border-radius:16px; box-shadow:var(--sh-md); margin:32px 0; max-width:100%; height:auto; display:block; }
.sng-body pre { background:var(--ink); color:#e2e8f0; border-radius:14px; padding:22px 24px; font-size:14px; overflow-x:auto; margin:28px 0; font-family:var(--mono); line-height:1.6; }
.sng-body code { background:var(--p-50); color:var(--p-700); padding:2px 7px; border-radius:5px; font-family:var(--mono); font-size:13.5px; }
.sng-body pre code { background:none; color:inherit; padding:0; font-size:inherit; }
.sng-body table { width:100%; border-collapse:collapse; margin:28px 0; font-size:15px; }
.sng-body th { background:var(--p-50); color:var(--ink); font-weight:700; padding:12px 16px; text-align:left; border-bottom:2px solid var(--p-200); }
.sng-body td { padding:11px 16px; border-bottom:1px solid var(--line); color:var(--text); vertical-align:top; }
.sng-body tr:last-child td { border-bottom:none; }
.sng-body figure { margin:36px 0; }
.sng-body figcaption { font-size:13px; color:var(--mute); text-align:center; margin-top:10px; font-style:italic; }
.sng-body .wp-block-image { margin:32px 0; }
.sng-body .wp-block-image img { border-radius:16px; box-shadow:var(--sh-md); margin:0; }

/* Tags */
.sng-tags { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:28px 0 0; border-top:1px solid var(--line); margin-top:44px; }
.sng-tags-label { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--mute); text-transform:uppercase; letter-spacing:.07em; margin-right:4px; }

/* Author box */
.sng-author { display:flex; align-items:flex-start; gap:18px; background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:24px 26px; margin:40px 0; }
.sng-author-img { width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0; display:block; }
.sng-author-avatar { flex-shrink:0; }
.sng-author-avatar img { width:64px; height:64px; border-radius:50%; object-fit:cover; display:block; }
.sng-author-name { font-size:15px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.sng-author-bio { font-size:13.5px; color:var(--mute); line-height:1.6; }

/* Prev / Next */
.sng-nav { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:48px; }
.sng-nav-item { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:18px 20px; text-decoration:none; transition:border-color .15s,box-shadow .15s,transform .15s; display:flex; flex-direction:column; gap:6px; }
.sng-nav-item:hover { border-color:var(--p-200); box-shadow:var(--sh-md); transform:translateY(-2px); }
.sng-nav-next { text-align:right; }
.sng-nav-dir { font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--p-600); text-transform:uppercase; letter-spacing:.07em; display:block; }
.sng-nav-t { font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.35; display:block; margin-top:2px; }

/* Related articles */
.sng-related { padding:64px 0 80px; border-top:2px solid var(--line); background:var(--bg); }
.sng-related-title { font-size:clamp(22px,2.5vw,30px); font-weight:700; color:var(--ink); letter-spacing:-.025em; margin:0; }

/* Single responsive */
@media (max-width:1024px) {
  .sng-layout { grid-template-columns:1fr; gap:40px; padding:40px 0 56px; }
}
@media (max-width:768px) {
  .sng-nav { grid-template-columns:1fr; }
  .sng-author { flex-direction:column; }
  .sng-related { padding:44px 0 56px; }
}

/* ════════ BLOG RESPONSIVE ════════ */
@media (max-width:1024px) {
  .blg-layout { grid-template-columns:1fr; }
  .blg-sidebar { position:static; }
  .blg-featured { grid-template-columns:1fr; }
  .blg-featured-img { min-height:220px; }
  .blg-featured-body { padding:28px; }
}
@media (max-width:768px) {
  .blg-cat-nav { gap:6px; }
  .blg-cat-pill { font-size:12px; padding:6px 13px; }
  .blg-grid { grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER MASCOTTE — styles de base (absents de la V1)
══════════════════════════════════════════════════════════════════ */
.f-brand-bottom {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: 20px;
}
.f-mascotte-wrap {
  flex: 0 0 110px;
  margin-left: auto;
}
.f-mascotte {
  width: 100%;
  height: auto;
  display: block;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE NAV — BURGER BUTTON
══════════════════════════════════════════════════════════════════ */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--p-50);
  border: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.nav-burger:hover { background: var(--p-100); border-color: var(--p-200); }
.nav-burger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .26s cubic-bezier(.4,0,.2,1),
              opacity .2s ease,
              width .2s ease;
  transform-origin: center;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; width: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════════════
   MOBILE NAV — OVERLAY
══════════════════════════════════════════════════════════════════ */
.nav-mobile-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(20,9,31,.46);
  z-index: 290;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.nav-mobile-overlay.is-visible {
  display: block;
  animation: mobOverlayIn .22s ease forwards;
}
@keyframes mobOverlayIn { from { opacity:0 } to { opacity:1 } }

/* ══════════════════════════════════════════════════════════════════
   MOBILE NAV — DRAWER
══════════════════════════════════════════════════════════════════ */
.nav-mobile-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(340px, 92vw);
  background: var(--paper);
  z-index: 300;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 48px rgba(20,9,31,.18);
  overflow: hidden;
}
.nav-mobile-drawer.is-open { transform: translateX(0); }

/* Drawer head */
.nav-mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  padding-top: max(14px, calc(14px + env(safe-area-inset-top, 0px)));
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.nav-mobile-logo img { height: 30px; display: block; }
.nav-mobile-close {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--p-50);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 20px; line-height: 1;
  color: var(--mute);
  font-family: var(--f);
  transition: background .15s, color .15s;
}
.nav-mobile-close:hover { background: var(--p-100); color: var(--ink); }

/* Drawer body — scrollable */
.nav-mobile-body {
  flex: 1;
  padding: 10px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Simple link */
.nav-mobile-link {
  display: flex;
  align-items: center;
  padding: 11px 12px;
  font-size: 15px; font-weight: 500;
  color: var(--text);
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-mobile-link:hover { background: var(--p-50); color: var(--p-700); }
.nav-mobile-link.current { color: var(--p-700); background: var(--p-50); font-weight: 600; }

/* Accordion group */
.nav-mobile-group { margin-bottom: 2px; }
.nav-mobile-group-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 12px;
  font-size: 15px; font-weight: 600;
  color: var(--ink);
  background: none; border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--f);
  text-align: left;
  transition: background .15s;
}
.nav-mobile-group-btn:hover { background: var(--p-50); }
.nav-mobile-group-chevron {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--dim);
  transition: transform .24s cubic-bezier(.4,0,.2,1);
}
.nav-mobile-group.is-open .nav-mobile-group-chevron { transform: rotate(180deg); }

/* Accordion sub-menu */
.nav-mobile-sub {
  display: none;
  padding: 4px 0 8px 10px;
}
.nav-mobile-group.is-open .nav-mobile-sub { display: block; }
.nav-mobile-sub-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  font-size: 13.5px; font-weight: 500;
  color: var(--text-2);
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-mobile-sub-link:hover { background: var(--p-50); color: var(--p-700); }
.nav-mobile-sub-icon { font-size: 16px; flex-shrink: 0; line-height: 1; }
.nav-mobile-sub-name { font-weight: 600; color: var(--ink); font-size: 13.5px; }
.nav-mobile-sub-empty { display: block; padding: 8px 12px; font-size: 13px; color: var(--mute); }

/* Divider */
.nav-mobile-divider {
  height: 1px;
  background: var(--line);
  margin: 8px 0;
}

/* Drawer footer CTA */
.nav-mobile-foot {
  padding: 14px 16px;
  padding-bottom: max(14px, calc(14px + env(safe-area-inset-bottom, 0px)));
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nav-mobile-foot .nb-ghost {
  width: 100%;
  justify-content: center;
  border-radius: 12px;
  padding: 12px;
  font-size: 15px;
  border: 1.5px solid var(--line);
}
.nav-mobile-foot .nb-primary {
  width: 100%;
  justify-content: center;
  border-radius: 12px;
  padding: 13px;
  font-size: 15px;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — 1024px  (tablette large + burger)
   Surcharge les blocs 1024px existants placés plus haut dans ce
   fichier (cascade CSS : règle la plus basse l'emporte).
══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Burger visible, desktop links / CTA masqués */
  .nav-burger   { display: flex; }
  .nav-links    { display: none !important; }
  .nav-right    { display: none; }

  /* Nav padding tablette */
  .nav { padding: 8px 8px 8px 18px; }

  /* .w padding */
  .w { padding: 0 24px; }

  /* Grilles déjà traitées par le bloc existant — compléments */
  .agency-ctas { flex-wrap: wrap; }
  .sng-layout  { grid-template-columns: 1fr; }
  .single-layout { grid-template-columns: 1fr; }
  .single-sidebar { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — 768px  (tablette + mobile)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Body ── */
  body { font-size: 14px; }
  .w   { padding: 0 16px; }

  /* ── Announce bar ── */
  .announce-inner { justify-content: flex-start; flex-wrap: nowrap; overflow: hidden; }
  .announce-link  { display: none; }

  /* ── Nav ── */
  .nav { padding: 7px 7px 7px 14px; }
  .nav-logo img { height: 35px; }

  /* ── Sections ── */
  .section { padding: 56px 0; }
  .section-h2 { font-size: clamp(28px, 7.5vw, 40px); }
  .section-sub { font-size: 15px; }

  /* ── Metrics → 1 col sur mobile ── */
  .metrics-strip { padding: 52px 0; }
  .metrics-grid  { grid-template-columns: 1fr; gap: 20px; }
  .metric-val    { font-size: 40px; }
  .metric-desc   { max-width: none; }

  /* ── Activation form — stack vertical ── */
  .activation-form {
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    border-radius: 14px;
  }
  .activation-icon { display: none; }
  .activation-form input {
    padding: 12px;
    font-size: 15px;
    border-bottom: 1px solid var(--line);
  }
  .activation-btn {
    width: 100%;
    justify-content: center;
    padding: 13px;
    border-radius: 10px;
    font-size: 15px;
  }

  /* ── Feature hero CTA — stack vertical ── */
  .feat-hero-ctas { flex-direction: column; align-items: stretch; }
  .feat-hero-ctas .btn-primary-lg,
  .feat-hero-ctas .btn-ghost-lg  { width: 100%; justify-content: center; }

  /* ── Agency CTAs ── */
  .agency-ctas            { flex-direction: column; align-items: stretch; }
  .agency-cta-primary,
  .agency-cta-ghost       { width: 100%; justify-content: center; }
  .agency-features        { grid-template-columns: 1fr; }

  /* ── CTA Final ── */
  .cta-final-wrap { padding: 24px 0 64px; }
  .cta-final      { padding: 36px 20px; border-radius: 20px; }
  .cta-h2         { font-size: clamp(26px, 7vw, 36px); }
  .cta-guarantee  { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* ── Steps / Pain / Benefits — déjà traités, compléments ── */
  .pain-section     { padding: 56px 0; }
  .steps-section-feat,
  .benefits-section { padding: 56px 0; }

  /* ── Footer ── */
  .footer           { padding: 52px 0 24px; }
  .f-grid           { grid-template-columns: 1fr; gap: 28px; }
  .f-brand-bottom   { flex-direction: column; align-items: flex-start; gap: 16px; }
  .f-mascotte-wrap  { flex: 0 0 80px; margin-left: 0; }
  .f-status-bar     { flex-direction: column; align-items: flex-start; gap: 10px; }
  .f-stat-l         { flex-direction: column; gap: 8px; }
  .f-bottom         { flex-direction: column; align-items: center; gap: 8px; text-align: center; }

  /* ── Tables scrollables ── */
  .sng-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* ── Blog hero ── */
  .blog-hero { padding: 52px 0 36px; }

  /* ── Blog featured article ── */
  .blg-featured      { grid-template-columns: 1fr; }
  .blg-featured-img  { min-height: 200px; }
  .blg-featured-body { padding: 22px; }

  /* ── Single article ── */
  .sng-title   { font-size: clamp(26px, 6.5vw, 38px); }
  .sng-layout  { padding: 32px 0 56px; }
  .sng-author  { flex-direction: column; gap: 14px; }
  .sng-related { padding: 40px 0 52px; }

  /* ── Prev / Next nav ── */
  .sng-nav { grid-template-columns: 1fr; gap: 10px; }
  .sng-nav-next { text-align: left; }

  /* ── Floating cards dans heros (overflow guard) ── */
  .hfc { max-width: calc(100vw - 32px); }

  /* ── Pricing ── */
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .price-card.pop { transform: scale(1); }
  .free-trial-band { flex-direction: column; text-align: center; padding: 22px; }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — 480px  (petits mobiles)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Announce masquée sur très petit écran */
  .announce { display: none; }

  /* Typography */
  .section-h2  { font-size: clamp(24px, 8vw, 32px); }
  .metric-val  { font-size: 34px; }
  .feat-hero-h1 { font-size: clamp(28px, 9vw, 40px); }

  /* Pricing → 1 col */
  .pricing-grid { grid-template-columns: 1fr; }

  /* Grilles 1 col forcée */
  .testi-grid     { grid-template-columns: 1fr; }
  .concrete-grid  { grid-template-columns: 1fr; }
  .cf-card        { grid-column: span 1; }
  .steps-grid     { grid-template-columns: 1fr; }

  /* Footer mascotte masquée (évite débordement) */
  .f-mascotte-wrap { display: none; }

  /* CTA final padding */
  .cta-final-wrap { padding: 16px 0 48px; }
  .cta-final      { border-radius: 16px; }

  /* Blog grid → 1 col strict */
  .blg-grid { grid-template-columns: 1fr; }

  /* Feat nav → 1 col */
  .feat-nav-grid { grid-template-columns: 1fr; }

  /* Nav pill reduced */
  .nav { padding: 6px 6px 6px 12px; }
  .nav-logo img { height: 32px; }

  /* Announce-text compact */
  .announce-text { font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════════
   SAFE AREA — iPhone X+ (viewport-fit=cover)
   Protège les éléments fixed/sticky contre le notch et la home bar.
══════════════════════════════════════════════════════════════════ */

/* ── Complianz — Bannière cookie ────────────────────────────────── */
/* Sur mobile (< 768px) la bannière est bottom:0 full-width */
@media (max-width: 768px) {
  .cmplz-cookiebanner {
    padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* Widget "Gérer mes cookies" (position:fixed en bas) */
#cmplz-manage-consent .cmplz-manage-consent {
  bottom: calc(var(--cmplz-manage-consent-offset) + env(safe-area-inset-bottom, 0px));
}