/* =============================================================================
   ESPADA EDUHUB - Main Stylesheet
   ECANZ Certified Education Counsellors
   Version: 1.0
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

/* =============================================================================
   CSS Design Tokens
   ============================================================================= */
:root {
  --navy:        #0a1628;
  --navy-light:  #1a3a5c;
  --navy-mid:    #0d2137;
  --teal:        #00b894;
  --teal-dark:   #008f71;
  --teal-light:  #00d9b0;
  --gold:        #f0a500;
  --gold-dark:   #c88400;
  --gold-light:  #f5c842;
  --white:       #ffffff;
  --gray-50:     #f8fafc;
  --gray-100:    #f1f5f9;
  --gray-200:    #e2e8f0;
  --gray-300:    #cbd5e1;
  --gray-400:    #94a3b8;
  --gray-500:    #64748b;
  --gray-600:    #475569;
  --gray-700:    #334155;
  --gray-800:    #1e293b;
  --gray-900:    #0f172a;

  --grad-hero:   linear-gradient(135deg, #0a1628 0%, #0d2a40 50%, #0a2018 100%);
  --grad-teal:   linear-gradient(135deg, #00b894, #00d9b0);
  --grad-gold:   linear-gradient(135deg, #f0a500, #f5c842);
  --grad-card:   linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
  --grad-dark:   linear-gradient(135deg, #050d1a, #0a1628);

  --font-head:   'Poppins', sans-serif;
  --font-body:   'Inter', sans-serif;

  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  30px;
  --r-2xl: 40px;
  --r-full:9999px;

  --sh-sm:  0 2px 8px rgba(0,0,0,0.08);
  --sh-md:  0 8px 30px rgba(0,0,0,0.12);
  --sh-lg:  0 20px 60px rgba(0,0,0,0.18);
  --sh-xl:  0 40px 100px rgba(0,0,0,0.22);
  --sh-teal:0 10px 40px rgba(0,184,148,0.35);
  --sh-gold:0 10px 40px rgba(240,165,0,0.35);

  --trans-fast:   all 0.2s ease;
  --trans-base:   all 0.3s ease;
  --trans-slow:   all 0.5s ease;
  --trans-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  --z-nav:    200;
  --z-modal:  400;
  --z-float:  500;
  --z-toast:  600;
}

/* =============================================================================
   Reset & Base
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  color: var(--gray-700);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: var(--trans-base); }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font-body); }
input, textarea, select { font-family: var(--font-body); outline: none; border: none; }

/* =============================================================================
   Typography
   ============================================================================= */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); line-height: 1.15; font-weight: 700; color: var(--navy); }
h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 3vw, 2rem); }
h4 { font-size: clamp(1.05rem, 2vw, 1.4rem); }
p  { margin-bottom: 1rem; }

.section-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--teal);
  background: rgba(0,184,148,0.1); padding: 6px 18px;
  border-radius: var(--r-full); margin-bottom: 1rem;
  border: 1px solid rgba(0,184,148,0.2);
}
.section-label::before { content:''; width:6px; height:6px; background:var(--teal); border-radius:50%; animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.6);opacity:.5} }

.section-title { font-size: clamp(1.7rem,4vw,2.5rem); font-weight: 800; color: var(--navy); margin-bottom: 1rem; }
.section-sub   { font-size: 1.05rem; color: var(--gray-500); max-width: 600px; margin: 0 auto 3rem; }
.text-teal  { color: var(--teal); }
.text-gold  { color: var(--gold); }
.text-white { color: var(--white); }
.text-center{ text-align: center; }

/* Gradient Text */
.grad-text-teal {
  background: var(--grad-teal);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.grad-text-gold {
  background: var(--grad-gold);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* =============================================================================
   Layout
   ============================================================================= */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.section    { padding: 5rem 0; }
.section-dark  { background: var(--navy); }
.section-light { background: var(--gray-50); }
.grid  { display: grid; }
.flex  { display: flex; }
.flex-center  { display:flex; align-items:center; justify-content:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }

/* =============================================================================
   Buttons
   ============================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 13px 30px; border-radius: var(--r-full);
  font-family: var(--font-head); font-weight: 600; font-size: .93rem;
  transition: var(--trans-bounce); position: relative; overflow: hidden; cursor: pointer;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,.08); transform:translateX(-100%) skewX(-15deg);
  transition: transform .4s ease;
}
.btn:hover::after { transform: translateX(120%) skewX(-15deg); }

.btn-primary  { background:var(--grad-teal); color:white; box-shadow:var(--sh-teal); }
.btn-primary:hover  { transform:translateY(-3px); box-shadow: 0 18px 55px rgba(0,184,148,.45); }

.btn-gold     { background:var(--grad-gold); color:var(--navy); box-shadow:var(--sh-gold); }
.btn-gold:hover     { transform:translateY(-3px); box-shadow: 0 18px 55px rgba(240,165,0,.45); }

.btn-outline  { border:2px solid var(--teal); color:var(--teal); background:transparent; }
.btn-outline:hover  { background:var(--teal); color:white; transform:translateY(-3px); }

.btn-outline-w{ border:2px solid rgba(255,255,255,.4); color:white; background:transparent; }
.btn-outline-w:hover{ border-color:white; background:rgba(255,255,255,.1); transform:translateY(-3px); }

.btn-white    { background:white; color:var(--navy); box-shadow:var(--sh-md); }
.btn-white:hover    { transform:translateY(-3px); box-shadow:0 16px 45px rgba(255,255,255,.25); }

.btn-lg  { padding: 17px 42px; font-size: 1.05rem; }
.btn-sm  { padding: 9px 20px; font-size: .83rem; }
.btn-block { width:100%; justify-content:center; }

/* =============================================================================
   Navigation
   ============================================================================= */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  padding: 18px 0; transition: var(--trans-base);
}
.navbar.scrolled {
  background: rgba(10,22,40,.97); backdrop-filter: blur(20px);
  padding: 12px 0; box-shadow: 0 4px 30px rgba(0,0,0,.35);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; }

.nav-logo { display:flex; align-items:center; gap:.75rem; }
.logo-box {
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: var(--grad-teal); display:flex; align-items:center; justify-content:center;
  font-weight: 900; font-size: 1.1rem; color:white; font-family: var(--font-head);
  box-shadow: var(--sh-teal); position: relative; overflow:hidden;
}
.logo-box::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg,rgba(255,255,255,.25),transparent);
}
.logo-texts { display:flex; flex-direction:column; }
.logo-name   { font-family:var(--font-head); font-weight:800; font-size:1.15rem; color:white; line-height:1.1; }
.logo-sub    { font-size:.62rem; color:var(--teal); letter-spacing:2px; text-transform:uppercase; }

.nav-links { display:flex; align-items:center; gap:2rem; }
.nav-link {
  color: rgba(255,255,255,.78); font-size:.88rem; font-weight:500;
  position:relative; padding:4px 0;
}
.nav-link::after {
  content:''; position:absolute; bottom:0; left:0; width:0; height:2px;
  background:var(--grad-teal); transition: width .3s ease; border-radius:2px;
}
.nav-link:hover, .nav-link.active { color:white; }
.nav-link:hover::after, .nav-link.active::after { width:100%; }
.nav-link.active { color:var(--teal); }

.nav-actions { display:flex; align-items:center; gap:1rem; }
.nav-wa {
  display:flex; align-items:center; gap:6px; padding:9px 20px;
  border-radius:var(--r-full); background:rgba(37,211,102,.12);
  border:1px solid rgba(37,211,102,.3); color:#25d366;
  font-size:.83rem; font-weight:600; transition:var(--trans-base);
}
.nav-wa:hover { background:#25d366; color:white; }

.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.hamburger span { width:24px; height:2px; background:white; border-radius:2px; transition:var(--trans-base); }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* =============================================================================
   Hero Section (Homepage)
   ============================================================================= */
.hero {
  min-height: 100vh; background: var(--grad-hero);
  position: relative; display:flex; align-items:center; overflow:hidden;
  padding: 100px 0 60px;
}
#particles-canvas {
  position:absolute; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
}
.hero-grid-bg {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,184,148,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,184,148,.035) 1px, transparent 1px);
  background-size: 55px 55px;
  animation: gridDrift 25s linear infinite;
}
@keyframes gridDrift { 0%{transform:translateY(0)} 100%{transform:translateY(55px)} }

.orb {
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.12;
  animation: orbFloat 9s ease-in-out infinite;
}
.orb-1 { width:650px;height:650px; background:var(--teal);    top:-120px; right:-120px; animation-delay:0s; }
.orb-2 { width:450px;height:450px; background:var(--gold);    bottom:-80px; left:-80px;  animation-delay:-3.5s; }
.orb-3 { width:320px;height:320px; background:#4a8fe8; top:35%; left:25%; animation-delay:-6s; }
@keyframes orbFloat {
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(30px,-25px) scale(1.06)}
  66%{transform:translate(-20px,35px) scale(.94)}
}

.hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; position:relative; z-index:2; }

.hero-badge {
  display:inline-flex; align-items:center; gap:8px; padding:9px 18px;
  background:rgba(0,184,148,.12); border:1px solid rgba(0,184,148,.3);
  border-radius:var(--r-full); font-size:.77rem; font-weight:700;
  color:var(--teal); letter-spacing:1.5px; text-transform:uppercase;
  margin-bottom:1.5rem; animation: fadeUp .8s ease .2s both;
}
.badge-pulse { width:7px;height:7px; background:var(--teal); border-radius:50%; animation:pulse-dot 2s infinite; }

.hero h1 { color:white; font-size:clamp(2.4rem,5.5vw,4.2rem); font-weight:900; line-height:1.08; margin-bottom:1.5rem; animation:fadeUp .8s ease .4s both; }
.hero-desc { font-size:1.1rem; color:rgba(255,255,255,.72); line-height:1.85; margin-bottom:2.5rem; animation:fadeUp .8s ease .6s both; }
.hero-cta  { display:flex; gap:1rem; flex-wrap:wrap; animation:fadeUp .8s ease .8s both; }
.hero-stats{ display:flex; gap:2.5rem; margin-top:3rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.1); animation:fadeUp .8s ease 1s both; }
.hs-num    { font-family:var(--font-head); font-size:2rem; font-weight:800; color:white; line-height:1; }
.hs-num span{ color:var(--teal); }
.hs-lbl    { font-size:.77rem; color:rgba(255,255,255,.55); margin-top:3px; }

/* Hero Visual (3D floating scene) */
.hero-visual { position:relative; height:480px; }
.hv-scene    { position:relative; width:100%; height:100%; }

.float-card {
  position:absolute; background:rgba(255,255,255,.07); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.15); border-radius:var(--r-lg); padding:1.25rem;
  color:white; animation:cardFloat 7s ease-in-out infinite;
}
.float-card-1 { top:40px; left:0;   width:185px; animation-delay:0s; }
.float-card-2 { top:180px;right:0;  width:170px; animation-delay:-2.3s; }
.float-card-3 { bottom:50px;left:50px;width:175px; animation-delay:-4.5s; }
@keyframes cardFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-18px) rotate(1.5deg)}}

.fc-icon { font-size:1.6rem; margin-bottom:.5rem; }
.fc-lbl  { font-size:.72rem; font-weight:600; opacity:.65; margin-bottom:.2rem; letter-spacing:.5px; }
.fc-val  { font-size:1.6rem; font-weight:800; color:var(--teal); }

.ecanz-ring {
  position:absolute; top:0; right:30px; width:160px;
  background:rgba(255,255,255,.08); backdrop-filter:blur(14px);
  border:2px solid rgba(240,165,0,.5); border-radius:var(--r-xl); padding:1.25rem;
  text-align:center; animation:cardFloat 6s ease-in-out infinite;
}
.er-star  { font-size:2.2rem; margin-bottom:.5rem; }
.er-cert  { font-size:.6rem; letter-spacing:2px; text-transform:uppercase; color:var(--gold); font-weight:700; }
.er-org   { font-family:var(--font-head); font-size:1.3rem; font-weight:900; color:white; }
.er-sub   { font-size:.68rem; color:rgba(255,255,255,.55); margin-top:3px; }

/* Globe element */
.globe-wrap { position:absolute; top:50%;left:50%; transform:translate(-50%,-50%); }
.globe {
  width:200px; height:200px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #1a5f8a, #0a2040, #051020);
  box-shadow:
    0 0 0 2px rgba(0,184,148,.3),
    0 0 0 4px rgba(0,184,148,.1),
    inset 0 0 60px rgba(0,184,148,.15),
    0 30px 80px rgba(0,0,0,.5);
  animation:globeSpin 20s linear infinite;
  position:relative; overflow:hidden;
}
.globe::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  background: repeating-linear-gradient(0deg, transparent, transparent 18px, rgba(0,184,148,.08) 18px, rgba(0,184,148,.08) 20px),
              repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(0,184,148,.08) 18px, rgba(0,184,148,.08) 20px);
}
.globe::after {
  content:''; position:absolute; top:15%; left:20%;
  width:55%; height:30%; background:rgba(255,255,255,.04); border-radius:50%;
}
@keyframes globeSpin { 0%{box-shadow:0 0 0 2px rgba(0,184,148,.3),0 0 0 4px rgba(0,184,148,.1),inset 0 0 60px rgba(0,184,148,.15),0 30px 80px rgba(0,0,0,.5)} 50%{box-shadow:0 0 0 2px rgba(0,184,148,.5),0 0 0 8px rgba(0,184,148,.15),inset 0 0 80px rgba(0,184,148,.2),0 30px 80px rgba(0,0,0,.5)} 100%{box-shadow:0 0 0 2px rgba(0,184,148,.3),0 0 0 4px rgba(0,184,148,.1),inset 0 0 60px rgba(0,184,148,.15),0 30px 80px rgba(0,0,0,.5)} }

/* =============================================================================
   Page Hero (inner pages)
   ============================================================================= */
.page-hero {
  padding: 140px 0 80px; background:var(--grad-hero);
  position:relative; overflow:hidden; text-align:center;
}
.page-hero .orb { opacity:.08; }
.page-hero h1 { color:white; margin-bottom:1rem; position:relative; z-index:2; }
.page-hero p  { color:rgba(255,255,255,.68); font-size:1.1rem; max-width:580px; margin:0 auto; position:relative; z-index:2; margin-bottom:0; }
.breadcrumb   {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:.83rem; color:rgba(255,255,255,.45); margin-bottom:1rem; position:relative; z-index:2;
}
.breadcrumb a { color:rgba(255,255,255,.65); }
.breadcrumb a:hover { color:var(--teal); }
.bc-sep { color:rgba(255,255,255,.25); }

/* =============================================================================
   Cards
   ============================================================================= */
.card { background:white; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); transition:var(--trans-base); }
.card:hover { transform:translateY(-7px); box-shadow:var(--sh-lg); }

/* Feature Card */
.feat-card {
  background:white; border-radius:var(--r-lg); padding:2rem;
  box-shadow:var(--sh-sm); border:1px solid var(--gray-100);
  text-align:center; transition:var(--trans-bounce);
}
.feat-card:hover { transform:translateY(-8px); box-shadow:var(--sh-lg); border-color:rgba(0,184,148,.25); }
.feat-icon {
  width:68px; height:68px; border-radius:var(--r-lg); margin:0 auto 1.25rem;
  background:linear-gradient(135deg,rgba(0,184,148,.12),rgba(0,184,148,.22));
  display:flex; align-items:center; justify-content:center; font-size:1.7rem;
}
.feat-card h4 { font-size:1.05rem; margin-bottom:.5rem; }
.feat-card p  { font-size:.87rem; color:var(--gray-500); line-height:1.75; margin:0; }

/* Country Card */
.country-card {
  position:relative; border-radius:var(--r-lg); overflow:hidden; cursor:pointer;
  background:white; box-shadow:var(--sh-md); transition:var(--trans-bounce);
  border:2px solid transparent;
}
.country-card:hover { transform:translateY(-8px) scale(1.02); box-shadow:var(--sh-xl); border-color:var(--teal); }
.country-card.preferred { border-color:var(--gold); }
.country-card.preferred::before {
  content:'⭐ Preferred'; position:absolute; top:12px; right:12px;
  background:var(--gold); color:var(--navy); font-size:.72rem; font-weight:700;
  padding:4px 12px; border-radius:var(--r-full); z-index:5;
}
.cc-img {
  height:180px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.cc-flag { position:absolute; bottom:12px; left:12px; font-size:2rem; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.cc-body { padding:1.25rem; }
.cc-name { font-family:var(--font-head); font-size:1.15rem; font-weight:700; color:var(--navy); margin-bottom:.3rem; }
.cc-desc { font-size:.83rem; color:var(--gray-500); line-height:1.55; margin-bottom:1rem; }
.cc-tags { display:flex; flex-wrap:wrap; gap:5px; }
.tag {
  padding:3px 10px; border-radius:var(--r-full); font-size:.72rem; font-weight:600;
}
.tag-teal { background:rgba(0,184,148,.1);  color:var(--teal-dark); }
.tag-gold { background:rgba(240,165,0,.1);  color:var(--gold-dark); }
.tag-blue { background:rgba(30,84,183,.1);  color:#1e54b7; }
.tag-red  { background:rgba(220,53,69,.1);  color:#dc3545; }

/* Story Card */
.story-card {
  background:white; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm);
  transition:var(--trans-bounce); opacity:0; transform:translateY(28px);
}
.story-card.visible { opacity:1; transform:translateY(0); transition:opacity .6s ease, transform .6s ease, box-shadow .3s, transform .3s; }
.story-card:hover { transform:translateY(-8px) !important; box-shadow:var(--sh-lg); }
.sc-head { height:190px; position:relative; overflow:hidden; }
.sc-head-grad { width:100%; height:100%; }
.sc-avatar {
  position:absolute; bottom:-28px; left:22px; width:62px; height:62px; border-radius:50%;
  border:3px solid white; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:white; font-weight:800; font-family:var(--font-head);
  background:var(--grad-teal); box-shadow:var(--sh-teal);
}
.sc-country { position:absolute; top:14px; right:14px; background:rgba(0,0,0,.5); backdrop-filter:blur(8px); padding:5px 12px; border-radius:var(--r-full); font-size:.76rem; color:white; font-weight:600; }
.sc-body { padding:44px 22px 22px; }
.sc-name    { font-size:1.05rem; font-weight:700; color:var(--navy); margin-bottom:2px; }
.sc-program { font-size:.82rem; color:var(--teal); margin-bottom:1rem; }
.sc-quote   { font-size:.875rem; color:var(--gray-600); line-height:1.75; font-style:italic; margin:0; }
.sc-stars   { color:var(--gold); font-size:.85rem; margin-top:.75rem; }

/* Visa/Destination Card */
.visa-card {
  background:white; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm);
  cursor:pointer; transition:var(--trans-bounce); border:2px solid transparent;
}
.visa-card:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:var(--teal); }
.vc-head { padding:1.5rem; display:flex; align-items:center; gap:1rem; }
.vc-flag { font-size:2.5rem; }
.vc-head-text h4 { color:white; font-size:1.05rem; margin-bottom:2px; }
.vc-head-text span{ color:rgba(255,255,255,.6); font-size:.78rem; }
.vc-body { padding:1rem 1.5rem; }
.vc-body p { font-size:.86rem; color:var(--gray-500); line-height:1.75; margin:0; }
.vc-foot { padding:.75rem 1.5rem 1.25rem; display:flex; align-items:center; justify-content:space-between; }
.vc-diff { display:flex; align-items:center; gap:5px; font-size:.78rem; font-weight:600; color:var(--gray-500); }
.diff-dots { display:flex; gap:3px; }
.diff-dot { width:7px;height:7px;border-radius:50%; background:var(--gray-200); }
.diff-dot.on { background:var(--teal); }
.vc-cta { font-size:.82rem; font-weight:600; color:var(--teal); display:flex; align-items:center; gap:4px; }

/* Media Item Card */
.media-item {
  border-radius:var(--r-lg); overflow:hidden; position:relative;
  aspect-ratio:16/10; cursor:pointer; box-shadow:var(--sh-md);
  transition:var(--trans-bounce);
}
.media-item:hover { transform:scale(1.02); box-shadow:var(--sh-xl); }
.media-thumb { width:100%;height:100%;object-fit:cover; transition:var(--trans-slow); }
.media-item:hover .media-thumb { transform:scale(1.08); }
.media-grad {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent);
  padding:1.25rem;color:white;
}
.media-badge {
  position:absolute; top:10px; left:10px; background:rgba(0,0,0,.5); backdrop-filter:blur(8px);
  padding:3px 10px; border-radius:var(--r-full); font-size:.72rem; font-weight:700; color:white;
}
.media-title { font-weight:700; font-size:.95rem; margin-bottom:3px; }
.media-desc  { font-size:.78rem; opacity:.78; margin:0; }

/* =============================================================================
   Stats
   ============================================================================= */
.stats-bar { background:var(--navy); padding:4rem 0; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; text-align:center; }
.stat-item { padding:1.5rem; border-right:1px solid rgba(255,255,255,.07); }
.stat-item:last-child{border-right:none;}
.stat-num  { font-family:var(--font-head); font-size:2.8rem; font-weight:900; color:white; line-height:1; }
.stat-num span{ color:var(--teal); }
.stat-lbl  { font-size:.85rem; color:rgba(255,255,255,.5); margin-top:.5rem; }

/* =============================================================================
   Why Us Section
   ============================================================================= */
.why-us { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.wu-points { display:flex; flex-direction:column; gap:2rem; margin-top:2rem; }
.wu-point  { display:flex; gap:1.25rem; align-items:flex-start; }
.wp-icon   {
  width:46px;height:46px; border-radius:var(--r-md); flex-shrink:0;
  background:linear-gradient(135deg,rgba(0,184,148,.12),rgba(0,184,148,.22));
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.wp-text h4 { font-size:.97rem; margin-bottom:.25rem; }
.wp-text p  { font-size:.85rem; color:var(--gray-500); margin:0; line-height:1.65; }

.cert-showcase {
  background:white; border-radius:var(--r-xl); padding:2.5rem;
  box-shadow:var(--sh-lg); text-align:center; position:relative; overflow:hidden;
}
.cert-showcase::before {
  content:''; position:absolute; top:-40px; right:-40px; width:200px; height:200px;
  background:radial-gradient(circle,rgba(240,165,0,.12),transparent 70%);
}
.cert-seal {
  width:100px;height:100px; border-radius:50%; background:var(--grad-gold);
  display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem;
  font-size:2.5rem; box-shadow:var(--sh-gold); position:relative; z-index:1;
  animation:sealPulse 3s ease-in-out infinite;
}
@keyframes sealPulse{0%,100%{box-shadow:var(--sh-gold)}50%{box-shadow:0 15px 60px rgba(240,165,0,.6)}}
.cert-title    { font-size:1.5rem; font-weight:900; color:var(--navy); margin-bottom:.25rem; }
.cert-subtitle { color:var(--teal); font-size:.82rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.cert-divider  { width:60px;height:3px;background:var(--grad-teal);margin:1.25rem auto;border-radius:2px; }
.cert-desc     { font-size:.875rem; color:var(--gray-500); line-height:1.8; margin:0; }

/* =============================================================================
   Testimonial
   ============================================================================= */
.testimonial-card {
  background:white; border-radius:var(--r-xl); padding:2rem;
  box-shadow:var(--sh-sm); border-left:4px solid var(--teal);
}
.tc-quote { font-size:.97rem; color:var(--gray-600); line-height:1.8; font-style:italic; margin-bottom:1.25rem; }
.tc-author{ display:flex; align-items:center; gap:.75rem; }
.tc-avatar{ width:44px;height:44px;border-radius:50%;background:var(--grad-teal);display:flex;align-items:center;justify-content:center;color:white;font-weight:700; }
.tc-name  { font-weight:700; font-size:.93rem; color:var(--navy); }
.tc-role  { font-size:.78rem; color:var(--gray-500); }

/* =============================================================================
   Forms
   ============================================================================= */
.form-group { margin-bottom:1rem; }
.form-label { display:block; font-size:.82rem; font-weight:700; color:var(--gray-700); margin-bottom:.4rem; letter-spacing:.3px; }
.form-input {
  width:100%; padding:11px 14px; border:2px solid var(--gray-200);
  border-radius:var(--r-md); font-size:.9rem; color:var(--gray-700);
  transition:var(--trans-base); background:white;
}
.form-input:focus { border-color:var(--teal); box-shadow:0 0 0 4px rgba(0,184,148,.1); }
.form-input::placeholder { color:var(--gray-400); }
.form-select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:40px;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-error { font-size:.77rem; color:#dc3545; margin-top:.3rem; }

.lead-form {
  background:white; border-radius:var(--r-xl); padding:2rem 2.25rem;
  box-shadow:var(--sh-lg); max-width:480px; margin:0 auto;
  border-top:4px solid var(--teal);
}
.lf-head { text-align:center; margin-bottom:1.5rem; }
.lf-head h3 { font-size:1.25rem; margin-bottom:.25rem; }
.lf-head p  { font-size:.83rem; color:var(--gray-500); margin:0; }

/* =============================================================================
   Modal
   ============================================================================= */
.modal-bg {
  position:fixed; inset:0; background:rgba(10,22,40,.75); backdrop-filter:blur(10px);
  z-index:var(--z-modal); display:flex; align-items:center; justify-content:center;
  padding:1.5rem; opacity:0; visibility:hidden; transition:var(--trans-base);
}
.modal-bg.open { opacity:1; visibility:visible; }
.modal-box {
  background:white; border-radius:var(--r-xl); width:100%; max-width:680px;
  max-height:88vh; overflow-y:auto; transform:scale(.92) translateY(16px);
  transition:var(--trans-bounce); box-shadow:var(--sh-xl);
}
.modal-bg.open .modal-box { transform:scale(1) translateY(0); }
.modal-head {
  padding:1.5rem 2rem; border-bottom:1px solid var(--gray-100);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; background:white; z-index:2; border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.modal-head h3 { font-size:1.2rem; }
.modal-close {
  width:34px;height:34px;border-radius:50%;background:var(--gray-100);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:var(--trans-base);font-size:1.1rem;color:var(--gray-600);
}
.modal-close:hover { background:var(--gray-200); color:var(--gray-900); }
.modal-body { padding:2rem; }

/* =============================================================================
   Journey & Checklist
   ============================================================================= */
.journey { position:relative; padding-left:36px; }
.journey::before { content:''; position:absolute; left:12px; top:6px; bottom:6px; width:2px; background:linear-gradient(to bottom,var(--teal),rgba(0,184,148,.1)); border-radius:2px; }
.j-step { position:relative; margin-bottom:1.75rem; }
.j-step:last-child { margin-bottom:0; }
.j-step::before { content:''; position:absolute; left:-28px; top:4px; width:12px;height:12px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(0,184,148,.2); }
.j-num { font-size:.72rem; font-weight:800; color:var(--teal); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:2px; }
.j-step h4 { font-size:.95rem; margin-bottom:.2rem; }
.j-step p  { font-size:.83rem; color:var(--gray-500); margin:0; line-height:1.65; }

.checklist-wrap { display:flex; flex-direction:column; gap:0; border:1px solid var(--gray-100); border-radius:var(--r-md); overflow:hidden; }
.cl-item {
  display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem;
  border-bottom:1px solid var(--gray-100); cursor:pointer; transition:var(--trans-fast);
  font-size:.88rem; user-select:none;
}
.cl-item:last-child { border-bottom:none; }
.cl-item:hover { background:var(--gray-50); }
.cl-check {
  width:22px;height:22px;border-radius:50%;border:2px solid var(--gray-300);
  flex-shrink:0; display:flex;align-items:center;justify-content:center; transition:var(--trans-base);
}
.cl-item.checked .cl-check { background:var(--teal); border-color:var(--teal); color:white; font-size:.7rem; }
.cl-item.checked { color:var(--gray-400); text-decoration:line-through; }

/* =============================================================================
   Footer
   ============================================================================= */
.footer { background:#030b16; color:rgba(255,255,255,.65); padding:5rem 0 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.07); }
.fb-desc { font-size:.875rem; line-height:1.85; margin:1rem 0 1.5rem; color:rgba(255,255,255,.5); }
.f-socials { display:flex; gap:.75rem; }
.f-social-btn {
  width:42px;height:42px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  font-size:1rem;transition:var(--trans-bounce);cursor:pointer;
}
.fs-fb { background:rgba(24,119,242,.15);color:#1877f2;border:1px solid rgba(24,119,242,.3); }
.fs-fb:hover { background:#1877f2;color:white;transform:translateY(-4px); }
.fs-ig { background:rgba(228,64,95,.15);color:#e4405f;border:1px solid rgba(228,64,95,.3); }
.fs-ig:hover { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:white;transform:translateY(-4px); }
.fs-wa { background:rgba(37,211,102,.15);color:#25d366;border:1px solid rgba(37,211,102,.3); }
.fs-wa:hover { background:#25d366;color:white;transform:translateY(-4px); }

.f-head { font-family:var(--font-head);font-weight:700;font-size:.97rem;color:white;margin-bottom:1.25rem; }
.f-links { display:flex;flex-direction:column;gap:.6rem; }
.f-link { font-size:.855rem;color:rgba(255,255,255,.45);transition:var(--trans-base); }
.f-link:hover { color:var(--teal); padding-left:4px; }
.f-contact-item { display:flex;align-items:flex-start;gap:.75rem;font-size:.845rem;margin-bottom:.9rem; }
.f-contact-item:last-child { margin-bottom:0; }
.fc-ico { color:var(--teal);font-size:1rem;flex-shrink:0;margin-top:2px; }
.fc-val a { color:rgba(255,255,255,.65); }
.fc-val a:hover { color:var(--teal); }

.footer-bottom {
  padding:1.5rem 0;display:flex;align-items:center;justify-content:space-between;
  font-size:.82rem;color:rgba(255,255,255,.28);flex-wrap:wrap;gap:.75rem;
}
.fb-badge { display:flex;align-items:center;gap:.5rem;color:var(--gold);font-size:.82rem;font-weight:600; }

/* =============================================================================
   Floating Buttons
   ============================================================================= */
.float-btns { position:fixed;bottom:28px;right:28px;display:flex;flex-direction:column;gap:.75rem;z-index:var(--z-float); }
.fb-btn {
  width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;box-shadow:0 6px 22px rgba(0,0,0,.25);transition:var(--trans-bounce);cursor:pointer;position:relative;
}
.fb-btn:hover { transform:scale(1.12) translateY(-4px); }
.fb-btn .tip {
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.82);color:white;padding:5px 12px;border-radius:6px;
  font-size:.77rem;white-space:nowrap;pointer-events:none;opacity:0;transition:var(--trans-base);
}
.fb-btn:hover .tip { opacity:1; }
.fb-wa  { background:#25d366;color:white; }
.fb-top { background:var(--navy);color:white;opacity:0;visibility:hidden;transition:var(--trans-base); }
.fb-top.show { opacity:1;visibility:visible; }

/* Big CTA WhatsApp */
.wa-cta { background:linear-gradient(135deg,#075e54,#128c7e,#25d366);padding:4rem 0;color:white;text-align:center; }
.wa-cta h3 { color:white;font-size:1.5rem;margin-bottom:.75rem; }
.wa-cta p  { opacity:.88;margin-bottom:2rem; }
.btn-wa-cta {
  display:inline-flex;align-items:center;gap:.75rem;padding:16px 40px;background:white;
  color:#128c7e;border-radius:var(--r-full);font-weight:700;font-size:1.05rem;
  box-shadow:0 10px 35px rgba(0,0,0,.25);transition:var(--trans-bounce);
}
.btn-wa-cta:hover { transform:translateY(-4px);box-shadow:0 18px 50px rgba(0,0,0,.3); }

/* =============================================================================
   Toast Notification
   ============================================================================= */
.toast {
  position:fixed;bottom:100px;right:28px;background:white;border-radius:var(--r-lg);
  padding:1rem 1.5rem;box-shadow:var(--sh-lg);display:flex;align-items:center;gap:.75rem;
  font-size:.88rem;font-weight:600;z-index:var(--z-toast);transform:translateX(130%);
  transition:var(--trans-bounce);border-left:4px solid var(--teal);min-width:260px;
}
.toast.show { transform:translateX(0); }
.toast.error { border-color:#dc3545; }
.toast-icon { font-size:1.1rem; }

/* =============================================================================
   About Page
   ============================================================================= */
.mission-grid { display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start; }
.team-grid    { display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.5rem; }
.team-card {
  text-align:center;padding:2rem 1.5rem;background:white;border-radius:var(--r-xl);
  box-shadow:var(--sh-sm);transition:var(--trans-bounce);
}
.team-card:hover { transform:translateY(-8px);box-shadow:var(--sh-lg); }
.t-avatar { width:76px;height:76px;border-radius:50%;background:var(--grad-teal);margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:white; }
.t-name { font-weight:700;font-size:1rem;color:var(--navy);margin-bottom:.25rem; }
.t-role { font-size:.8rem;color:var(--gray-500); }

.contact-card { background:white;border-radius:var(--r-xl);padding:2rem;box-shadow:var(--sh-md); }
.cont-item { display:flex;align-items:flex-start;gap:.875rem;padding:.875rem 0;border-bottom:1px solid var(--gray-100); }
.cont-item:last-child { border-bottom:none; }
.cont-ico { width:42px;height:42px;border-radius:var(--r-md);background:rgba(0,184,148,.1);display:flex;align-items:center;justify-content:center;color:var(--teal);font-size:1rem;flex-shrink:0; }
.cont-lbl  { font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--gray-400);margin-bottom:2px; }
.cont-val  { font-size:.88rem;color:var(--gray-700); }
.cont-val a { color:var(--teal); }

/* Map Placeholder */
.map-embed {
  width:100%;height:280px;background:var(--gray-100);border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:.75rem;color:var(--gray-400);font-size:.95rem;cursor:pointer;
  transition:var(--trans-base);border:2px dashed var(--gray-200);text-decoration:none;
}
.map-embed:hover { border-color:var(--teal);color:var(--teal);background:rgba(0,184,148,.03); }
.map-ico { font-size:2.8rem; }

/* =============================================================================
   Admin
   ============================================================================= */
.admin-login-wrap {
  min-height:100vh;background:var(--grad-hero);display:flex;align-items:center;justify-content:center;padding:1.5rem;
}
.admin-login-card {
  background:rgba(255,255,255,.05);backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-xl);padding:3rem;width:100%;max-width:420px;box-shadow:var(--sh-xl);
}
.admin-shell { display:grid;grid-template-columns:260px 1fr;min-height:100vh; }
.admin-sidebar {
  background:var(--navy);padding:1.5rem;display:flex;flex-direction:column;gap:.5rem;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.admin-main { background:var(--gray-50);padding:2rem;overflow-y:auto; }
.a-nav-item {
  display:flex;align-items:center;gap:.75rem;padding:11px 1rem;border-radius:var(--r-md);
  color:rgba(255,255,255,.55);font-size:.88rem;font-weight:500;cursor:pointer;transition:var(--trans-base);
}
.a-nav-item:hover,.a-nav-item.active { background:rgba(0,184,148,.15);color:var(--teal); }
.a-card { background:white;border-radius:var(--r-lg);padding:1.5rem;box-shadow:var(--sh-sm);margin-bottom:1.5rem; }
.a-card-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem; }
.a-card-head h3 { font-size:1.05rem; }
.upload-zone {
  border:2px dashed var(--gray-300);border-radius:var(--r-lg);padding:3rem;text-align:center;
  cursor:pointer;transition:var(--trans-base);
}
.upload-zone:hover,.upload-zone.drag { border-color:var(--teal);background:rgba(0,184,148,.04); }
.upload-zone .uz-ico { font-size:2.5rem;margin-bottom:.75rem;color:var(--gray-400); }
.upload-zone p { font-size:.875rem;color:var(--gray-500);margin:0; }
.admin-stat-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem; }
.a-stat { background:white;border-radius:var(--r-lg);padding:1.5rem;text-align:center;box-shadow:var(--sh-sm); }
.a-stat-num { font-size:2rem;font-weight:800;color:var(--navy);font-family:var(--font-head); }
.a-stat-lbl { font-size:.8rem;color:var(--gray-500);margin-top:.25rem; }

/* =============================================================================
   Filters & Search
   ============================================================================= */
.filter-bar { display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-bottom:3rem; }
.filter-btn {
  padding:9px 22px;border-radius:var(--r-full);font-size:.84rem;font-weight:600;
  border:2px solid var(--gray-200);color:var(--gray-600);background:white;cursor:pointer;transition:var(--trans-base);
}
.filter-btn:hover,.filter-btn.active { border-color:var(--teal);color:var(--teal);background:rgba(0,184,148,.06); }

.search-bar { position:relative;max-width:480px;margin:0 auto 2rem; }
.search-bar input { padding-left:3rem;border-radius:var(--r-full);border:2px solid var(--gray-200); }
.search-bar input:focus { border-color:var(--teal); }
.search-ico { position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--gray-400); }

/* =============================================================================
   Preferred Country Banner
   ============================================================================= */
.pref-banner {
  background:linear-gradient(135deg,rgba(0,184,148,.1),rgba(0,184,148,.04));
  border:1px solid rgba(0,184,148,.25);border-radius:var(--r-lg);padding:1rem 1.5rem;
  display:flex;align-items:center;gap:1rem;margin-bottom:2rem;font-size:.88rem;color:var(--teal-dark);
}
.pref-banner .pb-close { margin-left:auto;cursor:pointer;opacity:.6;transition:var(--trans-base);font-size:1.2rem; }
.pref-banner .pb-close:hover { opacity:1; }

/* =============================================================================
   Lightbox
   ============================================================================= */
.lightbox {
  position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:700;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:var(--trans-base);
}
.lightbox.open { opacity:1;visibility:visible; }
.lb-content { max-width:90vw;max-height:85vh;border-radius:var(--r-lg);overflow:hidden; }
.lb-content img { max-height:85vh; }
.lb-close {
  position:absolute;top:20px;right:20px;color:white;font-size:1.4rem;cursor:pointer;
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);border-radius:50%;transition:var(--trans-base);
}
.lb-close:hover { background:rgba(255,255,255,.2); }

/* =============================================================================
   Scroll Animations
   ============================================================================= */
.aos { opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease; }
.aos.visible { opacity:1;transform:translateY(0); }
.aos-left  { transform:translateX(-28px); }
.aos-right { transform:translateX(28px); }
.aos-left.visible,.aos-right.visible { transform:translateX(0); }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s}
.d4{transition-delay:.4s} .d5{transition-delay:.5s} .d6{transition-delay:.6s}

@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* =============================================================================
   Dividers & Misc
   ============================================================================= */
.divider { height:1px;background:var(--gray-100);margin:2rem 0; }
.chip { display:inline-flex;align-items:center;gap:.4rem;padding:5px 14px;border-radius:var(--r-full);font-size:.78rem;font-weight:600; }
.chip-teal { background:rgba(0,184,148,.1);color:var(--teal); }
.chip-gold { background:rgba(240,165,0,.1);color:var(--gold-dark); }

.tabs { display:flex;gap:.25rem;background:var(--gray-100);padding:4px;border-radius:var(--r-md);width:fit-content; }
.tab-btn { padding:9px 22px;border-radius:var(--r-sm);font-size:.85rem;font-weight:600;color:var(--gray-500);transition:var(--trans-base);cursor:pointer; }
.tab-btn.active { background:white;color:var(--navy);box-shadow:var(--sh-sm); }

/* =============================================================================
   Responsive
   ============================================================================= */
@media(max-width:1024px){
  .footer-grid  { grid-template-columns:1fr 1fr;gap:2.5rem; }
  .stats-grid   { grid-template-columns:repeat(2,1fr); }
  .why-us       { grid-template-columns:1fr; }
  .hero-inner   { grid-template-columns:1fr;text-align:center; }
  .hero-visual  { display:none; }
  .hero-cta,.hero-stats { justify-content:center; }
  .admin-shell  { grid-template-columns:1fr; }
  .admin-sidebar{ position:static;height:auto;flex-direction:row;overflow-x:auto;padding:1rem; }
  .admin-stat-grid { grid-template-columns:repeat(2,1fr); }
  .mission-grid { grid-template-columns:1fr; }
}
@media(max-width:768px){
  .container  { padding:0 1.25rem; }
  .section    { padding:3.5rem 0; }
  .nav-links  { display:none; }
  .nav-links.open {
    display:flex;flex-direction:column;position:fixed;top:68px;left:0;right:0;
    background:rgba(10,22,40,.98);backdrop-filter:blur(22px);padding:1.5rem;gap:1.25rem;z-index:199;
  }
  .nav-actions .nav-wa { display:none; }
  .hamburger  { display:flex; }
  .form-row   { grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .countries-grid,.visa-cards-grid,.media-grid { grid-template-columns:1fr; }
  .float-btns { bottom:18px;right:18px; }
  .admin-stat-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:480px){
  .hero { padding:100px 0 50px; }
  .hero-cta   { flex-direction:column;align-items:center; }
  .btn-lg     { width:100%;justify-content:center; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .team-grid  { grid-template-columns:1fr 1fr; }
  .admin-stat-grid { grid-template-columns:1fr; }
  .tabs { width:100%; justify-content:center; }
}