/* ============================================================
   TOKENS
   ============================================================ */
:root {
   --bg: #08080c;
   --surface: #0e0e16;
   --border: #1e293b;
   --muted: #94a3b8;
   --accent: #8b5cf6;
   --cyan: #38bdf8;
   --brand: #28b25a;
   --white: #ffffff;
   --ink: #1a1a24;
   --cream: #f4f2ea;
   --display: 'Outfit', system-ui, sans-serif;
   --body: 'Geist', system-ui, sans-serif;
   --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
   --pad: 80px;
   --container: 1280px;
   --ease-out: cubic-bezier(.22, 1, .36, 1);
   --ease-io: cubic-bezier(.65, 0, .35, 1);
}

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

html {
   -webkit-text-size-adjust: 100%
}

html.is-locked {
   overflow: hidden
}

body {
   margin: 0;
   background: var(--bg);
   color: var(--white);
   font-family: var(--body);
   font-size: 16px;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-x: hidden
}

img {
   display: block;
   max-width: 100%
}

a {
   color: inherit;
   text-decoration: none
}

button {
   font: inherit;
   color: inherit;
   background: none;
   border: 0;
   padding: 0;
   cursor: pointer
}

ul {
   list-style: none;
   margin: 0;
   padding: 0
}

h1,
h2,
h3,
h4,
p {
   margin: 0
}

[hidden] {
   display: none !important
}

:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 4px;
   border-radius: 4px
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0
}

/* ============================================================
   PRIMITIVES
   ============================================================ */
.container {
   width: 100%;
   max-width: var(--container);
   margin: 0 auto
}

.section {
   padding: 120px var(--pad);
   position: relative
}

.mono {
   font-family: var(--mono)
}

.tag {
   display: inline-flex;
   align-items: center;
   padding: 4px 10px;
   border: 1px solid var(--border);
   border-radius: 100px;
   font-family: var(--mono);
   font-weight: 500;
   font-size: 10px;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--muted);
   line-height: normal;
   white-space: nowrap
}

.tag--accent {
   border-color: rgba(139, 92, 246, .25);
   color: var(--accent)
}

.tag--cyan {
   border-color: rgba(56, 189, 248, .25);
   color: var(--accent)
}

.tag--soft {
   border-color: rgba(148, 163, 184, .25)
}

.tag--wide {
   padding: 4px 12px
}

.section-header {
   display: flex;
   flex-direction: column;
   gap: 12px;
   width: 100%
}

.eyebrow {
   display: flex;
   align-items: center;
   gap: 8px;
   font-family: var(--mono);
   font-weight: 600;
   font-size: 12px;
   line-height: normal;
   white-space: nowrap
}

.eyebrow__num {
   color: var(--accent)
}

.eyebrow__line {
   width: 16px;
   height: 1px;
   background: var(--accent);
   transform-origin: left;
}

.eyebrow__label {
   color: var(--muted);
   text-transform: uppercase
}

.section-title {
   font-family: var(--display);
   font-weight: 700;
   font-size: clamp(26px, 2.5vw, 36px);
   line-height: 1.2;
   color: var(--white)
}

/* Buttons */
.btn {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 12px 20px;
   border-radius: 100px;
   font-family: var(--body);
   font-weight: 600;
   font-size: 14px;
   line-height: normal;
   white-space: nowrap;
   overflow: hidden;
   isolation: isolate;
   transition: background-color .4s var(--ease-out), color .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out), transform .2s var(--ease-out);
   will-change: transform
}

.btn__label {
   position: relative;
   display: inline-block;
   transition: transform .45s var(--ease-out)
}

.btn__icon {
   position: relative;
   display: inline-flex;
   width: 14px;
   height: 14px;
   flex: 0 0 14px;
   transition: transform .45s var(--ease-out)
}

.btn__icon svg {
   width: 100%;
   height: 100%;
   display: block
}

.btn::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   background: rgba(255, 255, 255, .12);
   transform: translateY(101%);
   transition: transform .45s var(--ease-out);
   z-index: -1
}

.btn--primary {
   background: var(--brand);
   color: var(--white);
   box-shadow: 0 0 0 0 rgba(40, 178, 90, 0)
}

.btn--primary:hover {
   box-shadow: 0 10px 30px -8px rgba(40, 178, 90, .55)
}

/* Header (nav + hero): single dominant accent */
.nav .btn--primary,
.mobile-menu .btn--primary,
.hero .btn--primary {
   background: var(--accent);
   box-shadow: 0 0 0 0 rgba(139, 92, 246, 0)
}

.nav .btn--primary:hover,
.mobile-menu .btn--primary:hover,
.hero .btn--primary:hover {
   box-shadow: 0 10px 30px -8px rgba(139, 92, 246, .55)
}

.btn--white {
   background: var(--white);
   color: #0f172a
}

.btn--white::before {
   background: rgba(15, 23, 42, .06)
}

.btn--white.btn--ink {
   color: var(--bg)
}

.btn--ghost {
   background: transparent;
   border: 1px solid var(--border);
   color: var(--white)
}

.btn--ghost::before {
   background: rgba(255, 255, 255, .05)
}

.btn--ghost:hover {
   border-color: rgba(148, 163, 184, .5)
}

.btn:hover::before {
   transform: translateY(0)
}

.btn:hover .btn__label {
   transform: translateX(2px)
}

.btn:hover .btn__icon--ne {
   transform: translate(2px, -2px)
}

.btn:hover .btn__icon--down {
   transform: translateY(3px)
}

.btn:hover .btn__icon--right {
   transform: translateX(3px)
}

.btn:active {
   transform: scale(.97)
}

.btn--lg {
   padding: 14px 28px
}

.btn--pad24 {
   padding: 12px 24px
}

/* Split-line text reveal */
[data-split] {
   white-space: normal
}

.line {
   display: block;
   overflow: hidden;
   padding-bottom: .12em;
   margin-bottom: -.12em
}

.line-inner {
   display: block;
   will-change: transform
}

.accent {
   color: var(--accent)
}

.cyan {
   color: var(--accent)
}

/* Reveal helpers (initial states set by JS, this is a fallback) */
.media-reveal {
   position: relative;
   overflow: hidden
}

.media-reveal img {
   will-change: transform
}

/* ============================================================
   LOADER
   ============================================================ */
.loader {
   position: fixed;
   inset: 0;
   z-index: 1000;
   background: var(--bg);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 28px
}

.loader__brand {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 22px
}

.loader__icon {
   width: 64px;
   height: auto
}

.loader__word {
   overflow: hidden;
   padding: 2px 0
}

.loader__word span {
   display: block
}

.loader__word img {
   width: 150px;
   height: auto;
   display: block
}

.loader__bar {
   width: 140px;
   height: 1px;
   background: rgba(30, 41, 59, .9);
   position: relative;
   overflow: hidden
}

.loader__fill {
   position: absolute;
   inset: 0;
   background: var(--brand);
   transform-origin: left;
   transform: scaleX(0)
}

.loader__pct {
   font-family: var(--mono);
   font-size: 11px;
   letter-spacing: 1px;
   color: var(--muted)
}

.loader__glow {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 640px;
   height: 420px;
   transform: translate(-50%, -50%);
   background: radial-gradient(closest-side, rgba(40, 178, 90, .14), rgba(8, 8, 12, 0));
   pointer-events: none
}

.loader.is-done {
   display: none
}

html.loader-seen .loader {
   display: none
}

html.loader-seen .hero,
html.loader-seen .nav__inner {
   visibility: hidden
}

/* ============================================================
   CURSOR
   ============================================================ */
.cursor {
   position: fixed;
   left: 0;
   top: 0;
   z-index: 999;
   pointer-events: none;
   display: none
}

.cursor__dot {
   position: absolute;
   left: 0;
   top: 0;
   width: 6px;
   height: 6px;
   margin: -3px 0 0 -3px;
   border-radius: 50%;
   background: var(--white);
   mix-blend-mode: difference
}

.cursor__ring {
   position: absolute;
   left: 0;
   top: 0;
   width: 36px;
   height: 36px;
   margin: -18px 0 0 -18px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, .55);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), background-color .35s var(--ease-out), border-color .35s var(--ease-out)
}

.cursor__label {
   font-family: var(--mono);
   font-size: 10px;
   font-weight: 600;
   letter-spacing: 1px;
   color: var(--white);
   opacity: 0;
   transform: scale(.6);
   transition: opacity .25s var(--ease-out), transform .35s var(--ease-out);
   white-space: nowrap
}

.cursor.is-hover .cursor__ring {
   width: 56px;
   height: 56px;
   margin: -28px 0 0 -28px;
   background: rgba(40, 178, 90, .18);
   border-color: rgba(40, 178, 90, .6)
}

.cursor.is-label .cursor__ring {
   width: 84px;
   height: 84px;
   margin: -42px 0 0 -42px;
   background: rgba(8, 8, 12, .75);
   border-color: rgba(139, 92, 246, .5);
   backdrop-filter: blur(6px)
}

.cursor.is-label .cursor__label {
   opacity: 1;
   transform: scale(1)
}

.cursor.is-label .cursor__dot {
   opacity: 0
}

.cursor.is-down .cursor__ring {
   transform: scale(.85)
}

@media (hover:hover) and (pointer:fine) {
   body.has-cursor {
      cursor: none
   }

   body.has-cursor a,
   body.has-cursor button,
   body.has-cursor [role="button"],
   body.has-cursor input,
   body.has-cursor textarea {
      cursor: none
   }

   .cursor {
      display: block
   }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 100;
   height: 80px;
   padding: 20px var(--pad);
   background: rgba(8, 8, 12, .9);
   display: flex;
   align-items: center;
   transition: height .5s var(--ease-out), background-color .5s var(--ease-out), border-color .5s var(--ease-out), padding .5s var(--ease-out);
   border-bottom: 1px solid rgba(30, 41, 59, 0);
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px)
}

.nav.is-scrolled {
   height: 64px;
   padding-top: 12px;
   padding-bottom: 12px;
   background: rgba(8, 8, 12, .72);
   border-bottom-color: rgba(30, 41, 59, .7);
   box-shadow: 0 10px 40px -20px rgba(0, 0, 0, .6)
}

.nav__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   max-width: var(--container);
   margin: 0 auto
}

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

.brand__icon {
   width: 26px;
   height: 24px;
   flex: 0 0 26px;
   display: flex;
   align-items: center
}

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

.brand__word {
   display: flex;
   align-items: center;
   height: 16px
}

.brand__word img {
   height: 16px;
   width: auto;
   display: block
}

.brand:hover .brand__icon {
   animation: brandPulse 1.2s var(--ease-out)
}

@keyframes brandPulse {
   0% {
      transform: scale(1)
   }

   40% {
      transform: scale(1.12) rotate(6deg)
   }

   100% {
      transform: scale(1)
   }
}

.nav__links {
   display: flex;
   align-items: center;
   gap: 32px
}

.nav__link {
   position: relative;
   font-family: var(--body);
   font-weight: 500;
   font-size: 14px;
   line-height: normal;
   color: var(--muted);
   white-space: nowrap;
   padding: 4px 0;
   transition: color .35s var(--ease-out)
}

.nav__link::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 1px;
   background: var(--accent);
   transform: scaleX(0);
   transform-origin: right;
   transition: transform .45s var(--ease-out)
}

.nav__link:hover,
.nav__link.is-active {
   color: var(--white)
}

.nav__link:hover::after,
.nav__link.is-active::after {
   transform: scaleX(1);
   transform-origin: left
}

.nav__cta {
   display: flex;
   align-items: center;
   gap: 16px
}

.nav__call .btn__icon {
   width: 15px;
   height: 15px;
   flex-basis: 15px
}

.nav__est {
   font-family: var(--mono);
   font-size: 11px;
   line-height: normal;
   color: var(--accent);
   white-space: nowrap
}

.nav__burger {
   display: none;
   width: 44px;
   height: 44px;
   margin-right: -10px;
   position: relative
}

.nav__burger span {
   position: absolute;
   left: 12px;
   right: 12px;
   height: 1.5px;
   background: var(--white);
   transition: transform .45s var(--ease-out), opacity .3s
}

.nav__burger span:nth-child(1) {
   top: 17px
}

.nav__burger span:nth-child(2) {
   top: 26px
}

.nav__burger.is-open span:nth-child(1) {
   transform: translateY(4.5px) rotate(45deg)
}

.nav__burger.is-open span:nth-child(2) {
   transform: translateY(-4.5px) rotate(-45deg)
}

.mobile-menu {
   position: fixed;
   inset: 0;
   z-index: 90;
   background: var(--bg);
   display: none;
   flex-direction: column;
   justify-content: center;
   padding: 100px var(--pad) 60px;
   gap: 8px
}

.mobile-menu.is-open {
   display: flex
}

.mobile-menu__link {
   font-family: var(--display);
   font-weight: 800;
   font-size: clamp(34px, 9vw, 48px);
   line-height: 1.15;
   letter-spacing: -.02em;
   color: var(--white);
   padding: 8px 0;
   display: flex;
   align-items: baseline;
   gap: 16px
}

.mobile-menu__link small {
   font-family: var(--mono);
   font-weight: 500;
   font-size: 12px;
   color: var(--accent);
   letter-spacing: 1px
}

.mobile-menu__foot {
   margin-top: 32px;
   display: flex;
   flex-direction: column;
   gap: 24px;
   align-items: flex-start
}

.mobile-menu__foot .nav__est {
   font-size: 12px
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
   position: relative;
   height: 1000px;
   padding: 120px var(--pad) 60px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   overflow: hidden;
   background: var(--bg)
}

.hero__bg {
   position: absolute;
   inset: 0;
   pointer-events: none;
   background: radial-gradient(ellipse 720px 480px at 50% 50%, rgba(139, 92, 246, .102) 0%, rgba(74, 50, 129, .551) 40%, rgba(41, 29, 71, .775) 60%, rgba(24, 19, 41, .888) 70%, rgba(16, 13, 27, .944) 75%, #08080c 80%);
   will-change: transform
}

.hero__bg-glow {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 900px;
   height: 600px;
   background: radial-gradient(closest-side, rgba(139, 92, 246, .10), rgba(139, 92, 246, 0));
   pointer-events: none;
   will-change: transform
}

.no-gsap .hero__bg-glow {
   transform: translate(-50%, -50%)
}

.hero>* {
   position: relative;
   z-index: 1
}

.hero__head {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   z-index: 2
}

.hero .hero__bg,
.hero .hero__bg-glow {
   position: absolute;
   z-index: 0
}

.hero__meta {
   display: flex;
   align-items: center;
   gap: 16px;
   height: 21px
}

.hero__meta-line {
   width: 20px;
   height: 1px;
   background: var(--border)
}

.hero__meta-txt {
   font-family: var(--mono);
   font-size: 12px;
   line-height: normal;
   color: var(--muted);
   white-space: nowrap
}

.hero__copy {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 24px;
   text-align: center;
   width: 100%
}

.hero__title {
   font-family: var(--display);
   font-weight: 800;
   font-size: clamp(42px, 6.667vw, 96px);
   line-height: 1;
   letter-spacing: -.03125em;
   color: var(--white);
   width: 100%;
   max-width: 1000px
}

.hero__sub {
   font-family: var(--body);
   font-weight: 400;
   font-size: clamp(16px, 1.389vw, 20px);
   line-height: 1.5;
   color: var(--muted);
   width: 100%;
   max-width: 600px
}

.hero__actions {
   display: flex;
   align-items: center;
   gap: 16px
}

.hero__cta {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
   width: 100%
}

.hero__proof {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   font-family: var(--mono);
   font-size: 12px;
   line-height: 1.5;
   letter-spacing: .5px;
   color: var(--muted);
   text-align: center;
   max-width: 560px
}

.hero__proof strong {
   font-weight: 500;
   color: var(--white)
}

.hero__proof-num {
   display: inline-block;
   min-width: 2ch;
   text-align: right
}

.hero__proof-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--accent);
   flex: 0 0 6px;
   animation: proofPulse 2.4s ease-out infinite
}

@keyframes proofPulse {
   0% {
      box-shadow: 0 0 8px rgba(139, 92, 246, .8), 0 0 0 0 rgba(139, 92, 246, .6)
   }

   70% {
      box-shadow: 0 0 8px rgba(139, 92, 246, .8), 0 0 0 9px rgba(139, 92, 246, 0)
   }

   100% {
      box-shadow: 0 0 8px rgba(139, 92, 246, .8), 0 0 0 0 rgba(139, 92, 246, 0)
   }
}

/* Rotating client name: one word visible in a masked slot; JS sizes the slot to the current word */
.hero__proof-flip {
   position: relative;
   display: inline-block;
   height: 1.5em;
   vertical-align: top;
   overflow: hidden;
   text-align: left;
   font-weight: 500;
   color: var(--white)
}

.hero__proof-flip span {
   white-space: nowrap;
   will-change: transform, opacity
}

.hero__proof-flip span+span,
.hero__proof-flip.is-live span {
   position: absolute;
   left: 0;
   top: 0
}

.hero__proof-flip span+span {
   opacity: 0
}

.hero__stage-wrap {
   position: relative;
   width: 100%;
   max-width: 1280px;
   height: 320px
}

.hero__stage {
   position: absolute;
   left: 50%;
   top: 0;
   width: 1280px;
   height: 320px;
   transform-origin: top center;
   transform: translateX(-50%) scale(var(--stage-scale, 1))
}

.mesh-grid {
   position: absolute;
   left: 0;
   right: 0;
   top: 40px;
   height: 320px;
   opacity: .1;
   pointer-events: none;
   display: flex;
   justify-content: space-between
}

.mesh-grid i {
   display: block;
   width: 1px;
   height: 100px;
   background: #fff;
   flex: 0 0 1px
}

.phone-pos {
   position: absolute;
   will-change: transform
}

.no-gsap .phone-pos {
   transform: translate(-50%, -50%)
}

.phone {
   position: relative;
   background: #0e0e16;
   border: 4px solid var(--border);
   overflow: hidden;
   will-change: transform
}

.phone img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   pointer-events: none
}

.phone--1 {
   width: 220px;
   height: 400px;
   border-radius: 32px;
   transform: rotate(-12deg);
   box-shadow: -10px 20px 30px rgba(0, 0, 0, .5)
}

.phone--2 {
   width: 240px;
   height: 440px;
   border-radius: 36px;
   border-color: var(--accent);
   transform: rotate(-4deg);
   box-shadow: 0 25px 40px rgba(0, 0, 0, .6)
}

.phone--3 {
   width: 240px;
   height: 440px;
   border-radius: 36px;
   transform: rotate(6deg);
   box-shadow: 5px 25px 40px rgba(0, 0, 0, .6)
}

.phone--4 {
   width: 220px;
   height: 400px;
   border-radius: 32px;
   transform: rotate(15deg);
   box-shadow: 10px 20px 30px rgba(0, 0, 0, .5)
}

.phone-pos--1 {
   left: 249.18px;
   top: 192.76px
}

.phone-pos--2 {
   left: 415.05px;
   top: 191.1px
}

.phone-pos--3 {
   left: 736.35px;
   top: 221.34px
}

.phone-pos--4 {
   left: 1014.48px;
   top: 261.66px
}

.hero__foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   max-width: 1280px;
   padding-top: 20px;
   font-family: var(--mono);
   font-size: 11px;
   line-height: normal;
   color: var(--muted)
}

.hero__scroll {
   display: flex;
   align-items: center;
   gap: 8px;
   letter-spacing: 1px
}

.hero__scroll svg {
   width: 12px;
   height: 12px;
   display: block;
   animation: scrollNudge 2.2s var(--ease-io) infinite
}

@keyframes scrollNudge {

   0%,
   100% {
      transform: translateY(0);
      opacity: 1
   }

   50% {
      transform: translateY(4px);
      opacity: .5
   }
}

/* ============================================================
   SCROLL INTRO
   ============================================================ */
.intro {
   background: var(--bg);
   padding: 160px var(--pad);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 40px
}

.intro__label {
   font-family: var(--mono);
   font-size: 12px;
   line-height: normal;
   color: var(--accent);
   white-space: nowrap
}

.intro__copy {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 24px;
   text-align: center;
   width: 100%
}

.intro__title {
   font-family: var(--display);
   font-weight: 800;
   font-size: clamp(34px, 5vw, 72px);
   line-height: 1.1;
   letter-spacing: -.0278em;
   color: var(--white);
   width: 100%;
   max-width: 800px
}

.intro__text {
   font-family: var(--body);
   font-size: clamp(17px, 1.528vw, 22px);
   line-height: 1.6;
   color: var(--muted);
   width: 100%;
   max-width: 600px
}

/* ============================================================
   WHAT WE BUILD (horizontal)
   ============================================================ */
.build {
   background: var(--surface);
   padding: 120px var(--pad);
   overflow: hidden
}

.build__inner {
   display: flex;
   flex-direction: column;
   gap: 64px
}

.build__viewport {
   width: 100%
}

.build__track {
   display: flex;
   gap: 32px;
   align-items: flex-start;
   will-change: transform
}

.panel {
   position: relative;
   flex: 0 0 340px;
   width: 340px;
   height: 500px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 24px;
   padding: 32px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   overflow: hidden;
   transition: border-color .5s var(--ease-out), box-shadow .5s var(--ease-out);
   transform-style: preserve-3d;
   will-change: transform
}

.panel:hover {
   border-color: rgba(139, 92, 246, .45);
   box-shadow: 0 30px 60px -30px rgba(139, 92, 246, .25)
}

.panel__top {
   display: flex;
   flex-direction: column;
   gap: 16px;
   width: 100%
}

.panel__head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%
}

.panel__num {
   font-family: var(--mono);
   font-size: 12px;
   line-height: normal;
   color: var(--accent)
}

.panel__title {
   font-family: var(--display);
   font-weight: 800;
   font-size: 24px;
   line-height: normal;
   color: var(--white);
   transition: transform .45s var(--ease-out)
}

.panel:hover .panel__title {
   transform: translateX(4px)
}

.panel__desc {
   font-family: var(--body);
   font-size: 14px;
   line-height: 1.5;
   color: var(--muted)
}

.panel__media {
   position: relative;
   width: 100%;
   height: 200px;
   border-radius: 12px;
   overflow: hidden;
   flex: 0 0 200px
}

.panel__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .8s var(--ease-out)
}

.panel:hover .panel__media img {
   transform: scale(1.06)
}

.panel__media::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 12px;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04)
}

.build__progress {
   display: none
}

/* ============================================================
   SERVICES
   ============================================================ */
.services {
   background: var(--bg)
}

.services__inner {
   display: flex;
   flex-direction: column;
   gap: 64px
}

.svc-list {
   display: flex;
   flex-direction: column;
   width: 100%
}

.svc-row {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding: 28px 20px;
   border-radius: 16px;
   background: rgba(14, 14, 22, 0);
   text-align: left;
   transition: padding .5s var(--ease-out), background-color .5s var(--ease-out);
   cursor: pointer
}

.svc-row::after {
   content: "";
   position: absolute;
   left: 20px;
   right: 20px;
   bottom: 0;
   height: 1px;
   background: rgba(30, 41, 59, .35);
   opacity: 1;
   transition: opacity .4s
}

.svc-row.is-active {
   padding: 40px 20px;
   background: var(--surface)
}

.svc-row.is-active::after {
   opacity: 0
}

.svc-row__left {
   display: flex;
   align-items: center;
   gap: 40px;
   flex: 1 1 0;
   min-width: 0
}

.svc-row__num {
   font-family: var(--mono);
   font-weight: 600;
   font-size: 14px;
   line-height: normal;
   color: var(--muted);
   transition: color .5s var(--ease-out)
}

.svc-row.is-active .svc-row__num {
   color: var(--accent)
}

.svc-row__title {
   font-family: var(--display);
   font-weight: 500;
   font-size: 24px;
   line-height: normal;
   color: var(--muted);
   flex: 1 1 0;
   min-width: 0;
   transition: font-size .5s var(--ease-out), font-weight .5s var(--ease-out), color .5s var(--ease-out), transform .5s var(--ease-out)
}

.svc-row:hover:not(.is-active) .svc-row__title {
   color: #cbd5e1;
   transform: translateX(6px)
}

.svc-row.is-active .svc-row__title {
   font-size: 32px;
   font-weight: 800;
   color: var(--white)
}

.svc-row__right {
   display: flex;
   align-items: center;
   gap: 0;
   flex: 0 0 auto
}

.svc-row__preview {
   position: relative;
   width: 0;
   height: 100px;
   border-radius: 8px;
   border: 1px solid var(--border);
   overflow: hidden;
   opacity: 0;
   margin-right: 0;
   transform: translateX(16px);
   transition: width .55s var(--ease-out), height .55s var(--ease-out), opacity .45s var(--ease-out), margin .55s var(--ease-out), transform .55s var(--ease-out), border-color .3s
}

.svc-row__preview img {
   width: 180px;
   max-width: none;
   height: 100%;
   object-fit: cover
}

.svc-row:not(.is-active) .svc-row__preview {
   height: 0;
   border-color: transparent
}

.svc-row.is-active .svc-row__preview {
   width: 180px;
   opacity: 1;
   margin-right: 32px;
   transform: translateX(0)
}

.svc-row__arrow {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border-radius: 20px;
   background: var(--accent);
   transform: scale(0);
   opacity: 0;
   transition: transform .5s var(--ease-out), opacity .4s var(--ease-out);
   position: absolute;
   right: 20px;
   top: 50%;
   margin-top: -20px
}

.svc-row__arrow svg {
   width: 16px;
   height: 16px;
   transition: transform .4s var(--ease-out)
}

.svc-row.is-active .svc-row__arrow {
   transform: scale(1);
   opacity: 1;
   position: relative;
   right: auto;
   top: auto;
   margin-top: 0
}

.svc-row.is-active:hover .svc-row__arrow svg {
   transform: translateX(3px)
}

.svc-row__chev {
   width: 16px;
   height: 16px;
   display: block;
   color: var(--border);
   transition: transform .45s var(--ease-out), opacity .3s, color .4s
}

.svc-row__chev svg {
   width: 100%;
   height: 100%;
   display: block
}

.svc-row:hover:not(.is-active) .svc-row__chev {
   transform: translateX(4px);
   color: var(--muted)
}

.svc-row.is-active .svc-row__chev {
   opacity: 0;
   width: 0
}

.svc-list:hover .svc-row:not(:hover):not(.is-active) {
   opacity: .6
}

.svc-row {
   transition: padding .5s var(--ease-out), background-color .5s var(--ease-out), opacity .4s var(--ease-out)
}

/* ============================================================
   TECH CONSTELLATION
   ============================================================ */
.tech {
   background: var(--surface)
}

.tech__inner {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 64px
}

.tech__stage-wrap {
   position: relative;
   width: 100%;
   max-width: 1000px;
   height: 500px
}

.tech__stage {
   position: absolute;
   left: 50%;
   top: 0;
   width: 1000px;
   height: 500px;
   transform-origin: top center;
   transform: translateX(-50%) scale(var(--stage-scale, 1))
}

.tech__svg {
   position: absolute;
   inset: 0;
   width: 1000px;
   height: 500px;
   overflow: visible
}

.tech__svg line {
   stroke-width: 1
}

.tech__svg .pulse {
   fill: var(--accent);
   filter: drop-shadow(0 0 4px rgba(139, 92, 246, .8))
}

.core {
   position: absolute;
   left: 260px;
   top: 160px;
   width: 240px;
   padding: 24px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   background: var(--bg);
   border: 1.5px solid var(--accent);
   border-radius: 16px;
   filter: drop-shadow(0 0 12px rgba(139, 92, 246, .1));
   will-change: transform
}

.core__title {
   font-family: var(--display);
   font-weight: 800;
   font-size: 18px;
   line-height: normal;
   color: var(--white);
   text-align: center;
   white-space: nowrap
}

.core__ring {
   position: absolute;
   inset: -1.5px;
   border-radius: 16px;
   border: 1.5px solid var(--accent);
   opacity: 0;
   pointer-events: none
}

.tnode {
   position: absolute;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 14px;
   border-radius: 100px;
   background: var(--bg);
   border: 1px solid var(--border);
   font-family: var(--mono);
   font-size: 12px;
   line-height: normal;
   color: var(--muted);
   white-space: nowrap;
   transition: transform .4s var(--ease-out), border-color .4s var(--ease-out), color .4s var(--ease-out), box-shadow .4s var(--ease-out);
   will-change: transform
}

.tnode svg {
   width: 14px;
   height: 14px;
   display: block;
   flex: 0 0 14px
}

.tnode:hover {
   transform: scale(1.06);
   border-color: rgba(139, 92, 246, .6);
   color: var(--white);
   box-shadow: 0 8px 24px -8px rgba(139, 92, 246, .4)
}

.tnode--flutter {
   padding: 10px 16px;
   background: var(--accent);
   border-color: var(--accent);
   font-weight: 600;
   color: var(--white);
   filter: drop-shadow(0 4px 6px rgba(139, 92, 246, .1))
}

.tnode--flutter:hover {
   border-color: var(--accent);
   box-shadow: 0 12px 30px -8px rgba(139, 92, 246, .6)
}

.tnode--flutter {
   left: 680px;
   top: 320px
}

.tnode--ios {
   left: 620px;
   top: 120px
}

.tnode--android {
   left: 220px;
   top: 240px
}

.tnode--python {
   left: 420px;
   top: 400px
}

.tnode--node {
   left: 340px;
   top: 100px
}

.tnode--cloud {
   left: 500px;
   top: 30px
}

/* ============================================================
   CASE STUDIES
   ============================================================ */
.work {
   background: var(--bg)
}

.work__inner {
   display: flex;
   flex-direction: column;
   gap: 80px
}

.project {
   display: flex;
   align-items: center;
   gap: 64px;
   width: 100%
}

.project__info {
   display: flex;
   flex-direction: column;
   gap: 28px;
   align-items: flex-start;
   flex: 0 0 500px;
   width: 500px
}

.project__meta {
   display: flex;
   align-items: center;
   gap: 12px
}

.project__idx {
   font-family: var(--mono);
   font-size: 12px;
   line-height: normal;
   color: var(--muted);
   white-space: nowrap
}

.project__title {
   font-family: var(--display);
   font-weight: 800;
   font-size: clamp(36px, 3.889vw, 56px);
   line-height: normal;
   color: var(--white);
   white-space: nowrap;
   transition: transform .5s var(--ease-out)
}

.project:hover .project__title {
   transform: translateX(6px)
}

.project__tags {
   display: flex;
   gap: 16px;
   flex-wrap: wrap
}

.project__links {
   display: flex;
   gap: 12px;
   flex-wrap: wrap
}

.project__links .btn__icon {
   width: 16px;
   height: 16px;
   flex-basis: 16px
}

.project__desc {
   font-family: var(--body);
   font-size: clamp(15px, 1.25vw, 18px);
   line-height: 1.6;
   color: var(--muted);
   width: 100%
}

.project__visual {
   position: relative;
   flex: 0 0 680px;
   width: 680px;
   height: 440px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 24px;
   overflow: hidden;
   transform-style: preserve-3d;
   will-change: transform;
   transition: border-color .5s var(--ease-out), box-shadow .5s var(--ease-out)
}

.project__visual .zoom {
   position: absolute;
   inset: 0;
   transition: transform .9s var(--ease-out);
   will-change: transform
}

.project__visual img {
   position: absolute;
   inset: -8% 0;
   width: 100%;
   height: 116%;
   object-fit: cover;
   will-change: transform
}

.project:hover .project__visual {
   border-color: rgba(139, 92, 246, .35);
   box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8)
}

.project:hover .project__visual .zoom {
   transform: scale(1.04)
}

.project__visual::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 24px;
   background: linear-gradient(180deg, rgba(8, 8, 12, 0) 60%, rgba(8, 8, 12, .35));
   opacity: 0;
   transition: opacity .5s var(--ease-out);
   pointer-events: none
}

.project:hover .project__visual::after {
   opacity: 1
}

.divider {
   width: 100%;
   height: 1px;
   background: var(--border);
   transform-origin: left
}

/* ============================================================
   CODE TRANSFORMATION
   ============================================================ */
.blueprint {
   background: var(--bg);
   padding: 160px var(--pad)
}

.blueprint__inner {
   display: flex;
   flex-direction: column;
   gap: 80px
}

.blueprint__head {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 24px;
   width: 100%
}

.blueprint__title {
   font-family: var(--display);
   font-weight: 800;
   font-size: clamp(34px, 4.444vw, 64px);
   line-height: 1.1;
   letter-spacing: -.03125em;
   color: var(--white);
   text-align: center;
   width: 100%;
   max-width: 1000px
}

.seq-grid {
   display: flex;
   gap: 24px;
   align-items: stretch;
   width: 100%
}

.seq {
   position: relative;
   flex: 1 1 0;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 40px;
   padding: 32px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 20px;
   transition: border-color .5s var(--ease-out), background-color .5s var(--ease-out), box-shadow .5s var(--ease-out), transform .5s var(--ease-out);
   will-change: transform
}

.seq__stage {
   font-family: var(--mono);
   font-size: 12px;
   line-height: normal;
   color: var(--muted);
   transition: color .5s
}

.seq__name {
   font-family: var(--display);
   font-weight: 800;
   font-size: clamp(24px, 2.222vw, 32px);
   line-height: normal;
   letter-spacing: -1px;
   color: var(--white);
   white-space: nowrap
}

.seq__head {
   display: flex;
   flex-direction: column;
   gap: 8px
}

.seq__foot {
   display: flex;
   flex-direction: column;
   gap: 16px;
   width: 100%
}

.seq__line {
   width: 100%;
   height: 1px;
   background: var(--border);
   transition: background-color .5s;
   position: relative;
   overflow: hidden
}

.seq__line::after {
   content: "";
   position: absolute;
   inset: 0;
   background: var(--accent);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .6s var(--ease-out)
}

.seq__desc {
   font-family: var(--body);
   font-size: 14px;
   line-height: normal;
   color: var(--muted);
   white-space: nowrap
}

.seq.is-active {
   background: rgba(139, 92, 246, .07);
   border-color: var(--accent);
   box-shadow: 0 10px 30px rgba(139, 92, 246, .13)
}

.seq.is-active .seq__stage {
   color: var(--accent)
}

.seq.is-active .seq__line::after {
   transform: scaleX(1)
}

.seq:hover:not(.is-active) {
   border-color: rgba(139, 92, 246, .4);
   transform: translateY(-4px)
}

.seq:hover:not(.is-active) .seq__line::after {
   transform: scaleX(1)
}

.blueprint__quote {
   display: flex;
   justify-content: center;
   width: 100%
}

.blueprint__quote p {
   font-family: var(--body);
   font-size: clamp(16px, 1.389vw, 20px);
   line-height: 1.6;
   color: var(--muted);
   text-align: center;
   width: 100%;
   max-width: 800px
}

.blueprint__quote strong {
   font-weight: 600;
   color: var(--white)
}

/* ============================================================
   PROCESS TIMELINE
   ============================================================ */
.process {
   background: var(--surface)
}

.process__inner {
   display: flex;
   flex-direction: column;
   gap: 64px
}

.timeline {
   display: flex;
   flex-direction: column;
   gap: 40px;
   width: 100%
}

.tl-row {
   position: relative;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   width: 100%
}

.tl-track {
   position: absolute;
   left: 60px;
   right: 60px;
   top: 37px;
   height: 1px;
   background: rgba(30, 41, 59, .9);
   pointer-events: none
}

.tl-track__fill {
   position: absolute;
   inset: 0;
   background: var(--accent);
   transform: scaleX(0);
   transform-origin: left;
   box-shadow: 0 0 12px rgba(56, 189, 248, .5)
}

.tl-node {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   width: 120px;
   flex: 0 0 120px;
   cursor: pointer;
   background: none;
   border: 0;
   padding: 0
}

.tl-node__num {
   font-family: var(--mono);
   font-weight: 600;
   font-size: 14px;
   line-height: normal;
   color: var(--muted);
   transition: color .4s var(--ease-out), transform .4s var(--ease-out)
}

.tl-node__dot {
   position: relative;
   width: 24px;
   height: 24px;
   border-radius: 12px;
   background: var(--bg);
   border: 2px solid var(--border);
   transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out), transform .4s var(--ease-out)
}

.tl-node__dot::after {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   width: 8px;
   height: 8px;
   margin: -4px 0 0 -4px;
   border-radius: 50%;
   background: var(--bg);
   transform: scale(0);
   transition: transform .4s var(--ease-out)
}

.tl-node__label {
   font-family: var(--display);
   font-weight: 700;
   font-size: 12px;
   line-height: normal;
   letter-spacing: 1px;
   color: var(--muted);
   transition: color .4s var(--ease-out);
   white-space: nowrap
}

.tl-node:hover .tl-node__dot {
   border-color: rgba(56, 189, 248, .6)
}

.tl-node.is-done .tl-node__dot {
   border-color: rgba(56, 189, 248, .5)
}

.tl-node.is-done .tl-node__num {
   color: rgba(148, 163, 184, .6)
}

.tl-node.is-active .tl-node__num {
   color: var(--accent)
}

.tl-node.is-active .tl-node__dot {
   background: var(--accent);
   border-color: var(--accent);
   transform: scale(1)
}

.tl-node.is-active .tl-node__dot::after {
   transform: scale(1)
}

.tl-node.is-active .tl-node__label {
   color: var(--white)
}

.tl-node.is-active .tl-node__dot::before {
   content: "";
   position: absolute;
   inset: -6px;
   border-radius: 50%;
   border: 1px solid rgba(56, 189, 248, .5);
   animation: ringOut 1.8s var(--ease-out) infinite
}

@keyframes ringOut {
   0% {
      transform: scale(.6);
      opacity: 1
   }

   100% {
      transform: scale(1.6);
      opacity: 0
   }
}

.tl-card {
   display: flex;
   align-items: center;
   gap: 64px;
   width: 100%;
   padding: 40px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 24px;
   overflow: hidden
}

.tl-card__left {
   display: flex;
   flex-direction: column;
   gap: 16px;
   align-items: flex-start;
   flex: 0 0 300px;
   width: 300px
}

.tl-card__title {
   font-family: var(--display);
   font-weight: 800;
   font-size: clamp(32px, 3.333vw, 48px);
   line-height: normal;
   color: var(--white);
   white-space: nowrap
}

.tl-card__right {
   display: flex;
   flex-direction: column;
   gap: 20px;
   align-items: flex-start;
   flex: 1 1 0;
   min-width: 0
}

.tl-card__desc {
   font-family: var(--body);
   font-size: clamp(15px, 1.25vw, 18px);
   line-height: 1.6;
   color: var(--muted);
   width: 100%
}

.tl-card__tags {
   display: flex;
   gap: 16px;
   flex-wrap: wrap
}

/* ============================================================
   USE CASES
   ============================================================ */
.usecases {
   background: var(--bg)
}

.usecases__inner {
   display: flex;
   flex-direction: column;
   gap: 48px
}

.usecases__head {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
   width: 100%
}

.usecases__title {
   font-family: var(--display);
   font-weight: 800;
   font-size: clamp(26px, 3.333vw, 48px);
   line-height: normal;
   color: var(--white);
   text-align: center
}

.pills {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   justify-content: center;
   width: 100%
}

.pill {
   position: relative;
   padding: 12px 24px;
   border-radius: 100px;
   background: var(--surface);
   border: 1px solid var(--border);
   font-family: var(--mono);
   font-weight: 600;
   font-size: 12px;
   letter-spacing: 1px;
   line-height: normal;
   color: var(--muted);
   white-space: nowrap;
   transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out), color .4s var(--ease-out), transform .3s var(--ease-out)
}

.pill:hover {
   border-color: rgba(139, 92, 246, .5);
   color: var(--white);
   transform: translateY(-2px)
}

.pill.is-active {
   background: var(--accent);
   border-color: var(--accent);
   color: var(--white)
}

.showcase {
   position: relative;
   display: flex;
   align-items: flex-start;
   width: 100%;
   height: 500px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 32px;
   overflow: hidden
}

.showcase__copy {
   flex: 1 1 0;
   min-width: 0;
   height: 100%;
   padding: 64px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   gap: 32px
}

.showcase__title {
   font-family: var(--display);
   font-weight: 800;
   font-size: clamp(24px, 2.778vw, 40px);
   line-height: normal;
   color: var(--white);
   white-space: nowrap
}

.showcase__desc {
   font-family: var(--body);
   font-size: 16px;
   line-height: 1.6;
   color: var(--muted);
   width: 100%
}

.showcase__media {
   position: relative;
   flex: 1 1 0;
   min-width: 0;
   height: 100%;
   overflow: hidden
}

.showcase__media img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   will-change: transform
}

.showcase__media::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 120px;
   background: linear-gradient(90deg, var(--surface), rgba(14, 14, 22, 0));
   z-index: 1;
   pointer-events: none
}

/* ============================================================
   TESTIMONIALS (carousel)
   ============================================================ */
.testimonial {
   background: var(--cream);
   padding: 100px var(--pad);
   color: var(--ink);
   overflow: hidden
}

.testimonial__inner {
   display: flex;
   flex-direction: column;
   gap: 44px
}

.testimonial__head {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 24px
}

.testimonial__eyebrow {
   font-family: var(--mono);
   font-weight: 600;
   font-size: 12px;
   letter-spacing: 2px;
   line-height: normal;
   color: var(--accent)
}

.testimonial__title {
   font-family: var(--display);
   font-weight: 800;
   font-size: clamp(30px, 3.333vw, 48px);
   line-height: normal;
   color: var(--ink)
}

.testimonial__headings {
   display: flex;
   flex-direction: column;
   gap: 12px
}

.tcar__nav {
   display: flex;
   gap: 10px
}

.tcar__btn {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   border: 1px solid rgba(26, 26, 36, .18);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--ink);
   background: transparent;
   transition: background-color .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out), transform .3s var(--ease-out)
}

.tcar__btn svg {
   width: 16px;
   height: 16px;
   display: block
}

.tcar__btn:hover {
   background: var(--ink);
   color: var(--cream);
   border-color: var(--ink)
}

.tcar__btn:active {
   transform: scale(.94)
}

.tcar {
   position: relative;
   width: 100%
}

.tcar__viewport {
   width: 100%;
   overflow: hidden;
   cursor: grab;
   touch-action: pan-y
}

.tcar__viewport.is-dragging {
   cursor: grabbing
}

.tcar__track {
   display: flex;
   width: 100%;
   will-change: transform
}

.tslide {
   flex: 0 0 100%;
   width: 100%;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 28px;
   padding-right: 8px;
   user-select: none;
   -webkit-user-select: none
}

.quote__mark {
   font-family: var(--display);
   font-weight: 800;
   font-size: 96px;
   line-height: .5;
   height: 48px;
   width: 50px;
   color: rgba(139, 92, 246, .16)
}

.quote__text {
   font-family: var(--display);
   font-weight: 600;
   font-size: clamp(20px, 2.222vw, 32px);
   line-height: 1.4;
   color: var(--ink);
   width: 100%;
   max-width: 1040px;
   margin: 0
}

.quote__author {
   display: flex;
   align-items: center;
   gap: 20px
}

.quote__avatar {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   overflow: hidden;
   flex: 0 0 56px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--display);
   font-weight: 700;
   font-size: 18px;
   letter-spacing: .5px;
   color: var(--white);
   background: var(--accent)
}

.quote__avatar--ink {
   background: var(--ink)
}

.quote__avatar--green {
   background: var(--brand)
}

.quote__avatar--slate {
   background: #475569
}

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

.quote__who {
   display: flex;
   flex-direction: column;
   gap: 4px
}

.quote__name {
   font-family: var(--display);
   font-weight: 700;
   font-size: 18px;
   line-height: normal;
   color: var(--ink)
}

.quote__role {
   font-family: var(--body);
   font-size: 14px;
   line-height: normal;
   color: var(--ink);
   opacity: .7
}

.tcar__foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   margin-top: 36px
}

.tcar__dots {
   display: flex;
   gap: 8px
}

.tcar__dot {
   width: 8px;
   height: 8px;
   border-radius: 4px;
   background: rgba(26, 26, 36, .18);
   transition: width .4s var(--ease-out), background-color .4s var(--ease-out)
}

.tcar__dot.is-active {
   width: 28px;
   background: var(--accent)
}

.tcar__counter {
   font-family: var(--mono);
   font-size: 12px;
   letter-spacing: 1px;
   color: var(--ink);
   opacity: .6;
   display: flex;
   align-items: center;
   gap: 12px
}

.tcar__bar {
   width: 120px;
   height: 2px;
   background: rgba(26, 26, 36, .12);
   position: relative;
   overflow: hidden;
   border-radius: 1px
}

.tcar__bar i {
   position: absolute;
   inset: 0;
   background: var(--accent);
   transform-origin: left;
   transform: scaleX(0)
}


/* ============================================================
   ABOUT
   ============================================================ */
.about {
   background: var(--bg);
   padding: 140px var(--pad)
}

.about__inner {
   display: flex;
   align-items: center;
   gap: 64px;
   width: 100%
}

.about__copy {
   flex: 1 1 0;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 32px;
   align-items: flex-start
}

.about__title {
   font-family: var(--display);
   font-weight: 800;
   font-size: clamp(32px, 3.889vw, 56px);
   line-height: 1.1;
   color: var(--white);
   width: 100%
}

.about__text {
   font-family: var(--body);
   font-size: clamp(15px, 1.25vw, 18px);
   line-height: 1.6;
   color: var(--muted);
   width: 100%
}

.about__visual {
   position: relative;
   flex: 1 1 0;
   min-width: 0;
   height: 480px;
   border: 1.5px solid var(--accent);
   border-radius: 24px;
   overflow: hidden;
   will-change: transform
}

.about__visual img {
   position: absolute;
   inset: -8% 0;
   width: 100%;
   height: 116%;
   object-fit: cover;
   will-change: transform
}

.about__caption {
   position: absolute;
   left: 20px;
   bottom: 20px;
   z-index: 2;
   display: inline-flex;
   align-items: center;
   gap: 9px;
   padding: 9px 14px;
   border-radius: 100px;
   background: rgba(8, 8, 12, .72);
   border: 1px solid rgba(255, 255, 255, .1);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   font-family: var(--mono);
   font-size: 11px;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--white);
   white-space: nowrap
}

.about__caption i {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--brand);
   animation: capPulse 2.2s ease-out infinite
}

@keyframes capPulse {
   0% {
      box-shadow: 0 0 0 0 rgba(40, 178, 90, .6)
   }

   70% {
      box-shadow: 0 0 0 9px rgba(40, 178, 90, 0)
   }

   100% {
      box-shadow: 0 0 0 0 rgba(40, 178, 90, 0)
   }
}

/* About — pillars */
.pillars {
   list-style: none;
   display: flex;
   flex-direction: column;
   width: 100%;
   border-top: 1px solid var(--border)
}

.pillar {
   position: relative;
   display: grid;
   grid-template-columns: 40px 1fr;
   gap: 16px;
   padding: 22px 0 22px 4px;
   border-bottom: 1px solid var(--border);
   transition: padding-left .55s var(--ease-out)
}

.pillar__bar {
   position: absolute;
   left: 0;
   top: -1px;
   bottom: -1px;
   width: 2px;
   background: var(--accent);
   transform-origin: top;
   transition: background-color .4s, box-shadow .4s
}

.pillar__num {
   font-family: var(--mono);
   font-weight: 600;
   font-size: 12px;
   letter-spacing: 1px;
   color: var(--accent);
   padding-top: 5px;
   transition: color .4s
}

.pillar__title {
   font-family: var(--display);
   font-weight: 700;
   font-size: clamp(17px, 1.4vw, 20px);
   line-height: 1.25;
   color: var(--white);
   margin-bottom: 6px;
   transition: transform .55s var(--ease-out)
}

.pillar__text {
   font-family: var(--body);
   font-size: clamp(14px, 1.05vw, 15px);
   line-height: 1.6;
   color: var(--muted);
   transition: color .4s
}

@media (hover:hover) {
   .pillar:hover {
      padding-left: 18px
   }

   .pillar:hover .pillar__bar {
      background: var(--brand);
      box-shadow: 0 0 18px rgba(40, 178, 90, .7)
   }

   .pillar:hover .pillar__num {
      color: var(--brand)
   }

   .pillar:hover .pillar__title {
      transform: translateX(4px)
   }

   .pillar:hover .pillar__text {
      color: #b6c2d3
   }
}

/* About — stats */
.about__stats-wrap {
   display: flex;
   flex-direction: column;
   width: 100%;
   margin-top: 96px
}

.about__rule {
   width: 100%;
   height: 1px;
   background: var(--border);
   transform-origin: left
}

.stats {
   list-style: none;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   width: 100%;
   padding-top: 40px
}

.stat {
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding: 0 28px 0 28px;
   border-left: 1px solid var(--border)
}

.stat:first-child {
   border-left: 0;
   padding-left: 0
}

.stat__num {
   font-family: var(--display);
   font-weight: 800;
   font-size: clamp(40px, 4.2vw, 64px);
   line-height: 1;
   color: var(--white);
   letter-spacing: -.02em;
   font-variant-numeric: tabular-nums
}

.stat__num em {
   font-style: normal;
   color: var(--accent);
   font-size: .6em;
   margin-left: 2px
}

.stat__label {
   font-family: var(--body);
   font-size: 14px;
   line-height: 1.5;
   color: var(--muted);
   max-width: 24ch
}

/* ============================================================
   SOCIAL PROOF
   ============================================================ */
.proof {
   background: var(--surface);
   padding: 80px var(--pad);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 40px
}

.proof__label {
   font-family: var(--mono);
   font-size: 11px;
   letter-spacing: 2px;
   line-height: normal;
   text-transform: uppercase;
   color: var(--muted);
   opacity: .7;
   text-align: center
}

.proof__row {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px 96px;
   flex-wrap: wrap;
   width: 100%;
   max-width: var(--container)
}

.proof__logo {
   padding: 12px;
   font-family: var(--display);
   font-weight: 800;
   font-size: 20px;
   letter-spacing: 2px;
   line-height: normal;
   color: var(--muted);
   opacity: .22;
   white-space: nowrap;
   transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), color .45s
}

.proof__logo:hover {
   opacity: .9;
   color: var(--white);
   transform: translateY(-2px)
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
   background: var(--bg)
}

.faq__inner {
   display: flex;
   flex-direction: column;
   gap: 64px
}

.faq-list {
   display: flex;
   flex-direction: column;
   gap: 16px;
   width: 100%
}

.faq-item {
   width: 100%;
   padding: 24px;
   border-radius: 16px;
   background: var(--bg);
   border: 1px solid var(--border);
   transition: background-color .5s var(--ease-out), border-color .5s var(--ease-out)
}

.faq-item.is-open {
   background: var(--surface);
   border-color: var(--accent)
}

.faq-item__btn {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   width: 100%;
   text-align: left
}

.faq-item__q {
   font-family: var(--display);
   font-weight: 700;
   font-size: 18px;
   line-height: normal;
   color: var(--white);
   transition: transform .4s var(--ease-out), color .4s
}

.faq-item__btn:hover .faq-item__q {
   transform: translateX(4px)
}

.faq-item__icon {
   position: relative;
   width: 16px;
   height: 16px;
   flex: 0 0 16px
}

.faq-item__icon::before,
.faq-item__icon::after {
   content: "";
   position: absolute;
   left: 3.33px;
   top: 7px;
   width: 9.33px;
   height: 2px;
   border-radius: 1px;
   background: var(--muted);
   transition: transform .5s var(--ease-out), background-color .4s
}

.faq-item__icon::after {
   transform: rotate(90deg)
}

.faq-item.is-open .faq-item__icon::after {
   transform: rotate(0deg)
}

.faq-item.is-open .faq-item__icon::before {
   background: var(--muted)
}

.faq-item__panel {
   height: 0;
   overflow: hidden
}

.faq-item__a {
   padding-top: 16px;
   font-family: var(--body);
   font-size: 14px;
   line-height: 1.6;
   color: var(--muted);
   width: 100%
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
   background: var(--surface);
   padding: 140px var(--pad)
}

.contact__inner {
   display: flex;
   flex-direction: column;
   gap: 80px
}

.contact__head {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
   width: 100%;
   text-align: center
}

.contact__title {
   font-family: var(--display);
   font-weight: 800;
   font-size: clamp(30px, 4.444vw, 64px);
   line-height: normal;
   color: var(--white);
   text-align: center
}

.contact__sub {
   font-family: var(--body);
   font-size: clamp(16px, 1.389vw, 20px);
   line-height: normal;
   color: var(--muted)
}

.contact__call {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   margin-top: 8px
}

.contact__call-hint {
   font-family: var(--mono);
   font-size: 11px;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--muted);
   opacity: .8
}

.form__success-call {
   margin-top: 8px
}

[data-cal-hidden] {
   display: none !important
}

.form {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 32px;
   width: 100%;
   padding: 48px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 24px;
   transition: border-color .5s var(--ease-out), box-shadow .5s var(--ease-out)
}

.form:focus-within {
   border-color: rgba(139, 92, 246, .35);
   box-shadow: 0 0 0 1px rgba(139, 92, 246, .08), 0 30px 80px -40px rgba(139, 92, 246, .25)
}

.form__top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%
}

.form__step {
   font-family: var(--mono);
   font-size: 14px;
   line-height: normal;
   color: var(--accent);
   white-space: nowrap
}

.form__bars {
   display: flex;
   gap: 4px
}

.form__bar {
   position: relative;
   width: 24px;
   height: 4px;
   border-radius: 2px;
   background: var(--border);
   overflow: hidden
}

.form__bar::after {
   content: "";
   position: absolute;
   inset: 0;
   background: var(--accent);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .5s var(--ease-out)
}

.form__bar.is-on::after {
   transform: scaleX(1)
}

.form__body {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 32px
}

.form__q {
   font-family: var(--display);
   font-weight: 700;
   font-size: clamp(20px, 1.944vw, 28px);
   line-height: normal;
   color: var(--white)
}

.options {
   display: flex;
   flex-direction: column;
   gap: 12px;
   width: 100%
}

.option {
   position: relative;
   display: flex;
   align-items: center;
   gap: 16px;
   width: 100%;
   padding: 24px;
   border-radius: 12px;
   background: var(--surface);
   border: 1px solid var(--border);
   text-align: left;
   transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out), transform .3s var(--ease-out)
}

.option:hover {
   border-color: rgba(139, 92, 246, .5);
   transform: translateX(4px)
}

.option__radio {
   position: relative;
   width: 16px;
   height: 16px;
   flex: 0 0 16px;
   border-radius: 50%;
   border: 2px solid var(--border);
   transition: border-color .4s var(--ease-out), background-color .4s var(--ease-out)
}

.option__radio::after {
   content: "";
   position: absolute;
   inset: 2px;
   border-radius: 50%;
   background: var(--white);
   opacity: 0;
   transform: scale(.4);
   transition: transform .4s var(--ease-out), opacity .3s
}

.option__text {
   font-family: var(--body);
   font-size: 16px;
   line-height: normal;
   color: var(--white)
}

.option.is-selected {
   background: rgba(139, 92, 246, .07);
   border-color: var(--accent)
}

.option.is-selected .option__radio {
   border-color: var(--accent);
   background: var(--accent)
}

.option.is-selected .option__radio::after {
   opacity: 0;
   transform: scale(1)
}

.fields {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   width: 100%
}

.field {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 8px
}

.field--full {
   grid-column: 1/-1
}

.field label {
   font-family: var(--mono);
   font-size: 11px;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--muted);
   transition: color .3s
}

.field:focus-within label {
   color: var(--accent)
}

.field input,
.field textarea {
   width: 100%;
   padding: 18px 20px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 12px;
   font-family: var(--body);
   font-size: 16px;
   line-height: normal;
   color: var(--white);
   outline: none;
   transition: border-color .4s var(--ease-out), box-shadow .4s var(--ease-out), background-color .4s
}

.field input::placeholder,
.field textarea::placeholder {
   color: rgba(148, 163, 184, .5)
}

.field input:focus,
.field textarea:focus {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px rgba(139, 92, 246, .15)
}

.field textarea {
   min-height: 120px;
   resize: vertical
}

.field.is-invalid input,
.field.is-invalid textarea {
   border-color: rgba(248, 113, 113, .7)
}

.field__err {
   font-family: var(--mono);
   font-size: 11px;
   color: #f87171;
   height: 0;
   overflow: hidden;
   opacity: 0;
   transform: translateY(-4px);
   transition: height .35s var(--ease-out), opacity .35s, transform .35s var(--ease-out)
}

.field.is-invalid .field__err {
   height: 16px;
   opacity: 1;
   transform: translateY(0)
}

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

.form__note {
   font-family: var(--mono);
   font-size: 12px;
   line-height: normal;
   color: var(--muted);
   white-space: nowrap
}

.form__actions {
   display: flex;
   align-items: center;
   gap: 12px
}

.form__back {
   font-family: var(--body);
   font-weight: 500;
   font-size: 14px;
   color: var(--muted);
   padding: 14px 16px;
   border-radius: 100px;
   transition: color .3s;
   display: none
}

.form__back:hover {
   color: var(--white)
}

.form__back.is-visible {
   display: inline-flex
}

.form__error {
   font-family: var(--mono);
   font-size: 12px;
   color: #f87171;
   opacity: 0;
   transform: translateY(-4px);
   transition: opacity .35s, transform .35s var(--ease-out);
   height: 0
}

.form__error.is-visible {
   opacity: 1;
   transform: translateY(0);
   height: auto
}

.btn.is-loading .btn__label {
   opacity: .6
}

.btn.is-loading .btn__icon {
   animation: spin 1s linear infinite
}

@keyframes spin {
   to {
      transform: rotate(360deg)
   }
}

.form__success {
   display: none;
   flex-direction: column;
   align-items: center;
   gap: 20px;
   text-align: center;
   padding: 40px 0
}

.form__success.is-visible {
   display: flex
}

.form__success-icon {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: rgba(139, 92, 246, .12);
   border: 1px solid rgba(139, 92, 246, .4);
   display: flex;
   align-items: center;
   justify-content: center
}

.form__success-icon svg {
   width: 24px;
   height: 24px
}

.form__success-title {
   font-family: var(--display);
   font-weight: 800;
   font-size: clamp(26px, 2.5vw, 36px);
   color: var(--white)
}

.form__success-text {
   font-family: var(--body);
   font-size: 16px;
   line-height: 1.6;
   color: var(--muted);
   max-width: 480px
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
   background: var(--bg);
   padding: 120px var(--pad) 60px
}

.footer__inner {
   display: flex;
   flex-direction: column;
   gap: 80px
}

.footer__top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   width: 100%;
   gap: 48px
}

.footer__brand {
   display: flex;
   flex-direction: column;
   gap: 24px;
   align-items: flex-start;
   width: 360px;
   flex: 0 0 360px
}

.footer__desc {
   font-family: var(--body);
   font-size: 14px;
   line-height: 1.6;
   color: var(--muted);
   width: 100%
}

.footer__est {
   font-family: var(--mono);
   font-size: 12px;
   line-height: normal;
   color: var(--accent);
   white-space: nowrap
}

.footer__cols {
   display: flex;
   gap: 64px;
   align-items: flex-start
}

.footer__col {
   display: flex;
   flex-direction: column;
   gap: 16px;
   align-items: flex-start
}

.footer__col h4 {
   font-family: var(--mono);
   font-weight: 600;
   font-size: 12px;
   line-height: normal;
   color: var(--white);
   white-space: nowrap
}

.footer__link {
   position: relative;
   font-family: var(--body);
   font-size: 14px;
   line-height: normal;
   color: var(--muted);
   white-space: nowrap;
   transition: color .35s var(--ease-out), transform .35s var(--ease-out);
   display: inline-block
}

.footer__link:hover {
   color: var(--white);
   transform: translateX(4px)
}

.footer__line {
   width: 100%;
   height: 1px;
   background: var(--border)
}

.footer__bottom {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   font-family: var(--body);
   font-size: 12px;
   line-height: normal;
   color: var(--muted);
   gap: 24px
}

.footer__legal {
   display: flex;
   gap: 24px
}

.footer__legal a {
   transition: color .3s
}

.footer__legal a:hover {
   color: var(--white)
}

/* ============================================================
   FLOATING SOCIAL DOCK (right edge, vertically centred)
   ============================================================ */
.social-dock {
   position: fixed;
   right: 24px;
   top: 50%;
   transform: translateY(-50%);
   z-index: 85;
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin: 0;
   padding: 0;
   list-style: none
}

.social-dock__link {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   color: var(--white);
   background: rgba(14, 14, 22, .85);
   border: 1px solid var(--border);
   box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .8);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   transition: transform .45s var(--ease-out), border-color .3s, box-shadow .3s, background-color .3s, color .3s
}

.social-dock__link svg {
   width: 20px;
   height: 20px;
   display: block;
   fill: currentColor
}

.social-dock__label {
   position: absolute;
   right: calc(100% + 12px);
   top: 50%;
   transform: translate(8px, -50%);
   padding: 6px 12px;
   border-radius: 999px;
   font-family: var(--mono);
   font-size: 11px;
   letter-spacing: 1px;
   text-transform: uppercase;
   white-space: nowrap;
   color: var(--white);
   background: rgba(8, 8, 12, .92);
   border: 1px solid var(--border);
   opacity: 0;
   pointer-events: none;
   transition: opacity .3s, transform .45s var(--ease-out)
}

.social-dock__link:hover,
.social-dock__link:focus-visible {
   transform: translateX(-4px) scale(1.06)
}

.social-dock__link:hover .social-dock__label,
.social-dock__link:focus-visible .social-dock__label {
   opacity: 1;
   transform: translate(0, -50%)
}

.social-dock__link--linkedin {
   color: #0a66c2;
   border-color: rgba(10, 102, 194, .35)
}

.social-dock__link--whatsapp {
   color: #25d366;
   border-color: rgba(37, 211, 102, .35)
}

.social-dock__link--instagram {
   color: #e1306c;
   border-color: rgba(225, 48, 108, .35)
}

.social-dock__link--linkedin:hover,
.social-dock__link--linkedin:focus-visible {
   color: var(--white);
   background: #0a66c2;
   border-color: #0a66c2;
   box-shadow: 0 12px 30px -8px rgba(10, 102, 194, .6)
}

.social-dock__link--whatsapp:hover,
.social-dock__link--whatsapp:focus-visible {
   color: var(--white);
   background: #25d366;
   border-color: #25d366;
   box-shadow: 0 12px 30px -8px rgba(37, 211, 102, .6)
}

.social-dock__link--instagram:hover,
.social-dock__link--instagram:focus-visible {
   color: var(--white);
   background: #e1306c;
   border-color: #e1306c;
   box-shadow: 0 12px 30px -8px rgba(225, 48, 108, .6)
}

.social-dock {
   transition: opacity .35s, visibility .35s, transform .45s var(--ease-out)
}

@media (max-width:768px) {
   .social-dock {
      top: auto;
      right: 12px;
      bottom: 16px;
      transform: none;
      gap: 10px
   }

   .popup.is-visible~.social-dock {
      opacity: 0;
      visibility: hidden;
      pointer-events: none
   }

   .social-dock__link {
      width: 42px;
      height: 42px
   }

   .social-dock__link svg {
      width: 18px;
      height: 18px
   }

   .social-dock__label {
      display: none
   }
}

/* ============================================================
   SCROLL POP-UP (mid-page inquiry card)
   ============================================================ */
.popup {
   position: fixed;
   right: 32px;
   bottom: 32px;
   z-index: 80;
   width: 340px;
   max-width: calc(100vw - 32px);
   visibility: hidden;
   opacity: 0;
   pointer-events: none
}

.popup.is-visible {
   pointer-events: auto
}

.popup__card {
   position: relative;
   padding: 24px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 20px;
   box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .03);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: 14px;
   align-items: flex-start
}

.popup__card::before {
   content: "";
   position: absolute;
   left: -40px;
   top: -60px;
   width: 220px;
   height: 180px;
   background: radial-gradient(closest-side, rgba(40, 178, 90, .18), rgba(40, 178, 90, 0));
   pointer-events: none
}

.popup__head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%
}

.popup__brand {
   display: flex;
   align-items: center;
   gap: 8px
}

.popup__brand img {
   width: 18px;
   height: auto;
   display: block
}

.popup__close {
   width: 28px;
   height: 28px;
   margin: -6px -6px 0 0;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--muted);
   transition: color .3s, background-color .3s, transform .3s var(--ease-out)
}

.popup__close:hover {
   color: var(--white);
   background: rgba(255, 255, 255, .06);
   transform: rotate(90deg)
}

.popup__close svg {
   width: 12px;
   height: 12px;
   display: block
}

.popup__title {
   font-family: var(--display);
   font-weight: 700;
   font-size: 20px;
   line-height: 1.2;
   color: var(--white)
}

.popup__text {
   font-family: var(--body);
   font-size: 13px;
   line-height: 1.55;
   color: var(--muted)
}

.popup__actions {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-top: 4px
}

.popup__later {
   font-family: var(--body);
   font-weight: 500;
   font-size: 13px;
   color: var(--muted);
   padding: 8px 4px;
   transition: color .3s
}

.popup__later:hover {
   color: var(--white)
}

.popup__progress {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 2px;
   background: rgba(30, 41, 59, .6)
}

.popup__progress i {
   position: absolute;
   inset: 0;
   background: var(--brand);
   transform-origin: left;
   transform: scaleX(0)
}

@media (max-width:768px) {
   .popup {
      right: 16px;
      left: 16px;
      bottom: 16px;
      width: auto;
      max-width: none
   }

   .popup__card {
      padding: 20px;
      border-radius: 16px
   }

   .popup__title {
      font-size: 18px
   }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1440px) {
   .project__visual {
      flex: 1 1 0;
      width: auto;
      min-width: 0
   }

   .project__info {
      flex: 0 0 clamp(300px, 36vw, 500px);
      width: auto
   }
}

@media (max-width:1280px) {
   :root {
      --pad: 48px
   }

   .hero {
      height: auto;
      min-height: 0;
      gap: 40px;
      padding-top: 140px
   }

   .hero__head {
      gap: 40px
   }

   .hero__stage-wrap {
      height: calc(320px * var(--stage-scale, 1))
   }
}

@media (max-width:1024px) {
   :root {
      --pad: 40px
   }

   .nav__links,
   .nav__est {
      display: none
   }

   .nav__burger {
      display: block
   }

   .nav__cta .btn {
      display: none
   }

   .mobile-menu__foot {
      gap: 16px
   }

   .section {
      padding: 96px var(--pad)
   }

   .intro,
   .blueprint,
   .about,
   .contact {
      padding: 110px var(--pad)
   }

   .testimonial {
      padding: 90px var(--pad)
   }

   .project,
   .project--flip {
      flex-direction: column;
      align-items: flex-start;
      gap: 40px
   }

   .project__info {
      flex: 0 0 auto;
      width: 100%;
      max-width: 600px
   }

   .project__visual {
      width: 100%;
      flex: 0 0 auto;
      height: clamp(240px, 58vw, 440px)
   }

   .project--flip .project__visual {
      order: -1
   }

   .about__inner {
      flex-direction: column;
      align-items: flex-start
   }

   .about__visual {
      width: 100%;
      flex: 0 0 auto;
      height: clamp(240px, 62vw, 480px)
   }

   .about__stats-wrap {
      margin-top: 72px
   }

   .stats {
      grid-template-columns: 1fr 1fr;
      row-gap: 40px
   }

   .stat:nth-child(odd) {
      border-left: 0;
      padding-left: 0
   }

   .seq-grid {
      flex-wrap: wrap
   }

   .seq {
      flex: 1 1 calc(50% - 12px)
   }

   .tl-card {
      gap: 40px;
      flex-wrap: wrap
   }

   .tl-card__left {
      flex: 0 0 auto;
      width: 100%
   }

   .tl-card__right {
      flex: 1 1 100%
   }

   .showcase {
      height: auto;
      flex-direction: column
   }

   .showcase__copy {
      padding: 48px;
      width: 100%
   }

   .showcase__title {
      white-space: normal
   }

   .showcase__media {
      width: 100%;
      height: 320px;
      flex: 0 0 320px
   }

   .showcase__media::before {
      width: 100%;
      height: 120px;
      bottom: auto;
      right: 0;
      background: linear-gradient(180deg, var(--surface), rgba(14, 14, 22, 0))
   }

   .footer__top {
      flex-wrap: wrap
   }

   .footer__brand {
      width: 100%;
      flex: 0 0 auto;
      max-width: 360px
   }

   .footer__cols {
      gap: 48px;
      flex-wrap: wrap
   }

   .proof__row {
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px 24px
   }

   .tl-row {
      overflow-x: auto;
      padding-bottom: 8px;
      scrollbar-width: none
   }

   .tl-row::-webkit-scrollbar {
      display: none
   }

   .tl-node {
      width: 100px;
      flex: 0 0 100px
   }

   .tl-track {
      left: 50px;
      right: 50px
   }
}

@media (max-width:768px) {
   :root {
      --pad: 24px
   }

   .section {
      padding: 80px var(--pad)
   }

   .intro,
   .blueprint,
   .about,
   .contact {
      padding: 88px var(--pad)
   }

   .hero {
      padding-top: 120px;
      padding-bottom: 40px;
      gap: 32px
   }

   .hero__head {
      gap: 32px
   }

   .hero__meta {
      height: auto;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px 12px
   }

   .hero__actions {
      flex-direction: column;
      width: 100%
   }

   .hero__actions .btn {
      width: 100%;
      justify-content: center;
      max-width: 320px
   }

   .hero__foot {
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px 24px;
      text-align: center
   }

   .hero__foot>*:first-child,
   .hero__foot>*:last-child {
      display: none
   }

   .mesh-grid {
      opacity: .06
   }

   .build__inner {
      gap: 40px
   }

   .build__viewport {
      overflow-x: auto;
      margin: 0 calc(-1 * var(--pad));
      padding: 0 var(--pad) 8px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none
   }

   .build__viewport::-webkit-scrollbar {
      display: none
   }

   .panel {
      flex: 0 0 300px;
      width: 300px;
      height: 460px;
      padding: 24px;
      scroll-snap-align: start
   }

   .svc-row {
      flex-wrap: wrap;
      gap: 20px;
      padding: 22px 12px
   }

   .svc-row.is-active {
      padding: 28px 12px
   }

   .svc-row__left {
      gap: 20px;
      flex: 1 1 100%
   }

   .svc-row.is-active .svc-row__title {
      font-size: 24px
   }

   .svc-row__title {
      font-size: 20px
   }

   .svc-row__right {
      flex: 1 1 100%;
      justify-content: space-between
   }

   .svc-row.is-active .svc-row__preview {
      width: 140px;
      height: 80px;
      margin-right: 16px
   }

   .svc-row__preview img {
      width: 140px
   }

   .svc-row__arrow {
      right: 12px
   }

   .svc-row::after {
      left: 12px;
      right: 12px
   }

   .tech__stage-wrap {
      height: calc(500px * var(--stage-scale, 1))
   }

   .project__title {
      white-space: normal
   }

   .project__visual {
      border-radius: 16px
   }

   .seq {
      flex: 1 1 100%
   }

   .seq__desc {
      white-space: normal
   }

   .tl-card {
      padding: 28px
   }

   .tl-card__title {
      white-space: normal
   }

   .showcase {
      border-radius: 24px
   }

   .showcase__copy {
      padding: 32px
   }

   .showcase__media {
      height: 240px;
      flex-basis: 240px
   }

   .quote__mark {
      font-size: 80px;
      height: 40px
   }

   .testimonial {
      padding: 80px var(--pad)
   }

   .testimonial__head {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px
   }

   .tcar__foot {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px
   }

   .proof {
      padding: 64px var(--pad)
   }

   .proof__logo {
      font-size: 17px;
      padding: 8px 10px
   }

   .faq-item {
      padding: 20px
   }

   .faq-item__q {
      font-size: 16px
   }

   .form {
      padding: 28px 20px;
      border-radius: 20px
   }

   .fields {
      grid-template-columns: 1fr
   }

   .option {
      padding: 18px 16px
   }

   .option__text {
      font-size: 15px
   }

   .form__foot {
      flex-direction: column;
      align-items: stretch
   }

   .form__note {
      white-space: normal;
      text-align: center
   }

   .form__actions {
      justify-content: center
   }

   .footer {
      padding: 88px var(--pad) 40px
   }

   .footer__inner {
      gap: 56px
   }

   .footer__cols {
      gap: 32px 40px
   }

   .footer__bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px
   }

   .contact__title {
      white-space: normal
   }
}

/* ---- Phone layout fixes ---- */
@media (max-width:768px) {

   html,
   body {
      overflow-x: hidden;
      overflow-x: clip
   }

   /* Hero: compact 700px fan that scales to the screen instead of being cropped */
   .hero__stage {
      width: 710px;
      height: 490px
   }

   .hero__stage-wrap {
      height: calc(490px * var(--stage-scale, 1))
   }

   .phone-pos--1 {
      left: 150px;
      top: 245px
   }

   .phone-pos--2 {
      left: 270px;
      top: 235px
   }

   .phone-pos--3 {
      left: 420px;
      top: 240px
   }

   .phone-pos--4 {
      left: 550px;
      top: 250px
   }

   /* Services: keep the chevron on the title line; let the active preview fill the row */
   .svc-row:not(.is-active) .svc-row__left {
      flex: 1 1 0
   }

   .svc-row:not(.is-active) .svc-row__right {
      flex: 0 0 auto
   }

   .svc-row.is-active .svc-row__preview {
      width: calc(100% - 56px);
      height: 110px;
      margin-right: 16px
   }

   .svc-row.is-active .svc-row__preview img {
      width: 100%
   }

   /* Tech stack: flow layout instead of the absolute constellation */
   .tech {
      overflow: hidden
   }

   .tech__stage-wrap {
      height: auto
   }

   .tech__stage {
      position: relative;
      left: auto;
      top: auto;
      width: 100%;
      height: auto;
      transform: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px
   }

   .tech__svg {
      display: none
   }

   .core {
      position: relative;
      left: auto;
      top: auto;
      flex: 0 0 100%;
      width: auto;
      max-width: 320px;
      margin: 0 auto 14px
   }

   .tnode,
   .tnode--flutter,
   .tnode--ios,
   .tnode--android,
   .tnode--python,
   .tnode--node,
   .tnode--cloud {
      position: static;
      left: auto;
      top: auto
   }

   /* Case studies: show the whole render, no side cropping */
   .project__visual {
      height: auto;
      aspect-ratio: 3/2
   }

   .project__visual img {
      inset: 0;
      height: 100%
   }
}

@media (max-width:480px) {
   .hero__title {
      letter-spacing: -.02em
   }

   .panel {
      flex: 0 0 84vw;
      width: 84vw
   }

   .btn {
      padding: 12px 18px
   }

   .tl-node {
      width: 88px;
      flex: 0 0 88px
   }

   .tl-track {
      left: 44px;
      right: 44px
   }

   .tl-card__title {
      font-size: 30px
   }

   .usecases__title {
      font-size: 24px
   }

   .footer__cols {
      flex-direction: column
   }

   .stat {
      padding-right: 12px
   }

   .stat:nth-child(even) {
      padding-left: 16px
   }

   .about__caption {
      left: 12px;
      bottom: 12px;
      font-size: 10px;
      padding: 7px 11px
   }
}


/* ============================================================
   PARENT COMPANY LINK STYLES
   ============================================================ */

/* "Avenore Global ↗" in COMPANY footer column */
.footer__link--parent {
   position: relative;
   color: var(--accent) !important;
   font-weight: 600;
   letter-spacing: 0.02em;
   display: inline-flex;
   align-items: center;
   gap: 4px;
   transition: opacity 0.2s;
}

.footer__link--parent::after {
   content: '';
   position: absolute;
   bottom: -2px;
   left: 0;
   width: 0;
   height: 1px;
   background: var(--accent);
   transition: width 0.25s var(--ease-out);
}

.footer__link--parent:hover::after {
   width: 100%;
}

.footer__link--parent:hover {
   opacity: 0.85;
}

/* "Part of Avenore." inline link in copyright bar */
.footer__parent-link {
   color: var(--accent);
   font-weight: 500;
   text-underline-offset: 3px;
   text-decoration: underline;
   text-decoration-color: rgba(139, 92, 246, 0.35);
   transition: text-decoration-color 0.2s, color 0.2s;
}

.footer__parent-link:hover {
   color: #a78bfa;
   text-decoration-color: rgba(167, 139, 250, 0.7);
}