/* ============================================================
   Nexora Innovation — Portfolio
   Palette pulled from the logo: deep navy ground, blue → teal gradient
   ============================================================ */

:root {
  --navy-900: #07101d;
  --navy-800: #0b1a2b;
  --navy-700: #0f2337;
  --navy-600: #16304a;

  --blue:     #1f7ae0;
  --blue-600: #2b6fd4;
  --teal:     #46d2c8;
  --teal-300: #7fe3da;

  --text:     #e8f1fa;
  --muted:    #9db3c8;
  --line:     rgba(126, 179, 224, 0.16);

  --grad:     linear-gradient(135deg, #2b6fd4 0%, #1f9fe0 45%, #46d2c8 100%);

  --radius:   16px;
  --radius-lg: 22px;
  --container: 1180px;
  --header-h: 74px;

  --shadow:   0 18px 45px -18px rgba(0, 0, 0, 0.7);
  --ease:     cubic-bezier(.22,.61,.36,1);

  /* surfaces, expressed as tokens so light mode can swap them */
  --bg:          var(--navy-900);
  --bg-alt:      linear-gradient(180deg, var(--navy-800), var(--navy-900));
  --surface:     rgba(255,255,255,.025);
  --surface-2:   rgba(255,255,255,.045);
  --surface-3:   rgba(255,255,255,.03);
  --input-bg:    rgba(7,16,29,.7);
  --header-bg:   rgba(7, 16, 29, .72);
  --header-bg-2: rgba(7, 16, 29, .92);
  --drawer-bg:   rgba(9, 19, 33, .98);
  --on-accent:   #04121f;
  --grain:       .035;
}

/* ---------------- Light theme ---------------- */
:root[data-theme="light"] {
  --text:     #0d2136;
  --muted:    #52708c;
  --line:     rgba(20, 70, 120, 0.14);

  --bg:          #f4f8fc;
  --bg-alt:      linear-gradient(180deg, #e9f1f8, #f4f8fc);
  --surface:     rgba(255,255,255,.78);
  --surface-2:   rgba(255,255,255,.95);
  --surface-3:   rgba(255,255,255,.7);
  --input-bg:    #ffffff;
  --header-bg:   rgba(244, 248, 252, .78);
  --header-bg-2: rgba(244, 248, 252, .95);
  --drawer-bg:   rgba(248, 251, 253, .99);
  --on-accent:   #ffffff;
  --grain:       .018;

  --shadow: 0 18px 40px -20px rgba(18, 56, 96, .35);
}

/* the deep-navy code card stays dark in light mode — it's a code block */
:root[data-theme="light"] .code-card { background: #0d1f33; }
:root[data-theme="light"] .code-card pre { color: #bcd3e8; }
:root[data-theme="light"] .orb { opacity: .28; }
:root[data-theme="light"] .hero-glow {
  background:
    radial-gradient(45% 55% at 22% 30%, rgba(43,111,212,.16), transparent 70%),
    radial-gradient(40% 50% at 78% 20%, rgba(70,210,200,.14), transparent 70%);
}
:root[data-theme="light"] .project-visual::after { background-image: none; }
:root[data-theme="light"] ::-webkit-scrollbar-track { background: #e3ecf4; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb { border-color: #e3ecf4; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  transition: background .35s var(--ease), color .35s var(--ease);
  font-family: 'Outfit', 'Noto Sans Myanmar', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Burmese needs more line height and slightly tighter weights */
html[data-lang="mm"] body {
  font-family: 'Noto Sans Myanmar', 'Outfit', system-ui, sans-serif;
  line-height: 1.9;
}
html[data-lang="mm"] h1,
html[data-lang="mm"] h2,
html[data-lang="mm"] h3 { line-height: 1.5; letter-spacing: 0; }
html[data-lang="mm"] .brand-text small { letter-spacing: .2em; }

body.nav-open { overflow: hidden; }

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

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

h1, h2, h3 { line-height: 1.18; margin: 0 0 .5em; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.12rem; }
p  { margin: 0 0 1rem; color: var(--muted); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 999;
  background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 8px;
}
.skip-link:focus { left: 16px; }

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

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit; font-weight: 600; font-size: .95rem;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--grad);
  color: var(--on-accent);
  box-shadow: 0 10px 28px -12px rgba(37, 150, 214, .9);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(70, 210, 200, .75); }
.btn-ghost {
  background: var(--surface-3);
  border-color: var(--line);
  color: var(--text);
}
.btn-ghost:hover { border-color: rgba(70,210,200,.55); background: rgba(70,210,200,.08); transform: translateY(-2px); }
.btn-sm { padding: 9px 20px; font-size: .88rem; }
.btn-block { width: 100%; }

/* ---------------- Header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.site-header.scrolled {
  background: var(--header-bg-2);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -20px #000;
}
.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }

/* Header = icon (assets/logo.png) + the NEXORA wordmark in text.
   The PNG carries its own dark background, so round it off — it then reads
   as a deliberate badge instead of a stray dark square in light mode. */
.brand-logo {
  height: 42px; width: auto;
  object-fit: cover;
  border-radius: 11px;
  border: 1px solid var(--line);
}
.brand .brand-text { display: flex; }

.brand-mark { width: 40px; height: 40px; object-fit: contain; }
.brand-mark--fallback {
  display: grid; place-items: center;
  background: var(--grad); color: var(--on-accent);
  border-radius: 11px; font-weight: 800; font-size: 1.25rem;
}
.brand-text { flex-direction: column; line-height: 1; }
.brand-text strong { font-size: 1.12rem; font-weight: 800; letter-spacing: .13em; }
.brand-text small {
  font-size: .58rem; letter-spacing: .34em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-top: 3px;
}

/* Desktop nav */
.nav-desktop { display: flex; align-items: center; gap: 22px; }
.nav-desktop a:not(.btn) {
  font-size: .94rem; font-weight: 500; color: var(--muted);
  position: relative; padding: 4px 0;
  transition: color .2s;
}
.nav-desktop a:not(.btn)::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  height: 2px; width: 0; border-radius: 2px;
  background: var(--grad);
  transition: width .28s var(--ease);
}
.nav-desktop a:not(.btn):hover,
.nav-desktop a.active { color: var(--text); }
.nav-desktop a:not(.btn):hover::after,
.nav-desktop a.active::after { width: 100%; }

/* Hamburger — hidden on desktop */
.hamburger {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  position: relative;
}
.hamburger span {
  position: absolute; left: 13px;
  width: 20px; height: 2px; border-radius: 2px;
  background: var(--text);
  transition: transform .3s var(--ease), opacity .2s, top .3s var(--ease);
}
.hamburger span:nth-child(1) { top: 16px; }
.hamburger span:nth-child(2) { top: 22px; }
.hamburger span:nth-child(3) { top: 28px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* Mobile drawer */
.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 10px 20px 26px;
  background: var(--drawer-bg);
  border-bottom: 1px solid var(--line);
}
.nav-mobile a:not(.btn) {
  padding: 14px 4px;
  font-size: 1.02rem; font-weight: 500;
  border-bottom: 1px solid rgba(126,179,224,.08);
  color: var(--muted);
}
.nav-mobile a:not(.btn):hover { color: var(--teal); }
.nav-mobile .btn { margin-top: 18px; }

.nav-backdrop {
  position: fixed; inset: var(--header-h) 0 0;
  background: rgba(4, 10, 18, .6);
  backdrop-filter: blur(2px);
  z-index: 90;
}

/* ---------------- Hero ---------------- */
/* Top padding is deliberately smaller than the bottom: the sticky header
   already contributes 74px of clear space above the hero, so a large
   padding-top on top of that left an obvious dead band before the eyebrow. */
.hero { position: relative; padding: clamp(14px, 2.2vw, 30px) 0 clamp(60px, 8vw, 100px); overflow: hidden; }
.hero-glow {
  position: absolute; inset: -30% -10% auto -10%; height: 720px;
  background:
    radial-gradient(45% 55% at 22% 30%, rgba(43,111,212,.32), transparent 70%),
    radial-gradient(40% 50% at 78% 20%, rgba(70,210,200,.20), transparent 70%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  /* align-items was `center`: the copy column is far taller than the code
     card, so centring pushed the card down the page. Both columns start at
     the top now, and .hero-art adds a small offset to line the card up with
     the h1. */
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px; margin-bottom: 22px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-3);
  font-size: .8rem; font-weight: 500; color: var(--muted);
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 0 0 rgba(70,210,200,.6);
  animation: ping 2.2s infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(70,210,200,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(70,210,200,0); }
  100% { box-shadow: 0 0 0 0 rgba(70,210,200,0); }
}

.lead { font-size: 1.08rem; max-width: 56ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: 34px;
  list-style: none; margin: 46px 0 0; padding: 26px 0 0;
  border-top: 1px solid var(--line);
}
.hero-stats li { display: flex; flex-direction: column; }
.hero-stats strong {
  font-size: 1.35rem; font-weight: 700;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-stats span { font-size: .84rem; color: var(--muted); }

/* Hero art */
.hero-art { position: relative; min-height: 340px; display: grid; place-items: center; }

/* Two-column hero only. .hero-inner centres its columns and the copy column is
   far taller, so the code card floated low. Pin it to the top instead, then
   push it down by exactly the height of the eyebrow pill above the headline —
   that lands the card's top edge level with the top of the h1 ("We build").
   The calc mirrors the .eyebrow box: text (.8rem x 1.65 line-height)
   + 7px padding top/bottom + 1px border top/bottom + its 22px margin-bottom.
   min-height/place-items are reset so the card is not re-centred inside the
   340px art box, which would push it back down. */
@media (min-width: 1025px) {
  .hero-art {
    align-self: start;
    min-height: 0;
    place-items: start center;
    margin-top: calc(0.8rem * 1.65 + 16px + 22px);
  }
}
/* will-change promotes the orb to its own layer, so the expensive 46px blur is
   rasterised once instead of being recomputed every frame of the float
   animation (which runs continuously, including while you scroll). */
.orb { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5; will-change: transform; }
.orb-1 { width: 260px; height: 260px; background: #2b6fd4; top: -10px; left: 0; animation: float 9s ease-in-out infinite; }
.orb-2 { width: 220px; height: 220px; background: #46d2c8; bottom: -20px; right: 10px; animation: float 11s ease-in-out infinite reverse; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }

.code-card {
  position: relative;
  width: 100%;
  background: rgba(11, 26, 43, .88);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  /* backdrop-filter: blur(8px) removed — the card background is already 88%
     opaque, so the blur behind it was invisible while still forcing the
     browser to re-blur the backdrop on every scrolled frame. */
}
.code-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.code-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2c4257; }
.code-bar i:first-child { background: #ff5f57; }
.code-bar i:nth-child(2) { background: #febc2e; }
.code-bar i:nth-child(3) { background: #28c840; }
.code-bar span { margin-left: 8px; font-size: .74rem; color: var(--muted); }
.code-card pre {
  margin: 0; padding: 20px;
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: .8rem; line-height: 1.75; color: #bcd3e8;
  overflow-x: auto;
}
.c-k { color: #7fa8ff; }
.c-s { color: var(--teal-300); }

/* ---------------- Sections ---------------- */
.section { padding: clamp(60px, 8vw, 104px) 0; }
.section-alt { background: var(--bg-alt); }

.section-head { max-width: 760px; margin: 0 auto clamp(38px, 5vw, 58px); text-align: center; }
/* Section titles sat at 2.5rem against a 3.6rem hero, which read as small for
   the job they do. The wider max-width above keeps them on one line at this
   size. */
.section-head h2 { font-size: clamp(1.95rem, 4.2vw, 3.05rem); }
/* The kicker must sit on its own line ABOVE the heading. It used to be
   inline-block, and .section-head h2 is inline-block too, so the two shared a
   line and rendered as "OUR PRODUCTS Projects in development".
   `display:block` gives it its own line; `width:fit-content` keeps the
   gradient hugging the text instead of stretching across the container. */
.kicker {
  display: block; width: fit-content; margin-bottom: 12px;
  font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* centred section heads: a fit-content block needs auto margins to centre */
.section-head .kicker { margin-inline: auto; }
.section-head p { margin-bottom: 0; }

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

/* Services is the one 3-up grid with an odd number of cards, so a strict grid
   would leave a hole at the end of the last row. Lay this one out with flex
   instead and let the leftovers centre. Card widths below match the grid
   tracks exactly (3-up, then 2-up, then 1-up) so it still lines up with the
   other sections. */
#services .grid-3 { display: flex; flex-wrap: wrap; justify-content: center; }
#services .grid-3 > .card { flex: 0 1 calc((100% - 44px) / 3); }

@media (max-width: 1024px) {
  #services .grid-3 > .card { flex-basis: calc((100% - 22px) / 2); }
}
@media (max-width: 640px) {
  #services .grid-3 > .card { flex-basis: 100%; }
}

/* ---------------- Cards ---------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
  transition: transform .32s var(--ease), border-color .32s, background .32s, box-shadow .32s;
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(70,210,200,.38);
  background: var(--surface-2);
  box-shadow: var(--shadow);
}

.service .icon {
  width: 50px; height: 50px; margin-bottom: 18px;
  display: grid; place-items: center;
  font-size: 1.4rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(43,111,212,.24), rgba(70,210,200,.18));
  border: 1px solid var(--line);
}
.service ul { list-style: none; margin: 16px 0 0; padding: 0; }
.service li {
  position: relative; padding-left: 22px; margin-bottom: 7px;
  font-size: .89rem; color: var(--muted);
}
.service li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--grad);
}

/* ---------------- Projects ---------------- */
.project { display: flex; flex-direction: column; }

/* Burmese runs longer — give the badge room to breathe */
html[data-lang="mm"] .badge { font-size: .7rem; padding: 7px 14px; }

/* In normal flow, not pinned to the corner — Burmese labels are much longer
   than English ones and an absolutely-positioned badge overflowed the card. */
.badge {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 100%;
  margin-bottom: 14px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .03em;
  line-height: 1.5;
}
.badge-soon {
  background: rgba(70,210,200,.12);
  border: 1px solid rgba(70,210,200,.4);
  color: var(--teal-300);
}
/* teal-300 is too pale on a white card */
:root[data-theme="light"] .badge-soon {
  background: rgba(13,140,130,.10);
  border-color: rgba(13,140,130,.35);
  color: #0a6d66;
}
:root[data-theme="light"] .badge-soon .pulse { background: #0a9d94; }
.badge .pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
  animation: ping 2s infinite;
}

/* Placeholder art until real product screenshots exist. Sized on a 16:10
   aspect ratio so it reads as an image slot rather than a short banner —
   drop a screenshot in as a background-image and nothing else has to change. */
.project-visual {
  aspect-ratio: 16 / 10; min-height: 180px; margin-bottom: 20px;
  border-radius: var(--radius);
  display: grid; place-items: center;
  font-size: 3.6rem;
  background-size: cover; background-position: center;
  border: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.project-visual::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 78%);
}
.project-visual span { position: relative; z-index: 1; }
.visual-school { background: linear-gradient(135deg, rgba(43,111,212,.34), rgba(11,26,43,.6)); }
.visual-travel { background: linear-gradient(135deg, rgba(31,159,224,.32), rgba(11,26,43,.6)); }
.visual-pos    { background: linear-gradient(135deg, rgba(70,210,200,.30), rgba(11,26,43,.6)); }

.feature-list { list-style: none; margin: 4px 0 18px; padding: 0; }
.feature-list li {
  position: relative; padding-left: 22px; margin-bottom: 6px;
  font-size: .88rem; color: var(--muted);
}
.feature-list li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--teal); font-size: .82rem; font-weight: 700;
}

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.chips span {
  padding: 4px 11px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-3);
  font-size: .72rem; color: var(--muted);
}

.progress {
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
  margin-top: auto;
}
.progress span {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: var(--grad);
  transition: width 1.2s var(--ease);
}
.reveal.visible .progress span { width: var(--p); }
.progress-label { display: block; margin-top: 8px; font-size: .74rem; color: var(--muted); }

.project--ghost {
  display: grid; place-items: center;
  border-style: dashed;
  background: transparent;
  text-align: center;
  min-height: 280px;
}
.ghost-inner { padding: 10px; }
.ghost-plus {
  width: 52px; height: 52px; margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px dashed rgba(126,179,224,.4);
  font-size: 1.5rem; color: var(--teal);
}

/* ---------------- Process ---------------- */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.steps li {
  position: relative;
  padding: 28px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color .3s, transform .3s var(--ease);
}
.steps li:hover { border-color: rgba(70,210,200,.35); transform: translateY(-4px); }
.step-no {
  display: block; margin-bottom: 12px;
  font-size: 1.7rem; font-weight: 800;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.steps p { margin: 0; font-size: .9rem; }

/* ---------------- Stack ---------------- */
.stack-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.stack-item {
  padding: 11px 22px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-3);
  font-size: .9rem; font-weight: 500; color: var(--muted);
  transition: color .25s, border-color .25s, transform .25s var(--ease), background .25s;
}
.stack-item:hover {
  color: var(--text); border-color: rgba(70,210,200,.45);
  background: rgba(70,210,200,.08); transform: translateY(-3px);
}

/* ---------------- About ---------------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.values { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.value {
  padding: 22px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.value h3 { font-size: 1rem; margin-bottom: 6px; }
.value p { margin: 0; font-size: .86rem; }

/* ---------------- Contact ---------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }

.contact-list { list-style: none; margin: 28px 0 0; padding: 0; }
.contact-list li {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(126,179,224,.1);
  color: var(--muted); font-size: .94rem;
}
.contact-list a:hover { color: var(--teal); }

.contact-form { padding: 30px; }
.field { margin-bottom: 16px; }
.field label {
  display: block; margin-bottom: 7px;
  font-size: .82rem; font-weight: 500; color: var(--muted);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  font: inherit; font-size: .93rem;
  transition: border-color .25s, box-shadow .25s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: rgba(70,210,200,.6);
  box-shadow: 0 0 0 3px rgba(70,210,200,.12);
}
.field input.invalid, .field textarea.invalid { border-color: #ff6b6b; }
.field select option { background: var(--navy-800); }

.form-note { margin: 14px 0 0; font-size: .85rem; min-height: 1.2em; text-align: center; }
.form-note.ok { color: var(--teal); }
.form-note.err { color: #ff8a8a; }

/* ---------------- Footer ---------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 40px 0;
}
.footer-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
/* Footer: full logo image (assets/logo-full.png) when it exists, otherwise
   the icon + text wordmark. Both are shown side by side. */
.footer-brand { display: flex; align-items: center; gap: 13px; }
.footer-logo {
  height: 52px; width: auto;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.footer-brand .footer-brand-text { display: block; }

.footer-brand strong { display: block; letter-spacing: .12em; font-size: 1rem; }
.footer-brand p { margin: 4px 0 0; font-size: .8rem; letter-spacing: .06em; }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-links a { font-size: .9rem; color: var(--muted); transition: color .2s; }
.footer-links a:hover { color: var(--teal); }
.copyright { margin: 0; font-size: .82rem; width: 100%; text-align: center;
  border-top: 1px solid rgba(126,179,224,.08); padding-top: 20px; }

/* ---------------- Include slots (layout partials) ---------------- */
/* Reserves the header's height so the page doesn't jump when the
   partial is fetched and injected. */
.include-header { min-height: var(--header-h); }

/* ---------------- Project card link ---------------- */
.project-link {
  display: inline-block;
  margin-bottom: 18px;
  font-size: .88rem; font-weight: 600;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: opacity .2s, transform .2s var(--ease);
}
.project-link:hover { opacity: .8; transform: translateX(3px); }

/* ---------------- Project detail page ---------------- */
.page-top { padding-top: clamp(38px, 5vw, 60px); }

.project-hero { position: relative; overflow: hidden; }

.back-link {
  display: inline-block; margin-bottom: 26px;
  font-size: .88rem; color: var(--muted);
  transition: color .2s, transform .2s var(--ease);
}
.back-link:hover { color: var(--teal); transform: translateX(-3px); }

.project-hero-grid {
  position: relative;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center;
}
.project-hero-grid h1 { margin-top: 16px; font-size: clamp(1.9rem, 4.4vw, 3rem); }

/* static badge (in the flow, not pinned to a card corner) */
.badge-static { position: static; display: inline-flex; }

.progress-wide { max-width: 420px; margin-top: 26px; }

.project-visual--lg { height: clamp(200px, 30vw, 290px); font-size: 5rem; margin-bottom: 0; }

.grid-2 { grid-template-columns: repeat(2, 1fr); }

.prose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
.prose { font-size: 1.02rem; margin-top: 10px; }

.feature-list--lg li { font-size: .98rem; margin-bottom: 11px; padding-left: 26px; }
.feature-list--lg li::before { font-size: .95rem; }

.stack-grid--left { justify-content: flex-start; margin-top: 14px; }

.cta-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(43,111,212,.16), rgba(70,210,200,.10));
}
.cta-band h2 { margin-bottom: .3em; }
.cta-band p  { margin: 0; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* extra status badges */
.badge-beta {
  background: rgba(254,188,46,.12);
  border: 1px solid rgba(254,188,46,.42);
  color: #ffd479;
}
.badge-beta .pulse { background: #febc2e; }
.badge-live {
  background: rgba(40,200,64,.12);
  border: 1px solid rgba(40,200,64,.42);
  color: #7ee493;
}
.badge-live .pulse { background: #28c840; }

/* ============================================================
   CREATIVE LAYER — all CSS, no animation library.
   Everything here degrades gracefully and respects
   prefers-reduced-motion (see the block at the end of the file).
   ============================================================ */

/* ---------------- Scroll progress bar ---------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 200;
  height: 3px; width: 100%;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
  pointer-events: none;
}

/* ---------------- Animated gradient mesh + grain ---------------- */
body::before {
  content: '';
  position: fixed; inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 18% 22%, rgba(43,111,212,.20), transparent 62%),
    radial-gradient(34% 38% at 82% 16%, rgba(70,210,200,.14), transparent 62%),
    radial-gradient(40% 44% at 72% 82%, rgba(31,159,224,.13), transparent 62%);
  animation: meshDrift 26s ease-in-out infinite alternate;
}
@keyframes meshDrift {
  0%   { transform: translate3d(0,0,0)        scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0)   scale(1.08); }
  100% { transform: translate3d(2.5%, -2%, 0) scale(1.04); }
}

/* fine grain so the flat gradients don't band */
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------- Language switch ---------------- */
.lang-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-3);
}
.lang-switch button {
  padding: 5px 13px;
  border: 0; border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit; font-size: .78rem; font-weight: 600;
  cursor: pointer;
  transition: color .25s, background .25s;
}
.lang-switch button.is-active {
  background: var(--grad);
  color: var(--on-accent);
}
/* ---------------- Theme toggle (sun / moon) ---------------- */
.theme-toggle {
  position: relative;
  width: 38px; height: 38px;
  flex: 0 0 38px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--muted);
  cursor: pointer;
  overflow: hidden;
  transition: color .25s, border-color .25s, background .25s, transform .25s var(--ease);
}
.theme-toggle:hover {
  color: var(--teal);
  border-color: rgba(70,210,200,.5);
  transform: rotate(-12deg) scale(1.06);
}
.theme-icon {
  position: absolute;
  display: grid; place-items: center;
  transition: transform .45s var(--ease), opacity .3s;
}
.theme-icon svg { width: 18px; height: 18px; }

/* dark mode → show the sun (click it to go light) */
.theme-icon--sun  { opacity: 1; transform: rotate(0)      scale(1); }
.theme-icon--moon { opacity: 0; transform: rotate(-90deg) scale(.4); }

/* light mode → show the moon */
:root[data-theme="light"] .theme-icon--sun  { opacity: 0; transform: rotate(90deg) scale(.4); }
:root[data-theme="light"] .theme-icon--moon { opacity: 1; transform: rotate(0)     scale(1); }

/* mobile drawer controls row */
/* Sits at the TOP of the mobile drawer, above the links, so language and
   theme are the first things reachable. The rule below separates it from the
   links and matches the divider the links draw between themselves. */
.mobile-controls {
  display: flex; align-items: center; gap: 12px;
  margin: 2px 0 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(126,179,224,.08);
}

/* ---------------- Cards: spotlight + tilt + gradient border ---------------- */
.card {
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:
    transform .45s var(--ease),
    border-color .32s,
    background .32s,
    box-shadow .32s;
}

/* pointer-following spotlight */
.card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(70,210,200,.13),
    transparent 62%
  );
  transition: opacity .35s;
}
.card:hover::before { opacity: 1; }

/* gradient hairline that lights up on hover */
.card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(43,111,212,.7), rgba(70,210,200,.7), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s;
}
.card:hover::after { opacity: 1; }

.card:hover {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
}

/* keep card content above the spotlight layers */
.card > * { position: relative; z-index: 1; }

/* ---------------- Buttons: magnetic pull + shine sweep ---------------- */
.btn-primary {
  position: relative;
  overflow: hidden;
  transform: translate(var(--tx, 0), var(--ty, 0));
}
.btn-primary::after {
  content: '';
  position: absolute; top: 0; left: -75%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left .65s var(--ease);
}
.btn-primary:hover::after { left: 125%; }

/* ---------------- Service icons: float + glow ---------------- */
.service .icon { transition: transform .4s var(--ease), box-shadow .4s; }
.card:hover .service .icon,
.service:hover .icon {
  transform: translateY(-4px) scale(1.06) rotate(-4deg);
  box-shadow: 0 12px 26px -12px rgba(70,210,200,.7);
}

/* ---------------- Project visual: drifting icon ---------------- */
.project-visual span { transition: transform .5s var(--ease); }
.project:hover .project-visual span { transform: scale(1.12) translateY(-4px); }

/* sheen sweeping across the project artwork */
.project-visual::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform .85s var(--ease);
  z-index: 1;
}
.project:hover .project-visual::before { transform: translateX(100%); }

/* The tech stack used to be an infinite marquee. It needed four copies of the
   list to loop without a seam, which put duplicate names on screen at the same
   time, so it is a plain wrapped list now (.stack-grid) and the marquee rules
   have been removed. */
.stack-grid .stack-item { white-space: nowrap; }

/* ---------------- Contact channels ---------------- */
.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px;
  margin: 22px 0 8px;
}
.channel {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  transition: transform .28s var(--ease), border-color .28s, background .28s, box-shadow .28s;
}
.channel:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow);
}
.channel-icon {
  flex: 0 0 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  color: #fff;
}
.channel-icon svg { width: 20px; height: 20px; }
.channel-text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.channel-text strong { font-size: .93rem; font-weight: 600; }
.channel-text small  { font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }

.channel--viber     .channel-icon { background: #7360f2; }
.channel--phone     .channel-icon { background: #2fb344; }
.channel--facebook  .channel-icon { background: #1877f2; }
.channel--email     .channel-icon { background: linear-gradient(135deg, #2b6fd4, #46d2c8); }

.channel--viber:hover     { border-color: rgba(115,96,242,.55); }
.channel--phone:hover     { border-color: rgba(47,179,68,.55); }
.channel--facebook:hover  { border-color: rgba(24,119,242,.55); }
.channel--email:hover     { border-color: rgba(70,210,200,.55); }

/* Brand colours for channels you may add later:
   Messenger  linear-gradient(45deg, #0695ff, #a334fa)
   Telegram   #229ed9
   WhatsApp   #25d366                                         */

.channel-label {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 24px;
  font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.channel-label::after { content: ''; flex: 1; height: 1px; background: var(--line); min-width: 30px; }

/* ---------------- Headline word reveal ---------------- */
/* Each phrase is its own line. These were inline-block, and a multi-line
   inline-block aligns on its LAST baseline — which wedged a big empty gap
   between the two phrases. `block` removes that; `balance` stops the first
   phrase breaking as "We build software / that" with one word stranded. */
.hero h1 .w {
  display: block;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(26px) rotate(2deg);
  animation: wordIn .8s var(--ease) forwards;
}
@keyframes wordIn {
  to { opacity: 1; transform: none; }
}

/* ---------------- Section heading underline sweep ---------------- */
/* The rule is pinned to both edges of the h2 (which is inline-block, so it
   shrink-wraps the text) — that makes it exactly as wide as the title instead
   of a fixed 62px stub. It animates with scaleX rather than width, so the
   sweep works without knowing the width up front. */
.section-head h2 { position: relative; display: inline-block; }
.section-head h2::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -10px;
  height: 3px; border-radius: 3px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .8s var(--ease);
}
.section-head.visible h2::after,
.section:hover .section-head h2::after { transform: scaleX(1); }

/* ---------------- Custom scrollbar ---------------- */
* { scrollbar-width: thin; scrollbar-color: #2a4761 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--blue), var(--teal));
  border-radius: 99px;
  border: 3px solid var(--navy-900);
}

/* ---------------- Reveal on scroll ---------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; }

/* directional variants */
.reveal-left  { transform: translateX(-34px); }
.reveal-right { transform: translateX(34px); }
.reveal-scale { transform: scale(.94); }
.reveal-left.visible, .reveal-right.visible, .reveal-scale.visible { transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .steps  { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .hero-art { min-height: 0; order: 2; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .project-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .prose-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Mobile — hamburger takes over */
@media (max-width: 860px) {
  .nav-desktop { display: none; }
  .hamburger   { display: block; }

  .nav-mobile {
    display: flex;
    position: absolute; left: 0; right: 0; top: 100%;
    z-index: 95;
    max-height: 0;
    overflow: hidden;
    padding-block: 0;
    opacity: 0;
    transition: max-height .38s var(--ease), opacity .25s, padding .38s var(--ease);
  }
  .nav-mobile.open {
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding-block: 10px 26px;
    opacity: 1;
  }
}

@media (min-width: 861px) {
  .nav-backdrop { display: none !important; }
}

/* Small phones */
@media (max-width: 640px) {
  :root { --header-h: 66px; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .steps  { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .brand-logo { height: 34px; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .cta-actions .btn { flex: 1 1 100%; }
  .hero-stats { gap: 22px; }
  .hero-stats li { min-width: 44%; }
  .hero-actions .btn { flex: 1 1 100%; }
  .card { padding: 22px; }
  .contact-form { padding: 22px; }
  .footer-inner { flex-direction: column; text-align: center; }
  .brand-text small { letter-spacing: .28em; }
}

@media (max-width: 380px) {
  .brand-text small { display: none; }
}

/* Motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}