/* =========================================================
   GLOTECH ENTERPRISE — 2026 design system
   Light-first, auto/manual dark mode, bento layout,
   glass surfaces, kinetic type, pointer-aware glow cards.
   ========================================================= */
:root{
  color-scheme: light;

  --ink: #1D1D1F;
  --paper: #FFFFFF;
  --surface: #F5F5F7;
  --surface-2: #FBFBFD;
  --card: #FFFFFF;
  --border: rgba(0,0,0,0.08);
  --border-soft: rgba(0,0,0,0.06);
  --text: #1D1D1F;
  --muted: #6E6E73;
  --muted-2: #86868B;

  /* Brand signal pair: Glotech cyan + electric violet */
  --signal: #0E9BE0;
  --signal-2: #7C5CFF;
  --signal-dim: rgba(14,155,224,0.10);
  --glow-1: rgba(14,155,224,0.20);
  --glow-2: rgba(124,92,255,0.14);
  --grad: linear-gradient(120deg, var(--signal), var(--signal-2));

  --header-bg: rgba(255,255,255,0.68);
  --glass-bg: rgba(255,255,255,0.66);
  --panel-bg: rgba(255,255,255,0.96);
  --glass-border: rgba(255,255,255,0.6);
  --canvas-node: 14,155,224;
  --canvas-node-2: 124,92,255;

  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --wrap: 1180px;
  --radius: 22px;
  --radius-sm: 12px;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* -------- Dark theme (auto via saved preference / OS) -------- */
[data-theme="dark"]{
  color-scheme: dark;

  --ink: #F2F3F7;
  --paper: #0A0C11;
  --surface: #10131A;
  --surface-2: #12151D;
  --card: #141824;
  --border: rgba(255,255,255,0.10);
  --border-soft: rgba(255,255,255,0.07);
  --text: #E8EAF0;
  --muted: #9BA0AC;
  --muted-2: #6F7480;

  --signal: #2FB3F5;
  --signal-2: #9B82FF;
  --signal-dim: rgba(47,179,245,0.14);
  --glow-1: rgba(47,179,245,0.16);
  --glow-2: rgba(155,130,255,0.12);

  --header-bg: rgba(10,12,17,0.62);
  --glass-bg: rgba(20,24,36,0.62);
  --panel-bg: rgba(22,26,38,0.97);
  --glass-border: rgba(255,255,255,0.09);
  --canvas-node: 47,179,245;
  --canvas-node-2: 155,130,255;
}

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

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
  transition: background 0.35s ease, color 0.35s ease;
}

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

img, svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
p{ margin: 0; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}

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

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}

/* Ambient glow — slow-drifting brand light behind everything */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(620px 520px at 12% -5%, var(--glow-1), transparent 60%),
    radial-gradient(520px 440px at 88% 14%, var(--glow-2), transparent 65%),
    radial-gradient(580px 500px at 50% 105%, var(--glow-2), transparent 60%);
  animation: drift 24s ease-in-out infinite alternate;
}
@keyframes drift{
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(0,-20px,0) scale(1.05); }
}

/* Blueprint grid — faint schematic backdrop, the "engineering" signature.
   Sits under the glow, above the page background. */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--canvas-node),0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--canvas-node),0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black, black 70%, transparent 100%);
  opacity: 0.55;
}
.site-header, main, .site-footer{ position: relative; z-index: 1; }

/* =========================================================
   TECHNICAL FRAME — corner-bracket reticle, used to mark the
   "instruments" of the page: the hero viewport, and every
   component that behaves like a live, hoverable module.
   ========================================================= */
.tech-frame{ position: relative; }
.tech-frame::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--signal) 0 0), linear-gradient(var(--signal) 0 0),
    linear-gradient(var(--signal) 0 0), linear-gradient(var(--signal) 0 0),
    linear-gradient(var(--signal) 0 0), linear-gradient(var(--signal) 0 0),
    linear-gradient(var(--signal) 0 0), linear-gradient(var(--signal) 0 0);
  background-repeat: no-repeat;
  background-size:
    16px 1.5px, 1.5px 16px, 16px 1.5px, 1.5px 16px,
    16px 1.5px, 1.5px 16px, 16px 1.5px, 1.5px 16px;
  background-position:
    top 14px left 14px, top 14px left 14px,
    top 14px right 14px, top 14px right 14px,
    bottom 14px right 14px, bottom 14px right 14px,
    bottom 14px left 14px, bottom 14px left 14px;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 3;
}
.tech-frame--always::before{ opacity: 0.4; }
.tech-frame:hover::before{ opacity: 0.9; }

/* Section index — tiny technical-drawing-style tag in the
   corner of each major section ("SEC.01", "SEC.02"...) */
main{ counter-reset: sec; }
.services, .approach, .contact{ position: relative; counter-increment: sec; }
.services::after, .approach::after, .contact::after{
  content: "SEC." counter(sec, decimal-leading-zero);
  position: absolute;
  top: 44px;
  right: 24px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--muted-2);
  opacity: 0.55;
  pointer-events: none;
}
@media (max-width: 900px){
  .services::after, .approach::after, .contact::after{ display: none; }
}

/* Scroll-reveal (JS adds .reveal + .is-visible) */
.reveal{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  transition: transform 0.25s var(--ease-out), background 0.25s ease,
              border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}
.btn:active{ transform: scale(0.98); }

.btn-primary{
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.btn-primary::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1; /* behind the label, above the button background */
  background: var(--grad);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.btn-primary:hover{
  color: #fff;
  box-shadow: 0 14px 36px var(--glow-1), 0 0 0 1px rgba(14,155,224,0.18);
}
.btn-primary:hover::after{ opacity: 1; }

.btn-ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}
.btn-ghost:hover{ border-color: var(--ink); background: var(--surface); }

.btn-small{ padding: 9px 18px; font-size: 0.85rem; }
.btn-lg{ padding: 15px 30px; font-size: 1rem; }
.btn-full{ width:100%; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.35s ease;
}

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 16px;
}

.logo{ display: flex; align-items: center; gap: 10px; }
.logo-mark img{ width: 40px; height: 40px; object-fit: contain; }

.logo-text{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  color: var(--ink);
}
.logo-sub{
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--muted-2);
}

.main-nav{ display: flex; gap: 34px; }
.main-nav a{
  font-size: 0.9rem;
  color: var(--muted);
  position: relative;
  transition: color 0.2s ease;
}
.main-nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -4px;
  height: 1.5px;
  background: var(--grad);
  transition: right 0.3s var(--ease-out);
}
.main-nav a:hover{ color: var(--ink); }
.main-nav a:hover::after{ right: 0; }

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

.theme-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.3s var(--ease-spring), background 0.2s ease;
}
.theme-toggle:hover{ color: var(--signal); border-color: var(--signal); transform: rotate(15deg); }
.theme-toggle svg{ width: 17px; height: 17px; }
.theme-toggle .icon-moon{ display: none; }
[data-theme="dark"] .theme-toggle .icon-sun{ display: none; }
[data-theme="dark"] .theme-toggle .icon-moon{ display: block; }

.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle span{
  display:block;
  height: 1.5px;
  width: 18px;
  margin: 0 auto;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  overflow: hidden;
  padding: 160px 0 130px;
}

.hero-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.8;
}
.hero-fade{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0%,
    transparent 55%,
    var(--paper) 100%);
}

.hero-inner{ position: relative; z-index: 2; max-width: 820px; }

.hero-eyebrow{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  overflow: hidden;
}
/* A slow telemetry "scan" sweeps across the badge — a quiet, precise
   detail rather than a loud animation */
.hero-eyebrow::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(var(--canvas-node),0.22) 50%, transparent 70%);
  transform: translateX(-130%);
  animation: scan-sweep 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scan-sweep{
  0%, 55%{ transform: translateX(-130%); }
  100%{ transform: translateX(130%); }
}
.live-dot{
  width: 7px; height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 var(--signal-dim);
  animation: ping 2.4s ease-out infinite;
}
@keyframes ping{
  0%{ box-shadow: 0 0 0 0 rgba(14,155,224,0.45); }
  70%{ box-shadow: 0 0 0 10px rgba(14,155,224,0); }
  100%{ box-shadow: 0 0 0 0 rgba(14,155,224,0); }
}

.hero-title{
  font-size: clamp(2.9rem, 6.4vw, 5.2rem);
  letter-spacing: -0.035em;
  margin: 26px 0 28px;
  color: var(--ink);
  font-weight: 700;
}
.hero-title .line{ display: block; }

/* Kinetic word-by-word reveal — JS wraps words in .w spans */
.hero-title .w{
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) rotate(2deg);
  filter: blur(6px);
  animation: word-in 0.9s var(--ease-out) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes word-in{
  to{ opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); }
}
.hero-title.no-split .w{ opacity: 1; transform: none; filter: none; animation: none; }

.hero-title .highlight{
  font-style: normal;
  background: linear-gradient(100deg, var(--signal), var(--signal-2) 55%, var(--signal));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 6s linear infinite;
}
@keyframes shine{
  0%{ background-position: 0% center; }
  100%{ background-position: 200% center; }
}

.hero-sub{
  font-size: 1.2rem;
  color: var(--muted);
  max-width: 610px;
  margin-bottom: 42px;
  line-height: 1.55;
}

.hero-actions{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 80px;
}

.hero-stats{
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
  margin: 0;
  padding-top: 36px;
  border-top: 1px solid var(--border-soft);
}
.hero-stats dt{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hero-stats dd{ margin: 0; font-size: 0.85rem; color: var(--muted); }

/* =========================================================
   MARQUEE — capability strip
   ========================================================= */
.marquee{
  overflow: hidden;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 18px 0;
  background: var(--surface-2);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-track{
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee-track span{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.marquee-track i{ color: var(--signal); font-style: normal; }
@keyframes marquee{
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; flex-wrap: wrap; width: auto; }
}

/* =========================================================
   SECTION SHARED
   ========================================================= */
.section-title{
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  max-width: 640px;
  margin-bottom: 22px;
  letter-spacing: -0.028em;
}
.section-lead{
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 600px;
  margin-bottom: 64px;
  line-height: 1.6;
}

/* =========================================================
   SERVICES — BENTO GRID
   ========================================================= */
.services{ padding: 120px 0; }

.bento{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.bento-ai{ grid-column: span 2; }
.bento-data{ grid-column: span 2; }
.bento-cta{ grid-column: span 3; flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.bento-cta > div{ max-width: 560px; }

/* Pointer-aware glow card: JS sets --mx/--my on hover */
.glow-card{
  position: relative;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease, border-color 0.35s ease;
}
.glow-card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              var(--signal-dim), transparent 45%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.glow-card:hover::before{ opacity: 1; }
.glow-card:hover{
  transform: translateY(-5px);
  border-color: rgba(14,155,224,0.35);
  box-shadow: 0 30px 60px var(--glow-1), 0 4px 18px rgba(0,0,0,0.06);
}

/* Corner-bracket reticle on hover — same device as .tech-frame, but as
   ::after since ::before on .glow-card already carries the pointer glow */
.glow-card::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--signal) 0 0), linear-gradient(var(--signal) 0 0),
    linear-gradient(var(--signal) 0 0), linear-gradient(var(--signal) 0 0),
    linear-gradient(var(--signal) 0 0), linear-gradient(var(--signal) 0 0),
    linear-gradient(var(--signal) 0 0), linear-gradient(var(--signal) 0 0);
  background-repeat: no-repeat;
  background-size:
    14px 1.5px, 1.5px 14px, 14px 1.5px, 1.5px 14px,
    14px 1.5px, 1.5px 14px, 14px 1.5px, 1.5px 14px;
  background-position:
    top 12px left 12px, top 12px left 12px,
    top 12px right 12px, top 12px right 12px,
    bottom 12px right 12px, bottom 12px right 12px,
    bottom 12px left 12px, bottom 12px left 12px;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.glow-card:hover::after{ opacity: 0.85; }

.bento-card{
  padding: 40px;
  display: flex;
  flex-direction: column;
}
.bento-card > *{ position: relative; z-index: 1; }

.service-code{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  margin-bottom: 20px;
  transition: color 0.3s ease;
}
.bento-card:hover .service-code{ color: var(--signal); }

.bento-card h3{
  font-size: 1.4rem;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.bento-card p{
  color: var(--muted);
  margin-bottom: 22px;
  line-height: 1.6;
}
.bento-card ul li{
  position: relative;
  padding-left: 20px;
  font-size: 0.92rem;
  color: var(--text);
  margin-bottom: 10px;
}
.bento-card ul li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 1.5px;
  background: var(--grad);
}

/* AI card visual — a tiny chat that types */
.ai-visual{ margin-top: auto; padding-top: 26px; }
.ai-chat{ display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.ai-bubble{
  font-size: 0.82rem;
  padding: 10px 14px;
  border-radius: 14px;
  width: max-content;
  max-width: 100%;
}
.ai-bubble.user{
  align-self: flex-end;
  background: var(--ink);
  color: var(--paper);
  border-bottom-right-radius: 4px;
}
.ai-bubble.bot{
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-bottom-left-radius: 4px;
}
.typing{ display: inline-flex; gap: 4px; font-style: normal; }
.typing b{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal);
  animation: blink 1.3s ease-in-out infinite;
}
.typing b:nth-child(2){ animation-delay: 0.18s; }
.typing b:nth-child(3){ animation-delay: 0.36s; }
@keyframes blink{
  0%, 60%, 100%{ opacity: 0.25; transform: translateY(0); }
  30%{ opacity: 1; transform: translateY(-3px); }
}

/* Data card visual — mini bar chart that grows into view */
.data-visual{
  margin-top: auto;
  padding-top: 26px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 88px;
}
.data-visual span{
  flex: 1;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(to top, var(--signal-dim), var(--signal));
  opacity: 0.85;
  height: 8%;
  transition: height 1s var(--ease-out);
}
.is-visible .data-visual span{ height: var(--h); }
.data-visual span:nth-child(2){ transition-delay: 0.08s; }
.data-visual span:nth-child(3){ transition-delay: 0.16s; }
.data-visual span:nth-child(4){ transition-delay: 0.24s; }
.data-visual span:nth-child(5){ transition-delay: 0.32s; }
.data-visual span:nth-child(6){ transition-delay: 0.40s; }
.data-visual span:nth-child(7){ transition-delay: 0.48s; }

/* CTA tile */
.bento-cta{
  background:
    radial-gradient(600px 300px at 0% 0%, var(--glow-2), transparent 60%),
    var(--card);
}
.bento-cta h3{ font-size: 1.5rem; margin-bottom: 10px; }
.bento-cta p{ margin-bottom: 0; }
.bento-cta .btn{ flex-shrink: 0; }

/* =========================================================
   APPROACH
   ========================================================= */
.approach{ padding: 0 0 130px; }

.approach-steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  counter-reset: step;
  padding: 0;
  margin: 0;
  list-style: none;
}

.approach-steps li{
  position: relative;
  padding-top: 30px;
}
/* Progress rail: track + animated fill when the step scrolls in */
.approach-steps li::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background:
    repeating-linear-gradient(to right, var(--border) 0 1.5px, transparent 1.5px 20px),
    linear-gradient(var(--border-soft), var(--border-soft));
  background-size: 100% 6px, 100% 2px;
  background-position: top left, bottom left;
  background-repeat: no-repeat;
}
.approach-steps li::after{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 2px;
  background: var(--grad);
  border-radius: 2px;
  transition: width 1.1s var(--ease-out);
}
.approach-steps li.is-visible:nth-child(1)::after{ width: 100%; transition-delay: 0.1s; }
.approach-steps li.is-visible:nth-child(2)::after{ width: 100%; transition-delay: 0.35s; }
.approach-steps li.is-visible:nth-child(3)::after{ width: 100%; transition-delay: 0.6s; }

.step-num{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--signal);
  margin-bottom: 18px;
}

.approach-steps h3{
  font-size: 1.25rem;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.approach-steps p{
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.6;
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ padding: 0 0 140px; }

.contact-inner{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
}

.contact-intro .section-lead{ margin-bottom: 44px; }

.contact-details{
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-label{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 4px;
}
.contact-details a{ font-size: 1.05rem; }
.contact-details a:hover{ color: var(--signal); }

.contact-form{
  background: var(--glass-bg);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-form:hover{ transform: none; } /* keep the form steady, glow only */

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

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

.field label{
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
}

.field input,
.field select,
.field textarea{
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.35s ease;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: var(--signal);
  outline: none;
  box-shadow: 0 0 0 4px var(--signal-dim);
}

.field select{ appearance: none; }

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

/* ---- Custom "What do you need?" select ---- */
.select-wrap{ position: relative; }

.select-trigger{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.35s ease;
}
.select-trigger #serviceTriggerLabel.placeholder{ color: var(--muted-2); }
.select-trigger:hover{ border-color: rgba(14,155,224,0.35); }
.select-trigger[aria-expanded="true"]{
  border-color: var(--signal);
  box-shadow: 0 0 0 4px var(--signal-dim);
}

.select-chevron{
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-out);
}
.select-trigger[aria-expanded="true"] .select-chevron{
  transform: rotate(180deg);
  color: var(--signal);
}

.select-panel{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  background: var(--panel-bg);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
  padding: 6px;
  list-style: none;
  margin: 0;

  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.32s var(--ease-spring);
}
.select-panel.open{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.select-panel li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 0.92rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.select-panel li:hover,
.select-panel li:focus,
.select-panel li.active{
  background: var(--signal-dim);
  color: var(--signal);
  outline: none;
}
.select-panel li[aria-selected="true"]{ font-weight: 500; }

.option-check{
  width: 16px;
  height: 16px;
  color: var(--signal);
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.25s var(--ease-spring);
}
.select-panel li[aria-selected="true"] .option-check{
  opacity: 1;
  transform: scale(1);
}

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

.form-status{
  min-height: 20px;
  font-size: 0.9rem;
}
.form-status[data-state="success"]{ color: #1B9E63; }
.form-status[data-state="error"]{ color: #D6402C; }
.form-status[data-state="loading"]{ color: var(--muted); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  border-top: 1px solid var(--border-soft);
  padding: 40px 0;
}
.footer-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-logo{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.footer-reg{
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 4px;
}
.footer-nav{ display: flex; align-items: center; gap: 24px; }
.footer-nav a{ font-size: 0.85rem; color: var(--muted); }
.footer-nav a:hover{ color: var(--signal); }
.footer-copy{
  font-size: 0.8rem;
  color: var(--muted-2);
  width: 100%;
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
  margin-top: 8px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .bento{ grid-template-columns: repeat(2, 1fr); }
  .bento-ai, .bento-data, .bento-cta{ grid-column: span 2; }
}

@media (max-width: 900px){
  .contact-inner{ grid-template-columns: 1fr; gap: 48px; }
  .approach-steps{ grid-template-columns: 1fr; gap: 28px; }
}

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

  .main-nav{
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--border-soft);
    flex-direction: column;
    padding: 20px 24px;
    gap: 18px;
    display: none;
  }
  .main-nav.open{ display: flex; }
  .header-cta{ display: none; }
  .nav-toggle{ display: flex; }

  .hero{ padding: 96px 0 60px; }
  .hero-sub{ font-size: 1.02rem; margin-bottom: 32px; }
  .hero-actions{ margin-bottom: 56px; gap: 12px; }
  .hero-actions .btn{ width: 100%; }
  .hero-stats{ gap: 24px; padding-top: 28px; }
  .hero-stats dt{ font-size: 1.4rem; }

  .services{ padding: 72px 0; }
  .section-lead{ margin-bottom: 40px; font-size: 1rem; }

  .bento{ grid-template-columns: 1fr; gap: 14px; }
  .bento-ai, .bento-data, .bento-cta{ grid-column: span 1; }
  .bento-cta{ flex-direction: column; align-items: flex-start; }

  .bento-card{ padding: 24px; }
  .bento-card h3{ font-size: 1.2rem; margin-bottom: 10px; }
  .bento-card p{ font-size: 0.92rem; margin-bottom: 16px; }
  .bento-card ul li{ font-size: 0.87rem; margin-bottom: 8px; }
  .ai-visual, .data-visual{ padding-top: 18px; }
  .data-visual{ height: 64px; }

  .approach{ padding: 0 0 80px; }
  .approach-steps{ gap: 32px; }

  .contact{ padding: 0 0 90px; }
  .contact-details{
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px 28px;
  }
  .contact-details > div{ flex: 1 1 40%; }
  .contact-details a{ font-size: 0.95rem; }

  .form-row{ grid-template-columns: 1fr; }
  .contact-form{ padding: 20px; gap: 16px; border-radius: 16px; }

  /* Footer: clean stacked list instead of a wrapping row jumble */
  .footer-inner{ flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer-nav{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
  }
  .footer-nav a:not(.footer-social){ display: block; }
  .footer-social{ margin-top: 6px; }
}

@media (max-width: 420px){
  .hero-title{ font-size: 2.2rem; }
  .bento-card{ padding: 20px; }
  .contact-details{ flex-direction: column; }
  .contact-details > div{ flex: 1 1 100%; }
}

.footer-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: currentColor;
  transition: color .2s ease, transform .2s ease, border-color .2s ease;
}
.footer-social:hover{
  color: #0A66C2;
  transform: translateY(-1px);
}