/*
 * NSB Homepage Introduction
 * Component version: 0.1.4
 * Cache-busted visual refinement.
 */
.nsb-introduction{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding-block:clamp(24px,2.7vw,38px);
    color:#321426;
    background:
        radial-gradient(circle at 78% 38%,rgba(255,255,255,.66),transparent 32%),
        radial-gradient(circle at 17% 54%,rgba(255,247,252,.72),transparent 31%),
        linear-gradient(126deg,#f8e3ef 0%,#f5dbea 46%,#f0d1e3 100%);
    border-block:1px solid rgba(183,123,24,.32);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72),inset 0 -1px 0 rgba(255,255,255,.42);
}
.nsb-introduction::before{
    content:"";
    position:absolute;
    z-index:0;
    inset-inline:4%;
    inset-block-start:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(211,161,50,.95),rgba(255,238,169,.9),rgba(211,161,50,.95),transparent);
    box-shadow:0 0 10px rgba(218,165,47,.38);
}
.nsb-introduction::after{
    content:"";
    position:absolute;
    z-index:0;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px),
        linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px);
    background-size:84px 84px;
    mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.32),transparent);
    opacity:.18;
}
.nsb-introduction-decoration-one,.nsb-introduction-decoration-two{display:none!important}
.nsb-introduction-hu-field{
    position:absolute;
    z-index:1;
    inset:-3% -1%;
    width:102%;
    height:106%;
    overflow:visible;
    pointer-events:none;
    user-select:none;
    opacity:.42;
    filter:drop-shadow(0 0 5px rgba(231,178,50,.5)) drop-shadow(0 0 14px rgba(211,145,26,.22));
}
.nsb-introduction-hu-field-mobile{display:none}
.nsb-introduction-hu-glyphs{
    font-family:"Noto Nastaliq Urdu","Noto Naskh Arabic",serif;
    font-weight:700;
}
.nsb-introduction-hu-glyphs text{opacity:.48;stroke:rgba(255,239,165,.5);stroke-width:.65px;paint-order:stroke fill}
.nsb-introduction-hu-glyphs text:nth-child(4n+1){opacity:.64}
.nsb-introduction-hu-glyphs text:nth-child(5n+2){opacity:.36}
.nsb-introduction-hu-glyphs text:nth-child(8){opacity:.14}
.nsb-introduction-hu-rings{stroke-width:1.2;stroke-dasharray:2 10;opacity:.28}
.nsb-introduction-hu-sparkles{opacity:.62}
.nsb-introduction-layout{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:minmax(290px,350px) minmax(0,1fr);
    grid-template-areas:"media content";
    align-items:center;
    gap:clamp(42px,5.3vw,78px);
    direction:ltr;
    min-height:0;
}
.nsb-introduction:not(.nsb-introduction-has-image) .nsb-introduction-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"content"}
.nsb-introduction-media{
    grid-area:media;
    position:relative;
    isolation:isolate;
    width:min(100%,350px);
    margin:0 auto;
}
.nsb-introduction-media::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:7% -8% -5%;
    border-radius:52% 52% 28px 28px/20% 20% 28px 28px;
    background:radial-gradient(circle at 50% 18%,rgba(255,240,176,.52),transparent 44%),rgba(165,37,105,.12);
    border:1px solid rgba(211,161,50,.46);
    box-shadow:0 0 34px rgba(213,161,45,.3);
}
.nsb-introduction-image-frame{
    position:relative;
    z-index:2;
    overflow:hidden;
    aspect-ratio:4/5;
    border:2px solid rgba(210,157,39,.88);
    border-radius:50% 50% 25px 25px/20% 20% 25px 25px;
    background:#ead6e2;
    box-shadow:
        0 22px 48px rgba(80,25,58,.2),
        0 8px 22px rgba(139,20,93,.14),
        0 0 0 5px rgba(255,255,255,.38),
        0 0 32px rgba(222,171,52,.28);
}
.nsb-introduction-image-frame::before{
    content:"";
    position:absolute;
    z-index:3;
    inset:9px;
    border:1px solid rgba(255,243,194,.78);
    border-radius:50% 50% 18px 18px/18% 18% 18px 18px;
    box-shadow:inset 0 0 16px rgba(255,234,154,.16);
    pointer-events:none;
}
.nsb-introduction-image-frame::after{
    content:"";
    position:absolute;
    z-index:3;
    inset-inline:13%;
    inset-block-end:0;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg,transparent,#e4b64d,#fff2b6,#c98b22,transparent);
    box-shadow:0 0 12px rgba(222,169,43,.55);
    pointer-events:none;
}
.nsb-introduction-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.nsb-introduction-content{
    grid-area:content;
    max-width:880px;
    justify-self:end;
    padding:clamp(21px,2.1vw,30px) clamp(22px,2.4vw,36px);
    border:1px solid rgba(151,49,105,.16);
    border-radius:24px;
    background:linear-gradient(136deg,rgba(255,251,254,.74),rgba(255,245,251,.58));
    box-shadow:0 20px 45px rgba(95,34,67,.1),inset 0 1px 0 rgba(255,255,255,.8);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    text-align:right;
}
.nsb-introduction:not(.nsb-introduction-has-image) .nsb-introduction-content{max-width:920px;justify-self:center}
.nsb-introduction-kicker{
    display:inline-flex;
    align-items:center;
    gap:11px;
    margin:0 0 2px;
    color:#94145f;
    font-family:"Noto Naskh Arabic",serif;
    font-size:clamp(18px,1.3vw,21px);
    font-weight:800;
    letter-spacing:.01em;
    text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.nsb-introduction-kicker::before{
    content:"";
    width:52px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,#9d1767,#d7a836,#fff0a5);
    box-shadow:0 0 8px rgba(216,165,47,.5);
}
.nsb-introduction h2{
    margin:0;
    color:#2e1024;
    font-family:"Noto Nastaliq Urdu",serif;
    font-size:clamp(39px,3.55vw,56px);
    font-weight:800;
    line-height:1.58;
    text-wrap:balance;
    text-shadow:0 2px 0 rgba(255,255,255,.9),0 6px 20px rgba(89,29,63,.08);
}
.nsb-introduction-copy{
    max-width:700px;
    margin-block-start:clamp(10px,1.2vw,16px);
    color:#432139;
    font-family:"Noto Naskh Arabic",serif;
    font-size:clamp(18px,1.38vw,21px);
    font-weight:700;
    line-height:1.95;
    text-shadow:0 1px 0 rgba(255,255,255,.84);
}
.nsb-introduction-copy p{margin:0}
.nsb-introduction-actions{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap;margin-block-start:clamp(17px,1.8vw,24px)}
.nsb-introduction-button{
    min-height:48px;
    padding:9px 22px;
    border:1px solid transparent;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:"Noto Naskh Arabic",serif;
    font-size:17px;
    font-weight:800;
    line-height:1.35;
    transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease;
}
.nsb-introduction-button-primary{
    color:#fff;
    border-color:#94145f;
    background:linear-gradient(135deg,#9c1765,#7d0f50);
    box-shadow:0 11px 25px rgba(139,20,93,.22),0 0 0 1px rgba(255,255,255,.22) inset;
}
.nsb-introduction-button-primary:hover,.nsb-introduction-button-primary:focus-visible{color:#fff;background:linear-gradient(135deg,#861052,#67103f);transform:translateY(-2px);box-shadow:0 15px 30px rgba(139,20,93,.28)}
.nsb-introduction-button-secondary{
    color:#7f144f;
    border-color:rgba(156,23,101,.3);
    background:rgba(255,252,254,.8);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.88);
}
.nsb-introduction-button-secondary:hover,.nsb-introduction-button-secondary:focus-visible{color:#66103f;border-color:rgba(156,23,101,.52);background:#fff;transform:translateY(-2px);box-shadow:0 12px 25px rgba(73,24,52,.1)}
@media(max-width:980px){
    .nsb-introduction{padding-block:24px 32px}
    .nsb-introduction-layout{grid-template-columns:minmax(250px,315px) minmax(0,1fr);gap:clamp(30px,4vw,48px)}
    .nsb-introduction-media{width:min(100%,315px)}
    .nsb-introduction-content{padding:20px 24px}
    .nsb-introduction h2{font-size:clamp(35px,5vw,50px)}
    .nsb-introduction-copy{font-size:18px;line-height:1.92}
}
@media(max-width:760px){
    .nsb-introduction{padding-block:26px 32px}
    .nsb-introduction-hu-field{display:none}
    .nsb-introduction-hu-field-mobile{display:block;position:absolute;z-index:1;inset:0;width:100%;height:100%;pointer-events:none;user-select:none;opacity:.4;filter:drop-shadow(0 0 5px rgba(231,178,50,.5)) drop-shadow(0 0 14px rgba(211,145,26,.22))}
    .nsb-introduction-hu-mobile-glyphs{font-family:"Noto Nastaliq Urdu","Noto Naskh Arabic",serif;font-weight:700}
    .nsb-introduction-hu-mobile-glyphs text{opacity:.48;stroke:rgba(255,239,165,.5);stroke-width:.65px;paint-order:stroke fill}
    .nsb-introduction-hu-mobile-glyphs text:nth-child(3n+1){opacity:.62}
    .nsb-introduction-hu-mobile-rings{stroke-width:1.2;stroke-dasharray:2 10;opacity:.3}
    .nsb-introduction-hu-mobile-sparkles{opacity:.68}
    .nsb-introduction-layout,.nsb-introduction:not(.nsb-introduction-has-image) .nsb-introduction-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"media" "content";gap:24px}
    .nsb-introduction:not(.nsb-introduction-has-image) .nsb-introduction-layout{grid-template-areas:"content"}
    .nsb-introduction-media{width:min(74%,315px)}
    .nsb-introduction-content{max-width:680px;justify-self:center;padding:20px 20px;text-align:center}
    .nsb-introduction-kicker{justify-content:center}
    .nsb-introduction-kicker::before{width:34px}
    .nsb-introduction h2{font-size:clamp(33px,8vw,46px);line-height:1.62}
    .nsb-introduction-copy{margin-inline:auto;font-size:18px;line-height:1.92;text-align:right}
    .nsb-introduction-actions{justify-content:center;margin-block-start:20px}
}
@media(max-width:480px){
    .nsb-introduction{padding-block:22px 28px}
    .nsb-introduction-media{width:min(82%,295px)}
    .nsb-introduction-content{padding:18px 16px;border-radius:20px}
    .nsb-introduction h2{font-size:clamp(30px,8.9vw,39px)}
    .nsb-introduction-copy{font-size:17px;line-height:1.88}
    .nsb-introduction-actions{display:grid;grid-template-columns:1fr;width:100%;gap:9px}
    .nsb-introduction-button{width:100%;min-height:47px}
}
@media(prefers-reduced-motion:reduce){.nsb-introduction-button{transition:none}}


/* v0.1.4 — approved gentle lift effects only. */
.nsb-introduction-media,
.nsb-introduction-image-frame,
.nsb-introduction-kicker {
    transform-origin:center;
    transition:transform .34s cubic-bezier(.2,.72,.25,1),box-shadow .34s ease,filter .34s ease,color .34s ease,text-shadow .34s ease;
}
.nsb-introduction-kicker{position:relative;z-index:4;cursor:default}
@media(hover:hover) and (pointer:fine){
    .nsb-introduction-media:hover{transform:translateY(-9px) scale(1.012)}
    .nsb-introduction-media:hover .nsb-introduction-image-frame{box-shadow:0 30px 58px rgba(80,25,58,.24),0 11px 28px rgba(139,20,93,.18),0 0 0 5px rgba(255,255,255,.42),0 0 44px rgba(222,171,52,.42)}
    .nsb-introduction-kicker:hover,.nsb-introduction-content:hover .nsb-introduction-kicker{color:#7d0f50;transform:translateY(-5px);text-shadow:0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(139,20,93,.2),0 0 12px rgba(222,171,52,.24)}
}
@media(prefers-reduced-motion:reduce){.nsb-introduction-media,.nsb-introduction-image-frame,.nsb-introduction-kicker{transition:none}}