/* VTP GO — landing page
   Palette taken from the application itself; type is IBM Plex Sans, self-hosted
   and subset to Latin + full Romanian diacritics. */

@font-face{font-family:'Plex';src:url('../fonts/plex-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex';src:url('../fonts/plex-medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Plex';src:url('../fonts/plex-semibold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Plex';src:url('../fonts/plex-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('../fonts/plex-mono-medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('../fonts/plex-mono-semibold.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --navy:#10264A;
  --navy-2:#1B3A6B;
  --ground:#F5F7FB;
  --ink:#16202F;
  --slate:#647287;
  --admis:#16A34A;
  --scadent:#D9541E;
  --line:#DDE3EC;
  --white:#fff;
  --mono:'Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  --step--1:clamp(.82rem,.79rem + .14vw,.9rem);
  --step-0:clamp(1.03rem,.99rem + .2vw,1.13rem);
  --step-1:clamp(1.2rem,1.12rem + .38vw,1.4rem);
  --step-2:clamp(1.45rem,1.3rem + .7vw,1.85rem);
  --step-3:clamp(1.75rem,1.48rem + 1.3vw,2.5rem);
  --step-4:clamp(2.1rem,1.6rem + 2.4vw,3.6rem);

  --wrap:1180px;
  --gut:clamp(1.15rem,4vw,2.5rem);
  --r:10px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:'Plex',ui-sans-serif,system-ui,sans-serif;
  font-size:var(--step-0);line-height:1.6;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy-2)}
h1,h2,h3{line-height:1.12;margin:0;letter-spacing:-.018em;font-weight:600}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1)}
p{margin:0}

:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--scadent);outline-offset:3px;border-radius:4px;
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:.7rem 1.1rem}
.skip:focus{left:.5rem;top:.5rem}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;gap:1.5rem;
  padding:.85rem var(--gut);
  transition:background-color .25s ease,box-shadow .25s ease,color .25s ease;
  color:#fff;
}
.site-header.is-solid{background:var(--white);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.brand{
  font-weight:700;letter-spacing:-.02em;font-size:1.12rem;
  color:inherit;text-decoration:none;display:flex;align-items:center;gap:.7rem;
}
.brand span{font-weight:600;font-size:var(--step--1);opacity:.85}
/* 2026-10-04 — the VTP GO mark IS the name (Andrei: „if the logo says 'VTP GO'
   then the 'VTP GO' label next to it is redundant"): its alt is „VTP GO", and only
   the subtitle follows it, on wide screens. The bare mark, no sphere (Andrei: „the
   sphere doesn't blend well enough … remove it from … the public page logo"), in
   two inks: light lettering over the dark hero, navy once the header turns white
   (.is-solid — main.js on the home pages, the markup on every other page). */
.brand-logo{height:40px;width:auto;flex:none}
.brand-logo--dark{display:none}
.site-header.is-solid .brand-logo--light{display:none}
.site-header.is-solid .brand-logo--dark{display:block}
/* .site-header is position:fixed and none of its children (or .site-nav's)
   have flex-wrap, min-width:0 or an overflow rule, so nothing here can
   shrink below its own content's intrinsic width. Letting the header wrap
   was rejected on purpose, here and as the next-smallest lever below: a
   wrapped fixed header becomes two rows tall and starts covering the
   content beneath it, trading a clip for an overlap, which is worse.
   The subtitle is the longest non-essential string in the header (~28
   characters, ~200px at this size) and purely decorative (0.72 opacity,
   font-weight 400) -- the brand name alone still identifies the page.
   With six nav links (five plus .nav-login), the RO|EN pill and the CTA
   all present, the full row needs roughly 1218px with the subtitle shown,
   and roughly 1016px with it hidden.
   ⚠ THE INVARIANT: this breakpoint must stay GREATER than the with-subtitle
   requirement (≈1218px), or there is a band where the subtitle is still
   showing and the row does not fit -- exactly the bug this rule shipped
   with once (1100px, i.e. less than 1218px, clipped every viewport from
   ~1101-1218px). 1250px is not a rounder 1100 or 1200; it is the smallest
   round number comfortably above 1218px. If a future edit adds another nav
   item, lengthens the brand subtitle, or otherwise changes either figure,
   RE-CHECK the inequality (breakpoint > with-subtitle width) before
   trusting this number again -- it is not a constant that can be left
   alone once the row's content changes.
   Below the breakpoint the subtitle is hidden and the row needs ≈1016px,
   which fits down to that width -- but not further: there is a residual
   overflow band of roughly 721-1015px (tablet-landscape and small-laptop
   widths) where all six nav links, the pill and the CTA still render,
   un-subtitled, wider than the viewport. This rule does NOT close that
   band, on purpose -- closing it needs a real responsive nav (a
   hamburger/drawer that can hide and restore the nav links), which is the
   same work the site's existing mobile-nav blocker is already waiting on.
   flex-wrap is not that fix, for the position:fixed reason above, and
   tightening --gut or the .site-nav gap only recovers on the order of
   100-150px against this ~300px band, so neither closes it either.
   With the breakpoint correctly above 1218px, this is a net improvement
   over the pre-Task-9 header, not a new defect: the same arithmetic on the
   five-item row (no .nav-login, no subtitle rule) put the overflow
   threshold at roughly 1090-1100px before this task, so the header was
   already clipping below that width. The un-subtitled threshold this rule
   now guarantees, ≈1016px, is lower than that pre-existing ≈1090-1100px --
   the clip threshold moved down despite one more nav item, and (with the
   breakpoint set correctly) no new clipping band was introduced above it.

   ⚠ 2026-09-13 — a SEVENTH item ("Contact") was added, and the breakpoint
   moved 1250 -> 1320 with it. Andrei asked for the contact page to be
   reachable from the menu, so the item is not optional; the breakpoint is
   what absorbs it. Contact measures +73px, which puts the subtitled row at
   ≈1291px against the ≈1218px recorded above.

   ⚠ AND THE TWO MEASUREMENTS OF THAT ROW DISAGREE. The ≈1218px above was
   computed from the type scale; a later measurement in headless Chromium
   with the real webfonts loaded put the same row at ≈1132px, consistently
   ~85px lower, which would make the seventh item fit under 1250 after all.
   1320 is chosen so the invariant holds under the PESSIMISTIC figure --
   1291 < 1320 -- because a breakpoint that is too generous costs only the
   subtitle disappearing ~70px early on wide screens, while one that is too
   tight clips the header on an ordinary laptop. Nobody has reconciled the
   two numbers. Do that before trusting either to add an eighth item.

   ⚠ 2026-10-04 — the round logo before the name adds 32px + the .5rem gap
   (≈40px): the pessimistic subtitled row is now ≈1331px, so the breakpoint
   moved 1320 -> 1360 to keep the invariant (1331 < 1360).
   ⚠ Same day, later — the written „VTP GO" is gone (the logo carries it) and the
   logo is 40px with a .7rem gap: ≈ -72px for the name and its gap, +8px logo,
   +3px gap → the pessimistic subtitled row is ≈1270px. 1360 still holds it, with
   room; the breakpoint stays. The sphere-less mark that replaced the round logo
   is 46px wide (+6px): ≈1276px, still well under. */
@media(max-width:1360px){
  .brand span{display:none}
}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:1.4rem}
.site-nav a{color:inherit;text-decoration:none;font-size:var(--step--1);font-weight:500;opacity:.86}
.site-nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
/* The header login link is deliberately NOT .nav-link. The only responsive
   rule this header has is @media(max-width:720px) below, which does
   `.site-nav .nav-link{display:none}` and `.header-cta{display:none}` — and
   there is no hamburger, toggle or drawer anywhere in this site's markup or
   CSS to bring the hidden items back. ".nav-link" appears exactly ONCE in
   this whole stylesheet: that hide rule. So a login link carrying .nav-link
   would be invisible on every phone — the one link we most need reachable
   there. As .nav-login it is styled by the .site-nav a descendant rule above
   and survives, so the phone header is brand + Autentificare + RO|EN.
   ⚠ Do NOT add .nav-login to that hide list "for consistency". */
.site-nav .nav-login{white-space:nowrap}
/* Language switcher — both languages shown, the current one marked.
   The pill keeps its old border, radius and metrics; the two tokens now sit
   inside it, split by a hairline. The current language is not a link (no dead
   tab stop) and carries aria-current="true"; it is set apart by WEIGHT and a
   filled ground as well as opacity, so the state never rides on colour alone.
   Each token carries its own lang= so a screen reader switches phoneme set. */
.lang{
  display:inline-flex;
  border:1px solid currentColor;border-radius:100px;
  font-size:var(--step--1);color:inherit;opacity:.85;
}
.lang:hover,.lang:focus-within{opacity:1}
.lang .lang-opt{
  display:block;padding:.24rem .68rem;
  color:inherit;text-decoration:none;font-weight:500;opacity:1;
}
.lang .lang-opt + .lang-opt{border-left:1px solid currentColor}   /* separator */
.lang .lang-opt:first-child{border-radius:100px 0 0 100px}
.lang .lang-opt:last-child{border-radius:0 100px 100px 0}
/* current language: heavier weight AND a filled ground — two cues, not colour */
.lang .lang-opt[aria-current]{font-weight:700;background:rgba(255,255,255,.22)}
.site-header.is-solid .lang .lang-opt[aria-current]{background:rgba(16,38,74,.14)}
/* the other language is the only interactive half */
.lang a.lang-opt:hover{background:rgba(255,255,255,.14);text-decoration:underline;text-underline-offset:3px}
.site-header.is-solid .lang a.lang-opt:hover{background:rgba(16,38,74,.07)}
.lang a.lang-opt:focus-visible{position:relative;z-index:1;outline-offset:2px}
.btn{
  display:inline-block;border:0;border-radius:var(--r);cursor:pointer;
  font:inherit;font-weight:600;font-size:var(--step--1);
  padding:.62rem 1.15rem;text-decoration:none;
}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-2)}
.site-header.is-solid .btn-primary{background:var(--navy)}
.header-cta{white-space:nowrap}
/* keep the CTA legible in both header states: '.site-nav a{color:inherit}'
   would otherwise pull the button text to the header's ink colour once solid,
   leaving dark text on the navy button. */
.site-header .btn-primary{color:#fff}

/* ---------- sections ---------- */
.section{padding:clamp(3.6rem,9vh,6.4rem) 0}
.section-alt{background:var(--ground)}
.lede{max-width:56ch;margin-top:1rem;color:var(--slate);font-size:var(--step-1)}

/* ---------- redesign A (2026-10-07) ---------- */
/* the hero: the boiler film beside the title. Black studio while it assembles; when the light comes up
   the page turns the wall's navy in step (main.js adds .is-lit and reads the decoded wall into --wall-*) */
.hero{position:relative;background:#020203;color:#E8EDF5;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.5s ease-in-out;
  background:linear-gradient(180deg,var(--wall-top,#0D1931),var(--wall-mid,#0D1931) 50%,var(--wall-low,#0D1931))}
.hero.is-lit::before{opacity:1}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title film" "body film";
  column-gap:clamp(1.5rem,4vw,4rem);align-items:center;align-content:center;
  padding-top:calc(72px + clamp(1rem,3vw,2.5rem));padding-bottom:clamp(1.5rem,4vw,3rem)}
.hero h1{grid-area:title;align-self:end;margin:0;font-size:clamp(2.1rem,1.3rem + 2.4vw,3.25rem);font-weight:600;line-height:1.08;letter-spacing:-.015em;color:#fff}
.hero h1 span{display:block}
.hero h1 span + span{margin-top:.12em}
.hero h1 em{font-style:normal;color:#fff;transition:color 1.5s ease-in-out}
.hero.is-lit h1 em{color:#8DB0FF}
.hero-body{grid-area:body;align-self:start}
.hero .lead{margin:1.3rem 0 0;font-size:var(--step-1);line-height:1.5;color:#C9D2E0;max-width:36ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hero .proof{margin:1.4rem 0 0;font:500 var(--step--1)/1.4 var(--mono);color:#8D99AB;transition:color 1.5s ease-in-out}
.hero.is-lit .proof{color:#8DB0FF}
.btn-light{background:#fff;color:var(--navy)}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px currentColor}
.hero-film{grid-area:film;position:relative}
.hero-film video{display:block;height:min(76svh,660px);width:auto;aspect-ratio:2/3;object-fit:cover}
.hero-film .stage{position:absolute;inset:0;opacity:0}
.hero-film .stage.is-on{opacity:1}
/* the film's edges and the pipes under the valves melt into the page through overlays in the page's own
   colour — NOT a CSS mask: a masked <video> darkens its semi-transparent band in Chromium and WebKit */
.hero-film .edge{position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity 1.5s ease-in-out;
  background:linear-gradient(90deg,var(--ec) 0,transparent 9%,transparent 91%,var(--ec) 100%),linear-gradient(180deg,var(--ec) 0,transparent 5%,transparent 84%,var(--ec) 97%)}
/* the assembly's background is the page's black (dark-wall render): a 3 % fade is enough at its sides — the
   9 % one smoked over the heat exchanger's bright ring at the left in the first second (Andrei, round 6) */
.hero-film .edge-studio{--ec:#020203;background:linear-gradient(90deg,var(--ec) 0,transparent 3%,transparent 97%,var(--ec) 100%),linear-gradient(180deg,var(--ec) 0,transparent 3%,transparent 84%,var(--ec) 97%)}
.hero-film .edge-navy{--ec:var(--wall-mid,#0D1931);opacity:0}
.hero.is-lit .edge-studio{opacity:0}
.hero.is-lit .edge-navy{opacity:1}
/* the light-up followed frame by frame (main.js, hero.js risingWall): the page and the edge overlays ARE the
   film's wall colour at every frame, so neither runs its own 1.5 s fade (Safari decodes the film lighter) */
.hero.is-tracking::before,.hero.is-tracking .edge{transition:none}
.hero.is-tracking::before{opacity:1}
.hero.is-tracking .edge-studio{opacity:0}
.hero.is-tracking .edge-navy{opacity:1}
@media (max-width:700px){
  .hero .wrap{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"title film" "body body";column-gap:.6rem;padding-top:calc(64px + 1rem);padding-bottom:2.4rem}
  .hero h1{align-self:center;font-size:clamp(1.45rem,1.05rem + 2.3vw,1.9rem)}
  .hero-film video{width:100%;height:auto}
  .hero-film .stage{height:100%}
  .hero .lead{margin-top:.6rem}
}
/* the header over the page: out of the way while reading down, back on the way up (main.js
   .is-away); a keyboard user tabbing into it always gets it back */
.site-header{transition:background-color .25s ease,box-shadow .25s ease,color .25s ease,transform .28s ease}
.site-header.is-away{transform:translateY(-100%)}
.site-header:focus-within{transform:none}
@media (prefers-reduced-motion:reduce){.site-header{transition:none}}
/* on a phone the hero's two buttons sit in the middle (Andrei, 2026-10-07) */
@media (max-width:700px){.hero-cta{justify-content:center}}
@media (max-width:700px){.hero .proof{text-align:center}}   /* the line belongs to the centred buttons */
/* round 6: on a computer too — the buttons and the line are one column, the line centred under the buttons */
.hero-act{display:inline-flex;flex-direction:column;align-items:center;gap:1.1rem;margin-top:1.8rem}
.hero-act .hero-cta{margin-top:0}
.hero-act .proof{margin:0;text-align:center}
@media (max-width:700px){.hero-act{display:flex}}
@media(max-width:720px){
  .site-nav .nav-link{display:none}
  .header-cta{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* Ce face VTP GO: eight cards, each with its own screen from the app right above its words. 2026-10-07 round 3
   (Andrei): a plain label and a title that says what you get, instead of a code; the two clips are wide cards that
   show the whole device — the phone under its status bar, the app window in a browser frame. */
.cards{list-style:none;padding:0;margin:2.2rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.6rem)}
.card{display:flex;flex-direction:column;background:var(--white);border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 18px 40px -30px rgba(9,20,40,.45)}
.card .pic{position:relative;aspect-ratio:16/10;background:#EEF1F6;border-top:1px solid var(--line);overflow:hidden}
.card .pic img,.card .pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.card .txt{display:grid;gap:.45rem;padding:1.15rem 1.3rem 1.35rem}
.ce-title{text-align:center}   /* „Ce face VTP GO”, centred, with no line under it (Andrei, round 5) */
.card .label{font-size:.74rem;font-weight:600;line-height:1;letter-spacing:.09em;text-transform:uppercase;color:var(--navy-2)}
.card h3{margin:0;font-size:var(--step-1);color:var(--ink)}
.card p{margin:0;color:var(--ink);line-height:1.55;max-width:52ch}
.only-narrow{display:none!important}
@media (max-width:600px){.only-wide{display:none!important}.only-narrow{display:block!important}}
.card.wide{grid-column:1 / -1;flex-direction:row;align-items:center}
.card.wide .device{flex:1 1 56%;align-self:stretch;display:grid;place-items:center;padding:clamp(1.2rem,3vw,2.2rem);
  background:radial-gradient(120% 90% at 50% 30%,#fff 0,#E9EEF6 70%);border-left:1px solid var(--line)}
.card.wide .txt{flex:1 1 44%;padding:clamp(1.4rem,3vw,2.4rem)}
.card.wide h3{font-size:var(--step-2)}
.card.wide p{font-size:var(--step-0)}
/* a phone: its own status bar on top (the time, signal, Wi-Fi, battery), then the app screen at 393 × 852 */
.phone{width:min(250px,62vw);border-radius:40px;background:#0E1626;padding:9px;box-shadow:0 30px 60px -28px rgba(9,20,40,.55),inset 0 0 0 1px #2A3550}
.phone .screen{position:relative;border-radius:31px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.phone .sb{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 4px 22px;background:#fff;color:#0B1220;font:600 12px/1 -apple-system,'SF Pro Text','Plex',sans-serif}
.phone .sb svg{height:10px;width:auto;display:block}
.phone video,.phone img{width:100%;height:auto;aspect-ratio:393/852;object-fit:cover;object-position:top;display:block;background:#fff}
.browser{position:relative;width:100%;max-width:760px;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line),0 30px 60px -30px rgba(9,20,40,.5)}
.browser .bar{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;background:#EEF1F6;border-bottom:1px solid var(--line)}
.browser .bar i{width:.6rem;height:.6rem;border-radius:50%;background:#C9D1DE}
.browser .bar span{margin-left:.6rem;flex:1;max-width:22rem;font:500 .72rem/1 var(--mono);color:var(--slate);background:#fff;border:1px solid var(--line);border-radius:6px;padding:.35rem .6rem}
.browser video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
/* the team card: a slow tour of the whole org chart — the overview, each team close up, the unassigned, the
   overview again (Andrei, 2026-10-07: „an animation/slideshow … to show an organigram overview”). The chart is
   1910 × 960 (1.99:1) in a 16:10 box; each stop centres its area: tx = 50% − s·u, ty = 62.2% − s·v. */
.card .pic.org{background:#fff}
.card .pic.org img{inset:auto;left:0;top:0;width:100%;height:auto;object-fit:fill;transform-origin:0 0;transform:translate(0,12.2%);animation:orgtour 20s ease-in-out infinite}
@keyframes orgtour{0%,12%{transform:translate(0,12.2%) scale(1)}22%,36%{transform:translate(-.4%,-45.8%) scale(1.8)}46%,58%{transform:translate(-32.8%,-45.8%) scale(1.8)}68%,80%{transform:translate(-79.6%,-18.8%) scale(1.8)}92%,100%{transform:translate(0,12.2%) scale(1)}}
@media (max-width:760px){
  .cards{grid-template-columns:1fr}
  .card.wide{flex-direction:column;align-items:stretch}
  .card.wide .device{border-left:0;border-top:1px solid var(--line)}
}

/* security: six one-liners on navy */
.safe{background:var(--navy);color:#DCE4F0}
.safe h2{color:#fff;max-width:22ch}
.safe ul{list-style:none;padding:0;margin:2rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2.5rem}
.safe li{padding-top:1rem;border-top:1px solid rgba(255,255,255,.16)}
.safe b{color:#fff;font-weight:600}
@media (max-width:700px){.safe ul{grid-template-columns:1fr}}

/* „Serviciu complet” (round 6, Andrei: „look poor … add some cooler style”): a centred head over a faint blueprint
   grid; the steps as a numbered path, each with a short hint; the price card with a navy top that carries the price.
   Its own grid class: .price-grid is the pricing page's two plan cards. */
.pret{background:
  linear-gradient(rgba(16,38,74,.045) 1px,transparent 1px) 0 0/28px 28px,
  linear-gradient(90deg,rgba(16,38,74,.045) 1px,transparent 1px) 0 0/28px 28px,
  linear-gradient(180deg,#F5F7FB 0,#fff 100%)}
.pret-head{text-align:center;max-width:46rem;margin:0 auto}
.pret-head .lede{margin-left:auto;margin-right:auto}
.price-home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;margin-top:2.6rem}
.steps-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(1.3rem,3vw,2rem);box-shadow:0 20px 50px -38px rgba(9,20,40,.5)}
.steps-h{margin:0 0 1.3rem;font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--navy-2)}
.steps-path{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:1.4rem;position:relative}
.steps-path::before{content:"";position:absolute;left:calc(1.1rem - 1px);top:1.1rem;bottom:1.1rem;width:2px;background:linear-gradient(var(--navy) 0,#B7C6DE 100%)}
.steps-path li{position:relative;display:grid;gap:.15rem;padding-left:3.4rem;min-height:2.2rem;align-content:center}
.steps-path li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:50%;transform:translateY(-50%);width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font:600 .95rem/1 var(--mono);box-shadow:0 0 0 5px #fff}
.steps-path b{font-weight:600;color:var(--ink);font-size:var(--step-0);line-height:1.3}
.steps-path span{color:var(--slate);font-size:var(--step--1);line-height:1.4}
.price-card{border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 30px 70px -40px rgba(9,20,40,.6)}
.price-top{background:var(--navy);background-image:radial-gradient(120% 140% at 100% 0,#1E3F78 0,transparent 60%);color:#fff;position:relative;padding:clamp(1.3rem,3vw,1.9rem) clamp(1.3rem,3vw,2rem)}
.price-badge{position:absolute;top:1.1rem;right:1.1rem;margin:0;font:600 .72rem/1 var(--mono);letter-spacing:.04em;color:#0D1931;background:#8DB0FF;padding:.45rem .65rem;border-radius:999px}
.price-name{margin:0;font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#AFC0DD}
.price-card .amount{margin:.75rem 0 0;font-family:var(--mono);font-weight:600;font-size:clamp(2.3rem,1.7rem + 3vw,3.6rem);line-height:1;color:#fff;letter-spacing:-.03em}
.price-card .amount small{display:block;margin-top:.5rem;font-family:'Plex',ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:var(--step-1);color:#C9D4E8;letter-spacing:0}   /* its own line: beside the big figure it broke after „pentru” */
.price-body{padding:clamp(1.2rem,3vw,1.8rem) clamp(1.3rem,3vw,2rem)}
.price-card dl{display:grid;grid-template-columns:auto 1fr;gap:.7rem 1rem;margin:0;align-items:center}
.price-card dt{font-family:var(--mono);font-weight:600;color:var(--navy);background:#EEF2F9;border-radius:8px;padding:.35rem .55rem;text-align:center;min-width:4.4rem}
.price-card dd{margin:0;color:var(--ink);font-size:var(--step--1);line-height:1.45}
.price-cta{margin-top:1.5rem;display:grid;gap:.5rem;text-align:center}
.price-cta .btn{width:100%}
.price-cta span{color:var(--slate);font-size:var(--step--1)}
.price-more{margin:1rem 0 0;text-align:center}
.price-more a{color:var(--navy);font-weight:500}
@media (max-width:760px){.price-home{grid-template-columns:1fr}}
/* WCAG 2.2.2: a film that moves by itself can be paused. main.js adds the button only where a film
   really plays (not with reduced motion or Save-Data); the icon follows data-paused. */
.film-toggle{position:absolute;right:.6rem;bottom:.6rem;z-index:3;width:2.5rem;height:2.5rem;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(8,14,30,.5);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .2s ease}
/* hidden at rest (Andrei, 2026-10-07: „should be hidden”): a mouse finds it over its film, the keyboard on focus */
.hero-film:hover .film-toggle,.card .device:hover .film-toggle,.film-toggle:focus-visible{opacity:1}
@media (hover:none){.film-toggle{display:none}}
.card .film-toggle{right:auto;left:.6rem}
.film-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.film-toggle::before{content:"";box-sizing:border-box;width:11px;height:13px;border-left:4px solid currentColor;border-right:4px solid currentColor}
.film-toggle[data-paused="true"]::before{width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor;margin-left:3px}

/* ---------- contact ---------- */
/* The enquiry form lives on contact.html / en/contact.html now, not in a
   section under the homepage CTA. These rules are still shared: the form's
   markup is unchanged and main.js still finds it by #demo-form. */
.contact-grid{display:grid;gap:2.6rem;margin-top:2.4rem}
@media(min-width:860px){.contact-grid{grid-template-columns:1fr 1.1fr;gap:4rem}}
.field{display:grid;gap:.34rem;margin-bottom:1.05rem}
.field label{font-size:var(--step--1);font-weight:500}
.field input,.field textarea{
  font:inherit;font-size:var(--step-0);padding:.66rem .8rem;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);color:var(--ink);
}
.field input:focus,.field textarea:focus{border-color:var(--navy)}
.field .err{font-size:var(--step--1);color:#B4321A;min-height:0}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#B4321A}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:.9rem;font-size:var(--step--1)}
.form-status.ok{color:var(--admis)}
.form-status.bad{color:#B4321A}
.contact-aside dt{font-size:var(--step--1);color:var(--slate);margin-top:1.1rem}
.contact-aside dd{margin:.15rem 0 0;font-weight:500}
.contact-aside dd a{color:var(--ink)}
/* On the contact page the form carries its own heading, and the page already
   has an <h1> above it — so this one is sized as a sub-head (--step-2), not at
   the h2 scale (--step-3), or the two headings compete for the same rank. */
.form-head{font-size:var(--step-2)}
.form-intro{margin:.6rem 0 1.5rem;color:var(--slate);font-size:var(--step--1)}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:rgba(255,255,255,.76);padding:2.6rem 0;font-size:var(--step--1)}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}
.site-footer a{color:#fff}
.site-footer .sep{margin-left:auto}
/* 2026-10-07 round 3: a fuller footer — the mark and a line, three columns, then the credit and the company line */
.site-footer{background:#081123}
.site-footer .foot-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem;align-items:start;padding-bottom:1.6rem}
.foot-brand{display:grid;gap:.8rem}
.foot-brand img{width:46px;height:auto}
.foot-brand p{margin:0;color:#C9D4E8;max-width:28ch}
.foot-h{margin:0 0 .7rem;font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#fff}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.foot-col a{color:#C9D4E8;text-decoration:none}
.foot-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.site-footer .foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1 / -1;justify-items:center;text-align:center}}
.foot-legal{
  margin-top:1.5rem;padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;align-items:center;
  color:rgba(255,255,255,.55)
}
.foot-legal .credit{margin-left:auto}
.foot-legal a{color:rgba(255,255,255,.82);text-decoration:underline;text-underline-offset:3px}
.foot-legal a:hover{color:#fff}

/* ---------- pricing ---------- */
.price-grid{display:grid;gap:1.6rem;margin-top:2.6rem}
@media(min-width:820px){.price-grid{grid-template-columns:1fr 1fr}}
.plan{border:1px solid var(--line);border-radius:var(--r);padding:1.9rem 1.7rem;background:var(--white)}
.plan.is-best{border-color:var(--navy);border-width:2px;position:relative}
.plan-tag{position:absolute;top:-.72rem;left:1.7rem;background:var(--navy);color:#fff;font-size:var(--step--1);font-weight:600;padding:.16rem .6rem;border-radius:100px}
.plan h3{font-size:var(--step-1)}
.price{display:flex;align-items:baseline;gap:.4rem;margin:.9rem 0 .2rem}
.price b{font-size:var(--step-4);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.price span{color:var(--slate);font-size:var(--step--1)}
.plan-note{color:var(--slate);font-size:var(--step--1)}
.plan ul{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.62rem}
.plan li{padding-left:1.5rem;position:relative;font-size:var(--step--1)}
.plan li::before{content:"";position:absolute;left:0;top:.42em;width:.6rem;height:.32rem;border-left:2px solid var(--admis);border-bottom:2px solid var(--admis);transform:rotate(-45deg)}
.plan .btn{margin-top:1.6rem;display:block;text-align:center}
.calc{margin-top:2.6rem;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;background:var(--white)}
.calc-row{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center}
.calc label{font-size:var(--step--1);font-weight:500}
.calc input{font:inherit;width:6rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:var(--r)}
.calc-out{margin-top:1rem;font-size:var(--step-1);font-weight:600;font-variant-numeric:tabular-nums}
.calc-out span{color:var(--slate);font-weight:400;font-size:var(--step--1)}

/* ---------- features (the pricing page's list of what is included) ---------- */
.features{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:2.6rem}
@media(min-width:640px){.features{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.features{grid-template-columns:repeat(3,1fr)}}
.feature{background:var(--white);padding:1.6rem 1.5rem}
.feature h3{font-size:var(--step-1);margin-bottom:.5rem}
.feature p{color:var(--slate);font-size:var(--step--1)}

/* ---------- faq ---------- */
/* round 6 (Andrei: „too blank"): a centred title, each question a white card, a round plus that turns into a cross */
.faq-title{text-align:center}
.faq{max-width:860px;margin:2.2rem auto 0;display:grid;gap:.75rem}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px -28px rgba(9,20,40,.45);transition:border-color .2s ease,box-shadow .2s ease}
.faq details:hover{border-color:#C3CFE3}
.faq details[open]{border-color:#B7C6DE;box-shadow:0 22px 46px -30px rgba(9,20,40,.55)}
.faq summary{cursor:pointer;padding:1.1rem 3.8rem 1.1rem 1.3rem;font-weight:600;position:relative;list-style:none;font-size:var(--step-0);color:var(--ink);border-radius:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:1.1rem;top:50%;width:1.8rem;height:1.8rem;margin-top:-.9rem;border-radius:50%;
  background:linear-gradient(var(--navy),var(--navy)) center/.7rem 2px no-repeat,linear-gradient(var(--navy),var(--navy)) center/2px .7rem no-repeat,#EEF2F9;transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{color:var(--navy)}
.faq summary:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.faq details p{margin:0;padding:0 1.3rem 1.25rem;color:var(--slate);max-width:70ch}

/* ---------- misc ---------- */
.roadmap{margin-top:1.6rem;padding:1.2rem 1.4rem;border-left:3px solid var(--scadent);background:var(--white);font-size:var(--step--1);color:var(--slate)}
.roadmap b{color:var(--ink);font-weight:600}
.cta-band{background:var(--navy);color:#fff;padding:clamp(3rem,7vh,4.6rem) 0;text-align:center}
.cta-band h2{color:#fff;text-wrap:balance}
.cta-band p{color:rgba(255,255,255,.82);max-width:52ch;margin:1rem auto 0}
.cta-band .btn{margin-top:1.8rem;background:#fff;color:var(--navy)}
.cta-band .btn:hover{background:var(--ground)}
.cta-sub{margin-top:.9rem;font-size:var(--step--1);color:rgba(255,255,255,.66)}
/* 2026-10-07 round 3 — ending B (Andrei picked it): the sign-up beside three real screens of the app, fanned out,
   on the hero's navy with a faint blueprint grid. Still one button; the presentation stays the quiet .cta-alt. */
.cta-band.end-b{text-align:left;overflow:hidden;padding:clamp(3.5rem,8vw,6rem) 0;
  background:
    linear-gradient(rgba(141,176,255,.07) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,rgba(141,176,255,.07) 1px,transparent 1px) 0 0/28px 28px,
    radial-gradient(90% 80% at 80% 40%,#1E3F78 0,#0D1931 60%)}
.end-b .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:center}
.end-b .end-copy{position:relative;z-index:1}
.end-b .end-copy p{margin-left:0;margin-right:0}   /* the centred band's auto margins would indent them */
.end-b .facts{margin:0;font:500 var(--step--1)/1.5 var(--mono);color:#8DB0FF}
.end-b h2{margin-top:.8rem;font-size:var(--step-4);line-height:1.05;letter-spacing:-.025em}
.end-b h2 em{font-style:normal;color:#8DB0FF}
.end-b .lead{margin:1.1rem 0 0;max-width:34ch;font-size:var(--step-1);line-height:1.5;color:#C9D4E8}
.end-b .btn{margin-top:1.6rem}
.fan{position:relative;height:clamp(400px,46vw,580px)}
.fan figure{position:absolute;top:50%;left:50%;margin:0;width:clamp(150px,17vw,220px)}
.fan .phone{width:100%}
.fan figure:nth-child(1){transform:translate(-118%,-46%) rotate(-9deg);animation:fan1 7s ease-in-out infinite}
.fan figure:nth-child(2){transform:translate(-50%,-54%);z-index:2;animation:fan2 7s ease-in-out infinite}
.fan figure:nth-child(3){transform:translate(18%,-46%) rotate(9deg);animation:fan3 7s ease-in-out infinite}
@keyframes fan1{50%{transform:translate(-118%,-49%) rotate(-10deg)}}
@keyframes fan2{50%{transform:translate(-50%,-57%)}}
@keyframes fan3{50%{transform:translate(18%,-43%) rotate(10deg)}}
/* the global reduced-motion rule shortens animations to .001ms, which makes an INFINITE one flicker through its
   frames: what moves on its own must stand still instead (!important: each phone's own rule is more specific) */
@media (prefers-reduced-motion:reduce){.card .pic.org img,.fan figure{animation:none!important}}
@media (max-width:760px){
  .end-b .wrap{grid-template-columns:1fr}
  .fan{height:490px}
  .fan figure{width:min(160px,38vw)}
  .fan figure:nth-child(1){transform:translate(-108%,-46%) rotate(-9deg)}
  .fan figure:nth-child(3){transform:translate(8%,-46%) rotate(9deg)}
}
/* The one line that replaced the homepage enquiry section: the way to reach
   contact.html from the bottom of the page without the form competing with the
   signup button, which is the whole reason the form moved. It must stay
   SUBORDINATE to .btn above it — small, dimmed, a plain underlined link.
   ⚠ Do not promote this to a second .btn "so it gets noticed": two buttons of
   equal weight in one band is exactly the ambiguity this change removed.
   ⚠ Scoped as `.cta-band .cta-alt` (0,2,0) on purpose, not as a bare
   `.cta-alt` (0,1,0): `.cta-band p` above is (0,1,1) and would win the colour
   and margin on specificity no matter what order these rules appear in. That
   is not hypothetical — it is why `.cta-sub` (0,1,0) does not currently get
   its own .66 colour or .9rem margin-top on any of these pages. */
.cta-band .cta-alt{margin-top:1.15rem;font-size:var(--step--1);color:rgba(255,255,255,.6)}
.cta-band .cta-alt a{color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:3px}
.cta-band .cta-alt a:hover{color:#fff}
.trust{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:2.4rem}
@media(min-width:720px){.trust{grid-template-columns:1fr 1fr}}
.trust div{background:var(--white);padding:1.5rem}
.trust h3{font-size:var(--step-0);margin-bottom:.4rem}
.trust p{color:var(--slate);font-size:var(--step--1)}

/* 2026-09-27 — the privacy policy and the terms (confidentialitate.html,
   termeni.html and their /en/ pairs). Long-form text: the base sheet zeroes
   paragraph margins for the landing layout, so prose gets its own rhythm here,
   scoped to .legal so no landing section changes. */
.legal{max-width:74ch}
.legal h1{font-size:var(--step-3)}
.legal .legal-meta{margin-top:.8rem;color:var(--slate);font-size:var(--step--1)}
.legal .legal-toc{margin:2rem 0 .4rem;padding:1.1rem 1.4rem;background:var(--ground);border-radius:var(--r);font-size:var(--step--1)}
.legal .legal-toc ol{margin:.4rem 0 0;padding-left:1.2rem}
.legal .legal-toc li{margin:.15rem 0}
.legal h2{font-size:var(--step-1);margin:2.6rem 0 .8rem;scroll-margin-top:5.5rem}
.legal h3{font-size:var(--step-0);margin:1.7rem 0 .5rem}
.legal p,.legal ul,.legal ol,.legal dl{margin:0 0 .9rem}
.legal ul,.legal ol{padding-left:1.3rem}
.legal li{margin:.3rem 0}
.legal dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.2rem;font-size:var(--step--1)}
.legal dl.facts dt{color:var(--slate)}
.legal dl.facts dd{margin:0}
@media (max-width:560px){.legal dl.facts{grid-template-columns:1fr;gap:0}.legal dl.facts dd{margin-bottom:.6rem}}
.form-legal{margin-top:.9rem;font-size:var(--step--1);color:var(--slate)}
.foot-id{margin-top:.9rem;color:rgba(255,255,255,.55);line-height:1.5;font-size:.78rem}
/* the company line on one row on a computer (Andrei, 2026-10-07); narrower screens let it wrap */
@media (min-width:1200px){.foot-id span{white-space:nowrap}}
/* 404.html's footer has no link row above the legal row, so the divider that
   separates the two would open the footer on an empty band. */
.site-footer > .foot-legal:first-child{margin-top:0;padding-top:0;border-top:0}