/* ══════════════════════════════════════════════════════════
   DESKTOP / BASE STYLES
   ══════════════════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  --cyan: #00ace9;
  --cyan-light: #00bcff;
  --beam-a: #5ED0FF;
    --beam-b: #A66BFF;
  --dark: #09090e;
  --dark2: #1b1b1b;
  --grad-text: linear-gradient(180deg,var(--beam-a),var(--beam-b));
  --grad-btn: linear-gradient(to right, #ed00bb 0%, #0045db 100%);
  --grad-btn-rev: linear-gradient(to left, #ed00bb 0%,  #0045db 100%);
  --easing: cubic-bezier(.25,.46,.45,.94);
  --main-font: -apple-system,"SF Pro Display","SF Pro Text",sans-serif;
  --sec-font: -apple-system,"SF Pro Display","SF Pro Text",sans-serif;
  --main-font-medium: -apple-system,"SF Pro Display","SF Pro Text",sans-serif;
      --line: #1d1d22;

          --bg: #000005;
    --bg-elev: #0a0a0f;
    --ink: #f5f5f7;
    --muted: #86868b;
    --line: #1d1d22;
    --beam-a: #5ED0FF;
    --beam-b: #A66BFF;
    --maxw: 1600px;
    --ease: cubic-bezier(.22, .61, .36, 1);
}


body{
  font-family: var(--main-font) !important;
}
html.lenis { height: auto; }
        .lenis.lenis-smooth { scroll-behavior: auto !important; }



/* @font-face {
  font-family: 'SF Pro';
  src: url('../fonts/SFPRODISPLAYBOLD.OTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SF Pro Medium';
  src: url('../fonts/SFPRODISPLAYMEDIUM.OTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}  */
h1, h2, h3, h4 {
  font-family: -apple-system,"SF Pro Display","SF Pro Text",sans-serif !important;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: -apple-system,"SF Pro Display","SF Pro Text",sans-serif !important;
  background: #000005;
  color: #fff;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: #111;
}
::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 3px;
}
/* ── NAV ── */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  transition: background .4s,backdrop-filter .4s,border-color .4s;
}
#navbar.scrolled {
 background: rgba(8, 8, 12, .6);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
#desktop-nav .nav-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: fit-content;
  display: flex;
  white-space: nowrap;
  flex-direction: column;
  gap: 15px;
  padding: 25px 30px;
  background: rgba(9, 9, 14, .83);
  backdrop-filter: blur(50px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease,transform .18s ease,visibility .18s ease;
}
#desktop-nav .group:hover .nav-dropdown, #desktop-nav .nav-dropdown:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#desktop-nav .nav-dropdown a, #desktop-nav .dropdown-link {
  color: #f7fbff;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.7;
  transition: color .2s ease;
}
#desktop-nav .nav-dropdown a:hover, #desktop-nav .dropdown-link:hover {
  color: #00c5ff;
}
#desktop-nav .group {
  position: relative;
}
#desktop-nav .group > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-dropdown .dropdown-group {
  position: relative;
}
.dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.dropdown-link span {
  font-size: 13px;
  opacity: .78;
}
.dropdown-group {
  display: block;
}
.sub-dropdown {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 25px 30px;
  margin-left: 12px;
  background: rgba(9, 9, 14, .2);
  backdrop-filter: blur(50px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  transition: opacity .18s ease,transform .18s ease,visibility .18s ease;
  z-index: 60;
}
.dropdown-group:hover > .sub-dropdown, .dropdown-group:hover > .dropdown-link + .sub-dropdown, .dropdown-link:hover + .sub-dropdown, .sub-dropdown:hover {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.details-controls {
  cursor: pointer;
}
.menu-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0.5rem 0;
  margin: 0;
  border-radius: 12px;
  transition: background .25s ease, color .25s ease;
}
.menu-summary:hover {
  background: rgba(9,13,22,.1);
}
.menu-summary::-webkit-details-marker {
  display: none;
}
.sub-menu-mobile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding-left: 16px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: scaleY(0.96);
  transform-origin: top;
  transition: max-height .35s ease, opacity .25s ease, transform .25s ease;
}
details[open] > .sub-menu-mobile {
  max-height: 600px;
  opacity: 1;
  transform: scaleY(1);
}
.sub-menu-mobile a {
  text-decoration: none;
  color: rgba(255,255,255,.85);
  padding: 10px 0;
  transition: color .2s ease;
}
.sub-menu-mobile a:hover {
  color: #fff;
}
/* details[open] .menu-summary {
  background: rgba(9,13,22,.1);
} */
.menu-arrow {
  font-size: 14px;
  transition: transform .25s ease;
}
details[open] .menu-arrow {
  transform: rotate(180deg);
}
/* ══════════════════════════════════════════════
   HERO + ABOUT — ALRE scroll-morph video system
   ══════════════════════════════════════════════

   LAYOUT OVERVIEW
   ───────────────
   #hero-scroll-space  — tall scroll driver (200vh), background:#000
     #hero-sticky       — position:sticky, top:0, height:100vh, overflow:hidden
       #hero-video-el   — the video, starts fullscreen via JS
       #hero-overlay    — gradient overlay, fades out as scroll progresses
       #hero-text       — title/tagline at bottom-left, fades out on scroll
   #about             — normal-flow section underneath; its right column
                         contains #about-video-slot (invisible placeholder)
                         so JS can read its target rect and morph the video into it
*/
/* ── Scroll-space wrapper ── */
/* #hero-scroll-space{background:#000} */
/* ── Sticky container ── */
#hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
/* ── The video — positioned by JS ── */
#hero-video-el {
  position: absolute;
  object-fit: cover;
  will-change: top,left,width,height,border-radius;
   border: 1px solid rgba(113, 113, 113, .21); 
  /* box-shadow: -1px 6px 120px -40px rgba(2, 181, 255, .71); */
  
  /* box-shadow: 0px 0px 80px 0px rgba(2, 181, 255, .21); */
  box-shadow: rgba(94, 208, 255, 0.3) 0px 0px 60px, rgba(166, 107, 255, 0.21) 0px 0px 96px;
  border-radius: 30px;
}
/* ── Overlay dims video in hero, fades to 0 as video morphs away ── */
#hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.22) 55%,rgba(0,0,0,.08) 100%);
  will-change: opacity;
}
/* ── Hero text block ── */
#hero-text {
  position: relative;
  z-index: 15;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 64px 72px;
  will-change: opacity,transform;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100vh;
  align-items: flex-start;
  transition: opacity .35s ease, transform .35s ease;
}
/* Eyebrow pill */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(8px);
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-bottom: 28px;
}
.hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.65)}}
/* Main headline */
#hero-text h1 {
  font-size: clamp(52px,6.5vw,56px);
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 32px;
  text-align: left;
}
#hero-text h1 em {
  font-style: normal;
  color: var(--cyan);
}
/* Sub row */
.hero-sub-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
}
.hero-tagline {
  font-size: clamp(14px,1.4vw,19px);
  color: rgba(255,255,255,.6);
  line-height: 1.65;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
/* ── Scroll hint ── */
#scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  animation: bounce 2s infinite;
}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}
/* ══ ABOUT SECTION ══ */
#about {
  padding: 100px 64px 50px;
  z-index: 5;
  /* margin-top: -70vh; */
}
.about-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 80px;
  align-items: center;
}
/* Left: text */
.about-label {
  color: var(--cyan-light);
  background: linear-gradient(90deg, #03a9f4, #f441a5);
  text-overflow: clip;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  width: fit-content;
  font-family: var(--sec-font);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}
.headline {
  font-size: clamp(34px,3.2vw,40px);
  font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
  color: #f5f5f7;
  margin-bottom: 28px;
  font-family: var(--main-font) !important;

}
.headline em {
  font-style: normal;
  color: var(--cyan);
}
.about-body {
  font-size: clamp(15px,1.1vw,17px);
  color: #86868b;
  line-height: 1.75;
  margin-bottom: 16px;
}
.about-actions {
  margin-top: 32px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
/* Stats strip inside about */
.about-stats {
  display: flex;
  margin-top: 36px;
  padding-top: 100px;
  /* padding-bottom: 100px; */
      gap: 20px;
}
.about-stat {
  flex: 1;
  padding-right: 28px;
  text-align: center;
}
/* .about-stat+.about-stat{padding-left:28px;border-left:1px solid rgba(255,255,255,.08)} */
.about-stat-num {
  font-size: clamp(36px,3vw,52px);
  font-weight: 900;
  line-height: 1;
}
.about-stat-label {
  font-size: 16px;
  color: #86868b;
  margin-top: 6px;
  line-height: 1.4;
}
/* Right: video slot — invisible placeholder so JS can measure target rect */
.about-video-col {
  position: relative;
}
#about-video-slot {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 20px;
  visibility: hidden;
}
/* Mobile */
/* ── FLOAT VIDEO ── */
#video-float {
  position: fixed;
  border-radius: 16px;
  overflow: hidden;
  width: 320px;
  height: 180px;
  box-shadow: 0 20px 60px rgba(0,172,233,.3);
  border: 2px solid rgba(0,172,233,.4);
  opacity: 0;
  pointer-events: none;
  z-index: 150;
  transition: opacity .5s var(--easing);
  bottom: 24px;
  right: 24px;
}
#video-float.active {
  opacity: 1;
  pointer-events: auto;
}
#video-float video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#video-float-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background .2s;
}
#video-float-close:hover {
  background: rgba(255,0,0,.7);
}
/* ── GRADIENT TEXT ── */
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: var(--main-font-medium);
  font-weight: 500;
  font-size: 65px;
}
/* ── BUTTONS ── */
.btn-cyan {
  background-image: var(--grad-btn);
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: all .4s ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
}
.btn-cyan:hover {
  background-image: var(--grad-btn-rev);
  moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,172,233,.35);
}
/* .btn-ghost{
  background:rgba(255,255,255,.22);color:#fff;padding:12px 20px;border-radius:12px;
  font-size:18px;font-weight:500;cursor:pointer;border:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
  transition:background .25s,transform .2s
} */
.btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .25s ease, transform .2s ease;
}
.btn-ghost:hover {
  background: rgba(255,255,255,.32);
  transform: translateY(-2px);
}
/* ── SECTION LABEL ── */
.s-label {
  color: var(--cyan-light);
  font-size: 15px;
  font-weight: 600;
}
/* ── TAG PILL ── */
.tag-pill {
  background: #ccf2ff;
  color: #000;
  padding: 3px 10px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
}
/* ── SERVICE CARD ── */
/* .svc-card {
  border-radius: 25px;
  padding: 45px 36px;
  background: rgba(11,11,11,.6);
  border: 1px solid rgba(113,113,113,.35);
  transition: all .8s !important;
}
.svc-card:hover {
  transform: translateY(-5px);
  border-color: #717171;
  box-shadow: 0 0 25px 0 rgba(0, 172, 233, 0.3);
  border: 1px solid #3d6f81;
  background: radial-gradient(45.24% 10.06% at 50.1% 97.83%, rgba(0, 172, 233, 0.8) 0%, rgba(0, 172, 233, 0) 100%);
} */

.svc-card {
    position: relative; /* Essential for the pseudo-element */
    transition: border-color .5s ease, transform .5s ease, box-shadow .6s ease;
    overflow: hidden; /* Keeps the gradient inside the card corners */
    border-radius: 25px;
  padding: 30px 23px;
  background: #0a0a0f;
  border: 1px solid rgba(113,113,113,.35);
  transition: all .5s !important;
}

/* The gradient layer */
.svc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background: radial-gradient(45.24% 10.06% at 50.1% 97.83%, rgba(0, 172, 233, 0.8) 0%, rgba(0, 172, 233, 0) 100%); */
    background: radial-gradient(60% 80% at 50% 100%, rgb(33 150 243 / 20%), transparent 80%);
    opacity: 0; /* Hidden by default */
    transition: opacity 0.5s ease; /* This makes the gradient fade in */
    z-index: -1; /* Keeps it behind your text */
}

/* On hover, just change opacity */
.svc-card:hover {
        border-color: rgba(166, 107, 255, .35);
    transform: translateY(-4px);
    box-shadow: 0 0 50px -6px rgba(94,208,255,.30),0 0 80px -10px rgba(166,107,255,.28);
    /* border-color: #717171;
    box-shadow: 0 0 25px 0 rgba(0, 172, 233, 0.3); */
}

.svc-card:hover::before {
    opacity: 1; /* Smoothly fades the gradient in */
}

/* ── STAT BAR ── */
.stat-bar {
  border-radius: 16px;
  background: radial-gradient(ellipse at 50% 100%,rgba(0,172,233,1) 0%,rgba(0,86,117,1) 35%,rgba(0,0,0,1) 70%);
}
.stat-num {
  font-size: clamp(48px,5vw,80px);
  font-weight: 800;
  line-height: 1;
}
/* ── TICKER ── */
.ticker-wrap {
  overflow: hidden;
}
.ticker-inner {
  display: flex;
  gap: 30px;
  align-items: center;
  animation: ticker 30s linear infinite;
  width: max-content;
}
.ticker-inner:hover {
  animation-play-state: paused;
}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* .logo-img {
  
  object-fit: contain;
  flex-shrink: 0;
  transition: filter .3s,opacity .3s;
  background: #fff;
    border-radius: 20px;
    padding: 15px;
} */
.logo-img:hover {
  filter: none;
  opacity: 1;
}
/* ── CASE STUDIES — Squish Prompts style ── */
/* #cs-space rule moved to stacked-cards section below */
.cs-grid {
  max-width: 1700px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.cs-card.cs-large {
  grid-column: 1/-1;
}
/* image wrapper */
.cs-card.cs-large .cs-img-wrap {
  height: 500px;
  border-radius: 25px;
  width: 50%;
}
.cs-card:not(.cs-large) .cs-img-wrap {
  height: 500px;
  border-radius: 0px;
  width: 50%;
}
.cs-card:hover .cs-card-img {
  transform: scale(1.04);
}

.cs-title-block{
  margin-bottom: 80px;
  width: 100%;
    text-align: center;
}
/* category tags overlay */
.cs-tag {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 5px 12px;
  background: #323232;
  border-radius: 25px;
}
/* card body */
.cs-card.cs-large .cs-card-body {
  padding: 36px 40px 40px;
}
.cs-card-title {
  font-family: var(--main-font-medium) !important;
  
  font-size: clamp(19px, 2vw, 24px);
    font-weight: 600;
    letter-spacing: -.01em;
    margin-top: 10px;
    line-height: 1.2;
}
.cs-card.cs-large .cs-card-title {
  font-size: clamp(24px,2.5vw,36px);
}


.case-tags {
    font-size: 11.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--beam-a);
}


.cs-card-desc {
  font-size: 17px;
  color: #86868b;
  line-height: 1.6;
}
.cs-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.cs-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.badge {
     padding: 1px 20px;
    font-size: 16px;
    font-weight: 500;
    color: rgb(185 185 185);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-left: 3px solid #00ace9;
}
.badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(226,226,226,1);
  flex-shrink: 0;
  margin-top: -10px;
}
.view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cyan);
  font-size: 16px;
  margin-top: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: gap .2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.view-btn:hover {
  gap: 12px;
}
/* ── PROCESS TABS ── */
.proc-tab {
  padding: 25px 24px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: border-color .3s;
}
/* .proc-tab.active{border-left-color:var(--cyan)} */
.proc-title {
  font-size: clamp(24px,2.5vw,35px);
  font-family: var(--main-font-medium);
  font-weight: 500;
  color: #868686;
  transition: color .3s;
  line-height: 1.3;
}
.proc-tab.active .proc-title {
  color: #f5f5f7;
  font-family: var(--main-font-medium);
  border-bottom: 1px solid #989898;
  padding-bottom: 25px;
}
.proc-desc {
  font-size: 18px;
  color: #86868b;
  line-height: 1.6;
  transition: max-height .5s,opacity .3s;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 25px;
}
.proc-tab.active .proc-desc {
  max-height: 200px;
  opacity: 1;
}
/* ── TESTIMONIAL CARD ── */
.testi-card:hover {
  transform: translateY(-4px);
}
/* ── PRESS / BLOG HORIZONTAL ── */
.hscroll-space {
  position: relative;
}
.hscroll-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hscroll-track {
  gap: 28px;
  padding: 0 64px;
}
.press-card {
  background: #0a0a0f;
  border: 1px solid rgba(113,113,113,.35);
  transition: all .5s !important;
  border-radius: 25px;
  padding: 30px;
  width: 310px;
  flex-shrink: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  transition: transform .3s,box-shadow .3s;
}
.press-card i {
  fill: #CCEEFB;
}
.press-card:hover {
   border-color: rgba(166, 107, 255, .35);
    transform: translateY(-4px);
    box-shadow: 0 0 50px -6px rgba(94,208,255,.30),0 0 80px -10px rgba(166,107,255,.28);
}
.blog-card {
  background: #0a0a0f;
  border-radius: 25px;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform .3s,box-shadow .3s,border-color .3s;
  margin: 0 16px;
  border: 1px solid rgba(255,255,255,.1);

}
.blog-card:hover {
  background: #010101;
  transform: translateY(-5px);
 
  border-color: rgba(94, 208, 255, .35);
    box-shadow: 0 0 46px -8px rgba(94, 208, 255, .32), 0 0 70px -12px rgba(166, 107, 255, .28);
}
.blog-img {
  width: 100%;
  height: 330px;
  object-fit: cover;
}
.read-more {
  color: var(--cyan);
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: gap .2s;

}
.read-more:hover {
  gap: 8px;
    
}
/* ── FAQ ── */
.faq-ans {
  max-height: 0;
  overflow: hidden;
  transition: all .4s;
  opacity: 0;
  font-size: 16px;
  color: #86868b;
  line-height: 1.6;
}
.faq-item.open .faq-ans {
  max-height: none;
  opacity: 1;
}
/* ── CTA GRADIENT ── */
/* #cta-sec{background:linear-gradient(76.44deg,#000 1.2%,#00318c 56.51%,#ca00a5 98.636%)} */
@keyframes gradientShift {
  0%   { background-position: 100% 0%; }
  50%  { background-position: 60% 50%; }
  100% { background-position: 100% 0%; }
}
.faq-ans p {
  margin-bottom: 15px;
}
/* #cta-sec {
  background: linear-gradient(76.44deg, #000 1.2%, #00318c 56.51%, #ca00a5 98.636%);
  background-size: 300% 300%;
  animation: gradientShift 10s ease infinite;
} */
#cta-sec [data-bg] {
  background: linear-gradient(76.44deg, #000 1.2%, #00318c 56.51%, #ca00a5 98.636%) !important;
}
/* ── REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s var(--easing),transform .7s var(--easing);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
/* ── FOOTER ── */
footer a:hover {
  color: var(--cyan);
}
.social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s,transform .2s;
  cursor: pointer;
}
.social-btn:hover {
  background: var(--cyan);
  transform: scale(1.1);
}
/* ── DIVIDER ── */
.divider {
  height: 1px;
  background: rgba(119,119,119,.6);
}
/* ── MOBILE ── */
#mob-menu {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-10px);
  transition: max-height .35s ease, opacity .25s ease, transform .25s ease, padding .25s ease, border .25s ease;
  pointer-events: none;
  background: rgba(9, 9, 14, 0.20);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 0;
  padding-top: 0;
  padding-bottom: 0;
}
#mob-menu.open {
  max-height: 1200px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
  padding-bottom: 24px;
  backdrop-filter: blur(50px);
  gap: 5px;
}
.cs-header {
  max-width: 1700px;
  margin: 0 auto 72px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: nowrap;
  height: 100vh;
  padding: 0;
  position: sticky;
  top: 100px;
  z-index: 10;
  overflow: visible;
  pointer-events: none;
}
.cs-header > * {
  pointer-events: auto;
}
.subtitle {
  font-family: var(--sec-font);
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;
  color: #86868b;
}
.svc-card h3 {
  font-family: var(--main-font-medium) !important;
  
  color: #f5f5f7;
      font-size: 19px;
font-weight: 600;
    letter-spacing: -.01em;

}
/* ══════════════════════════════════════════════
   CASE STUDIES — CRAFTO STYLE STACKED CARDS
   ══════════════════════════════════════════════ */
/*
  HOW THE STACKING WORKS:
  ─────────────────────────────────────────────────────────────────
  #cs-space is given a large min-height (via padding-bottom on the
  inner wrapper) so there's enough scroll budget for both the sticky
  header AND each sticky card to stick in turn.

  .cs-header  → sticky at top: 100px  (stays visible throughout)
  .cs-stack-wrap → the scroll budget container
  Each .cs-stack-card → sticky at top: 180px  (same top = they
    stack on top of each other as each one hits the viewport edge)
  z-index increases per card so later cards cover earlier ones.
  ─────────────────────────────────────────────────────────────────
*/
#cs-space {
  position: relative;
  overflow: visible;
  padding: 120px 0px 0;
}
.cs-title-block .headline {
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 600;
  line-height: 1.02;
  color: #fff;
  margin-bottom: 14px;
}
.cs-title-block .subtitle {
  color: rgba(255,255,255,.55);
  font-size: 18px;
  line-height: 1.75;
}
/* ── Stack wrapper ──
   padding-bottom gives the scroll budget so the last card
   fully sticks before the section ends and the header unsticks.
   With 3 cards at ~560px each, we need ~560×2 = 1120px.            */
.cs-stack-wrap {
  position: relative;
  padding-top: 24px;
  padding-bottom: 200px;
  margin-top: -880px;
}
/* sticky stacked cards — all at the same 'top' so each one
   slides in over the previous as you scroll down               */
.cs-stack-card {
  position: sticky;
  top: 180px;
}
/* z-index: later cards render on top of earlier ones */
.cs-stack-card:nth-child(1) {
  z-index: 1;
  top: 300px;
}
.cs-stack-card:nth-child(2) {
  z-index: 2;
  top: 300px;
}
.cs-stack-card:nth-child(3) {
  z-index: 3;
  top: 300px;
}
/* card shell */
.cs-card {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  transition: transform .35s ease, box-shadow .35s ease;
  cursor: pointer;
  margin-bottom: 180px;
  transform-origin: center top;

  border-radius: 20px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
}
/* first card can be a bit larger if you want */
.cs-large {
  min-height: 660px;
}
.cs-stack-card:hover .cs-card {
  box-shadow: 0 24px 80px rgba(0,172,233,.12);
}
/* image side */
.cs-img-wrap {
  position: relative;
  overflow: hidden;
  height: 100%;
  background: #111;
}
.cs-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
  display: block;
}
.cs-stack-card:hover .cs-card-img {
  transform: scale(1.03);
}
/* content side */
.cs-card-body {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  justify-content: center;
  background: #000;
}
/* tags */
.cs-tag-row {
  position: relative;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
/* tablet */
/* mobile */
/* ── FAQ ── */
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  cursor: pointer;
  transition: all .5s;
}
/* ── FAQ — Squish-style sticky left / scroll right ── */
#faq {
  padding: 120px 0 !important;
}
.faq-outer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  max-width: 1700px;
  margin: 0 auto;
}
/* LEFT: sticky panel */
.faq-left {
  z-index: 1;
  flex-flow: column;
  flex: 1 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  height: min-content;
  padding: 0;
  display: flex;
  position: sticky;
  top: 140px;
  overflow: visible;
}
.faq-left-label {
  color: var(--cyan-light);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.faq-left-title {
  font-size: clamp(28px,3vw,48px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1.08;
  margin-bottom: 36px;
}
.faq-left-answer {
  position: relative;
  min-height: 140px;
  margin-bottom: 36px;
}
.faq-left-ans-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.faq-left-ans-item.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.faq-left-ans-item p {
  font-size: clamp(15px,1.15vw,17px);
  color: rgba(255,255,255,.52);
  line-height: 1.75;
}
/* RIGHT: natural page scroll, each row is full viewport height */
/* .faq-right{ padding:0; } */
.faq-row {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 80px 64px 80px 72px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .35s;
}
.faq-row:last-child {
  border-bottom: none;
}
.faq-row.faq-active {
  background: rgba(0,172,233,.04);
}
.faq-row-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0;
  background: var(--cyan);
  border-radius: 0 2px 2px 0;
  transition: height .5s cubic-bezier(.25,.46,.45,.94);
}
.faq-row.faq-active .faq-row-bar {
  height: 100%;
}
.faq-row-num {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  color: rgba(255,255,255,.18);
  margin-bottom: 18px;
  transition: color .35s;
}
.faq-row.faq-active .faq-row-num {
  color: var(--cyan);
}
.faq-row-q {
  font-size: clamp(20px,2vw,30px);
  font-weight: 800;
  color: rgba(255,255,255,.3);
  line-height: 1.2;
  letter-spacing: -.02em;
  transition: color .4s;
}
.faq-row.faq-active .faq-row-q {
  color: #fff;
}
/* ── TESTIMONIAL CAROUSEL ── */
#testi-carousel-outer {
  position: relative;
  width: 100%;
  overflow: hidden;
}
/* left + right blur masks */
#testi-carousel-outer::before, #testi-carousel-outer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28%;
  pointer-events: none;
  z-index: 10;
}
#testi-carousel-outer::before {
  left: 0;
  background: linear-gradient(to right, rgba(9,9,14,0.02) 0%, rgba(9,9,14,0) 100%);
}
#testi-carousel-outer::after {
  right: 0;
  background: linear-gradient(to left, rgba(9,9,14,0.02) 0%, rgba(9,9,14,0) 100%);
}
#testi-track {
  display: flex;
  gap: 70px;
  align-items: stretch;
  will-change: transform;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
  padding: 55px 0 55px;
}
.testi-card.active {
  filter: blur(0);
  opacity: 1;
  transform: scale(1.04);
 
 border:1px solid var(--line);
  box-shadow:0 0 70px -10px rgba(94,208,255,.4),0 0 0 1px rgba(255,255,255,.06);
}
/* dots */
#testi-dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 36px;
}
.testi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  cursor: pointer;
  transition: background .3s,transform .3s;
}
.testi-dot.active {
  background: var(--cyan);
  transform: scale(1.3);
}
/* nav arrows */
#testi-prev,#testi-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s,transform .25s;
  backdrop-filter: blur(8px);
}
#testi-prev {
  left: 20px;
}
#testi-next {
  right: 20px;
}
#testi-prev:hover,#testi-next:hover {
  background: var(--cyan);
  transform: translateY(-50%) scale(1.08);
}
.testi-card {
  /* background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%),
    linear-gradient(135deg, #1b1f2a 0%, #151821 100%); */

    background: #0a0a0f;
  border-radius: 24px;
  padding: 22px 28px 22px 24px;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform .5s cubic-bezier(.25,.46,.45,.94),
             box-shadow .5s,
             filter .5s,
             opacity .5s,
             border-color .5s;
  flex-shrink: 0;
  width: calc(100vw - 570px);
  filter: blur(5px);
  opacity: 0.8;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 570px;
  min-height: 300px;
  overflow: hidden;
}
.testi-left {
  position: relative;
  width: 150px;
  min-width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quote-badge {
  position: absolute;
  top: -26px;
  left: 8px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0eb8f3;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 8px 20px rgba(14,184,243,.25);
}
.quote-badge svg {
  width: 24px;
  height: 20px;
  display: block;
}
.testi-logo-box {
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  min-height: 175px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
.testi-logo-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.testi-content {
  flex: 1;
  padding-right: 6px;
}
.testi-text {
  margin: 0 0 18px;
  color: #cfcfd1;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  max-width: 780px;
}
.testi-name {
  margin: 0 0 6px;
  color: #06b6ff;
  font-size: 24px;
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.testi-role {
  margin: 0;
  color: #b8bcc6;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 400;
}
/* mobile */
#press-track {
  width: 100%;
}
#press-track .slick-slide {
  height: auto !important;
}
#press-track .slick-slide > div {
  height: fit-content !important;
}
.press-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}
#press-track .press-card {
  margin: 0 12px;
}
#press-track .slick-list {
  overflow: hidden;
  margin: 0 -12px;
}
#press-track .slick-track {
  display: flex !important;
  align-items: stretch;
  padding-top: 50px;
  padding-bottom: 50px;
}
/* force-hide any default plain buttons if they still appear */
#press-track .slick-prev, #press-track .slick-next {
  display: none !important;
}
.blog-card h4 {
  font-family: var(--main-font-medium) !important;
      font-weight: 600;
    font-size: 20px;
  line-height: 140%;
  color: #f5f5f7;
  margin-bottom: 12px;
}
.blog-card p {
  font-family: var(--sec-font) !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #86868b !important;
}
.blog-body {
  padding: 26px 32px;
  gap: 16px;
}
#blog-track .slick-track {
  padding: 30px 0;
}
footer p {
  font-size: 14px !important;
}
footer a {
  transition: color .2s;
  font-size: 14px !important;
}
footer .font-bold {
  font-size: 16px !important;
  color: #f5f5f7 !important;
}
/* =========================
   CTA PARALLAX SECTION
   ========================= */
.cta-parallax-section {
  position: relative;
  padding: 140px 64px;
  overflow: clip;
  background: #070707;
  isolation: isolate;
}
.cta-parallax-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 20% 30%, rgba(255,120,40,.16), transparent 32%),
    radial-gradient(circle at 80% 70%, rgba(255,90,0,.14), transparent 30%),
    linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
  transform: scale(1.08);
  will-change: transform;
}
.cta-parallax-wrap {
  position: relative;
  z-index: 1;
}
.cta-parallax-card {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 34px;
  overflow: hidden;
  padding: 90px 80px;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 80px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  transform: translateY(40px) scale(.96);
  opacity: 0;
}
.cta-parallax-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,140,60,.14), transparent 30%, transparent 70%, rgba(255,110,30,.10));
  pointer-events: none;
}
.cta-parallax-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.cta-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  color: #ffb37d;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
}
.cta-title {
  font-size: clamp(2.4rem, 5vw, 5.3rem);
  line-height: .98;
  font-weight: 900;
  color: #f5f5f7;
  margin: 0 0 22px;
}
.cta-text {
  max-width: 760px;
  margin: 0 auto 32px;
  font-size: 1.08rem;
  line-height: 1.8;
  color: rgba(255,255,255,.78);
}
.cta-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  text-decoration: none;
  transition: .3s ease;
}
.btn-secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.3);
}
.qn {
  font-size: 18px;
  color: #f5f5f7;
}
.proc-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transition: transform .65s cubic-bezier(.22,.61,.36,1);
}
.proc-image.active {
  transform: translateY(0%);
  z-index: 2;
}
/* waiting below */
.proc-image.next {
  transform: translateY(100%);
  z-index: 3;
}
/* From Uiverse.io by Spacious74 */
.btn-update {
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}
.btn-container {
  position: relative;
  padding: 12px 20px;
  background: var(--grad-btn);
  border-radius: 10px;
  transition: all 0.4s ease;
}
.btn-container::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 0.9em;
  z-index: -10;
  filter: blur(0);
  transition: filter 0.4s ease;
}
.btn-container:hover::before {
  background: var(--grad-btn);
  filter: blur(1.2em);
}
.btn-container:active::before {
  filter: blur(0.2em);
}
/* From Uiverse.io by Spacious74 */
.btn-update-gray {
  color: #fff;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 15px;
  background: rgba(0,0,0);
}
.btn-container-gray {
  position: relative;
  padding: 2px 2px;
  background: linear-gradient(90deg, #03a9f4, #f441a5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 10px;
  transition: all 0.4s ease;
  width: fit-content;
}
.btn-container:hover .btn-container-gray {
  color: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.btn-container-gray::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 0.9em;
  z-index: -10;
  filter: blur(0);
  transition: opacity 0.8s ease, filter 0.8s ease;
  background: linear-gradient(90deg, #03a9f4, #f441a5); /* Same as hover */
  opacity: 0; /* Hidden by default */
  filter: blur(0);
}
.btn-container-gray:hover::before {
 
  filter: blur(10px);
  opacity: 1; /* Show on hover */
  
}
.btn-container-gray:active::before {
  filter: blur(10px);
}
.btn-update-gray1 {
  color: #d1d1d1;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 15px;
  background: rgba(0,0,0);
}
.btn-container-gray1 {
  position: relative;
  padding: 2px 2px;
  background: linear-gradient(90deg, #adadad, #7a7474);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 10px;
  transition: all 0.4s ease;
  width: fit-content;
}
.btn-container1:hover .btn-container-gray1 {
  color: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.btn-container-gray1::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 0.9em;
  z-index: -10;
  filter: blur(0);
  transition: opacity 0.8s ease, filter 0.8s ease;
  background: linear-gradient(90deg, #adadad, #7a7474);
  opacity: 0; /* Hidden by default */
}
.btn-container-gray1:hover::before {
  opacity: 1; /* Show on hover */
  filter: blur(10px);
}
.btn-container-gray1:active::before {
  filter: blur(0.2em);
}
.cs-card .view-btn {
  color: #ffffff;
}
.cs-card .view-btn svg {
  color: #ffffff;
}
.museum-table {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit, sans-serif;
  font-size: 15px;
  color: #e5e7eb;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  overflow: hidden;
}
.museum-table th, .museum-table td {
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  vertical-align: top;
}
.museum-table thead th {
  color:#f5f5f7;
  font-weight: 700;
  text-align: left;
}
.museum-table thead th:first-child {
  background: #222222;
  width: 180px;
}
.museum-table thead th:nth-child(2), .museum-table thead th:nth-child(3) {
  background: #222222;
}
.museum-table tbody td:first-child {
  font-weight: 600;
  color: #f5f5f7;
  background: rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}
.museum-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.025);
}
.museum-table tbody tr:hover {
  background: rgba(0, 172, 233, 0.08);
  transition: background .3s ease;
}
.museum-table td {
  line-height: 1.7;
}
.faq-item .font-semibold {
  font-weight: 500 !important;
}
/* .faq-item.open {
  background: rgba(36, 36, 36, 0.32);
} */


/* ══════════════════════════════════════════════════════════
   MOBILE / RESPONSIVE STYLES  (consolidated by breakpoint,
   ordered widest -> narrowest)
   ══════════════════════════════════════════════════════════ */

@media (max-width:1100px) {
  .cs-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .cs-large {
    min-height: auto;
  }
  .cs-img-wrap {
    min-height: 320px;
  }
  .cs-card-body {
    padding: 30px;
  }
}

@media (max-width:1024px) {
  #press-track .press-card {
    width: 280px;
  }
}

@media (max-width:1023px) {
  .about-inner {
    grid-template-columns: 1fr;
  }
  .about-video-col {
    display: none;
  }
  #hero-text {
    padding: 0 24px 56px;
  }
  .hero-sub-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  #about {
    padding: 80px 24px;
  }
      .about-stats {
        flex-wrap: wrap;
        gap: 24px;
        display: grid;
        grid-column: 0 1;
    }
  .about-stat+.about-stat {
    padding-left: 0;
    border-left: none;
  }
  .cs-grid {
    grid-template-columns: 1fr;
  }
  .cs-card.cs-large {
    grid-column: auto;
  }
  #desktop-nav {
    display: none;
  }
  #hamburger {
    display: flex !important;
  }
  .faq-outer {
    grid-template-columns: 1fr;
  }
  .faq-left {
    position: relative;
    height: auto;
    padding: 60px 24px 32px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .faq-left-answer {
    min-height: auto;
  }
  .faq-left-ans-item {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    display: none;
  }
  .faq-left-ans-item:first-child {
    display: block;
  }
  .faq-row {
    min-height: auto;
    padding: 40px 24px;
  }
}

@media (max-width:991px) {
  .cta-parallax-section {
    padding: 90px 24px;
  }
  .cta-parallax-card {
    padding: 54px 24px;
    border-radius: 24px;
  }
  .cta-title {
    line-height: 1.04;
  }
  .cta-text {
    font-size: .98rem;
    line-height: 1.7;
  }
}

@media (max-width:768px) {
  .cs-card.cs-large .cs-img-wrap {
    height: 260px;
  }


  #navbar img{
    height: 40px !important;
  }




.btn-theme{
  font-weight: 500 !important;
}

.link-cta {
    
    font-size: 17px;
}
#hero-text h1 {
    width: 100%;
    font-weight: 600;
}
  #mob-menu .btn-theme{
    width: 100% !important;
    text-align: center !important;
  }

  .about-copy{
    text-align: center;
  }

  .about-stat {
    padding: 33px 0 !important;
  }

  #hero-text{bottom:80px !important;}

  #hero-text h1{font-size:clamp(30px,6vw,72px);line-height:1.05;margin-bottom:18px;text-align: center}

      .faq-left {
        
        align-items: center;
    }
  .about-inner {
   
    text-align: center;
}

.about-actions {
    justify-content: center;
    gap: 10px !important;
}

  .wrap {
    max-width: 100% !important;
   gap:0 !important;
}

.footer-top {
    background: none !important;
    padding-bottom: 60px;
}

  #services .grid {
    grid-template-columns: repeat(1, 1fr) !important;
   
}

.closing-cta{
  margin-top: 50px;
}
  .cs-stack-card.reveal {
  opacity: 1;
  transform: none  !important;
  transition: none !important;
}

  .cs-card:not(.cs-large) .cs-img-wrap {
    height: 220px;
  }
  .cs-card {
    flex-direction: column;
            min-height: 580px;
                margin-bottom: 50px;
  }

  .cs-tag-row {
    
    margin-bottom: 0px;
}


html, body {
    overflow-x: none !important;
  }
.wrap{
  padding-right: 15px !important;
  padding-left: 15px !important;
}

  .cs-tag {
    color: #f5f5f7;
    font-size: 12px;
  }
  .cs-img {
    width: 100%;
    height: 240px;
  }
  .hscroll-track {
    padding: 0 20px;
  }
  #hero-content h1 {
    font-size: clamp(36px,8vw,60px);
  }
  #cs-space {
    padding: 80px 0;
  }
  .cs-title-block .headline {
    font-size: 34px;
  }
  .cs-title-block .subtitle {
    font-size: 14px;
    max-width: 100%;
  }
  .cs-stack-wrap {
    padding-bottom: 50px;
    margin-top: 0;
  }
  .cs-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 28px;
    justify-content: flex-start;
    position: relative !important;
    top: 20px !important;
  }
  .cs-stack-card, .cs-stack-card:nth-child(1), .cs-stack-card:nth-child(2), .cs-stack-card:nth-child(3) {
    position: sticky !important;
    top: 95px !important;
  }
  .cs-img-wrap {
    min-height: 240px;
  }
  .cs-card-body {
    padding: 40px 20px;
    justify-content: flex-start;
  }

  .cs-card-body .view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 15px;
  }

  .badge {
    
    font-size: 13px;
    
}
  .cs-card-title {
    font-size: 18px;
  }

  .cs-card-desc {
    font-size: 14px;
    color: rgba(172, 172, 172, 1);
    line-height: 1.5;
}

  .museum-table {
    font-size: 14px;
  }
  .museum-table th, .museum-table td {
    padding: 12px 14px;
  }
}

@media (max-width:767px) {
  .testi-left {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    padding-top: 22px;
  }
  .quote-badge {
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }
  .testi-logo-box {
    width: 100%;
    height: fit-content;
    min-height: fit-content;
  }

  .testi-logo-box img {
    height: 100px
}
  .testi-text {
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 16px;
  }
  .testi-name {
    font-size: 18px;
  }
  .testi-role {
    font-size: 14px;
  }
  #press-track .press-card {
    width: 240px;
    min-height: 190px;
    padding: 18px;
  }
  #hero-sticky {
    position: relative;
    top: 0;
    height: fit-content;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    background: #000;
  }
  #hero-text {
    position: absolute;
    margin: 180px auto;
    padding-bottom: 0px;
  }
  #hero-text h1 {
    font-size: clamp(30px, 6.5vw, 96px);
  }
  .hero-tagline {
    text-align: center;
  }
  .hero-sub-row {
    align-items: center;
  }
  #hero-video-el {
    position: relative !important;
  }
  #hero-scroll-space {
    height: fit-content !important;
  }
  #about {
    margin-top: 0 !important;
  }
  .hidden {
    display: none !important;
  }
  .headline {
    font-size: clamp(25px, 3.2vw, 40px);
  }
  .headline br {
    display: none !important;
  }
  .btn-cyan, .btn-ghost {
    font-size: 15px;
    width: fit-content;
    padding: 12px 12px;
  }
  .grad-text {
    font-size: 44px;
  }

  .case-tags {
    font-size: 9.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--beam-a);
}
  .ticker-inner {
    display: flex;
    gap: 30px;
  }
  .cs-header {
    height: auto;
  }
  .cs-stack-wrap {
    margin-top: 0px;
  }
  .svc-card h3 {
    line-height: 1.2;
  }
  .blog-card {
    margin: 0 8px !important;
    /* min-height: 610px !important; */
  }
  .blog-body {
    padding: 26px 28px;
  }
  .blog-img {
    height: 250px;
  }
  .blog-card h4 {
    line-height: 1.3;
  }
  html, body {
    overflow-x: clip;
  }
  footer .font-bold {
    line-height: 1.3;
    font-size: 15px !important;
    color: #f5f5f7 !important;
  }
  footer li {
    line-height: 1.2;
  }
  .faq-left {
    padding-top: 0px;
  }
  .about-stats {
    padding-top: 40px;
    padding-bottom: 40px;
            grid-template-columns: repeat(2, 1fr) !important;
  }
 
  .cs-card:not(.cs-large) .cs-img-wrap {
    width: 100%;
  }

  .testi-card {
  flex-direction: column-reverse;
  align-items: flex-start;
  padding: 35px;
  gap: 18px;
  min-height: auto;
   flex: 0 0 100%;
  max-width: 100%;
  min-width: 0;
}

  .subtitle {
    font-size: 16px;
  }
  .proc-desc {
    font-size: 16px;
  }
  .qn {
    font-size: 16px !important;
  }
  .testi-card {
    flex-direction: column-reverse;
    align-items: flex-start;
    padding: 25px;
    gap: 18px;
    min-height: auto;
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 100%;
  }
  #testi-carousel-outer {
     overflow: hidden;
  }

  #testi-track {
    padding-left: 30px;   /* moved here */
    padding-right: 30px;
    box-sizing: border-box;
  }
  .about-stat-label {
    font-size: 14px;
    color: rgba(213, 213, 213, 1);
    margin-top: 6px;
    line-height: 1.4;
  }
  #testi-prev, #testi-next {
    display: none !important;
  }
}

@media (min-width:1024px) {
  #hamburger {
    display: none !important;
  }
}

.badge-dot{
  display: none;
}





.bg-layer{
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height:300vh;
    z-index: 0;
   background: radial-gradient(circle at 100% 50%, rgb(1 70 145) 0%, rgb(0 0 0) 25%, rgb(0 0 0) 100%);
    will-change: transform;
  }

  .scroll-content{
    position: relative;
    z-index: 1;
  }

  /* ---- Foreground layer (fast, contains the "depth" cards) ---- */
  .fg-layer{
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
  }


  .bg-wrapper{
    position: relative;
    overflow: hidden;
}



.bg-sticky {
            /* This pins the background to the top of the viewport 
               while its parent container is still in view */
            position: sticky;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: -1;
            background: radial-gradient(circle at 100% 50%, rgb(1 70 145) 0%, rgb(0 0 0) 25%, rgb(0 0 0) 100%);
        }


        /* .endapproach {
  
    background: radial-gradient(circle at 100% 50%, rgb(0 192 130 / 43%) 0%, rgb(0 0 0) 25%, rgb(0 0 0) 100%);
    
} */






        .bg-sticky-lb {
            /* This pins the background to the top of the viewport 
               while its parent container is still in view */
            position: sticky;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: -1;
            background: radial-gradient(circle at 10% 10%, rgb(73 0 121) 0%, rgb(0 0 0) 30%, rgb(0 0 0) 100%);
        }


        .bg-sticky-faq {
            /* This pins the background to the top of the viewport 
               while its parent container is still in view */
            position: sticky;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: -1;
            background: radial-gradient(circle at 10% 10%, rgb(1 70 145) 0%, rgb(0 0 0) 30%, rgb(0 0 0) 100%);
        }


        .bg-sticky-blog {
            /* This pins the background to the top of the viewport 
               while its parent container is still in view */
            position: sticky;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: -1;
            background: radial-gradient(circle at 100% 0%, rgb(81 12 50) 0%, rgb(0 0 0) 30%, rgb(0 0 0) 100%);
        }

        .mt-50vh{
          margin-top: -80vh;
        }


        #cta-sec{
              padding: 50px 0px 50px;
    color: white;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    /* background: url(../img/tst.jpg);
    background-position: center center;
    background-size: cover;
    background-attachment: fixed; */

    
        }


        .endend{
              border: 0.2px solid #717171;
    box-shadow: 0 0 25px 0 rgba(0, 172, 233, 0.3);
        }


        .kicker {
    font-size: 14px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--beam-b);
    font-weight: 600;
    margin-bottom: 18px;
}

.eyebrow {
    font-size: 14px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--beam-a);
    font-weight: 600;
    margin-bottom: 22px;
}


.link-cta {
    font-size: 19px;
    color: var(--beam-a);
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 18px;
}

.link-cta::after {
    content: "\203A";
    font-size: 21px;
    transition: transform .3s var(--ease);
}


.svc-card p{
  color: #86868b;
  font-size: 15px;
  font-family: var(--sec-font) !important;
}


#services .grid{
      display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 55px;
}

#scroll-hint {
  cursor: pointer;
}


.link-cta:hover::after {
    transform: translateX(3px);
}



.proc-image-wrap {
  position: relative;
}
.proc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.proc-img.active {
  opacity: 1;
}

#proc-img-1{
    z-index:2;
}

#proc-img-2{
    z-index:1;
}





.parallax-bg{
    position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
    background-color:var(--bg);
  }
  .parallax-bg .tile{
    position:absolute;left:0;right:0;top:-2600px;bottom:-2600px;
    background-repeat:repeat-y;
    background-image:
      radial-gradient(16vw 16vw at 28% 24%,
        rgba(94,208,255,.16) 0%, rgba(94,208,255,.10) 35%,
        rgba(94,208,255,.04) 60%, transparent 82%),
      radial-gradient(15vw 15vw at 72% 66%,
        rgba(166,107,255,.17) 0%, rgba(166,107,255,.11) 35%,
        rgba(166,107,255,.04) 60%, transparent 82%),
      radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:100% 2600px,100% 2600px,3px 3px;
    will-change:transform;
    transform:translate3d(0,-2600px,0);
  }
  /* On narrow screens, vw-based blob sizes shrink along with the
     viewport width, so they'd barely be visible — scale them back up
     relative to the smaller screen. */
  @media(max-width:740px){
    .parallax-bg .tile{
      background-image:
        radial-gradient(52vw 52vw at 30% 22%,
          rgba(94,208,255,.16) 0%, rgba(94,208,255,.10) 35%,
          rgba(94,208,255,.04) 60%, transparent 82%),
        radial-gradient(48vw 48vw at 70% 68%,
          rgba(166,107,255,.17) 0%, rgba(166,107,255,.11) 35%,
          rgba(166,107,255,.04) 60%, transparent 82%),
        radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    }
  }
  @media(prefers-reduced-motion:reduce){
    .parallax-bg .tile{transform:translate3d(0,-2600px,0)!important}
  }


  /* footer{
    background: radial-gradient(60% 80% at 50% 120%, rgb(166 107 255 / 43%), transparent 60%)
  } */


  .footer-top{
        background: radial-gradient(60% 80% at 50% 120%, rgb(166 107 255 / 43%), transparent 60%);
    padding-bottom: 60px;
  }


  .beam {
    position: absolute;
    top: -10%;
    left: 50%;
    width: 120vw;
    height: 120vh;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(60% 50% at 50% 0%, rgba(94, 208, 255, .22), transparent 60%), conic-gradient(from 180deg at 50% -10%, transparent 42%, rgba(166, 107, 255, .14) 50%, transparent 58%);
    filter: blur(8px);
}

.about-stat {
    padding: 33px 13px;
    border-radius: 15px;
    background: #0a0a0f;
    border: 1px solid #1d1d22;
    text-align: center;
}


.blog-card .link-cta{
  font-size: 16px;
}


#blog-space{
  align-items: center;
}

#blog-space h2{
  margin-bottom: 0px;
}

#blog-space .link-cta{
  margin-top: 0px;
}

.closing-points {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.closing-points li {
    list-style: none;
    color: #86868b;
    font-size: 16px;
    padding-left: 20px;
    position: relative;
}

.closing-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--beam-a), var(--beam-b));
}

.closing-cta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
}


.closing-cta a{
  width: 180px;
  text-align: center;
  justify-content: center;
}





.btn-theme {
    flex: 0 0 auto;
    padding: 9px 20px;
    border-radius: 980px;
        font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    background: transparent;
    border: 1.5px solid transparent;
    background-image: linear-gradient(rgba(8, 8, 12, 1), rgba(8, 8, 12, 1)), linear-gradient(150deg, var(--beam-a), var(--beam-b));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}


.btn-gray {
       background: transparent !important;
    color: var(--ink) !important;
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 11px 23px;
    border-radius: 980px;
    background: var(--ink);
    color: #000;
    font-size: 16px;
    font-weight: 500;
    transition: transform .3s var(--ease), opacity .3s;
    display: inline-block;
}


.btn-gray:hover {

    transform: scale(1.04);
}



.btn-theme:hover {
    transform: scale(1.02);
    box-shadow: 0 0 18px -2px rgba(94, 208, 255, .4);
}


.btn-theme.pill-glow{
    animation: pillGlow 3.2s ease-in-out infinite;
}


@keyframes pillGlow {
    0%, 100% {
    box-shadow: 0 0 14px 0 rgba(94, 208, 255, .35), 0 0 26px 4px rgba(166, 107, 255, .18);
}
    50% {
    box-shadow: 0 0 22px 2px rgba(94, 208, 255, .5), 0 0 40px 8px rgba(166, 107, 255, .3);
}
}



.wrap {
    max-width: 1600px;
    margin: 0 auto;
    padding: 10px 22px;
}


nav .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 24px;
}


.sol-mark {
    width: 65px;
    height: 65px;
    border-radius: 14px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, rgba(94, 208, 255, .18), rgba(166, 107, 255, .22));
    border: 1px solid rgba(255, 255, 255, .08);
}


.sol-mark img {
    width: 35px;
    height: 35px;
    object-fit: contain;
    filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(94, 208, 255, .5));
}






    #hamburger span:nth-child(2) {
        top: 10px;
        width: 16px;
        right: 50%;
        -webkit-transform: translateX(50%);
        -moz-transform: translateX(50%);
        -ms-transform: translateX(50%);
        -o-transform: translateX(50%);
        transform: translateX(50%);
    }


    #hamburger span{
      background: linear-gradient(150deg, var(--beam-a), var(--beam-b));
    }

.faq-ans-content {
  max-height: 4.5em;         /* roughly 3 lines at your font-size/line-height */
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq-ans-content.expanded {
  max-height: 100%;         /* large enough to fit the full text */
  transition: max-height 0.5s ease-in-out;
}

.read-more-btn {
  display: inline-block;
  margin-top: 6px;
  color: var(--beam-a);
  cursor: pointer;
  font-size: 0.9rem;
  text-decoration: underline;
}



.text-white{
  color: #f5f5f7 !important;
}


/* ---------- hero: full-screen video ---------- */
  .hero{position:relative;height:100vh;overflow:hidden}
  .hero-video-frame{
    position:fixed;top:0;left:0;width:100vw;height:100vh;overflow:hidden;z-index:5;
    will-change:width,height,transform,border-radius,box-shadow;
    box-shadow:0 0 0 rgba(94,208,255,0);
  }
  .hero-bg-video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
  #hero-overlay{position:absolute;inset:0;pointer-events:none;z-index:6}
  #hero-text{position:absolute;left:0;right:0;bottom:40px;z-index:10;max-width:1500px;margin:0 auto;padding:0 24px;color:#fff;}
  #hero-text h1{font-size:clamp(27px,6vw,72px);line-height:1.05;margin-bottom:18px;}
  .hero-tagline{font-size:clamp(16px,1.2vw,20px);color:rgba(255,255,255,.85);max-width:760px;}
  .scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:10;
    color:rgba(255,255,255,.7);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    animation:float 2.4s ease-in-out infinite}

  /* ---------- about ---------- */
  section.about{padding:150px 0 40px}
  .about-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:center}
  /* Bigger slot than before, and it reserves the glow's breathing room too */
  .about-video-slot{aspect-ratio:16/9;border-radius:22px}
  .about-copy h2{font-size:clamp(28px,3.6vw,40px);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-top:10px}
  .about-copy p{color:var(--muted);font-size:16px;line-height:1.65;margin-top:16px;max-width:540px}
  .about-copy .cta-row{margin-top:26px}
  @media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:28px}}



  .logo-chip {
    flex: 0 0 auto;
    width: 180px;
    height: 110px;
    border-radius: 16px;
    background: #f5f5f7;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
}


.logo-chip img {
    max-width: 100%;
    object-fit: contain;
}



/* .ticker-inner {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 92%, transparent);
} */

.logo-chip img {
    
    max-width: 100%;
    object-fit: contain;
}



.press-card img{
  filter: brightness(0) invert(1) ;
}


.press-card img.quote{
  filter:none
}