/* ══════════════════════════════════════════
   GLOBAL — des[tec] / Piql 2026
   Reset · Tokens · Base · Aurora · Glass
   ══════════════════════════════════════════ */

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* ── TOKENS — DARK ── */
[data-theme="dark"]{
  --bg:#0d0d0d;--bg2:#131313;--bg3:#161616;
  --text:#e8e8e8;--text-mid:#999;--text-sub:#777;--text-dim:#555;--text-muted:#444;
  --border:rgba(255,255,255,.06);--border2:rgba(255,255,255,.10);
  --glass-bg:rgba(255,255,255,.025);--glass-hi:rgba(255,255,255,.07);
  --card:rgba(255,255,255,.025);--card-hover:rgba(255,255,255,.05);

  --accent:#f5a623;--accent-dim:rgba(245,166,35,.10);--accent-b:rgba(245,166,35,.25);
  --accent-neon:rgba(245,166,35,.5);--accent-neon2:rgba(245,166,35,.15);
  --blue:#5b9bf5;--blue-dim:rgba(91,155,245,.10);--blue-b:rgba(91,155,245,.25);
  --blue-neon:rgba(91,155,245,.5);--blue-neon2:rgba(91,155,245,.15);
  --green:#4ecb71;--green-dim:rgba(78,203,113,.10);--green-b:rgba(78,203,113,.25);
  --green-neon:rgba(78,203,113,.5);--green-neon2:rgba(78,203,113,.15);
  --purple:#a87df5;--purple-dim:rgba(168,125,245,.10);--purple-b:rgba(168,125,245,.25);
  --purple-neon:rgba(168,125,245,.5);--purple-neon2:rgba(168,125,245,.15);
  --teal:#4ecbb5;--teal-dim:rgba(78,203,181,.10);--teal-b:rgba(78,203,181,.25);
  --teal-neon:rgba(78,203,181,.5);--teal-neon2:rgba(78,203,181,.15);
  --red:#f55b5b;--red-dim:rgba(245,91,91,.10);--red-b:rgba(245,91,91,.25);
  --red-neon2:rgba(245,91,91,.15);

  --orb-a:rgba(245,166,35,.30);--orb-b:rgba(91,155,245,.15);
  --orb-c:rgba(168,125,245,.10);--orb-d:rgba(78,203,113,.08);
  --noise:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ── TOKENS — LIGHT ── */
[data-theme="light"]{
  --bg:#f0f0ec;--bg2:#e6e6e2;--bg3:#ddddd8;
  --text:#0d0d0d;--text-mid:#3a3a3a;--text-sub:#555;--text-dim:#888;--text-muted:#aaa;
  --border:rgba(0,0,0,.07);--border2:rgba(0,0,0,.12);
  --glass-bg:rgba(255,255,255,.55);--glass-hi:rgba(255,255,255,.75);
  --card:rgba(255,255,255,.5);--card-hover:rgba(255,255,255,.7);

  --accent:#c47e10;--accent-dim:rgba(196,126,16,.08);--accent-b:rgba(196,126,16,.22);
  --accent-neon:rgba(196,126,16,.35);--accent-neon2:rgba(196,126,16,.10);
  --blue:#3570c4;--blue-dim:rgba(53,112,196,.08);--blue-b:rgba(53,112,196,.22);
  --blue-neon:rgba(53,112,196,.35);--blue-neon2:rgba(53,112,196,.10);
  --green:#2d8a45;--green-dim:rgba(45,138,69,.08);--green-b:rgba(45,138,69,.22);
  --green-neon:rgba(45,138,69,.35);--green-neon2:rgba(45,138,69,.10);
  --purple:#7052c4;--purple-dim:rgba(112,82,196,.08);--purple-b:rgba(112,82,196,.22);
  --purple-neon:rgba(112,82,196,.35);--purple-neon2:rgba(112,82,196,.10);
  --teal:#3a9a88;--teal-dim:rgba(58,154,136,.08);--teal-b:rgba(58,154,136,.22);
  --teal-neon:rgba(58,154,136,.35);--teal-neon2:rgba(58,154,136,.10);
  --red:#c43030;--red-dim:rgba(196,48,48,.08);--red-b:rgba(196,48,48,.22);
  --red-neon2:rgba(196,48,48,.10);

  --orb-a:rgba(196,126,16,.10);--orb-b:rgba(53,112,196,.06);
  --orb-c:rgba(112,82,196,.05);--orb-d:rgba(45,138,69,.05);
}

/* ── BASE ── */
body{
  font-family:'Montserrat',sans-serif;
  background:var(--bg);color:var(--text);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  min-height:100vh;overflow-x:hidden;
  transition:background .5s,color .5s;
}
body::before{
  content:'';position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(245,166,35,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(245,166,35,.018) 1px,transparent 1px);
  background-size:60px 60px;
  pointer-events:none;z-index:0;transition:opacity .5s;
}
[data-theme="light"] body::before{
  background-image:
    linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px);
}

/* ── AURORA ── */
.aurora{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.orb{position:absolute;border-radius:50%}
.orb-1{width:600px;height:600px;bottom:-200px;left:-120px;
  background:radial-gradient(ellipse,var(--orb-a),transparent 70%);
  filter:blur(90px);animation:drift1 16s ease-in-out infinite alternate}
.orb-2{width:450px;height:450px;top:-100px;right:-80px;
  background:radial-gradient(ellipse,var(--orb-b),transparent 70%);
  filter:blur(75px);animation:drift2 20s ease-in-out infinite alternate}
.orb-3{width:300px;height:300px;top:35%;left:50%;
  background:radial-gradient(ellipse,var(--orb-c),transparent 70%);
  filter:blur(65px);animation:drift3 25s ease-in-out infinite alternate}
.orb-4{width:250px;height:250px;bottom:15%;right:15%;
  background:radial-gradient(ellipse,var(--orb-d),transparent 70%);
  filter:blur(55px);animation:drift2 18s ease-in-out infinite alternate-reverse}

/* ── KEYFRAMES ── */
@keyframes drift1{from{transform:translate(0,0)}to{transform:translate(40px,-30px)}}
@keyframes drift2{from{transform:translate(0,0)}to{transform:translate(-30px,40px)}}
@keyframes drift3{from{transform:translate(0,0)}to{transform:translate(25px,25px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes slideIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes scanWave{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes neonPulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes rippleAnim{0%{transform:scale(0);opacity:.5}100%{transform:scale(4);opacity:0}}
@keyframes scanline{0%{transform:translateY(-2px)}100%{transform:translateY(700%)}}

/* ── LIQUID GLASS ── */
.glass{
  position:relative;
  background:linear-gradient(135deg,var(--glass-hi) 0%,var(--glass-bg) 50%,rgba(0,0,0,.05) 100%);
  backdrop-filter:blur(24px) saturate(160%) brightness(1.05);
  -webkit-backdrop-filter:blur(24px) saturate(160%) brightness(1.05);
  border:1px solid var(--border2);
  box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 rgba(0,0,0,.15),
    0 4px 24px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.glass::after{
  content:'';position:absolute;inset:0;
  background:var(--noise);opacity:.018;
  pointer-events:none;border-radius:inherit;
}

/* ── FOOTER (shared) ── */
.footer{text-align:center;padding:40px 16px;border-top:1px solid var(--border);margin-top:40px}
.footer-logo{display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.footer-logo svg{height:20px;width:auto}
.footer-logo svg path{fill:var(--text-dim)}
.footer-logo svg .dl1,.footer-logo svg .dl2,.footer-logo svg .fl1,.footer-logo svg .fl2{fill:var(--text-dim)}
.footer-phrase{font-size:12px;color:var(--text-sub);font-style:italic;font-weight:300;margin-bottom:8px}
.footer-credit{font-family:'Geist Mono',monospace;font-size:9px;color:var(--text-dim);letter-spacing:.04em}
.footer-credit span{color:var(--accent)}