/* ===== الرئيسية — جمعية التنمية الأهلية (منقول حرفيًا من التصميم الحي على tbm.sa) ===== */
.tn-reveal{ opacity:0; transform:translateY(30px); transition:opacity .7s cubic-bezier(.2,.65,.3,1),transform .7s cubic-bezier(.2,.65,.3,1); }
.tn-reveal.tn-in{ opacity:1; transform:none; }
.tn-star{ width:auto; height:22px; flex:none; display:block; }

/* ===== الهيرو ===== */
.tn-hero{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--tn-primary-dark); text-align:center; }
.tn-hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.tn-hero-overlay{ position:absolute; inset:0; background:linear-gradient(105deg,rgba(29,42,50,.92) 0%,rgba(29,42,50,.7) 45%,rgba(29,42,50,.4) 100%); z-index:1; }
.tn-hero-particles{ position:absolute; inset:0; z-index:2; pointer-events:none; background-image:radial-gradient(circle at 12% 18%,rgba(199,154,60,.55) 1.5px,transparent 1.5px),radial-gradient(circle at 32% 62%,rgba(199,154,60,.4) 1.5px,transparent 1.5px),radial-gradient(circle at 58% 22%,rgba(199,154,60,.5) 1.5px,transparent 1.5px),radial-gradient(circle at 78% 68%,rgba(199,154,60,.4) 1.5px,transparent 1.5px),radial-gradient(circle at 88% 30%,rgba(199,154,60,.5) 1.5px,transparent 1.5px),radial-gradient(circle at 22% 85%,rgba(199,154,60,.35) 1.5px,transparent 1.5px),radial-gradient(circle at 68% 88%,rgba(199,154,60,.35) 1.5px,transparent 1.5px); background-size:100% 100%; }
.tn-hero-carousel{ position:absolute; inset:0; z-index:2; opacity:0; visibility:hidden; transition:opacity 1s ease; }
.tn-hero-carousel.tn-show{ opacity:1; visibility:visible; }
.tn-hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; overflow:hidden; display:none; }
.tn-hero-slide.tn-match{ display:block; }
.tn-hero-slide::before{ content:''; position:absolute; inset:-60px; background:var(--tn-slide) center/cover no-repeat; filter:blur(34px) saturate(1.1); }
.tn-hero-slide img{ position:relative; display:block; width:100%; height:100%; object-fit:contain; object-position:center; }
.tn-hero-slide.tn-active{ opacity:1; }
.tn-hero-overlay,.tn-hero-particles,.tn-hero-in,.tn-scroll-c{ transition:opacity .8s ease, visibility .8s ease; }
.tn-hero.tn-hero-ended .tn-hero-overlay,.tn-hero.tn-hero-ended .tn-hero-particles,.tn-hero.tn-hero-ended .tn-hero-in,.tn-hero.tn-hero-ended .tn-scroll-c{ opacity:0; visibility:hidden; }
.tn-hero-in{ position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:8vh 5% 0; max-width:900px; margin:0 auto; }
.tn-hero-in h1{ color:#fff; font-size:clamp(34px,5.6vw,66px); line-height:1.5; max-width:880px; margin:0 auto 24px; }
.tn-hero-in h1 .u{ color:var(--tn-gold-l); position:relative; white-space:nowrap; }
.tn-hero-in p{ color:#DCE4E2; font-size:clamp(15px,2vw,17px); line-height:1.8; max-width:540px; margin:0 auto; }
.tn-scroll-c{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:3; color:#fff; display:flex; flex-direction:column; align-items:center; gap:7px; font-size:11px; font-weight:600; }
.tn-scroll-c .tn-m{ width:22px; height:34px; border:1.5px solid rgba(255,255,255,.5); border-radius:12px; position:relative; }
.tn-scroll-c .tn-m::after{ content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:3px; height:6px; background:var(--tn-gold-l); border-radius:2px; animation:tn-cue 1.6s ease-in-out infinite; }
@keyframes tn-cue{ 0%{ opacity:0; top:6px; } 50%{ opacity:1; } 100%{ opacity:0; top:18px; } }
.tn-wave-divider{ position:relative; z-index:4; margin-top:-2px; line-height:0; }
.tn-wave-divider svg{ display:block; width:100%; height:clamp(40px,6vw,80px); }
.tn-wave-divider path{ fill:var(--tn-cream); }

/* ===== أقسام عامة ===== */
section{ position:relative; }
.tn-sec-tag{ color:var(--tn-gold); font-weight:700; font-size:13px; display:inline-flex; align-items:center; gap:8px; }
.tn-sec-title{ font-size:clamp(26px,3.6vw,34px); margin-top:12px; max-width:600px; }
.tn-sec-title::after{ content:''; display:block; width:50px; height:3px; background:var(--tn-gold); border-radius:3px; margin-top:16px; }
.tn-decor{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.tn-decor::before,.tn-decor::after{ content:''; position:absolute; border-radius:50%; filter:blur(60px); }
.tn-decor::before{ width:420px; height:420px; background:radial-gradient(circle,rgba(15,118,110,.07),transparent 70%); top:-120px; inset-inline-end:-100px; }
.tn-decor::after{ width:360px; height:360px; background:radial-gradient(circle,rgba(199,154,60,.09),transparent 70%); bottom:-100px; inset-inline-start:-80px; }
.tn-decor-dots{ position:absolute; inset:0; background-image:radial-gradient(rgba(29,42,50,.06) 1px,transparent 1px); background-size:26px 26px; -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 0%,#000 40%,transparent 100%); mask-image:radial-gradient(ellipse 60% 50% at 50% 0%,#000 40%,transparent 100%); }
.tn-impact>.tn-decor,.tn-programs>.tn-decor,.tn-stories>.tn-decor,.tn-partners>.tn-decor{ z-index:0; }
.tn-impact>.tn-wrap,.tn-programs>.tn-wrap,.tn-stories>.tn-wrap,.tn-partners>.tn-wrap{ position:relative; z-index:1; }

/* ===== IMPACT (Bento) ===== */
.tn-impact{ padding:clamp(70px,10vw,110px) 0; }
.tn-bento{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:16px; margin-top:46px; }
.tn-b-hero{ grid-row:span 2; position:relative; border-radius:26px; overflow:hidden; color:#fff; min-height:360px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:36px; background-size:cover; background-position:center; }
.tn-b-hero .tn-ov{ position:absolute; inset:0; z-index:1; background:rgba(29,66,61,.85); transition:.5s; }
.tn-b-hero:hover .tn-ov{ background:rgba(29,66,61,.7); }
.tn-b-hero>*{ position:relative; z-index:2; }
.tn-b-hero img.tn-b-logo{ max-width:150px; width:45%; margin:0 auto 24px; filter:brightness(0) invert(1); }
.tn-b-hero h3{ font-size:20px; margin-top:14px; line-height:1.6; color:#fff; }
.tn-b-hero p{ font-size:13px; color:#C6D3D1; margin-top:10px; line-height:1.8; }
.tn-b-stat{ background:#fff; border:1px solid var(--tn-line); border-radius:22px; padding:26px; transition:.35s; position:relative; overflow:hidden; z-index:1; }
.tn-b-stat:hover{ transform:translateY(-4px); box-shadow:0 22px 44px rgba(15,118,110,.13); }
.tn-b-stat .tn-stat-bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:-2; transition:transform .6s ease; }
.tn-b-stat::before{ content:''; position:absolute; inset:0; background:rgba(255,255,255,.88); z-index:-1; transition:.4s; }
.tn-b-stat:hover .tn-stat-bg{ transform:scale(1.1); }
.tn-b-stat:hover::before{ background:rgba(255,255,255,.75); }
.tn-b-stat .tn-ic{ width:44px; height:44px; border-radius:13px; background:var(--tn-cream); color:var(--tn-teal-dark); display:flex; align-items:center; justify-content:center; margin-bottom:15px; transition:.4s; }
.tn-b-stat:hover .tn-ic{ transform:scale(1.15) rotate(5deg); background:var(--tn-gold); color:#fff; }
.tn-b-stat .tn-ic svg{ width:22px; height:22px; }
.tn-b-stat b{ font-size:32px; font-weight:800; color:var(--tn-text-dark); display:block; line-height:1; font-family:'IBM Plex Sans Arabic',sans-serif; }
.tn-b-stat span{ font-size:12.5px; color:var(--tn-text-muted); font-weight:600; margin-top:6px; display:block; }
.tn-b-wide{ grid-column:span 2; background:var(--tn-cream); border:1px solid var(--tn-line); border-radius:22px; padding:24px 30px; display:flex; align-items:center; gap:20px; position:relative; overflow:hidden; z-index:1; }
.tn-b-wide .tn-stat-bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:-2; transition:transform .6s ease; }
.tn-b-wide::before{ content:''; position:absolute; inset:0; background:rgba(255,255,255,.88); z-index:-1; }
.tn-b-wide:hover .tn-stat-bg{ transform:scale(1.1); }
.tn-b-wide .tn-ic{ width:50px; height:50px; border-radius:14px; background:#fff; color:var(--tn-gold); display:flex; align-items:center; justify-content:center; flex:none; }
.tn-b-wide .tn-ic svg{ width:22px; height:22px; }
.tn-b-wide b{ font-size:24px; font-weight:800; color:var(--tn-text-dark); font-family:'IBM Plex Sans Arabic',sans-serif; }
.tn-b-wide span{ font-size:12.5px; color:var(--tn-text-muted); font-weight:600; display:block; }
@media (max-width:1024px){ .tn-bento{ grid-template-columns:1fr 1fr; } .tn-b-hero{ grid-row:auto; grid-column:span 2; } .tn-b-wide{ grid-column:span 2; } }
@media (max-width:640px){ .tn-bento{ grid-template-columns:1fr; } .tn-b-hero,.tn-b-wide{ grid-column:span 1; } }

/* ===== PROGRAMS ===== */
.tn-programs{ padding:clamp(70px,10vw,110px) 0 0; }
.tn-pg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:46px; }
.tn-pg{ background:#fff; border:1px solid var(--tn-line); border-radius:24px; overflow:hidden; transition:.4s; display:flex; flex-direction:column; }
.tn-pg:hover{ transform:translateY(-6px); box-shadow:0 30px 56px rgba(199,154,60,.18); }
.tn-pg .tn-pg-img{ height:190px; position:relative; overflow:hidden; }
.tn-pg .tn-pg-img::before{ content:''; position:absolute; inset:-24px; background:var(--tn-img) center/cover no-repeat; filter:blur(18px); }
.tn-pg .tn-pg-img img{ position:relative; display:block; width:100%; height:100%; object-fit:contain; transition:transform .5s ease; }
.tn-pg:hover .tn-pg-img img{ transform:scale(1.05); }
.tn-pg .tn-pg-tag{ position:absolute; top:14px; right:14px; z-index:2; background:rgba(251,248,242,.94); backdrop-filter:blur(6px); color:var(--tn-teal-dark); font-size:11px; font-weight:700; padding:6px 13px; border-radius:20px; }
.tn-pg .tn-pg-body{ padding:24px; display:flex; flex-direction:column; flex:1; }
.tn-pg h4{ font-size:17px; margin-bottom:8px; }
.tn-pg p{ font-size:13px; color:var(--tn-text-muted); line-height:1.8; margin-bottom:16px; flex:1; }
.tn-pg .tn-bar{ height:7px; background:var(--tn-cream); border-radius:10px; overflow:hidden; margin-bottom:8px; }
.tn-pg .tn-fill{ height:100%; border-radius:10px; background:var(--tn-gold); }
.tn-pg .tn-pct{ display:flex; justify-content:space-between; font-size:11.5px; font-weight:700; color:var(--tn-text-muted); }
.tn-pg .tn-pct b{ color:var(--tn-text-dark); }
@media (max-width:900px){ .tn-pg-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .tn-pg-grid{ grid-template-columns:1fr; } }

/* ===== STORIES ===== */
.tn-stories{ padding:clamp(70px,10vw,110px) 0 0; }
.tn-st-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:20px; margin-top:46px; }
.tn-st-feat{ position:relative; border-radius:26px; overflow:hidden; min-height:440px; background-size:cover; background-position:left center; }
.tn-st-feat::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(29,42,50,.95)); }
.tn-st-feat .tn-q{ position:absolute; bottom:0; padding:36px; z-index:2; color:#fff; }
.tn-st-feat .tn-q .tn-bd{ background:var(--tn-gold); color:#2b2007; font-size:11px; font-weight:700; padding:5px 13px; border-radius:20px; display:inline-block; margin-bottom:14px; }
.tn-st-feat .tn-q p{ font-size:19px; line-height:1.7; margin-bottom:15px; font-family:'Reem Kufi',sans-serif; }
.tn-st-feat .tn-q .tn-who{ font-size:13px; color:#CBD5D3; }
.tn-st-side{ display:flex; flex-direction:column; gap:20px; }
.tn-st-mini{ background:#fff; border:1px solid var(--tn-line); border-radius:22px; padding:26px; flex:1; display:flex; flex-direction:column; justify-content:center; transition:.35s; }
.tn-st-mini:hover{ box-shadow:0 22px 44px rgba(15,118,110,.12); transform:translateY(-3px); }
.tn-st-mini .tn-qm{ width:28px; height:28px; color:var(--tn-gold); margin-bottom:12px; }
.tn-st-mini p{ font-size:14.5px; line-height:1.85; margin-bottom:14px; }
.tn-st-mini .tn-who{ font-size:12.5px; color:var(--tn-text-muted); font-weight:700; display:flex; align-items:center; gap:10px; }
.tn-st-mini .tn-av{ width:36px; height:36px; border-radius:50%; background:var(--tn-teal); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex:none; }
@media (min-width:901px){ .tn-st-feat .tn-q{ max-width:74%; } }
@media (max-width:900px){ .tn-st-grid{ grid-template-columns:1fr; } }

/* ===== GOVERNANCE ===== */
.tn-gov{ margin-top:clamp(70px,10vw,110px); background:linear-gradient(135deg,var(--tn-primary-dark),var(--tn-teal-dark)); padding:clamp(60px,9vw,90px) 0; position:relative; overflow:hidden; }
.tn-gov::before{ content:''; position:absolute; inset:0; background-image:linear-gradient(45deg,rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(-45deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:28px 28px; }
.tn-gov-in{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center; }
.tn-gov-in .tn-sec-tag{ color:var(--tn-gold-l); }
.tn-gov-in h2{ color:#fff; font-size:clamp(24px,3.4vw,30px); margin-top:12px; }
.tn-gov-in h2::after{ content:''; display:block; width:50px; height:3px; background:var(--tn-gold); border-radius:3px; margin-top:16px; }
.tn-gov-in p{ color:#C6D3D1; font-size:14.5px; line-height:2; margin-top:18px; max-width:430px; }
.tn-gov-badges{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.tn-gb{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:26px; color:#fff; transition:.35s; }
.tn-gb:hover{ background:rgba(255,255,255,.1); transform:translateY(-3px); }
.tn-gb b{ font-size:36px; font-weight:800; color:var(--tn-gold-l); display:block; line-height:1; font-family:'IBM Plex Sans Arabic',sans-serif; }
.tn-gb span{ font-size:12.5px; color:#B9C6C4; font-weight:600; margin-top:8px; display:block; }
.tn-gb.tn-doc{ display:flex; align-items:center; gap:14px; }
.tn-gb.tn-doc .tn-di{ width:44px; height:44px; border-radius:12px; background:rgba(199,154,60,.2); color:var(--tn-gold-l); display:flex; align-items:center; justify-content:center; flex:none; }
.tn-gb.tn-doc .tn-di svg{ width:22px; height:22px; }
.tn-gb.tn-doc b{ font-size:15px; color:#fff; line-height:1.4; }
@media (max-width:820px){ .tn-gov-in{ grid-template-columns:1fr; } }

/* ===== PARTNERS ===== */
.tn-partners{ padding:clamp(70px,10vw,110px) 0 0; }
.tn-marquee-wrapper{ width:100%; overflow:hidden; background:var(--tn-cream); border:1px solid var(--tn-line); border-radius:24px; padding:44px 0; margin:40px 0; position:relative; direction:ltr; }
.tn-marquee-wrapper::before,.tn-marquee-wrapper::after{ content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; }
.tn-marquee-wrapper::before{ left:0; background:linear-gradient(to right,var(--tn-cream),transparent); }
.tn-marquee-wrapper::after{ right:0; background:linear-gradient(to left,var(--tn-cream),transparent); }
.tn-marquee-track{ display:flex; width:max-content; animation:tn-marquee 40s linear infinite; }
.tn-marquee-track:hover{ animation-play-state:paused; }
.tn-marquee-item{ width:260px; flex-shrink:0; display:flex; justify-content:center; align-items:center; padding:0 26px; }
.tn-marquee-item img{ max-height:110px; max-width:100%; object-fit:contain; transition:transform .3s ease; }
.tn-marquee-item img:hover{ transform:scale(1.08); }
@keyframes tn-marquee{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

/* ===== CTA ===== */
.tn-cta{ padding:clamp(70px,10vw,110px) 0 0; }
.tn-cta-in{ position:relative; border-radius:28px; overflow:hidden; }
.tn-cta-in video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.tn-cta-in .tn-ov{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg,rgba(199,154,60,.94),rgba(232,200,119,.8)); }
.tn-cta-content{ position:relative; z-index:2; padding:60px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.tn-cta-content h2{ font-size:clamp(24px,3.4vw,29px); color:#2b2007; max-width:520px; line-height:1.5; }
.tn-cta-content p{ font-size:14px; color:#5a4718; margin-top:10px; }
.tn-cta-content a{ background:var(--tn-primary-dark); color:#fff; padding:17px 32px; border-radius:14px; font-weight:700; font-size:15px; transition:.3s; }
.tn-cta-content a:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(29,42,50,.35); }

.tn-pg-img{ cursor:pointer; }
.tn-pg h4 a:hover{ color:var(--tn-teal-dark); }

.tn-modal{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:20px; }
.tn-modal[hidden]{ display:none; }
.tn-modal-overlay{ position:absolute; inset:0; background:rgba(29,42,50,.62); backdrop-filter:blur(4px); }
.tn-modal-box{ position:relative; background:#fff; border-radius:24px; padding:34px 30px 30px; width:min(440px,100%); box-shadow:0 30px 70px rgba(29,42,50,.35); text-align:center; animation:tn-modal-in .3s cubic-bezier(.2,.65,.3,1); }
.tn-modal-box h3{ font-size:19px; margin-bottom:22px; }
.tn-modal-x{ position:absolute; top:14px; inset-inline-start:14px; width:34px; height:34px; border-radius:50%; border:0; background:var(--tn-cream); color:var(--tn-text-dark); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.tn-modal-x svg{ width:16px; height:16px; }
.tn-modal-list{ display:flex; flex-direction:column; gap:12px; }
.tn-modal-list a{ display:block; padding:15px 18px; border-radius:14px; background:var(--tn-primary-dark); color:#fff; font-weight:700; font-size:14.5px; transition:.3s; }
.tn-modal-list a:hover{ background:var(--tn-teal-dark); transform:translateY(-2px); }
@keyframes tn-modal-in{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }