/* =========================================
   GLB: the protocol – Base Visual
========================================= */

/* ---------- Theme Tokens ---------- */
:root{
  /* Dark identity (purple) */
  --bg: #120f1c;
  --bg2:#0f0c18;

  --panel: #1a1426;
  --panel2:#161121;

  --text: #cfd3ff;
  --muted:#a7aee6;
  --soft:#b9c0ff;

  --border: rgba(140, 120, 255, .16);
  --border2: rgba(140, 120, 255, .28);

  --shadow: 0 22px 70px rgba(0,0,0,.58);

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;

  --max: 1100px;
  --header-h: 64px;

  --focus: rgba(180, 170, 255, .48);

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 44px;

  /* Premium motion / glass tokens */
  --transition-fast: .18s cubic-bezier(.4,0,.2,1);
  --transition-main: .4s cubic-bezier(.175,.885,.32,1.275);
  --transition-sheen: .4s ease;
  --glow-identity: rgba(140,120,255,.18);
  --glass-highlight: inset 0 1px 1px rgba(255,255,255,.05);
}

/* Light L2: "Ice" (no purple reference) */
:root[data-theme="light"]{
  --bg: #eef3fb;
  --bg2:#e7eef8;

  --panel:#ffffffc9;
  --panel2:#ffffff;

  --text:#0b1b2b;
  --muted:#223b52;
  --soft:#10263b;

  --border: rgba(12, 70, 110, .14);
  --border2: rgba(12, 70, 110, .24);

  --shadow: 0 22px 70px rgba(11, 27, 43, .10);

  --focus: rgba(45, 170, 205, .38);

  --glow-identity: rgba(80,160,210,.16);
  --glass-highlight: inset 0 1px 1px rgba(255,255,255,.7);
}

/* ---------- Reset ---------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  letter-spacing: .2px;
  overflow-x:hidden;
}

/* ---------- Background: clean identity gradients + subtle grain ---------- */
/* Identity wash */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;

  /* Dark identity wash */
  opacity: .30;
  background:
    radial-gradient(1200px 800px at 18% 10%, rgba(120,90,255,.26), transparent 62%),
    radial-gradient(1000px 650px at 86% 18%, rgba(170,120,255,.18), transparent 58%),
    radial-gradient(900px 600px at 55% 92%, rgba(90,60,200,.22), transparent 65%),
    radial-gradient(700px 500px at 10% 88%, rgba(60,180,200,.08), transparent 60%);
  mix-blend-mode: screen;
  will-change: transform;
  transform: translateZ(0);
}

/* Minimal grain (no obvious pattern) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;

  background:
    /* micro grain: two different steps to avoid a grid look */
    repeating-linear-gradient(0deg, rgba(255,255,255,.010) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.008) 0 1px, transparent 1px 13px);
  mix-blend-mode: overlay;
  opacity: .12;
  filter: blur(.35px);
  will-change: transform;
  transform: translateZ(0);
}

/* Light wash: modern cool (no purple) */
:root[data-theme="light"] body::before{
  opacity: .48;
  background:
    radial-gradient(1200px 900px at 18% 10%, rgba(80, 160, 210, .16), transparent 62%),
    radial-gradient(1000px 700px at 86% 18%, rgba(140, 210, 235, .12), transparent 58%),
    radial-gradient(900px 700px at 55% 92%, rgba(80, 130, 190, .10), transparent 65%),
    radial-gradient(900px 700px at 45% 55%, rgba(215, 230, 245, .20), transparent 70%);
  mix-blend-mode: multiply;
}

/* Light: grain tuned for readability */
:root[data-theme="light"] body::after{
  mix-blend-mode: multiply;
  opacity: .08;
  background:
    repeating-linear-gradient(0deg, rgba(11,27,43,.018) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, rgba(11,27,43,.014) 0 1px, transparent 1px 15px);
  filter: blur(.40px);
}

/* Keep content above background layers */
.site-header, main, .site-footer{
  position: relative;
  z-index: 1;
}

/* ---------- Layout ---------- */
.container{
  width: min(var(--max), 92%);
  margin: 0 auto;
}

.page{
  padding: var(--space-7) 0 calc(var(--space-7) + var(--space-2));
}

.section{
  padding: var(--space-6) 0;
}

.stack > * + *{ margin-top: var(--space-4); }
.stack-sm > * + *{ margin-top: var(--space-2); }

.grid{
  display:grid;
  gap: var(--space-4);
}

.grid-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px){
  .grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
}

/* ---------- Typography (F2) ---------- */
h1, h2, h3{
  margin: 0 0 var(--space-2);
  line-height: 1.08;
  letter-spacing: -0.5px;
  font-family: "Space Grotesk", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

h1{ font-size: clamp(34px, 4vw, 52px); }
h2{ font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.35px; }
h3{ font-size: 18px; letter-spacing: -0.2px; }

p{
  margin: 0 0 var(--space-3);
  line-height: 1.65;
  color: var(--soft);
}

.muted{
  color: var(--muted);
  font-weight: 500;
}

a{
  color: inherit;
  text-decoration: none;
}

a:hover{ text-decoration: underline; }

/* ---------- Components ---------- */
.card{
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, transparent), var(--panel2));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--shadow),
    var(--glass-highlight);
  padding: var(--space-5);

  transition:
    transform var(--transition-main),
    border-color var(--transition-main),
    filter var(--transition-main),
    box-shadow var(--transition-main);
}

.card-sm{
  padding: var(--space-4);
  border-radius: var(--radius);
}

.card:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--border2) 70%, transparent);
  filter: brightness(1.03);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 65%, transparent);
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .2px;
}

hr.sep{
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

/* ---------- Buttons ---------- */
.btn{
  border: 1px solid var(--border2);
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  color: var(--text);
  padding: 9px 14px;
  border-radius: 999px;
  cursor:pointer;
  transition:
    transform var(--transition-main),
    filter var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
  font-size: 14px;
  letter-spacing: .2px;
}

.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.btn:active{
  transform: translateY(0);
  filter: brightness(.98);
}

.btn-ghost{
  background: transparent;
  border-color: var(--border);
  box-shadow: none;
}

.btn-row{
  display:flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 999;
  min-height: var(--header-h);
  height: auto;
  display:flex;
  align-items:center;

  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom: 1px solid var(--border);
}

.header-inner{
  min-height: var(--header-h);
  padding: 10px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

/* =========================================================
   BRAND: make it look like a wordmark (different from nav)
   Discreet attention: small underline + soft glow only here
   (Requer no HTML: .brand-mark + .brand-text)
========================================================= */
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--text);
  font-weight: 750;
  line-height: 1;
}

.brand-mark{
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border2) 80%, transparent);

  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--panel) 85%, transparent),
      color-mix(in srgb, var(--panel2) 85%, transparent)
    );

  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--soft) 92%, var(--text));
  box-shadow:
    0 10px 26px rgba(0,0,0,.25),
    0 0 0 1px var(--glow-identity),
    var(--glass-highlight);
}

.brand-text{
  font-weight: 850;
  letter-spacing: -.35px;
  font-size: 18px;
  opacity: 1;
  position: relative;
  color: var(--text);
  text-shadow:
    0 0 12px rgba(140,120,255,.16),
    0 0 28px rgba(140,120,255,.08);
  font-feature-settings: "cv11" 1, "ss01" 1;
}

.brand-text::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: -5px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(140,120,255,.85),
    rgba(140,120,255,.10)
  );
  opacity: .75;
}

.brand:hover{
  text-decoration: none;
}

.brand:hover .brand-text{
  text-shadow:
    0 0 18px rgba(140,120,255,.30),
    0 0 42px rgba(140,120,255,.14);
}

.brand:hover .brand-mark{
  filter: brightness(1.06);
}

:root[data-theme="light"] .brand-text{
  text-shadow:
    0 0 10px rgba(80,160,210,.18),
    0 0 24px rgba(80,160,210,.10);
}

:root[data-theme="light"] .brand:hover .brand-text{
  text-shadow:
    0 0 16px rgba(80,160,210,.28),
    0 0 36px rgba(80,160,210,.14);
}

:root[data-theme="light"] .brand-text::after{
  background: linear-gradient(
    90deg,
    rgba(80,160,210,.85),
    rgba(80,160,210,.10)
  );
}

/* =========================================================
   NAV: keep it as a menu capsule, but quieter than brand
========================================================= */
.nav{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  background: color-mix(in srgb, var(--panel) 62%, transparent);
  box-shadow: var(--glass-highlight);
}

.nav-link{
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition:
    transform var(--transition-main),
    background var(--transition-fast),
    color var(--transition-fast),
    filter var(--transition-fast),
    border-color var(--transition-fast);
  font-size: 14px;
  letter-spacing: .2px;
}

.nav-link:hover{
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  transform: translateY(-1px);
  text-decoration: none;
}

.nav-link.active{
  color: var(--text);
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border-color: color-mix(in srgb, var(--border) 92%, transparent);
}

.header-actions{
  display:flex;
  align-items:center;
  gap: var(--space-2);
}

/* =========================
   Theme Toggle – Premium Icons
   HTML expected:
   <button data-theme-toggle>
     <span class="icon-sun"></span>
     <span class="icon-moon"></span>
   </button>
========================= */
[data-theme-toggle]{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;

  border-radius: 999px;
  border: 1px solid var(--border2);
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  color: var(--text);

  cursor: pointer;
  transition:
    transform var(--transition-main),
    filter var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-main);
  user-select: none;

  position: relative;
  overflow: hidden;
  box-shadow:
    0 10px 30px rgba(0,0,0,.18),
    var(--glass-highlight);
}

[data-theme-toggle]:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
}

[data-theme-toggle]:active{
  transform: translateY(0);
  filter: brightness(.98);
}

.icon-sun,
.icon-moon{
  position: absolute;
  width: 26px;
  height: 26px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-main),
    filter var(--transition-fast);
}

/* ===== Moon ===== */
.icon-moon{
  color: rgba(205,210,255,.92);
}

:root[data-theme="light"] .icon-moon{
  color: rgba(15,38,59,.78);
}

.moon-svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}

.moon-base{
  fill: currentColor;
  opacity: .95;
  filter:
    drop-shadow(0 0 6px rgba(140,120,255,.18))
    drop-shadow(0 0 14px rgba(140,120,255,.10));
}

.moon-shadow{
  fill: color-mix(in srgb, var(--panel2) 92%, transparent);
  opacity: .92;
}

[data-theme-toggle]:hover .moon-base{
  filter:
    drop-shadow(0 0 6px rgba(140,120,255,.22))
    drop-shadow(0 0 16px rgba(140,120,255,.12))
    drop-shadow(0 0 28px rgba(140,120,255,.08));
  opacity: .98;
}

:root[data-theme="light"] [data-theme-toggle]:hover .moon-base{
  filter:
    drop-shadow(0 0 4px rgba(12,70,110,.16))
    drop-shadow(0 0 12px rgba(12,70,110,.10));
}

/* Sun */
.icon-sun::before{
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: currentColor;
}

.icon-sun::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      currentColor 0deg 6deg,
      transparent 6deg 45deg
    );
  mask: radial-gradient(circle, transparent 55%, black 56%);
  -webkit-mask: radial-gradient(circle, transparent 55%, black 56%);
  animation: glb-sun-rotate 20s linear infinite;
}

/* DARK theme → show sun */
.icon-sun{
  opacity: 1;
  transform: scale(1);
}

.icon-moon{
  opacity: 0;
  transform: scale(.6);
}

/* LIGHT theme → show moon */
:root[data-theme="light"] .icon-sun{
  opacity: 0;
  transform: scale(.6);
}

:root[data-theme="light"] .icon-moon{
  opacity: 1;
  transform: scale(1);
}

/* --- Requested upgrades: rotate + brighter + subtle glow (dark only) --- */
@keyframes glb-sun-rotate{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

:root:not([data-theme="light"]) [data-theme-toggle]{
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 0 1px rgba(140,120,255,.18),
    var(--glass-highlight);
}

:root:not([data-theme="light"]) .icon-sun{
  filter:
    drop-shadow(0 0 6px rgba(140,120,255,.35))
    drop-shadow(0 0 14px rgba(140,120,255,.18));
}

:root:not([data-theme="light"]) .icon-sun::before,
:root:not([data-theme="light"]) .icon-sun::after{
  opacity: 1;
}

/* ---------- Footer ---------- */
.site-footer{
  border-top: 1px solid var(--border);
  padding: var(--space-5) 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.footer-links{
  display:flex;
  gap: var(--space-2);
  align-items:center;
}

.muted-link{
  color: var(--muted);
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-main);
}

.muted-link:hover{
  color: var(--text);
  border-color: var(--border);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
}

/* ---------- Focus ---------- */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 12px;
}

/* ---------- Hover H2: Sheen Sweep ---------- */
.card, .btn, .nav-link{
  position: relative;
  overflow: hidden;
}

.card::before, .btn::before, .nav-link::before{
  content:"";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 70%;
  height: 180%;
  transform: rotate(20deg) translateX(-120%);
  opacity: 0;
  pointer-events:none;

  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,.14),
    rgba(255,255,255,.05),
    transparent
  );

  transition: transform var(--transition-sheen), opacity var(--transition-sheen);
}

.card:hover::before,
.btn:hover::before,
.nav-link:hover::before{
  transform: rotate(20deg) translateX(220%);
  opacity: 1;
}

:root[data-theme="light"] .card::before,
:root[data-theme="light"] .btn::before,
:root[data-theme="light"] .nav-link::before{
  background: linear-gradient(
    to right,
    transparent,
    rgba(11,27,43,.10),
    rgba(11,27,43,.04),
    transparent
  );
}

/* ---------- Responsive ---------- */
@media (max-width: 780px){
  .header-inner{ gap: var(--space-2); }
  .nav{ gap: 6px; padding: 5px; }
  .nav-link{ padding: 7px 10px; }
}

@media (max-width: 620px){
  .site-header{
    min-height: unset;
  }

  .header-inner{
    min-height: auto;
    padding: 12px 0 14px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .brand{
    width: 100%;
    justify-content:center;
    align-items: center;
  }

  .brand-text{
    line-height: 1.1;
    font-size: 17px;
  }

  .brand-mark{
    padding:4px 8px;
    font-size:10px;
  }

  .header-actions{
    width: 100%;
    justify-content:center;
  }
}