/* ============ Base (tokens, layout, header) ============ */
:root{
  color-scheme: light dark;

  /* Brand accents */
  --accent-1:#ff7a18;
  --accent-2:#ffb347;

  /* Dark glass palette */
  --panel:#0f1318;
  --ring:#1f2530;

  /* Radii / shadows / motion */
  --radius-lg:22px;
  --radius-md:18px;
  --shadow-lg:0 12px 32px rgba(0,0,0,.35);
  --shadow-xl:0 24px 70px rgba(0,0,0,.55);
  --easing:cubic-bezier(.22,1,.36,1);
}

html,body{height:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  margin:0; padding:0;
  -webkit-font-smoothing: antialiased;
  background:var(--panel);
}

.container{max-width:1100px;margin:auto;padding:0 1rem}
@media (min-width:768px){.container{padding:0 2rem}}

/* Header / Headroom */
.glass{backdrop-filter:saturate(1.05) blur(10px)}
.headroom{transition:transform .35s ease}
.headroom--unpinned{transform:translateY(-100%)}
.headroom--pinned{transform:translateY(0)}

/* Theme toggle button */
.theme-btn{
  border:1px solid color-mix(in oklab,currentColor,transparent 70%);
  border-radius:12px;padding:.35rem .55rem;opacity:.9
}
.theme-btn:hover{opacity:1}

/* Active nav indicator */
nav a[aria-current="page"]{position:relative;font-weight:700}
nav a[aria-current="page"]::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-10px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
}

/* Text gradient */
.text-gradient{
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent
}

/* Professional, tighter scale */
h1{font-size:clamp(2rem,4.8vw,2.75rem);line-height:1.15;font-weight:900;margin:.5em 0}
h2{font-size:clamp(1.5rem,3.6vw,2.1rem);line-height:1.2;font-weight:900;margin:.6em 0}
h3{font-size:clamp(1.15rem,2.4vw,1.35rem);font-weight:800}
p{font-size:1rem;line-height:1.7;margin:.6em 0}