/* ── HERO VISUAL ── */
.cycle-card {
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:0;
  box-shadow:0 10px 40px rgba(22,22,34,.10); overflow:hidden; position:relative;
}
.cycle-header {
  padding:16px 20px; background:linear-gradient(90deg,#F0F9F9,#fff); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.cycle-header-label { display:flex; align-items:center; gap:8px }
.cycle-dot {
  width:8px; height:8px; border-radius:50%; background:#52C41A;
  box-shadow:0 0 0 3px rgba(82,196,26,.15); animation:sc-livepulse 2s infinite;
}
@keyframes sc-livepulse {
  0%,100%{box-shadow:0 0 0 3px rgba(82,196,26,.15)} 50%{box-shadow:0 0 0 5px rgba(82,196,26,.05)}
}
.cycle-header-text { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2) }
.cycle-header-sla {
  font-size:11px; font-weight:700; color:var(--teal); background:var(--teal-faint); padding:3px 10px;
  border-radius:99px; border:1px solid rgba(0,128,128,.15);
}
.cycle-body { padding:8px 0 }
.cycle-step {
  display:flex; align-items:center; gap:14px; padding:14px 24px; position:relative; transition:background .2s;
}
.cycle-step:not(:last-child)::after {
  content:''; position:absolute; left:36px; bottom:-1px; width:1.5px; height:14px; background:rgba(0,128,128,.2); z-index:0;
}
.cycle-step.active { background:linear-gradient(90deg,rgba(0,128,128,.04),transparent) }
.step-num {
  width:30px; height:30px; border-radius:50%; background:#fff; border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--muted);
  flex-shrink:0; transition:all .3s; z-index:1; position:relative;
}
.cycle-step.active .step-num { background:var(--teal); border-color:var(--teal); color:#fff; box-shadow:0 0 0 4px rgba(0,128,128,.12) }
.cycle-step.complete .step-num { background:var(--teal); border-color:var(--teal); color:#fff }
.cycle-step.complete .step-num::after { content:'✓'; font-size:13px }
.cycle-step.complete .step-num span { display:none }
.step-content { flex:1; min-width:0 }
.step-content h4 { font-size:13.5px; margin-bottom:2px; color:var(--text) }
.step-content p { font-size:12px; color:var(--muted); margin:0; max-width:none }
.step-day {
  font-size:10.5px; font-weight:700; color:var(--teal); background:var(--teal-faint); padding:3px 8px;
  border-radius:6px; flex-shrink:0; border:1px solid rgba(0,128,128,.1);
}
.cycle-step.complete .step-day { background:rgba(0,128,128,.15); color:#003D3D }
.cycle-footer {
  padding:18px 24px; background:var(--off); border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.cycle-footer-label { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em }
.cycle-footer-value { font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:22px; font-weight:800; color:var(--teal); letter-spacing:-.3px }
.cycle-footer-value .small { font-size:13px; font-weight:600; color:var(--muted); margin-left:4px }

/* ── Floating tags ── */
.float-tag {
  position:absolute; background:#fff; border:1px solid var(--border); border-radius:10px; padding:10px 14px;
  display:flex; align-items:center; gap:10px; box-shadow:0 8px 24px rgba(22,22,34,.08); font-size:12.5px;
  animation:sc-float 5s ease-in-out infinite;
}
.float-tag-1 { top:-20px; right:-10px; animation-delay:0s }
.float-tag-2 { bottom:-16px; left:-20px; animation-delay:1.5s }
@keyframes sc-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.float-tag-icon {
  width:24px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.float-tag-icon.red { background:var(--red-faint); color:var(--red) }
.float-tag-icon.green { background:rgba(82,196,26,.1); color:#3CB991 }
.float-tag-icon svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.float-tag strong { font-weight:700; color:var(--text); display:block; font-size:12px }
.float-tag .small { font-size:11px; color:var(--muted) }

/* ── Cycle card sub-components ── */
.cycle-header-icon { width:28px; height:28px; background:var(--teal); border-radius:7px; display:flex; align-items:center; justify-content:center; margin-right:4px }
.cycle-meta { padding:14px 20px; background:#fff; border-bottom:1px solid var(--border); display:flex; gap:24px }
.cycle-meta-item { font-size:11px; color:var(--muted) }
.cycle-meta-value { color:var(--text); font-size:12px }
.cycle-meta-value.mono { font-family:'IBM Plex Mono',monospace }
.cycle-stats { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--border) }
.cycle-stat { padding:14px 18px; text-align:center }
.cycle-stat:not(:last-child) { border-right:1px solid var(--border) }
.cycle-stat-n { font-family:'Plus Jakarta Sans',sans-serif; font-size:26px; font-weight:800; color:var(--text); line-height:1 }
.cycle-stat-n.teal { color:var(--teal) }
.cycle-stat-n.amber { color:#F59E0B }
.cycle-stat-d { font-size:10.5px; color:var(--muted); margin-top:4px }
.cycle-findings { padding:0 }
.cycle-findings-head { display:grid; grid-template-columns:1fr 72px 80px 80px; padding:8px 18px; background:var(--off); border-bottom:1px solid var(--border) }
.cycle-col-head { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.cycle-finding-row { display:grid; grid-template-columns:1fr 72px 80px 80px; padding:10px 18px; border-bottom:1px solid var(--border); align-items:center }
.cycle-finding-row:last-child { border-bottom:none }
.cycle-finding-name { font-size:12px; color:var(--text); font-weight:500 }
.badge-sev-high { font-size:10px; font-weight:700; color:#DC2626; background:rgba(220,38,38,.08); padding:2px 7px; border-radius:4px }
.badge-sev-med { font-size:10px; font-weight:700; color:#D97706; background:rgba(217,119,6,.08); padding:2px 7px; border-radius:4px }
.cycle-owasp { font-size:11px; color:var(--muted); font-family:'IBM Plex Mono',monospace }
.badge-status-blocked { font-size:10px; font-weight:700; color:var(--teal); background:var(--teal-faint); padding:2px 7px; border-radius:4px }
.badge-status-fix { font-size:10px; font-weight:700; color:#F59E0B; background:rgba(245,158,11,.08); padding:2px 7px; border-radius:4px }
.cycle-stamp { padding:12px 18px; background:var(--off); border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between }
.cycle-stamp-left { display:flex; align-items:center; gap:8px }
.cycle-stamp-check { width:20px; height:20px; background:var(--teal); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; font-weight:700; flex-shrink:0 }
.cycle-stamp-text { font-size:11px; color:var(--text-2); font-weight:600 }
.cycle-stamp-brand { font-size:10px; color:var(--muted) }

/* ==========================================
   LOGO STRIP
   ========================================== */
.logo-strip-label { text-align:center; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:20px }
.logo-strip-viewport {
  overflow:hidden; position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.logo-strip-track { display:flex; gap:14px; width:max-content; animation:sc-logoScroll 42s linear infinite }
.logo-strip-viewport:hover .logo-strip-track { animation-play-state:paused }
@keyframes sc-logoScroll {
  0%{transform:translateX(0)} 100%{transform:translateX(calc(-50% - 7px))}
}
.pm-logo {
  flex-shrink:0; width:170px; height:72px; background:#fff; border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(22,22,34,.04); border-radius:10px;
  display:flex; align-items:center; justify-content:center; padding:0 18px; text-align:center;
  transition:box-shadow .2s,transform .2s;
}
.pm-logo:hover { box-shadow:0 4px 12px rgba(22,22,34,.08); transform:translateY(-2px) }
.lm { display:inline-flex; align-items:center; gap:6px; font-family:'Plus Jakarta Sans',sans-serif; color:#1A1A1A; line-height:1 }
.lm-ideal { font-weight:700; font-size:13.5px; letter-spacing:-.2px }
.lm-vict { font-weight:900; font-size:14px; letter-spacing:1px; color:#E2071B }
.lm-aditya { font-weight:700; font-size:10px; letter-spacing:.6px; flex-direction:column; gap:3px; text-align:center }
.lm-titan { font-weight:600; font-size:14px; letter-spacing:1px; flex-direction:column; gap:0; color:#1A1A1A }
.lm-titan span { font-size:7.5px; letter-spacing:1.8px; color:#777; font-weight:500; margin-top:2px }
.lm-itc { font-family:Georgia,'Times New Roman',serif; font-weight:600; font-style:italic; font-size:20px; color:#D32F2F; gap:4px }
.lm-itc span { font-size:11px; font-style:normal; font-family:inherit; color:#1A1A1A; font-weight:500 }
.lm-yamaha { font-weight:900; font-size:14px; letter-spacing:1px; color:#5B1B71; flex-direction:column; gap:0 }
.lm-yamaha span { font-family:'Brush Script MT',cursive; font-size:11px; color:#7B2D8F; letter-spacing:0; font-weight:400; font-style:italic; margin-top:1px; text-transform:none }
.lm-lti { font-weight:800; font-size:14.5px; letter-spacing:-.4px; color:#1B468F }
.lm-lti em { font-style:normal; color:#F26522 }
.lm-browser { font-weight:700; font-size:13px; color:#1A1A1A; gap:7px }
.lm-yes { font-weight:900; font-size:13.5px; letter-spacing:2px; color:#1A1A1A; gap:5px }
.lm-tcs { font-weight:800; font-size:15px; color:#1B72BA; flex-direction:column; gap:1px; line-height:1 }
.lm-tcs span { font-size:7px; letter-spacing:.8px; color:#666; font-weight:600; text-transform:uppercase }

/* ==========================================
   THE MOMENT / PROBLEM SECTION
   ========================================== */
.moment-section { padding:40px 0px; position:relative; overflow:hidden; background:#fff }

/* Red eyebrow variant (problem section) */
.moment-eyebrow {
  display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red); margin-bottom:18px; padding:5px 14px;
  background:var(--red-faint); border:1px solid rgba(226,75,74,.15); border-radius:99px;
}
.moment-eyebrow::before {
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--red); animation:sc-pulse 2.5s infinite;
}
/* ── EXPOSURE COMPARISON ── */
.exposure-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px }
.exposure-card { border-radius:16px; padding:32px; position:relative; overflow:hidden }
.exposure-card.bad { background:linear-gradient(180deg,#FFF5F5 0%,#fff 100%); border:1px solid rgba(226,75,74,.2) }
.exposure-card.good { background:linear-gradient(180deg,#F0F9F9 0%,#fff 100%); border:1px solid rgba(0,128,128,.25) }
.exposure-label {
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px;
  display:inline-flex; align-items:center; gap:8px; padding:5px 11px; border-radius:99px;
}
.exposure-label.bad { color:var(--red); background:rgba(226,75,74,.08); border:1px solid rgba(226,75,74,.18) }
.exposure-label.good { color:var(--teal); background:var(--teal-faint); border:1px solid rgba(0,128,128,.18) }
.exposure-card h3 { font-size:23px; margin-bottom:8px; letter-spacing:-.3px }
.exposure-card .subhead { font-size:14px; color:var(--muted); margin-bottom:24px }
.exposure-timeline { display:flex; flex-direction:column; gap:0; margin-bottom:20px }
.tl-step {
  display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px dashed var(--border); position:relative;
}
.tl-step:last-child { border-bottom:none }
.tl-icon {
  width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:13px; font-weight:700;
}
.tl-icon.x { background:rgba(226,75,74,.1); color:var(--red) }
.tl-icon.check { background:rgba(0,128,128,.12); color:var(--teal) }
.tl-text { flex:1; font-size:14px; color:var(--text-2) }
.tl-text strong { color:var(--text) }
.tl-time {
  font-size:11.5px; font-weight:700; color:var(--muted); background:#fff; padding:3px 9px;
  border-radius:5px; border:1px solid var(--border); flex-shrink:0;
}
.tl-time.danger { color:var(--red); border-color:rgba(226,75,74,.2); background:rgba(226,75,74,.04) }
.tl-time.safe { color:var(--teal); border-color:rgba(0,128,128,.2); background:rgba(0,128,128,.04) }
.exposure-window {
  margin-top:16px; padding:16px 18px; border-radius:10px; display:flex; align-items:center; justify-content:space-between;
}
.exposure-window.bad {
  background:linear-gradient(90deg,rgba(226,75,74,.12),rgba(226,75,74,.04)); border:1px solid rgba(226,75,74,.2);
}
.exposure-window.good {
  background:linear-gradient(90deg,rgba(0,128,128,.15),rgba(0,128,128,.04)); border:1px solid rgba(0,128,128,.2);
}
.exposure-window-label { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase }
.exposure-window.bad .exposure-window-label { color:var(--red) }
.exposure-window.good .exposure-window-label { color:var(--teal) }
.exposure-window-value { font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:20px; font-weight:800; letter-spacing:-.3px }
.exposure-window.bad .exposure-window-value { color:#791F1F }
.exposure-window.good .exposure-window-value { color:#003D3D }

/* ==========================================
   VULN EXAMPLE SECTION (dark)
   ========================================== */
.section-dark-wrap { padding:80px 0 }
.section-dark {
  position:relative; overflow:hidden; background:var(--dark-bg); border-radius:20px; padding:72px 64px;
  margin:0 auto; max-width:1180px;
}
.section-dark::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(76,199,193,.5) 40%,rgba(76,199,193,.5) 60%,transparent); z-index:0;
}
.section-dark::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(76,199,193,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(76,199,193,.025) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,black 20%,transparent 100%); z-index:0;
}
.section-dark>* { position:relative; z-index:1 }

/* Teal-hc section-label override inside dark section */
.section-dark .section-label { color:var(--teal-hc); background:var(--teal-hc-faint); border-color:var(--teal-hc-border) }
.section-dark .section-label::before { background:var(--teal-hc) }
.section-dark h2 { color:var(--dark-text) }
.section-dark h2 em,.footer-cta-section h2 em { color:var(--teal-hc) }
.section-dark .section-header { margin-bottom:36px }
.section-dark-lede { color:var(--dark-text-2); font-size:16px; max-width:600px; margin:18px auto 0 }
.mono { font-family:'IBM Plex Mono',monospace }
.vuln-explainer .mono { color:var(--teal-hc); font-size:13px }

/* ── VULNERABILITY CODE BLOCK ── */
.vuln-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-top:48px }
.vuln-code {
  background:#0F0F1F; border:1px solid var(--dark-border); border-radius:12px; padding:0;
  overflow:hidden; font-family:'IBM Plex Mono',monospace;
}
.vuln-code-header {
  padding:12px 18px; background:#15152A; border-bottom:1px solid var(--dark-border);
  display:flex; align-items:center; gap:8px;
}
.code-dot { width:10px; height:10px; border-radius:50% }
.code-dot.r{background:#FF5F57} .code-dot.y{background:#FEBC2E} .code-dot.g{background:#28C840}
.code-title { margin-left:8px; font-size:11px; color:var(--dark-muted); font-family:'IBM Plex Mono',monospace }
.vuln-code-body { padding:20px 22px; font-size:13px; line-height:1.85; color:var(--dark-text-2) }
.vuln-code-body .comment{color:#666688}
.vuln-code-body .keyword{color:#FF7B72}
.vuln-code-body .string{color:#A5D6FF}
.vuln-code-body .var{color:#79C0FF}
.vuln-code-body .highlight{background:rgba(226,75,74,.15);padding:0 3px;border-radius:3px;color:#FFB4B4}
.vuln-code-body .rule{background:rgba(76,199,193,.12);padding:0 3px;border-radius:3px;color:#7FE4DE}
.vuln-explainer h3 { color:var(--dark-text); margin-bottom:14px; font-size:24px; letter-spacing:-.4px }
.vuln-explainer .vuln-type {
  display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#FFB4B4; background:rgba(226,75,74,.12); padding:4px 10px; border-radius:5px;
  border:1px solid rgba(226,75,74,.18); margin-bottom:14px;
}
.vuln-explainer p { color:var(--dark-text-2); font-size:15px; line-height:1.7; margin-bottom:18px; max-width:none }
.vuln-explainer p strong { color:var(--dark-text); font-weight:600 }
.vuln-flow { display:flex; flex-direction:column; gap:12px; margin-top:24px }
.vuln-flow-item { display:flex; gap:14px; align-items:flex-start }
.vuln-flow-num {
  font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:13px; font-weight:800;
  color:var(--teal-hc); width:24px; flex-shrink:0; padding-top:1px;
}
.vuln-flow-text { font-size:14px; color:var(--dark-text-2); line-height:1.55 }
.vuln-flow-text strong { color:var(--dark-text) }

/* ── VULN TABS ── */
.vuln-tabs { display:flex; gap:8px; justify-content:center; margin-bottom:36px; flex-wrap:wrap }
.vuln-tab {
  background:rgba(255,255,255,.04); border:1px solid var(--dark-border); color:var(--dark-text-2);
  padding:9px 18px; border-radius:8px; font-family:'IBM Plex Sans',sans-serif; font-size:13px;
  font-weight:600; cursor:pointer; transition:all .18s; letter-spacing:-.1px;
}
.vuln-tab:hover { background:rgba(76,199,193,.08); border-color:var(--teal-hc-border); color:var(--dark-text) }
.vuln-tab.active { background:var(--teal-hc-faint); border-color:var(--teal-hc); color:var(--teal-hc) }
.vuln-panel { display:none; animation:sc-fadeInTab .4s ease }
.vuln-panel.active { display:block }
@keyframes sc-fadeInTab { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

/* ==========================================
   PROCESS SECTION
   ========================================== */
.process-section { padding:40px 0px; background:var(--off); border-top:1px solid var(--border) }
.process-lede { font-size:17px; color:var(--muted);  margin:16px auto 0; max-width:580px; line-height:1.6 }
.process-steps { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:0; align-items:start }
.process-step {
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:30px 24px;
  position:relative; overflow:hidden; transition:all .25s;
}
.process-step:hover { border-color:rgba(0,128,128,.3); box-shadow:0 8px 28px rgba(0,128,128,.07); transform:translateY(-2px) }
.process-step::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--teal),rgba(0,128,128,.3));
}
.process-step-num { font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:13px; font-weight:800; color:var(--teal); letter-spacing:.06em; margin-bottom:4px }
.process-step-label { font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:18px }
.process-step h3 { font-size:17px; margin-bottom:10px; letter-spacing:-.3px; line-height:1.3 }
.process-step p { font-size:13.5px; color:var(--text-2); line-height:1.6; margin:0; max-width:none }
.process-connector { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 8px; margin-top:80px }
.process-connector-line { width:24px; height:1px; background:var(--teal-line) }
.process-connector-arrow { font-size:18px; color:var(--teal); margin-top:2px; opacity:.5 }

/* ==========================================
   70/30 SPLIT SECTION
   ========================================== */
.split-section { padding:40px 0px; background:var(--off) }
.split-visual {
  display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:16px; overflow:hidden;
  border:1px solid var(--border); background:#fff; max-width:1080px; margin:0 auto;
  box-shadow:0 4px 24px rgba(22,22,34,.04);
}
.split-side { padding:40px }
.split-30 { background:#fff; border-right:1px solid var(--border); text-align:center }
.split-70 { background:linear-gradient(180deg,rgba(0,128,128,.04),#fff); text-align:left; position:relative; overflow:hidden }
.split-70::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--teal),transparent) }
.split-side .pct { font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:800; line-height:1; letter-spacing:-2px }
.split-30 .pct { font-size:80px; color:var(--muted); opacity:.45 }
.split-70 .pct {
  font-size:80px; color:var(--teal);
  background:linear-gradient(180deg,var(--teal),#005252);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.split-side .label { font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-top:14px; margin-bottom:18px }
.split-30 .label { color:var(--muted) }
.split-70 .label { color:var(--teal) }
.split-side h3 { font-size:21px; margin-bottom:12px; letter-spacing:-.3px }
.split-30 h3 { color:var(--text-2) }
.split-70 h3 { color:var(--text) }
.split-side p { font-size:14.5px; color:var(--muted); line-height:1.65; max-width:none }
.split-70 p { color:var(--text-2) }
.split-70 strong { color:var(--text); font-weight:700 }
.split-70-points { margin-top:20px; display:flex; flex-direction:column; gap:10px }
.split-70-point { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--text-2); line-height:1.5 }
.split-70-point::before {
  content:'✓'; color:var(--teal); font-weight:700; flex-shrink:0; width:18px; height:18px; border-radius:50%;
  background:var(--teal-faint); display:flex; align-items:center; justify-content:center; font-size:11px; margin-top:1px;
}
.split-70-point strong { color:var(--text) }

/* ==========================================
   MOAT SECTION
   ========================================== */
.moat-section { padding:40px 0px; background:#fff }
.moat-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:20px }
.moat-card { grid-column:span 2 }
.moat-card:nth-child(4) { grid-column:2 / span 2 }
.moat-card:nth-child(5) { grid-column:4 / span 2 }
.moat-card {
  padding:32px 26px; border:1px solid var(--border); border-radius:14px; background:#fff;
  transition:all .25s; position:relative; overflow:hidden;
}
.moat-card:hover { border-color:rgba(0,128,128,.4); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,128,128,.08) }
.moat-card::before { content:''; position:absolute; top:0; left:0; width:0; height:3px; background:var(--teal); transition:width .3s }
.moat-card:hover::before { width:100% }
.moat-icon {
  width:44px; height:44px; border-radius:11px; background:var(--teal-light);
  border:1px solid rgba(0,128,128,.18); display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.moat-icon svg { width:22px; height:22px; fill:none; stroke:var(--teal); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.moat-card h3 { font-size:17px; margin-bottom:8px; letter-spacing:-.2px }
.moat-card p { font-size:13.5px; color:var(--muted); margin:0; max-width:none; line-height:1.6 }

/* ==========================================
   DESIGN PARTNER / EARLY ACCESS
   ========================================== */
.ea-section {
  padding:40px 0px; background:#fff; border-top:1px solid var(--border); position:relative; overflow:hidden;
}
.ea-section::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:60%; height:300px;
  background:radial-gradient(ellipse at center top,rgba(0,128,128,.08),transparent 70%); pointer-events:none;
}
.ea-section>* { position:relative; z-index:1 }
.ea-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:48px }
.ea-card {
  background:linear-gradient(180deg,var(--off),#fff); border:1px solid var(--border); border-radius:14px;
  padding:28px 24px; transition:transform .2s,box-shadow .2s,border-color .2s;
}
.ea-card:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,128,128,.08); border-color:rgba(0,128,128,.25) }
.ea-num {
  font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:11px; font-weight:800; color:var(--teal);
  letter-spacing:.12em; margin-bottom:14px; display:inline-block; padding:3px 10px;
  background:var(--teal-faint); border-radius:5px; border:1px solid rgba(0,128,128,.15);
}
.ea-card h3 { font-size:17px; margin-bottom:10px; letter-spacing:-.2px; line-height:1.3 }
.ea-card p { font-size:13.5px; line-height:1.6; color:var(--text-2); margin:0; max-width:none }
.ea-criteria {
  background:linear-gradient(135deg,rgba(0,128,128,.05),rgba(89,11,213,.03));
  border:1px solid var(--teal-line); border-radius:14px; padding:32px 36px; margin-bottom:40px;
}
.ea-criteria-label { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); margin-bottom:18px }
.ea-criteria-list { display:grid; grid-template-columns:1fr 1fr; gap:14px 32px }
.ea-criteria-item { font-size:14px; color:var(--text-2); line-height:1.55; position:relative; padding-left:24px }
.ea-criteria-item::before { content:'✓'; position:absolute; left:0; top:0; color:var(--teal); font-weight:700; font-size:15px }
.ea-criteria-item strong { color:var(--text); font-weight:600 }
.ea-cta-row { text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px }
.ea-cta-note { font-size:13px; color:var(--muted); font-style:italic }

/* ==========================================
   COMPLIANCE SECTION
   ========================================== */
.compliance-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1080px; margin:0 auto }
.compliance-card {
  border:1px solid var(--border); border-radius:14px; padding:26px; background:#fff;
  transition:all .2s; display:flex; flex-direction:column; gap:14px;
}
.compliance-card:hover { border-color:rgba(0,128,128,.3); transform:translateY(-2px); box-shadow:0 6px 20px rgba(22,22,34,.05) }
.compliance-badge {
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--teal);
  background:var(--teal-faint); border:1px solid rgba(0,128,128,.15); padding:5px 12px;
  border-radius:6px; display:inline-block; align-self:flex-start;
}
.compliance-card h4 { font-size:15.5px; margin-bottom:4px; letter-spacing:-.2px }
.compliance-card p { font-size:13.5px; color:var(--muted); margin:0; max-width:none; line-height:1.6 }


/* ==========================================
   FOOTER CTA SECTION (dark)
   ========================================== */
.footer-cta-section { padding:40px 0px; position:relative; overflow:hidden; background:var(--dark-bg) }
.footer-cta-section::before {
  content:''; position:absolute; top:-200px; right:-200px; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(76,199,193,.12) 0%,transparent 70%);
}
.footer-cta-section::after {
  content:''; position:absolute; bottom:-200px; left:-200px; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(119,42,244,.1) 0%,transparent 70%);
}
.footer-cta-section .eyebrow {
  display:inline-flex; align-items:center; gap:10px; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal-hc); margin-bottom:28px; padding:6px 14px;
  background:var(--teal-hc-faint); border:1px solid var(--teal-hc-border); border-radius:99px;
}
.footer-cta-section .eyebrow::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--teal-hc); animation:sc-pulse 2.5s infinite }

.footer-cta-section p { color:var(--dark-text-2); font-size:18px; margin:20px auto; max-width:800px; line-height:1.6 }
.footer-cta-btns { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:32px }



/* ==========================================
   FADE-IN ANIMATION
   ========================================== */
.sc-fade {
  opacity:0; transform:translateY(10px); transition:opacity .45s ease,transform .45s ease;
}
.sc-fade.in { opacity:1; transform:none }

/* ==========================================
   RESPONSIVE
   ========================================== */
@media(max-width:960px){
  
  .float-tag { display:none }
  .process-steps { grid-template-columns:1fr; gap:24px }
  .process-connector { display:none }
  .exposure-grid { grid-template-columns:1fr }
  .vuln-grid { grid-template-columns:1fr; gap:32px }
  .split-visual { grid-template-columns:1fr }
  .split-30 { border-right:none; border-bottom:1px solid var(--border) }
  .moat-grid { grid-template-columns:repeat(2,1fr) }
  .moat-card,.moat-card:nth-child(4),.moat-card:nth-child(5) { grid-column:auto }
  .compliance-grid { grid-template-columns:1fr 1fr }
  .section-dark { padding:48px 28px; border-radius:14px }
 
  .ea-grid { grid-template-columns:repeat(2,1fr) }
  .ea-criteria-list { grid-template-columns:1fr }
  .wrap-narrow { padding:0 24px }
}
@media(max-width:620px){
 
  .moment-section,.split-section,.moat-section,
  .compliance-section,.faq-section,.footer-cta-section,
  .ea-section { padding:20px 0 }
  .moat-grid,.compliance-grid { grid-template-columns:1fr }

  .split-70 .pct { font-size:88px }
  .split-30 .pct { font-size:66px }
  .sticky-cta { bottom:14px; right:14px; padding:11px 18px; font-size:13px }
  .ea-grid { grid-template-columns:1fr }
  .ea-criteria { padding:24px 22px }
}