/* Codaro — AuthKit Midnight Command Center palette */
:root {
  --color-midnight-abyss: #05060f;
  --color-ghost-white: #ffffff;
  --color-comet: #d8ecf8;
  --color-arctic-mist: #d1e4fa;
  --color-celestial-light: #b6d9fc;
  --color-azure-glow: #c7d3ea;
  --color-slate-dew: #3f4959;
  --color-whisper-blue: #9da7ba;
  --color-neon-violet: #663af3;
  --color-interstellar-gray: #81899b;

  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --shadow-sm: rgba(186, 207, 247, 0.32) 0px 0px 6px 0px;
  --shadow-md: rgba(238, 186, 247, 0.24) 0px 0px 12px 0px;
  --shadow-subtle: rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset;
  --shadow-card: rgba(199, 211, 234, 0.12) 0px 1px 1px 0px inset,
                 rgba(199, 211, 234, 0.05) 0px 24px 48px 0px inset,
                 rgba(6, 6, 14, 0.7) 0px 24px 32px 0px;
  --shadow-form: rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset,
                 rgba(168, 216, 245, 0.06) 0px 24px 48px 0px inset,
                 rgba(0, 0, 0, 0.3) 0px 16px 32px 0px;

  --highlight-divider: linear-gradient(90deg, rgba(0,0,0,0), rgba(186, 215, 247, 0.18), rgba(0,0,0,0));
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--color-midnight-abyss); color: var(--color-comet); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
body { font-size: 14px; line-height: 1.5; letter-spacing: -0.01em; }

button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }

.font-display { font-family: var(--font-display); letter-spacing: 0; }
.font-mono { font-family: var(--font-mono); font-feature-settings: "tnum"; letter-spacing: 0.04em; }

.btn-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 18px; border-radius: 999px;
  background: rgba(11, 14, 26, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-ghost-white);
  box-shadow: rgba(186, 214, 247, 0.18) 0px 0px 0px 1px inset;
  font-size: 13px; font-weight: 500;
  white-space: nowrap;
  transition: background .2s, box-shadow .2s;
}
.btn-pill:hover { background: rgba(20, 24, 42, 0.92); box-shadow: rgba(186, 214, 247, 0.32) 0px 0px 0px 1px inset; }

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 18px; border-radius: 999px;
  background: rgba(11, 14, 26, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-arctic-mist);
  box-shadow: rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset;
  font-size: 13px; font-weight: 500;
  white-space: nowrap;
  transition: box-shadow .2s, color .2s, background .2s;
}
.btn-outline:hover { color: var(--color-ghost-white); background: rgba(20, 24, 42, 0.92); box-shadow: rgba(186, 215, 247, 0.28) 0px 0px 0px 1px inset; }

.btn-violet {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 22px; border-radius: 6px;
  background: var(--color-neon-violet); color: #fff;
  font-size: 14px; font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(186, 215, 247, 0.12), 0 12px 32px -8px rgba(102, 58, 243, 0.5);
  transition: transform .2s, box-shadow .2s;
}
.btn-violet:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(186, 215, 247, 0.24), 0 16px 40px -8px rgba(102, 58, 243, 0.7); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 6px;
  background: var(--color-midnight-abyss);
  color: var(--color-arctic-mist);
  font-size: 11px; font-weight: 500;
  box-shadow: rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--color-celestial-light); box-shadow: 0 0 8px var(--color-celestial-light); }
.badge.violet .dot { background: var(--color-neon-violet); box-shadow: 0 0 8px var(--color-neon-violet); }

.card-glass {
  background: rgba(11, 14, 26, 0.88);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.divider {
  height: 1px;
  background: var(--highlight-divider);
}

/* Atmospheric grid background */
.grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(186, 215, 247, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(186, 215, 247, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
}

.glow-orb {
  position: absolute; border-radius: 999px; pointer-events: none;
  filter: blur(80px);
  opacity: 0.5;
}

/* 3D card hover */
.card-3d {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.card-3d::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(182, 217, 252, 0.10), transparent 40%);
  opacity: 0; transition: opacity .3s;
}
.card-3d:hover::after { opacity: 1; }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 16px 32px;
  background: rgba(5, 6, 15, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(186, 215, 247, 0.06);
}
.topbar__actions { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.topbar__cta { white-space: nowrap; }
.topbar__cta-short { display: none; }

.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 500; font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--color-ghost-white);
}
.logo-mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: linear-gradient(135deg, var(--color-celestial-light) 0%, var(--color-neon-violet) 100%);
  box-shadow: 0 0 12px rgba(102, 58, 243, 0.4);
  position: relative;
}
.logo-mark::after {
  content: ''; position: absolute; inset: 4px; border-radius: 3px;
  background: var(--color-midnight-abyss);
}
.logo-mark::before {
  content: ''; position: absolute; left: 8px; top: 8px; width: 6px; height: 6px; border-radius: 999px;
  background: var(--color-celestial-light); z-index: 1;
  box-shadow: 0 0 6px var(--color-celestial-light);
}

.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-links a {
  padding: 6px 12px; border-radius: 6px;
  font-size: 13px; color: var(--color-azure-glow);
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--color-ghost-white); background: rgba(186, 214, 247, 0.04); }

.lang-toggle {
  display: inline-flex; align-items: center;
  padding: 3px; border-radius: 999px;
  background: rgba(186, 214, 247, 0.04);
  box-shadow: rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset;
}
.lang-toggle button {
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  font-family: var(--font-mono);
  color: var(--color-whisper-blue);
  letter-spacing: 0.08em;
  transition: color .2s, background .2s;
}
.lang-toggle button.active { background: rgba(186, 214, 247, 0.10); color: var(--color-ghost-white); box-shadow: rgba(186, 215, 247, 0.18) 0px 0px 0px 1px inset; }

/* Section header */
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-whisper-blue);
}
.section-eyebrow::before {
  content: ''; width: 24px; height: 1px; background: rgba(186, 215, 247, 0.3);
}

.section-title {
  font-family: var(--font-display);
  font-size: 44px; line-height: 1.08; letter-spacing: -0.015em;
  color: var(--color-ghost-white);
  margin: 0;
  font-weight: 400;
}

/* Marquee */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 56px; animation: scroll 40s linear infinite; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* utility */
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* Fluid layer is pinned to the viewport and sits *behind* page content
   (z-index: 0). Cards and copy live above it (z-index: 1) so the dye
   never crosses text or UI surfaces — it only shows in the gaps.
   The vertical mask fades the dye out near the very top and bottom of
   the viewport so the topbar and the footer (when scrolled into view)
   sit on clean midnight-abyss without smoke leaking onto them. */
.fixed-smoke {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(180deg,
    transparent 0%,
    #000 12%,
    #000 78%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    #000 12%,
    #000 78%,
    transparent 100%);
}
.smoke-sim { position: absolute; inset: 0; }
#smoke-sim {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
}

/* Respect user motion preference: kill non-essential animation. */
@media (prefers-reduced-motion: reduce) {
  .fixed-smoke { display: none; }
  .card-3d { transition: none !important; }
  .marquee-track { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   Footer — closing identity moment. Centered oversized wordmark with a
   subtle violet back-layer, single email line, one social, privacy stub.
   ───────────────────────────────────────────────────────────────────── */

.footer {
  padding: 80px 0 48px;
  border-top: 1px solid rgba(186, 215, 247, 0.06);
  background: transparent;
  position: relative;
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    ".     .     socials"
    "mark  mark  mark"
    "email email email"
    "legal .     privacy";
  row-gap: 22px;
  align-items: center;
  text-align: center;
}
.footer__socials { grid-area: socials; justify-self: end; }
.footer__mark    { grid-area: mark;    justify-self: center; }
.footer__email   { grid-area: email;   justify-self: center; }
.footer__legal   { grid-area: legal;   justify-self: start; margin-top: 8px; }
.footer__privacy { grid-area: privacy; justify-self: end;   margin-top: 8px; }

.footer__mark {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 8vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--color-ghost-white);
  user-select: none;
}
.footer__mark-front {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, #fff 0%, #b6d9fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer__mark-back {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: var(--color-neon-violet);
  transform: translate(6px, 4px);
  filter: blur(4px);
  opacity: 0.55;
}

.footer__email {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--color-arctic-mist);
  padding: 6px 4px;
  cursor: pointer;
  transition: color .2s;
}
.footer__email:hover { color: var(--color-ghost-white); }
.footer__email-icon {
  display: inline-flex;
  padding: 4px;
  border-radius: 4px;
  color: var(--color-whisper-blue);
  transition: color .2s, background .2s;
}
.footer__email:hover .footer__email-icon {
  color: var(--color-ghost-white);
  background: rgba(186, 214, 247, 0.10);
}
.footer__copied {
  position: absolute; left: 50%; bottom: -22px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--color-celestial-light);
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.footer__copied.is-on { opacity: 1; }

.footer__socials {
  display: flex; gap: 14px; align-items: center;
}
.footer__social {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: var(--color-whisper-blue);
  background: rgba(186, 214, 247, 0.04);
  box-shadow: rgba(186, 215, 247, 0.10) 0px 0px 0px 1px inset;
  transition: color .2s, background .2s, transform .15s;
}
.footer__social:hover {
  color: var(--color-ghost-white);
  background: rgba(102, 58, 243, 0.18);
  transform: translateY(-1px);
}

.footer__privacy {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--color-whisper-blue);
  transition: color .2s;
}
.footer__privacy:hover { color: var(--color-arctic-mist); }

.footer__legal {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--color-slate-dew);
}

/* ─────────────────────────────────────────────────────────────────────
   Meta row (label + value rows). Default = vertical stack, which reads
   cleanly inside narrow columns (Hero left half) without orphan-word
   wraps. The Contact section gets its own horizontal override below.
   ───────────────────────────────────────────────────────────────────── */
[data-grid="meta-row"] {
  display: flex !important;
  flex-direction: column;
  gap: 16px !important;
  grid-template-columns: none !important;
}
[data-grid="meta-row"] > div { min-width: 0; }

/* In the Contact card the meta row has plenty of horizontal room and
   reads better as a centered three-up. */
#contact [data-grid="meta-row"] {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 32px !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Responsive — desktop-first overrides for tablet/phone.
   ───────────────────────────────────────────────────────────────────── */

/* Tablet (≤ 1024) */
@media (max-width: 1024px) {
  .container { padding: 0 24px; }
  .topbar { padding: 14px 24px; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 6px 8px; font-size: 12px; }

  /* Hero / Cases / Services collapse to single column */
  [data-grid="hero"],
  [data-grid="case-panel"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  [data-grid="services"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Case CTA row — flexible on desktop, URL hidden inside button on phone */
.case-cta {
  margin-top: 36px;
  display: flex; gap: 16px;
  align-items: center; flex-wrap: wrap;
}
.case-cta__url-fallback { display: none; }

/* Phone (≤ 720) */
@media (max-width: 720px) {
  .container { padding: 0 18px; }

  .topbar { padding: 12px 18px; gap: 10px; }
  .nav-links { display: none; }
  .topbar__tag { display: none; }                 /* hide STUDIO · BISHKEK chip */
  .topbar__cta-full { display: none; }            /* swap full label → short */
  .topbar__cta-short { display: inline; }
  .topbar__cta { padding: 0 12px; height: 32px; font-size: 12px; }
  .topbar .lang-toggle button { padding: 4px 8px; font-size: 10px; }

  /* Case CTA: drop URL out of button, show as plain text underneath */
  .case-cta__url { display: none; }
  .case-cta__url-fallback {
    display: block; width: 100%;
    font-size: 11px; color: var(--color-whisper-blue);
    margin-top: -6px; letter-spacing: 0.04em;
  }

  .section-title { font-size: clamp(28px, 8vw, 38px) !important; }

  [data-grid="services"] { grid-template-columns: 1fr !important; }
  [data-grid="meta-row"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    text-align: left;
  }

  /* Case strip → horizontal swipe carousel with scroll-snap */
  [data-grid="case-strip"] {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
    margin: 0 -18px;       /* let cards bleed to viewport edges */
    padding-left: 18px;
    padding-right: 18px;
  }
  [data-grid="case-strip"]::-webkit-scrollbar { display: none; }
  [data-grid="case-strip"] > button {
    flex: 0 0 75%;
    scroll-snap-align: start;
  }

  /* Case visuals — only the primary screenshot, no overlap on phone */
  [data-case-visual] {
    height: auto !important;
    min-height: 200px;
    margin-top: 24px;
  }
  [data-case-visual] > div {
    display: block !important;       /* overrides grid (parser) / flex (tg) */
    position: relative !important;
    height: auto !important;
  }
  [data-case-visual] > div > div:first-child {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    transform: none !important;
    margin: 0 auto !important;
    max-width: 460px;
    z-index: 2;
  }
  [data-case-visual] > div > div:not(:first-child) { display: none !important; }

  /* Hero dashboard mock — stack metric tiles */
  [data-grid="hero-metrics"] { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }

  /* Letter form — slightly tighter on phone */
  .brief-letter { padding: 60px 22px 28px; border-radius: 16px; }
  .brief-letter__chrome { font-size: 9px; padding: 12px 18px; }
  .brief-letter__body { font-size: 17px; line-height: 1.65; }
  .brief-letter__greeting { font-size: 19px; }

  /* CasePanel — inner padding tighter, thumbnail height shorter */
  [data-case-visual] { height: 380px !important; }

  /* Footer — drop the asymmetric corners back to a centered stack */
  .footer__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "mark"
      "email"
      "socials"
      "privacy"
      "legal";
    row-gap: 18px;
  }
  .footer__socials,
  .footer__email,
  .footer__privacy,
  .footer__legal,
  .footer__mark {
    justify-self: center !important;
    margin-top: 0 !important;
  }

  /* Hide the LIVE badge on hero card on phone to save room */
  [data-hide-on-phone] { display: none !important; }

  section { padding: 64px 0 !important; }
}