/* ==========================================================================
   Liliana Culda-Drăgușin — static site styles
   ========================================================================== */

:root {
  --background: oklch(98.5% .012 85);
  --foreground: oklch(24% .014 60);
  --primary: oklch(56% .09 42);
  --primary-foreground: oklch(98.5% .012 85);
  /* Darker terracotta reserved for small text on light backgrounds (eyebrow,
     tag) — --primary itself doesn't reach 4.5:1 against --surface/--accent. */
  --primary-text: oklch(48% .09 42);
  --secondary: oklch(94% .015 78);
  --secondary-foreground: oklch(24% .014 60);
  --muted: oklch(94% .015 78);
  --muted-foreground: oklch(45% .015 60);
  --border: oklch(24% .014 60 / .1);
  --radius: .75rem;
  --card: oklch(100% 0 0);
  --accent: oklch(92% .02 75);
  --accent-foreground: oklch(24% .014 60);
  --dark-bg: oklch(24% .014 60);
  --dark-fg: oklch(96% .01 85);
  --surface: oklch(96.5% .015 80);

  --font-display: "Playfair Display", ui-serif, Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --max-w: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 500; line-height: 1.1; margin: 0; }
p { margin: 0; }
button, input, select, textarea { font-family: inherit; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Layout shell ---- */
.page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: var(--background);
}
main { flex: 1; }

/* ---- Nav ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 85%, transparent);
  backdrop-filter: blur(8px);
}
/* Buttons sitting on the blurred nav need their own compositing layer —
   otherwise the browser re-samples the backdrop blur on every hover
   frame, so the opacity transition feels delayed compared to the same
   button used elsewhere on the site (never on a backdrop-filter). */
.nav .btn { will-change: opacity; }
.nav-inner {
  margin: 0 auto;
  max-width: var(--max-w);
  display: flex;
  height: 80px;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}
.brand { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.brand-sub { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: var(--muted-foreground); margin-top: 2px; }

.nav-links { display: none; align-items: center; gap: 28px; font-size: .9rem; }
.nav-links a { color: color-mix(in oklab, var(--foreground) 80%, transparent); transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--primary); }

.nav-cta {
  display: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 12px 26px;
  font-size: .875rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity .2s, background-color .2s;
  white-space: nowrap;
}
.btn-primary { background: var(--foreground); color: var(--background); }
.btn-primary:hover { opacity: .85; }
.btn-outline { background: transparent; border-color: var(--border); color: var(--foreground); }
.btn-outline:hover { background: var(--secondary); }
.btn-link {
  display: inline-block;
  border-bottom: 1px solid var(--primary);
  padding-bottom: 4px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--primary);
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
}
.menu-toggle span, .menu-toggle::before, .menu-toggle::after { display: none; }
.menu-toggle svg { width: 20px; height: 20px; }

.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border-top: 1px solid var(--border);
  background: var(--background);
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, .18);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.mobile-menu.open { display: block; }
.mobile-menu ul { display: flex; flex-direction: column; align-items: center; padding: 16px 24px; gap: 16px; text-align: center; }
.mobile-menu a { font-size: 1rem; }
.mobile-menu li:last-child { align-self: stretch; }
.mobile-menu .btn { margin-top: 8px; width: 100%; }

@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .menu-toggle { display: none; }
  .mobile-menu { display: none !important; }
}

/* ---- Footer ---- */
.footer { border-top: 1px solid var(--border); background: var(--background); }
.footer-grid {
  margin: 0 auto;
  max-width: var(--max-w);
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding: 80px 24px;
}
.footer-brand-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; line-height: 1.2; margin: 0; }
.footer-desc { margin-top: 24px; max-width: 20rem; font-size: .875rem; line-height: 1.6; color: var(--muted-foreground); }
.footer-col-label { margin: 0 0 24px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: var(--muted-foreground); font-weight: 500; }
.footer ul { display: flex; flex-direction: column; gap: 12px; font-size: .875rem; }
.footer a { color: color-mix(in oklab, var(--foreground) 80%, transparent); transition: color .2s; }
.footer a:hover, .footer a.active { color: var(--primary); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.footer-bottom { border-top: 1px solid var(--border); }
.footer-bottom-inner {
  margin: 0 auto;
  max-width: var(--max-w);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  font-size: 11px;
  color: var(--muted-foreground);
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-bottom-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---- Generic section helpers ---- */
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--primary-text);
  margin-bottom: 20px;
}
.h1 { font-size: 2.75rem; letter-spacing: -0.01em; text-wrap: balance; }
.h2 { font-size: 2rem; letter-spacing: -0.01em; text-wrap: balance; }
.lede { margin-top: 24px; font-size: 1.05rem; color: var(--muted-foreground); max-width: 42rem; }
.italic { font-style: italic; font-weight: 500; }
@media (min-width: 1024px) {
  .h1 { font-size: 4.5rem; }
  .h2 { font-size: 2.75rem; }
}

/* Smaller hero heading used on inner pages (despre/servicii/preturi/cum-lucrez/resurse/contact) —
   60px desktop / 36px mobile, not the homepage's 72px .h1. */
.h1-inner { font-size: 2.25rem; }
@media (min-width: 1024px) {
  .h1-inner { font-size: 3.75rem; }
}

/* Generic ~70%-of-section content width cap (48rem) */
.content-width { max-width: 48rem; }

.btn-block { width: 100%; }

/* Inner-page hero: separated from the section below it by a hairline border,
   on every page's first section except the homepage. */
.hero-border { border-bottom: 1px solid var(--border); }

.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
@media (min-width: 1024px) {
  .section-head.intro-half { width: 50%; max-width: 50%; }
  .section-head.intro-half .h2 { text-wrap: wrap; max-width: none; }
  .section-head.intro-half .lede { max-width: none; }
}

/* ---- Hero ---- */
.hero { padding: 64px 0 96px; }
.hero-grid { display: grid; gap: 48px; align-items: center; }
.hero-copy p + p { margin-top: 20px; }
.hero-copy .lede { margin-top: 28px; }
.hero-actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; }
.hero-image { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 1.25rem; border: 1px solid rgba(0, 0, 0, .05); }
.hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Cards / grids ---- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}
.card-index { font-family: var(--font-mono); font-size: .8rem; color: var(--primary); margin-bottom: 16px; }
.card h3 { font-size: 1.1rem; margin-bottom: 12px; }
.card p { color: var(--muted-foreground); font-size: .925rem; }

/* Soft (secondary-bg, borderless) card variant — used for boxed callouts */
.card-soft {
  background: var(--secondary);
  border: none;
  border-radius: var(--radius);
  padding: 32px;
}
.card-soft h3 { font-size: 1.1rem; margin-bottom: 12px; }
.card-soft p { color: var(--muted-foreground); font-size: .925rem; }

/* Italic subtitle tagline under a H2/H3, with a short rule beneath it */
.tagline {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--primary);
  font-size: 1.05rem;
  margin-top: 12px;
}
.tagline-rule { width: 48px; height: 1px; background: var(--border); margin: 16px 0 24px; }

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--primary-text);
  background: var(--accent);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 16px;
}

/* ---- Full-bleed light "surface" section (subtle alternate tint) ---- */
.section-surface { background: var(--surface); }

/* ---- Section intro header block (eyebrow + h2 + lede) ---- */
.section-head { max-width: 48rem; margin-bottom: 32px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .lede { margin-left: auto; margin-right: auto; }

/* ---- Full-bleed dark section (used for feature bands + CTA banners) ---- */
.section-dark { background: var(--dark-bg); color: var(--dark-fg); }
.section-dark .eyebrow { color: color-mix(in oklab, var(--primary) 70%, white 30%); }
.section-dark .lede { color: color-mix(in oklab, var(--dark-fg) 75%, transparent); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--dark-fg); }
.section-dark .btn-primary { background: var(--dark-fg); color: var(--dark-bg); }
.section-dark .btn-outline { background: transparent; border-color: color-mix(in oklab, var(--dark-fg) 30%, transparent); color: var(--dark-fg); }
.section-dark .btn-outline:hover { background: color-mix(in oklab, var(--dark-fg) 10%, transparent); }

/* ---- Dark media grid (image + copy, contained within the standard container) ---- */
.dark-media-grid { display: grid; gap: 40px; align-items: center; }
.dark-media-grid .media-frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, .1);
}
.dark-media-grid .media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dark-copy .eyebrow { color: color-mix(in oklab, var(--primary) 70%, white 30%); }
.dark-copy p { color: color-mix(in oklab, var(--dark-fg) 75%, transparent); margin-top: 16px; }
.dark-copy .btn-link { color: color-mix(in oklab, var(--primary) 60%, white 40%); border-color: color-mix(in oklab, var(--primary) 60%, white 40%); }
@media (min-width: 1024px) {
  .dark-media-grid { grid-template-columns: 5fr 7fr; gap: 48px; }
}

/* ---- Dark numbered feature row (table-cell style: 1px hairlines via bg + gap) ---- */
.dark-feature-grid {
  display: grid;
  gap: 1px;
  margin-top: 48px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .1);
}
.dark-feature-grid > div { background: var(--dark-bg); padding: 32px; }
.dark-feature-grid .card-index { color: color-mix(in oklab, var(--primary) 70%, white 30%); }
.dark-feature-grid h3 { color: var(--dark-fg); font-size: 1.1rem; margin-bottom: 12px; }
.dark-feature-grid p { color: color-mix(in oklab, var(--dark-fg) 70%, transparent); font-size: .925rem; }
@media (min-width: 768px) { .dark-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dark-feature-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- Numbered process list ---- */
.process { display: flex; flex-direction: column; gap: 40px; }
.process-item { display: grid; gap: 16px; }
.process-num { font-family: var(--font-mono); font-size: 1.5rem; color: var(--primary); }
.process-item h3 { font-size: 1.25rem; margin-bottom: 8px; }
.process-item p { color: var(--muted-foreground); }
@media (min-width: 768px) {
  .process-item { grid-template-columns: 80px 1fr; }
}

/* ---- Quote ---- */
.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.5;
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

/* Homepage-style quote block: short vertical accent line above, caption below */
.quote-block { text-align: center; }
.quote-line { width: 1px; height: 32px; background: var(--primary); margin: 0 auto 32px; }
.quote-caption {
  display: block;
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted-foreground);
  text-align: center;
}

/* Quote card variant (secondary bg, left-aligned, paired with another card) */
.quote-card { background: var(--secondary); border: none; }
.quote-card .quote { text-align: left; margin: 0; max-width: none; font-size: 1.1rem; }

/* ---- Pricing ---- */
.price-card { display: flex; flex-direction: column; gap: 16px; }
.price-amount { font-family: var(--font-display); font-size: 1.75rem; color: var(--primary); }
.price-meta { font-size: .8rem; color: var(--muted-foreground); }
.price-card ul { display: flex; flex-direction: column; gap: 8px; font-size: .9rem; margin-top: 8px; }
.price-card li::before { content: "— "; color: var(--primary); }

/* ---- Contact form ---- */
.form-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
label { display: block; font-size: .8rem; font-weight: 500; margin-bottom: 8px; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-mono); font-size: 10.5px; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--background);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 16px; /* prevents iOS Safari auto-zoom on focus */
  color: var(--foreground);
}
textarea { min-height: 140px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.required-mark { color: var(--muted-foreground); font-weight: 400; }
.honeypot-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.contact-details { display: flex; flex-direction: column; gap: 20px; }
.contact-details > div { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; }
.contact-details dt { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--muted-foreground); margin-bottom: 4px; }
.contact-details dd { margin: 0; font-size: 1rem; }
.contact-details.grid-2 { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .contact-details.grid-2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .contact-details.grid-2 { grid-template-columns: repeat(4, 1fr); }
}

.form-card { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; padding: 32px; }
@media (min-width: 1024px) { .form-card { padding: 40px; } }
@media (max-width: 640px) {
  /* The Calendly embed's own inline style sets a 320px min-width; on a narrow
     phone that plus this card's 32px side padding is wider than the viewport,
     so the widget overflows its card. Shrink the padding and let the widget
     fill the available width instead of forcing its own minimum. */
  .form-card { padding: 16px; }
  .calendly-inline-widget { min-width: 0 !important; width: 100% !important; }
}

/* ---- CTA banner ---- */
.cta-banner { text-align: center; max-width: 40rem; margin: 0 auto; }
.cta-banner .btn-group { margin-top: 32px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

.list-check { display: flex; flex-direction: column; gap: 12px; }
.list-check li { display: flex; gap: 10px; align-items: baseline; }
.list-check li::before { content: "✓"; color: var(--primary); font-weight: 600; }
/* Centered variant only kicks in from tablet width up — on mobile it stays
   left-aligned like the default list, since centering a wrapped multi-line
   checklist reads poorly on narrow screens. */
@media (min-width: 640px) {
  .list-check.center li { justify-content: center; }
}

hr.sep { border: none; border-top: 1px solid var(--border); margin: 64px 0; }

/* ---- Full-width CTA buttons on mobile ----
   Any button inside page content (never the header/footer, which have their
   own sizing rules) stacks and fills the available width below 640px —
   matches the site's mobile-first CTA convention. */
@media (max-width: 640px) {
  .hero-actions, .btn-group {
    flex-direction: column;
    align-items: stretch;
  }
  section .btn {
    width: 100%;
  }
}