/* ============================================================================
   VTN INDUSTRIES — Sistem de design (premium tech / cinematic)
   Fundatia vizuala: tokens, reset, tipografie, utilitare.
   ============================================================================ */

:root {
  /* ---- Culori de baza (dark, racit, premium) ---- */
  --ink-900: #05070f;   /* fundal cel mai adanc */
  --ink-850: #070a16;
  --ink-800: #0a0e1d;   /* fundal sectiuni */
  --ink-750: #0e1424;
  --surface: #111827;
  --surface-1: #111827;
  --surface-2: #161f33;
  --surface-3: #1c2740;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.16);

  /* ---- Text ---- */
  --text: #e9eefb;
  --text-dim: #aab4d4;
  --text-faint: #6b7596;

  /* ---- Accente brand ---- */
  --vtn: #6ea8ff;            /* azur umbrela VTN */
  --vtn-2: #9b6cff;          /* violet premium */
  --finance: #3b82f6;        /* albastru ContaSpark */
  --finance-2: #38bdf8;      /* cyan */
  --eng: #ff8a3d;            /* portocaliu industrial */
  --eng-2: #ffc24b;          /* chihlimbar */
  --steel: #9fb3c8;          /* otel */
  --success: #34d399;

  /* ---- Gradiente ---- */
  --grad-vtn: linear-gradient(135deg, #6ea8ff 0%, #9b6cff 100%);
  --grad-finance: linear-gradient(135deg, #3b82f6 0%, #38bdf8 100%);
  --grad-eng: linear-gradient(135deg, #ff8a3d 0%, #ffc24b 100%);
  --grad-text: linear-gradient(120deg, #ffffff 0%, #b9c6ec 60%, #6ea8ff 100%);
  --bloom-vtn: radial-gradient(60% 60% at 50% 0%, rgba(110,168,255,.22), transparent 70%);

  /* ---- Spatiere (scala) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ---- Rotunjiri ---- */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;

  /* ---- Umbre / glow ---- */
  --shadow-soft: 0 10px 40px rgba(0,0,0,.45);
  --shadow-card: 0 24px 60px -20px rgba(0,0,0,.7);
  --glow-vtn: 0 0 60px -10px rgba(110,168,255,.55);
  --glow-finance: 0 0 50px -12px rgba(59,130,246,.6);
  --glow-eng: 0 0 50px -12px rgba(255,138,61,.55);

  /* ---- Tipografie ---- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;
  --font-brand: "Michroma", "Space Grotesk", sans-serif;  /* wordmark VTN Industries */

  /* fluid type scale */
  --t-eyebrow: .78rem;
  --t-body: clamp(1rem, .96rem + .3vw, 1.15rem);
  --t-h3: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  --t-h2: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  --t-h1: clamp(2.6rem, 1.6rem + 4.4vw, 5.6rem);
  --t-display: clamp(3.4rem, 2rem + 7vw, 8rem);

  /* ---- Easings / timing ---- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.7,0,.3,1);
  --dur: .6s;

  --container: 1200px;
}

/* ============================ Reset ============================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
::selection { background: rgba(110,168,255,.3); color: #fff; }

/* scrollbar discreta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-850); }
::-webkit-scrollbar-thumb { background: #283450; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #34425f; }

/* ============================ Tipografie ============================ */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -.01em; }
p { color: var(--text-dim); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: inline-flex; align-items: center; gap: var(--s-3);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }

.gradient-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-finance { color: var(--finance); }
.text-eng { color: var(--eng); }
.lead { font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); color: var(--text-dim); max-width: 60ch; }

/* ============================ Layout ============================ */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.section { position: relative; padding-block: clamp(var(--s-8), 10vw, var(--s-10)); }
.section--tight { padding-block: var(--s-8); }
.stack > * + * { margin-top: var(--s-5); }
.grid { display: grid; gap: var(--s-5); }
.center { text-align: center; }

/* ============================ Componente ============================ */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-card);
}

.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: .85em 1.5em; border-radius: var(--r-pill);
  font-weight: 600; font-size: .98rem; letter-spacing: .01em;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--grad-vtn); color: #07101f; box-shadow: var(--glow-vtn); }
.btn--ghost { border: 1px solid var(--line-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--vtn); background: rgba(110,168,255,.08); }

.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: .4em .9em; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--text-dim); background: rgba(255,255,255,.02);
}

/* halouri de fundal decorative */
.bloom { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bloom::before {
  content: ""; position: absolute; left: 50%; top: -10%; transform: translateX(-50%);
  width: 80vw; height: 60vh; background: var(--bloom-vtn); filter: blur(20px);
}

/* linie/grid tehnic de fundal */
.tech-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 80%);
}

/* ============================ Reveal la scroll ============================ */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }

.is-hidden { display: none !important; }