/* ==========================================================================
   ildevweb — Coming Soon
   ========================================================================== */

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

:root{
  --white: #ffffff;
  --paper: #f6f8fd;
  --navy: #0a1a52;
  --navy-2: #0d2470;
  --blue: #0b72e7;
  --blue-2: #12c2f0;
  --cyan: #22e1ff;
  --blue-soft: #e6f6ff;
  --ink: #0a1a52;
  --muted: #5b6280;
  --muted-2: #939aba;
  --border: rgba(10, 26, 82, 0.09);
  --glass: rgba(255, 255, 255, 0.6);
  --brand-gradient: linear-gradient(135deg, var(--navy) 0%, var(--blue) 55%, var(--cyan) 100%);

  --font-display: 'Sora', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: auto;
}
html.lenis, html.lenis body{
  height: auto;
}
html.lenis-smooth{
  scroll-behavior: auto !important;
}

body{
  margin: 0;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  /* `overflow-x: hidden` on <body> is the classic scroll-animation killer on
     mobile. Per spec, when one axis is not `visible` the other computes to
     `auto` — so this single line silently turned <body> into its own scroll
     container (verified: computed `overflow: hidden auto`). Scroll position
     then lives on <body> instead of the document element, and ScrollTrigger,
     which observes the document/window scroller, sees a scroll position that
     never changes — every scroll-linked animation stays frozen at progress 0
     while the page still scrolls normally. Desktop happened to keep working;
     mobile did not. `clip` prevents the same horizontal overflow WITHOUT
     creating a scroll container. `hidden` stays first as the fallback for
     browsers predating `clip` (Safari < 16). */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .5s ease-out, color .5s ease-out;
}
body.dark-theme{
  background-color: #061033;
  color: #f9fafb;
}


a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; }

::selection{
  background: var(--blue);
  color: var(--white);
}

/* ---------- layout scaffold ---------- */

.scene{
  position: relative;
  isolation: isolate;
}

.container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}

#services, #stack, #work, #process, #booking{
  scroll-margin-top: 84px;
}

.bg-layer{
  position: fixed;
  inset: 0;
  z-index: -2;
  --tint: 246, 248, 253;
  background:
    radial-gradient(ellipse 80% 55% at 50% -8%, rgba(11,114,231,0.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, rgb(var(--tint)) 55%, #eef2fb 100%);
  transition: background 0.1s linear;
}

.fx-grid{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(10,26,82,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,26,82,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
}
.fx-grid::after{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11,114,231,0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,114,231,0.5) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 20%), black, transparent 72%);
  mask-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 20%), black, transparent 72%);
  opacity: 0.9;
  transition: opacity .4s ease;
}

.orb{
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
  z-index: -1;
  opacity: 0.5;
  pointer-events: none;
}
.orb-1{
  width: 46vw; height: 46vw;
  top: -16vw; left: -12vw;
  background: radial-gradient(circle, rgba(11,114,231,0.22), transparent 70%);
  animation: float-1 22s ease-in-out infinite, blob-morph 14s ease-in-out infinite;
}
.orb-2{
  width: 38vw; height: 38vw;
  bottom: -18vw; right: -10vw;
  background: radial-gradient(circle, rgba(13,36,112,0.14), transparent 70%);
  animation: float-2 26s ease-in-out infinite;
}
.orb-3{
  width: 26vw; height: 26vw;
  top: 38%; left: 60%;
  background: radial-gradient(circle, rgba(34,225,255,0.14), transparent 70%);
  animation: float-3 18s ease-in-out infinite;
}

@keyframes float-1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(4vw, 3vw) scale(1.08); }
}
@keyframes float-2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-3vw, -4vw) scale(1.1); }
}
@keyframes float-3{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-2vw, 2vw) scale(0.9); }
}
@keyframes blob-morph{
  0%,100%{ border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  34%{ border-radius: 63% 37% 47% 53% / 55% 40% 60% 45%; }
  67%{ border-radius: 37% 63% 51% 49% / 45% 62% 38% 55%; }
}

.grain{
  position: fixed;
  inset: -100px;
  z-index: 5;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.vignette{
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 50%, transparent 60%, rgba(10,26,82,0.05) 100%);
}

/* ---------- custom cursor ---------- */

.cursor-dot, .cursor-ring{
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transform: translate(-50%, -50%);
  will-change: transform;
}

body.cursor-ready .cursor-dot,
body.cursor-ready .cursor-ring{
  opacity: 1;
}

.cursor-dot{
  width: 6px; height: 6px;
  background: var(--blue);
  transition: opacity .2s var(--ease-out-expo);
}
.cursor-ring{
  width: 32px; height: 32px;
  background: #fff;
  mix-blend-mode: difference;
  transition: width .3s var(--ease-spring), height .3s var(--ease-spring), opacity .2s ease;
}
.cursor-ring.is-active{
  width: 64px; height: 64px;
}
.cursor-ring.is-stack,
.cursor-ring.is-active.is-stack{
  width: 22px;
  height: 22px;
  opacity: .72;
}
@media (hover: none), (pointer: coarse){
  .cursor-dot, .cursor-ring{ display: none; }
}
@media (max-width: 700px){
  .cursor-dot, .cursor-ring{ display: none; }
}

/* ---------- header ---------- */

.site-header{
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: calc(100% - 32px);
  max-width: 920px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  box-sizing: border-box;
  transition: transform .4s var(--ease-out-expo);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.site-header.is-scrolled{
  background: transparent;
  border-color: transparent;
}
.site-header.is-hidden{
  transform: none;
}

.header-inner {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    padding: 8px 18px;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: box-shadow .3s ease, border-color .3s ease, background .3s ease;
    will-change: clip-path, transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}
.site-header.is-scrolled .header-inner{
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.08);
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #0f172a;
  flex-shrink: 0;
  line-height: 1;
}
.brand img{
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(11,114,231,0.25));
  flex-shrink: 0;
}
.brand-word{
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.3px;
  line-height: 1;
}
.brand-word span{ color: var(--blue); }

.nav-links{
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.nav-links a{
  text-decoration: none;
  color: #475569;
  transition: color .2s ease;
}
.nav-links a:hover{ color: #2563eb; }

.header-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  /* 44x44 is the minimum comfortable touch target (Apple HIG / WCAG 2.5.5);
     this was 34x34, which is why the button felt hard to hit on a phone. The
     BARS stay 24px wide via .nav-toggle span — only the tappable box grew, so
     the icon looks identical while the hit area gains ~65% more surface. */
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.nav-toggle span{
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform .3s var(--ease-out-expo), opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- buttons ---------- */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .3s var(--ease-spring), background .25s ease, box-shadow .3s ease, border-color .25s ease, color .25s ease;
}
.btn-primary{
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(11,114,231,0.5);
}
.btn-primary:hover{
  background: #0044dd;
  box-shadow: 0 12px 26px -8px rgba(11,114,231,0.5);
}
.btn-ghost{
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--border);
}
.btn-ghost:hover{
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-soft);
}
.btn-large{ height: 55px; padding: 0 33px; font-size: 15px; }
.btn-small{ height: 40px; padding: 0 20px; font-size: 13.5px; }
.btn:disabled{ cursor: default; opacity: .7; }

.btn-check{
  width: 16px; height: 16px;
  color: currentColor;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  transition: stroke-dashoffset .45s var(--ease-out-expo) .1s;
  flex-shrink: 0;
  display: none;
}
.btn.is-success .btn-check{ display: block; stroke-dashoffset: 0; }
.btn.is-success{ background: var(--navy); color: #fff; box-shadow: none; }
.btn-label{ transition: opacity .2s ease; }
.btn.is-loading .btn-label{ opacity: .6; }

.nav-overlay{
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(10, 26, 82, 0.35);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.nav-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 880px){
  body.nav-open{ overflow: hidden; }

  .site-header{
    top: 14px;
    width: calc(100% - 28px);
    max-width: none;
  }
  .header-inner{
    justify-content: space-between;
    width: 100%;
    min-height: 54px;
    padding: 7px 10px 7px 7px;
    overflow: visible;
  }

  /* Full-screen dark panel instead of a small floating white card — reuses
     the same navy/cyan gradient + dot-grid language as the FAQ section
     (.faq-section) and the footer, instead of a generic light UI-kit
     dropdown that had nothing to do with the brand. */
  .nav-links{
    position: fixed;
    inset: 0;
    z-index: 1002;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    counter-reset: navitem;
    background:
      radial-gradient(circle at 88% 8%, rgba(34,225,255,0.22), transparent 32%),
      radial-gradient(circle at 6% 92%, rgba(11,114,231,0.26), transparent 36%),
      linear-gradient(160deg, #050b24 0%, #0a1a52 55%, #082f80 100%);
    padding: 100px 28px 40px;
    overflow-y: auto;
    clip-path: none;
    opacity: 0;
    transform: translate3d(0, -10px, 0) scale(0.985);
    visibility: hidden;
    will-change: transform, opacity;
    transition:
      opacity 0.22s var(--ease-out-expo),
      transform 0.22s var(--ease-out-expo),
      visibility 0s linear 0.22s;
  }
  .nav-links::before{
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      linear-gradient(rgba(34,225,255,0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(34,225,255,0.07) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black, transparent 82%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black, transparent 82%);
    pointer-events: none;
  }
  .nav-links.is-open{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    visibility: visible;
    transition:
      opacity 0.24s var(--ease-out-expo),
      transform 0.24s var(--ease-out-expo),
      visibility 0s linear 0s;
  }
  .nav-links a{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 14px;
    width: 100%;
    padding: 17px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-family: var(--font-display);
    font-size: clamp(24px, 7vw, 30px);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.22s ease, transform 0.22s ease;
  }
  .nav-links a:not(.nav-cta)::before{
    counter-increment: navitem;
    content: counter(navitem, decimal-leading-zero);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--cyan);
    letter-spacing: 0.06em;
  }
  .nav-links.is-open a{ opacity: 1; transform: translateY(0); }
  .nav-links.is-open a:nth-child(1){ transition-delay: 0.03s; }
  .nav-links.is-open a:nth-child(2){ transition-delay: 0.05s; }
  .nav-links.is-open a:nth-child(3){ transition-delay: 0.07s; }
  .nav-links.is-open a:nth-child(4){ transition-delay: 0.09s; }
  .nav-links.is-open a:nth-child(5){ transition-delay: 0.11s; }
  .nav-links a:last-child{ border-bottom: none; }
  .nav-toggle{ display: flex; position: relative; z-index: 1003; }
  .nav-toggle span{ background: #0f172a; }
  body.nav-open .nav-toggle span{ background: #0f172a; }
  /* #nav-links is a CHILD of .site-header (nested in .header-inner), not a
     sibling — so its z-index only has to beat its siblings inside that same
     local stacking context, not the header's own z-index:9999. .nav-toggle
     already got bumped above it (z-index:1003) so the close (X) button stays
     visible; .brand never got the same treatment, so the open card (z-index
     1002) covered the logo/wordmark completely. Same fix, same reason. */
  .brand{ position: relative; z-index: 1003; }

  /* The card opens right over the header (same top:14px rect), with big
     top padding so the header's own logo + toggle show through above the
     link list. The header's CTA button sat in that same strip and had
     nothing hiding it, so it visually poked through the card's rounded top
     edge as a stray blue shape. Hide it while open, and give the menu its
     own CTA at the bottom of the list instead — otherwise "book a call"
     was unreachable at all while the menu was open. */
  body.nav-open .header-actions > a.btn{ opacity: 0; pointer-events: none; }

  .nav-cta{
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 28px;
    padding: 17px 0 !important;
    border-bottom: none !important;
    border-radius: 100px;
    background: var(--brand-gradient);
    box-shadow: 0 16px 40px -14px rgba(11,114,231,0.6);
    font-size: 16px !important;
  }
  .nav-cta::before{ content: none; }
}

@media (min-width: 881px){
  .nav-cta{ display: none; }
}

/* ---------- hero ---------- */

.hero{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 90vh;
  justify-content: center;
  padding: 140px 20px 60px;
  position: relative;
  z-index: 2;
}

.hero-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 46px;
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.badge{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 12px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--glass);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px rgba(10,26,82,0.04);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.badge .dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 0 rgba(11,114,231,0.5);
  animation: pulse-dot 2.2s ease-out infinite;
}
@keyframes pulse-dot{
  0%{ box-shadow: 0 0 0 0 rgba(11,114,231,0.45); }
  70%{ box-shadow: 0 0 0 8px rgba(11,114,231,0); }
  100%{ box-shadow: 0 0 0 0 rgba(11,114,231,0); }
}

.mark-parallax{
  margin: 34px 0 18px;
}
.mark-wrap{
  perspective: 900px;
}
.mark{
  display: block;
  width: clamp(90px, 12vw, 140px);
  height: auto;
  opacity: 0;
  animation: idle-float 6s ease-in-out infinite;
  animation-play-state: paused;
  filter: drop-shadow(0 12px 28px rgba(11,114,231,0.22));
  transform-style: preserve-3d;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: filter .3s ease;
}
@keyframes idle-float{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-10px) rotate(-2deg); }
}

.headline{
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-size: clamp(2.4rem, 6.2vw, 5.2rem);
  max-width: 15ch;
  margin: 0 0 22px;
  color: var(--navy);
}
.headline .word{
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
}
.headline .word span{
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.headline .grad{
  background: linear-gradient(100deg, var(--blue), var(--blue-2) 45%, var(--blue) 90%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 5s linear infinite;
  animation-play-state: paused;
}
@keyframes sheen{
  to{ background-position: -200% center; }
}

.subhead{
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
  margin: 0 0 40px;
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.subhead strong{ color: var(--navy); font-weight: 600; }

/* ---------- services ticker ---------- */

.ticker-wrap{
  width: min(680px, 92vw);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  margin-bottom: 46px;
  opacity: 0;
}
.ticker-wrap::-webkit-scrollbar{ display: none; }
.ticker{
  display: flex;
  width: max-content;
  gap: 14px;
  animation: scroll-left 22s linear infinite;
}
.ticker-wrap:hover .ticker{ animation-play-state: paused; }
.ticker span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(10,26,82,0.04);
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.ticker span::before{
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue);
}
@keyframes scroll-left{
  to{ transform: translateX(-50%); }
}

.hp-field{
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

.form-msg{
  min-height: 18px;
  font-size: 12.5px;
  margin-top: 12px;
  color: var(--muted);
  transition: color .2s ease;
}
.form-msg.is-success{ color: var(--blue); }
.form-msg.is-error{ color: #e0393e; }

/* ---------- preloader ---------- */

.preloader{
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.preloader.is-leaving{
  opacity: 0;
  pointer-events: none;
}
.preloader-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.preloader-mark{
  width: 56px;
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(11,114,231,0.28));
  animation: preloader-pulse 1.3s ease-in-out infinite;
}
@keyframes preloader-pulse{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.1); }
}
.preloader-count{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.preloader-bar{
  width: 160px;
  height: 2px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.preloader-bar-fill{
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--blue-2));
}

/* ---------- scroll-driven reveals (base hidden state; GSAP animates in) ---------- */

.section-head,
.service-card,
.stack-lab,
.process-step,
.work-reel,
.work-horizontal,
.faq-signal-card,
.faq-item,
.booking-card{
  opacity: 0;
  visibility: hidden;
}

.section-head,
.work-reel,
.work-horizontal,
.faq-signal-card,
.faq-item,
.booking-card{
  transform: translate3d(0, 40px, 0);
  will-change: transform, opacity;
}

/* ---------- process scroll rail ---------- */

.process-rail{
  position: relative;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  margin-bottom: 46px;
  overflow: hidden;
}
.process-rail-fill{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--blue-2));
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---------- card tilt + cursor glare ---------- */

.work-card{
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  overflow: hidden;
}
.work-card > *{
  position: relative;
  z-index: 1;
}
.work-card::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 0%), rgba(11,114,231,0.14), transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.work-card:hover::after{ opacity: 1; }
.work-thumb{ position: relative; z-index: 1; }

/* ---------- sections ---------- */

.section{
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: clamp(49px, 1vw, 111px) 0;
}
.section-alt{
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-orb{
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.6;
}
.section-orb-process{
  width: 280px; height: 280px;
  top: 5%; right: 2%;
  background: radial-gradient(circle, rgba(11,114,231,0.28), transparent 70%);
}
.section-orb-work{
  width: 240px; height: 240px;
  bottom: 0%; left: 0%;
  background: radial-gradient(circle, rgba(13,36,112,0.2), transparent 70%);
}
.section-orb-faq{
  width: 220px; height: 220px;
  top: 8%; left: 4%;
  background: radial-gradient(circle, rgba(34,225,255,0.22), transparent 70%);
}

.section-head{
  max-width: 620px;
  margin: 0 auto 52px;
  text-align: center;
}
#faq .section-head{
    padding-bottom:1rem ;
}
.eyebrow{
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.section-head h2{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  color: var(--navy);
  margin: 0 0 14px;
}
.section-head p{
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0;
}

/* ---------- services ---------- */

.services-board{
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(188px, auto);
  gap: 16px;
  perspective: 1100px;
  isolation: isolate;
}
.services-board::before{
  content: '';
  position: absolute;
  inset: -44px 12% auto;
  height: 220px;
  background: radial-gradient(ellipse at center, rgba(11,114,231,0.13), transparent 68%);
  pointer-events: none;
  opacity: var(--glow-o, 0);
  animation: service-board-glow 8s ease-in-out infinite;
}
@keyframes service-board-glow{
  0%,100%{ transform: translateY(0) scaleX(1); }
  50%{ transform: translateY(24px) scaleX(1.14); }
}
.service-card{
  --card-z: 1;
  position: relative;
  z-index: var(--card-z);
  grid-column: span 4;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(10,26,82,0.08);
  box-shadow: 0 22px 60px -42px rgba(10,26,82,0.42);
  backdrop-filter: blur(12px);
  will-change: transform;
  transform-style: preserve-3d;
}
.service-card:hover{
  border-color: rgba(11,114,231,0.22);
  box-shadow:
    0 28px 70px -42px rgba(10,26,82,0.48),
    0 18px 42px -34px rgba(11,114,231,0.32),
    0 0 0 1px rgba(255,255,255,0.28) inset;
  filter: saturate(1.04);
}
.service-card::after{
  content: '';
  position: absolute;
  z-index: 0;
  right: -44px;
  bottom: -54px;
  width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11,114,231,0.12), transparent 66%);
  pointer-events: none;
}
.service-card:not(.service-hero-card)::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(260px circle at var(--gx, 70%) var(--gy, 20%), rgba(11,114,231,0.12), transparent 66%);
  opacity: 0;
  pointer-events: none;
}
.service-card:not(.service-hero-card):hover::before{ opacity: 1; }
.service-card:hover::after{
  transform: translate(-18px, -18px) scale(1.16);
  opacity: 1;
}
.service-hero-card{
  --hero-bg-y: 0px;
  grid-column: span 8;
  grid-row: span 2;
  min-height: 456px;
  padding: clamp(28px, 4vw, 46px);
  color: #fff;
  background:
    linear-gradient(135deg, rgba(11,114,231,0.34), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(255,255,255,0.16), transparent 24%),
    linear-gradient(145deg, #071238 0%, #0a1a52 54%, #060f30 100%);
  border-color: rgba(255,255,255,0.16);
}
.service-hero-card::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 34px 34px;
  transform: translate3d(0, var(--hero-bg-y), 0);
  -webkit-mask-image: radial-gradient(ellipse 78% 80% at 50% 50%, black, transparent 90%);
  mask-image: radial-gradient(ellipse 78% 80% at 50% 50%, black, transparent 90%);
  pointer-events: none;
  animation: service-grid-drift 16s linear infinite;
}
.service-hero-card .service-card-icon::after{
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  opacity: 0;
  animation: icon-sonar 2.4s ease-out infinite;
}
@keyframes icon-sonar{
  0%{ transform: scale(.72); opacity: .85; }
  80%,100%{ transform: scale(1.45); opacity: 0; }
}
@keyframes service-grid-drift{
  to{ background-position: 68px 34px; }
}
.service-hero-card::after{
  width: 420px;
  right: -120px;
  bottom: -160px;
  background:
    radial-gradient(circle at center, rgba(34,225,255,0.2), transparent 45%),
    conic-gradient(from 140deg, rgba(255,255,255,0.04), rgba(34,225,255,0.28), rgba(255,255,255,0.03));
  animation: service-orbit-slow 18s linear infinite;
}
@keyframes service-orbit-slow{
  to{ transform: rotate(360deg); }
}
.service-num{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 11px;
  border-radius: 100px;
  background: var(--blue-soft);
  color: var(--blue);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 18px;
}
.service-hero-card .service-num{
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.76);
  border: 1px solid rgba(255,255,255,0.14);
}
.service-card-icon{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  margin-bottom: 22px;
  background: rgba(11,114,231,0.09);
  color: var(--blue);
  transition: transform .45s var(--ease-spring), background .3s ease, color .3s ease;
}
.service-card-icon svg{ width: 23px; height: 23px; }
.service-card:hover .service-card-icon{
  transform: translateY(-4px) rotate(-5deg) scale(1.08);
  background: var(--blue);
  color: #fff;
}
.service-hero-card .service-card-icon{
  width: 58px;
  height: 58px;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
}
.service-card h3{
  --hero-text-y: 0px;
  position: relative;
  z-index: 1;
  max-width: 17ch;
  margin: 0 0 12px;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.15;
}
.service-hero-card h3,
.service-hero-card p,
.service-hero-card .service-flow,
.service-hero-card .service-card-cta{
  transform: translate3d(0, var(--hero-text-y), 0);
  will-change: transform;
}
.service-card p{
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}
.service-hero-card h3{
  max-width: 12ch;
  color: #fff;
  font-size: clamp(2rem, 4.3vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.service-hero-card h3::after{
  content: '';
  display: block;
  width: 74px;
  height: 5px;
  margin-top: 18px;
  border-radius: 100px;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,0), var(--blue-2));
  background-size: 220% 100%;
  animation: title-scan 2.8s ease-in-out infinite;
}
@keyframes title-scan{
  0%,100%{ background-position: 0% 50%; transform: scaleX(.72); opacity: .65; }
  50%{ background-position: 100% 50%; transform: scaleX(1.2); opacity: 1; }
}
.service-hero-card p{
  max-width: 48ch;
  color: rgba(245,247,255,0.68);
  font-size: 15.5px;
}
.service-flow{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 34px;
}
.service-flow span{
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 100px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.74);
  font-size: 12px;
  font-weight: 700;
  animation: service-pill-float 5.5s ease-in-out infinite;
}
.service-flow span:nth-child(3){ animation-delay: .35s; }
.service-flow span:nth-child(5){ animation-delay: .7s; }
.service-flow span:nth-child(7){ animation-delay: 1.05s; }
@keyframes service-pill-float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-5px); }
}
.service-flow i{
  width: 26px;
  height: 1px;
  background: rgba(255,255,255,0.22);
}
.service-card-cta{
  position: relative;
  z-index: 1;
  margin-top: 24px;
}

/* ---------- stack ---------- */

.stack-process-section{
  color: #fff;
  background:
    radial-gradient(circle at 82% 18%, rgba(34,225,255,0.24), transparent 30%),
    radial-gradient(circle at 14% 82%, rgba(11,114,231,0.3), transparent 34%),
    linear-gradient(135deg, #07123c 0%, #0a1a52 46%, #063f9f 100%);
  border: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.stack-section {
    position: relative;
    z-index: 1;
    padding-top: clamp(46px, 6vw, 44px);
    padding-bottom: clamp(70px, 9vw, 108px);
}
.process-section{
  position: relative;
  z-index: 1;
  padding-top: clamp(70px, 9vw, 108px);
  padding-bottom: clamp(70px, 10vw, 120px);
}
.stack-process-section::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(34,225,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,225,255,0.07) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 78% 70% at 50% 44%, black, transparent 82%);
  mask-image: radial-gradient(ellipse 78% 70% at 50% 44%, black, transparent 82%);
  pointer-events: none;
}
.stack-process-section .container{
  position: relative;
  z-index: 1;
}
.stack-section .eyebrow,
#process .eyebrow{
  color: var(--cyan);
}
.stack-section .section-head h2,
#process .section-head h2{
  color: #fff;
}
.stack-section .section-head p,
#process .section-head p{
  color: rgba(235,248,255,0.72);
}
.stack-lab{
  position: relative;
  margin-top: clamp(46px, 6vw, 82px);
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}
.logo-slider-card{
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 38px);
  min-height: 174px;
  padding: clamp(18px, 3vw, 32px);
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 50%, rgba(34,225,255,0.12), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(250,252,255,0.92));
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow:
    0 34px 90px -54px rgba(0,0,0,0.5),
    0 0 0 1px rgba(34,225,255,0.08) inset;
}
.logo-slider-card::before{
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 24px;
  border: 1px solid rgba(10,26,82,0.045);
  background: linear-gradient(105deg, transparent 0 34%, rgba(34,225,255,0.12) 44%, transparent 56% 100%);
  background-size: 240% 100%;
  animation: stack-card-sheen 5.5s linear infinite;
  pointer-events: none;
}
.logo-slider-card::after{
  content: '';
  position: absolute;
  left: 190px;
  top: 0;
  bottom: 0;
  width: 180px;
  background: linear-gradient(90deg, transparent, rgba(34,225,255,0.18), transparent);
  transform: translateX(-260px) skewX(-16deg);
  animation: stack-scanline 3.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  pointer-events: none;
}
@keyframes stack-card-sheen{
  from{ background-position: 140% 0; }
  to{ background-position: -140% 0; }
}
@keyframes stack-scanline{
  0%{ transform: translateX(-260px) skewX(-16deg); opacity: 0; }
  14%{ opacity: 1; }
  72%{ opacity: 1; }
  100%{ transform: translateX(78vw) skewX(-16deg); opacity: 0; }
}
.logo-slider-meta{
  position: relative;
  z-index: 2;
  display: grid;
  gap: 7px;
  padding-left: 4px;
}
.logo-slider-meta span{
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.logo-slider-meta strong{
  max-width: 12ch;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 2vw, 1.65rem);
  line-height: 1.02;
}
.logo-slider-window{
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  padding: 20px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.logo-slider-window::before{
  content: '';
  position: absolute;
  inset: 50% 8% auto;
  height: 44px;
  border-radius: 999px;
  background: rgba(0,78,253,0.055);
  filter: blur(18px);
  transform: translateY(-50%);
  pointer-events: none;
}
.logo-slider-track{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  gap: clamp(46px, 5.6vw, 86px);
  padding-inline: clamp(24px, 3vw, 42px);
  will-change: transform;
}
.stack-logo{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: max-content;
  line-height: 1;
  filter: saturate(.94);
  animation: stack-logo-breathe 3.8s ease-in-out infinite;
  transition: transform .35s var(--ease-out-expo), filter .28s ease;
}
.stack-logo:nth-child(2n){ animation-delay: .35s; }
.stack-logo:nth-child(3n){ animation-delay: .7s; }
.stack-logo:nth-child(4n){ animation-delay: 1.05s; }
@keyframes stack-logo-breathe{
  0%,100%{ opacity: .62; transform: translateY(0) scale(1); }
  50%{ opacity: .92; transform: translateY(-3px) scale(1.025); }
}
.stack-logo:hover{
  filter: saturate(1.08);
  transform: translateY(-4px) scale(1.035);
}
.stack-logo img{
  display: block;
  width: auto;
  height: clamp(34px, 3.4vw, 54px);
  max-width: clamp(132px, 14vw, 230px);
  object-fit: contain;
}
.stack-logo-openai img{
  height: clamp(30px, 3vw, 48px);
  max-width: clamp(150px, 15vw, 250px);
}
.stack-logo-webflow img,
.stack-logo-shopify img,
.stack-logo-analytics img{
  max-width: clamp(150px, 15vw, 245px);
}
.stack-logo-svg{
  display: block;
  width: clamp(34px, 3vw, 48px);
  height: clamp(34px, 3vw, 48px);
  flex: 0 0 auto;
}
.stack-logo-text{
  display: inline-flex;
  align-items: baseline;
  color: currentColor;
}
.stack-logo-icon{
  width: 48px;
  height: 48px;
  border-radius: 12px;
  color: rgba(10,26,82,0.42);
  background: rgba(10,26,82,0.12);
  font-size: 1.32rem;
}
.stack-logo-icon:hover{
  color: #fff;
  background: var(--blue);
}
.stack-logo-next{
  color: #000;
  letter-spacing: .03em;
}
.stack-logo-next span{
  margin-left: 2px;
  font-size: .46em;
  letter-spacing: 0;
}
.stack-logo-tailwind::before{
  content: none;
}
.stack-logo-script{
  color: #00ddb3;
}
.stack-logo-rive{
  color: #00aeef;
}
.stack-logo-openai{
  color: #111827;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: clamp(1rem, 1.7vw, 1.42rem);
}
.stack-logo-webflow{ color: #146ef5; }
.stack-logo-tailwind{ color: #38bdf8; }
.stack-logo-shopify{ color: #5e8e3e; }
.stack-logo-analytics{ color: #e37400; }
.stack-logo-ae{ color: #9999ff; }
.stack-logo-ai{ color: #ff9a00; }
.adobe-logo-tile{
  display: inline-grid;
  place-items: center;
  width: clamp(38px, 3vw, 48px);
  height: clamp(38px, 3vw, 48px);
  border-radius: 11px;
  background: currentColor;
  color: #07051f;
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  font-weight: 900;
  letter-spacing: -.03em;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.16);
}
.stack-logo-ai .adobe-logo-tile{
  color: #311600;
}

/* ---------- process ---------- */

.process-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.process-num{
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--blue);
  background: var(--blue-soft);
  padding: 6px 13px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.process-step h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  margin: 0 0 10px;
}
.process-step p{
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}

#process .process-rail{
  background: rgba(255,255,255,0.14);
}
#process .process-rail-fill{
  background: linear-gradient(90deg, var(--cyan), var(--blue-2), #ffffff);
  box-shadow: 0 0 24px rgba(34,225,255,0.42);
}
#process .process-step{
  padding: 26px 24px;
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.055)),
    radial-gradient(circle at 85% 12%, rgba(34,225,255,0.16), transparent 42%);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow: 0 26px 80px -52px rgba(0,0,0,0.75);
  backdrop-filter: blur(12px);
  opacity: .48;
  transition: opacity .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s var(--ease-out-expo);
}
#process .process-step.is-active{
  opacity: 1;
  border-color: rgba(34,225,255,0.46);
  box-shadow:
    0 30px 90px -50px rgba(34,225,255,0.5),
    0 0 0 1px rgba(34,225,255,0.1) inset;
  transform: translateY(-4px);
}
#process .process-num{
  color: #06133e;
  background: linear-gradient(135deg, var(--cyan), #bff8ff);
  box-shadow: 0 12px 30px -18px rgba(34,225,255,0.8);
  transition: box-shadow .35s ease, transform .35s var(--ease-out-expo);
}
#process .process-step.is-active .process-num{
  box-shadow:
    0 12px 30px -18px rgba(34,225,255,0.8),
    0 0 18px rgba(34,225,255,0.55);
  transform: translateY(-2px);
}
#process .process-step h3{
  color: #fff;
}
#process .process-step p{
  color: rgba(235,248,255,0.68);
}
#process .section-orb-process{
  top: 22%;
  background: radial-gradient(circle, rgba(34,225,255,0.28), transparent 70%);
}

/* ---------- work: auto horizontal project slider ---------- */

.work-section{
  padding-bottom: clamp(70px, 10vw, 120px);
  background:
    radial-gradient(circle at 8% 18%, rgba(34,225,255,0.16), transparent 28%),
    radial-gradient(circle at 92% 72%, rgba(11,114,231,0.16), transparent 34%),
    linear-gradient(180deg, #eef6ff 0%, #f8fbff 52%, #eef4ff 100%);
}
.work-section::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(10,26,82,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,26,82,0.045) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse 84% 62% at 50% 50%, black, transparent 82%);
  mask-image: radial-gradient(ellipse 84% 62% at 50% 50%, black, transparent 82%);
  pointer-events: none;
}
.work-section .container,
.work-horizontal{
  position: relative;
  z-index: 1;
}

.work-swipe-hint{
  display: none;
}

.work-horizontal{
  margin-top: 56px;
  overflow: hidden;
  cursor: default;
  perspective: 1200px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.work-track{
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 1.6vw, 24px);
  width: max-content;
  padding: 0 clamp(18px, 3vw, 42px);
  will-change: transform;
}
.work-track .work-card{
  width: clamp(400px, 36vw, 620px);
  flex-shrink: 0;
}
.work-track-note{
  width: min(320px, 70vw);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-right: 40px;
}

.work-card{
  background:
    linear-gradient(145deg, rgba(255,255,255,0.94), rgba(247,251,255,0.82));
  border: 1px solid rgba(10,26,82,0.08);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 70px -52px rgba(10,26,82,0.28);
  transform: translateZ(0) rotateY(0deg);
  transition: transform .55s var(--ease-out-expo), box-shadow .45s ease, border-color .3s ease, filter .45s ease;
}
.work-card:hover{
  transform: translateY(-8px) scale(1.025) rotateY(-2.5deg);
  border-color: rgba(34,225,255,0.28);
  box-shadow: 0 38px 92px -48px rgba(11,114,231,0.42);
}
.work-thumb{
  position: relative;
  height: clamp(250px, 24vw, 360px);
  overflow: hidden;
  background: #edf4ff;
}
.work-thumb::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,16,53,0) 45%, rgba(5,16,53,0.12) 100%),
    radial-gradient(circle at 16% 14%, rgba(34,225,255,0.18), transparent 34%);
  opacity: .9;
}
.work-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transform: scale(1.01);
  transition: transform .7s var(--ease-out-expo);
}
.work-card:hover .work-thumb img{
  transform: scale(1.07);
}
.work-thumb-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 15px;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 12px 26px -12px rgba(0,0,0,0.42);
  transition: transform .4s var(--ease-spring);
}
.work-card:hover .work-thumb-icon{ transform: scale(1.12) rotate(-5deg); }
.work-thumb-icon svg{ width: 23px; height: 23px; }
.work-tag{
  display: none;
  margin: 24px 26px 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}
.work-card h3{
  display: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  color: var(--navy);
  margin: 10px 26px 8px;
}
.work-card p{
  display: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  min-height: 72px;
  margin: 0 26px 26px;
}
.work-note{
  color: var(--muted-2);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0;
}
.scroll-hint-cursor{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  padding: 7px 14px;
  border-radius: 999px;
  color: #061033;
  background: linear-gradient(135deg, var(--cyan), #c7fbff);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: 0;
  transform: scale(.7);
  box-shadow: 0 14px 34px -18px rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
}

@media (max-width: 899px){
  .orb,
  .section-orb{
    display: none;
  }

  .grid-layer{
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 0.42;
  }

  .work-swipe-hint{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 18px;
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .work-swipe-hint i{
    position: relative;
    width: 46px;
    height: 2px;
    border-radius: 999px;
    background: rgba(11,114,231,0.18);
    overflow: hidden;
  }
  .work-swipe-hint i::before{
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 18px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    animation: work-swipe-cue 1.35s ease-in-out infinite;
  }
  @keyframes work-swipe-cue{
    0%{ transform: translateX(0); opacity: .35; }
    45%{ opacity: 1; }
    100%{ transform: translateX(34px); opacity: .35; }
  }
  .work-horizontal{
    overflow-x: auto;
    overflow-y: visible;
    cursor: grab;
    touch-action: pan-x pan-y;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .work-horizontal::-webkit-scrollbar{ display: none; }
  .work-track{
    width: max-content;
    transform: none !important;
  }
  .work-track .work-card{
    width: min(84vw, 390px);
    scroll-snap-align: center;
    /* Drop `transform` from the inherited transition here. It only exists to
       ease the :hover lift, which can never fire on a touch device — but CSS
       transitions outrank even inline !important in the cascade, so a live
       transition on transform silently swallowed GSAP's scroll-driven
       entrance (the card's computed transform stayed at identity while GSAP
       wrote to it every frame). That is why Work looked completely
       unanimated on mobile. Keep the non-transform transitions. */
    transition: box-shadow .45s ease, border-color .3s ease, filter .45s ease;
  }
  .work-thumb{ height: clamp(240px, 62vw, 330px); }
  .work-track-note{ align-items: flex-start; padding: 20px 0; }
}

/* ---------- faq ---------- */

.faq-section{
  background:
    radial-gradient(circle at 86% 12%, rgba(34,225,255,0.2), transparent 28%),
    radial-gradient(circle at 8% 84%, rgba(11,114,231,0.22), transparent 34%),
    linear-gradient(145deg, #061033 0%, #0a1a52 52%, #082f80 100%);
  color: #fff;
  border-top: 1px solid rgba(34,225,255,0.14);
  border-bottom: 1px solid rgba(34,225,255,0.14);
}
.faq-section::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(34,225,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,225,255,0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 82% 72% at 50% 45%, black, transparent 82%);
  mask-image: radial-gradient(ellipse 82% 72% at 50% 45%, black, transparent 82%);
  pointer-events: none;
}
.faq-section .container{
  position: relative;
  z-index: 1;
}
.faq-section .eyebrow{ color: var(--cyan); }
.faq-section .section-head h2{ color: #fff; }
.faq-section .section-head p{ color: rgba(235,248,255,0.72); }
.faq-console{
  display: grid;
  grid-template-columns: minmax(320px, .92fr) minmax(520px, 1.38fr);
  gap: clamp(18px, 2.4vw, 34px);
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
}
.faq-signal-card{
  position: sticky;
  top: 108px;
  min-height: 392px;
  padding: 30px;
  border-radius: 0;
  overflow: hidden;
  color: #fff;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  transition: transform .3s ease;
}
.faq-signal-card::after{
  content: '';
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 250px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(34,225,255,0.22);
  box-shadow: inset 0 0 40px rgba(34,225,255,0.08);
}
.faq-signal-kicker{
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.faq-signal-card h3{
  max-width: 11ch;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.65rem);
  line-height: 1.04;
}
.faq-signal-card p{
  max-width: 32ch;
  margin: 0;
  color: rgba(235,248,255,0.7);
  font-size: 14.5px;
  line-height: 1.65;
}
.signal-dot{
  position: absolute;
  right: 26px;
  top: 26px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  animation: pulseGlow 2s infinite ease-in-out;
}
@keyframes pulseGlow{
  0%,100%{ opacity: .42; transform: scale(.9); }
  50%{ opacity: 1; transform: scale(1.3); }
}
.faq-signal-lines{
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  display: grid;
  gap: 10px;
}
.faq-signal-lines span{
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), rgba(255,255,255,0.08));
  opacity: .78;
}
.faq-signal-lines span:nth-child(2){ width: 76%; }
.faq-signal-lines span:nth-child(3){ width: 48%; }
.faq-list{
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item{
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 0 24px;
  backdrop-filter: blur(12px);
  will-change: transform, opacity;
  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease,
    transform .3s var(--ease-out-expo);
}
.faq-item:hover{
  transform: translateX(6px);
  border-color: rgba(34,225,255,0.34);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.145), rgba(255,255,255,0.06));
}
.faq-item:focus-within{
  border-color: rgba(34,225,255,0.5);
  box-shadow:
    0 0 0 4px rgba(34,225,255,0.08),
    0 18px 54px -48px rgba(34,225,255,0.5);
}
.faq-item[open],
.faq-item.is-open{
  background:
    radial-gradient(circle at 90% 12%, rgba(34,225,255,0.16), transparent 40%),
    linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.065));
  border-color: rgba(34,225,255,0.48);
  box-shadow:
    0 24px 70px -52px rgba(34,225,255,0.55),
    0 0 25px rgba(34,225,255,0.12);
}
.faq-item summary,
.faq-header{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 21px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  color: #fff;
  outline: none;
}
.faq-header:focus-visible{
  color: #dffcff;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-code{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 30px;
  border-radius: 999px;
  color: #051035;
  background: linear-gradient(135deg, var(--cyan), #c7fbff);
  font-size: 12px;
  font-weight: 900;
  transition: background .3s ease, color .3s ease, box-shadow .25s ease, transform .3s ease;
}
.faq-item[open] .faq-code,
.faq-item.is-open .faq-code,
.faq-item:hover .faq-code{
  color: #fff;
  background: var(--blue);
  box-shadow: 0 0 18px rgba(34,225,255,0.38);
  transform: scale(1.07);
}
.faq-question{
  flex: 1;
}
.faq-icon{
  position: relative;
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  transition: transform .4s var(--ease-out-expo), background .3s ease, color .3s ease;
}
.faq-item[open] .faq-icon,
.faq-item.is-open .faq-icon{
  transform: rotate(45deg);
  background: rgba(34,225,255,0.14);
}
.faq-icon::before, .faq-icon::after{
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--cyan);
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease-out-expo);
}
.faq-icon::before{ width: 12px; height: 1.6px; }
.faq-icon::after{ width: 1.6px; height: 12px; }
.faq-item[open] .faq-icon::after,
.faq-item.is-open .faq-icon::after{ transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-item p,
.faq-answer{
  margin: -2px 0 22px 52px;
  max-width: 68ch;
  color: rgba(235,248,255,0.68);
  font-size: 14.5px;
  line-height: 1.65;
}
.faq-answer{
  height: 0;
  opacity: 0;
  overflow: hidden;
  margin-bottom: 0;
}
.faq-item.is-open .faq-answer{
  opacity: 1;
}
.faq-item[open] .faq-answer{
  height: auto;
  opacity: 1;
  margin-bottom: 22px;
}

/* ---------- booking ---------- */

#booking{
  background:
    radial-gradient(circle at 18% 18%, rgba(34,225,255,0.16), transparent 28%),
    radial-gradient(circle at 82% 88%, rgba(11,114,231,0.18), transparent 34%),
    linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
}
#booking::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(10,26,82,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,26,82,0.04) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 82% 70% at 50% 42%, black, transparent 82%);
  mask-image: radial-gradient(ellipse 82% 70% at 50% 42%, black, transparent 82%);
  pointer-events: none;
}
#booking .container{
  position: relative;
  z-index: 1;
}
.booking-card{
  /* max-width: 780px; */
  /* margin: 0 auto; */
  background:
    linear-gradient(145deg, rgba(255,255,255,0.94), rgba(248,252,255,0.82));
  border: 1px solid rgba(10,26,82,0.08);
  border-radius: 24px;
  /* padding: clamp(22px, 4vw, 40px); */
  box-shadow:
    0 34px 90px -56px rgba(10,26,82,0.38),
    0 0 0 1px rgba(34,225,255,0.08) inset;
  backdrop-filter: blur(12px);
}

.calendly-booking-card{
  width: min(100%, 1320px);
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(12px, 1.8vw, 20px);
  overflow: visible;
  background:
    radial-gradient(circle at 10% 12%, rgba(34,225,255,0.12), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.94), rgba(248,252,255,0.82));
  border: 1px solid rgba(10,26,82,0.08);
  border-radius: 26px;
  box-shadow:
    0 34px 90px -56px rgba(10,26,82,0.38),
    0 0 0 1px rgba(34,225,255,0.08) inset;
  backdrop-filter: blur(12px);
}

.calendly-frame-wrap{
  position: relative;
  /* width: min(100%, 980px); */
  margin-inline: auto;
  overflow: hidden;
  min-width: 0;
  background: transparent;
  border-radius: 18px;
  box-shadow: none;
}

.calendly-frame-wrap::before{
  display: none;
}

.calendly-inline-widget{
  position: relative;
  z-index: 0;
  width: 100%;
  min-width: 0 !important;
}

.calendly-preloader{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 700px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(10,26,82,0.08);
  border-radius: 8px;
  box-shadow: 0 20px 70px -56px rgba(10,26,82,0.28);
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity .45s var(--ease-out-expo), visibility 0s linear .45s;
}
.calendly-frame-wrap.is-calendly-ready .calendly-preloader{
  opacity: 0;
  visibility: hidden;
}
.calendly-preloader-left,
.calendly-preloader-right{
  padding: clamp(28px, 4vw, 54px);
}
.calendly-preloader-left{
  border-right: 1px solid rgba(10,26,82,0.1);
}
.calendly-skeleton{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(10,26,82,0.08), rgba(34,225,255,0.13), rgba(10,26,82,0.08));
  background-size: 220% 100%;
  animation: calendlySkeleton 1.35s ease-in-out infinite;
}
.calendly-skeleton-kicker{
  width: 132px;
  height: 18px;
  margin-bottom: 22px;
}
.calendly-skeleton-title{
  width: min(92%, 390px);
  height: 42px;
  margin-bottom: 12px;
}
.calendly-skeleton-title-short{
  width: min(72%, 300px);
  margin-bottom: 62px;
}
.calendly-skeleton-line{
  width: min(78%, 330px);
  height: 22px;
  margin-bottom: 18px;
}
.calendly-skeleton-line-short{
  width: min(58%, 245px);
}
.calendly-skeleton-heading{
  width: min(72%, 320px);
  height: 34px;
  margin: 6px auto 52px;
}
.calendly-skeleton-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
}
.calendly-skeleton-grid span{
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(11,114,231,0.08);
  animation: calendlyCellPulse 1.8s ease-in-out infinite;
}
.calendly-skeleton-grid span:nth-child(3n){
  background: rgba(34,225,255,0.12);
}
.calendly-skeleton-grid span:nth-child(5n){
  animation-delay: .18s;
}
@keyframes calendlySkeleton{
  0%{ background-position: 120% 0; }
  100%{ background-position: -120% 0; }
}
@keyframes calendlyCellPulse{
  0%, 100%{ opacity: .46; transform: scale(.92); }
  50%{ opacity: 1; transform: scale(1); }
}

.booking-step[data-step="datetime"]{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
}
.booking-step[hidden]{
  display: none !important;
}

.calendar-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cal-month{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
}
.cal-nav{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.cal-nav svg{ width: 16px; height: 16px; }
.cal-nav:hover{ background: var(--blue-soft); border-color: transparent; color: var(--blue); }
.cal-nav:disabled{ opacity: .3; cursor: default; background: none; color: var(--navy); }

.calendar-weekdays{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}
.calendar-weekdays span{
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted-2);
  text-transform: uppercase;
}
.calendar-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-day{
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s var(--ease-spring);
}
.cal-day:hover:not(:disabled){ background: var(--blue-soft); color: var(--blue); }
.cal-day:disabled{ color: var(--muted-2); opacity: .4; cursor: default; }
.cal-day.is-other-month{ opacity: .25; }
.cal-day.is-today{ box-shadow: inset 0 0 0 1.5px var(--blue); }
.cal-day.is-selected{
  background: var(--blue);
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 8px 18px -8px rgba(11,114,231,0.6);
}

.slots-label{
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 16px;
}
.slots-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  opacity: .55;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.slots-grid.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.slot-btn{
  padding: 11px 10px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--paper);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  text-align: center;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s var(--ease-spring);
}
.slot-btn:hover{ border-color: var(--blue); color: var(--blue); }
.slot-btn.is-selected{
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  transform: scale(1.03);
}
.slots-empty{
  color: var(--muted-2);
  font-size: 13px;
  grid-column: 1 / -1;
}

.booking-back{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: 22px;
  transition: color .2s ease;
}
.booking-back svg{ width: 15px; height: 15px; }
.booking-back:hover{ color: var(--blue); }

.booking-summary{
  font-size: 14.5px;
  color: var(--navy);
  background: var(--blue-soft);
  border-radius: 12px;
  padding: 13px 16px;
  margin: 0 0 22px;
}
.booking-summary strong{ font-weight: 700; }

.field-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}
.field em{ color: var(--muted-2); font-style: normal; }
.field input,
.field textarea{
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--navy);
  background: var(--paper);
  outline: none;
  resize: vertical;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field input:focus,
.field textarea:focus{
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(11,114,231,0.12);
  background: #fff;
}
.field input::placeholder,
.field textarea::placeholder{ color: var(--muted-2); }

.booking-form .btn{ width: 100%; margin-top: 4px; }

.booking-success{
  text-align: center;
  padding: 30px 10px;
}
.success-check{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  margin-bottom: 22px;
  animation: pop-in .5s var(--ease-spring);
}
.success-check svg{
  width: 26px; height: 26px;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: draw-check .5s var(--ease-out-expo) .2s forwards;
}
@keyframes pop-in{
  from{ transform: scale(0.7); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}
@keyframes draw-check{ to{ stroke-dashoffset: 0; } }

.booking-step h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  color: var(--navy);
  margin: 0 0 10px;
}
.booking-step > p{
  color: var(--muted);
  font-size: 14.5px;
  margin: 0 0 22px;
}

/* --- FOOTER FULL-BLEED SOMBRE --- */
.site-footer-dark {
  width: 100%;
  background: #030712; /* Noir très profond */
  color: #f8fafc;
  padding: 80px 0 30px 0;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  overflow: hidden;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- BANNIÈRE CTA INTERNE --- */
.footer-cta-box {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 80px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 50px, 0) scale(0.96);
  will-change: transform, opacity;
}

/* Halos lumineux en fond */
.cta-glow {
  position: absolute;
  top: -50%;
  left: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.35) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

.cta-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #60a5fa;
  margin-bottom: 12px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background-color: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 10px #22c55e;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.cta-content h2 {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.5px;
}

.cta-content h2 span {
  color: #94a3b8;
}

.btn-footer-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #2563eb;
  color: #ffffff;
  padding: 16px 32px;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.4);
  white-space: nowrap;
}

.btn-footer-primary:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -5px rgba(37, 99, 235, 0.6);
}

/* --- GRILLE 4 COLONNES --- */
.footer-main-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-col {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 30px, 0);
  will-change: transform, opacity;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 16px;
}

.footer-tagline {
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
  margin: 0 0 20px 0;
}

.location-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.col-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #64748b;
  margin-bottom: 20px;
}

.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu li {
  margin-bottom: 12px;
}

.footer-menu a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.footer-menu a:hover {
  color: #38bdf8;
}

.direct-email {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.direct-email:hover {
  color: #3b82f6;
}

.email-sub {
  font-size: 13px;
  color: #64748b;
  margin-top: 8px;
}



/* --- BOTTOM BAR --- */
.footer-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  font-size: 13px;
  color: #64748b;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 20px, 0);
  will-change: transform, opacity;
}

.back-top-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f8fafc;
  padding: 8px 16px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.back-top-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* ---------- privacy policy page ---------- */

.privacy-page{
  background:
    radial-gradient(circle at 12% 10%, rgba(54, 215, 255, .18), transparent 28%),
    radial-gradient(circle at 88% 24%, rgba(11, 114, 231, .14), transparent 34%),
    #f7fbff;
}

.privacy-main{
  position: relative;
  z-index: 2;
}

.privacy-container{
  max-width: 1180px;
}

.privacy-hero{
  /*padding: clamp(124px, 12vw, 160px) 0 clamp(42px, 6vw, 76px);*/
  padding: clamp(70px, 7vw, 90px) 0 clamp(5px, 2vw, 9px);
}

.privacy-hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, .7fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.privacy-hero-copy,
.privacy-hero-panel,
.privacy-meta-card,
.privacy-sidebar,
.privacy-card{
  will-change: transform, opacity;
}

.privacy-back-link{
  display: inline-flex;
  align-items: center;
  color: var(--blue);
  font-weight: 800;
  font-size: .86rem;
  text-decoration: none;
  margin-bottom: 18px;
}

.privacy-back-link::before{
  content: "";
  width: 18px;
  height: 2px;
  margin-right: 10px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: left center;
  transition: transform .35s var(--ease-out-expo);
}

.privacy-back-link:hover::before{
  transform: scaleX(1.45);
}

.privacy-eyebrow{
  margin: 0 0 16px;
}

.privacy-hero h1{
  max-width: 760px;
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(3.15rem, 5.9vw, 6.35rem);
  line-height: .94;
  letter-spacing: 0;
}

.privacy-lead{
  max-width: 680px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  line-height: 1.72;
}

.privacy-hero-panel{
  position: relative;
  min-height: 430px;
  padding: clamp(30px, 4vw, 46px);
  border: 1px solid rgba(10, 26, 82, .12);
  border-radius: 32px;
  background:
    radial-gradient(circle at 86% 18%, rgba(54, 215, 255, .3), transparent 24%),
    linear-gradient(145deg, rgba(10, 26, 82, .96), rgba(12, 55, 133, .9));
  color: #fff;
  overflow: hidden;
  box-shadow: 0 34px 90px rgba(10, 26, 82, .18);
}

.privacy-hero-panel::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(54, 215, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 215, 255, .08) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: .62;
}

.privacy-hero-panel::after{
  content: "";
  position: absolute;
  right: -92px;
  bottom: -92px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(54, 215, 255, .34);
  border-radius: 50%;
}

.privacy-panel-kicker,
.privacy-hero-panel h2,
.privacy-hero-panel p,
.privacy-panel-lines{
  position: relative;
  z-index: 1;
}

.privacy-panel-kicker{
  display: inline-flex;
  color: #38dfff;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.privacy-hero-panel h2{
  max-width: 8ch;
  margin: 24px 0 18px;
  font-family: var(--font-display);
  font-size: clamp(2.45rem, 4vw, 4.1rem);
  line-height: .96;
}

.privacy-hero-panel p{
  max-width: 320px;
  color: rgba(255,255,255,.72);
  font-size: 1.04rem;
  line-height: 1.7;
}

.privacy-panel-lines{
  position: absolute;
  left: clamp(30px, 4vw, 46px);
  right: clamp(30px, 4vw, 46px);
  bottom: clamp(30px, 4vw, 42px);
  display: grid;
  gap: 10px;
}

.privacy-panel-lines span{
  display: block;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #38dfff, rgba(56, 223, 255, .12));
}

.privacy-panel-lines span:nth-child(2){ width: 78%; }
.privacy-panel-lines span:nth-child(3){ width: 54%; }

.privacy-meta-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(28px, 4vw, 46px);
}

.privacy-meta-card{
  border: 1px solid rgba(10, 26, 82, .1);
  border-radius: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 22px 70px rgba(10, 26, 82, .07);
  backdrop-filter: blur(14px);
}

.privacy-meta-grid span{
  display: block;
  color: rgba(10, 26, 82, .52);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.privacy-meta-grid strong{
  display: block;
  margin-top: 8px;
  color: var(--navy);
  font-size: 1rem;
}

.privacy-meta-grid a{
  color: inherit;
  text-decoration-color: rgba(11, 114, 231, .35);
  text-underline-offset: 4px;
}

.privacy-content-section{
  padding: clamp(28px, 5vw, 60px) 0 clamp(90px, 12vw, 150px);
}

.privacy-layout{
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.privacy-sidebar{
  position: sticky;
  top: 110px;
}

.privacy-sidebar nav{
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(10, 26, 82, .1);
  border-radius: 22px;
  background: rgba(255, 255, 255, .58);
  backdrop-filter: blur(14px);
}

.privacy-sidebar a{
  color: rgba(10, 26, 82, .68);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 800;
  padding: 10px 12px;
  border-radius: 14px;
  transition: color .25s ease, background .25s ease, transform .25s var(--ease-out-expo);
}

.privacy-sidebar a:hover,
.privacy-sidebar a:focus-visible{
  color: var(--navy);
  background: rgba(11, 114, 231, .08);
  transform: translateX(3px);
}

.privacy-card-list{
  display: grid;
  gap: 18px;
}

.privacy-card{
  position: relative;
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid rgba(10, 26, 82, .1);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(238,248,255,.78)),
    rgba(255,255,255,.72);
  box-shadow: 0 30px 90px rgba(10, 26, 82, .08);
  overflow: hidden;
}

.privacy-card:nth-child(1){ --privacy-i: 1; }
.privacy-card:nth-child(2){ --privacy-i: 2; }
.privacy-card:nth-child(3){ --privacy-i: 3; }
.privacy-card:nth-child(4){ --privacy-i: 4; }
.privacy-card:nth-child(5){ --privacy-i: 5; }
.privacy-card:nth-child(6){ --privacy-i: 6; }
.privacy-card:nth-child(7){ --privacy-i: 7; }
.privacy-card:nth-child(8){ --privacy-i: 8; }

@keyframes privacy-card-in{
  from{
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(.985);
  }
  to{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.privacy-card::after{
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(54, 215, 255, .28);
  border-radius: 50%;
  pointer-events: none;
}

.privacy-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 32px;
  border-radius: 999px;
  color: var(--navy);
  background: rgba(54, 215, 255, .38);
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 900;
}

.privacy-card h2{
  margin: 18px 0 12px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.05;
}

.privacy-card p,
.privacy-card li{
  color: rgba(10, 26, 82, .68);
  font-size: 1rem;
  line-height: 1.75;
}

.privacy-card p{
  margin: 0 0 14px;
}

.privacy-card p:last-child{
  margin-bottom: 0;
}

.privacy-card ul{
  margin: 14px 0 0;
  padding-left: 1.25rem;
}

.privacy-card li{
  margin: 8px 0;
}

.privacy-contact-card{
  background:
    radial-gradient(circle at 88% 22%, rgba(54, 215, 255, .28), transparent 32%),
    linear-gradient(135deg, rgba(10, 26, 82, .96), rgba(11, 55, 140, .9));
}

.privacy-contact-card h2,
.privacy-contact-card .privacy-number{
  color: #fff;
}

.privacy-contact-card p{
  color: rgba(255, 255, 255, .72);
}

.privacy-contact-link{
  display: inline-flex;
  margin-top: 8px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: 800;
  text-decoration-color: rgba(54, 215, 255, .55);
  text-underline-offset: 7px;
}

body.aw-access-stop-motion .privacy-hero-copy,
body.aw-access-stop-motion .privacy-hero-panel,
body.aw-access-stop-motion .privacy-meta-card,
body.aw-access-stop-motion .privacy-sidebar,
body.aw-access-stop-motion .privacy-card,
body.aw-access-seizure-profile .privacy-hero-copy,
body.aw-access-seizure-profile .privacy-hero-panel,
body.aw-access-seizure-profile .privacy-meta-card,
body.aw-access-seizure-profile .privacy-sidebar,
body.aw-access-seizure-profile .privacy-card,
body.aw-access-cognitive-profile .privacy-hero-copy,
body.aw-access-cognitive-profile .privacy-hero-panel,
body.aw-access-cognitive-profile .privacy-meta-card,
body.aw-access-cognitive-profile .privacy-sidebar,
body.aw-access-cognitive-profile .privacy-card,
body.aw-access-adhd-profile .privacy-hero-copy,
body.aw-access-adhd-profile .privacy-hero-panel,
body.aw-access-adhd-profile .privacy-meta-card,
body.aw-access-adhd-profile .privacy-sidebar,
body.aw-access-adhd-profile .privacy-card{
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

@media (prefers-reduced-motion: reduce){
  .privacy-card{
    animation: none;
  }
}

@media (max-width: 860px){
  .privacy-hero{
    min-height: auto;
    padding-top: 118px;
  }
  .privacy-hero-grid{
    grid-template-columns: 1fr;
  }
  .privacy-hero-panel{
    min-height: 340px;
  }
  .privacy-meta-grid,
  .privacy-layout{
    grid-template-columns: 1fr;
  }
  .privacy-sidebar{
    position: relative;
    top: auto;
    order: -1;
  }
  .privacy-sidebar nav{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px){
  .privacy-hero h1{
    font-size: clamp(2.65rem, 13vw, 4.05rem);
  }
  .privacy-lead{
    font-size: 1rem;
  }
  .privacy-hero-panel h2{
    font-size: clamp(2.15rem, 10vw, 3.1rem);
  }
  .privacy-sidebar nav{
    grid-template-columns: 1fr;
  }
  .privacy-card{
    border-radius: 22px;
  }
}
/* --- WATERMARK CORRIGÉ & VISIBLE --- */
.footer-watermark {
  padding: 60px 0 30px 0;
  text-align: center;
  user-select: none;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.footer-watermark span {
  display: block;
  font-size: 11vw;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 0.85;
  text-transform: uppercase;
  
  /* Utilisation d'un texte semi-transparent avec contour stroke bien lisible */
  color: rgba(255, 255, 255, 0.12);
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.18);
  
  transition: color 0.4s ease, transform 0.4s ease;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 50px, 0);
  will-change: transform, opacity;
}

.footer-watermark:hover span {
  color: rgba(37, 99, 235, 0.35); /* Effet bleu subtil au survol */
  -webkit-text-stroke: 1px rgba(37, 99, 235, 0.5);
  transform: translateY(-4px);
}
/* Animation fluide du bouton d'action CTA */
.btn-footer-primary svg {
  transition: transform 0.3s ease;
}

.btn-footer-primary:hover svg {
  transform: translateX(5px);
}
/* Responsive */
@media (max-width: 992px) {
  .footer-cta-box {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-main-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 576px) {
  .footer-main-grid {
    grid-template-columns: 1fr;
  }

  /* 48px padding + a nowrap button sized for the desktop-width card was
     never re-checked at phone width: the button (~267px, "Schedule a
     strategy call" + icon, white-space:nowrap) ran past the card's own
     padded content edge and crowded/overflowed against the outer border
     instead of sitting inside it. Smaller padding + a full-width button
     that's allowed to wrap keeps it inside the card at any width. */
  .footer-cta-box {
    padding: 28px 20px;
    gap: 22px;
  }
  .cta-content h2 {
    font-size: 1.6rem;
  }
  .btn-footer-primary {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}
/* ---------- responsive ---------- */

@media (max-width: 900px){
  .services-board{
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }
  .service-card,
  .service-hero-card{
    grid-column: span 1;
    grid-row: auto;
    min-height: 230px;
  }
  .service-hero-card{
    grid-column: 1 / -1;
    min-height: 430px;
  }
  .service-hero-card h3{ max-width: 13ch; }

  .process-grid{ grid-template-columns: repeat(2, 1fr); }
  .booking-step[data-step="datetime"]{ grid-template-columns: 1fr; gap: 30px; }
  .calendly-booking-card{
    /* max-width: 760px; */
  }
  .faq-section{
    overflow: hidden;
  }
  .faq-section .container{
    width: min(100% - 32px, var(--container));
  }
  .faq-section .section-head{
    margin-bottom: clamp(26px, 8vw, 38px);
  }
  .faq-console{
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    max-width: 720px;
    width: 100%;
  }
  .faq-signal-card{
    position: relative;
    top: auto;
    min-height: clamp(360px, 54vw, 440px);
    width: 100%;
    padding: clamp(20px, 4vw, 28px) 0 0;
    border-radius: 0;
    background: transparent;
    border: 0;
  }
  .faq-signal-card::after{
    display: block;
    right: -54px;
    bottom: 16px;
    width: clamp(210px, 38vw, 280px);
  }
  .faq-signal-lines{
    display: grid;
    left: 0;
    right: 0;
    bottom: 30px;
  }
  .faq-signal-card h3{
    max-width: 11ch;
    font-size: clamp(2.45rem, 7.2vw, 3.6rem);
  }
  .faq-signal-card p{
    max-width: 36ch;
    font-size: clamp(1rem, 2.45vw, 1.18rem);
  }
  .signal-dot{
    display: block;
    right: 8px;
    top: 8px;
  }
  .faq-list{
    width: 100%;
    min-width: 0;
    gap: 12px;
  }

  .stack-lab{
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .logo-slider-card::after{ display: none; }
  .logo-slider-meta{
    padding-left: 0;
    text-align: center;
    justify-items: center;
  }
  .logo-slider-meta strong{ max-width: none; }
  .footer-cta-box{
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-main-grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 640px){
  .services-board{ grid-template-columns: 1fr; gap: 12px; }
  .service-card,
  .service-hero-card{
    grid-column: 1 / -1;
    min-height: 0;
    border-radius: 20px;
    padding: 22px;
  }
  .service-hero-card{
    min-height: 440px;
    padding: 28px 22px;
  }
  .service-hero-card h3{ font-size: 2.25rem; }
  .service-flow{ align-items: flex-start; gap: 8px; }
  .service-flow i{ display: none; }
  .service-card-cta{ width: 100%; }

  .stack-lab{
    border-radius: 24px;
    padding: 20px 0;
  }
  .logo-slider-window{
    padding: 16px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  }
  .logo-slider-track{
    gap: 34px;
  }
  .faq-section{
    padding-block: clamp(78px, 18vw, 104px);
  }
  .faq-section .container{
    width: min(100% - 24px, var(--container));
  }
  .faq-section .section-head h2{
    font-size: clamp(1.85rem, 8.5vw, 2.55rem);
    line-height: 1.04;
  }
  .faq-section .section-head p{
    max-width: 31ch;
    margin-inline: auto;
    font-size: 15px;
  }
  .faq-signal-card{
    border-radius: 0;
    min-height: clamp(390px, 92vw, 470px);
    padding-top: 26px;
  }
  .faq-signal-card h3{
    margin-bottom: 18px;
    font-size: clamp(2.35rem, 10.2vw, 3.15rem);
    max-width: 11ch;
  }
  .faq-signal-card p{
    max-width: 34ch;
    font-size: clamp(.94rem, 3.25vw, 1.05rem);
    line-height: 1.58;
  }
  .faq-item{
    width: 100%;
    min-width: 0;
    padding: 0 14px;
    border-radius: 16px;
  }
  .faq-item summary{
    align-items: flex-start;
    gap: 10px;
    padding: 16px 0;
    font-size: 14.5px;
  }
  .faq-code{
    width: 34px;
    height: 28px;
    font-size: 11px;
  }
  .faq-question{
    min-width: 0;
    line-height: 1.28;
  }
  .faq-icon{
    width: 28px;
    height: 28px;
  }
  .faq-item p,
  .faq-answer{
    margin-left: 0;
    max-width: none;
    font-size: 14px;
    line-height: 1.58;
  }
  .faq-item[open] .faq-answer{
    margin-bottom: 18px;
  }

  .process-grid{ grid-template-columns: 1fr; }
  .field-row{ grid-template-columns: 1fr; gap: 0; }
  .calendly-booking-card{
    width: 100%;
    padding: 8px;
    border-radius: 22px;
  }
  .calendly-frame-wrap{
    border-radius: 16px;
  }
  .calendly-inline-widget{
    /* height: 760px !important; */
  }
  .calendly-preloader{
    grid-template-columns: 1fr;
    min-height: 760px;
  }
  .calendly-preloader-left{
    border-right: 0;
    border-bottom: 1px solid rgba(10,26,82,0.1);
    padding-bottom: 24px;
  }
  .calendly-preloader-right{
    padding-top: 28px;
  }
  .calendly-skeleton-title{
    height: 34px;
  }
  .calendly-skeleton-title-short{
    margin-bottom: 28px;
  }
  .calendly-skeleton-heading{
    margin-bottom: 28px;
  }
  .footer-bottom-bar{ flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-cta-box{
    border-radius: 22px;
  }
  .footer-cta-box .btn-footer-primary{
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 560px){
  .hero{ padding-top: 120px !important; padding-bottom: 20px;
   }
   section {
      padding-top: 10px !important;
  }
  div#stack{
      padding-top: 15px !important;
  }
}

@media (max-width: 420px){
  .faq-section .container{
    width: min(100% - 20px, var(--container));
  }
  .faq-console{
    gap: 14px;
  }
.faq-signal-card {
    min-height: clamp(311px, 78vw, 416px);
    padding-top: 28px;
}
  .faq-signal-card h3{
    font-size: clamp(2.15rem, 10.8vw, 2.8rem);
  }
  .faq-item{
    padding: 0 12px;
  }
  .faq-item summary,
  .faq-header{
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 9px;
  }
  .faq-code{
    width: 31px;
    height: 26px;
  }
  .faq-icon{
    width: 26px;
    height: 26px;
  }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .headline .word span{ transform: none; opacity: 1; filter: none; }
}

/* ---------- work showreel (custom-controlled video) ---------- */

/* Spacing lives as PADDING on the wrapper, not margin on the figure.
   .container has no vertical padding, so a margin-top on .work-reel collapses
   straight through it and merges with the section-head's 52px margin-bottom —
   adjacent collapsing margins take the MAX, not the sum, so a 51px margin
   simply vanished behind the existing 52px and the gap never changed. */
.work-reel-wrap{
  padding-top: clamp(30px, 4.5vw, 64px);
}
.work-reel{
  position: relative;
  z-index: 2;
  margin: 0 0 clamp(28px, 4vw, 48px);
}
.work-reel-frame{
  position: relative;
  border-radius: clamp(18px, 2vw, 26px);
  overflow: hidden;
  background: #050b24;
  border: 1px solid rgba(10,26,82,0.1);
  box-shadow: 0 40px 90px -50px rgba(10,26,82,0.55);
  aspect-ratio: 1600 / 858;
}
.work-reel-video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* GSAP animates this element's ancestors; keep the video itself off the
     transition path so scroll-driven transforms are never swallowed. */
  transition: none;
}

/* big centred play affordance over the poster, fades out once playing */
.work-reel-overlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: none;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(160deg, rgba(5,11,36,0.42), rgba(10,26,82,0.28));
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.work-reel.is-playing .work-reel-overlay{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.work-reel-play{
  position: relative;
  display: block;
  width: clamp(58px, 7vw, 82px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand-gradient);
  box-shadow: 0 18px 46px -12px rgba(11,114,231,0.7);
  transition: transform .35s var(--ease-spring);
}
.work-reel-overlay:hover .work-reel-play{ transform: scale(1.08); }
.work-reel-play::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}

/* control bar */
.work-reel-controls{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
  padding: clamp(12px, 1.6vw, 18px) clamp(14px, 2vw, 22px);
  background: linear-gradient(to top, rgba(5,11,36,0.88), rgba(5,11,36,0));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.work-reel:hover .work-reel-controls,
.work-reel.is-playing .work-reel-controls,
.work-reel.is-controls-visible .work-reel-controls,
.work-reel-controls:focus-within{
  opacity: 1;
  transform: translateY(0);
}
.work-reel-btn{
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s var(--ease-spring);
}
.work-reel-btn:hover{
  background: rgba(34,225,255,0.22);
  border-color: rgba(34,225,255,0.45);
  transform: scale(1.08);
}
.work-reel-btn:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 3px; }

.work-reel-icon-play{
  width: 0; height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
}
.work-reel.is-playing .work-reel-icon-play{
  width: 10px;
  height: 12px;
  margin-left: 0;
  border: none;
  background: #fff;
  /* two bars via a clip-path notch = pause glyph, no extra markup */
  clip-path: polygon(0 0, 36% 0, 36% 100%, 0 100%, 0 0, 64% 0, 100% 0, 100% 100%, 64% 100%, 64% 0);
}
.work-reel-icon-fs{
  width: 13px;
  height: 13px;
  border: 2px solid #fff;
  border-radius: 2px;
  clip-path: polygon(0 0, 42% 0, 42% 12%, 12% 12%, 12% 42%, 0 42%, 0 0,
                     58% 0, 100% 0, 100% 42%, 88% 42%, 88% 12%, 58% 12%, 58% 0,
                     100% 58%, 100% 100%, 58% 100%, 58% 88%, 88% 88%, 88% 58%, 100% 58%,
                     0 58%, 12% 58%, 12% 88%, 42% 88%, 42% 100%, 0 100%, 0 58%);
}

.work-reel-time{
  flex-shrink: 0;
  min-width: 38px;
  color: rgba(255,255,255,0.88);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.work-reel-duration{ text-align: right; }

.work-reel-quality-wrap{
  position: relative;
  flex-shrink: 0;
}
.work-reel-quality{
  min-width: 72px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.92);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .25s ease, border-color .25s ease, transform .25s var(--ease-spring);
}
.work-reel-quality:hover,
.work-reel-quality[aria-expanded="true"]{
  background: rgba(34,225,255,0.2);
  border-color: rgba(34,225,255,0.45);
  transform: translateY(-1px);
}
.work-reel-quality:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 3px; }
.work-reel-quality-menu{
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 5;
  display: grid;
  min-width: 118px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  background: rgba(5,11,36,0.88);
  box-shadow: 0 18px 42px -24px rgba(0,0,0,0.75);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 8px, 0) scale(0.98);
  transform-origin: bottom right;
  transition:
    opacity .22s ease,
    visibility 0s linear .22s,
    transform .22s var(--ease-out-expo);
}
.work-reel-quality-wrap.is-open .work-reel-quality-menu{
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: 0s;
}
.work-reel-quality-menu button{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 9px 10px;
  background: transparent;
  color: rgba(255,255,255,0.8);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.work-reel-quality-menu button:hover,
.work-reel-quality-menu button[aria-checked="true"]{
  color: #fff;
  background: rgba(34,225,255,0.14);
}
.work-reel-quality-menu button[aria-checked="true"]::after{
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(34,225,255,0.75);
}

.work-reel-scrub{
  position: relative;
  flex: 1;
  height: 22px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.work-reel-scrub::before{
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
}
.work-reel-buffered,
.work-reel-progress{
  position: absolute;
  left: 0;
  height: 4px;
  border-radius: 999px;
  transform-origin: left center;
  transform: scaleX(0);
  width: 100%;
  pointer-events: none;
}
.work-reel-buffered{ background: rgba(255,255,255,0.3); }
.work-reel-progress{ background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.work-reel-knob{
  position: absolute;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(34,225,255,0.28);
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.work-reel-scrub:hover .work-reel-knob,
.work-reel-scrub:focus-visible .work-reel-knob,
.work-reel.is-scrubbing .work-reel-knob{ opacity: 1; }
.work-reel-scrub:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 999px; }

@media (max-width: 640px){
  .work-reel-controls{ gap: 9px; padding: 10px 12px; }
  .work-reel-btn{ width: 32px; height: 32px; }
  .work-reel-time{ min-width: 32px; font-size: 11.5px; }
  .work-reel-duration{ display: none; }
  .work-reel-quality{
    min-width: 58px;
    height: 32px;
    padding: 0 9px;
    font-size: 10.5px;
  }
  .work-reel-quality-menu{
    right: -36px;
  }
}