@font-face{
  font-family: 'vazirmedium';
  src: url('../fonts/Vazir-Medium-FD.woff2') format('woff2');
}
@font-face{
  font-family: 'vazirregular';
  src: url('../fonts/Vazir-Regular-FD.woff2') format('woff2');
}
@font-face{
  font-family: 'nastaliq';
  src: url('../fonts/IranNastaliq.woff2') format('woff2');
}
@font-face{
  font-family: 'nastaliq2';
  src: url('../fonts/IranNastaliq.v2.0.woff2') format('woff2');
}
@font-face {
  font-family: 'IranSansRegular';
  font-style: normal;
  font-weight: 400;  
  src: local('IranSansRegular'),
       url('../fonts/IRANSansWebFaNum.woff2') format('woff2'), /* will be preloaded */
       url('../fonts/IRANSansWebFaNum.woff') format('woff'),
       url('../fonts/IRANSansWebFaNum.eot') format('embedded-opentype');
} 
body, .font, .bd-dropdown select {
  font-family: "IranSansRegular", tahoma, sans-serif
}

:root {
  --fontfamilyR: 'IranSansRegular'; 
  --fontfamilyB: 'IranSansBold';
  --bodyColor: #333;
  --main-color: #007aff;
  --main-color-dark: #007aff;
  --second-color: #6d6e70;
  --second-color-dark: #2d3d55;
  --lh: 1.4rem;
  --td-scale: 0.9;
  --colspan: 1;
  --bodyBg: #f4f7fb;
  --border-color: #cfcee2;
  --headerBg: #f5f8ff;
  --darkFont-color: rgb(26, 26, 48);
  --white-color: #fff;
  --dark-bg: #1a1a30;
  --light-blue: #dce6ff;
  --dark-gray-gradient: linear-gradient(-101deg, #67798c 0%, #2d3d55 100%);
  --first-color-gradient: linear-gradient(-101deg, #ffa370 0%, #007aff 100%);
  

}

html {
  height: 100%;
}

body {
  font-size: 14px;
  color: var(--bodyColor);
  padding:105px 0 0 !important;
  margin: 0 !important;
  background: #fff; 
  line-height: 24px; 
  direction: rtl; 
  text-align: justify !important;
}

.rtl {
  direction: rtl;
}

.ltr {
  direction: ltr;
}
a {
  color: #245c86;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}
iframe{
  border-radius:5px
}
ul {
  line-height: 25px;
}

 
@font-face {
    font-family: "Font Awesome 5";
    font-style: normal;
    font-weight: 900;
    src: url(../fonts/webfonts/fa-solid-900.eot);
    src: url(../fonts/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(../fonts/webfonts/fa-solid-900.woff2) format("woff2"), url(../fonts/webfonts/fa-solid-900.woff) format("woff"), url(../fonts/webfonts/fa-solid-900.ttf) format("truetype"), url(../fonts/webfonts/fa-solid-900.svg#fontawesome) format("svg")
}
.fa, .fas {
    font-family: "Font Awesome 5";
    font-weight: 900
}
.container {
    width: 1344px ;
      max-width: 100%;
}
html {
    overflow-x: hidden;
    height: 100%;
}
body { 
    direction: rtl;
    position: relative; 
    font-size: 14px;
    color: #444444;
    width: 100%; 
    height: 100%;
    margin: 0;
    background-color: #f3f5f9;
    height: 100%;
      padding: 0 !important;
}
*{
    text-underline-offset: 5px;
}
table *{
    text-underline-offset: 5px;
}
a{
    text-decoration: none !important;
} 
ul {
    list-style: none;
    padding: 0;
} 
body { 
    background-color: #fff; 
}
header {
  border-bottom: none;
  width: 100%;
  background: url("../images/demo3-main-color-bg.png");
  box-shadow: none;
  height: 100px;
  margin: 0;
  position: static !important;
}
.otherpage header .col-md-3:last-child,
.otherpage header{
  background: #DE5337;
}
header .col-md-10{
  display: flex;
  gap: 10px;
  align-items: center;
  height: 100px;
}
header .col-md-3:last-child{
      height: 100px;
  background: #fff;
}
header .container::after,
header .container::before{
    display: none;
}
header .container a{
  color: #fff;
  padding: 15px;
  display: inline-block;
}
header .navlogo {
  position: relative;
  z-index: 10;
  text-align: center;
  display: inline-block;
  float: none;
  width: 60px;
  height: 60px;
  padding: 0 !important;
  margin-left: 20px;
}
header .navlogo img {
    width: 60px;
}
header .navmenu {
  margin: 0;
  padding: 0;
  background-color: transparent;
  background-image: linear-gradient(180deg, #383838 0%, #1E1E1E 70%);
  box-shadow: 0px 14px 12px 0px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
}
header .navmenu li {
    display: inline-block;
    margin: 0 ;
}
header .navmenu li a{
    color: #fff;
    padding: 15px;
      display: inline-block;
  margin: 0 !important;
}
header .header_line{
  position: relative;
  width: 100%;
  height: 100px;
}
header .header_line::before{
    content: '';
    background-image: url("../images/demo3-header-top-edge.png");
  background-position: bottom right;
  background-repeat: no-repeat;
    position: absolute;
left: -100%;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
} 
header .loginbtn {
  background-color: #ef5a3c;
  color: #fff;
  display: inline-flex;
  padding: 10px 20px;
  border-radius: 10px;
  line-height: normal;
  transition: all linear 0.2s;
  align-items: center;
  gap: 5px;
  box-shadow: 0px 6px 11px 0px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 1;
}
header .loginbtn:hover{
    background-color: #333;
}
header .mod-menu {
  margin: 0;
  padding: 0;
  background-color: transparent;
  background-image: linear-gradient(180deg, #383838 0%, #1E1E1E 70%);
  box-shadow: 0px 14px 12px 0px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
}
header .mod-menu a {
    color: #fff;
  padding: 15px;
  display: inline-block;
  margin: 0 !important;
}


/***************************//* ============ RESET ============ */  
html{scroll-behavior:smooth;font-size:17.5px;} /* base bump from browser default 16px — scales all rem-based text sitewide since almost every size in this file is in rem */
main{overflow-x:clip;} /* prevents horizontal scroll from wide decorative elements, without breaking position:sticky the way overflow-x:hidden on html/body does */
img,svg{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
ul, ol{list-style:none;}
input{font:inherit;}

:root{
--ink:#101a2b; --ink-soft:#1c2942; --ink-line:rgba(245,241,230,.12);
--paper:#faf8f3; --paper-2:#f0ebdd; --line:#e3dcc8;
--gold:#b8862f; --gold-bright:#d9ab4a; --gold-ghost:rgba(184,134,47,.12);
--emerald:#1f6f5c; --brick:#a3432f;
--text:#1a2235; --text-soft:#5c6478; --text-invert:#f5f1e6; --text-invert-soft:rgba(245,241,230,.66);
--font-fa:'Vazirmatn','Tahoma',sans-serif; --font-num:'Space Grotesk','Vazirmatn',sans-serif;
--container:1240px; --pad:clamp(1.25rem,4vw,2.75rem);
--r-sm:10px; --r-md:18px; --r-lg:28px; --r-pill:999px;
--shadow-sm:0 2px 10px rgba(16,25,43,.06); --shadow-md:0 16px 40px rgba(16,25,43,.10); --shadow-gold:0 14px 34px rgba(184,134,47,.30);
}
 
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px;}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}

.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:1.05rem;font-weight:700;color:var(--gold);margin-bottom:1rem;}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--gold-ghost);}
.section-head{max-width:640px;margin-bottom:3rem;}
.section-head.center{margin-inline:auto;text-align:center;}
.section-head h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.5rem);}
.section-head p{color:var(--text-soft);margin-top:.85rem;font-size:1.02rem;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.7rem;border-radius:var(--r-pill);font-weight:700;font-size:.98rem;white-space:nowrap;transition:all .3s cubic-bezier(0.25, 0.8, 0.25, 1);}
.btn:hover {transform:translateY(-3px); box-shadow:var(--shadow-md);}
.btn:active {transform:translateY(-1px);}
.btn-gold{background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:#241703;box-shadow:var(--shadow-gold);}
.btn-gold:hover{box-shadow:0 18px 40px rgba(184,134,47,.4);}
.btn-ghost{border:1.5px solid var(--line);color:var(--ink);background:rgba(255,255,255,.5);}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);}
.btn-outline-gold {border: 1.5px solid var(--gold);color: var(--gold);}
.btn-outline-gold:hover {background: var(--gold);color: #241703;}
.btn-ghost-invert{border:1.5px solid var(--ink-line);color:var(--text-invert);}
.btn-ghost-invert:hover{border-color:var(--gold-bright);color:var(--gold-bright);}
.btn-block{width:100%;}
section{padding-block:clamp(3.5rem,6vw,6.5rem);}

/* ============ ICONS ============ */
.icon { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -0.125em; }
.icon-filled { fill: currentColor; stroke: none; }

.site-header{position:sticky;top:0;z-index:100;background:rgba(250,248,243,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1rem;}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.25rem;color:var(--ink); transition:transform 0.3s ease;}
.brand:hover {transform: scale(1.02);}
.brand-mark{width:38px;height:38px;border-radius:11px;background:var(--ink);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;}
.brand-mark span{width:9px;height:9px;border-radius:50%;background:var(--gold-bright);}

.main-nav{display:flex;align-items:center;gap:2rem;}
.main-nav a{font-size:1.1rem;font-weight:600;color:var(--text-soft);transition:color .2s ease;position:relative;display:block;padding-bottom:4px;}
.main-nav a:hover,
.main-nav a.active{color:var(--ink);font-weight:700;transform:translateY(-2px);}
.main-nav a.active::after{content:"";position:absolute;bottom:-8px;left:0;right:0;height:3px;background:var(--gold);border-radius:2px;}
.header-actions{display:flex;align-items:center;gap:.75rem;}
.nav-toggle{display:none;width:42px;height:42px;border-radius:var(--r-sm);border:1.5px solid var(--line);align-items:center;justify-content:center;font-size:1.2rem;}

@media (max-width:960px){
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%; /* Hide completely to avoid overflow */
        width: 280px;
        max-width: 80vw;
        height: 100vh;
        background: var(--paper);
        flex-direction: column;
        align-items: flex-start;
        padding: 6.5rem 2rem 2rem;
        gap: 1.4rem;
        box-shadow: -10px 0 40px rgba(0,0,0,0.15);
        transition: right 0.4s ease;
        z-index: 1000;
    }
    .main-nav.is-open {
        right: 0;
    }
    .header-actions .btn-ghost{display:none;}
    .nav-toggle{display:flex; z-index: 1001; position: relative;}
}

.hero{position:relative;padding-block:clamp(3rem,7vw,6rem) clamp(4rem,8vw,7rem);overflow:hidden;}
.hero::before{content:"";position:absolute;inset-inline-end:-10%;top:-15%;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,var(--gold-ghost),transparent 68%);pointer-events:none;}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
.hero-copy h1{font-size:clamp(2.15rem,1.5rem + 2.6vw,3.5rem);letter-spacing:-.01em;}
.hero-copy h1 .mark{position:relative;color:var(--ink);white-space:nowrap;}
.hero-copy h1 .mark svg{position:absolute;inset-inline-start:0;bottom:-.2em;width:100%;height:.5em;}
.hero-copy h1 .mark path{fill:none;stroke:var(--gold-bright);stroke-width:7;stroke-linecap:round;stroke-dasharray:340;stroke-dashoffset:340;animation:draw 1.1s .5s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion:reduce){.hero-copy h1 .mark path{animation:none;stroke-dashoffset:0;}}
.hero-copy p.lead{margin-top:1.4rem;color:var(--text-soft);font-size:1.08rem;max-width:34rem;}
.hero-actions{display:flex;gap:1rem;margin-top:2.1rem;flex-wrap:wrap;}
.hero-stats{display:flex;gap:clamp(1.5rem,3vw,2.75rem);margin-top:2.75rem;padding-top:2rem;border-top:1px solid var(--line);flex-wrap:wrap;}
.hero-stats .stat b{font-size:1.65rem;font-weight:700;color:var(--ink);display:block;}
.hero-stats .stat span{font-size:.85rem;color:var(--text-soft);}
.hero-visual{position:relative;display:flex;justify-content:center;}
.answer-card{position:relative;width:min(100%,400px);background:#fff;border-radius:var(--r-lg);padding:2rem 1.9rem 2.2rem;box-shadow:var(--shadow-md);border:1px solid var(--line);transform:rotate(-2.5deg); transition:transform 0.4s ease, box-shadow 0.4s ease;}
.answer-card:hover { transform:rotate(0deg) translateY(-10px); box-shadow: 0 24px 50px rgba(16,25,43,.15); }
.answer-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;padding-bottom:1.1rem;border-bottom:1px dashed var(--line);}
.answer-card-head b{font-size:.95rem;}
.answer-card-head span{font-size:.8rem;color:var(--text-soft);}
.bubble-row{display:flex;align-items:center;gap:.9rem;margin-bottom:1.15rem;}
.bubble-row .q-num{font-size:.8rem;color:var(--text-soft);width:1.4rem;flex-shrink:0;}
.bubble-row .bubbles{display:flex;gap:.55rem;}
.bubble{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:.72rem;color:var(--text-soft);flex-shrink:0;}
.bubble--selected{border-color:var(--gold);background:var(--gold);color:#241703;box-shadow:0 4px 12px rgba(184,134,47,.4);animation:pop .5s 1.4s cubic-bezier(.34,1.56,.64,1) backwards;}
@keyframes pop{0%{transform:scale(0);}70%{transform:scale(1.18);}100%{transform:scale(1);}}
@media (prefers-reduced-motion:reduce){.bubble--selected{animation:none;}}
.answer-card-foot{margin-top:1.6rem;padding-top:1.3rem;border-top:1px dashed var(--line);display:flex;align-items:center;justify-content:space-between;}
.answer-card-foot .spark{width:96px;height:34px;}
.answer-card-foot .spark path{fill:none;stroke:var(--emerald);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:160;stroke-dashoffset:160;animation:draw2 1.4s .9s ease-out forwards;}
@keyframes draw2{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion:reduce){.answer-card-foot .spark path{animation:none;stroke-dashoffset:0;}}
.floating-chip{position:absolute;display:flex;align-items:center;gap:.55rem;background:var(--ink);color:var(--text-invert);padding:.75rem 1.05rem;border-radius:var(--r-pill);box-shadow:var(--shadow-md);font-size:.83rem;font-weight:600;}
.floating-chip i{color:var(--gold-bright);font-size:1.05rem;}
.floating-chip.chip-1{top:-1.2rem;inset-inline-start:-1.6rem;}
.floating-chip.chip-2{bottom:1.2rem;inset-inline-end:-2rem;background:#fff;color:var(--ink);border:1px solid var(--line);}
.floating-chip.chip-2 i{color:var(--emerald);}
@media (max-width:520px){.floating-chip{padding:.6rem .85rem;font-size:.75rem;}.floating-chip.chip-1{top:-1rem;inset-inline-start:-.6rem;}.floating-chip.chip-2{inset-inline-end:-.6rem;}}

.stats-band{background:var(--ink);color:var(--text-invert);padding-block:clamp(2.75rem,5vw,4rem);}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;}
.stats-grid .stat-item{text-align:center;border-inline-start:1px solid var(--ink-line); transition:transform 0.3s ease;}
.stats-grid .stat-item:hover{transform: translateY(-5px);}
.stats-grid .stat-item:first-child{border-inline-start:none;}
.stats-grid b{font-weight:700;font-size:clamp(1.7rem,1.3rem + 1.4vw,2.5rem);color:var(--gold-bright);display:block;}
.stats-grid span{font-size:.88rem;color:var(--text-invert-soft);margin-top:.4rem;display:block;}
@media (max-width:760px){.stats-grid{grid-template-columns:repeat(2,1fr);row-gap:2rem;}.stats-grid .stat-item:nth-child(3){border-inline-start:none;}}

.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.feature-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:2rem 1.75rem;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;}
.feature-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:transparent;}
.feature-icon{width:52px;height:52px;border-radius:14px;background:var(--gold-ghost);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1.3rem; transition:transform 0.3s ease;}
.feature-card:hover .feature-icon {transform: scale(1.1) rotate(5deg);}
.feature-card h3{font-size:1.1rem;margin-bottom:.6rem;}
.feature-card p{color:var(--text-soft);font-size:.94rem;}
@media (max-width:960px){.features-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.features-grid{grid-template-columns:1fr;}}

.subjects{background:var(--paper-2);}
.subjects-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem;}
.subject-card{background:#fff;border-radius:var(--r-md);padding:1.6rem 1.2rem;text-align:center;border:1px solid var(--line);transition:transform .3s ease,border-color .3s ease, box-shadow .3s ease;position:relative;overflow:hidden;}
.subject-card:hover{transform:translateY(-6px);border-color:var(--gold); box-shadow:var(--shadow-sm);}
.subject-card i{font-size:1.6rem;color:var(--gold);margin-bottom:.9rem; transition:transform 0.3s ease; display:block;}
.subject-card:hover i {transform: translateY(-3px) scale(1.1);}
.subject-card h4{font-size:.98rem;margin-bottom:.3rem;}
.subject-card span{font-size:.78rem;color:var(--text-soft);}
@media (max-width:960px){.subjects-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.subjects-grid{grid-template-columns:repeat(2,1fr);}}

.path-list{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;counter-reset:step;}
.path-item{position:relative;padding-inline-start:.2rem; transition:transform 0.3s ease;}
.path-item:hover {transform:translateY(-5px);}
.path-item .num{font-weight:700;font-size:2.4rem;color:transparent;-webkit-text-stroke:1.5px var(--line);display:block;margin-bottom:1rem; transition:all 0.3s ease;}
.path-item:hover .num {-webkit-text-stroke:1.5px var(--gold); color:var(--gold-ghost);}
.path-item h3{font-size:1.05rem;margin-bottom:.55rem;}
.path-item p{font-size:.9rem;color:var(--text-soft);}
.path-item:not(:last-child)::after{content:"";position:absolute;top:1.6rem;right:3.8rem;width:calc(100% - 2.8rem);height:1.5px;background:repeating-linear-gradient(to left,var(--line) 0 6px,transparent 6px 12px);display:none;}
@media (min-width:961px){.path-item:not(:last-child)::after{display:block;}}
@media (max-width:960px){.path-list{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.path-list{grid-template-columns:1fr;}}

.rank-swiper {padding-bottom: 3rem;padding-top: 1rem;overflow: hidden;}
.rank-swiper .swiper-slide {height: auto;}
.rank-card {background: #fff;border: 1px solid var(--line);border-radius: var(--r-md);padding: 1.9rem;position: relative;height: 100%;display: flex;flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease;}
.rank-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color:var(--gold); }
.rank-badge {display: inline-flex; align-items: baseline; gap: .4rem;background: var(--ink); color: var(--gold-bright);padding: .4rem .85rem; border-radius: var(--r-pill); font-weight: 700; font-size: 1rem;margin-bottom: 1.2rem; align-self: flex-start;}
.rank-badge span { font-size: .72rem; color: var(--text-invert-soft); font-weight: 500;}
.rank-card p.quote {font-size: .96rem; color: var(--text); margin-bottom: 1.4rem; flex-grow: 1;}
.rank-person {display: flex; align-items: center; gap: .8rem; padding-top: 1.2rem; border-top: 1px solid var(--line);}
.rank-avatar {width: 42px; height: 42px; border-radius: 50%;background: var(--gold-ghost); color: var(--gold);display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem;flex-shrink: 0;}
.rank-person b {display: block; font-size: .92rem;}
.rank-person span {font-size: .8rem; color: var(--text-soft);}
.rank-card i.bi-quote {position: absolute; top: 1.6rem; inset-inline-end: 1.7rem; font-size: 1.4rem; color: var(--line);}
.swiper-pagination-bullet-active {background-color: var(--gold) !important;}

.cta-band{background:var(--ink);color:var(--text-invert);border-radius:var(--r-lg);margin-inline:var(--pad);padding:clamp(2.5rem,6vw,4.5rem) clamp(1.75rem,6vw,4.5rem);position:relative;overflow:hidden;}
.cta-band::before{content:"";position:absolute;inset-inline-start:-8%;bottom:-30%;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(217,171,74,.18),transparent 70%);}
.cta-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:clamp(3rem, 6vw, 8rem);flex-wrap:wrap;}
.cta-copy h2{color:var(--text-invert);font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);max-width:42rem;}
.cta-copy p{color:var(--text-invert-soft);margin-top:.8rem;}
.cta-form{display:flex;gap:.7rem;flex-wrap:wrap;}
.cta-form input{background:rgba(255,255,255,.06);border:1.5px solid var(--ink-line);color:var(--text-invert);padding:.9rem 1.2rem;border-radius:var(--r-pill);min-width:230px; transition:border-color 0.3s ease, background 0.3s ease;}
.cta-form input:focus {border-color:var(--gold); background:rgba(255,255,255,.1); outline:none;}
.cta-form input::placeholder{color:var(--text-invert-soft);}
.cta-note{font-size:.78rem;color:var(--text-invert-soft);margin-top:.9rem;}

/* ============ BLOG SECTION ============ */
.blog-hero {padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);text-align: center;position: relative;overflow: hidden;}
.blog-hero::before {content: "";position: absolute;left: 50%;top: -20%;transform: translateX(-50%);width: 600px;height: 600px;border-radius: 50%;background: radial-gradient(circle, var(--gold-ghost), transparent 60%);pointer-events: none;z-index: -1;}
.blog-hero h1 {font-size: clamp(2rem, 1.5rem + 2vw, 3rem);margin-bottom: 1rem;}
.blog-hero p {color: var(--text-soft);font-size: 1.1rem;max-width: 600px;margin: 0 auto 2rem;}
.category-filters {display: flex;gap: 0.8rem;justify-content: center;flex-wrap: wrap;}
.filter-btn {padding: 0.6rem 1.2rem;border-radius: var(--r-pill);background: #fff;border: 1px solid var(--line);font-size: 0.9rem;font-weight: 500;color: var(--text-soft);transition: all 0.2s ease;}
.filter-btn:hover,.filter-btn.active {background: var(--ink);color: var(--text-invert);border-color: var(--ink); transform:translateY(-2px);}

.featured-section {padding-block: 2rem;}
.featured-card {display: grid;grid-template-columns: 1.2fr 1fr;gap: 2rem;background: #fff;border: 1px solid var(--line);border-radius: var(--r-lg);padding: 1.5rem;box-shadow: var(--shadow-sm);align-items: center;transition: box-shadow 0.3s ease;}
.featured-card > div { min-width: 0; }
.featured-card:hover {box-shadow: var(--shadow-md);}
.featured-img {width: 100%;height: 380px;border-radius: var(--r-md);background: linear-gradient(45deg, var(--ink), var(--ink-soft));position: relative;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.featured-img .icon {font-size: 5rem;color: var(--gold-ghost); width: 5rem; height: 5rem;}
.featured-img img {width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease;}
.featured-card:hover .featured-img img {transform: scale(1.05);}
.featured-content {padding-inline: 1rem;}
.featured-tag {display: inline-flex;align-items: center;gap: 0.4rem;background: var(--gold-ghost);color: var(--gold);padding: 0.4rem 1rem;border-radius: var(--r-pill);font-size: 0.85rem;font-weight: 700;margin-bottom: 1.2rem;}
.featured-content h2 {font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);margin-bottom: 1rem; transition:color 0.3s ease;}
.featured-card:hover .featured-content h2 {color: var(--gold);}
.featured-content p {color: var(--text-soft);margin-bottom: 1.5rem;font-size: 1.05rem;}
.meta-info {display: flex;align-items: center;gap: 1.5rem;color: var(--text-soft);font-size: 0.85rem;}
.meta-info div {display: flex;align-items: center;gap: 0.4rem;}
.meta-info .icon {font-size: 1rem;color: var(--gold);}

@media (max-width: 900px) {
.featured-card {grid-template-columns: 1fr;gap: 1.5rem;padding: 1rem;}
.featured-img {height: 260px;}
.featured-content {padding-inline: 0.5rem;padding-bottom: 1rem;}
}

.articles-section {padding-block: 4rem;}
.articles-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 2rem;}
.article-card {background: #fff;border: 1px solid var(--line);border-radius: var(--r-md);overflow: hidden;display: flex;flex-direction: column;transition:transform 0.3s ease,box-shadow 0.3s ease,border-color 0.3s ease;}
.article-card:hover {transform: translateY(-5px);box-shadow: var(--shadow-md);border-color: var(--gold);}
.article-img {height: 220px;position: relative;background: var(--paper-2);display: flex;align-items: center;justify-content: center; overflow:hidden;}
.article-img .icon {font-size: 3rem;color: var(--gold-ghost); width: 3rem; height: 3rem;}
.article-img img {width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease;}
.article-card:hover .article-img img {transform: scale(1.05);}
.badge {position: absolute;top: 1rem;inset-inline-start: 1rem;background: var(--ink);color: var(--gold-bright);padding: 0.35rem 0.8rem;border-radius: var(--r-pill);font-size: 0.75rem;font-weight: 700; z-index:2;}
.article-body {padding: 1.5rem;flex-grow: 1;display: flex;flex-direction: column;}
.article-body h3 {font-size: 1.15rem;margin-bottom: 0.75rem;line-height: 1.5; transition:color 0.3s ease;}
.article-card:hover .article-body h3 a {color: var(--gold);}
.article-body p {color: var(--text-soft);font-size: 0.92rem;margin-bottom: 1.5rem;flex-grow: 1;}

.article-footer {display: flex;align-items: center;justify-content: space-between;padding: 1.2rem 1.5rem;border-top: 1px dashed var(--line);font-size: 0.8rem;color: var(--text-soft);background: #fff;}
.article-author {display: flex;align-items: center;gap: 0.5rem;}
.article-author span {font-weight: 600;color: var(--ink);}
.author-avatar {width: 32px;height: 32px;border-radius: 50%;background: var(--gold-ghost);color: var(--gold);display: flex;align-items: center;justify-content: center;font-size: 0.85rem;font-weight: bold;}
.read-more {display: inline-flex;align-items: center;gap: 0.3rem;font-weight: 700;color: var(--gold);font-size: 0.85rem;transition: gap 0.2s ease;}
.article-card:hover .read-more {gap: 0.6rem;}

@media (max-width: 960px) {.articles-grid {grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 650px) {.articles-grid {grid-template-columns: 1fr;}}

/* Pagination Fixes */
ul.pagination { display: flex; justify-content: center; gap: 0.4rem; margin-top: 3rem; padding: 0; list-style: none; flex-wrap:wrap;}
ul.pagination li { margin: 0; }
ul.pagination > li > a, ul.pagination > li > span { min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; border: 1px solid var(--line);  font-weight: 600; transition: all 0.2s ease; color: var(--text-soft); background: #fff; text-decoration: none;}
ul.pagination > li.active > span, ul.pagination > li.active > a { background: var(--ink); color: var(--text-invert); border-color: var(--ink); }
ul.pagination > li > a:hover { border-color: var(--gold); color: var(--gold); transform:translateY(-2px); }
ul.pagination > li.disabled > span, ul.pagination > li.disabled > a { opacity: 0.5; background: transparent; border-color: var(--line); cursor: not-allowed; }

/* Completely hide Joomla's default icons which render as blank spaces */
ul.pagination span[class^="icon-"], ul.pagination span[class*=" icon-"], ul.pagination span[aria-hidden="true"] { display: none !important; }

/* Force the visually hidden text (like 'Next', 'Prev') to display as normal text */
ul.pagination .visually-hidden, ul.pagination .sr-only { display: block !important; position: static !important; width: auto !important; height: auto !important; margin: 0 !important; clip: auto !important; clip-path: none !important; overflow: visible !important;  font-size: .85rem; font-weight: 700; color: inherit; line-height:1;}


/* ============ SINGLE ARTICLE ============ */
.breadcrumb-bar {
padding-block: 1.1rem;
border-bottom: 1px solid var(--line);
background: var(--paper-2);
}
.breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
font-size: 0.86rem;
color: var(--text-soft);
}
.breadcrumb a:hover {
color: var(--gold);
}
.breadcrumb .sep {
opacity: 0.5;
font-size: 0.75rem;
}
.breadcrumb .current {
color: var(--ink);
font-weight: 600;
max-width: 40ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.article-hero {
padding-block: clamp(2.25rem, 5vw, 3.5rem) 2rem;
}
.article-hero .container {
max-width: 900px;
}
.post-tag {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: var(--gold-ghost);
color: var(--gold);
padding: 0.4rem 1rem;
border-radius: var(--r-pill);
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 1.25rem;
}
.article-hero h1 {
font-size: clamp(1.7rem, 1.2rem + 2vw, 2.75rem);
margin-bottom: 1.25rem;
}
.article-lede {
font-size: 1.15rem;
color: var(--text-soft);
max-width: 68ch;
margin-bottom: 1.75rem;
}
.post-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
padding-block: 1.25rem;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.post-author {
display: flex;
align-items: center;
gap: 0.75rem;
}
.post-author .name {
font-weight: 700;
color: var(--ink);
font-size: 0.95rem;
}
.post-author .role {
font-size: 0.82rem;
color: var(--text-soft);
}
.post-facts {
display: flex;
align-items: center;
gap: 1.25rem;
color: var(--text-soft);
font-size: 0.85rem;

margin-inline-start: auto;
flex-wrap: wrap;
}
.post-facts div {
display: flex;
align-items: center;
gap: 0.4rem;
}
.post-facts .icon {
color: var(--gold);
}

.feature-image {
max-width: 900px;
margin: 2.25rem auto 0;
padding-inline: var(--pad);
}
.feature-image-inner {
height: clamp(220px, 40vw, 440px);
border-radius: var(--r-lg);
background: linear-gradient(135deg, var(--ink), var(--ink-soft));
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.feature-image-inner::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 20%, var(--gold-ghost), transparent 60%);
}
.feature-image-inner .icon {
width: 4.5rem;
height: 4.5rem;
color: rgba(217, 171, 74, 0.35);
stroke-width: 1.4;
position: relative;
z-index: 1;
}
.feature-image-inner img {
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: 2;
}
.feature-caption {
text-align: center;
font-size: 0.85rem;
color: var(--text-soft);
margin-top: 0.85rem;
}

.article-body-section {
padding-block: 3rem clamp(3rem, 6vw, 5rem);
}
.article-layout {
display: grid;
grid-template-columns: 1fr 280px;
gap: 3.5rem;
max-width: 1180px;
margin-inline: auto;
align-items: start;
}

.prose {
max-width: 68ch;
font-size: 1.18rem;
line-height: 2;
color: var(--text);
}
.prose > * + * {
margin-top: 1.5rem;
}
.prose h2 {
font-size: 1.5rem;
margin-top: 3rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.prose h2 .num {

font-size: 0.95rem;
font-weight: 700;
color: var(--gold);
background: var(--gold-ghost);
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.prose h3 {
font-size: 1.2rem;
margin-top: 2rem;
}
.prose p {
color: var(--text);
}
.prose strong {
color: var(--ink);
font-weight: 700;
}
.prose ul,
.prose ol {
padding-inline-start: 1.4rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.prose ul {
list-style: none;
}
.prose ul li {
position: relative;
padding-inline-start: 1.6rem;
}
.prose ul li::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0.55em;
width: 8px;
height: 8px;
border-radius: 2px;
background: var(--gold);
transform: rotate(45deg);
}
.prose ol {
list-style: none;
counter-reset: steps;
}
.prose ol li {
counter-increment: steps;
position: relative;
padding-inline-start: 2.2rem;
}
.prose ol li::before {
content: counter(steps);
position: absolute;
inset-inline-start: 0;
top: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--ink);
color: var(--gold-bright);

font-size: 0.78rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.prose blockquote {
border-inline-start: 4px solid var(--gold);
background: var(--paper-2);
border-radius: 0 var(--r-md) var(--r-md) 0;
padding: 1.5rem 1.75rem;
font-size: 1.1rem;
font-weight: 600;
color: var(--ink);
position: relative;
}
html[dir="rtl"] .prose blockquote {
border-inline-start: 4px solid var(--gold);
border-radius: var(--r-md) 0 0 var(--r-md);
}
.prose blockquote cite {
display: block;
margin-top: 0.6rem;
font-style: normal;
font-size: 0.85rem;
font-weight: 500;
color: var(--text-soft);
}
.callout {
display: flex;
gap: 1rem;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 1.4rem 1.6rem;
box-shadow: var(--shadow-sm);
}
.callout .icon {
width: 1.4rem;
height: 1.4rem;
color: var(--emerald);
flex-shrink: 0;
margin-top: 0.15rem;
}
.callout strong {
display: block;
margin-bottom: 0.3rem;
color: var(--ink);
}
.callout p {
font-size: 0.95rem;
color: var(--text-soft);
}
.pull-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.pull-stat {
background: var(--ink);
border-radius: var(--r-md);
padding: 1.4rem 1.2rem;
text-align: center;
}
.pull-stat .num {

font-size: 1.9rem;
font-weight: 700;
color: var(--gold-bright);
display: block;
}
.pull-stat .label {
font-size: 0.8rem;
color: var(--text-invert-soft);
margin-top: 0.3rem;
}

.step-list {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 1.75rem 0;
}
.step-list .step-row {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.step-list .step-num {
flex-shrink: 0;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--ink);
color: var(--gold-bright);

font-weight: 700;
font-size: 0.95rem;
display: flex;
align-items: center;
justify-content: center;
}
.step-list .step-text {
padding-top: 0.15rem;
color: var(--text-soft);
}
.step-list .step-text strong {
color: var(--ink);
}
.prose figure {
margin: 0;
}
.prose figure .fig-box {
height: 220px;
border-radius: var(--r-md);
background: var(--paper-2);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
}
.prose figure .fig-box .icon {
width: 2.6rem;
height: 2.6rem;
color: var(--gold-ghost);
}
.prose figcaption {
margin-top: 0.6rem;
font-size: 0.85rem;
color: var(--text-soft);
text-align: center;
}

.post-tags {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid var(--line);
}
.post-tags a {
padding: 0.45rem 1rem;
border-radius: var(--r-pill);
background: var(--paper-2);
border: 1px solid var(--line);
font-size: 0.85rem;
color: var(--text-soft);
transition: all 0.2s ease;
}
.post-tags a:hover {
border-color: var(--gold);
color: var(--gold);
}

.share-row {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.share-row .label {
font-size: 0.9rem;
font-weight: 700;
color: var(--ink);
}
.share-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.share-btn:hover {
background: var(--ink);
border-color: var(--ink);
color: var(--gold-bright);
}
.share-btn.is-copied {
background: var(--emerald);
border-color: var(--emerald);
color: #fff;
}

.author-card {
display: flex;
gap: 1.25rem;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 1.75rem;
margin-top: 2.5rem;
box-shadow: var(--shadow-sm);
}
.author-card .author-avatar {
width: 64px;
height: 64px;
font-size: 1.2rem;
}
.author-card .name {
font-size: 1.05rem;
margin-bottom: 0.2rem;
}
.author-card .role {
color: var(--gold);
font-weight: 600;
font-size: 0.85rem;
margin-bottom: 0.6rem;
}
.author-card p {
font-size: 0.92rem;
color: var(--text-soft);
}

.sidebar {
position: sticky;
top: 6rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.side-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 1.5rem;
box-shadow: var(--shadow-sm);
}
.side-card h4 {
font-size: 0.95rem;
margin-bottom: 1.1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.side-card h4 .icon {
color: var(--gold);
}
.toc-list {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.toc-list a {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.88rem;
color: var(--text-soft);
padding: 0.55rem 0.6rem;
border-radius: var(--r-sm);
transition: all 0.2s ease;
line-height: 1.4;
}
.toc-list a .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--line);
flex-shrink: 0;
transition: background 0.2s ease;
}
.toc-list a:hover,
.toc-list a.active {
background: var(--paper-2);
color: var(--ink);
font-weight: 600;
}
.toc-list a.active .dot {
background: var(--gold);
}
.progress-track {
height: 4px;
background: var(--paper-2);
border-radius: var(--r-pill);
margin-top: 1.1rem;
overflow: hidden;
}
.progress-fill {
height: 100%;
width: 28%;
background: var(--gold);
border-radius: var(--r-pill);
}

.promo-card {
background: var(--ink);
border-radius: var(--r-md);
padding: 1.75rem 1.5rem;
color: var(--text-invert);
text-align: center;
position: relative;
overflow: hidden;
}
.promo-card::before {
content: "";
position: absolute;
top: -30%;
inset-inline-end: -20%;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle, var(--gold-ghost), transparent 65%);
}
.promo-card .icon-wrap {
width: 48px;
height: 48px;
border-radius: 14px;
background: var(--gold-ghost);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
position: relative;
}
.promo-card .icon-wrap .icon {
color: var(--gold-bright);
width: 1.5rem;
height: 1.5rem;
}
.promo-card h4 {
color: var(--text-invert);
font-size: 1.05rem;
margin-bottom: 0.5rem;
position: relative;
}
.promo-card p {
font-size: 0.85rem;
color: var(--text-invert-soft);
margin-bottom: 1.25rem;
position: relative;
}
.promo-card .btn {
width: 100%;
position: relative;
}

@media (max-width: 992px) {
.article-layout {
  grid-template-columns: 1fr;
}
.sidebar {
  position: static;
  flex-direction: row;
  overflow-x: auto;
}
.side-card {
  min-width: 260px;
}
}
@media (max-width: 720px) {
.post-meta {
  flex-direction: column;
  align-items: flex-start;
}
.post-facts {
  margin-inline-start: 0;
}
.pull-stats {
  grid-template-columns: 1fr;
}
.author-card {
  flex-direction: column;
}
.sidebar {
  flex-direction: column;
}
.side-card {
  min-width: 0;
}
}

.related-section {
padding-block: clamp(3rem, 6vw, 4.5rem);
background: var(--paper-2);
border-top: 1px solid var(--line);
}
.related-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 2rem;
gap: 1rem;
flex-wrap: wrap;
}
.related-head h2 {
font-size: 1.5rem;
}
.related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
}
@media (max-width: 900px) {
.related-grid {
  grid-template-columns: 1fr;
}
}

.site-footer {background: var(--ink);color: var(--text-invert-soft);padding-top: clamp(3rem, 6vw, 5rem);}
.footer-grid {display: grid;grid-template-columns: 1.4fr 1fr 1fr 1.2fr;gap: 2.5rem;padding-bottom: 3rem;border-bottom: 1px solid var(--ink-line);}
.footer-brand p {margin-top: 1rem;font-size: 0.9rem;max-width: 24rem;}
.footer-brand .brand {color: var(--text-invert);}
.social-row {display: flex;gap: 0.65rem;margin-top: 1.5rem;}
.social-row a {width: 38px;height: 38px;border-radius: 50%;border: 1px solid var(--ink-line);display: flex;align-items: center;justify-content: center;transition:background 0.3s ease,border-color 0.3s ease, transform 0.3s ease;}
.social-row a:hover {background: var(--gold);border-color: var(--gold);color: #241703; transform:translateY(-3px);}
.footer-col h4 {color: var(--text-invert);font-size: 0.95rem;margin-bottom: 1.3rem;}
.footer-col ul {list-style: none; padding: 0; margin: 0;}
.footer-col li {margin-bottom: 0.85rem;font-size: 0.9rem;}
.footer-col a {transition:color 0.3s ease, padding-right 0.3s ease;}
.footer-col a:hover {color: var(--gold-bright); padding-right: 5px;}
.footer-col li.contact-line {display: flex;align-items: flex-start;gap: 0.6rem;}
.footer-col li.contact-line i {color: var(--gold-bright);margin-top: 0.2rem;}
.footer-bottom {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 1rem;padding-block: 1.5rem;font-size: 0.82rem;}

@media (max-width: 900px) {.footer-grid {grid-template-columns: 1fr 1fr;}}
@media (max-width: 560px) {
.footer-grid {grid-template-columns: 1fr;}
.cta-inner{flex-direction:column;align-items:flex-start;}
}
@media (max-width:900px){
.hero-inner{grid-template-columns:1fr;}
.hero-visual{order:-1;margin-bottom:1rem;}
.answer-card{transform:rotate(0);width:min(100%,340px);}
}