/* =========================================================
   Optical Design — design system
   ========================================================= */

:root {
  /* Colors */
  --bg:         #EEF1F5;
  --bg-elev:   #F5F7FA;
  --surface:   #FFFFFF;
  --ink:       #0E0E10;
  --ink-soft:  #2A2C31;
  --ink-muted: #595D65;
  --line:      #D7DBE2;
  --line-soft: #E4E7EC;
  color-scheme: light;

  /* Cursor light position (set by JS on mousemove, defaults centered) */
  --pointer-x: 50%;
  --pointer-y: 50%;

  /* Accents (per service / per project) */
  --accent-green:  #1FB97A;
  --accent-violet: #4B1F4E;
  --accent-orange: #F36C1E;
  --accent-blue:   #2B6CB0;
  --accent-coral:  #E94B5A;

  /* === Refresh „minimal cu voce" === */
  --accent:      #E94B5A;   /* coral — accent principal de brand */
  --accent-ink:  #FFFFFF;   /* text pe accent */
  --accent-text: #C9303F;   /* coral întunecat pt. TEXT mic pe light (AA ≥4.5:1); suprascris pe dark */
  --success-text: #157A52;  /* verde întunecat pt. TEXT mic pe light (AA ≥4.5:1); suprascris pe dark */
  --fs-display: clamp(56px, 10vw, 132px);  /* hero h1 */
  --fs-says:    clamp(21px, 2.7vw, 32px);  /* frază-manifest */

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", "Times New Roman", Georgia, serif;

  /* Layout */
  --container-max: 1440px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(80px, 10vw, 160px);

  /* Radius */
  --r-pill: 999px;
  --r-md: 14px;
  --r-lg: 24px;
}

[data-theme="dark"] {
  --bg:         #0E0E10;
  --bg-elev:   #16161A;
  --surface:   #1A1A1F;
  --ink:       #F5F7FA;
  --ink-soft:  #C5C9D2;
  --ink-muted: #8B8F98;
  --line:      #2A2C31;
  --line-soft: #1F2126;
  --accent-text: #E94B5A;  /* pe fundal întunecat coralul original trece deja AA */
  --success-text: #1FB97A; /* pe fundal întunecat verdele original trece deja AA */
  color-scheme: dark;
}

[data-theme="dark"] .site-header { background: var(--bg); }
[data-theme="dark"] .btn-arrow { border-color: var(--ink); color: var(--ink); }
[data-theme="dark"] .btn-arrow:hover { background: var(--ink); color: var(--bg); }
[data-theme="dark"] .btn-text { border-bottom-color: var(--ink); }

/* Dark-mode tweaks for status badges (keep contrast) */
[data-theme="dark"] .status-badge--in-progress { color: #93C5FD; background: rgba(43,108,176,.18); border-color: rgba(43,108,176,.4); }
[data-theme="dark"] .status-badge--review      { color: #FCD34D; background: rgba(180,83,9,.18);  border-color: rgba(180,83,9,.4); }
[data-theme="dark"] .status-badge--completed,
[data-theme="dark"] .status-badge--paid        { color: #86EFAC; background: rgba(22,101,52,.18); border-color: rgba(22,101,52,.4); }
[data-theme="dark"] .status-badge--unpaid      { color: #FCA5A5; background: rgba(185,28,28,.18); border-color: rgba(185,28,28,.4); }
[data-theme="dark"] .file-row__version.is-final { background: rgba(22,101,52,.2); color: #86EFAC; border-color: rgba(22,101,52,.4); }

[data-theme="dark"] .upload-zone:hover,
[data-theme="dark"] .upload-zone.is-drag { background: rgba(255,255,255,.03); }

[data-theme="dark"] .lang-switch a.is-active { background: rgba(255,255,255,.06); }
[data-theme="dark"] .chat-msg__bubble { background: rgba(255,255,255,.06); }

/* Theme toggle button */
.theme-toggle {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  background: transparent;
  transition: border-color .2s ease, color .2s ease;
  flex: none;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: inline-block; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Editorial craft — synced from brief.html */
  hanging-punctuation: first allow-end last;
  text-wrap: pretty;
  font-synthesis: none;
}

/* Balance display headlines for prettier line breaks */
.h-display, .h-1, .h-2, .lead, .pull,
.service-detail__title, .project-card__name {
  text-wrap: balance;
}

/* Optical sizing per nivel (Fraunces variable axis) */
.lead { font-variation-settings: "opsz" 36; }
p { font-variation-settings: "opsz" 14; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
/* Inter e încărcat doar la 400/500/600 — boldul implicit nu are ce sintetiza */
strong, b { font-weight: 600; }

/* =========================================================
   Layout primitives
   ========================================================= */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 6vw, 96px); }

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* =========================================================
   Typography
   ========================================================= */

.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(58px, 10vw, 160px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-feature-settings: "ss01" 1, "ss02" 1;
}
.h-display strong {
  font-weight: 500;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  letter-spacing: -0.04em;
}
.h-display em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
}

.h-1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 0.4em;
  font-variation-settings: "opsz" 96, "SOFT" 50;
}
.h-1 strong { font-weight: 500; font-style: italic; }

.h-2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin: 0 0 0.5em;
}
.h-2 strong { font-style: italic; font-weight: 500; }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  margin: 0 0 1.5em;
}

.lead {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 52ch;
}
.lead strong { font-weight: 600; color: var(--ink); }

p { margin: 0 0 1em; }

.caption-tagline {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--ink-muted);
  text-align: center;
}

/* =========================================================
   Header / Nav
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  backdrop-filter: saturate(180%) blur(8px);
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-block: 24px;
}

.site-header__nav {
  display: flex;
  gap: clamp(16px, 2.4vw, 32px);
  font-size: 14px;
  font-weight: 500;
}

.site-header__nav a {
  color: var(--ink-soft);
  transition: color .2s ease;
}
.site-header__nav a:hover,
.site-header__nav a.is-active { color: var(--ink); }

.site-header__logo {
  justify-self: center;
  color: var(--ink);
  width: 140px;
}
.site-header__logo svg { width: 100%; height: auto; }

.lang-switch {
  justify-self: end;
  display: flex;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lang-switch a { padding: 6px 8px; border-radius: 999px; }
.lang-switch a.is-active { color: var(--ink); background: var(--surface); }

@media (max-width: 720px) {
  .site-header__inner { grid-template-columns: auto 1fr auto; }
  .site-header__nav { display: none; }
}

/* =========================================================
   Buttons
   ========================================================= */

.btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  min-width: 200px;
  padding: 0 28px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.btn-arrow:hover { background: var(--ink); color: var(--bg); }
.btn-arrow svg { transition: transform .25s ease; }
.btn-arrow:hover svg { transform: translateX(6px); }

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 15px;
  padding-block: 6px;
  border-bottom: 1px solid var(--ink);
  transition: gap .2s ease;
}
.btn-text:hover { gap: 14px; }

/* =========================================================
   Hero
   ========================================================= */

.hero {
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(80px, 10vw, 140px);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.hero__eyebrow { margin: 0 0 28px; }
.hero__eyebrow em {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.hero__title {
  margin-bottom: 56px;
}
.hero__title .word {
  /* The word block gets overflow:hidden in the editorial reveal styles above */
}
.hero__title .word--accent {
  font-weight: 500;
  font-style: italic;
}

.hero__cta {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.hero__secondary {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
}
.hero__secondary:hover { color: var(--ink); }

.hero__intro {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 38ch;
}
.hero__intro .h-2 { margin-bottom: 0; }

.hero__mark {
  align-self: end;
  justify-self: end;
  width: clamp(180px, 24vw, 320px);
  color: var(--ink);
}
.hero__mark svg { width: 100%; height: auto; }

.hero__cta { align-self: end; }

@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__mark { width: 160px; }
}

/* =========================================================
   Hero „minimal cu voce" (refresh 2026)
   ========================================================= */
.hero--minimal {
  display: flex;
  flex-direction: column;
  min-height: clamp(480px, 78vh, 760px);
}
/* Eyebrow cu liniuță — general (merge și pe subpagini), nu doar pe hero-ul minimal */
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero__eyebrow .bar {
  height: 1px;
  width: 42px;
  background: var(--ink);
  flex: none;
}
.hero--minimal .hero__eyebrow { margin: clamp(40px, 6vw, 72px) 0 16px; }
.hero--minimal .hero__title {
  font-size: var(--fs-display);
  line-height: 0.9;
  letter-spacing: -0.025em;
  margin: 0;
}
.hero--minimal .hero__title .amp {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.hero__says {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-says);
  line-height: 1.3;
  color: var(--ink-soft);
  max-width: 26ch;
  margin: 28px 0 0;
  border-left: 2px solid var(--accent);
  padding-left: 22px;
}
.hero__says em { font-style: italic; }
.hero--minimal .hero__cta { margin-top: clamp(32px, 5vw, 52px); align-self: start; }

/* =========================================================
   Services
   ========================================================= */

.services { background: var(--bg); }

.services__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(24px, 5vw, 80px);
  margin-bottom: clamp(48px, 6vw, 96px);
}

.services__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}

.service {
  display: grid;
  grid-template-columns: 80px 1fr 1fr auto;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  padding-block: clamp(28px, 3.6vw, 44px);
  border-bottom: 1px solid var(--line);
  transition: background .25s ease;
}
.service:hover { background: var(--bg-elev); }

.service__icon {
  width: 56px;
  height: 56px;
  color: var(--ink);
}
.service__icon svg { width: 100%; height: 100%; }

.service__title {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  margin: 0;
}
.service__title small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.service__desc {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  max-width: 48ch;
}

.service__arrow {
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  display: grid;
  place-items: center;
  transition: background .2s ease, color .2s ease, transform .25s ease;
}
.service:hover .service__arrow { background: var(--ink); color: var(--bg); transform: translateX(4px); }

@media (max-width: 900px) {
  .services__intro { grid-template-columns: 1fr; }
  .service {
    grid-template-columns: 56px 1fr auto;
    grid-template-areas:
      "icon title arrow"
      "desc desc desc";
    row-gap: 16px;
  }
  .service__icon { grid-area: icon; width: 44px; height: 44px; }
  .service__title { grid-area: title; }
  .service__arrow { grid-area: arrow; }
  .service__desc { grid-area: desc; }
}

/* =========================================================
   CTA block
   ========================================================= */

.cta-block {
  text-align: center;
  padding-block: clamp(100px, 12vw, 180px);
  border-top: 1px solid var(--line);
  position: relative;
}
.cta-block .h-display { margin-bottom: 32px; }
.cta-block .lead { margin: 0 auto 48px; text-align: center; }

/* Refined editorial CTA */
.cta-block__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cta-block__tag { margin: 0 0 28px; }
.cta-block__title {
  margin: 0 0 32px;
  max-width: 14ch;
}
.cta-block__title .word { display: block; }
.cta-block__lead {
  max-width: 38ch;
  margin: 0 auto 48px;
  text-align: center;
}
.cta-block__lead em { font-style: italic; color: var(--ink); }
.cta-block__actions {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
}
.cta-block__secondary {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
}
.cta-block__secondary:hover { color: var(--ink); }

.cta-block__signature {
  margin-top: clamp(56px, 7vw, 96px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--ink-muted);
  opacity: .85;
}
.cta-block__signature svg { width: 64px; height: 64px; }
.cta-block__signature span {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cta-block__signature em {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  font-size: 13px;
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  padding-block: 64px 40px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-muted);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr 1fr;
  gap: 32px;
  margin-bottom: 64px;
}
.site-footer__legal-id {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-muted);
}
.site-footer__legal-id strong { color: var(--ink-soft); font-weight: 600; }
.site-footer h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 18px;
  text-transform: none;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a:hover { color: var(--ink); }

.site-footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 720px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   Sub-page hero (used on Servicii, Despre, etc.)
   ========================================================= */

.subpage-hero {
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(48px, 6vw, 96px);
}
.subpage-hero__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
.subpage-hero .h-display { margin: 0 0 0.1em; }
.subpage-hero__intro { max-width: 46ch; }

@media (max-width: 880px) {
  .subpage-hero__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Service quick-nav (sticky chips)
   ========================================================= */

.service-nav {
  position: sticky;
  top: 88px;
  z-index: 30;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 16px;
}
.service-nav__inner {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.service-nav__inner::-webkit-scrollbar { display: none; }
.service-nav a {
  flex: none;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.service-nav a:hover,
.service-nav a.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* =========================================================
   Service detail blocks
   ========================================================= */

.service-detail {
  padding-block: clamp(72px, 8vw, 128px);
  border-top: 1px solid var(--line);
  scroll-margin-top: 160px;
}
.service-detail:first-of-type { border-top: 0; }

.service-detail__head {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.service-detail__icon {
  width: 72px;
  height: 72px;
  color: var(--accent, var(--ink));
}
.service-detail__num {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--accent, var(--ink-muted));
  text-transform: uppercase;
  margin: 6px 0 14px;
}
.service-detail__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
  font-variation-settings: "opsz" 96;
}
.service-detail__title strong { font-weight: 500; font-style: italic; }

.service-detail__body {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.service-detail__desc {
  color: var(--ink-soft);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
}
.service-detail__desc p:last-child { margin-bottom: 0; }
.service-detail__desc strong { color: var(--ink); font-weight: 600; }

.deliverables {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 40px);
}
.deliverables h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 20px;
}
.deliverables ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.deliverables li {
  padding-left: 26px;
  position: relative;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.deliverables li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 14px;
  height: 1px;
  background: var(--accent, var(--ink));
}

@media (max-width: 880px) {
  .service-detail__head {
    grid-template-columns: 64px 1fr;
    gap: 20px;
  }
  .service-detail__icon { width: 56px; height: 56px; }
  .service-detail__body { grid-template-columns: 1fr; }
}

/* =========================================================
   Stats grid (Despre)
   ========================================================= */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: clamp(28px, 3vw, 48px) clamp(20px, 2.4vw, 36px);
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(64px, 8vw, 132px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0 0 14px;
  color: var(--ink);
  font-feature-settings: "lnum" 1, "tnum" 1;
  font-variation-settings: "opsz" 144;
}
.stat__num em {
  font-style: italic;
  color: var(--accent-coral);
  font-weight: 400;
}
.stat__num sup {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.38em;
  font-weight: 400;
  margin-left: 2px;
  vertical-align: top;
  color: var(--ink-muted);
}
.stat__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.stat__label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

@media (max-width: 880px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { border-bottom: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }
}

/* =========================================================
   Story / two-column with side mark
   ========================================================= */

.story {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.story__body p {
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 1.2em;
}
.story__body p:last-child { margin-bottom: 0; }
.story__body strong { color: var(--ink); font-weight: 600; }
.story__body em { font-style: italic; color: var(--ink); font-family: var(--font-display); font-weight: 500; font-size: 1.05em; }

/* Drop cap on first paragraph of story */
.story__body > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  float: left;
  font-size: 5.4em;
  line-height: 0.82;
  padding: 0.08em 0.14em 0 0;
  color: var(--accent-coral);
}
@supports (initial-letter: 4) {
  .story__body > p:first-of-type::first-letter {
    float: none;
    font-size: 1em;
    padding: 0 0.1em 0 0;
    -webkit-initial-letter: 4;
    initial-letter: 4;
  }
}
@media (max-width: 720px) {
  .story__body > p:first-of-type::first-letter { font-size: 4em; }
}

/* Pull quote embedded in story */
.story__pull {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: clamp(32px, 4vw, 48px) 0;
  padding: 24px 0 24px 24px;
  border-left: 2px solid var(--accent-coral);
  max-width: 30ch;
}
.story__pull em { font-style: italic; color: var(--ink-soft); }
.story__pull strong { font-weight: 500; font-style: italic; }

/* Studio colophon — a composed brand plate, not a logo in a box */
.story__aside {
  position: sticky;
  top: 120px;
  padding: clamp(36px, 3.4vw, 52px) clamp(28px, 3vw, 44px);
  background:
    radial-gradient(130% 90% at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
    linear-gradient(180deg, var(--bg-elev), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(20px, 2vw, 28px);
}
.story__aside-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.story__aside-mark {
  width: 58%;
  max-width: 156px;
  height: auto;
}
.story__aside-rule {
  width: 36px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.story__aside .caption-tagline {
  margin: 0;
  text-align: center;
  color: var(--ink-soft);
}

/* ----------------------------------------------------------------
   Theme-adaptive brand logos
   These SVGs are loaded via <img>, so they cannot inherit the page
   text color (currentColor resolves to black inside an <img>). We
   recolor them per theme with filters so they stay legible on both
   the light and dark backgrounds.
     • header / footer logos ship as WHITE artwork -> darken in light
     • story mark is a black (currentColor) SVG     -> whiten in dark
   ---------------------------------------------------------------- */
[data-theme="light"] .site-header__logo img,
[data-theme="light"] .site-footer img,
[data-theme="light"] .auth-card__logo img,
[data-theme="light"] .admin-sidebar__brand img { filter: brightness(0); }
[data-theme="dark"]  .story__aside-mark { filter: brightness(0) invert(1); }

@media (max-width: 880px) {
  .story { grid-template-columns: 1fr; }
  .story__aside { position: static; }
}

/* =========================================================
   Principles list
   ========================================================= */

.principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.principle {
  background: var(--bg);
  padding: clamp(28px, 3vw, 44px);
  transition: background .2s ease;
}
.principle:hover { background: var(--surface); }
.principle__num {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--ink-muted);
  margin: 0 0 24px;
  text-transform: uppercase;
}
.principle__num::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
}
.principle__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 0 0 18px;
  font-variation-settings: "opsz" 96, "SOFT" 50;
}
.principle__title em { font-style: italic; color: var(--ink-soft); font-weight: 400; }
.principle__title strong { font-weight: 500; font-style: italic; }
.principle__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 720px) {
  .principles { grid-template-columns: 1fr; }
}

/* =========================================================
   Contact form + info
   ========================================================= */

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.form { display: grid; gap: 24px; }

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 10px; }
.field label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.field label::before {
  content: '';
  width: 22px;
  height: 1px;
  background: currentColor;
  display: inline-block;
  opacity: .65;
}
.field label .req { color: var(--accent-text); margin-left: 2px; }

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(14,14,16,0.06);
}
.field textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.5;
  font-family: inherit;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%230E0E10' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
}

.field__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.field__check input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--ink);
  flex: none;
}

.form__submit {
  justify-self: start;
  margin-top: 8px;
}

.form__status {
  font-size: 14px;
  color: var(--ink-muted);
  padding: 12px 0;
  display: none;
}
.form__status.is-visible { display: block; }
.form__status.is-success { color: var(--success-text); }
.form__status.is-error { color: var(--accent-text); }

.contact-info {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: clamp(32px, 3.4vw, 48px);
  display: grid;
  gap: 32px;
  position: sticky;
  top: 120px;
}
.contact-info::before {
  content: 'Repertoar · Punct de contact';
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 4px;
}
.contact-info__group h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 10px;
  text-transform: none;
}
.contact-info__group p,
.contact-info__group a {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 24;
  letter-spacing: -0.005em;
}
.contact-info__group a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.contact-info__social {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.contact-info__social a {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.contact-info__social a:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  text-decoration: none;
}

@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info { position: static; }
}

/* =========================================================
   Portfolio filter + grid
   ========================================================= */

.portfolio-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.portfolio-filter button {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.portfolio-filter button:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.portfolio-filter button.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.portfolio-filter button .count {
  margin-left: 6px;
  font-size: 11px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  position: relative;
}

/* Ambient color blobs behind the grid — give the glass panels something to pick up */
.portfolio-grid::before {
  content: "";
  position: absolute;
  inset: -10% -5%;
  z-index: -1;
  background:
    radial-gradient(45% 40% at 12% 10%, rgba(75, 31, 78, 0.18), transparent 60%),
    radial-gradient(45% 40% at 88% 30%, rgba(31, 185, 122, 0.16), transparent 60%),
    radial-gradient(40% 40% at 30% 75%, rgba(243, 108, 30, 0.14), transparent 60%),
    radial-gradient(40% 40% at 80% 90%, rgba(43, 108, 176, 0.16), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}

.project-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: #fff;
  grid-column: span 4;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  background: var(--c, #333);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 -40px 80px -40px rgba(0, 0, 0, 0.45) inset,
    0 20px 40px -20px rgba(14, 14, 16, 0.25);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.project-card.is-large { grid-column: span 6; aspect-ratio: 16 / 10; }
.project-card.is-tall { grid-column: span 4; aspect-ratio: 3 / 4; }
.project-card.is-hidden { display: none; }

/* Real cover image (set via `cover` in projects.js) sits under the text */
.project-card__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* Scrim so white title/meta stay legible over a photo */
.project-card.has-cover::before {
  background: linear-gradient(180deg, rgba(0,0,0,0.38) 0%, transparent 32%, transparent 52%, rgba(0,0,0,0.58) 100%);
}
.project-card.has-cover::after { opacity: 0; }

.project-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 -40px 80px -40px rgba(0, 0, 0, 0.5) inset,
    0 36px 70px -20px rgba(14, 14, 16, 0.4);
}

/* Sheen / depth highlights */
.project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 18% 0%, rgba(255, 255, 255, 0.28), transparent 55%),
    radial-gradient(70% 60% at 100% 100%, rgba(0, 0, 0, 0.35), transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Subtle decorative orb in top-right */
.project-card::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
}

.project-card__name {
  position: absolute;
  top: 28px;
  left: 28px;
  right: 28px;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 44px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0;
  z-index: 2;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.22);
  font-variation-settings: "opsz" 96;
}

.project-card__count {
  position: absolute;
  top: 30px;
  right: 28px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
  margin: 0;
  z-index: 2;
}

/* Glass meta panel — the actual glass effect */
.project-card__meta {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  z-index: 2;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 24px -8px rgba(0, 0, 0, 0.25);
}

.project-card__title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
  color: #fff;
}
.project-card__cat {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 4px;
}
.project-card__year {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
  flex: none;
  letter-spacing: 0;
}

@media (max-width: 880px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .project-card,
  .project-card.is-large,
  .project-card.is-tall { grid-column: span 1; aspect-ratio: 4 / 3; }
  .project-card__name { font-size: 22px; top: 22px; left: 22px; right: 22px; }
  .project-card__count { top: 26px; right: 22px; }
  .project-card__meta { left: 14px; right: 14px; bottom: 14px; padding: 12px 16px; }
}
@media (max-width: 480px) {
  .portfolio-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Project modal + gallery
   ========================================================= */

body.modal-open { overflow: hidden; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2vw, 36px);
}
.modal.is-open { display: flex; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 14, 16, 0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  animation: modal-fade .3s ease;
}

@keyframes modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 1200px;
  max-height: calc(100vh - 32px);
  background: var(--bg);
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  z-index: 1;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.5);
  animation: modal-in .35s cubic-bezier(.2,.7,.2,1);
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.6);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink);
  transition: background .2s ease, transform .25s ease;
  font-size: 20px;
  line-height: 1;
}
.modal__close:hover { background: #fff; transform: rotate(90deg); }
.modal__close svg { width: 16px; height: 16px; }

/* Gallery side */
.modal__gallery {
  position: relative;
  background: var(--c, var(--ink));
  min-height: 100%;
  overflow: hidden;
}

.modal__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.modal__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.modal__slide-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 18% 0%, rgba(255,255,255,0.28), transparent 55%),
    radial-gradient(70% 60% at 100% 100%, rgba(0,0,0,0.35), transparent 60%);
  pointer-events: none;
}

.modal__slide-label {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 68px);
  letter-spacing: -0.025em;
  line-height: 0.98;
  text-align: center;
  z-index: 1;
  text-shadow: 0 2px 24px rgba(0,0,0,0.32);
  font-variation-settings: "opsz" 144, "SOFT" 60;
  max-width: 16ch;
  text-wrap: balance;
}

/* Editorial corner marker on gallery side (top-left) */
.modal__gallery::before {
  content: attr(data-marker);
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 5;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  pointer-events: none;
}

.modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 10;
  transition: background .2s ease, transform .2s ease;
}
.modal__nav:hover { background: rgba(255,255,255,0.25); }
.modal__nav--prev { left: 20px; }
.modal__nav--next { right: 20px; }
.modal__nav:disabled { opacity: 0.35; cursor: not-allowed; }
.modal__nav svg { width: 16px; height: 16px; }

.modal__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  z-index: 10;
  font-variant-numeric: tabular-nums;
}

/* Content side */
.modal__content {
  padding: clamp(32px, 4vw, 56px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.modal__cat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 16px;
}
.modal__cat::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

.modal__title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.028em;
  margin: 0;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.modal__title strong { font-weight: 500; font-style: italic; }
.modal__title em { font-style: italic; color: var(--ink-soft); font-weight: 400; }

.modal__desc {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  font-variation-settings: "opsz" 36;
  letter-spacing: -0.008em;
  max-width: 44ch;
}
.modal__desc strong { color: var(--ink); font-weight: 500; font-style: italic; }

/* Case study (Challenge → Approach → Result) */
.modal__casestudy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 2px 0;
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.modal__casestudy[hidden] { display: none; }
.modal__cs-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  align-items: baseline;
}
.modal__cs-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.modal__cs-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
@media (max-width: 560px) {
  .modal__cs-row { grid-template-columns: 1fr; gap: 4px; }
}

.modal__section-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 14px;
}
.modal__section-title::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

.modal__services {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line-soft);
}
.modal__services li {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  letter-spacing: -0.005em;
  display: flex;
  align-items: baseline;
  gap: 14px;
  counter-increment: modal-svc;
}
.modal__services {
  counter-reset: modal-svc;
}
.modal__services li::before {
  content: counter(modal-svc, decimal-leading-zero);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  min-width: 28px;
  flex: none;
  font-feature-settings: "tnum" 1;
}

.modal__links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
}

.modal__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.modal__link:hover {
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-2px);
}
.modal__link svg { width: 14px; height: 14px; }

@media (max-width: 880px) {
  .modal__panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    border-radius: 18px;
  }
  .modal__gallery { aspect-ratio: 4 / 3; min-height: 0; }
  .modal__content { padding: 28px; gap: 18px; }
  .modal__nav { width: 40px; height: 40px; }
  .modal__nav--prev { left: 12px; }
  .modal__nav--next { right: 12px; }
}

/* Real image inside a gallery slide (overrides the placeholder) */
.modal__slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modal__slide-caption {
  position: absolute;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0;
  z-index: 5;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   Admin project edit (inside modal)
   ========================================================= */

.modal__admin-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: 12px;
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.modal__admin-bar button {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
  text-transform: none;
  transition: background .15s ease, color .15s ease;
}
.modal__admin-bar button:hover { background: transparent; color: var(--ink); }

.modal__edit {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.modal__edit h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 12px;
}
.modal__edit-section + .modal__edit-section {
  border-top: 1px solid var(--line-soft);
  padding-top: 24px;
}
.modal__edit-hint {
  font-size: 13px;
  color: var(--ink-muted);
  margin: -4px 0 14px;
}

/* Links grid in edit mode */
.edit-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.edit-link {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  align-items: center;
}
.edit-link span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.edit-link input {
  width: 100%;
  border: 1.5px solid var(--line);
  background: var(--surface);
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  transition: border-color .2s ease;
}
.edit-link input:focus { outline: 0; border-color: var(--ink); }

@media (max-width: 720px) {
  .edit-links { grid-template-columns: 1fr; }
}

/* Gallery editor */
.edit-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.edit-slide {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.edit-slide__preview {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}
.edit-slide__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.edit-slide__fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.edit-slide__fields input {
  width: 100%;
  border: 1.5px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
}
.edit-slide__fields input:focus { outline: 0; border-color: var(--ink); }
.edit-slide__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.edit-slide__row input[type="url"] { flex: 1; min-width: 0; }
.edit-slide__file-btn {
  flex: none;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  color: var(--ink-soft);
}
.edit-slide__file-btn:hover { border-color: var(--ink); color: var(--ink); }
.edit-slide__file-input { display: none; }

.edit-slide__remove {
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: color .15s ease, background .15s ease;
  align-self: start;
}
.edit-slide__remove:hover { color: var(--accent-coral); background: var(--surface); }
.edit-slide__remove svg { width: 16px; height: 16px; }

.edit-add-slide {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  align-self: flex-start;
  margin-top: 8px;
  transition: border-color .2s ease, color .2s ease;
}
.edit-add-slide:hover { border-color: var(--ink); color: var(--ink); border-style: solid; }

/* Edit actions */
.modal__edit-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 8px;
}
.modal__edit-actions .btn-arrow { min-width: 180px; height: 52px; }
.modal__edit-reset {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-coral);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
}
.modal__edit-reset:hover { background: rgba(233, 75, 90, 0.08); }

/* Indicator that a project has admin overrides */
.modal__override-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-orange);
  color: #fff;
  margin-left: 8px;
}

/* =========================================================
   Header account widget (injected by JS into all public pages)
   ========================================================= */

.site-header__right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}
.site-header__right .lang-switch { justify-self: auto; }

.header-account { position: relative; display: flex; align-items: center; }

.header-account__login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  transition: background .2s ease, color .2s ease;
}
.header-account__login:hover { background: var(--ink); color: var(--bg); }
.header-account__login svg { width: 14px; height: 14px; }

.header-account__user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.header-account__user:hover { border-color: var(--ink); background: var(--surface); }

.header-account__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  flex: none;
}
.header-account__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-account__chev {
  width: 12px;
  height: 12px;
  margin-left: 2px;
  color: var(--ink-muted);
  transition: transform .2s ease;
}
.header-account__user[aria-expanded="true"] .header-account__chev { transform: rotate(180deg); }

.header-account__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 20px 50px -20px rgba(14,14,16,0.25);
  z-index: 60;
}
.header-account__menu[hidden] { display: none; }

.header-account__menu-name {
  padding: 8px 12px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.header-account__menu-email {
  padding: 0 12px 12px;
  font-size: 13px;
  color: var(--ink);
  margin: 0;
  border-bottom: 1px solid var(--line-soft);
  word-break: break-all;
}
.header-account__menu a,
.header-account__menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background .15s ease;
  text-decoration: none;
}
.header-account__menu a:hover,
.header-account__menu button:hover { background: var(--bg); }
.header-account__menu hr {
  border: 0;
  border-top: 1px solid var(--line-soft);
  margin: 6px 4px;
}
.header-account__menu .is-danger { color: var(--accent-text); }

@media (max-width: 720px) {
  .header-account__name { display: none; }
  .header-account__chev { display: none; }
  .header-account__login span { display: none; }
}

/* =========================================================
   Auth — login page
   ========================================================= */

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(20px, 4vw, 48px);
  background:
    radial-gradient(60% 45% at 20% 0%, rgba(75, 31, 78, 0.06), transparent 60%),
    radial-gradient(50% 40% at 90% 100%, rgba(243, 108, 30, 0.05), transparent 60%),
    var(--bg);
  position: relative;
}
[data-theme="dark"] .auth-page {
  background:
    radial-gradient(60% 45% at 20% 0%, rgba(149, 87, 153, 0.10), transparent 60%),
    radial-gradient(50% 40% at 90% 100%, rgba(243, 108, 30, 0.07), transparent 60%),
    var(--bg);
}

.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border-radius: 24px;
  padding: clamp(36px, 4.4vw, 56px);
  box-shadow: 0 40px 100px -30px rgba(14, 14, 16, 0.22);
  position: relative;
  border: 1px solid var(--line-soft);
}
.auth-card::before {
  content: 'Acces · Vol. I';
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.auth-card__logo {
  display: block;
  width: 140px;
  margin: 16px auto 36px;
  color: var(--ink);
}
.auth-card__logo img { width: 100%; height: auto; }

.auth-card__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.98;
  margin: 0 0 12px;
  text-align: center;
  font-variation-settings: "opsz" 96;
}
.auth-card__title em { font-style: italic; color: var(--ink-soft); font-weight: 400; }
.auth-card__title strong { font-weight: 500; font-style: italic; }

.auth-card__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  color: var(--ink-muted);
  text-align: center;
  margin: 0 0 32px;
  font-variation-settings: "opsz" 24;
}

.auth-card .form { gap: 20px; }

.auth-card .btn-arrow {
  width: 100%;
  min-width: 0;
}

.auth-card__hint {
  margin-top: 28px;
  padding: 16px 18px;
  background: var(--bg);
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-muted);
  border-left: 2px solid var(--accent-coral);
}
.auth-card__hint strong { color: var(--ink); font-weight: 600; }

/* =========================================================
   Admin shell
   ========================================================= */

.admin-page {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
  background: var(--bg);
}

.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
}

.admin-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px 24px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.admin-sidebar__brand img { width: 110px; height: auto; }

.admin-sidebar__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 16px 8px 8px;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.admin-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: background .15s ease, color .15s ease;
}
.admin-nav a:hover { background: var(--bg); color: var(--ink); }
.admin-nav a.is-active {
  background: var(--ink);
  color: var(--bg);
}
.admin-nav svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.admin-sidebar__footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.admin-sidebar__user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
}
.admin-sidebar__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 14px;
}
.admin-sidebar__user-name {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.admin-sidebar__user-role {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 2px 0 0;
}

.admin-logout {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  margin-top: 8px;
  transition: background .15s ease, color .15s ease;
}
.admin-logout:hover {
  background: var(--bg);
  color: var(--accent-coral);
}

.admin-main {
  padding: clamp(24px, 3vw, 48px);
  overflow-x: auto;
}

.admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.admin-topbar__title {
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
.admin-topbar__sub {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 4px 0 0;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.admin-stat {
  background: var(--surface);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--line-soft);
}
.admin-stat__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 12px;
}
.admin-stat__num {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 6px;
  color: var(--ink);
}
.admin-stat__hint {
  font-size: 12px;
  color: var(--ink-muted);
  margin: 0;
}

.admin-section {
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--line-soft);
  padding: clamp(20px, 2.4vw, 32px);
  margin-bottom: 24px;
}
.admin-section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
}
.admin-section__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.008em;
  margin: 0;
  font-variation-settings: "opsz" 36;
}
.admin-section__title em { font-style: italic; font-weight: 400; color: var(--ink-muted); }
.admin-section__action {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  transition: background .15s ease, color .15s ease;
}
.admin-section__action:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.admin-placeholder {
  padding: 32px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
}

@media (max-width: 880px) {
  .admin-page { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .admin-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .admin-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Avatar lens — deterministic per-user, no uploads
   ========================================================= */

.od-avatar {
  position: relative;
  width: var(--size, 40px);
  height: var(--size, 40px);
  border-radius: 50%;
  background: var(--c, var(--ink));
  color: #fff;
  display: inline-grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  isolation: isolate;
}
/* Optical-lens rings inside the avatar */
.od-avatar::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.22), transparent 55%);
  pointer-events: none;
}
.od-avatar::after {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
  pointer-events: none;
}
.od-avatar__letter {
  position: relative;
  z-index: 1;
  font-weight: 600;
  font-size: calc(var(--size, 40px) * 0.4);
  letter-spacing: -0.02em;
  line-height: 1;
}

.od-avatar--xs { --size: 28px; }
.od-avatar--xl { --size: 128px; }

/* =========================================================
   Profile page — header card + section nav + tables
   ========================================================= */

.profile-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(20px, 3vw, 32px);
  align-items: center;
  padding: clamp(24px, 3vw, 36px);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  margin-bottom: 32px;
}
.profile-header__meta { min-width: 0; }
.profile-header__name {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.022em;
  margin: 0 0 8px;
  font-variation-settings: "opsz" 72;
}
.profile-header__email {
  font-size: 14px;
  color: var(--ink-muted);
  margin: 0 0 12px;
  word-break: break-all;
}
.profile-header__badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
}
.profile-badge--admin { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.profile-badge--seed { background: var(--accent-orange); color: #fff; border-color: var(--accent-orange); }
.profile-badge--member { background: var(--accent-green); color: #fff; border-color: var(--accent-green); }

@media (max-width: 720px) {
  .profile-header {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "avatar meta"
      "since since";
  }
  .profile-header .od-avatar { grid-area: avatar; }
  .profile-header__meta { grid-area: meta; }
  .profile-header__since { grid-area: since; }
}

.profile-header__since {
  text-align: right;
  font-size: 12px;
  color: var(--ink-muted);
}
.profile-header__since strong { display: block; font-size: 15px; color: var(--ink); font-weight: 600; margin-top: 4px; }

/* Empty state inside admin-section cards */
.empty-state {
  text-align: center;
  padding: 36px 24px;
  color: var(--ink-muted);
  border: 1px dashed var(--line);
  border-radius: 12px;
}
.empty-state__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: var(--bg);
  border-radius: 50%;
  color: var(--ink-muted);
}
.empty-state__icon svg { width: 24px; height: 24px; }
.empty-state__title {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
}
.empty-state__desc {
  font-size: 14px;
  margin: 0 0 16px;
}

/* Quick-actions grid */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.quick-actions a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition: background .2s ease, transform .2s ease;
}
.quick-actions a:hover { background: var(--surface); transform: translateY(-2px); }
.quick-actions a svg { width: 20px; height: 20px; color: var(--ink-soft); flex: none; }

@media (max-width: 720px) {
  .quick-actions { grid-template-columns: 1fr; }
}

/* =========================================================
   Client portal — status badges
   ========================================================= */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--bg);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}
.status-badge--in-progress { color: #2B6CB0; background: #EAF1FA; border-color: #C7DAF0; }
.status-badge--review      { color: #B45309; background: #FEF3C7; border-color: #FCD34D; }
.status-badge--completed   { color: #166534; background: #DCFCE7; border-color: #86EFAC; }
.status-badge--archived    { color: var(--ink-muted); background: var(--bg); border-color: var(--line); }
.status-badge--paid        { color: #166534; background: #DCFCE7; border-color: #86EFAC; }
.status-badge--unpaid      { color: #B91C1C; background: #FEE2E2; border-color: #FCA5A5; }

/* =========================================================
   Client portal — projects grid
   ========================================================= */

.client-projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 8px;
}

.client-project-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  color: inherit;
}
.client-project-card:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
  box-shadow: 0 18px 36px -22px rgba(14,14,16,.32);
}

.client-project-card__thumb {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--c, var(--ink));
  display: flex;
  align-items: flex-end;
  padding: 18px;
  color: #fff;
  overflow: hidden;
}
.client-project-card__thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(80% 80% at 0% 100%, rgba(0,0,0,.18), transparent 60%);
  pointer-events: none;
}
.client-project-card__thumb-label {
  position: relative;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  opacity: .96;
}
.client-project-card__thumb-cat {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.22);
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.client-project-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 20px;
}
.client-project-card__title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.005em;
}
.client-project-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-muted);
}
.client-project-card__meta .dot { width: 3px; height: 3px; background: currentColor; border-radius: 50%; opacity: .6; }
.client-project-card__cta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
}
.client-project-card__cta span { color: var(--ink); }
.client-project-card__cta svg { width: 14px; height: 14px; transition: transform .2s ease; }
.client-project-card:hover .client-project-card__cta svg { transform: translateX(4px); }

/* Status filter tabs (mini) */
.status-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.status-filter button {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.status-filter button:hover { border-color: var(--ink); color: var(--ink); }
.status-filter button.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.status-filter button .count {
  margin-left: 6px;
  font-size: 11px;
  opacity: .7;
}

/* =========================================================
   Project detail page — formats tabs + file rows
   ========================================================= */

.project-hero {
  padding-block: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
}
.project-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  font-size: 13px;
  color: var(--ink-muted);
}
.project-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-weight: 500;
}
.project-hero__back:hover { color: var(--ink); }
.project-hero__back svg { width: 14px; height: 14px; }

.project-hero__grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.project-hero__color {
  aspect-ratio: 1;
  background: var(--c, var(--ink));
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 72px;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.project-hero__color::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(255,255,255,.2), transparent 55%),
    radial-gradient(80% 80% at 0% 100%, rgba(0,0,0,.2), transparent 60%);
}
.project-hero__color span { position: relative; z-index: 1; }

.project-hero__info { display: flex; flex-direction: column; gap: 16px; }
.project-hero__cat { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); }
.project-hero__title { font-size: clamp(32px, 4vw, 52px); font-weight: 600; line-height: 1.05; letter-spacing: -0.015em; margin: 0; }
.project-hero__desc { color: var(--ink-soft); max-width: 60ch; }
.project-hero__badges { display: flex; gap: 8px; flex-wrap: wrap; }
.project-hero__services { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.project-hero__services span {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--bg-elev);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
}

@media (max-width: 720px) {
  .project-hero__grid { grid-template-columns: 1fr; }
  .project-hero__color { width: 100px; aspect-ratio: 1; font-size: 40px; }
}

/* Sticky format tabs */
.format-tabs {
  position: sticky;
  top: 88px;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding-block: 12px;
}
.format-tabs__inner {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.format-tabs__inner::-webkit-scrollbar { display: none; }
.format-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.format-tab:hover { color: var(--ink); border-color: var(--ink); }
.format-tab.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.format-tab__count {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  color: inherit;
  opacity: .8;
}
.format-tab.is-active .format-tab__count { background: rgba(255,255,255,.18); }

/* Format panel */
.format-panel { padding-block: clamp(32px, 4vw, 56px); }
.format-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.format-panel__title { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.format-panel__desc { color: var(--ink-muted); font-size: 14px; margin: 6px 0 0; max-width: 56ch; }

/* File list rows */
.file-list {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.file-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--surface);
  transition: background .2s ease;
}
.file-row:hover { background: var(--bg-elev); }
.file-row__icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--bg);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: none;
}
.file-row__name { min-width: 0; }
.file-row__name strong {
  display: block;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-row__name span {
  font-size: 12px;
  color: var(--ink-muted);
}
.file-row__version {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-muted);
  border: 1px solid var(--line);
}
.file-row__version.is-final {
  background: #DCFCE7;
  color: #166534;
  border-color: #86EFAC;
}
.file-row__download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  transition: background .2s ease, color .2s ease;
  white-space: nowrap;
}
.file-row__download:hover { background: var(--ink); color: var(--bg); }
.file-row__download svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .file-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "icon name version"
      "icon name download";
    row-gap: 6px;
  }
  .file-row__icon { grid-area: icon; }
  .file-row__name { grid-area: name; }
  .file-row__version { grid-area: version; justify-self: end; }
  .file-row__download { grid-area: download; justify-self: end; padding: 6px 10px; font-size: 12px; }
}

/* Empty format state */
.format-empty {
  text-align: center;
  padding: 64px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  color: var(--ink-muted);
}

/* Sticky bottom download bar */
.download-bar {
  position: sticky;
  bottom: 16px;
  z-index: 30;
  margin-top: 40px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-pill);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 24px 48px -20px rgba(14,14,16,.45);
}
.download-bar__info { display: flex; flex-direction: column; }
.download-bar__info strong { font-size: 14px; font-weight: 600; }
.download-bar__info span { font-size: 12px; opacity: .7; }
.download-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--bg);
  color: var(--ink);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition: background .2s ease;
}
.download-bar__btn:hover { background: #fff; }
[data-theme="dark"] .download-bar__btn:hover { color: #0E0E10; } /* text lizibil pe hover-ul alb */
.download-bar__btn svg { width: 14px; height: 14px; }

/* =========================================================
   Mobile hamburger menu / drawer
   ========================================================= */

.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
}
.menu-toggle svg { width: 18px; height: 18px; }
.menu-toggle[aria-expanded="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

@media (max-width: 720px) {
  .menu-toggle { display: inline-flex; }
}

.mobile-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(360px, 92vw);
  background: var(--bg);
  z-index: 100;
  transform: translateX(100%);
  visibility: hidden; /* keep links unfocusable while closed */
  transition: transform .3s ease, visibility 0s .3s;
  display: flex;
  flex-direction: column;
  padding: 24px;
  box-shadow: -24px 0 48px -16px rgba(14,14,16,.18);
}
.mobile-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .3s ease, visibility 0s;
}
.mobile-drawer__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14,14,16,.36);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.mobile-drawer__backdrop.is-open { opacity: 1; pointer-events: auto; }
.mobile-drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.mobile-drawer__close {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--ink);
  background: transparent;
}
.mobile-drawer__close svg { width: 16px; height: 16px; }

.mobile-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block: 24px;
}
.mobile-drawer__nav a {
  display: block;
  padding: 14px 4px;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  letter-spacing: -0.01em;
}
.mobile-drawer__nav a:last-child { border-bottom: 0; }
.mobile-drawer__nav a.is-active { color: var(--ink); }
.mobile-drawer__nav a.is-active::after { content: ' →'; }

.mobile-drawer__footer {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* =========================================================
   Toast notifications
   ========================================================= */

.toast-stack {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(380px, calc(100vw - 40px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 24px 48px -16px rgba(14,14,16,.32);
  pointer-events: auto;
  transform: translateX(20px);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.toast.is-visible { transform: translateX(0); opacity: 1; }
.toast__icon {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
}
.toast__icon svg { width: 12px; height: 12px; }
.toast__body { flex: 1; }
.toast__body strong { display: block; font-weight: 600; }
.toast__body span { display: block; opacity: .76; font-size: 13px; margin-top: 2px; }
.toast__close {
  margin-left: 4px;
  color: inherit;
  opacity: .6;
  background: transparent;
  border: 0;
  padding: 2px;
}
.toast__close:hover { opacity: 1; }
.toast__close svg { width: 14px; height: 14px; }

.toast--success { background: #166534; color: #ECFDF5; }
.toast--error   { background: #B91C1C; color: #FEF2F2; }
.toast--info    { background: var(--ink); color: var(--bg); }
.toast--warning { background: #B45309; color: #FFFBEB; }

/* =========================================================
   Client panel — refined dashboard layout
   ========================================================= */

.client-panel {
  max-width: 1040px;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
}

/* Stats strip — under profile header */
.client-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  overflow: hidden;
}
@media (max-width: 720px) {
  .client-stats { grid-template-columns: repeat(2, 1fr); }
}
.client-stat {
  padding: clamp(20px, 2.4vw, 32px);
  border-right: 1px solid var(--line-soft);
}
.client-stat:last-child { border-right: 0; }
@media (max-width: 720px) {
  .client-stat:nth-child(2) { border-right: 0; }
  .client-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
}
.client-stat__num {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 60px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
  color: var(--ink);
  font-feature-settings: "lnum" 1, "tnum" 1;
  font-variation-settings: "opsz" 96;
}
.client-stat__num.is-zero { color: var(--ink-muted); }
.client-stat__num span {
  font-style: italic;
  font-size: 0.4em;
  color: var(--ink-muted);
  font-weight: 400;
  margin-left: 2px;
}
.client-stat__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

/* Attention callout */
.attention {
  background: linear-gradient(120deg, rgba(233,75,90,.06), rgba(233,75,90,.02));
  border: 1px solid rgba(233,75,90,.32);
  border-left: 4px solid var(--accent-coral);
  border-radius: 18px;
  padding: clamp(20px, 2.6vw, 28px) clamp(24px, 3vw, 36px);
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .attention {
  background: linear-gradient(120deg, rgba(233,75,90,.10), rgba(233,75,90,.03));
}
.attention__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
@media (max-width: 720px) {
  .attention__inner { grid-template-columns: 1fr; }
}
.attention__tag {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-coral);
  margin: 0 0 8px;
}
.attention__tag em {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.attention__msg {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.3;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  max-width: 48ch;
  font-variation-settings: "opsz" 36;
}
.attention__msg strong { font-weight: 500; font-style: italic; }
.attention__cta {
  height: 48px;
  min-width: 0;
  padding: 0 24px;
  font-size: 13px;
}

/* Activity timeline */
.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.activity-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 18px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.activity-item:last-child { border-bottom: 0; }
.activity-item.is-unread {
  position: relative;
  padding-left: 16px;
}
.activity-item.is-unread::before {
  content: '';
  position: absolute;
  left: 0; top: 26px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent-coral);
}
.activity-item__when {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-muted);
  font-variation-settings: "opsz" 14;
  font-feature-settings: "tnum" 1;
}
.activity-item__body {
  min-width: 0;
}
.activity-item__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.35;
}
.activity-item__title a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.activity-item__title a:hover { border-bottom-color: currentColor; }
.activity-item__body p {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.45;
  max-width: none;
}
.activity-item__type {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  padding-top: 2px;
}
@media (max-width: 640px) {
  .activity-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .activity-item__type { order: 1; }
  .activity-item__when { font-size: 12px; order: 3; }
}

/* Documents (invoices) list */
.docs-list {
  display: flex;
  flex-direction: column;
}
.doc-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.doc-row:last-child { border-bottom: 0; }
.doc-row__icon {
  width: 38px;
  height: 46px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 10px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  flex: none;
}
.doc-row__info { min-width: 0; }
.doc-row__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 2px;
  line-height: 1.2;
}
.doc-row__meta {
  font-size: 12px;
  color: var(--ink-muted);
  margin: 0;
  font-feature-settings: "tnum" 1;
}
.doc-row__amount {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  font-feature-settings: "lnum" 1, "tnum" 1;
  text-align: right;
  white-space: nowrap;
}
.doc-row__amount em { font-style: italic; color: var(--ink-muted); font-size: 0.7em; margin-left: 4px; }
.doc-row__download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.doc-row__download:hover { background: var(--ink); color: var(--bg); }
.doc-row__download svg { width: 12px; height: 12px; }

@media (max-width: 640px) {
  .doc-row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon info"
      "icon meta"
      "amt  dl";
    row-gap: 4px;
  }
  .doc-row__icon { grid-area: icon; }
  .doc-row__info { grid-area: info; }
  .doc-row__amount { grid-area: amt; text-align: left; font-size: 16px; }
  .doc-row__download { grid-area: dl; justify-self: end; }
}

/* Settings (collapsible) */
.settings-section { padding: 0; overflow: hidden; }
.settings {
  --duration: 0.3s;
}
.settings__head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: clamp(20px, 2.4vw, 32px);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background .2s ease;
}
.settings__head::-webkit-details-marker { display: none; }
.settings__head:hover { background: var(--bg); }
.settings__head .admin-section__title { margin: 0; }
.settings__meta {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.settings__chev {
  width: 20px;
  height: 20px;
  color: var(--ink-muted);
  transition: transform .25s ease;
}
.settings[open] .settings__chev { transform: rotate(180deg); }

.settings__body {
  padding: 0 clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.4vw, 44px);
  border-top: 1px solid var(--line-soft);
  padding-top: clamp(20px, 2.4vw, 32px);
}
.settings__group-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  font-weight: 500;
  margin: 0 0 16px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.settings__group-title em { font-style: italic; color: var(--ink-soft); font-weight: 400; }
@media (max-width: 640px) {
  .settings__meta { display: none; }
}

/* Bottom shortcuts row */
.client-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  overflow: hidden;
  margin-top: 8px;
}
@media (max-width: 640px) { .client-shortcuts { grid-template-columns: 1fr; } }
.client-shortcuts a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 24px;
  background: var(--surface);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  transition: background .2s ease, padding-left .25s cubic-bezier(.2,.8,.2,1);
}
.client-shortcuts a:hover {
  background: var(--bg-elev);
  padding-left: 32px;
}
.client-shortcuts a svg { width: 16px; height: 12px; flex: none; color: var(--ink-muted); transition: transform .25s ease, color .25s ease; }
.client-shortcuts a:hover svg { transform: translateX(4px); color: var(--ink); }

/* =========================================================
   Admin — data tables + project list
   ========================================================= */

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.admin-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.admin-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  vertical-align: middle;
}
.admin-table tbody tr:hover { background: var(--bg-elev); }
.admin-table tbody tr.is-empty:hover { background: transparent; }
.admin-table__client {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 500;
}
.admin-table__project-title {
  color: var(--ink);
  font-weight: 500;
}
.admin-table__project-title small {
  display: block;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 400;
  margin-top: 2px;
}
.admin-table__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.admin-table__actions button {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: transparent;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.admin-table__actions button:hover { border-color: var(--ink); color: var(--ink); }
.admin-table__actions button.is-danger { color: #B91C1C; border-color: #FCA5A5; }
.admin-table__actions button.is-danger:hover { background: #FEE2E2; }
[data-theme="dark"] .admin-table__actions button.is-danger { color: #FCA5A5; border-color: rgba(185,28,28,.4); }
[data-theme="dark"] .admin-table__actions button.is-danger:hover { background: rgba(185,28,28,.18); color: #FCA5A5; }

@media (max-width: 720px) {
  .admin-table thead { display: none; }
  .admin-table tr {
    display: grid;
    gap: 6px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .admin-table td {
    padding: 0;
    border: 0;
  }
}

/* Filter row above table */
.admin-filterbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}
.admin-filterbar input[type="search"],
.admin-filterbar select {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  min-width: 200px;
}
.admin-filterbar input[type="search"]:focus,
.admin-filterbar select:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--surface);
}
.admin-filterbar__spacer { margin-left: auto; }
.admin-filterbar .btn-arrow { height: 44px; min-width: 0; padding: 0 22px; font-size: 14px; }

/* =========================================================
   Admin — upload zones
   ========================================================= */

.upload-zone {
  border: 2px dashed var(--line);
  border-radius: var(--r-lg);
  padding: 32px 24px;
  text-align: center;
  color: var(--ink-muted);
  transition: border-color .2s ease, background .2s ease;
  cursor: pointer;
}
.upload-zone:hover,
.upload-zone.is-drag {
  border-color: var(--ink);
  background: var(--bg-elev);
  color: var(--ink-soft);
}
.upload-zone svg {
  width: 36px;
  height: 36px;
  margin: 0 auto 10px;
  color: var(--ink-soft);
}
.upload-zone strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.upload-zone input[type="file"] { display: none; }

.format-group {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  background: var(--surface);
  margin-bottom: 16px;
}
.format-group__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}
.format-group__head h3 { font-size: 16px; font-weight: 600; margin: 0; }
.format-group__head select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  background: var(--bg);
}
.format-group__remove {
  font-size: 12px;
  color: #B91C1C;
  background: transparent;
  border: 0;
  padding: 4px 8px;
}
[data-theme="dark"] .format-group__remove { color: #FCA5A5; }

/* =========================================================
   Forms (extends existing .form)
   ========================================================= */

.form__row--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 720px) {
  .form__row--3 { grid-template-columns: 1fr; }
}
.form .field select,
.form .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  background: var(--surface);
  color: var(--ink);
}
.form .field select:focus,
.form .field textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.form .field textarea { min-height: 96px; resize: vertical; }
.form .field__hint {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 4px;
}

/* =========================================================
   Inline modal (re-used by admin for project edit)
   ========================================================= */

.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14,14,16,.42);
  z-index: 80;
  display: none;
}
.dialog-backdrop.is-open { display: block; }
.dialog {
  position: fixed;
  top: 5vh;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 32px));
  background: var(--surface);
  border-radius: var(--r-lg);
  z-index: 90;
  overflow: hidden;
  display: none;
  grid-template-rows: auto 1fr auto;
  box-shadow: 0 32px 64px -24px rgba(14,14,16,.5);
}
.dialog.is-open { display: grid; }
.dialog__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}
.dialog__title { font-size: 18px; font-weight: 600; margin: 0; }
.dialog__close {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.dialog__body { padding: 24px; overflow-y: auto; }
.dialog__footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

/* =========================================================
   Approval — pin comments on image
   ========================================================= */

.approval-canvas {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-elev);
  cursor: crosshair;
  user-select: none;
}
.approval-canvas img { width: 100%; height: auto; display: block; pointer-events: none; }
.approval-canvas__placeholder {
  aspect-ratio: 16/10;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  background: linear-gradient(135deg, var(--bg-elev), var(--surface));
}
.approval-pin {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50% 50% 50% 0;
  background: var(--accent-coral);
  color: #fff;
  border: 2px solid #fff;
  transform: translate(-50%, -100%) rotate(-45deg);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 6px 14px -4px rgba(0,0,0,.4);
  cursor: pointer;
}
.approval-pin span { transform: rotate(45deg); }
.approval-pin.is-resolved { background: #166534; }

.approval-comments { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.approval-comment {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.approval-comment__pin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-coral);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
}
.approval-comment.is-resolved .approval-comment__pin { background: #166534; }
.approval-comment__body p { margin: 0 0 4px; font-size: 14px; color: var(--ink); }
.approval-comment__body small { color: var(--ink-muted); font-size: 12px; }
.approval-comment__resolve {
  font-size: 12px;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  align-self: center;
}
.approval-comment__resolve:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* =========================================================
   Portfolio toolbar (filter + view toggle row)
   ========================================================= */

.portfolio-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.portfolio-view {
  display: inline-flex;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.portfolio-view button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.portfolio-view button:hover { color: var(--ink); }
.portfolio-view button.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(14,14,16,.08);
}
.portfolio-view button svg { width: 14px; height: 14px; flex: none; }

/* =========================================================
   Portfolio — Index (list) view
   ========================================================= */

.portfolio-list {
  border-top: 1px solid var(--line);
}
.portfolio-row {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr auto 80px;
  gap: clamp(20px, 3vw, 48px);
  align-items: baseline;
  padding: clamp(20px, 2.4vw, 36px) 12px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background .3s ease, color .3s ease, padding-left .35s cubic-bezier(.2, .8, .2, 1);
  isolation: isolate;
}
.portfolio-row.is-hidden { display: none; }

.portfolio-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c, var(--ink));
  z-index: -1;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.65, 0, .35, 1), opacity .35s ease;
}
.portfolio-row:hover::before,
.portfolio-row:focus-visible::before {
  opacity: 1;
  transform: scaleX(1);
}
.portfolio-row:hover,
.portfolio-row:focus-visible {
  padding-left: 28px;
  color: #fff;
}
.portfolio-row:hover .portfolio-row__num,
.portfolio-row:hover .portfolio-row__cat,
.portfolio-row:hover .portfolio-row__year {
  color: rgba(255,255,255,.78);
}

.portfolio-row__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  transition: color .3s ease;
}
.portfolio-row__name {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.6vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.022em;
  font-variation-settings: "opsz" 96;
}
.portfolio-row__cat {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color .3s ease;
  white-space: nowrap;
}
.portfolio-row__year {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 400;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  transition: color .3s ease;
}

@media (max-width: 720px) {
  .portfolio-row {
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 16px;
    align-items: start;
  }
  .portfolio-row__num { grid-row: span 2; align-self: center; }
  .portfolio-row__name { grid-column: 2; }
  .portfolio-row__cat { grid-column: 2; font-size: 11px; }
  .portfolio-row__year { display: none; }
}

/* =========================================================
   Optical aperture hover on project cards (auto-applied)
   ========================================================= */

.project-card .aperture-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    160px circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
    rgba(255,255,255,.22) 0%,
    rgba(255,255,255,.06) 30%,
    transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
  mix-blend-mode: screen;
  z-index: 1;
}
.project-card:hover .aperture-light { opacity: 1; }

/* Project card title gets a subtle scale on hover */
.project-card__name { transition: transform .55s cubic-bezier(.2, .8, .2, 1); transform-origin: top left; }
.project-card:hover .project-card__name { transform: translateY(-3px); }

/* =========================================================
   Editorial design tokens: grain, spotlight
   ========================================================= */

/* Subtle film grain — fixed overlay, doesn't repaint on scroll */
.grain {
  position: fixed;
  inset: -4%;
  pointer-events: none;
  z-index: 1;
  opacity: .2;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  animation: grain-shift 6s steps(4) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, 2%); }
  100% { transform: translate(0, 0); }
}
[data-theme="dark"] .grain {
  mix-blend-mode: overlay;
  opacity: .09;
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; inset: 0; }
}

/* Cursor-following spotlight (subtle ambient light) */
.spotlight {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    520px circle at var(--pointer-x) var(--pointer-y),
    color-mix(in oklab, var(--ink) 7%, transparent) 0%,
    transparent 55%
  );
  z-index: 0;
  opacity: 0;
  transition: opacity .8s ease;
}
.spotlight:hover::before,
.spotlight:focus-within::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }
[data-theme="dark"] .spotlight::before {
  background: radial-gradient(
    520px circle at var(--pointer-x) var(--pointer-y),
    color-mix(in oklab, var(--ink) 18%, transparent) 0%,
    transparent 55%
  );
}

/* Editorial markers (numbered / dated labels) */
.editorial-num {
  font-family: var(--font-display);
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-muted);
  font-size: clamp(14px, 1.2vw, 16px);
  letter-spacing: 0;
}
.editorial-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.editorial-tag::before {
  content: '';
  width: 24px; height: 1px;
  background: currentColor;
  display: inline-block;
}

/* Magnetic button effect removed — the cursor-follow read as unprofessional. */

/* Sliding link underline */
.link-slide {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 4px;
}
.link-slide::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}
.link-slide:hover::after {
  transform-origin: left center;
  transform: scaleX(1);
}

/* Word-stagger reveal for hero display headline (block per word) */
.hero__title .word {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}
.hero__title .word > span {
  display: inline-block;
  transform: translateY(110%);
  animation: word-rise 1.1s cubic-bezier(.2, .8, .25, 1) forwards;
}
.hero__title .word > span > em {
  font-style: italic;
  color: var(--ink-soft);
  font-weight: 400;
  padding-inline: 0.05em;
}
.hero__title .word:nth-child(1) > span { animation-delay: .1s; }
.hero__title .word:nth-child(2) > span { animation-delay: .22s; }
.hero__title .word:nth-child(3) > span { animation-delay: .34s; }
.hero__title .word:nth-child(4) > span { animation-delay: .46s; }
@keyframes word-rise {
  from { transform: translateY(110%); filter: blur(7px); }
  55%  { filter: blur(0); }
  to   { transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__title .word > span { transform: none !important; animation: none !important; filter: none !important; }
}

/* Subpage h-display: phrases per .word block (no animation) */
.subpage-hero .h-display .word { display: block; }

/* Optical signature: aperture-style hover ring (used on project cards) */
.aperture {
  position: relative;
  overflow: hidden;
}
.aperture::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
      transparent 0%,
      transparent 18%,
      rgba(255,255,255,.06) 28%,
      transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
  mix-blend-mode: screen;
}
.aperture:hover::after { opacity: 1; }

/* =========================================================
   Motion: page enter + scroll reveal
   ========================================================= */

/* Opacity-only on purpose: animating `transform` on <body> (with fill-mode
   `both`) leaves an identity transform on it permanently, which makes <body>
   the containing block for every position:fixed descendant and breaks modals,
   the cookie banner and any popup appended to body. Do NOT add transform here. */
@keyframes od-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  animation: od-fade-in .4s ease both;
}

/* Reveal-on-scroll utility (toggled by IntersectionObserver) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   Pricing packages
   ========================================================= */

.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 8px;
}

.package-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 24px 24px;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.package-card:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
  box-shadow: 0 18px 36px -22px rgba(14,14,16,.32);
}
.package-card--featured {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.package-card--featured .package-card__desc,
.package-card--featured .package-card__features li,
.package-card--featured .package-card__delivery { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.package-card--featured .package-card__price span,
.package-card--featured .package-card__tag { color: color-mix(in srgb, var(--bg) 78%, transparent); }
.package-card--featured .package-card__cta {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
}
.package-card--featured .package-card__cta:hover { background: #fff; }

.package-card__tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin: 0 0 12px;
}
.package-card__name {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.package-card__price {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  line-height: 1;
}
.package-card__price span {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0;
}
.package-card__price-ron {
  margin: -6px 0 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0;
}
.package-card--featured .package-card__price-ron { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.package-card__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 20px;
}

.package-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  border-top: 1px solid var(--line-soft);
  padding-top: 20px;
}
.package-card--featured .package-card__features { border-top-color: color-mix(in srgb, var(--bg) 12%, transparent); }
.package-card__features li {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
  padding-left: 22px;
  position: relative;
}
.package-card__features li::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 12px; height: 8px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: .9;
}

.package-card__cta {
  width: 100%;
  height: 48px;
  min-width: 0;
  padding: 0 20px;
  font-size: 13px;
  justify-content: center;
}
.package-card__delivery {
  text-align: center;
  font-size: 12px;
  color: var(--ink-muted);
  margin: 12px 0 0;
}

/* =========================================================
   Onboarding wizard
   ========================================================= */

.onboarding-stepper {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 24px;
}
.onboarding-stepper span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink-muted);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line);
  flex: none;
}
.onboarding-stepper span.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.onboarding-stepper span.is-done {
  background: #DCFCE7;
  color: #166534;
  border-color: #86EFAC;
}
.onboarding-content h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.onboarding-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) {
  .onboarding-cards { grid-template-columns: 1fr; }
}
.onboarding-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.onboarding-card:hover { border-color: var(--ink-soft); }
.onboarding-card:has(input:checked) {
  border-color: var(--ink);
  background: var(--bg-elev);
}
.onboarding-card input {
  margin-top: 2px;
  accent-color: var(--ink);
}
.onboarding-card div { flex: 1; }
.onboarding-card strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.onboarding-card span { display: block; font-size: 12px; color: var(--ink-muted); line-height: 1.4; }

/* =========================================================
   Notifications bell + panel
   ========================================================= */

.notif-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.notif-bell {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s ease, color .2s ease;
}
.notif-bell:hover { color: var(--ink); border-color: var(--ink); }
.notif-bell svg { width: 16px; height: 16px; }
.notif-bell__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--accent-coral);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg);
}

.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(380px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 24px 48px -16px rgba(14,14,16,.32);
  z-index: 60;
  max-height: 480px;
  overflow: hidden;
  display: none;
  grid-template-rows: auto 1fr auto;
}
.notif-panel.is-open { display: grid; }
.notif-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.notif-panel__head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.notif-panel__head button {
  font-size: 12px;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  padding: 4px;
}
.notif-panel__head button:hover { color: var(--ink); }

.notif-list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 340px;
}
.notif-item {
  display: block;
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  width: 100%;
  transition: background .15s ease;
  color: inherit;
  text-decoration: none;
  position: relative;
}
.notif-item:hover { background: var(--bg-elev); }
.notif-item.is-unread::before {
  content: '';
  position: absolute;
  left: 8px; top: 22px;
  width: 6px; height: 6px;
  background: var(--accent-coral);
  border-radius: 999px;
}
.notif-item.is-unread { padding-left: 22px; }
.notif-item__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.3;
}
.notif-item__body {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-item__when {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 4px;
}
.notif-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--ink-muted);
  font-size: 13px;
}
.notif-panel__foot {
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 12px;
  color: var(--ink-muted);
}

/* =========================================================
   Consent banner
   ========================================================= */

.consent-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 200;
  background: #0E0E10;
  color: #F5F7FA;
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: 0 24px 48px -16px rgba(14,14,16,.45);
  transform: translateY(20px);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  max-width: 720px;
  margin: 0 auto;
}
.consent-banner.is-visible { transform: translateY(0); opacity: 1; }
.consent-banner__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
}
.consent-banner__text { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.consent-banner__text strong { font-weight: 600; }
.consent-banner__text span { color: rgba(255,255,255,.72); line-height: 1.45; }
.consent-banner__text a { color: inherit; border-bottom: 1px solid rgba(255,255,255,.5); }
.consent-banner__actions { display: flex; gap: 12px; align-items: center; }
/* Refuse and Accept get equal visual weight (ePrivacy / Legea 506/2004) */
.consent-btn {
  height: 42px;
  padding: 0 22px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.consent-btn--solid { background: #F5F7FA; color: #0E0E10; border: 1.5px solid #F5F7FA; }
.consent-btn--solid:hover { background: #fff; border-color: #fff; }
.consent-btn--ghost { background: transparent; color: #F5F7FA; border: 1.5px solid rgba(245,247,250,.55); }
.consent-btn--ghost:hover { border-color: #F5F7FA; }

@media (max-width: 640px) {
  .consent-banner__inner { grid-template-columns: 1fr; }
  .consent-banner__actions { justify-content: stretch; }
  .consent-banner__actions .consent-btn { flex: 1; }
}

/* =========================================================
   Project chat (client ↔ designer)
   ========================================================= */

.project-chat {
  display: grid;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.project-chat__messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  max-height: 480px;
  overflow-y: auto;
}
.chat-msg {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 80%;
}
.chat-msg.is-mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg__avatar {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--c, var(--ink));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
}
.chat-msg__bubble {
  background: var(--bg-elev);
  padding: 10px 14px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  word-wrap: break-word;
}
.chat-msg.is-mine .chat-msg__bubble {
  background: var(--ink);
  color: var(--bg);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 4px;
}
.chat-msg__meta {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 4px;
}
.chat-msg.is-mine .chat-msg__meta { text-align: right; }
.chat-msg__author { font-weight: 600; color: var(--ink); }

.project-chat__compose {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  align-items: flex-end;
}
.project-chat__compose textarea {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  resize: none;
  font: inherit;
  font-size: 14px;
  background: var(--surface);
  color: var(--ink);
  min-height: 44px;
  max-height: 120px;
  line-height: 1.4;
}
.project-chat__compose textarea:focus { outline: none; border-color: var(--ink); }
.project-chat__compose button {
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  border: 0;
  font-weight: 500;
  font-size: 14px;
  transition: opacity .15s ease;
  flex: none;
}
.project-chat__compose button:hover { opacity: .85; }
.project-chat__compose button:disabled { opacity: .3; cursor: not-allowed; }

.chat-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--ink-muted);
}

/* =========================================================
   Admin — Messages inbox layout
   ========================================================= */

.messages-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 960px) {
  .messages-layout { grid-template-columns: 1fr; }
}

.messages-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  max-height: 70vh;
  overflow-y: auto;
}

.message-row {
  position: relative;
  display: block;
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  transition: background .15s ease;
  width: 100%;
}
.message-row:last-child { border-bottom: 0; }
.message-row:hover { background: var(--bg-elev); }
.message-row.is-active { background: var(--bg-elev); }
.message-row.is-unread::before {
  content: '';
  position: absolute;
  left: 6px; top: 22px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-coral);
}
.message-row.is-unread { padding-left: 22px; }
.message-row.is-active { padding-left: 22px; border-left: 2px solid var(--ink); }

.message-row__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.message-row__top strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-row__top span { font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.message-row__subject {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0 0 4px;
  font-weight: 500;
}
.message-row__subject span { color: var(--ink-muted); font-weight: 400; }
.message-row__preview {
  font-size: 12px;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.message-row__star { position: absolute; top: 12px; right: 12px; color: #F59E0B; font-size: 14px; }
.message-row__replied { position: absolute; bottom: 10px; right: 12px; color: #166534; font-size: 14px; }
[data-theme="dark"] .message-row__replied { color: #86EFAC; }

.messages-detail {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px;
  min-height: 400px;
}
.message-detail__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.message-detail__head h2 { margin: 0 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.message-detail__email { margin: 0; font-size: 13px; color: var(--ink-soft); }
.message-detail__email a { color: var(--ink-soft); border-bottom: 1px solid currentColor; }
.message-detail__when { margin: 4px 0 0; font-size: 12px; color: var(--ink-muted); }

.message-detail__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.message-detail__meta span {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-soft);
}
.message-detail__meta span strong { color: var(--ink); font-weight: 600; margin-right: 4px; }

.message-detail__body {
  font-family: inherit;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  background: var(--bg-elev);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0 0 20px;
}

.message-detail__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.message-detail__actions .btn-arrow {
  height: 44px;
  min-width: 0;
  padding: 0 22px;
  font-size: 13px;
}

/* =========================================================
   Utilities
   ========================================================= */

.text-muted { color: var(--ink-muted); }
.no-wrap { white-space: nowrap; }

/* =========================================================
   Package configurator (servicii.html)
   ========================================================= */
.configurator {
  display: grid;
  grid-template-columns: 1.55fr 0.95fr;
  gap: 40px;
  align-items: start;
  margin-top: 48px;
}
.configurator__steps { display: flex; flex-direction: column; gap: 36px; }

.config-step__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}
.config-step__num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.config-step__title { font-size: 19px; font-weight: 600; margin: 0; }
.config-step__hint { font-size: 13px; color: var(--ink-muted); margin: 2px 0 0; }

/* Option cards (radio + checkbox share the look) */
.config-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.config-options--single { grid-template-columns: 1fr; }

.config-opt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.config-opt:hover { border-color: var(--ink-soft); }
.config-opt input { position: absolute; opacity: 0; pointer-events: none; }
.config-opt__box {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--surface);
  transition: background .18s ease, border-color .18s ease;
}
.config-opt input[type="radio"] ~ .config-opt__box { border-radius: 999px; }
.config-opt input[type="checkbox"] ~ .config-opt__box { border-radius: 6px; }
.config-opt__box svg { width: 12px; height: 12px; opacity: 0; transition: opacity .15s ease; }
.config-opt input:checked ~ .config-opt__box { background: var(--ink); border-color: var(--ink); }
.config-opt input:checked ~ .config-opt__box svg { opacity: 1; }
.config-opt input:checked ~ .config-opt__body .config-opt__name { }
.config-opt:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(14,14,16,.05); }
.config-opt input:focus-visible ~ .config-opt__box { box-shadow: 0 0 0 3px rgba(14,14,16,.18); }

.config-opt__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.config-opt__name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.config-opt__meta { font-size: 12.5px; color: var(--ink-muted); }
.config-opt__price { font-size: 13px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }

/* Summary / estimate panel — sticky */
.config-summary {
  position: sticky;
  top: 24px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.config-summary__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.config-summary__estimate {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 5vw, 46px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.config-summary__estimate small { font-size: 16px; color: var(--ink-muted); font-family: var(--font-sans); }
.config-summary__ron { display: block; margin-top: 8px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-muted); }
.config-summary__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.config-summary__lines li { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-soft); }
.config-summary__lines li span:last-child { font-weight: 600; white-space: nowrap; }
.config-summary__lines li.is-discount span:last-child { color: var(--success-text); }
.config-summary__divider { height: 1px; background: var(--line); margin: 2px 0; }
.config-summary__disclaimer {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-muted);
  background: var(--bg-elev);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.config-summary__empty { font-size: 13.5px; color: var(--ink-muted); }

.config-form { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.config-form .field input,
.config-form .field textarea { font-size: 14px; padding: 11px 14px; }
.config-form .field textarea { min-height: 90px; }
.config-form .field label { font-size: 10px; }
.config-form__checks { display: flex; flex-direction: column; gap: 12px; }
.config-form__checks .field__check { font-size: 12.5px; }
.config-form__checks .field__check a { border-bottom: 1px solid; }
.config-legal-note {
  font-size: 11.5px;
  color: var(--ink-muted);
  line-height: 1.5;
  border-left: 2px solid var(--accent-coral);
  padding-left: 12px;
}

@media (max-width: 900px) {
  .configurator { grid-template-columns: 1fr; }
  .config-summary { position: static; }
}
@media (max-width: 540px) {
  .config-options { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* =========================================================
   World-class polish — depth, atmosphere, a11y, signature
   ========================================================= */

:root {
  --shadow-sm: 0 1px 2px rgba(14,14,16,.04), 0 2px 6px -2px rgba(14,14,16,.08);
  --shadow-md: 0 2px 4px rgba(14,14,16,.04), 0 14px 30px -12px rgba(14,14,16,.16);
  --shadow-lg: 0 6px 12px rgba(14,14,16,.05), 0 34px 64px -22px rgba(14,14,16,.28);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* --- Accessibility: keyboard focus + skip link + sr-only --- */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 3px;
}
.project-card:focus-visible,
.modal__nav:focus-visible,
.modal__close:focus-visible,
.package-card--featured :focus-visible {
  outline-color: var(--bg);
  outline-offset: -3px;
}
[data-theme="dark"] :focus-visible { outline-color: #F5F7FA; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 12px; top: -64px;
  z-index: 300;
  background: var(--ink);
  color: var(--bg);
  padding: 11px 20px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* --- Atmosphere: soft gradient mesh behind heroes --- */
.hero,
.subpage-hero {
  background-image:
    radial-gradient(52% 60% at 12% 2%,  color-mix(in oklab, var(--accent-violet) 6%, transparent), transparent 60%),
    radial-gradient(44% 52% at 96% 24%, color-mix(in oklab, var(--accent-coral) 5%, transparent), transparent 62%);
}
[data-theme="dark"] .hero,
[data-theme="dark"] .subpage-hero {
  background-image:
    radial-gradient(52% 60% at 12% 2%,  color-mix(in oklab, var(--accent-violet) 16%, transparent), transparent 60%),
    radial-gradient(44% 52% at 96% 24%, color-mix(in oklab, var(--accent-blue) 13%, transparent), transparent 62%);
}

/* --- Signature: a living optical lens behind the hero wordmark --- */
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 50%; right: 4%;
  width: min(46vw, 560px);
  aspect-ratio: 1;
  translate: 0 -50%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at center,
    color-mix(in oklab, var(--ink) 7%, transparent) 0 1px,
    transparent 1px 13px);
  -webkit-mask-image: radial-gradient(circle, #000 28%, transparent 70%);
          mask-image: radial-gradient(circle, #000 28%, transparent 70%);
  opacity: .5;
  transform: translate(
    calc((var(--pointer-x, 50%) - 50%) * 0.05),
    calc((var(--pointer-y, 50%) - 50%) * 0.05));
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
  animation: lens-breathe 16s ease-in-out infinite;
}
@keyframes lens-breathe { 50% { opacity: .36; scale: 1.05; } }
[data-theme="dark"] .hero::after { opacity: .42; }
@media (max-width: 880px) { .hero::after { opacity: .28; right: -12%; } }
@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; transition: none; }
}

/* --- Service rows: lens-focus icon + accent wipe (echoes portfolio rows) --- */
.service { position: relative; }
.service::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent-coral);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .4s var(--ease-out);
}
.service:hover::before { transform: scaleY(1); transform-origin: top; }
.service__icon { transition: transform .45s var(--ease-out); }
.service:hover .service__icon { transform: scale(1.08) rotate(-4deg); }


/* --- Layered shadows on elevated cards --- */
.package-card { box-shadow: var(--shadow-sm); }
.package-card:hover { box-shadow: var(--shadow-lg); }
.config-summary { box-shadow: var(--shadow-md); }
.config-opt:hover { box-shadow: var(--shadow-sm); }

/* --- Dark mode: hairline top highlight separates elevated surfaces --- */
[data-theme="dark"] .deliverables,
[data-theme="dark"] .contact-info,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .config-summary,
[data-theme="dark"] .package-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-md);
}

/* --- Dark mode: legible select chevron (light stroke) --- */
[data-theme="dark"] .field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23C5C9D2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* --- Larger touch targets for small header controls --- */
.lang-switch a { min-height: 40px; display: inline-flex; align-items: center; }
/* Language not yet available — visible but clearly inactive */
.lang-switch .is-soon {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Modal gallery: photographic slide transition --- */
.modal__slide {
  transform: scale(1.03);
  filter: blur(8px);
  transition: opacity .4s ease, transform .5s var(--ease-out), filter .4s ease;
}
.modal__slide.is-active { transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .modal__slide { transform: none; filter: none; transition: opacity .2s ease; }
}
/* Dark mode: close button should not be a white blob */
[data-theme="dark"] .modal__close {
  background: rgba(26,26,31,.82);
  color: var(--ink);
}
[data-theme="dark"] .modal__close:hover { background: rgba(26,26,31,.95); }
/* =========================================================
   Self-hosted fonts (latin + latin-ext for RO diacritics)
   ========================================================= */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-normal-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-normal-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-normal-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-normal-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-normal-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-normal-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 600; font-display: swap; src: url('../fonts/fraunces-italic-300_600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 600; font-display: swap; src: url('../fonts/fraunces-italic-300_600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../fonts/fraunces-normal-300_600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../fonts/fraunces-normal-300_600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* =========================================================
   Configurator: business recommender + "already have" uploads
   ========================================================= */
.config-recommend {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-elev);
}
.config-recommend > label {
  font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-muted);
}
.config-recommend select { max-width: 460px; }
.config-recommend__note {
  margin: 0; font-size: 13.5px; font-weight: 500; color: var(--success-text);
}

.config-haves { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.config-have {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding: 12px 14px; cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.config-have:hover { border-color: var(--ink-soft); }
.config-have:has(input.config-have__check:checked) {
  border-color: var(--ink); box-shadow: 0 0 0 3px rgba(14,14,16,.05);
}
.config-have__check { width: 18px; height: 18px; accent-color: var(--ink); flex: none; }
.config-have__label { font-size: 14px; font-weight: 500; }
.config-have__name { width: 100%; font-size: 12px; color: var(--ink-muted); word-break: break-word; }
@media (max-width: 540px) { .config-haves { grid-template-columns: 1fr; } }

/* =========================================================
   Admin knowledge base (Resurse: furnizori & marketing)
   ========================================================= */
.kb { display: flex; flex-direction: column; gap: 16px; max-width: 1040px; }
.kb__note { background: var(--bg-elev); border-left: 3px solid var(--accent-green); padding: 14px 18px; border-radius: var(--r-md); font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.kb__note strong { color: var(--ink); }
.kb h3 { font-size: 15px; margin: 26px 0 8px; letter-spacing: .01em; }
.kb h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-muted); margin: 18px 0 8px; }
.kb-table-wrap { overflow-x: auto; border-radius: var(--r-md); }
.kb table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.kb th { text-align: left; padding: 9px 10px; border-bottom: 1.5px solid var(--line); font-weight: 600; vertical-align: top; white-space: nowrap; }
.kb td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); vertical-align: top; line-height: 1.5; }
.kb td strong { color: var(--ink); font-weight: 600; }
.kb__suppliers { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.kb__suppliers li { padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.kb__suppliers li strong { color: var(--ink); }
.kb__suppliers a { color: var(--ink); border-bottom: 1px solid var(--line); }
.kb__suppliers a:hover { border-color: var(--ink); }
.kb ol.kb-actions { padding-left: 1.3em; margin: 0; display: flex; flex-direction: column; gap: 10px; line-height: 1.6; color: var(--ink-soft); }
.kb ol.kb-actions strong { color: var(--ink); }
.kb ul.kb-list { padding-left: 1.2em; margin: 0; line-height: 1.7; color: var(--ink-soft); }
.kb ul.kb-list strong { color: var(--ink); }

/* ============================================================
   Testimonials (servicii.html)
   ============================================================ */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.testimonial {
  margin: 0;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.testimonial__quote {
  margin: 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--ink);
}
.testimonial__quote::before {
  content: "\201C";
  display: block;
  font-size: 48px;
  line-height: 0.4;
  margin-bottom: 12px;
  color: var(--ink-muted);
  opacity: 0.5;
}
.testimonial__by { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.testimonial__name { font-weight: 600; font-size: 14px; color: var(--ink); }
.testimonial__role { font-size: 13px; color: var(--ink-muted); }

/* ============================================================
   FAQ (servicii.html) — native <details> accordion
   ============================================================ */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 320px) 1fr;
  gap: 56px;
  align-items: start;
}
.faq__list { display: flex; flex-direction: column; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 22px 44px 22px 0;
  font-weight: 500;
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--ink);
  transition: color .2s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--ink-muted); }
.faq__q::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  color: var(--ink-muted);
  transition: transform .25s ease;
}
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__a { padding: 0 0 24px; }
.faq__a p {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-muted);
}
.faq__a a { color: var(--ink); border-bottom: 1px solid var(--line); }
.faq__a a:hover { border-color: var(--ink); }
@media (max-width: 760px) {
  .faq { grid-template-columns: 1fr; gap: 24px; }
}

/* Founder signature (despre.html) */
.story__signature {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.story__signature-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1;
  color: var(--ink);
}
.story__signature-role {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 8px;
}

/* "What happens next" list (contact.html) */
.contact-next {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: cnext;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-next li {
  counter-increment: cnext;
  position: relative;
  padding-left: 38px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.contact-next li::before {
  content: counter(cnext);
  position: absolute;
  left: 0;
  top: -1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.contact-next li strong { color: var(--ink); font-weight: 600; }

/* =========================================================
   Falling pattern — fundal animat, DOAR pe dark mode
   Port CSS vanilla (fără React/Tailwind/framer-motion)
   ========================================================= */
.fall, .mesh { display: none; }   /* ascuns pe light */

[data-theme="dark"] .fall {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  --c: rgba(233, 75, 90, 0.55);   /* coral */
  background-image:
    radial-gradient(4px 100px at 0px 235px, var(--c), transparent),radial-gradient(4px 100px at 300px 235px, var(--c), transparent),radial-gradient(1.5px 1.5px at 150px 117.5px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 252px, var(--c), transparent),radial-gradient(4px 100px at 300px 252px, var(--c), transparent),radial-gradient(1.5px 1.5px at 150px 126px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 150px, var(--c), transparent),radial-gradient(4px 100px at 300px 150px, var(--c), transparent),radial-gradient(1.5px 1.5px at 150px 75px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 253px, var(--c), transparent),radial-gradient(4px 100px at 300px 253px, var(--c), transparent),radial-gradient(1.5px 1.5px at 150px 126.5px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 204px, var(--c), transparent),radial-gradient(4px 100px at 300px 204px, var(--c), transparent),radial-gradient(1.5px 1.5px at 150px 102px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 134px, var(--c), transparent),radial-gradient(4px 100px at 300px 134px, var(--c), transparent),radial-gradient(1.5px 1.5px at 150px 67px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 179px, var(--c), transparent),radial-gradient(4px 100px at 300px 179px, var(--c), transparent),radial-gradient(1.5px 1.5px at 150px 89.5px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 299px, var(--c), transparent),radial-gradient(4px 100px at 300px 299px, var(--c), transparent),radial-gradient(1.5px 1.5px at 150px 149.5px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 215px, var(--c), transparent),radial-gradient(4px 100px at 300px 215px, var(--c), transparent),radial-gradient(1.5px 1.5px at 150px 107.5px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 281px, var(--c), transparent),radial-gradient(4px 100px at 300px 281px, var(--c), transparent),radial-gradient(1.5px 1.5px at 150px 140.5px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 158px, var(--c), transparent),radial-gradient(4px 100px at 300px 158px, var(--c), transparent),radial-gradient(1.5px 1.5px at 150px 79px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 210px, var(--c), transparent),radial-gradient(4px 100px at 300px 210px, var(--c), transparent),radial-gradient(1.5px 1.5px at 150px 105px, var(--c) 100%, transparent 150%);
  background-size:
    300px 235px,300px 235px,300px 235px,300px 252px,300px 252px,300px 252px,300px 150px,300px 150px,300px 150px,300px 253px,300px 253px,300px 253px,300px 204px,300px 204px,300px 204px,300px 134px,300px 134px,300px 134px,300px 179px,300px 179px,300px 179px,300px 299px,300px 299px,300px 299px,300px 215px,300px 215px,300px 215px,300px 281px,300px 281px,300px 281px,300px 158px,300px 158px,300px 158px,300px 210px,300px 210px;
  animation: fall 140s linear infinite;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 42%, rgba(0,0,0,.85) 100%);
          mask-image: linear-gradient(100deg, transparent 0%, transparent 42%, rgba(0,0,0,.85) 100%);
}
@keyframes fall {
  from { background-position: 0px 220px,3px 220px,151.5px 337.5px,25px 24px,28px 24px,176.5px 150px,50px 16px,53px 16px,201.5px 91px,75px 224px,78px 224px,226.5px 230.5px,100px 19px,103px 19px,251.5px 121px,125px 120px,128px 120px,276.5px 187px,150px 31px,153px 31px,301.5px 120.5px,175px 235px,178px 235px,326.5px 384.5px,200px 121px,203px 121px,351.5px 228.5px,225px 224px,228px 224px,376.5px 364.5px,250px 26px,253px 26px,401.5px 105px,275px 75px,278px 75px,426.5px 180px; }
  to   { background-position: 0px 6800px,3px 6800px,151.5px 6917.5px,25px 13632px,28px 13632px,176.5px 13758px,50px 5416px,53px 5416px,201.5px 5491px,75px 17175px,78px 17175px,226.5px 17301.5px,100px 5119px,103px 5119px,251.5px 5221px,125px 8428px,128px 8428px,276.5px 8495px,150px 9876px,153px 9876px,301.5px 9965.5px,175px 13391px,178px 13391px,326.5px 13540.5px,200px 14741px,203px 14741px,351.5px 14848.5px,225px 18770px,228px 18770px,376.5px 18910.5px,250px 5082px,253px 5082px,401.5px 5161px,275px 6375px,278px 6375px,426.5px 6480px; }
}
[data-theme="dark"] .mesh {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(1px);
  background-image: radial-gradient(circle at 50% 50%, transparent 0, transparent 2px, var(--bg) 2px);
  background-size: 8px 8px;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 42%, rgba(0,0,0,1) 100%);
          mask-image: linear-gradient(100deg, transparent 0%, transparent 42%, rgba(0,0,0,1) 100%);
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] .fall { animation: none; }
}

/* Variantă pentru layout-uri centrate (404/500, CTA): pattern-ul se stinge
   în centru (în spatele textului) și apare spre margini/colțuri. */
[data-theme="dark"] .fall--center {
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, transparent 0%, transparent 34%, rgba(0,0,0,.9) 100%);
          mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, transparent 0%, transparent 34%, rgba(0,0,0,.9) 100%);
}
[data-theme="dark"] .mesh--center {
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, transparent 0%, transparent 34%, rgba(0,0,0,1) 100%);
          mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, transparent 0%, transparent 34%, rgba(0,0,0,1) 100%);
}

/* =========================================================
   Refresh polish — footer, services, testimonials (2026)
   Aplicat ca override grupat, în tonul „minimal cu voce".
   ========================================================= */

/* --- Footer: mai mult aer, accent coral discret, ierarhie --- */
.site-footer { padding-block: clamp(72px, 8vw, 120px) 40px; }
.site-footer__grid { gap: clamp(28px, 3vw, 48px); margin-bottom: clamp(48px, 6vw, 80px); }
.site-footer h4 { position: relative; padding-top: 18px; margin-bottom: 20px; }
.site-footer h4::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 24px; height: 2px;
  background: var(--accent);
}
.site-footer a { transition: color .2s ease; }
.site-footer a:hover,
.site-footer__base a:hover { color: var(--accent); }

/* --- Servicii (cele 5 carduri): titluri editoriale, numere coral, mai mult aer --- */
.service { padding-block: clamp(36px, 4.5vw, 64px); }
.service__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -0.012em;
  line-height: 1.05;
}
.service__title small { color: var(--accent-text); }

/* --- Testimoniale: coloane editoriale (rule sus) + ghilimele coral --- */
.testimonials { gap: clamp(24px, 3vw, 56px); }
.testimonial {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 28px 0 0;
}
.testimonial__quote::before { color: var(--accent); opacity: 1; }

/* =========================================================
   Background Paths — tracerie de linii curgătoare (Despre)
   Port vanilla (SVG + CSS), generat de assets/js/bg-paths.js
   ========================================================= */
.subpage-hero--paths {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.subpage-hero--paths > .container { position: relative; z-index: 1; }

.bg-paths {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  color: var(--ink);          /* liniile urmează cerneala → se adaptează light/dark */
  overflow: hidden;
  opacity: 0.55;              /* subtil; estompat sub titlu și sub textul lead */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, #000 80%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, #000 80%);
}
.bg-paths svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg-paths path {
  stroke-dasharray: 0.35 0.65;
  animation-name: flow-path;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
/* stroke-dashoffset is paint-bound; stop it when the hero is off-screen */
.bg-paths.is-paused path { animation-play-state: paused; }
@keyframes flow-path {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
[data-theme="dark"] .bg-paths { opacity: 0.8; }
@media (prefers-reduced-motion: reduce) {
  .bg-paths path { animation: none; }
}

/* =========================================================
   Polish pass — press feedback & interaction craft (2026)
   Feedback instant la apăsare pe controalele apăsabile,
   cu o curbă ease-out mai fermă. Respectă reduced-motion.
   ========================================================= */
:root { --ease-out-strong: cubic-bezier(.23, 1, .32, 1); }

.btn-arrow { transition: background .22s ease, color .22s ease, transform .16s var(--ease-out-strong); }
.btn-arrow:active { transform: scale(.97); }

.btn-text { transition: gap .2s ease, transform .16s var(--ease-out-strong); }
.btn-text:active { transform: scale(.97); }

.theme-toggle { transition: border-color .2s ease, color .2s ease, transform .16s var(--ease-out-strong); }
.theme-toggle:active { transform: scale(.92); }

.lang-switch a { transition: color .2s ease, background .2s ease, transform .16s var(--ease-out-strong); }
.lang-switch a:active { transform: scale(.94); }

/* Link-uri „slide" și CTA secundare: subtil */
.link-slide:active { transform: scale(.98); }

/* Pill-uri de filtru (portofoliu) */
.portfolio-filter button { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--ease-out-strong); }
.portfolio-filter button:active { transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  .btn-arrow:active,
  .btn-text:active,
  .theme-toggle:active,
  .lang-switch a:active,
  .link-slide:active,
  .portfolio-filter button:active { transform: none; }
}

/* =========================================================
   Touch: neutralizează hover-ul „lipicios" pe ecrane fără mouse
   (pe touch, un tap declanșează :hover care rămâne agățat)
   ========================================================= */
@media (hover: none) {
  .btn-arrow:hover { background: transparent; color: var(--ink); }
  [data-theme="dark"] .btn-arrow:hover { background: transparent; color: var(--ink); }
  .btn-arrow:hover svg { transform: none; }
  .btn-text:hover { gap: 10px; }
  .service:hover { background: transparent; }
  .service:hover .service__arrow { background: transparent; color: var(--ink); transform: none; }
  .service:hover .service__icon { transform: none; }
  .project-card:hover {
    transform: none;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.18) inset,
      0 -40px 80px -40px rgba(0, 0, 0, 0.45) inset,
      0 20px 40px -20px rgba(14, 14, 16, 0.25);
  }
}

/* =========================================================
   Form polish — focus coral (brand) + chevron select pe dark
   ========================================================= */
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(233, 75, 90, 0.14);
}
/* Fix: `.form .field select` folosește `background` (shorthand) care șterge
   chevron-ul (pe light dispărea, pe dark se repeta). Îl restaurăm explicit. */
.field select,
.form .field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%230E0E10' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 8px;
}
[data-theme="dark"] .field select,
[data-theme="dark"] .form .field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23F5F7FA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 8px;
}

/* =========================================================
   Optical Merch — sub-brand touchpoints
   ========================================================= */
.merch-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
}
.merch-callout__text { max-width: 640px; }

/* CTA link at the end of the Merch service block */
.service-detail__cta { margin-top: 18px; }

/* =========================================================
   Comparison cards — why Optical Design
   ========================================================= */
.compare-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
  align-items: start;
  margin-top: clamp(36px, 4vw, 60px);
}
.compare-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.4vw, 36px);
  background: var(--bg-elev);
}
.compare-card--featured {
  border-color: var(--accent);
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    var(--surface);
  box-shadow: 0 36px 80px -44px color-mix(in srgb, var(--accent) 65%, transparent);
}
@media (min-width: 881px) {
  .compare-card--featured { transform: translateY(-12px); }
}
.compare-card__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: #C9303F; /* coral întunecat — alb pe coral simplu pică AA la 10px */
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
  white-space: nowrap;
}
.compare-card__name {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 25px);
  font-weight: 500;
  margin: 0;
}
.compare-card--featured .compare-card__name { color: var(--accent-text); }
.compare-card__list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.compare-card__list li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 66px;
  justify-content: center;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.compare-card__list li span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.compare-card__list li strong {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-soft);
}
.compare-card--featured .compare-card__list li strong {
  color: var(--ink);
  font-weight: 600;
}
.compare-card__cta {
  margin-top: 26px;
  width: 100%;
  justify-content: center;
}
@media (max-width: 880px) {
  .compare-cards { grid-template-columns: 1fr; }
  .compare-card--featured { order: -1; }   /* lead with Optical Design on mobile */
}

/* =========================================================
   Hero scroll-depth parallax
   Background layers (dark theme only) are overscanned so their
   transform drift never reveals an edge inside the clipped hero.
   ========================================================= */
[data-theme="dark"] .hero--minimal .fall,
[data-theme="dark"] .hero--minimal .mesh {
  top: -30%;
  bottom: auto;
  height: 160%;
  will-change: transform;
}
/* Hero content is the parallax foreground — must sit above the bg layers
   (mesh is z-index:1) once a transform turns it into a stacking context. */
.hero--minimal > .container {
  position: relative;
  z-index: 2;
  will-change: transform;
}

/* Hero entrance — staggered word/line rise on load (--d = sequence index) */
.hero--minimal .rise {
  opacity: 0;
  transform: translateY(28px);
  animation: heroRise .85s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--d, 0) * 0.09s + 0.1s);
}
.hero--minimal .hero__title .rise { display: inline-block; }
@keyframes heroRise {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero--minimal .rise { animation: none; opacity: 1; transform: none; }
}

/* =========================================================
   Logo wall — collaborators / brands we've worked with
   Mixed-source logos are flattened to a single theme-aware
   silhouette so the wall reads as one cohesive set.
   ========================================================= */
.logo-wall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(30px, 5vw, 68px);
  margin-top: clamp(32px, 4vw, 48px);
}
.logo-wall img {
  height: clamp(22px, 2.6vw, 32px);
  width: auto;
  max-width: 168px;
  object-fit: contain;
  opacity: 0.5;
  transition: opacity .25s ease;
}
.logo-wall img:hover { opacity: 0.95; }
[data-theme="dark"]  .logo-wall img { filter: brightness(0) invert(1); }
[data-theme="light"] .logo-wall img { filter: brightness(0); }
.logo-wall__note {
  text-align: center;
  margin-top: clamp(22px, 3vw, 34px);
  color: var(--ink-muted);
  font-size: 14px;
}
/* Text-only entries (collaborators without a usable logo file) */
.logo-wall__name {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.5;
  white-space: nowrap;
  transition: opacity .25s ease;
}
.logo-wall__name:hover { opacity: 0.95; }

/* =========================================================
   Process — "Cum lucrăm"
   ========================================================= */
.process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(34px, 4vw, 56px);
}
.process__num {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
  line-height: 1;
  margin: 0;
}
.process__step h3 { margin: 16px 0 8px; font-size: clamp(17px, 1.5vw, 20px); }
.process__step p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
@media (max-width: 760px) { .process__grid { grid-template-columns: repeat(2, 1fr); } }

/* FAQ on the homepage reuses the existing .faq / .faq__head / .faq__list /
   .faq__item / .faq__q / .faq__a component (defined above) — no new rules. */

/* =========================================================
   WhatsApp floating button
   ========================================================= */
.wa-fab {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 40; /* sub header (50), consent (200), modal/drawer (100) */
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: grid; place-items: center;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.45);
  transition: transform .2s ease;
}
.wa-fab:hover { transform: scale(1.08); }
.wa-fab svg { width: 30px; height: 30px; fill: #fff; }
@media (prefers-reduced-motion: reduce) { .wa-fab { transition: none; } }

/* =========================================================
   Print
   ========================================================= */
@media print {
  .wa-fab,
  .theme-toggle,
  .consent-banner,
  .skip-link,
  .mobile-drawer,
  .mobile-drawer__backdrop,
  .menu-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}