/* ============================================================================
   AVINYAI — DESIGN TOKENS, RESET, TYPE SCALE
   Enterprise identity & AI security platform
   ========================================================================= */

:root {
  /* ---- Surfaces ------------------------------------------------------- */
  --bg:            #050914;
  --bg-2:          #080F1D;
  --surface:       #0D1628;
  --surface-2:     #111C33;
  --surface-hi:    #16233D;

  /* ---- Borders (very low contrast, blue-gray) ------------------------- */
  --line:          rgba(126, 158, 205, 0.11);
  --line-2:        rgba(126, 158, 205, 0.18);
  --line-3:        rgba(126, 158, 205, 0.30);

  /* ---- Accents -------------------------------------------------------- */
  --blue:          #2F6BFF;
  --blue-hi:       #5B8CFF;
  --blue-dim:      rgba(47, 107, 255, 0.14);
  --cyan:          #22D3EE;
  --cyan-dim:      rgba(34, 211, 238, 0.13);
  --violet:        #8B5CF6;
  --violet-dim:    rgba(139, 92, 246, 0.13);
  --amber:         #F0B23A;
  --green:         #34D399;
  --red:           #F0596B;

  /* ---- Text ----------------------------------------------------------- */
  --ink:           #EDF2FA;
  --ink-2:         #9AAAC2;
  --ink-3:         #63758F;

  /* ---- Type ----------------------------------------------------------- */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Rhythm --------------------------------------------------------- */
  --shell: 1280px;
  --gutter: 40px;
  --band: 140px;          /* vertical section padding */
  --radius: 4px;
  --radius-lg: 8px;

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms;
  --t: 320ms;
  --t-slow: 560ms;
}

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

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

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

::selection { background: rgba(47, 107, 255, 0.32); color: #fff; }

/* ---- Type scale ------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.04;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 4.6vw, 4rem); }          /* 36 → 64px */
h2 { font-size: clamp(1.85rem, 3.4vw, 3rem); }          /* 30 → 48px */
h3 { font-size: clamp(1.35rem, 1.9vw, 1.75rem); line-height: 1.15; }
h4 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.014em; }

p { text-wrap: pretty; }

.lede {
  font-size: clamp(1rem, 1.25vw, 1.1875rem);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 56ch;
  letter-spacing: -0.008em;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--line-3);
  flex: none;
}

.eyebrow--blue { color: #7FA5FF; }
.eyebrow--blue::before { background: rgba(91, 140, 255, 0.5); }
.eyebrow--violet { color: #B69BFB; }
.eyebrow--violet::before { background: rgba(182, 155, 251, 0.5); }

/* ---- Text accents ---------------------------------------------------- */
.hl { color: #A9BFFF; }

.mono {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}