#story-vision-about {
    background: 
        radial-gradient(1200px 600px at 20% -10%, rgba(0, 177, 232, 0.08), transparent 60%), 
        radial-gradient(1200px 600px at 80% 110%, rgba(0, 136, 204, 0.08), transparent 60%), 
        #ffffff;
}
    a{color:inherit; text-decoration:none}
/* HERO */
    .hero{
      position:relative; 
      overflow:hidden
    }
    
    .hero-bg{
      position:absolute; 
      inset:0; 
      opacity:1; 
      background:
        radial-gradient(800px 300px at 20% 20%, rgba(0,177,232,.08), transparent 70%),
        radial-gradient(700px 260px at 80% 60%, rgba(0,136,204,.08), transparent 70%);
      filter:blur(40px);
    }
    
    .hero .container{
      display:grid; 
      grid-template-columns: 1.2fr .8fr; 
      gap:40px; 
      padding:84px 0 0 0
    }
    
    .eyebrow{
      display:inline-flex; 
      gap:10px; 
      align-items:center; 
      font-size:12px; 
      letter-spacing:.12em; 
      text-transform:uppercase; 
      color:#4b5567; 
      background:rgba(255,255,255,.6); 
      border:1px solid #e4e9f2; 
      border-radius:999px; 
      padding:8px 12px
    }
    
    .eyebrow .dot{
      width:6px;
      height:6px;
      border-radius:50%;
      background:linear-gradient(135deg, #02bff9, rgb(192, 0, 0))
    }
    
    h2.display{
      font-family:"Playfair Display", Georgia, serif; 
      font-weight:700; 
      font-size: clamp(36px, 6vw, 44px); 
      line-height:1.1; 
      margin:14px 0 12px
    }
    
    .lead{
      color:#4b5567; 
      font-size:14px; 
      max-width:60ch
    }
    
    .cta-row{
      display:flex; 
      gap:12px; 
      margin-top:24px
    }
    
    .btn-primary{
      background:linear-gradient(135deg,rgb(192, 0, 0)); 
      border:none; 
      color:#ffffff; 
      padding:14px 18px; 
      border-radius:14px; 
      font-weight:700;
      cursor:pointer;
      text-decoration:none;
      display:inline-block;
      transition:all 0.3s ease;
      position:relative;
      overflow:hidden;
    }
    
    .btn-primary:hover{
      transform:translateY(-2px);
      box-shadow: 0 8px 25px rgba(0,177,232,.25);
    }
    
    .btn-primary:before{
      content:'';
      position:absolute;
      top:0;
      left:-100%;
      width:100%;
      height:100%;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
      transition:left 0.5s;
    }
    
    .btn-primary:hover:before{
      left:100%;
    }
    
    .btn-ghost{
      background:transparent; 
      border:1px solid #e4e9f2; 
      color:#0b0f14; 
      padding:14px 18px; 
      border-radius:14px; 
      font-weight:600;
      cursor:pointer;
      text-decoration:none;
      display:inline-block;
      transition:all 0.3s ease;
    }
    
    .btn-ghost:hover{
      background:#00b1e8;
      color:#ffffff;
      border-color:#00b1e8;
      transform:translateY(-1px);
      box-shadow: 0 6px 20px rgba(0,177,232,.2);
    }
    
    .hero-card{
      background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.5)); 
      border:1px solid #e4e9f2; 
      border-radius:18px; 
      padding:18px; 
      box-shadow: 0 10px 30px rgba(12,17,27,.08)
    }
    
    .stats{
      display:grid; 
      grid-template-columns: repeat(3, 1fr); 
      gap:16px; 
      margin-top:22px
    }
    
    .stat{
      background:#f7f9fc; 
      border:1px solid #e4e9f2; 
      border-radius:16px; 
      padding:18px;
      transition:all 0.3s ease;
      cursor:pointer;
    }
    
    .stat:hover{
      transform:translateY(-3px);
      box-shadow: 0 10px 30px rgba(0,177,232,.1);
      border-color:rgba(0,177,232,.3);
    }
    
    .stat h3{
      margin:0; 
      font-size:28px;
      color:#00b1e8;
    }
    
    .stat p{
      margin:6px 0 0; 
      color:#4b5567; 
      font-size:13px
    }
    
    .hero-illustration{
      position:relative; 
      height:100%; 
      min-height:360px; 
      border-radius:18px; 
      border:1px solid #e4e9f2; 
      overflow:hidden; 
      background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.6)); 
      box-shadow: 0 10px 30px rgba(12,17,27,.08)
    }
    
    .grid-lines{
      position:absolute; 
      inset:0; 
      background-image:linear-gradient(to right, rgba(12,17,27,.06) 1px, transparent 1px),linear-gradient(to bottom, rgba(12,17,27,.06) 1px, transparent 1px); 
      background-size: 40px 40px
    }
    
    .nodes{
      position:absolute; 
      inset:0
    }
    
    .node{
      position:absolute;
      width:10px;
      height:10px;
      border-radius:50%;
      background: linear-gradient(135deg, rgb(192, 0, 0), #0088cc);
      box-shadow:0 0 22px rgba(0,177,232,.4), 0 0 22px rgba(0,136,204,.3)
    }
    
    .cables{
      position:absolute; 
      inset:0;
    }
    
    .cable{
      position:absolute; 
      width:2px; 
      background:linear-gradient(180deg, #0088cc, #00b1e8); 
      filter:blur(.2px)
    }
    
    .cable.c1{left:20%; top:0; height:80%}
    .cable.c2{left:50%; top:10%; height:90%}
    .cable.c3{left:80%; top:0; height:70%}

    /* ABOUT COPY */
  
    
    .split{
      display:grid; 
      grid-template-columns:1.05fr .95fr; 
      gap:40px
    }
    
    h3.kicker{
      font-size:14px; 
      color:#00b1e8; 
      letter-spacing:.18em; 
      text-transform:uppercase; 
      margin:0 0 8px
    }
    
    h2.section-title{
      font-size:32px; 
      margin:0 0 10px
    }
    
    p{margin:0 0 14px}
    
    .card{
      background:#f7f9fc; 
      border:1px solid #e4e9f2; 
      border-radius:18px; 
      padding:24px
    }
.expertise-title {
  margin: 0 0 16px;
  color: #00b1e8;
}
     /* BRAND GRID */
    .brand-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
    .brand-chip{background:#eef3f9; border:1px solid #e4e9f2; padding:14px 16px; border-radius:14px; display:flex; align-items:center; justify-content:space-between}
    .brand-chip span{color:#4b5567}

.brand-chip:hover {
  background-color: rgb(192, 0, 0);
  color: #fff;
}
    .brand-chip span{color:#4b5567}

    /* VALUES */
    .values{
      display:grid; 
      grid-template-columns:repeat(3,1fr); 
      gap:18px
    }
    
    .value{
      padding:22px; 
      border-radius:16px; 
      border:1px solid #e4e9f2; 
      background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.4))
    }
    
    .value h4{
      margin:0 0 8px;
      color:#00b1e8;
    }
    
    .value p{color:#4b5567}

    /* TIMELINE */
    .timeline{
      position:relative; 
      padding-left:28px
    }
    
    .timeline:before{
      content:""; 
      position:absolute; 
      left:10px; 
      top:4px; 
      bottom:4px; 
      width:2px; 
      background:linear-gradient(180deg, #00b1e8, #0088cc)
    }
    
    .t-item{margin:0 0 18px}
    
    .t-item .dot{
      width:12px;
      height:12px;
      border-radius:50%;
      background:linear-gradient(135deg, rgb(192, 0, 0)); 
      position:absolute; 
      left:4px; 
      margin-top:4px
    }
    
    .t-item h5{
      margin:0 0 4px; 
      font-size:16px
    }
    
    .t-item p{
      margin:0; 
      color:#4b5567
    }

    /* CTA */
    .cta{
      display:flex; 
      align-items:center; 
      justify-content:space-between; 
      gap:24px; 
      padding:24px 28px; 
      border-radius:18px; 
      background:linear-gradient(135deg, rgba(0,177,232,.15), rgba(0,136,204,.15)); 
      border:1px solid #e4e9f2
    }
    
    .cta p{
      margin:0; 
      color:#0b0f14; 
      font-weight:700
    }
    
    .cta a{
      background:#0b0f14; 
      color:#ffffff; 
      padding:12px 16px; 
      border-radius:12px; 
      border:1px solid #e4e9f2;
      text-decoration:none;
    }

/* Responsive */
    @media (max-width: 960px){
      .hero .container{
        grid-template-columns:1fr; 
        gap:24px; 
        padding:54px 0
      }
      .split{grid-template-columns:1fr}
      .values{grid-template-columns:1fr 1fr}
      .brand-grid{grid-template-columns:1fr}
      .stats{grid-template-columns:1fr 1fr}
    }
    
    @media (max-width: 560px){
      .values{grid-template-columns:1fr}
      .stats{grid-template-columns:1fr}
    }