@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --bg:           #0A0A0A;
  --bg-elevated:  #141414;
  --bg-card:      #101010;
  --surface:      rgba(255, 255, 255, 0.06);
  --surface-hover:rgba(255, 255, 255, 0.09);
  --border:       rgba(255, 255, 255, 0.10);
  --border-hover: rgba(34, 197, 94, 0.25);
  --accent:       #22C55E;
  --accent-dim:   rgba(34, 197, 94, 0.12);
  --accent-glow:  rgba(34, 197, 94, 0.25);
  --blue:         #22C55E;
  --blue-dim:     rgba(34, 197, 94, 0.12);
  --text:         #F1F5F9;
  --text-muted:   #A1A1AA;
  --text-faint:   #52525B;

    --hero-gradient:    linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
  --accent-gradient:  linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
  --card-gradient:    linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);

    --nav-bg:       rgba(10, 10, 10, 0.88);
  --backdrop:     blur(16px);

    --font-sans:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;

    --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;

    --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

    --max-width:    1280px;
  --nav-height:   72px;
  --gutter:       clamp(1rem, 4vw, 2rem);
  --section-pad:  clamp(4rem, 8vw, 7rem);

    --radius-sm:  6px;
  --radius:     12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

    --shadow-sm:    0 1px 2px rgba(0,0,0,0.5);
  --shadow:       0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow:  0 0 40px rgba(34,197,94,0.15);
  --shadow-glow-strong: 0 8px 40px rgba(34,197,94,0.25);

    --transition-fast:   150ms ease;
  --transition:        250ms ease;
  --transition-slow:   400ms ease;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

body > * {
  position: relative;
  z-index: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--text);
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.875rem); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  color: var(--text-muted);
  line-height: 1.7;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover { color: var(--text); }

ul, ol {
  list-style: none;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-pad);
}

.text-muted   { color: var(--text-muted); }
.text-faint   { color: var(--text-faint); }
.text-accent  { color: var(--accent); }
.text-sm      { font-size: var(--text-sm); }
.text-xs      { font-size: var(--text-xs); }
.font-mono    { font-family: var(--font-mono); }
.font-medium  { font-weight: 500; }
.font-semibold{ font-weight: 600; }
.font-bold    { font-weight: 700; }

.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2        { gap: var(--space-2); }
.gap-4        { gap: var(--space-4); }
.gap-6        { gap: var(--space-6); }
.gap-8        { gap: var(--space-8); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

::-webkit-scrollbar        { width: 6px; }
::-webkit-scrollbar-track  { background: var(--bg); }
::-webkit-scrollbar-thumb  { background: var(--border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

::selection {
  background: rgba(34, 197, 94, 0.25);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin-block: var(--space-8);
}