/* ================================================================
   MTL Advertising — Main Stylesheet
   Extracted from index.html
================================================================ */

/* ── Sub-page Header & Hero ── */
.page-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(6, 10, 22, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.page-header .nh-nav {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  padding: 0 40px;
  height: 68px;
}
.page-header .nh-link--active {
  color: #fff;
  font-weight: 700;
}
.page-header .nh-link--active::after {
  content: '';
  display: block;
  height: 2px;
  background: #0055FF;
  border-radius: 2px;
  margin-top: 2px;
}

.page-hero {
  background: linear-gradient(135deg, #040818 0%, #0a0e24 60%, #07102a 100%);
  padding: 80px 40px 72px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(0,85,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero-inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
.page-hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #0055FF;
  margin-bottom: 18px;
}
.page-hero-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-bottom: 20px;
}
.page-hero-sub {
  font-size: 17px;
  color: rgba(255,255,255,0.58);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .page-header .nh-nav { padding: 0 20px; }
  .page-hero { padding: 56px 20px 52px; }
  .page-hero-title { font-size: 36px; }
}


/* ── Block 1 ── */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow-x: hidden; background: #f1f1f4; font-family: 'Geist', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: #1A7EFF; color: #fff; }

@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.65)} }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a14; }
::-webkit-scrollbar-thumb { background: #0055FF; border-radius: 3px; }
html { scroll-behavior: smooth; }

/* ── MOBILE NAV OVERLAY ── */
.nav-mob-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(3,8,24,0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.nav-mob-overlay.open { opacity: 1; pointer-events: all; }
.nmo-close { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #fff; font-size: 20px; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.nmo-links { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.nmo-link { font-size: 28px; font-weight: 700; color: rgba(255,255,255,0.80); text-decoration: none; padding: 10px 32px; border-radius: 12px; transition: color 0.18s, background 0.18s; }
.nmo-link:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nmo-cta-mob { margin-top: 16px; font-size: 15px; font-weight: 700; color: #fff; text-decoration: none; background: #0055FF; padding: 14px 36px; border-radius: 12px; }

/* -- TICKER -- */
.nh-ticker-wrap { margin-top: 32px; }
.tsp-wrap { background: #F2F2F5; padding: 22px 0; overflow: hidden; }
.tsp-track-outer { overflow: hidden; mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%); }
.tsp-track { display: flex; align-items: center; width: max-content; will-change: transform; }
.tsp-track.js-driven { animation: none; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tsp-track.css-driven { animation: ticker-scroll var(--ticker-dur, 25s) linear infinite; }
.tsp-list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; flex-shrink: 0; }
.tsp-item { display: flex; align-items: center; flex-shrink: 0; }
.tsp-logo { display: block; height: 42px; width: auto; padding: 0 70px; object-fit: contain; flex-shrink: 0; opacity: 0.85; transition: opacity 0.22s ease, transform 0.22s ease; cursor: default; }
.tsp-logo:hover { opacity: 1; transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .tsp-track.css-driven { animation-play-state: paused; } }
@media (max-width: 960px) { .tsp-logo { height: 36px; padding: 0 55px; } }
@media (max-width: 560px) { .tsp-wrap { padding: 18px 0; } .tsp-logo { height: 30px; padding: 0 44px; } }


/* ══════════════════════════════════════════════════════
   SECTION HEADER DESIGN SYSTEM v2
   Manrope 800 titles · Work Sans descriptions
   ══════════════════════════════════════════════════════ */
.section-header{text-align:center;max-width:820px;margin-inline:auto;margin-bottom:72px}
.section-header--left{text-align:left;margin-inline:0}
.section-eyebrow{
  display:inline-block;
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#0055FF;
  line-height:1;margin-bottom:20px;
}
.section-title{
  font-family:'Manrope',system-ui,sans-serif;
  font-size:clamp(38px,5vw,60px);font-weight:800;
  color:#0A0A0F;line-height:.92;letter-spacing:-.055em;
  text-wrap:balance;margin:0;max-width:720px;
}
.section-header .section-title{margin-inline:auto}
.section-header--left .section-title{margin-inline:0}
.section-desc{
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:20px;font-weight:400;line-height:1.65;
  letter-spacing:-.01em;color:#64748B;
  max-width:620px;margin:28px auto 0;
}
.section-header--left .section-desc{margin-left:0}
/* hide legacy eyebrows */
.sh-eyebrow,.ge-eyebrow,.pf-eyebrow,.rv-eyebrow,.sv-eye,.perf-kpi-eyebrow{display:none!important}
@media(max-width:1024px){
  .section-title{font-size:clamp(38px,5vw,56px)}
  .section-desc{font-size:19px}
}
@media(max-width:768px){
  .section-header{margin-bottom:56px}
  .section-title{font-size:48px}
  .section-desc{font-size:19px}
}
@media(max-width:580px){
  .section-header{margin-bottom:44px}
  .section-title{font-size:38px;letter-spacing:-.04em;line-height:1}
  .section-desc{font-size:17px;margin-top:20px}
}
/* ═══════════════════════════════════════════════════════
/* ═══ NEW HERO — light sky design ═══ */
.nh-hero { position: relative; z-index: 0; display: flex; flex-direction: column; background: #f7f9fc; color: #1e293b; overflow-x: clip; }
.nh-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 180px; pointer-events: none; z-index: 6; background: linear-gradient(to bottom, transparent 0%, rgba(241,241,244,0.04) 10%, rgba(241,241,244,0.12) 22%, rgba(241,241,244,0.26) 34%, rgba(241,241,244,0.44) 46%, rgba(241,241,244,0.62) 57%, rgba(241,241,244,0.77) 67%, rgba(241,241,244,0.88) 76%, rgba(241,241,244,0.94) 84%, rgba(241,241,244,0.98) 91%, #f1f1f4 100%); }
.nh-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.nh-bg-photo { position: absolute; inset: 0; background: url('hero-bg.avif') center/cover no-repeat; opacity: 0.50; }
.nh-bg-gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(219,234,254,0.85) 0%, rgba(191,219,254,0.65) 35%, rgba(247,249,252,0.10) 100%); }
.nh-bg-beams { position: absolute; top: 0; left: 0; width: 358px; height: 483px; pointer-events: none; user-select: none; z-index: 1; }
.nh-nav { position: relative; z-index: 100; display: flex; align-items: flex-start; justify-content: center; margin: 0 auto 0; width: calc(100% - 48px); max-width: 1180px; padding: 38px 0 24px; min-height: 0; background: transparent; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nh-logo { position: absolute; left: 0; top: 20px; transform: none; text-decoration: none; flex-shrink: 0; }
.nh-logo-img { height: 120px; width: auto; display: block; object-fit: contain; }
.nh-links { display: flex; align-items: center; gap: 0; background: #0055FF; border-radius: 140px; padding: 15px 57px; box-shadow: 0 4px 20px rgba(0,85,255,0.30); }
.nh-link { font-size: 18px; font-weight: 700; color: #fff; text-decoration: none; padding: 5px 20px; border-radius: 100px; transition: color 0.2s, background 0.2s, transform 0.18s, box-shadow 0.2s; letter-spacing: -0.02em; white-space: nowrap; }
.nh-link:hover { color: #0055FF; background: #fff; transform: scale(1.08); box-shadow: 0 4px 16px rgba(0,0,0,0.18); }
.nh-cta-nav { position: absolute; right: 0; top: 48px; transform: none; font-size: 17px; font-weight: 700; color: #0055FF; text-decoration: none; background: rgba(0,85,255,0.07); padding: 11px 22px; border-radius: 12px; border: 1.5px solid rgba(0,85,255,0.30); transition: background 0.22s, border-color 0.22s, color 0.22s, box-shadow 0.22s; box-shadow: none; letter-spacing: 0.01em; }
.nh-cta-nav:hover { background: #fff; border-color: #fff; color: #0055FF; transform: none; box-shadow: 0 4px 24px rgba(255,255,255,0.25); }
.nh-mob-btn { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; margin-left: auto; }
.nh-mob-btn span { display: block; width: 22px; height: 2px; background: #334155; border-radius: 2px; transition: all 0.25s ease; }
.nh-content { position: relative; z-index: 10; flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; padding: 148px 24px 60px; max-width: 1180px; margin: 0 auto; width: 100%; }
.nh-left { display: flex; flex-direction: column; align-items: flex-start; text-align: left; flex: 0 0 56%; min-width: 0; }
.nh-right { flex: 0 0 42%; min-width: 0; display: flex; align-items: center; justify-content: center; }
.nh-badge { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 2px solid #fff; border-radius: 100px; padding: 4px 16px 4px 4px; font-size: 13px; font-weight: 500; color: #1e293b; margin-bottom: 32px; box-shadow: 0 4px 20px rgba(59,130,246,0.18); }
.nh-badge-pill { background: linear-gradient(135deg, #3b82f6 0%, #93c5fd 100%); color: #fff; font-size: 9.5px; font-weight: 700; padding: 4px 12px; border-radius: 100px; letter-spacing: 0.10em; text-transform: uppercase; }
.nh-h1 { font-family:'Manrope',system-ui,sans-serif; font-size: clamp(38px,5vw,76px); font-weight: 800; line-height: .92; letter-spacing: -0.055em; color: #0f172a; margin: 0 0 24px; }
.nh-sub { font-family:'Work Sans',system-ui,sans-serif; font-size: clamp(16px,1.5vw,20px); font-weight: 400; letter-spacing: -0.01em; color: #64748b; line-height: 1.65; max-width: 480px; margin: 0 0 40px; }
.nh-btns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-start; align-items: center; }

/* ══════════════════════════════════════════════════════
   HERO VISUAL COMPOSITION — v5
   ══════════════════════════════════════════════════════ */
.nh-visual { position: relative; width: 468px; height: 508px; flex-shrink: 0; }
.nh-vglow {
  position: absolute; top: 42%; left: 55%;
  width: 400px; height: 400px;
  transform: translate(-50%,-50%);
  background: radial-gradient(ellipse, rgba(59,130,246,0.17) 0%, rgba(147,197,253,0.08) 48%, transparent 70%);
  pointer-events: none; border-radius: 50%;
}

/* ── card base ── */
.hvc {
  position: absolute;
  background: rgba(255,255,255,0.97);
  border: 1px solid rgba(186,210,240,0.75);
  border-radius: 14px;
  padding: 8px 16px;
  box-shadow: 0 2px 6px rgba(15,23,42,0.06), 0 8px 24px rgba(15,23,42,0.10), 0 24px 56px rgba(15,23,42,0.07);
  cursor: default; user-select: none;
  transition: box-shadow 0.4s ease, border-color 0.4s ease,
              translate 0.40s ease-out, scale 0.40s ease-out;
}
.hvc.hvc--lit {
  box-shadow: 0 2px 6px rgba(15,23,42,0.06), 0 12px 32px rgba(59,130,246,0.24), 0 32px 64px rgba(15,23,42,0.12);
  border-color: rgba(147,197,253,0.95);
}
.hvc.hvc--is-hovered {
  scale: 1.06;
  translate: 0 -10px;
  box-shadow: 0 4px 14px rgba(15,23,42,0.10), 0 18px 52px rgba(59,130,246,0.30), 0 44px 88px rgba(15,23,42,0.13);
  border-color: rgba(147,197,253,1);
  background: rgba(255,255,255,1);
}
.hvc.hvc--scattered {
  translate: var(--sc-x, 0px) var(--sc-y, 0px);
  scale: 0.97;
}

/* ── card header ── */
.hvc-head { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 6px; }
.hvc-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hvc-icon svg { display: block; width: 100%; height: 100%; }
.hvc-label { font-size: 13px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #0026eb; }
.hvc-live { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0; animation: livePulse 2.2s ease-in-out infinite; }
@keyframes livePulse { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.55)} 55%{box-shadow:0 0 0 5px rgba(34,197,94,0)} }

/* ── card body — all centered ── */
.hvc-title { font-size: 16px; font-weight: 650; color: #0f172a; line-height: 1.6; margin-bottom: 2px; text-align: center; }
.hvc-sub   { font-size: 14px; color: #1e293b; font-weight: 500; line-height: 1.4; text-align: center; }
.hvc-row   { display: flex; align-items: center; justify-content: center; gap: 9px; }
.hvc-divider { height: 1px; background: rgba(203,213,225,0.55); margin: 9px 0; }
.hvc-chip { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px; margin: 8px auto 0; width: fit-content; }
.hvc-chip--green { background: rgba(34,197,94,0.10);  color: #15803d; }
.hvc-chip--blue  { background: rgba(59,130,246,0.10);  color: #1d4ed8; }

/* ── waveform ── */
.hvc-wave { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 28px; margin-top: 10px; }
.hvc-wave-bar { width: 4px; border-radius: 2px; background: #3b82f6; transform-origin: center; }
@keyframes waveBar { 0%,100%{transform:scaleY(0.25);opacity:0.35} 50%{transform:scaleY(1);opacity:1} }

/* ── stars ── */
.hvc-stars { display: flex; justify-content: center; gap: 3px; }
.hvc-star  { color: #f59e0b; font-size: 23px; line-height: 1; opacity: 0; transform: scale(0.5); transition: opacity 0.22s ease, transform 0.22s ease; }
.hvc-star.is-visible { animation: starSway 2.8s ease-in-out infinite; }
@keyframes starSway { 0%,100%{opacity:1;transform:scale(1) rotate(0deg)} 30%{opacity:1;transform:scale(1) rotate(-8deg)} 70%{opacity:1;transform:scale(1) rotate(8deg)} }

/* ── check ── */
.hvc-check { width: 28px; height: 28px; border-radius: 50%; background: #22c55e; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(34,197,94,0.35); }

/* ══ ENTRANCE keyframes ══ */
@keyframes hvcIn1 { from{opacity:0;transform:rotate(-1.5deg) translateY(28px) scale(0.94)} to{opacity:1;transform:rotate(-1.5deg) translateY(0) scale(1)} }
@keyframes hvcIn2 { from{opacity:0;transform:rotate(1.5deg)  translateY(28px) scale(0.94)} to{opacity:1;transform:rotate(1.5deg)  translateY(0) scale(1)} }
@keyframes hvcIn4 { from{opacity:0;transform:rotate(-1.5deg) translateY(28px) scale(0.94)} to{opacity:1;transform:rotate(-1.5deg) translateY(0) scale(1)} }
@keyframes hvcIn5 { from{opacity:0;transform:rotate(1deg)    translateY(28px) scale(0.94)} to{opacity:1;transform:rotate(1deg)    translateY(0) scale(1)} }
@keyframes hvcIn6 { from{opacity:0;transform:rotate(-0.5deg) translateY(28px) scale(0.94)} to{opacity:1;transform:rotate(-0.5deg) translateY(0) scale(1)} }

/* ══ FLOAT keyframes ══ */
@keyframes hvcF1 { 0%,100%{transform:rotate(-1.5deg) translate(0,0)}  50%{transform:rotate(-1.8deg) translate(2px,-7px)} }
@keyframes hvcF2 { 0%,100%{transform:rotate(1.5deg)  translate(0,0)}  50%{transform:rotate(1.2deg)  translate(-2px,-8px)} }
@keyframes hvcF4 { 0%,100%{transform:rotate(-1.5deg) translate(0,0)}  50%{transform:rotate(-1.8deg) translate(-1px,-6px)} }
@keyframes hvcF5 { 0%,100%{transform:rotate(1deg)    translate(0,0)}  50%{transform:rotate(1.3deg)  translate(2px,-7px)} }
@keyframes hvcF6 { 0%,100%{transform:rotate(-0.5deg) translate(0,0)}  50%{transform:rotate(-0.2deg) translate(-2px,-6px)} }

/* ══ card positions (5 cards) ══ */
.hvc--google { width:278px; top: 22px; left: 2px;  z-index:2; animation:hvcIn1 0.60s ease-out 0.15s both, hvcF1 5.6s ease-in-out 0.75s infinite; }
.hvc--meta   { width:250px; top: 70px; right:2px;  z-index:3; animation:hvcIn2 0.60s ease-out 0.40s both, hvcF2 6.3s ease-in-out 1.00s infinite; }
.hvc--call   { width:290px; top:182px; left: 2px;  z-index:5; animation:hvcIn4 0.60s ease-out 0.68s both, hvcF4 5.2s ease-in-out 1.28s infinite; }
.hvc--booked { width:258px; top:366px; left:14px;  z-index:3; animation:hvcIn5 0.60s ease-out 0.92s both, hvcF5 6.6s ease-in-out 1.52s infinite; }
.hvc--review { width:224px; top:258px; right: 4px; z-index:6; animation:hvcIn6 0.60s ease-out 1.14s both, hvcF6 5.9s ease-in-out 1.74s infinite; }

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .hvc          { animation:none !important; opacity:1 !important; transition:none !important; }
  .hvc--google  { transform:rotate(-1.5deg) !important; }
  .hvc--meta    { transform:rotate(1.5deg)  !important; }
  .hvc--call    { transform:rotate(-1.5deg) !important; }
  .hvc--booked  { transform:rotate(1deg)    !important; }
  .hvc--review  { transform:rotate(-0.5deg) !important; }
  .hvc-star     { opacity:1 !important; transform:scale(1) !important; }
  .hvc-live     { animation:none !important; }
}

/* ── responsive ── */
@media (max-width: 960px) {
  .nh-content { flex-direction:column; align-items:center; text-align:center; padding:36px 20px 40px; }
  .nh-left    { align-items:center; text-align:center; flex:none; width:100%; }
  .nh-sub     { max-width:560px; }
  .nh-btns    { justify-content:center; }
  .nh-right   { flex:none; width:100%; max-width:440px; margin:0 auto; }
  .nh-visual  { width:388px; height:422px; }
  .hvc        { padding:11px 14px; }
  .hvc-icon   { width:36px; height:36px; }
  .hvc--google { width:232px; top: 5px; left: 2px;  }
  .hvc--meta   { width:208px; top:50px; right:2px;  }
  .hvc--call   { width:242px; top:142px;left: 2px;  }
  .hvc--booked { width:214px; top:304px;left:11px;  }
  .hvc--review { width:186px; top:291px;right: 0px; }
}
@media (max-width: 600px) {
  .nh-right   { max-width:360px; }
  .nh-visual  { width:348px; height:382px; }
  .hvc        { padding:10px 13px; }
  .hvc-icon   { width:30px; height:30px; }
  .hvc-title  { font-size:14.5px; }
  .hvc-sub    { font-size:11.5px; }
  .hvc--google { width:206px; top: 4px; left: 1px;  }
  .hvc--meta   { width:184px; top:44px; right:1px;  }
  .hvc--call   { width:214px; top:126px;left: 1px;  }
  .hvc--booked { width:190px; top:270px;left: 9px;  }
  .hvc--review { width:165px; top:259px;right: 0px; }
}

.nh-btn-primary { display: inline-flex; align-items: center; gap: 9px; background: #0055FF; color: #fff; text-decoration: none; font-size: 22px; font-weight: 600; padding: 15px 23px; border-radius: 15px; border: 1px solid #0055FF; box-shadow: 0 4px 16px rgba(0,85,255,0.28); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.nh-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,85,255,0.35); }
.nh-btn-secondary { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #fff; color: #0F172A; text-decoration: none; font-size: 22px; font-weight: 600; padding: 15px 23px; border-radius: 15px; box-shadow: 0 4px 16px rgba(0,0,0,0.10); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.nh-btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.15); }
.nh-ticker-wrap { position: relative; z-index: 20; }

/* ── scroll hint arrows ── */
.nh-scroll-hint { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0px; z-index: 30; pointer-events: none; }
.nh-arrow { width: 80px; height: 44px; display: block; }
@keyframes arrowDrop {
  0%   { opacity: 0.12; transform: translateY(-4px); }
  50%  { opacity: 0.70; transform: translateY(4px); }
  100% { opacity: 0.12; transform: translateY(-4px); }
}
.nh-arrow:nth-child(1) { animation: arrowDrop 1.8s ease-in-out 0.00s infinite; }
.nh-arrow:nth-child(2) { animation: arrowDrop 1.8s ease-in-out 0.22s infinite; }
.nh-arrow:nth-child(3) { animation: arrowDrop 1.8s ease-in-out 0.44s infinite; }

.pr-section { }
@keyframes nhBlurIn { from { opacity: 0; filter: blur(18px); transform: translateY(16px); } to { opacity: 1; filter: blur(0px); transform: translateY(0); } }
.nh-nav    { opacity: 0; animation: nhBlurIn 0.65s ease forwards; animation-delay: 0.05s; }
.nh-badge  { opacity: 0; animation: nhBlurIn 0.65s ease forwards; animation-delay: 0.30s; }
.nh-h1     { opacity: 0; animation: nhBlurIn 0.65s ease forwards; animation-delay: 0.60s; }
.nh-sub    { opacity: 0; animation: nhBlurIn 0.65s ease forwards; animation-delay: 0.90s; }
.nh-btns   { opacity: 0; animation: nhBlurIn 0.65s ease forwards; animation-delay: 1.15s; }
.nh-ticker-wrap { opacity: 1; }
@media (max-width: 768px) {
  .nh-nav { width: calc(100% - 32px); margin: 14px auto 0; padding: 10px 14px; min-height: 72px; }
  .nh-logo { top: 10px; }
  .nh-logo-img { height: 52px; }
  .nh-links, .nh-cta-nav { display: none; }
  .nh-mob-btn { display: flex; }
  .nh-content { padding: 36px 20px 56px; }
  .nh-btns { flex-direction: column; width: 100%; }
  .nh-btn-primary, .nh-btn-secondary { width: 100%; max-width: 320px; justify-content: center; }
}



/* ── Block 2 ── */

.sv-section{background:#F2F2F5;padding:116px 48px 38px;font-family:'Geist',Inter,ui-sans-serif,sans-serif}
.sv-container{max-width:1240px;margin:0 auto}
.sv-header{margin-bottom:72px;text-align:center}
.sv-eye{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#0055FF;margin-bottom:14px}
.sv-h1{font-size:clamp(38px,5vw,60px);font-weight:800;color:#0A0A0F;letter-spacing:-.038em;line-height:1.04;margin-bottom:0;max-width:720px;margin-left:auto;margin-right:auto;text-wrap:balance}
.sv-sub{font-size:18px;color:#64748B;max-width:620px;line-height:1.65;margin:22px auto 0}

/* TOP card — Web Dev */
.sv-top{background:#dfdeff;border-radius:24px;padding:40px 16px 40px;display:grid;grid-template-columns:270px 1fr 270px;gap:0;align-items:center;box-shadow:0 1px 3px rgba(0,0,0,.06),0 8px 32px rgba(0,0,0,.06);margin-bottom:0;border:1px solid rgba(0,85,255,.12);transition:box-shadow .2s,transform .2s;min-height:240px}
.sv-connector{padding:0 0;margin:0 0}
.sv-top:hover{box-shadow:0 1px 3px rgba(0,0,0,.06),0 16px 48px rgba(0,0,0,.1);transform:translateY(-2px)}
.sv-top-svg-l{display:flex;justify-content:center;align-items:center}
.sv-top-svg-r{display:flex;justify-content:center;align-items:center}
/* center text col */
.sv-top-mid{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 32px}
.sv-top-name{font-size:26px;font-weight:800;color:#0A0A0F;letter-spacing:-.02em;line-height:1.2;margin-bottom:20px}
.sv-top-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin-bottom:28px;text-align:left}
.sv-top-cols li{font-size:12.5px;color:#374151;line-height:1.5;list-style:none;display:flex;align-items:flex-start;gap:7px}
.sv-top-cols li::before{content:'';width:4px;height:4px;border-radius:50%;background:#0055FF;flex-shrink:0;margin-top:5px}
.sv-top-cta{display:inline-flex;align-items:center;gap:8px;background:#0055FF;color:#fff;font-size:17px;font-weight:600;padding:12px 28px;border-radius:10px;text-decoration:none;transition:background .15s}
.sv-top-cta:hover{background:#0044DD}

/* 4-grid */
.sv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;z-index:3}

/* base card */
.sv-card{background:#fff;border-radius:24px;padding:32px 28px 28px;display:flex;flex-direction:column;position:relative;border:1px solid rgba(0,0,0,.05);box-shadow:0 1px 3px rgba(0,0,0,.05),0 4px 16px rgba(0,0,0,.04);transition:box-shadow .2s,transform .2s;overflow:hidden}
.sv-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:24px 24px 0 0}
.sv-card:hover{box-shadow:0 1px 3px rgba(0,0,0,.05),0 12px 40px rgba(0,0,0,.1);transform:translateY(-3px)}

/* accent top borders */
.sv-card--g::before{background:linear-gradient(90deg,#4285F4,#34A853)}
.sv-card--m::before{background:linear-gradient(90deg,#1877F2,#E1306C)}
.sv-card--s::before{background:linear-gradient(90deg,#10B981,#059669)}
.sv-card--t::before{background:linear-gradient(90deg,#010101,#FF0050)}

/* Google Ads — primary, larger */
.sv-card--g{grid-column:span 1;padding:36px 32px 32px}

.sv-logo{height:64px;margin-bottom:24px;flex-shrink:0}
.sv-logo img{width:100%;height:100%;object-fit:contain;object-position:left center}

.sv-card-name{font-weight:800;color:#0A0A0F;letter-spacing:-.015em;line-height:1.15;margin-bottom:8px;font-size:21px}
.sv-card-tag{font-size:13px;color:#64748B;line-height:1.55;margin-bottom:20px}
.sv-card--g .sv-card-tag{font-size:14px}

/* mini vis */
.sv-mini{margin-bottom:20px;border-radius:12px;background:#e9e9e9;padding:12px 14px;border:none}
.sv-mini-label{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#555;margin-bottom:8px}

/* Google line chart */
.sv-chart-g{display:flex;align-items:flex-end;gap:3px;height:36px}
.sv-bar{border-radius:3px 3px 0 0;width:10px;background:#4285F4;opacity:.25;transition:opacity .15s}
.sv-bar:nth-child(5n),.sv-bar:nth-child(7n){opacity:.8}
.sv-bar:last-child{opacity:1}

/* Meta ROAS */
.sv-roas{display:flex;align-items:baseline;gap:6px}
.sv-roas-val{font-size:28px;font-weight:800;color:#1877F2;letter-spacing:-.02em}
.sv-roas-unit{font-size:12px;font-weight:600;color:#94A3B8}
.sv-roas-delta{font-size:11px;font-weight:600;color:#10B981;background:#ECFDF5;padding:2px 6px;border-radius:100px}

/* SEO rank */
.sv-rank{display:flex;align-items:center;gap:10px}
.sv-rank-num{font-size:28px;font-weight:800;color:#10B981;letter-spacing:-.02em}
.sv-rank-txt{font-size:11px;color:#64748B;line-height:1.4}
.sv-rank-pin{font-size:20px}

/* TikTok bars */
.sv-tik{display:flex;align-items:flex-end;gap:4px;height:32px}
.sv-tikbar{border-radius:3px 3px 0 0;width:8px}
.sv-tikbar:nth-child(odd){background:#FF0050;opacity:.3}
.sv-tikbar:nth-child(even){background:#010101;opacity:.2}
.sv-tikbar:nth-last-child(-n+2){opacity:.9!important}

/* bullet list */
.sv-ul{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.sv-ul li{font-size:13px;color:#374151;display:flex;align-items:flex-start;gap:9px;line-height:1.5}
.sv-ul li::before{content:'';width:4px;height:4px;border-radius:50%;flex-shrink:0;margin-top:7px}
.sv-card--g .sv-ul li::before{background:#4285F4}
.sv-card--m .sv-ul li::before{background:#1877F2}
.sv-card--s .sv-ul li::before{background:#10B981}
.sv-card--t .sv-ul li::before{background:#FF0050}

/* button */
.sv-cta{display:block;text-align:center;padding:11px 0;border-radius:10px;font-size:17px;font-weight:600;text-decoration:none;transition:all .15s;margin-top:auto;border:1.5px solid #E8EAF0;color:#374151;background:#FAFAFA}
.sv-cta:hover{border-color:#0055FF;background:#0055FF;color:#fff}
.sv-card--g .sv-cta{background:#0055FF;color:#fff;border-color:#0055FF}
.sv-card--g .sv-cta:hover{background:#0044DD;border-color:#0044DD}

@media(max-width:1024px){.sv-grid{grid-template-columns:repeat(2,1fr)}.sv-top{flex-direction:column;gap:32px}.sv-top-sep{display:none}.sv-top-l{flex:none}}
@media(max-width:600px){.sv-grid{grid-template-columns:1fr}.sv-section{padding:40px 20px}.sv-h1{font-size:clamp(30px,7vw,42px)}}



/* ── Block 3 ── */

.pr-section {
  background: #F1F1F4;
  padding: 58px 48px;
  font-family: 'Inter', sans-serif;
}
.pr-container { max-width: 1200px; margin: 0 auto; }

/* Header */
.pr-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 48px;
}
.pr-title {
  font-size: 40px; font-weight: 800; color: #0A0A0F;
  letter-spacing: -0.038em; line-height: 1.04;
}
.pr-toggle {
  display: flex; gap: 4px;
  background: #E2E2E6; border-radius: 100px;
  padding: 4px;
}
.pr-toggle-btn {
  padding: 8px 20px; border: none; cursor: pointer;
  border-radius: 100px; font-size: 14px; font-weight: 500;
  font-family: 'Inter', sans-serif;
  background: transparent; color: #666;
  transition: all 0.2s ease;
}
.pr-toggle-btn.active {
  background: #fff; color: #0D0D14;
  box-shadow: 0 1px 6px rgba(0,0,0,0.12);
}
.pr-toggle-disc { color: #0055FF; font-weight: 600; }

/* Grid */
.pr-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 20px;
  margin-bottom: 64px;
}

/* Cards */
.pr-card {
  background: #fff;
  border: 1.5px dashed #C8CAD8;
  border-radius: 16px;
  padding: 28px 24px;
  display: flex; flex-direction: column;
  position: relative;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.pr-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.pr-card--featured {
  background: #0055FF;
  border: none;
  box-shadow: 0 8px 32px rgba(0,85,255,0.28);
}
.pr-card--featured:hover {
  box-shadow: 0 12px 40px rgba(0,85,255,0.38);
  transform: translateY(-3px);
}
.pr-badge {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,0.18);
  color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
  backdrop-filter: blur(6px);
}
.pr-plan-name {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: #94A3B8;
  display: block; margin-bottom: 12px;
}
.pr-card--featured .pr-plan-name { color: rgba(255,255,255,0.6); }

.pr-price-row {
  display: flex; align-items: baseline; gap: 2px;
  margin-bottom: 12px;
}
.pr-currency { font-size: 20px; font-weight: 700; color: #0D0D14; }
.pr-price {
  font-size: 48px; font-weight: 700; color: #0D0D14;
  letter-spacing: -0.02em;
  transition: all 0.25s ease;
}
.pr-period { font-size: 14px; color: #94A3B8; margin-left: 2px; }
.pr-card--featured .pr-currency,
.pr-card--featured .pr-price { color: #fff; }
.pr-card--featured .pr-period { color: rgba(255,255,255,0.55); }

.pr-desc {
  font-size: 14px; color: #64748B; line-height: 1.55;
  margin-bottom: 20px;
}
.pr-card--featured .pr-desc { color: rgba(255,255,255,0.7); }

.pr-features {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.pr-features li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #475569;
}
.pr-features li::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: #CBD5E1; flex-shrink: 0;
}
.pr-card--featured .pr-features li { color: rgba(255,255,255,0.85); }
.pr-card--featured .pr-features li::before { background: rgba(255,255,255,0.4); }

.pr-btn {
  width: 100%; padding: 12px;
  border: 1.5px dashed #C8CAD8; border-radius: 10px;
  background: transparent; color: #475569;
  font-size: 18px; font-weight: 600;
  font-family: 'Inter', sans-serif; cursor: pointer;
  transition: all 0.2s ease;
}
.pr-btn:hover { background: #F8F9FF; border-color: #0055FF; color: #0055FF; }
.pr-btn--featured {
  background: #fff; color: #0055FF;
  border: none; box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.pr-btn--featured:hover { background: #F0F4FF; box-shadow: 0 4px 16px rgba(0,0,0,0.16); }

/* FAQ */
.pr-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 80px; }
.pr-faq-q {
  font-size: 15px; font-weight: 600; color: #0D0D14;
  margin: 0 0 8px; line-height: 1.4;
}
.pr-faq-a { font-size: 13px; color: #64748B; line-height: 1.65; margin: 0; }

/* Responsive */
@media (max-width: 1024px) {
  .pr-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .pr-section { padding: 30px 20px; }
  .pr-grid { grid-template-columns: 1fr; }
  .pr-header { flex-direction: column; align-items: flex-start; gap: 20px; }
  .pr-faq { grid-template-columns: 1fr; }
}



/* ── Block 4 ── */

/* ── Shell ── */
.ge-section{background:#F1F1F4;padding:62px 48px 68px;font-family:'Geist',Inter,ui-sans-serif,sans-serif;position:relative;overflow:hidden}

/* subtle grid bg */
.ge-section::before{display:none}

.ge-container{max-width:1220px;margin:0 auto;position:relative;z-index:1}

/* ── Header ── */
.ge-header{text-align:center;margin-bottom:72px}
.ge-eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#0055FF;margin-bottom:18px;line-height:1.2}
.ge-heading{font-size:clamp(38px,5vw,60px);font-weight:800;color:#0A0A0F;letter-spacing:-.038em;line-height:1.04;margin-bottom:0;text-wrap:balance;max-width:720px;margin-inline:auto}
.ge-sub{font-size:18px;color:#64748B;line-height:1.65;max-width:620px;margin:22px auto 0}

/* ── Three-column canvas ── */
.ge-canvas{display:grid;grid-template-columns:25% 1fr 25%;gap:0;align-items:center;min-height:600px}

/* ── Column labels ── */
.ge-col-label{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(0,0,0,.55);margin-bottom:20px;display:block}

/* ══════════════════════════════
   LEFT — INPUT NODES
══════════════════════════════ */
.ge-inputs{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding-right:0}

.ge-node{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:10px 10px 12px;
  width:215px;
  cursor:default;
  transition:border-color .3s,background .3s,box-shadow .3s,transform .25s;
  position:relative;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.ge-node:hover{border-color:rgba(0,85,255,.4);background:rgba(0,85,255,.04);transform:translateX(-3px);box-shadow:0 4px 14px rgba(0,85,255,.1)}
.ge-node.ge-active{border-color:rgba(0,85,255,.5);background:rgba(0,85,255,.05);box-shadow:0 2px 10px rgba(0,85,255,.12)}

.ge-node-icon{width:52px;height:52px;border-radius:13px;background:rgba(0,85,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:9px}
.ge-node-icon svg{width:36px;height:36px}

.ge-node-text{width:100%}
.ge-node-name{font-size:16px;font-weight:700;color:#0D0D14;line-height:1.2;margin-bottom:3px;text-align:center}
.ge-node-sub{font-size:13px;color:#64748B;line-height:1.3;text-align:center}

/* status dot */
.ge-node-dot{position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;background:#22C55E;opacity:0;transition:opacity .4s}
.ge-active .ge-node-dot{opacity:1}

/* ══════════════════════════════
   OUTPUT NODES (right side)
══════════════════════════════ */
.ge-outputs{display:flex;flex-direction:column;gap:12px;align-items:flex-end;padding-left:0}

.ge-out-node{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:10px 10px 12px;
  width:215px;
  cursor:default;
  transition:border-color .3s,background .3s,box-shadow .3s,transform .25s;
  position:relative;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.ge-out-node:hover{border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.05);transform:translateX(3px);box-shadow:0 4px 14px rgba(34,197,94,.12)}
.ge-out-node.ge-active{border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.06);box-shadow:0 2px 10px rgba(34,197,94,.14)}
.ge-out-node.ge-highlight{border-color:rgba(34,197,94,.6);background:rgba(34,197,94,.08)}

.ge-out-icon{width:52px;height:52px;border-radius:13px;background:rgba(34,197,94,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:9px}
.ge-out-icon svg{width:36px;height:36px}
.ge-out-name{font-size:16px;font-weight:700;color:#0D0D14;line-height:1.2;margin-bottom:3px;text-align:center}
.ge-out-sub{font-size:13px;color:#64748B;line-height:1.3;text-align:center}
.ge-out-check{position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;background:#22C55E;opacity:0;transition:opacity .4s}
.ge-active .ge-out-check{opacity:1}

/* ══════════════════════════════
   CENTER — ENGINE SVG WRAPPER
══════════════════════════════ */
.ge-engine-wrap{display:flex;align-items:center;justify-content:center;position:relative;padding-bottom:120px}
.ge-engine-svg{width:100%;max-width:580px;aspect-ratio:1;overflow:visible;display:block}

/* ── Tooltip ── */
.ge-tooltip{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid rgba(0,85,255,.22);
  border-radius:12px;padding:13px 20px;font-size:13px;color:#334155;
  line-height:1.6;width:380px;max-width:420px;text-align:center;
  white-space:normal;word-break:break-word;
  opacity:0;pointer-events:none;transition:opacity .3s;
  z-index:20;box-shadow:0 6px 28px rgba(0,0,0,.12);
}
.ge-tooltip.visible{opacity:1}

/* ── CTA ── */
.ge-cta-wrap{text-align:center;margin-top:60px}
.ge-cta{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:12px;background:#0055FF;color:#fff;font-size:18px;font-weight:700;text-decoration:none;transition:background .2s,transform .2s;font-family:inherit}
.ge-cta:hover{background:#004AE0;transform:translateY(-1px)}

/* ── Ring CSS animations ── */
@keyframes geSpinCW  { to { transform: rotate(360deg);  } }
@keyframes geSpinCCW { to { transform: rotate(-360deg); } }
@keyframes geCorePulseKF { 0%,100%{transform:scale(1);opacity:.06} 50%{transform:scale(1.18);opacity:.22} }
@keyframes geDotPulseKF  { 0%,100%{transform:scale(1);opacity:.45} 50%{transform:scale(1.5);opacity:1} }

#geRing4,#geRing3,#geRing2,#geRing1{transform-box:view-box;transform-origin:240px 240px}
#geRing4{animation:geSpinCW  90s linear infinite}
#geRing3{animation:geSpinCCW 70s linear infinite}
#geRing2{animation:geSpinCW  50s linear infinite}
#geRing1{animation:geSpinCCW 36s linear infinite}
#geCorePulse{transform-box:view-box;transform-origin:240px 240px;animation:geCorePulseKF 2.2s ease-in-out infinite}
#geLabel0dot{transform-box:fill-box;transform-origin:center;animation:geDotPulseKF 3s ease-in-out 0s    infinite}
#geLabel1dot{transform-box:fill-box;transform-origin:center;animation:geDotPulseKF 3s ease-in-out .5s   infinite}
#geLabel2dot{transform-box:fill-box;transform-origin:center;animation:geDotPulseKF 3s ease-in-out 1s    infinite}
#geLabel3dot{transform-box:fill-box;transform-origin:center;animation:geDotPulseKF 3s ease-in-out 1.5s  infinite}
#geLabel4dot{transform-box:fill-box;transform-origin:center;animation:geDotPulseKF 3s ease-in-out 2s    infinite}
#geLabel5dot{transform-box:fill-box;transform-origin:center;animation:geDotPulseKF 3s ease-in-out 2.5s  infinite}

/* ── Reduced motion: freeze everything ── */
@media(prefers-reduced-motion:reduce){
  #geRing4,#geRing3,#geRing2,#geRing1,#geCorePulse,
  #geLabel0dot,#geLabel1dot,#geLabel2dot,#geLabel3dot,#geLabel4dot,#geLabel5dot{animation:none!important}
  .ge-node,.ge-out-node{opacity:1!important;transform:none!important}
  .ge-node-dot,.ge-out-check{opacity:1!important}
}

/* ── Responsive ── */
@media(max-width:1024px){
  .ge-canvas{grid-template-columns:24% 1fr 24%}
  .ge-node,.ge-out-node{width:148px}
}
@media(max-width:820px){
  .ge-canvas{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:40px;min-height:auto}
  .ge-inputs,.ge-outputs{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;padding:0}
  .ge-node,.ge-out-node{width:144px}
  .ge-engine-wrap{order:-1}
  .ge-engine-svg{max-width:320px}
  .ge-section{padding:36px 24px 40px}
  .ge-tooltip{display:none}
}
@media(max-width:560px){
  .ge-inputs,.ge-outputs{gap:8px}
  .ge-node,.ge-out-node{width:calc(50% - 4px);font-size:11px}
  .ge-engine-svg{max-width:260px}
  .ge-section{padding:28px 16px 32px}
  .ge-heading{font-size:28px}
}



/* ── Block 5 ── */

/* ── Section shell (keep existing header styles) ── */
.pf-section{background:#EEF3FA;padding:66px 48px 70px;font-family:'Geist',Inter,ui-sans-serif,sans-serif}
.pf-container{max-width:1280px;margin:0 auto}
.pf-header{text-align:center;margin-bottom:56px}
.pf-eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#0055FF;margin-bottom:18px;line-height:1.2}
.pf-h1{font-size:clamp(38px,5vw,60px);font-weight:800;color:#0A0A0F;letter-spacing:-.038em;line-height:1.04;margin-bottom:0;max-width:720px;margin-left:auto;margin-right:auto;text-wrap:balance}
.pf-sub{font-size:18px;color:#64748B;max-width:620px;margin:22px auto 0;line-height:1.65}

/* ── Carousel shell ── */
.cs-shell{background:#fff;border:1px solid rgba(20,30,60,.08);border-radius:30px;box-shadow:0 4px 24px rgba(20,30,60,.06),0 1px 3px rgba(20,30,60,.04);overflow:hidden}

/* ── Stage: browser left + details right ── */
.cs-stage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(400px,.9fr);gap:32px;padding:28px 28px 28px 28px;align-items:stretch}

/* ── Browser mock ── */
.cs-browser{background:#fff;border:1px solid #DCE5F2;border-radius:14px;overflow:hidden;box-shadow:0 4px 16px rgba(15,23,42,.06);display:flex;flex-direction:column}
.cs-browser-bar{height:38px;background:#F8FAFB;border-bottom:1px solid #DCE5F2;display:flex;align-items:center;gap:7px;padding:0 14px;flex-shrink:0}
.cs-browser-bar .cs-dot{width:10px;height:10px;border-radius:50%}
.cs-browser-bar .cs-dot:nth-child(1){background:#ff5f57}
.cs-browser-bar .cs-dot:nth-child(2){background:#febc2e}
.cs-browser-bar .cs-dot:nth-child(3){background:#28c840}
.cs-address{margin-left:8px;height:24px;flex:1;border-radius:6px;background:#fff;border:1px solid #DCE5F2;color:#94A3B8;display:flex;align-items:center;padding:0 10px;font-size:11px;font-family:inherit}
.cs-screen{display:block;width:100%;flex:1;object-fit:cover;object-position:top left;background:#D6E4FF;min-height:0}

/* ── Details panel ── */
.cs-details{padding:28px 12px 8px;min-width:0;display:flex;flex-direction:column;justify-content:center}
.cs-counter{display:flex;align-items:center;gap:14px;color:#94A3B8;font-size:14px;font-weight:700;margin:0 0 24px}
.cs-counter::before,.cs-counter::after{content:'';height:1px;background:#DCE5F2;flex:1}
.cs-counter strong{color:#165DFF}

.cs-tag{color:#165DFF;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:10px;text-align:center}
.cs-title{margin:0 0 24px;font-size:46px;font-weight:800;color:#0F172A;letter-spacing:-.04em;line-height:1;text-align:center}
.cs-location{display:none}
.cs-summary{color:#667085;font-size:17px;line-height:1.65;margin:0 0 28px}

/* ── Metrics grid ── */
.cs-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.cs-metric{background:#d2ffda;border:1px solid #a8f0b8;border-radius:12px;padding:10px 8px;text-align:center}
.cs-metric-icon{width:36px;height:36px;display:grid;place-items:center;color:#15803D;margin:0 auto 8px;font-size:24px;font-weight:900}
.cs-metrics .cs-metric:nth-child(1) .cs-metric-icon{color:#2563EB}
.cs-metrics .cs-metric:nth-child(2) .cs-metric-icon{color:#D97706}
.cs-metrics .cs-metric:nth-child(3) .cs-metric-icon{color:#7C3AED}
.cs-metric strong{display:block;color:#14532D;font-size:32px;font-weight:800;letter-spacing:-.04em;line-height:1}
.cs-metric-label{display:block;font-size:13px;font-weight:700;margin-top:5px;color:#14532D}
.cs-metric-sub{display:block;color:#166534;font-size:11.5px;margin-top:2px}

/* ── Services chips ── */
.cs-services{border-top:1px solid #DCE5F2;padding-top:24px;text-align:center}
.cs-services-title{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#94A3B8;margin-bottom:10px}
.cs-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.cs-chip{background:#fff;border:1px solid #DFE7F2;color:#475467;border-radius:6px;padding:0 14px;height:34px;display:inline-flex;align-items:center;font-size:12px;font-weight:600}

/* ── CTA ── */
.cs-cta-wrap{display:flex;justify-content:center;margin-top:24px}
.cs-cta{display:inline-flex;min-width:240px;justify-content:center;align-items:center;background:#0055FF;color:#fff;text-decoration:none;font-weight:700;font-size:20px;padding:13px 36px;border-radius:10px;transition:background .15s,transform .15s,box-shadow .15s;font-family:inherit}
.cs-cta:hover{background:#0044DD;transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,23,42,.22)}

/* ── Bottom nav ── */
.cs-nav{border-top:1px solid #DCE5F2;background:#fff;padding:12px 16px 8px}
.cs-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cs-tab{appearance:none;border:1px solid transparent;background:transparent;text-align:center;padding:8px 10px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:0;position:relative;color:inherit;font-family:inherit;transition:background .18s,box-shadow .18s,border-color .18s;border-radius:14px}
.cs-tab-num{font-size:11px;font-weight:700;color:#CBD5E1;letter-spacing:.1em;margin-bottom:4px;font-variant-numeric:tabular-nums}
.cs-tab b{font-size:13px;font-weight:600;color:#64748B;display:block;line-height:1.3}
.cs-tab small{display:block;color:#94A3B8;margin-top:4px;font-size:11px}
.cs-tab.active{background:#fff;border-color:rgba(22,93,255,.14);border-radius:16px;box-shadow:0 4px 20px rgba(20,30,60,.12)}
.cs-tab.active .cs-tab-num{color:#165DFF;font-size:11px;letter-spacing:.12em}
.cs-tab.active b{color:#0F172A;font-weight:700}
.cs-tab:hover:not(.active){background:rgba(22,93,255,.04);border-color:rgba(22,93,255,.08)}

/* ── Carousel controls ── */
.cs-controls{display:flex;justify-content:center;align-items:center;gap:40px;margin-top:10px;padding:8px 0 10px}
.cs-arrow{width:54px;height:54px;border-radius:50%;border:1.5px solid #DCE5F2;background:#fff;cursor:pointer;display:grid;place-items:center;transition:all .2s;font-family:inherit;box-shadow:0 2px 8px rgba(20,30,60,.08)}
.cs-arrow svg{width:40px;height:40px;stroke:#0F172A;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;fill:none;transition:stroke .2s}
.cs-arrow:hover{border-color:#0F172A;background:#0F172A;box-shadow:0 8px 20px rgba(15,23,42,.22);transform:scale(1.06)}
.cs-arrow:hover svg{stroke:#fff}
.cs-dots{display:flex;gap:10px;align-items:center}
.cs-dots button{width:10px;height:10px;border-radius:50%;border:0;background:#CBD5E1;padding:0;cursor:pointer;transition:background .2s,transform .2s}
.cs-dots button.active{background:#165DFF;transform:scale(1.4)}

/* ── Fade animation ── */
.cs-fade{animation:csFade .3s ease both}
@keyframes csFade{from{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Responsive ── */
@media(max-width:1100px){
  .cs-stage{grid-template-columns:1fr}
  .cs-details{padding:0 4px 6px}
}
@media(max-width:768px){
  .pf-section{padding:44px 20px 52px}
  .cs-stage{padding:14px;gap:16px}
  .cs-title{font-size:32px}
  .cs-metrics{grid-template-columns:1fr}
  .cs-tabs{grid-template-columns:1fr 1fr}
  .cs-tab{border-bottom:1px solid #dfe5ef}
  .cs-tab.active::after{bottom:0}
}
@media(max-width:480px){
  .pf-h1{font-size:clamp(30px,7vw,40px)}
  .cs-title{font-size:28px}
}



/* ── Block 6 ── */

.rv-section{background:#F1F1F4;padding:58px 48px 62px;font-family:'Geist',Inter,ui-sans-serif,sans-serif}
.rv-container{max-width:1240px;margin:0 auto}
.rv-header{text-align:center;margin-bottom:72px}
.rv-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#64748B;margin-bottom:18px;line-height:1.2}
.rv-eyebrow svg{width:16px;height:16px}
.rv-h1{font-size:clamp(38px,5vw,60px);font-weight:800;color:#0A0A0F;letter-spacing:-.038em;line-height:1.04;margin-bottom:0;text-wrap:balance;max-width:720px;margin-inline:auto}
.rv-sub{font-size:18px;color:#64748B;line-height:1.65;max-width:620px;margin:22px auto 0}
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rv-card{background:#fff;border-radius:18px;border:1px solid rgba(0,0,0,.07);box-shadow:0 1px 3px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05);padding:28px 28px 24px;display:flex;flex-direction:column;gap:16px;transition:box-shadow .22s,transform .22s}
.rv-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.1);transform:translateY(-2px)}
.rv-top{display:flex;align-items:center;gap:12px}
.rv-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;color:#fff;flex-shrink:0;letter-spacing:0}
.rv-meta{flex:1;min-width:0}
.rv-name{font-size:14px;font-weight:700;color:#0A0A0F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-via{font-size:11.5px;color:#94A3B8;margin-top:1px}
.rv-google{margin-left:auto;flex-shrink:0}
.rv-stars{display:flex;gap:2px}
.rv-stars span{font-size:16px;line-height:1;color:#FBBC04}
.rv-text{font-size:14.5px;color:#475569;line-height:1.65;flex:1}
.rv-date{font-size:12px;color:#CBD5E1;margin-top:4px}
@media(max-width:900px){.rv-grid{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.rv-grid{grid-template-columns:1fr}.rv-section{padding:36px 20px 40px}.rv-h1{font-size:clamp(28px,6vw,36px)}}



/* ── Block 7 ── */

.perf-section-wrap { background: #f1f1f4; position: relative; z-index: 1; padding: 50px 40px 58px; background: #f1f1f4; font-family: 'Geist', Inter, ui-sans-serif, system-ui, sans-serif; }
.perf-inner { max-width: 1200px; margin: 0 auto; }
.perf-section-header { text-align: center; max-width: 820px; margin: 0 auto 72px; }
.perf-kpi-eyebrow { display: none; }
.perf-kpi-headline {
  font-size: clamp(38px,5vw,60px); font-weight: 800; line-height: 1.04; letter-spacing: -0.038em;
  background: linear-gradient(90deg,
    #0055FF 0%, #0055FF 36%,
    #5588ff 41%, #99bbff 45%, #ddeeff 48%, #ffffff 50%,
    #ddeeff 52%, #99bbff 55%, #5588ff 59%,
    #0055FF 64%, #0055FF 100%);
  background-size: 400% 100%;
  background-position: 100% center;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 28px rgba(0,85,255,0.30)) drop-shadow(0 0 64px rgba(0,85,255,0.15));
  animation: glintPass 3.6s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes glintPass {
  0%   { background-position: 100% center; }
  26%  { background-position: 0%   center; }
  100% { background-position: 0%   center; }
}

/* ─── Ads Dashboard ─── */
.ads-dash {
  --card: #fff;
  --ink: #0e1320;
  --muted: #8d95a5;
  --line: #e7ebf2;
  --green: #20bf74;
  --purple: #7a49e8;
  --pink: #ff3d6e;
  --orange: #ff9d13;
  --blue: #1f9fe8;
  --shadow: 0 10px 26px rgba(38,50,74,.08);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 22px;
  align-items: start;
  box-sizing: border-box;
}
.ads-dash * { box-sizing: border-box; }
.ads-dash .col { display: flex; flex-direction: column; gap: 22px; }
.ads-dash .card { background: var(--card); border-radius: 20px; box-shadow: var(--shadow); border: 1px solid rgba(231,235,242,.95); padding: 24px; }
.ads-dash .card h3 { margin: 0; font-size: 17px; line-height: 1.2; letter-spacing: -.02em; font-family: 'Geist', Inter, ui-sans-serif, system-ui, sans-serif; }
.ads-dash .card .sub { margin-top: 7px; color: var(--muted); font-size: 12px; }
.ads-dash .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ads-dash .btn { border: 1px solid #d8dde7; background: #fff; border-radius: 6px; padding: 7px 11px; font-size: 11px; font-weight: 700; color: #242a35; cursor: pointer; white-space: nowrap; font-family: 'Geist', Inter, ui-sans-serif, system-ui, sans-serif; }
.ads-dash .big { margin-top: 20px; font-size: 28px; letter-spacing: 0.04em; font-weight: 500; }
.ads-dash .gain { margin-top: 3px; color: var(--green); font-size: 11px; font-weight: 700; }
.ads-dash .chart-area { margin-top: 16px; border-top: 1px dashed #d8dde6; padding-top: 10px; }
.ads-dash .legend { display: flex; gap: 18px; margin-top: 12px; color: #70798a; font-size: 11px; }
.ads-dash .legend span { display: flex; align-items: center; gap: 7px; }
.ads-dash .legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.ads-dash svg { display: block; width: 100%; height: auto; }
.ads-dash .bar-chart { height: 126px; }
.ads-dash .bar-grid line { stroke: #eef1f5; stroke-width: 1; }
.ads-dash .axis-label { fill: #b2b8c2; font-size: 8px; }
.ads-dash .bar-green  { fill: var(--green); }
.ads-dash .bar-purple { fill: var(--purple); }
.ads-dash .bar-pink   { fill: var(--pink); }
.ads-dash .bar-orange { fill: var(--orange); }
.ads-dash .progress { margin-top: 20px; display: flex; gap: 6px; }
.ads-dash .progress span { height: 6px; border-radius: 999px; background: #f5e7cc; flex: 1; }
.ads-dash .progress span.on { background: var(--orange); }
.ads-dash .transactions { padding: 0; overflow: hidden; }
.ads-dash .tx-row { padding: 13px 20px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.ads-dash .tx-row + .tx-row { border-top: 1px solid #edf0f4; }
.ads-dash .tx-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: white; font-size: 16px; flex-shrink: 0; }
.ads-dash .tx-icon.google { background: #fff; border: 1.5px solid #e5e9f0; font-size: 0; }
.ads-dash .tx-icon.youtube { background: #1877F2; }
.ads-dash .tx-title { font-size: 14px; font-weight: 700; }
.ads-dash .tx-date  { font-size: 11px; color: var(--muted); margin-top: 3px; }
.ads-dash .tx-price { font-size: 13px; font-weight: 700; }
.ads-dash .bubble-wrap { height: 185px; position: relative; margin-top: 12px; }
.ads-dash .bubble { position: absolute; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
.ads-dash .b1 { width: 132px; height: 132px; left: 10px; top: 14px; background: #eee6ff; color: #6234d6; font-size: 40px; }
.ads-dash .b2 { width: 94px;  height: 94px;  right: 32px; top: 14px;  background: #def6ec; color: #00a96b; font-size: 26px; }
.ads-dash .b3 { width: 82px;  height: 82px;  right: 48px; bottom: 0;  background: #ffe5ea; color: #ef3f69; font-size: 22px; }
.ads-dash .b4 { width: 48px;  height: 48px;  right: 0;    bottom: 24px; background: #fff0dc; color: #f29b14; font-size: 14px; }
.ads-dash .categories { display: grid; grid-template-columns: max-content max-content; gap: 14px 72px; margin-top: 8px; justify-content: center; }
.ads-dash .cat { font-size: 12px; color: #626b7b; }
.ads-dash .cat .label { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 7px; }
.ads-dash .cat .dot { width: 8px; height: 8px; border-radius: 50%; }
.ads-dash .stack { height: 156px; margin-top: 14px; }
.ads-dash .top-mini { padding: 0; overflow: hidden; }
.ads-dash .top-mini .tx-row { padding: 16px 18px; }
.ads-dash .goal { min-height: 238px; }
.ads-dash .gauge-wrap { position: relative; margin-top: 26px; height: 170px; }
.ads-dash .gauge { width: 100%; height: 100%; overflow: visible; }
.ads-dash .gauge-bg { fill: none; stroke: #e6f7ef; stroke-width: 14; stroke-linecap: round; }
.ads-dash .gauge-fg { fill: none; stroke: var(--green); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 415; stroke-dashoffset: 51; }
.ads-dash .gauge-ring { fill: rgba(32,191,116,.12); stroke: rgba(32,191,116,.35); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: gaugeRingPulse 2.2s ease-in-out infinite; pointer-events: none; }
@keyframes gaugeRingPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.7);opacity:0} }
.ads-dash .gauge-dot { fill: white; stroke: var(--green); stroke-width: 3; cursor: grab; filter: drop-shadow(0 2px 8px rgba(32,191,116,.45)); }
.ads-dash .gauge-dot:active { cursor: grabbing; }
.ads-dash .gauge-hit { fill: none; stroke: transparent; stroke-width: 32; cursor: pointer; }
.ads-dash .gauge-value { position: absolute; left: 0; right: 0; top: 76px; text-align: center; }
.ads-dash .gauge-value b { display: block; font-size: 24px; font-weight: 500; }
.ads-dash .gauge-value span { font-size: 12px; color: #999; }
.ads-dash .goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ads-dash .goal-card { padding: 18px 16px; min-height: 128px; }
.ads-dash .round-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 12px; font-weight: 900; font-size: 20px; }
.ads-dash .ri1 { background: #ddd0ff; color: #6d28d9; }
.ads-dash .ri2 { background: #fde68a; color: #b45309; }
.ads-dash .ri3 { background: #fecaca; color: #dc2626; }
.ads-dash .ri4 { background: #bfdbfe; color: #1d4ed8; }
.ads-dash .goal-title { font-size: 15px; font-weight: 700; }
.ads-dash .goal-small { font-size: 10px; color: #a1a8b5; margin-top: 6px; }
.ads-dash .mini-progress { height: 5px; background: #f0eef4; border-radius: 999px; margin-top: 14px; overflow: hidden; }
.ads-dash .mini-progress i { display: block; height: 100%; border-radius: 999px; }

/* Entrance animation — uses `translate` so `transform` stays free for parallax */
.ads-dash .card { opacity: 0; translate: 0 16px; transition: transform 0.2s ease-out; will-change: transform; }
.ads-dash .card.vis { animation: adsDashIn 0.55s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes adsDashIn { to { opacity: 1; translate: 0 0; } }

@media (max-width: 1100px) {
  .ads-dash { grid-template-columns: 1fr 1fr; }
  .ads-dash .col:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .perf-section-wrap { padding: 28px 20px 32px; }
  .perf-kpi-headline { font-size: clamp(28px,6vw,36px); }
  .ads-dash { grid-template-columns: 1fr; }
  .ads-dash .col:last-child { grid-column: auto; display: flex; }
}



/* ── Block 8 ── */

.ab-section {
  background: #F1F1F4;
  padding: 48px 48px;
  font-family: 'Inter', sans-serif;
}
.ab-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.ab-title {
  font-size: 44px;
  font-weight: 800;
  color: #0D0D14;
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin-bottom: 16px;
}
.ab-sub {
  font-size: 16px;
  color: #6B6B78;
  line-height: 1.7;
}

/* GRID */
.ab-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}
.ab-card {
  border-radius: 20px;
  padding: 36px;
  position: relative;
  overflow: hidden;
}

/* BIG */
.ab-card--big {
  grid-column: span 2;
  grid-row: span 2;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 380px;
}
.ab-star {
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 260px;
  fill: #F0F0F8;
  transition: transform 1.8s ease;
}
.ab-card--big:hover .ab-star {
  transform: rotate(180deg);
}
.ab-big-top { position: relative; z-index: 1; }
.ab-badge {
  display: inline-block;
  background: #5900ff;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 99px;
  margin-bottom: 20px;
}
.ab-big-title {
  font-family: 'Outfit', sans-serif;
  font-size: 46px;
  font-weight: 900;
  color: #0D0D14;
  letter-spacing: -2px;
  line-height: 1.0;
  margin: 0;
}
.ab-big-desc {
  position: relative;
  z-index: 1;
  font-size: 15px;
  color: #7A7A8A;
  line-height: 1.65;
  max-width: 300px;
  margin: 0;
}

/* GREEN */
.ab-card--green {
  background: #22C55E;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}
.ab-card-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.8;
}
.ab-stat-wrap { display: flex; flex-direction: column; gap: 10px; }
.ab-stat-num {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
}
.ab-bar-track {
  height: 6px;
  background: rgba(255,255,255,0.25);
  border-radius: 99px;
  overflow: hidden;
}
.ab-bar-fill {
  height: 100%;
  width: 82%;
  background: #fff;
  border-radius: 99px;
  box-shadow: 0 0 12px rgba(255,255,255,0.7);
}

/* DARK */
.ab-card--dark {
  background: #0D0D14;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.ab-icon-dot {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #5900ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-icon-dot::after {
  content: '';
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  display: block;
}
.ab-sys-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
}
.ab-sys-sub {
  font-size: 9px;
  color: #555566;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

/* VIOLET CTA */
.ab-card--violet {
  grid-column: span 2;
  background: #5900ff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.3s;
}
.ab-card--violet:hover { background: #4400cc; }
.ab-cta-title {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.8px;
  line-height: 1.15;
  margin: 0 0 6px;
}
.ab-cta-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  margin: 0;
}
.ab-cta-arrow {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  color: #5900ff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  transition: transform 0.25s;
}
.ab-card--violet:hover .ab-cta-arrow { transform: translateX(4px); }

/* ANIMATION */
.ab-anim {
  opacity: 0;
  filter: blur(16px);
  transform: translateY(10px);
  transition: opacity 0.55s ease, filter 0.55s ease, transform 0.55s ease;
}
.ab-anim.ab-vis {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}

@media (max-width: 768px) {
  .ab-grid { grid-template-columns: 1fr; }
  .ab-card--big, .ab-card--violet { grid-column: span 1; grid-row: span 1; }
  .ab-section { padding: 30px 20px; }
  .ab-title { font-size: 32px; }
}



/* ── Block 9 ── */

.rpt-overlay { position:fixed; inset:0; background:rgba(14,19,32,.52); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .28s; z-index:9000; }
.rpt-overlay.open { opacity:1; pointer-events:all; }
.rpt-drawer { position:fixed; top:50%; left:50%; width:min(780px,94vw); max-height:88vh; background:#0d1117; border-radius:20px; box-shadow:0 32px 80px rgba(0,0,0,.55),0 4px 20px rgba(0,0,0,.35); transform:translate(-50%,-48%) scale(.96); opacity:0; transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .25s; z-index:9001; display:flex; flex-direction:column; font-family:'Geist',Inter,ui-sans-serif,system-ui,sans-serif; pointer-events:none; }
.rpt-drawer.open { transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:all; }
.rpt-head { padding:22px 28px 18px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:flex-start; justify-content:space-between; flex-shrink:0; }
.rpt-head-title { font-size:18px; font-weight:700; color:#f1f5f9; letter-spacing:-.02em; margin-bottom:3px; }
.rpt-head-sub   { font-size:12px; color:#64748b; }
.rpt-close { background:none; border:1px solid rgba(255,255,255,.12); border-radius:8px; width:34px; height:34px; display:grid; place-items:center; cursor:pointer; color:#94a3b8; font-size:16px; flex-shrink:0; transition:background .15s; }
.rpt-close:hover { background:rgba(255,255,255,.08); }
.rpt-body { padding:22px 28px 28px; overflow-y:auto; flex:1; }

/* KPI strip */
.rpt-kpis { display:flex; gap:12px; margin-bottom:20px; }
.rpt-kpi { flex:1; padding:16px 18px; background:#F8FAFB; border:1px solid #eef1f6; border-radius:14px; }
.rpt-kpi-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#8d95a5; margin-bottom:6px; }
.rpt-kpi-val   { font-size:26px; font-weight:800; color:#0e1320; letter-spacing:-.04em; line-height:1; margin-bottom:4px; }
.rpt-kpi-chg   { font-size:11px; font-weight:600; }
.rpt-up   { color:#20bf74; }
.rpt-down { color:#f43f5e; }

/* Chart area */
.rpt-chart-wrap { background:#F8FAFB; border:1px solid #eef1f6; border-radius:14px; padding:18px 18px 10px; margin-bottom:18px; }
.rpt-chart-label { font-size:11px; font-weight:700; color:#8d95a5; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; }
.rpt-svg { width:100%; height:auto; display:block; }

/* Table */
.rpt-table { width:100%; border-collapse:collapse; font-size:13px; }
.rpt-table th { text-align:left; padding:8px 12px; font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#475569; border-bottom:1px solid rgba(255,255,255,.08); }
.rpt-table td { padding:12px 12px; color:#cbd5e1; border-bottom:1px solid rgba(255,255,255,.06); }
.rpt-table tr:last-child td { border-bottom:none; }
.rpt-table td:first-child { color:#94a3b8; }
.rpt-table td:last-child { text-align:right; font-weight:600; }
.rpt-pill { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; padding:5px 12px; border-radius:20px; }
.rpt-pill.up   { background:rgba(34,197,94,.18); color:#4ade80; border:1px solid rgba(34,197,94,.25); }
.rpt-pill.down { background:rgba(239,68,68,.15); color:#f87171; border:1px solid rgba(239,68,68,.2); }
/* Project report — Google Ads dark style */
.rpt-kpis-c { display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:0; overflow:hidden; border-radius:14px 14px 0 0; }
.rpt-kpis-c .rpt-kpi { padding:16px 20px; border:0; border-left:1px solid rgba(255,255,255,.12); }
.rpt-kpis-c .rpt-kpi:first-child { border-left:0; }
.rpt-kpis-c .rpt-kpi:nth-child(1) { background:#1a3a68; }
.rpt-kpis-c .rpt-kpi:nth-child(2) { background:#6b2020; }
.rpt-kpis-c .rpt-kpi:nth-child(3) { background:#6b4e10; }
.rpt-kpis-c .rpt-kpi:nth-child(4) { background:#14522a; }
.rpt-kpis-c .rpt-kpi-label { color:rgba(255,255,255,.52); }
.rpt-kpis-c .rpt-kpi-val   { color:#fff; font-size:26px; }
.rpt-kpis-c .rpt-kpi-chg   { color:rgba(255,255,255,.70); }
.rpt-dark { background:#111827 !important; border:0 !important; border-radius:0 0 14px 14px !important; padding:14px 16px 12px !important; }
.rpt-dark .rpt-chart-label { color:#4b5563 !important; }



/* ── Block 10 ── */

.wcu-section{background:#F1F1F4;padding:58px 48px 62px;font-family:'Geist',Inter,ui-sans-serif,sans-serif}
.wcu-container{max-width:1100px;margin:0 auto}
.wcu-header{text-align:center;max-width:820px;margin:0 auto 72px}
.wcu-title{font-size:clamp(38px,5vw,60px);font-weight:800;color:#0A0A0F;letter-spacing:-.038em;line-height:1.04;margin-bottom:0;text-wrap:balance;max-width:720px;margin-inline:auto}
.wcu-sub{font-size:18px;color:#64748B;line-height:1.65;max-width:620px;margin:22px auto 0}

/* ── Bento grid ── */
.wcu-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;gap:18px}

/* Big 2×2 white card */
.wcu-big{grid-column:span 2;grid-row:span 2;background:#fff;border-radius:20px;border:1px solid rgba(0,0,0,.07);padding:36px;display:flex;flex-direction:column;justify-content:space-between;min-height:380px;position:relative;overflow:hidden}
.wcu-big-bg{position:absolute;bottom:-40px;right:-40px;width:220px;height:220px;border-radius:50%;background:linear-gradient(135deg,rgba(0,85,255,.07),rgba(89,0,255,.07));pointer-events:none}
.wcu-badge{display:inline-block;background:#5900ff;color:#fff;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:5px 14px;border-radius:99px;margin-bottom:20px}
.wcu-big-title{font-size:44px;font-weight:900;color:#0D0D14;letter-spacing:-2px;line-height:1;margin:0 0 24px}
.wcu-checks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.wcu-checks li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#374151;line-height:1.45}
.wcu-checks li::before{content:'✓';width:20px;height:20px;border-radius:50%;background:#0055FF;color:#fff;font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}

/* Green stat card */
.wcu-green{background:#22C55E;color:#fff;border-radius:20px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.wcu-card-lbl{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;opacity:.8}
.wcu-stat{font-size:52px;font-weight:900;letter-spacing:-2px;line-height:1}
.wcu-stat-bar{height:5px;background:rgba(255,255,255,.25);border-radius:99px;overflow:hidden}
.wcu-stat-bar-fill{height:100%;width:78%;background:#fff;border-radius:99px}
.wcu-stat-sub{font-size:12px;font-weight:700;opacity:.85}

/* Dark card */
.wcu-dark{background:#0D0D14;color:#fff;border-radius:20px;padding:28px;display:flex;flex-direction:column;justify-content:space-between}
.wcu-dark-dot{width:36px;height:36px;border-radius:10px;background:#5900ff;margin-bottom:auto}
.wcu-dark-title{font-size:22px;font-weight:800;line-height:1.2;margin-top:28px}
.wcu-dark-sub{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6B7280;margin-top:6px}

/* Blue card */
.wcu-blue{background:#0055FF;color:#fff;border-radius:20px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:10px}

/* Violet CTA card */
.wcu-violet{background:#5900FF;color:#fff;border-radius:20px;padding:28px;display:flex;align-items:flex-end;justify-content:space-between;cursor:pointer;transition:background .2s;text-decoration:none}
.wcu-violet:hover{background:#4700d4}
.wcu-violet-title{font-size:28px;font-weight:900;line-height:1.15;letter-spacing:-.03em;text-transform:uppercase}
.wcu-violet-sub{font-size:12px;opacity:.75;margin-top:4px}
.wcu-arrow{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}

/* ── Feature strip (bottom 4 cards) ── */
.wcu-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px}
.wcu-feat{background:#fff;border-radius:20px;border:1px solid rgba(0,0,0,.07);padding:28px}
.wcu-feat-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:22px}
.wcu-feat-title{font-size:15px;font-weight:800;color:#0D0D14;margin-bottom:6px;letter-spacing:-.02em}
.wcu-feat-text{font-size:13px;color:#6B7280;line-height:1.6}

@media(max-width:900px){
  .wcu-bento{grid-template-columns:1fr 1fr}
  .wcu-big{grid-column:span 2}
  .wcu-strip{grid-template-columns:1fr 1fr}
  .wcu-section{padding:36px 24px 40px}
}
@media(max-width:560px){
  .wcu-bento{grid-template-columns:1fr}
  .wcu-big{grid-column:span 1;grid-row:span 1}
  .wcu-strip{grid-template-columns:1fr}
  .wcu-title{font-size:clamp(28px,6vw,36px)}
}



/* ── Block 11 ── */

.ft{background:#0A0A0F;padding:44px 0 0;font-family:'Geist',Inter,ui-sans-serif,sans-serif;border-top:1px solid rgba(255,255,255,.06)}
.ft-inner{max-width:1160px;margin:0 auto;padding:0 48px}
.ft-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:48px;padding-bottom:80px}

/* Brand col */
.ft-logo{font-size:22px;font-weight:900;color:#fff;letter-spacing:-.03em;text-decoration:none;display:inline-block;margin-bottom:18px}
.ft-logo span{color:#0055FF}
.ft-tagline{font-size:14px;color:rgba(255,255,255,.38);line-height:1.7;max-width:260px;margin-bottom:28px}
.ft-social{display:flex;gap:10px}
.ft-social-link{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.ft-social-link:hover{background:rgba(0,85,255,.2);border-color:rgba(0,85,255,.4)}
.ft-social-link svg{width:17px;height:17px}

/* Column headings */
.ft-col-title{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.28);margin-bottom:20px}

/* Links */
.ft-links{display:flex;flex-direction:column;gap:11px}
.ft-link{font-size:14.5px;color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s;line-height:1}
.ft-link:hover{color:#fff}

/* Contact items */
.ft-contact-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.ft-contact-icon{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.ft-contact-icon svg{width:15px;height:15px}
.ft-contact-label{font-size:11px;color:rgba(255,255,255,.28);letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.ft-contact-val{font-size:14px;color:rgba(255,255,255,.7);font-weight:500}

/* Badge */
.ft-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.22);border-radius:99px;padding:5px 12px;font-size:11px;font-weight:600;color:#22C55E;margin-top:24px}
.ft-badge-dot{width:6px;height:6px;border-radius:50%;background:#22C55E;animation:blink 2s ease-in-out infinite}

/* Divider + bottom bar */
.ft-bottom{border-top:1px solid rgba(255,255,255,.07);padding:24px 0 32px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.ft-copy{font-size:13px;color:rgba(255,255,255,.22)}
.ft-legal{display:flex;gap:24px}
.ft-legal a{font-size:13px;color:rgba(255,255,255,.25);text-decoration:none;transition:color .2s}
.ft-legal a:hover{color:rgba(255,255,255,.6)}

@media(max-width:900px){.ft-grid{grid-template-columns:1fr 1fr;gap:40px}.ft-inner{padding:0 28px}}
@media(max-width:560px){.ft-grid{grid-template-columns:1fr}.ft-inner{padding:0 20px}}


/* ── Services dropdown (nav) ── */
.nh-dd { position: relative; display: inline-flex; }
.nh-dd-btn { display: inline-flex; align-items: center; gap: 7px; }
.nh-dd-btn svg { transition: transform 0.2s; }
.nh-dd:hover .nh-dd-btn svg, .nh-dd:focus-within .nh-dd-btn svg { transform: rotate(180deg); }
.nh-dd-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); padding-top: 30px; opacity: 0; visibility: hidden; transition: opacity 0.18s, transform 0.18s, visibility 0.18s; z-index: 300; }
.nh-dd:hover .nh-dd-menu, .nh-dd:focus-within .nh-dd-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nh-dd-menu-in { background: #fff; border-radius: 20px; box-shadow: 0 18px 50px rgba(15,23,42,0.20); padding: 8px; min-width: 320px; display: flex; flex-direction: column; }
.nh-dd-menu-in a { display: block; padding: 12px 16px; border-radius: 13px; color: #0f172a; text-decoration: none; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.nh-dd-menu-in a small { display: block; margin-top: 2px; color: #64748b; font-size: 13px; font-weight: 400; letter-spacing: 0; }
.nh-dd-menu-in a:hover { background: #eff4ff; color: #0055FF; }

/* mobile overlay: services group */
.nmo-label { margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: rgba(255,255,255,0.45); }
.nmo-sub { font-size: 19px !important; padding: 6px 24px !important; text-align: center; }

/* service pages: 3-column plans */
.pr-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); margin-bottom: 28px; }
a.pr-btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; text-decoration: none; }
.pr-note { max-width: 760px; margin: 0 auto; text-align: center; font-size: 14px; line-height: 1.6; color: #64748b; }
.pr-period { white-space: nowrap; }
@media (max-width: 900px) { .pr-grid--3 { grid-template-columns: 1fr; } }

/* ── Home services cards: brighter, with prices, AI card ── */
.sv-card::before { height: 5px; }
.sv-card--g { background: linear-gradient(180deg, #e9f1ff 0, #fff 40%); }
.sv-card--m { background: linear-gradient(180deg, #efeeff 0, #fff 40%); }
.sv-card--s { background: linear-gradient(180deg, #e5f9ef 0, #fff 40%); }
.sv-card--a { background: linear-gradient(180deg, #f1eaff 0, #fff 40%); }
.sv-card--a::before { background: linear-gradient(90deg, #8B5CF6, #3B82F6, #10B981); }
.sv-card--a .sv-ul li::before { background: #8B5CF6; }
.sv-cta { background: #0055FF; color: #fff; border-color: #0055FF; box-shadow: 0 4px 14px rgba(0,85,255,0.25); }
.sv-cta:hover { background: #0044DD; border-color: #0044DD; color: #fff; }
.sv-cta b { font-weight: 800; }
.sv-ai { display: flex; flex-wrap: nowrap; gap: 8px; align-items: flex-start; }
.sv-ai-i { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.sv-ai-i svg { display: block; }
.sv-ai-i em { font-style: normal; font-size: 10.5px; font-weight: 600; color: #475569; letter-spacing: 0; }
.sv-top-price { font-size: 15px; color: #475569; margin-bottom: 14px; }
.sv-top-price b { font-size: 22px; font-weight: 800; color: #0A0A0F; letter-spacing: -0.02em; }

/* ── nav: language switch (inactive) next to Login ── */
.nh-actions { position: absolute; right: 0; top: 48px; display: flex; align-items: center; gap: 10px; }
.nh-actions .nh-cta-nav { position: static; top: auto; right: auto; }
.nh-lang { font-family: inherit; font-size: 17px; font-weight: 700; letter-spacing: 0.02em; color: #0055FF; background: rgba(0,85,255,0.07); border: 1.5px solid rgba(0,85,255,0.30); padding: 11px 16px; border-radius: 12px; opacity: 0.5; cursor: not-allowed; }
@media (max-width: 768px) { .nh-actions { display: none; } }

/* ── mobile fixes: website banner on the home page ── */
@media (max-width: 1024px) {
  .sv-top { grid-template-columns: 1fr; padding: 32px 20px; }
  .sv-top-svg-l, .sv-top-svg-r { display: none; }
  .sv-top-mid { padding: 0; }
}
@media (max-width: 600px) {
  .sv-top-name { font-size: 22px; }
  .sv-top-cols { grid-template-columns: 1fr; }
  .sv-top-cta { width: 100%; justify-content: center; box-sizing: border-box; }
}

/* service pages: use the site fonts instead of the browser fallback */
.pr-section { font-family: 'Work Sans', system-ui, sans-serif; }
.pr-title { font-family: 'Manrope', system-ui, sans-serif; }
.pr-price, .pr-plan-name { font-family: 'Manrope', system-ui, sans-serif; }