/* app/static/css/style.css */

/* ═══════════════════════════════════════════════════════════════════
   ԴԻԶԱՅՆ ՏՈԿԵՆՆԵՐ — վերցված են executivebusiness.am-ից
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --blue:       #2F4FA7;   /* բրենդի հիմնական կապույտ */
  --blue-2:     #345BAC;   /* հերոսի կապույտ */
  --navy:       #002570;   /* մուգ վերնագրեր */
  --blue-light: #63B3ED;   /* բաց կապույտ շեշտ */
  --lime:       #AEDD1A;   /* CTA լայմ */

  --tint-1:     #F6F6FF;   /* բաց ֆոն 1 */
  --tint-2:     #EEF5FF;   /* բաց ֆոն 2 */
  --tint-3:     #E7F0FE;   /* բաց ֆոն 3 */
  --grey:       #F6F7F8;
  --line:       #CBD5E0;   /* եզրագիծ */
  --muted:      #565A7C;   /* երկրորդային տեքստ */
  --white:      #FFFFFF;

  --ok:#2F4FA7; --mid:#E8A33C; --low:#E0685A;

  --font:'Poppins','Noto Sans Armenian','Segoe UI',system-ui,-apple-system,sans-serif;
  --maxw:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--muted);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}

.inner{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.band{padding:clamp(44px,7vw,84px) 0}
.band--tint1{background:var(--tint-1)}
.band--tint2{background:var(--tint-2)}
.band--tint3{background:var(--tint-3)}
.band--blue{background:var(--blue);color:#fff}
.band--blue2{background:var(--blue-2);color:#fff}
.band--roundtop{border-radius:50px 50px 0 0}

h1,h2,h3{color:var(--navy);font-weight:700;line-height:1.22}
.band--blue h1,.band--blue h2,.band--blue h3,
.band--blue2 h1,.band--blue2 h2,.band--blue2 h3{color:#fff}
h1{font-size:clamp(30px,5.2vw,54px);letter-spacing:-.01em}
h2{font-size:clamp(22px,3.4vw,34px)}
h3{font-size:17px;font-weight:600}
p{font-size:16px}
.lead{font-size:clamp(15px,1.9vw,18px);color:var(--muted)}
.band--blue .lead,.band--blue2 .lead{color:rgba(255,255,255,.88)}

.eyebrow{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);background:var(--tint-2);
  border:1px solid var(--line);padding:7px 16px;border-radius:50px;margin-bottom:20px
}
.band--blue .eyebrow,.band--blue2 .eyebrow{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35)}

/* ── Կոճակներ (կայքի ոճով՝ radius 4px, 700, uppercase) ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--blue);color:#fff;border:2px solid var(--blue);border-radius:4px;
  padding:17px 32px;font:700 15px/1 var(--font);letter-spacing:.02em;text-transform:uppercase;
  cursor:pointer;text-decoration:none;transition:background .18s,color .18s,border-color .18s
}
.btn:hover{background:var(--navy);border-color:var(--navy)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn--white{background:#fff;color:var(--blue);border-color:#fff}
.btn--white:hover{background:var(--tint-2);color:var(--navy);border-color:var(--tint-2)}
.btn--lime{background:var(--lime);color:#fff;border-color:var(--lime);text-shadow:0 1px 1px rgba(0,0,0,.14)}
.btn--lime:hover{background:#9BC516;border-color:#9BC516}
.btn--out{background:transparent;color:var(--blue);border-color:var(--line);text-transform:none;font-weight:600}
.btn--out:hover{background:var(--tint-2);border-color:var(--blue);color:var(--blue)}
.band--blue .btn--out,.band--blue2 .btn--out{color:#fff;border-color:rgba(255,255,255,.45)}
.band--blue .btn--out:hover{background:rgba(255,255,255,.12)}
.pill{border-radius:50px;text-transform:none;font-weight:500;padding:11px 24px;font-size:15px}

.card{background:#fff;border:1px solid var(--line);border-radius:5px}
.hidden{display:none !important}

/* ── Header ── */
.hdr{background:#fff;border-bottom:1px solid var(--line);padding:16px 0}
.hdr .inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{display:block;height:36px;width:auto}
.hdr .tagline{font-size:13.5px;color:var(--muted)}

/* ── Հերոս ── */
.hero{text-align:center}
.hero h1{max-width:880px;margin:0 auto}
.hero .lead{max-width:680px;margin:20px auto 32px}
.meta-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:34px}
.chip{
  display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.3);border-radius:50px;padding:8px 18px;
  font-size:14px;color:rgba(255,255,255,.9)
}
.chip b{color:#fff;font-weight:700}

.dims{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.dim-card{padding:24px 22px}
.dim-card .n{display:inline-block;font-size:12px;font-weight:700;color:var(--blue);background:var(--tint-2);border-radius:4px;padding:3px 9px;letter-spacing:.08em}
.dim-card h3{margin:12px 0 6px;font-size:16px}
.dim-card small{color:var(--muted);font-size:13.5px;line-height:1.5;display:block}

/* ── Հարցաշար ── */
.quiz-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px;flex-wrap:wrap}
.quiz-dim{font-size:13px;font-weight:700;color:var(--blue);letter-spacing:.05em;text-transform:uppercase}
.quiz-count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.bar{height:6px;background:#fff;border:1px solid var(--line);border-radius:50px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--blue);border-radius:50px;transition:width .35s cubic-bezier(.4,0,.2,1)}
.q-card{padding:clamp(24px,4vw,42px);margin-top:22px}
.q-card h2{margin-bottom:26px;font-size:clamp(20px,2.8vw,28px)}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{
  display:flex;align-items:flex-start;gap:14px;width:100%;text-align:right;
  background:#fff;border:1px solid var(--line);border-radius:5px;
  padding:16px 18px;color:var(--navy);font:400 15.5px/1.5 var(--font);
  cursor:pointer;transition:border-color .15s,background .15s
}
.opt:hover{border-color:var(--blue);background:var(--tint-1)}
.opt.sel{border-color:var(--blue);background:var(--tint-2);border-width:2px;padding:15px 17px}
.opt .dot{flex:0 0 19px;height:19px;margin-top:3px;border-radius:50%;border:2px solid var(--line);transition:.15s}
.opt:hover .dot{border-color:var(--blue)}
.opt.sel .dot{border-color:var(--blue);background:var(--blue);box-shadow:inset 0 0 0 3.5px #fff}
.q-nav{display:flex;justify-content:space-between;align-items:center;margin-top:24px;gap:12px}
.kb{text-align:center;font-size:12.5px;color:var(--muted);margin-top:16px;opacity:.8}

/* ── Արդյունք ── */
.score-hero{text-align:center}
.gauge{position:relative;width:230px;height:230px;margin:6px auto 2px}
.gauge svg{transform:rotate(-90deg)}
.gauge .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge .num{font-size:64px;font-weight:700;line-height:1;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.gauge .den{font-size:13px;color:rgba(255,255,255,.75);margin-top:5px;letter-spacing:.04em}
.level-badge{display:inline-block;padding:9px 24px;border-radius:50px;font-weight:700;font-size:16px;margin:16px 0 10px;color:var(--navy)}
.score-hero .sum{color:rgba(255,255,255,.9);max-width:640px;margin:6px auto 0;font-size:16px}
.bench{
  display:inline-flex;gap:9px;align-items:center;margin-top:24px;font-size:14px;
  color:rgba(255,255,255,.9);background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.3);padding:10px 20px;border-radius:50px
}
.bench b{color:#fff}

.sec{padding:clamp(24px,3.6vw,36px);margin-bottom:18px}
.sec > h2{margin-bottom:6px}
.sec > .lead{font-size:15px;margin-bottom:22px}

.dbar{padding:18px 0;border-bottom:1px solid var(--line)}
.dbar:last-child{border-bottom:none;padding-bottom:0}
.dbar .top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:9px}
.dbar .nm{font-weight:600;font-size:16px;color:var(--navy)}
.dbar .sc{font-weight:700;font-variant-numeric:tabular-nums;font-size:15px}
.dbar .track{height:9px;background:var(--tint-1);border:1px solid var(--line);border-radius:50px;overflow:hidden}
.dbar .track i{display:block;height:100%;border-radius:50px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.dbar .cm{color:var(--muted);font-size:14.5px;margin-top:11px}
.tag{font-size:11px;font-weight:700;padding:3px 10px;border-radius:50px;letter-spacing:.05em;margin-right:8px;text-transform:uppercase}

.plan{display:grid;gap:12px}
.step{display:flex;gap:15px;background:var(--tint-1);border:1px solid var(--line);border-radius:5px;padding:18px 20px}
.step .idx{flex:0 0 32px;height:32px;border-radius:4px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.step h3{margin-bottom:5px}
.step p{color:var(--muted);font-size:14.5px}
.step p b{color:var(--navy)}
.step .when{font-size:12px;color:var(--blue);font-weight:700;margin-top:8px;display:block;letter-spacing:.03em}

/* ── Gate ── */
.gate-zone{position:relative}
.locked{filter:blur(7px);opacity:.45;pointer-events:none;user-select:none;max-height:540px;overflow:hidden}
.gate{padding:clamp(26px,4vw,42px);text-align:center;border:2px solid var(--blue);background:#fff}
.gate .lockico{width:46px;height:46px;margin:0 auto 14px;border-radius:50px;background:var(--tint-2);display:flex;align-items:center;justify-content:center;font-size:21px}
.gate h2{margin-bottom:8px}
.gate .lead{max-width:540px;margin:0 auto 24px;font-size:15.5px}
.gate ul{list-style:none;max-width:460px;margin:0 auto 26px;text-align:right;display:grid;gap:9px}
.gate ul li{color:var(--muted);font-size:15px;padding-right:28px;position:relative}
.gate ul li::before{content:'✓';position:absolute;right:0;color:var(--blue);font-weight:700}
.form{display:grid;gap:10px;max-width:430px;margin:0 auto}
.form input{
  width:100%;background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:14px 16px;color:var(--navy);font:400 15px/1.4 var(--font);text-align:right
}
.form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,79,167,.13)}
.form input::placeholder{color:#9AA3B8}
.form .btn{width:100%;margin-top:6px}
.form .err{color:var(--low);font-size:13.5px;min-height:18px;text-align:right}
.priv{font-size:12.5px;color:#8A91A8;margin-top:14px}

/* ── Առաջարկ ── */
.offer{text-align:center;padding:clamp(34px,5vw,64px) 0}
.offer h2{max-width:680px;margin:0 auto 12px}
.offer .sub{color:rgba(255,255,255,.88);max-width:640px;margin:0 auto 26px;font-size:16.5px}
.pick{display:inline-block;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.32);border-radius:50px;padding:11px 24px;margin-bottom:24px;font-size:15px;color:rgba(255,255,255,.9)}
.pick b{color:var(--lime)}
.offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:0 auto 30px;max-width:860px;text-align:right}
.offer-item{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);border-radius:5px;padding:20px 22px}
.offer-item b{display:block;margin-bottom:6px;font-size:15.5px;color:#fff;font-weight:600}
.offer-item span{color:rgba(255,255,255,.82);font-size:14px;line-height:1.55}
.offer-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.foot{background:var(--blue);color:rgba(255,255,255,.75);text-align:center;padding:26px 0;font-size:13.5px}
.foot a{color:#fff;text-decoration:none;font-weight:500}

@media print{
  body{background:#fff}
  .no-print{display:none !important}
  .band--blue,.band--blue2{background:#fff !important;color:#111 !important}
  .band--blue h2,.gauge .num{color:var(--navy) !important}
  .offer-item{border-color:#ccc}
  .offer-item b,.offer-item span,.offer .sub,.pick{color:#333 !important}
  .sec,.card{break-inside:avoid}
}
@media (max-width:640px){
  .inner{padding:0 16px}
  .gauge{width:198px;height:198px}
  .gauge .num{font-size:54px}
  .q-nav{flex-direction:column-reverse}
  .q-nav .btn{width:100%}
  .hdr .tagline{display:none}
  .logo img{height:30px}
  .band--roundtop{border-radius:28px 28px 0 0}
}