/* Work Sans, de pe serverul nostru (nu de la Google Fonts) — lansare.py */
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonturi/work-sans-latin-ext.woff2) format('woff2');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;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonturi/work-sans-latin.woff2) format('woff2');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;}

  :root{
    --bg:#ffffff;
    --surface:#ffffff;
    --surface-2:#f6f4fb;
    --ink:#2b2b3a;
    --ink-soft:#6f6f80;
    --ink-faint:#8a8a99;
    --line:#ece9f7;
    --purple:#4a3a8f;
    --purple-light:#6a56b8;
    --purple-tint:#f3f1fa;
    --green:#6fa832;
    --green-bright:#8cc63f;
    --green-tint:#f5f9ef;
    --on-accent:#ffffff;
    --shadow: 0 1px 3px rgba(74,58,143,.06), 0 14px 32px -18px rgba(74,58,143,.22);
    --radius-lg: 16px;
    --radius-md: 10px;
    --font-body: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  }
  /* Design comis deliberat pe fundal alb (ca hârtia ofertelor HPC) —
     cu logo-ul mare ca filigran în spatele paginii. Fără temă întunecată. */

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;background:var(--bg);color:var(--ink);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
    line-height:1.6;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}
  .wrap{max-width:1160px;margin:0 auto;padding:0 28px;}
  h1,h2,h3{font-family:var(--font-body);font-weight:800;text-wrap:balance;line-height:1.15;margin:0;color:var(--ink);}
  .eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--green);}
  .lede{color:var(--ink-soft);font-size:16.5px;line-height:1.7;max-width:54ch;}
  section{padding:78px 0;}
  @media (max-width:720px){ section{padding:52px 0;} .wrap{padding:0 20px;} }

  .accent-bar{height:6px;background:linear-gradient(90deg,var(--purple) 0%,var(--purple-light) 45%,var(--green-bright) 100%);}

  /* ---- construcția „tip puzzle" a ÎNTREGULUI site, piesă cu piesă ----
     Intro-ul cu logo (asamblare + dublu zoom) se termină în max 4s. Din acel moment,
     clasa body.hero-live pornește construcția site-ului, care durează încă ~5s:
     sigla din stânga sus → meniul din dreapta → textul din hero → cardul de ofertă →
     apoi secțiune după secțiune, până jos. Ordinea și momentul fiecărei piese sunt
     setate din JS (vezi lista STEPS de la finalul paginii), ca să fie ușor de ajustat.
     Filigranul cu logo de pe fundal rămâne vizibil tot timpul. */
  .rv{opacity:0;transform:translateY(22px) scale(.94) rotate(-2deg);}
  .rv.rv-l{transform:translateY(22px) translateX(-20px) scale(.94) rotate(-3deg);}
  .rv.rv-r{transform:translateY(22px) translateX(20px) scale(.94) rotate(3deg);}
  @media (max-width:820px){ /* pe ecrane inguste piesele intra de jos, nu din dreapta: altfel cei 20px de deplasare
     lasau pagina sa se traga lateral cat tine animatia */
    .rv.rv-r{transform:translateY(22px) scale(.94) rotate(3deg);} }
  .rv.rv-slide{transform:translateX(34px) scale(.94) rotate(1.6deg);}
  @media (max-width:820px){ /* pe ecrane inguste si cardul de oferta intra de jos: cei 34px spre dreapta lasau
     pagina sa se traga lateral cat tinea animatia (circa 10 secunde) */
    .rv.rv-slide{transform:translateY(22px) scale(.94) rotate(1.6deg);} }
  body.hero-live .rv{opacity:1;transform:translateY(0) translateX(0) scale(1) rotate(0);}
  /* o singură listă de transition per element, ca „reveal" (opacity/transform) și hover (transform/box-shadow) să nu se anuleze reciproc */
  .rv,.card,.offer-card,.folio-slot,.cat-card,.callout,.recap-item{transition:opacity .42s cubic-bezier(.34,1.56,.64,1), transform .42s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;}
  /* varianta „.rv" a fiecărui hover e necesară ca să bată regula de stare finală de mai sus */
  .cat-card:hover,.recap-item:hover,.cat-card.rv:hover,.recap-item.rv:hover{transform:translateY(-5px);box-shadow:0 4px 10px rgba(74,58,143,.09), 0 22px 40px -20px rgba(74,58,143,.3);}
  .callout:hover,.callout.rv:hover{transform:translateX(4px);}
  .folio-slot:hover,.folio-slot.rv:hover{transform:translateY(-3px);border-color:var(--purple-light);}
  .btn{transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;}
  .btn:hover,.btn.rv:hover{transform:translateY(-2px);}
  @media (prefers-reduced-motion: reduce){
    .rv{opacity:1 !important;transform:none !important;transition:none !important;}
    .cat-card:hover,.recap-item:hover,.callout:hover,.folio-slot:hover,.btn:hover{transform:none;}
  }

  /* rândul de sus: sintagma din siglă, care crește lent până umple tot rândul */
  /* sintagma desprinsă din siglă: aceleași contururi, animate literă cu literă */
  #slogan-fly{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:41;overflow:visible;display:none;}
  #slogan-fly.on{display:block;}
  #slogan-fly-g{fill:var(--purple);transform-box:fill-box;transform-origin:50% 50%;}
  @keyframes slogan-pulse{0%{transform:scale(1);}55%{transform:scale(1.08);}100%{transform:scale(1);}}
  #slogan-fly-g.pulse{animation:slogan-pulse .5s ease-in-out 0s 2;}
  #slogan-row{background:#fff;overflow:hidden;}
  #slogan-row .wrap{transition:height .5s ease;}
  #slogan-row.collapse .wrap{height:0;}
  #slogan-row .wrap{display:flex;align-items:center;height:56px;}
  #slogan-text{
    flex:none;white-space:nowrap;color:var(--purple);font-weight:500;line-height:1;
    font-size:9px;letter-spacing:0;
    will-change:font-size,letter-spacing;
  }
  @media (max-width:900px){ #slogan-row .wrap{height:46px;} }
  @media (max-width:640px){ #slogan-row .wrap{height:38px;} }

  /* header */
  header{position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--bg) 90%, transparent);backdrop-filter:blur(10px);}
  /* padding pe verticală doar în longhand, ca să nu anuleze padding-ul orizontal al .wrap (altfel sigla și butonul se lipeau de marginile ecranului pe mobil) */
  .nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:14px;padding-bottom:14px;border-bottom:1px solid var(--line);}
  .logo-chip{background:#fff;border-radius:10px;padding:7px 12px;box-shadow:var(--shadow);display:inline-flex;align-items:center;flex:none;}
  .logo-chip img,.logo-chip .logo-mark{height:26px;width:auto;display:block;}
  /* logo-ul din header (sus-stânga) — cât mai mare/vizibil, cât timp mai încape confortabil în bara de navigare */
  header .logo-chip{padding:10px 16px;}
  header .logo-chip .logo-mark{height:48px;}
  @media (max-width:640px){ header .logo-chip .logo-mark{height:40px;} header .logo-chip{padding:8px 12px;} }
  @media (max-width:400px){ header .logo-chip .logo-mark{height:34px;} }

  /* cele 7 insigne de categorie + duba, decupate din emblemă, pe bara de sus.
     Stau într-o pastilă mov, pereche cu pastila albă a siglei, ca să nu iasă pete mov pe alb.
     Se arată doar acolo unde chiar încape, fără să înghesuie meniul. */
  .nav-left{display:flex;align-items:center;gap:14px;min-width:0;}
  /* desenul stă o singură dată în pagină, ca fundal; îl folosesc și în bară, și pe rândul de sub ea */
  .emb-strip{display:block;aspect-ratio:1157/167;
             background:url("img/bara-sus.webp") center/contain no-repeat;}
  /* insignele și duba stau pe un rând propriu sub bară, ca să se vadă pe orice ecran;
     rândul nu e lipit sus — se duce în sus odată cu pagina, ca să nu mănânce din ecran pe telefon */
  #bara-jos{background:var(--purple);}
  #bara-jos .wrap{display:flex;justify-content:center;padding-top:9px;padding-bottom:9px;}
  #bara-jos .emb-strip{width:min(100%,392px);}
  @media (min-width:1000px){ #bara-jos .emb-strip{width:min(100%,470px);} }

  /* filigran cu logo-ul HPC, fix în spatele întregii pagini */
  #bg-logo{background-image:url("filigran.svg");
    position:fixed;inset:0;z-index:-1;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:min(58vw, 720px) auto;
    opacity:.095;
    pointer-events:none;
  }
  nav.links{display:flex;gap:30px;font-size:14.5px;font-weight:600;}
  nav.links a{text-decoration:none;color:var(--ink-soft);}
  nav.links a:hover{color:var(--purple);}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:9px;font-weight:700;font-size:14.5px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;}
  .btn-primary{background:var(--purple);color:var(--on-accent);}
  .btn-primary:hover{background:var(--purple-light);}
  .btn-ghost{border-color:var(--line);color:var(--ink);background:transparent;}
  .btn-ghost:hover{border-color:var(--purple);color:var(--purple);}
  @media (max-width:860px){ nav.links{display:none;} }

  /* badge (matches offer's badge component) */
  .badge{display:inline-flex;align-items:center;gap:9px;background:var(--purple-tint);border:1px solid var(--line);border-radius:9px;padding:9px 14px;font-size:11px;color:var(--purple);font-weight:800;text-transform:uppercase;letter-spacing:.03em;}
  .badge svg{flex-shrink:0;width:18px;height:18px;}

  /* hero */
  .hero{padding:64px 0 30px;}
  .hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:52px;align-items:start;}
  @media (max-width:960px){ .hero-grid{grid-template-columns:1fr;} }
  .hero h1{font-size:clamp(32px,4.4vw,50px);margin:16px 0 18px;color:var(--purple);}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;}
  .badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;}
  .lede-block .lede{margin:0 0 15px;}
  .lede-block .lede:last-child{margin-bottom:0;}
  .lede-q{color:var(--purple);font-style:italic;}
  .lede-cta{color:var(--purple);font-weight:700;font-style:normal;}

  /* hero-ul intră „pe piese", ca tot restul paginii — vezi blocul „.rv" de mai sus */

  /* „În curând" — pagina temporară din spatele fiecărei categorii de produse.
     Ascunde site-ul și lasă doar logo-ul HPC pe fundalul alb cu filigran. */
  #soon{display:none;min-height:100vh;align-items:center;justify-content:center;text-align:center;padding:48px 20px;}
  body.soon-open #soon{display:flex;}
  body.soon-open>.draft-note,body.soon-open>#bara-jos,body.soon-open>#slogan-row,body.soon-open>#slogan-fly.on,body.soon-open>header,body.soon-open>section,body.soon-open>footer{display:none;}
  /* pe pagina „În curând" filigranul rămâne, dar puțin mai discret — ca să nu pară două logo-uri suprapuse */
  body.soon-open #bg-logo{background-image:url("filigran.svg");opacity:.05;}
  .soon-inner{display:flex;flex-direction:column;align-items:center;gap:16px;}
  #soon-logo{width:min(72vw,340px);height:auto;aspect-ratio:200/66;display:block;}
  #soon .soon-cat{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--purple-light);margin-top:12px;}
  #soon h2{font-size:clamp(26px,4.4vw,42px);color:var(--purple);text-transform:uppercase;letter-spacing:.02em;margin:0;}
  #soon .soon-bar{width:110px;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--purple) 0%,var(--purple-light) 45%,var(--green-bright) 100%);}
  #soon .btn{margin-top:14px;}

  /* card (matches offer's .card) */
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);}
  .card-h{padding:22px 26px 0;}
  .card-h h3{font-size:16px;color:var(--purple);text-transform:uppercase;letter-spacing:.02em;padding-bottom:10px;border-bottom:2px solid var(--green-bright);display:inline-block;}

  /* offer-preview card (hero right column) */
  .offer-card{padding:0;overflow:hidden;}
  .offer-card .accent-bar{height:5px;}
  .offer-card-body{padding:22px 24px 24px;}
  .offer-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px;}
  .offer-card-top h3{font-size:17px;color:var(--purple);margin-bottom:4px;}
  .offer-card-top p{margin:0;color:var(--ink-faint);font-size:12.5px;}
  table.offer-table{width:100%;border-collapse:collapse;font-size:13.5px;}
  table.offer-table thead th{text-align:left;color:var(--purple);font-size:10px;letter-spacing:.05em;text-transform:uppercase;border-bottom:2px solid var(--purple);padding:7px 4px;}
  table.offer-table thead th.price{text-align:right;}
  table.offer-table thead th.num{width:26px;}
  table.offer-table tbody td{padding:9px 4px;border-bottom:1px solid var(--line);}
  table.offer-table tbody td.name{font-weight:600;}
  table.offer-table tbody td.price{text-align:right;color:var(--ink-faint);font-style:italic;}
  .offer-note{font-size:11.5px;color:var(--ink-faint);font-style:italic;margin-top:12px;}
  .offer-card-foot{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:13px;color:var(--ink-soft);display:flex;gap:10px;align-items:flex-start;}
  .offer-card-foot svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--green);}

  /* section head */
  /* ---- banda mov cu emblema HPC, înaintea categoriilor ---- */
  .band{background:var(--purple);color:#ffffff;padding:62px 0;}
  .band-grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:52px;align-items:center;}
  .band-art{display:block;}
  .band-art .emblema{display:block;width:100%;height:auto;}
  /* imaginea are exact movul benzii, deci nu se vede nicio margine */
  .band .eyebrow{color:var(--green-bright);}
  .band h2{font-size:clamp(23px,2.9vw,33px);line-height:1.24;margin:0 0 16px;
           text-transform:uppercase;letter-spacing:.01em;color:#ffffff;}
  .band p{margin:0;font-size:17px;line-height:1.68;color:#ddd7f3;max-width:54ch;}
  @media (max-width:900px){
    .band{padding:48px 0;}
    .band-grid{grid-template-columns:1fr;gap:28px;justify-items:center;}
    .band-art{width:min(100%,360px);}
    .band-text{text-align:center;}
    .band p{margin-left:auto;margin-right:auto;}
  }
  @media (max-width:560px){
    .band{padding:38px 0;}
    .band-art{width:min(100%,300px);}
    /* pe ecran îngust paragraful se citește mai ușor aliniat la stânga, chiar dacă titlul rămâne centrat */
    .band p{font-size:16px;text-align:left;}
  }
  .section-head{max-width:640px;margin-bottom:40px;}
  .section-head h2{font-size:clamp(24px,3vw,32px);margin-top:8px;text-transform:uppercase;letter-spacing:.01em;}

  /* category cards */
  .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
  @media (max-width:1100px){ .cat-grid{grid-template-columns:repeat(3,1fr);} }
  @media (max-width:700px){ .cat-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .cat-grid{gap:12px;} }
  .cat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px 18px 16px;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:var(--shadow);text-decoration:none;color:inherit;cursor:pointer;}
  /* iconițele oficiale HPC: pătratul colorat cu desenul și banda cu numele, dintr-o bucată */
  .cat-art{display:block;width:100%;max-width:160px;}
  .cat-art .cat-ic{display:block;width:100%;height:auto;}
  @media (max-width:560px){ .cat-card{padding:14px 12px 12px;gap:12px;} }
  /* numele rămâne în cod pentru Google și pentru cititoarele de ecran, deși vizual e în iconiță */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  /* categoriile sunt butoane — pregătite pentru ziua când vor deschide pagina reală cu produsele din acea categorie */
  .cat-card .cat-cta{margin-top:auto;padding-top:2px;font-size:12.5px;font-weight:700;color:var(--purple);display:inline-flex;align-items:center;gap:5px;}
  .cat-card .cat-cta svg{width:14px;height:14px;transition:transform .2s ease;}
  .cat-card:hover .cat-cta svg{transform:translateX(3px);}
  .cat-card:focus-visible{outline:2px solid var(--purple);outline-offset:2px;}

  /* callouts (matches offer's .callout / .callout.green) */
  .callouts{display:flex;flex-direction:column;gap:14px;}
  .callout{display:flex;gap:14px;align-items:flex-start;border-left:4px solid var(--purple);background:var(--purple-tint);border-radius:8px;padding:18px 20px;}
  .callout.green{border-left-color:var(--green-bright);background:var(--green-tint);}
  .callout .icon{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--purple);display:flex;align-items:center;justify-content:center;margin-top:1px;}
  .callout.green .icon{background:var(--green);}
  .callout .icon svg{width:15px;height:15px;stroke:#fff;fill:none;}
  .callout h3{font-size:14px;color:var(--purple);letter-spacing:.02em;text-transform:uppercase;margin-bottom:6px;}
  .callout.green h3{color:var(--green);}
  .callout p{margin:0;font-size:14px;color:var(--ink-soft);line-height:1.6;}

  /* recap (matches offer's .recap) */
  .recap{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  @media (max-width:760px){ .recap{grid-template-columns:1fr;} }
  .recap-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:22px 18px;text-align:center;box-shadow:var(--shadow);}
  .recap-item .ricon{width:42px;height:42px;border-radius:50%;background:var(--purple-tint);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;}
  .recap-item .ricon svg{width:19px;height:19px;stroke:var(--purple);}
  .recap-item .rnum{display:block;font-size:17px;font-weight:800;color:var(--purple);margin-bottom:4px;}
  .recap-item .rlabel{font-size:12.5px;color:var(--ink-soft);line-height:1.5;}

  /* portfolio */
  .folio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
  @media (max-width:820px){ .folio-grid{grid-template-columns:repeat(2,1fr);} }
  /* sub 440px două coloane sunt prea înguste: textul din casetă ieșea în afara ecranului */
  @media (max-width:440px){ .folio-grid{grid-template-columns:1fr;} }
  .folio-slot{overflow-wrap:anywhere;aspect-ratio:16/9;border:1.5px dashed var(--line);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;color:var(--ink-faint);font-size:12px;text-align:center;padding:10px;background:var(--surface-2);}
  .folio-slot strong{color:var(--purple);font-size:13px;font-weight:700;}
  .folio-note{margin-top:20px;font-size:13.5px;color:var(--ink-faint);}

  /* contact (matches offer's .contact-card exactly) */
  .contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;}
  @media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
  .contact-card{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--purple-tint);border-left:5px solid var(--green-bright);border-radius:12px;padding:24px 28px;margin-top:26px;flex-wrap:wrap;}
  .contact-card .who{display:flex;align-items:center;gap:12px;}
  .contact-card .icon-circle{width:36px;height:36px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;flex:none;}
  .contact-card .icon-circle svg{width:16px;height:16px;stroke:#fff;fill:none;}
  .contact-card .name{color:var(--purple);font-size:18px;font-weight:800;margin:0 0 2px;}
  .contact-card .role{color:var(--ink);font-weight:600;font-size:13px;margin:0;}
  .contact-card .cta-label{font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;text-align:right;margin:0 0 4px;}
  .contact-card .phone{color:var(--green);font-size:21px;font-weight:800;text-align:right;margin:0;text-decoration:none;display:block;}
  .contact-list{display:flex;flex-direction:column;gap:20px;margin-top:22px;}
  .contact-item{display:flex;gap:14px;align-items:flex-start;}
  .contact-item .ic{width:36px;height:36px;border-radius:9px;background:var(--purple-tint);display:flex;align-items:center;justify-content:center;flex:none;}
  .contact-item .ic svg{width:17px;height:17px;stroke:var(--purple);}
  .contact-item strong{display:block;font-size:14px;}
  .contact-item a, .contact-item span.val{color:var(--ink-soft);font-size:14px;text-decoration:none;}
  .contact-item a:hover{color:var(--purple);}
  .map-btn{margin-top:5px;font-size:12.5px;font-weight:700;color:var(--purple);text-decoration:none;display:inline-flex;align-items:center;gap:6px;}

  form.card{padding:28px;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  @media (max-width:520px){ .form-row{grid-template-columns:1fr;} }
  form.card label{display:block;font-size:12.5px;font-weight:700;margin:15px 0 6px;}
  form.card label:first-of-type{margin-top:0;}
  form.card input, form.card textarea{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:10px 12px;font-family:inherit;font-size:14px;}
  form.card input:focus, form.card textarea:focus{outline:2px solid var(--purple);outline-offset:1px;}
  form.card textarea{resize:vertical;min-height:96px;}
  form.card .btn{width:100%;margin-top:18px;padding:13px;font-size:15px;}
  .req{color:var(--green);}

  footer{border-top:1px solid var(--line);padding:36px 0 28px;}
  .foot-grid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;}
  .foot-copy{color:var(--ink-faint);font-size:12.5px;}
  .foot-links{display:flex;gap:20px;font-size:13px;font-weight:600;flex-wrap:wrap;}
  .foot-links a{text-decoration:none;color:var(--ink-soft);}
  .draft-note{background:var(--purple);color:#fff;font-size:12px;text-align:center;padding:9px;letter-spacing:.02em;font-weight:600;}

  /* --- Intro: logo HPC care se construiește --- */
  #intro{
    position:fixed;inset:0;z-index:999;background:#ffffff;
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    transition:opacity .45s ease;
  }
  #intro.hide{opacity:0;pointer-events:none;}
  #intro .logo-build{
    position:relative;
    width:min(80vw, 520px);
    aspect-ratio:200/66;
    /* umbră fină sub siglă — dă adâncime și un aer mai „scump" pe fundalul alb */
    filter:drop-shadow(0 10px 22px rgba(74,58,143,.11));
  }
  #intro .logo-build svg{
    position:absolute;display:block;overflow:visible;
  }
  /* reflexul de lumină care trece peste siglă după ce se asamblează.
     E o simplă bandă albă în mod „screen": pe fundal alb nu se vede deloc,
     iar pe verde/galben/mov luminează — deci nu dublează conturul siglei. */
  #intro .logo-sheen{
    position:absolute;inset:-6% -4%;opacity:0;pointer-events:none;mix-blend-mode:screen;
    background:linear-gradient(103deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.82) 50%,rgba(255,255,255,0) 58%);
    background-size:300% 100%;background-repeat:no-repeat;background-position:-160% 0;
  }
  @keyframes logo-sheen{
    0%{opacity:0;background-position:-160% 0;}
    18%{opacity:1;} 82%{opacity:1;}
    100%{opacity:0;background-position:170% 0;}
  }
  #intro:not(.reduced) .logo-sheen{animation:logo-sheen 1.3s ease-in-out 2.18s 1;}
  /* a doua trecere de lumină, mai lentă și mai lată, în secunda de dinaintea ieșirii */
  #intro .logo-sheen.slow{
    background:linear-gradient(103deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 64%);
  }
  #intro:not(.reduced) .logo-sheen.slow{animation:logo-sheen 1.15s ease-in-out 3.25s 1;}

  /* „blinc-blinc": scântei scurte pe literele siglei, cât timp sigla stă întreagă pe ecran */
  #intro .glint{
    position:absolute;width:7%;aspect-ratio:1;opacity:0;pointer-events:none;
    transform:translate(-50%,-50%) scale(.15) rotate(-25deg);
  }
  #intro .glint svg{width:100%;height:100%;display:block;
    filter:drop-shadow(0 0 5px rgba(255,255,255,.95)) drop-shadow(0 0 12px rgba(255,255,255,.6));}
  @keyframes glint{
    0%  {opacity:0;transform:translate(-50%,-50%) scale(.12) rotate(-28deg);}
    42% {opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(8deg);}
    100%{opacity:0;transform:translate(-50%,-50%) scale(.22) rotate(34deg);}
  }
  #intro:not(.reduced) .glint{animation:glint .58s ease-out 1 forwards;}
  #intro .g1{left:21%;  top:17%;}
  #intro .g2{left:72.5%;top:13%; width:8.5%;}
  #intro .g3{left:40.5%;top:11%; width:6%;}
  #intro .g4{left:5%;   top:73%; width:6%;}
  /* întârzierile stau în reguli la fel de „tari" ca cea cu animația, altfel le-ar anula */
  #intro:not(.reduced) .g1{animation-delay:3.20s;}
  #intro:not(.reduced) .g2{animation-delay:3.36s;}
  #intro:not(.reduced) .g3{animation-delay:3.52s;}
  #intro:not(.reduced) .g4{animation-delay:3.68s;}
  #intro .logo-build .pc-h{left:0%;top:0%;width:25.5%;height:100%;}
  #intro .logo-build .pc-yellow{left:18%;top:0%;width:7.5%;height:43.94%;}
  #intro .logo-build .pc-p{left:29.5%;top:0%;width:27%;height:100%;}
  #intro .logo-build .pc-c{left:59%;top:0%;width:22%;height:100%;}
  #intro .logo-build .pc-word{left:72%;top:31.82%;width:28%;height:37.88%;}

  @keyframes pc-rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
  @keyframes pc-pop{0%{opacity:0;transform:scale(.3) translateY(6px);}70%{opacity:1;transform:scale(1.12) translateY(0);}100%{opacity:1;transform:scale(1) translateY(0);}}
  @keyframes pc-slide-l{from{opacity:0;transform:translateX(-16px);}to{opacity:1;transform:translateX(0);}}
  @keyframes logo-pulse{0%{transform:scale(1);}55%{transform:scale(1.08);}100%{transform:scale(1);}}

  #intro:not(.reduced) .pc-h{opacity:0;animation:pc-rise .42s ease-out .75s forwards;}
  #intro:not(.reduced) .pc-yellow{opacity:0;animation:pc-pop .4s ease-out 1.1s forwards;}
  #intro:not(.reduced) .pc-p{opacity:0;animation:pc-rise .42s ease-out 1.25s forwards;}
  #intro:not(.reduced) .pc-c{opacity:0;animation:pc-rise .42s ease-out 1.42s forwards;}
  #intro:not(.reduced) .pc-word{opacity:0;animation:pc-slide-l .48s ease-out 1.7s forwards;}
  #intro:not(.reduced) .logo-build{animation:logo-pulse .5s ease-in-out 2.18s 2;}
  #intro.reduced .logo-build svg{opacity:1;}

  @media (prefers-reduced-motion: reduce){
    #intro .pc-h,#intro .pc-yellow,#intro .pc-p,#intro .pc-c,#intro .pc-word,#intro .logo-build{animation:none !important;opacity:1 !important;transform:none !important;}
    #intro .glint,#intro .logo-sheen{display:none !important;}
  }

/* ═══════════ catalog: pagina categoriei și pagina de produs ═══════════ */
/* regulile de mai jos ar strica pagina principală (intro-ul, sloganul animat, mărimea siglei),
   de aceea sunt legate de clasa .catalog, pe care o are doar <body> pe paginile de catalog */
body.catalog #intro,body.catalog #slogan-row{display:none !important;}
body.catalog .rv{opacity:1 !important;transform:none !important;}
body.catalog main .gr,body.catalog main .bloc{padding:0;}
body.catalog .logo-chip .logo-mark{height:44px;width:auto;}

.fir{font-size:13px;color:var(--ink-faint);padding:22px 0 0;}
.fir a{text-decoration:none;color:var(--ink-soft);}
.fir a:hover{color:var(--purple);}
.fir span{margin:0 7px;opacity:.5;}

/* ── pagina categoriei ── */
.cap-cat{padding:26px 0 34px;max-width:62ch;}
.cap-cat h1{font-size:clamp(31px,4.4vw,46px);line-height:1.08;margin:8px 0 14px;letter-spacing:-.015em;}
.cap-cat p{font-size:17px;line-height:1.7;color:var(--ink-soft);margin:0;}
.etape{position:sticky;top:76px;z-index:30;background:rgba(255,255,255,.94);
       backdrop-filter:blur(8px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
       margin-bottom:46px;}
.etape .in{display:flex;gap:6px;overflow-x:auto;padding:10px 0;scrollbar-width:none;}
.etape .in::-webkit-scrollbar{display:none;}
.etape a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;text-decoration:none;
         font-size:13.5px;font-weight:600;color:var(--ink-soft);padding:8px 14px;border-radius:999px;
         border:1.5px solid transparent;transition:background .15s ease,color .15s ease;}
.etape a:hover{background:var(--purple-tint);color:var(--purple);}
.etape a b{font-size:11.5px;font-weight:800;color:var(--ink-faint);background:var(--surface-2);
           border-radius:999px;padding:1px 7px;}
.etape a:hover b{background:#fff;color:var(--purple);}
.gr{margin-bottom:58px;scroll-margin-top:150px;}
.gr-cap{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:22px;
        padding-bottom:14px;border-bottom:2px solid var(--line);}
.gr-cap h2{font-size:22px;margin:0;letter-spacing:-.01em;}
.gr-cap p{margin:0;flex:1;min-width:220px;font-size:14px;color:var(--ink-soft);}
.gr-cap .nr{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--green);}
.pc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:18px;}
.pc{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;
    border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
    transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;}
.pc:hover{border-color:var(--purple-light);transform:translateY(-2px);box-shadow:var(--shadow);}
.pc-foto{display:flex;align-items:center;justify-content:center;background:var(--surface-2);
         aspect-ratio:1/1;padding:16px;}
.pc-foto img{width:100%;height:100%;object-fit:contain;}
.pc-foto .fara{font-size:12px;color:var(--ink-faint);text-align:center;line-height:1.5;}
.pc-txt{display:flex;flex-direction:column;gap:5px;padding:15px 16px 16px;flex:1;}
.pc-txt b{font-size:16px;letter-spacing:-.005em;}
.pc-txt em{font-style:normal;font-size:13px;line-height:1.45;color:var(--ink-soft);flex:1;}
.pc-jos{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px;
        padding-top:11px;border-top:1px solid var(--line);}
.pc-jos .mar{font-size:12.5px;font-weight:600;color:var(--purple);}
.pc-jos .pin{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;
             text-transform:uppercase;color:var(--green);background:var(--green-tint);
             border-radius:999px;padding:3px 8px;margin-left:auto;}

/* ── bannerul de sus și banda „cum lucrăm" de la mijlocul catalogului ── */
.banner{margin:0 0 20px;border-radius:var(--radius-lg);overflow:hidden;}
.banner img{display:block;width:100%;height:auto;aspect-ratio:3.03/1;object-fit:cover;}
.banner-nota{margin:0 0 46px;font-size:13px;color:var(--ink-faint);}
@media (max-width:760px){
  /* pe telefon o bandă de 3:1 e o dungă: o fac mai înaltă și țin panoul HPC în cadru */
  .banner img{aspect-ratio:16/9;object-position:26% center;}
}

.program{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:40px;align-items:center;
         margin:0 0 58px;padding:40px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.program img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
             border-radius:var(--radius-lg);}
.program h2{font-size:clamp(21px,2.7vw,28px);line-height:1.2;margin:8px 0 14px;letter-spacing:-.012em;}
.program p{font-size:16px;line-height:1.72;color:var(--ink-soft);margin:0 0 24px;max-width:52ch;}
.program .btn{margin-top:0;}
@media (max-width:820px){
  .program{grid-template-columns:minmax(0,1fr);gap:26px;padding:32px 0;}
  /* butonul are text lung: pe ecran îngust îl las să se rupă, ca să nu împingă pagina */
  .program .btn{white-space:normal;text-align:center;}
}

/* ── pagina de produs ── */
.pv{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:56px;align-items:start;padding:26px 0 60px;}
.pv-scena{position:relative;background:var(--surface-2);border:1px solid var(--line);
          border-radius:var(--radius-lg);aspect-ratio:1/1;overflow:hidden;}
.pv-big{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:34px;
        opacity:0;transition:opacity .22s ease;}
.pv-big.is-on{opacity:1;}
.pv-scena .fara{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
                color:var(--ink-faint);font-size:15px;text-align:center;}
.pv-foto{min-width:0;}
.pv-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
/* min-width:0 şi flex-wrap: altfel patru miniaturi împing pagina în afara ecranului la 320px */
.pv-thumb{flex:1 1 58px;min-width:0;background:#fff;border:1.5px solid var(--line);border-radius:10px;
          padding:6px;cursor:pointer;transition:border-color .15s ease;}
.pv-thumb img{width:100%;height:auto;object-fit:contain;}
.pv-thumb.is-on{border-color:var(--purple);}
.pv-thumb:hover{border-color:var(--purple-light);}
.pv h1{font-size:clamp(30px,4vw,42px);line-height:1.1;margin:8px 0 0;letter-spacing:-.01em;}
.pv-tip{font-size:15px;color:var(--ink-soft);margin:2px 0 18px;}
.pv-desc{font-size:16.5px;line-height:1.7;color:var(--ink);max-width:56ch;margin:0 0 24px;}
.pv-insigne{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 26px;padding:0;}
.pv-insigne li{display:inline-flex;align-items:center;gap:7px;list-style:none;background:var(--purple-tint);
               color:var(--purple);border-radius:999px;padding:7px 14px 7px 11px;font-size:13.5px;font-weight:600;}
.pv-insigne svg{width:17px;height:17px;flex:none;}
.pv-actiuni{display:flex;flex-wrap:wrap;gap:12px;}
.pv-actiuni .btn{margin-top:0;}

.fapte{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:1px;background:var(--line);
       border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin:0 0 56px;}
.fapte div{background:#fff;padding:20px 22px;}
.fapte dt{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
          color:var(--ink-faint);margin:0 0 6px;}
.fapte dd{margin:0;font-size:21px;font-weight:700;color:var(--purple);line-height:1.25;}
.fapte dd small{font-size:13px;font-weight:500;color:var(--ink-soft);display:block;margin-top:2px;}

/* min(330px,100%): altfel coloana cere 330px şi pe un ecran de 320px împinge pagina în lături */
.doua{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:44px;margin-bottom:56px;}
.bloc h2{font-size:19px;margin:0 0 18px;letter-spacing:-.005em;}
.util{display:grid;gap:12px;margin:0;padding:0;}
.util li{display:flex;align-items:center;gap:12px;list-style:none;font-size:15px;}
.util svg{width:22px;height:22px;color:var(--purple);flex:none;}

.scari{display:flex;gap:18px;margin-top:4px;}
.sc{width:112px;height:248px;flex:none;}
.tk{font-size:7px;fill:var(--ink-faint);}
.cv{font-size:7.4px;fill:var(--ink-soft);}
.ttl{font-size:9px;font-weight:800;fill:var(--purple);letter-spacing:.04em;}
.um{font-size:6.8px;fill:var(--ink-faint);font-weight:400;}
.vl{font-size:11px;font-weight:800;fill:var(--ink);}

.doz{width:100%;border-collapse:collapse;font-size:15px;}
.doz th{text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
        color:var(--ink-faint);font-weight:800;padding:0 0 9px;}
.doz td{padding:11px 0;border-top:1px solid var(--line);}
.doz td:last-child{text-align:right;font-weight:700;color:var(--purple);white-space:nowrap;}

.rand{background:var(--green-tint);border:1px solid #e2eed3;border-radius:var(--radius-lg);padding:24px 26px;}
.rand p{margin:0 0 14px;font-size:14px;color:var(--ink-soft);}
.rand b{display:block;font-size:25px;color:var(--purple);line-height:1.2;}
.rand .r{display:flex;gap:20px;flex-wrap:wrap;}
/* 150px minim × 2 + spațiu = 326px, adică mai mult decât are un telefon de 320px */
.rand .r > div{flex:1 1 140px;min-width:0;}
.rand span{font-size:13px;color:var(--ink-soft);}
.rand .nota{display:block;margin-top:14px;font-size:12.5px;color:var(--ink-faint);}

.amb{width:100%;border-collapse:collapse;font-size:15px;}
.amb th{text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
        color:var(--ink-faint);font-weight:800;padding:0 14px 10px 0;border-bottom:1.5px solid var(--line);}
.amb td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line);}
.amb .num{color:var(--ink-soft);}
.amb tr:last-child td{border-bottom:none;}

.leg{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;}
.leg a{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid var(--line);
       border-radius:var(--radius-md);padding:13px 18px;font-weight:600;font-size:15px;
       transition:border-color .15s ease,transform .15s ease;}
.leg a:hover{border-color:var(--purple-light);transform:translateY(-1px);}
.leg em{font-style:normal;font-size:12.5px;color:var(--ink-faint);font-weight:500;}

.cerere{background:var(--purple);color:#fff;border-radius:var(--radius-lg);padding:40px 44px;
        display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:70px;}
.cerere h2{margin:0 0 6px;font-size:23px;color:#fff;}
.cerere p{margin:0;color:#ddd7f3;font-size:15px;max-width:48ch;}
.cerere .btn{background:var(--green-bright);color:#173300;margin-top:0;}

@media (max-width:900px){
  .pv{grid-template-columns:minmax(0,1fr);gap:32px;}
  .fapte{grid-template-columns:repeat(2,minmax(0,1fr));}
  .etape{top:64px;} .cerere{padding:32px 26px;}
}
@media (max-width:560px){
  .fapte{grid-template-columns:1fr;} .doua{gap:34px;}
  /* pe ecrane înguste butonul lung îşi rupe textul în loc să împingă pagina */
  .pv-actiuni .btn{white-space:normal;text-align:center;}
  .amb th:nth-child(2),.amb td:nth-child(2){display:none;}
  .pc-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
  .pc-txt{padding:12px 13px 13px;} .pc-txt b{font-size:14.5px;} .pc-txt em{font-size:12px;}
  .gr{margin-bottom:44px;}
}

/* ——— banda interactivă din deschidere ——— */

body{-webkit-font-smoothing:auto;}
#hpc-config{-webkit-font-smoothing:antialiased;}
.hero{padding:56px 0 24px;}
.hero-grid{grid-template-columns:minmax(0,1fr);gap:0;}
.hero-grid>div:first-child{max-width:none;}
.hero h1{max-width:24ch;font-size:clamp(32px,4.6vw,54px);margin:14px 0 22px;}
.hero .lede-block{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
                  gap:0 46px;max-width:1010px;}
.hero .lede-block .lede{margin:0;max-width:48ch;color:#55556a;
                        font-size:17px;line-height:1.72;}
.hero .lede-block .lede-q,.hero .lede-block .lede-cta{grid-column:1/-1;max-width:none;}
.hero .lede-block .lede-q{margin-top:22px;font-size:18px;}
.hero .lede-block .lede-cta{margin-top:6px;font-size:17px;}
.hero-actions{margin-top:26px;}
.badges{margin-top:24px;}
@media (max-width:900px){
  .hero .lede-block{grid-template-columns:minmax(0,1fr);}
  .hero .lede-block .lede{margin:0 0 15px;max-width:62ch;}
  .hero .lede-block .lede-q{margin-top:6px;}
  .hero h1{max-width:none;}
}

form.card label.c-acord{display:flex;gap:10px;align-items:flex-start;margin:16px 0 2px;
         font-size:12.5px;font-weight:500;color:var(--ink-soft);line-height:1.55;cursor:pointer;}
form.card .c-acord input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--green);}
.c-acord a{color:var(--purple);}
.c-raspuns{display:none;margin:10px 0 0;font-size:13.5px;font-weight:600;color:#3f7a13;}
.c-raspuns.on{display:block;}
.c-raspuns.rau{color:#b3261e;}
.c-raspuns a{color:inherit;}
form.card .btn[disabled]{opacity:.62;cursor:default;}
/* butonul „Cere ofertă pentru acest produs" duce la #c-form: formularul să nu stea sub antetul fix */
#c-form{scroll-margin-top:112px;}

/* nicio bară de derulare orizontală, nici pentru o clipă (vezi integreaza.py) */
body{overflow-x:clip;}
/* banda lată cât ecranul intră fără „revenire": crescută o clipă peste 100%, ieșea din ecran */
#bara-jos.rv{transition-timing-function:cubic-bezier(.22,1,.36,1);}

#hpc-config{
  --purple:#4a3a8f; --purple-light:#6a56b8; --purple-tint:#f3f1fa; --purple-line:#e2ddf3;
  --adanc:#241d47; --adanc-2:#1a1436;
  --green:#6fa832; --green-bright:#8cc63f; --green-tint:#f5f9ef; --green-line:#e2eed3;
  --ink:#2b2b3a; --ink-soft:#6f6f80; --ink-faint:#9a9aa8; --line:#ece9f7; --surface-2:#f6f4fb;
}
#hpc-config{padding:0;}
#hpc-config section{padding:0;}
#hpc-config h1,#hpc-config h2,#hpc-config h3{color:inherit;}
#hpc-config .hx-wrap{max-width:1280px;margin:0 auto;padding:0 28px;}
#hpc-config .nota{background:var(--purple);color:#fff;text-align:center;padding:10px 16px;font-size:13px;font-weight:600;}
#hpc-config .sus{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;flex-wrap:wrap;}
#hpc-config .sus img{height:44px;width:auto;}
#hpc-config .sus span{font-size:12.5px;color:var(--ink-faint);}
#hpc-config /* ——————— banda ——————— */
.banda{background:linear-gradient(160deg,var(--adanc) 0%,var(--adanc-2) 100%);color:#fff;
        position:relative;overflow:hidden;}
#hpc-config .banda::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 14% 0%,rgba(140,198,63,.13),transparent 62%),
             radial-gradient(60% 50% at 96% 100%,rgba(106,86,184,.30),transparent 60%);}
#hpc-config .banda-in{position:relative;max-width:1280px;margin:0 auto;padding:0 28px;}
#hpc-config .stanga{padding:40px 0 26px;text-align:center;}
#hpc-config .marca{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green-bright);margin-bottom:12px;}
#hpc-config .marca b{width:22px;height:2px;background:var(--green-bright);display:block;}
#hpc-config .rail{display:flex;align-items:center;gap:7px;margin-bottom:20px;}
#hpc-config .rail i{height:3px;flex:1;border-radius:2px;background:rgba(255,255,255,.16);
        transition:background .4s,transform .4s;transform-origin:left;}
#hpc-config .rail i.on{background:var(--green-bright);}
#hpc-config .rail span{margin-left:12px;font-size:11px;font-weight:800;letter-spacing:.1em;
  color:rgba(255,255,255,.5);white-space:nowrap;}
#hpc-config .intreb{font-size:clamp(27px,3.3vw,40px);font-weight:800;line-height:1.08;margin:0 0 11px;
  letter-spacing:-.025em;}
#hpc-config .de-ce{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.62);margin:0 0 22px;max-width:52ch;}
#hpc-config .opts{display:flex;flex-direction:column;gap:9px;max-width:560px;}
#hpc-config .opt{position:relative;font:inherit;font-size:16px;font-weight:600;text-align:left;color:#fff;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:13px;
  padding:16px 52px 16px 20px;cursor:pointer;line-height:1.3;
  transition:background .18s,border-color .18s,transform .18s,padding-left .18s;}
#hpc-config .opt::after{content:'';position:absolute;right:20px;top:50%;width:9px;height:9px;
  border-right:2px solid rgba(255,255,255,.45);border-bottom:2px solid rgba(255,255,255,.45);
  transform:translateY(-50%) rotate(-45deg);transition:.18s;}
#hpc-config .opt:hover,
#hpc-config .opt:focus-visible{background:rgba(140,198,63,.16);border-color:var(--green-bright);
  transform:translateX(4px);outline:none;}
#hpc-config .opt:hover::after,
#hpc-config .opt:focus-visible::after{border-color:var(--green-bright);right:16px;}
#hpc-config .inapoi{background:none;border:0;font:inherit;font-size:13px;color:rgba(255,255,255,.45);
  cursor:pointer;padding:0;text-decoration:underline;margin-top:22px;}
#hpc-config .inapoi:hover{color:#fff;}
#hpc-config .inapoi[hidden]{display:none;}
#hpc-config .inapoi{margin-top:16px;}
#hpc-config #recap[hidden],
#hpc-config #joc[hidden]{display:none;}
#hpc-config .recap-l{list-style:none;margin:0 auto;padding:0;max-width:620px;text-align:left;}
#hpc-config .recap-l li{display:flex;gap:16px;align-items:baseline;padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.1);font-size:15.5px;}
#hpc-config .recap-l li:last-child{border-bottom:0;}
#hpc-config .recap-l em{flex:none;width:46%;font-style:normal;font-size:13px;color:rgba(255,255,255,.45);
  line-height:1.35;}
#hpc-config .recap-l b{font-weight:700;color:var(--green-bright);}
#hpc-config /* ——————— prima întrebare,
#hpc-config pe toată lățimea ——————— */
.marca{justify-content:center;}
#hpc-config .rail{max-width:440px;margin-left:auto;margin-right:auto;}
#hpc-config .intreb{max-width:24ch;margin-left:auto;margin-right:auto;}
#hpc-config .de-ce{margin-left:auto;margin-right:auto;margin-bottom:24px;}
#hpc-config .opts{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:17px;max-width:none;}
#hpc-config .inapoi:not([hidden]){display:block;margin-left:auto;margin-right:auto;}
#hpc-config .opt.placa{flex:0 1 calc((100% - (var(--n,4) - 1) * 17px) / var(--n,4));
  max-width:318px;min-width:210px;padding:0;overflow:hidden;border-radius:17px;
  background:rgba(255,255,255,.055);}
#hpc-config .placa-foto.gol{background:linear-gradient(150deg,#4a3a8f 0%,#2e2559 100%);}
#hpc-config .opt.placa::after{display:none;}
#hpc-config .placa-foto{display:block;aspect-ratio:16/9;overflow:hidden;background:#15102c;}
#hpc-config .placa-foto img{display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) brightness(.86) contrast(1.04);
  transition:filter .35s ease,transform .45s ease;}
#hpc-config .placa-txt{display:block;padding:15px 14px 16px;font-size:15.5px;font-weight:700;
  text-align:center;line-height:1.25;}
#hpc-config .opt.placa:hover,
#hpc-config .opt.placa:focus-visible{transform:translateY(-5px);border-color:var(--green-bright);
  background:rgba(140,198,63,.13);}
#hpc-config .opt.placa:hover .placa-foto img,
#hpc-config .opt.placa:focus-visible .placa-foto img{
  filter:none;transform:scale(1.06);}
#hpc-config /* ——————— afișul ——————— */
.dreapta{padding:0 0 48px;display:none;}
#hpc-config .banda.cu-afis .dreapta{display:block;}
#hpc-config .afis{position:relative;border-radius:22px;overflow:hidden;min-height:262px;display:flex;
  flex-direction:column;justify-content:center;
  background:linear-gradient(155deg,var(--c1,#3b3468) 0%,var(--c2,#241d47) 100%);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.65);transition:background .6s ease;}
#hpc-config .afis-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;
  mix-blend-mode:luminosity;}
#hpc-config .afis-foto[hidden]{display:none;}
#hpc-config .afis-vel{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(20,15,45,.92) 0%,rgba(20,15,45,.62) 48%,rgba(20,15,45,.12) 86%),
             linear-gradient(to top,rgba(20,15,45,.5) 0%,transparent 60%);}
#hpc-config .afis-prod{position:absolute;right:-2%;top:50%;transform:translateY(-50%);height:104%;width:auto;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.5));}
#hpc-config .afis-txt{position:relative;padding:30px 36px 32px;max-width:60%;text-align:left;}
#hpc-config .afis-sus{font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--green-bright);margin:0 0 10px;}
#hpc-config .afis-mare{font-size:clamp(30px,3.8vw,46px);font-weight:900;line-height:1.0;margin:0 0 10px;
  letter-spacing:-.035em;}
#hpc-config .afis-mare i{font-style:normal;font-weight:700;opacity:.45;font-size:.52em;letter-spacing:-.02em;}
#hpc-config .afis-mic{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.88);margin:0;max-width:44ch;}
#hpc-config .afis-gol{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;text-align:center;padding:40px;color:rgba(255,255,255,.5);}
#hpc-config .afis-gol[hidden]{display:none;}
#hpc-config .afis-gol b{font-size:19px;color:#fff;font-weight:700;}
#hpc-config .afis-gol span{font-size:14.5px;max-width:30ch;line-height:1.55;}

@keyframes afis-in{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}#hpc-config .afis-txt.nou{animation:afis-in .5s cubic-bezier(.2,.8,.3,1) both;}

@keyframes prod-in{from{opacity:0;transform:translateY(-38%) translateX(26px) rotate(3deg);}
                    to{opacity:1;transform:translateY(-50%);}}#hpc-config .afis-prod.nou{animation:prod-in .62s cubic-bezier(.2,.8,.3,1) both;}
#hpc-config /* ——————— rezultatul ——————— */
.rez{display:none;background:#fff;padding:56px 0 64px;}
#hpc-config .rez.on{display:block;}
#hpc-config .rez h2{font-size:clamp(26px,3.2vw,38px);line-height:1.13;margin:0 0 10px;letter-spacing:-.025em;
  max-width:22ch;}
#hpc-config .rez h2 b{color:var(--purple);}
#hpc-config .rez-sub{font-size:16px;color:var(--ink-soft);margin:0 0 30px;max-width:66ch;}
#hpc-config .harta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:12px;
  margin-bottom:16px;}
#hpc-config .dom{border-left:5px solid var(--c);background:var(--surface-2);border-radius:10px;padding:15px 18px;}
#hpc-config .dom b{display:block;font-size:15.5px;line-height:1.25;margin-bottom:3px;}
#hpc-config .dom span{font-size:13.5px;line-height:1.5;color:var(--ink-soft);}
#hpc-config .restul{font-size:12.5px;color:var(--ink-faint);margin:0 0 34px;}
#hpc-config .restul b{color:var(--ink-soft);font-weight:600;}
#hpc-config .pasii{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px;
  margin-bottom:38px;}
#hpc-config .pas{border:1px solid var(--line);border-radius:14px;padding:18px 20px;}
#hpc-config .pas:first-child{border-color:var(--green-line);background:var(--green-tint);}
#hpc-config .pas h3{margin:0 0 6px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--purple);}
#hpc-config .pas:first-child h3{color:#5c8a1f;}
#hpc-config .pas b{display:block;font-size:18px;line-height:1.2;margin-bottom:6px;letter-spacing:-.015em;}
#hpc-config .pas p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-soft);}
#hpc-config .hx-cerere{background:linear-gradient(160deg,var(--adanc) 0%,var(--adanc-2) 100%);color:#fff;
  border-radius:20px;padding:38px 40px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:40px;align-items:center;}
#hpc-config .hx-cerere h3{margin:0 0 8px;font-size:clamp(21px,2.4vw,28px);letter-spacing:-.02em;line-height:1.16;}
#hpc-config .cerere>div>p{margin:0;font-size:15px;line-height:1.65;color:rgba(255,255,255,.7);max-width:46ch;}
#hpc-config .campuri{display:flex;gap:10px;flex-wrap:wrap;}
#hpc-config .campuri input{flex:1;min-width:150px;font:inherit;font-size:15px;padding:13px 16px;border-radius:11px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;}
#hpc-config .campuri input::placeholder{color:rgba(255,255,255,.45);}
#hpc-config .campuri input:focus{outline:none;border-color:var(--green-bright);background:rgba(255,255,255,.13);}
#hpc-config .acord{display:flex;gap:10px;align-items:flex-start;margin:14px 0 4px;font-size:12.5px;
  color:rgba(255,255,255,.62);line-height:1.5;cursor:pointer;}
#hpc-config .acord input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--green-bright);}
#hpc-config .eroare{margin:0 0 10px;font-size:13px;font-weight:600;color:#ff9c93;display:none;}
#hpc-config .eroare a{color:#fff;}
#hpc-config .btn[disabled]{opacity:.62;cursor:default;}
#hpc-config .eroare.on{display:block;}
#hpc-config .hx-btn{width:100%;background:var(--green-bright);color:#1a1436;border:0;border-radius:11px;
  padding:15px 24px;font:inherit;font-weight:800;font-size:16px;cursor:pointer;margin-top:10px;
  letter-spacing:-.01em;}
#hpc-config .hx-btn:hover{background:#9ad64c;}
#hpc-config .gata{display:none;}
#hpc-config .gata.on{display:block;}
#hpc-config .gata h3{margin-bottom:8px;}
#hpc-config .reia{display:block;margin:24px auto 0;background:none;border:0;font:inherit;font-size:13px;
  color:var(--ink-faint);text-decoration:underline;cursor:pointer;}
#hpc-config .reia:hover{color:var(--purple);}
#hpc-config .subsol{border-top:1px solid var(--line);padding:26px 0 52px;font-size:13.5px;color:var(--ink-soft);}
#hpc-config .subsol b{color:var(--ink);}
#hpc-config .subsol ul{margin:8px 0 0;padding-left:20px;}
#hpc-config .subsol li{margin-bottom:6px;}
#hpc-config .subsol code{font-size:11.5px;color:var(--ink-faint);word-break:break-word;}


@media (max-width:980px){#hpc-config .banda-in{grid-template-columns:minmax(0,1fr);gap:0;min-height:0;}
#hpc-config .opt.placa{flex:0 1 calc(33.333% - 12px);min-width:190px;}
#hpc-config .stanga{padding:36px 0 26px;}
#hpc-config .afis-txt{max-width:72%;}
#hpc-config .afis-prod{right:-2%;height:118%;}
#hpc-config .dreapta{padding:0 0 30px;order:-1;}
#hpc-config .stanga{padding:10px 0 48px;}
#hpc-config .afis{min-height:330px;}
#hpc-config .hx-cerere{grid-template-columns:minmax(0,1fr);gap:24px;padding:30px 26px;}

}
@media (max-width:540px){#hpc-config .hx-wrap,
#hpc-config .banda-in{padding:0 17px;}
#hpc-config .opt.placa{flex:0 1 calc(50% - 6px);min-width:0;}
#hpc-config .opts{gap:11px;}
#hpc-config .afis-txt{max-width:100%;padding:22px 20px 24px;}
#hpc-config .afis-prod{opacity:.20;right:-20%;height:96%;}
#hpc-config .afis{min-height:0;}
#hpc-config .placa-txt{padding:11px 8px 12px;font-size:13px;}
#hpc-config .afis{min-height:290px;border-radius:17px;}
#hpc-config .afis-txt{padding:24px 22px;max-width:100%;}
#hpc-config .afis-prod{height:58%;right:-10%;opacity:.9;}
#hpc-config .opt{font-size:15px;padding:14px 44px 14px 17px;}
#hpc-config .hx-cerere{padding:26px 20px;}
#hpc-config .rez{padding:40px 0 48px;}

}