/* HERO */
.hero { background:var(--navy); min-height:93vh; display:flex; align-items:center; padding:7rem 5vw 6rem; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:0; right:0; width:38%; height:100%; background:var(--navy-deep); clip-path:polygon(18% 0,100% 0,100% 100%,0% 100%); z-index:0; }
.hero::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--orange); z-index:2; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; max-width:1200px; margin:0 auto; width:100%; position:relative; z-index:1; }
.hero-tag { display:inline-flex; align-items:center; gap:0.5rem; font-size:0.75rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#F07A50; margin-bottom:1.5rem; }
.hero-tag::before { content:''; display:block; width:20px; height:2px; background:var(--orange); }
.hero h1 { font-family:var(--font-display); font-size:clamp(2.6rem,4.5vw,4rem); line-height:1.08; letter-spacing:-0.03em; color:var(--white); margin-bottom:1.5rem; }
.hero h1 .orange { color:var(--orange); }
.hero-sub { font-size:1.05rem; color:rgba(255,255,255,0.65); line-height:1.75; margin-bottom:2.5rem; max-width:480px; }
.hero-ctas { display:flex; gap:1rem; flex-wrap:wrap; }
.btn-orange { background:var(--orange); color:white; padding:0.85rem 2rem; border-radius:6px; text-decoration:none; font-weight:500; font-size:0.925rem; display:inline-block; transition:background 0.15s; }
.btn-orange:hover{background:var(--orange-warm);color:white;}
.btn-ghost { border:1px solid rgba(255,255,255,0.25); color:rgba(255,255,255,0.85); padding:0.83rem 2rem; border-radius:6px; text-decoration:none; font-weight:500; font-size:0.925rem; display:inline-block; transition:all 0.15s; }
.btn-ghost:hover { border-color:rgba(255,255,255,0.6); color:white; }
.hero-stats { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.08); border-radius:12px; overflow:hidden; }
.hero-stat { background:rgba(255,255,255,0.04); padding:1.75rem 1.5rem; }
.hero-stat-num { font-family:var(--font-body); font-weight:700; font-size:2.4rem; color:white; letter-spacing:-0.04em; line-height:1; margin-bottom:0.4rem; }
.hero-stat-num .orange { color:var(--orange); }
.hero-stat-label { font-size:0.8rem; color:rgba(255,255,255,0.72); line-height:1.45; }
.hero-trust { grid-column:1/-1; background:rgba(232,82,26,0.1); border-top:1px solid rgba(232,82,26,0.18); padding:1rem 1.5rem; display:flex; align-items:center; gap:0.75rem; }
.hero-trust-dot { width:6px; height:6px; background:var(--orange); border-radius:50%; flex-shrink:0; }
.hero-trust-text { font-size:0.8rem; color:rgba(255,255,255,0.55); }
.hero-trust-text strong { color:rgba(255,255,255,0.8); font-weight:500; }
/* SHARED */
section { padding:6rem 5vw; }
.section-inner { max-width:1200px; margin:0 auto; }
.eyebrow { display:inline-flex; align-items:center; gap:0.5rem; font-size:0.75rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--orange); margin-bottom:1rem; }
.eyebrow::before { content:''; display:block; width:16px; height:2px; background:var(--orange); flex-shrink:0; }
.section-heading { font-family:var(--font-display); font-size:clamp(1.9rem,3vw,2.75rem); letter-spacing:-0.025em; line-height:1.12; color:var(--navy); margin-bottom:1.25rem; }
.section-heading .orange { color:var(--orange); }
.section-heading.light { color:white; }
.section-intro { font-size:1.05rem; color:var(--slate); max-width:600px; line-height:1.75; }
.section-intro.light { color:rgba(255,255,255,0.6); }
/* WHO WE SERVE */
.serve-section { background:var(--offwhite); }
.serve-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:3.5rem; }
.serve-grid--four { grid-template-columns:repeat(4,1fr); }
.serve-card { background:var(--white); border:1px solid var(--border-light); border-radius:10px; padding:2rem 1.75rem; position:relative; overflow:hidden; transition:border-color 0.2s,transform 0.2s; cursor:pointer; text-decoration:none; display:block; color:inherit; }
.serve-card--featured { border-top:3px solid var(--orange); padding-top:1.75rem; }
.serve-card:hover { border-color:var(--orange); transform:translateY(-3px); }
.serve-card::after { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--border-light); }
.serve-card:hover::after { background:var(--orange); }
.serve-num { font-family:var(--font-body); font-weight:700; font-size:3rem; color:var(--navy-light); letter-spacing:-0.05em; line-height:1; margin-bottom:1rem; }
.serve-num--symbol { color:var(--orange); opacity:0.4; }
.serve-card h3 { font-weight:600; font-size:1.05rem; color:var(--navy); margin-bottom:0.75rem; }
.serve-card p { font-size:0.875rem; color:var(--slate); line-height:1.65; margin-bottom:1.25rem; }
.serve-link { font-size:0.82rem; font-weight:600; color:var(--orange); display:inline-flex; align-items:center; gap:0.4rem; }
.serve-link::after { content:'→'; }
/* PLATFORM */
.platform-section { background:var(--white); }
.platform-screenshots { margin-top:1.5rem;margin-bottom:3rem; }
.screenshot-tabs { display:flex; gap:0.5rem; margin-bottom:0; }
.screenshot-tab { background:none; border:none; padding:0.55rem 1.1rem; font-family:var(--font-body); font-size:0.82rem; font-weight:500; color:var(--slate); cursor:pointer; border-radius:8px 8px 0 0; border:1px solid transparent; border-bottom:none; transition:background 0.15s,color 0.15s; }
.screenshot-tab.active { background:var(--navy); color:white; border-color:var(--navy); }
.screenshot-tab:not(.active):hover { background:var(--navy-pale); color:var(--navy); }
.screenshot-window { border-radius:0 12px 12px 12px; overflow:hidden; box-shadow:0 20px 60px rgba(26,45,69,0.18); border:1px solid var(--border); }
.screenshot-chrome { background:var(--navy); padding:0.6rem 1rem; display:flex; align-items:center; gap:0.4rem; }
.chrome-dot { width:11px; height:11px; border-radius:50%; display:inline-block; flex-shrink:0; }
.chrome-dot--red { background:#FF5F57; }
.chrome-dot--yellow { background:#FEBC2E; }
.chrome-dot--green { background:#28C840; }
.chrome-bar { flex:1; background:rgba(255,255,255,0.1); border-radius:4px; height:22px; margin:0 1rem; font-size:0.7rem; color:rgba(255,255,255,0.45); display:flex; align-items:center; padding:0 0.75rem; }
.screenshot-panel { display:none; line-height:0; }
.screenshot-panel.active { display:block; }
.screenshot-panel img { width:100%; height:auto; display:block; }
.platform-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; margin-top:3.5rem; }
.feature-list { display:flex; flex-direction:column; }
.feature-item { display:flex; gap:1rem; padding:1.25rem 1rem; border-bottom:1px solid var(--border-light); cursor:default; }
.feature-item:first-child { border-top:1px solid var(--border-light); }
.feature-icon { width:36px; height:36px; background:var(--navy-pale); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.feature-content h4 { font-weight:600; font-size:0.9rem; color:var(--navy); margin-bottom:0.25rem; }
.feature-content p { font-size:0.85rem; color:var(--slate); line-height:1.6; }
.platform-aside { position:sticky; top:90px; }
.flow-card { background:var(--navy); border-radius:12px; padding:2rem; color:white; margin-bottom:1.25rem; }
.flow-label { font-size:0.7rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--orange); margin-bottom:1.5rem; display:flex; align-items:center; gap:0.5rem; }
.flow-label::before { content:''; display:block; width:12px; height:2px; background:var(--orange); }
.flow-step { display:flex; align-items:center; gap:0.85rem; padding:0.75rem 0; border-bottom:1px solid rgba(255,255,255,0.07); font-size:0.875rem; color:rgba(255,255,255,0.8); }
.flow-step:last-child { border-bottom:none; }
.flow-n { width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:600; flex-shrink:0; color:white; }
.flow-step.auto .flow-n { background:rgba(232,82,26,0.2); border-color:rgba(232,82,26,0.4); color:var(--orange); }
.flow-badge { margin-left:auto; font-size:0.65rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; padding:0.2rem 0.55rem; border-radius:3px; background:rgba(232,82,26,0.15); color:var(--orange); border:1px solid rgba(232,82,26,0.25); }
.integration-note { background:var(--navy-pale); border:1px solid var(--border-light); border-radius:10px; padding:1.25rem; display:flex; gap:0.75rem; align-items:flex-start; }
.int-icon { width:32px; height:32px; flex-shrink:0; background:var(--navy); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:0.9rem; }
.integration-note h5 { font-weight:600; font-size:0.85rem; color:var(--navy); margin-bottom:0.2rem; }
.integration-note p { font-size:0.8rem; color:var(--slate); line-height:1.5; }
/* WHY CYMONZ — outcomes-led, not feature-led */
.why-section { background:var(--navy); }
.outcomes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3.5rem; }
.outcome-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:2.25rem; }
.outcome-card--full { grid-column:1/-1; background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.15); }
.outcome-card-inner { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; }
.outcome-tag { font-size:0.7rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--orange); margin-bottom:0.75rem; }
.outcome-card h3 { font-family:var(--font-display); font-size:1.2rem; color:white; margin-bottom:0.75rem; letter-spacing:-0.02em; }
.outcome-card p { font-size:0.85rem; color:rgba(255,255,255,0.55); line-height:1.65; }
.outcome-bullets { list-style:none; margin-top:1rem; display:flex; flex-direction:column; gap:0.5rem; }
.outcome-bullets--flush { margin-top:0; }
.outcome-bullets li { font-size:0.82rem; color:rgba(255,255,255,0.5); display:flex; gap:0.6rem; }
.outcome-bullets li::before { content:''; width:4px; height:4px; background:var(--orange); border-radius:50%; flex-shrink:0; margin-top:0.6rem; }
/* LOGO STRIP */
.logo-strip { padding:3rem 0; background:var(--navy-pale); border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); overflow:hidden; }
.logo-strip-heading { font-size:0.75rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate); text-align:center; margin-bottom:1.75rem; }
.logo-strip-wrapper { position:relative; overflow:hidden; }
.logo-img { height:36px; width:auto; display:block; }
.logo-img[src*="logo-clearbank"] { height:53px; }
.logo-img[src*="logo-emerge"]    { height:32px; }
.logo-img[src*="logo-aws"]       { padding-top:6px; }
.logo-img[src*="logo-qip"]       { padding-top:2px; }
.logo-img[src*="logo-visa"]      { height:24px; }
.logo-img[src*="logo-imx"]       { height:24px; }
.logo-img[src*="logo-linkfx"]    { height:24px; }
.logo-img[src*="logo-tdb"]       { height:24px; }
.logo-img[src*="logo-convera"]   { height:23px; }
.logo-img[src*="logo-boq"]       { height:24px; }
.logo-img[src*="logo-shoprite"]  { height:28px; }
/* WHY NOW */
.why-now-section { background:var(--offwhite); }
.why-now-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; margin-top:3rem; }
.why-now-cards { display:flex; flex-direction:column; gap:1.25rem; }
.why-now-card { background:white; border:1px solid var(--border-light); border-radius:10px; padding:1.5rem; border-left:3px solid var(--navy-light); }
.why-now-card--primary { border-left-color:var(--orange); }
.why-tag { font-size:0.7rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate); margin-bottom:0.5rem; }
.why-tag--primary { color:var(--orange); }
.why-now-card h4 { font-weight:600; font-size:0.95rem; color:var(--navy); margin-bottom:0.5rem; }
.why-now-card p { font-size:0.85rem; color:var(--slate); line-height:1.65; }
.why-now-aside { display:flex; flex-direction:column; gap:1.25rem; }
.why-data-card { background:var(--navy); border-radius:12px; padding:2rem; }
.why-data-rows { display:flex; flex-direction:column; gap:0.75rem; }
.why-data-row { display:flex; justify-content:space-between; padding:0.75rem 0; border-bottom:1px solid rgba(255,255,255,0.07); }
.why-data-row:last-child { border-bottom:none; }
.why-data-label { font-size:0.875rem; color:rgba(255,255,255,0.7); }
.why-data-value { font-family:var(--font-body); font-weight:700; font-size:1.1rem; color:var(--orange); }
.why-opportunity { background:var(--orange-pale); border:1px solid rgba(232,82,26,0.2); border-radius:12px; padding:2rem; }
.why-opportunity p { font-size:1.05rem; color:var(--navy); line-height:1.6; margin-bottom:1.25rem; }
.btn-orange--sm { font-size:0.875rem; padding:0.75rem 1.75rem; }
/* PROOF */
.proof-section { background:var(--offwhite); }
.proof-row { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; margin-top:3.5rem; }
.proof-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border-light); border:1px solid var(--border-light); border-radius:10px; overflow:hidden; }
.proof-stat { background:white; padding:1.75rem 1.5rem; }
.proof-num { font-family:var(--font-body); font-weight:700; font-size:2.6rem; letter-spacing:-0.04em; line-height:1; color:var(--navy); margin-bottom:0.4rem; }
.proof-num .orange { color:var(--orange); }
.proof-stat-label { font-size:0.8rem; color:var(--slate); line-height:1.5; }
.proof-right { display:flex; flex-direction:column; gap:1.25rem; }
.quote-card { background:var(--navy); border-radius:10px; padding:2rem 2rem 1.75rem; position:relative; }
.quote-mark { font-family:var(--font-display); font-size:4.5rem; color:var(--orange); line-height:1; opacity:0.4; position:absolute; top:0.5rem; left:1.75rem; }
.quote-text { font-family:var(--font-body); font-size:1rem; line-height:1.75; color:rgba(255,255,255,0.9); padding-top:1.75rem; }
.quote-attr { margin-top:1.25rem; font-size:0.8rem; color:rgba(255,255,255,0.45); }
.quote-attr strong { color:rgba(255,255,255,0.75); font-weight:500; }
.growth-tag { background:var(--orange-pale); border:1px solid rgba(232,82,26,0.2); border-radius:10px; padding:1.25rem 1.5rem; display:flex; align-items:center; gap:1rem; }
.growth-tag-num { font-family:var(--font-body); font-weight:700; font-size:1.8rem; color:var(--orange); letter-spacing:-0.03em; white-space:nowrap; }
.growth-tag p { font-size:0.85rem; color:var(--navy); line-height:1.5; }
/* COMPLIANCE STRIP */
.compliance-strip { background:var(--orange); padding:3.5rem 5vw; }
.compliance-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr auto; gap:3rem; align-items:center; }
.compliance-inner h2 { font-family:var(--font-display); font-size:clamp(1.5rem,2.5vw,2rem); color:white; letter-spacing:-0.025em; margin-bottom:0.5rem; }
.compliance-inner p { color:rgba(255,255,255,0.8); font-size:0.95rem; }
.cbadges { display:flex; gap:0.6rem; flex-wrap:wrap; }
.cbadge { background:rgba(255,255,255,0.15); color:white; padding:0.4rem 0.9rem; border-radius:4px; font-size:0.775rem; font-weight:500; border:1px solid rgba(255,255,255,0.25); }
/* HOW IT WORKS */
.how-section { background:var(--offwhite); }
.steps-row { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:3.5rem; border:1px solid var(--border-light); border-radius:10px; overflow:hidden; }
.steps-row--five { grid-template-columns:repeat(5,1fr); }
.step { background:white; padding:2rem 1.5rem; border-right:1px solid var(--border-light); }
.step:last-child { border-right:none; }
.step-num { font-family:var(--font-body); font-weight:700; font-size:2.5rem; color:var(--navy-light); letter-spacing:-0.05em; line-height:1; margin-bottom:1rem; }
.step:first-child .step-num { color:var(--orange); }
.step h4 { font-weight:600; font-size:0.9rem; color:var(--navy); margin-bottom:0.5rem; }
.step p { font-size:0.825rem; color:var(--slate); line-height:1.6; }
/* TIMING CALLOUT */
.timing-callout { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-top:2rem; }
.timing-card { background:white; border:1px solid var(--border-light); border-radius:10px; padding:1.5rem; display:flex; gap:1rem; align-items:flex-start; }
.timing-label { font-size:0.7rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--orange); margin-bottom:0.3rem; }
.timing-card h4 { font-weight:600; font-size:0.9rem; color:var(--navy); margin-bottom:0.25rem; }
.timing-card p { font-size:0.82rem; color:var(--slate); line-height:1.5; }
.timing-icon { font-size:1.3rem; flex-shrink:0; }
/* FINAL CTA */
.cta-block { background:var(--navy); padding:6rem 5vw; text-align:center; position:relative; overflow:hidden; }
.cta-block::before { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:600px; height:300px; background:radial-gradient(ellipse at center bottom,rgba(232,82,26,0.1) 0%,transparent 70%); }
.cta-block h2 { font-family:var(--font-display); font-size:clamp(2rem,3.5vw,3rem); color:white; letter-spacing:-0.03em; margin-bottom:1.25rem; position:relative; z-index:1; }
.cta-block h2 .orange { color:var(--orange); }
.cta-block p { color:rgba(255,255,255,0.6); font-size:1rem; max-width:500px; margin:0 auto 2.5rem; position:relative; z-index:1; }
.cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; }
.btn-white { background:white; color:var(--navy); padding:0.9rem 2.25rem; border-radius:6px; text-decoration:none; font-weight:600; font-size:0.925rem; display:inline-block; transition:all 0.15s; }
.btn-white:hover { background:var(--orange-pale); }
.btn-ghost-white { border:1px solid rgba(255,255,255,0.25); color:rgba(255,255,255,0.8); padding:0.9rem 2.25rem; border-radius:6px; text-decoration:none; font-weight:500; font-size:0.925rem; display:inline-block; transition:all 0.15s; }
.btn-ghost-white:hover { border-color:rgba(255,255,255,0.6); color:white; }
/* MOBILE */
@media(max-width:900px) {
  .hero-grid,.platform-grid,.proof-row,.compliance-inner { grid-template-columns:1fr; gap:2.5rem; }
  .hero::before { display:none; }
  .serve-grid,.serve-grid--four,.outcomes-grid { grid-template-columns:1fr; }
  .steps-row,.steps-row--five { grid-template-columns:1fr; }
  .step { border-right:none; border-bottom:1px solid var(--border-light); }
  .step:last-child { border-bottom:none; }
  .timing-callout { grid-template-columns:1fr; }
  .compliance-inner { grid-template-columns:1fr; }
  .why-now-grid { grid-template-columns:1fr; }
  .outcome-card-inner { grid-template-columns:1fr; }
}

.logo-marquee { overflow:hidden; }
.logo-marquee-track {
  display:flex;
  align-items:center;
  width:max-content;
  animation:marquee-scroll 40s linear infinite;
}
.logo-marquee-track:hover { animation-play-state:paused; }
.logo-marquee-item {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 2.5rem;
  min-width:160px;
  border-right:1px solid var(--border-light);
}
.logo-marquee-item:last-child { border-right:none; }
@keyframes marquee-scroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}