:root{
      /* Light surfaces */
      --bg0:#F6FBFF;
      --bg1:#FFFFFF;
      --bg2:#EEF7FF;

      --card:#FFFFFF;
      --card2:#ffffffcc;

      /* Brand + text (Vaival palette) */
      --text:#000046;
      --muted: rgba(0,0,70,.70);
      --muted2: rgba(0,0,70,.56);

      --accent:#00ecf2;   /* aqua */
      --accent2:#018eea;  /* blue */

      --line: rgba(0,236,242,.18);
      --line2: rgba(1,142,234,.18);

      --shadow: 0 18px 55px rgba(0,0,70,.10);
      --shadow2: 0 10px 28px rgba(0,0,70,.10);

      --radius: 22px;
      --radius2: 28px;
      --max: 1180px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background:
        radial-gradient(900px 520px at 15% 10%, rgba(0,236,242,.22), transparent 60%),
        radial-gradient(900px 520px at 85% 20%, rgba(1,142,234,.18), transparent 60%),
        linear-gradient(180deg, #f7fbff, #ffffff);
      color: #000046;
      overflow-x:hidden;
    }

    a{color:inherit; text-decoration:none}
    .container{max-width:var(--max); margin:0 auto; padding:0 18px}
    .section{padding:92px 0}

    .subcap{
      display:inline-flex; gap:10px; align-items:center;
      font-size:12px; letter-spacing:.14em; text-transform:uppercase;
      color: rgba(0,236,242,.95);
      margin:0 0 14px;
    }
    .dot{
      width:10px;height:10px;border-radius:99px;
      background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.2) 40%, rgba(0,236,242,.0) 70%);
      outline: 1px solid rgba(0,236,242,.35);
      box-shadow: 0 0 18px rgba(0,236,242,.16);
    }

    h1,h2,h3{margin:0}
    .h1{
      font-size: clamp(38px, 4.4vw, 64px);
      line-height:1.03;
      letter-spacing:-.02em;
      font-weight:bold;
    }
    .h2{
      font-size: clamp(28px, 3.2vw, 44px);
      line-height:1.08;
      letter-spacing:-.02em;
      font-weight:bold;
    }
    .lead{
      color: rgba(0,0,70,.72);
      font-size: 16px;
      line-height:1.7;
      max-width: 62ch;
      margin-top:14px;
    }

    /* Soft grain overlay */
    .grain{position:relative}
    .grain:before{
      content:"";
      position:absolute; inset:0;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
      mix-blend-mode: multiply;
      opacity:.12;
      pointer-events:none;
    }

    /* Header */
    .header{
      position:sticky; top:0; z-index:50;
      background: rgba(255,255,255,.72);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(0,0,70,.08);
    }
    .navwrap{
      display:flex; align-items:center; justify-content:space-between;
      height:74px;
    }
    .brand{
      display:flex; align-items:center; gap:12px;
      font-weight:bold;
      letter-spacing:.01em;
    }
    .mark{
      width:34px;height:34px;border-radius:10px;
      background:
        radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
        linear-gradient(135deg, rgba(0,236,242,.95), rgba(1,142,234,.90));
      box-shadow: 0 12px 26px rgba(0,236,242,.18);
      position:relative;
      overflow:hidden;
    }
    .mark:after{
      content:"";
      position:absolute; inset:-30%;
      background: conic-gradient(from 190deg, rgba(255,255,255,.0), rgba(255,255,255,.75), rgba(255,255,255,.0));
      opacity:.22;
      transform: rotate(12deg);
    }
    .brand small{
      display:block; font-weight:bold; color: rgba(0,0,70,.55);
      letter-spacing:.10em; font-size:11px; margin-top:2px
    }
    .nav{
      display:flex; gap:18px; align-items:center;
      color: rgba(0,0,70,.78);
      font-weight:bold;
      font-size:14px;
    }
    .nav a{
      padding:10px 10px; border-radius:12px;
      transition: background .2s ease, color .2s ease;
    }
    .nav a:hover{background: rgba(0,0,70,.05)}
    .nav a.active{color: rgba(0,0,70,.98)}
    .right{display:flex; align-items:center; gap:12px}

    .iconbtn{
      width:40px;height:40px;border-radius:14px;
      background: rgba(0,0,70,.04);
      border: 1px solid rgba(0,0,70,.08);
      display:grid; place-items:center;
      cursor:pointer;
      color: rgba(0,0,70,.78);
      transition: transform .2s ease, background .2s ease, border .2s ease;
    }
    .iconbtn:hover{transform: translateY(-1px); background: rgba(0,0,70,.06)}

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding: 12px 18px;
      border-radius: 999px;
      font-weight:bold;
      font-size:14px;
      letter-spacing:.01em;
      border: 1px solid rgba(0,236,242,.35);
      background: linear-gradient(135deg, rgba(0,236,242,.10), rgba(1,142,234,.08));
      box-shadow: 0 14px 30px rgba(10,24,44,.10);
      transition: transform .2s ease, filter .2s ease, background .2s ease;
      white-space:nowrap;
    }
    .btn:hover{transform: translateY(-1px); filter: brightness(1.02)}
    .btn.primary{
      border: 1px solid rgba(0,236,242,.55);
      background: linear-gradient(135deg, rgba(0,236,242,.95), rgba(1,142,234,.92));
      color:#ffffff;
      box-shadow: 0 18px 40px rgba(0,236,242,.18);
    }
    .btn.ghost{
      border: 1px solid rgba(0,236,242,.35);
      background: rgba(255,255,255,.65);
      color: rgba(0,0,70,.88);
    }

    .hamburger{
      display:none;
      width:44px;height:44px;border-radius:14px;
      background: rgba(0,0,70,.04);
      border: 1px solid rgba(0,0,70,.08);
      align-items:center; justify-content:center;
      cursor:pointer;
    }
    .hamburger span{
      width:18px;height:2px;background: rgba(0,0,70,.75); display:block; position:relative;
    }
    .hamburger span:before,.hamburger span:after{
      content:""; position:absolute; left:0; width:18px; height:2px; background: rgba(0,0,70,.75);
    }
    .hamburger span:before{top:-6px}
    .hamburger span:after{top:6px}

    /* Hero */
    .hero{
      position:relative;
      padding: 64px 0 78px;
    }
    .hero .wrap{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 34px;
      align-items:center;
    }
    .hero .actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px}

    .heroCard{
      position:relative;
      border-radius: var(--radius2);
      background:
        radial-gradient(520px 300px at 65% 40%, rgba(0,236,242,.18), rgba(255,255,255,0) 60%),
        radial-gradient(420px 280px at 30% 20%, rgba(1,142,234,.16), rgba(255,255,255,0) 60%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
      border: 1px solid rgba(0,0,70,.08);
      box-shadow: var(--shadow);
      overflow:hidden;
      min-height: 420px;
    }
    .heroCard .glowline{
      position:absolute; left:0; right:0; top:0;
      height:2px;
      background: linear-gradient(90deg, rgba(0,236,242,0), rgba(0,236,242,.65), rgba(1,142,234,.65), rgba(0,236,242,0));
      opacity:.9;
    }

    .iso{
      position:absolute; inset:0;
      display:grid; place-items:center;
      padding:26px;
      transform: translateY(2px);
    }

    /* Trust bar */
    .trustbar{
      padding: 80px 0;
      border-top: 1px solid rgba(0,0,70,.06);
      border-bottom: 1px solid rgba(0,0,70,.06);
      background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.60));
    }
    .trustgrid{
      display:flex; align-items:center; justify-content:space-between;
      gap: 18px;
      flex-wrap:wrap;
    }
    .logos{
      display:flex; gap:16px; flex-wrap:wrap; align-items:center;
      opacity:.92;
    }
    .logoPill{
      height:42px;
      padding: 0 14px;
      border-radius: 999px;
      display:flex; align-items:center; gap:10px;
      border: 1px solid rgba(0,0,70,.08);
      background: rgba(255,255,255,.75);
      filter: grayscale(1);
      box-shadow: var(--shadow2);
    }
    .logoPill svg{opacity:.75}

    /* Cards / grids */
    .grid2{display:grid; grid-template-columns: 1fr 1fr; gap:18px}
    .grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
    .grid4{display:grid; grid-template-columns: repeat(4, 1fr); gap:18px}

    .card{
      position:relative;
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
      border: 1px solid rgba(0,0,70,.08);
      box-shadow: var(--shadow2);
      overflow:hidden;
    }
    .card:before{
      content:"";
      position:absolute; left:0; top:0; right:0; height:2px;
      background: linear-gradient(90deg, rgba(0,236,242,0), rgba(0,236,242,.75), rgba(0,236,242,0));
      opacity:.9;
    }
    .card .pad{padding:24px;}
    #services .card .pad{text-align:center;}
    .card h3{font-size:18px; font-weight:bold; letter-spacing:-.01em}
    .card p{margin:10px 0; color: rgba(0,0,70,.68); line-height:1.7; font-size:14px}

    /* Make testimonial content a vertical layout */
#insights .card .pad{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Push author block to bottom */
#insights .who{
  margin-top: auto;
}

#insights .card{
  min-height: 280px;
}

#insights .who{
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,70,.08);
}

    .icon{
      width:44px;height:44px;border-radius:16px;
      display:grid; place-items:center;
      background:
        radial-gradient(22px 22px at 30% 25%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
        linear-gradient(135deg, rgba(0,236,242,.18), rgba(1,142,234,.12));
      border: 1px solid rgba(0,236,242,.22);
      box-shadow: 0 10px 24px rgba(0,236,242,.10);
      margin-bottom: 14px;
      color: rgba(0,0,70,.78);
    }
    .icon svg{opacity:.95}

    /* TaaS split */
    .split{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      align-items:stretch;
    }
    .callout{
      border-radius: var(--radius2);
      background:
        radial-gradient(520px 320px at 30% 20%, rgba(0,236,242,.16), rgba(255,255,255,0) 60%),
        radial-gradient(520px 320px at 80% 70%, rgba(1,142,234,.12), rgba(255,255,255,0) 60%),
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
      border: 1px solid rgba(0,0,70,.08);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .callout .pad{padding:30px}
    .bullets{margin:18px 0 0; padding:0; list-style:none; display:grid; gap:12px}
    .bullets li{
      display:flex; gap:12px; align-items:flex-start;
      color: rgba(0,0,70,.72);
      line-height:1.6;
      font-size:14px;
    }
    .check{
      width:22px;height:22px;border-radius:8px;
      background: rgba(0,236,242,.12);
      border: 1px solid rgba(0,236,242,.30);
      display:grid; place-items:center;
      flex:0 0 auto;
      box-shadow: 0 10px 20px rgba(0,236,242,.10);
      margin-top:2px;
      color: rgba(0,0,70,.80);
    }

    /* Steps */
    .steps{
      display:grid; grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 22px;
    }
    .step{
      border-radius: 18px;
      padding: 16px 16px 18px;
      border: 1px solid rgba(0,0,70,.08);
      background: rgba(255,255,255,.75);
      position:relative;
      overflow:hidden;
      box-shadow: var(--shadow2);
    }
    .step:before{
      content:"";
      position:absolute; inset:-60px;
      background: radial-gradient(circle at 30% 30%, rgba(0,236,242,.10), rgba(255,255,255,0) 55%);
      opacity:.85;
    }
    .step .top{position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px}
    .step b{position:relative; font-size:14px}
    .tag{
      position:relative;
      font-size:11px;
      padding:6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(0,236,242,.26);
      color: rgba(0,0,70,.78);
      background: rgba(0,236,242,.10);
      white-space:nowrap;
    }
    .step p{position:relative; margin:10px 0 0; color: rgba(0,0,70,.66); font-size:13px; line-height:1.65}

    /* Head row links */
    .sectionHeadRow{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap: 18px;
      margin-bottom: 20px;
    }
    .link{
      color: rgba(0,236,242,.95);
      font-weight:bold;
      font-size:13px;
      letter-spacing:.01em;
      display:inline-flex; align-items:center; gap:8px;
    }

    /* Testimonials */
    .quote{
      font-size:62px; line-height:0.7; font-weight:bold;
      color: rgba(0,236,242,.95);
      margin-bottom: 10px;
    }
    .who{
      margin-top:16px;
      display:flex; align-items:center; gap:12px;
      color: rgba(0,0,70,.88);
      font-weight:bold;
    }
    .who small{display:block; font-weight:800; color: rgba(0,0,70,.55); margin-top:2px}
    .avatar{
  width:100px;
  height:100px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f0f3f8; /* fallback bg */
}

.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}


    /* Portfolio slider */
    .portfolio{
      position:relative;
      background:
        radial-gradient(900px 460px at 10% 10%, rgba(1,142,234,.12), rgba(255,255,255,0) 60%),
        linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.45));
      border-top: 1px solid rgba(0,0,70,.06);
      border-bottom: 1px solid rgba(0,0,70,.06);
    }
    .sliderShell{
      position:relative;
      border-radius: var(--radius2);
      border: 1px solid rgba(0,0,70,.08);
      background: rgba(255,255,255,.72);
      overflow:hidden;
      box-shadow: var(--shadow);
    }
    .slides{
      display:flex;
      width:100%;
      transition: transform .5s ease;
    }
    .slide{
      flex: 0 0 100%;
      min-height: 320px;
      position:relative;
      display:grid;
      align-items:end;
    }
    .shot{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .shot .mockup{
      width: 100%;
      height: 100%;
      object-fit: cover;
      }

    .slideInfo{
      position:relative;
      padding: 22px 22px 20px;
      display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
      background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.78));
    }
    .slideInfo h3{font-size:18px; font-weight:900; color:#fff;}
    .slideInfo p{margin:6px 0 0; color: rgba(0,0,70,.68); font-size:13px; line-height:1.6; max-width:70ch; color:#fff;}

    .pill{
      display:inline-flex; align-items:center; gap:8px;
      border-radius:999px;
      border: 1px solid rgba(0,0,70,.10);
      background: rgba(255,255,255,.80);
      padding:8px 10px;
      font-weight:bold;
      font-size:12px;
      color: rgba(0,0,70,.78);
      white-space:nowrap;
      box-shadow: var(--shadow2);
    }

    .sliderBtns{
      position:absolute; left:16px; top:16px;
      display:flex; gap:10px;
      z-index:3;
    }
    .sbtn{
      width:40px;height:40px;border-radius:14px;
      border:1px solid rgba(0,0,70,.10);
      background: rgba(255,255,255,.78);
      backdrop-filter: blur(10px);
      display:grid; place-items:center;
      cursor:pointer;
      transition: transform .2s ease, background .2s ease;
      color: rgba(0,0,70,.78);
      box-shadow: var(--shadow2);
    }
    .sbtn:hover{transform: translateY(-1px); background: rgba(255,255,255,.92)}

    .dots{
      display:flex; gap:8px;
      justify-content:center;
      margin-top: 14px;
    }
    .dotBtn{
      width: 26px; height: 4px; border-radius:999px;
      background: rgba(0,0,70,.18);
      border: 1px solid rgba(0,0,70,.10);
      cursor:pointer;
      transition: background .2s ease, transform .2s ease;
    }
    .dotBtn.active{
      background: rgba(0,236,242,.95);
      transform: scaleX(1.05);
    }

    /* Final CTA */
    .final{
      position:relative;
      padding: 86px 0 96px;
      background:
        radial-gradient(1100px 540px at 25% 20%, rgba(0,236,242,.16), rgba(255,255,255,0) 65%),
        radial-gradient(900px 460px at 80% 50%, rgba(1,142,234,.12), rgba(255,255,255,0) 65%),
        linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.45));
      border-top: 1px solid rgba(0,0,70,.06);
    }
    .finalBox{
      border-radius: var(--radius2);
      background: rgba(255,255,255,.82);
      border:1px solid rgba(0,0,70,.08);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .finalBox .pad{padding:30px}
    .smallnote{margin-top:10px; color: rgba(0,0,70,.58); font-size:13px}

    /* Footer */
    footer{
      padding: 40px 0 48px;
      color: rgba(0,0,70,.70);
      border-top: 1px solid rgba(0,0,70,.06);
      background: rgba(255,255,255,.75);
    }
    .footgrid{
      display:grid; grid-template-columns: 1.2fr .8fr;
      gap: 18px;
      align-items:start;
    }
    .footmeta{font-size:14px; line-height:1.7}
    .footmeta b{color: #018eea;}
    .footlinks{display:grid; gap:10px; justify-content:end}
    .footlinks a{color: #018eea; font-weight:bold; font-size:13px}

    /* Mobile */
    @media (max-width: 980px){
      .hero .wrap{grid-template-columns: 1fr; gap: 18px}
      .heroCard{min-height: 380px}
      .grid4{grid-template-columns: repeat(2, 1fr)}
      .grid3{grid-template-columns: 1fr}
      .grid2{grid-template-columns: 1fr}
      .split{grid-template-columns: 1fr}
      .steps{grid-template-columns: 1fr 1fr}
      .nav{display:none}
      .hamburger{display:flex}
    }
    @media (max-width: 520px){
      .steps{grid-template-columns: 1fr}
      .grid4{grid-template-columns: 1fr}
      .trustgrid{flex-direction:column; align-items:flex-start}
      .footgrid{grid-template-columns: 1fr}
      .footlinks{justify-content:start}
    }

    /* Mobile menu sheet */
    .sheet{
      position:fixed; inset:0;
      background: rgba(0,0,70,.32);
      display:none;
      z-index:99;
    }
    .sheet.open{display:block}
    .sheetPanel{
      position:absolute; right:14px; top:80px;
      width:min(360px, calc(100% - 28px));
      border-radius: 22px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(0,0,70,.10);
      box-shadow: var(--shadow);
      overflow:hidden;
      backdrop-filter: blur(14px);
    }
    .sheetPanel a{
      display:flex; padding:14px 16px;
      border-bottom: 1px solid rgba(0,0,70,.06);
      font-weight:bold;
      color: rgba(0,0,70,.88);
    }
    .sheetPanel a:hover{background: rgba(0,0,70,.04)}
    .sheetPanel .row{display:flex; gap:10px; padding:14px 16px}
    .sheetPanel .row .btn{width:100%}
  
    
    /* ===== HERO dark navy theme ===== */
    .hero{
      background:
    radial-gradient(900px 520px at 20% 20%, rgba(0,236,242,.18), transparent 60%),
    radial-gradient(900px 520px at 80% 10%, rgba(1,142,234,.22), transparent 60%),
    linear-gradient(
      180deg,
      #000046 0%,
      #000046 70%,
      #0a1b5e 85%,
      #018be9 100%
    );
      color: #ffffff;
      padding: 56px 0 64px;
    }

    .hero .h1{color:#ffffff}
    .hero .lead{color: rgba(255,255,255,.74)}
    .hero .subcap{color: rgba(0,236,242,.95)}
    .hero .dot{
      outline: 1px solid rgba(0,236,242,.40);
      box-shadow: 0 0 22px rgba(0,236,242,.22);
    }
    .hero .btn.ghost{
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(0,236,242,.38);
      color: rgba(255,255,255,.92);
      box-shadow: 0 18px 40px rgba(0,0,0,.22);
    }
    .hero .btn.ghost:hover{filter: brightness(1.05)}
    .heroCard{
      background:
        radial-gradient(520px 320px at 65% 40%, rgba(0,236,242,.18), rgba(0,0,0,0) 60%),
        radial-gradient(520px 320px at 30% 20%, rgba(1,142,234,.18), rgba(0,0,0,0) 60%),
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 26px 90px rgba(0,0,0,.35);
    }
    .heroCard .glowline{
      opacity: 1;
      background: linear-gradient(90deg, rgba(0,236,242,0), rgba(0,236,242,.80), rgba(1,142,234,.80), rgba(0,236,242,0));
    }
    .isoBadge{
      background: rgba(0,0,0,.26);
      border: 1px solid rgba(255,255,255,.16);
      color: rgba(255,255,255,.78);
    }

/* ===== Brand adjustments ===== */
    .subcap{ color:#018eea; }
    .link{ color:#018eea; }
    .link:hover{ filter: brightness(0.95); text-decoration: underline; text-underline-offset: 3px; }

    /* ===== Logo marquee (trust carousel) ===== */
    .logoMarquee{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.55);
  padding: 6px 0;
  min-width: min(720px, 100%);

  /* edge fade */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

    .logoTrack{
      display:flex;
      gap:14px;
      width:max-content;
      animation: marquee 22s linear infinite;
      padding: 0 14px;
      align-items:center;
    }
    .logoMarquee:hover .logoTrack{ animation-play-state: paused; }
    @keyframes marquee{
      from{ transform: translateX(0); }
      to{ transform: translateX(-50%); }
    }
    .logoPill{
      height:44px;
      padding: 0 14px;
      border-radius: 999px;
      display:flex; align-items:center; gap:10px;
      border: 1px solid rgba(1,142,234,.18);
      background: rgba(255,255,255,.72);
      filter: none;
      box-shadow: 0 10px 26px rgba(0,0,70,.06);
      white-space:nowrap;
    }

    /* ===== Services carousel ===== */
    .svcCarousel{
      position:relative;
      margin-top: 18px;
    }
    .svcViewport{
  overflow:auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  /* side fade mask */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}
    .svcTrack{
      display:flex;
      gap: 16px;
      padding: 8px 2px 40px;
    }
    .svcSlide{
      scroll-snap-align: start;
      flex: 0 0 min(340px, 86vw);
    }
    .svcNav{
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      width:44px;height:44px;border-radius:16px;
      border:1px solid rgba(1,142,234,.20);
      background: rgba(255,255,255,.78);
      box-shadow: 0 18px 40px rgba(0,0,70,.12);
      display:grid; place-items:center;
      cursor:pointer;
      transition: transform .2s ease, background .2s ease;
      z-index: 2;
    }
    .svcNav:hover{ transform: translateY(-50%) translateY(-1px); background: rgba(255,255,255,.92); }
    .svcNav.prev{ left: -6px; }
    .svcNav.next{ right: -6px; }
    @media (max-width: 980px){
      .svcNav.prev{ left: 0; }
      .svcNav.next{ right: 0; }
    }

    /* ===== TaaS simple layout ===== */
    .taasWrap{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 22px;
      align-items:center;
      margin-top: 18px;
    }
    .taasPanel{
      padding: 0;
    }
    .taasBullets{
      margin: 18px 0 0;
      padding: 0;
      list-style:none;
      display:grid;
      gap: 12px;
      max-width: 70ch;
    }
    .taasBullets li{
      display:flex; gap:12px; align-items:flex-start;
      color: rgba(0,0,70,.78);
      line-height:1.7;
      font-size:14px;
    }
    .taasBullets b{ color: rgba(0,0,70,.92); }
    .taasCheck{
      width:22px;height:22px;border-radius:8px;
      background: rgba(0,236,242,.16);
      border: 1px solid rgba(1,142,234,.25);
      display:grid; place-items:center;
      flex:0 0 auto;
      box-shadow: 0 10px 22px rgba(1,142,234,.10);
      margin-top:2px;
      color: #000046;
    }
    .taasArt{
      border-radius: var(--radius2);
      border: 1px solid rgba(1,142,234,.18);
      background:
        radial-gradient(520px 300px at 30% 20%, rgba(0,236,242,.20), rgba(255,255,255,0) 60%),
        radial-gradient(520px 300px at 80% 65%, rgba(1,142,234,.14), rgba(255,255,255,0) 65%),
        linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.55));
      box-shadow: 0 24px 70px rgba(0,0,70,.12);
      overflow:hidden;
      position:relative;
      min-height: 360px;
      display:grid;
      place-items:center;
      padding: 18px;
    }
    @media (max-width: 980px){
      .taasWrap{ grid-template-columns: 1fr; }
      .taasArt{ min-height: 320px; }
    }

    /* ===== Workflow infographic ===== */
    .flowWrap{
      margin-top: 18px;
      border-radius: var(--radius2);
      border: 1px solid rgba(1,142,234,.18);
      background:
        radial-gradient(700px 320px at 15% 20%, rgba(0,236,242,.16), rgba(255,255,255,0) 60%),
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.55));
      box-shadow: 0 24px 70px rgba(0,0,70,.10);
      padding: 18px;
      position:relative;
      overflow:hidden;
    }
    .flow{
      display:flex;
      gap: 12px;
      align-items:stretch;
      justify-content:space-between;
    }
    .flowStep{
      flex: 1 1 0;
      border-radius: 18px;
      border: 1px solid rgba(1,142,234,.16);
      background: rgba(255,255,255,.72);
      padding: 14px 14px 16px;
      position:relative;
      overflow:hidden;
      min-width: 180px;
    }
    .flowStep:before{
      content:"";
      position:absolute; inset:-60px;
      background: radial-gradient(circle at 30% 30%, rgba(0,236,242,.16), rgba(255,255,255,0) 55%);
      opacity:.9;
      pointer-events:none;
    }
    .flowTop{
      position:relative;
      display:flex; align-items:center; gap:10px; justify-content:space-between;
      margin-bottom: 8px;
    }
    .flowNum{
      position:relative;
      width:34px;height:34px;border-radius:14px;
      display:grid; place-items:center;
      font-weight:bold;
      color:#000046;
      background: linear-gradient(135deg, rgba(0,236,242,.75), rgba(1,142,234,.35));
      border: 1px solid rgba(1,142,234,.22);
      box-shadow: 0 14px 30px rgba(1,142,234,.12);
      flex:0 0 auto;
    }
    .flowTitle{
      position:relative;
      font-weight:bold;
      color: rgba(0,0,70,.95);
      letter-spacing:-.01em;
    }
    .flowTag{
      position:relative;
      font-size:11px;
      padding:6px 10px;
      border-radius:999px;
      border: 1px solid rgba(1,142,234,.22);
      color:#018eea;
      background: rgba(1,142,234,.06);
      white-space:nowrap;
    }
    .flowStep p{
      position:relative;
      margin: 0;
      color: rgba(0,0,70,.72);
      font-size:13px;
      line-height:1.65;
    }
    .flowArrow{
      width:38px;
      display:flex;
      align-items:center;
      justify-content:center;
      flex:0 0 auto;
      opacity:.8;
    }
    .flowArrow svg{ width:28px; height:28px; }
    @media (max-width: 980px){
      .flow{ flex-direction:column; }
      .flowArrow{ width:auto; height:28px; transform: rotate(90deg); margin: -2px 0; }
      .flowStep{ min-width: auto; }
    }

.frameworkFlow{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 28px;
  overflow:hidden;
  border-radius: 22px;
}

.fwStep{
  position:relative;
  padding: 26px 28px 30px;
  color:#ffffff;
  clip-path: polygon(0 0, 94% 0, 100% 50%, 94% 100%, 0 100%, 6% 50%);
}

.fwStep:first-child{
  clip-path: polygon(0 0, 94% 0, 100% 50%, 94% 100%, 0 100%);
}

.fwStep:last-child{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 6% 50%);
}

.fwStep h4{
  margin: 10px 0 8px;
  font-size: 18px;
  font-weight: 800;
}

.fwStep p{
  margin:0;
  font-size:14px;
  line-height:1.6;
  opacity:.92;
}

.fwNum{
  font-size:35px;
  font-weight:900;
  letter-spacing:.04em;
}

/* Color mapping using your palette */
.fw1{ background:#000046; }
.fw2{ background:#012a78; }
.fw3{ background:#018eea; }
.fw4{ background:#00ecf2; color:#000046; }

.fw4 p, .fw4 h4{ color:#000046; }

/* Mobile stacking */
@media (max-width: 980px){
  .frameworkFlow{
    grid-template-columns: 1fr;
  }

  .fwStep{
    clip-path:none;
    border-bottom:1px solid rgba(255,255,255,.18);
  }

  .fw4{
    border-bottom:none;
  }
}



.portfolioGrid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:24px;
}

.portfolioCard{
  display:block;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(1,142,234,.14);
  background:#fff;
  box-shadow: 0 18px 55px rgba(1,142,234,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}

.portfolioCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(0,236,242,.18);
}

.portfolioImage{
  aspect-ratio: 16/10;
  overflow:hidden;
}

.portfolioImage img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.portfolioContent{
  padding:20px;
}

.portfolioContent h3{
  margin:0 0 10px;
  font-size:18px;
  font-weight:900;
}

.portfolioContent p{
  margin:0 0 12px;
  font-size:14px;
  color:rgba(11,19,48,.70);
}

.tag{
  display:inline-block;
  font-size:12px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(1,142,234,.08);
  border:1px solid rgba(1,142,234,.18);
  color:#000046;
}

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



/* =========================================
   SINGLE PORTFOLIO PAGE
========================================= */

/* HERO LAYOUT */
.heroCaseGrid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:48px;
  align-items:center;
}

.heroCaseMedia img{
  width:100%;
  border-radius:22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}

.caseMeta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.pill{
  font-size:12px;
  font-weight:700;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
}

/* ACTION BUTTONS */
.caseActions{
  display:flex;
  gap:12px;
  margin-top:22px;
  flex-wrap:wrap;
}

/* TWO COLUMN CONTENT GRID */
.caseGrid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}

/* CARD TITLES */
.cardTitle{
  margin:0 0 12px;
  font-size:18px;
  font-weight:900;
}

.cardText{
  margin:0 0 16px;
  line-height:1.7;
  color:rgba(11,19,48,.72);
}

/* KEY VALUE ROWS */
.caseKVs{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.kvRow{
  display:flex;
  justify-content:space-between;
  font-size:14px;
}

.kvRow b{
  color:#000046;
}

.kvRow span{
  color:rgba(11,19,48,.65);
}

/* STATS */
.statsRow{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:32px;
}

.statCard{
  padding:22px;
  border-radius:18px;
  background:#fff;
  text-align:center;
  box-shadow:0 12px 30px rgba(1,142,234,.12);
  border:1px solid rgba(1,142,234,.12);
}

.statCard b{
  display:block;
  font-size:22px;
  color:#018eea;
}

.statCard small{
  font-size:13px;
  color:rgba(11,19,48,.65);
}

/* STACK BADGES */
.stackBadges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.badge{
  font-size:12px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(1,142,234,.08);
  border:1px solid rgba(1,142,234,.18);
  font-weight:700;
}

.badge.hot{
  background:linear-gradient(90deg,#018eea,#00ecf2);
  color:#fff;
  border:none;
}

/* GALLERY */
/* Pinterest-style collage gallery */
.pinGrid{
  margin-top: 22px;
  column-count: 3;
  column-gap: 16px;
}

.pin{
  break-inside: avoid;
  margin: 0 0 16px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(1,142,234,.14);
  box-shadow: 0 14px 38px rgba(1,142,234,.08);
}

.pin img{
  width: 100%;
  height: auto;
  display: block;
}

/* subtle hover polish */
.pin:hover{
  border-color: rgba(0,236,242,.35);
  box-shadow: 0 24px 60px rgba(0,236,242,.14);
  transform: translateY(-2px);
  transition: .2s ease;
}

/* responsive columns */
@media (max-width: 980px){
  .pinGrid{ column-count: 2; }
}
@media (max-width: 560px){
  .pinGrid{ column-count: 1; }
}

/* RESPONSIVE */
@media (max-width:980px){

  .heroCaseGrid{
    grid-template-columns:1fr;
  }

  .caseGrid2{
    grid-template-columns:1fr;
  }

  .statsRow{
    grid-template-columns:1fr 1fr;
  }

}


/* HERO IMAGE FIX */

.heroCaseMedia{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;   /* keeps proportion clean */
  border-radius:22px;
  overflow:hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}

.heroCaseMedia img{
  width:100%;
  height:100%;
  object-fit:cover;          /* THIS is the key */
  object-position:center;
}


@media (max-width:980px){

  .heroCaseMedia{
    height:320px;
  }

}


.heroCaseMedia::after{
  content:"";
  position:absolute;
  inset:0;
}



/* ================================
   Services: Full-width Striped Rows (No Card Look)
================================ */

.servicesRows{
  margin-top: 22px;
  display:flex;
  flex-direction:column;
}

/* Each row is a stripe */
.svcRow{
  border-top: 1px solid rgba(1,142,234,.12);
  border-bottom: 1px solid rgba(1,142,234,.12);
  cursor:pointer;
  transition: background .18s ease;
}


/* Inner layout */
.svcRowInner{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 26px;
  align-items:center;
  padding: 26px 0;
}

/* reverse rows */
.svcRow.is-rev .svcRowInner{
  grid-template-columns: 1fr 360px;
}
.svcRow.is-rev .svcRowMedia{ order: 2; }
.svcRow.is-rev .svcRowContent{ order: 1; }

.svcRowMedia{
  position:relative;
  overflow:hidden;
  border-radius: 16px; /* only for image (not card) */
  border: 1px solid rgba(1,142,234,.14);
  box-shadow: 0 18px 55px rgba(1,142,234,.10);
}
.svcRowMedia img{
  width:100%;
  height: 220px;
  object-fit: cover;
  display:block;
  filter: saturate(1.04) contrast(1.02);
}

/* Content */
.svcRowContent{
  padding-right: 8px;
}
.svcRowTop{
  display:flex;
  align-items:center;
  gap:12px;
}
.svcRowTop h3{
  margin:0;
  font-size: 22px;
  font-weight: 950;
  color:#000046;
  flex:1;
}
.svcPill{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  color:#000046;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(1,142,234,.18);
}

/* Accordion area */
.svcRow .svcMore{
  max-height: 0;
  overflow:hidden;
  transition: max-height .24s ease;
}
.svcRow.is-open .svcMore{
  max-height: 260px;
}

/* Summary */
.svcRow .svcSummary{
  margin: 10px 0 0;
  color: rgba(11,19,48,.72);
  line-height: 1.7;
  max-width: 70ch;
}

/* Mobile */
@media (max-width: 980px){
  .svcRowInner{
    grid-template-columns: 260px 1fr;
    gap:18px;
  }
  .svcRow.is-rev .svcRowInner{
    grid-template-columns: 1fr 260px;
  }
  .svcRowMedia img{ height: 200px; }
}

@media (max-width: 720px){
  .svcRowInner,
  .svcRow.is-rev .svcRowInner{
    grid-template-columns: 1fr;
    padding: 18px 0;
  }
  .svcRowMedia img{ height: 190px; }
  .svcRow.is-rev .svcRowMedia{ order: 1; }
  .svcRow.is-rev .svcRowContent{ order: 2; }
}



/* ================================
   Services Split (50/50 + reverse)
================================ */

/* Force true 50/50 split (fix uneven widths) */
.svcSplit{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* ✅ equal columns */
  gap: 28px;
  align-items: stretch; /* so both match height nicely */
}

/* Reverse row order */
.svcSplit.is-reverse .svcSplitMedia{ order: 2; }
.svcSplit.is-reverse .svcSplitContent{ order: 1; }

/* Ensure both columns can shrink */
.svcSplitMedia,
.svcSplitContent{
  min-width: 0;  /* ✅ critical for grid children */
}

/* Media takes full width of its column */
.svcSplitMedia{
  width: 100%;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(1,142,234,.14);
  box-shadow: 0 18px 55px rgba(1,142,234,.10);
}

.svcSplitMedia img{
  width: 100%;
  height: 100%;
  min-height: 360px;     /* keep consistent block height */
  object-fit: cover;
  display:block;
}

/* Optional: make text column align better */
.svcSplitContent{
  padding: 8px 0;
}

/* Mobile stack */
@media (max-width: 900px){
  .svcSplit{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .svcSplit.is-reverse .svcSplitMedia{ order: 1; }
  .svcSplit.is-reverse .svcSplitContent{ order: 2; }

  .svcSplitMedia img{
    min-height: 240px;
  }
}

.svcSplitContent{ padding: 14px 0 14px 10px; margin:auto 0;}
.svcSplit.is-reverse .svcSplitContent{ padding: 14px 10px 14px 0; }



/* ================================
   WHY VAIVAL -> match testimonial card (light surface)
================================ */

/* keep grid as-is */
.whyGrid{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
@media (max-width: 980px){ .whyGrid{ grid-template-columns: 1fr; } }

/* light card surface like testimonials */
.whyItem{
  background: #fff;
  border: 1px solid rgba(1,142,234,.14);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(1,142,234,.10);
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* remove old dark glow overlay if you had ::before */
.whyItem::before{ content:none !important; }

.whyItem:hover{
  transform: translateY(-2px);
  border-color: rgba(0,236,242,.40);
  box-shadow: 0 26px 85px rgba(0,236,242,.14);
}

/* icon tile */
.whyIcon{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: #000046;
  background: rgba(0,236,242,.10);
  border: 1px solid rgba(0,236,242,.22);
}
.whyIcon svg{ width: 26px; height: 26px; }

/* meta */
.whyMeta{ display:flex; gap:10px; align-items:baseline; margin-top:12px; }
.whyStat{ font-weight: 950; color:#000046; }
.whyLabel{
  font-size: 12px;
  color: rgba(0,0,70,.55);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* readable headings + text */
.whyItem h3{
  margin: 10px 0 8px;
  color: #000046;
  font-weight: 950;
}
.whyItem p{
  margin: 0;
  color: rgba(0,0,70,.70);
  line-height: 1.7;
}

/* subtle corner tint like testimonials */
.whyItem::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(circle at 0% 0%, rgba(1,142,234,.10), transparent 45%),
    radial-gradient(circle at 100% 80%, rgba(0,236,242,.10), transparent 45%);
  pointer-events:none;
}



/* HERO variant */
.hero--taas{
  background: radial-gradient(circle at 20% 0%, rgba(0,236,242,.16), transparent 45%),
              radial-gradient(circle at 80% 30%, rgba(1,142,234,.18), transparent 50%),
              linear-gradient(180deg, #ffffff, rgba(1,142,234,.03));
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items:center;
  padding: 44px 0 22px;
}
@media (max-width: 980px){ .hero-grid{ grid-template-columns:1fr; } }

.hero-copy .lead{ color: rgba(0,0,70,.72); line-height:1.7; }
.hero-badges{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 720px){ .hero-badges{ grid-template-columns:1fr; } }
.badge{
  background: linear-gradient(135deg, rgba(0, 236, 242, .95), rgba(1, 142, 234, .92));
  color: #ffffff;
  border: 1px solid rgba(1,142,234,.14);
  border-radius: 16px;
  padding: 12px 12px;
  box-shadow: 0 16px 40px rgba(1,142,234,.08);
}
.badge strong{ display:block; color:#000046; font-weight:950; }
.badge span{ color: rgba(0,0,70,.62); font-size:13px; }

.hero-visual{
  position:relative;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(1,142,234,.14);
  box-shadow: 0 26px 80px rgba(1,142,234,.12);
}
.hero-visual img{ width:100%; height:420px; object-fit:cover; display:block; }
@media (max-width: 980px){ .hero-visual img{ height: 320px; } }
.hero-glow{
  position:absolute; inset:-1px;
  background: radial-gradient(circle at 10% 10%, rgba(0,236,242,.18), transparent 45%),
              radial-gradient(circle at 90% 80%, rgba(1,142,234,.18), transparent 45%);
  pointer-events:none;
}

/* TaaS Rows */
.taasRows{ margin-top: 22px; display:flex; flex-direction:column; gap: 12px; }
.taasRow{
  display:grid;
  grid-template-columns: 52px 1fr auto;
  gap: 14px;
  padding: 16px;
  background:#fff;
  border: 1px solid rgba(1,142,234,.14);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(1,142,234,.10);
}
@media (max-width: 980px){
  .taasRow{ grid-template-columns: 52px 1fr; }
  .taasRowMeta{ grid-column: 1 / -1; }
}
.taasRowIcon{
  width:52px; height:52px; border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,236,242,.10);
  border: 1px solid rgba(0,236,242,.22);
}
.taasRowText h3{ margin:0 0 6px; color:#000046; font-weight:950; }
.taasRowText p{ margin:0; color: rgba(0,0,70,.70); line-height:1.7; }
.taasRowMeta{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  justify-content:flex-end;
}
.taasRowMeta span{
  font-size:12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(1,142,234,.06);
  border: 1px solid rgba(1,142,234,.12);
  color: rgba(0,0,70,.68);
}

/* Plans */
.plansGrid{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
@media (max-width: 980px){ .plansGrid{ grid-template-columns:1fr; } }

.planCard{
  background:#fff;
  border: 1px solid rgba(1,142,234,.14);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 55px rgba(1,142,234,.10);
}
.planCard.is-featured{
  border-color: rgba(0,236,242,.42);
  box-shadow: 0 26px 85px rgba(0,236,242,.14);
}
.planTop{ display:flex; align-items:center; gap:10px; }
.planTop h3{ margin:0; flex:1; color:#000046; font-weight:950; }

/* Tabs */
.roleTabs{ margin-top: 18px; }
.tabBar{
  display:flex; gap:10px; flex-wrap:wrap;
  padding: 10px;
  border-radius: 18px;
  background: rgba(1,142,234,.06);
  border: 1px solid rgba(1,142,234,.12);
}
.tabBtn{
  border: 1px solid rgba(1,142,234,.16);
  background: rgba(255,255,255,.70);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  color:#000046;
  cursor:pointer;
}
.tabBtn.is-active{
  background: linear-gradient(135deg, rgba(1,142,234,.18), rgba(0,236,242,.16));
  border-color: rgba(0,236,242,.42);
}
.tabPanel{ display:none; padding-top: 14px; }
.tabPanel.is-active{ display:block; }
.roleGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 980px){ .roleGrid{ grid-template-columns:1fr; } }
.roleCard{
  background:#fff;
  border: 1px solid rgba(1,142,234,.14);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 18px 55px rgba(1,142,234,.10);
}
.roleCard h4{ margin:0 0 6px; color:#000046; font-weight:950; }
.roleCard p{ margin:0; color: rgba(0,0,70,.70); line-height:1.7; }

/* FAQ */
/* ================================
   FAQ (No JS) using details/summary
================================ */
.faqList{
  margin-top: 18px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.faqItem{
  background:#fff;
  border: 1px solid rgba(1,142,234,.14);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(1,142,234,.10);
  overflow:hidden;
}

/* remove default marker */
.faqItem summary{
  list-style: none;
}
.faqItem summary::-webkit-details-marker{
  display:none;
}

.faqQ{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  padding: 14px 16px;
  cursor:pointer;

  font-weight: 950;
  color:#000046;
  outline:none;
}

/* chevron indicator */
.faqQ::after{
  content:"";
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(0,0,70,.55);
  border-bottom: 2px solid rgba(0,0,70,.55);
  transform: rotate(45deg);
  transition: transform .18s ease;
  opacity:.85;
}

.faqItem[open] .faqQ::after{
  transform: rotate(-135deg);
}

.faqA{
  padding: 0 16px 14px;
}
.faqA p{
  margin: 0;
  color: rgba(0,0,70,.70);
  line-height: 1.7;
}

/* optional: subtle highlight when open */
.faqItem[open]{
  border-color: rgba(0,236,242,.40);
  box-shadow: 0 26px 85px rgba(0,236,242,.14);
}

/* CTA band layout */
.ctaBand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}
@media (max-width: 980px){ .ctaBand{ flex-direction:column; align-items:flex-start; } }
.ctaActions{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
@media (max-width: 980px){ .ctaActions{ align-items:flex-start; } }




/* ================================
   TaaS Pillars Grid
================================ */
.taasGrid{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 980px){
  .taasGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .taasGrid{ grid-template-columns: 1fr; }
}

.taasCard{
  background:#fff;
  border: 1px solid rgba(1,142,234,.14);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(1,142,234,.10);
  padding: 18px;
  position: relative;
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* subtle tint like your testimonial/why cards */
.taasCard::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(circle at 0% 0%, rgba(1,142,234,.10), transparent 45%),
    radial-gradient(circle at 100% 80%, rgba(0,236,242,.10), transparent 45%);
  pointer-events:none;
}

.taasCard:hover{
  transform: translateY(-2px);
  border-color: rgba(0,236,242,.40);
  box-shadow: 0 26px 85px rgba(0,236,242,.14);
}

.taasCardTop{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  position: relative;
  z-index: 1;
}

.taasIcon{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#000046;
  background: rgba(0,236,242,.10);
  border: 1px solid rgba(0,236,242,.22);
  flex: 0 0 auto;
}
.taasIcon svg{ width: 26px; height: 26px; }

.taasHead h3{
  margin: 2px 0 6px;
  color:#000046;
  font-weight: 950;
}
.taasLead{
  margin: 0;
  color: rgba(0,0,70,.70);
  line-height: 1.7;
}

.taasTags{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.taasTags li{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(1,142,234,.06);
  border: 1px solid rgba(1,142,234,.12);
  color: rgba(0,0,70,.68);
}

.tabPanels{ margin-top: 14px; }
.rolesFoot{ margin-top: 12px; text-align:center; }


/* ================================
   Step Rail (TaaS Onboarding)
================================ */
.stepRail{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  position: relative;
}

/* connecting line behind cards */
.stepRail::before{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  top: 38px;
  height: 2px;
  background: linear-gradient(90deg, rgba(1,142,234,.20), rgba(0,236,242,.20));
  border-radius: 999px;
  z-index: 0;
}

@media (max-width: 980px){
  .stepRail{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stepRail::before{ display:none; }
}
@media (max-width: 620px){
  .stepRail{ grid-template-columns: 1fr; }
}

.stepCard{
  background:#fff;
  border: 1px solid rgba(1,142,234,.14);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 18px 55px rgba(1,142,234,.10);
  position: relative;
  overflow:hidden;
  z-index: 1;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* subtle tint like your other cards */
.stepCard::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(circle at 0% 0%, rgba(1,142,234,.10), transparent 45%),
    radial-gradient(circle at 100% 80%, rgba(0,236,242,.10), transparent 45%);
  pointer-events:none;
}

.stepCard:hover{
  transform: translateY(-2px);
  border-color: rgba(0,236,242,.40);
  box-shadow: 0 26px 85px rgba(0,236,242,.14);
}

.stepTop{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  position: relative;
  z-index: 1;
}

.stepNum{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  color:#000046;
  background: rgba(0,236,242,.10);
  border: 1px solid rgba(0,236,242,.22);
  flex: 0 0 auto;
}

.stepTitle h3{
  margin: 2px 0 6px;
  color:#000046;
  font-weight: 950;
}
.stepTitle p{
  margin: 0;
  color: rgba(0,0,70,.70);
  line-height: 1.7;
}

.stepTags{
  margin: 12px 0 0;
  padding: 0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.stepTags li{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(1,142,234,.06);
  border: 1px solid rgba(1,142,234,.12);
  color: rgba(0,0,70,.68);
}



/* ================================
   Insights page
================================ */
.hero--insights{
  background: radial-gradient(circle at 20% 0%, rgba(0,236,242,.16), transparent 45%),
              radial-gradient(circle at 80% 30%, rgba(1,142,234,.18), transparent 50%),
              linear-gradient(180deg, #ffffff, rgba(1,142,234,.03));
}

.insightsSearch{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  align-items:center;
}
.insightsInput{
  flex:1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(1,142,234,.18);
  background: rgba(255,255,255,.85);
  outline: none;
}
.insightsInput:focus{
  box-shadow: 0 0 0 3px rgba(0,236,242,.20);
  border-color: rgba(0,236,242,.45);
}

.chipRow, .filterChips{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(1,142,234,.16);
  background: rgba(255,255,255,.72);
  color: #000046;
  font-weight: 900;
  font-size: 12px;
  text-decoration:none;
}
.chip:hover{
  border-color: rgba(0,236,242,.40);
  box-shadow: 0 16px 40px rgba(0,236,242,.10);
}
.chip.is-active{
  background: linear-gradient(135deg, rgba(1,142,234,.18), rgba(0,236,242,.16));
  border-color: rgba(0,236,242,.45);
}

.insightsHead{
  display:flex;
  justify-content:space-between;
  gap: 14px;
  align-items:flex-end;
  flex-wrap:wrap;
}

/* Featured */
.featuredPost{
  margin-top: 16px;
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  background: #fff;
  border: 1px solid rgba(1,142,234,.14);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 18px 55px rgba(1,142,234,.10);
}
@media (max-width: 980px){
  .featuredPost{ grid-template-columns: 1fr; }
}
.featuredMedia img{
  width:100%;
  height: 360px;
  object-fit: cover;
  display:block;
}
@media (max-width: 980px){
  .featuredMedia img{ height: 240px; }
}
.featuredBody{ padding: 18px; }
.featuredTitle{ margin: 10px 0 8px; font-weight: 950; color:#000046; }
.featuredTitle a{ color: inherit; text-decoration:none; }
.featuredTitle a:hover{ color:#018eea; }
.featuredExcerpt{ margin:0; color: rgba(0,0,70,.70); line-height:1.7; }
.featuredActions{ margin-top: 14px; display:flex; gap: 12px; align-items:center; flex-wrap:wrap; }

/* Posts grid */
.postsGrid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 980px){
  .postsGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .postsGrid{ grid-template-columns: 1fr; }
}

.postCard{
  background:#fff;
  border: 1px solid rgba(1,142,234,.14);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 18px 55px rgba(1,142,234,.10);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.postCard:hover{
  transform: translateY(-2px);
  border-color: rgba(0,236,242,.40);
  box-shadow: 0 26px 85px rgba(0,236,242,.14);
}
.postMedia img{
  width:100%;
  height: 180px;
  object-fit: cover;
  display:block;
}
.postBody{ padding: 14px; }
.postBody h3{ margin: 10px 0 8px; color:#000046; font-weight: 950; }
.postBody h3 a{ color: inherit; text-decoration:none; }
.postBody h3 a:hover{ color:#018eea; }
.postBody p{ margin:0; color: rgba(0,0,70,.70); line-height:1.7; }

.postMeta{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap:wrap;
  color: rgba(0,0,70,.55);
  font-size: 12px;
}
.postTag{
  display:inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(1,142,234,.06);
  border: 1px solid rgba(1,142,234,.12);
  color: rgba(0,0,70,.70);
  font-weight: 900;
}
.postDot{ opacity: .7; }

.pager{
  margin-top: 18px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 12px;
}
.pagerInfo{ color: rgba(0,0,70,.60); font-weight: 800; }
.btn.ghost{
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.25);
}

/* ================================
   Newsletter Light Section
================================ */

.newsletterBand{
  margin-top: 10px;
  background: #fff;
  border: 1px solid rgba(1,142,234,.14);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 18px 55px rgba(1,142,234,.10);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
  flex-wrap:wrap;
  position: relative;
  overflow:hidden;
}

/* subtle brand glow */
.newsletterBand::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(circle at 0% 0%, rgba(1,142,234,.12), transparent 45%),
    radial-gradient(circle at 100% 80%, rgba(0,236,242,.12), transparent 45%);
  pointer-events:none;
}

.newsletterContent h2{
  margin: 8px 0 6px;
  color:#000046;
  font-weight: 950;
}

.newsletterForm{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}

.newsletterInput{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(1,142,234,.18);
  background: rgba(255,255,255,.85);
  outline:none;
  min-width: 260px;
}

.newsletterInput:focus{
  box-shadow: 0 0 0 3px rgba(0,236,242,.20);
  border-color: rgba(0,236,242,.45);
}

/* responsive */
@media (max-width: 768px){
  .newsletterBand{
    flex-direction: column;
    align-items: flex-start;
  }

  .newsletterForm{
    width:100%;
  }

  .newsletterInput{
    flex:1;
    width:100%;
  }
}