@import "./tokens.css";
html {
  scroll-behavior: smooth;
}
/* =====================================================
   GLOBAL BACKGROUND DEPTH (Startup-grade effect)
   ===================================================== */
   /* ================= SYSTEM FLOW ================= */

.system-flow{
  padding:120px 20px;
  text-align:center;
  }
  
  .flow-title{
  font-size:2.2rem;
  margin:10px auto 60px;
  max-width:700px;
  }
  
  .flow-container{
  
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  
  max-width:600px;
  margin:auto;
  
  }
  
  /* boxes */
  
  .flow-box{
  
  background:rgba(2,6,23,0.6);
  
  border:1px solid rgba(56,189,248,0.3);
  
  padding:20px 25px;
  
  border-radius:12px;
  
  max-width:420px;
  
  }
  
  .flow-box p{
  opacity:0.8;
  margin-top:6px;
  font-size:0.9rem;
  }
  /* FLOW CONNECTOR */

.flow-connector{

  position:relative;
  
  width:2px;
  height:40px;
  
  background:rgba(56,189,248,0.2);
  
  overflow:hidden;
  
  }
  
  /* moving data particle */
  
  .flow-connector::after{
  
  content:"";
  
  position:absolute;
  
  top:-10px;
  left:-2px;
  
  width:6px;
  height:12px;
  
  border-radius:4px;
  
  background:#38bdf8;
  
  box-shadow:
  0 0 10px rgba(56,189,248,0.8);
  
  animation:dataFlow 1.8s linear infinite;
  
  }
  
  /* animation */
  
  @keyframes dataFlow{
  
  0%{
  top:-12px;
  opacity:0;
  }
  
  20%{
  opacity:1;
  }
  
  80%{
  opacity:1;
  }
  
  100%{
  top:40px;
  opacity:0;
  }
  
  }
  .flow-box.highlight{

    border-color:#38bdf8;
    
    box-shadow:
    0 0 25px rgba(56,189,248,0.25),
    0 0 60px rgba(56,189,248,0.1);
    
    }
  /* highlight your layer */
  /* ================= CLIENT SCENARIOS ================= */

.client-scenarios{

  padding:120px 20px;
  
  text-align:center;
  
  }
  
  .scenario-title{
  
  font-size:2.2rem;
  
  margin:10px auto 60px;
  
  max-width:700px;
  
  }
  
  .scenario-grid{
  
  display:grid;
  
  grid-template-columns:repeat(2,1fr);
  
  gap:40px;
  
  max-width:1000px;
  
  margin:auto;
  
  }
  
  /* cards */
  
  .scenario-card{
  
  background:rgba(2,6,23,0.55);
  
  border:1px solid rgba(56,189,248,0.25);
  
  padding:30px;
  
  border-radius:14px;
  
  text-align:left;
  
  transition:all .25s ease;
  
  }
  
  .scenario-card:hover{
  
  transform:translateY(-6px);
  
  border-color:#38bdf8;
  
  }
  
  /* highlight card */
  
  .scenario-card.highlight{
  
  border-color:#38bdf8;
  
  box-shadow:
  0 0 30px rgba(56,189,248,0.15);
  
  }
  
  .scenario-card h3{
  
  margin-top:0;
  
  color:#38bdf8;
  
  }
  
  .scenario-card ul{
  
  margin-top:15px;
  
  padding-left:18px;
  
  }
  
  .scenario-card li{
  
  margin-bottom:8px;
  
  opacity:0.85;
  
  }
  .timeline-section{

    padding:120px 20px;
    max-width:900px;
    margin:auto;
    
    }
    
    .timeline-title{
    
    font-size:2.2rem;
    margin-bottom:10px;
    
    }
    
    .timeline-intro{
    
    opacity:0.8;
    margin-bottom:60px;
    
    }
    
    .timeline{
    
    position:relative;
    margin-left:20px;
    
    }
    
    .timeline::before{
    
    content:"";
    position:absolute;
    
    left:10px;
    top:0;
    bottom:0;
    
    width:2px;
    
    background:rgba(56,189,248,0.25);
    
    }
    
    .timeline-item{
    
    display:flex;
    margin-bottom:60px;
    
    position:relative;
    
    }
    
    .timeline-dot{
    
    width:16px;
    height:16px;
    
    background:#38bdf8;
    
    border-radius:50%;
    
    margin-right:20px;
    
    box-shadow:
    0 0 12px #38bdf8,
    0 0 25px rgba(56,189,248,0.4);
    
    }
    
    .timeline-content h3{
    
    margin:0;
    font-size:18px;
    
    }
    
    .timeline-content span{
    
    display:block;
    font-size:14px;
    opacity:0.7;
    margin-bottom:6px;
    
    }
    
    .timeline-content p{
    
    opacity:0.8;
    
    }
    .project-visual{

      height:160px;
      
      border-radius:12px;
      
      margin-bottom:20px;
      
      }
      
      .merchant{
      
      background:
      radial-gradient(circle at 40% 40%, #38bdf8, transparent),
      radial-gradient(circle at 70% 70%, #6366f1, transparent);
      
      }
      
      .cafe{
      
      background:
      radial-gradient(circle at 30% 30%, #f472b6, transparent),
      radial-gradient(circle at 70% 60%, #818cf8, transparent);
      
      }
      
      .society{
      
      background:
      radial-gradient(circle at 50% 40%, #22d3ee, transparent),
      radial-gradient(circle at 80% 70%, #6366f1, transparent);
      
      }
      /* SECTION */

.ongoing-projects{
  position:relative;
  padding:120px 20px;
  padding-top:120px;
  padding-bottom:400px;
  text-align:center;
  }
  .project-status{

    display:inline-block;
    
    font-size:11px;
    
    background:#052e2b;
    
    color:#34d399;
    
    padding:4px 10px;
    
    border-radius:999px;
    
    margin-top:6px;
    
    margin-bottom:8px;
    
    letter-spacing:0.4px;
    
    }
    .project-client{

      font-size:12px;
      
      color:#38bdf8;
      
      letter-spacing:0.5px;
      
      margin-bottom:10px;
      
      opacity:0.9;
      
      }
  .section-title{
  font-size:34px;
  margin-bottom:80px;
  color:#e2e8f0;
  }
  
  
  /* STACK CONTAINER */
  
  .project-stack{
  
  position:relative;
  
  width:940px;
  height:480px;
  
  margin:auto;

overflow:visible;   /* important */

  
  }
  
  
  /* CARD */
  
  .project-card{

    position:absolute;
    
    width:280px;
    
    min-height:340px;
    
    background:#020617;
    
    border-radius:14px;
    
    border:1px solid rgba(56,189,248,.25);
    
    padding:30px;
    
    box-sizing:border-box;
    
    transition:all .6s cubic-bezier(.22,1,.36,1);
    font-size:14px;
    line-height:1.5;
    
    }
    .reliability-section{
      margin-top:200px;
      }
    .project-card ul{
      margin-top:12px;
      }
  
  
  /* STACKED POSITIONS */
  
  .card1{
  left:320px;
  z-index:3;
  transform:translateX(-50%) scale(1);
  }
  
  .card2{
  left:340px;
  z-index:2;
  transform:translateX(-40%) scale(.96);
  }
  
  .card3{
  left:360px;
  z-index:1;
  transform:translateX(-30%) scale(.92);
  }
  
  
  /* EXPAND */
  
  .project-stack:hover .card1{
  left:0;
  transition-delay:.05s;
  transform:none;
  }
  
  .project-stack:hover .card2{
  left:330px;
  transition-delay:.15s;
  transform:none;
  }
  
  .project-stack:hover .card3{
  left:660px;
  transition-delay:.25s;
  transform:none;
  }
  .project-stack::after{

    content:"";
    
    position:absolute;
    
    width:500px;
    height:200px;
    
    background:radial-gradient(circle, rgba(56,189,248,.15), transparent);
    
    left:50%;
    top:60%;
    
    transform:translateX(-50%);
    
    filter:blur(60px);
    
    }
  
  /* CARD TITLE */
  
  .project-card h3{
    font-size:20px;
    font-weight:600;
    letter-spacing:0.4px;
    margin-bottom:6px;
    }
    
    .project-card p{
    font-size:14px;
    line-height:1.6;
    color:#cbd5f5;
    margin-top:10px;
    margin-bottom:12px;
    }
    
    .project-card li{
    font-size:13px;
    line-height:1.6;
    color:#94a3b8;
    }
    .project-card ul{
      margin-top:14px;
      padding-left:18px;
      }
  
  
  /* CARD TEXT */
  
  .project-card p{

    opacity:0;
    visibility:hidden;
    
    transform:translateY(10px);
    
    transition:
    opacity .4s ease,
    transform .4s ease;
    
    }
    .project-stack:hover .project-card p{

      opacity:1;
      visibility:visible;
      
      transform:translateY(0);
      
      transition-delay:.3s;
      
      }
      .project-card h3{
        margin-bottom:12px;
        }
  
  
  /* TEXT REVEAL */
  
  .project-stack:hover .project-card p{
  
  opacity:1;
  
  transition-delay:.3s;
  
  }
  .projects-title{
    margin-bottom:60px;
    font-size:14px;
    letter-spacing:.35em;
    text-transform:uppercase;
    color:#38bdf8;
    }
  
  /* HOVER EFFECT */
  
  .project-card:hover{
  
  transform:translateY(-12px) scale(1.02);
  
  border-color:#38bdf8;
  
  box-shadow:
  0 20px 60px rgba(56,189,248,.35),
  0 0 40px rgba(0,223,216,.25);
  
  }
  /* mobile */
  
  @media(max-width:900px){
  
  .scenario-grid{
  
  grid-template-columns:1fr;
  
  }
  
  }
  .flow-box.highlight{
  
  border-color:#38bdf8;
  
  box-shadow:
  0 0 20px rgba(56,189,248,0.25);
  
  }
  
  /* connecting lines */
  
  .flow-line{
  
  width:2px;
  height:35px;
  
  background:linear-gradient(
  to bottom,
  rgba(56,189,248,0.6),
  transparent
  );
  
  }

   body::before{
    content:"";
    position:fixed;
    inset:0;
    
    background:
    radial-gradient(
    circle at 20% 30%,
    rgba(56,189,248,0.25),
    transparent 40%
    ),
    radial-gradient(
    circle at 80% 70%,
    rgba(14,165,233,0.2),
    transparent 45%
    );
    
    filter:blur(120px);
    
    z-index:-8;
    }
/* Reset */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-main);
  background: var(--bg-main);
  color: var(--text-primary);
  line-height: 1.6;
  position: relative; /* ADD THIS */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Header */
header {
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(8px);
  background: rgba(2,6,23,0.7);
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent-primary);
  letter-spacing: -1px;
}

header a {
  color: var(--text-primary);
  text-decoration: none;
}


/* Hero */
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 6rem 2rem;
  text-align: center;
}

h1 {
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  margin-bottom: 1rem;
}
h1, h2 {
  letter-spacing: -0.02em;
}
.lead {
  font-size: 1.15rem;
  max-width: 720px;
  margin: 24px auto 10px;
}
/* ================= DATA STREAM LINES ================= */
#network-bg{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0.7;
  z-index:-5;
  pointer-events:none;
  
  background: radial-gradient(
  circle at center,
  rgba(56,189,248,0.12),
  transparent 60%
  );
  }
.hero-streams{

  position:absolute;
  inset:0;
  
  background:
  linear-gradient(
  transparent 97%,
  rgba(56,189,248,0.18)
  );
  
  background-size:100% 140px;
  
  opacity:0.35;
  
  animation:streams 18s linear infinite;
  
  pointer-events:none;
  
  }
  
  @keyframes streams{
  
  0%{
  background-position:0 0;
  }
  
  100%{
  background-position:0 140px;
  }
  
  }
  #hybrid-bg{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    
    z-index:-5;
    pointer-events:none;
    
    background:
    radial-gradient(
    circle at center,
    rgba(56,189,248,0.18),
    transparent 60%
    );
    }
#hero{

  position:relative;
  min-height:90vh;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  
  text-align:center;
  
  padding:140px 20px;
  
  overflow:hidden;
  
  }
#hero h1{
  font-size: clamp(3rem,6vw,4.5rem);
  letter-spacing:-0.03em;
  line-height:1.15;

  max-width:900px;

  margin-bottom:20px;

  color:white;

  text-shadow:0 0 40px rgba(56,189,248,0.25);
  position: relative;
  letter-spacing: -0.03em;
  line-height: 1.15;

  max-width: 820px;
  margin: 0 auto 20px;

  background: linear-gradient(
    90deg,
    #1e3a8a,
    #3b82f6,
    #38bdf8,
    #0ea5e9
  );

  background-size: 200% auto;

  -webkit-background-clip: text;
  color: transparent;

  animation: gradientMove 6s linear infinite;
}
#hero .accent{

  background:linear-gradient(
  90deg,
  #38bdf8,
  #0ea5e9
  );
  
  -webkit-background-clip:text;
  color:transparent;
  
  }
/* CTA */
.cta {
  background: var(--accent-primary);
  color: #020617;
  padding: 1rem 2.2rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin-top: 36px;
}

/* Sections */
section {
  padding: 6rem 2rem;
}

.section-title {
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 4px;
  font-weight: 600;
  color: var(--accent-primary);
  margin-bottom: 10px;
  opacity: 0.9;
}
.section-label {
  font-size: 0.75rem;
  letter-spacing: 4px;
  color: var(--accent-primary);
  display: block;
  margin-bottom: 12px;
}
.services-section {
  padding: 7rem 2rem;
  text-align: center;
}

.services-heading {
  font-size: 2.2rem;
  margin-top: 10px;
}

.services-intro {
  max-width: 640px;
  margin: 12px auto 50px;
  color: var(--text-secondary);
}
.services-surface {
  background: rgba(2,6,23,0.45);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 40px;
  backdrop-filter: blur(10px);
}
.problem-section {
  padding: 7rem 2rem;
  text-align: center;
}
.problem-heading {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 50px;
}
.problem-intro {
  max-width: 640px;
  margin: 0 auto 50px;
  color: var(--text-secondary);
}
.problem-surface {
  background: rgba(2,6,23,0.45);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 40px;
  backdrop-filter: blur(10px);
}
.case-outcome {
  padding: 7rem 2rem;
  text-align: center;
}
.case-outcome h2 {
  max-width: 900px;
  margin: 0 auto 40px;
  line-height: 1.25;
}
.case-headline {
  max-width: 900px;
  margin: 0 auto 18px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.case-subheadline {
  max-width: 720px;
  margin: 0 auto 48px;
  font-size: 1.15rem;
  color: var(--text-secondary);
  line-height: 1.7;
}
/* ===============================
   CASE METRICS — PREMIUM STYLE
================================ */

.case-metrics {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.metric {
  text-align: left;
}

.metric-value {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--accent-primary);
  letter-spacing: -0.02em;
}

.metric-label {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.metric-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(56,189,248,0.25),
    transparent
  );
}

.case-heading {
  font-size: 2.1rem;
  margin: 12px auto 50px;
  max-width: 800px;
}
.case-surface {
  background: rgba(2,6,23,0.45);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 50px;
  backdrop-filter: blur(10px);
}
.case-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 50px;
  align-items: center;
  text-align: left;
}
.case-results {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.metric span {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--accent-primary);
}
@media (max-width: 900px) {

  .case-metrics {
    text-align: center;
    align-items: center;
  }

  .metric {
    text-align: center;
  }

}

.metric p {
  margin: 4px 0 0;
  color: var(--text-secondary);
}
.process-section {
  padding: 7rem 2rem;
  text-align: center;
}

.process-heading {
  font-size: 2.2rem;
  margin: 10px auto 60px;
}
.process-flow {
  max-width: 1100px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.process-step {
  background: rgba(2,6,23,0.45);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 40px 30px;

  text-align: left;
  position: relative;

  transition: transform 0.25s ease, border-color 0.25s ease;
}

.process-step:hover {
  transform: translateY(-6px);
  border-color: rgba(56,189,248,0.6);
}
.step-number {
  font-size: 0.8rem;
  letter-spacing: 3px;
  color: var(--accent-primary);
  margin-bottom: 12px;
}
/* Grid + cards */
.grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.problem-section .grid {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 900px) {
  .problem-section .grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .process-flow {
    grid-template-columns: 1fr;
  }
}
.services-section .grid {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 900px) {
  .services-section .grid {
    grid-template-columns: 1fr;
  }
}
.problem-section .card {
  text-align: center;
  font-size: 1.05rem;
}
.card {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 2rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-primary);
}
.card h3 {
  color: var(--accent-primary);
  margin-top: 0;
}
.services-section .card h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--accent-primary);
}

.services-section .card p {
  color: var(--text-secondary);
}

/* Leadership */
.center {
  text-align: center;
}


#hero h1::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 300px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(56,189,248,0.12),
    transparent 70%
  );
  z-index: -1;
}
.soft-divider {
  width: 60px;
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 1.5rem auto 2rem;
}
#hero .hero-proof{

  opacity:0.85;
  
  font-size:0.9rem;
  
  margin-bottom:34px;
  
  }
#hero .lead{

  max-width:640px;
  
  font-size:1.15rem;
  
  margin:20px auto 10px;
  
  color:var(--text-secondary);
  
  }
.leadership-vision {
  max-width: 720px;
  margin: 30px auto 0;
  color: var(--text-secondary);
  line-height: 1.8;
}
.leader-name {
  font-size: 2rem;
  margin: 10px 0 6px;
}
.leader-role {
  color: var(--text-secondary);
  line-height: 1.6;
}

.leader-role span {
  opacity: 0.8;
  font-size: 0.95rem;
}

#accent
.accent {
  color: var(--accent-primary);
}
/* Footer */
footer {
  padding: 3rem 2rem;
  text-align: center;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.8rem;
}
/* ---------------- Mobile Fixes ---------------- */
@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  main {
    padding: 4rem 1.5rem;
    text-align: left;
  }

  h1 {
    font-size: 2.2rem;
    line-height: 1.25;
  }

  .lead {
    font-size: 1.05rem;
    margin-bottom: 2rem;
  }
  @media (max-width: 900px) {
    .case-grid {
      grid-template-columns: 1fr;
      text-align: center;
    }
  }
  @media (max-width: 768px) {

    .hero {
      text-align: left;
      padding: 5rem 1.5rem 3rem;
    }
  
    .hero .container {
      max-width: 520px;
      margin: 0 auto;
    }
  
  }
  @media (max-width: 768px) {

    .cta-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: stretch;
    }
  
    .btn-primary,
    .btn-secondary {
      width: 100%;
      text-align: center;
      padding: 12px 18px;
      font-size: 0.95rem;
    }
  
  }
  @media (max-width: 768px) {

    header {
      padding: 1rem 1.2rem;
    }
  
    .logo {
      font-size: 1.2rem;
      line-height: 1;
    }
  
    nav {
      gap: 14px;
      font-size: 0.85rem;
    }
  
  }
  /* Stack all grids */
  .grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* Reduce card padding */
  .card {
    padding: 1.25rem;
  }

  /* CTA full-width */
  .cta{
    margin-top:34px;
    
    background:linear-gradient(
    180deg,
    #38bdf8,
    #0ea5e9
    );
    
    color:#020617;
    
    padding:13px 28px;
    
    border-radius:10px;
    
    font-weight:600;
    
    box-shadow:
    0 15px 35px rgba(14,165,233,0.35);
    
    transition:all .25s ease;
    }
    
    .cta:hover{
    transform:translateY(-2px);
    box-shadow:
    0 22px 45px rgba(14,165,233,0.45);
    }
    #hero::before{

      content:"";
      position:absolute;
      
      top:50%;
      left:50%;
      
      width:900px;
      height:600px;
      
      transform:translate(-50%,-50%);
      
      background:
      radial-gradient(
      circle,
      rgba(56,189,248,0.35),
      transparent 70%
      );
      
      filter:blur(100px);
      
      z-index:-2;
      
      }
      
      #hero::after{

        content:"";
        position:absolute;
        inset:0;
        
        background-image:
        radial-gradient(
        rgba(56,189,248,0.25) 1px,
        transparent 1px
        );
        
        background-size:140px 140px;
        
        opacity:0.18;
        
        z-index:-1;
        
        }
  
  .cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 35px rgba(14,165,233,0.35);
  }

  /* Section spacing */
  section {
    padding: 4rem 1.5rem;
  }

  footer {
    padding: 2rem 1.5rem;
  }
}
/* =====================================
   FINAL MOBILE ARCHITECTURE OVERRIDE
===================================== */

@media (max-width: 768px) {

  .architecture-left h2 {
    font-size: 2rem;
    line-height: 1.25;
  }

  .flow-box {
    width: 100%;
    max-width: 320px;
  }
}

@media (max-width: 768px) {

  .bridge-left h2 {
    font-size: 2rem;
    line-height: 1.25;
  }

}
@media (max-width: 768px) {

  .bridge-description {
    margin-bottom: 20px;
  }

}
@media (max-width: 768px) {
  .bridge-right {
    align-items: center;
  }
}
/* =====================================================
   FINAL ARCHITECTURE FLOW (ACTIVE VERSION)
===================================================== */

.architecture {
  padding: 8rem 2rem;
  text-align: center;
}

.architecture-title {
  font-size: 2.4rem;
  margin-bottom: 14px;
}

.architecture-intro {
  max-width: 720px;
  margin: 0 auto 60px;
  color: var(--text-secondary);
}

/* FLOW */

.architecture-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* NODE */

.flow-node {
  background: rgba(2,6,23,0.65);
  backdrop-filter: blur(12px);

  border: 1px solid var(--border-subtle);
  border-radius: 12px;

  padding: 16px 26px;
  min-width: 260px;

  font-weight: 500;

  transition: all 0.25s ease;
}

.flow-node:hover {
  transform: translateY(-3px);
  border-color: var(--accent-primary);
}

/* HIGHLIGHT SERVICE LAYER */

.flow-node.highlight {
  border-color: rgba(56,189,248,0.7);
  box-shadow: 0 0 30px rgba(56,189,248,0.18);
}

/* CONNECTOR */

/* FLOW CONNECTOR */

.flow-line{

  width:2px;
  height:30px;
  
  background:linear-gradient(
  to bottom,
  rgba(56,189,248,0.7),
  transparent
  );
  
  position:relative;
  
  overflow:hidden;
  }
  
  /* flowing animation */
  
  .flow-line::after{
  
  content:"";
  
  position:absolute;
  
  top:-30px;
  left:0;
  
  width:100%;
  height:30px;
  
  background:linear-gradient(
  to bottom,
  rgba(56,189,248,0.8),
  transparent
  );
  
  animation:dataFlow 2s linear infinite;
  
  }
  
  @keyframes dataFlow{
  
  0%{
  top:-30px;
  }
  
  100%{
  top:30px;
  }
  
  }

/* MOBILE */

@media (max-width: 768px) {

  .architecture-title {
    font-size: 1.9rem;
    line-height: 1.25;
  }

  .flow-node {
    width: 100%;
    max-width: 320px;
    font-size: 0.95rem;
  }

}

.topbar.unified {
    height: 64px;
    padding: 0 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-main);
    border-bottom: 1px solid var(--border-subtle);
  }
  
  .topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .brand {
    font-weight: 700;
    font-size: 1rem;
    color: var(--accent-primary);
  }
  
  .divider {
    color: var(--text-muted);
  }
  
  .product {
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
  }
  
  .product:hover {
    color: var(--accent-primary);
  }
  
  .topbar-nav {
    display: flex;
    gap: 24px;
  }
  
  .topbar-nav a {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
  }
  
  .topbar-nav a:hover {
    color: var(--text-primary);
  }

  /* =====================================================
   PRODUCT BRIDGE — FLAGSHIP SECTION
===================================================== */

.bridge {
  padding: 8rem 2rem;
  position: relative;
}

/* subtle background glow */
.bridge::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(56,189,248,0.08),
      transparent 60%
    );
  z-index: -1;
}

/* MAIN SURFACE */

.bridge-container {
  max-width: 1100px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 70px;

  background: rgba(2,6,23,0.45);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;

  padding: 60px;

  backdrop-filter: blur(14px);
}

/* LEFT SIDE */

.bridge-label {
  font-size: 0.75rem;
  letter-spacing: 3px;
  color: var(--accent-primary);
  display: inline-block;
  margin-bottom: 14px;
}

.bridge-left h2 {
  font-size: 2.6rem;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.bridge-description {
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 520px;
}

/* CTA polish */

.btn-primary.solid {
  margin-top: 28px;
  padding: 12px 24px;
  font-size: 0.95rem;
}

/* RIGHT SIDE */

.bridge-right {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* FEATURE POINTS */

.bridge-point {
  background: rgba(2,6,23,0.6);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;

  padding: 18px 20px;

  display: flex;
  gap: 14px;
  align-items: flex-start;

  transition: all 0.25s ease;
}

.bridge-point:hover {
  transform: translateY(-4px);
  border-color: rgba(56,189,248,0.6);
}

/* NUMBER STYLE */

.bridge-point span {
  font-weight: 700;
  color: var(--accent-primary);
  opacity: 0.8;
  min-width: 26px;
}

.bridge-point p {
  margin: 0;
  color: #e5e7eb;
  font-size: 0.95rem;
}

/* MOBILE */

@media (max-width: 900px) {

  .bridge-container {
    grid-template-columns: 1fr;
    padding: 40px 28px;
    gap: 40px;
  }

  .bridge-left {
    text-align: left;
  }

  .bridge-left h2 {
    font-size: 2rem;
  }

}
  /* Product Name Branding */

.product-name {
  font-size: 2.6rem;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.product-name .data {
  color: #ffffff;
}

.product-name .sentinel {
  color: var(--accent-primary);
}
.product-name .sentinel {
  color: var(--accent-primary);
  text-shadow: 0 0 18px rgba(56,189,248,0.25);
}
  
  
  .btn-primary.solid {
    display: inline-block;
    padding: 14px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(
      180deg,
      #38bdf8,
      #0ea5e9
    );
    color: #020617;
    margin-top: 28px;
  }
  .bridge-left {
  padding-top: 12px;
  }

  .bridge-right {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  
  .bridge-point {
    background: rgba(2,6,23,0.4);
    border: 1px solid rgba(30,41,59,0.7);
    padding: 14px 16px;
  }
  
  .bridge-point span {
    opacity: 0.7;
    font-size: 0.75rem;
  }  
  
  .bridge-point p {
    margin: 0;
    font-size: 0.95rem;
    color: #e5e7eb;
  }
  
  /* Mobile */
  @media (max-width: 900px) {
    .bridge-container {
      grid-template-columns: 1fr;
      gap: 28px;
    }
  
    .bridge-left {
      text-align: left;
    }
  
    .bridge-description {
      margin-left: auto;
      margin-right: auto;
    }
  }
  @media (max-width: 768px) {

    .product-title {
      font-size: 2.4rem;
      line-height: 1.2;
    }
  
  }
  /* =====================================================
   DATASENTINEL PAGE STYLES
   ===================================================== */

/* Hero Section */
.lead {
  font-size: 1.2rem;
  max-width: 640px;
  margin: 22px auto 8px;
}

.hero-proof {
  font-size: 0.9rem;
  color: var(--text-muted);
  opacity: 0.8;
  font-size: 0.9rem;
  opacity: 0.75;
}

.hero {
  padding: 7rem 2rem 5rem;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.hero h1 {
  font-size: clamp(2.8rem, 5vw, 3.8rem);
  letter-spacing: -1px;
  margin-bottom: 1rem;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.hero p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text-secondary);
}
.hero::after {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  background: radial-gradient(
    circle,
    rgba(56,189,248,0.08),
    transparent 70%
  );
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
/* CTA buttons */
.btn-primary {
  background: linear-gradient(
    180deg,
    #38bdf8 0%,
    #0ea5e9 100%
  );

  color: #020617;

  padding: 10px 22px;   /* reduced */
  font-size: 0.95rem;   /* slightly smaller text */
  border-radius: 8px;   /* tighter radius */

  font-weight: 600;
  text-decoration: none;
  display: inline-block;

  border: 1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 8px 20px rgba(14,165,233,0.22),
    inset 0 1px 0 rgba(255,255,255,0.25);

  transition: all 0.25s cubic-bezier(.2,.8,.2,1);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px rgba(14,165,233,0.30),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

.btn-secondary {
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(8px);

  color: var(--text-secondary);
  padding: 13px 30px;
  border-radius: 10px;

  border: 1px solid rgba(148,163,184,0.2);

  text-decoration: none;
  font-weight: 500;

  transition: all 0.25s ease;
}

.btn-secondary:hover {
  color: white;
  border-color: rgba(56,189,248,0.6);
  background: rgba(56,189,248,0.08);
}

/* Section headings */
.section h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 2rem;
}

/* Lists inside sections */
.section ul {
  max-width: 700px;
  margin: 2rem auto 0;
  padding-left: 1.2rem;
}

.section li {
  margin-bottom: 10px;
  color: var(--text-secondary);
}
.product-title {
  font-size: clamp(3rem, 6vw, 4rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.accent {
  color: var(--accent-primary);
}
.product-title {
  position: relative;
}

.product-title::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 250px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(56,189,248,0.15),
    transparent 70%
  );
  z-index: -1;
}
/* Architecture block */
pre {
  margin-top: 2rem;
  font-size: 0.9rem;
  line-height: 1.7;
  border: 1px solid var(--border-subtle);
}

/* Endpoint links */
.section a {
  color: var(--accent-primary);
  text-decoration: none;
}

.section a:hover {
  text-decoration: underline;
}

/* Navbar spacing improvement */
nav {
  display: flex;
  gap: 24px;
  align-items: center;
}

/* Footer polish */
.footer {
  margin-top: 80px;
  border-top: 1px solid var(--border-subtle);
}

/* ================= MOBILE ================= */

@media (max-width: 768px) {

  .hero {
    padding: 7rem 2rem 3rem;
    text-align: left;
  }

  .hero p {
    margin-bottom: 10px;
  }

  .btn-secondary {
    margin-left: 0;
    margin-top: 12px;
    display: block;
    opacity: 0.8;
  }

  .cta-group {
    margin-top: 34px;
    display: flex;
    justify-content: center;
    gap: 18px;
  }

  .section h2 {
    font-size: 1.6rem;
  }
}

@media (max-width: 900px) {
  .architecture-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .architecture-left {
    margin-bottom: 30px;
  }
}
/* =====================================================
   ARCHITECTURE CREDIBILITY SECTION
   ===================================================== */

   .architecture-principles {
    padding: 7rem 2rem;
    background: radial-gradient(
      circle at top,
      rgba(56,189,248,0.05),
      transparent 60%
    );
  }
  
  .section-label {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 3px;
    color: var(--accent-primary);
    margin-bottom: 14px;
  }
  
  .architecture-principles h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 16px;
  }
  
  .principles-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
    color: var(--text-secondary);
  }
  
  .principles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .principle {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    padding: 1.6rem;
    border-radius: var(--radius-md);
    transition: transform 0.2s ease, border-color 0.2s ease;
  }
  
  .principle:hover {
    transform: translateY(-4px);
    border-color: var(--accent-primary);
  }
  
  .principle h3 {
    margin-top: 0;
    color: var(--accent-primary);
    font-size: 1.05rem;
  }
  
  .principle p {
    color: var(--text-secondary);
    font-size: 0.95rem;
  }
  /* ===============================
   Production Endpoints Section
================================ */

.endpoints {
  padding: 7rem 2rem;
  text-align: center;
}

.endpoint-list {
  max-width: 700px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.endpoint {
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;

  padding: 18px 22px;
  text-decoration: none;

  transition: all 0.25s ease;
}

.endpoint:hover {
  transform: translateY(-3px);
  border-color: var(--accent-primary);
  box-shadow: 0 10px 30px rgba(56,189,248,0.15);
}

.endpoint-name {
  color: white;
  font-weight: 600;
}

.endpoint-url {
  color: var(--accent-primary);
  font-family: monospace;
  font-size: 0.9rem;
  opacity: 0.9;
}
  /* =====================================================
   ARCHITECTURE VISUAL SECTION
   ===================================================== */

.architecture {
  padding: 8rem 2rem;
}

.architecture-container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

/* LEFT */
.architecture-left h2 {
  font-size: 2.4rem;
  margin-bottom: 16px;
}

.architecture-left p {
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.architecture-points {
  padding-left: 18px;
  color: var(--text-secondary);
}

.architecture-points li {
  margin-bottom: 10px;
}

/* RIGHT FLOW */
.architecture-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.flow-box {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  padding: 14px 22px;
  border-radius: var(--radius-md);
  min-width: 260px;
  text-align: center;
  font-weight: 500;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.flow-box:hover {
  transform: translateY(-3px);
  border-color: var(--accent-primary);
}

.flow-arrow {
  opacity: 0.5;
  font-size: 1.2rem;
}

/* Scroll hint */
.scroll-hint {
  margin-top: 50px;
  opacity: 0.4;
  animation: float 2s ease-in-out infinite;
}

@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* =====================================
   PREMIUM METRIC REVEAL ANIMATION
===================================== */

.metric {
  opacity: 0;
  transform: translateY(18px);
}

.show-metrics .metric {
  animation: metricReveal 0.8s ease forwards;
}

.show-metrics .metric:nth-child(1) { animation-delay: 0.15s; }
.show-metrics .metric:nth-child(3) { animation-delay: 0.3s; }
.show-metrics .metric:nth-child(5) { animation-delay: 0.45s; }

@keyframes metricReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =====================================
   TRUST STRIP — FINAL VERSION
===================================== */

.trust-strip {
  margin-top: 20px;

  border-top: 1px solid rgba(56,189,248,0.15);
  border-bottom: 1px solid rgba(56,189,248,0.15);

  background: rgba(2,6,23,0.55);
  backdrop-filter: blur(10px);
}

.trust-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 26px 20px;
  text-align: center;
}

.trust-label {
  font-size: 0.7rem;
  letter-spacing: 3px;
  text-transform: uppercase;

  color: rgba(148,163,184,0.9);
  margin-bottom: 16px;
}

.trust-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}

.trust-items span {
  font-size: 0.95rem;
  font-weight: 500;
  color: #e2e8f0; /* brighter */

  opacity: 0.85;
  transition: all 0.25s ease;
}

.trust-items span:hover {
  color: var(--accent-primary);
  opacity: 1;
}
.trust-strip::after {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(56,189,248,0.4),
    transparent
  );
}
/* =====================================================
   FINAL FOOTER — SrS Logics
   ===================================================== */

   .footer {
    margin-top: 80px;
    border-top: 1px solid var(--border-subtle);
    padding: 60px 2rem 30px;
    background: rgba(2,6,23,0.4);
    backdrop-filter: blur(6px);
  }
  
  /* Container */
  .footer-container {
    max-width: 1100px;
    margin: 0 auto;
  
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
    gap: 48px;
    align-items: flex-start;
  }
  
  /* Columns */
  .footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  /* BRAND COLUMN */
  .footer-col.brand h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent-primary);
    letter-spacing: -0.3px;
    margin-bottom: 6px;
  }
  
  .footer-col.brand p {
    color: var(--text-secondary);
    max-width: 240px;
    line-height: 1.6;
  }
  
  /* SECTION TITLES */
  .footer-col h4 {
    font-size: 0.75rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    opacity: 0.65;
    margin-bottom: 8px;
  }
  
  /* LINKS */
  .footer-col a {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.95rem;
  
    transition: color 0.2s ease, transform 0.15s ease;
  }
  
  .footer-col a:hover {
    color: var(--accent-primary);
    transform: translateX(2px);
  }
  
  /* LOCATION TEXT */
  .footer-col .location {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 6px;
  }
  
  /* BOTTOM BAR */
  .footer-bottom {
    text-align: center;
    margin-top: 50px;
    padding-top: 18px;
    border-top: 1px solid var(--border-subtle);
  
    font-size: 0.8rem;
    color: var(--text-muted);
  }
  
  /* ================= MOBILE ================= */
  
  @media (max-width: 900px) {
  
    .footer-container {
      grid-template-columns: 1fr 1fr;
      gap: 36px;
    }
  
  }
  
  @media (max-width: 600px) {
  
    .footer {
      padding: 50px 1.5rem 24px;
    }
  
    .footer-container {
      grid-template-columns: 1fr;
      gap: 28px;
      text-align: left;
    }
  
    .footer-col.brand p {
      max-width: 100%;
    }
  
    .footer-bottom {
      margin-top: 40px;
    }
  }
/* =====================================
   MOBILE TRUST STRIP FIX
===================================== */

@media (max-width: 768px) {

  .trust-strip {
    margin-top: 24px;
    padding: 0;
  }

  .trust-container {
    padding: 22px 16px;
  }

  .trust-label {
    font-size: 0.65rem;
    letter-spacing: 2px;
    margin-bottom: 14px;
    opacity: 0.8;
  }

  .trust-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
    justify-items: center;
  }

  .trust-items span {
    font-size: 0.9rem;
    padding: 6px 10px;

    background: rgba(2,6,23,0.5);
    border: 1px solid rgba(56,189,248,0.15);
    border-radius: 6px;

    width: 100%;
    text-align: center;
  }

}
/* =====================================================
   UAE PAGE SECTIONS
   ===================================================== */

   .authority {
    padding: 7rem 2rem;
    text-align: center;
  }
  
  .authority .subtitle {
    max-width: 700px;
    margin: 0 auto 50px;
    color: var(--text-secondary);
  }
  
  .authority-grid {
    max-width: 1100px;
    margin: 0 auto;
  
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  
  .authority-item {
    background: rgba(2,6,23,0.45);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 35px;
  
    text-align: left;
  
    transition: transform 0.25s ease, border-color 0.25s ease;
  }
  
  .authority-item:hover {
    transform: translateY(-4px);
    border-color: var(--accent-primary);
  }
  
  .authority-item h3 {
    margin-top: 0;
    color: var(--accent-primary);
  }
  
  /* ===============================
     CAPABILITIES STRIP
  ================================ */
  
  .capabilities {
    padding: 5rem 2rem;
    text-align: center;
  }
  
  .capability-list {
    max-width: 900px;
    margin: 40px auto 0;
  
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
  
  .capability-list span {
    padding: 10px 18px;
  
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
  
    font-size: 0.9rem;
  
    background: rgba(2,6,23,0.4);
  
    transition: border-color 0.2s ease, transform 0.2s ease;
  }
  
  .capability-list span:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
  }
  
  /* ===============================
     PROCESS GRID
  ================================ */
  
  .process {
    padding: 7rem 2rem;
    text-align: center;
  }
  
  .process-grid {
    max-width: 1000px;
    margin: 50px auto 0;
  
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
  
  .process-grid div {
    background: rgba(2,6,23,0.45);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 30px;
  
    text-align: left;
  
    transition: transform 0.2s ease, border-color 0.2s ease;
  }
  
  .process-grid div:hover {
    transform: translateY(-4px);
    border-color: var(--accent-primary);
  }
  
  .process-grid h4 {
    margin-top: 0;
    color: var(--accent-primary);
  }
  .process-step h3{
    margin-top:6px;
    margin-bottom:10px;
    color:var(--text-primary);
  }
  
  .process-step p{
    color:var(--text-secondary);
    line-height:1.6;
  }
  
  .step-number{
    font-size:0.75rem;
    letter-spacing:3px;
    color:var(--accent-primary);
    margin-bottom:10px;
  }
  
  /* ===============================
     GLOBAL SECTION
  ================================ */
  
  .global {
    padding: 6rem 2rem;
    text-align: center;
    padding-top:120px;
    padding-bottom:60px;
    margin-bottom:60px;
  }
  
  .global p {
    max-width: 720px;
    margin: 20px auto 0;
    color: var(--text-secondary);
  }
  
  /* ===============================
     SERVICES GRID (if needed)
  ================================ */
  
  .services {
    max-width: 1100px;
    margin: 50px auto 0;
  
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  
  .service {
    background: rgba(2,6,23,0.45);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 30px;
  
    text-align: left;
  
    transition: transform 0.25s ease, border-color 0.25s ease;
  }
  
  .service:hover {
    transform: translateY(-4px);
    border-color: var(--accent-primary);
  }
  
  .service h3 {
    margin-top: 0;
    color: var(--accent-primary);
  }
  
  /* =====================================================
     MOBILE OPTIMIZATION
     ===================================================== */
  
  @media (max-width: 900px) {
  
    .authority-grid {
      grid-template-columns: 1fr;
    }
  
    .services {
      grid-template-columns: 1fr;
    }
  
    .process-grid {
      grid-template-columns: 1fr;
    }
  
  }
  /* ===============================
   FINAL CTA SECTION
================================ */

.cta-section{
  padding:7rem 2rem;
  padding-top:80px;
  padding-bottom:100px;
}

.cta-surface{
  max-width:900px;
  margin:0 auto;

  text-align:center;

  background:linear-gradient(
    135deg,
    #38bdf8,
    #0ea5e9
  );

  border-radius:16px;
  padding:60px 50px;

  box-shadow:0 20px 60px rgba(14,165,233,0.25);
}

.cta-surface h2{
  color:#020617;
  margin-bottom:16px;
}

.cta-surface p{
  color:#020617;
  opacity:0.85;
  max-width:520px;
  margin:0 auto 30px;
}

.cta-surface .btn-primary{
  background:#020617;
  color:white;
}
/* 3D canvas */

#data-flow{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-10;
  pointer-events:none;
  }
  
  /* Glass sections */
  
  section{
    position:relative;
    z-index:1;
    }
  
  /* 3D cards */
  .card{
    transform-style: preserve-3d;
    transition: transform .35s ease, box-shadow .35s ease;
    }
    
  .card:hover{
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 25px 60px rgba(0,0,0,.35);
    }
  
  
  /* Hero glow */
  body::after{

    content:"";
    
    position:fixed;
    
    inset:0;
    
    background:
    linear-gradient(
    transparent 98%,
    rgba(56,189,248,0.15)
    );
    
    background-size:100% 120px;
    
    opacity:0.25;
    
    animation:moveGrid 20s linear infinite;
    
    pointer-events:none;
    
    }
    #hero .cta{

      margin-top:30px;
      
      }
    
    @keyframes moveGrid{
    
    0%{
    background-position:0 0;
    }
    
    100%{
    background-position:0 120px;
    }
    
    }
  
  body::after{
    content:"";
    position:fixed;
    inset:0;
    
    background-image:
    radial-gradient(#38bdf8 1px, transparent 1px);
    
    background-size:80px 80px;
    
    opacity:0.2;
    
    z-index:-5;
    }
 /* ===============================
ARCHITECTURE SECTION
=============================== */

.architecture{
  padding:8rem 2rem;
  }
  
  .architecture-container{
  max-width:1100px;
  margin:0 auto;
  
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:60px;
  align-items:center;
  }
  
  /* LEFT SIDE */
  
  .architecture-left h2{
  font-size:2.3rem;
  margin-bottom:16px;
  }
  
  .architecture-left p{
  color:var(--text-secondary);
  margin-bottom:20px;
  }
  
  .architecture-points{
  padding-left:18px;
  color:var(--text-secondary);
  }
  
  .architecture-points li{
  margin-bottom:10px;
  }
  
  /* FLOW */
  
  .architecture-flow{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  }
  
  .flow-box{
  
  background:rgba(2,6,23,0.5);
  
  border:1px solid var(--border-subtle);
  
  padding:14px 24px;
  
  border-radius:10px;
  
  min-width:260px;
  
  text-align:center;
  
  font-weight:500;
  
  transition:all .25s ease;
  }
  
  .flow-box:hover{
  transform:translateY(-3px);
  border-color:var(--accent-primary);
  }
  
  .flow-arrow{
  opacity:0.5;
  font-size:1.2rem;
  }
  
  /* MOBILE */
  
  @media(max-width:900px){
  
  .architecture-container{
  grid-template-columns:1fr;
  text-align:center;
  }
  
  }   
  /* ===============================
DATA PIPELINE
=============================== */

.pipeline{
  padding:8rem 2rem;
  text-align:center;
  }
  
  .pipeline-header{
  max-width:720px;
  margin:0 auto 60px;
  }
  
  .pipeline-header p{
  color:var(--text-secondary);
  }
  
  .pipeline-diagram{
  
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  
  flex-wrap:wrap;
  
  }
  
  /* nodes */
  
  .pipeline-node{
  
  background:rgba(2,6,23,0.5);
  
  border:1px solid var(--border-subtle);
  
  padding:16px 24px;
  
  border-radius:10px;
  
  font-weight:500;
  
  position:relative;
  
  }
  
  /* highlight validation */
  
  .pipeline-node.highlight{
  
  border-color:rgba(56,189,248,0.7);
  
  box-shadow:0 0 25px rgba(56,189,248,0.25);
  
  }
  
  /* connectors */
  
  .pipeline-connector{
  
  width:80px;
  height:2px;
  
  background:rgba(56,189,248,0.4);
  
  position:relative;
  
  overflow:hidden;
  
  }
  
  /* animated data flow */
  
  .pipeline-connector::after{
  
  content:"";
  
  position:absolute;
  
  left:-20px;
  top:0;
  
  width:20px;
  height:2px;
  
  background:#38bdf8;
  
  animation:pipelineFlow 2s linear infinite;
  
  }
  
  @keyframes pipelineFlow{
  
  0%{
  left:-20px;
  }
  
  100%{
  left:80px;
  }
  
  }