/*  RemoMedia — sistemul de design
    ------------------------------------------------------------------
    GENERAT din preview/site.html cu tools/build-tema.py.
    Nu edita direct: modifică preview-ul și rulează scriptul din nou.

    În Elementor nu scrii cod. Pui numele clasei de aici în câmpul
    „CSS Classes" din tabul Advanced, iar restul vine de la sine.

    Culorile NU urmăresc modul întunecat al sistemului: site-ul arată
    cum a fost proiectat, indiferent de setările vizitatorului.
    ------------------------------------------------------------------ */

/* ==========================================================================
   REMOMEDIA — sistem de design
   Concept: planșă de proiectare. Studioul face două lucruri — CONSTRUIEȘTE
   (web design, dezvoltare, mobile, desktop) și CREȘTE (marketing plătit).
   Accentul codifică familia: cobalt = construcție, portocaliu = creștere.
   ========================================================================== */

:root{
  --stone:#E4E4DE;      /* fundal: neutru cald cu tentă de măsliniu */
  --sheet:#EFEFEA;      /* planșa: suprafețe ridicate */
  --sheet-2:#D9D9D2;
  --rule:#C3C4BB;
  --rule-soft:#D2D3CA;

  --ink:#14161A;        /* negru cu tentă rece */
  --ink-2:#3A3E42;
  --muted:#666A63;

  --build:#1B45C8;      /* cobalt — tot ce se construiește */
  --build-wash:#D8DEF5;
  --grow:#DD5017;       /* portocaliu topit — tot ce crește */
  --grow-wash:#F7DFD1;

  --accent:var(--build);        /* suprascris per pagină */
  --accent-wash:var(--build-wash);
  --accent-on:#FFFFFF;

  --shadow-1:0 1px 2px rgba(20,22,26,.05), 0 10px 26px -16px rgba(20,22,26,.28);
  --shadow-2:0 2px 6px rgba(20,22,26,.07), 0 40px 80px -40px rgba(20,22,26,.45);

  --sans:'Archivo', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter:clamp(20px, 4.4vw, 56px);
  --maxw:1240px;
  --ease:cubic-bezier(.22,.72,.28,1);
}


:root[data-theme="dark"]{
  --stone:#101210; --sheet:#181B18; --sheet-2:#22261F;
  --rule:#31362F; --rule-soft:#262B25;
  --ink:#E9EAE3; --ink-2:#BCC0B7; --muted:#868B80;
  --build:#7B95FF; --build-wash:#1B2440;
  --grow:#FF7C3E;  --grow-wash:#331A0D;
  --accent-on:#0E1010;
  --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -16px rgba(0,0,0,.9);
  --shadow-2:0 2px 6px rgba(0,0,0,.5), 0 40px 80px -40px rgba(0,0,0,1);
}
:root[data-theme="light"]{
  --stone:#E4E4DE; --sheet:#EFEFEA; --sheet-2:#D9D9D2;
  --rule:#C3C4BB; --rule-soft:#D2D3CA;
  --ink:#14161A; --ink-2:#3A3E42; --muted:#666A63;
  --build:#1B45C8; --build-wash:#D8DEF5;
  --grow:#DD5017;  --grow-wash:#F7DFD1;
  --accent-on:#FFFFFF;
  --shadow-1:0 1px 2px rgba(20,22,26,.05), 0 10px 26px -16px rgba(20,22,26,.28);
  --shadow-2:0 2px 6px rgba(20,22,26,.07), 0 40px 80px -40px rgba(20,22,26,.45);
}

/* familia de accent, comutată de router pe <body> */
body[data-family="grow"]{--accent:var(--grow); --accent-wash:var(--grow-wash)}
body[data-family="build"]{--accent:var(--build); --accent-wash:var(--build-wash)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--stone); color:var(--ink);
  font-family:var(--sans); font-size:16.5px; line-height:1.62;
  font-variation-settings:'wdth' 100;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:var(--accent); color:var(--accent-on)}
img{max-width:100%; display:block}
button{font:inherit}

/* ---------------- tipografie ---------------- */
/* Elementor pune clasa pe învelișul widgetului, iar titlul propriu-zis stă
   înăuntru cu stilurile lui. Fără regula de moștenire, culoarea și fontul
   nostru se opresc la înveliș și nu se văd. */
.t-hero,.t-1,.t-2,.t-3,.t-3{color:var(--ink)}
.t-hero .elementor-heading-title,.t-1 .elementor-heading-title,
.t-2 .elementor-heading-title,.t-3 .elementor-heading-title,
.code .elementor-heading-title,.pill .elementor-heading-title,
.lead .elementor-widget-container,.p .elementor-widget-container{
  color:inherit; font:inherit; letter-spacing:inherit; line-height:inherit;
  font-variation-settings:inherit; text-transform:inherit;
}
.t-hero{
  font-size:clamp(34px,4.4vw,60px); line-height:1.02; margin:0;
  font-weight:800; font-variation-settings:'wdth' 118,'wght' 800;
  letter-spacing:-.028em; text-wrap:balance; overflow-wrap:break-word;
}
.t-1{
  font-size:clamp(28px,3.5vw,44px); line-height:1.06; margin:0;
  font-weight:800; font-variation-settings:'wdth' 114,'wght' 800;
  letter-spacing:-.024em; text-wrap:balance;
}
.t-2{
  font-size:clamp(21px,2.1vw,27px); line-height:1.18; margin:0;
  font-weight:700; font-variation-settings:'wdth' 108,'wght' 700; letter-spacing:-.018em;
}
.t-3{
  font-size:18px; line-height:1.3; margin:0;
  font-weight:700; font-variation-settings:'wdth' 104,'wght' 700; letter-spacing:-.012em;
}
.lead{font-size:clamp(17px,1.5vw,19.5px); line-height:1.6; color:var(--ink-2); margin:0; max-width:62ch}
.p{margin:0; color:var(--muted); font-size:15.5px; line-height:1.66}
.p-sm{margin:0; color:var(--muted); font-size:14px; line-height:1.62}
.code{
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.code--accent{color:var(--accent)}
strong{font-weight:700}

/* ---------------- planșa: grilă + cote ---------------- */
.sheet-grid{
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:repeating-linear-gradient(90deg, var(--rule-soft) 0 1px, transparent 1px calc(100% / 12));
  background-size:100% 100%;
  mask-image:linear-gradient(180deg, transparent, #000 12%, #000 78%, transparent);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 12%, #000 78%, transparent);
}
/* Varianta pentru Elementor: grila stă direct pe secțiune, ca fundal.
   `.sheet-grid` de mai sus cere un element copil, ceea ce în constructor
   nu se poate adăuga fără widget HTML. */
.plansa-fundal{
  background-image:repeating-linear-gradient(90deg, var(--rule-soft) 0 1px, transparent 1px calc(100% / 12));
  background-size:100% 100%; background-position:center;
}
.dim{position:relative; height:1px; background:var(--rule)}
.dim::before,.dim::after{content:""; position:absolute; top:-4px; width:1px; height:9px; background:var(--rule)}
.dim::before{left:0} .dim::after{right:0}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); position:relative; z-index:1}
/* Ajutoare pentru constructor: spațierea verticală a secțiunilor și
   proporțiile din hero, pe care Elementor le-ar face egale. */
.sp-sectiune{padding-block:clamp(54px,7.5vw,102px)}
.sp-mica{padding-block:clamp(32px,4vw,54px)}
.col-64{width:100%} .col-36{width:100%}
@media(min-width:1000px){ .col-64{width:58%} .col-36{width:42%} }
.rand-hero{align-items:center}
@media(max-width:999px){ .rand-hero{flex-direction:column !important} }
.section{position:relative; padding-block:clamp(54px,7.5vw,102px); border-top:1px solid var(--rule)}
.section--flush{border-top:none}

.head{display:grid; gap:16px; margin-bottom:clamp(30px,4.4vw,52px)}
@media(min-width:900px){
  .head{grid-template-columns:172px minmax(0,1fr); gap:0 44px; align-items:start}
  .head > .code{grid-row:1 / span 3; padding-top:9px}
}

/* ---------------- butoane ---------------- */
.btn{
  --bg:var(--ink); --fg:var(--stone); --bd:var(--ink);
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:14px 24px; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  font-size:15px; font-weight:600; font-variation-settings:'wdth' 100,'wght' 600;
  text-decoration:none; cursor:pointer; border-radius:1px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-1)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
/* widgetul Button din Elementor: preia forma noastră, nu pe a lui */
.btn .elementor-button-content-wrapper,.elementor-widget-button .btn{all:unset; display:inline-flex; align-items:center; gap:10px}
.elementor-widget-button .elementor-button{border-radius:1px; font-family:var(--sans); font-weight:600; letter-spacing:0}
.btn svg{width:16px; height:16px; flex:none}
.btn--accent{--bg:var(--accent); --fg:var(--accent-on); --bd:var(--accent)}
.btn--line{--bg:transparent; --fg:var(--ink); --bd:var(--rule)}
.btn--line:hover{--bd:var(--ink)}
.btn--sm{padding:10px 18px; font-size:14px}

.pill{
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px;
  border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  background:var(--accent-wash); color:var(--accent); border-radius:1px;
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
}
.pill .pip{width:6px; height:6px; background:currentColor; border-radius:50%; animation:pip 2.2s ease-in-out infinite}
@keyframes pip{0%,100%{opacity:1}50%{opacity:.22}}

/* ---------------- antet ---------------- */
.site-head{
  position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--stone) 90%, transparent);
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--rule);
}
.head-in{display:flex; align-items:center; justify-content:space-between; gap:20px; height:68px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit}
.brand svg{width:28px; height:28px; flex:none}
.brand .bwrap{display:block}
.brand .bname{display:block; font-size:17.5px; font-weight:800; font-variation-settings:'wdth' 112,'wght' 800; letter-spacing:-.02em}
.brand .btag{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.24em; color:var(--muted); text-transform:uppercase; margin-top:-2px}

.mainnav{display:none; align-items:center; gap:4px}
@media(min-width:1040px){.mainnav{display:flex}}
.navlink{
  position:relative; padding:9px 14px; font-size:14.5px; font-weight:500;
  text-decoration:none; color:var(--ink-2); background:none; border:none; cursor:pointer; border-radius:1px;
}
.navlink::after{content:""; position:absolute; left:14px; right:calc(100% - 14px); bottom:2px; height:1.5px; background:var(--accent); transition:right .3s var(--ease)}
.navlink:hover{color:var(--ink)}
.navlink:hover::after{right:14px}
.navlink[aria-current="page"]{color:var(--ink); font-weight:600}
.navlink[aria-current="page"]::after{right:14px}
.navlink:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.has-menu{position:relative}
.menu{
  position:absolute; top:calc(100% + 10px); left:0; width:340px; padding:8px;
  background:var(--sheet); border:1px solid var(--rule); box-shadow:var(--shadow-2);
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:all .24s var(--ease); border-radius:2px;
}
.has-menu:hover .menu, .has-menu:focus-within .menu{opacity:1; visibility:visible; transform:none}
.menu a{display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; align-items:center; padding:11px 12px; text-decoration:none; color:inherit; border-radius:1px; transition:background .2s}
.menu a:hover{background:var(--sheet-2)}
.menu a .mi{width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--rule); background:var(--stone)}
.menu a .mi svg{width:18px; height:18px}
.menu a strong{display:block; font-size:14.5px; font-weight:600; font-variation-settings:'wdth' 102,'wght' 600}
.menu a small{display:block; font-size:12.5px; color:var(--muted); line-height:1.4}
.menu .mg-build .mi{color:var(--build)}
.menu .mg-grow .mi{color:var(--grow)}

.head-cta{display:none}
@media(min-width:760px){.head-cta{display:inline-flex}}
.burger{display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--rule); background:transparent; cursor:pointer; border-radius:1px}
@media(min-width:1040px){.burger{display:none}}
.burger svg{width:20px; height:20px}
.burger:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.drawer{
  position:fixed; inset:68px 0 0 0; z-index:55; background:var(--stone);
  border-top:1px solid var(--rule); overflow-y:auto; padding:22px var(--gutter) 40px;
  transform:translateY(-10px); opacity:0; visibility:hidden; transition:all .26s var(--ease);
}
.drawer.open{transform:none; opacity:1; visibility:visible}
.drawer a.btn{border-bottom:1px solid var(--bd)}
.drawer a:not(.btn){display:block; padding:15px 0; border-bottom:1px solid var(--rule-soft); text-decoration:none; color:inherit; font-size:18px; font-weight:600; font-variation-settings:'wdth' 106,'wght' 600}
.drawer .code{display:block; padding:22px 0 8px}

/* ---------------- hero ---------------- */
.hero{position:relative; overflow:hidden; padding-block:clamp(44px,6vw,84px) 0}
.hero-grid{display:grid; gap:clamp(32px,4.6vw,56px); align-items:center}
@media(min-width:1000px){.hero-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}}
.hero-eyebrow{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:24px}
.hero .lead{margin-top:24px}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:30px}
.hero-tags span{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--rule); padding:6px 11px}

.split{color:var(--build)}
.split-2{color:var(--grow)}

.rise{opacity:0; transform:translateY(16px); animation:rise .72s var(--ease) forwards}
@keyframes rise{to{opacity:1; transform:none}}
.dl1{animation-delay:.06s}.dl2{animation-delay:.14s}.dl3{animation-delay:.22s}
.dl4{animation-delay:.30s}.dl5{animation-delay:.38s}.dl6{animation-delay:.46s}

/* --- planșa rotativă din hero --- */
.spec{background:var(--sheet); border:1px solid var(--rule); box-shadow:var(--shadow-2); border-radius:2px; overflow:hidden}
.spec-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-bottom:1px solid var(--rule); background:var(--sheet-2)}
.spec-body{position:relative; min-height:340px}
.spec-slide{
  position:absolute; inset:0; padding:26px; display:flex; flex-direction:column; gap:16px;
  opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease); pointer-events:none;
}
.spec-slide.on{opacity:1; transform:none; pointer-events:auto}
.spec-fig{height:126px; border:1px solid var(--rule); background:var(--stone); position:relative; overflow:hidden}
.spec-fig svg{position:absolute; inset:0; width:100%; height:100%}
.spec-meta{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:auto; padding-top:14px; border-top:1px dashed var(--rule)}
.spec-meta div .code{display:block; margin-bottom:3px}
.spec-meta div b{font-size:14px; font-weight:600; font-variation-settings:'wdth' 102,'wght' 600}
.spec-dots{display:flex; gap:6px; padding:0 16px 16px; margin-block:-18px}
/* Bara se vede de 3px, dar butonul are 39px, ca să poată fi atins cu
   degetul. Diferența e umplutură transparentă: `background-clip:content-box`
   pictează doar caseta de conținut, adică exact linia de 3px. Marginea
   negativă a benzii ține desenul la locul lui. */
.spec-dot{flex:1; height:39px; padding-block:18px; box-sizing:border-box;
          background:var(--rule); background-clip:content-box;
          border:none; cursor:pointer; position:relative; border-radius:1px}
.spec-dot:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.spec-dot i{position:absolute; inset:18px 0; background:var(--accent); transform:scaleX(0); transform-origin:left}
.spec-dot.active i{animation:fill 5.2s linear forwards}
@keyframes fill{to{transform:scaleX(1)}}

/* ---------------- servicii pe acasă ---------------- */
.svc-list{border-top:1px solid var(--rule)}
.svc{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center;
  padding:26px 0; border-bottom:1px solid var(--rule); text-decoration:none; color:inherit;
  position:relative; transition:padding-left .34s var(--ease);
}
@media(min-width:900px){
  .svc{grid-template-columns:56px 108px minmax(0,1.05fr) minmax(0,1.25fr) auto; gap:28px}
}
.svc::before{content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--svc-accent); transition:width .34s var(--ease)}
.svc:hover{padding-left:18px}
.svc:hover::before{width:3px}
.svc:focus-visible{outline:2px solid var(--svc-accent); outline-offset:2px}
.svc-ico{width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--rule); color:var(--svc-accent); background:var(--sheet); transition:background .3s, color .3s, border-color .3s}
.svc:hover .svc-ico{background:var(--svc-accent); color:var(--accent-on); border-color:var(--svc-accent)}
.svc-ico svg{width:22px; height:22px}
.svc-code{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--svc-accent)}
.svc h3{font-size:20px; margin:0; font-weight:700; font-variation-settings:'wdth' 108,'wght' 700; letter-spacing:-.016em}
.svc .p-sm{margin-top:5px}
.svc-go{width:38px; height:38px; border:1px solid var(--rule); display:grid; place-items:center; transition:all .3s var(--ease)}
.svc-go svg{width:15px; height:15px}
.svc:hover .svc-go{background:var(--svc-accent); border-color:var(--svc-accent); color:var(--accent-on); transform:rotate(45deg)}
@media(max-width:899px){
  .svc-code{display:none}
  .svc{grid-template-columns:44px minmax(0,1fr) 38px; gap:4px 16px}
  .svc-ico{grid-column:1; grid-row:1 / span 2}
  .svc-name{grid-column:2; grid-row:1}
  .svc-desc{grid-column:2; grid-row:2}
}
/* Pe telefoanele mici, între iconiță și săgeată rămân 166px pentru
   descriere — trei-patru cuvinte pe rând. Trece pe un rând al ei. */
@media(max-width:479px){
  .svc-ico{grid-row:1}
  .svc-desc{grid-column:1 / -1; grid-row:3; margin-top:8px}
  .svc-go{grid-column:3; grid-row:1}
}

/* ---------------- carduri generice ---------------- */
.grid-3{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule)}
@media(min-width:640px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grid-4{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule)}
@media(min-width:640px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1060px){.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cell{background:var(--sheet); padding:28px 24px 30px; display:flex; flex-direction:column; gap:13px; transition:background .3s}
.cell:hover{background:var(--sheet-2)}
.cell-ico{width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--rule); background:var(--stone); color:var(--accent); transition:transform .34s var(--ease), background .3s, color .3s, border-color .3s}
.cell:hover .cell-ico{transform:translateY(-3px); background:var(--accent); color:var(--accent-on); border-color:var(--accent)}
.cell-ico svg{width:22px; height:22px}
.cell .code{margin-top:auto; padding-top:13px; border-top:1px dashed var(--rule)}

/* ---------------- proces ---------------- */
.flow{display:grid; gap:0; border-top:1px solid var(--rule); counter-reset:step}
.flow-item{
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:6px 18px; align-items:start;
  padding:24px 0; border-bottom:1px solid var(--rule); transition:padding-left .3s var(--ease);
}
.flow-item > h3, .flow-item > p{grid-column:2}
.flow-item:hover{padding-left:12px}
@media(min-width:880px){
  .flow-item{grid-template-columns:70px 250px minmax(0,1fr); gap:30px; align-items:center}
  .flow-item > h3{grid-column:2} .flow-item > p{grid-column:3}
}
.flow-n{font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--accent); letter-spacing:.1em; padding-top:3px}
.flow-item p{margin:6px 0 0}
@media(min-width:880px){.flow-item p{margin:0}}

/* ---------------- listă bifată ---------------- */
.checks{list-style:none; margin:0; padding:0; display:grid; gap:12px}
@media(min-width:760px){.checks--2{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 34px}}
.checks li{display:grid; grid-template-columns:19px minmax(0,1fr); gap:12px; font-size:15px; line-height:1.55; color:var(--ink-2)}
.checks li svg{width:16px; height:16px; margin-top:3px; color:var(--accent); flex:none}

/* ---------------- stivă tehnologică ---------------- */
.stack{display:flex; flex-wrap:wrap; gap:8px}
.stack span{
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.05em;
  border:1px solid var(--rule); padding:8px 13px; color:var(--ink-2); background:var(--sheet);
  transition:border-color .25s, color .25s, transform .25s var(--ease);
}
.stack span:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px)}

/* ---------------- preț ---------------- */
.money{display:inline-flex; border:1px solid var(--rule); background:var(--sheet); border-radius:1px; overflow:hidden}
.money button{
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  padding:9px 15px; border:none; background:transparent; color:var(--muted); cursor:pointer; transition:all .2s;
}
.money button:hover{color:var(--ink)}
.money button[aria-pressed="true"]{background:var(--accent); color:var(--accent-on)}
.money button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.money-note{margin-top:14px; font-family:var(--mono); font-size:11.5px; color:var(--muted); line-height:1.6}
.price-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px}
.plans{display:grid; gap:20px}
@media(min-width:860px){.plans--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.plans--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plan{background:var(--sheet); border:1px solid var(--rule); padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s}
.plan:hover{transform:translateY(-4px); box-shadow:var(--shadow-2)}
.plan--lead{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.plan-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-bottom:18px; border-bottom:1px dashed var(--rule)}
.plan-badge{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; background:var(--accent); color:var(--accent-on)}
.price{display:flex; align-items:flex-end; flex-wrap:wrap; gap:7px; margin:22px 0 5px}
.price b{font-size:clamp(38px,4.6vw,54px); line-height:.92; font-weight:800; font-variation-settings:'wdth' 112,'wght' 800; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.price i{font-style:normal; font-size:20px; font-weight:700; color:var(--accent); padding-bottom:5px}
.price-pre{align-self:flex-end; padding-bottom:7px; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.price-unit{align-self:flex-end; padding-bottom:7px; font-size:14px; color:var(--muted)}
.plan .checks{margin:22px 0 26px}
.plan .btn{margin-top:auto}

/* ---------------- cifre ---------------- */
/* Pe telefon cifrele stau una sub alta: în două coloane, explicația
   ajungea la 131px lățime, adică două cuvinte pe rând. */
.figs{display:grid; grid-template-columns:minmax(0,1fr)}
@media(min-width:520px){.figs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:860px){.figs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fig{padding:26px 22px 28px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.fig:first-child{padding-left:0}
@media(max-width:519px){.fig{border-right:none; padding-left:0; padding-right:0}}
@media(min-width:860px){.fig{border-bottom:none} .fig:last-child{border-right:none; padding-right:0}}
@media(min-width:520px) and (max-width:859px){.fig:nth-child(2n){border-right:none} .fig:nth-child(2n+1){padding-left:0}}
.fig b{display:block; font-size:clamp(30px,3.8vw,44px); line-height:1; font-weight:800; font-variation-settings:'wdth' 114,'wght' 800; letter-spacing:-.035em; font-variant-numeric:tabular-nums}
.fig b em{font-style:normal; color:var(--accent)}
.fig .p-sm{margin-top:9px}

/* ---------------- portofoliu ---------------- */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px}
.filter{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; padding:9px 15px; border:1px solid var(--rule); background:transparent; color:var(--muted); cursor:pointer; transition:all .22s}
.filter:hover{border-color:var(--ink); color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--stone)}
.filter:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.folio{display:grid; gap:24px}
@media(min-width:740px){.folio{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.folio{grid-template-columns:repeat(3,minmax(0,1fr))}}
.work{display:flex; flex-direction:column; text-decoration:none; color:inherit; background:var(--sheet); border:1px solid var(--rule); overflow:hidden; transition:transform .36s var(--ease), box-shadow .36s, border-color .36s}
.work:hover{transform:translateY(-6px); box-shadow:var(--shadow-2); border-color:var(--ink)}
.work:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.work.hide{display:none}
.chrome{display:flex; align-items:center; gap:6px; padding:10px 12px; background:var(--sheet-2); border-bottom:1px solid var(--rule)}
.chrome i{width:8px; height:8px; border-radius:50%; background:var(--rule); flex:none}
.chrome span{flex:1; margin-left:8px; font-family:var(--mono); font-size:10.5px; color:var(--muted); background:var(--stone); border:1px solid var(--rule); padding:4px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.viewport{position:relative; height:214px; overflow:hidden; background:var(--stone)}
.viewport .mock,.viewport .shot{position:absolute; inset:0 0 auto 0; width:100%; height:auto; display:block;
  transition:transform 3.4s cubic-bezier(.3,.5,.2,1)}
.work:hover .viewport .mock,.work:hover .viewport .shot{transform:translateY(calc(-100% + 214px))}
.hint{position:absolute; right:10px; bottom:10px; z-index:3; font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:5px 9px; background:color-mix(in srgb, var(--ink) 84%, transparent); color:var(--stone); opacity:0; transition:opacity .3s}
.work:hover .hint{opacity:1}
.work-meta{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:19px; border-top:1px solid var(--rule)}
.work-meta .p-sm{margin-top:4px}
.work-res{margin-top:11px; display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--accent)}
.work-res svg{width:12px; height:12px}
.work-go{width:34px; height:34px; flex:none; border:1px solid var(--rule); display:grid; place-items:center; transition:all .3s var(--ease)}
.work-go svg{width:14px; height:14px}
.work:hover .work-go{background:var(--accent); border-color:var(--accent); color:var(--accent-on); transform:rotate(45deg)}

/* machete de site în ferestre */
.mock{padding:15px 17px; display:flex; flex-direction:column; gap:10px}
.mock .mnav{display:flex; align-items:center; justify-content:space-between; margin-bottom:3px}
.mock .mlogo{height:9px; width:58px; background:currentColor; opacity:.85}
.mock .mlinks{display:flex; gap:6px}
.mock .mlinks i{height:5px; width:22px; background:currentColor; opacity:.3}
.mock .mh{height:14px; background:currentColor; opacity:.82}
.mock .mh.a{width:72%} .mock .mh.b{width:46%}
.mock .mt{height:6px; background:currentColor; opacity:.26}
.mock .mt.a{width:88%} .mock .mt.b{width:60%}
.mock .mbtn{height:21px; width:92px; margin-top:3px}
.mock .mgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:5px}
.mock .mgrid i{height:52px; background:currentColor; opacity:.13}
.mock .mband{height:60px; margin-top:5px; opacity:.92}
.mock .mrow{display:grid; grid-template-columns:repeat(2,1fr); gap:7px}
.mock .mrow i{height:42px; background:currentColor; opacity:.13}
/* Paletele marcate „măsurată” sunt citite din site-ul real al partenerului.
   Restul sunt neutre, până când încarci capturile adevărate. */
.mk-karttal{color:#C3C8FF; background:linear-gradient(177deg,#101018,#0A0A0A)}          /* măsurată */
.mk-karttal .mbtn,.mk-karttal .mband{background:linear-gradient(95deg,#655EFF,#7C86FF)}
.mk-bcf{color:#0B3B40; background:linear-gradient(177deg,#F2FBFC,#DFF3F5)}              /* măsurată */
.mk-bcf .mbtn,.mk-bcf .mband{background:linear-gradient(95deg,#52B9B5,#56C5CF)}
.mk-serra{color:#173D32; background:linear-gradient(177deg,#FAF8F3,#EDEFE3)}            /* măsurată */
.mk-serra .mbtn,.mk-serra .mband{background:linear-gradient(95deg,#173D32,#BD6849)}
.mk-amprenta{color:#FFD8E0; background:linear-gradient(177deg,#161616,#0F0F0F)}         /* măsurată */
.mk-amprenta .mbtn,.mk-amprenta .mband{background:linear-gradient(95deg,#FF003B,#CC3366)}
.mk-hambar{color:#2A1B10; background:linear-gradient(177deg,#F7F1E8,#EBDFCD)}
.mk-hambar .mbtn,.mk-hambar .mband{background:linear-gradient(95deg,#7A4A22,#C08A4E)}
.mk-exactitude{color:#141821; background:linear-gradient(177deg,#EFF1F5,#DFE3EA)}
.mk-exactitude .mbtn,.mk-exactitude .mband{background:linear-gradient(95deg,#1D2430,#4C596E)}
.mk-wedowow{color:#2C2413; background:linear-gradient(177deg,#F8F4E9,#EDE4CE)}
.mk-wedowow .mbtn,.mk-wedowow .mband{background:linear-gradient(95deg,#8A6B22,#C9A24B)}
.mk-carmen{color:#2E1220; background:linear-gradient(177deg,#F9F0F4,#EEDCE5)}
.mk-carmen .mbtn,.mk-carmen .mband{background:linear-gradient(95deg,#7A1B4C,#B44A7E)}

/* ---------------- FAQ ---------------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none; cursor:pointer; padding:21px 46px 21px 0; position:relative; font-size:clamp(16px,1.6vw,18.5px); font-weight:700; font-variation-settings:'wdth' 106,'wght' 700; letter-spacing:-.012em; transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.faq summary::after{content:""; position:absolute; right:8px; top:50%; width:12px; height:12px; margin-top:-8px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg); transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq .ans{padding:0 62px 22px 0; margin:0; font-size:15px; line-height:1.68; color:var(--muted)}

/* ---------------- bandă CTA ---------------- */
.cta{position:relative; overflow:hidden; background:var(--ink); color:var(--stone); padding:clamp(36px,5.4vw,66px)}
.cta::before{content:""; position:absolute; inset:0; opacity:.2; pointer-events:none;
  background-image:repeating-linear-gradient(90deg, var(--accent) 0 1px, transparent 1px 42px);
  mask-image:linear-gradient(102deg,#000,transparent 60%); -webkit-mask-image:linear-gradient(102deg,#000,transparent 60%)}
.cta-in{position:relative; display:grid; gap:26px}
@media(min-width:900px){.cta-in{grid-template-columns:minmax(0,1.15fr) auto; align-items:center; gap:44px}}
.cta .t-1{color:var(--stone)}
.cta p{margin:14px 0 0; color:color-mix(in srgb, var(--stone) 70%, transparent); font-size:16px; line-height:1.6; max-width:54ch}
.cta .btn{--bg:var(--accent); --fg:var(--accent-on); --bd:var(--accent); white-space:nowrap}

/* ---------------- formular contact ---------------- */
.form{display:grid; gap:16px}
@media(min-width:760px){.form{grid-template-columns:repeat(2,minmax(0,1fr))}.form .full{grid-column:1 / -1}}
.field{display:flex; flex-direction:column; gap:7px}
.field label{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.field input,.field select,.field textarea{
  font:inherit; font-size:15px; padding:13px 14px; background:var(--sheet);
  border:1px solid var(--rule); color:var(--ink); border-radius:1px; width:100%;
  transition:border-color .22s, box-shadow .22s;
}
.field textarea{min-height:132px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
.consent{display:grid; grid-template-columns:20px minmax(0,1fr); gap:11px; align-items:start; font-size:13.5px; color:var(--muted); line-height:1.55}
.consent input{width:18px; height:18px; margin-top:2px; accent-color:var(--accent)}

/* ---------------- subsol ---------------- */
.site-foot{border-top:1px solid var(--rule); margin-top:clamp(54px,7vw,92px); padding-block:44px 34px}
.foot-grid{display:grid; gap:34px; margin-bottom:38px}
@media(min-width:800px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.foot-col h4{margin:0 0 14px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
/* 8px sus și jos, nu 5: cu 5 legătura are 33px, sub pragul la care se
   nimerește cu degetul. Pe subsol se atinge aproape numai de pe telefon. */
.foot-col a{display:block; padding:8px 0; text-decoration:none; color:var(--ink-2); font-size:14.5px; transition:color .2s}
.foot-col a:hover{color:var(--accent)}
.foot-bar{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; padding-top:24px; border-top:1px solid var(--rule)}

/* ---------------- apariții la derulare ---------------- */
.rv{opacity:0; transform:translateY(20px); transition:opacity .68s var(--ease), transform .68s var(--ease)}
.rv.on{opacity:1; transform:none}


@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .rv,.rise{opacity:1 !important; transform:none !important}
}