/* ============================================================
   GANTALECT - ENGINEERING LAYER
   Loaded AFTER gantalect-system.css. Replaces the liquid glass layer.

   Direction: read like the company that built Kopa Flow.
   Reference set: Vercel, Supabase, Railway, Cursor, Clerk, PlanetScale.
   What those sites share, and what this layer adopts:
     - they SHOW the system: product UI, code, pipelines, real stacks
     - near-black ground, hairline borders, faint construction grid
     - one geometric sans plus a monospace for anything technical
     - tight, consistent corners; nothing soft or bubbly
     - light used as structure (a beam behind the product), not decoration

   SHAPE RULE (one system, used everywhere):
     controls (buttons, inputs, nav items)   8px
     panels, cards, media frames            12px
     chips and stack tags                    full pill, 6px for tags
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */

/* `html[data-theme='dark']` is listed alongside :root on purpose: the legacy
   gantalect-custom.css redefines the palette (navy) on that selector, which
   outranks :root. Matching it here, in a later file, puts these values back
   in charge. */
:root,
html[data-theme='dark'] {
  --gc-sans: 'Geist', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gc-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Dark ground. Text values verified on --gc-bg:
     text 17.8:1, dim 8.2:1, mute 5.0:1, accent 6.0:1 */
  --gc-ink:        #070809;
  --gc-bg:         #0A0B0D;
  --gc-surface:    #101114;
  --gc-surface-2:  #16181C;
  --gc-line:       #24272D;
  --gc-line-soft:  #191B1F;
  --gc-text:       #EDEEF0;
  --gc-text-dim:   #A3A8B1;
  --gc-text-mute:  #7C828C;

  /* Measure. Wider than the system's 1280px column with less side padding,
     so content uses the screen instead of sitting in a narrow centre strip.
     At 1440px wide the content edge is 48px from the viewport edge. */
  --gc-max:    1600px;
  --gc-gutter: clamp(20px, 3.4vw, 48px);

  --gc-r:      8px;
  --gc-r-md:   8px;
  --gc-r-lg:   12px;
  --gc-r-img:  10px;
  --gc-r-pill: 999px;

  /* Construction grid and the light that falls on it. */
  --grid-line:  rgba(255, 255, 255, 0.045);
  --grid-size:  64px;
  --beam:       rgba(76, 141, 246, 0.22);
  --beam-soft:  rgba(76, 141, 246, 0.08);

  /* Panel edge: a 1px top highlight is the only "material" left. */
  --panel-hi:   rgba(255, 255, 255, 0.05);
  --panel-glow: rgba(111, 165, 248, 0.55);

  /* Code and diagram colours. One accent, everything else is greyscale. */
  --code-key:   var(--gc-accent-hi);
  --code-str:   #C9CED6;
  --code-dim:   #6B717B;

  /* Full-width tinted bands on inner pages. */
  --gc-band:      var(--gc-surface);
  --gc-band-edge: var(--gc-line-soft);

  --gc-shadow:    0 1px 0 rgba(255, 255, 255, 0.03), 0 20px 50px -20px rgba(0, 0, 0, 0.8);
  --gc-shadow-lg: 0 40px 100px -30px rgba(0, 0, 0, 0.9);

  /* Legacy names still used by pages not yet rebuilt. */
  --gc-white:      var(--gc-surface);
  --gc-card:       var(--gc-surface);
  --gc-border:     var(--gc-line);
  --gc-border-lt:  var(--gc-line-soft);
  --gc-text-light: var(--gc-text-mute);
  --gc-navy:       var(--gc-text);
  --gc-navy-lt:    var(--gc-text-dim);
}

html[data-theme='light'] {
  /* Light ground. Verified on --gc-bg: text 18.9:1, dim 7.6:1,
     mute 5.1:1, accent 5.4:1 */
  --gc-ink:        #FFFFFF;
  --gc-bg:         #FAFAFA;
  --gc-surface:    #FFFFFF;
  --gc-surface-2:  #F4F4F5;
  --gc-line:       #E4E4E7;
  --gc-line-soft:  #EEEEF0;
  --gc-text:       #0A0B0D;
  --gc-text-dim:   #50545C;
  --gc-text-mute:  #686D76;

  --grid-line:  rgba(10, 11, 13, 0.055);
  --beam:       rgba(27, 95, 217, 0.16);
  --beam-soft:  rgba(27, 95, 217, 0.06);
  --panel-hi:   rgba(255, 255, 255, 1);
  --panel-glow: rgba(27, 95, 217, 0.5);

  --code-key:   var(--gc-accent);
  --code-str:   #2B2F36;
  --code-dim:   #8A8F98;

  --gc-band:      #F4F4F5;
  --gc-band-edge: var(--gc-line);

  --gc-shadow:    0 1px 2px rgba(10, 11, 13, 0.04), 0 20px 40px -24px rgba(10, 11, 13, 0.18);
  --gc-shadow-lg: 0 40px 80px -30px rgba(10, 11, 13, 0.28);
}

body {
  letter-spacing: -0.006em;
  font-feature-settings: 'ss01' 1;
}

/* Geist is set tight at display sizes. */
.gx-display { font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; }
.gx-h2      { font-weight: 600; letter-spacing: -0.04em; }
.gx-h3      { letter-spacing: -0.02em; }

/* Emphasis inside a headline is the second clause, dimmed. Overrides the
   system's accent-colour rule, which used !important. */
.gx-display em,
.gx-h2 em,
h1 em,
h2 em {
  font-weight: inherit !important;
  color: var(--gc-text-mute) !important;
}

/* ============================================================
   2. CONSTRUCTION GRID
   A faint ruled grid that fades out from the top of a section.
   Used behind the hero, page headers and the closing CTA only:
   on every section it would stop meaning anything.
   ============================================================ */

.gx-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 75%);
}

/* The beam: one cone of accent light, falling on whatever is being shown. */
.gx-beam {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--beam), var(--beam-soft) 55%, transparent);
  filter: blur(20px);
}

/* ============================================================
   3. PANEL
   The one container. Hairline border, a 1px top highlight, and a
   border that lights up under the cursor (plugins/spotlight.client.js).
   ============================================================ */

.gx-panel {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-r-lg);
  background: var(--gc-surface);
  box-shadow: inset 0 1px 0 var(--panel-hi);
}

/* Spotlight border. Feedback: the card the reader is pointing at is the
   one that answers, which tells them it is interactive. */
.gx-panel::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--panel-glow), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s var(--gc-ease);
  pointer-events: none;
}

.gx-panel.is-lit::after { opacity: 1; }

/* ============================================================
   4. MONO DETAIL
   ============================================================ */

/* Announcement chip. One per page at most, and only for real news. */
.gx-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 6px 5px 12px;
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-r-pill);
  background: var(--gc-surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--gc-text-dim);
  text-decoration: none;
  transition: border-color var(--gc-dur) var(--gc-ease), color var(--gc-dur) var(--gc-ease);
}
.gx-chip:hover { border-color: var(--gc-text-mute); color: var(--gc-text); }
.gx-chip__go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--gc-r-pill);
  background: var(--gc-surface-2);
  color: var(--gc-text);
  font-size: 12px;
}

.gx-kbd {
  font-family: var(--gc-mono);
  font-size: 12.5px;
  color: var(--gc-text-mute);
}

.gx-tag {
  border-radius: 6px;
  border-color: var(--gc-line);
  background: var(--gc-surface-2);
  font-family: var(--gc-mono);
}

/* ============================================================
   5. BUTTONS
   ============================================================ */

.gx-btn {
  height: 40px;
  padding: 0 16px;
  border-radius: var(--gc-r);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.gx-btn--primary {
  background: var(--gc-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(76, 141, 246, 0.4);
}
.gx-btn--primary:hover { background: var(--gc-accent-hi); }

html[data-theme='light'] .gx-btn--primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(27, 95, 217, 0.3);
}

.gx-btn--ghost {
  background: var(--gc-surface);
  border-color: var(--gc-line);
  box-shadow: inset 0 1px 0 var(--panel-hi);
}
.gx-btn--ghost:hover { background: var(--gc-surface-2); border-color: var(--gc-text-mute); }

.gx-btn:active { transform: translateY(1px); }

.gc-btn--primary,
.gc-btn--ghost,
.gc-btn--white,
.theme-btn,
.btn-style-one { border-radius: var(--gc-r) !important; }

.gx-iconbtn {
  width: 34px;
  height: 34px;
  border-radius: var(--gc-r);
  border-color: var(--gc-line);
  background: transparent;
}
.gx-iconbtn:hover { background: var(--gc-surface-2); }

/* ============================================================
   6. NAVIGATION
   Full width, 64px, hairline underneath. Content aligns to the site
   container. The lens (components/Nav.vue) slides between links.
   ============================================================ */

.gx-nav {
  height: 64px;
  gap: 28px;
  padding-inline: max(var(--gc-gutter), calc((100vw - var(--gc-max)) / 2 + var(--gc-gutter)));
  background: rgba(10, 11, 13, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
          backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--gc-line-soft);
}
.gx-nav.is-scrolled { border-bottom-color: var(--gc-line); }
html[data-theme='light'] .gx-nav { background: rgba(250, 250, 250, 0.78); }

.gx-nav__logo img { height: 24px; }
.gx-nav__brand { font-size: 16px; letter-spacing: -0.03em; }

/* Links sit left, next to the logo; actions take the right edge. */
.gx-nav__links {
  position: relative;
  margin: 0;
  gap: 0;
}

.gx-nav__links a {
  position: relative;
  z-index: 1;
  padding: 7px 12px;
  font-size: 14px;
  color: var(--gc-text-dim);
}
.gx-nav__links a:hover { background: transparent; color: var(--gc-text); }
.gx-nav__links a.is-current { color: var(--gc-text); }

.gx-nav__lens {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  height: 32px;
  margin-top: -16px;
  width: var(--lens-w, 0);
  border-radius: var(--gc-r);
  background: var(--gc-surface-2);
  transform: translateX(var(--lens-x, 0));
  opacity: 0;
  pointer-events: none;
  /* Width animates on one small element only; snapping it reads as broken. */
  transition: transform 0.32s var(--gc-ease), width 0.32s var(--gc-ease), opacity 0.2s var(--gc-ease);
}
.gx-nav__lens.is-on { opacity: 1; }

.gx-nav__actions { margin-left: auto; }

.gx-nav__cta {
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--gc-r);
  font-size: 14px;
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Small screens: the floating button carries the CTA (layouts/default.vue),
   so the nav does not show the same offer twice. */
@media (max-width: 900px) {
  .gx-nav__cta { display: none; }
}

.gx-nav__mobile {
  inset: 64px 0 auto 0;
  background: var(--gc-bg);
}
.gx-nav__mobile .gx-btn {
  display: flex;
  justify-content: center;
  height: 48px;
  padding: 0 16px;
  border-bottom: 0;
  color: var(--gc-accent-ink);
}

/* Inner pages still built on Bootstrap's .container (contact, FAQs,
   testimonials, discover) follow the same measure as everything else. */
.page-wrapper .container {
  width: 100%;
  max-width: var(--gc-max);
  padding-inline: var(--gc-gutter);
}

/* ============================================================
   7. CLIENT LOGOS - a ruled grid of cells
   ============================================================ */

.gx-logos { border-bottom: 0; padding-block: var(--gc-sec-sm); }

.gx-logos__viewport {
  -webkit-mask-image: none;
          mask-image: none;
}

.gx-logos__track {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-r-lg);
  background: var(--gc-line);
  overflow: hidden;
}

.gx-logos__item {
  justify-content: center;
  min-height: 104px;
  padding: 20px;
  background: var(--gc-bg);
}

@media (min-width: 768px) {
  .gx-logos__track { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   8. FOOTER
   ============================================================ */

.gx-footer { background: var(--gc-bg); border-top-color: var(--gc-line); }

/* ============================================================
   9. FORMS
   ============================================================ */

.gx-field input,
.gx-field textarea,
.gx-field select {
  border-radius: var(--gc-r);
  background: var(--gc-surface);
}

.gx-field input:focus,
.gx-field textarea:focus,
.gx-field select:focus { box-shadow: 0 0 0 3px var(--gc-accent-14); }

.gc-field input,
.gc-field textarea,
input[type='text'],
input[type='email'],
input[type='tel'],
textarea { border-radius: var(--gc-r) !important; }

/* ============================================================
   10. MEDIA
   ============================================================ */

/* Product screenshots are shown in colour: they are the work. Only the
   documentary photography keeps the monochrome treatment. */
.gx-shot {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
}

/* A browser frame around a real screenshot. */
.gx-window {
  overflow: hidden;
  background: var(--gc-surface);
  box-shadow: inset 0 1px 0 var(--panel-hi), var(--gc-shadow-lg);
}

.gx-window__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--gc-line);
  background: var(--gc-surface-2);
}

.gx-window__dots { display: flex; gap: 6px; }
.gx-window__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gc-line);
}

.gx-window__url {
  flex: 1;
  max-width: 420px;
  margin-inline: auto;
  padding: 4px 12px;
  border-radius: 6px;
  background: var(--gc-bg);
  font-family: var(--gc-mono);
  font-size: 12px;
  color: var(--gc-text-mute);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   11. RETIRED
   The liquid glass layer is gone; anything still carrying its classes
   falls back to a plain panel.
   ============================================================ */

.gx-glass { border-radius: var(--gc-r-lg); }

@media (prefers-reduced-transparency: reduce) {
  .gx-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--gc-bg); }
}