/* ============================================================
   Perpetuo — stil comun pentru paginile interioare
   Header + footer + fundal identice cu homepage.
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem;
  --section:clamp(3.4rem,6.5vw,6rem);
  --gutter:clamp(1.5rem,5vw,2.5rem);
  --t-display:clamp(2.2rem,4.4vw,3.4rem);
  --t-h2:clamp(1.8rem,3.4vw,2.6rem);
  --t-lead:clamp(1.05rem,1.5vw,1.2rem);
  --bg:#06080F; --surface:#0E1222; --surface2:#141A2E; --line:rgba(255,255,255,.09);
  --ink:#EDEFF8; --muted:#9CA4C2; --accent:#54E5D2; --accent2:#8E97FF;
  --grad:linear-gradient(90deg,#2EE6C2,#6A78FF 52%,#8B5CFF);
  --ease-quint:cubic-bezier(.22,1,.36,1);
}
html{scroll-behavior:smooth;}
body{font-family:'Inter',system-ui,sans-serif; color:var(--ink); background-color:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip; touch-action:manipulation;}
.auraflow{position:fixed; inset:-16%; width:132%; height:132%; z-index:-1; pointer-events:none; opacity:.26; filter:blur(88px); transform:translateZ(0); will-change:transform; backface-visibility:hidden;}
.wrap{max-width:1080px; margin-inline:auto; padding-inline:var(--gutter); position:relative;}
h1,h2,h3,.logo,.price-hero{font-family:'Manrope',sans-serif; font-weight:800; letter-spacing:-.02em; line-height:1.08; text-wrap:balance;}
p{text-wrap:pretty;}
a{color:inherit; text-decoration:none;}
.accent{color:var(--accent);}
h1{line-height:1.12;} h2{line-height:1.22;} h3{line-height:1.3;}

.btn{display:inline-flex; align-items:center; justify-content:center; background:var(--grad); color:#04121c; font-weight:700; font-size:.95rem; padding:.95rem 1.7rem; border-radius:999px; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; white-space:nowrap;}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 40px -14px rgba(110,139,255,.6);}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line); font-weight:600; text-shadow:none;}
.btn-ghost:hover{border-color:rgba(255,255,255,.28); box-shadow:none;}
:where(a,button,.btn):focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:999px;}
.btn:active{transform:translateY(0) scale(.985);}

/* ===== HEADER / NAV / MENIU (identic cu homepage) ===== */
header{position:sticky; top:0; z-index:50; transition:background .3s var(--ease-quint);}
header.scrolled{background:linear-gradient(180deg, rgba(8,10,20,.72), rgba(8,10,20,.26) 58%, transparent); box-shadow:none;}
header.scrolled nav{padding-top:var(--s4); padding-bottom:var(--s4);}
@media(max-width:720px){ header.scrolled{background:linear-gradient(180deg, rgba(8,10,20,.97), rgba(8,10,20,.74) 55%, rgba(8,10,20,.2));} }
@media(min-width:721px){ header.scrolled nav{padding-top:1.4rem; padding-bottom:1.4rem;} header.scrolled{background:rgba(6,8,15,.5); backdrop-filter:blur(22px) saturate(1.3); -webkit-backdrop-filter:blur(22px) saturate(1.3);} }
nav{display:flex; align-items:center; justify-content:space-between; padding-top:var(--s8); padding-bottom:var(--s6); position:relative; z-index:60;}
.logo{display:flex; align-items:center; gap:.6rem; font-size:1.35rem; letter-spacing:-.02em; position:relative; z-index:50;}
.logo img{width:250px;height:auto;display:block;transform:translateZ(0);-webkit-transform:translateZ(0);}
.navright{display:none;}
.burger{display:flex; flex-direction:column; justify-content:center; gap:6px; width:54px; height:54px; padding:15px; border-radius:14px; background:var(--grad); border:none; cursor:pointer; margin-left:auto; transition:border-color .2s; touch-action:manipulation; -webkit-tap-highlight-color:transparent; position:relative; z-index:50;}
.burger span{display:block; height:3px; width:100%; background:#04121c; border-radius:3px; transition:transform .3s, opacity .3s; pointer-events:none;}
.burger.open span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

.menu{position:fixed; inset:0; width:100%; min-height:100vh; min-height:100dvh; z-index:40; list-style:none; margin:0; padding:0; display:block; visibility:hidden; opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity .3s var(--ease-quint), transform .34s var(--ease-quint), visibility .3s; overflow-y:auto; border:none; border-radius:0; box-shadow:none;
  background:
    radial-gradient(68% 55% at 6% 2%, rgba(46,230,194,.30), transparent 58%),
    radial-gradient(78% 60% at 100% 16%, rgba(106,120,255,.34), transparent 60%),
    radial-gradient(95% 78% at 94% 104%, rgba(139,92,255,.44), transparent 62%),
    radial-gradient(66% 55% at -6% 104%, rgba(46,230,194,.24), transparent 60%),
    linear-gradient(158deg, #0A1428, #0B0A1E 52%, #130A24);}
.menu.open{visibility:visible; opacity:1; pointer-events:auto; transform:none;}
.menu-inner{width:100%; max-width:1080px; margin-inline:auto; padding-inline:var(--gutter); min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; justify-content:center; padding-top:clamp(6rem,14vh,9rem); padding-bottom:clamp(2.5rem,7vh,4.5rem); gap:clamp(2rem,6vh,3.5rem);}
.m-links{display:flex; flex-direction:column;}
.m-links a{font-family:'Manrope',sans-serif; font-weight:800; letter-spacing:-.03em; color:var(--ink); line-height:1.04; padding:.16em 0; width:max-content; max-width:100%; transition:color .2s, transform .4s var(--ease-quint);}
.m-links a:hover{color:var(--accent); transform:translateX(12px);}
.m-side{display:flex; flex-direction:column; gap:1.1rem;}
.m-tag{font-family:'Manrope',sans-serif; font-weight:700; letter-spacing:-.01em; color:#C6CCE0;}
.m-contact{display:flex; flex-direction:column; gap:.4rem;}
.m-label{font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:600;}
.m-phone{font-family:'Manrope',sans-serif; font-weight:800; letter-spacing:-.01em; color:var(--ink); transition:color .2s;}
.m-phone:hover{color:var(--accent);}
.m-mail{color:var(--muted); transition:color .2s;}
.m-mail:hover{color:var(--ink);}
.m-cta{align-self:flex-start;}
@media(min-width:861px){
  .menu-inner{display:grid; grid-template-columns:1.5fr 1fr; align-items:center; gap:clamp(2.5rem,6vw,6rem);}
  .m-links a{font-size:clamp(2.6rem,5.6vw,4.4rem);}
  .m-side{align-self:center; gap:1.4rem; border-left:1px solid var(--line); padding-left:clamp(2rem,4vw,3.5rem);}
  .m-tag{font-size:clamp(1.3rem,1.7vw,1.7rem); max-width:22ch; line-height:1.3;}
  .m-phone{font-size:clamp(1.7rem,2.3vw,2.3rem);}
  .m-mail{font-size:1.05rem;}
  .m-cta{margin-top:.4rem; font-size:1rem; padding:1.05rem 2rem;}
}
@media(max-width:860px){
  .menu-inner{justify-content:center; padding-top:clamp(5rem,16vw,7rem); padding-bottom:clamp(7rem,20vw,8.5rem); gap:0;}
  .m-links a{font-size:clamp(1.7rem,8vw,2.3rem); padding:.4em 0;}
  .m-side{position:absolute; left:0; right:0; bottom:0; margin:0; padding:0 var(--gutter) clamp(2rem,8vw,3rem); gap:.9rem;}
  .m-tag, .m-label, .m-mail, .m-cta{display:none;}
  .m-phone{align-self:stretch; display:flex; align-items:center; justify-content:center; gap:.5rem; border:1px solid var(--line); border-radius:999px; padding:1.05rem; font-size:1.15rem;}
}
@media (max-width:560px){
  nav{padding-top:var(--s6); padding-bottom:var(--s3);}
  .logo img{width:180px;}
  .burger{width:50px; height:50px; padding:14px; gap:5px; border-radius:13px;}
  .burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
}
@media (max-width:720px){ .auraflow{display:none;} body{background-image:radial-gradient(130% 90% at 12% -5%, rgba(46,230,194,.10), transparent 55%), radial-gradient(120% 85% at 96% 6%, rgba(138,92,255,.10), transparent 52%);} }

/* ===== FOOTER (identic cu homepage) ===== */
footer{border-top:1px solid var(--line); padding-block:var(--s8) var(--s6);}
footer .wrap{display:block;}
footer .f-top{display:grid; grid-template-columns:1.8fr 1fr 1.2fr 1.1fr; gap:var(--s6); padding-bottom:var(--s6); border-bottom:1px solid var(--line); margin-bottom:var(--s5);}
footer .f-brand{max-width:34ch;}
footer .logo{font-size:1.3rem; display:inline-block; margin-bottom:var(--s3);}
footer .f-tag{font-size:.92rem; color:var(--muted); line-height:1.6;}
footer .f-col h3{font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin-bottom:calc(var(--s3) - .5rem); font-weight:700;}
/* Zone atinse cu degetul de cel puțin 44px (30.07.2026, P2 din auditul extern).
   Măsurat înainte pe 375px: linkurile din footer aveau 24px înălțime, iconițele
   sociale 42px. Sub prag, omul apasă și nimerește alături sau deloc.
   Reparat cu PADDING, nu cu margin: padding-ul mărește zona pe care o prinde degetul,
   marginul doar depărtează elementele. Textul rămâne vizual pe loc; ce crește e
   suprafața invizibilă din jurul lui. Marginul scade cu cât crește padding-ul,
   ca distanța totală dintre linkuri să rămână aceeași. */
footer .f-col a{display:block; color:var(--muted); font-size:.92rem; padding:.66rem 0; margin-bottom:0; transition:color .2s;}
footer .f-col a:hover{color:var(--ink);}
footer .f-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--s3); font-size:.82rem; color:var(--muted);}
footer .f-bottom .meta{opacity:.8;}
@media(max-width:760px){ footer .f-top{grid-template-columns:1fr 1fr;} footer .f-brand{grid-column:1/-1;} }
@media(max-width:460px){ footer .f-top{grid-template-columns:1fr;} }

/* ===== TIPAR PAGINĂ DE PACHET ===== */
section.block{padding-block:var(--section); position:relative; z-index:2;}
:is(.block)[id]{scroll-margin-top:2rem;}

/* Antet pachet */
.phero{text-align:center; padding-top:clamp(2.5rem,6vw,4.5rem); padding-bottom:clamp(1.5rem,3vw,2.5rem); position:relative; z-index:2;}
.eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-family:'Manrope',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); border:1px solid var(--line); background:rgba(255,255,255,.03); padding:.5rem 1rem; border-radius:999px; margin-bottom:var(--s5);}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--grad);}
.phero h1{font-size:var(--t-display); margin-bottom:var(--s4);}
/* Titlul care își conține propria etichetă (24.08.2026). Eticheta era deasupra titlului,
   dar în afara lui: pe ecran dădea contextul, în structură nu. Acum e înăuntru, iar
   coloana o ține pe rândul ei, exact cum era. Aspectul nu se schimbă. */
.phero h1.cu-eticheta{display:flex; flex-direction:column; align-items:center;}
.phero h1.cu-eticheta .ph-nume{display:block;}
/* Eticheta moștenea spațiul dintre rânduri de la titlu (potrivit pentru 35px, nu pentru
   12px), și se turtea cu 12px. I-l dau explicit pe al ei, ca să arate ca înainte. */
.phero h1.cu-eticheta .eyebrow{line-height:1.6;}
.price-hero{font-size:clamp(2.6rem,6vw,3.8rem); line-height:1; margin-bottom:var(--s5); background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.price-hero small{font-family:'Inter',sans-serif; font-weight:500; font-size:.95rem; letter-spacing:0; -webkit-text-fill-color:var(--muted); color:var(--muted); margin-left:.4rem;}
.phero .lead{font-size:var(--t-lead); color:#B4B9D4; max-width:60ch; margin:0 auto var(--s7); text-wrap:balance;}
.phero .actions{display:flex; align-items:center; justify-content:center; gap:var(--s5); flex-wrap:wrap;}

/* Ce include / nu include */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:1.25rem; padding:clamp(1.8rem,3.5vw,2.6rem);}
.panel + .panel{margin-top:var(--s5);}
.panel h2{font-size:1.5rem; margin-bottom:var(--s6);}
.panel h2 small{display:block; font-family:'Inter',sans-serif; font-weight:400; font-size:.92rem; color:var(--muted); letter-spacing:0; margin-top:.4rem;}
.inc{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:var(--s5) var(--s6);}
.inc li{display:flex; gap:.85rem; align-items:flex-start;}
.inc .tick{flex:0 0 auto; width:22px; height:22px; margin-top:2px; border-radius:50%; background:var(--grad); display:grid; place-items:center;}
.inc .tick svg{width:12px; height:12px; display:block;}
.inc b{font-family:'Manrope',sans-serif; font-weight:700; font-size:1rem; letter-spacing:-.01em; display:block; margin-bottom:.15rem;}
.inc span{color:var(--muted); font-size:.92rem; line-height:1.5;}
.exc{list-style:none; display:flex; flex-direction:column; gap:var(--s3);}
.exc li{display:flex; gap:.85rem; align-items:flex-start; color:var(--muted); font-size:.95rem;}
.exc li::before{content:""; flex:0 0 auto; width:22px; height:22px; margin-top:1px; border-radius:50%; border:1px solid var(--line); background:
  linear-gradient(currentColor,currentColor) center/10px 2px no-repeat; opacity:.75;}
.panel.muted{background:transparent;}

/* Ce oferi tu */
.provide{background:linear-gradient(rgba(255,255,255,.02),rgba(255,255,255,.02)), var(--surface); border:1px solid var(--line); border-left:3px solid transparent; border-radius:1rem; padding:1.4rem 1.6rem; margin-top:var(--s5); position:relative;}
.provide::before{content:""; position:absolute; left:0; top:1.2rem; bottom:1.2rem; width:3px; border-radius:3px; background:var(--grad);}
.provide h3{font-size:1.05rem; margin-bottom:.5rem;}
.provide p{color:var(--muted); font-size:.93rem;}

/* Repere */
.facts{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s3) var(--s4); margin-top:var(--s7);}
.fact{display:inline-flex; flex-direction:column; gap:.15rem; background:var(--surface); border:1px solid var(--line); border-radius:.9rem; padding:.8rem 1.2rem; min-width:9rem;}
.fact .k{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600;}
.fact .v{font-family:'Manrope',sans-serif; font-weight:800; font-size:1.05rem;}

/* Vezi și (surori) */
.siblings{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); margin-top:var(--s6);}
.sib{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); background:var(--surface); border:1px solid var(--line); border-radius:1rem; padding:1.2rem 1.5rem; transition:border-color .2s, transform .2s cubic-bezier(.2,.8,.2,1);}
.sib:hover{border-color:rgba(255,255,255,.2); transform:translateY(-3px);}
.sib .nm{font-family:'Manrope',sans-serif; font-weight:800; font-size:1.15rem;}
.sib .pr{color:var(--muted); font-size:.9rem; margin-top:.15rem;}
.sib .go{font-size:1.3rem; color:var(--muted);}

/* Final */
.final{text-align:center; position:relative; overflow:hidden;}
.final h2{font-size:var(--t-h2); margin-inline:auto;}
.final p{color:var(--muted); margin-top:var(--s4); font-size:var(--t-lead);}
.final .actions{display:flex; gap:var(--s4); justify-content:center; margin-top:var(--s7); flex-wrap:wrap;}
.micro{font-size:.9rem; color:var(--muted);}
/* Linkurile din randurile mici erau invizibile (24.08.2026): regula globala
   `a{color:inherit}` le facea identice cu textul din jur, fara subliniere si fara alta
   culoare. Nimeni nu avea de unde sa stie ca se poate apasa. Afecta si „Condiții de
   colaborare" de pe paginile de pachet, care e un link legal, si adresa de email de la
   contact. Un link care nu arata a link nu e link. */
.micro a{ color:var(--accent); text-decoration:underline; text-decoration-thickness:1px;
          text-underline-offset:3px; transition:opacity .2s; }
.micro a:hover{ opacity:.75; }

/* Puntea catre testul gratuit, pe paginile comerciale (24.08.2026).
   DE CE: toate paginile de pachet cereau direct angajament (suna / WhatsApp / email).
   Cine ajungea din Google pe „abonament-plus" avea doua variante: sa sune sau sa plece.
   Asta e treapta din mijloc: gratuita, fara sa scrie nimanui.
   NU e al patrulea buton, intentionat: ar concura cu WhatsApp si ar dilua actiunea
   principala. E o punte, deci arata altfel decat butoanele de deasupra.
   Pe telefon: zona de atins are peste 44px, iar textul se rupe pe randuri intregi. */
.punte-test{
  margin:var(--s6) auto 0; max-width:34rem;
  padding:var(--s4) var(--s4) calc(var(--s4) - .2rem);
  border:1px solid var(--line); border-radius:16px;
  background:var(--surface2);
  text-align:center;
}
.punte-test p{
  margin:0; font-size:.95rem; color:var(--muted);
  line-height:1.5; text-wrap:balance;
}
.punte-test a{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:44px; padding:.55rem .2rem;   /* degetul are loc, si pe ecran mic */
  margin-top:.2rem;
  color:var(--ink); font-weight:700; text-decoration:none;
  border-bottom:2px solid var(--accent);
  transition:color .2s, border-color .2s;
}
.punte-test a:hover{ color:var(--accent); }
.punte-test a .sageata{ transition:transform .2s; }
.punte-test a:hover .sageata{ transform:translateX(3px); }

@media(max-width:520px){
  /* Pe telefon caseta merge pana aproape de margini si respira mai putin pe verticala,
     ca sa nu impinga butoanele de contact prea sus fata de degetul mare. */
  .punte-test{ margin-top:var(--s5); padding:var(--s3) var(--s3) calc(var(--s3) - .1rem); border-radius:14px; }
  .punte-test p{ font-size:.9rem; }
}

@media(max-width:720px){
  .inc{grid-template-columns:1fr; gap:var(--s4);}
  .siblings{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .btn{transition:none;} }

/* Buton flotant WhatsApp (discret, pe toate paginile) */
.wa-float{position:fixed; right:20px; bottom:20px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; opacity:.96;}
.wa-float:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.42); opacity:1;}
.wa-float:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
.wa-float svg{width:30px; height:30px;}
@media(max-width:640px){ .wa-float{right:16px; bottom:16px; width:52px; height:52px;} .wa-float svg{width:28px; height:28px;} }
@media(prefers-reduced-motion:reduce){ .wa-float{transition:none;} }