/* =============================================================
   styles.css — Vicente Hernaiz Portfolio
   Global styles: reset, variables, layout, shared components.
   Page-specific styles live in assets/css/pages/*.css
   ============================================================= */

/* ── Reset & box model ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Global utility: section eyebrow label ───────────────────
   Use on any small uppercase mono label that introduces a section.
   Apply as an extra class alongside the component class.
   Individual component classes keep only layout-specific props
   (margin, padding, padding-left, etc.).
   ─────────────────────────────────────────────────────────── */
.section-label {
  font-family:    var(--font-mono);
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--white);
}

/* ── Design tokens ───────────────────────────────────────────
   All colours, fonts, and spacing values are defined here.
   Change a value here → it updates everywhere.
   ─────────────────────────────────────────────────────────── */
:root {
  /* Background */
  --bg-main:   #0E0911;
  --bg-hero:   #140722;

  /* Brand purple */
  --purple-500:        #8F00D8;
  --purple-900:        #E8C6FD;
  --purple-border:     rgba(143, 0, 216, 0.61);
  --purple-card:       rgba(170, 172, 241, 0.07);
  --purple-card-border:rgba(170, 172, 241, 0.11);

  /* Supporting */
  --blue-800:  #878DEA;
  --gray-400:  #2E2E2E;
  --gray-900:  #C8C8C8;
  --white:     #FAFAFA;
  --off-white: #EAEAEA;

  /* Typography */
  --font-headings: 'Geist', sans-serif;
  --font-text:     'Work Sans', sans-serif;
  --font-mono:     'Geist Mono', monospace;

    /* Mono typography tokens (threshold: >20px height)
      >20px -> weight 400, tracking -0.5px
      <=20px -> weight 300, tracking 0px */
    --mono-fw-gt20: 400;
    --mono-ls-gt20: -0.5px;
    --mono-fw-lte20: 300;
    --mono-ls-lte20: 0px;
    /* Accent color (used by custom cursor) */
    --accent: var(--purple-500);

  /* Typography scale — weight & tracking by font-size tier
     ≥24px   → display   | fw 600 | ls -3px
     23–18px → heading   | fw 500 | ls  0px
     17–13px → body      | fw 400 | ls 0px
     ≤12px   → caption   | fw 300 | ls +1.6px */
  --fw-display: 600;  --ls-display: -1px;
  --fw-heading: 500;  --ls-heading: 0px;
  --fw-body:    400;  --ls-body:    0px;
  --fw-caption: 300;  --ls-caption: 1.6px;

  /* Font size tokens (desktop) */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-36: 36px;
  --fs-38: 38px;
  --fs-40: 40px;
  --fs-48: 48px;

  /* Layout */
  --sidebar-w:  64px;
  --scrollbar-w: 3px;
  --topbar-h:   52px;

/* hero pixeled backgorund */
  --pixel-color:        #8f00d8;
  --pixel-opacity:      0.10;
  --pixel-hover-opacity: 0.34;
  --pixel-border:       rgba(143, 0, 216, 0.12);
  --grid-cols:          16;
  --grid-rows:          12;
  --transition-speed:   0.25s;
}

html { scroll-behavior: auto; } /* Lenis handles smooth scroll on desktop */

/* ── Typography tokens for TABLET (≤900px)
   Redefine font-weight and letter-spacing for tablet sizes
   ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root {
    /* Display tier: large headings (adjust weight/tracking for tablet) */
    --fw-display: 600;  --ls-display: -0.5px;

    /* Heading tier: section titles */
    --fw-heading: 500;  --ls-heading: 0px;

    /* Body tier: paragraph text */
    --fw-body:    400;  --ls-body:    0px;

    /* Caption tier: small labels */
    --fw-caption: 300;  --ls-caption: 1.2px;

    /* Mono typography (for code, data, etc.) */
    --mono-fw-gt20: 400;   --mono-ls-gt20: -0.25px;
    --mono-fw-lte20: 300;  --mono-ls-lte20: 0px;

    /* Font size tokens (tablet - slight reduction) */
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 15px;    /* reduced from 16px */
    --fs-20: 19px;    /* reduced from 20px */
    --fs-22: 20px;    /* reduced from 22px */
    --fs-24: 22px;    /* reduced from 24px */
    --fs-28: 26px;    /* reduced from 28px */
    --fs-32: 30px;    /* reduced from 32px */
    --fs-36: 34px;    /* reduced from 36px */
    --fs-38: 36px;    /* reduced from 38px */
    --fs-40: 38px;    /* reduced from 40px */
    --fs-48: 42px;    /* reduced from 48px */
  }
}

/* ── Typography tokens for PHONE (≤640px)
   Redefine font-weight and letter-spacing for mobile sizes
   ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    /* Display tier: large headings on mobile */
    --fw-display: 600;  --ls-display: 0px;

    /* Heading tier: section titles */
    --fw-heading: 500;  --ls-heading: 0px;

    /* Body tier: paragraph text (smaller on phone) */
    --fw-body:    400;  --ls-body:    0.25px;

    /* Caption tier: small labels */
    --fw-caption: 300;  --ls-caption: 1px;

    /* Mono typography (for code, data, etc.) */
    --mono-fw-gt20: 400;   --mono-ls-gt20: 0px;
    --mono-fw-lte20: 300;  --mono-ls-lte20: 0.25px;

    /* Font size tokens (phone - significant reduction) */
    --fs-11: 10px;
    --fs-12: 11px;
    --fs-13: 12px;
    --fs-14: 13px;
    --fs-15: 14px;
    --fs-16: 16px;    /* reduced from 16px */
    --fs-20: 17px;    /* reduced from 20px */
    --fs-22: 18px;    /* reduced from 22px */
    --fs-24: 20px;    /* reduced from 24px */
    --fs-28: 24px;    /* reduced from 28px */
    --fs-32: 28px;    /* reduced from 32px */
    --fs-36: 30px;    /* reduced from 36px */
    --fs-38: 32px;    /* reduced from 38px */
    --fs-40: 34px;    /* reduced from 40px */
    --fs-48: 36px;    /* reduced from 48px */

  }
}

body {
  background:  var(--bg-main);
  color:       var(--white);
  font-family: var(--font-text);
  font-size:   var(--fs-16);
  line-height: 1.5;
  min-height:  100vh;
  overflow-x:  hidden;
}

img    { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── Top bar ─────────────────────────────────────────────────
   Fixed header. Contains: language switcher, AI input, contact CTA.
   ─────────────────────────────────────────────────────────── */
.topbar {
  position:  fixed;
  top: 48px; right: 48px; left: auto;
  z-index:   200;
  height: fit-content;
  width: fit-content;
  display:   flex;
  align-items: center;
  justify-content: flex-end;
  gap:       12px;
}

.topbar__spacer { flex: 1; }

.topbar__right {
  display:     flex;
  align-items: center;
  gap:         12px;
}

/* Language switcher */
.lang-switcher {
  display:     flex;
  align-items: center;
  gap:         4px;
  height:      48px;
  padding:     4px;
  background:  rgba(20, 7, 34, 0.36);
  border:      1px solid var(--purple-border);
  border-radius: 5px;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.lang-switcher__check {
  display:     flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  background:  var(--bg-main);
  border-radius: 2px;
}

.lang-switcher__label {
  font-family:    var(--font-headings);
  font-size:      var(--fs-13);
  font-weight:    var(--fw-body);
  letter-spacing: var(--ls-body);
  color:          var(--gray-900);
  padding:        0 4px;
}

/* AI top-bar shortcut — real input that navigates to /ai?q= */
.ai-topbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           231px;
  height:          48px;
  padding-left:    24px;
  background:      rgba(25, 0, 33, 0.61);
  border:          1px solid var(--purple-border);
  border-radius:   8px;
  backdrop-filter: blur(10.7px);
  -webkit-backdrop-filter: blur(10.7px);
  overflow:        hidden;
}

.ai-topbar__input {
  flex:           1;
  background:     transparent;
  border:         none;
  outline:        none;
  font-family:    var(--font-text);
  font-size:      var(--fs-16);
  font-weight:    var(--fw-body);
  letter-spacing: var(--ls-body);
  color:          var(--white);
  min-width:      0;
}
.ai-topbar__input::placeholder { color: rgba(255, 255, 255, 0.6); }

.ai-topbar__send {
  display:     flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background:  var(--bg-hero);
  border:      1px solid var(--gray-400);
  border-radius: 8px;
  flex-shrink: 0;
}

/* Contact CTA button */
.btn-contact {
  display:     flex;
  align-items: center;
  justify-content: center;
  height:      48px;
  padding:     0 24px;
  border-radius: 8px;
  font-family:    var(--font-text);
  font-size:      var(--fs-16);
  font-weight:    var(--fw-display);
  letter-spacing: var(--ls-body);
  white-space:    nowrap;
  transition:  opacity 0.2s;
  background-color: #ffffff;
  color:          #000000;
  mix-blend-mode: difference;
}
.btn-contact:hover { opacity: 0.85; }

/* ── Page layout ─────────────────────────────────────────────
   Flex row: sidebar | scroll-bar | main content
   ─────────────────────────────────────────────────────────── */
.layout {
  display:    flex;
  padding-top: 0px;
  min-height: calc(100vh - var(--topbar-h));
}

/* ── Sidebar navigation ──────────────────────────────────────
   Default: 64px icon-only nav with tooltips.
   Hover:   176px expanded with labels + gradient background.
   ─────────────────────────────────────────────────────────── */
.sidebar {
  position:  sticky;
  top:       0;
  width:     64px;
  height:    100vh;
  flex-shrink: 0;
  display:   flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding:   42px 6px;
  background: var(--bg-main);
  border-right: 1px solid var(--purple-border);
  z-index:   100;
  overflow:  hidden;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.35s ease;
}

/* Hover state: expand + gradient */
.sidebar:hover {
  width: 210px;
  background: linear-gradient(
    180deg,
    rgb(34, 12, 48)  0%,
    rgb(14,  9, 17) 42%,
    rgb(14,  9, 17) 55%,
    rgb(34, 12, 48) 95%
  );
}

/* ── Dot-grid logo ── */
.sidebar__logo {
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       48px;
  height:      48px;
  flex-shrink: 0;
}
a.sidebar__logo {
  cursor:          pointer;
  text-decoration: none;
  border-radius:   6px;
  transition:      opacity 0.18s ease;
}
a.sidebar__logo:hover { opacity: 0.7; }

/* ── Nav list ── */
.sidebar__nav {
  display:        flex;
  flex-direction: column;
  list-style:     none;
  width:          100%;
  padding:        0 4px;
}

/* ── Nav items ── */
.sidebar__item {
  display:     flex;
  align-items: center;
  gap:         12px;
  height:      48px;
  padding:     0 8px;
  border-radius: 8px;
  cursor:      pointer;
  opacity:     0.5;
  position:    relative;
  transition:  ease-in-out 0.2s ease, opacity 0.2s ease;
  width:       100%;
  min-width:   0;
} 

.sidebar__item:hover {
  background: rgba(143, 0, 216, 0.15);
  opacity:    1;
}

.sidebar__item--active { opacity: 1; }

/* Sidebar hovered: raise base opacity, keep per-item hover */
.sidebar:hover .sidebar__item { opacity: 0.65; }
.sidebar:hover .sidebar__item:hover { opacity: 1; background: rgba(143, 0, 216, 0.15); }
.sidebar:hover .sidebar__item--active { opacity: 1; }

/* Tooltip — visible in default state, hidden when sidebar expands */
.sidebar__item::after {
  content:   attr(data-tip);
  position:  absolute;
  left:      calc(100% + 8px);
  top:       50%;
  transform: translateY(-50%);
  background: rgba(14, 9, 17, 0.95);
  border:    1px solid var(--purple-border);
  color:          var(--white);
  font-family:    var(--font-mono);
  font-size:      var(--fs-12);
  font-weight:    var(--mono-fw-lte20);
  letter-spacing: var(--mono-ls-lte20);
  padding:        4px 8px;
  border-radius:  4px;
  white-space:    nowrap;
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.2s;
  z-index:        999;
}
.sidebar__item:hover::after          { opacity: 1; }
.sidebar:hover .sidebar__item::after { opacity: 0; pointer-events: none; }

/* ── Labels: hidden by default, slide in on sidebar hover ── */
.sidebar__label {
  font-family:    var(--font-text);
  font-size:      var(--fs-20);
  font-weight:    400;
  letter-spacing: -0.2px;
  line-height:    32px;
  color:          #eaeaea;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  max-width:      0;
  opacity:        0;
  flex:           1;
  min-width:      0;
  transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity   0.2s ease;
}

.sidebar:hover .sidebar__label {
  max-width: 100%;
  opacity:   1;
}

/* ── Bottom spacer (mirrors logo height for justify-content: space-between) ── */
.sidebar__bottom {
  width:       48px;
  height:      48px;
  flex-shrink: 0;
}

/* ── Scroll progress bar ─────────────────────────────────────
   Thin purple bar on the left edge of main content.
   ─────────────────────────────────────────────────────────── */
.scroll-bar {
  position:  sticky;
  top:       0px;
  width:     var(--scrollbar-w);
  height:    100vh;
  flex-shrink: 0;
  display:   flex;
  align-items: flex-start;
  justify-content: center;
  overflow:  visible;
}

.scroll-bar__fill {
  width:         3px;
  height:        146px; /* updated by scroll.js */
  background:    var(--purple-500);
  border-radius: 0 0 2px 2px;
  transition:    height 0.05s linear;
  position:      sticky;
  top:           0;
}

/* ── Main content area ───────────────────────────────────────
   Takes remaining horizontal space after sidebar.
   ─────────────────────────────────────────────────────────── */
.main {
  flex:       1;
  min-width:  0;
  overflow-x: hidden;
  background: var(--bg-hero);
  position:   relative;
}

/* ── AI Chat Modal ───────────────────────────────────────────
   Full-screen overlay. Opens from topbar or any page.
   ─────────────────────────────────────────────────────────── */
.ai-modal {
  position:   fixed;
  inset:      0;
  z-index:    500;
  display:    flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 9, 17, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity:    0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.ai-modal.is-open {
  opacity:        1;
  pointer-events: all;
}

.ai-modal__box {
  width:         min(640px, 95vw);
  max-height:    80vh;
  display:       flex;
  flex-direction: column;
  gap:           16px;
  background:    rgba(20, 7, 34, 0.95);
  border:        1px solid var(--purple-border);
  border-radius: 16px;
  padding:       32px;
  overflow-y:    auto;
}

.ai-modal__header {
  display:     flex;
  align-items: center;
  justify-content: space-between;
}

.ai-modal__title {
  font-family:    var(--font-headings);
  font-size:      var(--fs-22);
  font-weight:    var(--fw-heading);
  letter-spacing: var(--ls-heading);
  color:          var(--white);
}

.ai-modal__title span {
  background: linear-gradient(123.92deg, #7A78FF 0.39%, #FFFFFF 48.4%, #D49BF1 94.45%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ai-modal__close {
  display:        flex;
  align-items:    center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius:  8px;
  color:          var(--gray-900);
  font-size:      var(--fs-20);
  font-weight:    var(--fw-heading);
  letter-spacing: var(--ls-heading);
  transition:     ease-in-out 0.2s, color 0.2s;
}
.ai-modal__close:hover {
  background: rgba(143, 0, 216, 0.15);
  color:      var(--white);
}

/* Conversation thread */
.ai-modal__thread {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  flex:           1;
  overflow-y:     auto;
}

.ai-bubble {
  padding:        12px 16px;
  border-radius:  10px;
  font-family:    var(--font-text);
  font-size:      var(--fs-15);
  font-weight:    var(--fw-body);
  letter-spacing: var(--ls-body);
  line-height:    1.55;
  max-width:      90%;
}

.ai-bubble--user {
  align-self: flex-end;
  background: rgba(143, 0, 216, 0.2);
  border:     1px solid var(--purple-border);
  color:      var(--white);
}

.ai-bubble--ai {
  align-self: flex-start;
  background: rgba(135, 141, 234, 0.1);
  border:     1px solid var(--purple-card-border);
  color:      var(--text-body);
}

/* Input row */
.ai-modal__input-row {
  display:    flex;
  gap:        8px;
  align-items: center;
}

.ai-modal__input {
  flex:           1;
  height:         48px;
  padding:        0 16px;
  background:     rgba(135, 141, 234, 0.1);
  border:         1px solid var(--purple-border);
  border-radius:  8px;
  outline:        none;
  font-family:    var(--font-text);
  font-size:      var(--fs-15);
  font-weight:    var(--fw-body);
  letter-spacing: var(--ls-body);
  color:          var(--white);
}
.ai-modal__input::placeholder { color: rgba(250, 250, 250, 0.4); }

.ai-modal__send {
  display:     flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background:  var(--purple-500);
  border-radius: 8px;
  flex-shrink: 0;
  transition:  opacity 0.2s;
}
.ai-modal__send:hover   { opacity: 0.85; }
.ai-modal__send:disabled { opacity: 0.4; pointer-events: none; }

/* Suggestion chips */
.ai-modal__chips {
  display:    flex;
  flex-wrap:  wrap;
  gap:        8px;
}

.chip {
  display:        flex;
  align-items:    center;
  justify-content: center;
  height:         40px;
  padding:        0 12px;
  background:     var(--purple-card);
  border:         1px solid var(--purple-card-border);
  border-radius:  8px;
  font-family:    var(--font-text);
  font-size:      var(--fs-13);
  font-weight:    var(--fw-body);
  letter-spacing: var(--ls-body);
  color:          var(--purple-900);
  transition:     ease-in-out 0.4s, border-color 0.2s;
  cursor:         pointer;
}
.chip:hover {
  background:   rgba(143, 0, 216, 0.2);
  border-color: rgba(143, 0, 216, 0.4);
}

/* Loading dots animation */
.loading-dots span {
  display:   inline-block;
  animation: blink 1.4s infinite both;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
  0%, 80%, 100% { opacity: 0; }
  40%           { opacity: 1; }
}

/* ── Embedded AI widget (about page) ─────────────────────────
   Same functionality as the modal but rendered inline.
   ─────────────────────────────────────────────────────────── */
.ai-widget {
  width:          100%;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  position:       relative;
  z-index:        1;
}

.ai-widget__title {
  display:        flex;
  align-items:    center;
  gap:            8px;
  font-family:    var(--font-headings);
  font-size:      var(--fs-24);
  font-weight:    var(--fw-display);
  letter-spacing: var(--ls-caption);
  line-height:    32px;
  color:          var(--white);
}

.ai-widget__title-grad {
  background: linear-gradient(123.92deg, #7A78FF 0.39%, #FFFFFF 48.4%, #D49BF1 94.45%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ai-widget__bar {
  display:       flex;
  align-items:   flex-start;
  width:         100%;
  min-height:    52px;
  background:    #645AA9;
  border-radius: 8px;
  padding:       2px 2px 0 24px;
  overflow:      hidden;
  box-sizing:    border-box;
}

.ai-widget__input {
  flex:           1;
  min-height:     48px;
  background:     none;
  border:         none;
  outline:        none;
  padding:        12px 8px 12px 0;
  font-family:    var(--font-text);
  font-size:      var(--fs-16);
  font-weight:    var(--fw-body);
  letter-spacing: -1px;
  color:          #ffffff;
  resize:         none;
  line-height:    24px;
  overflow:       hidden;
}
.ai-widget__input::placeholder { color: #AAACF1; }

.ai-widget__send_main {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           48px;
  height:          48px;
  flex-shrink:     0;
  background:      #AAACF1; 
  border:          2px solid #645AA9;
  border-radius:   8px;
  cursor:          pointer;
  transition:      background 0.15s ease;
}
.ai-widget__send {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           48px;
  height:          48px;
  flex-shrink:     0;
  background:      #AAACF1; 
  border:          2px solid #645AA9;
  border-radius:   8px;
  cursor:          pointer;
  transition:      background 0.15s ease;
}

.ai-widget__send:hover { background: #ffffff; }

.ai-widget__response {
  background:    rgba(135, 141, 234, 0.1);
  border:        2px solid var(--purple-card-border);
  border-radius: 8px;
  padding:       16px 20px;
}

.ai-widget__response-text {
  font-family:    var(--font-text);
  font-size:      var(--fs-15);
  font-weight:    var(--fw-body);
  letter-spacing: var(--ls-body);
  line-height:    24px;
  color:          var(--text-body);
  white-space:    pre-wrap;
  word-break:     break-word;
}

.ai-widget__continue {
  display:         block;
  margin-top:      12px;
  font-family:     var(--font-text);
  font-size:       13px;
  font-weight:     500;
  color:           rgba(155, 135, 245, 0.8);
  text-decoration: none;
  transition:      color 0.2s;
}
.ai-widget__continue:hover { color: #9b87f5; }

.chips {
  display:     flex;
  flex-wrap:   wrap;
  gap:         12px;
  align-items: center;
  justify-content: center;
}

/* ── Responsive breakpoints ──────────────────────────────────
   Mobile-first adjustments for sidebar, hero, topbar.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .about__grid  { width: 90%; }
  .about__title { font-size: var(--fs-38); width: 100%; }
}

@media (max-width: 900px) {
  .sidebar { width: 52px; }
  .sidebar:hover { width: 210px; }
  .hero__body  { padding-left: 40px; padding-right: 40px; }
  .hero__left  { width: 100%; max-width: 400px; }
  .hero__photo-wrap { width: 500px; opacity: 0.4; }
  .hero__footer { padding-left: 40px; flex-wrap: wrap; font-size: var(--fs-16); }
  .topbar__right { gap: 8px; }
  .ai-topbar { width: 160px; }
  .logos { gap: 40px; padding: 9px 40px 60px; }
}

@media (max-width: 640px) {
  .topbar { padding: 0; }
  .ai-topbar { display: none; }
  .hero__body { padding: 0 20px; padding-top: 60px; }
  .hero__photo-wrap { display: none; }
  .hero__footer { padding: 20px; font-size: var(--fs-14); }
  .logos { padding: 20px; gap: 24px; flex-wrap: wrap; }
  .about__grid { width: 95%; gap: 60px; }
  .about__title { font-size: var(--fs-32); }
  .chips { justify-content: flex-start; }
}

/* ── Mobile Navigation ────────────────────────────────────────
   Collapsed: logo + hamburger bar fixed at top of screen.
   Expanded:  full panel slides down with nav links, AI, CTA.
   Visible only at ≤640px. Hidden on desktop.
   ─────────────────────────────────────────────────────────── */
.mobile-nav { display: none; }

/* Backdrop — always in DOM, animated via opacity */
.mobile-nav__backdrop {
  position:       fixed;
  inset:          0;
  z-index:        299;
  background:     rgba(14, 9, 17, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.3s ease;
}
.mobile-nav__backdrop.is-visible {
  opacity:        1;
  pointer-events: all;
}

@media (max-width: 640px) {



  /* ── Hide desktop-only elements ── */
  .sidebar, .scroll-bar { display: none !important; }
  .topbar               { display: none !important; }

  /* ── Layout: no top padding — hero fills to the very top.
        Non-home pages get their offset from .main padding-top. ── */
  .layout {
    padding-top: 0;
    min-height:  100vh;
  }
  /* Push non-hero page content below the fixed nav bar */
  .main {
    width:       100%;
    padding-top: 88px;
  }

  /* ── Show mobile nav ── */
  .mobile-nav {
    display:   block;
    position:  fixed;
    top:       16px;
    left:      16px;
    right:     16px;
    z-index:   300;
  }

  /* ── Bar (collapsed/default state) ── */
  .mobile-nav__bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 4px;
    height:          56px;
    background:      var(--bg-main);
    border:          1px solid var(--purple-border);
    border-radius:   16px;
    transition:      border-radius 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .mobile-nav.is-open .mobile-nav__bar {
    border-bottom-left-radius:  0;
    border-bottom-right-radius: 0;
  }

  .mobile-nav__logo {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:  48px;
    height: 48px;
    flex-shrink: 0;
  }
  a.mobile-nav__logo {
    cursor:          pointer;
    text-decoration: none;
    border-radius:   6px;
    transition:      opacity 0.18s ease;
  }
  a.mobile-nav__logo:hover { opacity: 0.7; }

  /* ── Hamburger button ── */
  .mobile-nav__toggle {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:  44px;
    height: 44px;
    flex-shrink: 0;
    background: none;
    border:     none;
    cursor:     pointer;
  }

  /* ── Animated hamburger → X icon ── */
  .ham-icon {
    display:  block;
    position: relative;
    width:    22px;
    height:   16px;
  }
  .ham-icon__line {
    display:       block;
    position:      absolute;
    left:          0;
    width:         22px;
    height:        2px;
    background:    #EAEAEA;
    border-radius: 2px;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.25s ease;
  }
  .ham-icon__line--1 { top: 0;    }
  .ham-icon__line--2 { top: 7px;  }
  .ham-icon__line--3 { top: 14px; }

  .mobile-nav.is-open .ham-icon__line--1 { transform: translateY(7px)  rotate(45deg);  }
  .mobile-nav.is-open .ham-icon__line--2 { opacity: 0; transform: scaleX(0);           }
  .mobile-nav.is-open .ham-icon__line--3 { transform: translateY(-7px) rotate(-45deg); }

  /* ── Sliding panel ── */
  .mobile-nav__panel {
    background:    var(--bg-main);
    border:        1px solid var(--purple-border);
    border-top:    none;
    border-radius: 0 0 16px 16px;
    overflow:      hidden;
    max-height:    0;
    opacity:       0;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity    0.3s ease;
  }
  .mobile-nav.is-open .mobile-nav__panel {
    max-height: 560px;
    opacity:    1;
  }
  .mobile-nav__panel-inner {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    padding:        8px 16px 16px;
  }

  /* ── Nav links ── */
  .mobile-nav__links {
    list-style: none;
    display:    flex;
    flex-direction: column;
    width: 100%;
    margin: 0; padding: 0;
  }
  .mobile-nav__link {
    display:     flex;
    align-items: center;
    gap:         18px;
    height:      48px;
    padding:     0 10px;
    border-radius: 8px;
    text-decoration: none;
    color:          var(--off-white);
    font-family:    var(--font-text);
    font-size:      var(--fs-16);
    font-weight:    500;
    line-height:    24px;
    transition:     ease-in-out 0.2s ease;
  }
  .mobile-nav__link img { width: 24px; height: 24px; flex-shrink: 0; }
  .mobile-nav__link:hover   { opacity: 0.7; }
  .mobile-nav__link--active { opacity: 1; }

  /* ── AI trigger ── */
  .mobile-nav__ai {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    text-decoration: none;
    width:           100%;
    height:          48px;
    padding-left:    24px;
    background:      rgba(25, 0, 33, 0.61);
    border:          1px solid var(--purple-border);
    border-radius:   8px;
    backdrop-filter: blur(10.7px);
    -webkit-backdrop-filter: blur(10.7px);
    overflow:        hidden;
    cursor:          pointer;
    font-family:     inherit;
  }
  .mobile-nav__ai-text {
    font-family: var(--font-text);
    font-size:   var(--fs-16);
    font-weight: 400;
    color:       #EDD0FF;
  }
  .mobile-nav__ai-send {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:  48px;
    height: 48px;
    background:    var(--bg-hero);
    border:        1px solid var(--purple-border);
    border-radius: 8px;
    flex-shrink:   0;
  }

  /* ── Contact CTA ── */
  .mobile-nav__cta {
    display:         flex;
    align-items:     center;
    justify-content: center;
    height:          48px;
    width:           100%;
    background:      #F5E8FC;
    border:          none;
    border-radius:   8px;
    font-family:     var(--font-text);
    font-size:       var(--fs-16);
    font-weight:     600;
    color:           var(--bg-main);
    cursor:          pointer;
    transition:      opacity 0.2s;
  }
  .mobile-nav__cta:hover { opacity: 0.85; }
}

/* ── Custom cursor ───────────────────────────────────────── */
/* Native cursor suppressed everywhere on pointer devices */
*:not(input):not(textarea):not(select) { cursor: none !important; }

#cursor-dot,
#cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 99999;
  will-change: transform;
}

/* Dot — snaps instantly to mouse */
#cursor-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  /* xPercent/yPercent -50 handled via GSAP set() */
}

/* Ring — glides behind the dot */
#cursor-ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(232, 197, 71, 0.55);
  background: rgba(40, 40, 40, 0.2);
}

/* Restore on touch */
@media (hover: none), (pointer: coarse) {
  #cursor-dot, #cursor-ring { display: none !important; }
  * { cursor: auto !important; }
}

/* ── Page transition veil ────────────────────────────────── */
#page-veil {
  position:       fixed;
  inset:          0;
  background:     #0a0a0a;
  z-index:        9990;
  pointer-events: none;
  transform:      translateY(0);
  transition:     transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
#page-veil.is-out { transform: translateY(-100%); }

/* ── Site Footer ─────────────────────────────────────────── */
.site-footer {
  padding-left:  64px; /* match sidebar collapsed width */
  border-top:    1px solid rgba(255, 255, 255, 0.07);
}

.site-footer__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             24px;
  max-width:       calc(971px + 99px * 2);
  margin:          0 auto;
  padding:         28px 40px;
}

.site-footer__brand {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-family: var(--font-text);
  font-size:   14px;
  color:       rgba(255, 255, 255, 0.45);
  white-space: nowrap;
}

.site-footer__nav {
  display:     flex;
  align-items: center;
  gap:         24px;
  flex-wrap:   wrap;
}

.site-footer__nav a {
  font-family:     var(--font-text);
  font-size:       14px;
  color:           rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition:      color 0.2s;
}
.site-footer__nav a:hover { color: rgba(255, 255, 255, 0.9); }

.site-footer__copy {
  font-family: var(--font-mono);
  font-size:   12px;
  color:       rgba(255, 255, 255, 0.25);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .site-footer { padding-left: 0; }
  .site-footer__inner { padding: 24px 40px; flex-wrap: wrap; gap: 16px; }
  .site-footer__nav   { gap: 16px; }
}

@media (max-width: 640px) {
  .site-footer__inner {
    flex-direction: column;
    align-items:    flex-start;
    padding:        20px 20px 32px;
    gap:            12px;
  }
}