*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

 :root {
  --black:   #0b0a0f;
  --black2:  #121018;
  --black3:  #1a1722;
  --surface: #211d2b;
  --gold:    #d4af37;   /* richer gold */
  --gold2:   #f1d27a;   /* soft highlight gold */
  --pink:    #f3d6f5;   /* softer elegant pink */
  --pink2:   #e6bde9;
  --white:   #f8f6f2;
  --bg:      #0b0a0f;
  --bg2:     #121018;
  --bg3:     #1a1722;
  --card:    #211d2b;
  --border:  rgba(212,175,55,0.25);
  --border2: rgba(243,214,245,0.12);
  --text:    #f8f6f2;
  --subtext: #b8b2c2;
  --muted:   #a6a0b4;
  --dim:     #766d8f;
  --accent:  #d4af37;
  --serif:   'Playfair Display', Georgia, serif;
  --sans:    'Outfit', sans-serif;
  --mono:    'DM Mono', monospace;
  --r:       12px;
  --r-lg:    18px;
}

 [data-theme="light"] {
  --bg:      #fffafc;
  --bg2:     #fdf3f8;
  --bg3:     #f7e9f2;
  --card:    #ffffffe9;
  --pink2:   #420748;
  --border:  rgba(212,175,55,0.25);
  --border2: rgba(230,189,233,0.18);
  --text:    #1a1720;
  --subtext: #5e5666;
  --muted:   #49464e;
  --dim:     #8a858f;
}

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
    transition: background .35s, color .35s;
    -webkit-font-smoothing: antialiased;
  }

  /* subtle diagonal lines */
 body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;

  z-index: -1;

  background-image: repeating-linear-gradient(
    -45deg,
    rgba(212,175,55,0.05) 0px,
    rgba(212,175,55,0.05) 1px,
    transparent 1px,
    transparent 60px
  );

  opacity: 0.5;
}

html[data-theme="light"] body::after {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(194, 108, 194, 0.09) 0px,
    rgba(194, 108, 194, 0.09) 1px,
    transparent 1px,
    transparent 60px
  );

  opacity: 0.4;
}



  ::selection { background: var(--gold); color: #000; }

  .container { max-width: 1320px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; }
  section { padding: 100px 0; }

  /* ─── NAV ─────────────────────────────────────── */
  header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    padding: 18px 0;
    transition: all .4s;
  }
  header.scrolled {
    background: rgba(12,11,14,0.9);
    backdrop-filter: blur(22px) saturate(1.3);
    border-bottom: 1px solid var(--border);
    padding: 13px 0;
  }
  [data-theme="light"] header.scrolled { background: rgba(250,248,245,0.92); }

  nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

  .logo {
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.02em;
    flex-shrink: 0;
  }
  .logo em { font-style: italic; color: var(--gold); }

  .nav-links { display: flex; gap: 28px; list-style: none; align-items: center; }
  .nav-links a {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--muted);
    text-decoration: none;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    transition: color .2s;
    position: relative;
    padding-bottom: 2px;
  }
  .nav-links a::after {
    content: '';
    position: absolute; bottom: -2px; left: 0; right: 0; height: 1px;
    background: var(--gold);
    transform: scaleX(0); transform-origin: right;
    transition: transform .28s ease;
  }
  .nav-links a:hover, .nav-links a.active { color: var(--gold); }
  .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); transform-origin: left; }

  .nav-right { display: flex; align-items: center; gap: 10px; }
  .theme-btn {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent; color: var(--muted);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; transition: all .25s; flex-shrink: 0;
  }
  .theme-btn:hover { border-color: var(--gold); color: var(--gold); }

  .hamburger {
    display: none; background: none; border: none;
    color: var(--text); font-size: 1.3rem; cursor: pointer;
    padding: 4px; flex-shrink: 0;
  }

  /* drawer */
  .drawer-overlay {
    display: none; position: fixed; inset: 0; z-index: 300;
    background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
    opacity: 0; transition: opacity .3s;
  }
  .drawer-overlay.open { display: block; opacity: 1; }
  .drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(300px, 85vw); z-index: 310;
    background: var(--bg2); border-left: 1px solid var(--border);
    padding: 70px 28px 40px;
    display: flex; flex-direction: column; gap: 4px;
    transform: translateX(110%);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
  }
  .drawer.open { transform: translateX(0); }
  .drawer-close {
    position: absolute; top: 20px; right: 20px;
    background: none; border: none; color: var(--muted); font-size: 1.3rem; cursor: pointer;
  }
  .drawer a {
    font-family: var(--serif);
    font-size: 1.35rem; font-weight: 700;
    color: var(--text); text-decoration: none;
    padding: 11px 0;
    border-bottom: 1px solid var(--border2);
    transition: color .2s;
  }
  .drawer a:hover { color: var(--gold); }
  .drawer-theme {
    margin-top: 20px; display: flex; align-items: center; gap: 12px;
    font-family: var(--mono); font-size: 0.7rem; color: var(--muted);
  }

  /* ─── BUTTONS ─────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 24px; border-radius: 10px;
    font-family: var(--mono); font-size: 0.76rem;
    letter-spacing: 0.05em; text-decoration: none;
    transition: all .25s; cursor: pointer; border: none;
    white-space: nowrap; font-weight: 500;
  }
  .btn-gold  { background: var(--gold); color: #0c0b0e; }
  .btn-gold:hover { background: var(--gold2); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(201,168,76,0.35); }
  .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--subtext); }
  .btn-outline:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
  .btn-pink { background: rgba(244,226,241,0.08); border: 1px solid rgba(244,226,241,0.22); color: var(--pink); }
  html[data-theme="light"] .btn-pink {
  background: rgba(194,108,194,0.12);
  border: 1px solid rgba(194,108,194,0.35);
  color: #8a2c8a;
}
  .btn-pink:hover { background: rgba(244,226,241,0.16); transform: translateY(-2px); }

  /* ─── HERO ────────────────────────────────────── */
  .hero {
    min-height: 100svh; display: flex; align-items: center;justify-content: center;
    padding-top: 80px; position: relative; overflow: hidden;
  }
  .hero::before {
    content: ''; position: absolute;
    width: 650px; height: 650px; border-radius: 50%;
    background: radial-gradient(circle, rgba(201,168,76,0.09) 0%, transparent 65%);
    top: -180px; right: -180px; pointer-events: none;
  }
  .hero::after {
    content: ''; position: absolute;
    width: 450px; height: 450px; border-radius: 50%;
    background: radial-gradient(circle, rgba(244,226,241,0.07) 0%, transparent 65%);
    bottom: -100px; left: -100px; pointer-events: none;
  }

  .hero-badge {
    display: inline-flex; align-items: center; gap: 9px;
    background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.28);
    border-radius: 100px; padding: 7px 18px;
    font-family: var(--mono); font-size: 0.69rem;
    color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase;
    margin-bottom: 30px;
  }
  .hero-badge::before {
    content: ''; width: 6px; height: 6px; background: var(--gold);
    border-radius: 50%; animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.65)} }

  .hero-title {
    font-family: var(--serif);
    font-size: clamp(2.9rem, 10vw, 6.2rem);
    font-weight: 900; line-height: 1.0;
    letter-spacing: -0.03em; color: var(--text);
    margin-bottom: 16px;
  }
  .hero-title .it { font-style: italic; color: var(--gold); }
  .hero-title .pk { color: var(--pink); }

  .hero-role {
    font-family: var(--mono);
    font-size: clamp(0.65rem, 2.5vw, 0.82rem);
    color: var(--muted); letter-spacing: 0.12em;
    text-transform: uppercase; margin-bottom: 22px;
  }

  .hero-type {
    font-family: var(--sans); font-weight: 300;
    font-size: clamp(0.95rem, 2.8vw, 1.1rem);
    color: var(--subtext); max-width: 510px;
    min-height: 1.7em; margin-bottom: 38px; line-height: 1.65;
  }
  #typed::after { content: '|'; color: var(--gold); animation: blink .75s step-end infinite; }
  @keyframes blink { 50%{opacity:0} }

  .hero-cta { display: flex; flex-wrap: wrap; gap: 11px; }

  .scroll-hint {
    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 0.6rem;
    color: var(--dim); letter-spacing: 0.1em; text-transform: uppercase;
    animation: float 2.4s ease-in-out infinite;
  }
  @keyframes float { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

  /* ─── TECH STRIP ──────────────────────────────── */
  .tech-strip {
    padding: 50px 0;
    background: var(--bg2);
    border-top: 1px solid var(--border2);
    border-bottom: 1px solid var(--border2);
  }
  .strip-label {
    text-align: center; font-family: var(--mono); font-size: 0.64rem;
    color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase;
    margin-bottom: 26px;
  }
  .tech-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 34px; }
  .ti {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: var(--muted); transition: color .25s, transform .25s; cursor: default;
  }
  .ti:hover { color: var(--gold); transform: translateY(-3px); }
  .ti i { font-size: 1.65rem; }
  .ti span { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; }

  /* ─── SECTION LABELS ──────────────────────────── */
  .lbl {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 0.67rem;
    color: var(--gold); letter-spacing: 0.14em; text-transform: uppercase;
    margin-bottom: 12px;
  }
  .lbl::before { content: '§'; color: var(--dim); font-size: 0.78rem; }

  h2.st {
    font-family: var(--serif);
    font-size: clamp(1.85rem, 5vw, 3.1rem);
    font-weight: 900; letter-spacing: -0.025em;
    line-height: 1.1; color: var(--text);
    margin-bottom: 52px;
  }
  h2.st .g { color: var(--gold); }
  h2.st .p { color: var(--pink); }
  h2.st em { font-style: italic; }

  /* ─── ABOUT ───────────────────────────────────── */
  .about-grid {
    display: grid; grid-template-columns: 1fr 400px;
    gap: 60px; align-items: center;
  }
  .atext p { font-size: 1rem; color: var(--subtext); line-height: 1.85; margin-bottom: 18px; }
  .atext p strong { color: var(--text); font-weight: 600; }
  .atext .gw { color: var(--gold); }
  .atext .pw { color: var(--pink); }

  .quote-block {
    border-left: 2px solid var(--gold);
    padding: 15px 20px;
    background: rgba(201,168,76,0.05);
    border-radius: 0 8px 8px 0;
    margin: 24px 0;
    font-family: var(--serif);
    font-size: 1.02rem; font-style: italic;
    color: var(--subtext); line-height: 1.7;
  }

  .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
  .pill {
    background: var(--card); border: 1px solid var(--border2);
    border-radius: 100px; padding: 6px 14px;
    font-family: var(--mono); font-size: 0.68rem;
    color: var(--muted); letter-spacing: 0.03em;
  }
  .pill .g { color: var(--gold); margin-right: 3px; }

  .aimg { position: relative; }
  .profile-card {
    width: 100%; aspect-ratio: 3/4;
    border-radius: var(--r-lg); overflow: hidden;
    background: var(--card);
  }
  .profile-card img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: grayscale(15%); transition: filter .45s;
  }
  .profile-card:hover img { filter: grayscale(0%); }
  .profile-card::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(12,11,14,0.5) 0%, transparent 50%);
    pointer-events: none;
  }
  .pdeco {
    position: absolute; top: -14px; right: -14px;
    width: 100%; height: 100%;
    border: 1.5px solid rgba(201,168,76,0.3);
    border-radius: var(--r-lg); pointer-events: none;
    transition: all .4s;
  }
  .aimg:hover .pdeco { top: -8px; right: -8px; border-color: rgba(201,168,76,0.6); }
  .ptag {
    position: absolute; bottom: 18px; left: 18px; z-index: 2;
    background: rgba(12,11,14,0.6); backdrop-filter: blur(8px);
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 10px; padding: 9px 14px;
    font-family: var(--mono); font-size: 0.68rem;
    color: var(--gold); letter-spacing: 0.06em;
  }

  /* ─── SKILLS ──────────────────────────────────── */
  .skills-bg { background: var(--bg2); }
  .sgroups { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
  .sg {
    background: var(--card); border: 1px solid var(--border2);
    border-radius: var(--r-lg); padding: 26px 22px;
    transition: border-color .3s, transform .3s, box-shadow .3s;
  }
  .sg:hover { border-color: rgba(201,168,76,0.32); transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
  .sg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
  .sg-ico {
    width: 36px; height: 36px; background: rgba(201,168,76,0.1);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    color: var(--gold); font-size: 0.9rem;
  }
  .sg-title { font-family: var(--serif); font-size: 0.98rem; font-weight: 700; color: var(--text); }
  .slist { display: flex; flex-direction: column; gap: 13px; }
  .si { display: flex; flex-direction: column; gap: 5px; }
  .si-row { display: flex; justify-content: space-between; }
  .si-name { font-size: 0.83rem; color: var(--subtext); }
  .si-pct { font-family: var(--mono); font-size: 0.67rem; color: var(--muted); }
  .bar { height: 3px; background: var(--bg3); border-radius: 100px; overflow: hidden; }
  .bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--pink2));
    border-radius: 100px; width: 0;
    transition: width 1.3s cubic-bezier(.16,1,.3,1);
  }

  /* ─── PROJECTS ────────────────────────────────── */
  .featured {
    display: grid; grid-template-columns: 1fr 1fr; gap :0;
    border: 1px solid var(--border);
    border-radius: var(--r-lg); overflow: hidden;
    background: var(--card); margin-bottom: 44px;
    transition: box-shadow .35s, transform .35s;
  }
  .featured:hover { transform: translateY(-5px); box-shadow: 0 0 50px rgba(201,168,76,0.14), 0 30px 60px rgba(0,0,0,0.3); }
  .feat-media { position: relative; min-height: 340px; background: var(--bg3); overflow: hidden; }
  .feat-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
  .featured:hover .feat-media img { transform: scale(1.05); }
  .feat-badge {
    position: absolute; top: 16px; left: 16px; padding: 60px;
    background: var(--gold); color: #0c0b0e;
    font-family: var(--mono); font-size: 0.6rem;
    font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 5px 14px;
    border-radius: 100px; z-index: 2;
  }
  .feat-body {
    padding: clamp(26px, 5vw, 50px);
    display: flex; flex-direction: column; justify-content: center;
  }
  .feat-body h3 {
    font-family: var(--serif);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 900; letter-spacing: -0.02em;
    color: var(--text); margin-bottom: 13px;
  }
  .feat-body p { color: var(--subtext); font-size: 0.93rem; line-height: 1.75; margin-bottom: 22px; }
  .tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 26px; }
  .tag {
    background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.2);
    color: var(--gold); font-family: var(--mono); font-size: 0.63rem;
    padding: 4px 12px; border-radius: 100px; letter-spacing: 0.04em;
  }
  .tag.p { background: rgba(244,226,241,0.06); border-color: rgba(244,226,241,0.18); color: var(--pink2); }
  html[data-theme="light"] .tag.p {
  background: rgba(224, 124, 224, 0.12);
  border-color: rgba(203, 114, 203, 0.3);
  color: #8a2c8a;
}
  .feat-links { display: flex; gap: 10px; flex-wrap: wrap; }

  .pgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
  .pc {
    background: var(--card); border: 1px solid var(--border2);
    border-radius: var(--r); overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color .3s, transform .3s, box-shadow .3s;
  }
  .pc:hover { border-color: rgba(201,168,76,0.26); transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,0.22); }
  .pc-img { height: 158px; background: var(--bg3); overflow: hidden; position: relative; }
  .pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
  .pc:hover .pc-img img { transform: scale(1.07); }
  .pc-img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(12,11,14,0.55) 0%, transparent 55%);
  }
  .pc-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
  .pc-body h3 {
    font-family: var(--serif); font-size: 0.98rem;
    font-weight: 700; color: var(--text);
    margin-bottom: 7px; letter-spacing: -0.01em;
  }
  .pc-body p { color: var(--muted); font-size: 0.83rem; line-height: 1.6; flex: 1; margin-bottom: 14px; }
  .pc-links { display: flex; gap: 7px; flex-wrap: wrap; }
  .pc-links a {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--mono); font-size: 0.66rem;
    letter-spacing: 0.04em; padding: 6px 13px; border-radius: 8px;
    text-decoration: none; transition: all .2s;
  }
  .pc-links a.demo { background: var(--gold); color: #000; }
  .pc-links a.demo:hover { background: var(--gold2); }
  .pc-links a.code { background: transparent; border: 1px solid var(--border2); color: var(--muted); }
  .pc-links a.code:hover { border-color: var(--gold); color: var(--gold); }

  /* ─── STATS ───────────────────────────────────── */
  .stats-bg { background: var(--bg2); }
  .stats-row {
    display: grid; grid-template-columns: repeat(4,1fr);
    border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  }
  .sc {
    padding: 42px 20px; text-align: center;
    border-right: 1px solid var(--border2); background: var(--card);
    transition: background .3s;
  }
  .sc:last-child { border-right: none; }
  .sc:hover { background: rgba(201,168,76,0.04); }
  .sn {
    font-family: var(--serif); font-size: 2.6rem; font-weight: 900;
    color: var(--gold); letter-spacing: -0.04em; display: block;
    line-height: 1; margin-bottom: 8px;
  }
  .sd { font-family: var(--mono); font-size: 0.64rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }

  /* ─── FOCUS ───────────────────────────────────── */
  .focus-inner { display: grid; grid-template-columns: 1fr 260px; gap: 56px; align-items: start; }
  .ft p { color: var(--subtext); font-size: 0.98rem; line-height: 1.85; margin-bottom: 18px; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
  .chip {
    background: var(--card); border: 1px solid var(--border2);
    color: var(--subtext); font-family: var(--mono); font-size: 0.7rem;
    padding: 8px 15px; border-radius: 100px; transition: all .25s; cursor: default;
  }
  .chip:hover { border-color: var(--gold); color: var(--gold); }
  .code-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r); padding: 22px;
    font-family: var(--mono); font-size: 0.76rem;
    line-height: 2; color: var(--muted);
  }
  .ck  { color: #6fb5f7; }
  .cf  { color: #c9a0e8; }
  .cs  { color: #7ecfa4; }
  .cm_ { color: var(--dim); font-style: italic; }

  /* ─── CONTACT ─────────────────────────────────── */
  .contact-bg { background: var(--bg2); }
  .cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
  .cinfo h3 {
    font-family: var(--serif); font-size: 1.45rem; font-weight: 700;
    color: var(--text); margin-bottom: 13px;
  }
  .cinfo p { color: var(--subtext); line-height: 1.8; margin-bottom: 26px; font-size: 0.95rem; }
  .cd { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 0.76rem; color: var(--muted); margin-bottom: 11px; }
  .cd i { color: var(--gold); width: 16px; text-align: center; }
  .socials { display: flex; gap: 10px; margin-top: 26px; }
  .sa {
    width: 38px; height: 38px; border: 1px solid var(--border);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: var(--muted); text-decoration: none; font-size: 0.88rem; transition: all .25s;
  }
  .sa:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
  .cform { display: flex; flex-direction: column; gap: 13px; }
  .ff { display: flex; flex-direction: column; gap: 6px; }
  .ff label { font-family: var(--mono); font-size: 0.66rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
  .ff input, .ff textarea {
    background: var(--card); border: 1px solid var(--border2);
    border-radius: 10px; padding: 12px 15px;
    color: var(--text); font-family: var(--sans); font-size: 0.95rem;
    outline: none; transition: border-color .25s; resize: none; width: 100%;
  }
  .ff input:focus, .ff textarea:focus { border-color: var(--gold); }
  .ff textarea { min-height: 115px; }
  .sub-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--gold); color: #0c0b0e; border: none;
    padding: 13px 26px; border-radius: 10px;
    font-family: var(--mono); font-size: 0.76rem;
    font-weight: 500; letter-spacing: 0.05em;
    cursor: pointer; transition: all .25s; width: fit-content;
  }
  .sub-btn:hover { background: var(--gold2); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(201,168,76,0.3); }
  #fmsg { font-family: var(--mono); font-size: 0.73rem; margin-top: 4px; }
  #fmsg.ok  { color: #7ecfa4; }
  #fmsg.err { color: #f97b7b; }

  /* ─── FOOTER ──────────────────────────────────── */
  footer { border-top: 1px solid var(--border2); padding: 38px 0; }
  .fi { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
  .flogo { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--text); }
  .flogo em { font-style: italic; color: var(--gold); }
  .fc { font-family: var(--mono); font-size: 0.66rem; color: var(--dim); letter-spacing: 0.04em; }

  /* ─── REVEAL ──────────────────────────────────── */
  .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
  .rv.in { opacity: 1; transform: none; }
  .rv.d1 { transition-delay: .1s; }
  .rv.d2 { transition-delay: .2s; }
  .rv.d3 { transition-delay: .32s; }

  /* ─── RESPONSIVE ──────────────────────────────── */
  @media (min-width: 1200px) {
  .pgrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .sgroups {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
  @media (max-width: 960px) {
    .about-grid   { grid-template-columns: 1fr; }
    .aimg         { max-width: 320px; margin: 0 auto; }
    .sgroups      { grid-template-columns: 1fr 1fr; }
    .featured     { grid-template-columns: 1fr; }
    .feat-media   { min-height: 210px; }
    .pgrid        { grid-template-columns: 1fr 1fr; }
    .stats-row    { grid-template-columns: 1fr 1fr; }
    .sc:nth-child(2) { border-right: none; }
    .sc:nth-child(3) { border-top: 1px solid var(--border2); }
    .sc:nth-child(4) { border-top: 1px solid var(--border2); border-right: none; }
    .focus-inner  { grid-template-columns: 1fr; }
    .code-card    { display: none; }
    .cgrid        { grid-template-columns: 1fr; }
  }

  @media (max-width: 640px) {
    section    { padding: 68px 0; }
    .nav-links { display: none; }
    .hamburger { display: block; }
    .sgroups   { grid-template-columns: 1fr; }
    .pgrid     { grid-template-columns: 1fr; }
    .stats-row { grid-template-columns: 1fr 1fr; }
    .hero-cta  { flex-direction: column; align-items: flex-start; }
    .hero-cta .btn { justify-content: center; width: 100%; max-width: 240px; }
    .feat-links { flex-direction: column; }
    .feat-links .btn { justify-content: center; }
    .fi { flex-direction: column; align-items: center; text-align: center; }
    .socials { justify-content: center; }
    .about-grid { gap: 32px; }
    h2.st { margin-bottom: 36px; }
  }

  @media (max-width: 380px) {
    .container { padding: 0 14px; }
    .stats-row { grid-template-columns: 1fr; }
    .sc { border-right: none; border-top: 1px solid var(--border2); }
    .sc:first-child { border-top: none; }
  }