/* ========== Theme ========== */
:root{
  --bg:#0b0b12; --card:#12121a; --card-2:#0f0f17; --section-solid:#0f0f17;
  --text:#e9e9f2; --muted:#a4a4b6; --line:#1e1e2a;

  /* avatar-matched accents */
  --accent:#A76CFF;      /* lavender purple */
  --accent-2:#FF78C6;    /* hot pink */
  --accent-3:#CFA8FF;    /* lilac (utility) */
  --pink-100:#FFD1E6;    /* blush highlight */

  /* gradient motion tuning */
  --shine-duration: 18s;     /* slower shimmer */
  --shine-distance: 240%;    /* longer travel */

  --rad:22px; --shadow:0 10px 30px rgba(0,0,0,.35)
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(167,108,255,.16), transparent 60%),
    radial-gradient(900px 600px at -10% 20%,  rgba(255,120,198,.12), transparent 55%),
    var(--bg);
  color:var(--text);line-height:1.6
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1100px,90vw);margin:0 auto;position:relative}
.tag{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;
  padding:.35rem .7rem;border:1px solid rgba(207,168,255,.35); /* lilac tint */
  border-radius:999px;color:#cfcfe8;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025))
}

/* ========== Header (glass pill) ========== */
.site-header{position:sticky;top:0;z-index:60;background:transparent}
.site-header .nav{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.6rem 1rem;
  margin:10px auto;border:1px solid var(--line);border-radius:999px;
  background:rgba(18,18,26,.6);backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.35)
}
.brand{display:flex;align-items:center}
.site-header .brand img{
  width:auto;height:28px;object-fit:contain;border-radius:0;box-shadow:none;display:block;
  filter:
    drop-shadow(0 8px 18px rgba(167,108,255,.35))
    drop-shadow(0 3px 10px rgba(255,120,198,.22));
}
@media (max-width:800px){.site-header .brand img{height:24px}}

/* nav spacing */
.nav-links{
  display:flex;align-items:center;
  gap:clamp(.7rem, 2.4vw, 1.4rem);
  padding:.25rem;border-radius:999px
}
.nav a{opacity:.92; padding:.5rem .85rem;}
.nav a:hover{opacity:1}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border-radius:12px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  transition:transform .15s ease,box-shadow .15s ease
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}

/* PRIMARY => WHITE BUTTONS (About me + My Media Kit) */
.btn.primary{
  background:linear-gradient(180deg,#ffffff,#f2f2f2);
  border-color:transparent;
  color:#0b0b12;
  border-radius:999px;
  padding:.55rem .9rem;
}

/* Hamburger icon = white (keep dark header) */
.hamburger{display:none;font-size:1.4rem}
.hamburger.btn{ color:#fff; }            /* makes the icon white */
.hamburger.btn i{ color:inherit; }       /* ensure <i> inherits white */
@media (max-width:800px){
  .nav-links{display:none}
  .hamburger{display:block}
}

/* Mobile slide-down panel (kept dark) */
.mobile-panel{
  position:fixed;inset:64px 16px auto 16px;background:var(--card);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  display:none;padding:1rem;z-index:70
}
.mobile-panel.open{display:block}
.mobile-panel a{display:block;padding:.75rem;border-radius:10px}
.mobile-panel a:hover{background:rgba(255,255,255,.04)}

/* ========== Hero ========== */
#hero{position:relative;min-height:72vh;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
#hero video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.3) contrast(.95) brightness(.6)
}
.hero-overlay{
  position:absolute;inset:0;background:
    radial-gradient(1000px 400px at 70% 10%, rgba(167,108,255,.15), transparent 60%),
    linear-gradient(to top,rgba(11,11,18,.9),rgba(11,11,18,.3))
}
.hero-content{position:relative;text-align:center;padding:8vh 0 10vh}
.eyebrow{margin-bottom:1rem}
.headline{font-size:clamp(2rem,5vw,3.7rem);line-height:1.1;font-weight:900;letter-spacing:.3px;margin:0}

/* Gradient text (headline) — slower motion */
.gradient{
  background:linear-gradient(90deg,#fff,var(--pink-100),var(--accent-3),var(--accent),var(--pink-100));
  background-size: var(--shine-distance) 100%;
  animation: shine var(--shine-duration) linear infinite;
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .gradient{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
@keyframes shine{0%{background-position:0 0}100%{background-position:200% 0}}

.sub{max-width:780px;margin:.9rem auto 1.6rem;color:var(--muted)}
.cta-row{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* ========== Command palette ========== */
.cmdk{
  position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;z-index:99
}
.cmdk.open{display:flex}
.cmdk[hidden]{display:none !important}
.cmdk .panel{
  width:min(680px,92vw);background:var(--card);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);padding:14px
}
.cmdk input{
  width:100%;padding:.8rem 1rem;border:1px solid var(--line);
  border-radius:12px;background:var(--card-2);color:var(--text);outline:none
}
.cmdk ul{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.5rem}
.cmdk li a{
  display:flex;gap:.6rem;align-items:center;padding:.65rem .75rem;border:1px solid var(--line);
  border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))
}

/* ========== Sections (alternating) ========== */
section{
  position:relative;
  padding:72px 0;
  border-bottom:1px solid var(--line);
  background:transparent;
}
:root{
  --section-gradient:
    radial-gradient(1100px 360px at 12% 0,  rgba(167,108,255,.18), transparent 60%),
    radial-gradient(1000px 340px at 88% 0,  rgba(255,120,198,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 140px);
}
/* Gradient sections */
#about, #projects, #press{
  background: var(--section-gradient), var(--section-solid);
  background-repeat:no-repeat;
}
/* Solid sections */
#expertise, #videos{
  background-color: var(--section-solid);
}

h2{font-size:clamp(1.4rem,3.2vw,2.2rem);margin:0 0 1rem;font-weight:900}
.lead{color:#d5d5e8}

/* ========== About ========== */
.about{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center}
.about .card{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:var(--rad);padding:1.2rem
}
.about img{border-radius:var(--rad)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-top:1rem}
.stat{background:var(--card-2);border:1px solid var(--line);border-radius:16px;padding:1rem;text-align:center}
.stat b{font-size:1.6rem}
.chip{
  display:inline-flex;gap:.5rem;align-items:center;padding:.35rem .6rem;border:1px solid rgba(207,168,255,.35);
  border-radius:999px;font-size:.8rem;color:#cfcfe8
}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}
@media (max-width:1000px){.about{grid-template-columns:1fr}}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ========== Cards / Grids ========== */
.grid{display:grid;gap:1rem}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid.cols-4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:1.1rem;box-shadow:var(--shadow)}
.card h3{margin:.2rem 0 .3rem;font-size:1.1rem}
.card p{margin:0;color:var(--muted)}

/* ========== Videos ========== */
.video-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.video{
  grid-column:span 6;position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line)
}
.video img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;transition:transform .25s ease
}
.video:hover img{transform:scale(1.03)}
.video .overlay{
  position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.48));
  display:flex;align-items:flex-end;padding:1rem
}
.video p{margin:0;font-weight:600}

/* Move play badge bottom-right & add text safe area */
.video .play{
  position:absolute;right:12px;bottom:12px;
  background:linear-gradient(180deg, rgba(255,120,198,.20), rgba(167,108,255,.18));
  color:#fff;border:1px solid transparent;
  backdrop-filter:blur(6px);
  border-radius:999px;padding:.5rem .7rem;font-weight:700
}
.video .overlay p{ padding-right:96px; }
@media (max-width:720px){ .video .overlay p{ padding-right:72px; } }

@media (max-width:900px){.video{grid-column:span 12}}

/* ========== Socials (also footer) ========== */
.socials{display:flex;gap:.75rem;flex-wrap:wrap}
.socials a{
  display:inline-flex;align-items:center;gap:.5rem;padding:.7rem .9rem;border:1px solid var(--line);
  border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))
}

/* ========== Footer (Connect merged) ========== */
.site-footer{
  padding:64px 0 36px;
  text-align:center;
  border-top:1px solid var(--line);
  background: linear-gradient(180deg, var(--section-solid) 0%, #0e0e16 35%, var(--bg) 100%);
}
.site-footer h2{ margin-bottom:.5rem; }
.site-footer .lead{ margin:0 auto 18px; max-width:720px; color:var(--muted); }
.site-footer .socials{ justify-content:center; gap:.5rem; }
.site-footer .socials a{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  padding:.7rem .9rem; border-radius:12px;
}
.site-footer .foot-line{
  margin:26px auto 14px; border:0; height:1px; width:min(880px,86%);
  background:linear-gradient(90deg, transparent, rgba(207,168,255,.5), transparent);
  opacity:.45;
}
.site-footer .legal{ display:block; color:var(--muted); font-size:.85rem; opacity:.85; }

/* ========== Extras ========== */
footer{color:var(--muted)}
.progress{
  position:fixed;top:0;left:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  width:0;z-index:100
}
#hero #fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.6;mix-blend-mode:screen}
.reveal{opacity:0;transform:translateY(10px) scale(.98);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.tilt{will-change:transform;transition:transform .2s ease}
.btn.magnet{transition:transform .08s ease}
.scroll-hint{
  margin-top:18px;width:18px;height:28px;border:2px solid #cfcfe8;border-radius:12px;opacity:.6;position:relative;display:inline-block
}
.scroll-hint:after{
  content:"";position:absolute;left:50%;top:6px;width:4px;height:4px;border-radius:50%;background:#cfcfe8;
  transform:translateX(-50%);animation:scrollDot 1.6s infinite
}
@keyframes scrollDot{
  0%{opacity:0;transform:translate(-50%,0)}
  30%{opacity:1}
  100%{opacity:0;transform:translate(-50%,8px)}
}

/* ========== Reduced Motion ========== */
@media (prefers-reduced-motion:reduce){
  #hero video,#hero #fx{display:none}
  .gradient{animation:none}
}

/* 3-column grid utility to fit the new press section */
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1000px){ .grid.cols-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid.cols-3{ grid-template-columns:1fr; } }

/* ===== Hero image helper (no extra markup needed) ===== */
#hero.has-image::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(.3) contrast(.95) brightness(.6);
  z-index: 0;
}

/* Keep existing canvas/overlay/content above the image */
#hero #fx, #hero .hero-overlay, #hero .hero-content { position:relative; z-index:1; }

/* If a page reuses the video element but wants an image instead, hide the video */
#hero.has-image video { display:none; }

/* ===== Hero readability scrim (tunable) ===== */
#hero{ --hero-scrim:.45 } /* default strength */
.hero-overlay{ position:absolute; inset:0 }
.hero-overlay::after{
  content:"";
  position:absolute; inset:0;
  /* center vignette over the image so text stays readable */
  background: radial-gradient(640px 280px at 50% 58%,
              rgba(11,11,18,var(--hero-scrim,.45)), transparent 72%);
  pointer-events:none;
}
/* optional: let hero images be slightly dimmer/blurred if desired */
#hero.has-image::before{ filter: brightness(var(--hero-brightness,.92)) blur(var(--hero-blur,0px)); }

/* === Strong, tunable hero dimmer ======================================= */
#hero{ position:relative }
#hero.has-image::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background-image: var(--hero-image);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  /* hard dim via filter */
  filter: brightness(var(--hero-brightness, .55)) saturate(.9) contrast(.95);
}

/* two-layer overlay: uniform dark + vignette */
.hero-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none }
.hero-overlay::before{
  content:""; position:absolute; inset:0;
  background: rgba(11,11,18, var(--hero-dim, .55));  /* whole-frame dim */
}
.hero-overlay::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 320px at 50% 58%, rgba(11,11,18,var(--hero-scrim,.65)), transparent 68%),
    linear-gradient(to top, rgba(11,11,18,.85), rgba(11,11,18,.35));
}

/* ensure text sits above overlays */
.hero-content{ position:relative; z-index:2 }