/* =============================================
   VIRALO AGENCY — theme.css v3.0
   Clean rebuild — all tokens/components
   ============================================= */

/* ── TOKENS ─────────────────────────────────── */
:root {
  --blue:        #0047AB;
  --blue-dark:   #003380;
  --blue-light:  #0066FF;
  --accent:      #00A3FF;
  --black:       #090D18;
  --dark:        #111827;
  --dark-2:      #1C2535;
  --dark-3:      #252F40;
  --border:      rgba(255,255,255,0.07);
  --white:       #FFFFFF;
  --muted:       rgba(255,255,255,0.5);
  --muted-2:     rgba(255,255,255,0.3);

  --font:        'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --wrap:        1240px;
  --pad:         1.25rem;

  --r-sm:  0.375rem;
  --r-md:  0.625rem;
  --r-lg:  0.875rem;
  --r-xl:  1.25rem;
  --r-2xl: 1.75rem;
  --r-pill:9999px;

  --ease:  cubic-bezier(0.4,0,0.2,1);
  --fast:  180ms;
  --base:  280ms;
  --slow:  420ms;

  --shadow-blue: 0 8px 32px rgba(0,71,171,0.45);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.4);
}
@media(min-width:640px)  { :root { --pad: 2rem; } }
@media(min-width:1280px) { :root { --pad: 2.5rem; } }

/* ── RESET ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); background: var(--black); color: var(--white); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, video, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul, ol { list-style: none; }
h1,h2,h3,h4 { line-height: 1.15; letter-spacing: -0.02em; }
input,textarea,select { font-family: inherit; font-size: 1rem; }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* ── ACCESSIBILITY ──────────────────────────── */
.skip-link { position:absolute; top:-100%; left:1rem; background:var(--blue); color:#fff; padding:.75rem 1.5rem; border-radius:var(--r-md); font-weight:700; z-index:9999; }
.skip-link:focus { top:.75rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── LAYOUT ─────────────────────────────────── */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: 5rem 0; }
@media(min-width:768px)  { .section { padding: 7rem 0; } }
@media(min-width:1280px) { .section { padding: 8.5rem 0; } }
.section--dark   { background: var(--dark); }
.section--darker { background: var(--black); }
.section--grad   { background: linear-gradient(160deg,#090D18 0%,#0b1323 55%,#090D18 100%); }

/* ── TYPOGRAPHY ─────────────────────────────── */
.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--accent); margin-bottom:1rem;
}
.eyebrow::before { content:''; display:block; width:18px; height:2px; background:var(--accent); border-radius:var(--r-pill); }
.heading { font-size:clamp(1.875rem,4.5vw,3.125rem); font-weight:800; letter-spacing:-0.025em; text-wrap:balance; }
.heading--grad { background:linear-gradient(135deg,#fff 35%,var(--accent) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.subheading { font-size:clamp(1rem,1.5vw,1.125rem); color:var(--muted); line-height:1.75; max-width:600px; margin-top:1.25rem; }
.section-head { margin-bottom:3.5rem; }
.section-head--center { text-align:center; }
.section-head--center .subheading { margin-inline:auto; }

/* ── BUTTONS ─────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 2rem; font-size:1rem; font-weight:700; line-height:1;
  border-radius:var(--r-pill); transition:all var(--base) var(--ease);
  cursor:pointer; white-space:nowrap;
}
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.btn:active { transform:scale(0.97)!important; }
.btn--primary { background:var(--blue); color:#fff; box-shadow:var(--shadow-blue); }
.btn--primary:hover { background:var(--blue-dark); transform:translateY(-2px); box-shadow:0 14px 40px rgba(0,71,171,0.55); }
.btn--accent  { background:linear-gradient(135deg,var(--accent),var(--blue-light)); color:#fff; box-shadow:0 8px 24px rgba(0,163,255,0.3); }
.btn--accent:hover  { transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,163,255,0.45); }
.btn--outline { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.25); }
.btn--outline:hover { border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.05); }
.btn--outline-accent { background:transparent; color:var(--accent); border:1.5px solid rgba(0,163,255,0.35); }
.btn--outline-accent:hover { background:rgba(0,163,255,.08); border-color:var(--accent); }
.btn--ghost  { background:transparent; color:var(--accent); padding-inline:0; }
.btn--ghost:hover { gap:.875rem; }
.btn--lg  { padding:1.125rem 2.5rem; font-size:1.0625rem; }
.btn--sm  { padding:.6rem 1.25rem; font-size:.875rem; }
.btn--full { width:100%; }
.btn-row  { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }

/* ── BADGE / TAG ────────────────────────────── */
.badge { display:inline-flex; align-items:center; padding:.25rem .875rem; border-radius:var(--r-pill); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.badge--blue  { background:rgba(0,71,171,.15); color:var(--accent); border:1px solid rgba(0,163,255,.25); }
.badge--green { background:rgba(16,185,129,.1); color:#10B981; border:1px solid rgba(16,185,129,.3); }
.badge--feat  { background:var(--blue); color:#fff; }

/* ── ANNOUNCEMENT BAR ───────────────────────── */
.ann-bar { background:var(--blue); color:#fff; text-align:center; padding:.55rem 3rem; font-size:.875rem; font-weight:500; position:relative; z-index:200; }
.ann-bar__link { text-decoration:underline; text-underline-offset:2px; margin-left:.5rem; }
.ann-bar__close { position:absolute; right:1rem; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; color:rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; transition:all var(--fast); }
.ann-bar__close:hover { background:rgba(255,255,255,.15); color:#fff; }

/* ── HEADER ──────────────────────────────────── */
.site-header { position:fixed; top:0; left:0; right:0; z-index:100; padding:1.25rem 0; transition:all var(--base) var(--ease); }
.site-header.scrolled { background:rgba(9,13,24,.94); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); padding:.875rem 0; box-shadow:0 4px 24px rgba(0,0,0,.3); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.header-logo { font-size:1.375rem; font-weight:800; letter-spacing:-.03em; flex-shrink:0; display:flex; align-items:center; }
.header-logo img { height:36px; width:auto; }
.header-logo span { color:var(--accent); }
.header-nav { display:none; align-items:center; gap:.25rem; }
@media(min-width:1024px) { .header-nav { display:flex; } }
.nav-link { padding:.5rem 1rem; font-size:.875rem; font-weight:600; color:rgba(255,255,255,.7); border-radius:var(--r-lg); transition:all var(--fast); }
.nav-link:hover, .nav-link.active { color:#fff; background:rgba(255,255,255,.06); }
.header-actions { display:flex; align-items:center; gap:.75rem; }
.hamburger { width:2.5rem; height:2.5rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-radius:var(--r-md); transition:background var(--fast); }
.hamburger:hover { background:rgba(255,255,255,.06); }
.hamburger span { display:block; width:22px; height:2px; background:#fff; border-radius:var(--r-pill); transition:all var(--base) var(--ease); }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
@media(min-width:1024px) { .hamburger { display:none; } }
.mobile-nav { position:fixed; inset:0; z-index:99; background:rgba(9,13,24,.97); backdrop-filter:blur(24px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; opacity:0; pointer-events:none; transition:opacity var(--base) var(--ease); }
.mobile-nav.open { opacity:1; pointer-events:all; }
.mobile-nav .nav-link { font-size:2rem; font-weight:800; letter-spacing:-.02em; color:rgba(255,255,255,.75); padding:1rem 2rem; border-radius:var(--r-xl); }
.mobile-nav .nav-link:hover { color:var(--accent); background:rgba(255,255,255,.04); }

/* ── HERO ────────────────────────────────────── */
.hero { position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:7rem 0 5rem; overflow:hidden; background:var(--black); }
.hero__canvas { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.orb { position:absolute; border-radius:50%; filter:blur(80px); will-change:transform; }
.orb--1 { width:650px; height:650px; background:radial-gradient(circle,rgba(0,71,171,.42) 0%,transparent 65%); top:-200px; right:-180px; animation:float1 10s ease-in-out infinite; }
.orb--2 { width:500px; height:500px; background:radial-gradient(circle,rgba(0,163,255,.16) 0%,transparent 65%); bottom:-120px; left:-120px; animation:float2 13s ease-in-out infinite; }
.orb--3 { width:320px; height:320px; background:radial-gradient(circle,rgba(0,85,204,.18) 0%,transparent 65%); top:42%; left:37%; animation:float3 15s ease-in-out infinite; }
.grid-bg { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px); background-size:60px 60px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent); -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent); }
@keyframes float1 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(-18px,22px)} 66%{transform:translate(14px,-14px)} }
@keyframes float2 { 0%,100%{transform:translate(0,0)} 40%{transform:translate(16px,-20px)} 70%{transform:translate(-10px,10px)} }
@keyframes float3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-22px,18px)} }
.hero__inner { position:relative; z-index:1; max-width:880px; }
.hero__badge { display:inline-flex; align-items:center; gap:.625rem; background:rgba(0,163,255,.08); border:1px solid rgba(0,163,255,.22); border-radius:var(--r-pill); padding:.4rem 1rem .4rem .625rem; font-size:.875rem; font-weight:700; color:var(--accent); margin-bottom:1.75rem; }
.hero__pulse { width:8px; height:8px; background:var(--accent); border-radius:50%; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(0,163,255,.5)} 50%{box-shadow:0 0 0 8px rgba(0,163,255,0)} }
.hero__title { font-size:clamp(2.5rem,6vw,5rem); font-weight:800; line-height:1.06; letter-spacing:-.03em; margin-bottom:1.5rem; text-wrap:balance; }
.hero__title em { font-style:normal; background:linear-gradient(135deg,var(--accent) 0%,#60a5fa 55%,var(--accent) 100%); background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:shimmer 4s linear infinite; }
@keyframes shimmer { to { background-position:200% center; } }
.hero__sub { font-size:clamp(1rem,2vw,1.25rem); color:rgba(255,255,255,.58); line-height:1.75; max-width:580px; margin-bottom:2.5rem; }
.hero__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; max-width:480px; padding-top:2.5rem; border-top:1px solid var(--border); }
.hstat__num { font-size:clamp(1.5rem,3vw,2.25rem); font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.hstat__lbl { font-size:.75rem; color:var(--muted); font-weight:500; margin-top:.375rem; line-height:1.3; }
.hero__scroll { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--muted-2); font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; animation:bounce 2.2s ease-in-out infinite; }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0);opacity:.3} 50%{transform:translateX(-50%) translateY(6px);opacity:.6} }

/* ── STATS BAR ──────────────────────────────── */
.stats-bar { background:var(--dark); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:3.5rem 0; }
.stats-bar__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem 1.5rem; }
@media(min-width:768px) { .stats-bar__grid { grid-template-columns:repeat(4,1fr); } }
.stat-num { font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; display:flex; align-items:flex-start; justify-content:center; }
.stat-lbl { font-size:.875rem; color:var(--muted); font-weight:500; margin-top:.5rem; text-align:center; line-height:1.4; }

/* ── SERVICES ─────────────────────────────── */
.svcs-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media(min-width:640px) { .svcs-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px) { .svcs-grid { grid-template-columns:repeat(3,1fr); } }
.svc-card { background:var(--dark); border:1px solid var(--border); border-radius:var(--r-2xl); padding:2rem; display:flex; flex-direction:column; position:relative; overflow:hidden; transition:all var(--base) var(--ease); }
.svc-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--blue),var(--accent)); border-radius:var(--r-pill) var(--r-pill) 0 0; transform:scaleX(0); transform-origin:left; transition:transform var(--base) var(--ease); }
.svc-card:hover { border-color:rgba(0,163,255,.2); transform:translateY(-6px); box-shadow:0 20px 60px rgba(0,71,171,.15); }
.svc-card:hover::before { transform:scaleX(1); }
.svc-card--feat { background:linear-gradient(145deg,rgba(0,71,171,.14),rgba(0,163,255,.04)); border-color:rgba(0,163,255,.25); }
.svc-icon { width:52px; height:52px; background:rgba(0,71,171,.1); border:1px solid rgba(0,71,171,.18); border-radius:var(--r-xl); display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem; color:var(--accent); transition:all var(--base) var(--ease); }
.svc-card:hover .svc-icon { background:rgba(0,71,171,.2); border-color:rgba(0,163,255,.35); }
.svc-title { font-size:1.125rem; font-weight:800; letter-spacing:-.02em; margin-bottom:.75rem; }
.svc-desc { font-size:.875rem; color:rgba(255,255,255,.6); line-height:1.75; flex:1; margin-bottom:1.5rem; }
.svc-tags { display:flex; flex-wrap:wrap; gap:.5rem; }
.svc-tag { font-size:.75rem; font-weight:600; color:var(--muted); background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--r-pill); padding:.25rem .75rem; }

/* ── WHY US ──────────────────────────────────── */
.why-layout { display:grid; grid-template-columns:1fr; gap:4rem; align-items:center; }
@media(min-width:1024px) { .why-layout { grid-template-columns:1fr 1fr; gap:5rem; } }
.why-feats { display:flex; flex-direction:column; gap:1rem; }
.why-feat { display:grid; grid-template-columns:auto 1fr; gap:1.25rem; align-items:flex-start; padding:1.5rem; background:var(--dark); border:1px solid var(--border); border-radius:var(--r-xl); transition:all var(--base) var(--ease); }
.why-feat:hover { border-color:rgba(0,163,255,.2); box-shadow:0 4px 24px rgba(0,71,171,.1); }
.why-feat__icon { width:46px; height:46px; background:rgba(0,71,171,.1); border:1px solid rgba(0,71,171,.18); border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; color:var(--accent); flex-shrink:0; }
.why-feat__title { font-size:1rem; font-weight:700; margin-bottom:.375rem; }
.why-feat__desc { font-size:.875rem; color:var(--muted); line-height:1.65; }
.why-metrics { display:flex; flex-direction:column; gap:1rem; }
.why-metric { background:var(--dark); border:1px solid var(--border); border-radius:var(--r-xl); padding:1.5rem; display:flex; align-items:center; gap:1.25rem; transition:all var(--base) var(--ease); }
.why-metric:hover { border-color:rgba(0,163,255,.2); transform:translateX(4px); }
.why-metric__icon { width:50px; height:50px; border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.375rem; }
.ic-blue   { background:rgba(0,163,255,.12); }
.ic-green  { background:rgba(16,185,129,.12); }
.ic-purple { background:rgba(139,92,246,.12); }
.ic-orange { background:rgba(249,115,22,.12); }
.why-metric__val { font-size:1.75rem; font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.why-metric__lbl { font-size:.75rem; color:var(--muted); margin-top:.25rem; }

/* ── PORTFOLIO ───────────────────────────────── */
.port-tabs { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:3rem; }
.port-tab { padding:.5rem 1.25rem; font-size:.875rem; font-weight:700; border-radius:var(--r-pill); border:1.5px solid var(--border); color:rgba(255,255,255,.45); transition:all var(--fast); }
.port-tab:hover, .port-tab.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.port-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media(min-width:640px) { .port-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px) { .port-grid { grid-template-columns:repeat(3,1fr); } }
.port-item { position:relative; border-radius:var(--r-xl); overflow:hidden; background:var(--dark); border:1px solid var(--border); cursor:pointer; aspect-ratio:9/16; transition:all var(--base) var(--ease); }
@media(min-width:1024px) { .port-item:first-child { grid-row:span 2; aspect-ratio:auto; min-height:460px; } }
.port-item:hover { transform:scale(1.02); border-color:rgba(0,163,255,.2); }
.port-item__thumb { width:100%; height:100%; object-fit:cover; transition:transform var(--slow) var(--ease); }
.port-item:hover .port-item__thumb { transform:scale(1.06); }
.port-item__overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.2) 50%,transparent 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem; }
.port-placeholder { position:absolute; inset:0; background:linear-gradient(145deg,var(--dark-2) 0%,rgba(0,71,171,0.2) 50%,var(--dark-3) 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem; padding:1.5rem; }
.port-placeholder__icon { color:var(--accent); opacity:.5; }
.port-item__play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.9); width:58px; height:58px; background:rgba(255,255,255,.12); backdrop-filter:blur(8px); border:2px solid rgba(255,255,255,.22); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all var(--base) var(--ease); color:#fff; }
.port-item:hover .port-item__play { background:var(--blue); border-color:var(--blue); transform:translate(-50%,-50%) scale(1); box-shadow:0 0 28px rgba(0,71,171,.5); }
.port-item__cat { font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin-bottom:.375rem; }
.port-item__name { font-size:.875rem; font-weight:700; }
.port-item__client { font-size:.75rem; color:rgba(255,255,255,.55); margin-top:.25rem; }

/* ── RESULTS ─────────────────────────────────── */
.results-grid { display:grid; grid-template-columns:1fr; gap:2rem; }
@media(min-width:768px) { .results-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1280px) { .results-grid { grid-template-columns:repeat(3,1fr); } }
.result-card { background:var(--dark); border:1px solid var(--border); border-radius:var(--r-2xl); overflow:hidden; transition:all var(--base) var(--ease); display:flex; flex-direction:column; }
.result-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(0,163,255,.16); }
.result-card__head { background:var(--dark-2); padding:1.5rem; display:flex; align-items:center; gap:1rem; border-bottom:1px solid var(--border); }
.result-card__av { width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg,var(--blue-dark),var(--accent)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.125rem; color:#fff; flex-shrink:0; }
.result-card__name { font-weight:800; font-size:1rem; }
.result-card__sector { font-size:.75rem; color:var(--muted); margin-top:.25rem; }
.result-kpis { display:grid; grid-template-columns:repeat(2,1fr); flex:1; }
.result-kpi { padding:1.25rem 1.5rem; border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
.result-kpi:nth-child(even) { border-right:none; }
.result-kpi:nth-last-child(-n+2) { border-bottom:none; }
.result-kpi__val { font-size:1.875rem; font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; }
.result-kpi__lbl { font-size:.75rem; color:var(--muted); margin-top:.375rem; }
.result-quote { padding:1.5rem; font-size:.875rem; color:rgba(255,255,255,.5); line-height:1.7; font-style:italic; border-top:1px solid var(--border); }

/* ── TESTIMONIALS ───────────────────────────── */
.testi-wrap { position:relative; }
.testi-slider { overflow:hidden; }
.testi-track { display:flex; transition:transform var(--slow) var(--ease); will-change:transform; }
.testi-slide { flex:0 0 100%; padding:0 .75rem; }
@media(min-width:768px)  { .testi-slide { flex:0 0 50%; } }
@media(min-width:1280px) { .testi-slide { flex:0 0 33.333%; } }
.testi-card { background:var(--dark); border:1px solid var(--border); border-radius:var(--r-2xl); padding:2rem; height:100%; display:flex; flex-direction:column; }
.testi-stars { display:flex; gap:.25rem; color:#F59E0B; margin-bottom:1.25rem; }
.testi-quote { font-size:1rem; color:rgba(255,255,255,.68); line-height:1.75; flex:1; margin-bottom:1.5rem; position:relative; padding-top:.5rem; }
.testi-quote::before { content:'"'; font-family:Georgia,serif; font-size:4rem; color:var(--blue); line-height:1; position:absolute; top:-.75rem; left:-.25rem; opacity:.45; font-style:italic; }
.testi-author { display:flex; align-items:center; gap:1rem; padding-top:1.25rem; border-top:1px solid var(--border); }
.testi-av { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--accent)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.875rem; color:#fff; flex-shrink:0; }
.testi-name { font-weight:700; font-size:.875rem; }
.testi-role { font-size:.75rem; color:var(--muted); margin-top:.125rem; }
.carousel-ctrl { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:2.5rem; }
.carousel-btn { width:42px; height:42px; border-radius:50%; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:all var(--fast); }
.carousel-btn:hover { border-color:var(--blue); background:rgba(0,71,171,.12); color:#fff; }
.carousel-dots { display:flex; gap:.5rem; }
.carousel-dot { width:8px; height:8px; border-radius:var(--r-pill); background:var(--border); transition:all var(--base) var(--ease); border:none; padding:0; cursor:pointer; }
.carousel-dot.active { width:24px; background:var(--accent); }

/* ── PRICING ──────────────────────────────────── */
.pricing-grid { display:grid; grid-template-columns:1fr; gap:2rem; align-items:start; }
@media(min-width:768px) { .pricing-grid { grid-template-columns:repeat(3,1fr); align-items:stretch; } }
.pricing-card { background:var(--dark); border:1px solid var(--border); border-radius:var(--r-2xl); padding:2.5rem 2rem; display:flex; flex-direction:column; position:relative; transition:all var(--base) var(--ease); }
.pricing-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.pricing-card--feat { background:linear-gradient(145deg,rgba(0,71,171,.18),rgba(0,163,255,.04)); border-color:rgba(0,163,255,.35); transform:scale(1.04); box-shadow:0 0 60px rgba(0,71,171,.12); }
.pricing-card--feat:hover { transform:scale(1.04) translateY(-4px); }
@media(max-width:767px) { .pricing-card--feat,.pricing-card--feat:hover { transform:none; } }
.pricing-badge { position:absolute; top:-1px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--blue),var(--accent)); color:#fff; font-size:.6875rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; padding:.35rem 1.25rem; border-radius:0 0 var(--r-lg) var(--r-lg); white-space:nowrap; }
.pricing-tier { font-size:.6875rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); margin-bottom:1rem; }
.pricing-price { display:flex; align-items:flex-end; gap:.25rem; margin-bottom:.5rem; }
.pricing-currency { font-size:1.25rem; font-weight:700; color:var(--muted); padding-bottom:.4rem; }
.pricing-amount { font-size:clamp(2.5rem,4vw,3.5rem); font-weight:800; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.pricing-period { font-size:.875rem; color:var(--muted); margin-bottom:.5rem; }
.pricing-desc { font-size:.875rem; color:rgba(255,255,255,.6); line-height:1.65; margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid var(--border); }
.pricing-feats { flex:1; display:flex; flex-direction:column; gap:.875rem; margin-bottom:2rem; }
.pricing-feat { display:flex; align-items:flex-start; gap:.75rem; font-size:.875rem; color:rgba(255,255,255,.72); line-height:1.5; }
.pricing-feat svg { flex-shrink:0; color:var(--accent); margin-top:2px; }
.pricing-feat--off { opacity:.3; }
.pricing-feat--off svg { color:var(--muted); }
.pricing-note { font-size:.75rem; color:var(--muted); text-align:center; margin-top:1.25rem; }

/* ── FAQ ──────────────────────────────────────── */
.faq-wrap { max-width:780px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item:first-child { border-top:1px solid var(--border); }
.faq-q { width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.5rem 0; font-size:1rem; font-weight:700; color:rgba(255,255,255,.8); cursor:pointer; transition:color var(--fast); }
.faq-q:hover { color:#fff; }
.faq-q.open { color:var(--accent); }
.faq-q__icon { width:28px; height:28px; flex-shrink:0; border-radius:50%; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:all var(--base) var(--ease); }
.faq-q.open .faq-q__icon { background:var(--blue); border-color:var(--blue); color:#fff; transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height var(--slow) var(--ease); }
.faq-a-inner { padding-bottom:1.5rem; font-size:.875rem; color:rgba(255,255,255,.52); line-height:1.8; }

/* ── CONTACT FORM ─────────────────────────────── */
.form-card { max-width:700px; margin:0 auto; background:var(--dark); border:1px solid var(--border); border-radius:var(--r-2xl); padding:clamp(2rem,5vw,3.5rem); }
.form-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media(min-width:640px) { .form-grid { grid-template-columns:repeat(2,1fr); } }
.form-field { display:flex; flex-direction:column; gap:.5rem; }
.form-field--full { grid-column:1/-1; }
.form-label { font-size:.875rem; font-weight:700; color:rgba(255,255,255,.72); }
.form-label .req { color:var(--accent); }
.form-input, .form-textarea, .form-select {
  width:100%; background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg); padding:.875rem 1.125rem; color:#fff;
  transition:all var(--fast); appearance:none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus { outline:none; border-color:var(--blue); background:rgba(0,71,171,.06); box-shadow:0 0 0 3px rgba(0,71,171,.18); }
.form-input::placeholder, .form-textarea::placeholder { color:rgba(255,255,255,.22); }
.form-textarea { resize:vertical; min-height:120px; }
.form-select option { background:var(--dark); color:#fff; }
.form-err { font-size:.75rem; color:#EF4444; display:none; }
.form-field.has-err .form-input, .form-field.has-err .form-textarea { border-color:#EF4444; }
.form-field.has-err .form-err { display:block; }
.form-privacy { font-size:.75rem; color:var(--muted); text-align:center; margin-top:1rem; display:flex; align-items:center; justify-content:center; gap:.375rem; }
.form-success { display:none; text-align:center; padding:3rem 2rem; }
.form-success.show { display:block; }

/* ── FOOTER ───────────────────────────────────── */
.footer { background:var(--dark); border-top:1px solid var(--border); }
.footer__main { padding:5rem 0 4rem; }
.footer-grid { display:grid; grid-template-columns:1fr; gap:3rem; }
@media(min-width:640px)  { .footer-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px) { .footer-grid { grid-template-columns:2.5fr 1fr 1fr 1fr; } }
.footer-logo { font-size:1.375rem; font-weight:800; letter-spacing:-.03em; margin-bottom:1rem; }
.footer-logo span { color:var(--accent); }
.footer-tagline { font-size:.875rem; color:rgba(255,255,255,.38); line-height:1.75; margin-bottom:1.75rem; max-width:260px; }
.footer-socials { display:flex; gap:.75rem; }
.footer-social { width:40px; height:40px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.45); transition:all var(--fast); }
.footer-social:hover { background:var(--blue); border-color:var(--blue); color:#fff; }
.footer-col-title { font-size:.6875rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.45); margin-bottom:1.25rem; }
.footer-links { display:flex; flex-direction:column; gap:.75rem; }
.footer-link { font-size:.875rem; color:rgba(255,255,255,.42); transition:color var(--fast); }
.footer-link:hover { color:#fff; }
.footer__bottom { padding:1.75rem 0; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; }
.footer-copy { font-size:.75rem; color:rgba(255,255,255,.28); }
.footer-legal { display:flex; gap:1.5rem; }
.footer-legal a { font-size:.75rem; color:rgba(255,255,255,.28); transition:color var(--fast); }
.footer-legal a:hover { color:rgba(255,255,255,.65); }

/* ── VIDEO MODAL ──────────────────────────────── */
.vmodal { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:1.5rem; opacity:0; pointer-events:none; transition:opacity var(--base) var(--ease); }
.vmodal.open { opacity:1; pointer-events:all; }
.vmodal__bg { position:absolute; inset:0; background:rgba(0,0,0,.92); }
.vmodal__box { position:relative; width:100%; max-width:920px; border-radius:var(--r-2xl); overflow:hidden; box-shadow:0 0 80px rgba(0,0,0,.7); }
.vmodal__close { position:absolute; top:-2.75rem; right:0; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:#fff; transition:background var(--fast); z-index:1; }
.vmodal__close:hover { background:rgba(255,255,255,.2); }
.vmodal__media { position:relative; aspect-ratio:16/9; background:var(--dark); }
.vmodal__media iframe { position:absolute; inset:0; width:100%; height:100%; }

/* ── WHATSAPP FLOAT ───────────────────────────── */
.wa-float { position:fixed; bottom:1.75rem; right:1.5rem; z-index:89; width:52px; height:52px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 4px 20px rgba(37,211,102,.42); transition:all var(--base) var(--ease); }
.wa-float:hover { transform:scale(1.12); box-shadow:0 8px 28px rgba(37,211,102,.55); }

/* ── SCROLL REVEAL ────────────────────────────── */
.reveal, .reveal-l, .reveal-r, .reveal-s { transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.reveal   { opacity:0; transform:translateY(24px); }
.reveal-l { opacity:0; transform:translateX(-32px); }
.reveal-r { opacity:0; transform:translateX(32px); }
.reveal-s { opacity:0; transform:scale(0.93); }
.reveal.in,.reveal-l.in,.reveal-r.in,.reveal-s.in { opacity:1; transform:none; }
.stagger > * { opacity:0; transform:translateY(20px); transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.stagger.in > *:nth-child(1) { opacity:1; transform:none; transition-delay:0ms; }
.stagger.in > *:nth-child(2) { opacity:1; transform:none; transition-delay:80ms; }
.stagger.in > *:nth-child(3) { opacity:1; transform:none; transition-delay:160ms; }
.stagger.in > *:nth-child(4) { opacity:1; transform:none; transition-delay:240ms; }
.stagger.in > *:nth-child(5) { opacity:1; transform:none; transition-delay:320ms; }
.stagger.in > *:nth-child(6) { opacity:1; transform:none; transition-delay:400ms; }

/* ── COUNT-UP ─────────────────────────────────── */
.countup { font-variant-numeric:tabular-nums; }

/* ── INNER PAGE BASE ──────────────────────────── */
.inner { padding-top:8rem; padding-bottom:5rem; min-height:70vh; }
.inner-title { font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:-.025em; margin-bottom:1.5rem; text-wrap:balance; }
.inner-lead  { font-size:1.125rem; color:var(--muted); line-height:1.7; margin-bottom:2.5rem; }
.inner-body  { font-size:1rem; color:rgba(255,255,255,.65); line-height:1.8; }
.inner-body h1,.inner-body h2,.inner-body h3 { color:#fff; font-weight:700; margin:2rem 0 1rem; }
.inner-body p { margin-bottom:1.25rem; }
.inner-body a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.inner-body ul,.inner-body ol { padding-left:1.5rem; margin-bottom:1.25rem; list-style:initial; }
.inner-body li { margin-bottom:.5rem; }

/* ── BREADCRUMBS ─────────────────────────────── */
.breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:2rem; }
.breadcrumbs__link { font-size:.875rem; color:var(--muted); display:flex; align-items:center; gap:.375rem; transition:color var(--fast); }
.breadcrumbs__link:hover { color:var(--accent); }
.breadcrumbs__sep { color:var(--muted-2); font-size:.875rem; }
.breadcrumbs__cur { font-size:.875rem; color:rgba(255,255,255,.45); }

/* ── PRODUCT GRID ─────────────────────────────── */
.pgrid { display:grid; grid-template-columns:1fr; gap:2rem; }
@media(min-width:640px)  { .pgrid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px) { .pgrid { grid-template-columns:repeat(3,1fr); } }
.pcard { background:var(--dark); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; transition:all var(--base) var(--ease); }
.pcard:hover { transform:translateY(-4px); border-color:rgba(0,163,255,.2); box-shadow:0 12px 40px rgba(0,0,0,.3); }
.pcard__link { display:block; }
.pcard__media { position:relative; aspect-ratio:1; overflow:hidden; background:var(--dark-2); }
.pcard__img { width:100%; height:100%; object-fit:cover; transition:transform var(--slow) var(--ease); }
.pcard:hover .pcard__img { transform:scale(1.05); }
.pcard__placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--accent); opacity:.25; }
.pcard__badge { position:absolute; top:.75rem; left:.75rem; background:linear-gradient(135deg,#10B981,#059669); color:#fff; font-size:.6875rem; font-weight:700; padding:.25rem .75rem; border-radius:var(--r-pill); text-transform:uppercase; letter-spacing:.06em; }
.pcard__body { padding:1.25rem; }
.pcard__title { font-size:1rem; font-weight:700; margin-bottom:.5rem; line-height:1.3; }
.price { display:flex; align-items:center; gap:.75rem; }
.price__now { font-size:1.125rem; font-weight:800; font-variant-numeric:tabular-nums; }
.price__was { font-size:.875rem; color:var(--muted); text-decoration:line-through; font-variant-numeric:tabular-nums; }

/* ── CART ─────────────────────────────────────── */
.cart-layout { display:grid; grid-template-columns:1fr; gap:2.5rem; }
@media(min-width:1024px) { .cart-layout { grid-template-columns:1fr 360px; align-items:start; } }
.cart-item { display:grid; grid-template-columns:80px 1fr auto; gap:1.25rem; align-items:center; padding:1.5rem 0; border-bottom:1px solid var(--border); }
.cart-item:first-child { border-top:1px solid var(--border); }
.cart-item__img { width:80px; height:80px; object-fit:cover; border-radius:var(--r-lg); background:var(--dark-2); }
.cart-item__title { font-weight:700; font-size:.875rem; margin-bottom:.375rem; }
.cart-item__variant { font-size:.75rem; color:var(--muted); }
.cart-qty { display:flex; align-items:center; gap:.75rem; margin-top:.75rem; }
.qty-btn { width:30px; height:30px; border:1px solid var(--border); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.125rem; transition:border-color var(--fast); }
.qty-btn:hover { border-color:var(--blue); }
.qty-input { width:44px; text-align:center; background:transparent; border:1px solid var(--border); border-radius:var(--r-md); padding:.375rem; color:#fff; font-size:.875rem; font-weight:700; }
.cart-item__price { font-weight:800; font-variant-numeric:tabular-nums; }
.cart-remove { font-size:.75rem; color:var(--muted); text-decoration:underline; transition:color var(--fast); margin-top:.5rem; display:block; }
.cart-remove:hover { color:#EF4444; }
.cart-summary { background:var(--dark); border:1px solid var(--border); border-radius:var(--r-2xl); padding:2rem; position:sticky; top:7rem; }
.cart-summary__title { font-size:1.25rem; font-weight:800; margin-bottom:1.5rem; }
.summary-line { display:flex; justify-content:space-between; font-size:.875rem; color:rgba(255,255,255,.62); margin-bottom:.75rem; }
.summary-total { display:flex; justify-content:space-between; font-size:1.125rem; font-weight:800; padding-top:1rem; border-top:1px solid var(--border); margin-top:.5rem; margin-bottom:1.5rem; font-variant-numeric:tabular-nums; }

/* ── AUTH ─────────────────────────────────────── */
.auth-card { max-width:460px; margin:0 auto; background:var(--dark); border:1px solid var(--border); border-radius:var(--r-2xl); padding:clamp(2rem,5vw,3rem); }
.auth-title { font-size:1.75rem; font-weight:800; margin-bottom:.625rem; }
.auth-sub   { font-size:.875rem; color:var(--muted); margin-bottom:2rem; }
.auth-foot  { font-size:.875rem; color:var(--muted); text-align:center; margin-top:1.5rem; }
.auth-foot a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

/* ── SEARCH ───────────────────────────────────── */
.search-bar { position:relative; max-width:580px; margin:0 auto 3rem; }
.search-bar__input { width:100%; padding:1rem 1.25rem 1rem 3.25rem; font-size:1.0625rem; background:var(--dark); border:1.5px solid var(--border); border-radius:var(--r-pill); color:#fff; transition:all var(--fast); }
.search-bar__input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,71,171,.18); }
.search-bar__icon { position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.search-count { text-align:center; font-size:.875rem; color:var(--muted); margin-bottom:2rem; }

/* ── 404 ──────────────────────────────────────── */
.error-pg { min-height:75vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:3rem var(--pad); }
.error-code { font-size:clamp(6rem,18vw,12rem); font-weight:800; letter-spacing:-.05em; line-height:1; background:linear-gradient(135deg,var(--blue),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ── PASSWORD PAGE ────────────────────────────── */
.pwd-pg { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem; }
.pwd-logo { font-size:2rem; font-weight:800; letter-spacing:-.03em; margin-bottom:2rem; }
.pwd-logo span { color:var(--accent); }

/* ── GIFT CARD ────────────────────────────────── */
.gcard { max-width:500px; margin:0 auto; background:var(--dark); border:1px solid var(--border); border-radius:var(--r-2xl); overflow:hidden; }
.gcard__head { background:linear-gradient(135deg,var(--blue-dark),var(--accent)); padding:3rem 2rem; text-align:center; }
.gcard__amount { font-size:clamp(3rem,8vw,5rem); font-weight:800; letter-spacing:-.04em; }
.gcard__body { padding:2rem; }
.gcard__code { font-family:'Courier New',monospace; font-size:1.25rem; font-weight:700; letter-spacing:.1em; text-align:center; background:var(--dark-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:1rem; margin:1.5rem 0; word-break:break-all; }

/* ── ORDER TABLE ──────────────────────────────── */
.order-table { width:100%; border-collapse:collapse; }
.order-table th,.order-table td { text-align:left; padding:.875rem 1.25rem; font-size:.875rem; border-bottom:1px solid var(--border); white-space:nowrap; }
.order-table th { color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.6875rem; }
.ostatus { display:inline-flex; align-items:center; padding:.25rem .75rem; border-radius:var(--r-pill); font-size:.6875rem; font-weight:700; }
.ostatus--paid    { background:rgba(16,185,129,.1); color:#10B981; }
.ostatus--pending { background:rgba(249,115,22,.1); color:#F97316; }
.ostatus--grey    { background:rgba(107,114,128,.1); color:rgba(255,255,255,.5); }

/* ── ADDRESSES ────────────────────────────────── */
.addr-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media(min-width:640px) { .addr-grid { grid-template-columns:repeat(2,1fr); } }
.addr-card { background:var(--dark); border:1px solid var(--border); border-radius:var(--r-xl); padding:1.5rem; display:flex; flex-direction:column; gap:.625rem; }
.addr-name { font-weight:700; }
.addr-line { font-size:.875rem; color:var(--muted); }
.addr-actions { display:flex; gap:.75rem; margin-top:.625rem; }

/* ── BLOG ─────────────────────────────────────── */
.blog-grid { display:grid; grid-template-columns:1fr; gap:2rem; }
@media(min-width:640px)  { .blog-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px) { .blog-grid { grid-template-columns:repeat(3,1fr); } }
.art-card { background:var(--dark); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; transition:all var(--base) var(--ease); }
.art-card:hover { transform:translateY(-4px); border-color:rgba(0,163,255,.2); box-shadow:0 12px 40px rgba(0,0,0,.3); }
.art-card__img { width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--dark-2); }
.art-card__body { padding:1.5rem; }
.art-card__meta { font-size:.75rem; color:var(--muted); margin-bottom:.75rem; display:flex; gap:1rem; }
.art-card__title { font-size:1.0625rem; font-weight:700; line-height:1.3; margin-bottom:.75rem; }
.art-card__exc { font-size:.875rem; color:rgba(255,255,255,.58); line-height:1.65; }

/* ── PAGINATION ──────────────────────────────── */
.pagination { display:flex; justify-content:center; gap:.75rem; margin-top:3rem; }

/* ── CONTACT SECTION ──────────────────────────── */
.contact-layout { display:grid; grid-template-columns:1fr; gap:3rem; align-items:start; }
@media(min-width:1024px) { .contact-layout { grid-template-columns:1fr 1fr; gap:5rem; } }
.contact-info .heading { margin:.5rem 0 0; }
.contact-list { list-style:none; display:flex; flex-direction:column; gap:.875rem; margin:1.75rem 0 2rem; }
.contact-detail { display:flex; align-items:center; gap:.875rem; font-size:.9375rem; color:rgba(255,255,255,.65); }
.contact-detail a { color:rgba(255,255,255,.65); transition:color var(--fast); }
.contact-detail a:hover { color:var(--accent); }
.contact-detail svg { color:var(--accent); flex-shrink:0; }
.contact-trust { display:flex; flex-direction:column; gap:.75rem; }
.contact-trust-item { display:flex; align-items:center; gap:.625rem; font-size:.875rem; font-weight:600; color:rgba(255,255,255,.72); }
.contact-trust-item svg { color:var(--accent); flex-shrink:0; }
.contact-form-wrap { background:var(--dark); border:1px solid var(--border); border-radius:var(--r-2xl); padding:clamp(2rem,4vw,3rem); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-bottom:1.25rem; }
@media(max-width:640px) { .form-row { grid-template-columns:1fr; } }

/* ── PORTFOLIO NEW CLASSES ────────────────────── */
.port-card { position:relative; border-radius:var(--r-xl); overflow:hidden; background:var(--dark); border:1px solid var(--border); cursor:pointer; transition:all var(--base) var(--ease); }
.port-card:hover { transform:scale(1.02); border-color:rgba(0,163,255,.2); }
.port-thumb { width:100%; height:100%; border:none; background:none; padding:0; cursor:pointer; display:block; position:relative; }
.port-thumb-placeholder { width:100%; aspect-ratio:9/16; background:linear-gradient(145deg,var(--dark-2),var(--dark-3)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem; }
.port-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.9); width:58px; height:58px; background:rgba(255,255,255,.12); backdrop-filter:blur(8px); border:2px solid rgba(255,255,255,.22); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all var(--base) var(--ease); color:#fff; pointer-events:none; }
.port-card:hover .port-play { background:var(--blue); border-color:var(--blue); transform:translate(-50%,-50%) scale(1); }
.port-badge { position:absolute; top:.875rem; left:.875rem; }
.port-info { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top,rgba(0,0,0,.85),transparent); padding:1.25rem 1.5rem; }
.port-title { font-size:.875rem; font-weight:700; margin-bottom:.25rem; }
.port-result { font-size:.75rem; color:var(--accent); display:flex; align-items:center; gap:.375rem; margin-top:.375rem; }

/* ── TESTIMONIAL NEW CLASSES ──────────────────── */
.carousel { position:relative; }
.carousel__track { display:flex; transition:transform var(--slow) var(--ease); }
.carousel__slide { flex:0 0 100%; padding:0 .75rem; }
@media(min-width:768px) { .carousel__slide { flex:0 0 50%; } }
@media(min-width:1280px) { .carousel__slide { flex:0 0 33.333%; } }
.test-card { background:var(--dark); border:1px solid var(--border); border-radius:var(--r-2xl); padding:2rem; height:100%; display:flex; flex-direction:column; }
.test-stars { display:flex; gap:.25rem; color:#F59E0B; margin-bottom:1.25rem; }
.test-star--off { opacity:.25; }
.test-quote { font-size:1rem; color:rgba(255,255,255,.68); line-height:1.75; flex:1; margin-bottom:1.5rem; }
.test-author { display:flex; align-items:center; gap:1rem; padding-top:1.25rem; border-top:1px solid var(--border); }
.test-avatar { width:42px; height:42px; border-radius:50%; object-fit:cover; }
.test-avatar-placeholder { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--accent)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.875rem; color:#fff; flex-shrink:0; }
.test-name { font-weight:700; font-size:.875rem; }
.test-role { font-size:.75rem; color:var(--muted); margin-top:.125rem; }
.carousel__nav { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:2.5rem; }
.carousel__btn { width:42px; height:42px; border-radius:50%; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:all var(--fast); }
.carousel__btn:hover { border-color:var(--blue); background:rgba(0,71,171,.12); color:#fff; }
.carousel__dots { display:flex; gap:.5rem; }

/* ── RESULTS MISSING CLASSES ──────────────────── */
.res-grid { display:grid; grid-template-columns:1fr; gap:2rem; }
@media(min-width:768px) { .res-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1280px) { .res-grid { grid-template-columns:repeat(3,1fr); } }
.res-card { background:var(--dark); border:1px solid var(--border); border-radius:var(--r-2xl); overflow:hidden; transition:all var(--base) var(--ease); display:flex; flex-direction:column; }
.res-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(0,163,255,.16); }
.res-card__head { background:var(--dark-2); padding:1.5rem; display:flex; align-items:center; gap:1rem; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.res-logo { height:36px; width:auto; object-fit:contain; }
.res-brand { font-size:1.25rem; font-weight:800; letter-spacing:-.02em; }
.res-industry { font-size:.75rem; color:var(--muted); }
.res-metrics { display:grid; grid-template-columns:repeat(2,1fr); flex:1; }
.res-metric { padding:1.25rem 1.5rem; border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
.res-metric:nth-child(even) { border-right:none; }
.res-metric:nth-last-child(-n+2) { border-bottom:none; }
.res-metric__val { font-size:1.875rem; font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--accent); }
.res-metric__lbl { font-size:.75rem; color:var(--muted); margin-top:.375rem; }
.res-desc { padding:1.25rem 1.5rem; font-size:.875rem; color:rgba(255,255,255,.5); line-height:1.7; font-style:italic; border-top:1px solid var(--border); }
.res-tag { display:inline-flex; margin:0 1.5rem 1.25rem; }

/* ── PRICING MISSING CLASSES ──────────────────── */
.pricing-card--pop { background:linear-gradient(145deg,rgba(0,71,171,.18),rgba(0,163,255,.04)); border-color:rgba(0,163,255,.35); transform:scale(1.04); box-shadow:0 0 60px rgba(0,71,171,.12); }
.pricing-card--pop:hover { transform:scale(1.04) translateY(-4px); }
.pricing-card__head { margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid var(--border); }
.pricing-name { font-size:.6875rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); margin-bottom:1rem; }
.pricing-suffix { font-size:.875rem; color:var(--muted); margin-bottom:.5rem; }
.pricing-billing { font-size:.75rem; color:var(--muted-2); margin-top:.5rem; }
@media(max-width:767px) { .pricing-card--pop, .pricing-card--pop:hover { transform:none; } }

/* ── PROCESS ──────────────────────────────────── */
.proc-steps { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media(min-width:640px)  { .proc-steps { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px) { .proc-steps { grid-template-columns:repeat(4,1fr); gap:2rem; } }
.proc-step { background:var(--dark); border:1px solid var(--border); border-radius:var(--r-2xl); padding:2rem 1.75rem; display:flex; flex-direction:column; position:relative; overflow:hidden; transition:all var(--base) var(--ease); }
.proc-step::before { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--blue),var(--accent)); border-radius:0; transform:scaleX(0); transform-origin:left; transition:transform var(--base) var(--ease); }
.proc-step:hover { border-color:rgba(0,163,255,.2); transform:translateY(-6px); box-shadow:0 20px 60px rgba(0,71,171,.12); }
.proc-step:hover::before { transform:scaleX(1); }
.proc-step__num { font-size:4rem; font-weight:800; letter-spacing:-.04em; line-height:1; color:rgba(0,163,255,.07); margin-bottom:1.25rem; font-variant-numeric:tabular-nums; }
.proc-step__icon { width:50px; height:50px; background:rgba(0,71,171,.1); border:1px solid rgba(0,71,171,.18); border-radius:var(--r-xl); display:flex; align-items:center; justify-content:center; color:var(--accent); margin-bottom:1.25rem; transition:all var(--base) var(--ease); }
.proc-step:hover .proc-step__icon { background:rgba(0,71,171,.2); border-color:rgba(0,163,255,.35); }
.proc-step__title { font-size:1.0625rem; font-weight:800; letter-spacing:-.02em; margin-bottom:.75rem; }
.proc-step__desc { font-size:.875rem; color:rgba(255,255,255,.5); line-height:1.75; flex:1; }

/* ── VIDEO SHOWCASE ───────────────────────────── */
.showcase-layout { display:grid; grid-template-columns:1fr; gap:2rem; }
@media(min-width:1024px) { .showcase-layout { grid-template-columns:1fr 360px; gap:2.5rem; align-items:start; } }
.showcase-main { position:relative; border-radius:var(--r-2xl); overflow:hidden; background:var(--dark); border:1px solid var(--border); cursor:pointer; aspect-ratio:16/9; transition:all var(--base) var(--ease); }
.showcase-main:hover { border-color:rgba(0,163,255,.3); box-shadow:0 28px 80px rgba(0,71,171,.2); }
.showcase-main__thumb { width:100%; height:100%; object-fit:cover; transition:transform var(--slow) var(--ease); }
.showcase-main:hover .showcase-main__thumb { transform:scale(1.04); }
.showcase-main__placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.showcase-bg-orb { position:absolute; border-radius:50%; filter:blur(70px); }
.showcase-bg-orb--1 { width:320px; height:320px; background:radial-gradient(circle,rgba(0,71,171,.4) 0%,transparent 70%); top:-80px; right:-80px; }
.showcase-bg-orb--2 { width:220px; height:220px; background:radial-gradient(circle,rgba(0,163,255,.22) 0%,transparent 70%); bottom:-60px; left:-60px; }
.showcase-main__play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:80px; height:80px; display:flex; align-items:center; justify-content:center; color:#fff; transition:all var(--base) var(--ease); }
.showcase-main__ring { position:absolute; inset:0; border-radius:50%; background:rgba(0,40,120,.6); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:2px solid rgba(255,255,255,.2); transition:all var(--base) var(--ease); }
.showcase-main:hover .showcase-main__ring { background:var(--blue); border-color:var(--blue); box-shadow:0 0 48px rgba(0,71,171,.7); transform:scale(1.08); }
.showcase-main__play svg { position:relative; z-index:1; margin-left:4px; }
.showcase-main__caption { margin-top:1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.showcase-main__title { font-size:1.0625rem; font-weight:700; }
.showcase-main__result { font-size:.875rem; color:var(--accent); display:flex; align-items:center; gap:.375rem; }
.showcase-main__cta { display:inline-flex; align-items:center; gap:.5rem; font-size:.8125rem; font-weight:700; color:var(--accent); border:1.5px solid rgba(0,163,255,.3); border-radius:var(--r-pill); padding:.4rem 1rem; flex-shrink:0; transition:all var(--fast); }
.showcase-main__cta:hover { background:rgba(0,163,255,.1); border-color:var(--accent); }
.showcase-sidebar { display:flex; flex-direction:column; gap:1rem; }
.showcase-item { display:grid; grid-template-columns:120px 1fr; gap:1rem; align-items:center; background:var(--dark); border:1px solid var(--border); border-radius:var(--r-xl); padding:.875rem; cursor:pointer; transition:all var(--base) var(--ease); }
.showcase-item:hover { border-color:rgba(0,163,255,.22); transform:translateX(4px); }
.showcase-item__thumb { position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/9; background:var(--dark-2); }
.showcase-item__play-btn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:26px; height:26px; background:rgba(0,0,0,.65); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; pointer-events:none; }
.showcase-item__cat { font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin-bottom:.25rem; }
.showcase-item__title { font-size:.875rem; font-weight:700; line-height:1.3; margin-bottom:.25rem; }
.showcase-item__result { font-size:.75rem; color:rgba(255,255,255,.42); }

/* ── HERO STATS 4-COL ─────────────────────────── */
@media(min-width:640px) { .hero__stats { grid-template-columns:repeat(4,1fr); max-width:640px; } }

/* ── FINAL CTA ────────────────────────────────── */
.final-cta { position:relative; padding:7rem 0 6rem; overflow:hidden; background:var(--black); text-align:center; }
.final-cta__canvas { position:absolute; inset:0; pointer-events:none; }
.final-cta__orb { position:absolute; border-radius:50%; filter:blur(90px); }
.final-cta__orb--1 { width:600px; height:600px; background:radial-gradient(circle,rgba(0,71,171,.35) 0%,transparent 70%); top:-200px; left:50%; transform:translateX(-50%); animation:orb-drift 8s ease-in-out infinite alternate; }
.final-cta__orb--2 { width:300px; height:300px; background:radial-gradient(circle,rgba(0,163,255,.18) 0%,transparent 70%); bottom:-80px; right:10%; animation:orb-drift 11s ease-in-out infinite alternate-reverse; }
.final-cta__grid { position:absolute; inset:0; background-image:linear-gradient(rgba(0,163,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,163,255,.04) 1px,transparent 1px); background-size:60px 60px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 0%,transparent 100%); -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 0%,transparent 100%); }
@keyframes orb-drift { from { transform:translateX(-50%) translateY(0); } to { transform:translateX(-50%) translateY(40px); } }
.final-cta__badge { display:inline-flex; align-items:center; gap:.5rem; background:rgba(0,163,255,.06); border:1px solid rgba(0,163,255,.2); border-radius:var(--r-pill); padding:.45rem 1rem; font-size:.8125rem; font-weight:600; color:var(--accent); letter-spacing:.03em; margin-bottom:2rem; }
.final-cta__title { font-size:clamp(2.25rem,5vw,4rem); font-weight:900; letter-spacing:-.04em; line-height:1.1; margin-bottom:1.5rem; color:#fff; }
.final-cta__title em { font-style:normal; background:linear-gradient(135deg,var(--accent),#38bdf8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.final-cta__sub { max-width:640px; margin:0 auto 3rem; font-size:1.0625rem; color:rgba(255,255,255,.58); line-height:1.75; }
.final-cta__btn { position:relative; overflow:hidden; }
.final-cta__btn::after { content:''; position:absolute; inset:-2px; background:linear-gradient(135deg,var(--accent),var(--blue)); border-radius:inherit; z-index:-1; opacity:0; transition:opacity var(--fast); }
.final-cta__btn:hover::after { opacity:1; }
.final-cta__trust { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 2rem; }
.final-cta__trust-item { display:flex; align-items:center; gap:.5rem; font-size:.875rem; color:rgba(255,255,255,.52); }
.final-cta__trust-item svg { color:var(--accent); flex-shrink:0; }
@media(max-width:767px) { .final-cta { padding:5rem 0 4rem; } .final-cta__title { font-size:2rem; } .final-cta__trust { gap:.75rem 1.25rem; font-size:.8125rem; } }

/* ── UTILITY ──────────────────────────────────── */
.btn--block { width:100%; justify-content:center; }

/* ── VIDEO PORTFOLIO CARDS ────────────────────── */
/* video element fills the card exactly like the old .port-item__thumb img */
.port-item__thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--slow) var(--ease);
}
.port-item:hover .port-item__thumb { transform: scale(1.04); }

/* canvas sits on top of video; fades out on hover to reveal live preview */
.port-item__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}

/* badge top-left inside card */
.port-item__badge {
  position: absolute; top: .875rem; left: .875rem; z-index: 3;
}

/* video modal local <video> element */
#js-vmodal-video {
  border-radius: inherit;
  background: #000;
}

/* ── SHOWCASE VIDEO ───────────────────────────── */
.showcase-main__vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.showcase-main__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity .6s ease;
  pointer-events: none;
}

/* sidebar canvas thumbnail */
.showcase-item__thumb canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.showcase-item__thumb video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* mobile: pause autoplay to save bandwidth */
@media (max-width: 767px) {
  .showcase-main__vid { display: none; }
  .showcase-main__canvas { opacity: 1 !important; }
}

/* ═══════════════════════════════════════════════
   FEATURED VIDEO SECTION
═══════════════════════════════════════════════ */
.feat-vid {
  background: var(--black);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
@media(min-width:768px) { .feat-vid { padding: 7rem 0; } }

/* subtle background accent behind the video */
.feat-vid::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0,71,171,.18) 0%, transparent 65%);
  transform: translateY(-50%);
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
}

.feat-vid__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media(min-width:1024px) {
  .feat-vid__layout {
    grid-template-columns: 5fr 7fr;
    gap: 5rem;
  }
}

/* Left column ── text */
.feat-vid__info {
  display: flex;
  flex-direction: column;
}
.feat-vid__heading {
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  margin: 1rem 0 1.25rem;
  text-wrap: balance;
  background: linear-gradient(135deg, #fff 35%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.feat-vid__desc {
  font-size: 1rem;
  color: rgba(255,255,255,.55);
  line-height: 1.8;
  margin-bottom: 1.75rem;
  max-width: 440px;
}
.feat-vid__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.25rem;
}
.ftag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8125rem;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-pill);
  padding: .35rem .875rem;
  transition: all var(--fast);
}
.ftag:hover {
  color: var(--accent);
  border-color: rgba(0,163,255,.25);
  background: rgba(0,163,255,.06);
}
.feat-vid__cta {
  align-self: flex-start;
}

/* Right column ── video player */
.feat-vid__player {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  background: var(--dark-2);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow:
    0 0 0 1px rgba(0,163,255,.08),
    0 24px 80px rgba(0,0,0,.55),
    0 0 60px rgba(0,71,171,.1);
  transition: box-shadow var(--slow) var(--ease), transform var(--slow) var(--ease);
  outline: none;
}
.feat-vid__player:hover,
.feat-vid__player:focus-visible {
  box-shadow:
    0 0 0 1px rgba(0,163,255,.22),
    0 32px 80px rgba(0,0,0,.6),
    0 0 80px rgba(0,71,171,.2);
  transform: scale(1.012);
}
.feat-vid__player:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.feat-vid__glow {
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, rgba(0,71,171,.3), rgba(0,163,255,.15));
  border-radius: inherit;
  filter: blur(20px);
  z-index: -1;
  opacity: 0;
  transition: opacity var(--slow) var(--ease);
}
.feat-vid__player:hover .feat-vid__glow { opacity: 1; }

.feat-vid__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feat-vid__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .8s ease;
  pointer-events: none;
}
.feat-vid__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--base) var(--ease);
}
.feat-vid__player:hover .feat-vid__overlay { background: rgba(0,0,0,.1); }

.feat-vid__playbtn {
  width: 84px;
  height: 84px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 2px solid rgba(255,255,255,.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  transition: all var(--base) var(--ease);
}
.feat-vid__player:hover .feat-vid__playbtn {
  background: var(--blue);
  border-color: var(--blue);
  transform: scale(1.1);
  box-shadow: 0 0 44px rgba(0,71,171,.55);
}
.feat-vid__playbtn svg { margin-left: 4px; }

.feat-vid__ring {
  position: absolute;
  inset: -14px;
  border: 2px solid rgba(255,255,255,.1);
  border-radius: 50%;
  animation: fvring 2.8s ease-in-out infinite;
}
@keyframes fvring {
  0%,100% { transform: scale(1); opacity: .5; }
  50%      { transform: scale(1.14); opacity: 0; }
}

.feat-vid__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.125rem 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.feat-vid__cap-tag {
  font-size: .75rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.feat-vid__cap-txt {
  font-size: .8125rem;
  color: rgba(255,255,255,.55);
}

/* Mobile: stack video below text, auto-pause to save bandwidth */
@media(max-width:767px) {
  .feat-vid__vid { display: none; }
  .feat-vid__canvas { opacity: 1 !important; }
  .feat-vid__player { aspect-ratio: 4/3; }
}

/* ═══════════════════════════════════════════════
   VIDEO CAROUSEL — RÉALISATIONS
═══════════════════════════════════════════════ */
.vcaro {
  overflow: hidden;
}

.vcaro__outer {
  position: relative;
  margin-top: 2.5rem;
}

.vcaro__slider {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.vcaro__slider::-webkit-scrollbar { display: none; }
.vcaro__slider.is-dragging { cursor: grabbing; }

.vcaro__track {
  display: flex;
  gap: 1.25rem;
  padding: .5rem var(--pad) 1.75rem;
}

/* Card sizing: 1 on mobile, ~2 on tablet, ~3.5 on desktop (peeking next) */
.vcaro__card {
  flex: 0 0 calc(100% - 2rem);
  scroll-snap-align: start;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--dark-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--base) var(--ease);
  user-select: none;
}
@media(min-width:600px) {
  .vcaro__card { flex: 0 0 calc(50% - 1.25rem); }
}
@media(min-width:1024px) {
  .vcaro__card { flex: 0 0 calc(28.5% - 1.25rem); }
}
.vcaro__card:hover {
  border-color: rgba(0,163,255,.22);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
}

/* Card thumbnail — portrait ratio (social media style) */
.vcaro__thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--dark);
}
@media(min-width:600px) { .vcaro__thumb { aspect-ratio: 9 / 14; } }

.vcaro__thumb video,
.vcaro__thumb canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vcaro__thumb canvas {
  transition: opacity .4s ease;
}
.vcaro__card:hover .vcaro__thumb canvas {
  /* canvas fades when video plays */
}

/* Play button */
.vcaro__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.85);
  width: 54px;
  height: 54px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all var(--base) var(--ease);
  pointer-events: none;
}
.vcaro__card:hover .vcaro__play {
  background: var(--blue);
  border-color: var(--blue);
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 0 28px rgba(0,71,171,.55);
}

/* Category badge */
.vcaro__badge {
  position: absolute;
  top: .875rem;
  left: .875rem;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-pill);
  padding: .28rem .75rem;
  font-size: .6875rem;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  letter-spacing: .03em;
}

/* Card meta below thumbnail */
.vcaro__meta {
  padding: 1rem 1.125rem 1.25rem;
}
.vcaro__title {
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: .375rem;
  line-height: 1.3;
}
.vcaro__sub {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Nav buttons */
.vcaro__nav {
  position: absolute;
  top: 38%; /* vertically centered on the thumbnail */
  z-index: 10;
  width: 46px;
  height: 46px;
  background: var(--dark);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  transform: translateY(-50%);
  transition: all var(--fast);
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
}
.vcaro__nav:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,71,171,.4);
}
.vcaro__nav--prev { left: .75rem; }
.vcaro__nav--next { right: .75rem; }
@media(max-width:599px) { .vcaro__nav { display: none; } }

/* Dots pagination */
.vcaro__dots-wrap {
  display: flex;
  justify-content: center;
  margin-top: .5rem;
}
.vcaro__dots {
  display: flex;
  gap: .5rem;
}
.vcaro__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.12);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all var(--base) var(--ease);
}
.vcaro__dot.active {
  width: 24px;
  background: var(--accent);
}

/* ═══════════════════════════════════════════════
   NICHE SECTOR CARDS
═══════════════════════════════════════════════ */
.niches-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media(min-width:640px) {
  .niches-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(min-width:1024px) {
  .niches-grid { grid-template-columns: repeat(3, 1fr); }
}

.niche-card {
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all var(--base) var(--ease);
}
/* top accent bar */
.niche-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--accent));
  border-radius: var(--r-pill) var(--r-pill) 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--base) var(--ease);
}
.niche-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0,163,255,.2);
  box-shadow: 0 24px 64px rgba(0,71,171,.13);
}
.niche-card:hover::before {
  transform: scaleX(1);
}

/* featured middle card */
.niche-card--feat {
  background: linear-gradient(145deg, rgba(0,71,171,.15), rgba(0,163,255,.04));
  border-color: rgba(0,163,255,.28);
}
.niche-card--feat::before {
  transform: scaleX(1); /* always visible on featured */
  opacity: .55;
}
.niche-card--feat:hover::before { opacity: 1; }

/* icon */
.niche-card__icon-wrap {
  width: 66px;
  height: 66px;
  background: rgba(0,71,171,.1);
  border: 1px solid rgba(0,71,171,.18);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: all var(--base) var(--ease);
}
.niche-card:hover .niche-card__icon-wrap {
  background: rgba(0,71,171,.2);
  border-color: rgba(0,163,255,.35);
}
.niche-card__emoji { font-size: 2rem; line-height: 1; }

.niche-card__title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: .875rem;
}
.niche-card__desc {
  font-size: .875rem;
  color: rgba(255,255,255,.56);
  line-height: 1.78;
  margin-bottom: 1.5rem;
  flex: 1;
}

/* Feature list */
.niche-card__feats {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-bottom: 2rem;
}
.niche-card__feats li {
  font-size: .875rem;
  color: rgba(255,255,255,.65);
  padding-left: 1.125rem;
  position: relative;
  line-height: 1.5;
}
.niche-card__feats li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
}

/* Bottom CTA link */
.niche-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 700;
  color: var(--accent);
  transition: gap var(--fast);
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.niche-card__cta:hover { gap: .875rem; }

/* ─── PORTFOLIO MOBILE HORIZONTAL SCROLL ────────────────────────────── */
@media(max-width:639px) {
  .port-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .port-grid::-webkit-scrollbar { display: none; }
  .port-item {
    flex: 0 0 80vw;
    max-width: 300px;
    scroll-snap-align: start;
  }
}

/* ─── STUDIO SHOWCASE ────────────────────────────────────────────────── */
.section--darker { background: var(--black); }

.studio { overflow: hidden; }
.studio .section-head { max-width: 700px; }

/* ── VCARO2: 3-column vertical video peek carousel ── */
.vcaro2 {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Scrollable track — padding centers the first/last card */
.vcaro2__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Side padding = 50% - half-card-width to center cards */
  padding: 2.5rem calc(50% - min(15vw, 195px));
}
.vcaro2__track::-webkit-scrollbar { display: none; }

/* Each item occupies 30vw (capped) — 3 items = ~90vw → side cards visibly partial */
.vcaro2__item {
  flex: 0 0 min(30vw, 390px);
  scroll-snap-align: center;
  transition: transform .5s cubic-bezier(.4,0,.2,1), filter .5s cubic-bezier(.4,0,.2,1);
  transform: scale(0.87);
  filter: brightness(0.42);
  will-change: transform, filter;
}
.vcaro2__item.active {
  transform: scale(1);
  filter: brightness(1);
}

/* Card: full 9:16 vertical video */
.vcaro2__card {
  width: 100%;
  aspect-ratio: 9/16;
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--dark);
  transition: border-color .4s var(--ease);
}
.vcaro2__item.active .vcaro2__card { border-color: rgba(0,163,255,.5); }
.vcaro2__item:not(.active) .vcaro2__card { cursor: default; }

/* Video fills card */
.vcaro2__card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Play button overlay — visible on active card hover */
.vcaro2__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s var(--ease);
  z-index: 2;
}
.vcaro2__item.active .vcaro2__card:hover .vcaro2__overlay { opacity: 1; }

.vcaro2__playbtn {
  width: 68px;
  height: 68px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all .25s var(--ease);
}
.vcaro2__card:hover .vcaro2__playbtn {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 36px rgba(0,163,255,.55);
}
.vcaro2__playbtn svg { margin-left: 3px; }

/* Caption — slides up on active card */
.vcaro2__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem 1.25rem 1.125rem;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.0) 100%);
  transform: translateY(10px);
  opacity: 0;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
  z-index: 2;
}
.vcaro2__item.active .vcaro2__caption {
  transform: translateY(0);
  opacity: 1;
}
.vcaro2__cat {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: .35rem;
}
.vcaro2__title {
  font-size: .9375rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .2rem;
  line-height: 1.35;
}
.vcaro2__svc {
  font-size: .75rem;
  color: rgba(255,255,255,.5);
  margin: 0;
}

/* Active card blue glow ring */
.vcaro2__item.active .vcaro2__card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-2xl);
  box-shadow: 0 0 0 1.5px rgba(0,163,255,.45), 0 24px 64px rgba(0,71,171,.35);
  pointer-events: none;
  z-index: 1;
}

/* ── Navigation controls ── */
.vcaro2__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding: 0 var(--gap);
}
.vcaro2__btn {
  width: 48px;
  height: 48px;
  background: var(--dark-2);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: rgba(255,255,255,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--base) var(--ease);
}
.vcaro2__btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 20px rgba(0,163,255,.4);
}
.vcaro2__dots {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.vcaro2__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  border: none;
  cursor: pointer;
  transition: all .35s var(--ease);
  padding: 0;
  flex-shrink: 0;
}
.vcaro2__dot.active {
  background: var(--accent);
  width: 24px;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0,163,255,.5);
}

/* Mobile: cards at 72vw → clear peek on both sides */
@media(max-width:767px) {
  .vcaro2__item { flex: 0 0 72vw; }
  .vcaro2__track {
    padding: 2rem calc(50% - 36vw);
    gap: 1rem;
  }
}

/* Tablet: tighten card width slightly */
@media(min-width:768px) and (max-width:1023px) {
  .vcaro2__item { flex: 0 0 min(34vw, 320px); }
  .vcaro2__track { padding: 2rem calc(50% - min(17vw, 160px)); }
}

/* ─── CASE STUDIES / RESULTS ─────────────────────────────────────────── */
.casestudies-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media(min-width:640px) { .casestudies-grid { grid-template-columns: repeat(2,1fr); } }
@media(min-width:1024px) { .casestudies-grid { grid-template-columns: repeat(4,1fr); } }

.cs-card {
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color var(--base) var(--ease), transform var(--base) var(--ease);
}
.cs-card:hover {
  border-color: rgba(0,163,255,.28);
  transform: translateY(-3px);
}

.cs-card--feat {
  background: linear-gradient(145deg, #0d1f3d 0%, var(--dark) 100%);
  border-color: rgba(0,71,171,.35);
}
.cs-card--feat:hover { border-color: var(--accent); }

.cs-card__top {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  flex-wrap: wrap;
}
.cs-card__icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
}
.cs-card__sector {
  font-size: .8125rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .1rem;
  line-height: 1.3;
}
.cs-card__location {
  font-size: .75rem;
  color: rgba(255,255,255,.4);
  margin: 0;
}
.cs-card__tag {
  margin-left: auto;
  padding: .25rem .625rem;
  background: rgba(0,71,171,.25);
  border: 1px solid rgba(0,71,171,.4);
  border-radius: var(--r-pill);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}
.cs-card__title {
  font-size: .9375rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.4;
}
.cs-card__desc {
  font-size: .8125rem;
  color: rgba(255,255,255,.6);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}
.cs-card__services {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}
.cs-card__services span {
  padding: .2rem .55rem;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: .7rem;
  font-weight: 600;
  color: rgba(255,255,255,.55);
}
.cs-card__quote {
  font-size: .8125rem;
  font-style: italic;
  color: rgba(255,255,255,.45);
  border-left: 2px solid var(--accent);
  padding-left: .75rem;
  margin: 0;
  line-height: 1.55;
}

/* ─── PODCAST ────────────────────────────────────────────────────────── */
.podcast .section-head { max-width: 640px; }

/* Outer wrap — full bleed track with constrained inner content */
.podcast__wrap {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 var(--gap);
}

/* Two-column layout: main (16:9) + clip (fills same row height) */
.podcast__layout {
  display: grid;
  grid-template-columns: 1fr 268px;
  gap: 1.25rem;
  align-items: stretch;
  margin-bottom: 2rem;
}

/* Shared card base */
.podcast__main,
.podcast__clip {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--dark);
  cursor: pointer;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.podcast__main:hover,
.podcast__clip:hover {
  border-color: rgba(0,163,255,.4);
  box-shadow: 0 20px 56px rgba(0,71,171,.28);
}

/* Main card: 16:9 forced */
.podcast__main { aspect-ratio: 16/9; }

/* Clip card: on desktop the grid row height drives size (align-items:stretch).
   No explicit aspect-ratio needed — it stretches to match the main card row. */
.podcast__clip { min-height: 200px; } /* safety floor for edge-cases */

/* Video fills its card */
.podcast__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform .6s var(--ease);
}
.podcast__main:hover .podcast__vid,
.podcast__clip:hover .podcast__vid { transform: scale(1.03); }

/* Canvas thumbnail */
.podcast__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}

/* Cinematic dark vignette (radial, stronger edges) */
.podcast__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.65) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Gradient overlay from bottom */
.podcast__meta {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem 1.5rem 1.25rem;
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.6) 45%, transparent 100%);
  z-index: 3;
}
.podcast__meta--clip {
  padding: 1rem 1rem .875rem;
}

/* Hover overlay for play button */
.podcast__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  /* Always visible (not just on hover) for instant discoverability */
}

/* Main play button — large, centered */
.podcast__playbtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  transition: all .3s var(--ease);
}
.podcast__playbtn--main {
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 2px solid rgba(255,255,255,.22);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.podcast__main:hover .podcast__playbtn--main {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 44px rgba(0,163,255,.55);
  transform: scale(1.08);
}
.podcast__playbtn--main svg { margin-left: 4px; }

/* Pulsing ring on main button */
.podcast__ring {
  position: absolute;
  inset: -14px;
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 50%;
  animation: fvring 2.8s ease-in-out infinite;
  pointer-events: none;
}

/* Clip play button — smaller, bottom-left aligned */
.podcast__playbtn--clip {
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,255,255,.18);
}
.podcast__clip:hover .podcast__playbtn--clip {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 28px rgba(0,163,255,.5);
  transform: scale(1.08);
}
.podcast__playbtn--clip svg { margin-left: 2px; }

/* Episode badge (label pill) */
.podcast__badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .7rem;
  background: rgba(0,163,255,.15);
  border: 1px solid rgba(0,163,255,.35);
  border-radius: var(--r-pill);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--accent);
  margin-bottom: .5rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.podcast__badge--clip {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.8);
  margin-bottom: .35rem;
}

/* Episode title */
.podcast__ep-title {
  font-size: .9375rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .2rem;
  line-height: 1.3;
}
.podcast__ep-title--clip { font-size: .8125rem; }
.podcast__ep-sub {
  font-size: .75rem;
  color: rgba(255,255,255,.45);
  margin: 0;
}

/* CTA link */
.podcast__footer {
  display: flex;
  justify-content: center;
  margin-top: .25rem;
}
.podcast__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid rgba(0,163,255,.3);
  border-radius: var(--r-pill);
  padding: .6rem 1.25rem;
  transition: all var(--base) var(--ease);
  background: rgba(0,163,255,.06);
}
.podcast__cta:hover {
  background: rgba(0,163,255,.14);
  border-color: var(--accent);
  gap: .75rem;
}

/* Tablet: shrink clip column */
@media(min-width:768px) and (max-width:1023px) {
  .podcast__layout { grid-template-columns: 1fr 220px; }
}

/* Mobile: full-width, premium, cinematic */
@media(max-width:767px) {
  /* Tighter vertical breathing room — section felt too sparse */
  .section.podcast { padding: 2.75rem 0 3rem; }

  /* Section heading closer to the cards */
  .podcast .section-head { margin-bottom: 1.75rem; }

  /* Remove horizontal padding so cards fill the full viewport width */
  .podcast__wrap { padding: 0; }

  /* Single-column, tight gap */
  .podcast__layout {
    grid-template-columns: 1fr;
    gap: .5rem;
    margin-bottom: 1rem;
  }

  /* Main episode: strong 16:9 presence, bigger min-height */
  .podcast__main {
    aspect-ratio: 16/9;
    min-height: 210px;  /* floor for browsers without aspect-ratio support */
    border-radius: var(--r-xl); /* slightly tighter at full-bleed width */
  }

  /* Reels/Short: full-width tall vertical card — centered, no gap */
  .podcast__clip {
    width: 100%;          /* explicit full column width — kills the iOS Safari gap */
    aspect-ratio: unset;  /* drop aspect-ratio: 9/16 caused width=min-height×(9/16)=270px in Safari */
    min-height: 600px;    /* tall, prominent vertical presence */
    max-height: none;
    border-radius: var(--r-xl);
  }

  /* Bigger, more tappable play buttons */
  .podcast__playbtn--main { width: 72px; height: 72px; }
  .podcast__playbtn--clip { width: 60px; height: 60px; }

  /* Title sizes — keep legible at full width */
  .podcast__ep-title { font-size: .9375rem; }
  .podcast__ep-title--clip { font-size: .8125rem; }

  /* More generous meta padding */
  .podcast__meta { padding: 1.25rem 1.25rem 1.125rem; }

  /* CTA footer needs side padding since wrap is now full-bleed */
  .podcast__footer { padding: 0 1.25rem; margin-top: 1rem; }
}

/* ─── TEAM / ÉQUIPE ──────────────────────────────────────────────────── */
.equipe .section-head { margin-left: auto; margin-right: auto; max-width: 640px; }

/* ── Founder featured card (Samir) ── */
.equipe__founder {
  display: grid;
  grid-template-columns: 340px 1fr;
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  overflow: hidden;
  margin-bottom: 1.5rem;
  position: relative;
  transition: border-color var(--base) var(--ease);
}
.equipe__founder:hover { border-color: rgba(0,163,255,.35); }

/* Vertical accent line between photo and text */
.equipe__founder::before {
  content: '';
  position: absolute;
  left: 340px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,163,255,.5) 30%, rgba(0,71,171,.5) 70%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.equipe__founder-photo {
  position: relative;
  overflow: hidden;
}
.equipe__founder-photo img {
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
  object-position: center 10%;
  display: block;
  transition: transform .65s var(--ease);
}
.equipe__founder:hover .equipe__founder-photo img { transform: scale(1.04); }

.equipe__founder-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,71,171,.18) 0%, transparent 55%);
  pointer-events: none;
}

.equipe__founder-body {
  padding: 2.5rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
}
.equipe__founder-top {
  display: flex;
  align-items: center;
  gap: .875rem;
}

/* Number label */
.equipe__num {
  font-size: .72rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .14em;
  opacity: .65;
}

/* "Fondateur" pill badge */
.equipe__badge {
  padding: .225rem .7rem;
  background: rgba(0,71,171,.18);
  border: 1px solid rgba(0,71,171,.4);
  border-radius: var(--r-pill);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
}

.equipe__founder-name {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.equipe__founder-role {
  font-size: .875rem;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  margin: 0;
  letter-spacing: .015em;
}
.equipe__founder-bio {
  font-size: .875rem;
  line-height: 1.72;
  color: rgba(255,255,255,.62);
  margin: 0;
}
.equipe__founder-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.equipe__founder-tags span {
  padding: .28rem .7rem;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: .75rem;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  transition: all var(--fast) var(--ease);
}
.equipe__founder:hover .equipe__founder-tags span {
  background: rgba(0,163,255,.08);
  border-color: rgba(0,163,255,.28);
  color: rgba(255,255,255,.8);
}

/* ── 3-member portrait grid ── */
.equipe__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
}

/* Portrait card */
.equipe__card {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  aspect-ratio: 3/4;
  border: 1px solid var(--border);
  background: var(--dark);
  transition: border-color var(--base) var(--ease), transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.equipe__card:hover {
  border-color: rgba(0,163,255,.4);
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,71,171,.2);
}

.equipe__card-img {
  position: absolute;
  inset: 0;
}
.equipe__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%;
  display: block;
  transition: transform .65s var(--ease);
}
.equipe__card:hover .equipe__card-img img { transform: scale(1.07); }

/* Dark gradient overlay — stronger at bottom */
.equipe__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.93) 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.08) 65%, transparent 100%);
  transition: background var(--base) var(--ease);
}
.equipe__card:hover .equipe__card-overlay {
  background: linear-gradient(to top, rgba(0,0,0,.96) 0%, rgba(0,0,0,.72) 45%, rgba(0,0,0,.18) 72%, transparent 100%);
}

/* Blue glow on active card */
.equipe__card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-2xl);
  box-shadow: inset 0 0 0 1px rgba(0,163,255,0);
  transition: box-shadow .4s var(--ease);
  pointer-events: none;
  z-index: 3;
}
.equipe__card:hover::after {
  box-shadow: inset 0 0 0 1px rgba(0,163,255,.45), 0 0 40px rgba(0,71,171,.25);
}

/* Number badge — top left */
.equipe__num--card {
  position: absolute;
  top: 1.125rem;
  left: 1.125rem;
  font-size: .68rem;
  font-weight: 800;
  color: rgba(255,255,255,.35);
  letter-spacing: .16em;
  z-index: 2;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
  transition: color .3s var(--ease);
}
.equipe__card:hover .equipe__num--card { color: var(--accent); opacity: .8; }

/* Name + Role — always visible bottom */
.equipe__card-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1.25rem 1rem;
  z-index: 2;
  transform: translateY(0);
  transition: transform .38s cubic-bezier(.4,0,.2,1);
}
.equipe__card:hover .equipe__card-meta { transform: translateY(-54px); }

.equipe__card-name {
  font-size: 1.0625rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 .2rem;
  line-height: 1.2;
}
.equipe__card-role {
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  margin: 0;
}

/* Expertise tags — slide up on hover */
.equipe__card-tags {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: .6rem 1.25rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  z-index: 2;
  transform: translateY(100%);
  opacity: 0;
  transition: transform .38s cubic-bezier(.4,0,.2,1), opacity .3s var(--ease);
}
.equipe__card:hover .equipe__card-tags {
  transform: translateY(0);
  opacity: 1;
}
.equipe__card-tags span {
  padding: .22rem .55rem;
  background: rgba(0,163,255,.15);
  border: 1px solid rgba(0,163,255,.35);
  border-radius: var(--r-pill);
  font-size: .68rem;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
}

/* ── Footer tagline + CTA ── */
.equipe__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  text-align: center;
  padding-top: .5rem;
}
.equipe__tagline {
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
  margin: 0;
}

/* ── Responsive ── */

/* Tablet (768-1023px): narrow founder card */
@media(min-width:768px) and (max-width:1023px) {
  .equipe__founder { grid-template-columns: 260px 1fr; }
  .equipe__founder::before { left: 260px; }
  .equipe__founder-body { padding: 2rem 1.75rem; }
  .equipe__founder-name { font-size: 1.4rem; }
}

/* Tablet: 2-column grid, 3rd card centered */
@media(min-width:540px) and (max-width:1023px) {
  .equipe__grid { grid-template-columns: repeat(2, 1fr); }
  .equipe__grid .equipe__card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 340px;
    justify-self: center;
    width: 100%;
  }
}

/* Mobile (<540px): stack everything */
@media(max-width:539px) {
  .equipe__founder {
    grid-template-columns: 1fr;
  }
  .equipe__founder::before { display: none; }
  .equipe__founder-photo { height: 320px; min-height: unset; }
  .equipe__founder-photo img { min-height: unset; }
  .equipe__founder-body { padding: 1.75rem 1.25rem; gap: 1rem; }
  .equipe__founder-name { font-size: 1.35rem; }
  .equipe__founder-bio { font-size: .8125rem; }

  .equipe__grid { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; }
  .equipe__card { aspect-ratio: 4/5; }
  .equipe__card:hover .equipe__card-meta { transform: translateY(-50px); }

  .equipe__tagline { font-size: .75rem; letter-spacing: .15em; }
}

/* Ensure tags don't overflow on touch (show them always on mobile since no hover) */
@media(hover:none) {
  .equipe__card-meta { transform: translateY(-54px) !important; }
  .equipe__card-tags { transform: translateY(0) !important; opacity: 1 !important; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   PHOTO CAROUSEL  (.pcar-*)
   Premium portrait showcase — uses pointer-drag, touch swipe, keyboard nav
───────────────────────────────────────────────────────────────────────────── */

/* Section layout */
.pcar-section { overflow: hidden; }

/* Carousel container — sits outside .wrap so it bleeds edge-to-edge */
.pcar-outer {
  position: relative;
  margin-top: 3.5rem;
}

/* Clipping viewport */
.pcar-viewport {
  overflow: hidden;
  position: relative;
  cursor: grab;
  outline: none;
  touch-action: pan-y; /* allow vertical page scroll; JS owns horizontal swipes */
  -webkit-user-select: none;
  user-select: none;
}
.pcar-viewport:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.pcar-viewport.is-dragging { cursor: grabbing; }

/* Scrolling track */
.pcar-track {
  display: flex;
  gap: clamp(1rem, 1.75vw, 1.75rem);
  /* Align first card with .wrap left edge on all viewport sizes */
  padding-left: max(var(--pad), calc((100vw - 1240px) / 2));
  /* Right padding keeps a visual tail so the last card isn't flush against nothing */
  padding-right: max(var(--pad), calc((100vw - 1240px) / 2));
  padding-top: 0.75rem;
  padding-bottom: 2.5rem;
  transition: transform 0.52s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}
.pcar-viewport.is-dragging .pcar-track { transition: none; }

/* ── Card ──────────────────────────────────────── */
.pcar-card {
  flex: 0 0 clamp(250px, 28vw, 390px);
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: var(--dark);
  position: relative;
  /* Lift shadow only — scale handled on image to avoid layout shift */
  transition:
    border-color var(--base) var(--ease),
    box-shadow   var(--base) var(--ease),
    transform    var(--base) var(--ease);
}
.pcar-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 163, 255, 0.28);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 163, 255, 0.1);
}

/* Portrait image — fills card in 3:4 ratio matching source photos */
.pcar-card__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.pcar-card:hover .pcar-card__img {
  transform: scale(1.05);
}

/* Glass info panel pinned to the card bottom */
.pcar-card__info {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3rem 1.25rem 1.25rem;
  background: linear-gradient(
    to top,
    rgba(9, 13, 24, 0.96) 0%,
    rgba(9, 13, 24, 0.72) 50%,
    transparent           100%
  );
}

.pcar-card__tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
  background: rgba(0, 163, 255, 0.1);
  border: 1px solid rgba(0, 163, 255, 0.2);
  border-radius: var(--r-pill);
  padding: 0.2rem 0.65rem;
  margin-bottom: 0.5rem;
}

.pcar-card__name {
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: #fff;
  letter-spacing: -0.01em;
}

.pcar-card__role {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.48);
  margin-top: 0.25rem;
  line-height: 1.4;
}

/* ── Edge fades ────────────────────────────────── */
.pcar-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(2.5rem, 7vw, 7rem);
  pointer-events: none;
  z-index: 2;
}
.pcar-fade--l {
  left: 0;
  background: linear-gradient(to right, var(--black), transparent);
}
.pcar-fade--r {
  right: 0;
  background: linear-gradient(to left, var(--black), transparent);
}

/* ── Navigation controls ───────────────────────── */
.pcar-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.pcar-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: all var(--fast);
  flex-shrink: 0;
}
.pcar-btn:hover:not(:disabled) {
  border-color: var(--blue);
  background: rgba(0, 71, 171, 0.14);
  color: #fff;
}
.pcar-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Dots */
.pcar-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pcar-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all var(--base) var(--ease);
}
.pcar-dot.pcar-dot--active {
  width: 26px;
  background: var(--accent);
}

/* ── Mobile: always show card info (no hover) ──── */
@media (hover: none) {
  .pcar-card__info { padding-top: 2.5rem; }
}

/* ── Mobile: one card at a time, large and full-width ── */
@media (max-width: 767px) {
  /* Fill most of the screen — one card per view with a ~12px peek of the next */
  .pcar-card {
    flex: 0 0 calc(100vw - 3rem);
  }
  /* Edge fades are for multi-card desktop view; hide on mobile */
  .pcar-fade { display: none; }
}

/* ── Reduced-motion safe ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pcar-track         { transition: none; }
  .pcar-card          { transition: none; }
  .pcar-card__img     { transition: none; }
  .pcar-dot           { transition: none; }
}


/* ── Hero V watermark ────────────────────────────────────────────────────────
   Inline SVG "V" lettermark — purely decorative, inside aria-hidden canvas.
   Sits behind .hero__inner (z-index:1 on the sibling wrap).
   right:-5% clips the right edge off-screen via .hero { overflow:hidden }
   giving an integrated, brand-mark feel rather than a centred logo stamp.
─────────────────────────────────────────────────────────────────────────── */
.hero__wm {
  position: absolute;
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(180px, 22vw, 320px);
  height: auto;
  opacity: 0.09;
  filter:
    blur(2.5px)
    drop-shadow(0 0 55px rgba(0, 163, 255, 0.25));
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  overflow: visible;
}

/* ── Pricing bonus — ACQUISITION & MARQUES ───────────────────────────────── */
.pricing-bonus {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: .875rem 1.5rem .8rem;
  background: linear-gradient(160deg, rgba(0,71,171,.13) 0%, rgba(0,163,255,.05) 100%);
  border: 1px solid rgba(0,163,255,.18);
  border-radius: 1rem;
  box-shadow:
    0 0 36px rgba(0,163,255,.06),
    inset 0 1px 0 rgba(255,255,255,.06);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* hairline top-edge shine */
.pricing-bonus::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0,163,255,.38), transparent);
}
/* eyebrow: small, muted, all-caps — sets context */
.pricing-bonus__eyebrow {
  display: block;
  font-size: .575rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(0,163,255,.62);
  line-height: 1.4;
  margin-bottom: .5rem;
}
/* label: the headline moment — white, large, bold */
.pricing-bonus__label {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #fff;
  line-height: 1.2;
  padding-top: .5rem;
  border-top: 1px solid rgba(0,163,255,.13);
  margin-bottom: .38rem;
}
/* sub: reassurance line — quiet, muted */
.pricing-bonus__sub {
  display: block;
  font-size: .65rem;
  font-weight: 400;
  color: rgba(255,255,255,.4);
  letter-spacing: .01em;
  line-height: 1.4;
}
/* highlighted feature row */
.pricing-feat--bonus {
  color: rgba(180,220,255,.85);
  font-weight: 500;
}
.pricing-feat__highlight {
  font-weight: 700;
  font-style: normal;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .04em;
}
@media (prefers-reduced-motion: reduce) { .pricing-bonus { box-shadow: none; } }


/* ═══════════════════════════════════════════════════════════════════════
   VIRALO DESIGN v5.0 — PREMIUM AGENCY AESTHETIC
   Target: €10k–€20k agency website feel.
   Approach: override specific properties after all existing rules.
   CSS-only — zero HTML, JS, content, forms, or tracking changes.
   Techniques: cinematic bg, real glassmorphism, blur-reveal, glow CTAs,
   atmospheric orbs, compound card shadows, premium typography scale.
═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   PART 1 — TYPOGRAPHY: tight, dominant, high-contrast
───────────────────────────────────────────────────────────────────── */

/* Section headings — bigger, tighter tracking, better line-height */
.heading {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  letter-spacing: -0.038em;
  line-height: 1.08;
  text-wrap: balance;
}

/* Hero — cinematic scale */
.hero__title {
  font-size: clamp(2.875rem, 8vw, 5.75rem);
  letter-spacing: -0.045em;
  line-height: 1.02;
}

/* Hero em gradient — richer spectrum */
.hero__title em {
  background: linear-gradient(
    128deg,
    #38bdf8 0%,
    #00a3ff 30%,
    #818cf8 62%,
    #38bdf8 100%
  );
  background-size: 260% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 5s linear infinite;
}

/* Section heading gradient — white-to-sky-to-accent */
.heading--grad,
.feat-vid__heading {
  background: linear-gradient(
    128deg,
    #ffffff 10%,
    rgba(255,255,255,.88) 38%,
    #7dd3fc 62%,
    #00a3ff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subheadings — more legible */
.hero__sub,
.subheading {
  color: rgba(255, 255, 255, .62);
  line-height: 1.82;
}

/* Final CTA title — maximum impact */
.final-cta__title {
  font-size: clamp(2.625rem, 6vw, 4.75rem);
  letter-spacing: -0.048em;
  line-height: 1.07;
  font-weight: 900;
}
.final-cta__title em {
  background: linear-gradient(128deg, #38bdf8, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─────────────────────────────────────────────────────────────────────
   PART 2 — HERO: cinematic atmosphere
───────────────────────────────────────────────────────────────────── */

/* Deeper base background */
.hero {
  background: linear-gradient(165deg, #050b19 0%, #090d18 55%, #060f22 100%);
}

/* Orb 1 — main blue plume, much stronger */
.orb--1 {
  width: 920px;
  height: 920px;
  background: radial-gradient(
    circle,
    rgba(0, 71, 171, .72) 0%,
    rgba(0, 71, 171, .32) 32%,
    rgba(0, 71, 171, .08) 55%,
    transparent 70%
  );
  top: -340px;
  right: -260px;
}

/* Orb 2 — teal accent, lower left */
.orb--2 {
  width: 720px;
  height: 720px;
  background: radial-gradient(
    circle,
    rgba(0, 163, 255, .34) 0%,
    rgba(0, 163, 255, .1) 40%,
    transparent 65%
  );
  bottom: -200px;
  left: -200px;
}

/* Orb 3 — mid-field depth fill */
.orb--3 {
  width: 560px;
  height: 560px;
  background: radial-gradient(
    circle,
    rgba(56, 189, 248, .12) 0%,
    transparent 65%
  );
  top: 30%;
  left: 30%;
}

/* Grid — slightly more visible, finer pitch */
.grid-bg {
  background-image:
    linear-gradient(rgba(255, 255, 255, .034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .034) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 92% 92% at 50% 50%, #000, transparent);
  -webkit-mask-image: radial-gradient(ellipse 92% 92% at 50% 50%, #000, transparent);
}

/* Hero badge — premium glass pill */
.hero__badge {
  background: rgba(0, 163, 255, .08);
  border: 1px solid rgba(0, 163, 255, .3);
  box-shadow:
    0 0 0 5px rgba(0, 163, 255, .045),
    0 0 32px rgba(0, 163, 255, .12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: .48rem 1.25rem .48rem .875rem;
  font-size: .9rem;
}

/* ─────────────────────────────────────────────────────────────────────
   PART 3 — SECTION ATMOSPHERES: radial center lights via multi-background
   No pseudo-elements needed — stacks behind content naturally.
───────────────────────────────────────────────────────────────────── */

/* Dark sections (services, results, équipe, tarifs, processus) */
.section--dark {
  background:
    radial-gradient(ellipse 90% 75% at 50% 50%, rgba(0, 71, 171, .072), transparent),
    var(--dark);
}

/* Darker sections (photographie, studio, podcast) */
.section--darker {
  background:
    radial-gradient(ellipse 80% 65% at 50% 50%, rgba(0, 163, 255, .052), transparent),
    var(--black);
}

/* Grad sections (contact, temoignages, faq) */
.section--grad {
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0, 71, 171, .055), transparent),
    linear-gradient(160deg, #070d1c 0%, #0c1628 55%, #070d1c 100%);
}

/* Hairline bottom separator on every section */
.section--dark,
.section--darker,
.section--grad {
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .055);
}

/* ─────────────────────────────────────────────────────────────────────
   PART 4 — GLASSMORPHISM CARDS: real depth, frosted glass feel
───────────────────────────────────────────────────────────────────── */

/* All primary content cards */
.svc-card,
.result-card,
.res-card,
.testi-card,
.test-card,
.proc-step,
.niche-card,
.why-feat,
.why-metric,
.cs-card,
.pricing-card {
  background: linear-gradient(
    158deg,
    rgba(22, 34, 56, .88) 0%,
    rgba(12, 19, 34, .93) 100%
  );
  border: 1px solid rgba(255, 255, 255, .068);
  border-top: 1px solid rgba(255, 255, 255, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .042),
    0 4px 28px rgba(0, 0, 0, .38),
    0 0 0 1px rgba(0, 0, 0, .18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Featured service / niche cards */
.svc-card--feat,
.niche-card--feat {
  background: linear-gradient(
    145deg,
    rgba(0, 71, 171, .24) 0%,
    rgba(0, 163, 255, .07) 55%,
    rgba(12, 19, 34, .92) 100%
  );
  border-color: rgba(0, 163, 255, .25);
  border-top-color: rgba(0, 163, 255, .48);
  box-shadow:
    inset 0 1px 0 rgba(0, 163, 255, .1),
    0 8px 40px rgba(0, 71, 171, .2),
    0 0 0 1px rgba(0, 163, 255, .06);
}

/* Featured pricing cards — standout */
.pricing-card--feat,
.pricing-card--pop {
  background: linear-gradient(
    148deg,
    rgba(0, 71, 171, .34) 0%,
    rgba(0, 163, 255, .12) 42%,
    rgba(12, 19, 34, .95) 100%
  );
  border-color: rgba(0, 163, 255, .35);
  border-top-color: rgba(56, 189, 248, .65);
  box-shadow:
    inset 0 1px 0 rgba(56, 189, 248, .18),
    0 0 0 1px rgba(0, 163, 255, .12),
    0 32px 80px rgba(0, 71, 171, .28),
    0 0 130px rgba(0, 71, 171, .09);
}
.pricing-card--feat:hover,
.pricing-card--pop:hover {
  box-shadow:
    inset 0 1px 0 rgba(56, 189, 248, .24),
    0 0 0 1px rgba(0, 163, 255, .22),
    0 44px 100px rgba(0, 71, 171, .38),
    0 0 160px rgba(0, 71, 171, .14);
}

/* Case study featured */
.cs-card--feat {
  background: linear-gradient(
    145deg,
    rgba(6, 18, 42, .95) 0%,
    rgba(12, 19, 34, .98) 100%
  );
  border-color: rgba(0, 71, 171, .35);
  border-top-color: rgba(0, 71, 171, .55);
}

/* ─────────────────────────────────────────────────────────────────────
   PART 5 — CARD HOVER: translate + compound corona glow
───────────────────────────────────────────────────────────────────── */

.svc-card:hover {
  transform: translateY(-9px);
  border-color: rgba(0, 163, 255, .22);
  border-top-color: rgba(0, 163, 255, .46);
  background: linear-gradient(
    158deg,
    rgba(26, 42, 68, .92) 0%,
    rgba(14, 23, 40, .96) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(0, 163, 255, .12),
    0 0 0 1px rgba(0, 163, 255, .1),
    0 24px 72px rgba(0, 71, 171, .3),
    0 0 90px rgba(0, 71, 171, .07);
}

.result-card:hover,
.res-card:hover {
  transform: translateY(-9px);
  border-color: rgba(0, 163, 255, .2);
  border-top-color: rgba(0, 163, 255, .42);
  box-shadow:
    inset 0 1px 0 rgba(0, 163, 255, .09),
    0 0 0 1px rgba(0, 163, 255, .09),
    0 28px 80px rgba(0, 0, 0, .55),
    0 0 70px rgba(0, 71, 171, .06);
}

.proc-step:hover {
  transform: translateY(-9px);
  border-color: rgba(0, 163, 255, .22);
  border-top-color: rgba(0, 163, 255, .48);
  box-shadow:
    inset 0 1px 0 rgba(0, 163, 255, .12),
    0 0 0 1px rgba(0, 163, 255, .1),
    0 28px 80px rgba(0, 71, 171, .26);
}

.niche-card:hover {
  transform: translateY(-9px);
  border-color: rgba(0, 163, 255, .22);
  border-top-color: rgba(0, 163, 255, .48);
  box-shadow:
    inset 0 1px 0 rgba(0, 163, 255, .12),
    0 0 0 1px rgba(0, 163, 255, .1),
    0 32px 88px rgba(0, 71, 171, .28);
}

.why-feat:hover {
  border-color: rgba(0, 163, 255, .2);
  border-top-color: rgba(0, 163, 255, .38);
  box-shadow:
    inset 0 1px 0 rgba(0, 163, 255, .08),
    0 0 0 1px rgba(0, 163, 255, .08),
    0 10px 36px rgba(0, 71, 171, .18);
}

.cs-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 163, 255, .2);
  border-top-color: rgba(0, 163, 255, .4);
  box-shadow:
    inset 0 1px 0 rgba(0, 163, 255, .08),
    0 0 0 1px rgba(0, 163, 255, .09),
    0 18px 52px rgba(0, 71, 171, .22);
}

/* ─────────────────────────────────────────────────────────────────────
   PART 6 — BUTTONS: premium glow, glass shine, hover corona
───────────────────────────────────────────────────────────────────── */

/* Accent — primary CTA */
.btn--accent {
  background: linear-gradient(
    132deg,
    #0ea5e9 0%,
    #00a3ff 45%,
    #0066ff 100%
  );
  box-shadow:
    0 0 0 1px rgba(0, 163, 255, .28),
    0 8px 28px rgba(0, 163, 255, .42),
    0 0 64px rgba(0, 163, 255, .1),
    inset 0 1px 0 rgba(255, 255, 255, .2);
  position: relative;
  overflow: hidden;
  letter-spacing: .01em;
  font-weight: 800;
}
/* Glass shine sweep */
.btn--accent::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, .18) 0%,
    rgba(255, 255, 255, 0) 52%
  );
  border-radius: inherit;
  pointer-events: none;
}
.btn--accent:hover {
  background: linear-gradient(
    132deg,
    #38bdf8 0%,
    #00baff 45%,
    #0066ff 100%
  );
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(0, 163, 255, .45),
    0 18px 52px rgba(0, 163, 255, .58),
    0 0 110px rgba(0, 163, 255, .22),
    inset 0 1px 0 rgba(255, 255, 255, .26);
}

/* Primary — solid blue */
.btn--primary {
  box-shadow:
    0 0 0 1px rgba(0, 71, 171, .32),
    0 8px 32px rgba(0, 71, 171, .5),
    inset 0 1px 0 rgba(255, 255, 255, .13);
  font-weight: 800;
}
.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(0, 71, 171, .48),
    0 20px 52px rgba(0, 71, 171, .62),
    0 0 90px rgba(0, 71, 171, .14),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* Outline — glass */
.btn--outline {
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--outline:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07);
}

/* ─────────────────────────────────────────────────────────────────────
   PART 7 — EYEBROW BADGES: animated glass pill with pulsing dot
───────────────────────────────────────────────────────────────────── */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: rgba(0, 163, 255, .07);
  border: 1px solid rgba(0, 163, 255, .24);
  border-radius: var(--r-pill);
  padding: .4rem 1.05rem .4rem .72rem;
  color: var(--accent);
  font-size: .72rem;
  letter-spacing: .1em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 0 0 4px rgba(0, 163, 255, .04),
    0 0 18px rgba(0, 163, 255, .09);
  margin-bottom: 1.375rem;
}
/* Pulsing dot */
.eyebrow::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(0, 163, 255, 1);
  animation: pulse 2s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────────────
   PART 8 — SCROLL REVEAL: cinematic blur-fade-translate
───────────────────────────────────────────────────────────────────── */

/* Override existing transition to add filter */
.reveal,
.reveal-l,
.reveal-r,
.reveal-s {
  transition:
    opacity  620ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
    filter    620ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Initial state — further push + blur */
.reveal   { opacity: 0; transform: translateY(36px);  filter: blur(7px); }
.reveal-l { opacity: 0; transform: translateX(-44px); filter: blur(7px); }
.reveal-r { opacity: 0; transform: translateX(44px);  filter: blur(7px); }
.reveal-s { opacity: 0; transform: scale(0.93);        filter: blur(7px); }
/* Revealed state */
.reveal.in, .reveal-l.in, .reveal-r.in, .reveal-s.in {
  opacity: 1; transform: none; filter: blur(0);
}

/* Stagger grid items */
.stagger > * {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition:
    opacity  560ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1),
    filter    560ms cubic-bezier(0.22, 1, 0.36, 1);
}
.stagger.in > * { opacity: 1; transform: none; filter: blur(0); }
.stagger.in > *:nth-child(1) { transition-delay:   0ms; }
.stagger.in > *:nth-child(2) { transition-delay:  95ms; }
.stagger.in > *:nth-child(3) { transition-delay: 190ms; }
.stagger.in > *:nth-child(4) { transition-delay: 285ms; }
.stagger.in > *:nth-child(5) { transition-delay: 380ms; }
.stagger.in > *:nth-child(6) { transition-delay: 475ms; }

/* ─────────────────────────────────────────────────────────────────────
   PART 9 — RESULT KPIs: dominant glowing numbers
───────────────────────────────────────────────────────────────────── */

.result-kpi__val,
.res-metric__val {
  font-size: 2.5rem;
  letter-spacing: -0.04em;
  color: var(--accent);
  text-shadow:
    0 0 24px rgba(0, 163, 255, .6),
    0 0 60px rgba(0, 163, 255, .22);
}

/* ─────────────────────────────────────────────────────────────────────
   PART 10 — FINAL CTA: maximum cinematic impact
───────────────────────────────────────────────────────────────────── */

.final-cta {
  background: linear-gradient(
    180deg,
    #050b18 0%,
    #090d18 42%,
    #060f20 100%
  );
}
/* Much stronger orbs */
.final-cta__orb--1 {
  width: 900px;
  height: 900px;
  background: radial-gradient(
    circle,
    rgba(0, 71, 171, .72) 0%,
    rgba(0, 71, 171, .28) 35%,
    rgba(0, 71, 171, .06) 55%,
    transparent 68%
  );
  top: -280px;
}
.final-cta__orb--2 {
  width: 580px;
  height: 580px;
  background: radial-gradient(
    circle,
    rgba(0, 163, 255, .42) 0%,
    rgba(0, 163, 255, .12) 42%,
    transparent 65%
  );
  bottom: -120px;
  right: 6%;
}

/* Animated pulse glow on primary CTA */
.final-cta__btn.btn--accent {
  animation: ctaPulse 3.2s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(0, 163, 255, .28),
      0 10px 32px rgba(0, 163, 255, .44),
      0 0 70px rgba(0, 163, 255, .1),
      inset 0 1px 0 rgba(255, 255, 255, .2);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(0, 163, 255, .48),
      0 18px 52px rgba(0, 163, 255, .62),
      0 0 120px rgba(0, 163, 255, .24),
      inset 0 1px 0 rgba(255, 255, 255, .26);
  }
}

/* ─────────────────────────────────────────────────────────────────────
   PART 11 — HEADER: ultra-refined frosted glass
───────────────────────────────────────────────────────────────────── */

.site-header.scrolled {
  background: rgba(5, 9, 20, .82);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, .058);
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, .032),
    0 4px 40px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(0, 0, 0, .32);
  padding: .72rem 0;
}

/* Nav links */
.nav-link:hover,
.nav-link.active {
  background: rgba(255, 255, 255, .058);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .042);
}

/* Mobile nav */
.mobile-nav {
  background: rgba(5, 9, 20, .96);
  backdrop-filter: blur(36px) saturate(160%);
  -webkit-backdrop-filter: blur(36px) saturate(160%);
}

/* ─────────────────────────────────────────────────────────────────────
   PART 12 — FORM CARD: elevated glass
───────────────────────────────────────────────────────────────────── */

.form-card,
.contact-form-wrap {
  background: linear-gradient(
    158deg,
    rgba(18, 29, 50, .9) 0%,
    rgba(10, 17, 32, .95) 100%
  );
  border: 1px solid rgba(255, 255, 255, .068);
  border-top: 1px solid rgba(255, 255, 255, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .042),
    0 36px 88px rgba(0, 0, 0, .52),
    0 0 0 1px rgba(0, 0, 0, .22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ─────────────────────────────────────────────────────────────────────
   PART 13 — SPACING: more generous vertical rhythm on desktop
───────────────────────────────────────────────────────────────────── */

@media(min-width: 1024px) {
  .section         { padding: 9.5rem 0; }
  .section-head    { margin-bottom: 4.75rem; }
}
@media(min-width: 768px) and (max-width: 1023px) {
  .section         { padding: 7.5rem 0; }
  .section-head    { margin-bottom: 4rem; }
}

/* ─────────────────────────────────────────────────────────────────────
   PART 14 — SPECIFIC SECTION OVERRIDES
───────────────────────────────────────────────────────────────────── */

/* Testimonial cards */
.testi-card,
.test-card {
  border-top-color: rgba(255, 255, 255, .13);
}

/* Testimonial quote mark */
.testi-quote::before {
  color: rgba(0, 163, 255, .5);
  font-size: 5rem;
  top: -1rem;
  left: -.5rem;
}

/* Pricing badge ribbon */
.pricing-badge {
  box-shadow:
    0 4px 22px rgba(0, 71, 171, .52),
    0 0 48px rgba(0, 71, 171, .16);
}

/* Podcast hover */
.podcast__main:hover,
.podcast__clip:hover {
  border-color: rgba(0, 163, 255, .35);
  box-shadow:
    0 0 0 1px rgba(0, 163, 255, .2),
    0 28px 88px rgba(0, 71, 171, .42),
    0 0 110px rgba(0, 71, 171, .1);
}

/* Équipe founder card */
.equipe__founder {
  background: linear-gradient(
    135deg,
    rgba(16, 26, 46, .95) 0%,
    rgba(10, 17, 32, .98) 100%
  );
  border: 1px solid rgba(255, 255, 255, .068);
  border-top: 1px solid rgba(255, 255, 255, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 20px 60px rgba(0, 0, 0, .48);
}
.equipe__founder:hover {
  border-color: rgba(0, 163, 255, .2);
  border-top-color: rgba(0, 163, 255, .38);
  box-shadow:
    inset 0 1px 0 rgba(0, 163, 255, .07),
    0 36px 88px rgba(0, 71, 171, .22);
}

/* Studio vcaro active ring */
.vcaro2__item.active .vcaro2__card {
  border-color: rgba(0, 163, 255, .58);
}
.vcaro2__item.active .vcaro2__card::after {
  box-shadow:
    0 0 0 1.5px rgba(0, 163, 255, .52),
    0 32px 88px rgba(0, 71, 171, .48);
}

/* Featured video player */
.feat-vid__player {
  box-shadow:
    0 0 0 1px rgba(0, 163, 255, .1),
    0 32px 88px rgba(0, 0, 0, .65),
    0 0 90px rgba(0, 71, 171, .18);
}
.feat-vid__player:hover,
.feat-vid__player:focus-visible {
  box-shadow:
    0 0 0 1px rgba(0, 163, 255, .3),
    0 40px 96px rgba(0, 0, 0, .7),
    0 0 140px rgba(0, 71, 171, .32);
  transform: scale(1.016);
}

/* ─────────────────────────────────────────────────────────────────────
   PART 15 — ICON CONTAINERS: glass inset + hover glow
───────────────────────────────────────────────────────────────────── */

.svc-icon,
.why-feat__icon,
.proc-step__icon,
.niche-card__icon-wrap {
  background: rgba(0, 71, 171, .1);
  border: 1px solid rgba(0, 71, 171, .2);
  box-shadow:
    0 0 0 4px rgba(0, 71, 171, .04),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}
.svc-card:hover .svc-icon,
.why-feat:hover .why-feat__icon,
.proc-step:hover .proc-step__icon,
.niche-card:hover .niche-card__icon-wrap {
  background: rgba(0, 71, 171, .24);
  border-color: rgba(0, 163, 255, .42);
  box-shadow:
    0 0 0 4px rgba(0, 163, 255, .07),
    0 0 22px rgba(0, 163, 255, .24),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* ─────────────────────────────────────────────────────────────────────
   PART 16 — ANNOUNCE BAR: more premium
───────────────────────────────────────────────────────────────────── */

.ann-bar {
  background: linear-gradient(90deg, #003380 0%, #0047ab 50%, #003380 100%);
  box-shadow: 0 2px 16px rgba(0, 71, 171, .4);
}

/* ─────────────────────────────────────────────────────────────────────
   PART 17 — REDUCED MOTION: respect user preference
───────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-l, .reveal-r, .reveal-s,
  .stagger > * {
    filter: none !important;
    transition-duration: .01ms !important;
  }
  .final-cta__btn.btn--accent,
  .eyebrow::before {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   END VIRALO DESIGN v5.0
═══════════════════════════════════════════════════════════════════════ */