/* ===================================================================
   Avloniy PMMI — Landing · section components + responsive
   =================================================================== */

/* ---------- trust / partners ---------- */
.trust { background: var(--surface); border-block: 1px solid var(--border); }
.trust-inner { display: grid; grid-template-columns: minmax(0, 1fr) min(468px, 44%); gap: clamp(28px, 4vw, 56px); align-items: center; padding-block: 38px; }
.trust-lead { font-size: clamp(15px, 1.5vw, 18px); font-weight: 600; color: var(--ink-2); max-width: 560px; line-height: 1.55; }
.trust-main { display: flex; align-items: center; gap: 18px; }
.trust-logo { width: 62px; height: 62px; flex: 0 0 62px; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(16,33,64,.14)); }
.trust-lead b { color: var(--ink); font-weight: 800; }
.trust-lead .hl { color: var(--action-600); font-weight: 800; }
[data-theme="dark"] .trust-lead .hl { color: var(--action); }
.partners { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.partners-track { display: flex; align-items: center; width: max-content; animation: partners-marquee 26s linear infinite; }
.partners:hover .partners-track { animation-play-state: paused; }
@keyframes partners-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.partner {
  position: relative; display: grid; place-items: center; height: 68px; width: 148px; flex: 0 0 148px; margin-right: 12px; padding: 0 20px; border-radius: var(--r-md); text-decoration: none;
  background: #fff; border: 1px solid var(--border, #E4E7F2); transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.partner:hover { border-color: var(--border-strong, #D3D9EA); transform: translateY(-3px); box-shadow: var(--shadow-md); }
[data-theme="dark"] .partner { background: var(--ds-g3, #edf1f7); border-color: rgba(255,255,255,.12); }
.partner .plogo { max-height: 40px; max-width: 112px; width: auto; height: auto; object-fit: contain; display: block; }
.partner .pfallback { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--brand); letter-spacing: -.01em; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .partners-track { animation: none; } }

/* ---------- course cards (content grid) ---------- */
.cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  overflow: hidden; display: flex; flex-direction: column; transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.cover { position: relative; aspect-ratio: 16 / 11; overflow: hidden; display: grid; place-items: center; isolation: isolate; }
.cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 80% -10%, rgba(255,255,255,.22), transparent 60%); }
.cover-ico { width: 56px; height: 56px; opacity: .92; z-index: 1; color: #fff; filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); }
.cover-watermark { position: absolute; right: -18px; bottom: -22px; width: 120px; height: 120px; opacity: .14; z-index: 0; }
.cover-seal { position: absolute; left: 12px; bottom: 12px; width: 24px; height: 24px; opacity: .9; z-index: 1; filter: brightness(0) invert(1); }
.c-science { background: linear-gradient(135deg, #1E4F8A, #2C74C9); }
.c-maths { background: linear-gradient(135deg, #0E8F73, #19B58C); }
.c-lang { background: linear-gradient(135deg, #E0664A, #F89A74); }
.c-method { background: linear-gradient(135deg, #5A3FB0, #8266D9); }
.c-ai { background: linear-gradient(135deg, #15356B, #1E4F8A); }
.c-lead { background: linear-gradient(135deg, #B23E5B, #D9698A); }
.c-natural { background: linear-gradient(135deg, #167C8C, #21A7B8); }
.c-safety { background: linear-gradient(135deg, #C2671A, #E08A3A); }
.cover-chip { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 11px; border-radius: var(--r-pill); background: rgba(255,255,255,.92); color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .02em; backdrop-filter: blur(4px); }
[data-theme="dark"] .cover-chip { background: rgba(9,18,42,.58); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.card-body { padding: 16px 17px 17px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { font-size: 16px; line-height: 1.3; letter-spacing: -.01em; min-height: 42px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 10px; }
.card-views { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.card-views svg { width: 16px; height: 16px; }

/* real rasm (kurs/ommabop) — lokal moslashuv */
.cover-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform var(--t); }
.cover.has-photo::after, .pcover.has-photo::after { background: linear-gradient(180deg, rgba(4,14,38,.02) 40%, rgba(4,14,38,.28)); }
.card:hover .cover-photo, .pcard:hover .cover-photo { transform: scale(1.04); }

/* pagination */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; }
.pager button { min-width: 40px; height: 40px; padding: 0 6px; border-radius: var(--r-md); font-weight: 700; font-size: 14px; color: var(--ink-2); border: 1px solid var(--border); background: var(--surface); transition: all var(--t); }
.pager button:hover { border-color: var(--action); color: var(--action-600); }
[data-theme="dark"] .pager button:hover { color: var(--action); }
.pager button.on { background: var(--action); color: #fff; border-color: var(--action); }
.pager button.arrow { color: var(--ink-3); }

/* ---------- features (bento) ---------- */
.features { background: var(--surface-2); }
[data-theme="dark"] .features { background: var(--surface); }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 26px 24px; transition: transform var(--t), box-shadow var(--t), border-color var(--t); position: relative; overflow: hidden;
}
[data-theme="dark"] .feat { background: var(--surface-2); }
.feat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.feat-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 18px; background: var(--action-tint); color: var(--action-600); }
[data-theme="dark"] .feat-ic { color: var(--action); }
.feat:nth-child(2) .feat-ic { background: var(--gold-tint); color: var(--gold); }
.feat:nth-child(3) .feat-ic { background: var(--brand-tint); color: var(--brand); }
.feat:nth-child(4) .feat-ic { background: color-mix(in srgb, #8266D9 16%, transparent); color: #6f54c9; }
[data-theme="dark"] .feat:nth-child(4) .feat-ic { color: #a78ff0; }
.feat h3 { font-size: 18px; }
.feat p { color: var(--ink-2); font-size: 14px; margin-top: 9px; line-height: 1.6; }
.feat .feat-num { position: absolute; top: 18px; right: 22px; font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--ink-3); opacity: .5; }

/* big stat band */
.statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 26px; }
.stat { text-align: center; padding: 26px 16px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border); }
[data-theme="dark"] .stat { background: var(--surface-2); }
.stat b { display: block; font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; color: var(--brand); line-height: 1; }
[data-theme="dark"] .stat b { color: var(--brand); }
.stat .suffix { color: var(--action-600); }
[data-theme="dark"] .stat .suffix { color: var(--action); }
.stat span { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-top: 10px; }

/* ---------- leadership block (Rahbariyatdan xabar) + metrics ---------- */
.lead-block { position: relative; }
.lead-block::before { content: none; }
.lead-head, .metrics-head { text-align: center; margin-bottom: clamp(26px, 3vw, 42px); }
.lead-head h2, .metrics-head h2 { font-family: var(--font-display); font-size: clamp(25px, 3.3vw, 37px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.lead-star { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 13px; }
.lead-star .ln { height: 1px; width: 52px; background: linear-gradient(90deg, transparent, var(--frame-gold)); }
.lead-star .ln:last-child { background: linear-gradient(90deg, var(--frame-gold), transparent); }
.lead-star svg { width: 15px; height: 15px; color: var(--frame-gold); flex: 0 0 15px; }

.testi-shell { display: flex; align-items: center; gap: clamp(8px, 2vw, 26px); margin-bottom: clamp(48px, 6vw, 84px); }
.testi-arrow { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); color: var(--ink-2); transition: all var(--t); }
.testi-arrow:hover { color: var(--action-600); border-color: var(--action); transform: scale(1.07); }
[data-theme="dark"] .testi-arrow:hover { color: var(--action); }
.testi-arrow svg { width: 20px; height: 20px; }
.testi-stage { flex: 1; min-width: 0; }

.testi-card { background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: clamp(26px, 3.4vw, 46px); display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 3vw, 48px); align-items: center; backdrop-filter: blur(9px); }
[data-theme="dark"] .testi-card { background: color-mix(in srgb, var(--surface) 76%, transparent); border-color: color-mix(in srgb, var(--frame-gold) 26%, transparent); }
.testi-card[hidden] { display: none; }
.testi-card:not([hidden]) { animation: testiIn .55s cubic-bezier(.22,.61,.36,1) both; }
@keyframes testiIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .testi-card:not([hidden]) { animation: none; } }
.testi-aside { display: flex; flex-direction: column; align-items: center; text-align: center; }
.testi-aside image-slot { width: 128px; height: 128px; margin-bottom: 16px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--frame-gold) 38%, transparent); border-radius: 50%; }
.testi-aside b { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.testi-aside .role { font-size: 13px; color: var(--action-600); font-weight: 700; margin-top: 8px; line-height: 1.4; }
[data-theme="dark"] .testi-aside .role { color: var(--action); }
.testi-quote { position: relative; min-width: 0; }
.testi-quote .qmark { font-family: Georgia, serif; font-size: 72px; line-height: .7; color: var(--frame-gold); display: block; margin-bottom: -4px; }
.testi-quote p { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.75; color: var(--ink); font-weight: 500; text-wrap: pretty; }
.lead-dots { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.lead-dots button { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 22%, transparent); transition: all var(--t); }
.lead-dots button.on { width: 26px; border-radius: 5px; background: var(--action); }

.metrics-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.metric-card { background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--border); border-radius: var(--r-card); padding: 24px 12px 18px; text-align: center; backdrop-filter: blur(9px); transition: transform var(--t), box-shadow var(--t); }
[data-theme="dark"] .metric-card { background: color-mix(in srgb, var(--surface) 74%, transparent); }
.metric-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.metric-ic { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; position: relative; }
.metric-ic::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid currentColor; opacity: .2; }
.metric-ic svg { width: 28px; height: 28px; }
.metric-ic.t-gold { background: rgba(196,150,46,.14); color: #B7901E; }
.metric-ic.t-green { background: rgba(30,158,106,.12); color: #1E9E6A; }
.metric-ic.t-sky { background: rgba(44,116,201,.12); color: #2C74C9; }
.metric-ic.t-red { background: rgba(224,72,90,.12); color: #D6455A; }
.metric-ic.t-violet { background: rgba(124,92,208,.13); color: #7C5CD0; }
[data-theme="dark"] .metric-ic.t-gold { background: rgba(226,184,68,.16); color: #ECC766; }
[data-theme="dark"] .metric-ic.t-green { background: rgba(45,200,140,.16); color: #43D69A; }
[data-theme="dark"] .metric-ic.t-sky { background: rgba(91,150,230,.18); color: #79ABF5; }
[data-theme="dark"] .metric-ic.t-red { background: rgba(240,90,110,.18); color: #FF8090; }
[data-theme="dark"] .metric-ic.t-violet { background: rgba(150,120,240,.18); color: #AD93F2; }
.metric-num { font-family: var(--font-display); font-size: clamp(23px, 2.5vw, 32px); font-weight: 800; color: var(--ink); line-height: 1; }
.metric-div { width: 28px; height: 1px; background: var(--frame-gold); margin: 10px auto; opacity: .55; }
.metric-lbl { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.testi-mid { flex: 1; min-width: 0; }

@media (max-width: 1080px) { .metrics-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .testi-arrow { width: 46px; height: 46px; } }
@media (max-width: 620px) {
  .testi-shell { gap: 8px; }
  .testi-arrow { display: none; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- certificate checker ---------- */
.cert { position: relative; }
#sertifikat { position: relative; isolation: isolate; }
#sertifikat::before { content: none; }
.cert-card {
  background: url("assets/naqsh-dark.svg") no-repeat right -210px top -210px / 480px auto, radial-gradient(120% 130% at 12% 115%, rgba(64, 130, 220, .3), transparent 55%), linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  border-radius: var(--r-lg); padding: clamp(34px, 5vw, 60px); position: relative; overflow: hidden; isolation: isolate;
  box-shadow: var(--shadow-lg);
}
.cert-card::before { content: none; }
[data-theme="dark"] .cert-card { background: url("assets/naqsh-dark.svg") no-repeat right -210px top -210px / 480px auto, radial-gradient(120% 130% at 12% 115%, rgba(91,155,234,.2), transparent 55%), linear-gradient(135deg, #16294c 0%, #0a1630 100%); border: 1px solid var(--border); }
.cert-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 30%, transparent), transparent 70%); z-index: -1; }
.cert-inner { display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 3vw, 48px); align-items: center; }
.cert-copy { max-width: 520px; }
.cert-copy .eyebrow { color: var(--gold-bright); }
.cert-copy .eyebrow::before { background: var(--gold-bright); }
.cert-copy h2 { color: #fff; font-size: clamp(26px, 3.4vw, 38px); margin-top: 14px; }
.cert-copy p { color: #c6d3e9; margin-top: 14px; font-size: 16px; line-height: 1.65; }
.cert-form { display: flex; gap: 12px; margin-top: 28px; max-width: 540px; flex-wrap: wrap; }
.cert-input { flex: 1; min-width: 220px; height: 54px; border-radius: var(--r-md); border: 1.5px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); padding: 0 18px; color: #fff; font-size: 15px; font-weight: 600; outline: none; transition: all var(--t); backdrop-filter: blur(6px); }
.cert-input::placeholder { color: #9fb0cd; }
.cert-input:focus { border-color: var(--gold-bright); background: rgba(255,255,255,.16); }
.cert-result { margin-top: 18px; font-size: 14.5px; font-weight: 700; display: none; align-items: center; gap: 9px; padding: 13px 18px; border-radius: var(--r-md); }
.cert-result.show { display: inline-flex; }
.cert-result.ok { background: var(--action-tint); color: var(--action-600); }
.cert-result.err { background: rgba(229,72,77,.16); color: #ff8a8e; }
.cert-visual { width: 280px; flex: 0 0 280px; }
.cert-badge {
  background: rgba(255,255,255,.95); border-radius: var(--r-card); padding: 22px; text-align: center;
  box-shadow: var(--shadow-pop); transform: rotate(3deg); transition: transform var(--t);
}
.cert-badge:hover { transform: rotate(0); }
.cert-badge img { width: 64px; height: 64px; margin: 0 auto 12px; }
.cert-badge .ttl { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--brand); }
[data-theme="dark"] .cert-badge .ttl { color: #16294c; }
.cert-badge .sub { font-size: 12px; color: var(--ink-3); margin-top: 4px; font-weight: 600; }
[data-theme="dark"] .cert-badge .sub { color: #5c6b88; }
.cert-badge .ribbon { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border-strong); font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--gold); text-transform: uppercase; }

/* ---------- popular courses ---------- */
.pop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.pcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.pcover { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.pcover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 80% -10%, rgba(255,255,255,.22), transparent 60%); }
.pcover .cover-ico { width: 64px; height: 64px; }
.pcard-body { padding: 18px 19px 19px; display: flex; flex-direction: column; flex: 1; }
.pcard-body .ptag { display: inline-flex; align-self: flex-start; padding: 5px 11px; border-radius: var(--r-pill); font-size: 11px; font-weight: 800; margin-bottom: 12px; }
.ptag.free { background: var(--action-tint); color: var(--action-600); }
[data-theme="dark"] .ptag.free { color: var(--action); }
.pcard-body h3 { font-size: 16.5px; line-height: 1.32; flex: 1; }
.pcard-meta { display: flex; align-items: center; gap: 14px; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.pcard-meta .stars { color: var(--gold-bright); letter-spacing: 1px; }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); gap: 10px; }
.pcard-foot .price { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink); }

/* ---------- webinar CTA ---------- */
.webinar { position: relative; }
.web-card { display: grid; grid-template-columns: 1.05fr .95fr; gap: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.web-copy { padding: clamp(32px, 4.5vw, 60px); display: flex; flex-direction: column; justify-content: center; }
.web-copy h2 { font-size: clamp(26px, 3.4vw, 40px); }
.web-copy p { color: var(--ink-2); font-size: 16px; margin-top: 16px; line-height: 1.65; max-width: 460px; }
.web-people { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.web-avatars { display: flex; }
.web-avatars span { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--surface); margin-left: -12px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; }
.web-avatars span:first-child { margin-left: 0; }
.web-people .ptx { font-size: 14px; color: var(--ink-2); font-weight: 600; line-height: 1.4; }
.web-people .ptx b { color: var(--ink); font-weight: 800; }
.web-media { position: relative; min-height: 320px; background: var(--surface-3); }
.web-media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.web-badge { position: absolute; bottom: 20px; left: 20px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 800; }
.web-badge .live { width: 9px; height: 9px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 0 rgba(229,72,77,.5); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.5); } 70% { box-shadow: 0 0 0 9px rgba(229,72,77,0); } 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); } }
body.anim-off .web-badge .live { animation: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { width: 100%; max-width: 540px; margin: 8px auto 0; }
  .hero-frame { width: 100%; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .statband { grid-template-columns: repeat(2, 1fr); }
  .pop-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .web-card { grid-template-columns: 1fr; }
  .web-media { min-height: 240px; order: -1; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: grid; }
  .trust-inner { grid-template-columns: 1fr; }
  .testi-card { grid-template-columns: 1fr; text-align: center; }
  .testi-aside image-slot { margin-inline: auto; }
  .testi-quote .qmark { display: none; }
  .cert-inner { grid-template-columns: 1fr; }
  .cert-visual { display: none; }
  .hdr-tools .lbl { display: none; }
}
@media (max-width: 760px) {
  .hero-eyebrow { white-space: normal; }
}
@media (max-width: 560px) {
  .cards-grid { grid-template-columns: 1fr; }
  .pop-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .statband { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .hero-stats { gap: 10px; }
  .hero-pop-feats { left: 0; right: 6px; width: auto; }
  .hero-pop-cert { left: 0; }
  .hp-list li { white-space: normal; }
}

/* ---------- icon sizing ---------- */
.icon-btn svg { width: 21px; height: 21px; }
.lang-btn .chev { width: 15px; height: 15px; }
.btn svg { width: 18px; height: 18px; }
.tlink svg { width: 16px; height: 16px; }
.cover-ico svg { width: 100%; height: 100%; }
.feat-ic svg { width: 26px; height: 26px; }
.hero-float .ic svg { width: 20px; height: 20px; }
.testi-nav svg { width: 19px; height: 19px; }
.footer-social svg { width: 18px; height: 18px; }
.pager svg { width: 18px; height: 18px; }
.cert-result svg { width: 18px; height: 18px; }
.pcard-meta .stars { color: var(--gold-bright); letter-spacing: 1px; }
.lang-opt svg, .drawer svg { width: 18px; height: 18px; }

/* ====================================================================
   Ornamental block — direction cards + news & events
   ==================================================================== */
.block-orn { position: relative; isolation: isolate; padding-block: clamp(54px, 7vw, 100px); background: transparent; }
.block-orn::before { content: none; }
[data-theme="dark"] .block-orn { background: transparent; }

/* direction cards */
.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.cat-card {
  background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 30px 22px 26px; text-align: center;
  backdrop-filter: blur(8px); box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.cat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
[data-theme="dark"] .cat-card { background: color-mix(in srgb, var(--surface) 72%, transparent); }
.cat-ic { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px; position: relative; }
.cat-ic::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid currentColor; opacity: .22; }
.cat-ic svg { width: 34px; height: 34px; }
.cat-ic.t-teal   { background: rgba(16,169,130,.12);  color: #0E9E78; }
.cat-ic.t-gold   { background: rgba(196,150,46,.15);  color: #B7901E; }
.cat-ic.t-sky    { background: rgba(44,116,201,.12);  color: #2C74C9; }
.cat-ic.t-violet { background: rgba(124,92,208,.13);  color: #7C5CD0; }
.cat-ic.t-green  { background: rgba(30,158,106,.12);  color: #1E9E6A; }
[data-theme="dark"] .cat-ic.t-teal   { background: rgba(31,199,154,.16);  color: #2FD8AA; }
[data-theme="dark"] .cat-ic.t-gold   { background: rgba(226,184,68,.16);  color: #ECC766; }
[data-theme="dark"] .cat-ic.t-sky    { background: rgba(91,150,230,.18);  color: #79ABF5; }
[data-theme="dark"] .cat-ic.t-violet { background: rgba(150,120,240,.18);  color: #AD93F2; }
[data-theme="dark"] .cat-ic.t-green  { background: rgba(45,200,140,.16);  color: #43D69A; }
.cat-card h3 { font-size: 17px; color: var(--brand); letter-spacing: -.01em; }
[data-theme="dark"] .cat-card h3 { color: var(--ink); }
.cat-card p { font-size: 13.5px; color: var(--ink-2); margin-top: 10px; line-height: 1.5; text-wrap: pretty; }

/* news head */
.news-head { display: flex; align-items: center; gap: 20px; margin-top: clamp(44px, 5vw, 72px); margin-bottom: 26px; }
.news-head h2 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.news-head .nh-rule { flex: 1; display: flex; align-items: center; gap: 12px; }
.news-head .nh-rule .ln { height: 1px; flex: 1; background: linear-gradient(90deg, var(--frame-gold), transparent); max-width: 90px; }
.news-head .nh-rule svg { width: 17px; height: 17px; color: var(--frame-gold); flex: 0 0 17px; }
.news-head .btn { flex: 0 0 auto; }

/* news grid */
.news-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.news-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.news-cover { position: relative; aspect-ratio: 4 / 3; background: var(--surface-3); }
.news-cover image-slot { width: 100%; height: 100%; }
.news-cover .news-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t); }
.news-card:hover .news-img { transform: scale(1.05); }
.news-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center;
  padding: 6px 13px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
  color: #fff; background: var(--action); box-shadow: var(--shadow-sm);
}
.news-body { padding: 16px 17px 18px; display: flex; flex-direction: column; flex: 1; }
.news-date { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.news-card h3 { font-size: 15.5px; line-height: 1.35; color: var(--ink); margin-top: 8px; flex: 1; letter-spacing: -.01em; }
.news-more { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-weight: 700; font-size: 13.5px; color: var(--action-600); transition: gap var(--t); }
[data-theme="dark"] .news-more { color: var(--action); }
.news-more svg { width: 16px; height: 16px; transition: transform var(--t); }
.news-card:hover .news-more { gap: 11px; }
.news-card:hover .news-more svg { transform: translateX(3px); }

@media (max-width: 1080px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .news-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .news-head { flex-wrap: wrap; }
  .news-head .nh-rule { display: none; }
  .news-head h2 { white-space: normal; }
}
@media (max-width: 480px) {
  .cat-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
}


/* ============ Mobil sayqal ============ */
@media (max-width: 640px) {
  .hero-pop-feats { display: none; }
}
@media (max-width: 560px) {
  .wrap { padding-inline: 16px; }
  .hdr { --hdrt: 8px; --hdrh: 56px; }
  .hdr.scrolled { padding-inline: 10px; }
  .hdr-row { gap: 6px; }
  .hdr.scrolled .hdr-row { padding-inline: 12px 8px; }
  .brand-sub { display: none; }
  .brand-mark, .brand-mark svg, .brand-mark .brand-logo-img { width: 32px; height: 32px; }
  .brand-mark { flex: 0 0 32px; }
  .brand-name { font-size: 17px; }
  #account-btn span { display: none; }
  #account-btn { padding-inline: 12px; }
  .hero-inner { padding-top: 104px; padding-bottom: 56px; gap: 26px; }
  .hero-stats { gap: 10px; margin-top: 28px; }
  .hstat { padding: 11px 13px; flex: 1 1 100%; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  .hero-visual { max-width: 100%; }
  .hero-pop-cert { position: static; margin-top: 12px; width: fit-content; }
  .trust-inner { grid-template-columns: 1fr; padding-block: 28px; }
  .section { padding-block: 46px; }
  .cert-form .btn { width: 100%; justify-content: center; }
  .web-copy { padding: 26px 20px; }
  .footer-top { grid-template-columns: 1fr; gap: 26px; }
  .footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* ============ FAQ ============ */
.faq-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 880px; margin: 0 auto 30px; }
.faq-tab { padding: 9px 18px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font-family: var(--font-display); font-size: 14px; font-weight: 600; cursor: pointer; transition: color var(--t), background var(--t), border-color var(--t), box-shadow var(--t); }
.faq-tab:hover { border-color: var(--border-strong); color: var(--ink); }
.faq-tab.on { background: var(--action); border-color: var(--action); color: #fff; box-shadow: var(--shadow-sm); }
.faq-list { max-width: 880px; margin: 0 auto; min-height: 344px; display: flex; flex-direction: column; gap: 14px; }
.faq-more { display: flex; justify-content: center; margin-top: 26px; }
.faq-more-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--action); font-family: var(--font-display); font-size: 14.5px; font-weight: 700; cursor: pointer; transition: background var(--t), border-color var(--t), color var(--t); }
.faq-more-btn:hover { background: var(--action-tint); border-color: var(--action); }
.faq-more-ic { width: 18px; height: 18px; display: grid; place-items: center; transition: transform var(--t); }
.faq-more-btn.on .faq-more-ic { transform: rotate(180deg); }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color var(--t), box-shadow var(--t); }
.faq-item:hover { border-color: var(--border-strong); }
.faq-item.open { border-color: color-mix(in srgb, var(--action) 42%, var(--border)); box-shadow: var(--shadow-md); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 22px; text-align: left; cursor: pointer; background: none; border: 0; font-family: var(--font-display); font-size: clamp(15.5px, 1.5vw, 17px); font-weight: 700; color: var(--ink); line-height: 1.4; transition: color var(--t); }
.faq-item.open .faq-q { color: var(--action); }
.faq-ic { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--action); border: 1px solid var(--border); transition: transform var(--t), background var(--t), color var(--t), border-color var(--t); }
.faq-ic svg { width: 18px; height: 18px; }
.faq-item.open .faq-ic { transform: rotate(180deg); background: var(--action); color: #fff; border-color: transparent; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-in { overflow: hidden; min-height: 0; }
.faq-a p { padding: 0 22px 20px; margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.72; max-width: 70ch; }

/* ============ Scroll to top ============ */
.scrolltop { position: fixed; right: calc(clamp(16px, 3vw, 28px) + 5px); bottom: calc(clamp(16px, 3vw, 28px) + 74px); z-index: 60; width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--action); color: #fff; box-shadow: var(--shadow-lg); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9); transition: opacity var(--t), transform var(--t), visibility var(--t), background var(--t); }
.scrolltop.show { opacity: 1; visibility: visible; transform: none; }
.scrolltop:hover { background: var(--action-600); transform: translateY(-2px); }
.scrolltop svg { width: 22px; height: 22px; }
@media (max-width: 640px) { .scrolltop { width: 46px; height: 46px; } }