/* =========================================================
   Ana Maria Badea · Portfolio — TEMĂ NOUĂ "STUDIO / EDITORIAL"
   Modern & grafic: bază warm bone, accent tangerine, bento grid,
   tipografie mare, marquee, grain, micro-interacțiuni.
   Reutilizează fonturile Anei (Runiga/Nevera/Zaslia/Priestacy).
   Toate culorile/fonturile sunt variabile CSS — ușor de schimbat.
   ========================================================= */

:root {
  /* --- Paletă închisă, rece --- */
  /* Grafit cu subton albastru, nu verde. Fiind rece și neutru, nu
     intră în competiție cu roșul accent și nici cu culorile calde
     din lucrări — le lasă pe ele să fie singura sursă de culoare. */
  --bg:        #12161a;   /* grafit rece — fundal principal */
  --bg-2:      #1b2127;   /* o treaptă mai sus — rame, secțiuni alternante */
  --paper:     #272e36;   /* panouri ridicate (nav, carduri servicii) — casetele */
  --ink:       #e9edf2;   /* textul — deschis, ușor răcit */
  --ink-soft:  #d0d6de;
  --muted:     #a0a8b2;   /* text secundar (deschis cât să treacă AA și pe --paper) */
  --ink-rgb:   233,237,242; /* liniile și grila urmează textul: deschise pe fundal închis */
  --shadow-rgb:0,0,0;     /* umbrele rămân întunecate, nu urmează textul */

  /* Suprafața „inversă" — contact, footer, CTA, butoane pline, bento.
     Ținută separat de --ink (care e strict culoarea textului), ca tema
     să poată fi întoarsă pe deschis fără ca textul și fundalul să se
     bată cap în cap. */
  --deep:      #0b0e12;   /* fundalul secțiunilor „închise" — încă un pas mai jos */
  --on-deep:   #e9edf2;   /* textul pe ele */

  /* Butoanele pline / pastilele active sunt „inversul paginii".
     Pe temă deschisă ies închise, pe temă închisă ies deschise —
     altfel, aici, ar fi fost închis pe închis, adică invizibile. */
  --invert:    #e9edf2;
  --on-invert: #12161a;
  --line:      rgba(var(--ink-rgb),0.14);
  --line-2:    rgba(var(--ink-rgb),0.08);

  --accent:    #dd2116;   /* roșu — umpluturi: butoane, puncte, borduri (alb pe el = 7:1) */
  /* Roșul ca TEXT e ținut separat: pe fundal închis, #dd2116 pică la
     2.5:1 și devine ilizibil, deci textul roșu folosește varianta
     luminoasă. */
  --accent-text:#ff6050;
  --accent-ink:#b01610;   /* roșu închis — doar pe pastila --accent-soft */
  --accent-soft:#ffd6d0;  /* roșu foarte deschis — pills/kickers, halo în hero */
  --olive:     #4c5a3a;   /* verde măsliniu — al doilea accent (bento) */

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-hero: "Runiga", "Space Grotesk", Georgia, serif;   /* titluri mari (serif statement) */
  --font-tech: "Nevera", "Space Grotesk", system-ui, sans-serif;  /* etichete tehnice ALL-CAPS */
  --font-sign: "Zaslia", "Cormorant Garamond", Georgia, serif;    /* logo/semnătură */
  --font-script: "Priestacy", "Segoe Script", cursive;            /* caligrafic (Thank you) */

  --maxw: 1280px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius: 22px;
  --radius-lg: 34px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 30px 70px -45px rgba(var(--shadow-rgb),.55);
  --shadow-sm: 0 14px 34px -24px rgba(var(--shadow-rgb),.5);

  /* Grile tehnice subtile de fundal (linii grafice, discrete) */
  --grid-ink: linear-gradient(rgba(var(--ink-rgb),.045) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ink-rgb),.045) 1px, transparent 1px);
  --grid-light: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  --grid-size: 54px 54px;
}

/* ---------- Fonturile locale ale Anei ---------- */
@font-face { font-family:"Nevera";    src:url("../assets/fonts/Nevera.otf")    format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Zaslia";    src:url("../assets/fonts/Zaslia.otf")    format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Runiga";    src:url("../assets/fonts/Runiga.otf")    format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Priestacy"; src:url("../assets/fonts/Priestacy.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: none;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #fff; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4.5rem, 11vw, 10rem); position: relative; }

/* Grain overlay (textură fină grafică peste toată pagina) */
.grain {
  position: fixed; inset: -50%; z-index: 9998; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Cursor personalizat (punct + inel) */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor-dot { width: 7px; height: 7px; background: var(--accent); }
.cursor-ring { width: 40px; height: 40px; border: 1.5px solid var(--ink); transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease); }
.cursor-ring.hovering { width: 62px; height: 62px; background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); }
@media (hover: none) { body { cursor: auto; } .cursor-dot, .cursor-ring { display: none; } }

/* ---------- Tipografie utilitară ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-tech); font-weight: 400; text-transform: uppercase;
  font-size: .82rem; letter-spacing: .22em; color: var(--muted); margin: 0;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .6; }

.display {
  font-family: var(--font-hero); font-weight: 400; line-height: .96;
  letter-spacing: -0.01em; margin: 0;
  font-size: clamp(2.4rem, 6.5vw, 5rem);
}
.display .out { color: transparent; -webkit-text-stroke: 1.4px var(--ink); }
.mark { color: var(--accent-text); }

/* Reveal la scroll */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0ms); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* Butoane */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 500; font-size: .95rem; letter-spacing: .01em;
  padding: 1rem 1.8rem; border-radius: 100px; border: 1.5px solid transparent;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--invert); color: var(--on-invert); }
.btn-primary:hover { background: var(--accent); color: #fff; box-shadow: 0 16px 30px -14px var(--accent); }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--invert); background: var(--invert); color: var(--on-invert); }

/* =========================================================
   NAV — pill flotant, centrat
   ========================================================= */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: center; padding: clamp(.9rem, 2vw, 1.4rem) var(--gutter); pointer-events: none; }
.nav {
  pointer-events: auto;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem);
  padding: .55rem .7rem .55rem 1.4rem; border-radius: 100px;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-sm);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.brand { font-family: var(--font-sign); font-weight: 400; font-size: 1.35rem; letter-spacing: .03em; white-space: nowrap; }
.brand b { color: var(--accent-text); }
.nav-links { display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.6rem); list-style: none; margin: 0; padding: 0; }
.nav-links a { font-family: var(--font-display); font-size: .88rem; color: var(--muted); padding: .35rem .2rem; position: relative; transition: color .2s var(--ease); }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px; background: var(--accent); transition: width .25s var(--ease); }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }
.nav-cta { display: inline-flex; align-items: center; gap: .45rem; background: var(--invert); color: var(--on-invert); padding: .6rem 1.15rem; border-radius: 100px; font-family: var(--font-display); font-size: .85rem; transition: background .25s var(--ease), color .25s var(--ease); }
.nav-cta svg { width: 15px; height: 15px; flex: 0 0 auto; }
.nav-cta:hover { background: var(--accent); color: #fff; }
.nav-toggle { display: none; background: none; border: 0; padding: .5rem; cursor: none; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: .3s var(--ease); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: 7rem; overflow: hidden; background-image: var(--grid-ink); background-size: var(--grid-size); }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; z-index: 0; pointer-events: none; }
.blob-1 { width: 46vw; height: 46vw; background: radial-gradient(circle, var(--accent-soft), transparent 68%); top: -12%; right: -8%; }
.blob-2 { width: 34vw; height: 34vw; background: radial-gradient(circle, #c5d3b6, transparent 66%); bottom: -14%; left: -10%; }

.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; width: 100%; }
.hero-status { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-size: .82rem; letter-spacing: .04em; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line-2); padding: .45rem 1rem; border-radius: 100px; margin-bottom: 1.8rem; box-shadow: var(--shadow-sm); }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 0 rgba(52,199,89,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(52,199,89,.55)} 70%{box-shadow:0 0 0 10px rgba(52,199,89,0)} 100%{box-shadow:0 0 0 0 rgba(52,199,89,0)} }

.hero-title { font-family: var(--font-hero); font-weight: 400; line-height: .9; letter-spacing: -0.01em; font-size: clamp(3.6rem, 12vw, 9.5rem); margin: 0 0 1.6rem; }
.hero-title .l2 { color: transparent; -webkit-text-stroke: 1.6px var(--ink); }
.hero-lead { font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.7; color: var(--ink-soft); max-width: 46ch; margin: 0 0 2.2rem; }
.hero-lead em { font-style: normal; color: var(--accent-text); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

/* Media + badge rotativ */
.hero-media { position: relative; justify-self: end; width: min(100%, 440px); }
.hero-media .shot { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 3/4; }
.hero-media .shot img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   ABOUT — editorial
   ========================================================= */
.about { background-color: var(--bg); background-image: var(--grid-ink); background-size: var(--grid-size); }
.about-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.about-media { position: relative; }
.about-media img { width: 100%; border-radius: var(--radius); aspect-ratio: 4/5; object-fit: cover; box-shadow: var(--shadow-sm); }
.about-text .display { margin: 1.2rem 0 1.8rem; }
.about-text p { color: var(--ink-soft); margin: 0 0 1.15rem; max-width: 58ch; }
.about-text p:last-of-type { margin-bottom: 0; }

/* =========================================================
   SERVICES + TOOLS
   ========================================================= */
.services { background-color: var(--bg-2); background-image: var(--grid-ink); background-size: var(--grid-size); }
.sec-head { max-width: 720px; margin-bottom: clamp(2.6rem, 6vw, 4rem); }
.sec-head .display { margin: 1rem 0 1.2rem; }
.sec-head p { color: var(--muted); margin: 0; }

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.svc-card { position: relative; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 2rem 1.7rem; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.svc-no { position: absolute; top: 1.5rem; right: 1.7rem; font-family: var(--font-tech); font-size: .82rem; letter-spacing: .14em; color: var(--muted); }
.svc-ic { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 13px; display: grid; place-items: center; color: var(--accent-text); margin-bottom: 1.4rem; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); }
.svc-ic svg { width: 24px; height: 24px; }
.svc-card:hover .svc-ic { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-3px); }
.svc-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin: 0 0 .7rem; }
.svc-card p { color: var(--muted); font-size: .92rem; margin: 0; }

/* Mission — 2 carduri lățime mare */
.svc-grid.two { grid-template-columns: repeat(2, 1fr); margin-top: clamp(1rem, 2vw, 1.5rem); }

/* Tools — grupuri de tag-uri */
.tools { margin-top: clamp(3rem, 6vw, 4.5rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
.tool-col h4 { font-family: var(--font-tech); text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; color: var(--muted); margin: 0 0 1.1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.tool-col h4 .learn { color: var(--accent-text); }  /* text mic -> roșul închis, ca să treacă AA */
.tag-cloud { display: flex; flex-wrap: wrap; gap: .55rem; }
.tag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: .86rem;
  padding: .5rem .95rem; border-radius: 100px; border: 1px solid var(--line);
  background: var(--paper); transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.tag svg { width: 16px; height: 16px; opacity: .9; flex: 0 0 auto; }
.tag:hover { transform: translateY(-3px); background: var(--invert); color: var(--on-invert); border-color: var(--invert); }

/* =========================================================
   PORTFOLIO — bento grid
   ========================================================= */
.portfolio { background-color: var(--bg); background-image: var(--grid-ink); background-size: var(--grid-size); }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, auto); gap: clamp(.9rem, 1.6vw, 1.35rem); }
.bento-card { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--deep); display: block; box-shadow: var(--shadow-sm); }
/* dimensiuni asimetrice */
.bento-card.big  { grid-column: span 2; grid-row: span 2; }
.bento-card.wide { grid-column: span 2; }
.bento-card.tall { grid-row: span 2; }

.bento-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .5s var(--ease); filter: saturate(1.05); }
.bento-card:hover img { transform: scale(1.07); filter: saturate(1.15) brightness(.9); }
.bento-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,7,.05) 30%, rgba(10,12,7,.78) 100%); z-index: 1; }
.bento-body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.1rem, 2vw, 1.8rem); color: #fff; }
.bento-kicker { font-family: var(--font-tech); text-transform: uppercase; letter-spacing: .2em; font-size: .66rem; color: var(--accent-soft); margin-bottom: .5rem; }
.bento-title { font-family: var(--font-hero); font-weight: 400; line-height: .98; font-size: clamp(1.5rem, 3.4vw, 2.7rem); margin: 0; }
.bento-card.big .bento-title { font-size: clamp(2rem, 5vw, 3.6rem); }
.bento-desc { color: rgba(255,255,255,.82); font-size: .9rem; margin: .6rem 0 0; max-width: 40ch; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s var(--ease), opacity .35s var(--ease), margin .35s var(--ease); }
.bento-card:hover .bento-desc { max-height: 120px; opacity: 1; }
.bento-go { position: absolute; top: clamp(1.1rem, 2vw, 1.6rem); right: clamp(1.1rem, 2vw, 1.6rem); z-index: 3; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--paper) 22%, transparent); border: 1px solid rgba(255,255,255,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; color: #fff; transition: background .3s var(--ease), transform .3s var(--ease); }
.bento-card:hover .bento-go { background: var(--accent); border-color: var(--accent); transform: rotate(45deg); }
.bento-go svg { width: 20px; height: 20px; }

/* Tile de accent solid (grafic, fără imagine) */
.bento-card.solid { background: var(--accent); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.4rem, 2.4vw, 2rem); box-shadow: none; }
.bento-card.solid .solid-kicker { font-family: var(--font-tech); text-transform: uppercase; letter-spacing: .2em; font-size: .66rem; color: var(--accent-soft); }
.bento-card.solid p { margin: 0; font-family: var(--font-display); font-size: .92rem; opacity: .92; }
.bento-card.solid p svg { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.15em; flex: 0 0 auto; }
.bento-card.solid.ink { background: var(--deep); }

/* =========================================================
   CONTACT — bold, email uriaș
   ========================================================= */
.contact { background-color: var(--deep); background-image: var(--grid-light); background-size: var(--grid-size); color: var(--on-deep); }
.contact .eyebrow { color: var(--accent-soft); }
.contact-big { font-family: var(--font-hero); font-weight: 400; line-height: .95; font-size: clamp(2.6rem, 9vw, 7rem); margin: 1.2rem 0 2rem; }
.contact-mail { display: inline-flex; align-items: center; gap: 1rem; font-family: var(--font-hero); font-size: clamp(1.4rem, 4.5vw, 3rem); color: var(--on-deep); border-bottom: 2px solid rgba(255,255,255,.2); padding-bottom: .3rem; transition: color .3s var(--ease), border-color .3s var(--ease); word-break: break-all; }
.contact-mail:hover { color: var(--accent-text); border-color: var(--accent-text); }
.contact-mail svg { width: clamp(24px,5vw,42px); height: clamp(24px,5vw,42px); flex: 0 0 auto; }
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: clamp(3rem, 7vw, 5rem); border-top: 1px solid rgba(255,255,255,.14); padding-top: 2.4rem; }
.contact-item small { font-family: var(--font-tech); text-transform: uppercase; letter-spacing: .16em; font-size: .64rem; color: rgba(255,255,255,.5); display: block; margin-bottom: .5rem; }
.contact-item a, .contact-item span { color: var(--on-deep); font-size: .98rem; transition: color .25s var(--ease); }
.contact-item a:hover { color: var(--accent-text); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background-color: var(--deep); background-image: var(--grid-light); background-size: var(--grid-size); color: var(--on-deep); padding: clamp(3rem,7vw,6rem) 0 2.5rem; border-top: 1px solid rgba(255,255,255,.1); overflow: hidden; }
/* Priestacy e font caligrafic: glifele desenează ~1.78em (1.0 peste
   linia de bază + 0.78 sub ea), mult peste cele 1em pe care le
   rezerva `line-height: 1`. Coada lui „y" ieșea 163px sub cutie și
   cădea peste paragraful de dedesubt. line-height cuprinde acum
   toată înălțimea reală a literelor, deci nu mai e nevoie de
   margini „ghicite". */
.footer-thanks { font-family: var(--font-script); font-weight: 400; text-transform: none; font-size: clamp(2.6rem, 11vw, 8rem); line-height: 1.8; color: var(--on-deep); text-align: center; margin: 0 0 2rem; }
.footer-thanks .amp { color: var(--accent-text); }
.footer-lead { text-align: center; max-width: 54ch; margin: 0 auto 3rem; color: rgba(255,255,255,.72); font-size: clamp(1rem,1.6vw,1.15rem); }
.footer-bar { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.8rem; }
.footer-bar .brand { font-family: var(--font-sign); font-size: 1.3rem; color: var(--on-deep); }
.footer-social { display: flex; gap: .6rem; }
.footer-social a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); display: grid; place-items: center; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.footer-social svg { width: 18px; height: 18px; }
.footer-copy { color: rgba(255,255,255,.5); font-size: .82rem; }

/* =========================================================
   EFECTE PORTATE DIN SITE-UL VECHI
   (linie de scanare la hover + cadre tehnice + linii topografice)
   ========================================================= */
@keyframes scan { 0% { top: 3%; opacity: 0; } 12% { opacity: .95; } 88% { opacity: .95; } 100% { top: 97%; opacity: 0; } }

/* Linie de scanare (roșie) care traversează imaginile la hover */
.bento-card:not(.solid), .mc-row-media, .hero-media .shot { position: relative; }
.bento-card:not(.solid)::after, .mc-row-media::after, .hero-media .shot::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 4; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--accent) 85%, transparent) 22%,
    rgba(255,190,182,.95) 50%,
    color-mix(in srgb, var(--accent) 85%, transparent) 78%, transparent);
}
.bento-card:not(.solid):hover::after,
.mc-row-media:hover::after,
.hero-media .shot:hover::after { animation: scan 1.9s var(--ease) infinite; }

/* Cadre tehnice offset în spatele imaginii hero (motiv din copertă) */
.hero-frame { position: absolute; z-index: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); pointer-events: none; transition: border-color .45s var(--ease), box-shadow .45s var(--ease); }
.hero-frame.a { inset: -18px 32px 32px -18px; }
.hero-frame.b { inset: 32px -18px -18px 32px; border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.hero-media:hover .hero-frame.a { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.hero-media:hover .hero-frame.b { border-color: var(--accent); box-shadow: 0 0 32px -10px var(--accent); }

/* Straturile decorative per-secțiune (.hero-lines / .section-lines) au
   fost înlocuite de stratul ambiental unic — vezi „STRATUL AMBIENTAL". */
.section > .container, .mc-hero > .container { position: relative; z-index: 1; }

/* =========================================================
   CATEGORY PAGES (modern) — prefix .mc-
   ========================================================= */
.btn-light { background: var(--invert); color: var(--on-invert); }
.btn-light:hover { background: var(--accent); color: #fff; box-shadow: 0 16px 30px -14px var(--accent); }

/* Hero categorie — split editorial pe bază bone */
.mc-hero { position: relative; overflow: hidden; padding-top: clamp(7rem, 12vw, 9rem); padding-bottom: clamp(3rem, 7vw, 5rem); background-image: var(--grid-ink); background-size: var(--grid-size); }
.mc-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.mc-back { display: flex; width: fit-content; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: .88rem; color: var(--muted); margin-bottom: 1.6rem; transition: color .2s var(--ease), gap .2s var(--ease); }
.mc-back svg { width: 18px; height: 18px; flex: 0 0 auto; }
.mc-back:hover { color: var(--accent-text); gap: .8rem; }
.mc-kicker { margin-bottom: 1.1rem; }
.mc-hero-title { font-family: var(--font-hero); font-weight: 400; line-height: .92; letter-spacing: -0.01em; font-size: clamp(3rem, 9vw, 6.5rem); margin: 0 0 1.4rem; }
.mc-hero-desc { color: var(--ink-soft); font-size: clamp(1.02rem, 1.6vw, 1.2rem); line-height: 1.7; max-width: 46ch; margin: 0 0 1.8rem; }
.mc-count { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-tech); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; color: var(--accent-ink); background: var(--accent-soft); padding: .45rem 1rem; border-radius: 100px; }
.mc-hero-media { position: relative; justify-self: end; width: min(100%, 460px); }
.mc-hero-media .shot { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/5; }
.mc-hero-media .shot img { width: 100%; height: 100%; object-fit: cover; }

/* Chips navigare între categorii */
.mc-chips-wrap { border-block: 1px solid var(--line); background: var(--bg-2); }
.mc-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding-block: 1.4rem; }
.mc-chip { font-family: var(--font-display); font-size: .9rem; padding: .55rem 1.2rem; border-radius: 100px; border: 1px solid var(--line); color: var(--muted); transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.mc-chip:hover { transform: translateY(-2px); color: var(--ink); border-color: var(--ink); }
.mc-chip.is-active { background: var(--invert); color: var(--on-invert); border-color: var(--invert); }

/* Rânduri proiecte — editorial alternant */
.mc-projects { background-color: var(--bg); background-image: var(--grid-ink); background-size: var(--grid-size); }
.mc-row { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-bottom: clamp(3.5rem, 8vw, 6.5rem); }
.mc-row:last-child { margin-bottom: 0; }
.mc-row.reverse .mc-row-media { order: 2; }
.mc-row-media { position: relative; }
.mc-row-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .5s var(--ease); }
.mc-row-media:hover img { transform: translateY(-6px); }
.mc-row-index { font-family: var(--font-hero); font-size: clamp(2.8rem, 6vw, 4.4rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.3px var(--accent-text); display: block; margin-bottom: .6rem; }
.mc-row-text h3 { font-family: var(--font-hero); font-weight: 400; line-height: 1; font-size: clamp(1.7rem, 3.6vw, 2.7rem); margin: 0 0 1rem; }
.mc-row-text p { color: var(--ink-soft); max-width: 46ch; margin: 0 0 1.4rem; }
.mc-tag { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-tech); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; color: var(--muted); border: 1px solid var(--line); padding: .45rem 1rem; border-radius: 100px; }
.mc-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* Miniaturile cu celelalte cadre ale proiectului */
.mc-shots { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.mc-shot { width: clamp(64px, 8vw, 88px); aspect-ratio: 1; padding: 0; border: 0; border-radius: calc(var(--radius) * .5); overflow: hidden; background: var(--line); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.mc-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .3s var(--ease); filter: saturate(.85) brightness(.94); }
.mc-shot:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.mc-shot:hover img { filter: none; }
.mc-shot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Indicator „zoom" pe coperta proiectului */
.mc-row-media { cursor: pointer; }
.mc-zoom { position: absolute; top: 1rem; right: 1rem; z-index: 3; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: color-mix(in srgb, var(--deep) 55%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.32); opacity: 0; transform: scale(.85); transition: opacity .3s var(--ease), transform .3s var(--ease), background .3s var(--ease); }
.mc-zoom svg { width: 19px; height: 19px; }
.mc-row-media:hover .mc-zoom { opacity: 1; transform: scale(1); background: var(--accent); border-color: var(--accent); }

/* =========================================================
   GRAPHIC & PRINT — passe-partout
   Afișele, meniurile, story-urile și randările de firme luminoase
   vin în formate foarte diferite (portret, peisaj, pătrat). Ca să
   nu se rupă ritmul paginii, fiecare lucrare stă într-o RAMĂ
   IDENTICĂ, iar imaginea e încadrată `contain` — deci nimic nu se
   taie și toate rândurile au exact aceeași înălțime.
   Rama = fundalul de hârtie al temei + linia fină + grila.
   ========================================================= */
:root { --mat-pad: clamp(1rem, 2.4vw, 2.1rem); }

/* rama comună (rând proiect / hero / galerie) */
body[data-category="graphic"] .mc-row-media,
body[data-category="graphic"] .mc-hero-media .shot,
body[data-category="graphic"] .mc-gal {
  /* flex, nu grid: aici înălțimea dată de aspect-ratio e „definită",
     deci `max-height: 100%` pe imagine chiar se rezolvă. Într-un grid
     cu rândul `auto`, calculul devine circular, procentul e ignorat
     și imaginea iese din ramă (o taie `overflow: hidden`). */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  background-color: var(--bg-2);
  background-image: var(--grid-ink);
  background-size: var(--grid-size);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* lucrarea propriu-zisă: încadrată, niciodată tăiată */
body[data-category="graphic"] .mc-row-media img,
body[data-category="graphic"] .mc-hero-media .shot img,
body[data-category="graphic"] .mc-gal img {
  flex: 0 1 auto;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: calc(var(--radius) * .38);
  box-shadow: var(--shadow-sm);
}

/* rândurile de proiect — ramă pătrată: majoritatea lucrărilor de aici
   sunt portret (afișe, meniuri, story-uri), iar un 4/3 le-ar lăsa
   plutind în prea mult passe-partout gol */
body[data-category="graphic"] .mc-row-media { aspect-ratio: 1; padding: var(--mat-pad); box-shadow: var(--shadow-sm); }
/* hero — aceeași ramă 4/5 ca la restul site-ului */
body[data-category="graphic"] .mc-hero-media .shot { aspect-ratio: 4/5; padding: var(--mat-pad); box-shadow: var(--shadow); }

/* miniaturile — un logo tăiat pe pătrat devine ilizibil */
body[data-category="graphic"] .mc-shot { background: var(--bg-2); border: 1px solid var(--line); padding: 5px; }
body[data-category="graphic"] .mc-shot img { object-fit: contain; }

/* galeria — grilă de rame egale în loc de masonry zimțat */
body[data-category="graphic"] .mc-gallery {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.9rem, 1.6vw, 1.35rem);
}
body[data-category="graphic"] .mc-gal { margin: 0; aspect-ratio: 1; padding: calc(var(--mat-pad) * .58); box-shadow: var(--shadow-sm); }

/* Galerie „More visuals" */
.mc-gallery-section { background-color: var(--bg-2); background-image: var(--grid-ink); background-size: var(--grid-size); }
.mc-gallery { columns: 3; column-gap: clamp(.9rem, 1.6vw, 1.35rem); }
.mc-gal { margin: 0 0 clamp(.9rem, 1.6vw, 1.35rem); break-inside: avoid; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-sm); cursor: pointer; }
.mc-gal img { width: 100%; display: block; transition: transform .55s var(--ease), filter .4s var(--ease); }
.mc-gal:hover img { transform: scale(1.05); filter: saturate(1.1); }
.mc-gal:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lb { position: fixed; inset: 0; z-index: 999; display: none; align-items: center; justify-content: center; gap: clamp(.4rem, 2vw, 1.4rem); padding: clamp(1rem, 4vw, 2.5rem); background: color-mix(in srgb, var(--deep) 93%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lb.is-open { display: flex; animation: lb-in .28s var(--ease); }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lb-stage { margin: 0; max-width: min(100%, 1400px); max-height: 100%; display: flex; align-items: center; justify-content: center; }
.lb-stage img { max-width: 100%; max-height: 86vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); box-shadow: 0 40px 90px -30px rgba(0,0,0,.85); }
.lb-nav, .lb-close { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.24); transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.lb-nav svg, .lb-close svg { width: 22px; height: 22px; }
.lb-nav:hover, .lb-close:hover { background: var(--accent); border-color: var(--accent); transform: scale(1.06); }
.lb-close { position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); z-index: 2; }
.lb-count { position: absolute; bottom: clamp(1rem, 3vw, 1.8rem); left: 50%; transform: translateX(-50%); font-family: var(--font-tech); letter-spacing: .18em; font-size: .72rem; color: rgba(255,255,255,.62); }

/* CTA final pe ink */
.mc-cta { background-color: var(--deep); background-image: var(--grid-light); background-size: var(--grid-size); color: var(--on-deep); text-align: center; }
.mc-cta .eyebrow { color: var(--accent-soft); justify-content: center; }
.mc-cta-title { font-family: var(--font-hero); font-weight: 400; line-height: .96; font-size: clamp(2.2rem, 7vw, 4.6rem); margin: 1rem 0 2rem; }
.mc-footer { background: var(--deep); color: rgba(255,255,255,.55); border-top: 1px solid rgba(255,255,255,.12); padding-block: 2rem; font-size: .82rem; text-align: center; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .hero-media { justify-self: start; width: min(78%, 360px); }
  .about-grid { grid-template-columns: 1fr; }
  .about-media { max-width: 440px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .tools { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-card.big { grid-column: span 2; grid-row: span 1; aspect-ratio: 16/10; }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .mc-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .mc-hero-media { justify-self: start; width: min(78%, 380px); }
  .mc-row { grid-template-columns: 1fr; gap: 1.4rem; }
  .mc-row.reverse .mc-row-media { order: 0; }
  .mc-gallery { columns: 2; }
  body[data-category="graphic"] .mc-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .nav-links, .nav-cta { display: none; }
  .nav-links.open { display: flex; position: fixed; top: 5.5rem; left: var(--gutter); right: var(--gutter); flex-direction: column; align-items: flex-start; gap: .2rem; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 1rem 1.3rem; box-shadow: var(--shadow); }
  .nav-links.open a { display: block; width: 100%; padding: .7rem 0; font-size: 1.05rem; }
  .nav-toggle { display: block; }
  .svc-grid, .svc-grid.two { grid-template-columns: 1fr; }
  .lb-nav { position: absolute; bottom: clamp(3rem, 9vw, 4.5rem); z-index: 2; }
  .lb-nav.prev { left: clamp(1rem, 5vw, 2rem); }
  .lb-nav.next { right: clamp(1rem, 5vw, 2rem); }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bento-card, .bento-card.big, .bento-card.wide, .bento-card.tall { grid-column: span 1; grid-row: span 1; aspect-ratio: 4/3; }
  .bento-card.solid { aspect-ratio: auto; min-height: 180px; }
  .contact-grid { grid-template-columns: 1fr; }
  .mc-gallery { columns: 1; }
  body[data-category="graphic"] .mc-gallery { grid-template-columns: 1fr; }
  .lb-stage img { max-height: 72vh; }
}
/* =========================================================
   TOUCH — pe telefon :hover nu există niciodată, deci toate
   efectele de mai sus rămâneau moarte. Clasa .in-view (pusă de
   js/mobile-fx.js cât timp elementul trece prin mijlocul
   ecranului) preia rolul lui :hover, plus feedback la atingere.
   ========================================================= */
@media (hover: none) {
  /* bento — imaginea respiră și descrierea se deschide singură */
  .bento-card.in-view img { transform: scale(1.06); filter: saturate(1.15) brightness(.88); }
  .bento-card.in-view .bento-desc { max-height: 140px; opacity: 1; }
  .bento-card.in-view .bento-go { background: var(--accent); border-color: var(--accent); }
  .bento-card:not(.solid).in-view::after { animation: scan 1.9s var(--ease) infinite; }
  .bento-card.solid.in-view { box-shadow: 0 22px 45px -26px var(--deep); }

  /* pagini de categorie */
  .mc-row-media.in-view img { transform: translateY(-6px); }
  .mc-row-media.in-view::after { animation: scan 1.9s var(--ease) infinite; }
  .mc-gal.in-view img { transform: scale(1.05); filter: saturate(1.1); }
  /* badge-ul de zoom e mereu vizibil pe touch — altfel nimic nu
     sugerează că imaginea se poate deschide */
  .mc-zoom { opacity: 1; transform: scale(1); }
  .mc-row-media.in-view .mc-zoom { background: var(--accent); border-color: var(--accent); }

  /* hero + about + carduri de servicii */
  .hero-media .shot.in-view::after { animation: scan 1.9s var(--ease) infinite; }
  .about-media { overflow: hidden; border-radius: var(--radius); }
  .about-media img { transition: transform .6s var(--ease); }
  .about-media.in-view img { transform: scale(1.04); }
  .svc-card.in-view { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
  .svc-card.in-view .svc-ic { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-3px); }
  .svc-card.in-view .svc-no { color: var(--accent-text); }

  /* feedback la atingere — răspuns imediat la deget */
  .bento-card:active, .mc-gal:active, .mc-row-media:active { transform: scale(.985); }
  .bento-card, .mc-gal, .mc-row-media { transition: transform .18s var(--ease); }
  .mc-shot:active { transform: scale(.92); }
  .btn:active, .nav-cta:active, .mc-chip:active, .contact-item a:active { transform: scale(.95); }
  .lb-nav:active, .lb-close:active { background: var(--accent); border-color: var(--accent); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   FADE ÎNTRE SECȚIUNI
   Secțiunile alternează --bg / --bg-2 / --ink, iar trecerea
   era o muchie dreaptă. Aici punem, în capul fiecărei secțiuni
   care schimbă tonul, un gradient care pornește din culoarea
   secțiunii DE DEASUPRA și se stinge în a ei.

   Gradientul e strecurat SUB grila tehnică în stiva de
   background-image (grila e listată prima = deasupra), ca
   liniile să curgă neîntrerupt prin zona de fade.
   `--grid-ink` conține 2 gradienți, deci fiecare stivă are
   3 straturi — de aceea background-size/-repeat au 3 valori.
   ========================================================= */
:root {
  --fade-h: clamp(150px, 21vw, 360px);      /* trecere obișnuită */
  /* spre secțiunile „deep": ținut sub padding-ul secțiunii
     (min 4.5rem = 72px pe telefon), ca textul să nu cadă în bandă */
  --fade-h-dark: clamp(64px, 9vw, 150px);
}

/* Un gradient în două opriri are o muchie vizibilă acolo unde se
   termină. Aici îl împărțim în șase opriri care imită o curbă
   ease-out: scade repede la început și se stinge lung la final,
   deci ochiul nu mai prinde unde se încheie banda.
   Gradientul primește propria înălțime prin background-size, așa
   că procentele de mai jos sunt raportate la bandă, nu la secțiune. */
.services, .portfolio, .mc-projects, .mc-gallery-section,
.contact, .mc-cta {
  background-image:
    var(--sec-grid, var(--grid-ink)),
    linear-gradient(180deg,
      var(--fade-from) 0%,
      color-mix(in srgb, var(--fade-from) 84%, transparent) 15%,
      color-mix(in srgb, var(--fade-from) 60%, transparent) 32%,
      color-mix(in srgb, var(--fade-from) 34%, transparent) 52%,
      color-mix(in srgb, var(--fade-from) 15%, transparent) 71%,
      color-mix(in srgb, var(--fade-from)  4%, transparent) 87%,
      transparent 100%);
  background-size: var(--grid-size), var(--grid-size), 100% var(--fade-len, var(--fade-h));
  background-repeat: repeat, repeat, no-repeat;
  background-position: 0 0, 0 0, top center;
}

/* --- pagina principală --- */
.services  { --fade-from: var(--bg); }
.portfolio { --fade-from: var(--bg-2); }
.contact   { --fade-from: var(--bg); --fade-len: var(--fade-h-dark); --sec-grid: var(--grid-light); }

/* --- pagini de categorie --- */
.mc-projects        { --fade-from: var(--bg-2); }
.mc-gallery-section { --fade-from: var(--bg); }
.mc-cta             { --fade-from: var(--bg-2); --fade-len: var(--fade-h-dark); --sec-grid: var(--grid-light); }

/* =========================================================
   ACCENTE DE LUMINĂ
   Limbajul grafic din coperta portofoliului: mănunchiuri de
   linii subțiri luminate la mijloc, matrice de puncte și rame
   suprapuse. Curbele stau în stratul SVG din pagini; aici sunt
   accentele care se aplică peste componente.
   Totul e decorativ: `pointer-events: none`, fără efect pe layout.
   ========================================================= */

/* 0 — STRATUL AMBIENTAL
   Înainte fiecare secțiune își avea propriul mănunchi de linii, cu
   geometrie proprie — și doar 3 din 5 secțiuni aveau unul. La scroll
   vedeai linii, apoi două secțiuni goale, apoi alt mănunchi fără
   legătură cu primul. Nicio mască nu repară asta, fiindcă problema
   nu era tăietura, ci că erau insule separate.

   Acum e un singur strat, `fixed` peste tot documentul: câmpul de
   lumină stă pe loc, conținutul curge peste el. Nu mai există granițe
   de traversat, deci nici tranziții de reparat.

   Stă deasupra fundalurilor de secțiune (care sunt opace) dar sub
   nav (z-index 100) — exact ca în copertă, unde liniile trec peste
   imagine și peste blocul de text. */
.ambient {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; overflow: hidden;
}
.ambient-lines { width: 100%; height: 100%; display: block; opacity: .24; }

/* 1 — muchia de sus a suprafețelor ridicate: lumina care „prinde"
   marginea. `::after` e deja luat de linia de scanare, deci ::before.
   Capetele se sting, ca linia să nu iasă din colțurile rotunjite.
   Doar pe suprafețele mari — pe miniaturi devenea zgomot. */
.svc-card::before, .bento-card::before, .mc-row-media::before,
.hero-media .shot::before, .mc-hero-media .shot::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 4;
  background: linear-gradient(90deg, transparent 6%, rgba(255,255,255,.55) 50%, transparent 94%);
  opacity: .5; pointer-events: none;
  transition: opacity .45s var(--ease);
}
.svc-card:hover::before, .bento-card:hover::before,
.mc-row-media:hover::before { opacity: 1; }

/* 2 — rigle luminoase în loc de borduri plate: se aprind la mijloc
   și se sting la capete, ca liniile din referință */
.contact-grid, .footer-bar, .mc-chips-wrap {
  border-color: transparent;
  background-image: linear-gradient(90deg, transparent, rgba(255,255,255,.30) 26%, rgba(255,255,255,.30) 74%, transparent);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top left;
}

/* 3 — halou ambiental în secțiunile închise, ca lucrarea să pară
   luminată din spate, nu lipită pe un fundal plat */
.contact::before, .mc-cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 46% at 16% 2%,  color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%),
    radial-gradient(46% 40% at 88% 14%, rgba(202,255,222,.06), transparent 74%);
}
.contact > .container, .mc-cta > .container { position: relative; z-index: 1; }

/* 3b — BOKEH: discuri de lumină defocalizate, ca într-o fotografie
   cu diafragmă deschisă. Sunt cercuri cu margine netă, înmuiate apoi
   de `filter: blur()` — asta dă discul de bokeh, spre deosebire de un
   gradient radial simplu, care iese ca o pată fără formă.
   Un singur pseudo-element, zero noduri noi în DOM. */
/* Bokeh ROȘU, în același strat ambiental — deci pe tot fundalul
   paginii, nu doar în hero. Discurile au margine netă și sunt
   înmuiate apoi de `blur()`: asta dă discul de bokeh, spre deosebire
   de un gradient radial simplu, care iese ca o pată fără formă.
   Câteva discuri reci, palide, țin echilibrul ca să nu devină roz. */
.ambient::after {
  content: ""; position: absolute; inset: -12%; pointer-events: none;
  background:
    radial-gradient(circle at 14% 23%, color-mix(in srgb, var(--accent) 46%, transparent) 0 48px, transparent 49px),
    radial-gradient(circle at 28% 70%, color-mix(in srgb, var(--accent) 34%, transparent) 0 25px, transparent 26px),
    radial-gradient(circle at 61% 12%, color-mix(in srgb, var(--accent) 24%, transparent) 0 33px, transparent 34px),
    radial-gradient(circle at 80% 77%, color-mix(in srgb, var(--accent) 42%, transparent) 0 29px, transparent 30px),
    radial-gradient(circle at 91% 32%, color-mix(in srgb, var(--accent) 30%, transparent) 0 19px, transparent 20px),
    radial-gradient(circle at 45% 88%, color-mix(in srgb, var(--accent) 22%, transparent) 0 37px, transparent 38px),
    radial-gradient(circle at 70% 48%, color-mix(in srgb, var(--accent) 26%, transparent) 0 15px, transparent 16px),
    radial-gradient(circle at 8% 55%, rgba(233,237,242,.07) 0 17px, transparent 18px),
    radial-gradient(circle at 54% 33%, rgba(233,237,242,.05) 0 13px, transparent 14px);
  filter: blur(13px);
}

/* 4 — liniuța dinaintea fiecărei etichete de secțiune devine
   un mic fascicul, nu o bară moartă */
.eyebrow::before {
  width: 30px;
  background: linear-gradient(90deg, var(--accent-text), transparent);
  opacity: 1;
}