/* HOME PAGE ENHANCEMENTS */
.pbar{position:fixed;top:0;left:0;height:6px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:300;background:linear-gradient(90deg,var(--blue),var(--pink),var(--yellow),var(--green))}
.top .cl{position:absolute;z-index:1;width:120px;height:36px;background:#fff;border-radius:40px;opacity:.28;animation:drift 38s linear infinite;top:18%}
.top .cl::before,.top .cl::after{content:"";position:absolute;background:#fff;border-radius:50%}
.top .cl::before{width:50px;height:50px;left:18px;top:-24px}.top .cl::after{width:36px;height:36px;left:60px;top:-14px}
.top .cl.c2{top:58%;scale:.7;animation-duration:55s;animation-delay:-20s}
@keyframes drift{from{transform:translateX(-200px)}to{transform:translateX(110vw)}}
.logo{position:relative}.logo::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:3px dashed rgba(255,255,255,.7);animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* HERO */
.hero{min-height:480px;isolation:isolate}
.hero img{animation:kb 22s ease-in-out infinite alternate;transform-origin:30% 40%}
@keyframes kb{to{transform:scale(1.14) translate(-1.5%,-1%)}}
.hero::after{background:linear-gradient(0deg,rgba(0,35,95,.92),rgba(0,40,100,.25) 65%,rgba(124,58,237,.25))}
.hero .sun{position:absolute;z-index:1;right:7%;top:8%;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,#fff6a8,var(--yellow));box-shadow:0 0 60px 20px rgba(255,213,0,.55);animation:pulse 4s ease-in-out infinite}
.hero .sun::before{content:"";position:absolute;inset:-34px;border-radius:50%;background:repeating-conic-gradient(rgba(255,213,0,.55) 0 6deg,transparent 6deg 20deg);-webkit-mask:radial-gradient(circle,transparent 52px,#000 53px,transparent 85px);mask:radial-gradient(circle,transparent 52px,#000 53px,transparent 85px);animation:spin 30s linear infinite}
@keyframes pulse{50%{transform:scale(1.08)}}
.mtn{position:absolute;left:-3%;right:-3%;bottom:-2px;width:106%;height:170px;z-index:2;pointer-events:none}
.mtn path{transition:transform .3s ease-out}
.hero .t{z-index:3;padding-bottom:70px}
.hero h2 .w{display:inline-block;opacity:0;transform:translateY(30px) rotate(4deg);animation:pop .7s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes pop{to{opacity:1;transform:none}}
.hero p,.hero .btn{opacity:0;animation:pop .8s .9s forwards}.hero .btn{animation-delay:1.2s;position:relative}
.hero .btn::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.8) 50%,transparent 70%);transform:translateX(-120%);animation:shine 3.5s 2s infinite}
.btn{overflow:hidden}
@keyframes shine{to{transform:translateX(120%)}}
.fl{position:absolute;z-index:3;font-size:34px;animation:fly 7s ease-in-out infinite;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
@keyframes fly{50%{transform:translate(18px,-26px) rotate(14deg)}}
.sf{position:absolute;z-index:3;width:90px;height:90px;pointer-events:none}
.sf svg{width:100%;height:100%;animation:spin 40s linear infinite}
.sf.a{right:3%;bottom:90px}.sf.b{right:15%;bottom:60px;width:58px;height:58px}
.sf.b svg{animation-direction:reverse}

/* RIBBON */
.ribbon{overflow:hidden;margin:0 0 26px;border-radius:999px;background:var(--blue-d);border:4px solid var(--yellow);box-shadow:var(--shadow);transform:rotate(-.6deg)}
.ribbon div{display:flex;width:max-content;animation:mq 28s linear infinite;padding:10px 0}
.ribbon span{padding:0 22px;color:#fff;font:700 15px 'Unbounded',sans-serif;white-space:nowrap}
.ribbon span:nth-child(3n+1){color:var(--yellow)}.ribbon span:nth-child(3n+2){color:#ffb3d4}
@keyframes mq{to{transform:translateX(-50%)}}
.ribbon:hover div{animation-play-state:paused}

/* STATS & TILT */
.stat{position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-30px;top:-30px;background:rgba(255,255,255,.18);transition:.5s}
.stat:hover::before{transform:scale(2.4)}
.stat b{font-size:34px;position:relative}
.tilt{transform:perspective(700px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .15s,box-shadow .3s}
.tilt:hover{box-shadow:0 22px 40px rgba(0,87,184,.28)}
.tile{position:relative;overflow:hidden}
.tile .ic{position:absolute;right:-8px;bottom:-14px;font-size:70px;opacity:.28;transition:.4s}
.tile:hover .ic{transform:scale(1.3) rotate(-12deg);opacity:.45}

/* CARDS */
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;right:-50px;top:-50px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(255,213,0,.35),transparent 70%);animation:pulse 6s ease-in-out infinite}
.reveal{transition:opacity .8s,transform .8s cubic-bezier(.2,.9,.3,1.2)}
.grid .news:nth-child(2){transition-delay:.12s}.grid .news:nth-child(3){transition-delay:.24s}
.news{position:relative}
.news .ph img{transition:transform .6s}.news:hover .ph img{transform:scale(1.12) rotate(1.5deg)}
.news .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-100%);transition:.8s}
.news:hover .ph::after{transform:translateX(100%)}
.profile .photo{position:relative;animation:wob 6s ease-in-out infinite}
@keyframes wob{50%{transform:rotate(-2deg) scale(1.02)}}

/* TIMELINE */
.tl{position:relative;margin:22px 0 10px;padding-left:34px}
.tl::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:6px;border-radius:6px;background:linear-gradient(var(--blue),var(--pink),var(--yellow),var(--green));transform-origin:top;transform:scaleY(0);transition:transform 1.6s ease-out}
.tl.in::before{transform:none}
.tl li{list-style:none;position:relative;background:var(--sky);border-radius:16px;padding:12px 16px;margin-bottom:12px;opacity:0;transform:translateX(-24px);transition:.6s}
.tl.in li{opacity:1;transform:none}
.tl li:nth-child(2){transition-delay:.2s}.tl li:nth-child(3){transition-delay:.4s}.tl li:nth-child(4){transition-delay:.6s}.tl li:nth-child(5){transition-delay:.8s}.tl li:nth-child(6){transition-delay:1s}
.tl li::before{content:"";position:absolute;left:-31px;top:16px;width:20px;height:20px;border-radius:50%;background:var(--c);border:4px solid #fff;box-shadow:0 0 0 3px var(--c)}
.tl li b{font-family:'Unbounded';color:var(--c);display:block;font-size:15px}
.more summary{cursor:pointer;font-weight:900;color:var(--blue);margin:8px 0;list-style:none}
.more summary::after{content:" ▾"}.more[open] summary::after{content:" ▴"}

/* BELLS */
.bells{position:relative;overflow:hidden}
.bells::after{content:"🔔";position:absolute;right:14px;top:10px;font-size:22px;animation:ring 3s infinite;transform-origin:50% 0}
@keyframes ring{0%,60%,100%{transform:rotate(0)}65%{transform:rotate(18deg)}70%{transform:rotate(-16deg)}75%{transform:rotate(12deg)}80%{transform:rotate(-8deg)}}
.bells tr.now td{background:var(--green)!important;color:#fff;animation:pulse 1.6s infinite}
.bells .st{margin-top:10px;font-weight:800;font-size:14px;text-align:center}

/* FX */
.burst{position:fixed;z-index:400;pointer-events:none;font-size:22px;animation:bst .9s ease-out forwards}
@keyframes bst{to{transform:translate(var(--dx),var(--dy)) rotate(360deg) scale(.4);opacity:0}}
.up{position:fixed;right:18px;bottom:18px;z-index:90;width:50px;height:50px;border-radius:50%;border:0;background:var(--pink);color:#fff;font-size:22px;cursor:pointer;box-shadow:0 6px 0 #c2306f;opacity:0;transform:translateY(80px);transition:.4s}
.up.on{opacity:1;transform:none}.up:hover{transform:translateY(-4px)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.hero h2 .w,.hero p,.hero .btn{opacity:1}.tl li{opacity:1;transform:none}}
@media(max-width:600px){.fl,.sf.b,.hero .sun{display:none}.hero{min-height:420px}}

/* --- fix: image fills column, no empty space --- */
.card .cols2{align-items:stretch;grid-template-columns:1.05fr .95fr;gap:24px}
.card .cols2 .rowimg{position:relative;height:100%;min-height:320px}
.card .cols2 .rowimg img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .8s}
.card .cols2 .rowimg:hover img{transform:scale(1.06)}
.rowimg .cap{position:absolute;left:14px;bottom:14px;z-index:2;background:var(--yellow);color:var(--blue-d);font-weight:900;padding:6px 16px;border-radius:999px;box-shadow:0 4px 0 #d4a900;transform:rotate(-2deg)}
@media(max-width:900px){.card .cols2{grid-template-columns:1fr}.card .cols2 .rowimg{height:auto;min-height:0;aspect-ratio:4/3}}

/* --- footer --- */
.ft{position:relative;margin-top:50px;background:linear-gradient(160deg,#003f8a,#0057b8 60%,#4b2fb8);color:#fff;border-top:0;padding:0;text-align:left;overflow:hidden}
.ft::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:repeating-linear-gradient(90deg,var(--yellow) 0 40px,var(--pink) 40px 80px,var(--green) 80px 120px,var(--orange) 120px 160px)}
.ft .wave{position:absolute;left:0;right:0;top:-1px;width:100%;height:50px;display:block}
.ft .fg{position:relative;z-index:2;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding:70px 20px 34px}
.ft h4{font-family:'Unbounded';font-size:15px;color:var(--yellow);margin-bottom:12px}
.ft p{margin:0 0 8px;font-size:15px;opacity:.92}
.ft .fb-logo{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ft .fb-logo i{font-style:normal;width:54px;height:54px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font-size:28px;animation:bob 3s ease-in-out infinite;flex:none}
.ft .fb-logo b{font-family:'Unbounded';font-size:14px;line-height:1.3}
.ft a{color:#fff}
.ft .fl2 a{display:block;padding:4px 0;font-weight:700;transition:.2s}
.ft .fl2 a:hover{color:var(--yellow);transform:translateX(6px)}
.fbbtn{display:inline-flex!important;align-items:center;gap:12px;margin-top:6px;padding:10px 20px 10px 10px!important;border-radius:999px;background:#fff;color:#1877f2!important;font-weight:900;box-shadow:0 5px 0 rgba(0,0,0,.25);transition:.25s}
.fbbtn:hover{transform:translateY(3px)!important;box-shadow:0 2px 0 rgba(0,0,0,.25);color:#1877f2!important}
.fbbtn svg,.fbi svg{width:34px;height:34px;flex:none}
.fbbtn:hover svg{animation:pulse .6s}
.fbi{display:grid;place-items:center}.fbi svg{width:22px;height:22px}
.ft .copy{position:relative;z-index:2;text-align:center;padding:14px 20px;background:rgba(0,0,0,.2);font-size:14px}
.ft .sfd{position:absolute;right:-30px;bottom:-30px;font-size:140px;opacity:.12;animation:spin 40s linear infinite;pointer-events:none}
@media(max-width:800px){.ft .fg{grid-template-columns:1fr;gap:22px}}