/* ================================================================
   YUBILE TECHNOLOGIE — Shared Design System
   ================================================================ */

/* ── IMPORTS ── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ── ROOT VARS ── */
:root {
  --font-heading: 'Outfit', sans-serif;
  --font-body:    'Space Grotesk', sans-serif;

  /* Page identity — overridden per page */
  --p:       #1F3A93;
  --p-dark:  #0D1F5C;
  --p-light: #2B4EC8;
  --p-10:    rgba(31,58,147,.1);
  --p-20:    rgba(31,58,147,.2);
  --a:       #FFDE00;
  --a-dark:  #E6C800;

  /* Neutral */
  --dark:    #02103f;
  --dark-2:  #1E293B;
  --dark-3: #091a20;
  --grey:    #64748B;
  --light:   #F8FAFC;
  --lighter: #EEF2FF;
  --white:   #FFFFFF;

  /* Radii */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  36px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 8px 30px rgba(0,0,0,.1);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.15);
  --shadow-colored: 0 12px 40px var(--p-20);

  /* Transitions */
  --ease: cubic-bezier(.25,.8,.25,1);
}

/* ── RESET / BASE ── */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-heading);
  color: var(--dark);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); }
img { max-width:100%; display:block; }
a { text-decoration: none; }
::selection { background: var(--a); color: var(--p-dark); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background: var(--light); }
::-webkit-scrollbar-thumb { background: var(--p); border-radius:10px; }

/* ================================================================
   NAVBAR
   ================================================================ */
#navbar {
  position: fixed; top:0; width:100%; z-index:1000;
  padding: 1.2rem 0;
  transition: all .4s var(--ease);
}
#navbar.scrolled {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  padding: .7rem 0;
}
#navbar.dark-nav { /* for dark heroes */
  background: transparent;
}
#navbar.dark-nav.scrolled {
  background: #02103f;
}

.nav-logo { display:flex; align-items:center; gap:.6rem; }
.nav-logo img { height:36px; }
.nav-logo-text {
  font-family: var(--font-heading);
  font-weight: 800; font-size:1.3rem; letter-spacing:1px;
  color: var(--p);
  transition: color .3s;
}
#navbar.dark-nav .nav-logo-text,
#navbar.dark-nav.scrolled .nav-logo-text { color: #fff; }
#navbar.scrolled:not(.dark-nav) .nav-logo-text { color: var(--p); }

.nav-link-item {
  color: rgba(0,0,0,.65) !important;
  font-weight: 600; font-size: .88rem;
  letter-spacing: .3px;
  padding: .4rem .85rem !important;
  border-radius: 8px;
  transition: all .25s !important;
  position: relative;
}
#navbar.dark-nav .nav-link-item { color: rgba(255,255,255,1) !important; }
#navbar.dark-nav.scrolled .nav-link-item { color: rgba(255,255,255,.8); }
.nav-link-item:hover { color: var(--p) !important; background: var(--p-10); }
#navbar.dark-nav .nav-link-item:hover { color: var(--a) !important; }
.nav-link-item.active { color: var(--p) !important; background: var(--p-10); }
#navbar.dark-nav .nav-link-item.active { color: var(--a) !important; }

.nav-cta-btn {
  background: var(--p);
  color: #fff !important;
  border-radius: 50px;
  padding: .45rem 1.3rem !important;
  font-weight: 700;
  transition: all .3s !important;
  box-shadow: 0 4px 15px var(--p-20);
}
.nav-cta-btn:hover {
  background: var(--p-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--p-20);
  color: #fff !important;
}
#navbar.dark-nav .nav-cta-btn {
  background: var(--a);
  color: var(--p-dark) !important;
}
#navbar.dark-nav .nav-cta-btn:hover { background: #fff !important; color: var(--p-dark) !important; }

.mobile-toggle {
  background: none; border:none; cursor:pointer;
  width:36px; height:36px; display:flex; flex-direction:column;
  justify-content:center; gap:5px; padding:4px;
}
.mobile-toggle span {
  display:block; height:2px; background: var(--dark); border-radius:2px;
  transition: all .3s;
}
#navbar.dark-nav .mobile-toggle span,
#navbar.dark-nav.scrolled .mobile-toggle span { background: #fff; }
.mobile-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.mobile-toggle.open span:nth-child(2) { opacity:0; }
.mobile-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

.mobile-menu {
  display:none; position:fixed; top:65px; left:0; right:0;
  background: rgba(255,255,255,.98); backdrop-filter:blur(20px);
  padding:1rem; border-bottom:1px solid rgba(0,0,0,.06);
  z-index:999; box-shadow: var(--shadow-md);
}
.mobile-menu.open { display:block; }
.mobile-menu a { display:block; padding:.7rem 1rem; color:var(--dark); font-weight:600; border-radius:8px; transition:all .2s; }
.mobile-menu a:hover { background:var(--p-10); color:var(--p); }
.mobile-menu a.active { background:var(--p-10); color:var(--p); }

/* ================================================================
   PAGE HEROES
   ================================================================ */
.page-hero {
  padding: 7rem 0 4rem;
  background: linear-gradient(135deg, var(--dark) 0%, var(--p) 60%, var(--p-light) 100%);
  position: relative; overflow:hidden;
  min-height: 45vh; display:flex; align-items:center;
}
.page-hero-sm { min-height:35vh; padding: 6rem 0 3rem; }
.page-hero::before {
  content:''; position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-hero-content { position:relative; z-index:1; }
.page-breadcrumb {
  display:flex; align-items:center; gap:.5rem;
  font-size:.8rem; font-weight:600;
  color:rgba(255,255,255,.6);
  margin-bottom:1.2rem;
  letter-spacing:.5px;
}
.page-breadcrumb a { color:rgba(255,255,255,.7); transition:color .2s; }
.page-breadcrumb a:hover { color:var(--a); }
.page-breadcrumb .sep { font-size:.6rem; }
.page-breadcrumb .current { color:var(--a); }
.page-hero-title {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 900; line-height:1.1; color:#fff;
  margin-bottom:.8rem;
}
.page-hero-title span { color:var(--a); }
.page-hero-sub {
  color:rgba(255,255,255,.9);
  font-size:1rem; line-height:1.75;
  max-width: 520px;
}
.hero-shape {
  position:absolute; right:-5%; bottom:-10%;
  width:45%; opacity:.06;
  pointer-events:none;
}

/* ================================================================
   SECTION HEADERS
   ================================================================ */
.s-tag {
  display:inline-flex; align-items:center; gap:.4rem;
  background: var(--p-10); border:1px solid var(--p-20);
  color: var(--p); font-size:.72rem; font-weight:700;
  letter-spacing:1.8px; text-transform:uppercase;
  padding:.3rem .9rem; border-radius:50px;
  margin-bottom:.9rem;
}
.s-title {
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  font-weight:800; line-height:1.15;
  color: var(--dark); margin-bottom:.75rem;
}
.s-title span { color: var(--p); }
.s-line {
  width:48px; height:4px; border-radius:2px;
  background: linear-gradient(90deg, var(--p), var(--a));
  margin-bottom:1.2rem;
}
.s-line.center { margin-left:auto; margin-right:auto; }
.s-sub {
  color: var(--dark); font-size:.95rem; line-height:1.75;
  max-width:540px;
}
.s-sub.center { text-align:center; margin:0 auto; }

/* Light section bg for alternating */
.bg-light-y { background: var(--light); }
.bg-lighter-y { background: var(--lighter); }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn-y {
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.9rem; letter-spacing:.3px;
  padding:.8rem 1.8rem; border-radius:50px; border:none;
  cursor:pointer; transition: all .3s var(--ease);
  text-decoration:none;
}
.btn-y-primary {
  background: var(--p);
  color: #fff;
  box-shadow: 0 8px 25px var(--p-20);
}
.btn-y-primary:hover {
  background: var(--p-light);
  transform: translateY(-3px);
  box-shadow: 0 14px 35px var(--p-20);
  color:#fff;
}
.btn-y-accent {
  background: var(--a);
  color: var(--p-dark);
  box-shadow: 0 8px 25px rgba(255,222,0,.25);
}
.btn-y-accent:hover {
  background: var(--a-dark);
  transform: translateY(-3px);
  color: var(--p-dark);
}
.btn-y-outline {
  background: transparent;
  color: var(--p);
  border: 2px solid var(--p);
}
.btn-y-outline:hover {
  background: var(--p);
  color: #fff;
  transform: translateY(-3px);
}
.btn-y-outline-white {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.4);
}
.btn-y-outline-white:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.7);
  color:#fff;
  transform: translateY(-3px);
}
.btn-y-sm { padding:.55rem 1.2rem; font-size:.82rem; }
.btn-y-lg { padding:1rem 2.2rem; font-size:1rem; }

#hero{
    padding: 0 10px;
}
/* ================================================================
   CARDS
   ================================================================ */
.card-y {
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
  transition: all .35s var(--ease);
}
.card-y:hover {
  box-shadow: var(--shadow-colored);
  border-color: var(--p-20);
  transform: translateY(-6px);
}
.card-y-glass {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  border-radius: var(--r-lg);
  transition: all .35s var(--ease);
}
.card-y-glass:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.25);
  transform: translateY(-6px);
}

/* Icon boxes */
.icon-box {
  width:54px; height:54px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; flex-shrink:0;
  background: var(--p-10); color: var(--p);
  transition: all .3s;
}
.card-y:hover .icon-box { background: var(--p); color:#fff; }

/* ================================================================
   BADGES / TAGS
   ================================================================ */
.badge-y {
  display:inline-block;
  background: var(--p-10); color: var(--p);
  font-size:.72rem; font-weight:700;
  padding:.25rem .7rem; border-radius:50px;
  letter-spacing:.5px;
}
.badge-y-accent {
  background: rgba(255,222,0,.15); color: #856600;
}
.badge-y-light {
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.15);
}

/* ================================================================
   NUMBERS / STATS
   ================================================================ */
.stat-block { text-align:center; }
.stat-block .num {
  font-family: var(--font-heading);
  font-size: clamp(2rem,4vw,3rem);
  font-weight:900; line-height:1;
  color: var(--p); margin-bottom:.3rem;
}
.stat-block .label {
  font-size:.8rem; font-weight:600;
  color:var(--grey); text-transform:uppercase; letter-spacing:1px;
}
.stat-divider {
  width:1px; background: rgba(0,0,0,.1); align-self:stretch;
}

/* ================================================================
   TICKER
   ================================================================ */
.ticker-bar {
  background: var(--dark);
  border-bottom: 1px solid rgba(255,222,0,.12);
  overflow:hidden; padding:.55rem 0;
}
.ticker-track {
  display:flex; width:max-content;
  animation: ticker 35s linear infinite;
}
.ticker-item {
  white-space:nowrap; padding:0 2.5rem;
  font-size:.75rem; font-weight:600;
  letter-spacing:1.2px; text-transform:uppercase;
  color:#fdfdfd;
}
.ticker-item em { color:var(--a); font-style:normal; margin-right:.4rem; }
@keyframes ticker { to { transform:translateX(-50%); } }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer {
  background: var(--dark);
  color: rgba(255,255,255,.7);
  padding: 5rem 0 0;
}
.footer-logo-text {
  font-family: var(--font-heading);
  font-weight:800; font-size:1.25rem; letter-spacing:1px; color:#fff;
  margin-bottom:.6rem;
}
.footer-desc { font-size:.85rem; line-height:1.75; max-width:260px; color:#fdfdfd; }
.footer-col-title {
  font-weight:700; font-size:.8rem; letter-spacing:1.5px;
  text-transform:uppercase; color:rgba(255,255,255,.9);
  margin-bottom:1.1rem;
}
.footer-link {
  display:block; font-size:.85rem; color:#fdfdfd;
  margin-bottom:.5rem; transition:color .2s;
}
.footer-link:hover { color: var(--a); }
.footer-info { display:flex; align-items:flex-start; gap:.6rem; font-size:.82rem; color:#fdfdfd; margin-bottom:.6rem; }
.footer-info i { color:var(--a); margin-top:1px; flex-shrink:0; }
.footer-socials { display:flex; gap:.6rem; margin-top:1rem; }
.footer-social {
  width:36px; height:36px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.6); font-size:.95rem;
  transition:all .3s;
}
.footer-social:hover { background:var(--p); border-color:var(--p); color:#fff; transform:translateY(-3px); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  margin-top:3rem; padding:1.5rem 0;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:.75rem;
}
.footer-copy { font-size:.8rem; color:rgba(255,255,255,.8); }
.footer-copy b { color:rgba(255,255,255,.7); }

/* ================================================================
   PRELOADER
   ================================================================ */
#preloader {
  position:fixed; inset:0; z-index:9999;
  background: var(--dark);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition: opacity .6s ease;
}
#preloader.fade-out { opacity:0; pointer-events:none; }
.preloader-name {
  font-family:var(--font-heading); font-weight:900;
  font-size:2rem; letter-spacing:3px; color:#fff; margin-bottom:1.5rem;
}
.preloader-name span { color:var(--a); }
.preloader-bar { width:180px; height:3px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; }
.preloader-fill {
  height:100%; border-radius:2px;
  background: linear-gradient(90deg, var(--p), var(--a));
  width:0; animation: pLoad 1.6s ease forwards;
}
@keyframes pLoad { to { width:100%; } }

/* ================================================================
   UTILITIES
   ================================================================ */
.text-p { color: var(--p); }
.text-a { color: var(--a); }
.text-muted-y { color: var(--grey); }
.bg-p { background: var(--p); }
.bg-a { background: var(--a); }
.rounded-y { border-radius: var(--r-lg); }
.rounded-y-xl { border-radius: var(--r-xl); }
.shadow-y { box-shadow: var(--shadow-colored); }
.divider { height:1px; background:rgba(0,0,0,.07); margin:1rem 0; }
.divider-light { height:1px; background:rgba(255,255,255,.1); margin:1rem 0; }

.overflow-hidden { overflow:hidden; }
.aspect-video { aspect-ratio:16/9; }
.aspect-square { aspect-ratio:1; }
.object-cover { object-fit:cover; width:100%; height:100%; }

/* Gradient text */
.grad-text {
  background: linear-gradient(90deg, var(--p) 0%, var(--a-dark) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* Back to top */
#back-top {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:500;
  width:42px; height:42px; border-radius:50%;
  background:var(--p); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 15px var(--p-20);
  opacity:0; pointer-events:none;
  transition:all .3s; font-size:1rem; border:none; cursor:pointer;
}
#back-top.show { opacity:1; pointer-events:all; }
#back-top:hover { background:var(--p-light); transform:translateY(-3px); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:991px) {
  .page-hero { min-height:auto; padding:7rem 0 3rem; }
  .s-title { font-size:1.8rem; }
}
@media(max-width:767px) {
  .stat-divider { display:none; }
  .footer-desc { max-width:100%; }
}