/* ==========================================================================
   JERSON — DARK & CINEMATIC (Clean CSS)
   - Reset
   - Tokens (CSS variables)
   - Typography
   - Layout (container, grid, utilities)
   - Components (header, hero, buttons, tabs, cards, forms)
   - Helpers/Utilities
   ========================================================================== */

/* == Reset =============================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

/* == Tokens ============================================================== */
:root {
  /* Palette */
  --bg: #07080b;
  --bg-alt: #0b0d12;
  --text: #e9ecf3;
  --muted: #9aa3b4;
  --line: rgba(255,255,255,.08);
  --neon: #8f7cff;
  --neon-2: #ff6f9c;

  /* Typography */
  --ff-sans: Outfit, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ff-serif: Spectral, Georgia, serif;
  --fs-300: 14px;
  --fs-400: 16px;
  --fs-500: 18px;
  --fs-600: 22px;
  --fs-700: clamp(28px, 5vw, 44px);
  --fs-900: clamp(40px, 7vw, 84px);

  /* Spacing */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 28px;
  --space-6: 40px;
  --space-7: 84px;

  /* Effects */
  --radius: 14px;
  --shadow-1: 0 12px 38px rgba(0,0,0,.4);
  --blur: 6px;
}

/* == Base ================================================================ */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-sans);
  line-height: 1.6;
  font-size: var(--fs-400);
}
.lead { color: var(--muted); margin: 0 0 var(--space-3); }
.display-1 {
  font-family: var(--ff-serif);
  font-size: var(--fs-900);
  line-height: 1.06;
  margin: 0 0 var(--space-2);
}
.h2 {
  font-family: var(--ff-serif);
  font-size: var(--fs-700);
  margin: 0 0 var(--space-1);
}
.text-thin { font-weight: 300; opacity: .9; }
.text-glow { text-shadow: 0 0 12px rgba(143,124,255,.7); }

/* == Layout ============================================================== */
.container { width: min(1100px, 92%); margin: 0 auto; }
.section { position: relative; padding: var(--space-7) 0; z-index: 1; }
.section--alt { background: var(--bg-alt); }
.section + .section { background: var(--bg); }

.grid { display: grid; gap: var(--space-4); align-items: start; }
.grid--2 { grid-template-columns: 1.2fr 1fr; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .grid--2 { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .grid--3 { grid-template-columns: 1fr; }
}

/* == Header ============================================================== */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(to bottom, rgba(7,8,11,.9), rgba(7,8,11,.6), transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(var(--blur));
}
.header__row { display:flex; align-items:center; justify-content:space-between; padding: var(--space-2) 0; }
.brand {
  display: inline-grid; place-items:center;
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--neon), var(--neon-2));
  color: #f6ddf8; font-weight: 800;
}
.nav { display:flex; gap: 18px; }
.nav__link { color: var(--muted); }
.nav__link:hover { color: var(--text); }
.nav-toggle { display:none; background:none; border:none; color:var(--text); font-size:22px; }
@media (max-width: 900px){
  .nav { display:none; }
  .nav[aria-expanded="true"] { display:flex; flex-direction:column; position:absolute; right:4%; top:56px;
    background: rgba(10,10,14,.98); border:1px solid var(--line); border-radius: var(--radius);
    padding: var(--space-3); z-index: 50; }
  .nav-toggle { display:block; }
}


/* Edge-to-edge header row with small safe gutters */
.site-header .container.header__row {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: clamp(12px, 3vw, 24px);
  padding-right: clamp(12px, 3vw, 24px);
  box-sizing: border-box; /* make sure padding doesn't shift layout */
}

/* Ensure the brand isn't offset by any stray margins */
.site-header .brand { margin-left: 0; }



/* == Hero (final, single source) ======================================== */
.hero {
  height: 100vh;              /* exact screen height */
  display: flex;
  align-items: center;
  overflow: hidden;           /* hard-clip background */
  position: relative;
}

.hero--bgphoto {
  --hero-photo-opacity: 0.1;
  --hero-veil-inner: .10;
  --hero-veil-outer: .45;
  --hero-object-x: 40%;
  --hero-object-y: 35%;
  --marquee-offset: 50px;     /* distance from bottom */
}

.hero__bgphoto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--hero-object-x) var(--hero-object-y);
  opacity: var(--hero-photo-opacity);
  filter: blur(1.2px) contrast(1.06) saturate(.95);
  z-index: 0;
}

.hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(60% 50% at 50% 42%,
      rgba(0,0,0, var(--hero-veil-inner)),
      rgba(0,0,0, var(--hero-veil-outer))
    ),
    linear-gradient(180deg,
      rgba(0,0,0, calc(var(--hero-veil-inner) * .8)),
      rgba(0,0,0, calc(var(--hero-veil-outer) * 1.1))
    );
}

/* content block */
.hero__inner {
  position: relative;
  z-index: 2;
  width: min(1100px, 92%);
  margin: 0;
  padding: 80px 0;
}

/* left-aligned variant */
.hero--left { place-items: stretch; }
.hero--left .hero__inner {
  text-align: left;
  margin-left: clamp(16px, 6vw, 120px);
}
.hero--left .buttons { justify-content: flex-start; }

@media (max-width: 780px) {
  .hero--left .hero__inner { margin-left: auto; margin-right: auto; text-align: center; }
  .hero--left .buttons { justify-content: center; }
}

/* Marquee: pin to bottom & keep above veil */
.marquee {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--marquee-offset, 50px);
  z-index: 3;
  width: 100%;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,.35);
  margin: 0;
}
.marquee__track {
  display: flex; gap: 40px; white-space: nowrap;
  animation: marquee 30s linear infinite;
  color: var(--muted);
  padding: 6px 0;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* Optional: slightly more presence on big screens */
@media (min-width: 1200px) {
  .hero__bgphoto { opacity: var(--hero-photo-opacity-lg, 0.24); }
}


/* Kill section padding on the hero so it stays exactly 100vh */
.hero.section { padding-top: 0; padding-bottom: 0; }

/* Clip anything inside the hero (already present, but keeping it here for clarity) */
.hero { height: 100vh; overflow: hidden; position: relative; }

/* Pin marquee and reserve space INSIDE the hero's content
   so text/buttons never collide with the marquee */
.hero--bgphoto { --marquee-offset: 50px; }
.hero--bgphoto .hero__inner { padding-bottom: calc(var(--marquee-offset) + 24px); }

/* Marquee pinned above the veil and image */
.hero--bgphoto .marquee {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--marquee-offset);
  z-index: 3;
  margin: 0;
}

/* trims 60px off bottom, 0 elsewhere */
.hero__bgphoto { clip-path: inset(var(--trim-top,0) var(--trim-right,0) var(--trim-bottom,60px) var(--trim-left,0)); }


.hero { height: var(--hero-min-h, 100vh); overflow: hidden; position: relative; }


/* == Buttons (Unified Gradient) ========================================= */
/* Base: ghost + neon glow (default everywhere) */
.button,
button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .8rem 1.6rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: 600 0.95rem/1 var(--ff-sans);
  letter-spacing: .03em;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .35s ease, border-color .35s ease, filter .35s ease;
  box-shadow:
    0 0 12px rgba(144, 124, 255, 0.329),
    0 0 28px rgba(255, 111, 157, 0.321);
}
.button:hover,
button:hover {
  transform: translateY(-3px);
  border-color: var(--neon);
  box-shadow:
    0 0 12px rgba(143,124,255,.45),
    0 0 26px rgba(255,111,156,.28);
  filter: brightness(1.05);
}

/* Filled gradient ONLY where you add .button--solid (e.g., Work page CTAs) */
.button--solid {
  border: none;
  color: #0a0b0e;
  background: linear-gradient(135deg, var(--neon), var(--neon-2));
  box-shadow:
    0 0 8px rgba(143,124,255,.40),
    0 0 16px rgba(255,111,156,.25);
}
.button--solid:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 0 12px rgba(143,124,255,.60),
    0 0 26px rgba(255,111,156,.40);
}

/* Neon pulse for buttons */
@keyframes buttonPulse {
  0%, 100% {
    box-shadow:
      0 0 12px rgba(143,124,255,0.7),
      0 0 28px rgba(255,111,156,0.5);
  }
  50% {
    box-shadow:
      0 0 22px rgba(143,124,255,1),
      0 0 48px rgba(255,111,156,0.8);
  }
}

.button,
button {
  animation: buttonPulse 3.0s ease-in-out infinite;
}


/* == About ============================================================== */
/* Image styling */
.portrait img { border-radius: 16px; box-shadow: var(--shadow-1); }
.caption { color: var(--muted); font-size: var(--fs-300); margin-top: 6px; }
.chips { display:flex; flex-wrap:wrap; gap: 8px; margin-top: 10px; }
.chip {
  padding: 6px 10px; border-radius: 999px; border:1px solid var(--line);
  color: var(--muted); background: rgba(255,255,255,.03);
  transition: all .3s ease;
}
.chip:hover {
  color: var(--text);
  border-color: var(--neon);
  box-shadow: 0 0 10px var(--neon);
  transform: translateY(-3px);
}

/* About layout with Grid Areas */
.about__grid {
  display: grid;
  gap: 2rem;
  grid-template-areas:
    "text"
    "media"
    "skills";
}
.about__text   { grid-area: text; }
.about__media  { grid-area: media; }
.about__skills { grid-area: skills; border-top: 1px solid var(--line); padding-top: 12px; }

@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: 1.2fr 1fr;
    grid-template-areas:
      "text  media"
      "skills skills";
    align-items: start;
  }
}
.about__media img {
  display: block; width: 100%; max-width: 420px; height: auto;
  border-radius: 16px; box-shadow: 0 12px 38px rgba(0,0,0,.45);
  margin-inline: auto;
}

/* == Skills (extended, smooth open/close) ============================= */
.skills-details {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.skills-details summary {
  list-style: none; cursor: pointer; color: var(--neon); font-weight: 600;
  user-select: none; outline: none; display: flex; align-items: center; gap: 8px;
}
.skills-details summary::-webkit-details-marker { display: none; }
.skills-details summary:hover { color: var(--text); }
.skills-details summary:focus-visible {
  box-shadow: 0 0 0 3px rgba(143,124,255,.25); border-radius: 8px;
}

/* Icon rotation (duotone <i> inside summary) */
.skills-details summary i {
  transition: transform .4s cubic-bezier(0.25,1,0.3,1); margin-left: 6px; font-size: 1.1rem;
}
.skills-details.is-open summary i { transform: rotate(180deg); }

/* Sliding panel (JS animates height; CSS fades) */
.skills-panel { overflow: hidden; opacity: 0; transition: opacity .35s ease; }

/* List styling */
.skills-panel ul {
  margin: 10px 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.6;
  list-style: disc; padding-left: 1.4rem;
}

/* Items fade/slide */
.skills-panel ul li {
  opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease;
}

/* When opened */
.skills-details.is-open .skills-panel { opacity: 1; }
.skills-details.is-open .skills-panel ul li { opacity: 1; transform: translateY(0); }
/* Stagger only on open */
.skills-details.is-opening .skills-panel ul li:nth-child(1){ transition-delay:.05s; }
.skills-details.is-opening .skills-panel ul li:nth-child(2){ transition-delay:.10s; }
.skills-details.is-opening .skills-panel ul li:nth-child(3){ transition-delay:.15s; }
.skills-details.is-opening .skills-panel ul li:nth-child(4){ transition-delay:.20s; }
.skills-details.is-opening .skills-panel ul li:nth-child(5){ transition-delay:.25s; }
.skills-details.is-opening .skills-panel ul li:nth-child(6){ transition-delay:.30s; }
/* Remove delays on close */
.skills-details.is-closing .skills-panel ul li { transition-delay: 0s !important; }

/* Optional: neon pulse while open */
@keyframes neonPulse {
  0%,100% { text-shadow: 0 0 14px var(--neon), 0 0 30px var(--neon); }
  50%     { text-shadow: 0 0 24px var(--neon), 0 0 50px var(--neon-2); }
}
.skills-details.is-open summary i { animation: neonPulse 1.5s ease-in-out infinite; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .skills-panel, .skills-panel ul li, .skills-details summary i { transition: none; animation: none; }
}

/* == Reel ============================================================== */
.player { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#08090e; box-shadow: var(--shadow-1); }
.player video { width:100%; height: min(60vw, 480px); display:block; }

/* == Tabs ============================================================== */
.tabs { display:flex; gap: 8px; margin: 10px 0 24px; }
.tabs__tab {
  padding: 10px 14px; border-radius: 12px; border:1px solid var(--line);
  color: var(--muted); background: rgba(255,255,255,.04); cursor: pointer;
}
.tabs__tab.is-active { color: var(--text); background: linear-gradient(135deg, rgba(143,124,255,.18), rgba(255,111,156,.18)); }
.is-hidden { display:none !important; }

/* == Cards (clean, final) ============================================== */
.card {
  position: relative; display: block; background: #0a0c12;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  transition: transform .25s ease, box-shadow .4s ease, border-color .4s ease;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--neon);
  box-shadow: 0 0 8px rgba(143,124,255,.4), 0 0 18px rgba(255,111,156,.2), 0 10px 40px rgba(0,0,0,.6);
}
/* sweep */
.card::before {
  content: ""; position: absolute; inset: 0; opacity: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 0%, rgba(143,124,255,.20) 30%, rgba(255,111,156,.20) 70%, transparent 100%);
  transition: opacity .4s ease;
}
.card:hover::before { opacity: .25; }

/* thumbs */
.card__thumb { position: relative; height: 160px; overflow: hidden; z-index:1; }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; will-change: transform; }
.card:hover .card__thumb img { transform: scale(1.05); }

/* overlay text */
.card__overlay {
  position: absolute; inset: 0; display:flex; align-items:center; justify-content:center;
  color: var(--text); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(135deg, rgba(143,124,255,0.18), rgba(255,111,156,0.18));
  opacity: 0; transform: scale(1.04); transition: opacity .35s ease, transform .4s cubic-bezier(0.25,1,0.3,1);
  pointer-events: none; z-index: 2;
}
.card:hover .card__overlay { opacity: 1; transform: scale(1); }
.card__overlay span { transform: translateY(6px); opacity: 0; text-shadow: 0 0 0 var(--neon), 0 0 0 var(--neon-2); transition: transform .35s ease, opacity .35s ease, text-shadow .35s ease; }
.card:hover .card__overlay span { transform: translateY(0); opacity: 1; text-shadow: 0 0 6px var(--neon), 0 0 12px var(--neon-2); }

/* tint per tab (optional) */
#mp .card__overlay { background: linear-gradient(135deg, rgba(143,124,255,0.22), rgba(255,111,156,0.18)); }
#sd .card__overlay { background: linear-gradient(135deg, rgba(255,111,156,0.22), rgba(255,181,72,0.18)); }

/* badge */
.card__badge {
  position: absolute; top: 10px; left: 10px; padding: 4px 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  color: #0a0c12; background: linear-gradient(135deg, var(--neon), var(--neon-2));
  border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,.35); pointer-events: none; z-index: 3;
}

/* body */
.card__body { padding: 14px; position: relative; z-index: 2; }
.card__title { margin: 0 0 6px; font-size: var(--fs-500); }
.card__text  { margin: 0 0 8px; color: var(--muted); font-size: 14px; }

/* link-style cards & button */
.card--link { text-decoration: none; color: inherit; }
.card--link .card__title { text-decoration: none; }
.card--link:hover .card__title { text-decoration: underline; text-decoration-color: var(--neon); text-underline-offset: 3px; }
.card__button { display:inline-block; margin-top:10px; font-weight:600; color:var(--neon); transition: color .3s ease, transform .2s ease; }
.card__button:hover { color: var(--neon-2); transform: translateX(4px); }

/* == Lists & Forms ====================================================== */
.list { list-style:none; padding:0; margin:0; color: var(--muted); }
.form { display:grid; gap:10px; border:1px solid var(--line); padding:16px; border-radius:16px; background: rgba(255,255,255,.03); }
.form input, .form textarea { background:#0a0c12; color:var(--text); border:1px solid var(--line); border-radius:12px; padding:10px; }

/* Contact list (with icons) */
#contact .list { padding-left: 0; margin: 10px 0 0; list-style: none; }
#contact .list li { margin: 6px 0; }
#contact .list a {
  display: inline-flex; align-items: center; gap: 8px; color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px;
  transition: transform .25s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease;
}
#contact .list a i { font-size: 1.05rem; line-height: 1; transition: color .25s ease, text-shadow .25s ease; }
#contact .list a:hover {
  transform: translateY(-2px); color: var(--neon); border-color: rgba(143,124,255,.6);
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 12px rgba(143,124,255,.35);
}
#contact .list a:hover i.fa-youtube    { color: #ff0033; text-shadow: 0 0 10px rgba(255,0,51,.5); }
#contact .list a:hover i.fa-instagram  { color: #e1306c; text-shadow: 0 0 10px rgba(225,48,108,.5); }
#contact .list a:hover i.fa-tiktok     { color: #25F4EE; text-shadow: 0 0 10px rgba(37,244,238,.5); }
#contact .list a:hover i.fa-soundcloud { color: #ff7700; text-shadow: 0 0 10px rgba(255,119,0,.5); }
#contact .list a:hover i.fa-linkedin   { color: #0A66C2; text-shadow: 0 0 10px rgba(10,102,194,.5); }

/* Floating labels */
.form .field { position: relative; }
.form .field .input {
  width: 100%; background: #0a0c12; color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 12px; transition: border-color .2s ease, box-shadow .2s ease;
}
.form .field label {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  background: var(--bg-alt); color: var(--muted); font-size: 0.95rem;
  padding: 0 6px; border-radius: 6px; pointer-events: none;
  transition: transform .4s cubic-bezier(0.25, 1, 0.3, 1), color .4s ease, top .4s cubic-bezier(0.25, 1, 0.3, 1), font-size .4s ease;
}
.form .field textarea + label { top: 14px; transform: none; }
.form .field.focus label {
  top: 0; transform: translateY(-50%) scale(0.88); color: var(--text);
}
.form .field textarea.focus + label,
.form .field textarea:not(:placeholder-shown) + label {
  top: -8px; transform: none; font-size: 0.9rem; color: var(--text);
}
.form .field .input:focus {
  outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px rgba(143,124,255,.18);
}
.form .field .input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px #0a0c12 inset; -webkit-text-fill-color: var(--text);
}

/* == Footer ============================================================= */
.site-footer .footnote { text-align: center; width: 100%; margin-top: 16px; font-size: 0.95rem; color: var(--muted); }
.site-footer .socials .list {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.site-footer .socials .list a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: transparent;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
}
.site-footer .socials .list a i { font-size: 1.1rem; line-height: 1; }
.site-footer .socials .list a:hover {
  color: var(--neon); border-color: rgba(143,124,255,.6); transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 14px rgba(143,124,255,.35);
}
.site-footer .socials .list a:hover i.fa-youtube   { color: #ff0033; text-shadow: 0 0 10px rgba(255,0,51,.6); }
.site-footer .socials .list a:hover i.fa-instagram { color: #e1306c; text-shadow: 0 0 10px rgba(225,48,108,.6); }
.site-footer .socials .list a:hover i.fa-tiktok    { color: #25F4EE; text-shadow: 0 0 10px rgba(37,244,238,.6); }
.site-footer .socials .list a:hover i.fa-soundcloud{ color: #ff7700; text-shadow: 0 0 10px rgba(255,119,0,.6); }
.site-footer .socials .list a:hover i.fa-linkedin  { color: #0A66C2; text-shadow: 0 0 10px rgba(10,102,194,.6); }

/* == FX (decorative) ==================================================== */
.fx.fx--grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* == Kill injected overlays/search (defensive) ========================== */
div.content.scroll, input[type="search"], form[role="search"], [role="search"], [class*="search" i], [id*="search" i] {
  display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important;
}

/* == Education/Experience boxes ======================================== */
main.row { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 20px; }
@media (max-width: 768px) { main.row { grid-template-columns: 1fr; } }
.col header.title { color: #f9fffd; padding: 0 0 20px 30px; }
.col .contents { padding: 0 30px; border-left: 2px solid #bababa; margin-bottom: 8rem; }
.col .contents .box {
  position: relative; padding: 20px; border: 1px solid #eaeaea; background-color: #1c1b1b;
  cursor: pointer; transition: all .4s; margin-bottom: 20px;
}
.col .contents .box:hover { box-shadow: 0px 3px 12px 0px rgba(192,124,255,.77); border: 1px solid transparent; }
.col .contents .box::before {
  content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  right: calc(100% + 24px); top: 0;
  background: linear-gradient(135deg, var(--neon), var(--neon-2)); border: 2px solid #fff;
}
.box h4 { position: relative; color: #f9fffd; }
.box h3 { font-size: 17px; padding: 10px 0 6px; color: #fffefe; }
.box p { line-height: 1.2; color: rgb(246,237,252); font-size: 14px; }

/* == Toast (neon) ======================================================= */
.toast-wrap {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: grid; gap: 10px; z-index: 1000; pointer-events: none;
}
.toast {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 10px;
  max-width: min(92vw, 560px); padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line);
  color: var(--text); background: rgba(10,12,18,0.9); backdrop-filter: blur(6px);
  box-shadow: 0 0 8px rgba(143,124,255,0.35), 0 0 18px rgba(255,111,156,0.25);
  transform: translateY(8px); opacity: 0; animation: toastIn 260ms cubic-bezier(0.25,1,0.3,1) forwards;
}
.toast--success { border-color: rgba(143,124,255,.5); }
.toast--error   { border-color: rgba(255,111,156,.6); }
.toast__icon { font-size: 1.1rem; flex: 0 0 auto; text-shadow: 0 0 6px var(--neon), 0 0 12px var(--neon-2); }
.toast__text { font-size: 0.95rem; line-height: 1.4; }
.toast__close {
  margin-left: 8px; background: transparent; border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 4px 8px; cursor: pointer; transition: border-color .25s ease, transform .2s ease;
}
.toast__close:hover { border-color: var(--neon); transform: translateY(-1px); }
@keyframes toastIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toastOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(8px); opacity: 0; } }