/* ============ Fonts ============ */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/BricolageGrotesque-Variable.woff2') format('woff2-variations'),
       url('../fonts/BricolageGrotesque-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-latin.woff2') format('woff2-variations'),
       url('../fonts/Inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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';
  src: url('../fonts/Inter-latin-ext.woff2') format('woff2-variations'),
       url('../fonts/Inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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;
}

/* ============ Tokens ============ */
:root{
  --bg: #f7f6f3;
  --surface: #ffffff;
  --ink: #141413;
  --ink-soft: #343431;
  --muted: #6e6d67;
  --muted-2: #9b9a93;
  --border: #e8e6e0;
  --border-strong: #d9d7cf;
  --accent: #0b63ff;
  --accent-bright: #3b82ff;
  --accent-soft: #e9f0ff;
  --green: #17a04b;
  --green-soft: #e9f6ee;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --shadow-soft: 0 1px 2px rgba(20,20,19,.04), 0 8px 24px -12px rgba(20,20,19,.10);
  --shadow-lift: 0 2px 4px rgba(20,20,19,.05), 0 18px 40px -16px rgba(20,20,19,.16);
}

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; }
summary{ list-style: none; cursor: pointer; }
summary::-webkit-details-marker{ display: none; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container{
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 24px;
}

.section{ padding: 108px 0; position: relative; }
[id]{ scroll-margin-top: 84px; }

.skip-link{
  position: absolute;
  left: -999px;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  z-index: 999;
}
.skip-link:focus{ left: 24px; top: 24px; }

::selection{ background: var(--ink); color: #fff; }

/* ============ Type ============ */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}
.kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.kicker::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.section-head{
  max-width: 660px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head h2{
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  margin-bottom: 16px;
}
.section-sub{
  color: var(--muted);
  font-size: 1.07rem;
}

/* ============ Buttons ============ */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 560;
  font-size: 15px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 26px -10px rgba(11, 99, 255, 0.55);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  white-space: nowrap;
  will-change: transform;
}
.btn::after{
  content: "→";
  font-family: var(--font-body);
  transition: transform .2s ease;
}
.btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 16px 36px -10px rgba(11, 99, 255, 0.7);
}
.btn:hover::after{ transform: translateX(3px); }
.btn-sm{ padding: 10px 20px; font-size: 14px; }
.btn-lg{ padding: 16px 32px; font-size: 16px; }
.btn-block{ width: 100%; }

/* ============ CTA sticky jos ============ */
.sticky-cta{
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  transform: translate(-50%, 150%);
  opacity: 0;
  pointer-events: none;
  padding: 15px 30px;
  transition: transform .4s cubic-bezier(.22, .9, .3, 1), opacity .35s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 14px rgba(20, 20, 19, 0.18);
}
.sticky-cta.show{
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.sticky-cta.show:hover{
  transform: translate(-50%, -2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 18px rgba(20, 20, 19, 0.22);
}

/* ============ Header ============ */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background .25s ease, box-shadow .25s ease;
}
.site-header.scrolled{
  background: rgba(247, 246, 243, 0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 -1px 0 var(--border);
}
.nav-inner{
  display: flex;
  align-items: center;
  gap: 28px;
  height: 72px;
}
.logo{ display: flex; align-items: center; margin-right: auto; }
.logo img{ height: 20px; width: auto; }
.main-nav{
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14.5px;
  font-weight: 500;
}
.main-nav a:not(.nav-cta){
  position: relative;
  color: var(--muted);
  transition: color .15s ease;
  padding-bottom: 3px;
}
.main-nav a:not(.nav-cta)::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s ease;
}
.main-nav a:not(.nav-cta):hover{ color: var(--ink); }
.main-nav a:not(.nav-cta):hover::after{
  transform: scaleX(1);
  transform-origin: left;
}
.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 42px; height: 42px;
}
.nav-toggle span{
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s ease;
}
.site-header.nav-open .nav-toggle span:first-child{ transform: translateY(4px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:last-child{ transform: translateY(-4px) rotate(-45deg); }

/* ============ Hero ============ */
.hero{
  padding: 168px 0 0;
  position: relative;
  overflow: hidden;
}
.hero::before{
  content: "";
  position: absolute;
  left: 50%; top: 46%;
  width: min(1100px, 120vw); height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(11, 99, 255, 0.08), transparent 70%);
  pointer-events: none;
}
.hero-inner{
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero h1{
  font-size: clamp(2.7rem, 6.4vw, 4.9rem);
  letter-spacing: -0.028em;
  margin-bottom: 24px;
}
.hero-sub{
  max-width: 840px;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  margin-bottom: 36px;
}
.hero-cta{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.hero-note{
  font-size: 13.5px;
  color: var(--muted-2);
}

.hero-shot{
  position: relative;
  margin-top: 64px;
  padding-bottom: 0;
}
.shot-frame{
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  box-shadow: 0 -1px 0 rgba(255,255,255,.6), 0 -30px 80px -40px rgba(20,20,19,.18),
              0 2px 6px rgba(20,20,19,.05), 0 30px 70px -30px rgba(20,20,19,.22);
}
.shot-bar{
  display: flex;
  gap: 7px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background: #fcfbf9;
}
.shot-bar i{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
}
.shot-frame img{ width: 100%; height: auto; }

/* ============ Problema ============ */
.problema{
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.problema-list{
  max-width: 980px;
  margin-inline: auto;
  border-top: 1px solid var(--border);
}
.p-row{
  display: grid;
  grid-template-columns: 64px 1.25fr 1fr;
  gap: 28px;
  align-items: center;
  padding: 34px 18px;
  border-bottom: 1px solid var(--border);
  border-radius: 14px;
  transition: background .25s ease;
}
.p-row:hover{
  background: color-mix(in srgb, var(--pc) 5%, transparent);
}
.p-num{
  font-family: var(--font-display);
  font-weight: 550;
  font-size: 1rem;
  color: var(--pc);
}
.p-row h3{
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.p-row p{
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.6;
}
.p-row .mark{
  color: var(--pc);
  background-image: linear-gradient(var(--pc-soft), var(--pc-soft));
  background-repeat: no-repeat;
  background-size: 100% 46%;
  background-position: 0 78%;
  border-radius: 5px;
  padding: 0 0.12em;
  margin: 0 -0.06em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* markerul se "trage" cand randul intra in ecran */
@media (min-width: 761px){
  html.js .p-row .mark{
    background-size: 0% 46%;
    transition: background-size .7s cubic-bezier(.22, 1, .3, 1) .25s;
  }
  html.js .p-row.is-visible .mark{
    background-size: 100% 46%;
  }
}

.problema-final{
  margin-top: 44px;
  text-align: center;
  font-size: 1.12rem;
  color: var(--muted);
  max-width: 560px;
  margin-inline: auto;
}
.problema-final strong{ color: var(--ink); font-weight: 600; }

/* ============ Nise ============ */
.nise{ position: relative; }
.nise-big{
  max-width: 1020px;
  margin-inline: auto;
  border-top: 1px solid var(--border);
}
.nb-row{
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr 34px;
  align-items: center;
  gap: 18px;
  width: 100%;
  text-align: left;
  padding: 20px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .25s ease;
}
.nb-row:hover{ background: color-mix(in srgb, var(--pc) 5%, transparent); }
.nb-num{
  font-family: var(--font-display);
  font-weight: 550;
  font-size: 1rem;
  color: var(--pc);
  opacity: .55;
  transition: opacity .25s ease;
}
.nb-row:hover .nb-num{ opacity: 1; }
.nb-name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  /* umplere cu culoare, de la stanga la dreapta, la hover */
  background-image: linear-gradient(to right, var(--pc) 50%, var(--ink) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position .5s cubic-bezier(.22, 1, .3, 1), transform .35s cubic-bezier(.22, 1, .3, 1);
}
.nb-row:hover .nb-name{
  background-position: 0% 0;
  transform: translateX(10px);
}
.nb-arrow{
  color: var(--pc);
  opacity: 0;
  transform: translateX(-12px) rotate(-45deg);
  transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .3, 1);
}
.nb-row:hover .nb-arrow{
  opacity: 1;
  transform: translateX(0) rotate(0deg);
}
.nb-desc{ display: none; }

/* cardul care urmareste cursorul */
.nise-card{
  position: absolute;
  left: 0; top: 0;
  z-index: 6;
  width: 290px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--pc, var(--accent));
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: var(--shadow-lift);
  pointer-events: none;
  opacity: 0;
  scale: .92;
  transition: opacity .22s ease, scale .25s cubic-bezier(.22, 1, .3, 1);
  will-change: transform;
}
.nise-card.on{ opacity: 1; scale: 1; }
.nc-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--pc-soft, var(--accent-soft));
  color: var(--pc, var(--accent));
  margin-bottom: 12px;
}
.nc-desc{
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}
@keyframes np-swap{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* intrare in cascada a randurilor */
@media (min-width: 761px){
  html.js .nise-big .nb-row{
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .3, 1), background .25s ease;
  }
  html.js .nise-big.is-visible .nb-row{
    opacity: 1;
    transform: translateY(0);
  }
  html.js .nise-big.is-visible .nb-row:nth-child(2){ transition-delay: .05s; }
  html.js .nise-big.is-visible .nb-row:nth-child(3){ transition-delay: .10s; }
  html.js .nise-big.is-visible .nb-row:nth-child(4){ transition-delay: .15s; }
  html.js .nise-big.is-visible .nb-row:nth-child(5){ transition-delay: .20s; }
  html.js .nise-big.is-visible .nb-row:nth-child(6){ transition-delay: .25s; }
  html.js .nise-big.is-visible .nb-row:nth-child(7){ transition-delay: .30s; }
  html.js .nise-big.is-visible .nb-row:nth-child(8){ transition-delay: .35s; }
  html.js .nise-big.is-visible .nb-row:nth-child(9){ transition-delay: .40s; }
  html.js .nise-big.is-visible .nb-row:nth-child(10){ transition-delay: .45s; }
}

.nise-final{
  margin-top: 44px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.nise-final p{
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 540px;
}
.nise-final strong{ color: var(--ink); }

/* ============ Checklist ============ */
.checklist li{
  position: relative;
  padding-left: 30px;
  margin: 10px 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
}
.checklist li::before{
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8' stroke='%230b63ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* ============ Functionalitati ============ */
.feats{
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* mini-interfete */
.fp-panel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-soft);
  max-width: 420px;
  width: 100%;
  margin-inline: auto;
}
.fp-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.fp-head strong{ font-family: var(--font-display); font-size: 1.05rem; }
.fp-badge{
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
}
.fp-notif{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--nc);
  border-radius: 12px;
  background: #fff;
  margin-top: 10px;
}
.fp-notif i{
  flex-shrink: 0;
  width: 10px; height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--nc);
  box-shadow: 0 0 0 4px var(--nc-soft);
}
.fp-notif strong{ display: block; font-size: 0.9rem; letter-spacing: -0.01em; }
.fp-notif span{ color: var(--muted); font-size: 0.8rem; }

.fp-label{
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}
.fp-sum{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.1rem;
  letter-spacing: -0.02em;
  margin: 4px 0 12px;
}
.fp-bar{
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  margin-bottom: 14px;
}
.fp-bar i{
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #0e8a4d, #35c27a);
  transition: width 1s cubic-bezier(.22, 1, .3, 1) .35s;
}
.fs-slide.play .fp-bar i, html:not(.js) .fp-bar i{ width: 64%; }
.fp-row{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  color: var(--muted);
  padding: 7px 0;
  border-top: 1px solid var(--border);
}
.fp-row strong{ margin-left: auto; color: var(--ink); font-size: 0.92rem; }
.fp-dot{ width: 9px; height: 9px; border-radius: 50%; }
.fp-dot.ok{ background: #0e8a4d; }
.fp-dot.bad{ background: #dd4632; }

.fp-client{
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.fp-avatar{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #6d4aff;
  color: #fff;
  font-weight: 650;
  font-size: 14px;
}
.fp-client strong{ display: block; font-size: 0.95rem; }
.fp-client span{ color: var(--muted); font-size: 0.8rem; }
.fp-steps li{
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.fp-steps li i{
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: #fff;
}
.fp-steps li.done{ color: var(--ink-soft); }
.fp-steps li.done i{
  border-color: #0e8a4d;
  background: #0e8a4d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.fp-steps li.now{ color: var(--ink); font-weight: 550; }
.fp-steps li.now i{
  border-color: #6d4aff;
  background: #6d4aff;
  box-shadow: 0 0 0 4px rgba(109, 74, 255, 0.18);
  animation: step-pulse 2s ease-in-out infinite;
}
@keyframes step-pulse{
  50%{ box-shadow: 0 0 0 7px rgba(109, 74, 255, 0.10); }
}

/* ---- scena cu scroll (desktop) ---- */
.feats-show{ --fc: #0b63ff; --fc-soft: #e9f0ff; }
.feats-show[data-step="1"]{ --fc: #0e8a4d; --fc-soft: #d9f0e2; }
.feats-show[data-step="2"]{ --fc: #6d4aff; --fc-soft: #e9e3ff; }

@media (min-width: 901px){
  .feats-show{ height: 240vh; }
  .fs-pin{
    position: sticky;
    top: 86px;
    height: min(calc(100vh - 110px), 640px);
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
  }
}

.fs-left{
  display: flex;
  gap: 26px;
}
.fs-progress{
  position: relative;
  width: 3px;
  border-radius: 999px;
  background: var(--border);
  align-self: stretch;
}
.fs-progress i{
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 0%;
  border-radius: 999px;
  background: var(--fc);
  transition: background .5s ease;
}
.fs-items{ display: flex; flex-direction: column; gap: 6px; flex: 1; }
.fs-item{
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  text-align: left;
  padding: 18px 14px;
  border-radius: 16px;
  cursor: pointer;
  transition: background .3s ease, opacity .3s ease;
  opacity: .42;
}
.fs-item.active{
  opacity: 1;
  background: color-mix(in srgb, var(--fc) 6%, transparent);
}
.fs-item:hover{ opacity: .85; }
.fs-item.active:hover{ opacity: 1; }
.fs-num{
  font-family: var(--font-display);
  font-weight: 550;
  font-size: 0.95rem;
  color: var(--fc);
  padding-top: 5px;
}
.fs-item h3{
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  margin-bottom: 8px;
  letter-spacing: -0.015em;
}
.fs-item p{
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}
.fs-item:not(.active) p{ display: none; }

.fs-right{ position: relative; }
.fs-glow{
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background-color: var(--fc);
  opacity: .10;
  filter: blur(70px);
  transition: background-color .6s ease;
  pointer-events: none;
}
.fs-screen{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lift);
  padding: 0 24px 24px;
  min-height: 380px;
  overflow: hidden;
}
.fs-chrome{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 15px 0 13px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.fs-chrome i{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
}
.fs-tag{
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--fc);
  background: var(--fc-soft);
  padding: 4px 12px;
  border-radius: 999px;
  transition: background .5s ease, color .5s ease;
}
.fs-slide{
  position: absolute;
  left: 24px; right: 24px;
  top: 68px;
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.22, 1, .3, 1);
  pointer-events: none;
}
.fs-slide.active{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.fs-slide.leaving{ transform: translateY(-30px); }
.fp-dot.wait{ background: #d97706; }

/* notificarile intra pe rand cand slide-ul devine activ */
html.js .fs-slide .fp-notif{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .3, 1);
}
html.js .fs-slide.play .fp-notif{ opacity: 1; transform: none; }
html.js .fs-slide.play .n1{ transition-delay: .25s; }
html.js .fs-slide.play .n2{ transition-delay: .4s; }
html.js .fs-slide.play .n3{ transition-delay: .55s; }

/* bifele din fisa clientului apar in cascada */
html.js .fs-slide .fp-steps li{
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22, 1, .3, 1);
}
html.js .fs-slide.play .fp-steps li{ opacity: 1; transform: none; }
html.js .fs-slide.play .fp-steps li:nth-child(1){ transition-delay: .2s; }
html.js .fs-slide.play .fp-steps li:nth-child(2){ transition-delay: .35s; }
html.js .fs-slide.play .fp-steps li:nth-child(3){ transition-delay: .5s; }
html.js .fs-slide.play .fp-steps li:nth-child(4){ transition-delay: .65s; }

.feats-final{
  margin-top: 40px;
  text-align: center;
  color: var(--muted);
  font-size: 1.1rem;
}
.feats-final strong{ color: var(--ink); }

/* ============ Demo ============ */
.demo{
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.dx{ --xc: #0b63ff; --xc-soft: #e9f0ff; max-width: 1000px; margin-inline: auto; }
.dx[data-ex="1"]{ --xc: #0e8a4d; --xc-soft: #d9f0e2; }
.dx[data-ex="2"]{ --xc: #6d4aff; --xc-soft: #e9e3ff; }

.dx-tabs{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.dx-tab{
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  padding: 15px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .2s ease, box-shadow .25s ease;
}
.dx-tab:hover{ transform: translateY(-2px); }
.dx-tab.active{
  background: var(--surface);
  border-color: var(--xc);
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--xc) 55%, transparent);
}
.dx-ico{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--xc-soft);
  color: var(--xc);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.dx-tab.active .dx-ico{ background: var(--xc); color: #fff; transform: scale(1.06); }
.dx-tab-txt strong{
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}
.dx-tab-txt em{
  font-style: normal;
  color: var(--muted);
  font-size: 0.78rem;
}

.dx-stage{ position: relative; }
.dx-player{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lift);
}
.dx-screen{
  position: relative;
  aspect-ratio: 16 / 7.2;
  background:
    radial-gradient(75% 110% at 50% 0%, color-mix(in srgb, var(--xc) 34%, transparent), transparent 62%),
    radial-gradient(60% 90% at 85% 100%, color-mix(in srgb, var(--xc) 18%, transparent), transparent 70%),
    linear-gradient(180deg, #16161a, #0e0e12);
  transition: background .5s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.dx-play{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  padding-left: 4px;
  box-shadow: 0 14px 36px -10px rgba(0, 0, 0, 0.55);
  animation: play-pulse 2.6s ease-in-out infinite;
}
@keyframes play-pulse{
  50%{ box-shadow: 0 14px 36px -10px rgba(0,0,0,.55), 0 0 0 16px color-mix(in srgb, #ffffff 12%, transparent); }
}
.dx-soon{
  font-size: 12.5px;
  font-weight: 550;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
}
.dx-bar{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  background: #0b0b0e;
  color: rgba(255, 255, 255, 0.55);
}
.dx-progress{
  position: relative;
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}
.dx-progress i{
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  border-radius: 999px;
  background: var(--xc);
  animation: dx-progress 9s linear infinite;
  transition: background .5s ease;
}
@keyframes dx-progress{
  from{ width: 0; }
  to{ width: 100%; }
}
.dx-m{
  position: absolute;
  top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%);
}
.dx-m.m1{ left: 28%; } .dx-m.m2{ left: 57%; } .dx-m.m3{ left: 83%; }
.dx-time{ font-size: 12px; font-variant-numeric: tabular-nums; }
.dx-icn{ opacity: .7; }

/* panourile cu chips + bullets */
.dx-panel{ display: none; }
.dx-panel.active{ display: block; }
.dx-chip{
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 999px;
  padding: 10px 17px;
  font-family: var(--font-display);
  font-weight: 550;
  font-size: 13.5px;
  color: var(--ink);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.dx-chip::before{
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--xc);
}
.dx-chip.c1{ left: 5%; top: 14%; }
.dx-chip.c2{ right: 5%; top: 30%; }
.dx-chip.c3{ left: 10%; bottom: 24%; }
html.js .dx-panel .dx-chip{
  opacity: 0;
  transform: translateY(12px) scale(.94);
  transition: opacity .4s ease, transform .45s cubic-bezier(.22, 1.3, .36, 1);
}
html.js .dx-panel.play .dx-chip{ opacity: 1; transform: none; }
html.js .dx-panel.play .dx-chip.c1{ transition-delay: .15s; }
html.js .dx-panel.play .dx-chip.c2{ transition-delay: .3s; }
html.js .dx-panel.play .dx-chip.c3{ transition-delay: .45s; }
.dx-chip{ animation: chipfloat 5s ease-in-out infinite alternate; }
.dx-chip.c2{ animation-delay: -1.8s; }
.dx-chip.c3{ animation-delay: -3.2s; }
@keyframes chipfloat{
  from{ translate: 0 -4px; }
  to{ translate: 0 4px; }
}
.dx-points{ display: none; }

.demo-final{
  margin-top: 44px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.demo-final p{ color: var(--muted); font-size: 1.1rem; }
.demo-final strong{ color: var(--ink); }

/* ============ Testimoniale ============ */
/* fundal foto cu overlay inchis */
.testimoniale{
  isolation: isolate;
  background-color: #101014;
  background-image:
    linear-gradient(180deg, rgba(13,13,17,.88), rgba(13,13,17,.76) 45%, rgba(13,13,17,.9)),
    url('../img/testimoniale-bg.webp');
  background-size: cover;
  background-position: center;
}
.testimoniale .tq blockquote{ color: #fff; }
.testimoniale .tq figcaption strong{ color: #fff; }
.testimoniale .tq figcaption span:not(.tm-avatar){ color: rgba(255,255,255,.62); }

/* citatul-vedeta */
.tq{
  max-width: 880px;
  margin: 0 auto 64px;
  text-align: center;
}
.tq blockquote{
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(1.6rem, 3.6vw, 2.7rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: 30px;
}
.tq figcaption{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  text-align: left;
}
.tq figcaption strong{ display: block; font-size: 0.98rem; }
.tq figcaption span:not(.tm-avatar){ color: var(--muted); font-size: 0.87rem; }
.tq-avatar{ width: 52px; height: 52px; font-size: 17px; }

/* banda infinita de carduri */
.t-marquee{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  margin-inline: calc(50% - 50vw);
  padding: 8px 0 14px;
}
.tm-track{
  display: flex;
  gap: 20px;
  width: max-content;
  animation: tm-move 55s linear infinite;
}
.t-marquee:hover .tm-track{ animation-play-state: paused; }
@keyframes tm-move{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.tm-card{
  width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px 26px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.tm-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.t-stars{
  color: #f1b63c;
  letter-spacing: 3px;
  font-size: 13px;
  margin-bottom: 12px;
}
.tm-card blockquote{
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 18px;
}
.tm-card figcaption{
  display: flex;
  align-items: center;
  gap: 11px;
}
.tm-card figcaption strong{ display: block; font-size: 0.9rem; }
.tm-card figcaption span:not(.tm-avatar){ color: var(--muted); font-size: 0.8rem; }
.tm-avatar{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--tc-soft);
  color: var(--tc);
  font-weight: 650;
  font-size: 13px;
}

/* ============ Pret ============ *//* ============ Pret ============ */
.pret{
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pret-wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1020px;
  margin-inline: auto;
}
.pret-copy h3{
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin-bottom: 14px;
}
.pret-copy > p{
  color: var(--muted);
  margin-bottom: 18px;
  max-width: 440px;
}
.pret-copy .checklist{ margin-bottom: 28px; }
.pret-hint{
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted-2);
}

/* devizul */
.pret-receipt{ perspective: 1000px; }
.pr-paper{
  position: relative;
  background: #fffdf8;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 30px 32px 26px;
  box-shadow: 0 1px 2px rgba(20,20,19,.05), 0 24px 50px -22px rgba(20,20,19,.25);
  transform: rotate(-1.4deg);
  transition: transform .35s cubic-bezier(.22, 1, .3, 1), box-shadow .3s ease;
  will-change: transform;
}
.pret-receipt:hover .pr-paper{
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 2px 4px rgba(20,20,19,.05), 0 34px 70px -26px rgba(20,20,19,.3);
}
.pr-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--border-strong);
  margin-bottom: 6px;
}
.pr-logo img{ height: 14px; width: auto; }
.pr-no{
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-2);
}
.pr-items li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  font-size: 0.93rem;
  color: var(--ink-soft);
}
.pr-items li i{
  flex-shrink: 0;
  width: 19px; height: 19px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8' stroke='%230b63ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.pr-total{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 0 4px;
}
.pr-total > span{
  font-size: 0.95rem;
  font-weight: 600;
}
.pr-total strong{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  letter-spacing: -0.02em;
  line-height: 1;
}
.pr-total em{
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--muted);
  margin-right: 2px;
}
.pr-sub{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--muted);
  padding: 8px 0 14px;
  border-bottom: 1px dashed var(--border-strong);
}
.pr-sub strong{ color: var(--ink); font-weight: 600; }
.pr-note{
  padding-top: 12px;
  font-size: 12px;
  color: var(--muted-2);
}
.pr-stamp{
  position: absolute;
  right: 26px;
  bottom: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 92px; height: 92px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 15px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transform: rotate(-14deg);
  opacity: .85;
  box-shadow: inset 0 0 0 1.5px #fffdf8, inset 0 0 0 3px var(--accent-soft);
  pointer-events: none;
}

/* animatii: liniile se bifeaza in cascada, stampila se tranteste */
@media (min-width: 761px){
  html.js .pret-receipt .pr-items li{
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s ease, transform .4s ease;
  }
  html.js .pret-receipt.is-visible .pr-items li{ opacity: 1; transform: none; }
  html.js .pret-receipt.is-visible .pr-items li:nth-child(1){ transition-delay: .15s; }
  html.js .pret-receipt.is-visible .pr-items li:nth-child(2){ transition-delay: .27s; }
  html.js .pret-receipt.is-visible .pr-items li:nth-child(3){ transition-delay: .39s; }
  html.js .pret-receipt.is-visible .pr-items li:nth-child(4){ transition-delay: .51s; }
  html.js .pret-receipt.is-visible .pr-items li:nth-child(5){ transition-delay: .63s; }
  html.js .pret-receipt.is-visible .pr-items li:nth-child(6){ transition-delay: .75s; }

  html.js .pret-receipt .pr-stamp{
    opacity: 0;
    transform: rotate(-14deg) scale(2.4);
  }
  html.js .pret-receipt.is-visible .pr-stamp{
    animation: stamp-in .45s cubic-bezier(.2, 1.4, .4, 1) 1.05s forwards;
  }
}
@keyframes stamp-in{
  from{ opacity: 0; transform: rotate(-26deg) scale(2.4); }
  60%{ opacity: .9; transform: rotate(-12deg) scale(.94); }
  to{ opacity: .85; transform: rotate(-14deg) scale(1); }
}

/* ============ FAQ ============ *//* ============ FAQ ============ */
.faq-wrap{
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: start;
}
.faq-side{
  position: sticky;
  top: 110px;
}
.faq .section-head{
  text-align: left;
  margin: 0 0 24px;
}
.faq-help{
  margin-top: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  font-size: 0.93rem;
  color: var(--muted);
}
.faq-help p{ margin-bottom: 4px; font-weight: 550; color: var(--ink); }
.faq-help strong{ color: var(--accent); font-weight: 650; }
.faq-help span{ margin: 0 4px; }
.faq-help-link{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq-list details{
  border-bottom: 1px solid var(--border);
  border-radius: 14px;
  transition: background .25s ease;
}
.faq-list details:first-of-type{ border-top: 1px solid var(--border); }
.faq-list details[open]{
  background: color-mix(in srgb, var(--qc, var(--accent)) 5%, transparent);
}
.faq-list summary{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 19px 14px;
  font-family: var(--font-display);
  font-weight: 550;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  transition: color .15s ease;
}
.faq-num{
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 550;
  color: var(--qc, var(--accent));
  opacity: .6;
  transition: opacity .2s ease;
  font-variant-numeric: tabular-nums;
}
.faq-list summary:hover{ color: var(--qc, var(--accent)); }
.faq-list summary:hover .faq-num,
.faq-list details[open] .faq-num{ opacity: 1; }
.faq-list details[open] summary{ color: var(--qc, var(--accent)); }
.faq-plus{
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
  width: 22px; height: 22px;
}
.faq-plus::before, .faq-plus::after{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 1.8px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .25s ease;
}
.faq-plus::after{ transform: translate(-50%, -50%) rotate(90deg); }
details[open] .faq-plus::after{ transform: translate(-50%, -50%) rotate(0deg); }
.faq-list details p{
  color: var(--muted);
  padding: 0 50px 20px 44px;
  font-size: 0.97rem;
  overflow: hidden;
}
/* intrebarile intra in cascada */
@media (min-width: 761px){
  html.js .faq-list details.reveal:nth-child(2){ transition-delay: .04s; }
  html.js .faq-list details.reveal:nth-child(3){ transition-delay: .08s; }
  html.js .faq-list details.reveal:nth-child(4){ transition-delay: .12s; }
  html.js .faq-list details.reveal:nth-child(5){ transition-delay: .16s; }
  html.js .faq-list details.reveal:nth-child(6){ transition-delay: .20s; }
  html.js .faq-list details.reveal:nth-child(7){ transition-delay: .24s; }
  html.js .faq-list details.reveal:nth-child(8){ transition-delay: .28s; }
  html.js .faq-list details.reveal:nth-child(9){ transition-delay: .32s; }
  html.js .faq-list details.reveal:nth-child(10){ transition-delay: .36s; }
}

/* ============ Programeaza ============ *//* ============ Programeaza ============ */
.prog-card{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  background: var(--ink);
  color: #fff;
  border-radius: 28px;
  padding: 56px;
}
.prog-left h2{
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  margin-bottom: 14px;
}
.prog-left > p{
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 22px;
  max-width: 420px;
}
.prog-left .checklist li{ color: rgba(255, 255, 255, 0.85); }
.prog-left .checklist li::before{
  background-color: rgba(59, 130, 255, 0.22);
}
.prog-tel{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  transition: color .15s ease;
}
.prog-tel:hover{ color: #fff; }
.prog-tel strong{ color: #fff; }

.prog-form{
  background: var(--surface);
  color: var(--ink);
  border-radius: 18px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-field label{
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 7px;
}
.form-field label em{
  font-style: normal;
  font-weight: 400;
  color: var(--muted-2);
}
.form-field input,
.form-field textarea{
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-field textarea{ resize: vertical; min-height: 84px; }
.form-field ::placeholder{ color: var(--muted-2); }
.form-field input:focus,
.form-field textarea:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(11, 99, 255, 0.14);
}
.form-status{
  text-align: center;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--green);
  background: var(--green-soft);
  border: 1px solid rgba(23, 160, 75, 0.25);
  border-radius: 11px;
  padding: 11px 14px;
}
.form-status.is-error{
  color: #b4472f;
  background: #fdf0ec;
  border-color: rgba(180, 71, 47, 0.3);
}
.form-note{
  text-align: center;
  font-size: 12.5px;
  color: var(--muted-2);
}

/* ============ Footer ============ */
.site-footer{
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-top: 56px;
}
.footer-inner{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 44px;
}
.footer-brand .logo img{ height: 18px; }
.footer-brand p{ color: var(--muted); margin-top: 14px; font-size: 0.93rem; }
.footer-col{ display: flex; flex-direction: column; gap: 10px; }
.footer-col h4{
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted-2);
  font-weight: 600;
  margin-bottom: 6px;
}
.footer-col a{
  color: var(--muted);
  font-size: 0.93rem;
  transition: color .15s ease;
}
.footer-col a:hover{ color: var(--ink); }
.footer-bottom{
  border-top: 1px solid var(--border);
  padding-top: 22px;
  padding-bottom: 22px;
}
.footer-bottom p{ color: var(--muted-2); font-size: 13px; }

/* ============ Reveal (doar desktop, cu JS activ) ============ */
@media (min-width: 761px){
  html.js .reveal{
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease;
  }
  html.js .reveal.is-visible{
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============ Responsive ============ */
@media (max-width: 1060px){
}

@media (max-width: 900px){
  .nav-toggle{ display: flex; }
  .main-nav{
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 8px 24px 22px;
    box-shadow: 0 30px 50px -30px rgba(20, 20, 19, 0.2);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .site-header.nav-open{
    background: var(--bg);
    box-shadow: inset 0 -1px 0 var(--border);
  }
  .site-header.nav-open .main-nav{
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .25s ease, transform .25s ease;
  }
  .main-nav a:not(.nav-cta){ padding: 13px 2px; font-size: 16px; }
  .main-nav a:not(.nav-cta)::after{ display: none; }
  .main-nav .nav-cta{
    margin-top: 12px;
    padding: 14px 22px;
    font-size: 15px;
  }

  .faq-wrap{ grid-template-columns: 1fr; gap: 36px; }
  .faq-side{ position: static; }
  .faq .section-head{ text-align: center; margin-inline: auto; }
  .faq-list details p{ padding: 0 14px 18px 44px; }
  .prog-card{ grid-template-columns: 1fr; gap: 40px; padding: 40px 28px; }
  .footer-inner{ grid-template-columns: 1fr 1fr; }
}

.nowrap{ white-space: nowrap; }

@media (max-width: 900px){
  .dx-tabs{ grid-template-columns: 1fr; gap: 8px; }
  .dx-tab{ padding: 13px 15px; }
  .dx-screen{ aspect-ratio: 16 / 9; }
  .dx-chip{ display: none; }
  .dx-panel.active .dx-points{
    display: block;
    padding: 16px 4px 0;
  }
  .fs-pin{ display: block; }
  .fs-left{ display: block; }
  .fs-progress{ display: none; }
  .fs-right{ display: none; }
  .fs-items{ display: block; }
  .fs-item{
    opacity: 1;
    padding: 22px 4px 10px;
    grid-template-columns: 34px 1fr;
    cursor: default;
  }
  .fs-item p{ display: block !important; }
  /* pe mobil, fiecare preview devine propriul card, sub titlul lui */
  .fs-slide{
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--fc, var(--accent));
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow-soft);
    margin: 6px 0 10px;
  }
  .fs-slide[data-step="0"]{ --fc: #0b63ff; }
  .fs-slide[data-step="1"]{ --fc: #0e8a4d; }
  .fs-slide[data-step="2"]{ --fc: #6d4aff; }
  .nise-card{ display: none; }
  .nb-row{ grid-template-columns: 40px 1fr 26px; padding: 16px 6px; gap: 12px; }
  .nb-name{
    background-image: none;
    color: var(--ink-soft);
    font-size: clamp(1.25rem, 5.4vw, 1.7rem);
    transform: none !important;
  }
  .nb-arrow{
    opacity: .45;
    transform: rotate(45deg);
  }
  .nb-row.open .nb-arrow{ opacity: 1; transform: rotate(90deg); }
  .nb-row.open{ background: color-mix(in srgb, var(--pc) 6%, transparent); }
  .nb-row.open .nb-name{ color: var(--pc); }
  .nb-row.open .nb-num{ opacity: 1; }
  .nb-row.open .nb-desc{
    display: block;
    grid-column: 2 / -1;
    color: var(--muted);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.93rem;
    line-height: 1.6;
    border-left: 3px solid var(--pc);
    padding: 2px 0 2px 12px;
    margin-top: 4px;
    animation: np-swap .3s ease;
  }
}

@media (max-width: 760px){
  .tm-card{ width: 300px; padding: 20px; }
  .tq{ margin-bottom: 44px; }
  .only-desktop{ display: none; }
  .nowrap{ white-space: normal; }
  .section{ padding: 72px 0; }
  .hero{ padding-top: 128px; }
  .hero-shot{ margin-top: 48px; }

  /* poza din hero: marita, decupata in dreapta, lipita de marginea ecranului */
  .hero-shot{ padding-right: 0; }
  .shot-frame{
    border-top-right-radius: 0;
    border-right: none;
  }
  .shot-frame img{
    width: 188%;
    max-width: none;
  }

  .p-row{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 26px 4px;
  }
  .p-num{ font-size: 0.9rem; }
  .form-row{ grid-template-columns: 1fr; }
  .pret-wrap{ grid-template-columns: 1fr; gap: 40px; }
  .pr-paper{ transform: rotate(0); padding: 24px 20px 20px; }
  .pr-stamp{ width: 78px; height: 78px; font-size: 13px; bottom: 182px; right: 12px; }
  .footer-inner{ grid-template-columns: 1fr; }

  /* randare amanata sub fold */
  body:not(.cv-off) .problema, body:not(.cv-off) .nise, body:not(.cv-off) .demo,
  body:not(.cv-off) .testimoniale, body:not(.cv-off) .pret, body:not(.cv-off) .faq,
  body:not(.cv-off) .programeaza{
    content-visibility: auto;
    contain-intrinsic-size: auto 1100px;
  }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  html.js .reveal{ opacity: 1; transform: none; transition: none; }
  .btn, .p-row, .nb-row, .nb-name, .nb-arrow, .nise-card, .dx-tab, .tm-card, .fs-slide, .fs-item{ transition: none; }
  .tm-track{ animation: none; }
  .dx-progress i{ animation: none; width: 35%; }
  .dx-play{ animation: none; }
  .dx-chip{ animation: none; }
  html.js .dx-panel .dx-chip{ opacity: 1; transform: none; transition: none; }
  html.js .pret-receipt .pr-items li{ opacity: 1; transform: none; transition: none; }
  html.js .pret-receipt .pr-stamp{ opacity: .85; transform: rotate(-14deg) scale(1); animation: none !important; }
  .pr-paper{ transition: none; }
  .t-marquee{ overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .fp-steps li.now i{ animation: none; }
  html.js .fs-slide .fp-notif, html.js .fs-slide .fp-steps li{ opacity: 1; transform: none; transition: none; }
  .fp-bar i{ transition: none; width: 64% !important; }
  html.js .nise-big .nb-row{ opacity: 1; transform: none; transition: none; }
}

/* ============ Pagini legale ============ */
.legal-hero{
  padding: 150px 0 40px;
  text-align: center;
}
.legal-hero h1{
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  margin-bottom: 12px;
}
.legal-updated{ color: var(--muted-2); font-size: 0.92rem; }
.legal-content{ padding-bottom: 96px; }
.legal-container{ max-width: 780px; }
.legal-content h2{
  font-size: 1.4rem;
  margin: 44px 0 16px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.legal-content h3{ font-size: 1.1rem; margin: 26px 0 12px; }
.legal-content p{
  color: var(--muted);
  margin-bottom: 14px;
  font-size: 0.96rem;
  line-height: 1.75;
}
.legal-content strong{ color: var(--ink); font-weight: 600; }
.legal-content a{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}
.legal-content ul, .legal-content ol{ margin: 0 0 16px; padding-left: 4px; }
.legal-content li{
  position: relative;
  padding-left: 26px;
  margin: 8px 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.7;
}
.legal-content ul > li::before{
  content: "";
  position: absolute;
  left: 7px; top: 0.72em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.legal-content ol{ counter-reset: legal-ol; }
.legal-content ol > li{ counter-increment: legal-ol; }
.legal-content ol > li::before{
  content: counter(legal-ol) ".";
  position: absolute;
  left: 0; top: 0;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.9rem;
}
.table-wrap{
  overflow-x: auto;
  margin: 0 0 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.legal-content table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 480px;
}
.legal-content th, .legal-content td{
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  vertical-align: top;
  line-height: 1.6;
}
.legal-content th{
  font-weight: 600;
  color: var(--ink);
  font-size: 0.85rem;
  background: var(--bg);
  white-space: nowrap;
}
.legal-content tr:last-child td{ border-bottom: none; }
.legal-content code{
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.85em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
.legal-content hr{ border: none; border-top: 1px solid var(--border); margin: 32px 0; }

/* ======================================================
   Microanimatii & interactiuni (awwwards layer)
   ====================================================== */

/* ---- Intrare hero (doar cu JS; fallback vizibil fara JS) ---- */
html.js .hero-title .line{ display: block; overflow: hidden; }
html.js .hero-title .line > span{
  display: block;
  transform: translateY(112%);
}
html.js body.loaded .hero-title .line > span{
  animation: line-up .9s cubic-bezier(.22, 1, .3, 1) forwards;
}
html.js body.loaded .hero-title .line:nth-child(2) > span{ animation-delay: .09s; }
@keyframes line-up{ to{ transform: translateY(0); } }

html.js .hero-in{
  opacity: 0;
  transform: translateY(16px);
}
html.js body.loaded .hero-in{
  animation: fade-up .8s cubic-bezier(.22, 1, .3, 1) forwards;
  animation-delay: .35s;
}
html.js body.loaded .hero-cta.hero-in{ animation-delay: .48s; }
@keyframes fade-up{ to{ opacity: 1; transform: translateY(0); } }

/* ---- Screenshot hero: intrare cu perspectiva + indreptare la scroll ---- */
.hero-shot{ perspective: 1400px; }
.shot-frame{
  transform-origin: 50% 20%;
  transform: rotateX(calc(var(--shot-tilt, 0) * 1deg)) scale(calc(1 - var(--shot-tilt, 0) * 0.004));
  will-change: transform;
}
html.js .shot-frame{
  --shot-tilt: 9;
  opacity: 0;
}
html.js body.loaded .shot-frame{
  animation: shot-in 1s cubic-bezier(.22, 1, .3, 1) .45s forwards;
}
@keyframes shot-in{ to{ opacity: 1; } }

/* sclipire o singura data peste screenshot */
.shot-frame::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}
html.js body.loaded .shot-frame::after{
  animation: shine 1.4s ease 1.3s forwards;
}
@keyframes shine{ to{ transform: translateX(120%); } }
.shot-frame{ position: relative; z-index: 1; }

/* ---- Reveal cu blur pe titlurile de sectiune ---- */
@media (min-width: 761px){
  html.js .section-head.reveal{
    filter: blur(7px);
  }
  html.js .section-head.reveal.is-visible{
    filter: blur(0);
    transition: opacity .6s ease, transform .6s ease, filter .6s ease;
  }
}

/* ---- Reveal in cascada pentru griduri ---- */
@media (min-width: 761px){
}

/* ---- Micro-interactiuni pe carduri ---- */

/* ---- FAQ: continut animat (inaltimea o anima JS-ul) ---- */
.faq-list details p{ overflow: hidden; }

/* ---- Responsive pentru stratul de animatii ---- */
@media (max-width: 760px){
  html.js .shot-frame{ --shot-tilt: 0; }
}
@media (prefers-reduced-motion: reduce){
  html.js .hero-title .line > span,
  html.js .hero-in,
  html.js .shot-frame{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .shot-frame{ --shot-tilt: 0 !important; }
  .shot-frame::after{ display: none; }
  html.js .section-head.reveal{ filter: none; }
}