/* ====================================================
   DESIGN TOKENS
   Palette: Parchment White #FFFFFF / Light Grey #F8F9FA / Light Orange (Sand Gold) #F4A261
            Chinese Red #D62828 / Ink #2D2D2D / Border #E5E5E5
   Display: Poppins (Latin) + Noto Serif SC (Chinese accent glyphs)
   Body: Open Sans
   Signature element: the "Two Banners, One Bridge" hero — a hairline
   great-circle route stitching Colombo to Beijing across a faint relief
   map, with the two national insignia colours meeting at a single
   embroidered seam in the middle. It's the one moment of real motion;
   everything else stays still and disciplined.
==================================================== */
:root{
  --orange:#F4A261;
  --orange-dark:#E0883F;
  --orange-deep:#B85E1E;
  --red:#D62828;
  --ink:#2D2D2D;
  --grey:#F8F9FA;
  --border:#E5E5E5;
  --white:#FFFFFF;
  --gold-line: linear-gradient(90deg, var(--red), var(--orange));
  --shadow-soft: 0 10px 30px rgba(45,45,45,0.07);
  --shadow-lift: 0 18px 45px rgba(214,40,40,0.12);
  --radius-lg: 22px;
  --radius-md: 14px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Open Sans', sans-serif;
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
}
h1,h2,h3,h4,.font-display{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
}
.eyebrow{
  font-family:'Poppins',sans-serif;
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--red);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.eyebrow::before{
  content:'';
  width:26px;height:2px;
  background:var(--orange);
  display:inline-block;
}
.zh-accent{font-family:'Noto Serif SC', serif; font-weight:600;}
.section-pad{padding:6.5rem 0;}
@media(max-width:768px){.section-pad{padding:4rem 0;}}
.text-orange{color:var(--orange-dark);}
.text-red{color:var(--red);}
.bg-grey{background:var(--grey);}
.btn-gold{
  background:var(--orange);
  border:none;
  color:#fff;
  font-family:'Poppins',sans-serif;
  font-weight:600;
  padding:.85rem 1.9rem;
  border-radius:999px;
  transition:.3s ease;
  box-shadow:0 8px 20px rgba(244,162,97,.35);
}
.btn-gold:hover{background:var(--orange-dark); color:#fff; transform:translateY(-2px); box-shadow:0 12px 26px rgba(244,162,97,.45);}
.btn-outline-line{
  border:1.5px solid rgba(255,255,255,.6);
  color:#fff;
  font-family:'Poppins',sans-serif;
  font-weight:600;
  padding:.85rem 1.9rem;
  border-radius:999px;
  background:transparent;
  transition:.3s ease;
}
.btn-outline-line:hover{background:rgba(255,255,255,.12); border-color:#fff; color:#fff;}
.btn-red{
  background:var(--red); color:#fff; border:none;
  font-family:'Poppins',sans-serif; font-weight:600;
  padding:.85rem 1.9rem; border-radius:999px;
}
.btn-red:hover{background:#b71f1f; color:#fff;}

/* ---------- Topbar ---------- */
.topbar{
  background:var(--ink);
  color:#cfcfcf;
  font-size:.82rem;
  padding:.45rem 0;
}
.topbar a{color:#e6e6e6; text-decoration:none;}
.topbar a:hover{color:var(--orange);}
.lang-switch span{
  cursor:pointer; padding:0 .4rem; opacity:.7;
}
.lang-switch span.active{opacity:1; color:var(--orange); font-weight:600;}

/* ---------- Navbar ---------- */
.navbar-main{
  position:fixed; top:0; left:0; right:0; z-index:1030;
  margin-top:32px;
  padding:1.1rem 0;
  transition:all .35s ease;
  background:transparent;
}
.navbar-main.scrolled{
  margin-top:0;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 4px 20px rgba(0,0,0,.06);
  padding:.65rem 0;
}
.navbar-logo{
  height:48px; width:auto; display:block; transition:.35s;
}
.navbar-main.scrolled .navbar-logo{height:38px;}
.navbar-main .brand-text{
  font-family:'Poppins',sans-serif; font-weight:700; line-height:1.05;
  color:#fff; transition:.35s;
}
.navbar-main.scrolled .brand-text{color:var(--ink);}
.brand-text small{display:block; font-size:.62rem; letter-spacing:.12em; font-weight:500; opacity:.8; text-transform:uppercase;}
.navbar-main .nav-link{
  color:var(--orange-dark) !important;
  font-family:'Poppins',sans-serif;
  font-weight:600;
  font-size:.92rem;
  margin:0 .65rem;
  position:relative;
  transition:.3s;
}
.navbar-main.scrolled .nav-link{color:var(--ink) !important;}
.navbar-main .nav-link::after{
  content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px;
  background:var(--orange-deep); transition:.3s;
}
.navbar-main .nav-link:hover::after, .navbar-main .nav-link.active::after{width:100%;}
.navbar-main .nav-link:hover, .navbar-main .nav-link.active{color:var(--orange-deep) !important;}


/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  background:
    radial-gradient(ellipse at 18% 20%, rgba(244,162,97,.35), transparent 55%),
    radial-gradient(ellipse at 85% 75%, rgba(214,40,40,.18), transparent 50%),
    linear-gradient(160deg, #fff 0%, #FFF6EE 55%, #FDEAD9 100%);
  overflow:hidden;
}
.hero-pattern{
  position:absolute; inset:0; opacity:.5; pointer-events:none;
}
.hero-content{position:relative; z-index:3; padding-top:7rem;}
.hero h1{
  font-size:clamp(2.1rem, 4.4vw, 3.4rem);
  color:var(--ink);
  line-height:1.15;
}
.hero h1 .hl{color:var(--red);}
.hero p.lead-sub{
  font-size:1.12rem; color:#5a5a5a; max-width:560px;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid var(--border);
  padding:.45rem .9rem; border-radius:999px;
  font-size:.78rem; font-weight:600; color:var(--ink);
  box-shadow:var(--shadow-soft); margin-bottom:1.5rem;
}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--red);}

/* Signature route map */
.route-wrap{
  position:relative; width:100%; max-width:560px; margin:0 auto;
  aspect-ratio:1/1;
}
.route-svg{width:100%; height:100%;}
.route-path{
  fill:none; stroke:url(#routeGrad); stroke-width:2.4;
  stroke-dasharray:6 7; stroke-linecap:round;
  animation:dashmove 22s linear infinite;
}
@keyframes dashmove{to{stroke-dashoffset:-500;}}
.route-pulse{
  animation:pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100%{r:5; opacity:1;}
  50%{r:9; opacity:.4;}
}
.seam{
  animation:seamGlow 3s ease-in-out infinite;
}
@keyframes seamGlow{
  0%,100%{opacity:.55;}
  50%{opacity:1;}
}
.route-label{
  font-family:'Poppins',sans-serif; font-size:11px; font-weight:600; fill:var(--ink);
}

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:3; color:var(--ink); opacity:.55; font-size:1.3rem;
  animation:bob 1.8s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

/* ---------- Counters strip ---------- */
.counter-strip{
  background:var(--ink);
  color:#fff;
  padding:2.6rem 0;
}
.counter-num{
  font-family:'Poppins',sans-serif; font-weight:800; font-size:2.4rem;
  color:var(--orange);
}
.counter-label{font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; color:#cfcfcf;}

/* ---------- Glass cards (Mission/Vision) ---------- */
.glass-card{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-lg);
  padding:2.6rem;
  box-shadow:var(--shadow-soft);
  height:100%;
  transition:.35s;
}
.glass-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift);}
.icon-badge{
  width:58px; height:58px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--orange), var(--red));
  color:#fff; font-size:1.3rem; margin-bottom:1.3rem;
}

/* ---------- About / timeline mini ---------- */
.about-img-wrap{position:relative;}
.about-img-wrap img{border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); width:100%;}
.about-img-wrap .floating-card{
  position:absolute; bottom:-28px; left:-28px;
  background:#fff; border-radius:var(--radius-md);
  padding:1.1rem 1.4rem; box-shadow:var(--shadow-lift);
  display:flex; align-items:center; gap:.8rem;
}
@media(max-width:768px){.about-img-wrap .floating-card{left:10px; bottom:-20px;}}

/* ---------- President message ---------- */
.president-card{
  background:linear-gradient(135deg,#fff, #FFF7EF);
  border-radius:var(--radius-lg);
  padding:3rem;
  box-shadow:var(--shadow-soft);
  position:relative;
}
.president-card .quote-mark{
  font-family:'Poppins',sans-serif; font-size:4.5rem; color:var(--orange); line-height:0; opacity:.5;
}
.president-portrait{
  width:100%; border-radius:18px; box-shadow:var(--shadow-soft);
}
.signature-script{
  font-family:'Poppins',sans-serif; font-style:italic; font-weight:600; color:var(--red); font-size:1.3rem;
}

/* ---------- News / Events cards ---------- */
.news-card, .event-card{
  border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--border); background:#fff;
  transition:.3s; height:100%;
}
.news-card:hover, .event-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-soft);}
.news-card img, .event-card .ev-banner{height:200px; width:100%; object-fit:cover;}
.tag-chip{
  background:#FDEAD9; color:var(--orange-dark); font-size:.72rem; font-weight:700;
  padding:.3rem .7rem; border-radius:999px; text-transform:uppercase; letter-spacing:.04em;
}
.event-date-badge{
  position:absolute; top:14px; left:14px;
  background:#fff; border-radius:10px; text-align:center; padding:.5rem .7rem;
  box-shadow:var(--shadow-soft); line-height:1;
}
.event-date-badge .dnum{font-family:'Poppins',sans-serif; font-weight:800; color:var(--red); font-size:1.2rem;}
.event-date-badge .dmon{font-size:.65rem; text-transform:uppercase; letter-spacing:.05em;}
.countdown{display:flex; gap:.7rem;}
.countdown .cd-box{
  background:var(--ink); color:#fff; border-radius:10px; padding:.5rem .2rem; width:58px; text-align:center;
}
.countdown .cd-box b{display:block; font-family:'Poppins',sans-serif; font-size:1.1rem;}
.countdown .cd-box span{font-size:.62rem; text-transform:uppercase; opacity:.7;}

/* ---------- Gallery masonry ---------- */
.masonry{column-count:3; column-gap:14px;}
@media(max-width:768px){.masonry{column-count:1;}}
@media(min-width:769px) and (max-width:1024px){.masonry{column-count:2;}}
.masonry .m-item{
  break-inside:avoid; margin-bottom:14px; position:relative; border-radius:var(--radius-md); overflow:hidden;
}
.masonry .m-item img{width:100%; display:block; transition:.5s;}
.masonry .m-item:hover img{transform:scale(1.06);}
.masonry .m-item .overlay{
  position:absolute; inset:0; background:linear-gradient(0deg, rgba(45,45,45,.75), transparent 55%);
  display:flex; align-items:flex-end; padding:1rem; opacity:0; transition:.35s;
}
.masonry .m-item:hover .overlay{opacity:1;}
.masonry .m-item .overlay span{color:#fff; font-weight:600; font-size:.88rem;}

/* ---------- Committee ---------- */
.committee-card{
  background:#fff; border-radius:var(--radius-lg); text-align:center; padding:2rem 1.4rem;
  border:1px solid var(--border); transition:.35s; position:relative; overflow:hidden;
}
.committee-card:hover{box-shadow:var(--shadow-lift); transform:translateY(-6px); border-color:transparent;}
.committee-card::before{
  content:''; position:absolute; inset:0; padding:2px; border-radius:var(--radius-lg);
  background:linear-gradient(135deg, var(--orange), var(--red)); opacity:0; transition:.35s;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.committee-card:hover::before{opacity:1;}
.committee-card img{
  width:108px; height:108px; object-fit:cover; border-radius:50%; margin:0 auto 1.1rem;
  border:4px solid var(--grey);
}
.committee-card .rank{color:var(--red); font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;}
.committee-card .pos{color:#777; font-size:.85rem;}
.committee-card .soc a{
  color:var(--ink); margin:0 .35rem; opacity:.6; transition:.25s;
}
.committee-card .soc a:hover{opacity:1; color:var(--red);}

/* ---------- Partners ---------- */
.partner-strip{
  background:var(--grey); padding:3rem 0; overflow:hidden;
}
.partner-track{
  display:flex; gap:4rem; align-items:center; width:max-content;
  animation:scrollX 28s linear infinite;
}
@keyframes scrollX{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.partner-track .p-logo{
  font-family:'Poppins',sans-serif; font-weight:700; color:#9a9a9a; font-size:1.05rem; white-space:nowrap;
  display:flex; align-items:center; gap:.5rem;
}

/* ---------- Achievements ---------- */
.badge-medal{
  width:84px; height:84px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #FFE3C2, var(--orange));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.6rem;
  margin:0 auto 1rem; box-shadow:0 10px 22px rgba(244,162,97,.4);
  border:3px solid #fff;
}

/* ---------- Membership ---------- */
.tier-card{
  border-radius:var(--radius-lg); padding:2.4rem 2rem; background:#fff;
  border:1px solid var(--border); height:100%; transition:.35s; position:relative;
}
.tier-card.featured{
  background:linear-gradient(160deg, var(--ink), #1c1c1c); color:#fff; transform:scale(1.04);
  box-shadow:var(--shadow-lift);
}
.tier-card.featured .text-muted{color:#bbb !important;}
.tier-card:hover{transform:translateY(-6px);}
.tier-card.featured:hover{transform:scale(1.04) translateY(-6px);}
.tier-card .ribbon{
  position:absolute; top:-12px; right:24px; background:var(--red); color:#fff;
  font-size:.7rem; font-weight:700; padding:.3rem .8rem; border-radius:999px; letter-spacing:.04em;
}
.tier-card ul{list-style:none; padding:0; margin:1.4rem 0;}
.tier-card ul li{padding:.4rem 0; font-size:.92rem;}
.tier-card ul li i{color:var(--orange); margin-right:.6rem;}
.tier-card.featured ul li i{color:var(--orange);}

/* ---------- Testimonials ---------- */
.testi-card{
  background:#fff; border-radius:var(--radius-lg); padding:2.2rem;
  border:1px solid var(--border); box-shadow:var(--shadow-soft); height:100%;
}
.testi-card .stars{color:var(--orange); font-size:.85rem;}
.testi-avatar{width:50px; height:50px; border-radius:50%; object-fit:cover;}

/* ---------- CTA ---------- */
.cta-section{
  background:
    radial-gradient(ellipse at 20% 30%, rgba(244,162,97,.5), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(214,40,40,.4), transparent 55%),
    var(--ink);
  border-radius:var(--radius-lg);
  padding:4rem 2rem;
  color:#fff; text-align:center;
  margin:0 1rem;
}

/* ---------- Footer ---------- */
footer{background:#1c1c1c; color:#c9c9c9; padding-top:4.5rem;}
footer h6{color:#fff; font-family:'Poppins',sans-serif; font-weight:700; margin-bottom:1.2rem;}
footer a{color:#bdbdbd; text-decoration:none; transition:.25s;}
footer a:hover{color:var(--orange);}
.footer-bottom{border-top:1px solid #333; margin-top:3rem; padding:1.4rem 0; font-size:.85rem; color:#999;}
.social-circle{
  width:38px; height:38px; border-radius:50%; background:#2a2a2a;
  display:inline-flex; align-items:center; justify-content:center; color:#fff; margin-right:.5rem; transition:.25s;
}
.social-circle:hover{background:var(--orange); color:#fff;}
.newsletter-input{
  background:#2a2a2a; border:1px solid #3a3a3a; color:#fff; border-radius:999px 0 0 999px; padding:.7rem 1.2rem;
}
.newsletter-input::placeholder{color:#888;}
.newsletter-btn{border-radius:0 999px 999px 0; background:var(--orange); border:none; color:#fff; padding:0 1.3rem; font-weight:600;}

/* ---------- Misc ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; background:var(--gold-line); z-index:2000; width:0%;
}
.back-to-top{
  position:fixed; bottom:24px; right:24px; width:46px; height:46px; border-radius:50%;
  background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-soft); opacity:0; pointer-events:none; transition:.3s; z-index:1500; text-decoration:none;
}
.back-to-top.show{opacity:1; pointer-events:auto;}
.back-to-top:hover{background:var(--orange); color:#fff;}
.section-divider{
  width:100%; height:60px; display:block;
}
::selection{background:var(--orange); color:#fff;}

/* ====================================================
   PHASE 2 — shared components for inner pages
==================================================== */

/* Page header banner (About/Committee/News/etc hero strip) */
.page-banner{
  position:relative; padding:9rem 0 4rem; margin-bottom:0;
  background:
    radial-gradient(ellipse at 15% 30%, rgba(244,162,97,.30), transparent 55%),
    radial-gradient(ellipse at 90% 80%, rgba(214,40,40,.18), transparent 50%),
    linear-gradient(160deg, #fff 0%, #FFF6EE 60%, #FDEAD9 100%);
  overflow:hidden;
}
.page-banner h1{font-size:clamp(1.8rem,3.6vw,2.7rem); margin-bottom:.5rem;}
.breadcrumb-line{font-size:.85rem; color:#8a8a8a;}
.breadcrumb-line a{color:#8a8a8a; text-decoration:none;}
.breadcrumb-line a:hover{color:var(--red);}
.breadcrumb-line .sep{margin:0 .4rem; opacity:.5;}

/* Timeline (About page) */
.timeline{position:relative; padding-left:2.4rem;}
.timeline::before{
  content:''; position:absolute; left:9px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg, var(--red), var(--orange));
}
.timeline-item{position:relative; padding-bottom:2.4rem;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:''; position:absolute; left:-2.4rem; top:4px; width:20px; height:20px; border-radius:50%;
  background:#fff; border:3px solid var(--orange); z-index:2;
}
.timeline-item .t-year{
  font-family:'Poppins',sans-serif; font-weight:700; color:var(--red); font-size:1.05rem;
}

/* Core values grid */
.value-card{
  text-align:center; padding:2rem 1.2rem; border-radius:var(--radius-md);
  background:#fff; border:1px solid var(--border); transition:.3s; height:100%;
}
.value-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-soft); border-color:transparent;}
.value-card i{font-size:1.7rem; color:var(--orange-dark); margin-bottom:.9rem;}

/* Filters bar (Members / Gallery / News listing) */
.filter-bar{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
  padding:1.4rem; box-shadow:var(--shadow-soft);
}
.filter-bar label{font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#8a8a8a;}
.filter-bar .form-select, .filter-bar .form-control{border-radius:10px; border-color:var(--border);}

/* Member directory cards */
.member-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
  padding:1.6rem 1.2rem; text-align:center; transition:.3s; cursor:pointer; height:100%;
}
.member-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft); border-color:transparent;}
.member-card img{width:78px; height:78px; border-radius:50%; object-fit:cover; margin-bottom:.8rem; border:3px solid var(--grey);}
.member-card .m-batch{font-size:.72rem; color:var(--orange-dark); font-weight:700; text-transform:uppercase;}

/* Pagination */
.pagination .page-link{
  border:none; color:var(--ink); font-weight:600; margin:0 .2rem; border-radius:8px !important;
}
.pagination .page-item.active .page-link{background:var(--orange); color:#fff;}
.pagination .page-link:hover{background:var(--grey); color:var(--ink);}

/* Generic content forms (contact, membership application, login) */
.form-card{
  background:#fff; border-radius:var(--radius-lg); padding:2.4rem; box-shadow:var(--shadow-soft); border:1px solid var(--border);
}
.form-floating > label{color:#999;}
.form-control:focus, .form-select:focus{
  border-color:var(--orange); box-shadow:0 0 0 .2rem rgba(244,162,97,.2);
}
.form-control, .form-select{border-radius:10px; border-color:var(--border); padding:.7rem .9rem;}

/* Login card */
.auth-wrap{
  min-height:80vh; display:flex; align-items:center;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(244,162,97,.25), transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(214,40,40,.15), transparent 50%),
    linear-gradient(160deg, #fff 0%, #FFF6EE 60%, #FDEAD9 100%);
}
.auth-card{
  max-width:440px; margin:0 auto; background:#fff; border-radius:var(--radius-lg);
  padding:2.6rem; box-shadow:var(--shadow-lift);
}

/* Publications / downloads list */
.pub-item{
  display:flex; align-items:center; gap:1.1rem; padding:1.2rem; background:#fff;
  border:1px solid var(--border); border-radius:var(--radius-md); transition:.25s;
}
.pub-item:hover{box-shadow:var(--shadow-soft); border-color:transparent;}
.pub-icon{
  width:52px; height:52px; min-width:52px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--orange), var(--red)); color:#fff; font-size:1.3rem;
}

/* Alerts (flash messages) */
.flash-alert{border-radius:12px; border:none; font-size:.92rem;}

/* Map + contact split */
.map-frame{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft); height:100%; min-height:360px;}
.contact-info-item{display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.4rem;}
.contact-info-item i{
  width:42px; height:42px; border-radius:10px; background:var(--grey); color:var(--red);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* Organization structure chart (About page) */
.org-chart{text-align:center;}
.org-node{
  display:inline-block; background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:.8rem 1.4rem; font-weight:600; font-size:.88rem; box-shadow:var(--shadow-soft);
}
.org-node.top{border-color:var(--orange); color:var(--red);}