/* V5 „Aplicația Mega”: mov dominant (cerința clientului), concept de aplicație interactiv, Onest rotunjit, raze mari. */
:root{
  --font:'Onest',system-ui,sans-serif;--font-d:'Onest',system-ui,sans-serif;
  --bg:#FFFFFF;--ink:#1B0F3A;--muted:#564C73;--surface:#FFFFFF;--surface-ink:#1B0F3A;--surface-muted:#564C73;--line:#E4DEF3;--field:#8D85A3;
  --primary:#5B2BC4;--on-primary:#fff;--accent:#FFD23F;--on-accent:#1B0F3A;--violet:#5B2BC4;
  --r:24px;--r-lg:32px;--r-btn:999px;
}
h1,h2,h3{font-family:var(--font-d);font-weight:800;letter-spacing:-.03em;line-height:1.02}
h1{font-size:clamp(3rem,6.4vw,5.6rem)}
h2{font-size:clamp(2rem,3.8vw,3.2rem);margin-bottom:14px}
h3{font-size:1.5rem;margin-bottom:8px}
.v5-top{position:sticky;top:0;z-index:60;background:#1B0F3A;color:#fff}
.v5-top__in{display:flex;align-items:center;gap:24px;height:68px}
.v5-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.25rem;text-decoration:none}
.v5-brand .brand__mark{width:34px;height:34px}
.v5-brand .brand__mark svg{width:100%;height:100%}
.v5-nav{display:flex;gap:4px;margin-left:auto}
.v5-nav a{padding:8px 14px;border-radius:999px;text-decoration:none;color:#CFC4EE;font-weight:600;transition:background-color var(--t-std) var(--ease),color var(--t-std) var(--ease)}
.v5-nav a:hover{background:#2E1D5E;color:#fff}
.v5-top .iconbtn{border-color:#3B2A72}
.v5-hero{background:#1B0F3A;color:#fff;padding:64px 0 112px;overflow:hidden}
.v5-hero__in{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.v5-lead{font-size:1.1875rem;color:#CFC4EE;max-width:520px;margin-top:22px;line-height:1.55}
.v5-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.v5-hero .btn--g{color:#fff;border-color:#4A3990}
.v5-device-wrap{position:relative;height:600px}
.v5-photo{position:absolute;right:0;top:40px;width:62%;height:460px;margin:0;border-radius:var(--r-lg);overflow:hidden}
.v5-photo img{width:100%;height:100%;object-fit:cover}
.v5-device{position:absolute;left:4%;top:0;width:300px;height:600px;padding:12px;border-radius:48px;background:#0E0720;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);z-index:2}
.v5-app{height:100%;border-radius:38px;background:#F6F2FF;color:var(--ink);padding:44px 20px 20px;display:flex;flex-direction:column;gap:16px}
.v5-app__hi{font-weight:800;font-size:1.25rem}
.v5-ring{position:relative;width:170px;height:170px;margin:0 auto}
.v5-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.v5-ring__bg{fill:none;stroke:#E4DEF3;stroke-width:12}
.v5-ring__fg{fill:none;stroke:var(--primary);stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset var(--t-in) var(--ease)}
.v5-ring div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.v5-ring b{font-size:2rem;font-weight:800;letter-spacing:-.03em}
.v5-ring small{font-size:.75rem;color:var(--muted)}
.v5-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:999px;background:#E9E2FA}
.v5-seg button{min-height:36px;border:0;border-radius:999px;background:transparent;font-weight:700;color:var(--muted);transition:background-color var(--t-std) var(--ease),color var(--t-std) var(--ease)}
.v5-seg button[aria-pressed=true]{background:var(--primary);color:#fff}
.v5-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.v5-tile{position:relative;padding:12px;border-radius:18px;background:#fff;border:0;text-align:left}
.v5-tile small{display:block;font-size:.7rem;color:var(--muted)}
.v5-tile b{font-size:1rem}
.v5-toggle i{position:absolute;right:10px;bottom:12px;width:34px;height:20px;border-radius:999px;background:#D7D0EA;transition:background-color var(--t-std) var(--ease)}
.v5-toggle i::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform var(--t-std) var(--ease)}
.v5-toggle[aria-pressed=true] i{background:var(--primary)}
.v5-toggle[aria-pressed=true] i::after{transform:translateX(14px)}
.v5-pay{margin-top:auto;min-height:48px;border:0;border-radius:16px;background:var(--accent);color:var(--on-accent);font-weight:800}
.v5-pay:active{transform:scale(.98)}
.v5-note{position:absolute;left:4%;bottom:-36px;font-size:.8125rem;color:#A99CD6}
.v5-sec{padding:112px 0}
.v5-sec--soft{background:#F4F0FC}
.v5-app-sec{display:grid;grid-template-columns:1fr .9fr;gap:64px;align-items:start}
.v5-feats{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:4px}
.v5-feats li{padding:18px 20px;border-radius:20px;background:#fff}
.v5-feats b{display:block;font-size:1.0625rem}
.v5-feats span{color:var(--muted)}
.v5-chat{height:560px;border:0;box-shadow:0 30px 60px -36px rgba(27,15,58,.45)}
.v5-head{margin-bottom:40px}
.v5-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.v5-plans .plan{background:#F4F0FC;border-radius:var(--r-lg);padding:28px}
.v5-plans .plan--hot{background:var(--primary);color:#fff;--surface-muted:#D9CFF7}
.v5-plans .plan--hot .ticks li::before{border-color:var(--accent)}
.v5-plans .plan--hot .btn--p{background:var(--accent);color:var(--on-accent)}
.v5-plans .tag{background:var(--accent);color:var(--on-accent)}
.v5-plans .plan__price .num{font-size:4rem;font-weight:800;letter-spacing:-.05em}
.v5-phones{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.v5-phones .prod{border-radius:var(--r-lg)}
.v5-phones .prod__art{aspect-ratio:1}
.v5-phones .mprice .num{font-size:2rem;font-weight:800}
.v5-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.v5-card{display:grid;grid-template-rows:280px auto;border-radius:var(--r-lg);overflow:hidden;background:#F4F0FC}
.v5-card img{width:100%;height:100%;object-fit:cover}
.v5-card>div{padding:28px}
.v5-card .btn{margin-top:18px}
.v5-final{background:#1B0F3A;color:#fff;padding:96px 0}
.v5-final__in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.v5-final p{color:#CFC4EE;max-width:620px}
.v5-foot{background:#1B0F3A;color:#A99CD6;border-top:1px solid #2E1D5E;padding:24px 0 96px;font-size:.8125rem}
.v5-foot__in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:1020px){
  .v5-nav{display:none}
  .v5-top .iconbtn{margin-left:auto}
  .v5-hero__in,.v5-app-sec,.v5-duo{grid-template-columns:1fr}
  .v5-plans{grid-template-columns:1fr}
  .v5-phones{grid-template-columns:1fr 1fr}
  .v5-sec{padding:80px 0}
}
@media (max-width:520px){
  .v5-hero{padding:40px 0 96px}
  .v5-device-wrap{height:560px}
  .v5-device{left:50%;margin-left:-140px;width:280px;height:560px}
  .v5-photo{display:none}
  .v5-note{left:0;right:0;text-align:center}
  .v5-chat{height:520px}
}