/* ================================================================
   ALEX VOSS — YouTube Video Editor Portfolio
   style.css

   Structure:
   01  Root Variables & Reset
   02  Typography Globals
   03  Layout Helpers
   04  Buttons
   05  Navigation
   06  Mobile Menu
   07  Hero Section
   08  Work Section
   09  Creators Section
   10  Testimonials Section
   11  About Section
   12  Contact Section
   13  Footer
   14  AOS Adjustments
   15  Responsive — Tablet (max 1024px)
   16  Responsive — Mobile (max 768px)
   17  Responsive — Small (max 480px)
================================================================ */


/* ================================================================
   01  ROOT VARIABLES & RESET
================================================================ */

:root {
  /* ── Color Palette — Dark Theme ─────────────────── */
  --white:        #E8E6E1;       /* warm off-white for text on dark */
  --off-white:    #1C1C1E;       /* dark surface (replaces old cream) */
  --red:          #C1121F;
  --red-dark:     #9a0d17;
  --gold:         #D4AF37;
  --gold-dim:     rgba(212, 175, 55, 0.18);
  --gold-faint:   rgba(212, 175, 55, 0.07);
  --dark:         #0D0D0F;       /* KEEP as true dark — used for section bgs */
  --dark-2:       #111113;
  --dark-3:       #1E1E21;
  --gray:         #8A8A90;
  --gray-light:   #2A2A2E;
  --border:       rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.04);
  /* ── Dark theme semantic ────────────────────────── */
  --bg-page:      #0D0D0F;
  --bg-section:   #121214;
  --bg-card:      #18181B;
  --text-main:    #E8E6E1;       /* primary text */
  --text-muted:   #8A8A90;       /* secondary text */

  /* ── Typography ─────────────────────────────────── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* ── Spacing ────────────────────────────────────── */
  --section-v:    clamp(56px, 7vw, 96px);
  --max-w:        1200px;
  --gutter:       clamp(20px, 5vw, 60px);

  /* ── Easing ─────────────────────────────────────── */
  --ease-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sharp:   cubic-bezier(0.76, 0, 0.24, 1);
  --t:            0.35s var(--ease-expo);
}

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

html {
  scroll-behavior: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-page);
  color: var(--text-main);
  overflow-x: hidden;
  line-height: 1.65;
}

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

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }


/* ================================================================
   02  TYPOGRAPHY GLOBALS
================================================================ */

em {
  font-style: italic;
  color: var(--red);
  font-weight: 600;
}

/* Small eyebrow labels */
.section__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}

.section__label::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 2px;
  background: var(--red);
  flex-shrink: 0;
  border-radius: 2px;
}

/* Main section headings */
.section__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin-bottom: 16px;
}

/* Supporting paragraph under section headers */
.section__desc {
  font-size: 15.5px;
  color: var(--text-muted);
  max-width: 500px;
  line-height: 1.75;
}


/* ================================================================
   03  LAYOUT HELPERS
================================================================ */

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--section-v) 0;
}

.section__header {
  margin-bottom: 44px;
}


/* ================================================================
   04  BUTTONS
================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 30px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 6px;
  transition: var(--t);
}

.btn--red {
  background: var(--red);
  color: var(--white);
}

.btn--red:hover {
  background: var(--red-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(193, 18, 31, 0.28);
}

.btn--outline {
  background: transparent;
  color: var(--text-main);
  border: 1.5px solid rgba(232, 230, 225, 0.35);
}

.btn--outline:hover {
  background: rgba(232, 230, 225, 0.1);
  color: var(--text-main);
  border-color: rgba(232, 230, 225, 0.6);
  transform: translateY(-2px);
}


/* ================================================================
   05  NAVIGATION
================================================================ */

.nav {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--gutter);
  transition: background 0.5s var(--ease-expo),
              padding    0.4s var(--ease-expo),
              box-shadow 0.4s;
}

/* Frosted glass on scroll */
.nav.scrolled {
  background: rgba(13, 13, 15, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
}

/* Logo */
.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav__logo-mark {
  width: 34px;
  height: 34px;
  background: var(--red);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  border-radius: 4px;
}

.nav__logo-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: -0.01em;
  transition: color 0.3s;
}

.nav__logo:hover .nav__logo-name {
  color: var(--red);
}

/* Nav links */
.nav__links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav__links a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-main);
  position: relative;
  padding-bottom: 2px;
  transition: color 0.3s;
}

.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--red);
  transition: width 0.35s var(--ease-expo);
  border-radius: 2px;
}

.nav__links a:hover { color: var(--red); }
.nav__links a:hover::after { width: 100%; }

/* Hire Me CTA */
.nav__cta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--red);
  padding: 10px 22px;
  border-radius: 4px;
  transition: var(--t);
}

.nav__cta:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(193, 18, 31, 0.25);
}

/* Hamburger (mobile only) */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}

.nav__hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--text-main);
  transition: var(--t);
  transform-origin: center;
}

.nav__hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(4.5px, 4.5px);
}
.nav__hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav__hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(4.5px, -4.5px);
}


/* ================================================================
   06  MOBILE MENU
================================================================ */

/* Backdrop */
.mobile-menu__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.5);
  z-index: 950;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

.mobile-menu__backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Menu panel */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: min(340px, 100%);
  height: 100%;
  background: #0D0D0F;
  z-index: 960;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(100%);
  transition: transform 0.5s var(--ease-sharp);
  padding: 60px 48px;
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu__close {
  position: absolute;
  top: 24px;
  right: 28px;
  font-size: 28px;
  color: var(--text-main);
  line-height: 1;
  transition: color 0.3s, transform 0.3s;
}

.mobile-menu__close:hover {
  color: var(--red);
  transform: rotate(90deg);
}

.mobile-menu ul {
  text-align: center;
}

.mobile-menu ul li {
  margin: 18px 0;
}

.mobile-menu ul li a {
  font-family: var(--font-display);
  font-size: clamp(32px, 7vw, 52px);
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.02em;
  transition: color 0.3s;
  display: block;
}

.mobile-menu ul li a:hover {
  color: var(--red);
}


/* ================================================================
   07  HERO SECTION
================================================================ */

.hero {
  min-height: 100svh;
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 10vw, 120px) var(--gutter) 60px;
  gap: 32px;
}

/* Subtle ambient radial glow */
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 85% 50%, rgba(193, 18, 31, 0.13) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(193, 18, 31, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 30% 30% at 50% 10%, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Ensure hero content sits above background */
.hero__logo-wrap,
.hero__content,
.hero__scroll {
  position: relative;
  z-index: 1;
}

/* 2-column layout — video gets more space */
.hero__content {
  max-width: var(--max-w);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 56px;
  align-items: center;
}

/* ── Hero logo — centered at top of hero, above 2-col layout ── */
.hero__logo-wrap {
  width: 100%;
  max-width: var(--max-w);
  display: flex;
  justify-content: center;
  opacity: 0; /* GSAP animates this in */
}

.hero__logo-img {
  width: auto;
  max-width: 300px;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 32px rgba(193, 18, 31, 0.5));
}

/* ── Hero text ── */
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 20px;
}

.hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--red);
  flex-shrink: 0;
  border-radius: 2px;
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--text-main);
  margin-bottom: 20px;
}

/* Each headline line is wrapped for GSAP clip/reveal */
.hero__line {
  display: block;
  will-change: transform;
}

.hero__line--red {
  color: var(--red);
  font-style: italic;
}

.hero__sub {
  font-size: 16px;
  color: var(--gray);
  line-height: 1.7;
  max-width: 400px;
  margin-bottom: 36px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Hero visual ── */
.hero__visual {
  position: relative;
}

/* Video / reel frame — clean, no decorative corners */
.hero__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--dark-2);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Corner accents removed */
.hero__frame::before,
.hero__frame::after {
  content: none;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Fallback shown when video src is absent/fails */
.hero__video-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #141414 0%, #1e1010 50%, #141414 100%);
}

.hero__fallback-inner {
  text-align: center;
}

.hero__fallback-monogram {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 80px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.12);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.hero__fallback-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.18);
  font-weight: 600;
}

/* Stats row beneath the frame */
.hero__stats {
  display: flex;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 8px;
  margin-top: 16px;
  overflow: hidden;
}

.hero__stat {
  flex: 1;
  padding: 16px 12px;
  text-align: center;
  border-right: 1px solid var(--border);
  position: relative;
}

.hero__stat:last-child {
  border-right: none;
}

.hero__stat-num {
  display: inline;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1;
}

.hero__stat-suffix {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--red);
}

.hero__stat-label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
  margin-top: 4px;
}

/* Scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: 32px;
  left: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0.5;
}

.hero__scroll span {
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 600;
  writing-mode: vertical-lr;
}

.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--red), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1);   }
  50%       { opacity: 1;   transform: scaleY(1.08); }
}


/* ================================================================
   08  WORK SECTION
================================================================ */

.work {
  background: var(--bg-section);
}

.work__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.work__card {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-card);
  transition: transform 0.35s var(--ease-expo),
              box-shadow 0.35s var(--ease-expo),
              border-color 0.35s;
  position: relative;
}

.work__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(193, 18, 31, 0.15);
  border-color: rgba(193, 18, 31, 0.3);
}

/* 16:9 YouTube embed wrapper */
.work__card-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--dark);
  overflow: hidden;
}

.work__card-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Card info */
.work__card-body {
  padding: 16px 20px 20px;
}

.work__card-tag {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}

.work__card-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.25;
  margin-bottom: 6px;
}

.work__card-meta {
  font-size: 12px;
  color: var(--gray);
  letter-spacing: 0.01em;
}


/* ================================================================
   09  CREATORS SECTION
================================================================ */

.creators {
  background: var(--bg-page);
  position: relative;
  overflow: hidden;
}

/* ── THE KEY GRID — auto-reflows when cards are added ── */
.creators__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

/* Individual creator card — now an <a> tag, so it needs its own
   display/cursor/decoration reset to behave like the old <div> did */
.creator__card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 20px 24px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.35s var(--ease-expo),
              box-shadow 0.35s var(--ease-expo),
              border-color 0.35s;
  position: relative;
  overflow: hidden;
}

.creator__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(193, 18, 31, 0.12);
  border-color: rgba(193, 18, 31, 0.18);
}

/* Avatar */
.creator__avatar-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
}

.creator__avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Subtle ring, becomes red on hover */
.creator__avatar-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(193, 18, 31, 0.12);
  transition: border-color 0.35s;
}

.creator__card:hover .creator__avatar-ring {
  border-color: var(--red);
}

.creator__name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

/* Subscriber count — prominent social proof */
.creator__subs {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.01em;
  margin-bottom: 10px;
}

.creator__niche {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  padding: 5px 12px;
  border: 1px solid var(--gray-light);
  border-radius: 100px;
}


/* ================================================================
   10  TESTIMONIALS SECTION
================================================================ */

.testimonials {
  background: var(--dark);
  position: relative;
  overflow: hidden;
}

/* Subtle ambient glows */
.testimonials::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 50% at 5% 50%, rgba(193, 18, 31, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 35% 35% at 95% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
  pointer-events: none;
}

.testimonials .section__label {
  color: rgba(255, 255, 255, 0.5);
}
.testimonials .section__label::before {
  background: rgba(255, 255, 255, 0.5);
}
.testimonials .section__title { color: var(--text-main); }
.testimonials .section__label { color: var(--text-muted); }

/* Auto-reflowing testimonial grid — equal-height cards */
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  align-items: stretch;
}

.testimonial__card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease-expo),
              background 0.35s,
              border-color 0.35s,
              box-shadow 0.35s;
  position: relative;
  overflow: hidden;
}

.testimonial__card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(193, 18, 31, 0.25);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

/* Stars */
.testimonial__stars {
  font-size: 14px;
  color: #FFB800;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

/* Quote text — body font, authentic feel */
.testimonial__quote {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 400;
  flex: 1;
  margin-bottom: 24px;
}

/* Author row */
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(193, 18, 31, 0.35);
  flex-shrink: 0;
}

.testimonial__name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 3px;
}

.testimonial__meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.58);
  font-weight: 500;
  letter-spacing: 0.02em;
}


/* ================================================================
   11  ABOUT SECTION
================================================================ */

.about {
  background: var(--bg-section);
}

.about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.about__bio {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.85;
  margin-bottom: 20px;
}

/* Experience stats row */
.about__stats {
  display: flex;
  gap: 32px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.about__stat {
  line-height: 1;
}

.about__stat-num,
.about__stat-suf {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--text-main);
}

.about__stat-suf {
  color: var(--red);
  font-size: 24px;
}

.about__stat-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gray);
  margin-top: 8px;
}

/* Skills panel */
.skills__panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px;
  position: sticky;
  top: 120px;
}

.skills__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

/* 2-column skills grid */
.skills__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.skill__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color 0.3s,
              transform 0.3s var(--ease-expo),
              box-shadow 0.3s;
}

.skill__item:hover {
  border-color: var(--red);
  transform: translateX(4px);
  box-shadow: -3px 0 0 var(--red);
}

/* Adobe-style monogram icon */
.skill__icon {
  width: 32px;
  height: 32px;
  background: var(--dark);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 4px;
  flex-shrink: 0;
}

.skill__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-main);
  letter-spacing: 0.01em;
}


/* ================================================================
   12  CONTACT SECTION
================================================================ */

.contact {
  background: var(--bg-page);
  position: relative;
  overflow: hidden;
}

/* Very subtle ghost word */
.contact__bg-word {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(90px, 18vw, 220px);
  font-weight: 700;
  color: rgba(0, 0, 0, 0.016);
  letter-spacing: -0.04em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.contact__inner {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.contact__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
}

.contact__sub {
  font-size: 16px;
  color: var(--gray);
  line-height: 1.7;
  margin-bottom: 40px;
}

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

/* Contact CTA buttons — shared base */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 6px;
  transition: var(--t);
  color: var(--white);
}

.cta-btn--discord {
  background: #5865F2;
}

.cta-btn--discord:hover {
  background: #4752c4;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(88, 101, 242, 0.3);
}

.cta-btn--email {
  background: var(--red);
}

.cta-btn--email:hover {
  background: var(--red-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(193, 18, 31, 0.3);
}

.cta-btn--twitter {
  background: var(--dark);
}

.cta-btn--twitter:hover {
  background: var(--dark-3);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}


/* ================================================================
   13  FOOTER
================================================================ */

.footer {
  background: var(--dark);
  padding: 32px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
}

.footer__role {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
}

.footer__nav {
  display: flex;
  gap: 28px;
}

.footer__nav a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  transition: color 0.3s;
}

.footer__nav a:hover {
  color: var(--white);
}

.footer__copy {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.22);
  letter-spacing: 0.04em;
}


/* ================================================================
   14  AOS OVERRIDES
================================================================ */

/* Prevent AOS from blocking pointer events before animate */


/* ================================================================
   15  RESPONSIVE — TABLET (max-width: 1024px)
================================================================ */

@media (max-width: 1024px) {
  .hero__content {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .hero__sub {
    max-width: 560px;
  }

  .about__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .skills__panel {
    position: static;
  }
}


/* ================================================================
   16  RESPONSIVE — MOBILE (max-width: 768px)
================================================================ */

@media (max-width: 768px) {
  /* Hide desktop nav, show hamburger */
  .nav__links,
  .nav__cta {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  /* Work: single column */
  .work__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Hero adjustments */
  .hero__logo-img {
    max-width: 220px;
  }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Contact buttons stack */
  .contact__actions {
    flex-direction: column;
    align-items: center;
  }

  /* About stats */
  .about__stats {
    gap: 24px;
  }

  /* Footer */
  .footer__inner {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .footer__nav {
    justify-content: center;
    gap: 24px;
  }

  /* Testimonials */
  .testimonials__grid {
    grid-template-columns: 1fr;
  }
}


/* ================================================================
   17  RESPONSIVE — SMALL (max-width: 480px)
================================================================ */

@media (max-width: 480px) {
  /* Stats go vertical on very small screens */
  .hero__stats {
    flex-direction: column;
    border-radius: 8px;
  }

  .hero__stat {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .hero__stat:last-child {
    border-bottom: none;
  }

  /* Skills single column */
  .skills__grid {
    grid-template-columns: 1fr;
  }

  /* About stats stack */
  .about__stats {
    flex-direction: column;
    gap: 20px;
  }

  /* Skills panel padding */
  .skills__panel {
    padding: 24px;
  }

  /* Testimonial card padding */
  .testimonial__card {
    padding: 24px 20px;
  }

  /* Creator grid 2-col on small mobile */
  .creators__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}