/* ============================================================
   MISTER BRAND — DA éditoriale studio créatif
   Palette : #0D0D0D · #FAFAF8 · #FF5A2F · #C6FF00 · #4C6FFF
   Typo : Syne (titres) · DM Sans (corps)
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:     #0D0D0D;
  --off:     #FAFAF8;
  --off2:    #F2F0EB;
  --off3:    #E4E0D8;
  --orange:  #FF5A2F;
  --lime:    #C6FF00;
  --blue:    #4C6FFF;
  --muted:   #7A7A72;
  --border:  rgba(13,13,13,.10);
  --bstrong: rgba(13,13,13,.18);
  --fh: 'Sora', sans-serif;
  --fb: 'Manrope', sans-serif;
  --r: 10px;
  --rl: 20px;
  --rxl: 32px;
}

html { scroll-behavior: smooth; }
body {
  background: var(--off);
  color: var(--ink);
  font-family: var(--fb);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--off); }
::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 4px; }

/* ============================================================
   LOGO MARK SVG
============================================================ */
.logo-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.logo-mark svg { flex-shrink: 0; }
.logo-wordmark {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.3px;
  line-height: 1;
  color: var(--ink);
}
.logo-wordmark span { color: var(--orange); font-weight: 700; }

/* ============================================================
   NAVIGATION
============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(250,250,248,.93);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 52px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav-links {
  display: flex;
  list-style: none;
  gap: 36px;
}
.nav-links a {
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .2px;
  transition: color .15s;
}
.nav-links a:hover { color: var(--ink); }
.nav-actions { display: flex; gap: 10px; align-items: center; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fb);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: 100px;
  padding: 10px 22px;
  transition: transform .18s, opacity .18s, box-shadow .18s, background .18s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--bstrong);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--off2); }
.btn-dark {
  background: var(--ink);
  color: #fff;
}
.btn-dark:hover { opacity: .82; }
.btn-lime {
  background: var(--lime);
  color: var(--ink);
  font-weight: 800;
}
.btn-lime:hover { box-shadow: 0 8px 28px rgba(198,255,0,.38); }
.btn-orange {
  background: var(--orange);
  color: #fff;
  font-weight: 700;
}
.btn-orange:hover { opacity: .88; }

/* ============================================================
   HERO — FULL EDITORIAL
============================================================ */
.hero {
  max-width: 1320px;
  margin: 0 auto;
  padding: 96px 52px 80px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 36px;
}
.eyebrow-line {
  width: 32px;
  height: 1px;
  background: var(--orange);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
  align-items: start;
}

.hero-h1 {
  font-family: var(--fh);
  font-size: clamp(52px, 6.5vw, 88px);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -3px;
  margin-bottom: 0;
}
.hero-h1 .line { display: block; overflow: hidden; }
.hero-h1 .word-plain { color: var(--ink); }
.hero-h1 .word-fill {
  display: inline-block;
  background: var(--ink);
  color: var(--off);
  padding: 2px 14px 6px;
  border-radius: 8px;
  line-height: 1.05;
}
.hero-h1 .word-ora {
  color: var(--orange);
}
.hero-h1 .word-lime {
  display: inline-block;
  background: var(--lime);
  color: var(--ink);
  padding: 2px 14px 6px;
  border-radius: 8px;
  line-height: 1.05;
}

.hero-sub-block {
  margin-top: 40px;
  max-width: 560px;
}
.hero-sub {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--muted);
  margin-bottom: 20px;
}
.hero-sub strong { color: var(--ink); font-weight: 600; }

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 44px;
}

.hero-proof-row {
  display: flex;
  gap: 32px;
  align-items: center;
  flex-wrap: wrap;
}
.hero-proof-item { text-align: left; }
.hero-proof-num {
  font-family: var(--fh);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 2px;
}
.hero-proof-num .acc { color: var(--orange); font-size: 16px; }
.hero-proof-label { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.proof-vsep { width: 1px; height: 36px; background: var(--border); }

/* HERO RIGHT — MOCKUP EDITORIAL */
.hero-right {
  padding-top: 8px;
}
.hero-mockup-wrap {
  position: relative;
}
.hero-badge-floating {
  position: absolute;
  top: -16px;
  right: -16px;
  background: var(--orange);
  color: #fff;
  border-radius: var(--rl);
  padding: 12px 18px;
  text-align: center;
  z-index: 2;
  box-shadow: 0 8px 32px rgba(255,90,47,.32);
}
.hbf-num {
  font-family: var(--fh);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
}
.hbf-label { font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; opacity: .85; }

.browser-frame {
  background: #fff;
  border: 1px solid var(--bstrong);
  border-radius: var(--rl);
  overflow: hidden;
  box-shadow: 0 2px 48px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
}
.browser-chrome {
  background: var(--off2);
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.b-dot { width: 9px; height: 9px; border-radius: 50%; }
.b-dot-r { background: #FF5F57; }
.b-dot-y { background: #FEBC2E; }
.b-dot-g { background: #28C840; }
.b-url {
  flex: 1;
  background: #fff;
  border-radius: 100px;
  padding: 3px 12px;
  font-size: 10px;
  color: var(--muted);
  margin: 0 8px;
  border: 1px solid var(--border);
}
.browser-body { padding: 18px; }
.bb-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.bb-logo { width: 18px; height: 18px; background: var(--ink); border-radius: 3px; }
.bb-nav-line { height: 4px; width: 52px; background: var(--ink); border-radius: 2px; opacity: .9; }
.bb-h { height: 9px; border-radius: 3px; background: var(--ink); margin-bottom: 5px; }
.bb-sub { height: 4px; border-radius: 2px; background: var(--off3); margin-bottom: 4px; }
.bb-btns { display: flex; gap: 5px; margin: 10px 0; }
.bb-btn1 { height: 22px; width: 90px; background: var(--lime); border-radius: 100px; }
.bb-btn2 { height: 22px; width: 76px; border-radius: 100px; border: 1px solid var(--bstrong); }
.bb-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; margin-top: 8px; }
.bb-card { height: 44px; border-radius: 6px; background: var(--off2); }
.bb-card.dark { background: var(--ink); }
.bb-card.lime { background: var(--lime); opacity: .5; }

/* TEAM STRIP */
.team-strip {
  margin-top: 20px;
  padding: 14px 18px;
  background: var(--off2);
  border-radius: var(--rl);
  display: flex;
  align-items: center;
  gap: 12px;
}
.team-avs { display: flex; }
.team-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--off2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  font-family: var(--fh);
  margin-right: -7px;
}
.av-o { background: #FFE0D5; color: var(--orange); }
.av-l { background: #EEFF99; color: #4A6600; }
.av-b { background: #DCE4FF; color: var(--blue); }
.team-text { font-size: 12px; color: var(--muted); line-height: 1.4; }
.team-text strong { color: var(--ink); }

/* ============================================================
   SCROLL TICKER
============================================================ */
.ticker-wrap {
  background: var(--ink);
  overflow: hidden;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ticker-inner {
  display: flex;
  width: max-content;
  animation: ticker 24s linear infinite;
}
.ticker-inner:hover { animation-play-state: paused; }
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ticker-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 28px;
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.ticker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
.ticker-item.accent { color: rgba(255,255,255,.9); }

/* ============================================================
   SECTION SYSTEM
============================================================ */
.section {
  max-width: 1320px;
  margin: 0 auto;
  padding: 88px 52px;
}
.section-full {
  padding: 88px 52px;
}
.sec-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sec-eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--orange);
  display: inline-block;
  flex-shrink: 0;
}
.sec-title {
  font-family: var(--fh);
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -1.5px;
}
.sec-sub {
  font-size: 15.5px;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.74;
  max-width: 520px;
}
.sec-header-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}
.divider { height: 1px; background: var(--border); max-width: 1320px; margin: 0 auto; }

/* ============================================================
   TRUST NUMBERS — FULL WIDTH DARK
============================================================ */
.trust-dark {
  background: var(--ink);
  padding: 72px 52px;
}
.trust-dark-inner {
  max-width: 1320px;
  margin: 0 auto;
}
.trust-dark .sec-eyebrow { color: rgba(255,255,255,.35); }
.trust-dark .sec-eyebrow::before { background: var(--lime); }
.trust-dark .sec-title { color: #fff; }
.trust-dark .sec-sub { color: rgba(255,255,255,.45); }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 52px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--rxl);
  overflow: hidden;
}
.trust-cell {
  padding: 36px 32px;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: background .2s;
}
.trust-cell:last-child { border-right: none; }
.trust-cell:hover { background: rgba(255,255,255,.03); }
.tc-num {
  font-family: var(--fh);
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
  color: #fff;
  margin-bottom: 10px;
}
.tc-num .o { color: var(--orange); }
.tc-num .l { color: var(--lime); }
.tc-label { font-size: 13px; color: rgba(255,255,255,.4); line-height: 1.55; }

.team-block {
  margin-top: 36px;
  padding: 24px 28px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--rl);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.tb-avs { display: flex; }
.tb-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 800;
  margin-right: -10px;
}
.tba-o { background: rgba(255,90,47,.25); color: var(--orange); }
.tba-l { background: rgba(198,255,0,.15); color: var(--lime); }
.tba-b { background: rgba(76,111,255,.25); color: var(--blue); }
.tb-text { font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.55; flex: 1; }
.tb-text strong { color: #fff; }
.tb-badge {
  background: var(--lime);
  color: var(--ink);
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  white-space: nowrap;
}

/* ============================================================
   PROCESS — EDITORIAL HORIZONTAL
============================================================ */
.process-editorial {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--rxl);
  overflow: hidden;
  margin-top: 52px;
}
.pe-step {
  padding: 28px 18px;
  border-right: 1px solid var(--border);
  transition: background .2s;
  position: relative;
}
.pe-step:last-child { border-right: none; }
.pe-step:hover { background: var(--off2); }
.pe-step.highlight {
  background: var(--orange);
}
.pe-step.highlight:hover { background: #e84a20; }
.pe-num {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.pe-step.highlight .pe-num { color: rgba(255,255,255,.45); }
.pe-icon { font-size: 20px; margin-bottom: 10px; display: block; }
.pe-title {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 7px;
  letter-spacing: -.2px;
  line-height: 1.2;
}
.pe-step.highlight .pe-title { color: #fff; }
.pe-text { font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.pe-step.highlight .pe-text { color: rgba(255,255,255,.65); }

.process-footer {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  background: var(--off2);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  padding: 22px 28px;
}
.pf-text { font-size: 14px; color: var(--muted); line-height: 1.55; }
.pf-text strong { color: var(--ink); }
.pf-delay {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}
.pf-delay-num {
  font-family: var(--fh);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1;
  color: var(--ink);
}
.pf-delay-num span { color: var(--orange); }
.pf-delay-label { font-size: 11px; color: var(--muted); }

/* ============================================================
   RÉALISATIONS — PORTFOLIO STUDIO
============================================================ */
.real-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.rf {
  padding: 7px 18px;
  border-radius: 100px;
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  background: var(--off);
  color: var(--muted);
  font-family: var(--fb);
  transition: all .18s;
}
.rf.active, .rf:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.real-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border-radius: var(--rxl);
  overflow: hidden;
}
.real-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
}
/* LARGE CARD spans full row */
.real-card.wide { grid-column: span 2; }

.real-visual {
  position: relative;
  overflow: hidden;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.real-card.wide .real-visual { height: 340px; }

.rv-1 { background: #0D0D0D; }
.rv-2 { background: #F0EDE6; }
.rv-3 { background: #EEF3FF; }
.rv-4 { background: #FFF0EA; }
.rv-5 { background: #ECFFE0; }

/* Mini browser mockup inside */
.port-browser {
  width: 70%;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,.18);
  transform: perspective(800px) rotateY(-3deg) rotateX(2deg);
  transition: transform .35s;
}
.real-card:hover .port-browser {
  transform: perspective(800px) rotateY(0deg) rotateX(0deg) scale(1.03);
}
.port-browser.dark-b { background: #1A1A1A; }
.pb-bar { height: 20px; display: flex; align-items: center; padding: 0 8px; gap: 3px; }
.pb-bar.light { background: #F0EDE6; }
.pb-bar.dark-bar { background: #252525; }
.pb-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(0,0,0,.15); }
.pb-dot.dk { background: rgba(255,255,255,.15); }
.pb-body { padding: 10px 12px; }
.pb-h { height: 6px; border-radius: 3px; margin-bottom: 4px; }
.pb-s { height: 4px; border-radius: 2px; background: var(--off3); margin-bottom: 4px; }
.pb-s.dk { background: #2A2A2A; }
.pb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 8px; }
.pb-box { height: 30px; border-radius: 5px; }

/* HOVER OVERLAY */
.real-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13,13,13,.72);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s;
}
.real-card:hover .real-overlay { opacity: 1; }
.real-overlay-btn {
  background: #fff;
  color: var(--ink);
  padding: 10px 22px;
  border-radius: 100px;
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.2px;
  transform: translateY(8px);
  transition: transform .25s;
}
.real-card:hover .real-overlay-btn { transform: translateY(0); }

.real-meta {
  padding: 20px 22px 22px;
  background: var(--off);
  border-top: 1px solid var(--border);
}
.real-sector {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.real-name {
  font-family: var(--fh);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.4px;
  margin-bottom: 5px;
}
.real-desc { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; line-height: 1.55; }
.real-foot { display: flex; align-items: center; justify-content: space-between; }
.real-tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
}
.tag-e { background: var(--off2); color: var(--muted); }
.tag-s { background: #FFE0D5; color: var(--orange); }
.tag-p { background: #EEFF99; color: #3F6000; }
.real-result { font-size: 12px; color: var(--muted); font-style: italic; }

/* PROOF BAR BELOW GRID */
.real-proof {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 24px;
  border: 1px solid var(--border);
  border-radius: var(--rl);
  overflow: hidden;
}
.rp-cell {
  padding: 20px 22px;
  border-right: 1px solid var(--border);
}
.rp-cell:last-child { border-right: none; }
.rp-num {
  font-family: var(--fh);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.8px;
  line-height: 1;
  margin-bottom: 4px;
}
.rp-num .o { color: var(--orange); }
.rp-label { font-size: 11.5px; color: var(--muted); }

/* ============================================================
   OFFRES — CARDS BOLD
============================================================ */
.offers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.offer-card {
  border: 1px solid var(--border);
  border-radius: var(--rxl);
  padding: 34px 28px;
  background: var(--off);
  transition: transform .22s, border-color .22s, box-shadow .22s;
  position: relative;
  overflow: hidden;
}
.offer-card:hover {
  transform: translateY(-5px);
  border-color: var(--ink);
  box-shadow: 0 16px 48px rgba(0,0,0,.1);
}
.offer-card.featured {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.offer-card.featured:hover { box-shadow: 0 16px 48px rgba(0,0,0,.28); }

.offer-num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}
.offer-card.featured .offer-num { color: rgba(255,255,255,.3); }

.offer-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--lime);
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 100px;
}
.offer-name {
  font-family: var(--fh);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.5px;
  margin-bottom: 10px;
}
.offer-price {
  font-family: var(--fh);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
  margin-bottom: 4px;
}
.offer-card.featured .offer-price { color: #fff; }
.offer-since { font-size: 11.5px; color: var(--muted); margin-bottom: 10px; }
.offer-card.featured .offer-since { color: rgba(255,255,255,.35); }

.offer-delay {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
  background: rgba(255,90,47,.08);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.offer-card.featured .offer-delay {
  color: var(--lime);
  background: rgba(198,255,0,.12);
}

.offer-desc {
  font-size: 13px;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.65;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.offer-card.featured .offer-desc {
  color: rgba(255,255,255,.45);
  border-bottom-color: rgba(255,255,255,.08);
}

.offer-feats { list-style: none; margin-bottom: 28px; }
.offer-feat {
  font-size: 12.5px;
  color: var(--muted);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 9px;
  line-height: 1.45;
}
.offer-card.featured .offer-feat {
  color: rgba(255,255,255,.55);
  border-bottom-color: rgba(255,255,255,.07);
}
.feat-pip {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
  margin-top: 5px;
}
.offer-card.featured .feat-pip { background: var(--lime); }

.offer-cta {
  width: 100%;
  padding: 14px;
  border-radius: 100px;
  font-family: var(--fh);
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid var(--bstrong);
  background: transparent;
  color: var(--ink);
  transition: all .18s;
  letter-spacing: .2px;
}
.offer-card:not(.featured) .offer-cta:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.offer-card.featured .offer-cta {
  background: var(--lime);
  color: var(--ink);
  border-color: transparent;
}
.offer-card.featured .offer-cta:hover { opacity: .88; }

/* ============================================================
   AUDIT SECTION — DARK PREMIUM
============================================================ */
.audit-section {
  background: var(--ink);
  padding: 0;
}
.audit-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 80px 52px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  position: relative;
  overflow: hidden;
}
.audit-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.audit-orb-1 {
  width: 480px;
  height: 480px;
  top: -160px;
  right: -160px;
  background: var(--orange);
  opacity: .05;
}
.audit-orb-2 {
  width: 320px;
  height: 320px;
  bottom: -100px;
  left: 120px;
  background: var(--lime);
  opacity: .04;
}

.audit-left .sec-eyebrow { color: rgba(255,255,255,.28); }
.audit-left .sec-eyebrow::before { background: var(--lime); }
.audit-left .sec-title { color: #fff; font-size: clamp(28px, 3vw, 40px); margin-bottom: 14px; }
.audit-left .sec-sub { color: rgba(255,255,255,.45); max-width: 100%; margin-bottom: 32px; }

.audit-items { list-style: none; margin-bottom: 36px; }
.audit-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.audit-item:last-child { border-bottom: none; }
.ai-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}
.ai-content strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}
.ai-content span { font-size: 13px; color: rgba(255,255,255,.45); line-height: 1.5; }

.audit-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(198,255,0,.08);
  border: 1px solid rgba(198,255,0,.18);
  border-radius: var(--rl);
}
.audit-note span { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.55; }
.audit-note strong { color: #fff; }

/* FORM */
.audit-form-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--rxl);
  padding: 36px 32px;
}
.afc-title {
  font-family: var(--fh);
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.5px;
  margin-bottom: 6px;
}
.afc-sub { font-size: 13px; color: rgba(255,255,255,.4); margin-bottom: 26px; line-height: 1.5; }
.afc-field { margin-bottom: 14px; }
.afc-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.afc-field input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r);
  font-family: var(--fb);
  font-size: 14px;
  color: #fff;
  transition: border-color .18s;
  outline: none;
}
.afc-field input::placeholder { color: rgba(255,255,255,.2); }
.afc-field input:focus { border-color: rgba(198,255,0,.5); }
.afc-submit {
  width: 100%;
  margin-top: 8px;
  padding: 15px;
  background: var(--lime);
  color: var(--ink);
  border: none;
  border-radius: 100px;
  font-family: var(--fh);
  font-size: 14.5px;
  font-weight: 900;
  cursor: pointer;
  transition: opacity .18s, transform .18s;
  letter-spacing: .2px;
}
.afc-submit:hover { opacity: .88; transform: translateY(-1px); }
.afc-assur {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin-top: 13px;
  flex-wrap: wrap;
}
.afc-assur span { font-size: 11px; color: rgba(255,255,255,.28); }
.afc-sep { color: rgba(255,255,255,.15); }

/* ============================================================
   TESTIMONIALS
============================================================ */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.testi-card {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--rxl);
  background: var(--off);
  transition: border-color .2s, transform .2s;
}
.testi-card:hover { border-color: var(--ink); transform: translateY(-3px); }
.testi-stars { font-size: 12px; color: var(--orange); letter-spacing: 3px; margin-bottom: 14px; }
.testi-text {
  font-size: 14px;
  line-height: 1.76;
  color: var(--muted);
  font-weight: 300;
  font-style: italic;
  margin-bottom: 24px;
}
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--off2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  flex-shrink: 0;
}
.testi-name { font-size: 13.5px; font-weight: 700; font-family: var(--fh); letter-spacing: -.2px; }
.testi-role { font-size: 11.5px; color: var(--muted); }
.testi-site { font-size: 11px; color: var(--blue); text-decoration: none; display: block; margin-top: 2px; }

/* ============================================================
   FINAL CTA — BOLD EDITORIAL
============================================================ */
.cta-final {
  background: var(--ink);
  margin: 0 52px 80px;
  border-radius: var(--rxl);
  padding: 96px 72px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-orb-1 {
  position: absolute;
  width: 500px;
  height: 500px;
  top: -180px;
  right: -140px;
  border-radius: 50%;
  background: var(--orange);
  opacity: .07;
  pointer-events: none;
}
.cta-orb-2 {
  position: absolute;
  width: 360px;
  height: 360px;
  bottom: -120px;
  left: -80px;
  border-radius: 50%;
  background: var(--lime);
  opacity: .05;
  pointer-events: none;
}
.cta-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.cta-label::before, .cta-label::after {
  content: '';
  width: 32px;
  height: 1px;
  background: rgba(255,255,255,.2);
  display: inline-block;
}
.cta-h2 {
  font-family: var(--fh);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -2.5px;
  line-height: .98;
  margin-bottom: 24px;
}
.cta-h2 .hl-lime {
  background: var(--lime);
  color: var(--ink);
  padding: 2px 16px 6px;
  border-radius: 10px;
  display: inline-block;
  line-height: 1.08;
}
.cta-sub {
  font-size: 16px;
  color: rgba(255,255,255,.45);
  max-width: 480px;
  margin: 0 auto 44px;
  font-weight: 300;
  line-height: 1.72;
}
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.cta-proof {
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
}
.cp-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: rgba(255,255,255,.35);
}
.cp-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }

/* ============================================================
   FOOTER
============================================================ */
footer {
  border-top: 1px solid var(--border);
  padding: 52px 52px 28px;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 40px;
}
.ft-brand .logo-wordmark { font-size: 18px; margin-bottom: 12px; display: block; }
.ft-tagline { font-size: 13px; color: var(--muted); line-height: 1.65; font-weight: 300; margin-bottom: 18px; }
.ft-contact a { font-size: 13.5px; color: var(--blue); text-decoration: none; }
.ft-col h5 {
  font-family: var(--fh);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.ft-col a {
  display: block;
  font-size: 13.5px;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 10px;
  transition: color .16s;
}
.ft-col a:hover { color: var(--ink); }

.ft-bottom {
  border-top: 1px solid var(--border);
  padding: 20px 52px;
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ft-bottom p { font-size: 12px; color: var(--muted); }
.ft-bottom .lime-tag {
  font-size: 12px;
  font-weight: 800;
  font-family: var(--fh);
  color: var(--lime);
  background: rgba(198,255,0,.08);
  padding: 5px 14px;
  border-radius: 100px;
  letter-spacing: .5px;
}

/* ============================================================
   ANIMATIONS — PAGE LOAD STAGGER
============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-eyebrow { animation: fadeUp .55s ease both; }
.hero-h1      { animation: fadeUp .65s .1s ease both; }
.hero-sub-block { animation: fadeUp .65s .22s ease both; }
.hero-right   { animation: fadeUp .65s .35s ease both; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 980px) {
  .nav-inner { padding: 0 20px; }
  .nav-links { display: none; }
  .hero { padding: 56px 20px 44px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-right { display: none; }
  .section { padding: 52px 20px; }
  .section-full { padding: 52px 20px; }
  .trust-dark { padding: 52px 20px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .sec-header-2col { grid-template-columns: 1fr; }
  .process-editorial { grid-template-columns: repeat(4, 1fr); }
  .real-grid { grid-template-columns: 1fr; }
  .real-card.wide { grid-column: span 1; }
  .real-card.wide .real-visual { height: 260px; }
  .real-proof { grid-template-columns: repeat(3, 1fr); }
  .offers-grid { grid-template-columns: 1fr; }
  .audit-inner { grid-template-columns: 1fr; padding: 48px 20px; }
  .testi-grid { grid-template-columns: 1fr; }
  .cta-final { margin: 0 20px 52px; padding: 56px 24px; }
  footer { grid-template-columns: 1fr 1fr; padding: 40px 20px 20px; }
  .ft-bottom { padding: 16px 20px; flex-direction: column; gap: 8px; text-align: center; }
}
.announce-bar{background:var(--lime);padding:11px 20px;display:flex;align-items:center;justify-content:center;gap:14px;font-family:var(--fh);font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:-.2px;}
.ab-sep{width:4px;height:4px;border-radius:50%;background:var(--ink);opacity:.3;flex-shrink:0;}
.ab-link{text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-weight:900;opacity:.7;}
.ab-link:hover{opacity:1;}
.hero-price-flash{display:inline-flex;align-items:center;gap:12px;padding:10px 20px;background:#fff;border:1.5px solid var(--lime);border-radius:var(--rl);margin-bottom:20px;box-shadow:0 4px 24px rgba(198,255,0,.14);}
.hpf-from{font-size:12px;color:var(--muted);}
.hpf-price{font-family:var(--fh);font-size:19px;font-weight:800;letter-spacing:-1px;color:var(--ink);}
.hpf-price em{color:var(--orange);font-style:normal;}
.hpf-vsep{width:1px;height:20px;background:var(--border);}
.hpf-badge{font-size:10px;font-weight:800;background:var(--lime);color:var(--ink);padding:3px 10px;border-radius:100px;}
.hero-pills{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:30px;}
.hpill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--muted);background:var(--off2);border:1px solid var(--border);border-radius:100px;padding:5px 13px;}
.hpill .pip{width:5px;height:5px;border-radius:50%;background:var(--lime);flex-shrink:0;}
.hpill.hot{background:rgba(255,90,47,.07);border-color:rgba(255,90,47,.2);color:var(--orange);font-weight:700;}
.hpill.hot .pip{background:var(--orange);}
.hero-card-float{position:absolute;top:-18px;right:-18px;z-index:3;background:var(--ink);border-radius:var(--rl);padding:14px 20px;box-shadow:0 12px 40px rgba(0,0,0,.32);min-width:140px;}
.hcf-tag{font-size:8.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:5px;}
.hcf-amount{font-family:var(--fh);font-size:26px;font-weight:800;letter-spacing:-1.5px;color:#fff;line-height:1;}
.hcf-amount em{color:var(--lime);font-style:normal;font-size:12px;}
.hcf-sub{font-size:9.5px;color:rgba(255,255,255,.38);margin-top:3px;}
.hcf-pill{margin-top:9px;background:rgba(198,255,0,.12);color:var(--lime);font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:3px 9px;border-radius:100px;display:inline-block;}
.hero-bot-badge{position:absolute;bottom:-14px;left:-14px;z-index:3;background:var(--orange);border-radius:var(--rl);padding:11px 16px;box-shadow:0 8px 24px rgba(255,90,47,.3);}
.hbb-num{font-family:var(--fh);font-size:22px;font-weight:800;line-height:1;letter-spacing:-1px;color:#fff;}
.hbb-label{font-size:9.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.75);}
.reassure-strip{margin-top:14px;padding:12px 16px;background:var(--off2);border-radius:var(--rl);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.rsi{font-size:11px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:4px;}
.rsi::before{content:'\2713';color:var(--orange);font-weight:900;}
.rsi-sep{width:1px;height:12px;background:var(--border);}
.compare-section{background:var(--off2);padding:80px 52px;}
.compare-inner{max-width:1320px;margin:0 auto;}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--rxl);overflow:hidden;margin-top:52px;box-shadow:0 2px 40px rgba(0,0,0,.06);}
.cc{padding:40px 38px;}
.cc.bad{background:#fff;border:1.5px solid rgba(255,90,47,.1);border-radius:var(--rxl) 0 0 var(--rxl);}
.cc.good{background:var(--ink);border-radius:0 var(--rxl) var(--rxl) 0;}
.cc-head{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:5px 13px;border-radius:100px;margin-bottom:28px;}
.cc-head.bad-h{background:rgba(255,90,47,.08);color:var(--orange);}
.cc-head.good-h{background:rgba(198,255,0,.12);color:var(--lime);}
.cc-row{display:flex;align-items:flex-start;gap:11px;padding:12px 0;border-bottom:1px solid rgba(13,13,13,.06);font-size:13.5px;color:var(--muted);line-height:1.5;}
.cc.good .cc-row{border-bottom-color:rgba(255,255,255,.06);color:rgba(255,255,255,.5);}
.cc.good .cc-row strong{color:#fff;}
.cc-row:last-child{border-bottom:none;}
.cc-ico{font-size:15px;flex-shrink:0;margin-top:1px;}
.sub-banner{background:var(--ink);border-radius:var(--rxl);padding:44px 48px;margin-bottom:20px;position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 260px;gap:48px;align-items:center;}
.sb-blob{position:absolute;border-radius:50%;pointer-events:none;filter:blur(1px);}
.sb-blob-1{width:380px;height:380px;top:-140px;right:-80px;background:var(--lime);opacity:.055;}
.sb-blob-2{width:240px;height:240px;bottom:-70px;left:60px;background:var(--orange);opacity:.05;}
.sb-left{position:relative;z-index:1;}
.sb-eye{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:900;letter-spacing:2.5px;text-transform:uppercase;color:var(--lime);background:rgba(198,255,0,.1);border:1px solid rgba(198,255,0,.15);padding:5px 13px;border-radius:100px;margin-bottom:16px;}
.sb-h{font-family:var(--fh);font-size:clamp(22px,2.2vw,32px);font-weight:800;color:#fff;letter-spacing:-1.2px;line-height:1.1;margin-bottom:12px;}
.sb-h em{color:var(--lime);font-style:normal;}
.sb-p{font-size:14px;color:rgba(255,255,255,.42);line-height:1.68;max-width:500px;margin-bottom:22px;}
.sb-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px;}
.sb-tag{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.65);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:5px 12px;border-radius:100px;display:flex;align-items:center;gap:5px;}
.sb-tag::before{content:'\2713';color:var(--lime);font-weight:900;font-size:10px;}
.sb-ctas{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.sb-card{background:rgba(255,255,255,.05);border:1.5px solid rgba(198,255,0,.22);border-radius:var(--rl);padding:28px 28px 24px;position:relative;z-index:1;text-align:center;box-shadow:0 0 40px rgba(198,255,0,.06);}
.sc-badge{display:inline-block;background:var(--lime);color:var(--ink);font-family:var(--fh);font-size:9px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;padding:3px 11px;border-radius:100px;margin-bottom:14px;}
.sc-name{font-family:var(--fh);font-size:18px;font-weight:800;color:#fff;letter-spacing:-.4px;margin-bottom:4px;}
.sc-setup{font-size:12.5px;color:rgba(255,255,255,.38);margin-bottom:6px;}
.sc-setup strong{color:rgba(255,255,255,.8);}
.sc-line{width:100%;height:1px;background:rgba(255,255,255,.08);margin:10px 0;}
.sc-then{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.28);margin-bottom:3px;}
.sc-amount{font-family:var(--fh);font-size:48px;font-weight:800;color:#fff;letter-spacing:-3px;line-height:1;}
.sc-amount em{color:var(--lime);font-size:16px;font-style:normal;font-weight:800;}
.sc-period{font-size:11.5px;color:rgba(255,255,255,.3);margin-top:2px;}
.sc-cta{width:100%;margin-top:16px;padding:12px;background:var(--lime);color:var(--ink);border:none;border-radius:100px;font-family:var(--fh);font-size:13px;font-weight:900;cursor:pointer;transition:opacity .18s,transform .18s;letter-spacing:.1px;}
.sc-cta:hover{opacity:.88;transform:translateY(-1px);}
.sc-note{font-size:10px;color:rgba(255,255,255,.22);margin-top:9px;}
.offers-sep{display:flex;align-items:center;gap:14px;margin:36px 0 18px;font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);}
.offers-sep::before,.offers-sep::after{content:'';flex:1;height:1px;background:var(--border);}
.offers-note{margin-top:16px;padding:16px 22px;background:var(--off2);border-radius:var(--rl);display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.on-txt{font-size:13px;color:var(--muted);line-height:1.55;flex:1;}
.on-txt strong{color:var(--ink);}
.ticker-item.lime-acc{color:var(--lime) !important;}
@media(max-width:980px){
  .compare-section{padding:52px 20px;}
  .compare-grid{grid-template-columns:1fr;}
  .cc.bad{border-radius:var(--rxl);}
  .cc.good{border-radius:var(--rxl);}
  .sub-banner{grid-template-columns:1fr;padding:28px 24px;}
  .announce-bar{font-size:11px;flex-wrap:wrap;gap:8px;}
}

/* ── PORTFOLIO BIGBROWSER STYLE ── */
.portfolio-section {
  padding: 88px 52px;
  max-width: 1320px;
  margin: 0 auto;
}
.portfolio-scroll {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 52px;
}
.port-card {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform .3s, box-shadow .3s;
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.port-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 24px 64px rgba(0,0,0,.18); }
.port-card.wide { grid-column: span 2; aspect-ratio: 16/9; }
.port-card.tall { grid-row: span 2; aspect-ratio: unset; }

/* colored backgrounds per site */
.pc-bg-1 { background: #0A0A0C; }
.pc-bg-2 { background: #1A0A2E; }
.pc-bg-3 { background: #0D1F1A; }
.pc-bg-4 { background: #1C1207; }
.pc-bg-5 { background: #0F0F1A; }

/* browser mockup inside card */
.pc-browser {
  position: absolute;
  inset: 16px 16px 60px 16px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  transform: perspective(600px) rotateX(3deg);
  transition: transform .35s;
}
.port-card:hover .pc-browser { transform: perspective(600px) rotateX(0deg) scale(1.02); }
.pc-chrome {
  height: 22px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 4px;
}
.pc-dot { width: 7px; height: 7px; border-radius: 50%; }
.pc-dot-r { background: #FF5F57; }
.pc-dot-y { background: #FEBC2E; }
.pc-dot-g { background: #28C840; }
.pc-url {
  flex: 1;
  margin: 0 6px;
  height: 12px;
  border-radius: 6px;
  font-size: 8px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: rgba(255,255,255,.4);
}
.pc-body { flex: 1; overflow: hidden; position: relative; }

/* site previews — stylized representations */
.pc-hero { padding: 12px; }
.pc-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.pc-logo { height: 16px; border-radius: 3px; }
.pc-nav-links { display: flex; gap: 5px; }
.pc-nav-link { height: 6px; border-radius: 3px; opacity: .5; }
.pc-h1 { height: 14px; border-radius: 4px; margin-bottom: 5px; }
.pc-h2 { height: 9px; border-radius: 3px; margin-bottom: 4px; opacity: .7; }
.pc-sub { height: 5px; border-radius: 2px; margin-bottom: 3px; opacity: .4; }
.pc-cta-row { display: flex; gap: 6px; margin-top: 8px; }
.pc-cta { height: 18px; border-radius: 20px; }
.pc-feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 8px; }
.pc-feat-box { height: 28px; border-radius: 6px; }
.pc-img-hero { position: absolute; inset: 0; }

/* card footer */
.pc-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 18px;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pc-domain {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.2px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.pc-dot-live { width: 6px; height: 6px; border-radius: 50%; background: #28C840; flex-shrink: 0; }
.pc-sector { font-size: 10px; color: rgba(255,255,255,.45); }
.pc-arrow {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff;
  transition: background .2s;
}
.port-card:hover .pc-arrow { background: var(--orange); }

/* accent stripe on cards */
.pc-stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}

/* portfolio proof row */
.port-proof {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 28px;
  padding: 20px 24px;
  background: var(--off2);
  border-radius: var(--rl);
  flex-wrap: wrap;
}
.pp-stat { text-align: center; }
.pp-num { font-family: var(--fh); font-size: 28px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; color: var(--ink); }
.pp-num em { color: var(--orange); font-style: normal; }
.pp-label { font-size: 11px; color: var(--muted); margin-top: 2px; }
.pp-sep { width: 1px; height: 36px; background: var(--border); }
.pp-cta { margin-left: auto; }

/* ── SECTION ALLÉGEMENT ── */
/* Process compact — 4 étapes max */
.process-compact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border-radius: var(--rxl);
  overflow: hidden;
  margin-top: 48px;
}
.pco-step {
  background: var(--off);
  padding: 32px 24px;
  transition: background .2s;
  position: relative;
}
.pco-step:hover { background: var(--off2); }
.pco-step.hl { background: var(--ink); }
.pco-step.hl:hover { background: #1A1A1A; }
.pco-num { font-size: 9px; font-weight: 700; letter-spacing: 2.5px; color: var(--muted); text-transform: uppercase; margin-bottom: 16px; }
.pco-step.hl .pco-num { color: rgba(255,255,255,.3); }
.pco-icon { font-size: 24px; margin-bottom: 12px; }
.pco-title { font-family: var(--fh); font-size: 16px; font-weight: 800; margin-bottom: 6px; letter-spacing: -.3px; }
.pco-step.hl .pco-title { color: #fff; }
.pco-text { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.pco-step.hl .pco-text { color: rgba(255,255,255,.45); }
.pco-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--lime);
  background: rgba(198,255,0,.12);
  padding: 4px 10px;
  border-radius: 100px;
}

/* TESTIMONIALS compact — horizontal carousel feel */
.testi-compact {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

@media(max-width:980px){
  .portfolio-section { padding: 52px 20px; }
  .portfolio-scroll { grid-template-columns: 1fr; }
  .port-card.wide { grid-column: span 1; }
  .process-compact { grid-template-columns: 1fr 1fr; }
  .testi-compact { grid-template-columns: 1fr; }
  .pp-cta { width: 100%; }
}


/* LOGO NAV — version horizontale exacte charte */
.logo-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.logo-wordmark {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.2px;
  line-height: 1;
  color: #0D0D0D;
}
.logo-wordmark span {
  color: #FF5A2F;
  font-weight: 700;
}