/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  /* Brand - VisionXpay (blue, cyan, violet neon palette) */
  --brand-primary:   #00D4FF;  /* cyan neon */
  --brand-secondary: #6366F1;  /* violet */
  --brand-accent:    #3B82F6;  /* blue */
  --brand-glow:      rgba(0, 212, 255, 0.4);
  --brand-glow-soft: rgba(0, 212, 255, 0.15);

  /* Functional flow-legend colors */
  --ingress:  #00D4FF;   /* cyan   – incoming sources */
  --ingress-soft: rgba(0,212,255,.12);
  --core:     #6366F1;   /* violet – core processing */
  --core-soft: rgba(99,102,241,.14);
  --service:  #3B82F6;   /* blue   – services layer */
  --service-soft: rgba(59,130,246,.12);
  --success:  #10B981;   /* green  – successful settlement */
  --success-soft: rgba(16,185,129,.12);
  --error:    #EF4444;   /* red    – exception/rejected */
  --error-soft: rgba(239,68,68,.12);

  /* Neutrals - Dark mode */
  --ink:        #050714;
  --ink-soft:   #0A0E1F;
  --ink-line:   #1A1F35;
  --paper:      #0A0E1F;
  --paper-dim:  #050714;
  --card:       #0F1428;
  --line:       #1E2540;
  --slate:      #94A3B8;
  --slate-dark: #E2E8F0;
  --white:      #FFFFFF;

  /* Type */
  --display: 'Space Grotesk', sans-serif;
  --body:    'Inter', sans-serif;
  --mono:    'IBM Plex Mono', monospace;

  --container: 1200px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  color:var(--slate-dark);
  background:linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 50%, var(--ink) 100%);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
::selection{background:var(--brand-primary);color:#fff;}

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

@media(prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--brand-primary);
  outline-offset:3px;
  border-radius:4px;
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:'';
  width:6px;height:6px;
  border-radius:50%;
  background:var(--orange);
  display:inline-block;
}
.eyebrow.on-dark{color:var(--orange-light);}
.eyebrow.on-light{color:var(--orange-dim);}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-0.01em;
}
.section-title{
  font-size:clamp(28px,3.6vw,44px);
  max-width:760px;
  margin-top:14px;
}
.section-title.on-dark{color:#fff;}
.section-sub{
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  color:var(--slate);
  max-width:600px;
  margin-top:16px;
  font-weight:400;
}
.section-sub.on-dark{color:#A8AFBD;}
.on-dark .section-sub{color:#A8AFBD;}
.on-dark{color:#fff;}

/* ============================================================
   GATEWAY NODE STYLES
   ============================================================ */
.gateway-container{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:60px;
  width:100%;
  max-width:1000px;
  margin:0 auto;
  z-index:2;
}
/* .input-layer for hub diagram is defined in CORE SYSTEM FLOW section */
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.5;transform:scale(1.2);}
}
.gateway-node{
  position:relative;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(249,110,19,.2), rgba(11,14,19,.9));
  border:2px solid rgba(249,110,19,.4);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 0 60px rgba(249,110,19,.3), 0 0 120px rgba(249,110,19,.15), inset 0 0 60px rgba(249,110,19,.1);
  z-index:10;
}
.gateway-node::before{
  content:'';
  position:absolute;
  inset:-30px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(249,110,19,.25) 0%, transparent 70%);
  animation:pulse 3s ease-in-out infinite;
}
.gateway-node::after{
  content:'';
  position:absolute;
  inset:-50px;
  border-radius:50%;
  border:1.5px dashed rgba(249,110,19,.3);
  animation:rotate 35s linear infinite reverse;
}
@keyframes rotate{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@keyframes pulse{
  0%, 100%{opacity:0.5; transform:scale(1);}
  50%{opacity:0.9; transform:scale(1.08);}
}
.gateway-icon{
  width:56px;
  height:56px;
  background:linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--display);
  font-weight:700;
  font-size:22px;
  color:#fff;
  box-shadow:0 8px 24px rgba(249,110,19,.4);
}
.gateway-label{
  font-family:var(--display);
  font-weight:600;
  font-size:16px;
  color:#fff;
  letter-spacing:-0.01em;
}
.gateway-sub{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#A8AFBD;
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  width:100%;
}
.service-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:20px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  backdrop-filter:blur(12px);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.4);
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
}
.service-card[data-type="client"]{border-top:2px solid var(--client);}
.service-card[data-type="transit"]{border-top:2px solid var(--transit);}
.service-card[data-type="company"]{border-top:2px solid var(--company);}
.service-card[data-type="reject"]{border-top:2px solid var(--reject);}
.service-icon{
  width:32px;
  height:32px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:14px;
  font-weight:600;
}
.service-card[data-type="client"] .service-icon{background:rgba(31,174,107,.15); color:var(--client);}
.service-card[data-type="transit"] .service-icon{background:rgba(59,130,246,.15); color:var(--transit);}
.service-card[data-type="company"] .service-icon{background:rgba(242,184,7,.15); color:var(--company);}
.service-card[data-type="reject"] .service-icon{background:rgba(226,72,61,.15); color:var(--reject);}
.service-title{
  font-family:var(--display);
  font-weight:600;
  font-size:14px;
  color:#fff;
}
.service-desc{
  font-size:11px;
  color:#A8AFBD;
  line-height:1.5;
}
.output-layer{
  display:flex;
  gap:20px;
  width:100%;
  justify-content:center;
}
.output-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:18px 20px;
  display:flex;
  align-items:center;
  gap:12px;
  backdrop-filter:blur(12px);
  min-width:160px;
}
.output-card[data-type="success"]{border-top:2px solid var(--client);}
.output-card[data-type="failed"]{border-top:2px solid var(--reject);}
.output-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}
.output-card[data-type="success"] .output-icon{background:rgba(31,174,107,.15); color:var(--client);}
.output-card[data-type="failed"] .output-icon{background:rgba(226,72,61,.15); color:var(--reject);}
.output-label{
  font-family:var(--display);
  font-weight:600;
  font-size:14px;
  color:#fff;
}
.output-desc{
  font-size:10px;
  color:#A8AFBD;
  line-height:1.4;
}

section{position:relative;}
.section-pad{padding:120px 0;}
@media(max-width:768px){.section-pad{padding:80px 0;}}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--body);
  font-weight:600;
  font-size:15px;
  padding:14px 26px;
  border-radius:8px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--orange);
  color:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.08) inset, 0 8px 24px -8px rgba(249,110,19,.55);
}
.btn-primary:hover{background:var(--orange-light); transform:translateY(-2px);}
.btn-ghost{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
}
.btn-ghost:hover{border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.06);}
.btn-ghost.dark{color:var(--slate-dark); border-color:var(--line);}
.btn-ghost.dark:hover{border-color:var(--slate-dark); background:rgba(0,0,0,.03);}
.btn svg{width:16px;height:16px;transition:transform .25s ease;}
.btn:hover svg{transform:translateX(3px);}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 0;
  transition:background .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(11,14,19,.86);
  backdrop-filter:blur(14px);
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{height:34px;width:auto;}
.brand-logo{height:32px !important; width:auto; filter: brightness(0) invert(1);}
.brand-name{font-family:var(--display);font-weight:600;font-size:18px;color:#fff;letter-spacing:-.01em;}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{
  font-size:14px;font-weight:500;color:rgba(255,255,255,.72);
  transition:color .2s ease;
}
.nav-links a:hover{color:#fff;}
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-cta .btn{padding:10px 20px;font-size:14px;}
.nav-toggle{display:none;}
@media(max-width:860px){
  .nav-links{display:none;}
  .nav-toggle{display:block;color:#fff;}
  .nav-cta .btn-ghost{display:none;}
  .nav-cta .btn-primary{padding:9px 16px; font-size:13px;}
  .brand-name{font-size:16px;}
  .brand img{height:28px;}
  .brand-logo{height:26px !important;}
}
@media(max-width:380px){
  .nav .wrap{padding:0 18px;}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  background:radial-gradient(120% 100% at 50% 0%, #131826 0%, var(--ink) 55%, #07080b 100%);
  padding:170px 0 0;
  position:relative;
  overflow:hidden;
}
.hero-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:.55;
}
.hero-grain{
  position:absolute; inset:0;
  background:radial-gradient(60% 50% at 50% 30%, rgba(249,110,19,.10), transparent 70%);
  pointer-events:none;
}
.hero .wrap{position:relative; z-index:2;}
.hero-tag{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  color:#A8AFBD; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.14);
  border-radius:30px; padding:7px 16px;
  background:rgba(255,255,255,.03);
}
.hero-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--client);box-shadow:0 0 0 3px var(--client-soft);}
.hero-content{
  max-width:760px;
  padding-top:28px;
}
.hero h1{
  font-size:clamp(38px, 6vw, 68px);
  color:#fff;
  letter-spacing:-0.015em;
}
.hero h1 em{
  font-style:normal;
  color:var(--orange);
}
.hero-sub{
  margin-top:24px;
  font-size:clamp(16px,1.6vw,19px);
  line-height:1.65;
  color:#A8AFBD;
  max-width:580px;
}
.hero-ctas{
  display:flex; gap:16px; margin-top:42px; flex-wrap:wrap;
}
.hero-ctas .btn{padding:16px 28px;font-size:15.5px;}

.hero-badges{
  display:flex; gap:0; margin-top:90px;
  border-top:1px solid rgba(255,255,255,.1);
  flex-wrap:wrap;
}
.hero-badges span{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  color:#7b8290; text-transform:uppercase;
  padding:18px 28px 18px 0;
  display:flex; align-items:center; gap:8px;
}
.hero-badges span:not(:first-child){border-left:1px solid rgba(255,255,255,.1); padding-left:28px;}
.hero-badges span svg{width:13px;height:13px;color:var(--orange);flex-shrink:0;}

@media(max-width:768px){
  .hero{padding-top:130px;}
  .hero-badges{margin-top:56px;}
  .hero-badges span{padding:14px 18px 14px 0;}
  .hero-badges span:not(:first-child){padding-left:18px;}
}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats{
  background:var(--ink);
  padding:0 0 90px;
  margin-top:-1px;
}
.stats-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1.3fr;
  gap:1px;
  background:rgba(255,255,255,.1);
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
}
.stat-card{
  background:#10141d;
  padding:30px 28px;
  display:flex; flex-direction:column;
}
.stat-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:#7b8290; margin-bottom:14px;
}
.stat-value{
  font-family:var(--display); font-weight:600; font-size:34px; color:#fff; letter-spacing:-0.02em;
}
.stat-value small{font-family:var(--body); font-size:14px; font-weight:500; color:#7b8290;}
.stat-delta{
  margin-top:10px; font-family:var(--mono); font-size:12px; color:var(--client);
  display:flex; align-items:center; gap:6px;
}
.stat-delta svg{width:11px;height:11px;}
.stat-foot{margin-top:10px; font-size:12.5px; color:#7b8290; line-height:1.5;}
.stat-insight p{font-size:13.5px; color:#A8AFBD; line-height:1.55; margin-bottom:14px;}
.stat-insight ul{list-style:none; display:flex; flex-direction:column; gap:8px;}
.stat-insight li{font-size:12.5px; color:#dfe2e8; display:flex; align-items:center; gap:8px;}
.stat-insight li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--orange);flex-shrink:0;}

@media(max-width:980px){
  .stats-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .stats-grid{grid-template-columns:1fr;}
}

/* ============================================================
   CHALLENGE / PROBLEM STATEMENT
   ============================================================ */
.challenge-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.challenge-points{
  margin-top:40px;
  display:flex; flex-direction:column; gap:22px;
}
.cpoint{display:flex; gap:16px;}
.cpoint-ico{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:var(--reject-soft); color:var(--reject);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display); font-weight:700; font-size:15px;
}
.cpoint h4{font-size:15px; font-weight:600; margin-bottom:4px;}
.cpoint p{font-size:14px; color:var(--slate); line-height:1.55;}

.topology{
  background:var(--slate-dark);
  border-radius:18px;
  padding:32px 26px 26px;
}
.topology-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:#7b8290;
}
.topo-row{
  display:flex; align-items:stretch; gap:10px; margin-top:20px;
}
.topo-box{
  flex:1; background:#1c2029; border:1px solid var(--ink-line); border-radius:12px;
  padding:18px 14px;
}
.topo-name{
  font-family:var(--mono); font-weight:600; font-size:13px; color:var(--orange-light);
  letter-spacing:.04em;
}
.topo-box ul{list-style:none; margin-top:12px; display:flex; flex-direction:column; gap:6px;}
.topo-box li{font-size:11.5px; color:#9098a6;}
.topo-x{
  align-self:center; color:var(--reject); font-size:20px; font-weight:700; flex-shrink:0;
}
.topo-foot{
  margin-top:20px; text-align:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:#7b8290; padding-top:18px; border-top:1px solid var(--ink-line);
}

@media(max-width:900px){
  .challenge-grid{grid-template-columns:1fr; gap:48px;}
  .topo-row{flex-direction:column;}
  .topo-x{transform:rotate(90deg);}
}
@media(max-width:480px){
  .topo-row{gap:6px;}
  .topo-box{padding:14px 10px;}
}

/* ============================================================
   CORE SYSTEM FLOW
   ============================================================ */
.flow-section{
  background:radial-gradient(ellipse at 50% 0%, #1a1f35 0%, #0d1117 40%, #07080b 100%);
  position:relative;
  overflow:hidden;
  padding:80px 0 120px;
}
.flow-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(99,102,241,.08) 0%, transparent 60%);
  pointer-events:none;
}
.legend{
  display:flex; gap:26px; flex-wrap:wrap;
  margin-top:38px; padding:14px 20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  width:fit-content;
  backdrop-filter:blur(10px);
}
.legend span{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500; color:#A8AFBD;}
.legend i{width:9px;height:9px;border-radius:50%;display:inline-block;}

.flow-canvas{
  position:relative;
  margin-top:60px;
  min-height:800px;
  display:flex;
  justify-content:center;
  align-items:center;
}

@media(max-width:980px){
  .flow-canvas{
    min-height:unset;
    height:auto;
  }
}
.flow-svg{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1;
  overflow:visible;
}

.flow-path{
  fill:none; stroke-width:2; stroke-linecap:round;
  stroke-dasharray:8 12;
  animation:flowdash 2s linear infinite;
}
@keyframes flowdash{ to{ stroke-dashoffset:-40; } }

.flow-particle{
  fill:var(--brand-primary);
  filter:drop-shadow(0 0 6px var(--brand-primary));
  animation:particleFlow 3s ease-in-out infinite;
}
@keyframes particleFlow{
  0%{opacity:0;}
  10%{opacity:1;}
  90%{opacity:1;}
  100%{opacity:0;}
}

/* Hub Container */
.hub-container{
  position:relative;
  width:100%;
  max-width:1100px;
  min-height:680px;
  height:auto;
  display:grid;
  grid-template-rows:auto 1fr auto;
  grid-template-columns:1fr;
  grid-template-areas:
    "input"
    "middle"
    "output";
  row-gap:0;
  justify-items:center;
  margin:0 auto;
}

/* On desktop use absolute positioning for the spoke layout */
@media(min-width:981px){
  .hub-container{
    height:720px;
    min-height:unset;
    display:block;
  }
}

/* Input Layer */
.input-layer{
  grid-area:input;
  position:relative;
  top:auto;
  left:auto;
  transform:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  z-index:10;
  width:100%;
  padding-top:28px;
}
.layer-label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#7b8290;
  margin-bottom:8px;
  text-align:center;
}
.input-nodes{
  display:flex;
  gap:16px;
  background:rgba(16,185,129,.06);
  border:1px solid rgba(16,185,129,.15);
  border-radius:16px;
  padding:16px 20px;
  flex-wrap:wrap;
  justify-content:center;
}
.input-node{
  position:relative;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:16px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  backdrop-filter:blur(12px);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  min-width:100px;
  flex:1 1 100px;
}
.input-node:hover{
  transform:translateY(-4px);
  border-color:var(--brand-primary);
  box-shadow:0 12px 32px rgba(0,0,0,.4), 0 0 20px rgba(0,212,255,.15);
}
.node-icon{
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  color:var(--brand-primary);
  padding:7px 11px;
  background:rgba(0,212,255,.1);
  border-radius:8px;
  line-height:1;
}
.node-label{
  font-family:var(--display);
  font-size:13px;
  font-weight:600;
  color:#fff;
  text-align:center;
}
.node-sub{
  font-family:var(--mono);
  font-size:10px;
  color:#A8AFBD;
  text-align:center;
}

/* Processing Layer */
.processing-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* On mobile: processing-layer becomes a responsive grid */
@media(max-width:980px){
  .processing-layer{
    position:relative;
    inset:auto;
    grid-area:middle;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    padding:20px 0;
    width:100%;
    pointer-events:auto;
  }
}
@media(max-width:560px){
  .processing-layer{
    grid-template-columns:1fr;
  }
}

.service-block{
  position:absolute;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  backdrop-filter:blur(12px);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  pointer-events:auto;
  min-width:140px;
  box-sizing:border-box;
}
.service-block:hover{
  transform:translateY(-4px);
  border-color:var(--brand-secondary);
  box-shadow:0 12px 32px rgba(0,0,0,.4), 0 0 20px rgba(99,102,241,.15);
}

@media(max-width:980px){
  .service-block{
    position:relative;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    min-width:unset;
    width:100%;
  }
  .service-block:hover{
    transform:translateY(-4px) !important;
  }
}
.service-header{
  display:flex;
  align-items:center;
  gap:10px;
}
.service-icon{
  font-size:18px;
  line-height:1;
  flex-shrink:0;
}
.service-name{
  font-family:var(--display);
  font-size:13px;
  font-weight:600;
  color:#fff;
  line-height:1.2;
}
.service-desc{
  font-size:11.5px;
  color:#A8AFBD;
  line-height:1.45;
}

/* Service block positions — desktop only */
.service-block[data-pos="left"]{
  left:2%;
  top:50%;
  transform:translateY(-50%);
}
.service-block[data-pos="top-left"]{
  left:10%;
  top:20%;
}
.service-block[data-pos="top-right"]{
  right:10%;
  top:20%;
}
.service-block[data-pos="right"]{
  right:2%;
  top:50%;
  transform:translateY(-50%);
}
.service-block[data-pos="bottom-right"]{
  right:10%;
  bottom:20%;
}
.service-block[data-pos="bottom-left"]{
  left:10%;
  bottom:20%;
}

/* Core Node */
.core-node{
  width:220px;
  height:220px;
  z-index:20;
  flex-shrink:0;
  align-self:center;
}

@media(min-width:981px){
  .core-node{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
  }
}

@media(max-width:980px){
  .core-node{
    position:relative;
    grid-area:unset;
    margin:24px auto;
  }
}
.core-glow{
  position:absolute;
  inset:-30px;
  background:radial-gradient(circle, rgba(99,102,241,.3) 0%, transparent 70%);
  animation:corePulse 3s ease-in-out infinite;
}
@keyframes corePulse{
  0%, 100%{opacity:0.5; transform:scale(1);}
  50%{opacity:0.8; transform:scale(1.15);}
}
.core-ring{
  position:absolute;
  inset:-50px;
  border:2px dashed rgba(99,102,241,.3);
  border-radius:50%;
  animation:rotate 30s linear infinite;
}
@keyframes rotate{
  to{transform:rotate(360deg);}
}
.core-inner{
  position:absolute;
  inset:0;
  background:rgba(11,14,19,.9);
  border:2px solid rgba(99,102,241,.4);
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  backdrop-filter:blur(20px);
  box-shadow:0 0 60px rgba(99,102,241,.3), 0 0 0 15px rgba(99,102,241,.15), inset 0 0 40px rgba(99,102,241,.1);
}
.core-logo{
  font-family:var(--display);
  font-size:32px;
  font-weight:700;
  color:var(--brand-secondary);
  text-shadow:0 0 20px rgba(99,102,241,.5);
}
.core-name{
  font-family:var(--display);
  font-size:14px;
  font-weight:600;
  color:#fff;
}
.core-sub{
  font-family:var(--mono);
  font-size:10px;
  color:#A8AFBD;
  letter-spacing:.05em;
}

/* Output Layer */
.output-layer{
  grid-area:output;
  position:relative;
  bottom:auto;
  left:auto;
  transform:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  z-index:10;
  width:100%;
  padding-bottom:28px;
}

@media(min-width:981px){
  .output-layer{
    position:absolute;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);
    width:auto;
    padding-bottom:0;
  }
}

.output-nodes{
  display:flex;
  gap:16px;
  background:rgba(59,130,246,.06);
  border:1px solid rgba(59,130,246,.15);
  border-radius:16px;
  padding:16px 20px;
  flex-wrap:wrap;
  justify-content:center;
}
.output-node{
  position:relative;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:16px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  backdrop-filter:blur(12px);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  min-width:100px;
  flex:1 1 100px;
}
.output-node:hover{
  transform:translateY(-4px);
  border-color:var(--brand-accent);
  box-shadow:0 12px 32px rgba(0,0,0,.4), 0 0 20px rgba(59,130,246,.15);
}

/* Active pulse animations */
.input-node::before{
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:16px;
  background:radial-gradient(circle, rgba(0,212,255,.15) 0%, transparent 70%);
  opacity:0;
  animation:nodePulse 2s ease-in-out infinite;
  animation-delay: var(--pulse-delay, 0s);
}
@keyframes nodePulse{
  0%, 100%{opacity:0; transform:scale(0.8);}
  50%{opacity:0.6; transform:scale(1.1);}
}

.service-block::before{
  content:'';
  position:absolute;
  inset:-10px;
  border-radius:18px;
  background:radial-gradient(circle, rgba(99,102,241,.15) 0%, transparent 70%);
  opacity:0;
  animation:nodePulse 2.5s ease-in-out infinite;
  animation-delay: var(--pulse-delay, 0s);
}

.output-node::before{
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:16px;
  background:radial-gradient(circle, rgba(59,130,246,.15) 0%, transparent 70%);
  opacity:0;
  animation:nodePulse 2.2s ease-in-out infinite;
  animation-delay: var(--pulse-delay, 0s);
}

/* Staggered pulse delays */
.input-node:nth-child(1){--pulse-delay: 0s;}
.input-node:nth-child(2){--pulse-delay: 0.4s;}
.input-node:nth-child(3){--pulse-delay: 0.8s;}

.service-block[data-pos="top-left"]{--pulse-delay: 0.2s;}
.service-block[data-pos="top-right"]{--pulse-delay: 0.5s;}
.service-block[data-pos="right"]{--pulse-delay: 0.8s;}
.service-block[data-pos="bottom-right"]{--pulse-delay: 1.1s;}
.service-block[data-pos="bottom-left"]{--pulse-delay: 1.4s;}
.service-block[data-pos="left"]{--pulse-delay: 1.7s;}

.output-node:nth-child(1){--pulse-delay: 0.3s;}
.output-node:nth-child(2){--pulse-delay: 0.7s;}
.output-node:nth-child(3){--pulse-delay: 1.1s;}

.flow-quote{
  margin-top:54px;
  padding:30px 36px;
  border-left:3px solid var(--orange);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);
  border-left-width:3px;
  border-radius:14px;
  font-family:var(--display); font-size:19px; font-weight:500;
  color:#fff; line-height:1.45; max-width:760px;
  backdrop-filter:blur(10px);
}
.flow-quote cite{
  display:block; margin-top:14px; font-family:var(--mono); font-size:12px; font-style:normal;
  color:#A8AFBD; letter-spacing:.02em;
}

.lifecycle{margin-top:64px;}
.lifecycle-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#7b8290;
}
.lifecycle-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:20px;
}
.life-step{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:18px 16px;
  display:flex; flex-direction:column; gap:8px; position:relative;
  backdrop-filter:blur(10px);
}
.life-dot{width:9px;height:9px;border-radius:50%;}
.life-name{font-family:var(--display); font-weight:600; font-size:15px; color:#fff;}
.life-desc{font-size:12px; color:#A8AFBD; line-height:1.5;}
.life-tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:#7b8290; margin-top:auto; padding-top:6px;
}
.lifecycle-foot{margin-top:22px; font-size:13px; color:#A8AFBD; max-width:600px;}

@media(max-width:980px){
  .flow-svg{display:none;}
  .hub-container{
    min-height:unset;
  }
  .lifecycle-row{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .core-node{
    width:160px;
    height:160px;
  }
  .core-logo{font-size:24px;}
  .core-name{font-size:12px;}
  .lifecycle-row{grid-template-columns:1fr;}
}

/* ============================================================
   HOW IT CONNECTS
   ============================================================ */
.connect{background:var(--paper-dim);}
.connect-grid{
  display:grid; grid-template-columns:1.1fr 1fr; gap:70px; align-items:center;
}
.capability-grid{
  margin-top:40px;
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.cap-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.cap-card:hover{transform:translateY(-3px); box-shadow:0 14px 26px -14px rgba(20,20,20,.16);}
.cap-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px;
  background:rgba(249,110,19,.1); color:var(--orange-dim);
  font-family:var(--mono); font-size:14px; margin-bottom:14px;
}
.cap-card h4{font-size:14.5px; font-weight:600; margin-bottom:6px;}
.cap-card p{font-size:12.5px; color:var(--slate); line-height:1.5;}

.orbit{
  position:relative; aspect-ratio:1/1; max-width:400px; margin:0 auto; width:100%;
}
.orbit-svg{position:absolute; inset:0; width:100%; height:100%;}
.orbit-line{
  stroke:rgba(249,110,19,.3);
  stroke-width:2;
  stroke-dasharray:6 8;
  animation:lineFlow 2s linear infinite;
}
@keyframes lineFlow{
  to{stroke-dashoffset:-28;}
}
.orbit-node{
  position:absolute;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:14px 18px; font-family:var(--display); font-weight:600; font-size:13px;
  box-shadow:0 8px 24px rgba(0,0,0,.3), 0 0 0 1px rgba(249,110,19,.1);
  backdrop-filter:blur(12px);
  display:flex; flex-direction:column; gap:3px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.orbit-node:hover{
  transform:translateY(-2px);
  border-color:rgba(249,110,19,.3);
  box-shadow:0 12px 32px rgba(0,0,0,.4), 0 0 20px rgba(249,110,19,.15);
}
.orbit-tag{
  font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--orange-dim); font-weight:500;
}
.n1{top:8%; left:6%;}
.n2{top:8%; right:6%;}
.n3{bottom:6%; left:50%; transform:translateX(-50%);}
.orbit-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:140px; height:140px; border-radius:50%;
  background:rgba(11,14,19,.9); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  box-shadow:0 0 50px rgba(249,110,19,.35), 0 0 100px rgba(249,110,19,.15), 0 0 0 12px rgba(249,110,19,.12), inset 0 0 30px rgba(249,110,19,.08);
  backdrop-filter:blur(20px);
  border:2px solid rgba(249,110,19,.3);
}
.orbit-center::before{
  content:'';
  position:absolute;
  inset:-25px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(249,110,19,.2) 0%, transparent 70%);
  animation:orbitPulse 3s ease-in-out infinite;
}
.orbit-center::after{
  content:'';
  position:absolute;
  inset:-40px;
  border-radius:50%;
  border:1px dashed rgba(249,110,19,.25);
  animation:rotate 25s linear infinite;
}
@keyframes orbitPulse{
  0%, 100%{opacity:0.4; transform:scale(1);}
  50%{opacity:0.8; transform:scale(1.1);}
}
.orbit-center img{height:22px; width:auto; margin-bottom:2px;}
.orbit-center span{font-family:var(--display); font-weight:600; font-size:13px; color:#fff;}
.orbit-center small{font-family:var(--mono); font-size:9px; color:#9098a6; letter-spacing:.05em;}

@media(max-width:900px){
  .connect-grid{grid-template-columns:1fr; gap:50px;}
  .orbit{max-width:320px;}
}
@media(max-width:480px){
  .capability-grid{grid-template-columns:1fr;}
}

/* ============================================================
   STRATEGIC OFFERING
   ============================================================ */
.offering{background:var(--paper);}
.offer-grid{
  margin-top:48px;
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:22px;
}
.offer-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  padding:32px 26px; display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
  backdrop-filter:blur(16px);
}
.offer-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 48px rgba(0,0,0,.4), 0 0 0 1px rgba(249,110,19,.15);
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
}
.offer-card-feature{
  background:rgba(11,14,19,.8);
  border:1px solid rgba(249,110,19,.25);
  box-shadow:0 0 40px rgba(249,110,19,.12), inset 0 0 30px rgba(249,110,19,.05);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.offer-card-feature:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 48px rgba(0,0,0,.5), 0 0 60px rgba(249,110,19,.2);
  border-color:rgba(249,110,19,.4);
}
.offer-card-feature h3, .offer-card-feature p{color:#fff;}
.offer-card-feature .offer-num{color:var(--orange-light);}
.offer-card-feature p{color:#A8AFBD;}
.offer-card-feature .offer-label{color:#7b8290;}
.offer-card-feature .offer-chips span{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.12);}
.offer-num{
  font-family:var(--mono); font-size:13px; color:var(--orange-dim); font-weight:600;
}
.offer-card h3{font-size:19px; margin-top:14px; margin-bottom:12px;}
.offer-card p{font-size:13.5px; color:var(--slate); line-height:1.6; flex-grow:1;}
.offer-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:#9099a6; margin-top:24px; margin-bottom:12px; display:block;
}
.offer-chips{display:flex; flex-wrap:wrap; gap:8px;}
.offer-chips span{
  font-size:11.5px; font-weight:500; padding:6px 12px; border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.85);
  transition:background .2s ease, border-color .2s ease;
}
.offer-chips span:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);
}

@media(max-width:980px){
  .offer-grid{grid-template-columns:1fr; }
}

/* ============================================================
   SECURITY & COMPLIANCE
   ============================================================ */
.security{background:var(--ink);}
.security-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start;
}
.cert-row{display:flex; gap:14px; margin-top:36px;}
.cert-badge{
  border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:16px 22px;
  display:flex; flex-direction:column; gap:4px;
  background:rgba(255,255,255,.03);
}
.cert-name{font-family:var(--display); font-weight:600; font-size:16px; color:#fff;}
.cert-sub{font-family:var(--mono); font-size:10.5px; color:var(--orange-light); letter-spacing:.06em; text-transform:uppercase;}

.security-list{display:flex; flex-direction:column; gap:0;}
.sec-item{
  display:flex; gap:18px; padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.sec-item:first-child{padding-top:0;}
.sec-ico{
  width:34px; height:34px; border-radius:9px; flex-shrink:0; margin-top:2px;
  background:rgba(249,110,19,.14);
  position:relative;
}
.sec-ico::after{
  content:''; position:absolute; top:50%; left:50%; width:8px; height:8px; border-radius:50%;
  background:var(--orange); transform:translate(-50%,-50%);
}
.sec-item h4{font-size:15px; font-weight:600; color:#fff; margin-bottom:6px;}
.sec-item p{font-size:13.5px; color:#A8AFBD; line-height:1.6;}

@media(max-width:900px){
  .security-grid{grid-template-columns:1fr; gap:40px;}
}

/* ============================================================
   USE CASES
   ============================================================ */
.usecases{background:var(--paper-dim);}
.merchant-grid{
  margin-top:48px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px;
}
.merchant-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  padding:30px 24px; display:flex; flex-direction:column; gap:8px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
  backdrop-filter:blur(16px);
}
.merchant-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 48px rgba(0,0,0,.4), 0 0 0 1px rgba(249,110,19,.15);
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
}
.merchant-name{font-family:var(--display); font-weight:600; font-size:20px;}
.merchant-type{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--orange-dim);
}
.channel-strip{
  margin-top:20px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px;
}
.channel-item{padding:22px 4px;}
.channel-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#9099a6;
}
.channel-name{display:block; font-family:var(--display); font-weight:600; font-size:16px; margin:8px 0 6px;}
.channel-desc{font-size:12.5px; color:var(--slate); line-height:1.5;}
.reach-bar{
  margin-top:30px; padding-top:30px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.reach-bar span{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#9099a6;}
.reach-bar strong{font-family:var(--display); font-size:17px; font-weight:600;}

@media(max-width:900px){
  .merchant-grid, .channel-strip{grid-template-columns:1fr;}
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner{
  background:linear-gradient(135deg, #0B0E13 0%, #1a1108 100%);
  padding:100px 0;
}
.cta-inner{
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.cta-inner .section-title{margin-top:14px; max-width:560px;}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink); padding:80px 0 0; border-top:1px solid rgba(255,255,255,.08);}
.footer-top{
  display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr 1fr; gap:32px;
  padding-bottom:50px;
}
.footer-brand .brand-name{color:#fff;}
.footer-logo{height:36px !important; filter: brightness(0) invert(1);}
.footer-brand p{margin-top:18px; font-size:12.5px; color:#7b8290; line-height:1.6;}
.footer-heading{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:#7b8290; display:block; margin-bottom:18px;
}
.footer-col{display:flex; flex-direction:column; gap:12px;}
.footer-col a, .footer-static{font-size:13.5px; color:#c8cdd6;}
.footer-col a{transition:color .2s ease;}
.footer-col a:hover{color:var(--orange-light);}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding:26px 0; border-top:1px solid rgba(255,255,255,.08);
  font-size:12px; color:#7b8290;
}

@media(max-width:980px){
  .footer-top{grid-template-columns:1fr 1fr 1fr; gap:30px;}
}
@media(max-width:860px){
  .footer-top{grid-template-columns:1fr 1fr; gap:32px;}
}
@media(max-width:560px){
  .footer-top{grid-template-columns:1fr; gap:30px;}
  .cta-inner{justify-content:flex-start;}
}