:root {
    --primary-green: #477403;
    --text-dark: #1c1c1c;
    --hover-green: #3b6300;
    --bg-color: #f8fafc;
    --surface-white: #FFFFFF;

    --radius: 5px;
    --border-color: #e2e6ea;
    --gray-text: #6b7280;
    --gray-bg: #f1f4f6;

    --success: #2f8a3e;
    --success-bg: #e7f5ea;
    --warning: #b8860b;
    --warning-bg: #fdf3d9;
    --info: #2563a8;
    --info-bg: #e7f0fb;
    --danger: #c0392b;
    --danger-bg: #fbe9e7;

    --shadow: 0 2px 10px rgba(0,0,0,0.05);

    /* derived tints of the primary green, used only for soft backgrounds */
    --green-tint-050: rgba(71,116,3,0.05);
    --green-tint-100: rgba(71,116,3,0.11);
}

*{ box-sizing:border-box; }

body{
    margin:0;
    background:var(--bg-color);
    font-family:'Vazirmatn', Tahoma, sans-serif;
    color:var(--text-dark);
    -webkit-font-smoothing:antialiased;
}

.page{
    max-width:1200px;
    margin:0 auto;
    padding: clamp(28px, 5vw, 64px) clamp(18px, 5vw, 40px) 80px;
}

/* ---------- Hero ---------- */
.hero{
    position:relative;
    display:grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items:center;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 56px;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--green-tint-100);
    color:var(--primary-green);
    font-size:13px;
    font-weight:600;
    padding:8px 18px;
    border-radius:var(--radius);
    margin-bottom:22px;
}

.hero h1{
    font-size: clamp(28px, 4vw, 44px);
    font-weight:800;
    line-height:1.35;
    margin:0 0 18px;
    color:var(--text-dark);
}

.hero p{
    font-size: clamp(14.5px, 1.6vw, 16.5px);
    line-height:2;
    color:var(--gray-text);
    margin:0;
    max-width: 46ch;
}

.hero-visual{
    position:relative;
    height: clamp(220px, 30vw, 340px);
    border-radius: var(--radius);
    background:
            radial-gradient(circle, var(--primary-green) 1.6px, transparent 1.6px) 0 0/18px 18px,
            var(--green-tint-050);
    overflow:hidden;
}
.hero-visual::before{
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(circle at 50% 50%, transparent 55%, var(--green-tint-050) 100%);
}
.hero-visual .blob{
    position:absolute;
    border-radius:50%;
    background: var(--green-tint-100);
    opacity:.9;
}
.hero-visual .blob.b1{ width:150px; height:150px; top:-40px; left:-30px; }
.hero-visual .blob.b2{ width:200px; height:200px; bottom:-70px; right:-60px; }
.hero-visual .badge{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width: clamp(84px, 12vw, 118px);
    height: clamp(84px, 12vw, 118px);
    border-radius:50%;
    background: var(--primary-green);
    box-shadow: 0 20px 40px -14px rgba(71,116,3,0.45);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
}
.hero-visual .badge i{
    color:#fff;
    font-size: clamp(28px, 4vw, 40px);
}

/* ---------- Intro strip ---------- */
.intro-strip{
    display:flex;
    align-items:center;
    gap:14px;
    background: var(--text-dark);
    color:#fff;
    border-radius: var(--radius);
    padding: 20px 26px;
    margin-bottom: 44px;
}
.intro-strip i{
    flex:none;
    font-size:20px;
    color: #b9d97a;
}
.intro-strip p{
    margin:0;
    font-size:14.5px;
    line-height:1.9;
    color: #e7e9e5;
}
.intro-strip strong{ color:#fff; }

/* ---------- Terms grid ---------- */
.terms-heading{
    text-align:center;
    margin: 0 auto 40px;
    max-width: 640px;
}
.terms-heading span{
    display:inline-block;
    background:var(--green-tint-100);
    color:var(--primary-green);
    font-size:13px;
    font-weight:600;
    padding:7px 16px;
    border-radius:var(--radius);
    margin-bottom:16px;
}
.terms-heading h2{
    font-size: clamp(22px, 3vw, 30px);
    font-weight:800;
    margin:0 0 12px;
    color:var(--text-dark);
}
.terms-heading p{
    color:var(--gray-text);
    font-size:14.5px;
    line-height:1.9;
    margin:0;
}

.terms-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.term-card{
    background: var(--surface-white);
    border:1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 28px 26px;
    display:flex;
    gap:18px;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.term-card:hover{
    box-shadow: var(--shadow);
    border-color: var(--green-tint-100);
    transform: translateY(-3px);
}

.term-num{
    flex:none;
    width:46px; height:46px;
    border-radius:var(--radius);
    background: var(--gray-bg);
    color: var(--primary-green);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:15px;
}

.term-icon{
    flex:none;
    width:46px; height:46px;
    border-radius:var(--radius);
    background: var(--green-tint-100);
    display:flex;
    align-items:center;
    justify-content:center;
}
.term-icon i{ font-size:19px; color:var(--primary-green); }

.term-body h3{
    margin:2px 0 8px;
    font-size:16.5px;
    font-weight:700;
    color: var(--text-dark);
}
.term-body p{
    margin:0;
    font-size:13.8px;
    line-height:2;
    color: var(--gray-text);
}

.term-card.highlight{
    background: linear-gradient(180deg, var(--green-tint-050), #fff);
    border-color: var(--green-tint-100);
}
.term-card.highlight .term-icon{
    background: var(--primary-green);
}
.term-card.highlight .term-icon i{ color:#fff; }

/* ---------- Note strip ---------- */
.note-strip{
    margin-top: 48px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    background: var(--green-tint-050);
    border-radius: var(--radius);
    padding: 24px 28px;
}
.note-strip p{
    margin:0;
    font-size:13.8px;
    line-height:1.9;
    color: var(--gray-text);
    max-width: 60ch;
}
.note-strip .cta{
    flex:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    background: var(--primary-green);
    color:#fff;
    font-size:14px;
    font-weight:600;
    padding:12px 22px;
    border-radius: var(--radius);
    white-space:nowrap;
    transition: background .2s ease;
}
.note-strip .cta:hover{ background: var(--hover-green); }
.note-strip .cta i{ font-size:14px; }

/* ---------- Tablet ---------- */
@media (max-width: 900px){
    .hero{
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .hero-visual{ order:-1; height:200px; }
    .terms-grid{ grid-template-columns: 1fr; }
    .intro-strip{ align-items:flex-start; }
}

/* ---------- Mobile ---------- */
@media (max-width: 560px){
    .page{ padding: 22px 14px 56px; }
    .hero{ padding-bottom:36px; margin-bottom:36px; }
    .term-card{
        flex-direction:column;
        padding: 22px 20px;
        gap:14px;
    }
    .note-strip{
        flex-direction:column;
        align-items:flex-start;
    }
    .note-strip .cta{ width:100%; justify-content:center; }
    .intro-strip{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce){
    .term-card{ transition:none; }
}