:root {
  --bg: #020306;
  --bg-alt: #060811;
  --card: #0b0e1c;
  --text: #e6e9f0;
  --muted: #9aa4b8;
  --accent: #6ee7ff;
  --accent2: #a78bfa;
  --border: rgba(255,255,255,0.08);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Cross-browser reset: Safari/Firefox don't inherit font onto form controls
   by default, and Safari draws its own bezel on <button> unless told not to. */
button, input, select, textarea {
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
/* Default mobile tap flash reads as a glitch on a dark theme; every
   interactive element supplies its own hover/active feedback instead. */
a, button {
  -webkit-tap-highlight-color: transparent;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }

/* ---------- Cybersecurity-themed background ----------
   Layered, back to front: (1) a faint circuit-board grid, fading out
   toward the edges, (2) a canvas-driven "digital rain" of binary/hex
   characters (see script.js), (3) a slow scanning beam sweeping down
   the page. All three sit at z-index:0, fixed, and pointer-events:none,
   so they never interfere with real content (which sits at z-index:1). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(110,231,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,231,255,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 50% 25%, black, transparent 78%);
  mask-image: radial-gradient(circle at 50% 25%, black, transparent 78%);
}

#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}

/* Slow scanning beam — drawn as ::after so it paints above the canvas */
body::after {
  content: "";
  position: fixed;
  left: 0; right: 0;
  top: -160px;
  height: 160px;
  background: linear-gradient(to bottom, transparent, rgba(110,231,255,0.07), transparent);
  z-index: 0;
  pointer-events: none;
  animation: scanline 10s linear infinite;
}
@keyframes scanline {
  0%   { top: -160px; }
  100% { top: 100vh; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; display: none; }
}

nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 6%;
  background: rgba(2,3,6,0.4); /* light touch at the very top, over the hero */
  -webkit-backdrop-filter: blur(10px); /* Safari requires the prefix, or the blur silently does nothing */
  backdrop-filter: blur(10px);
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: transform 0.35s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Once you've scrolled off the hero, a bit more opacity + a shadow gives the
   nav enough contrast to stay readable over busy section content. */
nav.scrolled {
  background: rgba(2,3,6,0.85);
  border-bottom-color: var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
/* Slides fully out of view while scrolling down (so it's not "in the way"
   while reading) and slides back the moment you scroll up even slightly —
   see the scroll listener in script.js. */
nav.nav-hidden { transform: translateY(-100%); }

nav .logo { font-weight: 700; font-size: 1.2rem; letter-spacing: 1px; }
nav ul { list-style: none; display: flex; gap: 28px; }
nav ul li a { color: var(--muted); font-size: 0.95rem; transition: color 0.2s; }
nav ul li a:hover { color: var(--accent); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px; height: 34px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile: a real hamburger menu instead of the nav links wrapping onto a
   second row — a wrapped two-row nav was tall enough to overlap the hero's
   first line ("Portfolio & CV") on shorter phone screens. Collapsed, the
   nav is a single compact row; tapping the toggle drops the links down as
   an overlay rather than pushing page content around. */
@media (max-width: 640px) {
  nav { padding: 14px 6%; }
  nav .logo { font-size: 1.05rem; white-space: nowrap; }
  .nav-toggle { display: flex; }
  nav ul {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    background: rgba(2,3,6,0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    transition: max-height 0.3s ease, opacity 0.25s ease;
  }
  nav ul.open { max-height: 320px; opacity: 1; }
  nav ul li { width: 100%; text-align: center; }
  nav ul li a { display: block; padding: 14px 0; font-size: 0.95rem; }
}

/* Top padding only needs to clear the ~64px fixed nav (for when a section
   is jumped to directly via a nav link) — 120px was adding a lot of extra
   blank space on top of that when just scrolling normally from one section
   into the next. */
section { position: relative; z-index: 1; padding: 90px 6% 80px; max-width: 1100px; margin: 0 auto; }

/* About sits right under the full-height hero, so its own gap compounds
   with the hero's bottom whitespace — trimmed further than the other
   sections' 90px so the transition feels tighter. Still clears the ~64px
   fixed nav for a direct #about jump. */
#about { padding-top: 20px; }

.hero {
  /* Trimmed down from a full 100vh/100dvh — at full height, the centered
     content left a lot of dead space below the buttons before About even
     started, which was the real source of the "big gap" (About's own
     padding above was only a small part of it). */
  min-height: 78vh;
  min-height: 78dvh; /* accounts for Safari's collapsing address bar on iOS so content isn't cut off */
  display: flex; flex-direction: column; justify-content: center;
  /* Content is vertically centered, which on most screens clears the nav
     on its own — but on short/narrow phones the centered content can still
     land close enough to the top to sit under it. This floor guarantees
     clearance either way without needing JS to measure nav height. */
  padding-top: 90px;
}
@media (max-width: 640px) {
  .hero { padding-top: 110px; }
}
.hero .eyebrow { color: var(--accent); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 16px; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.2rem); font-weight: 800; line-height: 1.1; margin-bottom: 20px; }
.hero h1 span {
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; /* belt-and-suspenders for Safari */
  animation: shimmer 7s linear infinite;
}
@keyframes shimmer {
  to { background-position: -200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 span { animation: none; }
}
.hero p.sub { color: var(--muted); font-size: 1.15rem; max-width: 560px; margin-bottom: 36px; }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: 0.95rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary { background: linear-gradient(90deg, var(--accent), var(--accent2)); color: #0b0f19; }
.btn-outline { border: 1px solid var(--border); color: var(--text); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(110,231,255,0.15); }

h2.section-title { font-size: 2rem; font-weight: 800; margin-bottom: 8px; }
p.section-sub { color: var(--muted); margin-bottom: 48px; max-width: 600px; }

.about-grid { display: grid; grid-template-columns: 1.3fr 0.85fr; gap: 48px; align-items: start; }
/* Lowered from 800px — that breakpoint was stacking the photo onto its
   own row on plenty of normal desktop/laptop window widths, not just
   phones/tablets, which read as "a whole different row" rather than
   sitting beside the text. */
@media (max-width: 640px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-grid > div:nth-child(2) { order: -1; }
  .about-visual { margin-left: auto; margin-right: auto; } /* centered once stacked, instead of hugging the right edge */
}
.avatar-box {
  position: relative;
  overflow: hidden;
  width: 100%; aspect-ratio: 1; border-radius: 24px;
  background: linear-gradient(135deg, var(--card), var(--bg-alt));
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem; font-weight: 800; color: var(--accent);
}
/* Shown until (or unless) profile.png/.jpeg/.jpg loads successfully — see script.js */
.avatar-box .avatar-fallback { position: relative; z-index: 1; }
.avatar-box img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: none; /* only revealed on a successful load, see script.js */
}
/* Location badge overlapping the photo's corner — reuses the same
   glass-pill treatment as the project preview badges elsewhere on the
   site, so the "where" detail lives with the photo instead of floating
   in either the About or Contact copy.
   No backdrop-filter here: Safari can fail to paint a backdrop-filter
   element at all when it sits inside a parent that has both
   overflow:hidden and border-radius (exactly .avatar-box's setup), so a
   solid, more opaque background is used instead for reliable rendering
   in every browser. translateZ/will-change force Safari to give the
   badge its own compositing layer, which also avoids it being dropped
   during the avatar-box's rounded-corner clip. */
.avatar-location {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  background: rgba(4,6,14,0.92);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}
.avatar-location svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
.about-text p { color: var(--muted); margin-bottom: 16px; }
/* The section-sub line now lives inside .about-text (rather than above
   the grid) specifically so its top edge lines up with the photo's top
   edge — both are then the first thing in their column, at the same
   grid row start. Slightly more space below it than the plain paragraph
   gap, so it still reads as a subtitle rather than just another line. */
.about-text p.section-sub { margin-bottom: 20px; }

.skill-group-label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--accent); font-weight: 700; margin-bottom: 10px;
}
.skill-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.skill-tags span {
  padding: 8px 16px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--border); font-size: 0.85rem; color: var(--text);
}

/* ---------- Skills carousel ----------
   One category shown at a time; script.js auto-advances it every few
   seconds — with a progress bar counting down to the next slide — until
   the user takes over via the arrows, the dots, or a swipe/drag on the
   track, at which point autoplay stops for good and it becomes fully
   user-driven.
   No card/panel around it — the slide content sits directly on the page
   background. The viewport still needs overflow:hidden to clip the
   off-screen slides (that's what makes the carousel work at all), but it
   carries no visible styling of its own. Padding lives on each
   .skill-slide rather than on the overflow:hidden viewport itself:
   padding on the clipping element throws off the percentage math
   translateX() and the slides' flex-basis use (they'd be measured
   against two subtly different boxes), which is what let a sliver of the
   next slide peek out at the edge. Padding per-slide keeps the clip
   boundary and the slide width perfectly in sync. */
/* Sits as its own full-width row below the photo/text grid (not inside
   .about-text) — sharing that column made it read as part of the same
   row as the photo instead of a distinct block. */
.skills-carousel { margin-top: 36px; }
.skills-carousel-viewport {
  overflow: hidden;
  cursor: grab;
}
.skills-carousel-viewport:active { cursor: grabbing; }
.skills-carousel-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), height 0.35s ease;
  touch-action: pan-y;
}
.skill-slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding: 4px 2px 8px; /* just enough to keep tag hover/shadow from clipping — no card inset */
}

/* Autoplay countdown — fills over the interval, then instantly resets for
   the next slide. Fades out once the user takes manual control, since
   autoplay never resumes after that. */
.skills-carousel-progress {
  height: 3px;
  margin-top: 14px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  transition: opacity 0.3s ease;
}
.skills-carousel-progress.is-idle { opacity: 0; }
.skills-carousel-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.skills-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}
.carousel-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.carousel-arrow:hover { color: var(--accent); border-color: rgba(110,231,255,0.4); transform: translateY(-1px); }

.skills-carousel-dots { display: flex; align-items: center; gap: 8px; }
.carousel-dot {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  background: var(--border); border: none; cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease;
}
.carousel-dot:hover { background: var(--muted); }
.carousel-dot.active {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  width: 22px; border-radius: 999px;
}

/* Right-hand column of the About grid: photo on top, certification badge
   stacked right beneath it so the cert is prominent rather than buried in
   a sentence of prose. Capped and right-aligned so it stays a reasonably
   sized photo sitting on the right of the text, rather than growing to
   fill however wide its grid column happens to be. */
.about-visual { display: flex; flex-direction: column; gap: 16px; max-width: 300px; margin-left: auto; width: 100%; }

.cert-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.cert-badge:hover { transform: translateY(-4px); border-color: rgba(110,231,255,0.4); }
.cert-icon {
  width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #0b0f19;
}
.cert-name { font-weight: 700; font-size: 1rem; }
.cert-status {
  color: var(--accent); font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px;
}

.timeline { border-left: 2px solid var(--border); margin-left: 10px; }
.timeline-item { position: relative; padding: 0 0 40px 32px; }
.timeline-item::before {
  content: ""; position: absolute; left: -7px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px rgba(110,231,255,0.15);
}
.timeline-item .role { font-weight: 700; font-size: 1.1rem; }
.timeline-item .meta { color: var(--accent2); font-size: 0.85rem; margin-bottom: 8px; }
.timeline-item p { color: var(--muted); }

.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.project-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 28px; transition: transform 0.25s, border-color 0.25s;
}
.project-card:hover { transform: translateY(-6px); border-color: rgba(110,231,255,0.4); }
.project-card .tag { color: var(--accent); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.project-card h3 { margin: 10px 0 10px; font-size: 1.2rem; }
.project-card p { color: var(--muted); font-size: 0.95rem; margin-bottom: 16px; }
.project-card a { font-size: 0.9rem; font-weight: 600; }

/* ---------- Project live preview (thumbnail) ---------- */
.project-preview {
  position: relative;
  display: block;
  margin: 4px 0 18px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16 / 10;
  background: var(--bg-alt);
  cursor: pointer;
}
.project-preview:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.project-preview img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  display: block;
  transition: transform 0.4s ease;
}
.project-card:hover .project-preview img,
.project-preview:focus-visible img { transform: scale(1.05); }

.project-preview-badge {
  position: absolute; top: 10px; right: 10px;
  background: rgba(2,3,6,0.75);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text);
}

/* Clickable affordance for the thumbnail. Always visible (not hover-gated) —
   touch devices have no hover, so a hover-only hint would be invisible on
   every phone/tablet. It just brightens a bit on hover/focus for desktop. */
.project-preview-hover {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px 8px;
  background: linear-gradient(to top, rgba(2,3,7,0.92), rgba(2,3,7,0));
  color: #fff; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.01em;
  opacity: 0.88;
  transition: opacity 0.2s ease;
}
.project-preview:hover .project-preview-hover,
.project-preview:focus-visible .project-preview-hover {
  opacity: 1;
}

.project-tech { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.project-tech span {
  padding: 4px 11px; border-radius: 999px;
  background: var(--bg-alt); border: 1px solid var(--border);
  font-size: 0.72rem; color: var(--muted);
}

.project-link {
  background: none; border: none; font: inherit; cursor: pointer;
  color: var(--accent); font-size: 0.9rem; font-weight: 600; padding: 0;
}
.project-link:hover { color: var(--accent2); }

/* ---------- Project preview modal ---------- */
#project-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 1001;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
#project-modal-overlay.hidden { display: none; }
#project-modal {
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  max-width: 920px; width: 100%;
  max-height: 88vh; max-height: 88dvh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative; padding: 36px;
}
.project-modal-close {
  position: absolute; top: 20px; right: 20px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-alt); border: 1px solid var(--border); color: var(--text);
  cursor: pointer; font-size: 1rem; line-height: 1;
}
.project-modal-close:hover { color: var(--accent); border-color: rgba(110,231,255,0.4); }
#project-modal .tag { color: var(--accent); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
#project-modal h3 { font-size: 1.5rem; margin: 10px 0 12px; padding-right: 40px; }
#project-modal > p#pm-desc { color: var(--muted); margin-bottom: 18px; max-width: 640px; }
#project-modal .btn-row { margin-top: 22px; margin-bottom: 4px; }

.project-modal-frame {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
  margin: 24px 0; background: #020306; aspect-ratio: 16 / 10;
}
.project-modal-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.project-modal-frame-note {
  font-size: 0.78rem; color: var(--muted); text-align: center;
  margin: -12px 0 24px; line-height: 1.5;
}
.project-modal-frame-note a { font-weight: 600; }

.project-modal-how h4 { font-size: 1rem; margin-bottom: 12px; color: var(--text); }
.project-modal-how ol {
  color: var(--muted); font-size: 0.92rem; line-height: 1.6;
  padding-left: 20px; display: flex; flex-direction: column; gap: 10px;
}
.project-modal-how strong { color: var(--text); }

@media (max-width: 640px) {
  #project-modal { padding: 24px; }
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 36px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Soft gradient wash that fades in on hover, same accent pair used
   everywhere else on the site (buttons, glow blobs, hero text). */
.contact-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(110,231,255,0.10), rgba(167,139,250,0.10));
  opacity: 0;
  transition: opacity 0.25s ease;
}
.contact-card:hover,
.contact-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(110,231,255,0.4);
  box-shadow: 0 16px 40px rgba(110,231,255,0.14);
}
.contact-card:hover::before,
.contact-card:focus-visible::before { opacity: 1; }

.contact-icon {
  position: relative;
  z-index: 1;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #0b0f19;
  flex-shrink: 0;
}
.contact-icon svg { width: 24px; height: 24px; }

.contact-label {
  position: relative; z-index: 1;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); font-weight: 700;
}
.contact-value {
  position: relative; z-index: 1;
  font-size: 0.95rem; font-weight: 600; color: var(--text);
  word-break: break-word;
}


footer { text-align: center; padding: 40px 6%; color: var(--muted); font-size: 0.85rem; position: relative; z-index: 1; }

::selection { background: var(--accent); color: #0b0f19; }

/* Scroll reveal is now handled by GSAP ScrollTrigger in script.js, which
   animates opacity/transform directly rather than toggling a CSS class —
   see the "Scroll reveal" block there. */

/* Cookie consent */
#cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: var(--bg-alt); border-top: 1px solid var(--border);
  padding: 20px 6%; display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.35);
}
#cookie-banner.hidden { display: none; }
#cookie-banner p { color: var(--muted); font-size: 0.9rem; max-width: 640px; margin: 0; }
#cookie-banner p a { color: var(--accent); }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-btn {
  padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: 0.85rem;
  border: 1px solid var(--border); cursor: pointer; transition: transform 0.2s;
}
.cookie-btn:hover { transform: translateY(-1px); }
.cookie-btn.accept { background: linear-gradient(90deg, var(--accent), var(--accent2)); color: #0b0f19; border: none; }
.cookie-btn.reject { background: transparent; color: var(--text); }
.cookie-btn.settings { background: transparent; color: var(--muted); }

#cookie-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1001;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
#cookie-modal-overlay.hidden { display: none; }
#cookie-modal {
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  max-width: 480px; width: 100%; padding: 32px;
}
#cookie-modal h3 { font-size: 1.3rem; margin-bottom: 8px; }
#cookie-modal p.desc { color: var(--muted); font-size: 0.9rem; margin-bottom: 24px; }
.cookie-option {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--border);
}
.cookie-option:first-of-type { border-top: none; }
.cookie-option .label { font-weight: 600; font-size: 0.95rem; }
.cookie-option .note { color: var(--muted); font-size: 0.8rem; margin-top: 4px; max-width: 320px; }
.switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; background: var(--border); border-radius: 999px; cursor: pointer; transition: 0.2s;
}
.switch .slider::before {
  content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  background: var(--text); border-radius: 50%; transition: 0.2s;
}
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(20px); background: #0b0f19; }
.switch input:disabled + .slider { opacity: 0.5; cursor: not-allowed; }
#cookie-modal .modal-actions { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }

.footer-link { color: var(--muted); text-decoration: underline; cursor: pointer; background: none; border: none; font-size: 0.85rem; font-family: inherit; }
.footer-link:hover { color: var(--accent); }