/* =====================================================================
   NovaWebDesign — Faza 7 · POLISH LAYER
   ---------------------------------------------------------------------
   Load LAST on every page (index, contact, showcase, facturare):
     <link rel="stylesheet" href="css/polish.css">
   (after style.css, models/portfolio/depth-carousel/showcase-gallery,
    site-ui.css, motion-kit.css, hero-intro.css, trust.css AND after any
    inline <style> block in <head>).

   Rules of this file
   - Only improves: contrast, dynamic viewport units, safe areas, real
     overflow causes, tap targets, focus rings, typographic rhythm.
   - Never animates anything except transform / opacity.
   - Does NOT restyle: pricing slider / mini checkout / package pickers,
     #modele carousel, #portofoliu, footer, mobile bottom bar
     (owned by other layers). ::selection + scrollbars live in site-ui.css.

   Contents
     1. Tokens (contrast)
     2. Root / document hygiene (overflow-x: clip, text-size-adjust, anchors)
     3. Dynamic viewport units (100vh -> 100svh / 100dvh)
     4. Safe areas (notch)
     5. Horizontal overflow — causes
     6. Focus rings (one system: 2px cyan + offset)
     7. Tap targets >= 44px + press feedback
     8. Typography rhythm
     9. Small premium details
    10. Reduced motion — safety net
   ===================================================================== */


/* 1. TOKENS ------------------------------------------------------------
   --text-muted #6B7280 was 3.9:1 on var(--nv-bg) (fails AA for small text).
   var(--nv-tx3) = 6.4:1 on var(--nv-bg) and 6.0:1 on var(--nv-card) -> passes AA.        */
:root {
  --text-muted: var(--nv-tx3);
  --polish-ease: cubic-bezier(.16, 1, .3, 1);
  --polish-ring: var(--nv-acc2);
}


/* 2. ROOT / DOCUMENT HYGIENE ----------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;   /* inherited; :active feedback in §7 */
  scroll-padding-top: 88px;                   /* anchors land below the fixed nav */
}
@media (max-width: 768px) {
  html { scroll-padding-top: 72px; }
}

/* overflow-x: hidden on <body> turns body into a scroll container: it can
   be shifted sideways by focus()/scrollIntoView() and it silently disables
   every position: sticky (e.g. .process-sticky). `clip` cuts the same
   overflow WITHOUT creating a scroll container. Old engines keep `hidden`. */
@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}


/* 3. DYNAMIC VIEWPORT UNITS -----------------------------------------
   Overlays / menus  -> 100dvh (always exactly the visible area)
   Hero / full-screen sections -> 100svh (stable: no jump when the
   mobile URL bar collapses, no --vh resize thrash)                    */
@supports (height: 100dvh) {
  .mobile-menu {
    height: 100dvh;
  }
  .scroll-progress.scroll-max {
    height: 100dvh;
    animation-name: polishScrollExplode;
  }
}
@keyframes polishScrollExplode {
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  100% { opacity: .6; }
}

@supports (height: 100svh) {
  /* index hero (style.css: 100vh / --vh) + showcase hero (inline: 100vh) */
  .hero {
    height: 100svh;
    min-height: 500px;
  }
  @media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
    .hero {
      min-height: 100svh;
    }
  }

  /* showcase full-screen sections (inline <style> uses 100vh / 90vh / 80vh …)
     — scoped by their unique ids so index sections are never touched */
  #orbitSection,
  #ctaSection     { min-height: 100svh; }
  #galaxySection  { min-height: 90svh; }
  #processSection { min-height: 80svh; }
  #glitchSection  { min-height: 60svh; }
  #flyawaySection { min-height: 50svh; }

  @media (max-width: 768px) {
    /* mirrors the inline mobile overrides of showcase.html */
    #glitchSection,
    #processSection,
    #flyawaySection,
    #galaxySection { min-height: auto; }
    #ctaSection    { min-height: 70svh; }
  }
}


/* 4. SAFE AREAS -------------------------------------------------------
   env() is 0 unless the page opts into viewport-fit=cover, so these are
   no-ops today and correct if the meta viewport ever gets it.
   The top inset is added as a transparent top border so the navs' own
   padding (which other layers may tune) is never overwritten; the
   background still paints under it (background-clip: border-box).    */
.navbar,
.nav {
  border-top: env(safe-area-inset-top, 0px) solid transparent;
}
.mobile-menu {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overscroll-behavior: contain;
}


/* 5. HORIZONTAL OVERFLOW — CAUSES ------------------------------------ */

/* contact: blurred orbs (400px, right:-5%) and the info cards' entrance
   offset (translateX(30px)) pushed the body 6–60px wider than the screen */
.contact-orbs {
  overflow: hidden;
}
@supports (overflow: clip) {
  .contact-page {
    overflow-x: clip;
  }
  /* showcase CTA: canvas + gooey blobs bleed sideways; vertical bleed of
     the canvas (top:-30%, height:160%) is intentional and stays visible */
  #ctaSection {
    overflow-x: clip;
  }
  /* index orbit CTA: glow + orbiting dots never widen the page */
  .orbit-cta-section {
    overflow-x: clip;
  }
}

/* showcase orbit: on phones the container is scaled to .65, but
   .reveal-scale.visible (higher specificity) reset it to scale(1) after the
   reveal -> 580px rings on a 320–414px screen. Keep the phone scale. */
@media (max-width: 768px) {
  #orbitContainer.reveal-scale.visible { transform: scale(.65); }
}
@media (max-width: 480px) {
  #orbitContainer.reveal-scale,
  #orbitContainer.reveal-scale.visible { transform: scale(.56); }
  #orbitContainer.reveal-scale:not(.visible) { transform: scale(.5); }
  #orbitSection h2 { margin-bottom: 1.5rem; }
}
@media (max-width: 360px) {
  #orbitContainer.reveal-scale,
  #orbitContainer.reveal-scale.visible { transform: scale(.5); }
  #orbitContainer.reveal-scale:not(.visible) { transform: scale(.45); }
}

/* long unbreakable strings (email addresses) never force a card wider */
.contact-info-item > div {
  min-width: 0;
}
.contact-info-item a {
  overflow-wrap: anywhere;
}


/* 6. FOCUS RINGS -------------------------------------------------------
   style.css draws `*:focus-visible { outline: 2px solid violet }`.
   Only colour + offset are changed here, so components that deliberately
   set `outline: none` (carousels draw their own ring) stay untouched.   */
*:focus-visible {
  outline-color: var(--polish-ring);
  outline-offset: 3px;
}
:focus:not(:focus-visible) {
  outline: none;
}
/* full-width rows get a rounded ring instead of a hard box */
.faq-question:focus-visible {
  border-radius: 8px;
}
/* text fields: same cyan language, drawn as a ring (fields have outline:none) */
.form-input:focus-visible {
  border-color: rgba(var(--nv-acc2-rgb), .7);
  box-shadow: 0 0 0 1px rgba(var(--nv-acc2-rgb), .55), 0 0 0 4px rgba(var(--nv-acc2-rgb), .16);
}


/* 7. TAP TARGETS + PRESS FEEDBACK ------------------------------------ */
/* (inputs are excluded on purpose: range sliders need the UA's pan-y) */
:where(a, button, [role="button"], summary) {
  touch-action: manipulation;              /* no double-tap zoom on controls */
}

/* nav + menus */
.mobile-menu-links a,
.mobile-menu > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}
.navbar .nav-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.nav .nav-brand {
  min-height: 44px;
}

/* 3D laptop theme pills (were ~27px tall on phones) */
@media (max-width: 768px) {
  .laptop-themes {
    gap: 8px;
  }
  .laptop-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    font-size: .8125rem;
  }
}

/* FAQ rows */
.faq-question {
  min-height: 56px;
  gap: 16px;
}

/* contact links: bigger hit area without moving layout (inline padding) */
.contact-info-item a {
  padding-block: 10px;
}

/* press feedback — skipped where motion-kit already animates the press */
@media (hover: none) and (pointer: coarse) {
  html:not([data-mk-press-all]) :is(.btn-primary, .btn-secondary):not([data-press]):active,
  .nav-cta:active,
  .laptop-theme-btn:active {
    transform: scale(.98);
    transition-duration: 120ms;
  }
}
@media (hover: hover) and (pointer: fine) {
  html:not([data-mk-press-all]) :is(.btn-primary, .btn-secondary):not([data-press]):active,
  .laptop-theme-btn:active {
    transform: scale(.98);
    transition-duration: 120ms;
  }
}
.nav-links a:active,
.mobile-menu-links a:not(.btn-primary):active,
.mobile-menu > a:active,
.contact-info-item a:active,
.faq-question:active {
  opacity: .72;
}
.laptop-theme-btn {
  transition: background-color 200ms var(--polish-ease), border-color 200ms var(--polish-ease),
              color 200ms var(--polish-ease), box-shadow 250ms var(--polish-ease),
              transform 200ms var(--polish-ease);
}
/* plain text links (no class) get a soft colour/press transition;
   zero specificity, so any component rule wins */
:where(a:not([class])) {
  transition: color 200ms var(--polish-ease), opacity 200ms var(--polish-ease);
}


/* 8. TYPOGRAPHY RHYTHM ------------------------------------------------ */
h1, h2, h3,
.section-title,
.hero-title,
.faq-question span {
  text-wrap: balance;
}
p, li, dd, blockquote,
.section-subtitle {
  text-wrap: pretty;
}

.section-title {
  letter-spacing: -.025em;
}
.section-subtitle {
  max-width: min(600px, 65ch);
}
.faq-answer p {
  max-width: 68ch;
}
.testimonial-text {
  hanging-punctuation: first;
}

/* mobile: one scale for every section header (8px grid) */
@media (max-width: 768px) {
  .section-header {
    margin-bottom: 40px;
  }
  .section-label {
    margin-bottom: 12px;
  }
  .section-title {
    font-size: clamp(1.625rem, 6.6vw, 2.25rem);
    line-height: 1.15;
    margin-bottom: 16px;
  }
  .section-subtitle {
    font-size: 1rem;
    line-height: 1.65;
  }
  .card p,
  .faq-answer p,
  .testimonial-text {
    font-size: .9375rem;
    line-height: 1.7;
  }
}
@media (max-width: 375px) {
  .section-title {
    font-size: 1.625rem;
  }
}

/* headings: crisp display rendering */
h1, h2, h3,
.section-title,
.nav-logo {
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
/* numbers that count / tick never jitter: cifre de lățime egală + lățime fixă (0 → 24 nu mută rândul) */
.stat-number {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 2ch;
  text-align: right;
}


/* 9. SMALL PREMIUM DETAILS ------------------------------------------- */

/* readable secondary copy on showcase (was 0.35 / 0.6 opacity) */
.nav-home-hint {
  color: rgba(255, 255, 255, .6);
  -webkit-text-fill-color: rgba(255, 255, 255, .6);
}
.nav-home-hint svg {
  stroke: rgba(255, 255, 255, .6);
}
.techniques-section .section-pc {
  opacity: .92;
}
/* showcase "Scroll pentru a descoperi" hint wrapped onto 2 ragged lines */
#scrollIndicator {
  white-space: nowrap;
  text-align: center;
}

/* inner scrollers: thin, on-brand */
.billing-table-wrapper,
.fact-table-wrap,
textarea {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--nv-acc-rgb), .55) transparent;
}

/* images never leave a "ghost" when a drag carousel is swiped with a mouse */
img {
  -webkit-user-drag: none;
}


/* 10. REDUCED MOTION — SAFETY NET ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  /* content that is only revealed by an animation must still be visible */
  .reveal,
  .reveal-scale,
  .hero h1 .word,
  .contact-info-card,
  .contact-benefits li {
    opacity: 1 !important;
  }
  .reveal,
  .hero h1 .word,
  .contact-info-card,
  .contact-benefits li {
    transform: none !important;
  }
  .scroll-arrow,
  .about-orb,
  .contact-orb,
  .orbit-dot,
  .laptop-glow,
  .orbit-cta-section::before {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------
   Final pass: hero legibility over the 3D crystal
   The crystal's bright facets sit right behind the subtitle; a soft
   radial scrim + text halo keeps the copy crisp without hiding the 3D.
   --------------------------------------------------------------- */
#hero .hero-content {
  position: relative;
  z-index: 1;
  isolation: isolate;
}
#hero .hero-content::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 52%;
  width: min(820px, 130%);
  height: 125%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--nv-bg-rgb), 0.58), rgba(var(--nv-bg-rgb), 0.3) 58%, rgba(var(--nv-bg-rgb), 0) 100%);
  pointer-events: none;
}
#hero .hero-subtitle {
  color: #d3d8e2;
  text-shadow: 0 1px 2px rgba(var(--nv-bg-rgb), 0.9), 0 0 16px rgba(var(--nv-bg-rgb), 0.95), 0 0 34px rgba(var(--nv-bg-rgb), 0.75);
}
#hero .hero-label {
  text-shadow: 0 0 12px rgba(var(--nv-bg-rgb), 0.95), 0 0 2px rgba(var(--nv-bg-rgb), 0.9);
}
@media (max-width: 768px) {
  .has-bottom-bar #hero .hero-scroll-indicator {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}