/* =================== Extra motion & polish =================== */
html,body{overflow-x:hidden}
/* clip hides sideways overflow without turning body into its own scroll box (keeps mobile scrolling smooth) */
@supports(overflow:clip){html,body{overflow-x:clip}}
@media(max-width:575.98px){.row.g-5{--bs-gutter-x:1.5rem}}

/* scroll progress bar */
#progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:2000;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--primary),#ffb27d,#7b5cff)}

/* preloader */
#preloader .pl{position:relative;width:88px;height:88px;display:grid;place-items:center}
#preloader .loader{position:absolute;inset:0;width:88px;height:88px}
#preloader .pm{margin:0;animation:beat 1.2s ease-in-out infinite}
@keyframes beat{50%{transform:scale(1.18)}}

/* floating particles */
[data-particles]{position:relative}
.particle{position:absolute;bottom:-20px;border-radius:50%;background:rgba(255,255,255,.35);pointer-events:none;z-index:2;animation:rise linear infinite}
.bg-dark-x .particle,.section-join .particle{background:rgba(255,178,125,.45)}
@keyframes rise{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}90%{opacity:.8}100%{transform:translateY(-110vh) translateX(40px);opacity:0}}

/* buttons: shine sweep */
.btn-brand,.btn-glass,.btn-outline-brand{position:relative;overflow:hidden}
.btn-brand::after,.btn-glass::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .7s}
.btn-brand:hover::after,.btn-glass:hover::after{left:130%}

/* hero extras */
.hero-tag{position:relative;overflow:hidden}
.hero-tag::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35),transparent 70%);transform:translateX(-100%);animation:shimmer 3.2s 1.5s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.home .hero-bg{translate:0 var(--py,0)}
.home .carousel-item.active .hero-content .hero-title.a2{background:linear-gradient(90deg,#fff 0%,#fff 55%,#ffd0b0 80%,#fff 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:up .8s .4s forwards,textflow 6s 1.4s linear infinite}
@keyframes textflow{to{background-position:-200% 0}}
.hero-zone::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:58px;z-index:4;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,32 C240,72 480,0 720,26 C960,52 1200,66 1440,20 L1440,60 L0,60 Z'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat}
.scroll-down{bottom:62px!important}

/* about image decoration */
.about-img{position:relative}
.about-img::before{content:"";position:absolute;left:-22px;bottom:-22px;width:60%;height:60%;border-radius:28px;background-image:radial-gradient(var(--primary) 2px,transparent 2px);background-size:16px 16px;opacity:.5;z-index:0;animation:dots 12s linear infinite}
.about-img::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;border:3px dashed var(--primary);opacity:.55;animation:spin 18s linear infinite;z-index:0}
.about-img img{position:relative;z-index:1;animation:floatImg 7s ease-in-out infinite}
.float-badge{z-index:2}
@keyframes floatImg{50%{transform:translateY(-10px)}}
@keyframes dots{to{background-position:32px 32px}}

/* section headings: bar grows when visible */
.sec-head .bar{width:0;transition:width .9s .3s cubic-bezier(.2,.8,.3,1)}
.sec-head.aos-animate .bar{width:90px}

/* marquee band */
.band-wrap{overflow:hidden;padding:1.6rem 0}
.band{background:linear-gradient(90deg,var(--primary),var(--primary-2),var(--primary));background-size:200% 100%;animation:gshift 10s linear infinite;color:#fff;transform:rotate(-1.2deg);margin:0 -3%;padding:.85rem 0;box-shadow:0 10px 30px rgba(232,89,12,.3)}
.band-track{display:flex;gap:2.6rem;width:max-content;animation:marquee 40s linear infinite}
.band:hover .band-track{animation-play-state:paused}
.band a{color:#fff;font-weight:700;font-size:1.1rem;white-space:nowrap}
.band a i{margin-right:.5rem}
.band .sep{opacity:.6}
@keyframes marquee{to{transform:translateX(-50%)}}

/* cards: 3D tilt + glare */
.card-x,.feature-card{position:relative;--rx:0deg;--ry:0deg}
.card-x::before,.feature-card::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.4),transparent 55%)}
.card-x.tilting,.feature-card.tilting{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px);transition:transform .08s linear,box-shadow .3s}
.card-x.tilting::before,.feature-card.tilting::before{opacity:1}
.feature-card .ic{animation:icBob 4s ease-in-out infinite}
.col-6:nth-child(even)>.feature-card .ic,.col-lg-4:nth-child(even)>.feature-card .ic{animation-delay:-2s}
@keyframes icBob{50%{transform:translateY(-6px) rotate(-4deg)}}

/* dark section: moving dots */
.bg-dark-x{background-image:radial-gradient(rgba(255,255,255,.09) 1.5px,transparent 1.5px),linear-gradient(135deg,var(--dark),#2c2f5e);background-size:28px 28px,100% 100%;animation:dots 30s linear infinite;position:relative;overflow:hidden}

/* badge glow */
.badge-x{box-shadow:0 4px 14px rgba(232,89,12,.45)}

/* gallery */
.g-item{transition:transform .4s,box-shadow .4s}
.g-item:hover{transform:rotate(-2deg) scale(1.04);box-shadow:0 18px 36px rgba(27,31,59,.3)}

/* confetti */
.confetti{position:fixed;left:50%;top:55%;width:10px;height:14px;z-index:3000;pointer-events:none;border-radius:2px;animation:confetti 1.6s cubic-bezier(.15,.8,.3,1) forwards}
@keyframes confetti{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}

@media(max-width:991px){.hero-zone::after{display:none}.band{transform:rotate(-.8deg)}}
@media(prefers-reduced-motion:reduce){.home .hero-content .hero-title{-webkit-text-fill-color:#fff;background:none}.particle{display:none}}
@media(min-width:992px){.home .carousel-indicators{margin-bottom:4rem!important}}

/* =================== Accessibility =================== */
.skip-link{position:absolute;left:12px;top:-60px;z-index:5000;background:#fff;color:var(--dark);padding:.7rem 1.1rem;border-radius:10px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.3);transition:top .2s}
.skip-link:focus{top:12px;color:var(--dark)}
main:focus{outline:none}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:6px}
.hero-zone :focus-visible,.bg-dark-x :focus-visible,.section-join :focus-visible,.site-footer :focus-visible,.topbar :focus-visible{outline-color:#fff}
.form-control:focus-visible,.form-select:focus-visible{outline:none}
.motion-toggle{position:fixed;left:14px;bottom:14px;z-index:1031;display:flex;align-items:center;gap:.4rem;border:0;border-radius:50px;padding:.45rem .9rem;font-size:.78rem;font-weight:600;color:#fff;background:rgba(27,31,59,.92);box-shadow:0 6px 18px rgba(0,0,0,.3);opacity:.85;transition:.25s}
.motion-toggle:hover,.motion-toggle:focus-visible{opacity:1}
@media(max-width:991px){.motion-toggle{bottom:84px;padding:.45rem .7rem}.motion-toggle span{display:none}}
/* user-selected "pause animations" mirrors prefers-reduced-motion */
html.no-motion *,html.no-motion *::before,html.no-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.no-motion .stat-glass{opacity:1}
html.no-motion .carousel-item .a1,html.no-motion .carousel-item .a2,html.no-motion .carousel-item .a3,html.no-motion .carousel-item .a4{opacity:1}
html.no-motion .home .hero-title{-webkit-text-fill-color:#fff;background:none}
html.no-motion .particle,html.no-motion .confetti{display:none}
html.no-motion .ticker-track,html.no-motion .band-track{transform:none}
html.no-motion [data-aos]{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.motion-toggle{display:none}[data-aos]{opacity:1!important;transform:none!important}}
.text-muted{color:#5f6278!important}
html.smooth{scroll-behavior:smooth}
.back-btn{position:absolute;left:12px;top:-1.6rem;display:inline-flex;align-items:center;gap:.4rem;padding:.4rem 1rem;border-radius:50px;font-size:.88rem;font-weight:600;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(8px);transition:.25s}
.back-btn:hover{background:#fff;color:var(--dark);transform:translateX(-4px)}
.page-hero .container{position:relative}
@media(max-width:575px){.back-btn{top:-1.9rem}}

/* =================== Inner pages: richer hero, article layout =================== */
.page-hero{padding:4.2rem 0 5.4rem}
.page-hero.has-img{background-image:linear-gradient(135deg,rgba(27,31,59,.9),rgba(58,42,107,.82) 55%,rgba(194,65,12,.78)),var(--hero-img);background-size:cover;background-position:center}
.page-hero::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.06);left:-70px;bottom:-90px}
.page-hero .container{z-index:2}
.page-hero::after{z-index:1}
.page-hero .wave,.page-hero + .detail-wrap::before{display:none}
.page-hero{--w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,32 C240,72 480,0 720,26 C960,52 1200,66 1440,20 L1440,60 L0,60 Z'/%3E%3C/svg%3E")}
.page-hero .container::after{content:"";position:absolute;left:-50vw;right:-50vw;bottom:-5.4rem;height:50px;background:var(--w) center bottom/100% 100% no-repeat;pointer-events:none}
.hero-chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:.8rem 0 1rem}
.hero-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .9rem;border-radius:50px;font-size:.85rem;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px);color:#fff}
.hero-chip.strong{background:var(--primary);border-color:transparent;font-weight:600}
.detail-wrap{padding:0 0 5rem;margin-top:-1.2rem;position:relative;z-index:3}
.article-card{background:#fff;border-radius:26px;box-shadow:0 24px 60px rgba(27,31,59,.13);padding:2.2rem;margin-top:-2.4rem}
.article-cover{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:18px;margin-bottom:1.6rem}
.article-lead{font-size:1.2rem;font-weight:500;color:var(--dark);border-left:4px solid var(--primary);padding-left:1rem;margin-bottom:1.6rem;line-height:1.7}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.pn a{display:flex;flex-direction:column;gap:.2rem;padding:1rem 1.2rem;border-radius:16px;background:var(--soft);color:var(--dark);transition:.3s}
.pn a:hover{background:var(--primary);color:#fff;transform:translateY(-4px)}
.pn a:hover small{color:#fff}
.pn small{color:var(--primary);font-weight:600}
.pn span{font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pn-next{text-align:right}
.side-sticky{position:sticky;top:96px;display:flex;flex-direction:column;gap:1.4rem;margin-top:-2.4rem}
.side-cta{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border-radius:22px;padding:1.8rem;text-align:center;box-shadow:0 18px 40px rgba(194,65,12,.35);position:relative;overflow:hidden}
.side-cta::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.12);right:-50px;top:-50px}
.side-cta>i{font-size:2.2rem;display:block;margin-bottom:.4rem;animation:icBob 4s ease-in-out infinite}
.side-cta h2{font-size:1.25rem;margin-bottom:.4rem}.side-cta p{font-size:.92rem;opacity:.95}
.side-cta .btn{color:var(--primary)}
.side-card{background:#fff;border-radius:22px;box-shadow:0 14px 36px rgba(27,31,59,.1);padding:1.4rem}
.side-card h2{font-size:1.05rem;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:2px solid var(--soft)}
.side-item{display:flex;gap:.8rem;align-items:center;padding:.5rem 0;color:var(--text);transition:.25s}
.side-item img{width:72px;height:56px;object-fit:cover;border-radius:10px;flex:none}
.side-item strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9rem;line-height:1.35;color:var(--dark)}
.side-item small{color:#5f6278}
.side-item:hover{transform:translateX(5px)}.side-item:hover strong{color:var(--primary)}
@media(max-width:991px){.side-sticky{position:static;margin-top:0}.article-card{padding:1.4rem;margin-top:-2rem}.pn{grid-template-columns:1fr}}

/* =================== Focus-area cards (home) =================== */
#missions .row{counter-reset:fa}
#missions .feature-card{counter-increment:fa;position:relative;overflow:hidden;border:1px solid rgba(194,65,12,.08);transition:transform .35s,box-shadow .35s,color .35s}
#missions .feature-card::after{content:counter(fa,decimal-leading-zero);position:absolute;right:14px;top:6px;font-size:3.4rem;font-weight:800;color:rgba(194,65,12,.07);line-height:1;transition:.35s}
#missions .feature-card .arrow{position:absolute;right:16px;bottom:14px;opacity:0;transform:translateX(-10px);transition:.35s}
#missions .feature-card:hover{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border-color:transparent}
#missions .feature-card:hover h3,#missions .feature-card:hover p{color:#fff}
#missions .feature-card:hover::after{color:rgba(255,255,255,.18);transform:scale(1.15)}
#missions .feature-card:hover .ic{background:#fff;color:var(--primary)}
#missions .feature-card:hover .arrow{opacity:1;transform:none}

/* =================== Section waves (home) =================== */
.wave-t,.wave-b{position:relative}
.wave-t::before,.wave-b::after{content:"";position:absolute;left:0;right:0;height:46px;z-index:3;pointer-events:none;background:var(--wv) center/100% 100% no-repeat}
.wave-t::before{top:-1px}
.wave-b::after{bottom:-1px;transform:scaleY(-1)}
.wave-white{--wv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,0 L1440,0 L1440,28 C1200,64 960,0 720,30 C480,58 240,64 0,22 Z'/%3E%3C/svg%3E")}
.wave-soft{--wv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23fff7f1' d='M0,0 L1440,0 L1440,28 C1200,64 960,0 720,30 C480,58 240,64 0,22 Z'/%3E%3C/svg%3E")}
.wave-t.bg-soft,.wave-t.bg-dark-x,.wave-t.section-join{padding-top:7rem}
.wave-b.bg-dark-x{padding-bottom:7rem}
