/* ============================================================
   RAN — Re-Orientation Advocacy of Nigeria
   Main Stylesheet — v3 (SVG Icons, Zero Emojis)
   ============================================================ */

:root {
  --green-deep: #0A3D2E;
  --green-mid: #14694E;
  --green-light: #1B8A65;
  --green-pale: #E8F5EE;
  --gold: #C5973E;
  --gold-light: #E8C87A;
  --gold-pale: #FDF6E3;
  --cream: #FAFAF5;
  --white: #FFFFFF;
  --dark: #1A1A1A;
  --gray-900: #2D2D2D;
  --gray-700: #555;
  --gray-500: #888;
  --gray-300: #CCC;
  --gray-100: #F0F0ED;
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  font-family: var(--font-body); color: var(--dark); background: var(--cream);
  line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* === Utility === */
.container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px,4vw,40px); }
.container-w { max-width: 1400px; margin: 0 auto; padding: 0 clamp(16px,4vw,40px); }
.sec-pad { padding: clamp(60px,8vw,120px) 0; }
.tc { text-align: center; }
.sec-label { font-weight: 700; font-size: .75rem; letter-spacing: 3.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; display: inline-block; }
.sec-title { font-family: var(--font-display); font-size: clamp(2rem,4vw,3rem); color: var(--green-deep); line-height: 1.2; margin-bottom: 18px; }
.sec-sub { font-size: 1.08rem; color: var(--gray-700); max-width: 640px; line-height: 1.85; }
.sec-sub.cen { margin: 0 auto; }

/* === SVG Icon Base === */
.icon-svg { display: inline-flex; align-items: center; justify-content: center; }
.icon-svg svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* === SVG Icon Rendering === */
svg symbol { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon svg, .si svg, .val-icon svg, .vc-icon svg, .ci-icon svg, .soc svg, .ben-chk svg, .btt svg,
.pc .meta svg, .ev-card-meta svg, .map-ph svg, .img-badge svg {
  stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  width: inherit; height: inherit; display: block;
}

/* === Buttons === */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px; border-radius: 8px; font-weight: 600; font-size: .92rem;
  letter-spacing: .4px; transition: all .35s cubic-bezier(.4,0,.2,1);
  border: 2px solid transparent; cursor: pointer; position: relative; overflow: hidden;
  font-family: var(--font-body);
}
.btn::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.15); transform: translateX(-101%); transition: transform .4s ease; }
.btn:hover::before { transform: translateX(0); }
.btn-primary { background: var(--green-deep); color: var(--white); border-color: var(--green-deep); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(10,61,46,.3); }
.btn-gold { background: var(--gold); color: #fff; border-color: var(--gold); }
.btn-gold:hover { background: #b8882f; transform: translateY(-3px); box-shadow: 0 10px 30px rgba(197,151,62,.35); }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-outline:hover { background: rgba(255,255,255,.12); transform: translateY(-3px); border-color: rgba(255,255,255,.6); }

/* === Animations === */
.rv { opacity: 0; transform: translateY(50px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.rv.vis { opacity: 1; transform: translateY(0); }
.rv-l { opacity: 0; transform: translateX(-60px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.rv-l.vis { opacity: 1; transform: translateX(0); }
.rv-r { opacity: 0; transform: translateX(60px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.rv-r.vis { opacity: 1; transform: translateX(0); }
.dl-1{transition-delay:.1s}.dl-2{transition-delay:.2s}.dl-3{transition-delay:.3s}
.dl-4{transition-delay:.4s}.dl-5{transition-delay:.5s}.dl-6{transition-delay:.6s}
.dl-7{transition-delay:.7s}.dl-8{transition-delay:.8s}.dl-9{transition-delay:.9s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* === Navbar === */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h); display: flex; align-items: center; transition: all .4s cubic-bezier(.4,0,.2,1); }
.nav.scrolled { background: rgba(255,255,255,.97); backdrop-filter: blur(16px); box-shadow: 0 1px 24px rgba(0,0,0,.06); }
.nav .container-w { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.nav-logo { font-family: var(--font-display); font-size: 1.35rem; color: #fff; display: flex; align-items: center; gap: 10px; transition: color .4s; }
.nav.scrolled .nav-logo { color: var(--green-deep); }
.nav-logo img { width: 42px; height: 42px; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: .88rem; font-weight: 500; color: rgba(255,255,255,.85); transition: all .3s; position: relative; padding: 4px 0; }
.nav-links a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--gold); transition: all .3s; transform: translateX(-50%); }
.nav-links a:hover::after { width: 100%; }
.nav.scrolled .nav-links a { color: var(--gray-700); }
.nav.scrolled .nav-links a:hover { color: var(--green-deep); }
.nav-cta { padding: 10px 24px!important; background: var(--gold)!important; color: #fff!important; border-radius: 8px; font-weight: 600!important; }
.nav-cta::after { display: none!important; }
.nav-cta:hover { background: #b8882f!important; transform: translateY(-2px); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; z-index: 1001; background: none; border: none; padding: 8px; }
.hamburger span { width: 26px; height: 2.5px; background: #fff; border-radius: 2px; transition: all .3s; display: block; }
.nav.scrolled .hamburger span { background: var(--green-deep); }
.mob-menu { display: none; position: fixed; inset: 0; background: var(--green-deep); z-index: 999; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.mob-menu.open { display: flex; animation: fadeIn .3s ease; }
.mob-menu a { font-family: var(--font-display); font-size: 1.4rem; color: #fff; }
.mob-menu a:hover { color: var(--gold); }
@media(max-width:900px){ .nav-links{display:none} .hamburger{display:flex} }

/* === Hero === */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; background: var(--green-deep); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 65% 40%,rgba(20,105,78,.6) 0%,transparent 70%), radial-gradient(ellipse 50% 50% at 20% 80%,rgba(197,151,62,.08) 0%,transparent 60%), radial-gradient(circle at 80% 20%,rgba(232,200,122,.06) 0%,transparent 40%), linear-gradient(170deg,#071F17 0%,#0A3D2E 30%,#0D4F3A 60%,#14694E 100%); }
.hero-particles { position: absolute; inset: 0; overflow: hidden; }
.particle { position: absolute; border-radius: 50%; background: rgba(197,151,62,.15); animation: float linear infinite; }
@keyframes float { 0%{transform:translateY(100vh) rotate(0deg);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateY(-10vh) rotate(720deg);opacity:0} }
.hero-rings { position: absolute; right: -10%; top: 50%; transform: translateY(-50%); width: 650px; height: 650px; }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(197,151,62,.1); animation: ringPulse 6s ease-in-out infinite; }
.ring:nth-child(2){inset:50px;animation-delay:-.8s;border-color:rgba(197,151,62,.08)}
.ring:nth-child(3){inset:100px;animation-delay:-1.6s;border-color:rgba(197,151,62,.06)}
.ring:nth-child(4){inset:150px;animation-delay:-2.4s;border-color:rgba(255,255,255,.04)}
.ring:nth-child(5){inset:200px;animation-delay:-3.2s;border-color:rgba(197,151,62,.03)}
@keyframes ringPulse{0%,100%{transform:scale(1) rotate(0deg);opacity:.6}50%{transform:scale(1.04) rotate(3deg);opacity:1}}
.hero-lines { position: absolute; inset: 0; overflow: hidden; opacity: .06; }
.hero-lines span { position: absolute; width: 1px; height: 200%; background: linear-gradient(to bottom,transparent,var(--gold),transparent); transform: rotate(-35deg); animation: lineSweep 8s ease-in-out infinite; }
.hero-lines span:nth-child(1){left:15%;animation-delay:0s} .hero-lines span:nth-child(2){left:35%;animation-delay:-2s} .hero-lines span:nth-child(3){left:55%;animation-delay:-4s} .hero-lines span:nth-child(4){left:75%;animation-delay:-6s} .hero-lines span:nth-child(5){left:90%;animation-delay:-1s}
@keyframes lineSweep{0%,100%{transform:rotate(-35deg) translateY(-20%);opacity:.3}50%{transform:rotate(-35deg) translateY(20%);opacity:1}}
.hero-pattern { position: absolute; inset: 0; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 0L80 40L40 80L0 40z' fill='none' stroke='%23C5973E' stroke-width='0.8'/%3E%3Cpath d='M40 12L68 40L40 68L12 40z' fill='none' stroke='%23C5973E' stroke-width='0.5'/%3E%3Cpath d='M40 24L56 40L40 56L24 40z' fill='none' stroke='%23C5973E' stroke-width='0.3'/%3E%3C/svg%3E"); background-size: 80px; animation: patternDrift 30s linear infinite; }
@keyframes patternDrift{0%{transform:translate(0,0)}100%{transform:translate(80px,80px)}}
.hero-watermark { position: absolute; right: 8%; top: 50%; transform: translateY(-50%); width: clamp(250px,30vw,420px); opacity: .07; animation: heroLogoFloat 8s ease-in-out infinite; }
@keyframes heroLogoFloat{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-52%) scale(1.02)}}
.hero-content { position: relative; z-index: 2; max-width: 720px; padding: 120px 0 80px; }
.hero-label { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: .72rem; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-light); margin-bottom: 24px; opacity: 0; animation: heroFadeUp .8s .3s cubic-bezier(.16,1,.3,1) forwards; }
.hero-label::before { content: ''; width: 32px; height: 2px; background: var(--gold); animation: lineGrow .6s .6s ease forwards; transform-origin: left; transform: scaleX(0); }
@keyframes lineGrow{to{transform:scaleX(1)}}
.hero h1 { font-family: var(--font-display); font-size: clamp(2.8rem,6vw,4.5rem); color: #fff; line-height: 1.1; margin-bottom: 28px; opacity: 0; animation: heroFadeUp 1s .5s cubic-bezier(.16,1,.3,1) forwards; }
.hero h1 em { font-style: italic; background: linear-gradient(135deg,var(--gold-light),var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-desc { font-size: clamp(1rem,1.5vw,1.15rem); color: rgba(255,255,255,.75); max-width: 560px; line-height: 1.85; margin-bottom: 16px; opacity: 0; animation: heroFadeUp .9s .7s cubic-bezier(.16,1,.3,1) forwards; }
.hero-reg { display: inline-block; font-size: .8rem; color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); padding: 6px 16px; border-radius: 20px; margin-bottom: 36px; border: 1px solid rgba(255,255,255,.08); opacity: 0; animation: heroFadeUp .8s .85s cubic-bezier(.16,1,.3,1) forwards; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 14px; opacity: 0; animation: heroFadeUp .9s .95s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes heroFadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.scroll-ind { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(255,255,255,.4); font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; animation: scrollBob 2.5s ease-in-out infinite; }
.scroll-ind .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: scrollDot 2s ease-in-out infinite; }
.scroll-ind .line { width: 1px; height: 36px; background: linear-gradient(to bottom,rgba(255,255,255,.3),transparent); }
@keyframes scrollBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}
@keyframes scrollDot{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
@media(max-width:768px){ .hero-watermark{display:none} .hero-rings{width:350px;right:-25%} .hero-content{padding:100px 0 60px} }

/* === Stats === */
.stats { background: var(--white); border-bottom: 1px solid var(--gray-100); }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.stat { text-align: center; padding: 52px 24px; position: relative; transition: all .4s; }
.stat:hover { background: var(--green-pale); }
.stat:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: linear-gradient(to bottom,transparent,var(--gray-300),transparent); }
.stat-num { font-family: var(--font-display); font-size: clamp(2.4rem,4vw,3.4rem); font-weight: 700; color: var(--green-deep); line-height: 1; margin-bottom: 8px; }
.stat-lbl { font-size: .88rem; color: var(--gray-500); font-weight: 500; }
.counter { display: inline; }
@media(max-width:700px){ .stats-grid{grid-template-columns:repeat(2,1fr)} .stat:nth-child(2)::after{display:none} }

/* === Who === */
.who { background: var(--cream); }
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.who-img { aspect-ratio: 4/3; border-radius: 16px; position: relative; overflow: hidden; background: linear-gradient(135deg,var(--green-pale),var(--gold-pale)); }
.who-img .img-badge { position: absolute; bottom: 20px; left: 20px; background: var(--green-deep); color: #fff; font-size: .78rem; font-weight: 600; padding: 10px 18px; border-radius: 8px; display: flex; align-items: center; gap: 8px; }
.who-img .img-badge svg { width: 16px; height: 16px; }
.who-text .sec-sub { margin-bottom: 12px; }
@media(max-width:800px){ .who-grid{grid-template-columns:1fr;gap:32px} }

/* === Focus Cards === */
.focus { background: var(--white); }
.focus-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 52px; }
.fc { background: var(--cream); border-radius: 16px; padding: 40px 32px; position: relative; overflow: hidden; transition: all .5s cubic-bezier(.4,0,.2,1); border: 1px solid transparent; }
.fc:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(10,61,46,.1); border-color: rgba(20,105,78,.15); }
.fc .accent { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg,var(--green-mid),var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.fc:hover .accent { transform: scaleX(1); }
.fc .icon { width: 60px; height: 60px; background: var(--green-deep); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; transition: transform .4s; color: #fff; }
.fc .icon svg { width: 28px; height: 28px; }
.fc:hover .icon { transform: rotate(-5deg) scale(1.08); }
.fc h3 { font-family: var(--font-display); font-size: 1.25rem; color: var(--green-deep); margin-bottom: 14px; }
.fc p { font-size: .93rem; color: var(--gray-700); line-height: 1.75; }
@media(max-width:800px){ .focus-grid{grid-template-columns:1fr} }

/* === Projects === */
.projects { background: var(--green-deep); color: #fff; position: relative; overflow: hidden; }
.projects .sec-label { color: var(--gold-light); }
.projects .sec-title { color: #fff; }
.projects .sec-sub { color: rgba(255,255,255,.65); }
.projects-pattern { position: absolute; inset: 0; opacity: .03; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30z' fill='none' stroke='%23C5973E' stroke-width='1'/%3E%3C/svg%3E"); background-size: 60px; animation: patternDrift 25s linear infinite; }
.proj-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 52px; }
.pc { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 32px 28px; transition: all .5s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden; }
.pc:hover { background: rgba(255,255,255,.09); transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,.25); border-color: rgba(197,151,62,.15); }
.pc .tag { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-light); background: rgba(197,151,62,.12); padding: 5px 14px; border-radius: 20px; margin-bottom: 16px; }
.pc h3 { font-family: var(--font-display); font-size: 1.18rem; margin-bottom: 12px; }
.pc p { font-size: .9rem; color: rgba(255,255,255,.6); line-height: 1.75; margin-bottom: 16px; }
.pc .meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: .78rem; color: rgba(255,255,255,.45); }
.pc .meta span { display: inline-flex; align-items: center; gap: 4px; }
.pc .meta svg { width: 14px; height: 14px; opacity: .6; }
@media(max-width:900px){ .proj-grid{grid-template-columns:1fr} }

/* === VMV === */
.vmv { background: var(--cream); }
.vision-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 20px; }
.vc { background: var(--white); border-radius: 14px; padding: 32px 24px; text-align: center; border: 1px solid var(--gray-100); transition: all .4s cubic-bezier(.4,0,.2,1); }
.vc:hover { border-color: var(--gold); transform: translateY(-5px); box-shadow: 0 12px 40px rgba(10,61,46,.06); }
.vc .vc-icon { width: 48px; height: 48px; margin: 0 auto 14px; background: var(--green-pale); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--green-deep); }
.vc .vc-icon svg { width: 24px; height: 24px; }
.vc h4 { font-family: var(--font-display); font-size: 1.05rem; color: var(--green-deep); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 56px; align-items: start; }
.about-block h3 { font-family: var(--font-display); font-size: 1.4rem; color: var(--green-deep); margin-bottom: 14px; }
.ml { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.ml li { position: relative; padding-left: 28px; color: var(--gray-700); line-height: 1.75; }
.ml li::before { content: ''; position: absolute; left: 0; top: 10px; width: 10px; height: 10px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 0 3px rgba(197,151,62,.15); }
@media(max-width:800px){ .about-grid,.vision-cards{grid-template-columns:1fr} }

/* === Values === */
.values { background: var(--white); }
.val-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 20px; margin-top: 52px; }
.val { text-align: center; padding: 36px 16px; border-radius: 16px; border: 1px solid var(--gray-100); background: var(--cream); transition: all .45s cubic-bezier(.4,0,.2,1); }
.val:hover { border-color: var(--gold); transform: translateY(-6px) scale(1.03); box-shadow: 0 12px 40px rgba(10,61,46,.07); }
.val .val-icon { width: 52px; height: 52px; margin: 0 auto 14px; background: var(--green-pale); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--green-deep); transition: transform .4s; }
.val .val-icon svg { width: 26px; height: 26px; }
.val:hover .val-icon { transform: scale(1.15) rotate(-8deg); }
.val h4 { font-family: var(--font-display); font-size: .95rem; color: var(--green-deep); }
@media(max-width:900px){ .val-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:500px){ .val-grid{grid-template-columns:repeat(2,1fr)} }

/* === Objectives === */
.objectives { background: linear-gradient(170deg,var(--green-pale),var(--cream) 60%); }
.obj-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 52px; }
.obj { display: flex; gap: 18px; align-items: flex-start; padding: 24px; background: var(--white); border-radius: 14px; border: 1px solid rgba(10,61,46,.04); transition: all .4s cubic-bezier(.4,0,.2,1); }
.obj:hover { transform: translateX(6px); box-shadow: 0 6px 28px rgba(10,61,46,.06); }
.obj-n { flex-shrink: 0; width: 40px; height: 40px; background: var(--green-deep); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .85rem; border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: all .3s; }
.obj:hover .obj-n { background: var(--gold); }
.obj p { color: var(--gray-700); font-size: .93rem; line-height: 1.65; }
@media(max-width:700px){ .obj-grid{grid-template-columns:1fr} }

/* === Services === */
.services { background: var(--white); }
.srv-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 52px; }
.srv { padding: 36px 28px; border-radius: 16px; border: 1px solid var(--gray-100); background: var(--cream); transition: all .45s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden; }
.srv::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--green-mid),var(--gold)); transform: scaleX(0); transition: transform .5s cubic-bezier(.4,0,.2,1); transform-origin: left; }
.srv:hover::after { transform: scaleX(1); }
.srv:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(10,61,46,.08); border-color: var(--green-pale); }
.srv .si { width: 48px; height: 48px; background: var(--green-deep); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 20px; transition: transform .4s; }
.srv .si svg { width: 24px; height: 24px; }
.srv:hover .si { transform: scale(1.1) rotate(-5deg); }
.srv h3 { font-family: var(--font-display); font-size: 1.12rem; color: var(--green-deep); margin-bottom: 12px; }
.srv p { font-size: .9rem; color: var(--gray-700); line-height: 1.75; }
@media(max-width:800px){ .srv-grid{grid-template-columns:1fr} }

/* === Events === */
.events { background: var(--cream); position: relative; overflow: hidden; }
.events-pattern { position: absolute; inset: 0; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30z' fill='none' stroke='%230A3D2E' stroke-width='.8'/%3E%3C/svg%3E"); background-size: 60px; animation: patternDrift 30s linear infinite; }
.events-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; margin-bottom: 48px; position: relative; z-index: 1; }
.ev-tab { padding: 10px 24px; border-radius: 30px; font-size: .85rem; font-weight: 600; border: 1.5px solid var(--gray-300); background: var(--white); color: var(--gray-700); cursor: pointer; transition: all .35s cubic-bezier(.4,0,.2,1); font-family: var(--font-body); }
.ev-tab:hover { border-color: var(--green-mid); color: var(--green-deep); }
.ev-tab.active { background: var(--green-deep); color: #fff; border-color: var(--green-deep); box-shadow: 0 4px 16px rgba(10,61,46,.2); }
.events-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 32px; position: relative; z-index: 1; }
.ev-card { background: var(--white); border-radius: 20px; overflow: hidden; border: 1px solid var(--gray-100); transition: all .5s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; }
.ev-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(10,61,46,.1); border-color: rgba(20,105,78,.12); }
.ev-card-img { position: relative; overflow: hidden; aspect-ratio: 16/10; cursor: pointer; }
.ev-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.ev-card:hover .ev-card-img img { transform: scale(1.05); }
.ev-card-img .ev-year { position: absolute; top: 16px; left: 16px; background: var(--green-deep); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 14px; border-radius: 20px; }
.ev-card-img .ev-category { position: absolute; top: 16px; right: 16px; background: rgba(197,151,62,.9); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; }
.ev-card-body { padding: 28px 28px 32px; flex: 1; display: flex; flex-direction: column; }
.ev-card-body h3 { font-family: var(--font-display); font-size: 1.25rem; color: var(--green-deep); margin-bottom: 12px; line-height: 1.3; }
.ev-card-body p { font-size: .9rem; color: var(--gray-700); line-height: 1.75; flex: 1; }
.ev-card-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--gray-100); font-size: .78rem; color: var(--gray-500); font-weight: 500; }
.ev-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ev-card-meta svg { width: 14px; height: 14px; opacity: .6; }
.lightbox { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.92); backdrop-filter: blur(12px); align-items: center; justify-content: center; padding: 40px; }
.lightbox.open { display: flex; animation: fadeIn .3s ease; }
.lightbox-close { position: absolute; top: 24px; right: 32px; background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all .3s; }
.lightbox-close:hover { background: rgba(255,255,255,.1); transform: rotate(90deg); }
.lightbox img { max-width: 90vw; max-height: 85vh; border-radius: 12px; box-shadow: 0 20px 80px rgba(0,0,0,.5); object-fit: contain; }
.lightbox-caption { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: .9rem; text-align: center; max-width: 600px; background: rgba(0,0,0,.5); padding: 10px 24px; border-radius: 8px; }
@media(max-width:800px){ .events-grid{grid-template-columns:1fr} .ev-tab{padding:8px 18px;font-size:.8rem} }

/* === Membership === */
.membership { background: linear-gradient(160deg,var(--gold-pale),var(--cream) 40%,var(--green-pale)); }
.mem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.benefits { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.ben { display: flex; gap: 16px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; transition: all .3s; }
.ben:hover { background: rgba(255,255,255,.5); }
.ben-chk { flex-shrink: 0; width: 30px; height: 30px; background: var(--green-deep); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; margin-top: 2px; }
.ben-chk svg { width: 16px; height: 16px; }
.ben p { color: var(--gray-700); line-height: 1.65; }
.mem-form { background: var(--white); border-radius: 20px; padding: 44px 40px; box-shadow: 0 16px 60px rgba(10,61,46,.08); border: 1px solid var(--gray-100); }
.mem-form h3 { font-family: var(--font-display); font-size: 1.35rem; color: var(--green-deep); margin-bottom: 28px; }
.fg { margin-bottom: 18px; }
.fg label { display: block; font-size: .83rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }
.fg input,.fg select,.fg textarea { width: 100%; padding: 13px 18px; border: 1.5px solid var(--gray-300); border-radius: 10px; font-family: var(--font-body); font-size: .93rem; transition: all .3s; background: var(--cream); }
.fg input:focus,.fg select:focus,.fg textarea:focus { outline: none; border-color: var(--green-mid); box-shadow: 0 0 0 4px rgba(20,105,78,.08); }
.fg textarea { resize: vertical; min-height: 100px; }
@media(max-width:800px){ .mem-grid{grid-template-columns:1fr} .mem-form{padding:28px 24px} }

/* === Contact === */
.contact { background: var(--white); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 52px; }
.ci-list { display: flex; flex-direction: column; gap: 24px; margin-bottom: 32px; }
.ci { display: flex; gap: 16px; align-items: flex-start; }
.ci-icon { flex-shrink: 0; width: 52px; height: 52px; background: var(--green-pale); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--green-deep); transition: all .3s; }
.ci-icon svg { width: 22px; height: 22px; }
.ci:hover .ci-icon { background: var(--green-deep); color: #fff; transform: rotate(-5deg); }
.ci h4 { font-weight: 600; color: var(--green-deep); margin-bottom: 2px; }
.ci p { color: var(--gray-700); font-size: .93rem; }
.ci p a { color: var(--green-mid); }
.socials { display: flex; gap: 12px; margin-top: 8px; }
.soc { width: 46px; height: 46px; border-radius: 12px; background: var(--green-deep); color: #fff; display: flex; align-items: center; justify-content: center; transition: all .35s cubic-bezier(.4,0,.2,1); }
.soc svg { width: 20px; height: 20px; }
.soc:hover { background: var(--gold); transform: translateY(-3px) rotate(-3deg); }
.c-form { background: var(--cream); border-radius: 20px; padding: 40px 36px; border: 1px solid var(--gray-100); }
.c-form h3 { font-family: var(--font-display); font-size: 1.25rem; color: var(--green-deep); margin-bottom: 24px; }
.map-ph { margin-top: 24px; height: 200px; border-radius: 14px; background: linear-gradient(135deg,var(--green-pale),var(--gray-100)); display: flex; align-items: center; justify-content: center; color: var(--gray-500); font-size: .88rem; border: 1px dashed var(--gray-300); gap: 8px; }
.map-ph svg { width: 20px; height: 20px; }
@media(max-width:800px){ .contact-grid{grid-template-columns:1fr} }

/* === Newsletter === */
.newsletter { background: var(--green-deep); color: #fff; padding: 56px 0; position: relative; overflow: hidden; }
.nl-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; position: relative; z-index: 1; }
.nl-inner h3 { font-family: var(--font-display); font-size: 1.5rem; }
.nl-inner p { color: rgba(255,255,255,.6); font-size: .93rem; margin-top: 6px; }
.nl-form { display: flex; gap: 10px; flex-shrink: 0; }
.nl-form input { padding: 14px 22px; border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); border-radius: 10px; color: #fff; font-family: var(--font-body); font-size: .93rem; min-width: 280px; transition: border-color .3s; }
.nl-form input::placeholder { color: rgba(255,255,255,.35); }
.nl-form input:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.1); }
@media(max-width:700px){ .nl-inner{flex-direction:column;text-align:center} .nl-form{flex-direction:column;width:100%} .nl-form input{min-width:0;width:100%} }

/* === Footer === */
.footer { background: #071F17; color: rgba(255,255,255,.65); padding: 68px 0 0; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 52px; }
.foot-brand .nav-logo { color: #fff; margin-bottom: 18px; }
.foot-brand p { font-size: .88rem; line-height: 1.75; color: rgba(255,255,255,.45); max-width: 320px; }
.footer h4 { color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 22px; }
.fl a { display: block; font-size: .88rem; color: rgba(255,255,255,.45); padding: 5px 0; transition: all .3s; }
.fl a:hover { color: var(--gold); transform: translateX(4px); }
.foot-bot { border-top: 1px solid rgba(255,255,255,.07); padding: 24px 0; display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: rgba(255,255,255,.3); }
.foot-bot a { color: rgba(255,255,255,.3); transition: color .3s; }
.foot-bot a:hover { color: var(--gold); }
@media(max-width:800px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media(max-width:500px){ .foot-grid{grid-template-columns:1fr} .foot-bot{flex-direction:column;gap:8px;text-align:center} }

/* === Back to Top === */
.btt { position: fixed; bottom: 28px; right: 28px; width: 50px; height: 50px; background: var(--green-deep); color: #fff; border: none; border-radius: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(20px) scale(.8); transition: all .4s cubic-bezier(.4,0,.2,1); z-index: 99; box-shadow: 0 6px 24px rgba(10,61,46,.3); }
.btt svg { width: 22px; height: 22px; }
.btt.show { opacity: 1; transform: translateY(0) scale(1); }
.btt:hover { background: var(--gold); transform: translateY(-3px) scale(1.05); }