/* =========================================================
   CompilerBee — Landing Page
   Vanilla CSS · Design-engineered, no frameworks.
   ========================================================= */

/* ---------- Reset & base ---------- */
*,
*::before,
*::after {
   box-sizing: border-box;
}

html,
body {
   margin: 0;
   padding: 0;
}

html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
   scroll-behavior: auto;
}

body {
   background: #05060a;
   color: #e6e8ee;
   font-family:
      "Inter",
      system-ui,
      -apple-system,
      Segoe UI,
      Roboto,
      sans-serif;
   font-weight: 400;
   font-size: 16px;
   line-height: 1.6;
   letter-spacing: -0.005em;
   overflow-x: hidden;
   position: relative;
}

img,
svg {
   display: block;
   max-width: 100%;
}
button {
   font: inherit;
   color: inherit;
   background: none;
   border: 0;
   cursor: pointer;
}
a {
   color: inherit;
   text-decoration: none;
}
ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

::selection {
   background: rgba(255, 184, 56, 0.35);
   color: #fff;
}

/* ---------- Tokens ---------- */
:root {
   --bg: #05060a;
   --bg-2: #0a0c12;
   --bg-3: #0f121b;
   --line: rgba(255, 255, 255, 0.08);
   --line-2: rgba(255, 255, 255, 0.05);

   --text: #e6e8ee;
   --text-dim: #9aa0ae;
   --text-mute: #5c6172;

   --amber: #ffb838;
   --amber-2: #ff8a1f;
   --cyan: #4dd0ff;
   --cyan-2: #5b7cfa;

   --grad-amber: linear-gradient(135deg, #ffb838 0%, #ff8a1f 100%);
   --grad-cyan: linear-gradient(135deg, #4dd0ff 0%, #5b7cfa 100%);
   --grad-hero: linear-gradient(180deg, #0a0c12 0%, #05060a 100%);

   --radius: 18px;
   --radius-sm: 12px;
   --radius-lg: 28px;

   --max: 1280px;
   --gutter: clamp(20px, 4vw, 56px);

   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);

   --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
   --font-body: "Inter", system-ui, sans-serif;
}

/* ---------- Layout primitives ---------- */
.container {
   max-width: var(--max);
   margin: 0 auto;
   padding: 0 var(--gutter);
   position: relative;
}

.section {
   padding: clamp(80px, 12vw, 160px) 0;
   position: relative;
}

.section-head {
   display: flex;
   flex-direction: column;
   gap: 18px;
   margin-bottom: clamp(48px, 7vw, 88px);
   max-width: 820px;
}

.section-head--center {
   text-align: center;
   align-items: center;
   margin-left: auto;
   margin-right: auto;
}

.eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: var(--font-body);
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--text-dim);
}

.eyebrow-num {
   color: var(--amber);
   font-variant-numeric: tabular-nums;
}

.section-title {
   font-family: var(--font-display);
   font-weight: 500;
   font-size: clamp(36px, 5.4vw, 76px);
   line-height: 1.02;
   letter-spacing: -0.035em;
   margin: 0;
   color: var(--text);
}

.section-title em {
   font-style: normal;
   background: var(--grad-amber);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

/* ---------- Backgrounds ---------- */
.noise {
   pointer-events: none;
   position: fixed;
   inset: 0;
   z-index: 1000;
   opacity: 0.04;
   mix-blend-mode: overlay;
   background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Preloader ---------- */
.preloader {
   position: fixed;
   inset: 0;
   z-index: 9999;
   background: #05060a;
   display: grid;
   place-items: center;
   transition:
      opacity 0.6s var(--ease-out),
      visibility 0.6s var(--ease-out);
}

.preloader.is-done {
   opacity: 0;
   visibility: hidden;
}

.preloader-inner {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 24px;
}

.preloader-mark {
   display: flex;
   align-items: center;
   gap: 12px;
   font-family: var(--font-display);
   font-weight: 600;
   font-size: 18px;
   letter-spacing: 0.02em;
}

.preloader-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--amber);
   box-shadow: 0 0 24px var(--amber);
   animation: preloader-pulse 1.2s ease-in-out infinite;
}

@keyframes preloader-pulse {
   0%,
   100% {
      transform: scale(1);
      opacity: 1;
   }
   50% {
      transform: scale(1.3);
      opacity: 0.6;
   }
}

.preloader-bar {
   width: 200px;
   height: 2px;
   background: rgba(255, 255, 255, 0.08);
   border-radius: 999px;
   overflow: hidden;
   position: relative;
}

.preloader-bar-fill {
   position: absolute;
   inset: 0;
   background: var(--grad-amber);
   transform: translateX(-100%);
   animation: preloader-fill 1.6s var(--ease-out) forwards;
}

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

/* ---------- Custom cursor ---------- */
.cursor {
   pointer-events: none;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 9998;
   mix-blend-mode: difference;
}

.cursor-dot,
.cursor-ring {
   position: fixed;
   top: 0;
   left: 0;
   transform: translate(-50%, -50%);
   border-radius: 50%;
}

.cursor-dot {
   width: 6px;
   height: 6px;
   background: #fff;
}

.cursor-ring {
   width: 36px;
   height: 36px;
   border: 1px solid rgba(255, 255, 255, 0.5);
   transition:
      width 0.25s var(--ease-out),
      height 0.25s var(--ease-out),
      border-color 0.25s var(--ease-out);
}

.cursor.is-hover .cursor-ring {
   width: 64px;
   height: 64px;
   border-color: var(--amber);
}

@media (hover: none) {
   .cursor {
      display: none;
   }
}

/* ---------- Scroll progress ---------- */
.scroll-progress {
   position: fixed;
   top: 0;
   left: 0;
   height: 2px;
   width: 0%;
   background: var(--grad-amber);
   z-index: 1001;
   transform-origin: left center;
   will-change: transform;
}

/* ---------- Nav ---------- */
.nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 100;
   padding: 18px 0;
   transition:
      background 0.3s var(--ease-out),
      border-color 0.3s var(--ease-out),
      padding 0.3s var(--ease-out);
   border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
   background: rgba(5, 6, 10, 0.7);
   backdrop-filter: blur(16px) saturate(180%);
   -webkit-backdrop-filter: blur(16px) saturate(180%);
   border-bottom-color: var(--line);
   padding: 12px 0;
}

.nav-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 32px;
}

.brand {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: var(--font-display);
   font-weight: 600;
   font-size: 16px;
   letter-spacing: -0.01em;
}

.brand-mark {
   width: 24px;
   height: 24px;
   border-radius: 7px;
   background: var(--bg-2);
   border: 1px solid var(--line);
   display: grid;
   place-items: center;
   position: relative;
   overflow: hidden;
}

.brand-mark::before {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 30% 30%, rgba(255, 184, 56, 0.25), transparent 60%);
}

.brand-mark-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--amber);
   box-shadow: 0 0 10px var(--amber);
   position: relative;
   z-index: 1;
}

.nav-links {
   display: flex;
   align-items: center;
   gap: 36px;
}

.nav-link {
   font-size: 14px;
   color: var(--text-dim);
   position: relative;
   transition: color 0.25s var(--ease-out);
}

.nav-link::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: -6px;
   height: 1px;
   background: var(--amber);
   transform: scaleX(0);
   transform-origin: left center;
   transition: transform 0.35s var(--ease-out);
}

.nav-link:hover {
   color: var(--text);
}

.nav-link:hover::after {
   transform: scaleX(1);
}

.nav-cta {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 16px;
   border: 1px solid var(--line);
   border-radius: 999px;
   font-size: 13px;
   font-weight: 500;
   color: var(--text);
   background: rgba(255, 255, 255, 0.02);
   transition: all 0.3s var(--ease-out);
}

.nav-cta:hover {
   border-color: var(--amber);
   background: rgba(255, 184, 56, 0.08);
   color: #fff;
}

.nav-cta svg {
   transition: transform 0.3s var(--ease-out);
}

.nav-cta:hover svg {
   transform: translate(2px, -2px);
}

.nav-toggle {
   display: none;
   width: 40px;
   height: 40px;
   border-radius: 10px;
   border: 1px solid var(--line);
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 5px;
}

.nav-toggle span {
   width: 16px;
   height: 1px;
   background: var(--text);
   transition:
      transform 0.3s var(--ease-out),
      opacity 0.3s var(--ease-out);
}

.nav-toggle[aria-expanded="true"] span:first-child {
   transform: translateY(3px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:last-child {
   transform: translateY(-3px) rotate(-45deg);
}

/* ---------- Buttons ---------- */
.btn {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 16px 24px;
   border-radius: 999px;
   font-family: var(--font-body);
   font-size: 14px;
   font-weight: 500;
   letter-spacing: -0.005em;
   transition:
      transform 0.3s var(--ease-out),
      background 0.3s var(--ease-out),
      border-color 0.3s var(--ease-out);
   overflow: hidden;
   isolation: isolate;
   cursor: pointer;
}

.btn--primary {
   background: var(--text);
   color: #0a0c12;
   box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.6) inset,
      0 20px 40px -20px rgba(255, 184, 56, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.06);
}

.btn--primary:hover {
   transform: translateY(-2px);
   background: #fff;
}

.btn--primary .btn-arrow {
   transition: transform 0.4s var(--ease-out);
}

.btn--primary:hover .btn-arrow {
   transform: translate(2px, -2px);
}

.btn-shine {
   position: absolute;
   inset: 0;
   background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.6) 45%, rgba(255, 184, 56, 0.6) 55%, transparent 70%);
   transform: translateX(-120%);
   transition: transform 0.9s var(--ease-out);
   z-index: -1;
}

.btn--primary:hover .btn-shine {
   transform: translateX(120%);
}

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

.btn--ghost:hover {
   border-color: rgba(255, 255, 255, 0.3);
   background: rgba(255, 255, 255, 0.03);
   transform: translateY(-2px);
}

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

/* ---------- Hero 3D canvas ---------- */
.hero-3d {
   position: absolute;
   top: 0;
   right: -8%;
   width: 60%;
   max-width: 820px;
   aspect-ratio: 1 / 1;
   z-index: 0;
   pointer-events: none;
   opacity: 0.85;
}

@media (max-width: 980px) {
   .hero-3d {
      width: 90%;
      right: -30%;
      top: 8%;
      opacity: 0.4;
   }
}

.hero-inner {
   position: relative;
   z-index: 2;
}

.hero {
   position: relative;
   padding: clamp(140px, 18vw, 200px) 0 clamp(80px, 10vw, 140px);
   overflow: hidden;
   isolation: isolate;
}

.hero-bg {
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none;
}

.hero-glow {
   position: absolute;
   width: 70vw;
   height: 70vw;
   max-width: 1100px;
   max-height: 1100px;
   border-radius: 50%;
   filter: blur(120px);
   opacity: 0.5;
   will-change: transform;
}

.hero-glow--amber {
   top: -20%;
   left: -10%;
   background: radial-gradient(circle, rgba(255, 184, 56, 0.55) 0%, transparent 60%);
}

.hero-glow--cyan {
   bottom: -30%;
   right: -10%;
   background: radial-gradient(circle, rgba(77, 208, 255, 0.4) 0%, transparent 60%);
   opacity: 0.4;
}

.hero-grid {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
   background-size: 64px 64px;
   mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
   -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
}

.hero-shape {
   position: absolute;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.06);
   opacity: 0.5;
}

.hero-shape--1 {
   top: 18%;
   right: 8%;
   width: 120px;
   height: 120px;
   background: radial-gradient(circle, rgba(255, 184, 56, 0.15), transparent 70%);
}

.hero-shape--2 {
   top: 60%;
   left: 4%;
   width: 200px;
   height: 200px;
   background: radial-gradient(circle, rgba(77, 208, 255, 0.12), transparent 70%);
}

.hero-shape--3 {
   bottom: 14%;
   right: 18%;
   width: 60px;
   height: 60px;
   border-color: rgba(255, 184, 56, 0.4);
   box-shadow: 0 0 30px rgba(255, 184, 56, 0.2);
}

.hero-inner {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: clamp(20px, 3vw, 32px);
}

.hero-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 8px 14px;
   border: 1px solid var(--line);
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.02);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0.05em;
   color: var(--text-dim);
}

.hero-eyebrow-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--amber);
   box-shadow: 0 0 12px var(--amber);
   animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
   0%,
   100% {
      opacity: 1;
   }
   50% {
      opacity: 0.4;
   }
}

.hero-title {
   font-family: var(--font-display);
   font-weight: 600;
   font-size: clamp(64px, 14vw, 200px);
   line-height: 0.92;
   letter-spacing: -0.055em;
   margin: 0;
   color: var(--text);
}

.hero-title .line {
   display: block;
   overflow: hidden;
}

.hero-title .line > span {
   display: inline-block;
   will-change: transform;
}

.hero-title em {
   font-style: normal;
   background: linear-gradient(135deg, #ffb838 0%, #ff8a1f 50%, #ffd27a 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   position: relative;
}

.hero-sub {
   max-width: 620px;
   margin: 0;
   font-size: clamp(16px, 1.6vw, 20px);
   line-height: 1.5;
   color: var(--text-dim);
   font-weight: 300;
}

.hero-sub-inner {
   display: inline-block;
   will-change: transform;
}

.hero-cta {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   justify-content: center;
   margin-top: 4px;
}

.hero-meta {
   display: flex;
   align-items: center;
   gap: clamp(20px, 4vw, 48px);
   margin-top: clamp(40px, 6vw, 80px);
   flex-wrap: wrap;
   justify-content: center;
}

.hero-meta-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
}

.hero-meta-num {
   font-family: var(--font-display);
   font-weight: 500;
   font-size: clamp(28px, 3.4vw, 40px);
   line-height: 1;
   color: var(--text);
   letter-spacing: -0.02em;
   font-variant-numeric: tabular-nums;
}

.hero-meta-suffix {
   color: var(--amber);
   margin-left: 2px;
   font-weight: 500;
}

.hero-meta-label {
   font-size: 12px;
   color: var(--text-mute);
   letter-spacing: 0.04em;
}

.hero-meta-divider {
   width: 1px;
   height: 32px;
   background: var(--line);
}

.hero-marquee {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 18px 0;
   border-top: 1px solid var(--line-2);
   border-bottom: 1px solid var(--line-2);
   overflow: hidden;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.02), transparent);
   mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.hero-marquee-track {
   display: flex;
   align-items: center;
   gap: 32px;
   white-space: nowrap;
   font-family: var(--font-display);
   font-size: 13px;
   font-weight: 400;
   letter-spacing: 0.04em;
   color: var(--text-mute);
   text-transform: uppercase;
   animation: marquee 40s linear infinite;
   width: max-content;
}

.hero-marquee-track .dot {
   color: var(--amber);
}

@keyframes marquee {
   from {
      transform: translateX(0);
   }
   to {
      transform: translateX(-50%);
   }
}

/* ---------- ABOUT ---------- */
.about-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: clamp(40px, 6vw, 80px);
}

@media (min-width: 980px) {
   .about-grid {
      grid-template-columns: 5fr 7fr;
      align-items: start;
   }
}

.about-lede {
   font-size: clamp(20px, 2.2vw, 28px);
   line-height: 1.4;
   color: var(--text);
   font-weight: 300;
   letter-spacing: -0.015em;
   max-width: 480px;
   margin: 0;
}

.about-cards {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
}

@media (min-width: 720px) {
   .about-cards {
      grid-template-columns: repeat(3, 1fr);
   }
}

.glass-card {
   position: relative;
   padding: 28px;
   border-radius: var(--radius);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
   border: 1px solid var(--line);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   transition:
      transform 0.5s var(--ease-out),
      border-color 0.5s var(--ease-out),
      box-shadow 0.5s var(--ease-out);
   overflow: hidden;
   will-change: transform;
}

.glass-card::before {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 184, 56, 0.08), transparent 40%);
   opacity: 0;
   transition: opacity 0.5s var(--ease-out);
   pointer-events: none;
}

.glass-card:hover {
   transform: translateY(-4px);
   border-color: rgba(255, 184, 56, 0.3);
   box-shadow:
      0 20px 60px -20px rgba(255, 184, 56, 0.25),
      0 0 0 1px rgba(255, 184, 56, 0.1) inset;
}

.glass-card:hover::before {
   opacity: 1;
}

.glass-card-icon {
   width: 44px;
   height: 44px;
   display: grid;
   place-items: center;
   border-radius: 12px;
   background: rgba(255, 184, 56, 0.08);
   color: var(--amber);
   margin-bottom: 20px;
   border: 1px solid rgba(255, 184, 56, 0.15);
}

.glass-card h3 {
   font-family: var(--font-display);
   font-weight: 500;
   font-size: 18px;
   margin: 0 0 8px;
   letter-spacing: -0.01em;
}

.glass-card p {
   margin: 0;
   font-size: 14px;
   line-height: 1.55;
   color: var(--text-dim);
}

/* ---------- SERVICES ---------- */
.services-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
}

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

@media (min-width: 1080px) {
   .services-grid {
      grid-template-columns: repeat(3, 1fr);
   }
}

.service-card {
   position: relative;
   padding: 28px;
   border-radius: var(--radius);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
   border: 1px solid var(--line);
   overflow: hidden;
   transition:
      transform 0.5s var(--ease-out),
      border-color 0.5s var(--ease-out);
   will-change: transform;
   isolation: isolate;
}

.service-card-glow {
   position: absolute;
   inset: -1px;
   border-radius: inherit;
   padding: 1px;
   background: conic-gradient(from 0deg, transparent 0%, var(--amber) 25%, transparent 50%, var(--cyan) 75%, transparent 100%);
   -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
   mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   opacity: 0;
   transition: opacity 0.5s var(--ease-out);
   z-index: -1;
}

.service-card::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.06) 50%, transparent 60%);
   transform: translateX(-100%);
   transition: transform 0.9s var(--ease-out);
   pointer-events: none;
}

.service-card:hover {
   transform: translateY(-6px) perspective(800px) rotateX(2deg);
   border-color: transparent;
}

.service-card:hover .service-card-glow {
   opacity: 1;
   animation: spin-glow 4s linear infinite;
}

.service-card:hover::after {
   transform: translateX(100%);
}

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

.service-card-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px;
}

.service-icon {
   width: 44px;
   height: 44px;
   display: grid;
   place-items: center;
   border-radius: 12px;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--line);
   color: var(--text);
   transition: all 0.4s var(--ease-out);
}

.service-card:hover .service-icon {
   background: rgba(255, 184, 56, 0.1);
   border-color: rgba(255, 184, 56, 0.3);
   color: var(--amber);
}

.service-num {
   font-family: var(--font-display);
   font-size: 12px;
   color: var(--text-mute);
   letter-spacing: 0.05em;
}

.service-card h3 {
   font-family: var(--font-display);
   font-weight: 500;
   font-size: 22px;
   line-height: 1.2;
   margin: 0 0 8px;
   letter-spacing: -0.015em;
}

.service-card p {
   margin: 0;
   font-size: 14px;
   line-height: 1.55;
   color: var(--text-dim);
}

.service-arrow {
   position: absolute;
   bottom: 24px;
   right: 24px;
   width: 32px;
   height: 32px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   border: 1px solid var(--line);
   font-size: 14px;
   color: var(--text-dim);
   transition: all 0.4s var(--ease-out);
}

.service-card:hover .service-arrow {
   background: var(--amber);
   border-color: var(--amber);
   color: #0a0c12;
   transform: translate(2px, -2px);
}

/* ---------- WORK ---------- */
.work-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
}

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

@media (min-width: 1080px) {
   .work-grid {
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: minmax(280px, auto);
   }

   .work-card--lg {
      grid-column: span 2;
      grid-row: span 2;
   }

   .work-card--wide {
      grid-column: span 2;
   }
}

.work-card {
   position: relative;
   border-radius: var(--radius);
   overflow: hidden;
   background: var(--bg-2);
   border: 1px solid var(--line);
   transition:
      transform 0.5s var(--ease-out),
      border-color 0.5s var(--ease-out);
   display: block;
   isolation: isolate;
   min-height: 280px;
}

.work-card:hover {
   transform: translateY(-4px);
   border-color: rgba(255, 184, 56, 0.3);
}

.work-art {
   position: absolute;
   inset: 0;
   transition: transform 0.7s var(--ease-out);
   overflow: hidden;
}

.work-3d {
   position: absolute;
   inset: 0;
   width: 100% !important;
   height: 100% !important;
   display: block;
   z-index: 0;
}

.work-art::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 30%, rgba(5, 6, 10, 0.95) 100%);
   pointer-events: none;
   z-index: 1;
}

.work-card:hover .work-art {
   transform: scale(1.05);
}

.work-card:hover .work-3d {
   transform: scale(1.05);
   transition: transform 0.7s var(--ease-out);
}

.work-art::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 40%, rgba(5, 6, 10, 0.95) 100%);
}

.work-art--01 {
   background: linear-gradient(135deg, #0f121b 0%, #1a1d2a 100%);
}

.work-art--01 .work-art-grid {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 184, 56, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 184, 56, 0.15) 1px, transparent 1px);
   background-size: 32px 32px;
   mask-image: radial-gradient(circle at 70% 30%, #000, transparent 70%);
   -webkit-mask-image: radial-gradient(circle at 70% 30%, #000, transparent 70%);
}

.work-art--01 .work-art-glow {
   position: absolute;
   top: 20%;
   right: 20%;
   width: 200px;
   height: 200px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(255, 184, 56, 0.6), transparent 70%);
   filter: blur(40px);
}

.work-art--02 {
   background: radial-gradient(circle at 50% 50%, #1a1530 0%, #0a0c12 100%);
}

.work-art--02 .work-art-orbit {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 200px;
   height: 200px;
   border-radius: 50%;
   border: 1px solid rgba(91, 124, 250, 0.3);
   box-shadow:
      0 0 60px rgba(91, 124, 250, 0.3) inset,
      0 0 60px rgba(91, 124, 250, 0.2);
}

.work-art--02 .work-art-orbit::before,
.work-art--02 .work-art-orbit::after {
   content: "";
   position: absolute;
   inset: -20px;
   border-radius: 50%;
   border: 1px solid rgba(77, 208, 255, 0.2);
}

.work-art--02 .work-art-orbit::after {
   inset: 20px;
   border-color: rgba(255, 184, 56, 0.3);
}

.work-art--03 {
   background: linear-gradient(180deg, #0a0c12 0%, #16151f 100%);
   display: flex;
   align-items: flex-end;
   justify-content: center;
   padding: 32px;
}

.work-art--03 .work-art-bars {
   display: flex;
   align-items: flex-end;
   gap: 6px;
   height: 80%;
   width: 100%;
}

.work-art--03 .work-art-bars span {
   flex: 1;
   background: linear-gradient(180deg, var(--amber), rgba(255, 184, 56, 0.2));
   border-radius: 4px 4px 0 0;
   animation: bar-grow 3s var(--ease-in-out) infinite;
}

.work-art--03 .work-art-bars span:nth-child(1) {
   height: 40%;
   animation-delay: 0s;
}
.work-art--03 .work-art-bars span:nth-child(2) {
   height: 70%;
   animation-delay: 0.2s;
}
.work-art--03 .work-art-bars span:nth-child(3) {
   height: 50%;
   animation-delay: 0.4s;
}
.work-art--03 .work-art-bars span:nth-child(4) {
   height: 85%;
   animation-delay: 0.1s;
}
.work-art--03 .work-art-bars span:nth-child(5) {
   height: 60%;
   animation-delay: 0.3s;
}

@keyframes bar-grow {
   0%,
   100% {
      transform: scaleY(1);
   }
   50% {
      transform: scaleY(0.6);
   }
}

.work-art--04 {
   background: linear-gradient(135deg, #0a0c12 0%, #1a1530 50%, #0a0c12 100%);
   overflow: hidden;
}

.work-art--04 .work-art-wave {
   position: absolute;
   bottom: 0;
   left: -10%;
   right: -10%;
   height: 60%;
   background: radial-gradient(ellipse at 20% 80%, rgba(77, 208, 255, 0.4) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(255, 184, 56, 0.3) 0%, transparent 50%);
   border-radius: 100% 100% 0 0 / 80% 80% 0 0;
   filter: blur(30px);
}

.work-meta {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 24px;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 16px;
   z-index: 2;
}

.work-tag {
   display: inline-block;
   padding: 4px 10px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid var(--line);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   font-size: 11px;
   font-weight: 500;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--text-dim);
   margin-bottom: 10px;
}

.work-meta h3 {
   font-family: var(--font-display);
   font-weight: 500;
   font-size: 20px;
   line-height: 1.2;
   margin: 0;
   letter-spacing: -0.015em;
   color: var(--text);
}

.work-arrow {
   width: 36px;
   height: 36px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.06);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid var(--line);
   color: var(--text);
   font-size: 16px;
   flex-shrink: 0;
   transition: all 0.4s var(--ease-out);
}

.work-card:hover .work-arrow {
   background: var(--amber);
   color: #0a0c12;
   border-color: var(--amber);
   transform: rotate(45deg);
}

/* ---------- STACK / MARQUEE ---------- */
.marquee {
   overflow: hidden;
   padding: 24px 0;
   border-top: 1px solid var(--line-2);
   border-bottom: 1px solid var(--line-2);
   mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee--reverse .marquee-track {
   animation-direction: reverse;
   animation-duration: 50s;
}

.marquee-track {
   display: flex;
   align-items: center;
   gap: 16px;
   width: max-content;
   animation: marquee 50s linear infinite;
   padding-left: 16px;
}

.chip {
   display: inline-flex;
   align-items: center;
   padding: 12px 22px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid var(--line);
   font-family: var(--font-display);
   font-size: 14px;
   font-weight: 500;
   color: var(--text);
   white-space: nowrap;
   transition: all 0.3s var(--ease-out);
}

.chip:hover {
   background: rgba(255, 184, 56, 0.08);
   border-color: rgba(255, 184, 56, 0.3);
   color: var(--amber);
}

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

/* ---------- CONTACT ---------- */
.contact-inner {
   display: grid;
   grid-template-columns: 1fr;
   gap: clamp(40px, 6vw, 80px);
   align-items: start;
}

@media (min-width: 980px) {
   .contact-inner {
      grid-template-columns: 5fr 6fr;
   }
}

.contact-lede {
   font-size: clamp(16px, 1.4vw, 18px);
   color: var(--text-dim);
   max-width: 460px;
   margin: 24px 0 40px;
   line-height: 1.55;
}

.contact-list {
   display: flex;
   flex-direction: column;
   gap: 12px;
   border-top: 1px solid var(--line-2);
   padding-top: 24px;
}

.contact-list li {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px 0;
   border-bottom: 1px solid var(--line-2);
   font-size: 14px;
}

.contact-list li span {
   color: var(--text-mute);
   font-size: 12px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.contact-list li a {
   color: var(--text);
   transition: color 0.3s var(--ease-out);
}

.contact-list li a:hover {
   color: var(--amber);
}

.glass {
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
   border: 1px solid var(--line);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-radius: var(--radius-lg);
}

.contact-form {
   padding: clamp(24px, 3vw, 36px);
   display: flex;
   flex-direction: column;
   gap: 20px;
   position: relative;
   overflow: hidden;
}

.contact-form::before {
   content: "";
   position: absolute;
   top: -100px;
   right: -100px;
   width: 300px;
   height: 300px;
   background: radial-gradient(circle, rgba(255, 184, 56, 0.15), transparent 60%);
   filter: blur(40px);
   pointer-events: none;
}

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

.form-field label {
   font-size: 12px;
   color: var(--text-mute);
   letter-spacing: 0.06em;
   text-transform: uppercase;
   font-weight: 500;
}

.form-field input,
.form-field textarea {
   width: 100%;
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid var(--line);
   border-radius: var(--radius-sm);
   padding: 14px 16px;
   color: var(--text);
   font-family: var(--font-body);
   font-size: 15px;
   transition:
      border-color 0.3s var(--ease-out),
      background 0.3s var(--ease-out);
   resize: none;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
   color: var(--text-mute);
}

.form-field input:focus,
.form-field textarea:focus {
   outline: none;
   border-color: var(--amber);
   background: rgba(255, 184, 56, 0.04);
}

.form-status {
   margin: 0;
   font-size: 13px;
   color: var(--amber);
   min-height: 18px;
   opacity: 0;
   transform: translateY(-4px);
   transition:
      opacity 0.3s var(--ease-out),
      transform 0.3s var(--ease-out);
}

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

.form-status.is-success {
   color: #6fe6a4;
}

.form-status.is-error {
   color: #ff7a7a;
}

/* ---------- FOOTER ---------- */
.footer {
   border-top: 1px solid var(--line-2);
   padding: 40px 0;
   margin-top: 40px;
}

.footer-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   flex-wrap: wrap;
   font-size: 13px;
   color: var(--text-dim);
}

.footer-brand {
   display: flex;
   align-items: center;
   gap: 12px;
   color: var(--text);
}

.footer-brand .muted {
   color: var(--text-mute);
   font-weight: 400;
}

.footer-social {
   display: flex;
   gap: 24px;
}

.footer-social a {
   color: var(--text-dim);
   transition: color 0.3s var(--ease-out);
}

.footer-social a:hover {
   color: var(--amber);
}

.footer-meta {
   display: flex;
   align-items: center;
   gap: 8px;
   color: var(--text-mute);
   font-size: 12px;
}

.footer-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #6fe6a4;
   box-shadow: 0 0 10px #6fe6a4;
   animation: blink 2s ease-in-out infinite;
}

/* ---------- Reveal animation states ---------- */
.reveal {
   opacity: 0;
   transform: translateY(40px);
}

/* ---------- Mobile nav overlay ---------- */
@media (max-width: 980px) {
   .nav-links {
      position: fixed;
      top: 70px;
      left: 16px;
      right: 16px;
      flex-direction: column;
      gap: 0;
      background: rgba(10, 12, 18, 0.96);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 16px;
      align-items: stretch;
      transform: translateY(-12px);
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s var(--ease-out);
   }

   .nav-links.is-open {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
   }

   .nav-link {
      padding: 14px 12px;
      border-bottom: 1px solid var(--line-2);
   }

   .nav-link:last-child {
      border-bottom: 0;
   }

   .nav-cta {
      display: none;
   }
   .nav-toggle {
      display: flex;
   }
}

@media (max-width: 560px) {
   .hero-meta-divider {
      display: none;
   }
   .hero-meta {
      gap: 32px;
   }

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

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
}