/* ==========================================================================
   StillBuilding — STYLESHEET
   --------------------------------------------------------------------------
   Contents
     1.  Design tokens (dark + light themes)
     2.  Reset & base
     3.  Typography
     4.  Layout primitives
     5.  Buttons
     6.  Cards, tags & badges
     7.  Header & navigation
     8.  Hero + terminal
     9.  About
     10. Skills
     11. Projects
     12. Services
     13. Support
     14. Social & contact
     15. Footer
     16. Utilities (a11y helpers, back-to-top, progress bar)
     17. Motion & contrast preferences

   No frameworks, no build step, no external requests.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   --------------------------------------------------------------------------
   Dark is the default. Every colour pair below was checked for WCAG AA
   contrast (>= 4.5:1 for body text, >= 3:1 for large text and UI edges).
   ========================================================================== */

:root {
  /* Typography — system fonts only, so there is no render-blocking font
     download and no layout shift. */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "PingFang SC",
               "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Deep navy palette */
  --bg:            #070d1b;
  --bg-2:          #0a1225;
  --surface:       rgba(255, 255, 255, 0.035);
  --surface-solid: #0e1830;
  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);

  --text:          #eaf0fb;
  --text-muted:    #a3b3d1;
  --text-dim:      #8494b5;

  /* Accents */
  --accent:        #5b9dff;
  --accent-strong: #8bbcff;
  --accent-2:      #22d3ee;
  --accent-soft:   rgba(91, 157, 255, 0.13);
  --on-accent:     #04102a;

  --success:       #4ade80;
  --warning:       #fbbf24;
  --string:        #7dd3a0;

  /* Translucent header backdrop (kept as a token rather than color-mix()
     so older browsers fall back to a sensible colour instead of nothing). */
  --header-bg:     rgba(7, 13, 27, 0.82);
  --dev-note-bg:   rgba(251, 191, 36, 0.10);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 18px 40px -22px rgba(0, 0, 0, 0.85);
  --shadow-lg: 0 32px 80px -32px rgba(0, 0, 0, 0.9);

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;

  --maxw: 1180px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 7.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 68px;
}

/* Light theme — soft greys and white with navy text, switched by the button
   in the header. Also applied automatically when the visitor's OS prefers
   light AND they have never toggled the switch (see the inline script). */
[data-theme="light"] {
  --bg:            #f7f9fe;
  --bg-2:          #eef3fc;
  --surface:       #ffffff;
  --surface-solid: #ffffff;
  --border:        #dde5f4;
  --border-strong: #c3d1ea;

  --text:          #0b1730;
  --text-muted:    #46557a;
  --text-dim:      #61708f;

  --accent:        #1d5fd8;
  --accent-strong: #1746a8;
  --accent-2:      #0e7490;
  --accent-soft:   rgba(29, 95, 216, 0.09);
  --on-accent:     #ffffff;

  --success:       #15803d;
  --warning:       #b45309;
  --string:        #15803d;

  --header-bg:     rgba(247, 249, 254, 0.85);
  --dev-note-bg:   rgba(180, 83, 9, 0.08);

  --shadow-sm: 0 1px 3px rgba(15, 33, 74, 0.08);
  --shadow-md: 0 16px 36px -24px rgba(15, 33, 74, 0.4);
  --shadow-lg: 0 30px 70px -34px rgba(15, 33, 74, 0.45);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

[hidden] { display: none !important; }

/* Visible focus ring for every keyboard user. Never remove this. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent); color: var(--on-accent); }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

p { margin: 0; }

a {
  color: var(--accent-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--accent-2); }

/* Highlighted words inside headings ("I'm still building.") */
.grad {
  background: linear-gradient(100deg, var(--accent-strong) 10%, var(--accent-2) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.eyebrow__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.prose p + p { margin-top: 1.05rem; }
.prose { color: var(--text-muted); font-size: 1.05rem; }
.prose p:first-child { color: var(--text); font-size: 1.12rem; }

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

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

.section { padding-block: var(--section-y); position: relative; }

/* Alternating band so long scrolls stay readable */
.section--alt {
  background: var(--bg-2);
  border-block: 1px solid var(--border);
}

.section__head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }

.section__title { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }

.section__lead {
  margin-top: 0.9rem;
  color: var(--text-muted);
  font-size: 1.05rem;
}

.section__lead--strong {
  color: var(--accent-strong);
  font-weight: 600;
  font-size: 1.15rem;
}

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.15rem;
}

/* Auto-fit grids: no media queries needed, they reflow on their own. */
.grid--skills   { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.grid--services { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }

/* auto-fill (not auto-fit) keeps project cards a consistent size: with only
   one or two projects the empty tracks stay open instead of stretching the
   cards across the whole row. */
.grid--projects { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

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

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.78rem 1.45rem;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
              background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: linear-gradient(100deg, var(--accent-strong), var(--accent-2));
  --btn-fg: var(--on-accent);
  --btn-bd: transparent;
  box-shadow: 0 12px 30px -14px var(--accent);
}
.btn--primary:hover { box-shadow: 0 18px 38px -14px var(--accent); }

.btn--secondary {
  --btn-bg: var(--accent-soft);
  --btn-fg: var(--accent-strong);
  --btn-bd: var(--border-strong);
}
.btn--secondary:hover { --btn-bd: var(--accent); }

.btn--ghost { --btn-fg: var(--text-muted); }
.btn--ghost:hover { --btn-fg: var(--text); --btn-bd: var(--accent); }

/* PayPal button: plain, honest wording. Deliberately does NOT imitate the
   PayPal logo — see README for why, and how to add official assets. */
.btn--paypal {
  --btn-bg: #ffc439;
  --btn-fg: #10233f;
  --btn-bd: transparent;
  box-shadow: 0 12px 30px -16px rgba(255, 196, 57, 0.7);
}
.btn--paypal:hover { box-shadow: 0 18px 38px -14px rgba(255, 196, 57, 0.85); }

.btn--lg { padding: 0.95rem 1.8rem; font-size: 1.02rem; }

/* ==========================================================================
   6. CARDS, TAGS & BADGES
   ========================================================================== */

.card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(6px);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
}

.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  color: var(--accent-strong);
}

.card__title { font-size: 1.12rem; margin-bottom: 0.5rem; }
.card__text  { color: var(--text-muted); font-size: 0.95rem; }

/* Technology / skill chips */
.taglist {
  list-style: none;
  margin: 1.05rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.taglist li {
  padding: 0.28rem 0.66rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--accent-soft);
  color: var(--text-muted);
  font-size: 0.79rem;
  font-weight: 500;
  line-height: 1.5;
}

.taglist--inline { margin-top: 1rem; }

.badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge--warn {
  background: var(--warning);
  border-color: transparent;
  color: #3b2606;
}

/* Empty states (no projects / no links configured) */
.empty {
  max-width: 60ch;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.25rem) 1.5rem;
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px; height: 58px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.empty__title { font-size: 1.25rem; margin-bottom: 0.6rem; }
.empty__text  { color: var(--text-muted); font-size: 0.96rem; }
.empty__actions { margin-top: 1.5rem; }

.note {
  color: var(--text-muted);
  font-size: 0.95rem;
  max-width: 58ch;
}

/* Developer-only hints. Only ever rendered on localhost / file:// */
.note--dev {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--warning);
  background: var(--dev-note-bg);
  color: var(--text-muted);
  font-size: 0.88rem;
}
.note--dev code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--accent-strong);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.4em;
  border-radius: 5px;
  background: var(--accent-soft);
}

/* ==========================================================================
   7. HEADER & NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

/* Solid border only once the page has scrolled (see .is-scrolled below). */
.site-header.is-scrolled { border-bottom-color: var(--border); }

.header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand:hover { color: var(--text); }

.brand__mark { display: inline-flex; }
.brand__mark svg { border-radius: 9px; }
.brand__accent { color: var(--accent-strong); }

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav__link {
  display: block;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 500;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}

.nav__link:hover { color: var(--text); background: var(--accent-soft); }

/* Current section, set by the scroll-spy */
.nav__link[aria-current="true"] {
  color: var(--accent-strong);
  background: var(--accent-soft);
}

.header__actions { display: flex; align-items: center; gap: 0.5rem; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease),
              background-color 0.15s var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); }

.nav-toggle { display: none; }

/* --- Mobile navigation --------------------------------------------------- */

@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0 var(--gutter) 1rem;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    /* Hidden by default; revealed by the .is-open class on the header. */
    display: none;
  }

  .site-header.is-open .nav { display: block; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding-top: 0.6rem;
  }

  .nav__link {
    padding: 0.9rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 1.02rem;
  }
}

/* ==========================================================================
   8. HERO
   ========================================================================== */

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(4rem, 9vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}

/* Soft blue glows behind the content */
.hero__glow {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  z-index: -2;
  background:
    radial-gradient(46% 42% at 18% 8%,  rgba(91, 157, 255, 0.20), transparent 70%),
    radial-gradient(40% 40% at 82% 22%, rgba(34, 211, 238, 0.14), transparent 72%),
    radial-gradient(60% 40% at 50% 100%, rgba(91, 157, 255, 0.10), transparent 75%);
  pointer-events: none;
}

/* Faint technical grid */
.hero__grid-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right,  var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(70% 60% at 50% 30%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 10%, transparent 78%);
  opacity: 0.55;
  pointer-events: none;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero__copy { min-width: 0; }

.hero__title {
  font-size: clamp(2.05rem, 5.6vw, 3.6rem);
  letter-spacing: -0.032em;
  margin-bottom: 1.15rem;
}

.hero__sub {
  max-width: 54ch;
  color: var(--text-muted);
  font-size: clamp(1.02rem, 1.7vw, 1.15rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 2rem 0 0;
  padding: 0;
  color: var(--text-dim);
  font-size: 0.88rem;
}

.hero__chips li { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero__chips .icon { color: var(--success); flex: none; }

/* --- Terminal illustration ---------------------------------------------- */

.terminal {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-solid);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  font-family: var(--font-mono);
}

.terminal__bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--border);
  background: var(--accent-soft);
}

.terminal__dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex: none;
}
.terminal__dot--red   { background: #ff5f57; }
.terminal__dot--amber { background: #febc2e; }
.terminal__dot--green { background: #28c840; }

.terminal__title {
  margin-left: 0.5rem;
  color: var(--text-dim);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.terminal__body { padding: 1.15rem 1.2rem 1.35rem; }

.term__code {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.85;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-muted);
}

.term__line { display: block; }

.term__line--cmd  { color: var(--text); }
.term__line--out  { color: var(--text-dim); }
.term__line--str  { color: var(--string); }
.term__line--ok   { color: var(--success); }
.term__line--warn { color: var(--warning); }

.term__prompt { color: var(--accent-2); margin-right: 0.55rem; }

.term__cursor {
  display: inline-block;
  width: 8px; height: 1.05em;
  vertical-align: text-bottom;
  background: var(--accent-2);
  animation: blink 1.15s steps(2, start) infinite;
}

@keyframes blink { to { visibility: hidden; } }

/* Lines fade in one after another once the page is ready */
.term__line {
  opacity: 0;
  animation: line-in 0.4s var(--ease) forwards;
  animation-delay: var(--line-delay, 0ms);
}
.is-ready .term__line { animation-play-state: running; }

@keyframes line-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   9. ABOUT
   ========================================================================== */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.avatar-card {
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--accent-soft), transparent 70%);
  text-align: center;
  box-shadow: var(--shadow-md);
}

.avatar-card__monogram {
  width: 92px; height: 92px;
  margin: 0 auto 1.1rem;
  display: grid;
  place-items: center;
  border-radius: 26px;
  background: linear-gradient(140deg, var(--accent-strong), var(--accent-2));
  color: var(--on-accent);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  box-shadow: 0 18px 40px -18px var(--accent);
}

.avatar-card__name {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
}

.avatar-card__tagline {
  margin-top: 0.35rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.values {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.values li { display: flex; gap: 0.75rem; align-items: flex-start; }

.values__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  margin-top: 2px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.values__title { font-weight: 650; font-size: 0.95rem; color: var(--text); }
.values__text  { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; }

/* ==========================================================================
   10. SKILLS — grid comes from .grid--skills
   ========================================================================== */

.card--skill .taglist { margin-top: auto; padding-top: 1.05rem; }

/* ==========================================================================
   11. PROJECTS
   ========================================================================== */

.card--project { padding: 0; overflow: hidden; }

/* Placeholder cards get a dashed outline so they can never be mistaken
   for real, shipped work. */
.card--placeholder { border-style: dashed; border-color: var(--warning); }

.project__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(150deg, var(--accent-soft), transparent 75%);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.project__img { width: 100%; height: 100%; object-fit: cover; }

.project__placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  background-image:
    linear-gradient(to right,  var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 34px 34px;
}

.project__placeholder-mark {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 18px;
  background: linear-gradient(140deg, var(--accent-strong), var(--accent-2));
  color: var(--on-accent);
  font-size: 1.7rem;
  font-weight: 800;
}

.project__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.35rem 1.5rem 1.5rem;
}

.project__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: auto;
  padding-top: 1.35rem;
}

.project__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent-strong);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}
.project__link:hover { text-decoration: underline; }

/* ==========================================================================
   12. SERVICES
   ========================================================================== */

.checklist {
  list-style: none;
  margin: 1.05rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: var(--text-muted);
  font-size: 0.91rem;
  line-height: 1.5;
}

.checklist .icon { color: var(--accent-strong); flex: none; margin-top: 3px; }

.services__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   13. SUPPORT
   ========================================================================== */

.support-card {
  position: relative;
  max-width: 780px;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.25rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(90% 120% at 50% 0%, var(--accent-soft), transparent 65%),
    var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
  overflow: hidden;
}

/* Gradient hairline along the top edge */
.support-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-strong), var(--accent-2), transparent);
}

.support__inner { display: grid; justify-items: center; gap: 1.25rem; }

.support__icon {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  color: var(--accent-strong);
}

.support__text {
  max-width: 60ch;
  color: var(--text-muted);
  font-size: 1.02rem;
}
.support__text p + p { margin-top: 1rem; }

.support__thanks {
  color: var(--text) !important;
  font-weight: 600;
}

.support__actions {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  margin-top: 1.75rem;
}

.support__link {
  color: var(--accent-strong);
  font-size: 0.92rem;
  font-weight: 600;
}

.support__disclaimer {
  margin-top: 1.5rem;
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* ==========================================================================
   14. SOCIAL & CONTACT
   ========================================================================== */

/* Explicit columns rather than auto-fit: the featured rows below span the
   full width (grid-column: 1 / -1), which stops auto-fit from collapsing
   empty tracks and would leave a ragged gap at the end of the last row. */
.social__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 820px) {
  .social__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .social__grid { grid-template-columns: minmax(0, 1fr); }
}

/* GitHub and Email span the full row — they are the two that matter most. */
.social__wide { grid-column: 1 / -1; }

.social-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease),
              background-color 0.2s var(--ease);
}

.social-card:hover {
  color: var(--text);
  border-color: var(--accent);
  transform: translateY(-3px);
  background: var(--accent-soft);
}

.social-card__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  color: var(--accent-strong);
}

.social-card--featured .social-card__icon { width: 54px; height: 54px; }

.social-card__body { display: grid; gap: 0.15rem; min-width: 0; }

.social-card__label { font-weight: 650; font-size: 1rem; }

.social-card__handle {
  color: var(--text-muted);
  font-size: 0.89rem;
  line-height: 1.5;
}

.social-card__arrow {
  margin-left: auto;
  color: var(--text-dim);
  transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}
.social-card:hover .social-card__arrow { transform: translateX(4px); color: var(--accent-strong); }

/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-2);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
}

.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  padding-bottom: 2.5rem;
}

.footer__name { font-weight: 700; font-size: 1.15rem; color: var(--text); }

.footer__tagline {
  margin-top: 0.5rem;
  max-width: 40ch;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.footer__nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.93rem;
}
.footer__nav a:hover { color: var(--accent-strong); text-decoration: underline; }

.footer__social { display: grid; gap: 0.5rem; align-content: start; }

.footer__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.93rem;
}
.footer__social a:hover { color: var(--accent-strong); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.35rem;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.86rem;
}

.footer__note { color: var(--text-dim); }

/* ==========================================================================
   16. UTILITIES
   ========================================================================== */

/* Visible to screen readers only */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--accent-strong);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: 0; color: var(--on-accent); }

/* Reading progress bar*/
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 200;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent-2));
}

.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-solid);
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease),
              visibility 0.22s, color 0.15s var(--ease);
}
.to-top:hover { color: var(--accent-strong); border-color: var(--accent); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* --------------------------------------------------------------------------
   No-JavaScript summary (the contents of the <noscript> block in index.html).
   Only ever visible when scripting is switched off.
   -------------------------------------------------------------------------- */
/* Uses its own class (not .section) because the no-JS stylesheet hides
   .section to suppress the empty data-driven shells. */
.nojs-section { padding-block: var(--section-y); }

.noscript {
  max-width: 62ch;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text-muted);
}

.noscript h1 {
  margin-bottom: 1rem;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  color: var(--text);
}

.noscript p + p { margin-top: 1rem; }

.noscript__note {
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.88rem;
}

/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */

@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 620px; }
  .about__grid { grid-template-columns: 1fr; }
  .about__aside { max-width: 460px; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .hero { padding-block: 2.5rem 3.5rem; }
  .hero__actions { gap: 0.6rem; }
  .hero__actions .btn { width: 100%; }
  .term__code { font-size: 0.79rem; }
  .footer__inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .card { padding: 1.25rem; }
  .project__body { padding: 1.15rem 1.25rem 1.3rem; }
}

/* ==========================================================================
   18. MOTION & CONTRAST PREFERENCES
   --------------------------------------------------------------------------
   Visitors who ask their OS for less motion get a completely still page.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep the decorative lines visible even with animations disabled. */
  .term__line { opacity: 1; transform: none; }
  .term__cursor { animation: none; }
  .btn:hover,
  .card:hover,
  .social-card:hover { transform: none; }
}

/* Windows High Contrast / forced-colors mode */
@media (forced-colors: active) {
  .card, .btn, .social-card, .icon-btn { border: 1px solid CanvasText; }
  .btn--primary { background: Highlight; color: HighlightText; }
  .grad { color: CanvasText; -webkit-text-fill-color: CanvasText; }
}

/* Respect the visitor's OS-level light/dark preference on first visit.
   Once they use the toggle, the inline script's saved value wins. */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) { color-scheme: light; }
}