/* ============================================================
   MAYA DIGITAL — GLOBAL DESIGN SYSTEM
   Minimal black & white · Apple-grade · reused on every page
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* palette (pure B/W minimal) */
  --bg:#ffffff;
  --bg-soft:#f5f5f7;      /* apple light gray */
  --fg:#0a0a0a;           /* near-black */
  --fg-2:#1d1d1f;
  --muted:#6e6e73;        /* apple secondary gray */
  --muted-2:#86868b;
  --line:#d2d2d7;         /* hairline */
  --line-soft:#e8e8ed;
  --invert-bg:#0a0a0a;
  --invert-fg:#ffffff;
  /* brand — culorile din cercul de pe homepage */
  --brand-500:#7ab8fe;    /* albastru principal (inelul cercului) */
  --brand-400:#a1c9ff;    /* periwinkle mediu */
  --brand-300:#c6dfff;    /* deschis */
  --brand-200:#ddebff;    /* foarte deschis */
  --brand-100:#eff6ff;    /* wash */
  --brand-mint:#a1fefa;   /* accent mint/aqua din cerc */
  --brand-grad:linear-gradient(160deg, var(--brand-500) 0%, var(--brand-mint) 100%);

  /* Aceleasi culori, in componente RGB. Necesare oriunde e nevoie de alfa:
     `rgba(var(--brand-rgb), .3)` pastreaza o singura sursa de adevar, in loc
     sa rescrie codul culorii de fiecare data cand se schimba transparenta. */
  --alb-rgb:255,255,255;
  --brand-rgb:122,184,254;      /* --brand-500 */
  --mint-rgb:161,254,250;       /* --brand-mint */
  --brand-400-rgb:161,201,255;
  --umbra-rgb:18,40,92;         /* bleumarin, pentru umbre — nu negru pur */
  --rosu:#c0392b;               /* singura culoare de eroare din site */
  --verde:#1a8f5f;              /* singura culoare de confirmare din site */
  --verde-inchis:#12704a;       /* varianta pentru text: contrast peste 4,5:1 */
  --rosu-inchis:#a1231f;

  /* Capatul intunecat al paletei: meniul overlay, subsolurile, banda de sus
     a paginilor legale. Erau scrise direct in reguli, in cinci variante. */
  --deep-900:#071228;
  --deep-800:#0a1a3e;
  --deep-700:#122c60;
  --deep-rgb:12,30,68;
  --maya:#7ab8fe;         /* accent brand */
  /* aliasuri pentru compatibilitate */
  --azure:#7ab8fe;
  --cyan:#a1c9ff;

  /* type */
  --font:"Poppins","Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --tracking-tight:-0.022em;
  --tracking-wide:0.18em;

  /* metrics */
  --maxw:1320px;
  --gutter:clamp(20px,5vw,64px);
  --radius:18px;
  --radius-lg:26px;
  --radius-pill:999px;

  /* motion */
  --ease:cubic-bezier(.42,0,.16,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.55s;

  /* elevation */
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow:0 12px 40px -12px rgba(0,0,0,.22);
  --shadow-lg:0 40px 80px -24px rgba(0,0,0,.28);

  --nav-w:150px;   /* lateral menu column */
  --ctrl-size:clamp(1.9rem,2.6vw,2.3rem);  /* marimea controalelor patrate:
     sageti, buton de meniu, pastila de cookie-uri. In global, nu in home,
     ca pastila sa aiba dimensiune si pe paginile legale. */

  /* Haloul de brand — o singură definiție, folosită atât în spatele
     literelor MAYA din hero [A1], cât și în spatele logo-ului din header.
     Se aplică pe un element gol, care primește apoi `filter: blur()`. */
  --brand-halo:
    radial-gradient(42% 58% at 26% 44%, rgba(122,184,254,.62), transparent 70%),
    radial-gradient(38% 56% at 62% 56%, rgba(161,254,250,.55), transparent 72%),
    radial-gradient(30% 46% at 84% 40%, rgba(161,201,255,.50), transparent 74%);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* FLUID ROOT: 1rem scales with the viewport, so the whole site (type + spacing in rem/em)
   scales proportionally with screen size — big screen = big, small screen = proportionally smaller */
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  /* Radacina fluida — singurul buton care scaleaza tot site-ul.
     Referinta masurata la concurenta (royalty.ro): corp 14px, titlu de
     sectiune 40px, hero 58px. Valorile de aici dau ~16,3px la 1440,
     17,8px la 1920 si 14,5px pe telefon. */
  font-size:clamp(14.5px, calc(12px + 0.3vw), 18px);}
body{
  margin:0;
  background:transparent;   /* fundalul alb e pe <html> */
  font-family:var(--font);
  font-size:1rem;
  line-height:1.5;
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
::selection{background:var(--fg);color:var(--bg)}

/* ---- [B] Fundal liquid glass, pe toata pagina ----
   Doua straturi fixe, sub tot continutul:
     .page-aurora = sursa de culoare (petele de brand, difuzate, animate lent)
     .page-glass  = foaia de sticla mata care le preia si le satureaza
   Fiind `fixed`, raman pe loc cat timp derulezi — culoarea nu „fuge" cu
   sectiunile, iar blurul se calculeaza o singura data, nu per sectiune.
   Sunt sub continut (z-index negativ), dar peste fundalul alb al paginii,
   pentru ca fundalul lui body se propaga pe panza browserului. */
.page-aurora,.page-glass{position:fixed;pointer-events:none}
.page-aurora{
  inset:-25%;z-index:0;
  background:
    radial-gradient(30% 34% at 14% 20%, var(--brand-500),   transparent 66%),
    radial-gradient(28% 32% at 80% 16%, rgba(var(--mint-rgb),.95), transparent 68%),
    radial-gradient(34% 38% at 68% 76%, rgba(var(--brand-rgb),1),   transparent 68%),
    radial-gradient(26% 30% at 24% 84%, rgba(var(--brand-400-rgb),1),   transparent 70%);
  /* inset negativ: petele trebuie sa depaseasca ecranul, altfel blurul
     lasa un chenar spalacit pe margini */
  filter:blur(clamp(24px,4vw,66px));
  animation:pageAurora 32s var(--ease) infinite alternate;
}
@keyframes pageAurora{
  0%  {transform:translate3d(-2%,-1%,0)  scale(1)}
  50% {transform:translate3d(2%,2%,0)    scale(1.08)}
  100%{transform:translate3d(-1%,1.5%,0) scale(1.03)}
}
.page-glass{
  inset:0;z-index:0;
  /* sub ~.5 textul negru devine greu de citit peste aurora,
     peste ~.72 culoarea dispare de tot */
  background:linear-gradient(170deg, rgba(var(--alb-rgb),.40), rgba(var(--alb-rgb),.56));
  -webkit-backdrop-filter:blur(clamp(10px,1.8vw,26px)) saturate(165%);
          backdrop-filter:blur(clamp(10px,1.8vw,26px)) saturate(165%);
}
/* pe telefon un backdrop-filter cat tot ecranul se recalculeaza la fiecare
   cadru de scroll; aurora e deja blurata, asa ca ajunge valul alb */
@media (max-width:820px){
  .page-glass{-webkit-backdrop-filter:none;backdrop-filter:none;
    background:rgba(var(--alb-rgb),.50)}
}
@media (prefers-reduced-motion:reduce){.page-aurora{animation:none}}

/* ---------- Type scale (clamp: rem bounds scale with the fluid root, vw handles mid-range) ---------- */
.display{
  font-size:clamp(2.1rem,4.4vw,4.2rem);
  line-height:1.03;
  font-weight:600;
  letter-spacing:var(--tracking-tight);
}
.h1{font-size:clamp(1.65rem,3vw,2.7rem);line-height:1.07;font-weight:600;letter-spacing:var(--tracking-tight)}
.h2{font-size:clamp(1.3rem,2.2vw,2rem);line-height:1.12;font-weight:600;letter-spacing:var(--tracking-tight)}
.h3{font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.2;font-weight:600;letter-spacing:-0.01em}
.lead{font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.5;color:var(--muted);font-weight:400}
.eyebrow{
  font-size:clamp(.7rem,.62rem + .18vw,.8rem);font-weight:600;letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--muted-2);
}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.section{padding-block:clamp(72px,11vh,140px)}
.stack>*+*{margin-top:1.1em}

/* ============================================================
   MATERIAL AQUA-GLASS (in spiritul „liquid glass" de la Apple)
   ------------------------------------------------------------
   Nu e doar transparenta. Sunt patru straturi care, impreuna, dau
   senzatia de sticla groasa:
     1. un gradient translucid — corpul sticlei;
     2. `backdrop-filter` — ce e dedesubt se vede estompat si mai
        saturat (aici: aurora paginii);
     3. o dunga de lumina pe muchia de SUS (`inset 0 1px`) — reflexia
        speculara; fara ea sticla arata plata;
     4. o umbra interioara jos plus una exterioara — grosimea si
        ridicarea de pe pagina.
   Colturile raman drepte: la Apple sunt rotunjite, dar geometria
   site-ului asta e patrata si a fost ceruta explicit.
   ============================================================ */
.aqua{
  position:relative;
  background:linear-gradient(160deg, rgba(var(--alb-rgb),.66) 0%, rgba(var(--alb-rgb),.24) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(185%);
          backdrop-filter:blur(16px) saturate(185%);
  border:1px solid rgba(var(--alb-rgb),.72);
  box-shadow:
    inset 0 1px 0 rgba(var(--alb-rgb),.95),
    inset 0 -10px 20px -14px rgba(var(--umbra-rgb),.3),
    0 10px 26px -12px rgba(var(--umbra-rgb),.34);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
/* varianta colorata, in bleu si vernil */
.aqua-brand{
  background:linear-gradient(160deg, rgba(var(--mint-rgb),.88) 0%, rgba(var(--brand-rgb),.74) 100%);
  border-color:rgba(var(--alb-rgb),.78);
  color:var(--invert-fg);
}
/* reflexia care taie sticla in diagonala — semnul dupa care se recunoaste */
.aqua::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,
    rgba(var(--alb-rgb),0) 34%,
    rgba(var(--alb-rgb),.5) 46%,
    rgba(var(--alb-rgb),.08) 54%,
    rgba(var(--alb-rgb),0) 66%);
}
.aqua:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(var(--alb-rgb),1),
    inset 0 -10px 20px -14px rgba(var(--umbra-rgb),.24),
    0 16px 34px -14px rgba(var(--umbra-rgb),.42);
}
.aqua:active{transform:translateY(0)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:clamp(.8rem,.74rem + .18vw,.9rem);font-weight:600;letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  padding:0;position:relative;
}
.btn .arrow{
  width:34px;height:1px;background:currentColor;position:relative;transition:width var(--dur) var(--ease)
}
.btn .arrow::after{
  content:"";position:absolute;right:0;top:50%;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
.btn:hover .arrow{width:52px}
.btn-underline{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;transition:text-underline-offset var(--dur) var(--ease)}
.btn-underline:hover{text-underline-offset:4px}

/* pill / solid */
.btn-pill{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.85em 1.6em;border-radius:0;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;text-transform:none;
  border:1px solid var(--fg);color:var(--fg);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn-pill:hover{background:var(--fg);color:var(--bg)}
.btn-solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-solid:hover{background:var(--invert-bg);transform:translateY(-1px)}

/* ---------- Circular icon buttons (slider arrows / hamburger) ---------- */
.icon-btn{
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--invert-bg);color:var(--invert-fg);
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.icon-btn:hover{transform:scale(1.06)}
.icon-btn:disabled{opacity:.3;cursor:default;transform:none}
.icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ---------- Cards (portfolio / work) ---------- */
.card{
  position:relative;overflow:hidden;border-radius:0;
  background:var(--bg-soft);isolation:isolate;
  min-height:clamp(300px,42vw,460px);
  display:flex;flex-direction:column;justify-content:flex-end;
  color:var(--invert-fg);
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.card-media{position:absolute;inset:0;z-index:-2}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.card:hover .card-media img{transform:scale(1.06)}
.card::after{ /* legibility gradient */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(var(--umbra-rgb),.05) 0%,rgba(var(--umbra-rgb),.15) 45%,rgba(var(--umbra-rgb),.72) 100%);
}
.card-body{padding:clamp(22px,3vw,38px)}
.card-num{font-size:.8rem;font-weight:600;letter-spacing:.1em;opacity:.7;margin-bottom:.9em;display:block}
.card-title{font-size:clamp(1.1rem,1.5vw,1.5rem);font-weight:600;letter-spacing:-0.01em;line-height:1.1}
.card-text{margin-top:.7em;font-size:.98rem;line-height:1.5;color:rgba(var(--alb-rgb),.82);max-width:34ch}
.card-cta{
  margin-top:1.4em;display:inline-flex;align-items:center;gap:.6em;
  font-size:.72rem;font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase;
}
.card-cta .arrow{width:26px;height:1px;background:currentColor;position:relative;transition:width var(--dur) var(--ease)}
.card-cta .arrow::after{content:"";position:absolute;right:0;top:50%;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.card:hover .card-cta .arrow{width:42px}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.6vw,26px)}
.card-wide{grid-column:1/-1;min-height:clamp(240px,30vw,380px)}

/* ---------- Hairline divider ---------- */
.rule{height:1px;background:var(--line-soft);border:0;margin:0}

/* ---------- Footer ---------- */
.site-footer{background:var(--invert-bg);color:var(--invert-fg);padding-block:clamp(56px,8vh,90px)}
.site-footer a{color:rgba(var(--alb-rgb),.7);transition:color var(--dur) var(--ease)}
.site-footer a:hover{color:var(--invert-fg)}

/* ---------- Reveal on scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}

/* ---------- Accessibility ---------- */
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- Responsive primitives ---------- */
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr}
}