/* ── Reset ── */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{font-family:var(--pz-font);background:#fff;color:#0f172a;-webkit-font-smoothing:antialiased;overflow-x:hidden;}

/* ── Tokens ── */
:root{
  --blue:#1e3a8a;
  --navy:#1e3a8a;
  --black:#0f172a;
  --mid:#334155;
  --soft:#1e293b;
  --white:#ffffff;
  --bg:#fff;
  --card-blue:#f0f5ff;
  --border:rgba(30,58,138,0.10);
  --radius:16px;
  --radius-sm:10px;
}

/* ── Section base ── */
section{width:100%;padding:96px 24px;}
.container{max-width:1100px;margin:0 auto;padding:0 20px;}

/* ── Section label ── */
.s-label{
  display:inline-flex;align-items:center;gap:7px;
  background:#eff6ff;border:1px solid rgba(30,58,138,0.15);
  border-radius:999px;padding:5px 14px;
  font-size:11px;font-weight:600;letter-spacing:0.5px;
  text-transform:uppercase;color:var(--blue);
  margin-bottom:16px;
}
.s-label-dot{width:5px;height:5px;background:var(--blue);border-radius:50%;}

/* ── Section heading ── */
.s-head{
  font-size:clamp(28px,4vw,42px);
  font-weight:800;color:var(--navy);
  line-height:1.12;letter-spacing:-0.8px;
  margin-bottom:14px;
}
.s-sub{
  font-size:clamp(15px,2vw,17px);
  color:var(--soft);line-height:1.7;
  max-width:560px;
}
.center{text-align:center;}
.center .s-sub{margin:0 auto;}

/* ── Button ── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--blue);color:#fff;
  border-radius:999px;padding:14px 28px;
  font-size:14px;font-weight:700;
  text-decoration:none;border:none;cursor:pointer;
  font-family:var(--pz-font);
  transition:background 0.2s,transform 0.2s,box-shadow 0.2s;
  box-shadow:0 4px 16px rgba(30,58,138,0.25);
}

.btn-ghost{
  background:transparent;color:var(--blue);
  border:1.5px solid rgba(30,58,138,0.30);
  box-shadow:none;
}
.btn-ghost:hover{background:#eff6ff;transform:translateY(-2px);box-shadow:none;}
.btn-white{
  background:#fff;color:var(--navy);
  box-shadow:0 4px 16px rgba(0,0,0,0.12);
}
.btn-white:hover{background:#f8faff;transform:translateY(-2px);}

/* ── Card ── */
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px;
  transition:box-shadow 0.25s,transform 0.25s;
}
.card:hover{
  box-shadow:0 12px 40px rgba(30,58,138,0.10);
  transform:translateY(-3px);
}
.card-blue{background:var(--card-blue);}

/* ══════════════════════════════════
   SCROLL REVEAL SYSTEM
══════════════════════════════════ */
.sr{opacity:0;transform:translateY(28px);transition:opacity 0.55s ease,transform 0.55s cubic-bezier(0.22,1,0.36,1);}
.sr-in{opacity:1;transform:translateY(0);}

/* ══════════════════════════════════
   1. HERO
══════════════════════════════════ */
.hero{
  min-height:100vh;
  background:linear-gradient(135deg,#1e3a8a 0%,#142a63 55%,#0b1845 100%);
  position:relative;
  display:flex;align-items:flex-start;justify-content:center;
  overflow:hidden;
  padding:calc(var(--pz-nav-h, 72px) + 48px) 24px 32px;
}
.hero-bg-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  z-index:0;
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity,border-radius;
  filter:brightness(1.22) saturate(1.05);
}

.hero-vignette{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(5,15,60,0.42) 0%,rgba(5,15,60,0.16) 40%,rgba(5,15,60,0.44) 100%),
    radial-gradient(ellipse at center,rgba(5,15,60,0.08) 0%,rgba(5,15,60,0.48) 100%);
  pointer-events:none;z-index:2;
}
.hero-text-scrim{
  position:absolute;
  left:50%;top:0;
  transform:translateX(-50%);
  width:min(900px,92%);
  height:100%;
  background:radial-gradient(ellipse 62% 58% at 50% 34%,rgba(3,8,32,0.5) 0%,rgba(3,8,32,0) 74%);
  pointer-events:none;z-index:2;
}
.hero-inner{
  position:relative;z-index:3;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:0;
  width:100%;max-width:1100px;
  padding-top:0;
}

/* Hero text above */
.hero-text-top{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  margin-bottom:16px;
}
.hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:999px;padding:6px 18px;
  font-size:11px;font-weight:600;letter-spacing:0.5px;
  text-transform:uppercase;color:rgba(255,255,255,0.88)!important;
}
.hero-dot{width:6px;height:6px;background:#4ade80;border-radius:50%;animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(1.4);}}
.hero-h1{
  font-size:clamp(36px,6.5vw,68px);
  font-weight:800;color:#fff;
  line-height:1.08;letter-spacing:-2px;
  margin: 0 0 6px 0;
  text-shadow:0 2px 18px rgba(0,0,0,0.35);
}
.hero-h1 em{font-style:normal;color:#fff;font-weight:600;}
.hero-body{
  font-size:clamp(15px,2vw,17px);
  color:rgba(248,249,250,0.88);
  line-height:1.7;max-width:480px;
  margin: 0 0 4px 0;  /* Add this */
}
.hero-btns{display:flex;flex-direction:column;gap:12px;align-items:center;}

/* ── Orbit scene ── */
.hero-scene{
  contain:layout style;
  transform:translateZ(0);
  position:relative;
  display:flex;align-items:center;justify-content:center;
  max-width:100%;overflow:visible;
  isolation:isolate;
  opacity:0;
  transition:opacity 0.35s ease;
}
.hero-scene.pz-ready{opacity:1;}
.hero-bloom{
  position:absolute;
  border-radius:50%;
  max-width:100%;
  background:radial-gradient(circle,rgba(255,255,255,0.10) 0%,rgba(255,255,255,0.03) 50%,transparent 72%);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  animation:bloom 5s ease-in-out infinite;
}
@keyframes bloom{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1;}
  50%{transform:translate(-50%,-50%) scale(1.13);opacity:0.6;}
}
.hero-ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(255,255,255,0.10);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.orbit-anchor{
  position:absolute;top:50%;left:50%;
  width:0;height:0;pointer-events:none;z-index:2;
}
.pz-pill{
  position:absolute;
  background:rgba(255,255,255,0.95);
  border:1px solid rgba(255,255,255,0.5);
  border-radius:999px;
  display:flex;align-items:center;
  box-shadow:0 4px 20px rgba(0,0,0,0.15);
  white-space:nowrap;will-change:transform;
  backdrop-filter:blur(8px);
}
.pz-pd{border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pz-pd svg{display:block;}
.pz-pt{font-weight:700;color:#0f172a;line-height:1.2;}
.pz-ps{color:#64748b;line-height:1.2;}

/* phone */
.phone-outer{position:relative;z-index:5;animation:float3d 6s ease-in-out infinite;transform-style:preserve-3d;}
@keyframes float3d{
  0%  {transform:translateY(0px)    perspective(600px) rotateX(2deg)  rotateY(-3deg);}
  25% {transform:translateY(-8px)   perspective(600px) rotateX(0deg)  rotateY(3deg);}
  50% {transform:translateY(-14px)  perspective(600px) rotateX(-2deg) rotateY(2deg);}
  75% {transform:translateY(-6px)   perspective(600px) rotateX(1deg)  rotateY(-2deg);}
  100%{transform:translateY(0px)    perspective(600px) rotateX(2deg)  rotateY(-3deg);}
}
.phone-shadow{
  position:absolute;bottom:-18px;left:50%;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,0.25) 0%,transparent 70%);
  animation:sh 5s ease-in-out infinite;
}
@keyframes sh{0%,100%{transform:translateX(-50%) scaleX(1);opacity:1;}50%{transform:translateX(-50%) scaleX(0.70);opacity:0.4;}}
.badge-w{position:absolute;z-index:8;animation:bf 4s ease-in-out infinite;}
@keyframes bf{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-7px) scale(1.04);}}
.badge{
  background:#fff;color:var(--navy);
  border-radius:999px;display:flex;align-items:center;gap:6px;
  white-space:nowrap;font-weight:800;
  animation:bglow 3s ease-in-out infinite;
}
@keyframes bglow{
  0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,0.20),0 6px 20px rgba(0,0,0,0.20);}
  50%{box-shadow:0 0 0 7px rgba(255,255,255,0.10),0 8px 30px rgba(0,0,0,0.28);}
}
.badge-chk{background:var(--blue);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pz-phone{
  background:#fff;border-radius:20px;
  border:none;
  box-shadow:
    0 0 0 1.5px rgba(0,0,0,0.08),
    0 2px 4px rgba(0,0,0,0.06),
    0 12px 32px rgba(0,0,0,0.12),
    0 40px 80px rgba(0,0,0,0.16);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
}
.pz-phone::before{
  content:'';position:absolute;inset:0;border-radius:20px;
  background:linear-gradient(135deg,rgba(255,255,255,0.5) 0%,transparent 35%);
  pointer-events:none;z-index:10;
}
.pz-notch{background:#0f172a;border-radius:0 0 10px 10px;margin:0 auto;flex-shrink:0;}
.pz-hdr{background:#1e3a8a;flex-shrink:0;}
.pz-greet{color:rgba(255,255,255,0.6);text-transform:uppercase;letter-spacing:0.5px;display:flex;align-items:center;gap:4px;}
.pz-live{width:5px;height:5px;background:#4ade80;border-radius:50%;animation:pulse 2s ease-in-out infinite;}
.pz-uname{font-weight:800;color:#fff;letter-spacing:-0.3px;}
.pz-usub{color:rgba(255,255,255,0.5);}
.pz-stats{display:flex;}
.pz-st{flex:1;background:#f0f4ff;text-align:center;}
.pz-sl{color:#6b7280;text-transform:uppercase;letter-spacing:0.3px;}
.pz-sv{font-weight:800;color:#1e3a8a;}
.pz-ss{color:#9ca3af;}
.pz-btns{display:flex;}
.pz-bb{flex:1;background:#1e3a8a;color:#fff;font-weight:700;text-align:center;border-radius:7px;}
.pz-bo{flex:1;background:#fff;color:#1e3a8a;border:1px solid #1e3a8a;font-weight:700;text-align:center;border-radius:7px;}
.pz-albl{font-weight:700;color:#0f172a;}
.pz-alist{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.pz-ai{display:flex;align-items:center;background:#f8faff;border-radius:6px;opacity:0;transform:translateX(-8px);}
.pz-ai.show{animation:asl 0.4s ease forwards;}
@keyframes asl{to{opacity:1;transform:translateX(0);}}
.pz-aico{background:#dbeafe;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pz-aico svg{display:block;}
.pz-atx{flex:1;}
.pz-att{font-weight:700;color:#0f172a;line-height:1.3;}
.pz-adc{color:#9ca3af;line-height:1.3;}
.pz-aam{font-weight:800;color:#1e3a8a;white-space:nowrap;}
.pz-phone-nav{display:flex;justify-content:space-around;border-top:0.5px solid rgba(0,0,0,0.07);flex-shrink:0;}
.pz-ni{display:flex;flex-direction:column;align-items:center;}
.pz-ni svg{opacity:0.28;}
.pz-ni.on svg{opacity:1;}
.pz-ni span{color:#9ca3af;font-weight:500;}
.pz-ni.on span{color:#1e3a8a;}

/* ══════════════════════════════════
   2. TRUST BAR
══════════════════════════════════ */
/* ══════════════════════════════════
   2. MARQUEE PLACEHOLDER SLOT
   (replaces the old static trust bar — reserved for a horizontal marquee)
══════════════════════════════════ */
.marquee-slot{
  border-top:1px solid rgba(0,0,0,0.06);
  border-bottom:1px solid rgba(0,0,0,0.06);
  background:#fafbff;
  padding:28px 24px;
}
.marquee-slot-inner{
  max-width:1100px;margin:0 auto;
  height:64px;
  border-radius:14px;
  border:1.5px dashed rgba(30,58,138,0.22);
  background:repeating-linear-gradient(135deg,rgba(30,58,138,0.025) 0px,rgba(30,58,138,0.025) 10px,transparent 10px,transparent 20px);
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.marquee-slot-inner svg{width:20px;height:20px;opacity:0.35;color:#1e3a8a;flex-shrink:0;}
.marquee-slot-text{display:flex;flex-direction:column;gap:1px;}
.marquee-slot-label{font-size:11px;font-weight:600;color:rgba(30,58,138,0.55);text-transform:uppercase;letter-spacing:0.4px;}
.marquee-slot-sub{font-size:10.5px;color:#94a3b8;}

/* ══════════════════════════════════
   3. HOW IT WORKS
══════════════════════════════════ */
.how-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;margin-top:52px;
}
.how-card{
  background:#fff;
  border-radius:0;
  padding:36px 28px;
  position:relative;
  overflow:hidden;
}
.story-unit:nth-child(2) .how-card{background:var(--card-blue);}
.how-icon{
  width:44px;height:44px;background:#dce8ff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
}
.how-icon svg{width:18px;height:18px;}
.how-status{
  display:inline-flex;align-items:center;gap:5px;
  background:#dcfce7;border-radius:999px;
  padding:3px 10px;font-size:11px;font-weight:600;color:#15803d;
  margin-bottom:14px;
}
.how-status-dot{
  width:6px;height:6px;background:#15803d;border-radius:50%;
  box-shadow:0 0 0 3px rgba(21,128,61,0.18);
}
.how-title{font-size:20px;font-weight:700;color:var(--navy);margin-bottom:10px;letter-spacing:-0.3px;}
.how-body{font-size:14px;color:var(--soft);line-height:1.7;}

/* ══════════════════════════════════
   STORY GRID (card + plain visual slot)
   Replaces the old pinned-swap sections —
   simple, mobile-safe, 3D card + flat mockup slot beneath
══════════════════════════════════ */
.story-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;margin-top:52px;
}
.story-unit{display:flex;flex-direction:column-reverse;border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 8px rgba(15,23,42,0.06),0 10px 28px rgba(30,58,138,0.09);transition:box-shadow 0.4s cubic-bezier(0.22,1,0.36,1),transform 0.4s cubic-bezier(0.22,1,0.36,1);}
.story-unit:hover{box-shadow:0 18px 44px -8px rgba(30,58,138,0.16);transform:translateY(-5px);}
.story-card{
  background:#fff;
  border-radius:0;
  padding:32px 28px;
  position:relative;overflow:hidden;
}
.story-unit:nth-child(2) .story-card{background:var(--card-blue);}
.story-num{
  font-size:13px;font-weight:700;color:var(--blue);
  letter-spacing:0.5px;text-transform:uppercase;margin-bottom:10px;
}
.story-icon{
  width:44px;height:44px;background:#dce8ff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
  font-family:var(--pz-font);font-size:18px;font-weight:700;color:#1e3a8a;
}
.story-icon svg{width:18px;height:18px;}
.story-title{font-size:19px;font-weight:700;color:var(--navy);margin-bottom:10px;letter-spacing:-0.3px;}
.story-body{font-size:14px;color:var(--soft);line-height:1.7;}

/* Visual slot — flush top of the unified card */
.story-visual{
  margin-top:0;
  border-radius:0;
  overflow:hidden;
  height:245px;
  background:#eef1f6;
  border:none;
  border-bottom:1.5px solid rgba(30,58,138,0.08);
  box-shadow:none;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:0;
}

@media(max-width:880px){
  .story-grid{grid-template-columns:1fr;row-gap:36px;column-gap:24px;}
  .story-visual{height:245px;}
}

/* ══════════════════════════════════
   AFFILIATE
══════════════════════════════════ */
#affiliate { padding: 96px 0; }
.pz-affiliate-wrap {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.pz-affiliate-icon {
  width: 56px; height: 56px;
  background: #dce8ff;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.pz-affiliate-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--blue, #1e3a8a);
  margin-bottom: 12px;
}
.pz-affiliate-head {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800; color: var(--navy, #0f172a);
  letter-spacing: -0.5px; line-height: 1.15;
  margin-bottom: 10px;
}
.pz-affiliate-sub {
  font-size: 1.0625rem; font-weight: 600;
  color: var(--blue, #1e3a8a);
  margin-bottom: 18px;
}
.pz-affiliate-body {
  font-size: 1rem; line-height: 1.75;
  color: var(--soft, #475569);
  margin-bottom: 32px;
  max-width: 560px;
}
.pz-affiliate-btn {
  font-size: 0.9375rem;
  padding: 14px 32px;
}
@media(max-width:640px){
  #affiliate { padding: 72px 0; }
  .pz-affiliate-head { font-size: 1.625rem; }
}

/* ══════════════════════════════════
   4. FEATURES
══════════════════════════════════ */
.features{background:#fafbff;}
.feat-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;margin-top:52px;
}
.feat-card{
  background:#fff;
  border-radius:var(--radius);
  padding:36px 32px;
  display:flex;flex-direction:column;gap:16px;
  position:relative;overflow:hidden;
  box-shadow:0 2px 8px rgba(15,23,42,0.06),0 10px 28px rgba(30,58,138,0.09);
  transition:box-shadow 0.4s cubic-bezier(0.22,1,0.36,1),transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.feat-card:hover{box-shadow:0 18px 44px -8px rgba(30,58,138,0.16);transform:translateY(-5px);}
.feat-card:nth-child(2),
.feat-card:nth-child(3){background:var(--card-blue);}
.feat-card:nth-child(2)::after,
.feat-card:nth-child(3)::after{
  display:none;
}
.feat-icon{
  width:44px;height:44px;background:#dce8ff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.feat-icon svg{width:18px;height:18px;}
.feat-title{font-size:20px;font-weight:700;color:var(--navy);letter-spacing:-0.3px;}
.feat-body{font-size:14px;color:var(--soft);line-height:1.7;}
.feat-list{display:flex;flex-direction:column;gap:9px;margin-top:4px;}
.feat-list li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:13.5px;color:var(--mid);line-height:1.5;
  list-style:none;
}
.feat-check{
  width:18px;height:18px;background:#eff6ff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;
}
.feat-check svg{width:9px;height:9px;}
.feat-card:nth-child(2) .feat-check,
.feat-card:nth-child(3) .feat-check{background:rgba(30,58,138,0.12);}
.feat-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;color:var(--blue);
  text-decoration:none;margin-top:auto;
  transition:gap 0.2s;
}
.feat-link:hover{gap:10px;}

/* ══════════════════════════════════
   5. WHO WE PROTECT
══════════════════════════════════ */
.protect-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;margin-top:52px;
}
/* ── Mockup placeholder (for later image swap) ── */
.mockup-ph{
  width:100%;height:160px;
  border:1.5px dashed rgba(30,58,138,0.28);
  border-radius:12px;
  background:repeating-linear-gradient(135deg,rgba(30,58,138,0.03) 0px,rgba(30,58,138,0.03) 10px,transparent 10px,transparent 20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  margin-bottom:20px;
}
.mockup-ph svg{width:30px;height:30px;opacity:0.35;color:#1e3a8a;}
.mockup-ph-label{font-size:11px;font-weight:600;color:rgba(30,58,138,0.55);text-transform:uppercase;letter-spacing:0.4px;}
.mockup-ph-sub{font-size:10.5px;color:rgba(100,116,139,0.7);}

.protect-card{
  background:#fff;
  border-radius:var(--radius);
  padding:0 0 28px;
  display:flex;flex-direction:column;gap:0;
  position:relative;overflow:hidden;
  box-shadow:0 2px 8px rgba(15,23,42,0.06),0 10px 28px rgba(30,58,138,0.09);
  transition:box-shadow 0.4s cubic-bezier(0.22,1,0.36,1),transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.protect-card:hover{box-shadow:0 18px 44px -8px rgba(30,58,138,0.16);transform:translateY(-5px);}
.protect-card:nth-child(2){background:var(--card-blue);}
.protect-card:nth-child(2)::after{
  display:none;
}
/* ── Top visual (Stanbic-style photo header) ──
   To swap in a real photo, replace the inner markup of .protect-visual with:
   <img src="/assets/images/protect-buyers.jpg" alt="Buyers" />
   Recommended source image size: 700x440px (same ratio as this box). */
.protect-visual{
  width:100%;height:180px;flex-shrink:0;position:relative;
}
.protect-visual img{width:100%;height:100%;object-fit:cover;display:block;}
.protect-visual-ph{
  display:none;
  width:100%;height:100%;
  background:repeating-linear-gradient(135deg,rgba(30,58,138,0.05) 0px,rgba(30,58,138,0.05) 10px,transparent 10px,transparent 20px);
  border-bottom:1.5px dashed rgba(30,58,138,0.22);
  flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.protect-visual.protect-visual-empty img{display:none;}
.protect-visual.protect-visual-empty .protect-visual-ph{display:flex;}
.protect-visual-ph svg{width:30px;height:30px;opacity:0.35;color:#1e3a8a;}
.protect-visual-label{font-size:11px;font-weight:600;color:rgba(30,58,138,0.55);text-transform:uppercase;letter-spacing:0.4px;}
.protect-visual-sub{font-size:10.5px;color:rgba(100,116,139,0.7);}
.protect-content{
  padding:28px 28px 0;
  display:flex;flex-direction:column;gap:16px;
}
.protect-icon{
  width:44px;height:44px;background:#dce8ff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.protect-icon svg{width:18px;height:18px;}
.protect-title{font-size:20px;font-weight:700;color:var(--navy);letter-spacing:-0.3px;}
.protect-body{font-size:14px;color:var(--soft);line-height:1.7;}
.protect-list{display:flex;flex-direction:column;gap:9px;}
.protect-list li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:13.5px;color:var(--mid);line-height:1.5;list-style:none;
}
.p-check{
  width:18px;height:18px;background:#eff6ff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;
}
.p-check svg{width:9px;height:9px;}

/* ══════════════════════════════════
   VERIFY DOCUMENT
══════════════════════════════════ */
.verify-section{
  background:var(--navy);
  position:relative;overflow:hidden;
}
#verifyGrain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:0.10;mix-blend-mode:overlay;}
.verify-section::before{display:none;}
.verify-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;
  gap:56px;align-items:center;
  margin-top:0;
}
.verify-left{display:flex;flex-direction:column;gap:18px;}
.verify-label{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.18);
  border-radius:999px;padding:5px 14px;font-size:11px;font-weight:600;
  letter-spacing:0.5px;text-transform:uppercase;color:rgba(255,255,255,0.78);
  width:fit-content;
}
.verify-h{
  font-size:clamp(26px,4vw,38px);font-weight:800;color:#fff;
  line-height:1.15;letter-spacing:-0.7px;
}
.verify-body{font-size:15px;color:rgba(248,249,250,0.6);line-height:1.75;max-width:420px;}
.verify-points{display:flex;flex-direction:column;gap:13px;margin-top:6px;}
.verify-point{display:flex;align-items:flex-start;gap:11px;}
.verify-point-icon{
  width:26px;height:26px;background:rgba(255,255,255,0.10);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;
}
.verify-point-icon svg{width:12px;height:12px;}
.verify-point-text{font-size:13.5px;color:rgba(248,249,250,0.72);line-height:1.6;}

/* Verify demo card */
.verify-demo{
  background:#fff;border-radius:20px;
  padding:32px;
  box-shadow:0 30px 70px rgba(0,0,0,0.35);
}
.verify-demo-head{display:flex;align-items:center;gap:10px;margin-bottom:24px;}
.verify-demo-icon{
  width:38px;height:38px;background:#eff6ff;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.verify-demo-icon svg{width:18px;height:18px;}
.verify-demo-title{font-size:15px;font-weight:700;color:var(--navy);}
.verify-demo-sub{font-size:12px;color:#64748b;}
.verify-input-wrap{margin-bottom:16px;}
.verify-input-label{font-size:11px;font-weight:600;color:var(--mid);text-transform:uppercase;letter-spacing:0.3px;margin-bottom:7px;display:block;}
.verify-input{
  width:100%;border:1.5px solid rgba(30,58,138,0.15);border-radius:10px;
  padding:13px 16px;font-size:14px;font-family:var(--pz-font);
  color:var(--black);outline:none;transition:border 0.2s;
}
.verify-input:focus{border-color:var(--blue);}
.verify-btn{
  width:100%;background:var(--blue);color:#fff;border:none;
  border-radius:10px;padding:14px;font-size:14px;font-weight:700;
  font-family:var(--pz-font);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background 0.2s;margin-bottom:18px;
}
.verify-btn:hover{background:var(--navy);}
.verify-result{
  background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;
  padding:18px;display:flex;align-items:flex-start;gap:12px;
  opacity:0;max-height:0;overflow:hidden;
  transition:opacity 0.3s,max-height 0.3s,padding 0.3s,margin 0.3s;
}
.verify-result.show{opacity:1;max-height:200px;margin-top:0;}
.verify-result-icon{
  width:30px;height:30px;background:#16a34a;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.verify-result-icon svg{width:14px;height:14px;}
.verify-result-title{font-size:13px;font-weight:700;color:#15803d;margin-bottom:3px;}
.verify-result-sub{font-size:12px;color:#166534;line-height:1.6;}

/* ══════════════════════════════════
   HORIZONTAL SCROLL (shared)
══════════════════════════════════ */
.hscroll-wrap{position:relative;margin-top:48px;}
.hscroll{
  display:flex;gap:20px;
  overflow-x:auto;
  padding:4px 4px 20px;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.hscroll::-webkit-scrollbar{display:none;}
.hscroll-fade-r{display:none;}

/* Listing spotlight (single card, arrow-navigated) */
.listing-spotlight-wrap{
  max-width:380px;margin:48px auto 0;
}
.listing-card{
  background:#fff;
  border-radius:20px;overflow:hidden;
  position:relative;
  box-shadow:0 2px 8px rgba(15,23,42,0.06),0 10px 28px rgba(30,58,138,0.09);
  transition:box-shadow 0.4s cubic-bezier(0.22,1,0.36,1);
}
.listing-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#1e3a8a,#60a5fa,#1e3a8a);
  background-size:200% 100%;
  opacity:0;transition:opacity 0.4s;
  z-index:2;
}
.listing-card:hover{
  box-shadow:0 20px 48px -8px rgba(30,58,138,0.22),0 8px 16px -4px rgba(30,58,138,0.10);
}
.listing-card:hover::before{
  opacity:1;
  animation:shimmer-bar 2s linear infinite;
}
@keyframes shimmer-bar{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.listing-img{
  height:200px;width:100%;
  background:linear-gradient(135deg,#5b7fd6 0%,#1e3a8a 55%,#0e1c47 100%);
  border-bottom:none;
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  overflow:hidden;
}
.listing-img svg{width:30px;height:30px;opacity:0.28;position:relative;z-index:1;color:#fff;transition:transform 0.5s cubic-bezier(0.22,1,0.36,1);}
.listing-card:hover .listing-img svg{transform:scale(1.08);}
.listing-img-label{display:none;}
.listing-img-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1;
}
.listing-verified-badge{
  position:absolute;top:12px;left:12px;
  background:#fff;border-radius:999px;padding:5px 11px;
  font-size:11px;font-weight:700;color:#15803d;
  display:flex;align-items:center;gap:5px;
  box-shadow:0 2px 8px rgba(0,0,0,0.18);
  z-index:3;
}
.listing-verified-dot{width:5px;height:5px;background:#15803d;border-radius:50%;flex-shrink:0;}
.listing-photo-count{
  position:absolute;top:12px;right:12px;
  background:rgba(15,23,42,0.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-radius:999px;padding:5px 10px;
  font-size:11px;font-weight:700;color:#fff;
  z-index:3;
}
.listing-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:28px;border-radius:8px;
  appearance:none;-webkit-appearance:none;
  background:var(--blue);background-color:var(--blue);
  border:none;outline:none;padding:0;margin:0;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 2px 10px rgba(15,23,42,0.35);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  z-index:3;transition:background-color 0.2s ease,transform 0.2s ease;
}
.listing-nav:hover{background:#16306f;background-color:#16306f;}
.listing-nav:active{transform:translateY(-50%) scale(0.9);}
.listing-nav:focus{outline:none;}
.listing-nav svg{
  width:16px;height:16px;pointer-events:none;
  stroke:#ffffff;stroke-width:3;
}
.listing-nav-prev{left:12px;}
.listing-nav-next{right:12px;}
.listing-spotlight-dots{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:14px 0 0;background:#fff;
}
.listing-spotlight-dots span{width:6px;height:6px;border-radius:50%;background:rgba(30,58,138,0.18);display:inline-block;cursor:pointer;transition:all 0.2s ease;}
.listing-spotlight-dots span.active{width:16px;border-radius:3px;background:var(--blue);}
.listing-body{padding:20px;position:relative;background:linear-gradient(180deg,#fff 0%,#fafcff 100%);}
.listing-price{font-size:18px;font-weight:800;color:var(--navy);margin-bottom:4px;letter-spacing:-0.3px;}
.listing-title{font-size:14px;font-weight:600;color:var(--black);margin-bottom:3px;}
.listing-loc{font-size:12.5px;color:#64748b;display:flex;align-items:center;gap:5px;margin-bottom:14px;}
.listing-loc svg{width:12px;height:12px;flex-shrink:0;}
.listing-meta{display:flex;gap:14px;padding-top:14px;border-top:1px dashed rgba(30,58,138,0.18);}
.listing-meta-item{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--mid);font-weight:500;}
.listing-meta-item svg{width:13px;height:13px;color:var(--blue);}

/* Blog card */
.blog-card{
  flex:0 0 320px;scroll-snap-align:start;
  background:#fff;
  border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;
  position:relative;
  box-shadow:0 2px 8px rgba(15,23,42,0.06),0 10px 28px rgba(30,58,138,0.09);
  transition:box-shadow 0.45s cubic-bezier(0.22,1,0.36,1),transform 0.45s cubic-bezier(0.22,1,0.36,1),background 0.45s;
}
.blog-card:hover{
  box-shadow:0 24px 50px -10px rgba(30,58,138,0.20);
  transform:translateY(-5px) rotate(-0.3deg);
  background:#fafcff;
}
.blog-img{
  height:150px;width:100%;
  background:#f8faff;
  border-bottom:1.5px dashed rgba(30,58,138,0.20);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  position:relative;overflow:hidden;
}
.blog-img svg{width:26px;height:26px;opacity:0.3;position:relative;z-index:1;color:#1e3a8a;transition:transform 0.5s cubic-bezier(0.22,1,0.36,1);}
.blog-card:hover .blog-img svg{transform:scale(1.1);}
.blog-img-label{font-size:10px;font-weight:600;color:rgba(30,58,138,0.5);text-transform:uppercase;letter-spacing:0.4px;}
.blog-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1;}
.blog-cat{
  font-size:11px;font-weight:700;color:var(--blue);
  text-transform:uppercase;letter-spacing:0.4px;
  display:flex;align-items:center;gap:6px;
}
.blog-cat::before{content:'';width:4px;height:4px;background:var(--blue);border-radius:50%;}
.blog-title{font-size:16px;font-weight:700;color:var(--navy);line-height:1.4;letter-spacing:-0.2px;}
.blog-excerpt{font-size:13px;color:var(--soft);line-height:1.65;flex:1;}
.blog-meta{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:12px;border-top:1px dashed rgba(30,58,138,0.18);
  font-size:11.5px;color:#64748b;
}
.blog-read{
  display:inline-flex;align-items:center;gap:5px;
  font-size:13px;font-weight:700;color:var(--blue);text-decoration:none;
}

/* ══════════════════════════════════
   6. FEE CALCULATOR
══════════════════════════════════ */
.calc-section{background:#fafbff;}
/* ── New Propzora calculator (pz) ── */
.pz{max-width:860px;margin:52px auto 0;}
.pz-banner{background:#1e3a8a;padding:20px 22px;border-radius:16px 16px 0 0;}
.pz-banner-title{font-size:20px;font-weight:700;color:#fff;}
.pz-grid{display:grid;grid-template-columns:1fr;gap:12px;}
@media(min-width:640px){.pz-grid{grid-template-columns:1fr 1fr;}}
.pz-left{background:#fff;border-radius:16px;box-shadow:0 2px 16px rgba(0,0,0,0.07);overflow:hidden;}
.pz-left-body{padding:22px;}
.pz-right{background:#1e3a8a;border-radius:16px;padding:22px;position:relative;overflow:hidden;}
.pz-right::before{content:'';position:absolute;top:-40px;right:-40px;width:150px;height:150px;background:rgba(255,255,255,0.05);border-radius:50%;}
.pz-right::after{content:'';position:absolute;bottom:-30px;left:-30px;width:100px;height:100px;background:rgba(255,255,255,0.04);border-radius:50%;}
.pz-field{margin-bottom:14px;}
.pz-lbl{display:block;font-size:11px;font-weight:600;color:#374151;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:5px;}
.pz-irow{display:flex;align-items:center;border:1.5px solid #e5e7eb;border-radius:10px;overflow:hidden;background:#fff;transition:border 0.2s;}
.pz-irow:focus-within{border-color:#1e3a8a;}
.pz-pfx{padding:0 12px;font-size:15px;font-weight:600;color:#1e3a8a;background:#f8f9ff;border-right:1.5px solid #e5e7eb;height:42px;display:flex;align-items:center;flex-shrink:0;}
.pz-irow input{border:none;outline:none;background:transparent;padding:0 12px;font-size:15px;color:#0a0a1a;width:100%;height:42px;}
.pz-plain{width:100%;height:42px;border:1.5px solid #e5e7eb;border-radius:10px;padding:0 12px;font-size:14px;color:#0a0a1a;background:#fff;outline:none;transition:border 0.2s;}
.pz-plain:focus{border-color:#1e3a8a;}
.pz-trow{display:flex;align-items:center;gap:10px;padding:11px 13px;background:#f8f9ff;border-radius:10px;margin-bottom:14px;border:1.5px solid #e8eaf5;}
.pz-sw{position:relative;width:42px;height:23px;flex-shrink:0;}
.pz-sw input{opacity:0;width:0;height:0;}
.pz-thumb{position:absolute;inset:0;background:#d1d5db;border-radius:100px;transition:0.25s;cursor:pointer;}
.pz-thumb:before{content:'';position:absolute;width:17px;height:17px;left:3px;top:3px;background:#fff;border-radius:50%;transition:0.25s;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
.pz-sw input:checked+.pz-thumb{background:#1e3a8a;}
.pz-sw input:checked+.pz-thumb:before{transform:translateX(19px);}
.pz-swlbl{font-size:13px;font-weight:600;color:#374151;}
.pz-agent{overflow:hidden;transition:max-height 0.3s,opacity 0.3s;max-height:200px;opacity:1;}
.pz-agent.off{max-height:0;opacity:0;pointer-events:none;}
.pz-radios{display:flex;gap:8px;}
.pz-radio{flex:1;display:flex;align-items:center;gap:8px;padding:10px 13px;border:1.5px solid #e5e7eb;border-radius:10px;cursor:pointer;transition:all 0.2s;}
.pz-radio.on{border-color:#1e3a8a;background:#eff6ff;}
.pz-radio input{accent-color:#1e3a8a;}
.pz-radio span{font-size:13px;font-weight:500;color:#374151;}
.pz-rtag{font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:16px;}
.pz-big{font-size:36px;font-weight:700;color:#fff;line-height:1;margin-bottom:4px;position:relative;z-index:1;}
.pz-biglbl{font-size:12px;color:rgba(255,255,255,0.6);margin-bottom:20px;position:relative;z-index:1;}
.pz-bwrap{margin-bottom:18px;position:relative;z-index:1;}
.pz-blbl{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,0.55);margin-bottom:6px;}
.pz-btrack{height:6px;background:rgba(255,255,255,0.15);border-radius:100px;overflow:hidden;}
.pz-bfill{height:100%;background:rgba(255,255,255,0.9);border-radius:100px;transition:width 0.5s ease;width:0%;}
.pz-div{height:1px;background:rgba(255,255,255,0.12);margin:14px 0;position:relative;z-index:1;}
.pz-rrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;position:relative;z-index:1;}
.pz-rrow:last-of-type{margin-bottom:0;}
.pz-rlbl{font-size:12px;color:rgba(255,255,255,0.6);}
.pz-rval{font-size:13px;font-weight:600;color:#fff;}
.pz-rval.green{color:#6ee7b7;}
.pz-note{font-size:11px;color:rgba(255,255,255,0.55);background:rgba(255,255,255,0.08);border-radius:8px;padding:10px 12px;margin-top:14px;line-height:1.6;position:relative;z-index:1;}
.pz-note strong{color:rgba(255,255,255,0.85);}
.pz-seal{display:flex;align-items:center;gap:6px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.12);position:relative;z-index:1;}
.pz-seal span{font-size:11px;color:rgba(255,255,255,0.45);}
.pz-placeholder{font-size:13px;color:rgba(255,255,255,0.35);text-align:center;padding:32px 0;position:relative;z-index:1;line-height:1.6;}
.pz-placeholder strong{display:block;font-size:28px;color:rgba(255,255,255,0.15);margin-bottom:8px;}

/* ══════════════════════════════════
   7. FAQ
══════════════════════════════════ */
.faq-list{max-width:720px;margin:52px auto 0;display:flex;flex-direction:column;gap:12px;}
.faq-item{
  background:#fff;
  border-radius:var(--radius-sm);overflow:hidden;
  box-shadow:0 2px 8px rgba(15,23,42,0.06),0 10px 28px rgba(30,58,138,0.09);
  transition:box-shadow 0.3s cubic-bezier(0.22,1,0.36,1),transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.faq-item:hover{box-shadow:0 18px 44px -8px rgba(30,58,138,0.16);transform:translateY(-3px);}
.faq-q{
  width:100%;background:none;border:none;cursor:pointer;
  padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;
  text-align:left;font-family:var(--pz-font);
}
.faq-q-text{font-size:15px;font-weight:600;color:var(--navy);}
.faq-icon{
  width:28px;height:28px;background:#eff6ff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform 0.3s,background 0.2s;
}
.faq-icon svg{width:12px;height:12px;stroke:var(--blue);}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--blue);}
.faq-item.open .faq-icon svg{stroke:#fff;}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height 0.35s ease,padding 0.2s;
  padding:0 24px;
}
.faq-item.open .faq-a{max-height:200px;padding:0 24px 22px;}
.faq-a p{font-size:14px;color:var(--soft);line-height:1.75;}

/* ══════════════════════════════════
   8. CTA FOOTER
══════════════════════════════════ */
.cta-section{
  background:var(--navy);
  padding:96px 24px;
  position:relative;overflow:hidden;
}
.cta-section::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 50%,rgba(30,58,138,0.6) 0%,transparent 60%);
  pointer-events:none;
}
#ctaGrain{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;opacity:0.12;mix-blend-mode:overlay;
}
.cta-inner{
  position:relative;z-index:2;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:24px;
}
.cta-label{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:999px;padding:5px 14px;
  font-size:11px;font-weight:600;letter-spacing:0.5px;
  text-transform:uppercase;color:rgba(255,255,255,0.75);
}
.cta-h{
  font-size:clamp(28px,5vw,48px);font-weight:800;
  color:#fff;line-height:1.1;letter-spacing:-1px;
  max-width:620px;
}
.cta-sub{font-size:16px;color:rgba(248,249,250,0.58);line-height:1.7;max-width:460px;}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px;}
.cta-fine{font-size:11px;letter-spacing:0.3px;color:rgba(255,255,255,0.28);margin-top:8px;}
/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media(max-width:768px){
  .how-grid{grid-template-columns:1fr;}
  .feat-grid{grid-template-columns:1fr;}
  .protect-grid{grid-template-columns:1fr;}
  section{padding:72px 16px;}
  .verify-grid{grid-template-columns:1fr;gap:36px;}
  .verify-demo{padding:24px;}
}
@media(max-width:480px){
  .hscroll{padding:4px 20px 20px;}
  .blog-card{flex:0 0 86vw;max-width:330px;}
  .listing-spotlight-wrap{max-width:calc(100vw - 40px);}
}

/* ══ TRUST BADGE MARQUEE ══════════════════════════════════════════ */
.pz-wrap{width:100%;overflow:hidden;padding:2.75rem 0;background:#ffffff;position:relative;max-width:100vw;}
.pz-wrap::before,.pz-wrap::after{content:'';position:absolute;top:0;bottom:0;width:clamp(48px,10vw,120px);z-index:2;pointer-events:none;}
.pz-wrap::before{left:0;background:linear-gradient(to right,#ffffff,transparent);}
.pz-wrap::after{right:0;background:linear-gradient(to left,#ffffff,transparent);}
.pz-track{display:flex;align-items:center;gap:clamp(12px,2vw,22px);width:max-content;animation:pz-scroll 24s linear infinite;will-change:transform;}
.pz-track:hover{animation-play-state:paused;}
@keyframes pz-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.pz-badge{display:flex;align-items:center;gap:clamp(9px,1.3vw,13px);background:#ffffff;border:1px solid rgba(30,58,138,0.13);border-radius:100px;padding:clamp(9px,1.2vw,12px) clamp(18px,2.2vw,26px) clamp(9px,1.2vw,12px) clamp(12px,1.5vw,16px);box-shadow:0 1px 2px rgba(30,58,138,0.05),0 4px 16px rgba(30,58,138,0.08);flex-shrink:0;white-space:nowrap;cursor:default;transition:transform 0.38s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.3s ease;user-select:none;}
.pz-badge:hover{transform:translateY(-3px) scale(1.028);box-shadow:0 2px 8px rgba(30,58,138,0.10),0 10px 30px rgba(30,58,138,0.13);}
.pz-icon{width:clamp(32px,4.2vw,42px);height:clamp(32px,4.2vw,42px);flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.pz-icon svg{width:100%;height:100%;display:block;}
.pz-text{display:flex;flex-direction:column;gap:1px;}
.pz-title{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:clamp(12.5px,1.4vw,14.5px);font-weight:700;color:#1e3a8a;letter-spacing:-0.015em;line-height:1.2;}
.pz-sub{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:clamp(10px,1vw,11px);font-weight:400;color:#4b5563;letter-spacing:0.01em;line-height:1.2;}
@media(prefers-reduced-motion:reduce){.pz-track{animation:none;}.floating-escrow-btn.pz-visible{animation:none;}}
/* ── Scroll progress dots ── */
.scroll-dots{margin-top:16px;padding:0 4px;}
.scroll-bar-track{height:3px;background:rgba(30,58,138,0.10);border-radius:999px;overflow:hidden;}
.scroll-bar-fill{height:100%;background:#1e3a8a;border-radius:999px;width:0%;transition:width 0.15s ease;}
.how-card, .story-card, .feat-card, .protect-card, .listing-card, .blog-card{
  user-select:none;
  -webkit-user-select:none;
}
/* ── Landing page overrides — must come last ── */
.hero-h1{color:#fff!important;}
.hero-h1 em{color:#fff!important;font-weight:600!important;}
.s-head{color:var(--navy)!important;}
.cta-h{color:#fff!important;}
.verify-h{color:#fff!important;}
#heroScene{overflow:visible!important;}
.phone-outer{animation:float3d 6s ease-in-out infinite!important;transform-style:preserve-3d!important;}
#hero{overflow:hidden!important;}
/* ══ WHY CHOOSE US ══ */
.pz-wcu-section{background:var(--pz-surface,#f8fafc);padding:var(--pz-8,96px) var(--pz-3,24px);}
.pz-wcu-container{max-width:920px;margin:0 auto;}
.pz-wcu-header{text-align:center;margin-bottom:52px;}
.pz-wcu-eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#1e3a8a;background:var(--pz-blue-mist,#eff6ff);padding:6px 14px;border-radius:20px;margin:0 0 18px;}
.pz-wcu-title{font-size:38px;font-weight:800;color:#1e3a8a!important;line-height:1.15;margin:0 0 14px;letter-spacing:-0.02em;}
.pz-wcu-subtitle{font-size:16px;color:#1e293b;line-height:1.7;max-width:520px;margin:0 auto;}
.pz-wcu-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.pz-wcu-card{background:var(--pz-white,#fff);border-radius:var(--pz-radius-lg,18px);padding:28px 26px;display:flex;align-items:flex-start;gap:18px;box-shadow:var(--pz-shadow-sm,0 2px 8px rgba(15,23,42,0.06)),0 10px 28px rgba(30,58,138,0.09);transition:transform var(--pz-duration,220ms) var(--pz-ease,ease),box-shadow var(--pz-duration,220ms) var(--pz-ease,ease);}
.pz-wcu-card:hover{transform:translateY(-5px);box-shadow:var(--pz-shadow-lg,0 24px 48px -16px rgba(15,23,42,0.14)),0 24px 52px rgba(30,58,138,0.15);}
.pz-wcu-icon{width:44px;height:44px;min-width:44px;border-radius:50%;background:var(--pz-blue-soft,#dbeafe);display:flex;align-items:center;justify-content:center;}
.pz-wcu-icon svg{width:18px;height:18px;}
.pz-wcu-content{flex:1;padding-top:4px;}
.pz-wcu-card-title{font-size:15px;font-weight:700;color:#1e3a8a;margin:0 0 8px;letter-spacing:-0.01em;}
.pz-wcu-card-desc{font-size:13.5px;color:#1e293b;line-height:1.7;margin:0;}
@media(max-width:620px){
  .pz-wcu-section{padding:64px 16px;}
  .pz-wcu-title{font-size:28px;}
  .pz-wcu-grid{grid-template-columns:1fr;}
  .pz-wcu-card{padding:22px 18px;}
  .pz-wcu-icon{width:40px;height:40px;min-width:40px;}
  .pz-wcu-icon svg{width:16px;height:16px;}
}

/* ══════════════════════════════════
   FLOATING STICKY CTA
   (clone of "Start Secure Escrow" that
   floats while scrolling between the
   hero button and the footer button)
══════════════════════════════════ */
.floating-escrow-btn{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translate(-50%,16px);
  background:#1e3a8a;color:#fff;
  font-weight:700;font-size:14px;
  padding:13px 28px;border-radius:999px;
  z-index:60;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), 
            transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
            background 0.3s ease, color 0.3s ease;
  text-decoration:none;
  white-space:nowrap;
  width:max-content;
  max-width:calc(100vw - 48px);
  margin-left:0;
}
.floating-escrow-btn.pz-visible{
  opacity:1;
  transform:translate(-50%,0);
  pointer-events:auto;
}
.floating-escrow-btn:hover{
  background:#162d6e;
}
.floating-escrow-btn.on-dark{
  background:#fff;
  color:#1e3a8a;
}
.floating-escrow-btn.on-dark:hover{
  background:#f0f5ff;
}
@media (min-width:768px){
  .floating-escrow-btn{
    left:50%;
    right:auto;
    bottom:28px;
    transform:translate(-50%, 16px);
  }
  .floating-escrow-btn.pz-visible{
    transform:translate(-50%, 0);
  }
}
/* ══════════════════════════════════
   LAYOUT REFINEMENT SYSTEM — v2
   Kuda-style: left-aligned text throughout,
   wide grids, full horizontal space use.
══════════════════════════════════ */

/* ── 1. Widen the global container ── */
.container {
  max-width: 1200px;
  padding: 0;
}

/* ── 2. Global: kill centering on all section headings ──
   Kuda, Monzo, Revolut all left-align headings.
   The .center class was added in HTML but we override it
   for every landing section heading here.               */
.center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.center .s-sub {
  max-width: 560px;
}
/* Keep the hero and CTA centered — they’re dark full-bleed panels */
.hero-inner,
.cta-inner,
.hero-text-top {
  text-align: center;
}
.cta-inner .s-sub,
.hero-inner .s-sub {
  margin: 0 auto;
}
/* Verify section: center heading too */
.verify-left {
  align-items: flex-start;
  text-align: left;
}
.verify-body {
  text-align: left;
  color: rgba(248,249,250,0.82);
}

/* ── 3. Section heading spacing: heading then content, no gap waste ── */
.s-head {
  margin-bottom: 8px;
}
.s-sub {
  margin-bottom: 36px;
}

/* ── 4. Blog: horizontal scroll — original behaviour preserved ── */

/* ── 5. FAQ: 2-column grid on desktop ── */
#faq .faq-list {
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 36px;
  align-items: start;
}
@media (max-width: 768px) {
  #faq .faq-list {
    grid-template-columns: 1fr;
  }
}

/* ── 6. Listings: widen spotlight card ── */
.listing-spotlight-wrap {
  max-width: 680px;
}
.listing-img {
  height: 260px;
}

/* ── 7. Affiliate: horizontal split layout ── */
#affiliate {
  padding: 96px 0;
}
.pz-affiliate-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  text-align: left;
}
.pz-affiliate-left {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pz-affiliate-head {
  text-align: center;
}
.pz-affiliate-body {
  margin-bottom: 28px;
  text-align: center;
}
.pz-affiliate-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pz-affiliate-perk {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid rgba(30,58,138,0.10);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(30,58,138,0.06);
}
.pz-affiliate-perk-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: #dbeafe;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pz-affiliate-perk-icon svg {
  width: 18px;
  height: 18px;
}
.pz-affiliate-perk-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: 3px;
}
.pz-affiliate-perk-desc {
  font-size: 13px;
  color: #475569;
  line-height: 1.6;
}
@media (max-width: 860px) {
  .pz-affiliate-wrap {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
@media (max-width: 640px) {
  #affiliate {
    padding: 72px 0;
  }
}

/* ── 8. Why Choose Us: wider container, left-aligned heading ── */
.pz-wcu-container {
  max-width: 1200px;
}
.pz-wcu-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}
.pz-wcu-title {
  margin: 0 0 12px;
}
.pz-wcu-subtitle {
  margin: 0;
  max-width: 560px;
}
@media (min-width: 1024px) {
  .pz-wcu-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 960px) and (min-width: 601px) {
  .pz-wcu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── 9. Calculator: wider layout ── */
.pz {
  max-width: 100%;
  margin-top: 40px;
}

/* ── 10. Tablet: 2-col for 3-col grids ── */
@media (max-width: 960px) and (min-width: 601px) {
  .story-grid,
  .how-grid,
  .protect-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── 11. Section padding: tighten slightly ── */
#protect,
#blog,
#faq,
#calc,
#why-choose-us {
  padding-top: 80px;
  padding-bottom: 80px;
}

/* ── 12. Blog view-all CTA: left-align ── */
#blog .cta-row {
  display: flex;
  justify-content: flex-start;
  margin-top: 28px;
}
@media (max-width: 560px) {
  #blog .cta-row {
    justify-content: flex-start;
  }
}

/* ══════════════════════════════════
   WHITESPACE TUNING — v3
   Tighter, more intentional spacing
   throughout. Kuda-rhythm.
══════════════════════════════════ */

/* ── Section padding: tighter on desktop ── */
section {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media (max-width: 768px) {
  section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* ── Heading → subtext → content rhythm ── */
.s-head {
  margin-bottom: 12px;
}
.s-sub {
  margin-bottom: 40px;
}

/* ── How it works / story grid: reduce top gap ── */
.how-grid,
.story-grid {
  margin-top: 40px;
}

/* ── Protect grid ── */
.protect-grid {
  margin-top: 40px;
}

/* ── Features grid ── */
.feat-grid {
  margin-top: 40px;
}

/* ── FAQ: more breathing room between items ── */
#faq .faq-list {
  gap: 20px;
  margin-top: 40px;
}

/* ── Blog grid: consistent gap ── */
#blog .hscroll {
  gap: 24px;
}
#blog .cta-row {
  margin-top: 36px;
}

/* ── Listing spotlight: widen further, less floating ── */
.listing-spotlight-wrap {
  max-width: 560px;
  margin-top: 40px;
}

/* ── Calc: tighten top gap ── */
.pz {
  margin-top: 40px;
}

/* ── WCU header bottom gap ── */
.pz-wcu-header {
  margin-bottom: 36px;
}

/* ── WCU grid gap ── */
.pz-wcu-grid {
  gap: 20px;
}

/* ── Affiliate section padding ── */
#affiliate {
  padding-top: 80px;
  padding-bottom: 80px;
}

/* ── CTA section tighter ── */
.cta-section {
  padding: 80px 24px;
}

/* ── Verify section ── */
.verify-section {
  padding-top: 80px;
  padding-bottom: 80px;
}

/* ══ AFFILIATE CAROUSEL — v3 (10/10) ══ */

#affiliate {
  padding: 0 !important;
  overflow: hidden;
}
.aff-carousel-outer { width: 100%; }

/* Clipping viewport */
.aff-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Track: CSS transform slide */
.aff-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}

/* Each slide = full width, tall enough to breathe */
.aff-card {
  flex: 0 0 100%;
  width: 100%;
  padding: 64px 48px 56px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  min-height: 340px;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Colour variants */
.aff-card--navy  { background: #1e3a8a; }
.aff-card--dark  { background: #0f172a; }
.aff-card--white { background: #eef2ff; }

.aff-card--navy .aff-card-title,
.aff-card--dark .aff-card-title  { color: #fff; }
.aff-card--white .aff-card-title { color: #1e3a8a; }

.aff-card--navy .aff-card-body  { color: rgba(255,255,255,0.78); }
.aff-card--dark .aff-card-body  { color: rgba(255,255,255,0.65); }
.aff-card--white .aff-card-body { color: #334155; }

/* Dot-grid pattern — all slides */
.aff-card-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.aff-card--navy .aff-card-pattern {
  background-image: radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 24px 24px;
}
.aff-card--dark .aff-card-pattern {
  background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 24px 24px;
}
.aff-card--white .aff-card-pattern {
  background-image: radial-gradient(circle, rgba(30,58,138,0.09) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Eyebrow label (intro slide only) */
.aff-card-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  position: relative;
  z-index: 1;
}

/* Icon */
.aff-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.aff-card-icon svg    { width: 24px; height: 24px; }
.aff-card-icon--blue  { background: #dbeafe; }
.aff-card-icon--light { background: rgba(255,255,255,0.15); }

/* Title */
.aff-card-title {
  font-size: clamp(24px, 5.5vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0;
  max-width: 480px;
  position: relative;
  z-index: 1;
}

/* Body */
.aff-card-body {
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
  max-width: 340px;
  position: relative;
  z-index: 1;
}

/* CTA (intro slide only) */
.aff-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  position: relative;
  z-index: 1;
  margin-top: 4px;
  transition: opacity 0.2s, transform 0.2s;
}
.aff-card-btn:hover    { opacity: 0.88; transform: translateY(-1px); }
.aff-card-btn--white   { background: #fff; color: #1e3a8a; }
.aff-card-btn--navy    { background: #1e3a8a; color: #fff; }

/* Dots — inside the first slide, bottom-center */
.aff-dots-inner {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
  position: relative;
  z-index: 1;
}
.aff-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, width 0.3s;
}
.aff-dot--active {
  background: #fff;
  width: 22px;
  border-radius: 999px;
}

/* Nav arrows — on slide edges */
.aff-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  color: #fff;
  transition: background 0.2s;
  backdrop-filter: blur(6px);
}
.aff-nav svg { width: 16px; height: 16px; }
.aff-nav:hover { background: rgba(255,255,255,0.28); }
.aff-nav--prev { left: 14px; }
.aff-nav--next { right: 14px; }

/* Kill old affiliate classes */
.pz-affiliate-wrap,.pz-affiliate-left,.pz-affiliate-right,
.pz-affiliate-perk,.pz-affiliate-perk-icon,.pz-affiliate-perk-title,
.pz-affiliate-perk-desc,.pz-affiliate-head,.pz-affiliate-body,
.pz-affiliate-btn,.aff-heading-wrap { display: none !important; }

@media (max-width: 480px) {
  .aff-card { padding: 52px 28px 48px; min-height: 300px; }
}

/* ── Affiliate v3 polish: icons removed ── */

/* Hide any residual icon CSS */
.aff-card-icon { display: none !important; }

/* Title: bigger and bolder without icon competing */
.aff-card-title {
  font-size: clamp(28px, 6vw, 40px) !important;
  letter-spacing: -0.8px;
}

/* Body: slightly wider now icon is gone */
.aff-card-body {
  max-width: 400px !important;
  font-size: 16px !important;
}

/* Tighten gap between elements without icon */
.aff-card {
  gap: 14px !important;
  padding: 72px 48px 64px !important;
}

/* Slide fade on transition */
.aff-card {
  opacity: 0.92;
  transition: opacity 0.4s ease;
}
.aff-track .aff-card:first-child {
  opacity: 1;
}

@media (max-width: 480px) {
  .aff-card {
    padding: 60px 24px 56px !important;
  }
  .aff-card-body {
    max-width: 100% !important;
  }
}

/* ── How It Works banners: background behind phone mockup ── */
.story-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.story-banner.loaded {
  opacity: 1;
}
/* Swap visual bg to dark when banner present */
.story-visual:has(.story-banner.loaded) {
  background: #0c1a35 !important;
}
/* Phone stage sits above banner */
.hw1-stage, .hw2-stage, .hw3-stage {
  position: relative;
  z-index: 2;
}

/* ── Prevent image drag/save ── */
img {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
/* Re-enable pointer events on clickable images */
a img, button img, .listing-nav, .listing-card {
  pointer-events: auto;
}

/* ── Prevent image drag/save ── */
img {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
/* Re-enable pointer on interactive elements */
a img, button img, .listing-nav { pointer-events: auto; }

/* ── Listing hscroll cards ── */
#listings .hscroll {
  gap: 20px;
  padding: 4px 4px 16px;
}
#listings .listing-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
}