:root {
   --bg: #05060F;
   --bg-soft: #0A0B1C;
   --surface: #12132A;
   --surface-2: #1B1830;
   --violet: #7C5CFF;
   --violet-dim: #4F3AAE;
   --teal: #2DD4BF;
   --blue: #2B3CFF;
   --blue-deep: #0E14A8;
   --lime: #D6FF3D;
   --text: #F1EFFA;
   --muted: #9096C4;
   --line: rgba(241, 239, 250, 0.09);
   --glass-line: rgba(255, 255, 255, 0.14);
   --radius: 14px;
 }

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

 html {
   scroll-behavior: smooth;
 }

 body {
   background: var(--bg);
   color: var(--text);
   font-family: 'Inter', sans-serif;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
 }

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

 ul {
   list-style: none;
 }

 @media (prefers-reduced-motion: reduce) {
   * {
     animation-duration: 0.001ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.001ms !important;
   }
 }

 .wrap {
   max-width: 1160px;
   margin: 0 auto;
   padding: 0 28px;
 }

 @media (max-width:480px) {
   .wrap {
     padding: 0 18px;
   }
 }

 ::selection {
   background: var(--violet);
   color: #fff;
 }

 a:focus-visible,
 button:focus-visible,
 input:focus-visible,
 textarea:focus-visible {
   outline: 2px solid var(--teal);
   outline-offset: 3px;
   border-radius: 4px;
 }

 /* background ambience: site's own violet/teal palette + uniform fine grid */
 .field {
   position: fixed;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background:
     radial-gradient(650px 460px at 15% 6%, rgba(124, 92, 255, 0.14), transparent 62%),
     radial-gradient(520px 400px at 85% 18%, rgba(45, 212, 191, 0.10), transparent 60%);
 }

 .field::after {
   content: "";
   position: absolute;
   inset: 0;
   background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.2px);
   background-size: 22px 22px;
   opacity: 0.6;
 }

 /* floating ambient blobs for a more alive, creative feel */
 .blob {
   position: fixed;
   z-index: 0;
   pointer-events: none;
   border-radius: 50%;
   filter: blur(70px);
   opacity: 0.35;
   will-change: transform;
 }

 .blob-1 {
   width: 420px;
   height: 420px;
   top: -10%;
   left: -8%;
   background: radial-gradient(circle, var(--violet), transparent 70%);
   animation: floatBlob1 22s ease-in-out infinite;
 }

 .blob-2 {
   width: 360px;
   height: 360px;
   bottom: -12%;
   right: -6%;
   background: radial-gradient(circle, var(--teal), transparent 70%);
   animation: floatBlob2 26s ease-in-out infinite;
 }

 .blob-3 {
   width: 300px;
   height: 300px;
   top: 45%;
   left: 60%;
   background: radial-gradient(circle, var(--lime), transparent 70%);
   opacity: 0.14;
   animation: floatBlob3 30s ease-in-out infinite;
 }

 @keyframes floatBlob1 {

   0%,
   100% {
     transform: translate(0, 0) scale(1);
   }

   33% {
     transform: translate(6vw, 8vh) scale(1.1);
   }

   66% {
     transform: translate(-4vw, 4vh) scale(0.95);
   }
 }

 @keyframes floatBlob2 {

   0%,
   100% {
     transform: translate(0, 0) scale(1);
   }

   50% {
     transform: translate(-7vw, -6vh) scale(1.15);
   }
 }

 @keyframes floatBlob3 {

   0%,
   100% {
     transform: translate(0, 0) scale(1);
   }

   50% {
     transform: translate(-8vw, 6vh) scale(1.2);
   }
 }

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

 @media (max-width:600px) {
   .blob-1 {
     width: 240px;
     height: 240px;
     filter: blur(50px);
   }

   .blob-2 {
     width: 220px;
     height: 220px;
     filter: blur(50px);
   }

   .blob-3 {
     width: 180px;
     height: 180px;
     filter: blur(50px);
   }
 }

 /* scroll-reveal fade-up */
 .reveal {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity .7s cubic-bezier(0.16, 1, 0.3, 1), transform .7s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .reveal.is-visible {
   opacity: 1;
   transform: translateY(0);
 }

 /* animated gradient shimmer on emphasized heading text */
 h1 em {
   background-size: 200% 200%;
   animation: gradientShimmer 6s ease infinite;
 }

 @keyframes gradientShimmer {
   0% {
     background-position: 0% 50%;
   }

   50% {
     background-position: 100% 50%;
   }

   100% {
     background-position: 0% 50%;
   }
 }

 /* SIGNATURE: cursor-follow glow — desktop only, subtle and premium */
 .cursor-glow {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 2;
   width: 420px;
   height: 420px;
   margin: -210px 0 0 -210px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(124, 92, 255, 0.16), rgba(45, 212, 191, 0.08) 45%, transparent 72%);
   filter: blur(10px);
   pointer-events: none;
   mix-blend-mode: screen;
   opacity: 0;
   transition: opacity .4s ease;
   transform: translate3d(-9999px, -9999px, 0);
   will-change: transform;
 }

 .cursor-glow.is-active {
   opacity: 1;
 }

 @media (hover:none),
 (pointer:coarse) {
   .cursor-glow {
     display: none;
   }
 }

 /* HEADER — floating glassy pill */
 .header-wrap {
   position: sticky;
   top: 18px;
   z-index: 50;
   padding: 0 20px;
 }

 header {
   max-width: 1160px;
   margin: 0 auto;
   position: relative;
   overflow: hidden;
   border-radius: 999px;
   border: 2px solid var(--glass-line);
   padding: 10px 0;
   background: rgba(18, 20, 50, 0.42);
   backdrop-filter: url(#glass-distortion) blur(4px) saturate(380%) brightness(2.1);
   -webkit-backdrop-filter: blur(22px) saturate(140%);
   box-shadow: 0 20px 60px rgba(2, 4, 30, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }

 .nav-glow {
   position: absolute;
   inset: -60% -10% auto -10%;
   height: 220%;
   background:
     radial-gradient(220px 160px at 20% 40%, rgba(124, 92, 255, 0.65), transparent 65%),
     radial-gradient(180px 140px at 55% 60%, rgba(45, 212, 191, 0.35), transparent 70%),
     radial-gradient(160px 120px at 85% 35%, rgba(124, 92, 255, 0.4), transparent 70%);
   filter: blur(30px);
   opacity: 0.9;
   pointer-events: none;
   animation: driftGlow 14s ease-in-out infinite;
 }

 @keyframes driftGlow {

   0%,
   100% {
     transform: translateX(0);
   }

   50% {
     transform: translateX(4%);
   }
 }

 .nav {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px 14px 16px 26px;
 }

 .logo {
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 700;
   font-size: 19px;
   letter-spacing: 0.01em;
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .logo-img {
   height: 30px;
   width: auto;
   filter: drop-shadow(0 0 10px rgba(124, 92, 255, 0.45));
 }

 .logo .mark {
   width: 9px;
   height: 9px;
   border-radius: 2px;
   background: linear-gradient(135deg, var(--violet), var(--teal));
   box-shadow: 0 0 12px rgba(124, 92, 255, 0.8);
 }

 .navlinks {
   display: flex;
   gap: 2px;
   font-size: 14px;
   color: var(--muted);
   letter-spacing: 0.02em;
 }

 .navlinks a {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 8px 13px;
   border-radius: 999px;
   text-transform: uppercase;
   font-size: 12.5px;
   font-family: 'JetBrains Mono', monospace;
   border: 1px solid transparent;
   transform-origin: center bottom;
   transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1), color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
 }

 .navlinks:hover a {
   transform: scale(0.94);
 }

 .navlinks a:hover {
   color: #0A0B1C;
   transform: scale(1.22) translateY(-3px) !important;
   background: linear-gradient(160deg, var(--lime), #b9e62f);
   border-color: var(--lime);
   box-shadow:
     inset 0 1px 2px rgba(255, 255, 255, 0.6),
     inset 0 -3px 6px rgba(0, 0, 0, 0.12),
     0 10px 22px rgba(214, 255, 61, 0.35);
   z-index: 5;
 }

 .navlinks a:hover+a {
   transform: scale(1.08) translateY(-1px);
 }

 .nav-right {
   display: flex;
   align-items: center;
   gap: 18px;
 }

 .status {
   display: flex;
   align-items: center;
   gap: 7px;
   font-family: 'JetBrains Mono', monospace;
   font-size: 12px;
   color: var(--text);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   cursor: pointer;
   padding: 6px 10px;
   border-radius: 999px;
   border: 1px solid transparent;
   background: transparent;
   transition: border-color .2s ease, background .2s ease, transform .2s ease;
 }

 .status:hover,
 .status.is-open {
   border-color: rgba(214, 255, 61, 0.35);
   background: rgba(214, 255, 61, 0.06);
   transform: translateY(-1px);
 }

 .status .dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--lime);
   box-shadow: 0 0 8px var(--lime);
   animation: pulse 2s infinite;
 }

 @keyframes pulse {

   0%,
   100% {
     opacity: 1;
   }

   50% {
     opacity: .35;
   }
 }

 .btn {
   font-family: 'Inter', sans-serif;
   font-weight: 600;
   font-size: 14px;
   padding: 10px 20px;
   border-radius: 999px;
   border: 1px solid transparent;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   transition: transform .18s, box-shadow .18s, background .18s;
   cursor: pointer;
 }

 .btn-primary {
   background: linear-gradient(135deg, var(--violet), #6A4CFF);
   color: #fff;
   box-shadow: 0 0 0 rgba(124, 92, 255, 0);
 }

 .btn-primary:hover {
   transform: translateY(-1px);
   box-shadow: 0 6px 24px rgba(124, 92, 255, 0.45);
 }

 .btn-ghost {
   border-color: var(--line);
   color: var(--text);
   background: transparent;
 }

 .btn-ghost:hover {
   border-color: var(--violet);
 }

 .btn-lime {
   background: var(--lime);
   color: #0A0B1C;
   font-weight: 700;
   box-shadow: 0 0 0 rgba(214, 255, 61, 0);
 }

 .btn-lime:hover {
   transform: translateY(-1px);
   box-shadow: 0 8px 26px rgba(214, 255, 61, 0.4);
 }

 .eyebrow-under-nav {
   display: flex;
   align-items: center;
   gap: 12px;
   font-family: 'JetBrains Mono', monospace;
   font-size: 12px;
   color: var(--text);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   padding: 14px 34px 0;
   max-width: 1160px;
   margin: 0 auto;
 }

 @media (max-width:480px) {
   .eyebrow-under-nav {
     padding: 14px 18px 0;
     font-size: 10.5px;
     letter-spacing: 0.08em;
   }
 }

 .eyebrow-under-nav::before {
   content: "";
   width: 30px;
   height: 2px;
   background: var(--lime);
   box-shadow: 0 0 8px var(--lime);
 }

 @media (max-width:820px) {
   .navlinks {
     display: none;
   }
 }

 @media (max-width:480px) {
   .nav {
     padding: 12px 10px 12px 16px;
   }

   .logo {
     font-size: 14.5px;
     gap: 6px;
   }

   .logo-img {
     height: 22px;
   }

   .nav-right {
     gap: 8px;
   }

   .status {
     padding: 6px 8px;
     gap: 5px;
   }

   .status .status-label {
     display: none;
   }
 }

 /* HAMBURGER (mobile only) */
 .hamburger {
   display: none;
   flex-direction: column;
   justify-content: center;
   gap: 5px;
   width: 38px;
   height: 38px;
   padding: 0;
   background: transparent;
   border: 1px solid var(--glass-line);
   border-radius: 10px;
   cursor: pointer;
 }

 .hamburger span {
   display: block;
   width: 16px;
   height: 2px;
   margin: 0 auto;
   background: var(--text);
   border-radius: 2px;
   transition: transform .25s, opacity .25s;
 }

 .hamburger.is-open span:nth-child(1) {
   transform: translateY(7px) rotate(45deg);
 }

 .hamburger.is-open span:nth-child(2) {
   opacity: 0;
 }

 .hamburger.is-open span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg);
 }

 @media (max-width:820px) {
   .hamburger {
     display: flex;
   }

   .btn.btn-lime {
     padding: 9px 16px;
     font-size: 13px;
   }
 }

 @media (max-width:480px) {
   .btn.btn-lime {
     padding: 8px 12px;
     font-size: 12px;
   }
 }

 /* MOBILE DRAWER */
 .drawer-overlay {
   position: fixed;
   inset: 0;
   z-index: 90;
   background: rgba(2, 3, 10, 0.6);
   backdrop-filter: blur(3px);
   opacity: 0;
   pointer-events: none;
   transition: opacity .3s;
 }

 .drawer-overlay.is-open {
   opacity: 1;
   pointer-events: auto;
 }

 .mobile-drawer {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   z-index: 95;
   width: min(300px, 82vw);
   background: var(--bg);
   border-left: 1px solid var(--line);
   box-shadow: -16px 0 40px rgba(2, 4, 30, 0.4);
   transform: translateX(100%);
   transition: transform .3s ease;
   display: flex;
   flex-direction: column;
   padding: 22px 22px 26px;
 }

 .mobile-drawer.is-open {
   transform: translateX(0);
 }

 .drawer-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-bottom: 18px;
   margin-bottom: 22px;
   border-bottom: 1px solid var(--line);
 }

 .drawer-top .logo {
   font-size: 16px;
   gap: 8px;
 }

 .drawer-top .logo-img {
   height: 22px;
 }

 .drawer-close {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   border: none;
   background: transparent;
   color: var(--muted);
   font-size: 14px;
   cursor: pointer;
   transition: color .2s;
 }

 .drawer-close:hover {
   color: var(--text);
 }

 .drawer-links {
   display: flex;
   flex-direction: column;
   gap: 2px;
   flex: 1;
 }

 .drawer-links a {
   font-family: 'Inter', sans-serif;
   font-weight: 500;
   font-size: 16px;
   color: var(--muted);
   padding: 13px 10px;
   border-radius: 9px;
   transition: color .2s, background .2s;
 }

 .drawer-links a:hover {
   color: var(--text);
   background: rgba(255, 255, 255, 0.04);
 }

 .drawer-cta {
   width: 100%;
   justify-content: center;
   margin-top: 16px;
   padding: 12px 20px;
   font-size: 14px;
 }

 @media (min-width:821px) {

   .drawer-overlay,
   .mobile-drawer {
     display: none;
   }
 }

 /* HERO */
 .hero {
   position: relative;
   z-index: 1;
   padding: 96px 0 40px;
   overflow: hidden;
 }

 @media (max-width:600px) {
   .hero {
     padding: 78px 0 30px;
   }
 }

 .hero-video {
   position: absolute;
   top: -8%;
   left: 0;
   width: 100%;
   height: 116%;
   object-fit: cover;
   z-index: -2;
   opacity: 0.52;
   filter: saturate(0.7) hue-rotate(220deg) brightness(1.05);
   pointer-events: none;
 }

 .hero-video-overlay {
   position: absolute;
   inset: -8% 0 auto 0;
   height: 116%;
   z-index: -1;
   background:
     linear-gradient(180deg, var(--bg) 0%, rgba(5, 6, 15, 0.4) 40%, var(--bg) 100%),
     radial-gradient(700px 500px at 15% 20%, rgba(124, 92, 255, 0.25), transparent 65%),
     radial-gradient(600px 460px at 85% 15%, rgba(45, 212, 191, 0.15), transparent 65%);
   pointer-events: none;
 }

 .eyebrow {
   font-family: 'JetBrains Mono', monospace;
   font-size: 12.5px;
   color: var(--teal);
   letter-spacing: 0.08em;
   text-transform: uppercase;
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 22px;
 }

 .eyebrow::before {
   content: "";
   width: 26px;
   height: 1px;
   background: var(--teal);
 }

 h1 {
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 600;
   font-size: clamp(38px, 6vw, 68px);
   line-height: 1.03;
   letter-spacing: -0.02em;
   max-width: 820px;
 }

 h1 em {
   font-style: normal;
   background: linear-gradient(120deg, var(--violet), var(--teal));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 .hero-sub {
   margin-top: 22px;
   font-size: 17px;
   color: var(--muted);
   max-width: 520px;
   line-height: 1.6;
 }

 .hero-cta {
   margin-top: 34px;
   display: flex;
   gap: 16px;
   align-items: center;
   flex-wrap: wrap;
 }

 .hero-note {
   font-size: 13px;
   color: var(--muted);
   font-family: 'JetBrains Mono', monospace;
 }

 /* live ticker — signature element */
 .ticker {
   margin-top: 64px;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
   overflow: hidden;
 }

 .ticker-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 20px;
   border-bottom: 1px solid var(--line);
   font-family: 'JetBrains Mono', monospace;
   font-size: 11.5px;
   color: var(--muted);
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }

 .ticker-head .dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--teal);
   animation: pulse 2s infinite;
 }

 .ticker-row {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
 }

 .tick {
   padding: 22px 22px;
   border-right: 1px solid var(--line);
 }

 .tick:last-child {
   border-right: none;
 }

 .tick-label {
   font-size: 11.5px;
   color: var(--muted);
   font-family: 'JetBrains Mono', monospace;
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }

 .tick-val {
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 600;
   font-size: clamp(20px, 2.4vw, 30px);
   margin-top: 8px;
   display: flex;
   align-items: baseline;
   gap: 6px;
 }

 .tick-val .unit {
   font-size: 14px;
   color: var(--muted);
   font-weight: 400;
   font-family: 'Inter', sans-serif;
 }

 .tick-up {
   color: var(--teal);
   font-size: 12px;
   margin-top: 4px;
   font-family: 'JetBrains Mono', monospace;
 }

 @media (max-width:720px) {
   .ticker-row {
     grid-template-columns: repeat(2, 1fr);
   }

   .tick:nth-child(2) {
     border-right: none;
   }
 }

 @media (max-width:480px) {
   .tick {
     padding: 16px 14px;
   }

   .ticker-head {
     padding: 10px 14px;
   }

   .hero-cta {
     margin-top: 26px;
     gap: 12px;
   }

   .hero-cta .btn {
     width: 100%;
     justify-content: center;
   }

   .hero-note {
     width: 100%;
     text-align: center;
   }
 }

 /* DOMAINS marquee */
 .domains {
   position: relative;
   z-index: 1;
   padding: 70px 0 40px;
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   margin-top: 70px;
 }

 @media (max-width:600px) {
   .domains {
     padding: 48px 0 30px;
     margin-top: 48px;
   }
 }

 .domains-head {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 36px;
   flex-wrap: wrap;
   gap: 16px;
 }

 .domains-head h2 {
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 600;
   font-size: clamp(24px, 3vw, 34px);
   max-width: 480px;
   line-height: 1.15;
 }

 .domains-head a {
   font-size: 14px;
   color: var(--teal);
   display: flex;
   align-items: center;
   gap: 5px;
 }

 .marquee {
   position: relative;
   overflow: hidden;
   padding: 6px 0 22px;
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
   mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
 }

 /* soft grounding reflection so the tube feels like it's resting, not floating */
 .marquee::after {
   content: "";
   position: absolute;
   left: 6%;
   right: 6%;
   bottom: 2px;
   height: 14px;
   background: radial-gradient(ellipse at center, rgba(124, 92, 255, 0.22), transparent 75%);
   filter: blur(6px);
   pointer-events: none;
 }

 .marquee-track {
   display: flex;
   gap: 14px;
   width: max-content;
   animation: scroll 32s linear infinite;
 }

 .marquee:hover .marquee-track {
   animation-play-state: paused;
 }

 @keyframes scroll {
   from {
     transform: translateX(0);
   }

   to {
     transform: translateX(-50%);
   }
 }

 .pill {
   font-family: 'JetBrains Mono', monospace;
   font-size: 16.5px;
   padding: 20px 34px;
   border: 1px solid rgba(255, 255, 255, 0.22);
   border-radius: 999px;
   white-space: nowrap;
   color: rgba(255, 255, 255, 0.94);
   position: relative;
   overflow: hidden;
   isolation: isolate;
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 42%, rgba(0, 0, 0, 0.18) 100%),
     linear-gradient(120deg, rgba(124, 92, 255, 0.30), rgba(45, 212, 191, 0.22));
   backdrop-filter: blur(14px) saturate(160%);
   -webkit-backdrop-filter: blur(14px) saturate(160%);
   box-shadow:
     inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
     inset 0 -10px 16px rgba(0, 0, 0, 0.35),
     inset 0 0 0 1px rgba(255, 255, 255, 0.04),
     0 10px 26px rgba(2, 4, 30, 0.5);
   transition: border-color .25s, box-shadow .3s, transform .25s;
 }

 /* cylindrical glass highlight streak — the "tube" shine across the top */
 .pill::before {
   content: "";
   position: absolute;
   top: 3px;
   left: 6%;
   right: 6%;
   height: 42%;
   border-radius: 999px 999px 60% 60% / 100% 100% 30% 30%;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 100%);
   opacity: 0.65;
   pointer-events: none;
   z-index: 1;
   filter: blur(0.3px);
 }

 /* moving light sweep across the glass surface, like light catching a tube */
 .pill::after {
   content: "";
   position: absolute;
   inset: -15% -40%;
   pointer-events: none;
   z-index: 0;
   background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.28) 50%, transparent 58%);
   background-size: 60% 100%;
   background-repeat: no-repeat;
   animation: pillSweep 5s ease-in-out infinite;
 }

 /* stagger the sweep per pill so the whole tube doesn't flash light in unison */
 .pill:nth-child(3n+1)::after {
   animation-delay: 0s;
 }

 .pill:nth-child(3n+2)::after {
   animation-delay: -1.6s;
 }

 .pill:nth-child(3n)::after {
   animation-delay: -3.2s;
 }

 @keyframes pillSweep {
   0% {
     background-position: -120% 0;
   }

   45%,
   100% {
     background-position: 220% 0;
   }
 }

 /* rounded glass end-caps, like light catching the curved rim of a tube */
 .pill-cap {
   position: absolute;
   top: 2px;
   bottom: 2px;
   width: 16px;
   pointer-events: none;
   z-index: 2;
   opacity: 0.55;
 }

 .pill-cap-l {
   left: 2px;
   border-radius: 999px 0 0 999px;
   background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), transparent);
 }

 .pill-cap-r {
   right: 2px;
   border-radius: 0 999px 999px 0;
   background: linear-gradient(270deg, rgba(255, 255, 255, 0.32), transparent);
 }

 .pill:hover {
   border-color: rgba(214, 255, 61, 0.6);
   transform: translateY(-2px);
   box-shadow:
     inset 0 1.5px 0 rgba(255, 255, 255, 0.65),
     inset 0 -10px 16px rgba(0, 0, 0, 0.35),
     inset 0 0 0 1px rgba(214, 255, 61, 0.15),
     0 14px 32px rgba(214, 255, 61, 0.18), 0 10px 26px rgba(2, 4, 30, 0.5);
 }

 .pill b {
   color: #fff;
   font-weight: 700;
   position: relative;
   z-index: 2;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 24px;
   padding: 2px 6px;
   margin-right: 2px;
   border-radius: 999px;
   font-size: 12px;
   background: rgba(255, 255, 255, 0.1);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
 }

 .pill>* {
   position: relative;
   z-index: 2;
 }

 @media (max-width:600px) {
   .pill {
     padding: 14px 22px;
     font-size: 14px;
   }
 }

 /* WHY / cards */
 .why {
   position: relative;
   z-index: 1;
   padding: 90px 0;
 }

 @media (max-width:600px) {
   .why {
     padding: 56px 0;
   }
 }

 .section-head {
   max-width: 640px;
   margin-bottom: 50px;
 }

 .section-head .eyebrow {
   margin-bottom: 16px;
 }

 .section-head h2 {
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 600;
   font-size: clamp(26px, 3.6vw, 38px);
   line-height: 1.18;
 }

 .section-head p {
   color: var(--muted);
   margin-top: 16px;
   font-size: 15.5px;
   line-height: 1.7;
 }

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

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

 .card {
   padding: 30px 26px;
   border-radius: var(--radius);
   border: 1px solid var(--line);
   background: linear-gradient(180deg, var(--surface), var(--bg-soft));
   position: relative;
   overflow: hidden;
   transition: border-color .25s, transform .25s;
 }

 .card-video {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 0;
   opacity: 0.16;
   filter: saturate(0.5) hue-rotate(220deg) brightness(0.8);
   pointer-events: none;
 }

 .card:hover {
   border-color: var(--violet-dim);
   transform: translateY(-3px);
 }

 .card::before {
   content: "";
   position: absolute;
   inset: -15% -5%;
   pointer-events: none;
   background-image:
     radial-gradient(38% 50px at 15% 40%, rgba(255, 255, 255, 0.12), transparent 72%);
   background-size: 700px 100%;
   background-repeat: repeat-x;
   background-position-x: 0px;
   filter: blur(20px);
   mix-blend-mode: screen;
   opacity: 0.6;
   animation: smokeLR 26s linear infinite;
 }

 @keyframes smokeLR {
   from {
     background-position-x: 0px;
   }

   to {
     background-position-x: 700px;
   }
 }

 @keyframes smokeLRSmall {
   from {
     background-position-x: 0px;
   }

   to {
     background-position-x: 320px;
   }
 }

 @keyframes smokeLRWide {
   from {
     background-position-x: 0px;
   }

   to {
     background-position-x: 900px;
   }
 }

 .card::after {
   content: "";
   position: absolute;
   top: -40%;
   right: -30%;
   width: 220px;
   height: 220px;
   background: radial-gradient(circle, rgba(124, 92, 255, 0.18), transparent 70%);
   opacity: 0;
   transition: opacity .3s;
 }

 .card:hover::after {
   opacity: 1;
 }

 .card-index {
   position: relative;
   z-index: 1;
   font-family: 'JetBrains Mono', monospace;
   font-size: 12px;
   color: var(--teal);
   letter-spacing: 0.05em;
 }

 .card h3 {
   position: relative;
   z-index: 1;
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 600;
   font-size: 19px;
   margin-top: 16px;
 }

 .card p {
   position: relative;
   z-index: 1;
   color: var(--muted);
   font-size: 14.5px;
   margin-top: 10px;
   line-height: 1.65;
 }

 /* full-width "why choose us" summary card */
 .card-wide {
   margin-top: 20px;
   padding: 38px 40px;
   border-radius: var(--radius);
   border: 1px solid rgba(214, 255, 61, 0.28);
   background:
     linear-gradient(135deg, rgba(214, 255, 61, 0.07), transparent 60%),
     linear-gradient(180deg, var(--surface), var(--bg-soft));
   position: relative;
   overflow: hidden;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 30px;
   flex-wrap: wrap;
 }

 .card-wide::before {
   content: "";
   position: absolute;
   inset: -15% -5%;
   pointer-events: none;
   background-image:
     radial-gradient(24% 60px at 10% 35%, rgba(255, 255, 255, 0.10), transparent 72%);
   background-size: 900px 100%;
   background-repeat: repeat-x;
   background-position-x: 0px;
   filter: blur(24px);
   mix-blend-mode: screen;
   opacity: 0.6;
   animation: smokeLRWide 32s linear infinite;
 }

 .card-wide-text {
   position: relative;
   z-index: 1;
   max-width: 620px;
 }

 .card-wide .card-index {
   color: var(--lime);
 }

 .card-wide h3 {
   position: relative;
   z-index: 1;
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 600;
   font-size: 22px;
   margin-top: 14px;
 }

 .card-wide p {
   position: relative;
   z-index: 1;
   color: var(--muted);
   font-size: 15px;
   margin-top: 10px;
   line-height: 1.7;
 }

 .card-wide .btn {
   position: relative;
   z-index: 1;
   flex-shrink: 0;
 }

 @media (max-width:600px) {
   .card-wide {
     padding: 26px 22px;
   }

   .card-wide .btn {
     width: 100%;
     justify-content: center;
   }
 }

 /* BLOG */
 .blog {
   position: relative;
   z-index: 1;
   padding: 90px 0;
 }

 @media (max-width:600px) {
   .blog {
     padding: 56px 0;
   }
 }

 .blog-head {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 30px;
   max-width: none;
   margin-bottom: 50px;
   flex-wrap: wrap;
 }

 .blog-head .heading {
   max-width: 640px;
 }

 .blog-head .eyebrow {
   margin-bottom: 16px;
 }

 .blog-head h2 {
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 600;
   font-size: clamp(26px, 3.6vw, 38px);
   line-height: 1.18;
 }

 .blog-head p {
   color: var(--muted);
   margin-top: 16px;
   font-size: 15.5px;
   line-height: 1.7;
   max-width: 520px;
 }

 .blog-head>a {
   flex-shrink: 0;
   font-family: 'JetBrains Mono', monospace;
   font-size: 13px;
   color: var(--teal);
   border: 1px solid var(--line);
   padding: 10px 18px;
   border-radius: 999px;
   transition: border-color .2s, color .2s;
 }

 .blog-head>a:hover {
   border-color: var(--teal);
 }

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

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

 .blog-card {
   display: block;
   border-radius: var(--radius);
   border: 1px solid var(--line);
   background: linear-gradient(180deg, var(--surface), var(--bg-soft));
   overflow: hidden;
   transition: border-color .25s, transform .25s;
 }

 .blog-card:hover {
   border-color: var(--violet-dim);
   transform: translateY(-3px);
 }

 .blog-thumb {
   position: relative;
   height: 170px;
   background:
     radial-gradient(160% 140% at 20% -10%, rgba(124, 92, 255, 0.55), transparent 55%),
     radial-gradient(120% 120% at 100% 120%, rgba(45, 212, 191, 0.4), transparent 55%),
     var(--bg-soft);
   overflow: hidden;
 }

 .blog-thumb::after {
   content: "";
   position: absolute;
   inset: 0;
   background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.2px);
   background-size: 16px 16px;
   opacity: 0.5;
 }

 .blog-thumb-index {
   position: absolute;
   bottom: 14px;
   left: 18px;
   z-index: 1;
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 700;
   font-size: 34px;
   color: rgba(241, 239, 250, 0.16);
 }

 .blog-tag {
   position: absolute;
   top: 14px;
   left: 18px;
   z-index: 1;
   font-family: 'JetBrains Mono', monospace;
   font-size: 11px;
   color: #0A0B1C;
   background: var(--lime);
   padding: 4px 10px;
   border-radius: 999px;
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }

 .blog-body {
   padding: 22px 24px 26px;
 }

 .blog-meta {
   display: flex;
   gap: 10px;
   align-items: center;
   font-family: 'JetBrains Mono', monospace;
   font-size: 11.5px;
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   margin-bottom: 12px;
 }

 .blog-meta span:not(:last-child)::after {
   content: "·";
   margin-left: 10px;
   color: var(--line);
 }

 .blog-body h3 {
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 600;
   font-size: 18px;
   line-height: 1.3;
 }

 .blog-body p {
   color: var(--muted);
   font-size: 14px;
   margin-top: 10px;
   line-height: 1.65;
 }

 .blog-readmore {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-top: 16px;
   font-family: 'JetBrains Mono', monospace;
   font-size: 12.5px;
   color: var(--teal);
 }

 /* REVIEWS */
 .reviews {
   position: relative;
   z-index: 1;
   padding: 90px 0;
 }

 @media (max-width:600px) {
   .reviews {
     padding: 56px 0;
   }
 }

 .reviews .section-head {
   max-width: 640px;
   margin-bottom: 50px;
 }

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

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

 .review-card {
   padding: 28px 26px;
   border-radius: var(--radius);
   border: 1px solid var(--line);
   background: linear-gradient(180deg, var(--surface), var(--bg-soft));
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: 16px;
   transition: border-color .25s, transform .25s;
 }

 .review-card:hover {
   border-color: rgba(214, 255, 61, 0.3);
   transform: translateY(-3px);
 }

 .review-stars {
   color: var(--lime);
   font-size: 14px;
   letter-spacing: 2px;
 }

 .review-quote {
   color: var(--text);
   font-size: 14.5px;
   line-height: 1.7;
   flex-grow: 1;
 }

 .review-author {
   display: flex;
   align-items: center;
   gap: 12px;
   padding-top: 6px;
   border-top: 1px solid var(--line);
 }

 .review-avatar {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 700;
   font-size: 13px;
   color: #0A0B1C;
   background: linear-gradient(135deg, var(--teal), var(--violet));
 }

 .review-author-info {
   line-height: 1.35;
 }

 .review-name {
   font-size: 13.5px;
   font-weight: 600;
 }

 .review-role {
   font-size: 12px;
   color: var(--muted);
   font-family: 'JetBrains Mono', monospace;
 }

 /* CONTACT / form */
 .contact {
   position: relative;
   z-index: 1;
   padding: 90px 0 110px;
   border-top: 1px solid var(--line);
 }

 @media (max-width:600px) {
   .contact {
     padding: 56px 0 64px;
   }
 }

 .contact-grid {
   display: grid;
   grid-template-columns: 0.9fr 1.1fr;
   gap: 60px;
 }

 @media (max-width:880px) {
   .contact-grid {
     grid-template-columns: 1fr;
     gap: 40px;
   }
 }

 .contact-info h2 {
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 600;
   font-size: clamp(26px, 3.6vw, 36px);
   line-height: 1.2;
 }

 .contact-info p {
   color: var(--muted);
   margin-top: 18px;
   font-size: 15px;
   line-height: 1.7;
   max-width: 400px;
 }

 .info-list {
   margin-top: 34px;
   display: flex;
   flex-direction: column;
   gap: 16px;
 }

 .info-row {
   display: flex;
   justify-content: space-between;
   padding: 14px 0;
   border-bottom: 1px solid var(--line);
   font-size: 14.5px;
 }

 .info-row span:first-child {
   color: var(--muted);
   font-family: 'JetBrains Mono', monospace;
   font-size: 12.5px;
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }

 .socials {
   display: flex;
   gap: 12px;
   margin-top: 26px;
 }

 .social-chip {
   padding: 8px 16px;
   border: 1px solid var(--line);
   border-radius: 999px;
   font-size: 13px;
   color: var(--muted);
   transition: color .2s, border-color .2s;
 }

 .social-chip:hover {
   color: var(--teal);
   border-color: var(--teal);
 }

 form {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 30px;
   display: flex;
   flex-direction: column;
   gap: 16px;
 }

 @media (max-width:480px) {
   form {
     padding: 20px;
   }
 }

 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
 }

 @media (max-width:520px) {
   .form-row {
     grid-template-columns: 1fr;
   }
 }

 label {
   font-family: 'JetBrains Mono', monospace;
   font-size: 11.5px;
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   display: block;
   margin-bottom: 7px;
 }

 input,
 textarea {
   width: 100%;
   background: var(--bg-soft);
   border: 1px solid var(--line);
   border-radius: 9px;
   padding: 12px 14px;
   color: var(--text);
   font-family: 'Inter', sans-serif;
   font-size: 14.5px;
   transition: border-color .2s;
 }

 input:focus,
 textarea:focus {
   border-color: var(--violet);
 }

 textarea {
   resize: vertical;
   min-height: 90px;
 }

 form .btn {
   margin-top: 6px;
   justify-content: center;
   width: 100%;
 }

 /* FOOTER */
 footer {
   position: relative;
   z-index: 1;
   border-top: 1px solid var(--line);
   padding: 44px 0;
 }

 .foot-grid {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 20px;
 }

 .foot-links {
   display: flex;
   gap: 26px;
   font-size: 13.5px;
   color: var(--muted);
   flex-wrap: wrap;
 }

 .foot-links a:hover {
   color: var(--text);
 }

 .copyright {
   font-size: 12.5px;
   color: var(--muted);
   font-family: 'JetBrains Mono', monospace;
 }

 @media (max-width:600px) {
   .foot-grid {
     flex-direction: column;
     text-align: center;
   }

   .foot-links {
     gap: 14px 18px;
     justify-content: center;
   }
 }

 /* AVAILABILITY / TEAM MODAL */
 .team-overlay {
   position: fixed;
   inset: 0;
   z-index: 120;
   background: rgba(2, 3, 10, 0.65);
   backdrop-filter: blur(4px);
   opacity: 0;
   pointer-events: none;
   transition: opacity .3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
 }

 .team-overlay.is-open {
   opacity: 1;
   pointer-events: auto;
 }

 .team-modal {
   position: relative;
   width: 100%;
   max-width: 460px;
   max-height: 86vh;
   overflow-y: auto;
   background: rgba(18, 20, 50, 0.92);
   border: 1px solid var(--glass-line);
   border-radius: 20px;
   box-shadow: 0 30px 80px rgba(2, 4, 30, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
   padding: 28px 26px 26px;
   transform: translateY(16px) scale(0.97);
   opacity: 0;
   transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), opacity .3s ease;
 }

 .team-overlay.is-open .team-modal {
   transform: translateY(0) scale(1);
   opacity: 1;
 }

 .team-modal-head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 16px;
   margin-bottom: 22px;
 }

 .team-modal-head h3 {
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 600;
   font-size: 20px;
   display: flex;
   align-items: center;
   gap: 9px;
 }

 .team-modal-head h3 .dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--lime);
   box-shadow: 0 0 8px var(--lime);
   animation: pulse 2s infinite;
   flex-shrink: 0;
 }

 .team-modal-head p {
   color: var(--muted);
   font-size: 13px;
   margin-top: 6px;
   line-height: 1.5;
 }

 .team-modal-close {
   width: 32px;
   height: 32px;
   flex-shrink: 0;
   border-radius: 50%;
   border: 1px solid var(--line);
   background: transparent;
   color: var(--muted);
   font-size: 14px;
   cursor: pointer;
   transition: color .2s, border-color .2s, background .2s;
 }

 .team-modal-close:hover {
   color: var(--text);
   border-color: var(--violet);
   background: rgba(124, 92, 255, 0.1);
 }

 .team-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 22px;
 }

 .team-member {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 11px 12px;
   border-radius: 12px;
   border: 1px solid var(--line);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
   transition: border-color .2s, background .2s, transform .2s;
 }

 .team-member:hover {
   border-color: rgba(124, 92, 255, 0.4);
   background: rgba(124, 92, 255, 0.06);
   transform: translateX(2px);
 }

 .team-avatar {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 700;
   font-size: 12.5px;
   color: #0A0B1C;
   background: linear-gradient(135deg, var(--teal), var(--violet));
 }

 .team-member-info {
   flex: 1;
   min-width: 0;
 }

 .team-name-row {
   display: flex;
   align-items: baseline;
   gap: 8px;
   flex-wrap: wrap;
 }

 .team-name {
   font-size: 14px;
   font-weight: 600;
   color: var(--text);
 }

 .team-role {
   font-size: 10.5px;
   font-weight: 600;
   color: var(--teal);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   padding: 2px 8px;
   border-radius: 999px;
   background: rgba(45, 212, 191, 0.1);
   border: 1px solid rgba(45, 212, 191, 0.25);
   white-space: nowrap;
 }

 .team-email {
   font-size: 12.5px;
   color: var(--muted);
   font-family: 'JetBrains Mono', monospace;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   margin-top: 2px;
   transition: color .2s;
 }

 .team-member:hover .team-email {
   color: var(--teal);
 }

 .team-copy {
   flex-shrink: 0;
   width: 28px;
   height: 28px;
   border-radius: 8px;
   border: 1px solid var(--line);
   background: transparent;
   color: var(--muted);
   font-size: 12px;
   cursor: pointer;
   transition: color .2s, border-color .2s, background .2s;
 }

 .team-copy:hover {
   color: var(--lime);
   border-color: var(--lime);
   background: rgba(214, 255, 61, 0.08);
 }

 .team-copy.is-copied {
   color: var(--lime);
   border-color: var(--lime);
 }

 .team-common {
   border-top: 1px solid var(--line);
   padding-top: 18px;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .team-common-label {
   font-family: 'JetBrains Mono', monospace;
   font-size: 11px;
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: 0.06em;
   margin-bottom: 2px;
 }

 .team-common-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   padding: 10px 12px;
   border-radius: 10px;
   background: var(--bg-soft);
   border: 1px solid var(--line);
 }

 .team-common-row a {
   font-size: 13.5px;
   color: var(--text);
   font-family: 'JetBrains Mono', monospace;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 .team-common-row a:hover {
   color: var(--teal);
 }

 @media (max-width:480px) {
   .team-modal {
     padding: 22px 18px 20px;
     max-height: 80vh;
   }

   .team-modal-head h3 {
     font-size: 18px;
   }
 }


 /* PAGE LOADER — trendy, on-brand, fades out once ready */
 #pageLoader {
   position: fixed;
   inset: 0;
   z-index: 999;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--bg);
   transition: opacity .6s ease, visibility .6s ease;
 }

 #pageLoader.is-hidden {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
 }

 .loader-inner {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 22px;
 }

 .loader-mark {
   position: relative;
   width: 64px;
   height: 64px;
 }

 .loader-ring {
   position: absolute;
   inset: 0;
   border-radius: 50%;
   border: 2.5px solid transparent;
   border-top-color: var(--violet);
   border-right-color: var(--teal);
   animation: loaderSpin 1s linear infinite;
 }

 .loader-ring::after {
   content: "";
   position: absolute;
   inset: 8px;
   border-radius: 50%;
   border: 2.5px solid transparent;
   border-bottom-color: var(--lime);
   animation: loaderSpinReverse 0.7s linear infinite;
 }

 .loader-dot {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 8px;
   height: 8px;
   margin: -4px 0 0 -4px;
   border-radius: 50%;
   background: var(--text);
   box-shadow: 0 0 14px rgba(241, 239, 250, 0.7);
 }

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

 @keyframes loaderSpinReverse {
   to {
     transform: rotate(-360deg);
   }
 }

 .loader-text {
   font-family: 'JetBrains Mono', monospace;
   font-size: 12px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--muted);
   display: flex;
   align-items: center;
   gap: 2px;
 }

 .loader-text .dotAnim {
   animation: loaderDots 1.4s infinite;
   opacity: 0;
 }

 .loader-text .dotAnim:nth-child(2) {
   animation-delay: 0.2s;
 }

 .loader-text .dotAnim:nth-child(3) {
   animation-delay: 0.4s;
 }

 @keyframes loaderDots {

   0%,
   100% {
     opacity: 0;
   }

   50% {
     opacity: 1;
   }
 }

 .loader-bar {
   width: 160px;
   height: 2px;
   background: rgba(241, 239, 250, 0.08);
   border-radius: 2px;
   overflow: hidden;
 }

 .loader-bar-fill {
   height: 100%;
   width: 40%;
   background: linear-gradient(90deg, var(--violet), var(--teal), var(--lime));
   border-radius: 2px;
   animation: loaderBar 1.2s ease-in-out infinite;
 }

 @keyframes loaderBar {
   0% {
     transform: translateX(-100%);
   }

   100% {
     transform: translateX(350%);
   }
 }

 @media (prefers-reduced-motion: reduce) {

   .loader-ring,
   .loader-ring::after,
   .loader-bar-fill,
   .loader-text .dotAnim {
     animation: none;
   }
 }

 /* ---------- FEATURED POST ---------- */
 .featured {
   display: grid;
   grid-template-columns: 1.1fr 1fr;
   gap: 40px;
   align-items: center;
   padding: 48px 0;
   border-bottom: 1px solid var(--line);
 }

 .featured-media {
   aspect-ratio: 16/11;
   border-radius: var(--radius);
   background:
     radial-gradient(circle at 25% 20%, rgba(140, 124, 255, 0.28), transparent 60%),
     radial-gradient(circle at 80% 85%, rgba(63, 224, 208, 0.20), transparent 55%),
     linear-gradient(160deg, var(--surface-2), var(--surface));
   border: 1px solid var(--line);
   position: relative;
   overflow: hidden;
 }

 .featured-media::after {
   content: '01 / FEATURED';
   position: absolute;
   bottom: 16px;
   left: 16px;
   font-family: 'JetBrains Mono', monospace;
   font-size: 11px;
   color: var(--muted);
   letter-spacing: 0.08em;
 }

 .kicker {
   font-family: 'JetBrains Mono', monospace;
   font-size: 12px;
   color: var(--teal);
   letter-spacing: 0.06em;
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 14px;
   text-transform: uppercase;
 }

 .kicker::before {
   content: '';
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--teal);
   box-shadow: 0 0 8px var(--teal);
 }

 .featured-copy h2 {
   font-family: 'Space Grotesk', sans-serif;
   font-size: clamp(1.6rem, 2.6vw, 2.1rem);
   font-weight: 700;
   letter-spacing: -0.01em;
   margin-bottom: 14px;
   line-height: 1.15;
 }

 .featured-copy p {
   color: var(--muted);
   font-size: 15px;
   margin-bottom: 22px;
   max-width: 460px;
 }

 .meta-row {
   display: flex;
   gap: 14px;
   align-items: center;
   font-family: 'JetBrains Mono', monospace;
   font-size: 12px;
   color: var(--muted);
   margin-bottom: 20px;
 }

 .meta-row .dot {
   width: 3px;
   height: 3px;
   background: var(--muted);
   border-radius: 50%;
 }

 .read-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   font-weight: 600;
   color: var(--ink);
   border-bottom: 1px solid var(--lime);
   padding-bottom: 3px;
   width: fit-content;
   transition: gap .18s ease, color .18s ease;
 }

 .read-link:hover {
   gap: 12px;
   color: var(--lime);
 }

 .filter-bar {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   padding: 28px 0;
   border-bottom: 1px solid var(--line);
 }

 .filter-bar button {
   font-family: 'JetBrains Mono', monospace;
   font-size: 12.5px;
   letter-spacing: 0.03em;
   background: transparent;
   border: 1px solid var(--line);
   color: var(--muted);
   padding: 9px 16px;
   border-radius: 999px;
   cursor: pointer;
   transition: all .18s ease;
 }

 .filter-bar button:hover {
   border-color: var(--teal);
   color: var(--ink);
 }

 .filter-bar button.active {
   background: var(--lime);
   color: #10130A;
   border-color: var(--lime);
   font-weight: 600;
 }