:root {
     --navy: #07182D;
     --navy-2: #10233F;
     --blue: #1F4E79;
     --blue-soft: #DCEAF4;
     --ice: #F4F8FA;
     --white: #FFFFFF;
     --gold: #C99A5B;
     --gold-2: #D8A74C;
     --bronze: #B98648;
     --green: #173B32;
     --ink: #1B2733;
     --muted: #6E7D8C;
     --line: rgba(16, 35, 63, .12);
     --shadow: 0 28px 90px rgba(7, 24, 45, .14);
     --radius: 30px;
     --max: 1240px;
     --section: 112px 6vw;
     --display: "Cinzel", serif;
     --serif: "Cormorant Garamond", serif;
     --body: "Inter", sans-serif;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: var(--body);
     background: var(--ice);
     color: var(--ink);
     overflow-x: hidden;
 }

 body.menu-open {
     overflow: hidden;
 }

 a {
     color: inherit;
     text-decoration: none;
 }

 img {
     display: block;
     max-width: 100%;
 }

 button {
     font: inherit;
 }

 .container {
     max-width: var(--max);
     margin: 0 auto;
     position: relative;
     z-index: 2;
 }

 .section {
     position: relative;
     padding: var(--section);
     overflow: hidden;
 }

 .section-kicker {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 18px;
     color: var(--gold);
     font-size: .72rem;
     font-weight: 800;
     letter-spacing: .22em;
     text-transform: uppercase;
 }

 .section-kicker::before {
     content: "";
     width: 42px;
     height: 1px;
     background: var(--gold);
 }

 .section-title {
     font-family: var(--serif);
     font-size: clamp(2.55rem, 5vw, 5.4rem);
     line-height: .92;
     letter-spacing: -.045em;
     font-weight: 500;
     color: var(--navy);
     margin-bottom: 22px;
 }

 .section-title span {
     color: var(--blue);
 }

 .section-text {
     max-width: 760px;
     color: var(--muted);
     font-size: 1.02rem;
     line-height: 1.85;
 }

 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     min-height: 52px;
     padding: 15px 24px;
     border-radius: 999px;
     border: 1px solid transparent;
     font-size: .78rem;
     font-weight: 800;
     letter-spacing: .11em;
     text-transform: uppercase;
     cursor: pointer;
     transition: transform .35s ease, background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
     white-space: nowrap;
 }

 .btn svg {
     width: 17px;
     height: 17px;
     fill: none;
     stroke: currentColor;
     stroke-width: 1.9;
     stroke-linecap: round;
     stroke-linejoin: round;
 }

 .btn-primary {
     color: var(--navy);
     background: linear-gradient(135deg, var(--gold), var(--gold-2));
     box-shadow: 0 20px 45px rgba(201, 154, 91, .32);
 }

 .btn-primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 28px 58px rgba(201, 154, 91, .44);
 }

 .btn-secondary {
     background: rgba(255, 255, 255, .68);
     color: var(--navy);
     border-color: rgba(16, 35, 63, .16);
     backdrop-filter: blur(14px);
 }

 .btn-secondary:hover {
     transform: translateY(-3px);
     color: var(--blue);
     border-color: rgba(31, 78, 121, .34);
 }

 .btn-glass {
     background: rgba(255, 255, 255, .08);
     color: var(--white);
     border-color: rgba(255, 255, 255, .22);
     backdrop-filter: blur(16px);
 }

 .btn-glass:hover {
     transform: translateY(-3px);
     background: rgba(255, 255, 255, .16);
     border-color: rgba(201, 154, 91, .52);
 }

 .site-header {
     position: fixed;
     z-index: 1000;
     top: 0;
     left: 0;
     width: 100%;
     padding: 18px 6vw;
     transition: .35s ease;
 }

 .site-header.scrolled {
     padding: 12px 6vw;
     background: rgba(244, 248, 250, .86);
     border-bottom: 1px solid rgba(16, 35, 63, .08);
     backdrop-filter: blur(18px);
 }

 .nav-inner {
     max-width: var(--max);
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 12px;
     min-width: max-content;
 }

 .brand-mark {
     width: 54px;
     height: 54px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     background: rgb(255, 255, 255);
     border: 1px solid rgba(255, 255, 255, .22);
     backdrop-filter: blur(14px);
     transition: .35s ease;
 }

 .brand-mark svg {
     width: 34px;
     height: 34px;
     fill: none;
     stroke: var(--gold);
     stroke-width: 1.65;
     stroke-linecap: round;
     stroke-linejoin: round;
 }

 .site-header.scrolled .brand-mark {
     background: var(--white);
     border-color: rgba(16, 35, 63, .12);
 }

 .brand-text strong {
     display: block;
     font-family: var(--display);
     font-size: 1.02rem;
     letter-spacing: .04em;
     color: rgba(255, 255, 255, .94);
     line-height: 1;
     transition: .3s ease;
 }

 .brand-text span {
     display: block;
     margin-top: 4px;
     color: rgba(255, 255, 255, .62);
     font-size: .66rem;
     letter-spacing: .14em;
     text-transform: uppercase;
     transition: .3s ease;
 }

 .site-header.scrolled .brand-text strong {
     color: var(--navy);
 }

 .site-header.scrolled .brand-text span {
     color: var(--muted);
 }

 .nav-links {
     display: flex;
     align-items: center;
     gap: 22px;
 }

 .nav-links a {
     color: rgba(255, 255, 255, .82);
     font-size: .71rem;
     font-weight: 800;
     letter-spacing: .12em;
     text-transform: uppercase;
     transition: .3s ease;
 }

 .nav-links a:hover {
     color: var(--gold-2);
 }

 .site-header.scrolled .nav-links a {
     color: var(--navy);
     opacity: .78;
 }

 .site-header.scrolled .nav-links a:hover {
     color: var(--blue);
     opacity: 1;
 }

 .nav-actions {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .mobile-toggle {
     display: none;
     width: 46px;
     height: 46px;
     border: 1px solid rgba(255, 255, 255, .22);
     border-radius: 50%;
     background: rgba(255, 255, 255, .1);
     cursor: pointer;
     backdrop-filter: blur(14px);
 }

 .mobile-toggle span {
     display: block;
     width: 19px;
     height: 2px;
     background: var(--white);
     margin: 4px auto;
     transition: .3s ease;
 }

 .site-header.scrolled .mobile-toggle {
     background: var(--white);
     border-color: rgba(16, 35, 63, .16);
 }

 .site-header.scrolled .mobile-toggle span {
     background: var(--navy);
 }

 .hero {
     min-height: 100vh;
     padding: 145px 6vw 78px;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
     color: var(--white);
     background: var(--navy);
 }

 .hero-bg {
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, rgba(7, 24, 45, .96) 0%, rgba(16, 35, 63, .86) 45%, rgba(16, 35, 63, .5) 100%), linear-gradient(180deg, rgba(7, 24, 45, .16), rgba(7, 24, 45, .58)), url("../images/amman-skyline.jpeg") center/cover no-repeat;
     transform: scale(1.07);
     animation: heroZoom 18s ease-in-out infinite alternate;
 }

 .hero-grid-pattern {
     position: absolute;
     inset: 0;
     background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
     background-size: 86px 86px;
     mask-image: linear-gradient(90deg, #000, transparent 86%);
     opacity: .58;
 }

 .hero-medical-line {
     position: absolute;
     width: 620px;
     height: 620px;
     right: -170px;
     top: 14%;
     border: 1px solid rgba(201, 154, 91, .34);
     border-left-color: transparent;
     border-radius: 50%;
     animation: slowRotate 28s linear infinite;
 }

 .hero-orb {
     position: absolute;
     width: 430px;
     height: 430px;
     right: 12%;
     top: 20%;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(216, 167, 76, .18), transparent 68%);
     filter: blur(4px);
     animation: floatOrb 10s ease-in-out infinite;
 }

 .hero-grid {
     max-width: var(--max);
     margin: 0 auto;
     width: 100%;
     position: relative;
     z-index: 3;
     display: grid;
     grid-template-columns: 1.02fr .98fr;
     gap: 76px;
     align-items: center;
 }

 .hero-kicker {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 9px 15px;
     margin-bottom: 26px;
     border-radius: 999px;
     border: 1px solid rgba(201, 154, 91, .34);
     color: var(--gold-2);
     background: rgba(255, 255, 255, .08);
     font-size: .71rem;
     font-weight: 800;
     letter-spacing: .15em;
     text-transform: uppercase;
     backdrop-filter: blur(14px);
 }

 .hero-kicker::before {
     content: "";
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--gold);
     box-shadow: 0 0 22px rgba(216, 167, 76, .75);
 }

 .hero-title {
     max-width: 850px;
     font-family: var(--serif);
     font-size: clamp(3.4rem, 7.4vw, 7.8rem);
     line-height: .88;
     letter-spacing: -.06em;
     font-weight: 500;
     color: var(--white);
     text-shadow: 0 30px 80px rgba(0, 0, 0, .38);
     margin-bottom: 24px;
 }

 .hero-title span {
     color: var(--gold-2);
 }

 .hero-desc {
     max-width: 660px;
     color: rgba(255, 255, 255, .76);
     font-size: 1.05rem;
     line-height: 1.9;
     margin-bottom: 34px;
 }

 .hero-buttons {
     display: flex;
     flex-wrap: wrap;
     gap: 14px;
     align-items: center;
 }

 .hero-visual {
     position: relative;
 }

 .society-card {
     position: relative;
     min-height: 585px;
     border-radius: 44px;
     overflow: hidden;
     display: grid;
     place-items: center;
     background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(220, 234, 244, .72)), radial-gradient(circle at 72% 16%, rgba(201, 154, 91, .18), transparent 30%);
     border: 1px solid rgba(255, 255, 255, .34);
     box-shadow: 0 42px 110px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .55);
 }

 .society-card::before {
     content: "";
     position: absolute;
     width: 500px;
     height: 500px;
     border: 2px solid rgba(31, 78, 121, .18);
     border-left-color: transparent;
     border-bottom-color: transparent;
     border-radius: 50%;
     transform: rotate(-20deg);
     animation: slowRotate 30s linear infinite reverse;
 }

 .society-card::after {
     content: "";
     position: absolute;
     inset: 22px;
     border: 1px solid rgba(16, 35, 63, .08);
     border-radius: 34px;
     pointer-events: none;
 }

 .society-emblem {
     position: relative;
     z-index: 2;
     width: min(78%, 430px);
     padding: 42px;
     text-align: center;
 }

 .society-emblem-icon {
     width: 178px;
     height: 178px;
     margin: 0 auto 28px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .9), rgba(220, 234, 244, .58)), linear-gradient(135deg, rgba(31, 78, 121, .12), rgba(201, 154, 91, .1));
     border: 1px solid rgba(16, 35, 63, .12);
     box-shadow: 0 24px 55px rgba(16, 35, 63, .12);
 }

 .society-emblem-icon svg {
     width: 112px;
     height: 112px;
     fill: none;
     stroke: var(--blue);
     stroke-width: 1.45;
     stroke-linecap: round;
     stroke-linejoin: round;
 }

 .society-emblem h2 {
     font-family: var(--display);
     color: var(--navy);
     font-size: 2.18rem;
     line-height: 1.02;
     letter-spacing: .04em;
     text-transform: uppercase;
     margin-bottom: 12px;
 }

 .society-emblem p {
     color: var(--muted);
     line-height: 1.75;
     font-size: .96rem;
 }

 .hero-stats {
     position: absolute;
     z-index: 4;
     left: 26px;
     right: 26px;
     bottom: 26px;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 10px;
 }

 .hero-stat {
     padding: 14px 10px;
     border-radius: 16px;
     text-align: center;
     background: rgba(255, 255, 255, .82);
     border: 1px solid rgba(16, 35, 63, .1);
     backdrop-filter: blur(10px);
 }

 .hero-stat strong {
     display: block;
     color: var(--navy);
     font-family: var(--display);
     font-size: 1.25rem;
     margin-bottom: 4px;
 }

 .hero-stat span {
     color: var(--muted);
     font-size: .62rem;
     letter-spacing: .14em;
     text-transform: uppercase;
     font-weight: 800;
 }

 .about {
     background: var(--white);
 }

 .about-grid {
     display: grid;
     grid-template-columns: .92fr 1.08fr;
     align-items: center;
     gap: 72px;
 }

 .about-panel {
     position: relative;
     padding: 46px;
     border-radius: var(--radius);
     overflow: hidden;
     background: linear-gradient(145deg, var(--ice), #fff), radial-gradient(circle at 88% 8%, rgba(201, 154, 91, .18), transparent 30%);
     border: 1px solid var(--line);
     box-shadow: var(--shadow);
 }

 .about-panel::after {
     content: "";
     position: absolute;
     right: -80px;
     bottom: -80px;
     width: 260px;
     height: 260px;
     border-radius: 50%;
     border: 1px solid rgba(31, 78, 121, .16);
 }

 .about-panel h3 {
     font-family: var(--serif);
     font-size: 2.9rem;
     line-height: 1;
     font-weight: 500;
     color: var(--navy);
     margin-bottom: 18px;
 }

 .about-panel p {
     position: relative;
     z-index: 2;
     color: var(--muted);
     line-height: 1.9;
 }

 .stats-grid {
     position: relative;
     z-index: 2;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 18px;
     margin-top: 34px;
 }

 .stat-card {
     padding: 24px;
     border-radius: 22px;
     border: 1px solid rgba(16, 35, 63, .1);
     background: rgba(255, 255, 255, .74);
 }

 .stat-card strong {
     display: block;
     font-family: var(--display);
     font-size: 2.05rem;
     color: var(--blue);
     margin-bottom: 6px;
 }

 .stat-card span {
     color: var(--muted);
     font-size: .84rem;
     line-height: 1.55;
 }

 .mission {
     background: linear-gradient(180deg, var(--white), var(--ice));
 }

 .mission-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     margin-top: 52px;
 }

 .mission-card {
     min-height: 310px;
     padding: 34px;
     border-radius: var(--radius);
     background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(220, 234, 244, .62));
     border: 1px solid rgba(16, 35, 63, .1);
     position: relative;
     overflow: hidden;
     transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
     backdrop-filter: blur(14px);
 }

 .mission-card::before {
     content: attr(data-number);
     position: absolute;
     top: 22px;
     right: 26px;
     font-family: var(--display);
     font-size: 3rem;
     color: rgba(31, 78, 121, .12);
 }

 .mission-card:hover {
     transform: translateY(-8px);
     box-shadow: var(--shadow);
     border-color: rgba(31, 78, 121, .24);
 }

 .line-icon {
     width: 62px;
     height: 62px;
     border-radius: 20px;
     background: rgba(31, 78, 121, .09);
     border: 1px solid rgba(31, 78, 121, .18);
     display: grid;
     place-items: center;
     margin-bottom: 26px;
 }

 .line-icon svg {
     width: 34px;
     height: 34px;
     fill: none;
     stroke: var(--blue);
     stroke-width: 1.65;
     stroke-linecap: round;
     stroke-linejoin: round;
     transition: .35s ease;
 }

 .mission-card:hover .line-icon svg {
     stroke: var(--gold);
 }

 .mission-card h3 {
     font-family: var(--serif);
     font-size: 2.05rem;
     line-height: 1;
     font-weight: 600;
     color: var(--navy);
     margin-bottom: 14px;
 }

 .mission-card p {
     color: var(--muted);
     line-height: 1.75;
     font-size: .95rem;
 }

 .activities {
     background: var(--navy);
     color: var(--white);
 }

 .activities::before {
     content: "";
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at 20% 20%, rgba(201, 154, 91, .18), transparent 34%), radial-gradient(circle at 92% 50%, rgba(31, 78, 121, .32), transparent 35%);
 }

 .activities .section-title,
 .activities .section-text {
     color: var(--white);
 }

 .activities .section-text {
     color: rgba(255, 255, 255, .74);
 }

 .activity-list {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 18px;
     margin-top: 52px;
 }

 .activity-item {
     padding: 28px;
     border-radius: 26px;
     border: 1px solid rgba(255, 255, 255, .12);
     background: rgba(255, 255, 255, .055);
     backdrop-filter: blur(16px);
     display: grid;
     grid-template-columns: 64px 1fr;
     gap: 18px;
     align-items: start;
     transition: .35s ease;
 }

 .activity-item:hover {
     transform: translateY(-6px);
     border-color: rgba(201, 154, 91, .32);
     background: rgba(255, 255, 255, .085);
 }

 .activity-icon {
     width: 64px;
     height: 64px;
     border-radius: 20px;
     display: grid;
     place-items: center;
     background: rgba(255, 255, 255, .08);
     border: 1px solid rgba(255, 255, 255, .14);
 }

 .activity-icon svg {
     width: 34px;
     height: 34px;
     fill: none;
     stroke: var(--gold);
     stroke-width: 1.65;
     stroke-linecap: round;
     stroke-linejoin: round;
 }

 .activity-item h3 {
     font-family: var(--serif);
     font-size: 2rem;
     line-height: 1;
     color: var(--white);
     margin-bottom: 10px;
 }

 .activity-item p {
     color: rgba(255, 255, 255, .68);
     line-height: 1.72;
     font-size: .94rem;
 }

 .image-band {
     min-height: 540px;
     padding: 112px 6vw;
     position: relative;
     display: flex;
     align-items: center;
     overflow: hidden;
     color: var(--white);
 }

 .image-band::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, rgba(7, 24, 45, .95), rgba(16, 35, 63, .68), rgba(16, 35, 63, .24)), var(--band-image) center/cover no-repeat;
     transform: scale(1.04);
 }

 .image-band::after {
     content: "";
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at 78% 30%, rgba(201, 154, 91, .2), transparent 34%);
 }

 .image-band .section-title,
 .image-band .section-text {
     color: var(--white);
 }

 .image-band .section-text {
     color: rgba(255, 255, 255, .76);
 }

 .image-band-content {
     max-width: 760px;
     position: relative;
     z-index: 2;
 }

 .featured-event {
     background: var(--white);
 }

 .event-card {
     margin-top: 52px;
     display: grid;
     grid-template-columns: 0.72fr 1.05fr;
     gap: 0;
     overflow: hidden;
     border-radius: 42px;
     background: var(--navy);
     box-shadow: var(--shadow);
     border: 1px solid rgba(16, 35, 63, .1);
     align-items: stretch;
 }

 .event-visual {
     width: 100%;
     position: relative;
     overflow: hidden;
     background: var(--navy);
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 26px;
 }

 .event-visual::before {
     content: "";
     width: 100%;
     max-width: 430px;
     aspect-ratio: 1080 / 1350;
     border-radius: 28px;
     background:
         linear-gradient(180deg, rgba(7, 24, 45, .02), rgba(7, 24, 45, .18)),
         url("../images/announcement.jpg") center/cover no-repeat;
     box-shadow: 0 28px 75px rgba(0, 0, 0, .32);
     border: 1px solid rgba(255, 255, 255, .16);
 }

 .event-visual::after {
     content: "";
     position: absolute;
     inset: 0;
     pointer-events: none;
     background:
         radial-gradient(circle at 50% 18%, rgba(201, 154, 91, .18), transparent 28%),
         linear-gradient(180deg, transparent 55%, rgba(7, 24, 45, .35));
 }

 .event-content {
     padding: 58px;
     color: var(--white);
     display: flex;
     flex-direction: column;
     justify-content: center;
     position: relative;
     overflow: hidden;
     background: radial-gradient(circle at 92% 12%, rgba(201, 154, 91, .16), transparent 30%), linear-gradient(145deg, #07182D, #10233F);
 }

 .event-content::before {
     content: "";
     position: absolute;
     right: -160px;
     bottom: -160px;
     width: 420px;
     height: 420px;
     border-radius: 50%;
     border: 1px solid rgba(201, 154, 91, .22);
 }

 .event-content>* {
     position: relative;
     z-index: 2;
 }

 .event-label {
     color: var(--gold);
     font-size: .72rem;
     font-weight: 800;
     letter-spacing: .18em;
     text-transform: uppercase;
     margin-bottom: 18px;
 }

 .event-content h2 {
     font-family: var(--serif);
     font-size: clamp(2.6rem, 5vw, 5.2rem);
     line-height: .88;
     letter-spacing: -.045em;
     font-weight: 500;
     margin-bottom: 22px;
 }

 .event-content p {
     color: rgba(255, 255, 255, .72);
     line-height: 1.85;
     font-size: 1rem;
     margin-bottom: 26px;
 }

 .event-meta {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px;
     margin: 8px 0 30px;
 }

 .event-meta-card {
     padding: 16px;
     border-radius: 18px;
     background: rgba(255, 255, 255, .07);
     border: 1px solid rgba(255, 255, 255, .12);
 }

 .event-meta-card span {
     display: block;
     font-size: .62rem;
     font-weight: 800;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--gold);
     margin-bottom: 8px;
 }

 .event-meta-card strong {
     display: block;
     color: var(--white);
     font-family: var(--serif);
     font-size: 1.18rem;
     line-height: 1.1;
 }

 .event-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
 }

 .news {
     background: linear-gradient(180deg, var(--ice), var(--white));
 }

 .news-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     margin-top: 52px;
 }

 .news-card {
     padding: 30px;
     min-height: 290px;
     border-radius: var(--radius);
     background: var(--white);
     border: 1px solid var(--line);
     box-shadow: 0 18px 45px rgba(7, 24, 45, .06);
     transition: .35s ease;
     position: relative;
     overflow: hidden;
 }

 .news-card::before {
     content: "";
     position: absolute;
     top: -90px;
     right: -90px;
     width: 210px;
     height: 210px;
     border-radius: 50%;
     background: rgba(31, 78, 121, .08);
 }

 .news-card:hover {
     transform: translateY(-8px);
     box-shadow: var(--shadow);
 }

 .news-date {
     color: var(--gold);
     font-size: .72rem;
     font-weight: 800;
     letter-spacing: .16em;
     text-transform: uppercase;
     margin-bottom: 22px;
 }

 .news-card h3 {
     font-family: var(--serif);
     font-size: 2rem;
     line-height: 1;
     color: var(--navy);
     margin-bottom: 14px;
 }

 .news-card p {
     color: var(--muted);
     line-height: 1.75;
     font-size: .94rem;
     margin-bottom: 22px;
 }

 .text-link {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     color: var(--blue);
     font-size: .74rem;
     font-weight: 800;
     letter-spacing: .1em;
     text-transform: uppercase;
 }

 .text-link:hover {
     color: var(--gold);
 }

 .membership {
     background: linear-gradient(rgba(7, 24, 45, .88), rgba(7, 24, 45, .94)), url("../images/landmark-hotel.jpg") center/cover no-repeat;
     color: var(--white);
 }

 .membership .section-title,
 .membership .section-text {
     color: var(--white);
 }

 .membership .section-text {
     color: rgba(255, 255, 255, .74);
 }

 .membership-box {
     margin-top: 48px;
     padding: 42px;
     border-radius: 34px;
     display: grid;
     grid-template-columns: 1fr .95fr;
     gap: 36px;
     align-items: center;
     background: rgba(255, 255, 255, .08);
     border: 1px solid rgba(255, 255, 255, .13);
     backdrop-filter: blur(16px);
 }

 .membership-list {
     display: grid;
     gap: 12px;
 }

 .membership-item {
     display: flex;
     gap: 12px;
     align-items: flex-start;
     color: rgba(255, 255, 255, .76);
     line-height: 1.7;
 }

 .membership-item svg {
     flex: 0 0 20px;
     width: 20px;
     height: 20px;
     margin-top: 3px;
     fill: none;
     stroke: var(--gold);
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;
 }

 .footer {
     padding: 62px 6vw 34px;
     background: #04101F;
     color: var(--white);
 }

 .footer-grid {
     max-width: var(--max);
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1.25fr .75fr .75fr;
     gap: 42px;
     padding-bottom: 42px;
     border-bottom: 1px solid rgba(255, 255, 255, .12);
 }

 .footer h3 {
     font-family: var(--display);
     font-size: 1.28rem;
     letter-spacing: .06em;
     margin-bottom: 16px;
 }

 .footer p,
 .footer a {
     color: rgba(255, 255, 255, .68);
     line-height: 1.8;
     font-size: .92rem;
 }

 .footer a:hover {
     color: var(--gold);
 }

 .footer-links {
     display: grid;
     gap: 8px;
 }

 .footer-bottom {
     max-width: var(--max);
     margin: 24px auto 0;
     display: flex;
     justify-content: space-between;
     gap: 20px;
     color: rgba(255, 255, 255, .46);
     font-size: .82rem;
 }

 .reveal-up,
 .reveal-left,
 .reveal-right,
 .reveal-scale,
 .mission-card,
 .activity-item,
 .news-card {
     opacity: 0;
     transition: opacity .85s ease, transform .85s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease;
 }

 .reveal-up,
 .mission-card,
 .activity-item,
 .news-card {
     transform: translateY(34px);
 }

 .reveal-left {
     transform: translateX(-42px);
 }

 .reveal-right {
     transform: translateX(42px);
 }

 .reveal-scale {
     transform: scale(.94);
 }

 .reveal-visible {
     opacity: 1 !important;
     transform: translate(0, 0) scale(1) !important;
 }

 @keyframes heroZoom {
     from {
         transform: scale(1.07);
     }

     to {
         transform: scale(1.13);
     }
 }

 @keyframes slowRotate {
     from {
         transform: rotate(-20deg);
     }

     to {
         transform: rotate(340deg);
     }
 }

 @keyframes floatOrb {

     0%,
     100% {
         transform: translate(0, 0);
     }

     50% {
         transform: translate(18px, -26px);
     }
 }

 @media (max-width: 1120px) {
     .nav-links {
         display: none;
     }

     .mobile-toggle {
         display: block;
     }

     .nav-links.mobile-active {
         display: flex;
         position: fixed;
         inset: 78px 18px auto 18px;
         flex-direction: column;
         align-items: stretch;
         padding: 24px;
         border-radius: 24px;
         background: rgba(244, 248, 250, .96);
         border: 1px solid rgba(16, 35, 63, .12);
         box-shadow: var(--shadow);
         backdrop-filter: blur(18px);
     }

     .nav-links.mobile-active a {
         color: var(--navy);
     }

     .hero-grid,
     .about-grid,
     .event-card,
     .membership-box {
         grid-template-columns: 1fr;
     }

     .hero-visual {
         order: -1;
     }

     .society-card {
         min-height: 500px;
     }

     .mission-grid,
     .news-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .activity-list {
         grid-template-columns: 1fr;
     }

     .event-visual {
         min-height: 430px;
     }
 }

 @media (max-width: 760px) {
     :root {
         --section: 82px 5vw;
     }

     .site-header {
         padding: 12px 5vw;
     }

     .brand-text span {
         display: none;
     }

     .nav-actions .btn {
         display: none;
     }

     .hero {
         padding: 120px 5vw 60px;
     }

     .hero-title {
         font-size: clamp(3.05rem, 16vw, 4.85rem);
     }

     .hero-buttons .btn {
         width: 100%;
     }

     .society-card {
         min-height: 450px;
         border-radius: 30px;
     }

     .society-emblem {
         width: 92%;
         padding: 26px;
     }

     .society-emblem h2 {
         font-size: 1.6rem;
     }

     .hero-stats {
         grid-template-columns: 1fr;
     }

     .mission-grid,
     .stats-grid,
     .event-meta,
     .news-grid,
     .footer-grid {
         grid-template-columns: 1fr;
     }

     .activity-item {
         grid-template-columns: 1fr;
     }

     .event-content {
         padding: 36px 26px;
     }

     .footer-bottom {
         flex-direction: column;
     }
 }

 @media (max-width: 1120px) {
     .event-card {
         grid-template-columns: 1fr;
     }

     .event-visual {
         padding: 34px 20px;
     }

     .event-visual::before {
         max-width: 420px;
     }
 }

 @media (max-width: 760px) {
     .event-visual {
         padding: 26px 16px;
     }

     .event-visual::before {
         max-width: 100%;
         border-radius: 22px;
     }
 }

 .administrative-body {
     background:
         radial-gradient(circle at 12% 18%, rgba(201, 154, 91, .13), transparent 30%),
         linear-gradient(180deg, var(--white), var(--ice));
 }

 .administrative-body::before {
     content: "";
     position: absolute;
     width: 640px;
     height: 640px;
     border-radius: 50%;
     border: 1px solid rgba(31, 78, 121, .14);
     right: -260px;
     top: 80px;
     pointer-events: none;
 }

 .administrative-body::after {
     content: "";
     position: absolute;
     width: 420px;
     height: 420px;
     border-radius: 50%;
     border: 1px solid rgba(201, 154, 91, .16);
     left: -180px;
     bottom: 40px;
     pointer-events: none;
 }

 .admin-head {
     max-width: 860px;
 }

 .admin-grid {
     margin-top: 52px;
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 18px;
     position: relative;
     z-index: 2;
 }

 .admin-card {
     min-height: 285px;
     padding: 30px 24px;
     border-radius: 30px;
     background:
         linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(220, 234, 244, .62));
     border: 1px solid rgba(16, 35, 63, .1);
     box-shadow: 0 18px 45px rgba(7, 24, 45, .06);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
     position: relative;
     overflow: hidden;
 }

 .admin-card::before {
     content: "";
     position: absolute;
     width: 170px;
     height: 170px;
     right: -70px;
     top: -70px;
     border-radius: 50%;
     background: rgba(31, 78, 121, .08);
 }

 .admin-card:hover {
     transform: translateY(-8px);
     box-shadow: var(--shadow);
     border-color: rgba(31, 78, 121, .24);
 }

 .admin-card-featured {
     background:
         radial-gradient(circle at 80% 12%, rgba(201, 154, 91, .2), transparent 34%),
         linear-gradient(145deg, var(--navy), var(--navy-2));
     color: var(--white);
 }

 .admin-card-featured::before {
     background: rgba(201, 154, 91, .14);
 }

 .admin-icon {
     width: 62px;
     height: 62px;
     border-radius: 20px;
     background: rgba(31, 78, 121, .09);
     border: 1px solid rgba(31, 78, 121, .18);
     display: grid;
     place-items: center;
     position: relative;
     z-index: 2;
 }

 .admin-card-featured .admin-icon {
     background: rgba(255, 255, 255, .08);
     border-color: rgba(255, 255, 255, .16);
 }

 .admin-icon svg {
     width: 34px;
     height: 34px;
     fill: none;
     stroke: var(--blue);
     stroke-width: 1.65;
     stroke-linecap: round;
     stroke-linejoin: round;
 }

 .admin-card-featured .admin-icon svg {
     stroke: var(--gold);
 }

 .admin-role {
     display: inline-block;
     margin-top: 34px;
     margin-bottom: 12px;
     color: var(--gold);
     font-size: .68rem;
     font-weight: 800;
     letter-spacing: .15em;
     text-transform: uppercase;
     position: relative;
     z-index: 2;
 }

 .admin-card:not(.admin-card-featured) .admin-role {
     color: var(--blue);
 }

 .admin-card h3 {
     font-family: var(--serif);
     font-size: 2rem;
     line-height: .95;
     font-weight: 600;
     color: var(--navy);
     position: relative;
     z-index: 2;
 }

 .admin-card-featured h3 {
     color: var(--white);
 }

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

     .admin-card-featured {
         grid-column: span 2;
     }
 }

 @media (max-width: 760px) {
     .admin-grid {
         grid-template-columns: 1fr;
     }

     .admin-card-featured {
         grid-column: span 1;
     }

     .admin-card {
         min-height: 245px;
     }
 }