:root{--blue:#0023A5;--yellow:#FFD300;--glass:rgba(255,255,255,.06)}
*{box-sizing:border-box}
body{padding-top:64px;color:#fff;background:var(--blue);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Tajawal","Noto Sans",Arial,sans-serif}

/* Nav */
.freego-nav{background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.05));backdrop-filter:saturate(1.4) blur(8px)}

/* Hero slider */
.freego-hero{position:relative;min-height:80vh;overflow:hidden;color:#fff}
.freego-hero .slides{position:absolute;inset:0}
.freego-hero .slide{
  position:absolute;inset:0;opacity:0;transition:opacity .8s ease;
  background:radial-gradient(90% 70% at 50% 20%, rgba(0,0,0,.15), rgba(0,0,0,.6)), var(--bg) center/cover no-repeat;
}
.freego-hero .slide.active{opacity:1}
.hero-overlay{position:relative;z-index:2;padding-top:12vh}
.hero-logo{height:68px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));animation:floatY 4s ease-in-out infinite}
.dots{display:flex;gap:.5rem;justify-content:center;margin-top:1rem}
.dots button{width:10px;height:10px;border-radius:999px;border:0;background:rgba(255,255,255,.45)}
.dots button.active{background:var(--yellow)}
.hero-waves{position:absolute;inset:auto 0 0 0;height:120px;z-index:1;background:url('../images/brand-divider.svg') center/cover no-repeat;opacity:.9}

/* Live icon marquee */
.feature-ticker{--speed:28s;list-style:none;display:flex;gap:2rem;align-items:center;padding:0;margin:18px auto 0;max-width:100%;overflow:hidden;opacity:.95;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);animation:marquee var(--speed) linear infinite}
.feature-ticker li{display:flex;gap:.5rem;align-items:center;white-space:nowrap;font-weight:700}
.feature-ticker i{font-size:1.1rem;color:var(--yellow);filter:drop-shadow(0 0 6px rgba(255,211,0,.5));animation:pulse 2.2s infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Sections */
.section{padding:72px 0}
.section-alt{background:rgba(255,255,255,.04)}
.section-title{font-weight:900;letter-spacing:.5px;text-transform:uppercase;border-bottom:3px solid var(--yellow);display:inline-block;padding-bottom:.25rem;color:#fff}

/* Cards */
.glass{background:var(--glass);border:1px solid rgba(255,255,255,.15);border-radius:14px;backdrop-filter:blur(10px)}
.card.freego{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.18);overflow:hidden;position:relative;transition:transform .25s,box-shadow .25s}
.card.freego:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.25)}
.card.freego::after{content:"";position:absolute;inset:auto -20% -20% -20%;height:60%;background:url('../images/brand-waves.svg') center/520px repeat;opacity:.22;transform:translateY(30px);transition:opacity .3s,transform .6s}
.card.freego:hover::after{opacity:.45;transform:translateY(0)}
.badge-freego{background:var(--yellow);color:#00124e;font-weight:700}
.icon-badge{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;background:linear-gradient(180deg,#ffe66b,#ffd300);display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.25);animation:floatY 3.5s ease-in-out infinite}
.icon-badge i{color:#00124e}

/* Stats */
.stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:18px}
.stat i{font-size:1.6rem;color:var(--yellow);filter:drop-shadow(0 0 6px rgba(255,211,0,.5));animation:pulse 2s infinite}
.stat .num{font-size:1.8rem;font-weight:900;margin-top:6px}

/* Buttons */
.btn-freego{--bs-btn-color:#00124e;--bs-btn-bg:var(--yellow);--bs-btn-border-color:var(--yellow);--bs-btn-hover-bg:#ffe047;--bs-btn-hover-border-color:#ffe047;--bs-btn-active-bg:#f5c700;--bs-btn-active-border-color:#f5c700;font-weight:700}
.sheen{position:relative;overflow:hidden}
.sheen::after{content:"";position:absolute;inset:0;transform:translateX(-120%);background:linear-gradient(75deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 60%);transition:transform .7s}
.sheen:hover::after{transform:translateX(120%)}

/* Floating WhatsApp */
.fab-bubble{position:fixed;right:18px;bottom:18px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:#fff;font-size:1.6rem;box-shadow:0 10px 24px rgba(0,0,0,.35);z-index:50;animation:pulse 2.2s infinite}
.fab-bubble:hover{transform:translateY(-2px)}

/* Social hover */
.live-social a i{transition:transform .2s,filter .2s}
.live-social a:hover i{transform:translateY(-2px) scale(1.05);filter:drop-shadow(0 0 10px rgba(255,211,0,.5))}

/* Sparks */
.spark{position:absolute;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#FFD300 0%,#FFD300 40%,rgba(255,211,0,0) 70%);filter:blur(.3px);opacity:.8}
.s1{top:15%;left:12%;animation:blink 3.2s infinite}
.s2{top:28%;right:18%;animation:blink 2.6s .3s infinite}
.s3{top:42%;left:35%;animation:blink 2.8s .6s infinite}
.s4{bottom:22%;left:20%;animation:blink 3.4s .2s infinite}
.s5{bottom:28%;right:14%;animation:blink 2.9s .5s infinite}
.s6{top:10%;right:8%;animation:blink 3.1s .1s infinite}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}

/* Utilities */
.object-cover{object-fit:cover}
.wave-divider{height:64px;background:url('../images/brand-divider.svg') center/cover no-repeat}
.freego-footer{background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.9))}
[dir="rtl"] .me-2{margin-left:.5rem!important;margin-right:0!important}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;border-radius:999px;padding:.35rem .7rem;display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;transition:transform .1s}
.chip:hover{transform:translateY(-1px)}
.chip.active{background:#FFD300;color:#00124e;border-color:#FFD300}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#aaa;vertical-align:middle}

/* Video cards */
.vcard{position:relative;border:0;padding:.5rem;background:var(--glass);border:1px solid rgba(255,255,255,.12);border-radius:14px;text-align:left;cursor:pointer;transition:transform .25s,box-shadow .25s}
.vcard:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.25)}
.vcard .preview{width:100%;height:100%;object-fit:cover;opacity:.95;transition:transform .35s,opacity .3s}
.vcard:hover .preview{transform:scale(1.03);opacity:1}
.vmeta{display:flex;align-items:center;gap:.35rem;padding:.6rem .25rem 0}
.vcard .play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.vcard .play i{font-size:3rem;color:#FFD300;text-shadow:0 6px 22px rgba(0,0,0,.6)}
.vcard .ring{position:absolute;width:74px;height:74px;border-radius:50%;box-shadow:0 0 0 0 rgba(255,211,0,.55);animation:ring 2s infinite}

/* KPIs */
.kpi{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:var(--glass)}
.kpi .ring{--size:104px;--p:0%;width:var(--size);height:var(--size);border-radius:50%;display:grid;place-items:center;position:relative;isolation:isolate;background:
  radial-gradient(circle at 50% 50%, rgba(0,0,0,.35) 52%, transparent 53%) padding-box,
  conic-gradient(#FFD300 var(--p), rgba(255,255,255,.15) 0) border-box}
.kpi .ring::after{content:"";position:absolute;inset:8px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.kpi .num{font-weight:900;font-size:1.6rem;z-index:2;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.kpi .label{margin:10px 0 0 0;color:#dfe7ff;font-weight:600}
.glow{transition:transform .25s,box-shadow .25s}
.glow:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(0,0,0,.28)}

/* Animations */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pulse{0%,100%{filter:drop-shadow(0 0 0 rgba(255,211,0,0))}50%{filter:drop-shadow(0 0 12px rgba(255,211,0,.8))}}
@keyframes blink{0%,100%{opacity:.2;transform:scale(.9)}50%{opacity:1;transform:scale(1.25)}}
@keyframes ring{
  0%  {box-shadow:0 0 0 0 rgba(255,211,0,.55)}
  70% {box-shadow:0 0 0 18px rgba(255,211,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,211,0,0)}
}

/* Motion + mobile */
@media (prefers-reduced-motion:reduce){
  .slide,.icon-badge,.stat i,.feature-ticker,.reveal,.sheen::after,.fab-bubble,.vcard .ring{animation:none;transition:none}
}
@media (max-width:576px){
  .section{padding:56px 0}
  .freego-hero{min-height:70vh}
  .hero-overlay{padding-top:10vh}
}