.vk {
     --brand: #03263a;
     --brand-mid: #39556d;
     --paper: #F5F8FC;
     --tint: #E7EFF8;
     --card: #FFFFFF;
     --edge: #D8E4F0;
     --ink: #12303A;
     --ink-soft: #445C64;
     --muted: #5A7180;
     --amber: #C97D18;
     --amber-text: #8F4F0F;
     --rule: rgba(18, 48, 58, .14);
     background: var(--paper);
     color: var(--ink);
     font-family: 'Poppins', 'Inter', system-ui, sans-serif;
     font-size: 17px;
     line-height: 1.85;
 }

 .vk-wrap {
     max-width: 1180px;
     margin: 0 auto;
     padding: 0 24px;
     width: 90%
 }

 .vk-col {
     max-width: 66ch;
     margin: 0 auto
 }

 .vk-sec {
     margin-top: clamp(48px, 7vw, 84px)
 }

 .vk-label {
     font-family: 'Oswald', sans-serif;
     font-weight: 500;
     font-size: .82rem;
     letter-spacing: .22em;
     text-transform: uppercase;
     color: var(--brand-mid);
     margin: 0 0 18px
 }

 .vk h2 {
     font-family: 'Oswald', sans-serif;
     font-weight: 600;
     font-size: clamp(1.5rem, 3.4vw, 2.15rem);
     line-height: 1.2;
     color: var(--brand);
     margin: 0 0 18px
 }

 .vk p {
     margin: 0 0 20px
 }

 .vk strong {
     font-weight: 600;
     color: var(--brand)
 }

 /* hero */
 .vk-hero {
     padding: 9rem 0 0
 }

 .vk-hero h1 {
     font-family: 'Merriweather', Georgia, serif;
     font-weight: 700;
     font-size: clamp(1.9rem, 4.6vw, 3rem);
     line-height: 1.25;
     color: var(--brand);
     margin: 0;
     max-width: 20ch
 }

 .vk-hero .vk-lead {
     font-size: clamp(1.02rem, 2.1vw, 1.2rem);
     line-height: 1.7;
     color: var(--ink-soft);
     max-width: 54ch;
     margin: 24px 0 0
 }

 .vk-facts {
     display: flex;
     flex-wrap: wrap;
     margin: 40px 0 0;
     border-top: 1px solid var(--rule);
     font-family: 'Oswald', sans-serif;
     font-size: .86rem;
     line-height: 1.6;
     letter-spacing: .03em
 }

 .vk-facts div {
     flex: 1 1 190px;
     padding: 16px 20px 16px 0;
     border-bottom: 1px solid var(--rule);
     color: var(--muted)
 }

 .vk-facts b {
     display: block;
     font-weight: 600;
     color: var(--brand)
 }

 .vk-big {
     font-size: 1.12rem;
     line-height: 1.8
 }

 /* ledger */
 .vk-ledger {
     border-top: 1px solid var(--rule);
     margin-top: 26px
 }

 .vk-row {
     display: grid;
     grid-template-columns: 1fr auto;
     gap: 4px 24px;
     padding: 18px 0;
     border-bottom: 1px solid var(--rule);
     align-items: baseline
 }

 .vk-row .n {
     font-family: 'Oswald', sans-serif;
     font-weight: 500;
     font-size: .98rem;
     color: var(--brand)
 }

 .vk-row .w {
     grid-column: 1;
     font-size: .95rem;
     color: var(--ink-soft);
     line-height: 1.65
 }

 .vk-row .o {
     grid-row: 1;
     grid-column: 2;
     font-family: 'Oswald', sans-serif;
     font-size: .8rem;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--muted);
     white-space: nowrap
 }

 /* dönüş nöqtəsi */
 .vk-turn {
     background: var(--tint);
     border-top: 1px solid var(--edge);
     border-bottom: 1px solid var(--edge);
     margin-top: clamp(56px, 8vw, 90px);
     padding: clamp(48px, 7vw, 80px) 0
 }

 .vk-turn .vk-label {
     color: var(--amber-text)
 }

 .vk-turn p {
     color: var(--ink-soft);
     max-width: 58ch
 }

 .vk-kicker {
     font-family: 'Merriweather', Georgia, serif;
     font-style: italic;
     font-weight: 400;
     font-size: clamp(1.2rem, 2.7vw, 1.55rem);
     line-height: 1.55;
     color: var(--brand);
     max-width: 36ch;
     margin: 0
 }

 /* zaman xətti */
 .vk-tl {
     position: relative;
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 0 12px;
     padding-top: 64px;
     margin: 44px 0 12px
 }

 .vk-rail {
     position: absolute;
     left: 0;
     right: 0;
     top: 64px;
     height: 1px;
     background: #AFC3DA
 }

 .vk-stop {
     position: relative;
     padding-top: 24px;
     text-align: center
 }

 .vk-stop::before {
     content: "";
     position: absolute;
     top: -4.5px;
     left: 50%;
     transform: translateX(-50%);
     width: 9px;
     height: 9px;
     border-radius: 50%;
     background: #8299AF
 }

 .vk-stop.hot::before {
     background: var(--amber);
     box-shadow: 0 0 0 5px rgba(201, 125, 24, .2)
 }

 .vk-stop .w {
     font-family: 'Oswald', sans-serif;
     font-size: .78rem;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--muted);
     display: block;
     margin-bottom: 6px
 }

 .vk-stop .t {
     font-size: .93rem;
     line-height: 1.55;
     color: var(--ink-soft)
 }

 .vk-stop.hot .t {
     color: var(--brand);
     font-weight: 500
 }

 .vk-gap {
     position: absolute;
     top: 4px;
     left: 10%;
     width: 20%;
     opacity: 0;
     transform: translateY(6px);
     transition: opacity .7s ease .15s, transform .7s ease .15s
 }

 .vk-gap.on {
     opacity: 1;
     transform: none
 }

 .vk-gap i {
     display: block;
     height: 12px;
     border: 1px solid var(--amber);
     border-top: 0
 }

 .vk-gap span {
     display: block;
     text-align: center;
     font-family: 'Oswald', sans-serif;
     font-size: .8rem;
     letter-spacing: .12em;
     color: var(--amber-text);
     margin-bottom: 6px
 }

 /* statistika, xəbərdarlıq, nəticə */
 .vk-statbox {
     margin: 32px 0 0;
     padding: 26px 0 0;
     border-top: 1px solid var(--rule)
 }

 .vk-stat {
     font-family: 'Oswald', sans-serif;
     font-weight: 600;
     font-size: clamp(2.4rem, 6.5vw, 3.4rem);
     line-height: 1;
     color: var(--brand-mid);
     display: block
 }

 .vk-cap {
     font-family: 'Oswald', sans-serif;
     font-size: .85rem;
     letter-spacing: .06em;
     color: var(--ink-soft);
     line-height: 1.65;
     display: block;
     margin-top: 10px;
     max-width: 42ch
 }

 .vk-warn {
     background: var(--card);
     border: 1px solid var(--edge);
     border-left: 4px solid var(--amber);
     border-radius: 0 12px 12px 0;
     padding: 22px 24px;
     margin: 28px 0 0;
     font-size: .97rem;
     line-height: 1.7
 }

 .vk-warn p {
     margin: 0
 }

 .vk-out2 {
     display: grid;
     gap: 16px;
     margin-top: 26px
 }

 .vk-out2 div {
     background: var(--card);
     border: 1px solid var(--edge);
     border-radius: 12px;
     padding: 22px 24px;
     font-size: .97rem;
     line-height: 1.7;
     color: var(--ink-soft)
 }

 .vk-out2 b {
     display: block;
     font-family: 'Oswald', sans-serif;
     font-weight: 600;
     font-size: .85rem;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--brand-mid);
     margin-bottom: 8px
 }

 @media(min-width:640px) {
     .vk-out2 {
         grid-template-columns: 1fr 1fr
     }
 }

 .vk-pull {
     font-family: 'Merriweather', Georgia, serif;
     font-style: italic;
     font-weight: 400;
     font-size: clamp(1.3rem, 3.1vw, 1.8rem);
     line-height: 1.5;
     color: var(--brand-mid);
     margin: 0 0 26px;
     max-width: 28ch
 }

 /* səbəblər diaqramı */
 .vk-causes {
     margin: 42px auto 46px;
     max-width: 900px
 }

 .vk-causes .cap {
     font-family: 'Oswald', sans-serif;
     font-size: .86rem;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--muted);
     text-align: center;
     margin: 0 0 26px;
     line-height: 1.6
 }

 .vk-cgrid {
     position: relative;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 0 16px;
     padding-top: 46px
 }

 .vk-brk {
     position: absolute;
     top: 0
 }

 .vk-brk span {
     display: block;
     text-align: center;
     font-family: 'Oswald', sans-serif;
     font-size: .78rem;
     letter-spacing: .14em;
     text-transform: uppercase;
     margin-bottom: 6px
 }

 .vk-brk i {
     display: block;
     height: 9px;
     border: 1px solid;
     border-bottom: 0
 }

 .vk-brk.a {
     left: 0;
     width: calc(25% - 12px)
 }

 .vk-brk.a span {
     color: var(--muted)
 }

 .vk-brk.a i {
     border-color: var(--edge)
 }

 .vk-brk.b {
     left: calc(25% + 4px);
     right: 0
 }

 .vk-brk.b span {
     color: var(--amber-text)
 }

 .vk-brk.b i {
     border-color: var(--amber)
 }

 .vk-cause {
     text-align: center;
     padding: 0 4px
 }

 .vk-cause .ico {
     display: inline-flex;
     padding: 10px;
     border-radius: 50%;
     margin-bottom: 12px
 }

 .vk-cause svg {
     width: 44px;
     height: 44px;
     display: block;
     stroke: var(--brand-mid)
 }

 .vk-cause svg .dot {
     fill: var(--brand-mid);
     stroke: none
 }

 .vk-cause h3 {
     font-family: 'Oswald', sans-serif;
     font-size: 1.02rem;
     font-weight: 600;
     line-height: 1.3;
     margin: 0 0 6px;
     color: var(--brand)
 }

 .vk-cause .where {
     font-size: .84rem;
     color: var(--ink-soft);
     margin: 0;
     line-height: 1.5
 }

 .vk-cause.answer .ico {
     background: rgba(201, 125, 24, .11)
 }

 .vk-cause.answer svg {
     stroke: var(--amber)
 }

 .vk-cause.answer svg .dot {
     fill: var(--amber)
 }

 .vk-cause.answer h3,
 .vk-cause.answer .where {
     color: var(--amber-text)
 }

 /* checklist */
 .vk-check {
     list-style: none;
     margin: 24px 0 0;
     padding: 0
 }

 .vk-check li {
     position: relative;
     padding: 14px 0 14px 30px;
     border-bottom: 1px solid var(--rule);
     line-height: 1.65
 }

 .vk-check li::before {
     content: "";
     position: absolute;
     left: 2px;
     top: 23px;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     border: 1.5px solid var(--amber)
 }

 /* cta + disclaimer */
 .vk-cta {
     background: var(--tint);
     border-top: 4px solid var(--brand);
     margin-top: 64px;
     padding: 56px 0
 }

 .vk-cta h2 {
     max-width: 20ch
 }

 .vk-cta p {
     color: var(--ink-soft);
     max-width: 48ch;
     margin: 0 0 28px
 }

 .vk-btn {
     display: inline-block;
     color: #fff;
     font-weight: 600;
     font-size: 1rem;
     text-decoration: none;
     padding: 13px 30px;
     border-radius: 999px;
     transition: transform .3s ease;
     background-image: radial-gradient(45.81% 111.02% at 57.47% 14.48%, #39556d 0, #24282F 100%);
     box-shadow: 0 0 10px #39556d
 }

 .vk-btn:hover {
     transform: scale(1.06)
 }

 .vk-wa {
     display: inline-block;
     margin-left: 20px;
     color: var(--brand-mid);
     text-decoration: none;
     font-weight: 600;
     font-size: .95rem;
     border-bottom: 1px solid rgba(57, 85, 109, .45);
     padding-bottom: 2px
 }

 .vk-disc {
     padding: 36px 0 56px;
     font-size: .86rem;
     color: var(--muted);
     line-height: 1.7
 }

 .vk-disc .vk-col {
     border-top: 1px solid var(--rule);
     padding-top: 22px
 }

 .vk-back {
     display: inline-block;
     margin-top: 14px;
     color: var(--brand-mid);
     font-weight: 600;
     text-decoration: none
 }

 /* dərman siyahısı qrafikası */
 .vk-meds {
     margin: 38px auto 46px;
     max-width: 780px
 }

 .vk-meds .cap {
     font-family: 'Oswald', sans-serif;
     font-size: .86rem;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--muted);
     text-align: center;
     margin: 0 0 22px;
     line-height: 1.6
 }

 .vk-meds .sheet {
     background: var(--card);
     border: 1px solid var(--edge);
     border-radius: 14px;
     padding: 8px 26px
 }

 .vk-meds .mrow {
     display: flex;
     flex-wrap: wrap;
     align-items: baseline;
     gap: 2px 18px;
     position: relative;
     padding: 20px 0 20px 20px;
     border-bottom: 1px dashed var(--edge)
 }

 .vk-meds .mrow:last-child {
     border-bottom: 0
 }

 .vk-meds .mrow::before {
     content: "";
     position: absolute;
     left: 0;
     top: 27px;
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: #B9CADF
 }

 .vk-meds .mrow b {
     font-family: 'Oswald', sans-serif;
     font-weight: 600;
     font-size: 1.04rem;
     color: var(--brand);
     flex: 1 1 230px;
     line-height: 1.4
 }

 .vk-meds .mrow span {
     font-size: .91rem;
     color: var(--ink-soft);
     flex: 1 1 250px;
     line-height: 1.6
 }

 .vk-meds .mrow.hot {
     background: rgba(201, 125, 24, .06);
     border-left: 3px solid var(--amber);
     border-radius: 6px;
     padding-left: 20px
 }

 .vk-meds .mrow.hot::before {
     display: none
 }

 .vk-meds .mrow.hot b,
 .vk-meds .mrow.hot span {
     color: var(--amber-text)
 }

 .vk-meds .mrow em {
     flex: 0 0 100%;
     font-style: normal;
     font-family: 'Oswald', sans-serif;
     font-size: .78rem;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--amber);
     margin-top: 6px
 }

 /* həkim imzası */
 .vk-author {
     display: flex;
     align-items: center;
     gap: 18px;
     margin: 0 0 28px
 }

 .vk-author img {
     width: 96px;
     height: 96px;
     border-radius: 50%;
     object-fit: cover;
     flex: 0 0 auto;
     border: 4px solid var(--card);
     box-shadow: 0 6px 20px rgba(3, 38, 58, .16)
 }

 .vk-author b {
     display: block;
     font-family: 'Oswald', sans-serif;
     font-weight: 600;
     font-size: 1.12rem;
     color: var(--brand);
     line-height: 1.3
 }

 .vk-author span {
     font-size: .88rem;
     color: var(--ink-soft);
     line-height: 1.55
 }

 @media(max-width:479px) {
     .vk-author img {
         width: 76px;
         height: 76px
     }
 }

 /* məqalə şəkli */
 .vk-photo {
     margin: 34px auto 42px;
     max-width: 920px
 }

 .vk-photo img {
     width: 100%;
     height: auto;
     display: block;
     border-radius: 14px;
     border: 1px solid var(--edge)
 }

 .vk-photo figcaption {
     font-size: .85rem;
     color: var(--muted);
     line-height: 1.65;
     margin: 14px auto 0;
     text-align: center;
     max-width: 58ch
 }

 @media(max-width:719px) {
     .vk-hero {
         padding-top: 7.5rem
     }

     .vk-tl {
         grid-template-columns: 1fr;
         padding-top: 0;
         padding-left: 24px;
         gap: 0
     }

     .vk-rail {
         left: 4px;
         top: 8px;
         bottom: 8px;
         right: auto;
         width: 1px;
         height: auto
     }

     .vk-stop {
         text-align: left;
         padding: 0 0 22px
     }

     .vk-stop::before {
         top: 7px;
         left: -24px;
         transform: none
     }

     .vk-gap {
         position: static;
         width: auto;
         opacity: 1;
         transform: none;
         border-left: 2px solid var(--amber);
         padding: 2px 0 2px 14px;
         margin: 0 0 22px -10px
     }

     .vk-gap i {
         display: none
     }

     .vk-gap span {
         text-align: left;
         margin: 0
     }

     .vk-cgrid {
         grid-template-columns: 1fr 1fr;
         gap: 30px 16px;
         padding-top: 0
     }

     .vk-brk {
         display: none
     }

     .vk-wa {
         display: block;
         margin: 18px 0 0
     }
 }

 @media(prefers-reduced-motion:reduce) {
     .vk * {
         transition: none !important
     }

     .vk-gap {
         opacity: 1;
         transform: none
     }
 }