/* =========================================================
   Desmond Le — Portfolio  ·  Customer Success / Technical Support
   System: "Technical, but warm" + cool CSS gradients
   Type:   Space Grotesk (display/body) · IBM Plex Mono (labels)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* warm light surfaces */
  --bg:#f1efea; --bg2:#f7f5f1; --panel:#fcfbf9; --panel2:#f3f0ea;
  --ink:#201e1b; --soft:#6c675f; --faint:#9a948b; --line:#e4ded3;

  /* cool brand spectrum */
  --blue:#2f5fe0; --violet:#6b46e5; --teal:#0fa195; --cyan:#1cc6c0;
  --grad: linear-gradient(110deg, #2f5fe0 0%, #6b46e5 46%, #0fa597 100%);
  --grad-rev: linear-gradient(110deg, #0fa597 0%, #6b46e5 54%, #2f5fe0 100%);
  --glow: 0 18px 50px -22px rgba(60,70,210,.45);

  --maxw:1180px;
  --pad:clamp(22px, 5vw, 60px);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Space Grotesk', system-ui, sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.mono { font-family:'IBM Plex Mono', ui-monospace, monospace; }
a { color:inherit; text-decoration:none; }
::selection { background:color-mix(in srgb, var(--violet) 28%, transparent); }

/* gradient text */
.grad {
  background:var(--grad); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .grad.shimmer { animation:grad-shift 9s ease-in-out infinite; }
}
@keyframes grad-shift { 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

/* ---------- nav ---------- */
.nav {
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:8px;
  padding:15px var(--pad);
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.brand { display:flex; align-items:center; gap:11px; font-size:17px; font-weight:600; letter-spacing:-.01em; }
.brand .mk {
  width:27px; height:27px; border-radius:8px; background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px; font-weight:700; box-shadow:var(--glow);
}
.nav .links { display:flex; gap:4px; margin-left:36px; }
.nav .links a {
  color:var(--soft); font-size:14.5px; font-weight:500;
  padding:7px 13px; border-radius:8px; transition:color .15s, background .15s;
}
.nav .links a:hover { color:var(--ink); background:var(--panel2); }
.nav .links a { white-space:nowrap; }
.nav .links a.on { color:var(--ink); }
.nav .links a.on::after { content:""; display:block; height:2px; border-radius:2px; background:var(--grad); margin-top:3px; }
.nav .status {
  margin-left:auto; display:flex; align-items:center; gap:8px; white-space:nowrap;
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--soft);
  border:1px solid var(--line); padding:7px 13px; border-radius:9px; background:var(--panel);
}
.nav .status .led { width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 20%, transparent); }
.nav .resume-btn {
  margin-left:8px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:13.5px; font-weight:600; color:#fff; background:var(--grad); background-size:160% 100%;
  padding:9px 15px; border-radius:9px; box-shadow:var(--glow); transition:background-position .4s;
}
.nav .resume-btn:hover { background-position:100% 50%; }

/* ---------- layout ---------- */
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.section { padding:clamp(56px, 8vw, 96px) 0; }
.section.tight { padding:clamp(40px,6vw,64px) 0; }

.kicker {
  font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:.02em;
  color:var(--violet); display:inline-flex; align-items:center; gap:9px; margin-bottom:20px;
}
.kicker::before { content:""; width:22px; height:2px; border-radius:2px; background:var(--grad); }

h1,h2,h3,h4 { letter-spacing:-.025em; }
.eyebrow { font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--violet); margin-bottom:22px; letter-spacing:.01em; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:600; padding:14px 24px; border-radius:11px; transition:transform .15s, box-shadow .2s, background-position .4s; }
.btn:hover { transform:translateY(-2px); }
.btn-grad { color:#fff; background:var(--grad); background-size:160% 100%; box-shadow:var(--glow); }
.btn-grad:hover { background-position:100% 50%; box-shadow:0 22px 60px -20px rgba(60,70,210,.6); }
.btn-ghost { color:var(--ink); background:var(--panel); border:1px solid var(--line); }
.btn-ghost:hover { border-color:color-mix(in srgb, var(--violet) 40%, var(--line)); }
.btn .arr { transition:transform .15s; }
.btn:hover .arr { transform:translateX(3px); }

/* ---------- hero (landing) ---------- */
.hero { position:relative; overflow:hidden; }
.hero::before {
  content:""; position:absolute; inset:-20% -10% auto -10%; height:140%; z-index:0; pointer-events:none;
  background:
    radial-gradient(40% 55% at 18% 18%, color-mix(in srgb, var(--blue) 32%, transparent), transparent 70%),
    radial-gradient(38% 50% at 82% 12%, color-mix(in srgb, var(--violet) 30%, transparent), transparent 70%),
    radial-gradient(45% 55% at 70% 78%, color-mix(in srgb, var(--teal) 26%, transparent), transparent 72%);
  filter:blur(36px); opacity:.7;
}
.hero .wrap { position:relative; z-index:1; }
.hero-grid { display:grid; grid-template-columns:1.32fr 1fr; gap:54px; align-items:center; padding:clamp(48px,7vw,88px) 0 clamp(40px,6vw,72px); }
.hero h1 { font-size:clamp(40px, 5.6vw, 66px); font-weight:600; line-height:1.05; margin:0; }
.hero .lede { font-size:clamp(17px,2vw,20px); line-height:1.6; color:var(--soft); max-width:54ch; margin:26px 0 0; text-wrap:pretty; }
.hero .lede b { color:var(--ink); font-weight:600; }
.hero .cta { display:flex; flex-wrap:wrap; gap:13px; margin-top:34px; }
.hero .tline { font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--soft); margin-top:24px; }
.hero .tline .p { color:var(--teal); }

/* ---------- support-ticket panel mock ---------- */
.panelwrap { position:relative; }
.panelwrap::before { content:""; position:absolute; inset:-18px; border-radius:28px; background:var(--grad); filter:blur(34px); opacity:.28; z-index:0; }
.panelcard { position:relative; z-index:1; background:var(--panel); border:1px solid var(--line); border-radius:18px; box-shadow:0 30px 60px -30px rgba(40,40,80,.4); overflow:hidden; }
.pc-top { display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--panel2); }
.pc-top .d { width:11px; height:11px; border-radius:50%; }
.pc-title { font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--soft); margin-left:8px; }
.pc-body { padding:20px; display:flex; flex-direction:column; gap:14px; }
.tkt { display:flex; gap:12px; align-items:flex-start; }
.tkt.me { flex-direction:row-reverse; }
.av { width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; }
.av.cust { background:linear-gradient(135deg,#e0892f,#d9542b); }
.av.me { background:var(--grad); }
.bub { background:var(--bg2); border:1px solid var(--line); border-radius:13px; padding:11px 14px; font-size:14px; line-height:1.5; color:var(--ink); max-width:78%; }
.bub.me { background:color-mix(in srgb, var(--violet) 9%, var(--panel)); border-color:color-mix(in srgb, var(--violet) 24%, transparent); }
.resolved { display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--teal); padding-top:2px; }

/* ---------- pillars ---------- */
.pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pillar { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px 26px; position:relative; overflow:hidden; transition:border-color .2s, transform .2s; }
.pillar:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--violet) 30%, var(--line)); }
.pillar::after { content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:var(--grad); opacity:0; transition:opacity .2s; }
.pillar:hover::after { opacity:1; }
.pillar .pn { font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--faint); }
.pillar h3 { font-size:21px; font-weight:600; margin:14px 0 10px; }
.pillar p { font-size:15px; line-height:1.6; color:var(--soft); margin:0; }

/* ---------- stats ---------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.stat { background:var(--panel); padding:30px 26px; }
.stat .big { font-size:clamp(34px,4vw,46px); font-weight:600; letter-spacing:-.03em; line-height:1; }
.stat .lbl { font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--soft); margin-top:13px; line-height:1.55; }

/* ---------- highlight rows ---------- */
.hlrow { display:grid; grid-template-columns:190px 1fr auto; gap:30px; align-items:baseline; padding:26px 0; border-top:1px solid var(--line); }
.hlrow:first-of-type { border-top:none; }
.hlrow .role { font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--violet); }
.hlrow h4 { font-size:20px; font-weight:600; margin:0 0 7px; }
.hlrow h4 a { display:inline-flex; align-items:center; gap:8px; }
.hlrow h4 a .arr { color:var(--violet); transition:transform .15s; }
.hlrow h4 a:hover .arr { transform:translateX(3px); }
.hlrow p { font-size:15px; line-height:1.58; color:var(--soft); margin:0; max-width:58ch; }
.hlrow .yr { font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--faint); white-space:nowrap; }

/* ---------- section heading ---------- */
.shead { margin-bottom:30px; }
.shead h2 { font-size:clamp(26px,3.4vw,38px); font-weight:600; margin:0; }
.shead p { font-size:16px; color:var(--soft); margin:12px 0 0; max-width:62ch; }

/* ---------- goal band ---------- */
.goal { position:relative; border-radius:22px; overflow:hidden; padding:clamp(36px,5vw,60px); border:1px solid var(--line); background:var(--panel); }
.goal::before { content:""; position:absolute; inset:0; background:var(--grad); opacity:.07; }
.goal::after { content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px; border-radius:50%; background:var(--grad); filter:blur(60px); opacity:.18; }
.goal .inner { position:relative; z-index:1; max-width:760px; }
.goal blockquote { font-size:clamp(20px,2.6vw,28px); line-height:1.45; font-weight:500; letter-spacing:-.02em; margin:18px 0 0; text-wrap:pretty; }
.goal blockquote .grad { font-weight:600; }

/* ---------- footer ---------- */
.foot { border-top:1px solid var(--line); background:var(--bg2); }
.foot .wrap { padding-top:54px; padding-bottom:46px; }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; }
.foot h5 { font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--faint); margin:0 0 16px; letter-spacing:.04em; text-transform:uppercase; }
.foot .big-ct { font-size:clamp(24px,3vw,32px); font-weight:600; letter-spacing:-.02em; line-height:1.2; max-width:18ch; }
.foot .big-ct .grad { }
.foot .clist { display:flex; flex-direction:column; gap:11px; }
.foot .clist a { display:inline-flex; align-items:center; gap:10px; font-size:14.5px; color:var(--soft); transition:color .15s; width:fit-content; }
.foot .clist a:hover { color:var(--ink); }
.foot .clist a .ico { width:7px; height:7px; border-radius:50%; background:var(--grad); flex:0 0 auto; }
.foot-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:48px; padding-top:22px; border-top:1px solid var(--line); font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--faint); }

/* =========================================================
   NIGHT THEME  (Anhelo Salsa Club page)
   ========================================================= */
body.night {
  --bg:#0a0e1f; --bg2:#0d1226; --panel:#121831; --panel2:#0f1429;
  --ink:#eaf1ff; --soft:#9fb0d6; --faint:#6b7aa3; --line:#1f2a4d;
  --grad: linear-gradient(110deg, #18c9c0 0%, #3aa0ff 50%, #7b6cff 100%);
  --grad-sunset: linear-gradient(110deg, #ff7a3d 0%, #ff3d77 48%, #b14bff 100%);
  background:var(--bg);
}
body.night .nav { background:color-mix(in srgb, var(--bg) 72%, transparent); border-bottom-color:var(--line); }
body.night .nav .status { background:var(--panel); }
body.night ::selection { background:color-mix(in srgb, var(--cyan) 34%, transparent); }

/* ---------- global cosmos (site-wide starry undertone) ---------- */
body.night { position:relative; }
/* nebula wash, fixed behind everything */
body.night::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(48% 40% at 18% 6%,  color-mix(in srgb, #3aa0ff 20%, transparent), transparent 70%),
    radial-gradient(44% 38% at 84% 2%,  color-mix(in srgb, #7b6cff 18%, transparent), transparent 70%),
    radial-gradient(60% 50% at 50% 108%, color-mix(in srgb, #18c9c0 14%, transparent), transparent 72%),
    linear-gradient(180deg, #070b18 0%, #0a0e1f 38%, #090c1a 100%);
}
/* starfield, fixed behind everything */
body.night::after {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 6% 14%, #ffffff, transparent),
    radial-gradient(1.1px 1.1px at 14% 62%, #cfe5ff, transparent),
    radial-gradient(1.6px 1.6px at 22% 28%, #ffffff, transparent),
    radial-gradient(1px 1px at 31% 82%, #bcd8ff, transparent),
    radial-gradient(1.3px 1.3px at 38% 12%, #ffffff, transparent),
    radial-gradient(1.1px 1.1px at 44% 54%, #d6e6ff, transparent),
    radial-gradient(1.5px 1.5px at 53% 33%, #ffffff, transparent),
    radial-gradient(1px 1px at 59% 74%, #c4e0ff, transparent),
    radial-gradient(1.4px 1.4px at 66% 18%, #ffffff, transparent),
    radial-gradient(1.1px 1.1px at 72% 60%, #cfe5ff, transparent),
    radial-gradient(1.6px 1.6px at 79% 40%, #ffffff, transparent),
    radial-gradient(1px 1px at 85% 78%, #bcd8ff, transparent),
    radial-gradient(1.3px 1.3px at 91% 24%, #ffffff, transparent),
    radial-gradient(1.1px 1.1px at 96% 66%, #d6e6ff, transparent),
    radial-gradient(1.2px 1.2px at 9% 90%, #ffffff, transparent),
    radial-gradient(1.2px 1.2px at 48% 94%, #cfe5ff, transparent),
    radial-gradient(1.3px 1.3px at 88% 92%, #ffffff, transparent);
  background-repeat:no-repeat;
  opacity:.9;
}
@media (prefers-reduced-motion: no-preference) {
  body.night::after { animation:cosmos-twinkle 7s ease-in-out infinite alternate; }
}
@keyframes cosmos-twinkle { from{ opacity:.55; } to{ opacity:.95; } }
/* keep opaque surfaces sitting above the cosmos */
body.night .foot { background:color-mix(in srgb, var(--bg2) 86%, transparent); backdrop-filter:blur(4px); }

/* ---------- cosmic portrait (hero photo) ---------- */
.portrait-wrap { position:relative; display:flex; justify-content:center; }
.portrait-wrap::before {
  content:""; position:absolute; inset:-8% -6% -10% -6%; border-radius:50% 50% 46% 46%/55% 55% 45% 45%;
  background:var(--grad); filter:blur(46px); opacity:.34; z-index:0;
}
.portrait {
  position:relative; z-index:1; width:100%; max-width:380px; aspect-ratio:1/1;
  border-radius:22px; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--cyan) 30%, var(--line));
  box-shadow:0 40px 90px -42px rgba(20,160,210,.55), inset 0 0 0 1px rgba(255,255,255,.04);
}
.portrait img {
  width:100%; height:100%; object-fit:cover; display:block;
  /* feather the bottom so the shoulders melt into the cosmos */
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 72%, transparent 99%);
  mask-image:linear-gradient(180deg, #000 0%, #000 72%, transparent 99%);
}
.portrait-tag {
  position:absolute; z-index:2; left:50%; bottom:-18px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink);
  padding:10px 16px; border-radius:999px;
  background:color-mix(in srgb, var(--panel) 78%, transparent);
  border:1px solid var(--line); backdrop-filter:blur(8px);
  box-shadow:0 16px 40px -20px rgba(0,0,0,.6);
}
.portrait-tag .dot { width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 3px color-mix(in srgb, var(--cyan) 22%, transparent); }
.portrait-tag b { color:var(--ink); font-weight:600; }

/* starfield hero */
.night-hero { position:relative; overflow:hidden; }
.starfield { position:absolute; inset:0; z-index:0; pointer-events:none; }
.starfield::before, .starfield::after {
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 28% 64%, #cfe5ff, transparent),
    radial-gradient(1.6px 1.6px at 47% 14%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 63% 48%, #bfe9ff, transparent),
    radial-gradient(1.3px 1.3px at 78% 28%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 88% 66%, #d6e6ff, transparent),
    radial-gradient(1.5px 1.5px at 36% 84%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 70% 78%, #c9e3ff, transparent),
    radial-gradient(1.2px 1.2px at 8% 80%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 95% 12%, #fff, transparent);
  opacity:.85;
}
@media (prefers-reduced-motion: no-preference) {
  .starfield::after { animation:twinkle 6s ease-in-out infinite alternate; opacity:.5; }
}
@keyframes twinkle { from{ opacity:.25; } to{ opacity:.8; } }

/* shooting star — crosses the hero every few seconds */
.shooting-star { position:absolute; z-index:1; top:0; left:0; width:160px; height:2px; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, transparent, rgba(207,229,255,.9) 60%, #ffffff);
  border-radius:2px; filter:drop-shadow(0 0 6px rgba(180,220,255,.85)); transform:rotate(16deg); }
.shooting-star.s2 { width:120px; }
@media (prefers-reduced-motion: no-preference) {
  .shooting-star { animation:shoot 9s ease-in infinite; }
  .shooting-star.s2 { animation-duration:13s; animation-delay:5s; }
}
@keyframes shoot {
  0%   { opacity:0; transform:translate(6vw, 4vh) rotate(16deg); }
  2%   { opacity:1; }
  9%   { opacity:1; }
  16%  { opacity:0; transform:translate(58vw, 26vh) rotate(16deg); }
  100% { opacity:0; transform:translate(58vw, 26vh) rotate(16deg); }
}
.night-hero::after {
  content:""; position:absolute; left:50%; top:-30%; width:120%; height:120%; transform:translateX(-50%); z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 42% at 50% 20%, color-mix(in srgb, var(--cyan) 28%, transparent), transparent 70%),
    radial-gradient(50% 50% at 80% 60%, color-mix(in srgb, #3aa0ff 22%, transparent), transparent 72%),
    radial-gradient(46% 48% at 18% 70%, color-mix(in srgb, #7b6cff 20%, transparent), transparent 72%);
  filter:blur(20px);
}
.night-hero .wrap { position:relative; z-index:2; }

body.night .panel-soft { background:var(--panel); border:1px solid var(--line); }
.glasscard { background:color-mix(in srgb, var(--panel) 80%, transparent); border:1px solid var(--line); border-radius:16px; backdrop-filter:blur(6px); }

/* sunset accent utility */
.grad-sunset { background:var(--grad-sunset); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; }
.btn-sunset { color:#fff; background:var(--grad-sunset); background-size:160% 100%; box-shadow:0 18px 50px -22px rgba(255,80,90,.5); }
.btn-sunset:hover { background-position:100% 50%; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns:1fr; gap:38px; }
  .pillars { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr 1fr; }
  .hlrow { grid-template-columns:1fr; gap:6px; }
  .hlrow .yr { order:-1; }
  .foot-grid { grid-template-columns:1fr; gap:30px; }
  .nav .links { display:none; }
}
@media (max-width: 560px) {
  .stats { grid-template-columns:1fr; }
}