/* =========================================================
   ZelaVerse — Kawaii Neon Theme
   Palette pulled straight from the logo + a hit of purple neon
   ========================================================= */
:root{
  --blush-pink:#ff4fb6;
  --bubblegum:#ffa3d8;
  --hot-pink:#ff2e9c;
  --violet:#a855f7;
  --neon-purple:#c026ff;
  --deep-purple:#6b2fb3;
  --sky-pop:#7cc7ff;
  --lilac:#d9b8ff;
  --deep-space:#140029;
  --space-mid:#1d033a;
  --space-hi:#2a0956;
  --cream-ink:#fff7fb;
  --cream-dim:#e5d4f5;
  --cream-dimmer:#b69dd1;

  --grad-logo:linear-gradient(90deg,var(--hot-pink) 0%, var(--blush-pink) 22%, var(--neon-purple) 55%, var(--violet) 75%, var(--sky-pop) 100%);
  --grad-button:linear-gradient(135deg,var(--blush-pink),var(--neon-purple) 55%, var(--violet));
  --grad-card:linear-gradient(135deg, rgba(255,79,182,.08), rgba(192,38,255,.10) 55%, rgba(124,199,255,.06));

  --glow-pink:0 0 24px rgba(255,79,182,.55);
  --glow-purple:0 0 28px rgba(192,38,255,.55);
  --glow-soft:0 0 40px rgba(168,85,247,.35);

  --radius:20px;
  --radius-lg:28px;
  --ease:cubic-bezier(.2,.9,.3,1.2);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  /* theme-aware surfaces (dark defaults) */
  --bg-base:var(--deep-space);
  --bg-mid:var(--space-mid);
  --bg-hi:var(--space-hi);
  --text-strong:var(--cream-ink);
  --text-body:var(--cream-dim);
  --text-muted:var(--cream-dimmer);
  --card-bg:var(--grad-card);
  --card-border:rgba(192,38,255,.25);
  --surface-soft:rgba(255,255,255,.03);
  --nav-bg:linear-gradient(180deg, rgba(20,0,41,.82), rgba(20,0,41,.35));
  --dropdown-bg:linear-gradient(180deg, rgba(42,9,86,.96), rgba(29,3,58,.98));
  --input-bg:rgba(20,0,41,.6);
  --input-bg-focus:rgba(20,0,41,.8);
  --logo-blend:normal;
  --starfield-opacity:.7;
}

/* =========================================================
   LIGHT MODE — warm kawaii pastel
   ========================================================= */
html[data-theme="light"]{
  --deep-space:#fffbfe;
  --space-mid:#fff8fa;
  --space-hi:#fff5fb;
  --cream-ink:#2a0a4a;
  --cream-dim:#4a2c6e;
  --cream-dimmer:#7a5b9b;
  --lilac:#8b5cf6;

  --bg-base:#fffbfe;
  --bg-mid:#fff8fa;
  --bg-hi:#fff5fb;
  --text-strong:#2a0a4a;
  --text-body:#4a2c6e;
  --text-muted:#7a5b9b;
  --card-bg:linear-gradient(135deg, rgba(255,79,182,.08), rgba(192,38,255,.06) 55%, rgba(124,199,255,.05));
  --card-border:rgba(192,38,255,.25);
  --surface-soft:rgba(255,255,255,.55);
  --nav-bg:linear-gradient(180deg, rgba(255,251,254,.92), rgba(255,251,254,.6));
  --dropdown-bg:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,251,254,.98));
  --input-bg:rgba(255,255,255,.75);
  --input-bg-focus:#fff;

  --glow-pink:0 0 24px rgba(255,79,182,.35);
  --glow-purple:0 0 24px rgba(192,38,255,.32);
  --starfield-opacity:.15;
}
html[data-theme="light"] body{
  background:
    radial-gradient(ellipse 70% 55% at 15% 0%, rgba(255,79,182,.06), transparent 60%),
    radial-gradient(ellipse 70% 55% at 90% 20%, rgba(192,38,255,.05), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(124,199,255,.05), transparent 60%),
    linear-gradient(180deg, #fffbfe, #fff8fa 40%, #fff5fb);
  background-attachment:fixed;
}
html[data-theme="light"] .pop-pink{filter:drop-shadow(0 0 16px rgba(255,79,182,.35))}
html[data-theme="light"] .pop-purple{filter:drop-shadow(0 0 16px rgba(192,38,255,.35))}
html[data-theme="light"] .pop-sky{filter:drop-shadow(0 0 16px rgba(124,199,255,.45))}
html[data-theme="light"] h2.section-title{filter:drop-shadow(0 0 18px rgba(192,38,255,.2))}
html[data-theme="light"] .feature,
html[data-theme="light"] .step{
  background:rgba(255,255,255,.55);
  border-color:rgba(192,38,255,.2);
  box-shadow:0 4px 20px rgba(192,38,255,.08);
}
html[data-theme="light"] .feature:hover{background:rgba(255,255,255,.85)}
html[data-theme="light"] .card{
  background:rgba(255,255,255,.55);
  border-color:rgba(192,38,255,.2);
  box-shadow:0 8px 28px rgba(192,38,255,.1);
}
html[data-theme="light"] .card:hover{
  background:rgba(255,255,255,.85);
  box-shadow:0 20px 50px rgba(192,38,255,.2);
}
html[data-theme="light"] .project-card .thumb{
  background:linear-gradient(135deg, rgba(255,79,182,.1), rgba(124,199,255,.08));
  border-color:rgba(192,38,255,.18);
}
html[data-theme="light"] .project-card .badge{
  background:rgba(255,255,255,.92);
  border-color:rgba(192,38,255,.3);
  color:var(--neon-purple);
}
html[data-theme="light"] .form input,
html[data-theme="light"] .form textarea{
  background:rgba(255,255,255,.85);
  border-color:rgba(192,38,255,.28);
  color:var(--text-strong);
}
html[data-theme="light"] .form input:focus,
html[data-theme="light"] .form textarea:focus{background:#fff}
html[data-theme="light"] .nav{border-bottom-color:rgba(192,38,255,.15)}
html[data-theme="light"] .dropdown{
  border-color:rgba(192,38,255,.22);
  box-shadow:0 20px 60px rgba(192,38,255,.15);
}
html[data-theme="light"] .dd-item:hover{background:rgba(192,38,255,.1)}
html[data-theme="light"] .btn-ghost{
  background:rgba(255,255,255,.5);
  border-color:var(--neon-purple);
  color:var(--cream-ink);
}
html[data-theme="light"] .btn-ghost:hover{background:rgba(192,38,255,.15)}
html[data-theme="light"] .zv-loader{
  background:radial-gradient(ellipse at center, #fff8fa, #fffbfe);
}
html[data-theme="light"] .final-cta{
  background:radial-gradient(ellipse at center, rgba(192,38,255,.04), transparent 70%);
}
html[data-theme="light"] .kicker{
  background:rgba(255,255,255,.7);
  border-color:rgba(192,38,255,.3);
  color:var(--deep-purple);
}
html[data-theme="light"] .tli::before{border-color:#fff}
html[data-theme="light"] .cmd{background:rgba(255,255,255,.55);border-color:rgba(192,38,255,.2)}
html[data-theme="light"] .cmd:hover{background:rgba(255,255,255,.85)}
html[data-theme="light"] .footer{background:linear-gradient(180deg, transparent, rgba(255,248,250,.5));border-top-color:rgba(192,38,255,.12)}

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{
  font-family:'Quicksand', system-ui, -apple-system, sans-serif;
  color:var(--cream-ink);
  line-height:1.6;
  min-height:100vh;
  position:relative;
  background:
    radial-gradient(ellipse 70% 55% at 15% 0%, rgba(255,79,182,.32), transparent 60%),
    radial-gradient(ellipse 70% 55% at 90% 20%, rgba(192,38,255,.32), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(124,199,255,.18), transparent 60%),
    linear-gradient(180deg, var(--deep-space), var(--space-mid) 40%, var(--space-hi));
  background-attachment:fixed;
}

/* ---------- starfield + grain ---------- */
body::before{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 14%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 78% 12%, var(--bubblegum), transparent),
    radial-gradient(1.8px 1.8px at 33% 72%, var(--lilac), transparent),
    radial-gradient(1px 1px at 62% 48%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 88% 82%, var(--sky-pop), transparent),
    radial-gradient(1px 1px at 22% 40%, var(--bubblegum), transparent),
    radial-gradient(1.8px 1.8px at 50% 6%, #fff, transparent),
    radial-gradient(1px 1px at 42% 92%, var(--lilac), transparent);
  opacity:var(--starfield-opacity);
  animation:twinkle 4.5s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:calc(var(--starfield-opacity) * .55)}to{opacity:var(--starfield-opacity)}}

body::after{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:3px 3px;
}

main, header, footer{position:relative;z-index:1}

/* ---------- floating sparkles (decorative, JS-free) ---------- */
.sparkle-layer{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.sparkle{position:absolute;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%, var(--blush-pink) 40%, transparent 70%);
  filter:blur(.3px);
  animation:drift linear infinite;
  opacity:.6;
}
.sparkle:nth-child(2){background:radial-gradient(circle,#fff,var(--neon-purple),transparent 70%)}
.sparkle:nth-child(3){background:radial-gradient(circle,#fff,var(--sky-pop),transparent 70%)}
@keyframes drift{
  0%{transform:translateY(110vh) scale(.6) rotate(0deg);opacity:0}
  10%{opacity:.7}
  90%{opacity:.7}
  100%{transform:translateY(-10vh) scale(1.1) rotate(360deg);opacity:0}
}

/* ---------- loading screen ---------- */
.zv-loader{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;
  background:radial-gradient(ellipse at center, var(--space-mid), var(--deep-space));
  transition:opacity .7s ease, visibility .7s;
}
.zv-loader.done{opacity:0;visibility:hidden;pointer-events:none}
.zv-loader .ring{
  width:96px;height:96px;border-radius:50%;
  background:conic-gradient(from 0deg, var(--hot-pink), var(--neon-purple), var(--sky-pop), var(--hot-pink));
  animation:spin 1.4s linear infinite;
  mask:radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  filter:drop-shadow(0 0 18px rgba(192,38,255,.6));
}
.zv-loader .butterfly{
  position:absolute;width:56px;height:56px;
  animation:flutter 1.4s ease-in-out infinite;
}
.zv-loader .label{
  font-family:'Bagel Fat One',cursive;letter-spacing:2px;font-size:1.1rem;
  background:var(--grad-logo);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:pulseText 1.2s ease-in-out infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flutter{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.08)}}
@keyframes pulseText{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(16px,5vw,48px);
  padding-top:max(16px, env(safe-area-inset-top));
  backdrop-filter:blur(18px);
  background:linear-gradient(180deg, rgba(20,0,41,.82), rgba(20,0,41,.35));
  border-bottom:1px solid rgba(192,38,255,.18);
}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.nav-brand img{width:44px;height:44px;filter:drop-shadow(0 0 10px rgba(192,38,255,.5));
  animation:bob 4s ease-in-out infinite}
.nav-brand .name{
  font-family:'Bagel Fat One',cursive;font-size:1.4rem;letter-spacing:1px;
  background:var(--grad-logo);-webkit-background-clip:text;background-clip:text;color:transparent;
}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}

.nav-links{display:flex;align-items:center;gap:6px;list-style:none}
.nav-links > li{position:relative}
.nav-links a, .nav-links button.dd-trigger{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 14px;border-radius:12px;
  color:var(--cream-dim);text-decoration:none;font-weight:600;font-size:.95rem;
  background:transparent;border:none;cursor:pointer;font-family:inherit;
  transition:color .2s, background .2s, transform .2s;
}
.nav-links a:hover, .nav-links button.dd-trigger:hover, .nav-links button.dd-trigger[aria-expanded="true"]{
  color:var(--cream-ink);
  background:rgba(192,38,255,.12);
  text-shadow:0 0 12px rgba(192,38,255,.6);
}
.nav-links .caret{display:inline-block;transition:transform .3s var(--ease)}
.nav-links button.dd-trigger[aria-expanded="true"] .caret{transform:rotate(180deg)}

.nav-cta{
  margin-left:8px;padding:10px 18px;border-radius:999px;
  background:var(--grad-button);color:var(--deep-space);font-weight:800;
  text-decoration:none;box-shadow:var(--glow-purple);
  transition:transform .2s var(--ease), box-shadow .2s;
}
.nav-cta:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 0 36px rgba(192,38,255,.75)}

/* dropdowns */
.dropdown{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-8px);
  min-width:340px;padding:12px;
  background:linear-gradient(180deg, rgba(42,9,86,.96), rgba(29,3,58,.98));
  border:1px solid rgba(192,38,255,.35);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(192,38,255,.2);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease-soft), transform .25s var(--ease), visibility .25s;
  display:grid;gap:4px;
}
.dropdown.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.dd-item{
  display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;
  padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--cream-ink);
  transition:background .2s, transform .2s;
}
.dd-item:hover{background:rgba(192,38,255,.16);transform:translateX(2px)}
.dd-item .dd-ico{
  width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--grad-card);border:1px solid rgba(192,38,255,.3);font-size:1.2rem;
}
.dd-item .dd-ico img{width:28px;height:28px;object-fit:contain}
.dd-item .dd-title{font-weight:700;font-size:.98rem;display:block}
.dd-item .dd-desc{font-size:.82rem;color:var(--cream-dimmer);display:block}
.dd-item .dd-arrow{color:var(--neon-purple);font-size:1rem}
.dd-item .dd-ext{font-size:.9rem;color:var(--sky-pop)}

.mobile-toggle{
  display:none;background:transparent;border:none;color:var(--cream-ink);
  font-size:1.6rem;cursor:pointer;padding:8px;
}

/* theme toggle */
.theme-toggle{
  width:42px;height:42px;border-radius:999px;border:1.5px solid rgba(192,38,255,.35);
  background:rgba(192,38,255,.08);color:var(--cream-ink);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.1rem;padding:0;margin-left:6px;
  transition:transform .3s var(--ease), background .25s, border-color .25s, box-shadow .25s;
  position:relative;overflow:hidden;
}
.theme-toggle:hover{
  transform:translateY(-2px) rotate(-8deg);
  background:rgba(192,38,255,.18);
  border-color:var(--neon-purple);
  box-shadow:0 0 18px rgba(192,38,255,.45);
}
.theme-toggle .icn{display:inline-block;transition:transform .5s var(--ease), opacity .3s}
.theme-toggle .sun{position:absolute;opacity:0;transform:rotate(-90deg) scale(.5)}
.theme-toggle .moon{opacity:1;transform:rotate(0) scale(1)}
html[data-theme="light"] .theme-toggle .moon{opacity:0;transform:rotate(90deg) scale(.5)}
html[data-theme="light"] .theme-toggle .sun{opacity:1;transform:rotate(0) scale(1)}
html[data-theme="light"] .theme-toggle{
  background:rgba(255,255,255,.7);
  border-color:rgba(192,38,255,.3);
  color:var(--deep-purple);
}
html[data-theme="light"] .theme-toggle:hover{background:#fff}

/* theme transition — smooth color swap */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after{
  transition:background-color .35s ease, background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important;
}

@media(max-width:900px){
  .nav{padding-top:24px;padding-bottom:14px}
  .nav-links{
    position:fixed;top:72px;right:0;left:0;
    flex-direction:column;align-items:stretch;gap:4px;
    padding:18px;max-height:calc(100vh - 72px);overflow-y:auto;
    background:rgba(20,0,41,.98);backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(192,38,255,.25);
    transform:translateY(-110%);transition:transform .35s var(--ease);
  }
  .nav-links.open{transform:translateY(0)}
  .nav-links a, .nav-links button.dd-trigger{justify-content:space-between;width:100%}
  .dropdown{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    min-width:0;display:none;margin-top:4px;box-shadow:none;background:rgba(192,38,255,.06);}
  .dropdown.open{display:grid;transform:none}
  .mobile-toggle{display:block}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:14px;
  font-weight:800;font-size:1rem;text-decoration:none;cursor:pointer;border:none;
  font-family:inherit;
  transition:transform .2s var(--ease), box-shadow .2s;
  position:relative;overflow:hidden;
}
.btn-primary{
  background:var(--grad-button);color:#140029;
  box-shadow:0 10px 30px rgba(192,38,255,.45), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(192,38,255,.65)}
.btn-ghost{
  background:rgba(192,38,255,.08);color:var(--cream-ink);
  border:1.5px solid var(--neon-purple);
  box-shadow:inset 0 0 16px rgba(192,38,255,.15);
}
.btn-ghost:hover{background:rgba(192,38,255,.2);box-shadow:0 0 24px rgba(192,38,255,.45)}
.btn-pink{
  background:linear-gradient(135deg, var(--blush-pink), var(--hot-pink));
  color:#fff; box-shadow:0 10px 30px rgba(255,46,156,.45);
}
.btn-pink:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(255,46,156,.65)}

/* ---------- typography ---------- */
.display-font{font-family:'Fraunces',serif;font-weight:900;letter-spacing:-1.5px;line-height:1.02}
.kawaii-font{font-family:'Bagel Fat One',cursive;letter-spacing:1px}

h1.huge, .hero h1{
  font-family:'Fraunces',serif;font-weight:900;
  font-size:clamp(3rem,8vw,7rem);line-height:.94;letter-spacing:-3px;
}
h2.section-title{
  font-family:'Fraunces',serif;font-weight:900;
  font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.02;letter-spacing:-1.5px;
  background:var(--grad-logo);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(192,38,255,.35));
}
.kicker{
  display:inline-block;padding:6px 16px;border-radius:999px;
  background:rgba(192,38,255,.12);border:1px solid rgba(192,38,255,.4);
  color:var(--lilac);font-weight:700;font-size:.8rem;letter-spacing:2px;text-transform:uppercase;
  margin-bottom:14px;
}
.lead{font-size:1.15rem;color:var(--cream-dim);max-width:640px}
.pop-pink{background:linear-gradient(180deg,#ffd9ee,var(--blush-pink) 60%,#b50068);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(255,79,182,.55));}
.pop-purple{background:linear-gradient(180deg,#f1d9ff,var(--neon-purple) 55%,#5c0a8a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(192,38,255,.65));}
.pop-sky{background:linear-gradient(180deg,#dff3ff,var(--sky-pop) 55%,#2b6aa5);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(124,199,255,.55));}

/* ---------- section shells ---------- */
section{padding:80px clamp(16px,5vw,48px);position:relative;max-width:1400px;margin:0 auto}
.section-head{text-align:center;margin-bottom:56px}
.section-head p{color:var(--cream-dim);max-width:620px;margin:16px auto 0;font-size:1.1rem}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(28px) scale(.98);transition:opacity .7s var(--ease-soft), transform .7s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0) scale(1)}
.reveal.delay-1{transition-delay:.08s}
.reveal.delay-2{transition-delay:.16s}
.reveal.delay-3{transition-delay:.24s}
.reveal.delay-4{transition-delay:.32s}

/* ---------- card ---------- */
.card{
  position:relative;padding:28px;border-radius:var(--radius-lg);
  background:var(--grad-card);
  border:1.5px solid rgba(192,38,255,.25);
  backdrop-filter:blur(10px);
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
  overflow:hidden;
}
.card::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;
  background:conic-gradient(from var(--a,0deg), transparent 70%, var(--neon-purple), transparent);
  opacity:0;transition:opacity .4s; z-index:-1;
  animation:spinCard 6s linear infinite;
}
@keyframes spinCard{to{--a:360deg}}
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
.card:hover{
  transform:translateY(-8px) rotate(-.5deg);
  border-color:var(--neon-purple);
  box-shadow:0 26px 70px rgba(192,38,255,.28), 0 0 38px rgba(255,79,182,.2);
}
.card:hover::after{opacity:.55}

/* ---------- footer ---------- */
.footer{
  margin-top:60px;padding:40px clamp(16px,5vw,48px);
  text-align:center;color:var(--cream-dimmer);font-size:.9rem;
  border-top:1px solid rgba(192,38,255,.18);
  background:linear-gradient(180deg, transparent, rgba(20,0,41,.6));
}
.footer a{color:var(--lilac);text-decoration:none;margin:0 10px;transition:color .2s}
.footer a:hover{color:var(--neon-purple);text-shadow:0 0 10px rgba(192,38,255,.55)}
.footer .fheart{color:var(--blush-pink);display:inline-block;animation:beat 1.4s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.footer-brand{
  font-family:'Bagel Fat One',cursive;font-size:1.1rem;letter-spacing:1px;
  background:var(--grad-logo);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- hero (home) ---------- */
.hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;
  padding:70px clamp(16px,5vw,48px) 100px;max-width:1400px;margin:0 auto;
}
@media(max-width:900px){.hero{grid-template-columns:1fr;text-align:center;padding-top:40px}}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
@media(max-width:900px){.hero-ctas{justify-content:center}}
.hero-logo{position:relative;display:flex;justify-content:center;align-items:center}
.hero-logo img{
  width:100%;max-width:520px;height:auto;
  filter:drop-shadow(0 0 40px rgba(192,38,255,.55)) drop-shadow(0 0 60px rgba(255,79,182,.3));
  animation:heroFloat 6s ease-in-out infinite;
}
.hero-logo::before{
  content:"";position:absolute;inset:10% 5% 5% 5%;
  background:radial-gradient(ellipse at center, rgba(192,38,255,.4), transparent 60%);
  filter:blur(44px);z-index:-1;animation:pulseGlow 3.2s ease-in-out infinite;
}
@keyframes heroFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-18px) rotate(1deg)}}
@keyframes pulseGlow{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.95;transform:scale(1.08)}}
@media(max-width:900px){.hero-logo{display:none !important}}

/* ---------- featured grid (home) ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){.grid-3,.grid-2,.grid-4{grid-template-columns:1fr}}

/* ---------- project card ---------- */
.project-card{
  display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;
  position:relative;
}
.project-card .badge{
  position:absolute;top:14px;right:14px;z-index:2;
  padding:5px 12px;border-radius:999px;font-size:.75rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  background:rgba(20,0,41,.7);border:1px solid rgba(192,38,255,.35);color:var(--lilac);
  backdrop-filter:blur(6px);
}
.project-card .thumb{
  aspect-ratio:16/10;border-radius:18px;overflow:hidden;
  background:linear-gradient(135deg, rgba(192,38,255,.15), rgba(124,199,255,.1));
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(192,38,255,.25);
  transition:transform .4s var(--ease);
}
.project-card .thumb img{width:70%;height:auto;filter:drop-shadow(0 8px 24px rgba(192,38,255,.4));transition:transform .4s var(--ease)}
.project-card:hover .thumb img{transform:scale(1.05) rotate(-2deg)}
.project-card h3{font-family:'Fraunces',serif;font-weight:900;font-size:1.4rem;display:flex;align-items:center;gap:8px}
.project-card h3 .ext{font-size:.9rem;color:var(--sky-pop);transition:transform .25s}
.project-card:hover h3 .ext{transform:translate(3px,-3px)}
.project-card p{color:var(--cream-dim);font-size:.95rem}

/* ---------- feature grid ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.features{grid-template-columns:1fr}}
.feature{
  padding:26px;border-radius:22px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(192,38,255,.18);
  transition:transform .3s var(--ease), border-color .3s, background .3s;
}
.feature:hover{transform:translateY(-6px) rotate(-.4deg);border-color:var(--blush-pink);background:rgba(255,79,182,.06)}
.feature .ico{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;margin-bottom:14px;
  background:var(--grad-button);box-shadow:var(--glow-purple);
}
.feature h4{font-family:'Fraunces',serif;font-weight:900;font-size:1.25rem;margin-bottom:6px}
.feature p{color:var(--cream-dim);font-size:.94rem}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.step{
  text-align:center;padding:32px 24px;border-radius:24px;
  background:rgba(255,255,255,.03);border:1px solid rgba(192,38,255,.18);
  transition:transform .3s var(--ease);
}
.step:hover{transform:translateY(-6px)}
.step .num{
  width:62px;height:62px;border-radius:50%;margin:0 auto 18px;
  background:var(--grad-button);color:#140029;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-weight:900;font-size:1.8rem;
  box-shadow:var(--glow-purple);
}
.step h4{font-family:'Fraunces',serif;font-weight:900;font-size:1.35rem;margin-bottom:8px}
.step p{color:var(--cream-dim);font-size:.95rem}

/* ---------- final CTA ---------- */
.final-cta{
  text-align:center;padding:100px clamp(16px,5vw,48px);
  background:radial-gradient(ellipse at center, rgba(192,38,255,.22), transparent 70%);
  margin-top:40px;
}
.final-cta h2{
  font-family:'Fraunces',serif;font-weight:900;
  font-size:clamp(2.6rem,6.5vw,5rem);line-height:1;letter-spacing:-2px;margin-bottom:18px;
  background:var(--grad-logo);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(192,38,255,.55));
}
.final-cta p{color:var(--cream-dim);font-size:1.2rem;margin-bottom:32px}

/* ---------- forms ---------- */
.form{display:grid;gap:18px;max-width:620px;margin:0 auto}
.form label{display:block;font-weight:700;margin-bottom:8px;color:var(--cream-dim);font-size:.92rem;letter-spacing:.5px}
.form input, .form textarea{
  width:100%;padding:14px 16px;border-radius:14px;
  background:rgba(20,0,41,.6);color:var(--cream-ink);
  border:1.5px solid rgba(192,38,255,.3);
  font-family:inherit;font-size:1rem;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.form input:focus, .form textarea:focus{
  outline:none;border-color:var(--neon-purple);
  box-shadow:0 0 0 4px rgba(192,38,255,.2), inset 0 0 20px rgba(192,38,255,.08);
  background:rgba(20,0,41,.8);
}
.form textarea{min-height:140px;resize:vertical}
.form .honey{position:absolute;left:-9999px}
.form-status{margin-top:12px;padding:12px 16px;border-radius:12px;font-weight:600;display:none}
.form-status.ok{display:block;background:rgba(124,199,255,.12);border:1px solid var(--sky-pop);color:var(--sky-pop)}
.form-status.err{display:block;background:rgba(255,79,182,.12);border:1px solid var(--blush-pink);color:var(--blush-pink)}

/* button busy state */
.btn.is-loading{pointer-events:none;opacity:.85}
.btn .spinner{
  width:18px;height:18px;border-radius:50%;display:none;
  border:2.5px solid rgba(20,0,41,.25);border-top-color:#140029;
  animation:spin .8s linear infinite;
}
.btn.is-loading .spinner{display:inline-block}
.btn.is-loading .label{opacity:.6}

/* ---------- legal / prose ---------- */
.prose{max-width:820px;margin:0 auto;color:var(--cream-dim);line-height:1.8}
.prose h1{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(2.2rem,5vw,3.4rem);
  margin-bottom:8px;color:var(--cream-ink);letter-spacing:-1px;
  background:var(--grad-logo);-webkit-background-clip:text;background-clip:text;color:transparent;}
.prose .updated{color:var(--cream-dimmer);margin-bottom:32px;font-size:.95rem}
.prose h2{font-family:'Fraunces',serif;font-weight:900;font-size:1.6rem;margin:36px 0 12px;color:var(--cream-ink)}
.prose h3{font-weight:800;font-size:1.1rem;margin:24px 0 8px;color:var(--lilac)}
.prose p, .prose li{margin-bottom:12px}
.prose ul{padding-left:22px;margin-bottom:16px}
.prose a{color:var(--sky-pop)}
.prose strong{color:var(--cream-ink)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .sparkle-layer{display:none}
}

/* ---------- utilities ---------- */
.center{text-align:center}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}
.flex-gap{display:flex;gap:14px;flex-wrap:wrap}
.muted{color:var(--cream-dimmer)}
.nowrap{white-space:nowrap}