/* ============================================================
   OMNICHAT — fundatia site-ului public
   Tokens, reset, tipografie, primitive de layout.

   Provenienta: structura si sistemul de layout vin din "Omnichat template
   nou/template-v2"; paleta si tipografia vin din template-ul v1 din acelasi
   folder (solar amber + Plus Jakarta Sans).

   Ca sa schimbi accentul in tot site-ul, e de ajuns sa schimbi --uv,
   --uv-bright, --uv-deep si --uv-rgb mai jos. Nimic altceva nu are culoarea
   scrisa direct in cod.
   ============================================================ */

:root{
  /* Surfaces */
  --bg:            #08090B;
  --bg-raised:     #0B0C0F;
  --bg-panel:      #0E0F13;
  --bg-elevated:   #121319;
  --bg-inset:      #060709;

  /* Lines */
  --line:          #25262B;
  --line-soft:     #17181C;
  --line-strong:   #34353C;

  /* Type */
  --text:          #F3F0EA;
  --text-2:        #A2A2AC;
  --text-3:        #6C6D77;
  --text-4:        #4A4B54;

  /* Accent - solar amber (paleta din template-ul v1).
     Numele --uv* sunt pastrate din v2 ca sa nu rescriem 1000 de linii:
     citeste-le ca "accent", nu ca "ultraviolet". */
  --uv:            #FF6B2B;
  --uv-bright:     #FF8A3D;
  --uv-deep:       #C24A16;
  --uv-glow:       rgba(255, 107, 43, .38);
  --uv-wash:       rgba(255, 107, 43, .10);
  --uv-hair:       rgba(255, 107, 43, .28);
  /* componentele accentului, pentru locurile care au nevoie de alta opacitate */
  --uv-rgb:        255, 107, 43;

  /* Auriu, a doua culoare din v1 — folosit strict pentru cifre si accente rare */
  --gold:          #FBBF24;
  --gold-wash:     rgba(251, 191, 36, .10);

  /* Teal-ul din logo. Nu concureaza cu portocaliul: portocaliul ramane
     culoarea actiunii (butoane, CTA), teal-ul e culoarea starii bune —
     "disponibil", "operational", "pozitiv". Fiecare are rolul lui. */
  --teal:          #01B39B;
  --teal-deep:     #00353D;
  --teal-rgb:      1, 179, 155;
  --teal-wash:     rgba(1, 179, 155, .10);

  /* Functional signal colours only */
  /* semnalul pozitiv preia exact teal-ul marcii */
  --sig-pos:       #01B39B;
  --sig-warn:      #E2B15E;
  --sig-neg:       #E2685E;
  --sig-blue:      #5B8CFF;

  /* Families — titlurile trec pe Plus Jakarta Sans, ca in v1 */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  /* Rhythm */
  --gutter: 24px;
  --maxw: 1320px;
  --section-y: clamp(90px, 11vw, 190px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  font-feature-settings:"cv02","cv03","cv04","ss01";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

body.is-locked{ overflow:hidden; }

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select{ font:inherit; color:inherit; }
::selection{ background:var(--uv); color:#fff; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#1D1E24; border:2px solid var(--bg); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:#2C2D35; }

/* ---------- Ambient field ---------- */
.field{ position:fixed; inset:0; z-index:0; pointer-events:none; }

.field__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:96px 96px;
  mask-image:radial-gradient(ellipse 80% 65% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 65% at 50% 0%, #000 20%, transparent 78%);
}
.field__uv{
  position:absolute; top:-26vh; left:50%; width:130vw; height:86vh; transform:translateX(-50%);
  background:radial-gradient(ellipse 42% 50% at 50% 42%, rgba(var(--uv-rgb),.17), transparent 70%);
  filter:blur(18px);
}
.field__noise{
  position:absolute; inset:0; opacity:.13; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%223%22/%3E%3C/filter%3E%3Crect width=%22140%22 height=%22140%22 filter=%22url(%23n)%22 opacity=%22.55%22/%3E%3C/svg%3E");
}

/* ---------- Layout ---------- */
.shell{ position:relative; z-index:1; }

.wrap{
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:clamp(20px, 4vw, 56px);
}

.grid12{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:var(--gutter);
}

.sec{ position:relative; padding-block:var(--section-y); border-top:1px solid var(--line-soft); }
.sec--flush{ border-top:0; }

.sec__id{
  position:absolute; top:calc(var(--section-y) * .42); left:clamp(20px,4vw,56px);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--text-4);
}

/* ---------- Typography ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.20em; text-transform:uppercase;
  color:var(--text-3); margin:0 0 26px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--uv); opacity:.85; }
.eyebrow--plain::before{ display:none; }
.eyebrow--uv{ color:var(--uv-bright); }

.display{
  font-family:var(--display);
  font-size:clamp(2.5rem, 6vw, 5.4rem);
  line-height:1; letter-spacing:-.035em; font-weight:800; margin:0;
  text-wrap:balance;
}
.display--xl{ font-size:clamp(2.9rem, 8.4vw, 8rem); line-height:.95; letter-spacing:-.042em; }
.h2{ font-family:var(--display); font-size:clamp(1.9rem, 3.35vw, 3.05rem); line-height:1.05; letter-spacing:-.03em; font-weight:800; margin:0; }
.h3{ font-family:var(--display); font-size:clamp(1.2rem,1.9vw,1.55rem); line-height:1.22; letter-spacing:-.02em; font-weight:700; margin:0; }

/* In v2 asta era serif italic. Cu Plus Jakarta Sans nu avem italic real,
   deci cuvantul de accent se marcheaza prin culoare, ca in v1. */
.ser{ font-family:var(--display); font-weight:800; font-style:normal; color:var(--uv); letter-spacing:-.035em; }
.uv{ color:var(--uv-bright); }
.mut{ color:var(--text-2); }
.dim{ color:var(--text-3); }

.lead{ font-size:clamp(1.02rem, 1.2vw, 1.16rem); line-height:1.62; color:var(--text-2); max-width:54ch; margin:0; }
.small{ font-size:.875rem; line-height:1.6; color:var(--text-3); }

.tag{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); }

/* ---------- Buttons ---------- */
.btn{
  --h:52px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--h); padding:0 26px;
  font-size:.94rem; font-weight:500; letter-spacing:-.01em;
  border-radius:2px; border:1px solid transparent;
  transition:.32s var(--ease); white-space:nowrap;
}
.btn svg{ width:15px; height:15px; transition:transform .32s var(--ease); flex:none; }

.btn--uv{
  background:var(--uv); color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 12px 40px -14px var(--uv-glow);
}
.btn--uv:hover{ background:var(--uv-bright); box-shadow:0 0 0 1px rgba(255,255,255,.10) inset, 0 18px 48px -12px var(--uv-glow); }
.btn--uv:hover svg{ transform:translateX(3px); }

.btn--ghost{ border-color:var(--line); color:var(--text); background:rgba(255,255,255,.012); }
.btn--ghost:hover{ border-color:var(--line-strong); background:rgba(255,255,255,.035); }

.btn--sm{ --h:40px; padding:0 18px; font-size:.85rem; }
.btn--lg{ --h:58px; padding:0 34px; font-size:1rem; }
.btn--block{ width:100%; }

.link-u{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.9rem; color:var(--text-2);
  border-bottom:1px solid var(--line); padding-bottom:3px; transition:.28s var(--ease);
}
.link-u:hover{ color:var(--text); border-color:var(--uv); }

/* ---------- Reveal system ---------- */
[data-rv]{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--d, 0ms);
}
[data-rv="fade"]{ transform:none; }
[data-rv="left"]{ transform:translateX(-24px); }
[data-rv="right"]{ transform:translateX(24px); }
[data-rv="scale"]{ transform:translateY(26px) scale(.985); }
[data-rv].rv-in{ opacity:1; transform:none; }

/* Cutia care face animatia de dezvaluire taie tot ce iese din ea. In romana
   iese destul: Ă, Î si  urca peste inaltimea majusculei, iar s si t au
   virgula sub linia de baza. Cu padding-ul original de .04em se retezau si
   sus, si jos.

   Solutie: dam aer in ambele parti si il scoatem inapoi din layout prin
   margini negative, ca ritmul vertical al titlurilor sa ramana neschimbat.
   Textul care intra vine de jos, deci translatia creste de la 108% la 145%,
   altfel s-ar zari prin spatiul nou adaugat inainte sa inceapa animatia. */
.mask-line{
  display:block; overflow:hidden;
  padding-top:.24em; padding-bottom:.24em;
  margin-top:-.24em; margin-bottom:-.24em;
}
.mask-line > span{
  display:block; transform:translateY(145%);
  transition:transform 1.05s var(--ease-out); transition-delay:var(--d,0ms);
}
.mask-line.rv-in > span{ transform:none; }

@media (prefers-reduced-motion: reduce){
  [data-rv], .mask-line > span{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- Utility ---------- */
.hr{ height:1px; background:var(--line-soft); border:0; margin:0; }
.stack-sm > * + *{ margin-top:12px; }
.stack > * + *{ margin-top:24px; }
.row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }