@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

@font-face {
    font-family: 'Francker W01 Condensed Bold';
    src: url('data:font/woff2;base64,d09GMgABBAAAA') format('woff2');
    font-weight: 700;
    font-style: normal;
}
:root {
    --primary: #6B63FF;
    --primary-dark: #4C3FE6;
    --secondary: #FF6B6B;
    --accent: #FFB946;
    --brand-dark: #1A202C;
    --brand-light: #F7FAFC;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: '"Francker W01 Condensed Bold"', sans-serif;
    background-color: #ffffff;
    color: var(--brand-dark);
    -webkit-font-smoothing: antialiased;
}

/* Luxury Button */
.btn-luxury {
    background: linear-gradient(135deg, #6B63FF 0%, #4C3FE6 100%);
    color: white !important;
    font-size: 14px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 10px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.btn-luxury:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(107, 99, 255, 0.3);
}

/* Animations */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Luxury Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #F7FAFC;
}

::-webkit-scrollbar-thumb {
    background: #8bc3e8;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #66b1e2;
}

/* Mobile Link — overridden by navbar inline styles; kept minimal */
.mobile-link {
    font-size: 15px;
    font-weight: 600;
    color: #0F172A;
    padding: 0.85rem 1.25rem;
    width: 100%;
    text-decoration: none;
    display: flex;
    align-items: center;
    border-bottom: none;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

/* hero css */

:root{--p:#478ECE;--b:#2B6DAE;--d:#080e1c;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;font-family:'Inter',sans-serif;background:var(--d);overflow-x:hidden;}

/* ── KEYFRAMES ── */
@keyframes radiant{
  0%,100%{background-position:0% 50%;filter:drop-shadow(0 0 24px rgba(71,142,206,.65));}
  50%{background-position:100% 50%;filter:drop-shadow(0 0 38px rgba(43,109,174,.8));}}
@keyframes up{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-11px);}}
@keyframes floatS{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes cw {to{transform:translate(-50%,-50%) rotate(360deg); }}
@keyframes ccw{to{transform:translate(-50%,-50%) rotate(-360deg);}}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.12;}}
@keyframes pring{0%{transform:translate(-50%,-50%) scale(.75);opacity:.8;}100%{transform:translate(-50%,-50%) scale(2.8);opacity:0;}}
@keyframes bin{from{opacity:0;transform:scale(.85);}to{opacity:1;transform:scale(1);}}
@keyframes shim{from{background-position:200% center;}to{background-position:-200% center;}}
@keyframes gpulse{0%,100%{opacity:.03;}50%{opacity:.058;}}
@keyframes strm{0%{opacity:0;transform:scaleY(0);}40%,70%{opacity:1;}100%{opacity:0;transform:scaleY(1);}}
@keyframes scan{0%{top:0;opacity:.35;}100%{top:100%;opacity:0;}}
@keyframes cglow{0%,100%{box-shadow:0 0 28px rgba(71,142,206,.15),inset 0 0 20px rgba(71,142,206,.05);}50%{box-shadow:0 0 56px rgba(71,142,206,.35),inset 0 0 32px rgba(71,142,206,.12);}}
@keyframes ldot{0%,100%{transform:scale(1);}50%{transform:scale(2);opacity:.3;}}
@keyframes btl{0%,100%{transform:translate(-50%,-50%) translateY(0);}50%{transform:translate(-50%,-50%) translateY(-7px);}}
@keyframes btr{0%,100%{transform:translate(50%,-50%) translateY(0);}50%{transform:translate(50%,-50%) translateY(-6px);}}
@keyframes bbl{0%,100%{transform:translate(-50%,50%) translateY(0);}50%{transform:translate(-50%,50%) translateY(-8px);}}
@keyframes bbr{0%,100%{transform:translate(50%,50%) translateY(0);}50%{transform:translate(50%,50%) translateY(-6px);}}

/* ── SECTION ── */
.hero{
  position:relative;
  height:120vh;
  min-height:600px;
  max-height:960px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse 60% 80% at 72% 45%,rgba(71,142,206,.09) 0%,transparent 60%),
    radial-gradient(ellipse 40% 60% at 5% 90%,rgba(43,109,174,.06) 0%,transparent 55%),
    #080e1c;
}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:linear-gradient(rgba(71,142,206,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(71,142,206,.04) 1px,transparent 1px);
  background-size:68px 68px;
  mask-image:radial-gradient(ellipse 85% 75% at 50% 50%,black 5%,transparent 80%);
  animation:gpulse 7s ease-in-out infinite;
}
.scanline{position:absolute;left:0;right:0;height:1px;z-index:2;background:linear-gradient(90deg,transparent,rgba(71,142,206,.2),transparent);animation:scan 8s linear infinite;}

/* ── GRID ── */
/* Key fix: use padding to center content, not max-width pushing things apart */
.wrap{
  position:relative;z-index:10;
  width:100%;
  /* This is the crucial fix - generous padding keeps content naturally centered */
  padding:0 5vw;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2vw;
  align-items:center;
  height:100%;
}

/* ── LEFT ── */
.lft{
  display:flex;flex-direction:column;
  gap:clamp(12px,1.8vw,22px);
  opacity:0;animation:up .7s cubic-bezier(.22,1,.36,1) .1s both;
  /* No max-width constraint - let it use its column naturally */
}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(71,142,206,.09);border:1px solid rgba(71,142,206,.22);
  border-radius:100px;padding:6px 16px;width:fit-content;
  font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--p);
  position:relative;overflow:hidden;
}
.pill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(71,142,206,.15),transparent);background-size:300% 100%;animation:shim 3s linear infinite;}
.ld{width:6px;height:6px;border-radius:50%;background:var(--p);flex-shrink:0;animation:ldot 1.5s ease-in-out infinite;}

.hl{font-weight:950;font-style:italic;letter-spacing:-.02em;line-height:0.69;}
.hl span{display:block;font-size:clamp(54px,6.5vw,110px);padding-bottom:0.25em;}
.c1{color:#fff;}
.c2{
  background:linear-gradient(270deg,var(--p),var(--b),#e8f4ff,var(--p),var(--b),#e8f4ff,var(--p));
  background-size:400% 400%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:radiant 6s ease infinite;
}
.c3{color:rgba(255,255,255,.17);}

.sub{
  font-size:clamp(13px,1.15vw,16px);
  color:rgba(255,255,255,.42);line-height:1.68;
  max-width:min(440px, 90%);
}
.sub em{color:rgba(71,142,206,.9);font-style:normal;font-weight:600;}

.btns{display:flex;flex-wrap:wrap;gap:10px;}
.b1{
  text-decoration:none;display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;border-radius:100px;
  font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,var(--p),var(--b));
  box-shadow:0 8px 28px rgba(71,142,206,.35);
  position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s;
}
.b1::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.13) 50%,transparent 70%);background-size:300% auto;animation:shim 3s linear infinite;}
.b1:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(71,142,206,.48);}
.b2{
  text-decoration:none;display:inline-flex;align-items:center;gap:9px;
  padding:12px 22px;border-radius:100px;
  font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.55);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  transition:all .3s;
}
.b2:hover{background:rgba(71,142,206,.1);border-color:rgba(71,142,206,.3);color:var(--p);transform:translateY(-2px);}

.stats{display:flex;flex-wrap:wrap;gap:8px;}
.st{
  display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:100px;padding:9px 18px;transition:all .3s;
}
.st:hover{border-color:rgba(71,142,206,.28);background:rgba(71,142,206,.07);}
.sv{font-size:clamp(16px,1.6vw,22px);font-weight:900;color:var(--p);letter-spacing:-.02em;}
.sl{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.28);}
.sx{width:1px;height:18px;background:rgba(255,255,255,.09);}

/* ── RIGHT ── */
.rgt{
  display:flex;justify-content:center;align-items:center;
  opacity:0;animation:up .8s cubic-bezier(.22,1,.36,1) .25s both;
}

/* Orbital — size relative to its column width */
.ow{
  position:relative;
  /* Use a percentage of the column, not viewport */
  width:min(90%,480px);
  aspect-ratio:1;
}

/* Rings */
.ring{position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid rgba(71,142,206,.13);transform:translate(-50%,-50%);}
.rA{width:96%;height:96%;border-style:dashed;animation:cw 30s linear infinite;}
.rB{width:74%;height:74%;animation:ccw 20s linear infinite;border-color:rgba(71,142,206,.2);}
.rC{width:50%;height:50%;animation:cw 13s linear infinite;border-color:rgba(71,142,206,.28);}
.rT1{width:86%;height:86%;border:1px solid rgba(71,142,206,.07);transform:translate(-50%,-50%) rotateX(68deg) rotateZ(20deg);animation:cw 36s linear infinite;}
.rT2{width:66%;height:66%;border:1px solid rgba(71,142,206,.09);transform:translate(-50%,-50%) rotateX(68deg) rotateZ(-24deg);animation:ccw 24s linear infinite;}

/* Core */
.core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:33%;height:33%;
  min-width:110px;min-height:110px;max-width:170px;max-height:170px;
  background:linear-gradient(145deg,rgba(71,142,206,.18),rgba(8,14,28,.97));
  border:1px solid rgba(71,142,206,.3);border-radius:22px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  backdrop-filter:blur(16px);
  animation:floatY 5.5s ease-in-out infinite,cglow 4s ease-in-out infinite;
  z-index:20;
}
.ci{width:38%;aspect-ratio:1;}
.ci svg{width:100%;height:100%;}
.cl{font-size:clamp(10px,1.2%,9px);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.32);text-align:center;white-space:nowrap;}
.cv{font-size:clamp(9px,1.8%,13px);font-weight:800;letter-spacing:.08em;color:var(--p);}

/* Progress arc */
.parc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% + 10px);height:calc(100% + 10px);z-index:19;}
.pt{transition:stroke-dashoffset 2.2s cubic-bezier(.22,1,.36,1);transform-origin:center;transform:rotate(-90deg);}

/* Orbit dots */
.od{position:absolute;border-radius:50%;transform:translate(-50%,-50%);z-index:22;pointer-events:none;}
.ol{width:10px;height:10px;background:var(--p);box-shadow:0 0 14px 5px rgba(71,142,206,.58);}
.om{width:7px;height:7px;background:rgba(71,142,206,.75);box-shadow:0 0 10px 3px rgba(71,142,206,.38);}
.os{width:5px;height:5px;background:rgba(71,142,206,.55);box-shadow:0 0 7px 2px rgba(71,142,206,.28);}
.pr{position:absolute;border-radius:50%;border:1px solid rgba(71,142,206,.48);transform:translate(-50%,-50%);z-index:21;pointer-events:none;animation:pring 2.4s ease-out infinite;}

/* Data streams */
.ds{position:absolute;width:1px;background:linear-gradient(to bottom,transparent,rgba(71,142,206,.55),transparent);transform-origin:top;animation:strm 3.5s ease-in-out infinite;}

/* Sparkles */
.sp{position:absolute;border-radius:50%;background:var(--p);box-shadow:0 0 6px 2px rgba(71,142,206,.5);animation:blink 2s ease-in-out infinite;}

/* Badges */
.bc{
  position:absolute;z-index:25;
  background:rgba(8,14,28,.92);border:1px solid rgba(71,142,206,.22);
  border-radius:13px;padding:9px 14px;
  display:flex;align-items:center;gap:8px;
  backdrop-filter:blur(20px);
  box-shadow:0 6px 24px rgba(0,0,0,.4),inset 0 1px 0 rgba(71,142,206,.1);
  opacity:0;
}
.bc.in{animation:bin .45s cubic-bezier(.22,1,.36,1) both;}
.btl{top:5%;left:2%;transform:translate(-50%,-50%);animation:btl 4s ease-in-out infinite!important;}
.btr{top:9%;right:2%;transform:translate(50%,-50%);animation:btr 3.8s ease-in-out .5s infinite!important;}
.bbl{bottom:9%;left:2%;transform:translate(-50%,50%);animation:bbl 4.4s ease-in-out 1.1s infinite!important;}
.bbr{bottom:5%;right:2%;transform:translate(50%,50%);animation:bbr 3.6s ease-in-out .3s infinite!important;}
.bd{width:7px;height:7px;border-radius:50%;background:var(--p);flex-shrink:0;animation:ldot 1.4s ease-in-out infinite;}
.bt{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.3);}
.bv{font-size:clamp(14px,1.5vw,20px);font-weight:900;color:#fff;letter-spacing:-.02em;line-height:1.1;}

/* Scroll */
.scrl{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:10;opacity:0;animation:up .6s cubic-bezier(.22,1,.36,1) 1.1s both;}
.sl2{font-size:9px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.2);}
.st2{width:1px;height:34px;background:linear-gradient(to bottom,rgba(71,142,206,.55),transparent);animation:floatS 2.2s ease-in-out infinite;}

/* ═══════════════════
   RESPONSIVE
═══════════════════ */

/* Tablet 768–1023: stack, keep orbital */
@media(max-width:1023px){
  .hero{height:auto;min-height:100svh;max-height:none;padding:90px 0 40px;}
  .wrap{
    grid-template-columns:1fr;
    padding:0 6vw;
    gap:28px;
    height:auto;
    justify-items:center;
  }
  .lft{align-items:center;text-align:center;}
  .sub{max-width:480px;}
  .btns,.stats{justify-content:center;}
  .ow{width:min(72vw,380px);}
  /* badges are tiny on a small orbital, hide them */
  .btl,.btr,.bbl,.bbr{display:none;}
  .scrl{display:none;}
}

/* Mobile <640 */
@media(max-width:639px){
  .hero{padding:80px 0 32px;}
  .wrap{padding:0 5vw;gap:20px;}
  .hl span{font-size:clamp(48px,13vw,72px);}
  .ow{width:min(82vw,300px);}
  .ds,.sp{display:none;}
  .sub{font-size:14px;}
}

/* Large screens: don't let it get too wide */
@media(min-width:1400px){
  .wrap{padding:0 6vw;}
  .ow{width:min(44vw,520px);}
}
@media(min-width:1920px){
  .wrap{max-width:1700px;margin:0 auto;padding:0 80px;}
  .ow{width:500px;}
  .hl span{font-size:104px;}
}
@media(min-width:2560px){
  .wrap{max-width:2200px;padding:0 100px;}
  .ow{width:660px;}
  .hl span{font-size:130px;}
}
/* Carousel css */
/* Carousel css */
  :root {
    --ink: #06080f;
    --ink2: #0d1220;
    --steel: #111827;
    --accent: #4a9eff;
    --accent2: #7c3aed;
    --gold: #f59e0b;
    --card-border: rgba(255,255,255,0.06);
    --text-dim: rgba(255,255,255,0.38);
    --text-mid: rgba(255,255,255,0.62);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  body {
    background: var(--ink);
    font-family: 'DM Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* ─── SECTION ─────────────────────────── */
  .svs-section {
    position: relative;
    background: var(--ink);
    padding: clamp(80px,10vw,160px) 0 clamp(80px,10vw,140px);
    overflow: hidden;
  }

  /* Noise grain overlay */
  .svs-section::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.022;
    pointer-events: none;
    z-index: 0;
  }

  /* Large blurred accent circles */
  .bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
  }
  .bg-blob-1 {
    width: clamp(300px,40vw,700px);
    height: clamp(300px,40vw,700px);
    background: radial-gradient(circle, rgba(74,158,255,0.07), transparent 70%);
    top: -10%;
    right: -10%;
  }
  .bg-blob-2 {
    width: clamp(250px,35vw,600px);
    height: clamp(250px,35vw,600px);
    background: radial-gradient(circle, rgba(124,58,237,0.06), transparent 70%);
    bottom: 0%;
    left: -8%;
  }

  /* Thin horizontal rule lines */
  .scan-lines {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 79px,
      rgba(255,255,255,0.012) 79px,
      rgba(255,255,255,0.012) 80px
    );
  }

  /* ─── HEADER ─────────────────────────── */


/* ── HEADER ── */
.section-header{
  text-align:center;
  padding:0 clamp(20px,5vw,60px);
  margin-bottom:72px;
  position:relative;z-index:2;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:10px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;
  color:#0291CE;margin-bottom:20px;
}
.eyebrow::before,.eyebrow::after{
  content:'';flex-shrink:0;width:40px;height:1px;
  background:linear-gradient(90deg,transparent,var(--blue));opacity:.4;
}
.eyebrow::after{background:linear-gradient(270deg,transparent,var(--blue))}
.section-title{
  font-family:'Inter',sans-serif;
  font-size:clamp(40px,6vw,72px);
  font-weight:800;line-height:.88;letter-spacing:-.045em;
  color:#fff;margin-bottom:20px;
}
.section-title em{font-style:normal;color:var(--blue)}
.section-sub{
  font-size:clamp(14px,1.5vw,16px);color:#64748B;
  max-width:480px;margin:0 auto;line-height:1.75;font-weight:400;
}


  .header-right {
    padding-bottom: 8px;
    max-width: 280px;
  }
  .header-sub {
    font-size: clamp(13px,1.2vw,15px);
    line-height: 1.8;
    color: var(--text-dim);
    font-weight: 300;
  }
  .header-count {
    font-family: 'Francker W01 Condensed Bold', monospace;
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.2em;
    margin-top: 16px;
    opacity: 0.7;
  }

  /* ─── TRACK WRAPPER ─────────────────── */
  .track-wrapper {
    position: relative; z-index: 2;
  }

  /* Fade edges */
  .track-wrapper::before,
  .track-wrapper::after {
    content: '';
    position: absolute; top: 0; bottom: 0;
    width: clamp(24px,5vw,80px);
    z-index: 10; pointer-events: none;
  }
  .track-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--ink) 0%, transparent 100%);
  }
  .track-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--ink) 0%, transparent 100%);
  }

  /* ─── GLIDE CORE ────────────────────── */
  .glide { position: relative; width: 100%; }
  .glide__track { overflow: hidden; }
  .glide__slides {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    will-change: transform;
    touch-action: pan-y;
    padding: 0; margin: 0;
    backface-visibility: hidden;
  }
  .glide__slide {
    flex-shrink: 0;
    padding: 12px 10px 48px;
  }

  /* ─── CARD ──────────────────────────── */
  .svc-card {
    position: relative;
    height: clamp(360px,32vw,480px);
    border-radius: 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--card-border);
    background: var(--steel);
    transition: transform 0.5s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.5s cubic-bezier(0.22,1,0.36,1),
                border-color 0.4s;
    text-decoration: none;
    will-change: transform;
    isolation: isolate;
  }

  /* Card gradient bg */
  .svc-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(160deg,
      rgba(255,255,255,0.04) 0%,
      transparent 40%,
      rgba(0,0,0,0.3) 100%);
    z-index: 1; pointer-events: none;
  }

  /* Bottom glow bar — unique per category */
  .svc-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--card-accent, var(--accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
    z-index: 3;
  }

  .svc-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow:
      0 32px 64px rgba(0,0,0,0.5),
      0 8px 24px rgba(0,0,0,0.3),
      0 0 0 1px rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.1);
  }
  .svc-card:hover::after {
    transform: scaleX(1);
  }

  /* Category color variants */
  .svc-card[data-cat="performance"] { --card-accent: linear-gradient(90deg,#4a9eff,#06b6d4); }
  .svc-card[data-cat="infrastructure"] { --card-accent: linear-gradient(90deg,#7c3aed,#a855f7); }
  .svc-card[data-cat="strategic"] { --card-accent: linear-gradient(90deg,#f59e0b,#ef4444); }

  /* ── Card inner ambient glow on hover ── */
  .card-ambient {
    position: absolute;
    width: 300px; height: 300px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    top: -100px; right: -100px;
    transition: opacity 0.6s, transform 0.6s;
    pointer-events: none;
    z-index: 0;
  }
  .svc-card:hover .card-ambient { opacity: 1; transform: scale(1.2); }
  [data-cat="performance"] .card-ambient { background: radial-gradient(circle, rgba(74,158,255,0.12), transparent 70%); }
  [data-cat="infrastructure"] .card-ambient { background: radial-gradient(circle, rgba(124,58,237,0.12), transparent 70%); }
  [data-cat="strategic"] .card-ambient { background: radial-gradient(circle, rgba(245,158,11,0.12), transparent 70%); }

  /* ── Card number watermark ── */
  .card-watermark {
    position: absolute;
    top: -10px; right: -4px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(50px, 9vw, 100px);
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgba(255,255,255,0.03);
    pointer-events: none;
    user-select: none;
    z-index: 0;
    transition: color 0.4s;
  }
  .svc-card:hover .card-watermark { color: rgba(255,255,255,0.055); }

  /* ── Card top row ── */
  .card-top {
    position: relative; z-index: 2;
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 28px 28px 0;
  }

  .card-icon-wrap {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.3s, border-color 0.3s, transform 0.4s cubic-bezier(0.22,1,0.36,1);
    flex-shrink: 0;
  }
  .svc-card:hover .card-icon-wrap {
    background: rgba(255,255,255,0.11);
    border-color: rgba(255,255,255,0.16);
    transform: rotate(-6deg) scale(1.1);
  }
  .card-icon-wrap svg {
    width: 20px; height: 20px;
    fill: none;
    stroke: rgba(255,255,255,0.75);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .card-badge {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.35);
    transition: all 0.3s;
  }
  .svc-card:hover .card-badge {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.55);
  }

  /* ── Card body ── */
  .card-body {
    position: relative; z-index: 2;
    flex: 1;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 28px 24px;
  }

  .card-cat-label {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 10px;
    transition: color 0.3s;
  }
  [data-cat="performance"] .card-cat-label { color: rgba(74,158,255,0.55); }
  [data-cat="infrastructure"] .card-cat-label { color: rgba(124,58,237,0.6); }
  [data-cat="strategic"] .card-cat-label { color: rgba(245,158,11,0.6); }
  .svc-card:hover [data-cat="performance"] .card-cat-label,
  [data-cat="performance"]:hover .card-cat-label { color: #4a9eff; }
  [data-cat="infrastructure"]:hover .card-cat-label { color: #a855f7; }
  [data-cat="strategic"]:hover .card-cat-label { color: #f59e0b; }


  .card-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(26px, 2.5vw, 34px);
    letter-spacing: 0.02em;
    line-height: 0.95;
    color: #fff;
    font-weight: 900;
    margin-bottom: 12px;
    transition: letter-spacing 0.4s;
  }
  .svc-card:hover .card-title { letter-spacing: 0.04em; }

  .card-desc {
    font-size: 12.5px;
    line-height: 1.72;
    color: rgba(255,255,255,0.42);
    font-weight: 300;
    transition: color 0.3s;
  }
  .svc-card:hover .card-desc { color: rgba(255,255,255,0.6); }

  /* ── Card footer ── */
  .card-footer {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 28px 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
    transition: border-color 0.3s;
  }
  .svc-card:hover .card-footer { border-color: rgba(255,255,255,0.1); }

  .card-tags {
    font-family: 'Francker W01 Condensed Bold', monospace;
    font-size: 8.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.22);
    transition: color 0.3s;
  }
  .svc-card:hover .card-tags { color: rgba(255,255,255,0.38); }

  .card-cta {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
    flex-shrink: 0;
  }
  .svc-card:hover .card-cta {
    transform: translate(2px,-2px);
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: 0 4px 16px rgba(74,158,255,0.4);
  }
  [data-cat="infrastructure"]:hover .card-cta {
    border-color: #a855f7;
    background: #7c3aed;
    box-shadow: 0 4px 16px rgba(124,58,237,0.4);
  }
  [data-cat="strategic"]:hover .card-cta {
    border-color: #f59e0b;
    background: #d97706;
    box-shadow: 0 4px 16px rgba(245,158,11,0.4);
  }
  .card-cta svg {
    width: 12px; height: 12px;
    fill: none; stroke: rgba(255,255,255,0.7);
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
    transition: stroke 0.3s;
  }
  .svc-card:hover .card-cta svg { stroke: #fff; }

  /* ─── CONTROLS ──────────────────────── */
  .svs-controls {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 clamp(24px,6vw,100px);
    margin-top: 16px;
  }

  .progress-wrap {
    display: flex; align-items: center; gap: 20px; flex: 1;
  }
  .progress-label {
    font-family: 'Francker W01 Condensed Bold', monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.2);
    white-space: nowrap;
    min-width: 52px;
  }
  .progress-label span {
    color: rgba(255,255,255,0.55);
  }

  .progress-track {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.08);
    border-radius: 1px;
    position: relative;
    max-width: 200px;
  }
  .progress-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, var(--accent), #7c3aed);
    border-radius: 1px;
    transition: width 0.4s cubic-bezier(0.22,1,0.36,1);
    box-shadow: 0 0 8px rgba(74,158,255,0.5);
  }

  .arrow-group {
    display: flex; align-items: center; gap: 10px;
  }
  .arr-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
    outline: none;
  }
  .arr-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(74,158,255,0.35);
  }
  .arr-btn svg {
    width: 16px; height: 16px;
    fill: none; stroke: rgba(255,255,255,0.55);
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: stroke 0.2s;
  }
  .arr-btn:hover svg { stroke: #fff; }

  /* Pill bullets */
  .bullets-row {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
    max-width: 220px;
  }
  .blt {
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.12);
    border: none;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
    padding: 0;
    width: 18px;
  }
  .blt.active {
    width: 40px;
    background: linear-gradient(90deg, var(--accent), #7c3aed);
    box-shadow: 0 0 10px rgba(74,158,255,0.4);
  }

  .hint-txt {
    font-family: 'Francker W01 Condensed Bold', monospace;
    font-size: 9px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.14);
    text-align: center;
    position: relative; z-index: 2;
    margin-top: 20px;
    padding: 0 24px;
  }

  /* ─── RESPONSIVE TWEAKS ─────────────── */
  @media (max-width: 900px) {
    .svs-header {
      grid-template-columns: 1fr;
    }
    .header-right {
      max-width: 100%;
    }
  }
  @media (max-width: 640px) {
    .svs-controls {
      flex-direction: column;
      gap: 20px;
      align-items: center;
    }
    .progress-wrap { max-width: 280px; width: 100%; }
    .progress-track { max-width: none; }
    .arr-btn { width: 40px; height: 40px; }
    .card-top { padding: 22px 22px 0; }
    .card-body { padding: 0 22px 18px; }
    .card-footer { padding: 14px 22px 18px; }
  }

  /* ─── 4K Boost ──────────────────────── */
  @media (min-width: 2560px) {
    .svc-card { height: 560px; border-radius: 28px; }
    .card-top { padding: 38px 38px 0; }
    .card-body { padding: 0 38px 32px; }
    .card-footer { padding: 22px 38px 28px; }
    .card-icon-wrap { width: 60px; height: 60px; border-radius: 18px; }
    .card-icon-wrap svg { width: 26px; height: 26px; }
    .glide__slide { padding: 16px 14px 56px; }
    .svs-controls { padding: 0 clamp(60px,5vw,160px); }
    .svs-header { padding: 0 clamp(60px,5vw,160px); }
  }