/* ===================== VARIABLES ===================== */
:root {
  --bg: #f0f8ff; --bg2: #e3f2ff; --dark: #0d1b2a;
  --blue: #3ab4f2; --blue-mid: #1a8fd1; --blue-light: #b3e4f7;
  --blue-pale: #ddf1fc; --accent: #ffe566; --accent2: #ff8fab;
  --text: #0d1b2a; --muted: #6a8fa8; --white: #ffffff;
  --card: #ffffff; --border: rgba(58,180,242,0.18);
  --nav-bg: rgba(240,248,255,0.88);
  --transition-theme: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* ===== DARK MODE VARIABLES ===== */
[data-theme="dark"] {
  --bg: #0d1117; --bg2: #161b22;
  --dark: #f0f8ff;
  --blue: #1a6fa8; --blue-mid: #155e90; --blue-light: #0d3a5c;
  --blue-pale: #0a2540; --accent: #ffe566; --accent2: #ff8fab;
  --text: #e6edf3; --muted: #8b949e; --white: #0d1117;
  --card: #161b22; --border: rgba(26,111,168,0.25);
  --nav-bg: rgba(13,17,23,0.94);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font-family: 'Syne', sans-serif; overflow-x: hidden; cursor: none;
  transition: background .4s ease, color .4s ease;
}
/* Apply theme transition to all major elements */
nav, .nav-drawer, .project-card, .product-card, .social-card,
.section, .section-alt, footer, .hero-tag, .pill, .product-thumb,
.project-body, .product-body, .social-handle, .product-price { transition: background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease; }

/* CURSOR */
/* CURSOR — star trail only, no dot */
.cursor-star {
  position: fixed; pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  font-size: .75rem; line-height: 1;
  animation: starFall .7s ease-out forwards;
  user-select: none;
}
@keyframes starFall {
  0%   { opacity: 1;  transform: translate(-50%,-50%) scale(1) rotate(0deg); }
  100% { opacity: 0;  transform: translate(calc(-50% + var(--dx)), calc(-50% + 28px)) scale(.2) rotate(180deg); }
}

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 2.8rem; background: var(--nav-bg);
  backdrop-filter: blur(16px); border-bottom: 1px solid var(--border);
  transition: background .4s ease, border-color .4s ease;
}
.nav-logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; letter-spacing: .06em; color: var(--dark); text-decoration: none; transition: color .3s; }
.nav-logo span { color: var(--blue); }
.nav-links { display: flex; gap: 2.2rem; list-style: none; }
.nav-links a { font-family: 'Space Mono', monospace; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--blue); }
.nav-badge { font-family: 'Space Mono', monospace; font-size: .68rem; letter-spacing: .1em; background: var(--blue); color: #fff; padding: .5rem 1.2rem; border-radius: 99px; cursor: none; border: none; transition: background .2s, transform .15s; white-space: nowrap; }
.nav-badge:hover { background: var(--blue-mid); transform: scale(1.05); }

/* LIVE CLOCK */
.nav-clock {
  font-family: 'Space Mono', monospace; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; color: var(--text);
  background: var(--blue-pale); border: 1.5px solid var(--border);
  padding: .45rem 1.1rem; border-radius: 99px;
  display: flex; align-items: center; gap: .5rem;
  white-space: nowrap; transition: background .4s ease, color .4s ease, border-color .4s ease;
  line-height: 1;
}
.nav-clock-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
  animation: pulseDot 2s ease-in-out infinite;
  flex-shrink: 0; transition: background .4s ease;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.7); }
}

/* RAIN TOGGLE PILL */
.rain-toggle-pill {
  font-family: 'Space Mono', monospace; font-size: .62rem; font-weight: 700;
  letter-spacing: .06em; border: 1.5px solid var(--border);
  background: var(--blue-pale); color: var(--text);
  padding: .42rem .9rem; border-radius: 99px;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background .25s, border-color .25s, transform .15s, color .25s;
  line-height: 1;
}
.rain-toggle-pill:hover { transform: scale(1.05); }
.rain-toggle-pill.raining {
  background: rgba(96,165,250,.2);
  border-color: rgba(96,165,250,.55);
}
.theme-toggle {
  width: 46px; height: 26px; border-radius: 99px;
  background: var(--blue-pale); border: 1.5px solid var(--border);
  cursor: none; position: relative; flex-shrink: 0;
  transition: background .4s ease, border-color .4s ease;
  outline: none; padding: 0;
}
.theme-toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--blue); display: flex; align-items: center; justify-content: center;
  font-size: .68rem; line-height: 1;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), background .4s ease;
}
[data-theme="dark"] .theme-toggle-thumb { transform: translateX(20px); }
[data-theme="dark"] .theme-toggle { background: var(--blue-pale); }
[data-theme="time"]  .theme-toggle-thumb { transform: translateX(10px); }
[data-theme="time"]  .theme-toggle { background: linear-gradient(135deg, var(--blue-pale), rgba(253,224,71,.18)); }

/* =====================================================
   TIME THEME — SKY SCENE
   ===================================================== */

/* Night / Evening time: page goes dark */
[data-theme="time"][data-sky="night"],
[data-theme="time"][data-sky="latenight"] {
  --bg: #070d1a; --bg2: #0d1525;
  --dark: #e6edf3; --text: #e6edf3; --muted: #7d8fa8;
  --card: #0d1525; --border: rgba(60,120,200,0.18);
  --nav-bg: rgba(7,13,26,0.94); --blue-pale: #0a1e3a;
  --blue: #3b82f6; --blue-mid: #2563eb; --white: #070d1a;
}
[data-theme="time"][data-sky="evening"] {
  --bg: #120c2a; --bg2: #1a1040;
  --dark: #e6edf3; --text: #e6edf3; --muted: #9ca3af;
  --card: #1a1040; --border: rgba(139,92,246,0.2);
  --nav-bg: rgba(18,12,42,0.94); --blue-pale: #1a1040;
  --blue: #a78bfa; --blue-mid: #7c3aed; --white: #120c2a;
}
[data-theme="time"][data-sky="dawn"] {
  --bg: #1a0e28; --bg2: #231240;
  --dark: #fde68a; --text: #fde8c8; --muted: #c4a882;
  --card: #231240; --border: rgba(249,115,22,0.2);
  --nav-bg: rgba(26,14,40,0.94); --blue-pale: #251030;
  --blue: #fb923c; --blue-mid: #ea580c; --white: #1a0e28;
}

/* Day: stays light blue */
[data-theme="time"][data-sky="day"] {
  --bg: #f0f8ff; --bg2: #e3f2ff;
  --dark: #0d1b2a; --text: #0d1b2a; --muted: #6a8fa8;
  --card: #ffffff; --border: rgba(58,180,242,0.18);
  --nav-bg: rgba(240,248,255,0.9);
  --blue: #3ab4f2; --blue-mid: #1a8fd1;
}
/* Morning: hangat keemasan */
[data-theme="time"][data-sky="morning"] {
  --bg: #fffbeb; --bg2: #fef3c7;
  --dark: #1c1008; --text: #1c1008; --muted: #92723a;
  --card: #fffdf5; --border: rgba(251,191,36,0.22);
  --nav-bg: rgba(255,251,235,0.9);
  --blue: #f59e0b; --blue-mid: #d97706;
}
/* Afternoon: oranye kemerahan */
[data-theme="time"][data-sky="afternoon"] {
  --bg: #fff7ed; --bg2: #ffedd5;
  --dark: #1a0a00; --text: #1a0a00; --muted: #9a5a2a;
  --card: #fff9f5; --border: rgba(249,115,22,0.22);
  --nav-bg: rgba(255,247,237,0.9);
  --blue: #f97316; --blue-mid: #ea580c;
}

/* Hide blobs + confetti when time theme is active */
[data-theme="time"] .blob,
[data-theme="time"] .confetti { opacity: 0; pointer-events: none; }

/* SKY SCENE CONTAINER */
.sky-scene {
  position: absolute; inset: 0;
  z-index: 1; overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease;
}
[data-theme="time"] .sky-scene { opacity: 1; }

/* Sky gradient background */
.sky-bg {
  position: absolute; inset: 0;
  transition: background 4s ease;
}
.sky-dawn    { background: linear-gradient(180deg, #0f0a20 0%, #4a1060 22%, #c2410c 48%, #f97316 65%, #fbbf24 80%, #fde68a 92%, #fff7ed 100%); }
.sky-morning { background: linear-gradient(180deg, #1e3a8a 0%, #2563eb 18%, #60a5fa 38%, #fbbf24 62%, #f97316 75%, #fde68a 88%, #fff7ed 100%); }
.sky-day     { background: linear-gradient(180deg, #1d4ed8 0%, #3b82f6 25%, #60a5fa 52%, #93c5fd 72%, #bae6fd 88%, #e0f2fe 100%); }
.sky-afternoon { background: linear-gradient(180deg, #1e3a8a 0%, #2563eb 18%, #f97316 42%, #fb923c 58%, #fbbf24 72%, #fde68a 85%, #fff7ed 100%); }
.sky-evening { background: linear-gradient(180deg, #07040f 0%, #2e1065 18%, #6d28d9 38%, #c2410c 60%, #fb923c 78%, #fde68a 92%, #fff7ed 100%); }
.sky-night   { background: linear-gradient(180deg, #020209 0%, #050d1f 35%, #070d1a 65%, #0d1525 100%); }
.sky-latenight { background: linear-gradient(180deg, #000005 0%, #030712 40%, #060d1f 70%, #0a1525 100%); }

/* Horizon glow for dawn/evening */
.sky-horizon {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 35%; pointer-events: none;
  transition: opacity 3s ease;
  opacity: 0;
}
.sky-dawn .sky-horizon, .sky-evening .sky-horizon, .sky-afternoon .sky-horizon { opacity: 1; }

/* ===== SUN ===== */
.sun-el {
  position: absolute;
  width: 90px; height: 90px;
  transform: translate(-50%, -50%);
  transition: left 90s linear, top 90s ease;
}
.sun-rays-wrap {
  position: absolute; inset: 0;
  animation: spinSlow 18s linear infinite;
}
.sun-ray {
  position: absolute; top: 50%; left: 50%;
  width: 3px; height: 18px;
  margin-left: -1.5px; margin-top: calc(-100% - 24px);
  background: linear-gradient(180deg, rgba(253,224,71,.95), transparent);
  border-radius: 2px;
  transform-origin: 1.5px calc(100% + 24px);
}
.sun-core {
  position: absolute; inset: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fef9c3, #fbbf24 45%, #f59e0b 80%);
  box-shadow:
    0 0 0 8px rgba(251,191,36,.12),
    0 0 28px 14px rgba(251,191,36,.5),
    0 0 70px 35px rgba(253,224,71,.3),
    0 0 140px 70px rgba(253,224,71,.12);
  z-index: 2;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* ===== MOON ===== */
.moon-el {
  position: absolute;
  width: 72px; height: 72px;
  transform: translate(-50%, -50%);
  transition: left 90s linear, top 90s ease;
}
.moon-glow {
  position: absolute; inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(148,163,184,.12) 0%, rgba(148,163,184,.04) 50%, transparent 70%);
}
.moon-body {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #f8fafc, #e2e8f0 42%, #cbd5e1 68%, #94a3b8 100%);
  box-shadow:
    inset -10px -8px 22px rgba(0,0,0,.25),
    0 0 22px 8px rgba(148,163,184,.3),
    0 0 55px 22px rgba(148,163,184,.1);
}
.moon-crater {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,.16), rgba(0,0,0,.05));
}

/* ===== CLOUDS ===== */
.cloud-el {
  position: absolute; pointer-events: none;
  animation: cloudDrift linear infinite;
}
.cloud-part {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.82);
  filter: blur(3px);
}
/* Tinted clouds per sky */
[data-sky="dawn"]      .cloud-part { background: rgba(253,186,116,.45); filter: blur(4px); }
[data-sky="morning"]   .cloud-part { background: rgba(253,224,71,.55);  filter: blur(3px); }
[data-sky="afternoon"] .cloud-part { background: rgba(251,146,60,.6);   filter: blur(3px); }
[data-sky="evening"]   .cloud-part { background: rgba(251,146,60,.38); filter: blur(4px); }
[data-sky="night"]     .cloud-part { background: rgba(20,35,65,.28); filter: blur(6px); }
[data-sky="latenight"] .cloud-part { background: rgba(15,25,50,.22); filter: blur(6px); }
[data-rain="true"]     .cloud-part { background: rgba(120,140,165,.72); filter: blur(4px); }
@keyframes cloudDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(110vw); }
}

/* ===== STARS ===== */
.star-el {
  position: absolute; border-radius: 50%;
  background: #fff;
  animation: twinkleStar ease-in-out infinite alternate;
}
@keyframes twinkleStar {
  from { opacity: .15; transform: scale(.7); }
  to   { opacity: 1;   transform: scale(1.3); }
}

/* ===== SHOOTING STAR ===== */
.shooting-star {
  position: absolute;
  width: 120px; height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.95), transparent);
  animation: shootStar 1.4s ease-out forwards;
  opacity: 0;
}
@keyframes shootStar {
  0%   { opacity: 0; transform: translateX(0) translateY(0); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(280px) translateY(120px); }
}

/* ===== RAIN ===== */
.rain-drop {
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent 0%, rgba(147,197,253,.65) 100%);
  animation: rainFall linear infinite;
}
[data-sky="evening"] .rain-drop,
[data-sky="night"]   .rain-drop { background: linear-gradient(180deg, transparent, rgba(100,130,170,.55)); }
@keyframes rainFall {
  from { transform: translateY(-40px) skewX(-8deg); }
  to   { transform: translateY(110vh)  skewX(-8deg); }
}
.nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: none; background: none; border: none; padding: 4px; }
.nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--dark); border-radius: 2px; transition: transform .3s, opacity .3s; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer */
.nav-drawer { display: none; position: fixed; top: 62px; left: 0; right: 0; background: var(--nav-bg); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); flex-direction: column; padding: 1.5rem 2rem; gap: 0; z-index: 99; transition: background .4s ease; }
.nav-drawer.open { display: flex; }
.nav-drawer a { font-family: 'Space Mono', monospace; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 1rem 0; border-bottom: 1px solid var(--border); transition: color .2s; }
.nav-drawer a:last-child { border-bottom: none; }
.nav-drawer a:hover { color: var(--blue); }

/* HERO */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 8rem 2.8rem 4rem; position: relative; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35; pointer-events: none; animation: blobFloat 8s ease-in-out infinite alternate; }
.blob-1 { width: 520px; height: 520px; background: var(--blue-light); top: -80px; right: -100px; }
.blob-2 { width: 340px; height: 340px; background: var(--accent); bottom: 80px; left: -80px; animation-delay: 2s; }
.blob-3 { width: 220px; height: 220px; background: var(--accent2); top: 40%; left: 40%; animation-delay: 4s; opacity: .2; }

.hero-inner { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; max-width: 1200px; }

.hero-tag { display: inline-flex; align-items: center; gap: .6rem; font-family: 'Space Mono', monospace; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-mid); background: var(--blue-pale); padding: .45rem 1rem; border-radius: 99px; border: 1px solid var(--blue-light); margin-bottom: 1.5rem; }
.hero-tag::before { content: '✦'; font-size: .5rem; }

.hero-headline { font-family: 'Bebas Neue', sans-serif; font-size: clamp(3.5rem,8vw,8rem); line-height: .92; letter-spacing: .02em; opacity: 0; transform: translateY(40px); animation: fadeUp .9s cubic-bezier(.16,1,.3,1) .15s forwards; }
.hero-headline .blue { color: var(--blue); }
.hero-headline .outline { -webkit-text-stroke: 2px var(--blue); color: transparent; }

.hero-right { display: flex; flex-direction: column; gap: 1.8rem; opacity: 0; animation: fadeUp .9s cubic-bezier(.16,1,.3,1) .35s forwards; }
.hero-avatar { width: 110px; height: 110px; border-radius: 50%; background: linear-gradient(135deg,var(--blue-light),var(--blue)); border: 3px solid var(--white); box-shadow: 0 8px 32px rgba(58,180,242,.22); display: flex; align-items: center; justify-content: center; font-size: 2.8rem; }
.hero-desc { font-size: 1rem; line-height: 1.7; color: var(--muted); max-width: 360px; }
.hero-pills { display: flex; flex-wrap: wrap; gap: .6rem; }
.pill { font-family: 'Space Mono', monospace; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; padding: .4rem 1rem; border-radius: 99px; border: 1.5px solid var(--border); color: var(--blue-mid); background: var(--white); transition: background .2s, border-color .2s; cursor: none; }
.pill:hover { background: var(--blue-pale); border-color: var(--blue); }
.hero-btns { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

/* BUTTONS */
.btn-blue { font-family: 'Space Mono', monospace; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--blue); color: var(--white); border: none; padding: .9rem 2rem; border-radius: 99px; cursor: none; transition: background .2s, transform .15s; }
.btn-blue:hover { background: var(--blue-mid); transform: translateY(-2px); }
.btn-outline { font-family: 'Space Mono', monospace; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: transparent; color: var(--blue-mid); border: 1.5px solid var(--blue-light); padding: .9rem 2rem; border-radius: 99px; cursor: none; text-decoration: none; display: inline-block; transition: border-color .2s, background .2s; }
.btn-outline:hover { border-color: var(--blue); background: var(--blue-pale); }

/* WAVE */
.wave-divider { width: 100%; overflow: hidden; line-height: 0; }
.wave-divider svg { display: block; }

/* SECTIONS */
.section { padding: 5rem 2.8rem; position: relative; }
.section-alt { background: var(--bg2); }
.section-label { display: inline-flex; align-items: center; gap: .7rem; font-family: 'Space Mono', monospace; font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-mid); margin-bottom: .8rem; }
.section-label::before { content: ''; width: 24px; height: 2px; background: var(--blue); display: inline-block; border-radius: 2px; }
.section-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.5rem,5.5vw,5rem); line-height: .95; letter-spacing: .02em; margin-bottom: .5rem; }
.section-title .blue { color: var(--blue); }
.section-title .outline { -webkit-text-stroke: 1.5px var(--dark); color: transparent; }
.section-sub { font-size: .9rem; color: var(--muted); max-width: 420px; line-height: 1.6; margin-bottom: 2.5rem; }

/* PROJECT GRID */
.project-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; }
.project-card { background: var(--card); border-radius: 20px; overflow: hidden; border: 1.5px solid var(--border); cursor: none; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.project-card:hover { transform: translateY(-8px); box-shadow: 0 20px 48px rgba(58,180,242,.14); }
.project-thumb { width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; position: relative; overflow: hidden; }
.project-card:nth-child(1) .project-thumb { background: linear-gradient(135deg,#cef3ff,#83d9f7); }
.project-card:nth-child(2) .project-thumb { background: linear-gradient(135deg,#fff4ba,#ffe066); }
.project-card:nth-child(3) .project-thumb { background: linear-gradient(135deg,#ffd6e7,#ffaecf); }
.project-card:nth-child(4) .project-thumb { background: linear-gradient(135deg,#d0f5d0,#7ee87e); }
.project-thumb-shine { position: absolute; inset: 0; background: linear-gradient(135deg,rgba(255,255,255,.4) 0%,transparent 60%); }
.project-body { padding: 1.3rem; }
.project-tag { font-family: 'Space Mono', monospace; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-mid); margin-bottom: .45rem; }
/* NEW FONT — Fraunces */
.project-name { font-family: 'Fraunces', serif; font-weight: 700; font-style: italic; font-size: 1.1rem; line-height: 1.25; margin-bottom: .5rem; color: var(--text); }
.project-desc { font-family: 'DM Sans', sans-serif; font-size: .8rem; color: var(--muted); line-height: 1.6; margin-bottom: 1rem; }
.project-link { font-family: 'Space Mono', monospace; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; transition: gap .2s; }
.project-link:hover { gap: .8rem; }

/* Single CTA button below project grid */
.project-cta { display: flex; justify-content: center; margin-top: 2.5rem; }
.btn-project-all {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: .9rem; letter-spacing: .04em;
  background: var(--blue); color: var(--white);
  border: none; border-radius: 99px; padding: 1rem 2.8rem;
  cursor: none; text-decoration: none; display: inline-flex; align-items: center; gap: .6rem;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 6px 24px rgba(58,180,242,.28);
}
.btn-project-all:hover { background: var(--blue-mid); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(58,180,242,.38); }

/* PRODUCT GRID */
.product-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; }
.product-card { background: var(--card); border-radius: 20px; overflow: hidden; border: 1.5px solid var(--border); cursor: none; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.product-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 20px 48px rgba(58,180,242,.13); }
.product-thumb { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 3rem; position: relative; overflow: hidden; }
.product-card:nth-child(1) .product-thumb { background: linear-gradient(135deg,#e0f7fa,#80deea); }
.product-card:nth-child(2) .product-thumb { background: linear-gradient(135deg,#fce4ec,#f48fb1); }
.product-card:nth-child(3) .product-thumb { background: linear-gradient(135deg,#f3e5f5,#ce93d8); }
.product-card:nth-child(4) .product-thumb { background: linear-gradient(135deg,#fff9c4,#fff176); }
.product-thumb-shine { position: absolute; inset: 0; background: linear-gradient(135deg,rgba(255,255,255,.4) 0%,transparent 60%); }
.product-badge { position: absolute; top: .8rem; right: .8rem; font-family: 'Space Mono', monospace; font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; background: var(--white); color: var(--blue-mid); padding: .25rem .6rem; border-radius: 99px; border: 1px solid var(--border); }
.product-body { padding: 1.3rem; }
/* NEW FONT — Fraunces */
.product-name { font-family: 'Fraunces', serif; font-weight: 700; font-style: italic; font-size: 1.1rem; line-height: 1.25; margin-bottom: .45rem; color: var(--text); }
.product-desc { font-family: 'DM Sans', sans-serif; font-size: .8rem; color: var(--muted); line-height: 1.6; margin-bottom: 1rem; }
.product-price { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: var(--blue); letter-spacing: .04em; line-height: 1; }
.product-price small { font-family: 'Space Mono', monospace; font-size: .55rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; display: block; margin-top: .1rem; }
.product-btn { display: block; width: 100%; margin-top: 1rem; background: var(--blue-pale); color: var(--blue-mid); border: none; border-radius: 99px; font-family: 'Space Mono', monospace; font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .75rem; cursor: none; transition: background .2s, color .2s; text-decoration: none; text-align: center; }
.product-btn:hover { background: var(--blue); color: var(--white); }

/* SOCIAL */
.socials-grid { display: flex; gap: 1.8rem; justify-content: center; flex-wrap: wrap; }
.social-card {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 28px; padding: 2.6rem 1.8rem 2rem;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  cursor: none; transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .3s;
  width: 210px; flex-shrink: 0; position: relative; overflow: hidden;
}
.social-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  opacity: 0; transition: opacity .3s; border-radius: 28px 28px 0 0;
}
.social-card.ig::before { background: linear-gradient(90deg,#f09433,#dc2743,#bc1888); }
.social-card.x::before  { background: #000; }
.social-card.tt::before { background: linear-gradient(90deg,#ff004f,#010101,#69c9d0); }
.social-card:hover::before { opacity: 1; }
.social-card:hover { transform: translateY(-10px); }
.social-card.ig:hover { border-color: #e1306c; box-shadow: 0 24px 56px rgba(225,48,108,.15); }
.social-card.x:hover  { border-color: #333;    box-shadow: 0 24px 56px rgba(0,0,0,.12); }
.social-card.tt:hover { border-color: #69c9d0; box-shadow: 0 24px 56px rgba(105,201,208,.15); }

.social-logo-wrap {
  width: 72px; height: 72px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s, box-shadow .3s;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.social-card:hover .social-logo-wrap { transform: scale(1.1) rotate(-4deg); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.social-card.ig .social-logo-wrap { background: linear-gradient(135deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888); }
.social-card.x  .social-logo-wrap { background: #000; }
.social-card.tt .social-logo-wrap { background: #010101; }
.social-logo-wrap svg { display: block; }

.social-name {
  font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: 1.05rem; text-align: center; color: var(--text); letter-spacing: -.01em;
}
.social-handle {
  font-family: 'Nunito', sans-serif; font-weight: 700;
  font-size: .85rem; color: var(--muted); text-align: center;
  background: var(--bg2); padding: .22rem .9rem; border-radius: 99px;
}

.social-btn {
  font-family: 'Nunito', sans-serif; font-size: .82rem; font-weight: 800;
  letter-spacing: .02em;
  border: none; border-radius: 99px; padding: .55rem 1.6rem; cursor: none;
  transition: background .2s, color .2s, transform .15s, box-shadow .2s;
  text-decoration: none; display: inline-block; margin-top: .2rem;
}
.social-btn:hover { transform: scale(1.06); }
.social-card.ig .social-btn { background: rgba(225,48,108,.09); color: #c01a55; }
.social-card.ig .social-btn:hover { background: #e1306c; color: white; box-shadow: 0 6px 18px rgba(225,48,108,.35); }
.social-card.x  .social-btn { background: rgba(0,0,0,.07); color: #222; }
.social-card.x  .social-btn:hover { background: #000; color: white; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.social-card.tt .social-btn { background: rgba(105,201,208,.12); color: #0a7a80; }
.social-card.tt .social-btn:hover { background: #69c9d0; color: #000; box-shadow: 0 6px 18px rgba(105,201,208,.35); }

/* MARQUEE */
.fun-band { background: var(--blue); padding: 1.1rem 0; overflow: hidden; }
.fun-track { display: flex; animation: marquee 16s linear infinite; white-space: nowrap; }
.fun-item { font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; letter-spacing: .14em; padding: 0 2rem; color: rgba(255,255,255,.75); display: flex; align-items: center; gap: 2rem; }
.fun-item .star { color: var(--accent); font-size: .6rem; }

/* FOOTER */
footer { background: var(--dark); color: var(--white); padding: 1.8rem 2.8rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: .06em; }
.footer-logo span { color: var(--blue); }
.footer-copy { font-family: 'Space Mono', monospace; font-size: .58rem; color: rgba(255,255,255,.5); text-align: center; transition: color .4s ease; }
.footer-heart { font-family: 'Space Mono', monospace; font-size: .58rem; color: rgba(255,255,255,.5); transition: color .4s ease; }
.footer-heart span { color: var(--accent2); }
[data-theme="dark"] .footer-copy,
[data-theme="dark"] .footer-heart { color: var(--blue); }

/* CONFETTI */
.confetti { position: absolute; width: 10px; height: 10px; border-radius: 2px; opacity: .18; pointer-events: none; animation: confettiFall 6s ease-in-out infinite alternate; }

/* KEYFRAMES */
@keyframes fadeUp    { to { opacity: 1; transform: translateY(0); } }
@keyframes blobFloat { from { transform: translate(0,0) scale(1); } to { transform: translate(20px,30px) scale(1.06); } }
@keyframes marquee   { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes confettiFall { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-20px) rotate(45deg); } }

/* SCROLL REVEAL */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .10s; }
.reveal-delay-2 { transition-delay: .18s; }
.reveal-delay-3 { transition-delay: .26s; }
.reveal-delay-4 { transition-delay: .34s; }

/* =====================================================
   TABLET ≤ 900px
   ===================================================== */
@media (max-width: 900px) {
  nav { padding: 1rem 1.6rem; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-badge { font-size: .6rem; padding: .45rem 1rem; }
  .nav-clock { font-size: .6rem; padding: .4rem .9rem; }

  .hero { padding: 7rem 1.6rem 3rem; }
  .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-right { align-items: flex-start; }
  .hero-avatar { width: 90px; height: 90px; font-size: 2.2rem; }
  .hero-desc { max-width: 100%; }

  .section { padding: 4rem 1.6rem; }
  .section-sub { max-width: 100%; }

  .project-grid { grid-template-columns: repeat(2,1fr); gap: 1rem; }
  .product-grid  { grid-template-columns: repeat(2,1fr); gap: 1rem; }

  .social-card { max-width: 160px; padding: 1.4rem 1.2rem; }
  footer { flex-direction: column; align-items: center; text-align: center; padding: 1.6rem; }
}

/* =====================================================
   MOBILE ≤ 540px
   ===================================================== */
@media (max-width: 540px) {
  body { cursor: auto; }
  .cursor-star { display: none; }

  nav { padding: .9rem 1.2rem; }
  .nav-logo { font-size: 1.4rem; }
  .nav-badge { display: none; }
  .nav-clock { display: none; }
  .nav-drawer { top: 56px; }

  .hero { padding: 5.5rem 1.2rem 2.5rem; }
  .hero-tag { font-size: .58rem; padding: .38rem .8rem; }
  .hero-headline { font-size: clamp(3rem,13vw,4.5rem); }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .btn-blue, .btn-outline { text-align: center; }

  .blob-1 { width: 260px; height: 260px; }
  .blob-2 { width: 180px; height: 180px; }
  .blob-3 { display: none; }

  .section { padding: 3rem 1.2rem; }

  .project-grid { grid-template-columns: 1fr; gap: .9rem; }
  .project-thumb { aspect-ratio: 16/9; font-size: 3.5rem; }

  .product-grid  { grid-template-columns: 1fr; gap: .9rem; }
  .product-thumb { aspect-ratio: 4/3; font-size: 3.5rem; }

  .socials-grid { gap: 1rem; }
  .social-card  { width: 160px; padding: 1.8rem 1.2rem; }

  footer { padding: 1.4rem 1.2rem; }
}

/* =====================================================
   SMALL ≤ 360px
   ===================================================== */
@media (max-width: 360px) {
  .hero-headline { font-size: clamp(2.6rem,12vw,3.5rem); }
  .pill { font-size: .58rem; padding: .35rem .8rem; }
  .socials-grid  { flex-direction: column; align-items: center; }
  .social-card   { width: 100%; max-width: 300px; flex-direction: row; justify-content: flex-start; gap: 1.2rem; padding: 1.2rem 1.4rem; }
}