/* ============================================================
   AYE TECH HUB — FULLY SELF-CONTAINED CSS
   No external dependencies. No Tailwind. No icon fonts.
   Works offline, on GitHub Pages, and in any browser.
   ============================================================ */

/* ---- RESET ---- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea{font-family:inherit;color:inherit}
img,svg{max-width:100%;display:block}
ul{list-style:none}
h1,h2,h3,h4,h5{font-family:'Segoe UI',Tahoma,sans-serif;font-weight:700;line-height:1.2;letter-spacing:-0.5px}

/* ---- THEME VARIABLES ---- */
:root{
  --neon:#00d4ff; --neon-glow:#00ffff; --neon-dark:#0099cc;
  --accent:#1e3a8a; --accent-light:#3b82f6;
  --bg:#020817; --bg-card:#0a1628;
  --border:rgba(0,212,255,0.15); --border-strong:rgba(0,212,255,0.3);
  --text:#e2e8f0; --text-soft:#94a3b8; --text-muted:#475569;
  --shadow-neon:0 4px 30px rgba(0,212,255,0.2);
  --shadow-glow:0 0 20px rgba(0,212,255,0.3),0 0 40px rgba(0,212,255,0.15);
}
[data-theme="light"]{
  --bg:#f0f4f8; --bg-card:#ffffff;
  --border:rgba(30,58,138,0.15); --border-strong:rgba(30,58,138,0.3);
  --text:#1e293b; --text-soft:#475569; --text-muted:#94a3b8;
  --neon:#1e3a8a; --neon-dark:#1e40af;
}

body{background:var(--bg);color:var(--text);overflow-x:hidden;transition:background .4s,color .4s}

/* ---- LAYOUT ---- */
.container{max-width:1280px;margin:0 auto;padding:0 20px}
section{padding:80px 0;position:relative;overflow:hidden}
@media(max-width:640px){section{padding:60px 0}}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--neon);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--neon-glow)}

/* ---- TYPOGRAPHY ---- */
.display-font{font-family:'Segoe UI',Tahoma,'Arial Black',sans-serif;font-weight:900;letter-spacing:1px}
.gradient-text{
  background:linear-gradient(135deg,#00d4ff 0%,#ffffff 50%,#3b82f6 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;
}
[data-theme="light"] .gradient-text{background:linear-gradient(135deg,#1e3a8a,#3b82f6);-webkit-background-clip:text;background-clip:text;}
.neon-text{color:var(--neon);text-shadow:0 0 10px rgba(0,212,255,0.5)}
[data-theme="light"] .neon-text{text-shadow:none}

/* ---- ICONS (Pure SVG inline classes) ---- */
.svg-icon{display:inline-block;width:1em;height:1em;vertical-align:-0.125em;fill:currentColor;flex-shrink:0}

/* ---- GLASS EFFECT ---- */
.glass{
  background:rgba(10,22,40,0.65);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);
}
[data-theme="light"] .glass{background:rgba(255,255,255,0.75)}

/* ---- LOADING SCREEN ---- */
#loading-screen{
  position:fixed;inset:0;z-index:9999;background:#020817;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .6s,visibility .6s;
}
#loading-screen.hidden{opacity:0;visibility:hidden}
.loading-logo{
  width:90px;height:90px;border-radius:20px;
  background:linear-gradient(135deg,rgba(0,212,255,0.2),rgba(30,58,138,0.3));
  border:2px solid #00d4ff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Segoe UI',sans-serif;font-weight:900;font-size:1.3rem;
  color:#00d4ff;letter-spacing:2px;
  animation:float 2s ease-in-out infinite;
  box-shadow:0 0 30px rgba(0,212,255,0.4);
}
.loading-bar-wrap{width:200px;height:3px;background:#1e3a5f;border-radius:2px;margin-top:24px;overflow:hidden}
.loading-bar{height:100%;background:linear-gradient(90deg,#00d4ff,#00ffff);border-radius:2px;animation:loadBar 2s ease forwards}
@keyframes loadBar{from{width:0}to{width:100%}}
.loading-text{font-family:'Segoe UI',Tahoma,sans-serif;color:#00d4ff;font-size:.7rem;letter-spacing:4px;margin-top:14px;font-weight:700}

/* ---- KEYFRAMES ---- */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 20px rgba(0,212,255,0.3)}50%{box-shadow:0 0 40px rgba(0,212,255,0.6)}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes slideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---- LOGO PLACEHOLDER ---- */
.logo-box{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(0,212,255,0.15),rgba(30,58,138,0.25));
  border:1px solid var(--border-strong);
  border-radius:12px;
  font-family:'Segoe UI',Tahoma,sans-serif;font-weight:900;
  color:var(--neon);letter-spacing:1px;
  transition:all .3s;
}
.logo-box:hover{box-shadow:0 0 20px rgba(0,212,255,0.4)}

/* ---- NAVBAR ---- */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  transition:all .3s;padding:14px 0;
}
#navbar.scrolled{
  background:rgba(2,8,23,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);padding:8px 0;
  box-shadow:0 4px 30px rgba(0,212,255,0.08);
}
[data-theme="light"] #navbar.scrolled{background:rgba(240,244,248,0.95)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand-name{font-family:'Segoe UI',sans-serif;font-weight:900;font-size:1rem;color:var(--neon);letter-spacing:1px}
.brand-tag{font-size:.6rem;color:var(--text-muted);letter-spacing:1.5px;text-transform:uppercase}
.nav-menu{display:none;gap:24px;align-items:center}
@media(min-width:1024px){.nav-menu{display:flex}}
.nav-link{position:relative;color:var(--text-soft);font-size:.78rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:6px 0;transition:color .3s}
.nav-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--neon);transition:width .3s}
.nav-link:hover{color:var(--neon)}
.nav-link:hover::after{width:100%}
.nav-controls{display:flex;align-items:center;gap:8px}
.icon-btn{
  width:40px;height:40px;border-radius:10px;
  background:rgba(0,212,255,0.05);border:1px solid var(--border-strong);
  color:var(--neon);display:flex;align-items:center;justify-content:center;
  transition:all .3s;font-size:.9rem;
}
.icon-btn:hover{background:rgba(0,212,255,0.15);transform:translateY(-2px)}
.hamburger{display:flex}
@media(min-width:1024px){.hamburger{display:none}}

#mobile-menu{display:none;border-top:1px solid var(--border);margin-top:12px;padding:8px 20px 16px}
#mobile-menu.open{display:block}
.mobile-link{display:block;padding:14px 0;font-size:.8rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-soft);border-bottom:1px solid rgba(0,212,255,0.08);transition:color .2s}
.mobile-link:hover{color:var(--neon)}

/* ---- BUTTONS ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:10px;
  font-weight:700;font-size:.85rem;letter-spacing:.5px;
  transition:all .3s;white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,#0099cc,#00d4ff);
  color:#020817;box-shadow:0 4px 20px rgba(0,212,255,0.3);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,212,255,0.5)}
[data-theme="light"] .btn-primary{background:linear-gradient(135deg,#1e3a8a,#3b82f6);color:white}
.btn-outline{
  background:transparent;color:var(--neon);
  border:1.5px solid var(--neon);
}
.btn-outline:hover{background:rgba(0,212,255,0.1);transform:translateY(-2px)}
.btn-sm{padding:9px 18px;font-size:.78rem}
.btn-full{width:100%}

/* ---- HERO ---- */
#hero{
  min-height:100vh;display:flex;align-items:center;padding-top:90px;
  background:
    radial-gradient(ellipse at 20% 50%,rgba(0,100,200,0.15) 0%,transparent 60%),
    radial-gradient(ellipse at 80% 20%,rgba(0,212,255,0.1) 0%,transparent 50%),
    var(--bg);
}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,212,255,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,0.04) 1px,transparent 1px);
  background-size:50px 50px;
}
[data-theme="light"] .hero-grid{background-image:linear-gradient(rgba(30,58,138,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(30,58,138,0.05) 1px,transparent 1px)}
#particles-canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:48px;align-items:center;padding:60px 0}
@media(min-width:1024px){.hero-inner{grid-template-columns:1.1fr 1fr}}

.section-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,212,255,0.1);border:1px solid var(--border-strong);
  color:var(--neon);font-weight:700;
  font-size:.65rem;letter-spacing:3px;text-transform:uppercase;
  padding:6px 14px;border-radius:100px;margin-bottom:16px;
}

.hero-headline{
  font-size:clamp(2rem,5.5vw,3.5rem);font-weight:900;line-height:1.1;
  margin-bottom:20px;letter-spacing:-1px;
}
.typing-text{color:var(--neon);text-shadow:0 0 15px rgba(0,212,255,0.6)}
.cursor{display:inline-block;color:var(--neon);animation:blink 1s step-end infinite;font-weight:300}
.hero-subtitle{color:var(--text-soft);font-size:1rem;line-height:1.8;max-width:540px;margin-bottom:32px}
.hero-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}

/* ---- STAT CARDS ---- */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:460px}
.stat-card{
  text-align:center;padding:18px 12px;border-radius:12px;
  background:rgba(10,22,40,0.6);backdrop-filter:blur(8px);
  border:1px solid var(--border);
}
[data-theme="light"] .stat-card{background:rgba(255,255,255,0.6)}
.stat-number{font-family:'Segoe UI',sans-serif;font-size:1.7rem;font-weight:900;color:var(--neon);line-height:1}
.stat-label{font-size:.7rem;color:var(--text-soft);letter-spacing:1.5px;text-transform:uppercase;margin-top:6px}

/* ---- HERO VISUAL ---- */
.hero-visual{display:flex;justify-content:center;align-items:center}
.hero-orb{position:relative;width:280px;height:280px}
@media(min-width:768px){.hero-orb{width:360px;height:360px}}
.hero-ring-1{position:absolute;inset:-20px;border-radius:50%;border:2px solid rgba(0,212,255,0.2);animation:spin 12s linear infinite}
.hero-ring-2{position:absolute;inset:-40px;border-radius:50%;border:1px dashed rgba(0,212,255,0.15);animation:spin 20s linear infinite reverse}
.hero-orb-center{
  width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle,rgba(10,22,40,0.95) 60%,rgba(0,212,255,0.1) 100%);
  border:2px solid var(--neon);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  animation:pulse-glow 3s ease-in-out infinite;
  font-family:'Segoe UI',sans-serif;
}
.hero-orb-center .big{font-size:2rem;font-weight:900;color:var(--neon)}
.hero-orb-center .small{font-size:.65rem;color:var(--text-muted);letter-spacing:3px;text-transform:uppercase}
.orbit-dot{position:absolute;border-radius:50%;box-shadow:0 0 12px currentColor}

/* ---- SECTION HEADERS ---- */
.section-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;margin-bottom:14px;letter-spacing:-0.5px;line-height:1.2}
.section-subtitle{color:var(--text-soft);max-width:600px;margin:0 auto;line-height:1.7}
.section-head{text-align:center;margin-bottom:48px}
.section-head.left{text-align:left}

/* ---- ABOUT ---- */
.about-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:1024px){.about-grid{grid-template-columns:1fr 1fr;gap:64px}}
.about-visual{position:relative}
.about-img-box{
  border-radius:20px;height:380px;
  background:linear-gradient(135deg,#0a1628,#1e3a8a);
  display:flex;align-items:center;justify-content:center;
  position:relative;border:1px solid var(--border-strong);
  box-shadow:var(--shadow-glow);
}
.corner-deco{position:absolute;width:24px;height:24px}
.corner-deco.tl{top:14px;left:14px;border-top:2px solid var(--neon);border-left:2px solid var(--neon);border-radius:3px 0 0}
.corner-deco.tr{top:14px;right:14px;border-top:2px solid var(--neon);border-right:2px solid var(--neon);border-radius:0 3px 0 0}
.corner-deco.bl{bottom:14px;left:14px;border-bottom:2px solid var(--neon);border-left:2px solid var(--neon);border-radius:0 0 0 3px}
.corner-deco.br{bottom:14px;right:14px;border-bottom:2px solid var(--neon);border-right:2px solid var(--neon);border-radius:0 0 3px}
.float-badge{
  position:absolute;bottom:-20px;right:-16px;
  padding:18px 22px;border-radius:14px;
  background:rgba(10,22,40,0.9);backdrop-filter:blur(12px);
  border:1px solid var(--border-strong);
}
.about-text p{color:var(--text-soft);line-height:1.85;margin-bottom:16px}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.feature-card{
  padding:16px;border-radius:12px;
  background:rgba(10,22,40,0.5);border:1px solid var(--border);
  transition:all .3s;
}
[data-theme="light"] .feature-card{background:rgba(255,255,255,0.7)}
.feature-card:hover{border-color:var(--neon);transform:translateY(-3px)}
.feature-card .ic{font-size:1.3rem;margin-bottom:8px;display:block}
.feature-card .ti{font-weight:700;font-size:.88rem;margin-bottom:3px}
.feature-card .de{color:var(--text-soft);font-size:.78rem}

/* ---- DIVISIONS ---- */
.divisions-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:1024px){.divisions-grid{grid-template-columns:1fr 1fr}}
.division-card{
  border-radius:20px;padding:36px;position:relative;overflow:hidden;
  background:rgba(10,22,40,0.5);backdrop-filter:blur(12px);
  border:1px solid var(--border);
  transition:transform .4s,box-shadow .4s;
}
[data-theme="light"] .division-card{background:rgba(255,255,255,0.7)}
.division-card:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,212,255,0.2)}
.division-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--neon),var(--accent-light))}
.division-card.pro::before{background:linear-gradient(90deg,#3b82f6,#1d4ed8)}
.division-watermark{position:absolute;top:14px;right:14px;font-size:6rem;font-weight:900;opacity:0.04;line-height:1;pointer-events:none;color:var(--neon)}
.division-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin-bottom:24px}
.division-logo{width:100%;max-width:340px;aspect-ratio:3/2;height:auto;border-radius:18px;font-size:.7rem;flex-shrink:0;object-fit:cover;display:block;margin:0 auto 20px}
@media (max-width:640px){.division-logo{max-width:300px;border-radius:14px}}
.division-title{font-family:'Segoe UI',sans-serif;font-size:1.3rem;font-weight:900;color:var(--neon)}
.division-card.pro .division-title{color:#3b82f6;text-shadow:0 0 10px rgba(59,130,246,0.5)}
.division-tagline{font-size:.72rem;color:var(--text-soft);letter-spacing:2px;margin-top:4px}
.tag-list{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 24px}
.tag-pill{
  padding:5px 11px;border-radius:100px;font-size:.72rem;
  background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.2);color:var(--neon);
}
.division-card.pro .tag-pill{background:rgba(59,130,246,0.08);border-color:rgba(59,130,246,0.2);color:#3b82f6}
.spec-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
.spec-item{
  padding:11px 14px;border-radius:10px;display:flex;align-items:center;gap:10px;
  background:rgba(0,212,255,0.06);border:1px solid var(--border);
}
.division-card.pro .spec-item{background:rgba(59,130,246,0.06)}
.spec-ic{font-size:1.2rem;color:var(--neon)}
.division-card.pro .spec-ic{color:#3b82f6}
.spec-text strong{display:block;font-size:.85rem;font-weight:700}
.spec-text span{color:var(--text-soft);font-size:.7rem}

/* ---- SERVICES SECTION (Tigray) ---- */
.services-hero{
  position:relative;text-align:center;padding:40px 30px 50px;
  border-radius:28px;margin-bottom:50px;
  background:linear-gradient(135deg,rgba(34,197,94,0.08),rgba(217,180,74,0.06),rgba(220,38,38,0.05));
  border:1px solid rgba(217,180,74,0.25);
  overflow:hidden;
}
.services-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 30%,rgba(34,197,94,0.12),transparent 50%),radial-gradient(circle at 70% 70%,rgba(217,180,74,0.1),transparent 50%);
  pointer-events:none;
}
.services-flag-row{display:inline-flex;gap:6px;font-size:1.5rem;margin-bottom:14px;padding:8px 18px;background:rgba(0,0,0,0.3);border-radius:30px;border:1px solid rgba(255,255,255,0.1);position:relative;z-index:1}
.services-tagline{font-size:clamp(1.3rem,3vw,2rem);font-weight:900;line-height:1.3;margin-bottom:12px;position:relative;z-index:1}
.services-tagline .highlight{background:linear-gradient(135deg,#22c55e,#fbbf24);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.services-subtitle{font-size:1rem;color:var(--text-soft);max-width:680px;margin:0 auto 24px;line-height:1.7;position:relative;z-index:1}

/* Live badge */
.live-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 18px;border-radius:30px;
  background:linear-gradient(135deg,rgba(34,197,94,0.15),rgba(34,197,94,0.05));
  border:1px solid rgba(34,197,94,0.4);
  font-size:.75rem;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:#22c55e;
  position:relative;z-index:1;
}
.live-dot{
  width:8px;height:8px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,0.7);
  animation:pulse-green 2s infinite;
}

/* Service cards grid */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:36px}
.service-card{
  position:relative;padding:28px 24px;border-radius:20px;
  background:rgba(255,255,255,0.025);
  border:1px solid var(--border);
  transition:all .4s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.service-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--service-color,#22c55e),transparent);
  opacity:0;transition:opacity .3s;
}
.service-card:hover{transform:translateY(-6px);border-color:var(--service-color,#22c55e);box-shadow:0 20px 50px rgba(0,0,0,0.3)}
.service-card:hover::before{opacity:1}
.service-icon-wrap{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:16px;
  background:linear-gradient(135deg,var(--service-color,#22c55e),rgba(255,255,255,0.05));
  margin-bottom:18px;
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
  font-size:1.8rem;
}
.service-title{font-size:1.15rem;font-weight:800;margin-bottom:8px;line-height:1.3}
.service-desc{font-size:.88rem;color:var(--text-soft);line-height:1.6}

/* Why choose us card */
.why-us-card{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;
  padding:32px;border-radius:24px;margin-bottom:36px;
  background:linear-gradient(135deg,rgba(0,212,255,0.05),rgba(99,102,241,0.04));
  border:1px solid rgba(0,212,255,0.2);
}
.why-us-item{display:flex;align-items:flex-start;gap:14px}
.why-us-icon{
  flex-shrink:0;width:42px;height:42px;border-radius:12px;
  background:linear-gradient(135deg,var(--neon),var(--accent-2));
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;color:#000;
  box-shadow:0 4px 16px rgba(0,212,255,0.3);
}
.why-us-text strong{display:block;font-size:.95rem;font-weight:800;margin-bottom:4px}
.why-us-text span{font-size:.82rem;color:var(--text-soft);line-height:1.5}

/* WhatsApp CTA cards */
.whatsapp-ctas{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.whatsapp-cta{
  display:flex;align-items:center;gap:18px;
  padding:24px 26px;border-radius:20px;
  background:linear-gradient(135deg,rgba(37,211,102,0.1),rgba(37,211,102,0.03));
  border:1px solid rgba(37,211,102,0.3);
  text-decoration:none;color:var(--text);
  transition:all .3s;
  position:relative;overflow:hidden;
}
.whatsapp-cta::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(37,211,102,0.1),transparent);
  opacity:0;transition:opacity .3s;
}
.whatsapp-cta:hover{transform:translateY(-4px);border-color:#25d366;box-shadow:0 15px 40px rgba(37,211,102,0.2)}
.whatsapp-cta:hover::before{opacity:1}
.whatsapp-icon-circle{
  flex-shrink:0;width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,#25d366,#128c7e);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;
  box-shadow:0 4px 20px rgba(37,211,102,0.4);
  position:relative;z-index:1;
}
.whatsapp-cta-text{position:relative;z-index:1}
.whatsapp-cta-text strong{display:block;font-size:1rem;font-weight:800;color:#25d366;margin-bottom:3px}
.whatsapp-cta-text span{display:block;font-size:.82rem;color:var(--text-soft);margin-bottom:2px}
.whatsapp-cta-text small{display:block;font-size:.7rem;color:var(--text-soft);opacity:.8;font-style:italic}

/* Languages bar */
.languages-bar{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:30px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  font-size:.75rem;color:var(--text-soft);
  position:relative;z-index:1;
}
.languages-bar strong{color:var(--text);font-weight:700}

@media (max-width:680px){
  .whatsapp-ctas{grid-template-columns:1fr}
  .services-hero{padding:30px 18px 36px}
}

/* Floating WhatsApp button */
.floating-whatsapp{
  position:fixed;bottom:24px;right:24px;
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,#25d366,#128c7e);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 30px rgba(37,211,102,0.5);
  z-index:998;text-decoration:none;font-size:1.7rem;
  transition:transform .3s;
  animation:wa-pulse 3s ease-in-out infinite;
}
@keyframes wa-pulse{
  0%,100%{box-shadow:0 8px 30px rgba(37,211,102,0.5),0 0 0 0 rgba(37,211,102,0.5)}
  50%{box-shadow:0 8px 30px rgba(37,211,102,0.7),0 0 0 15px rgba(37,211,102,0)}
}
.floating-whatsapp:hover{transform:scale(1.1)}

/* ---- FOUNDER SECTION ---- */
.founder-hero{
  position:relative;
  display:grid;
  grid-template-columns:380px 1fr;
  gap:50px;
  align-items:center;
  padding:50px;
  border-radius:32px;
  background:linear-gradient(135deg,rgba(0,212,255,0.08),rgba(99,102,241,0.05),rgba(0,212,255,0.03));
  border:1px solid rgba(0,212,255,0.2);
  box-shadow:0 30px 80px rgba(0,0,0,0.4);
  margin-bottom:60px;
  overflow:hidden;
}
.founder-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 20% 30%,rgba(0,212,255,0.15),transparent 50%),radial-gradient(circle at 80% 70%,rgba(99,102,241,0.12),transparent 50%);
  pointer-events:none;
}
.founder-photo-wrap{
  position:relative;
  width:340px;height:340px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--neon),var(--accent-2));
  padding:5px;
  box-shadow:0 0 60px rgba(0,212,255,0.5),0 0 120px rgba(0,212,255,0.2);
  animation:photo-glow 4s ease-in-out infinite;
}
@keyframes photo-glow{
  0%,100%{box-shadow:0 0 60px rgba(0,212,255,0.5),0 0 120px rgba(0,212,255,0.2)}
  50%{box-shadow:0 0 80px rgba(0,212,255,0.7),0 0 160px rgba(0,212,255,0.3)}
}
.founder-photo-wrap::before{
  content:"";position:absolute;inset:-15px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--neon),transparent,var(--accent-2),transparent,var(--neon));
  animation:photo-rotate 8s linear infinite;
  z-index:-1;opacity:.4;
}
@keyframes photo-rotate{to{transform:rotate(360deg)}}
.founder-photo{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#000}
.founder-flags{
  position:absolute;bottom:10px;right:10px;
  display:flex;gap:4px;background:rgba(0,0,0,0.7);
  padding:8px 14px;border-radius:30px;
  font-size:1.4rem;backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.2);
}
.founder-info{position:relative;z-index:1}
.founder-badge{
  display:inline-block;padding:6px 14px;
  background:linear-gradient(135deg,var(--neon),var(--accent-2));
  color:#000;border-radius:20px;
  font-size:.7rem;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;margin-bottom:18px;
}
.founder-name{
  font-size:clamp(2rem,4.5vw,3rem);font-weight:900;line-height:1.1;
  margin-bottom:6px;
  background:linear-gradient(135deg,#fff,var(--neon));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.founder-title{font-size:1.15rem;color:var(--neon);font-weight:700;margin-bottom:8px}
.founder-location{font-size:.95rem;color:var(--text-soft);margin-bottom:24px;display:flex;align-items:center;gap:8px}
.founder-quote{
  position:relative;padding:18px 24px 18px 30px;
  border-left:3px solid var(--neon);
  background:rgba(0,212,255,0.05);
  border-radius:0 16px 16px 0;
  font-style:italic;color:var(--text-soft);
  font-size:1rem;line-height:1.7;margin-bottom:20px;
}
.founder-quote::before{
  content:"\201C";position:absolute;top:-10px;left:8px;
  font-size:3rem;color:var(--neon);font-family:Georgia,serif;
  line-height:1;opacity:.7;
}

/* Founder stats row */
.founder-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.founder-stat{
  text-align:center;padding:14px 8px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  border-radius:14px;
  transition:transform .3s,border-color .3s;
}
.founder-stat:hover{transform:translateY(-4px);border-color:var(--neon)}
.founder-stat-num{font-size:1.5rem;font-weight:900;color:var(--neon);line-height:1}
.founder-stat-label{font-size:.7rem;color:var(--text-soft);text-transform:uppercase;letter-spacing:1px;margin-top:4px;display:block}

/* Founder content grid */
.founder-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:40px}
.founder-card{
  padding:28px;border-radius:20px;
  background:rgba(255,255,255,0.025);
  border:1px solid var(--border);
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.founder-card:hover{transform:translateY(-4px);border-color:rgba(0,212,255,0.4);box-shadow:0 20px 50px rgba(0,0,0,0.3)}
.founder-card-title{
  display:flex;align-items:center;gap:10px;
  font-size:1.1rem;font-weight:800;margin-bottom:18px;
  color:var(--neon);text-transform:uppercase;letter-spacing:1.5px;
}
.founder-card-title::before{
  content:"";width:24px;height:2px;background:var(--neon);border-radius:2px;
}

/* Timeline */
.timeline-item{
  position:relative;padding:0 0 22px 28px;
  border-left:2px solid rgba(0,212,255,0.2);
}
.timeline-item:last-child{padding-bottom:0;border-left:2px solid transparent}
.timeline-item::before{
  content:"";position:absolute;left:-8px;top:0;
  width:14px;height:14px;border-radius:50%;
  background:var(--neon);box-shadow:0 0 12px rgba(0,212,255,0.6);
}
.timeline-year{font-size:.75rem;color:var(--neon);font-weight:800;letter-spacing:1px}
.timeline-title{font-size:1rem;font-weight:700;margin:3px 0 4px}
.timeline-place{font-size:.82rem;color:var(--text-soft)}

/* Skills grid */
.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.skill-chip{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:12px;
  background:rgba(0,212,255,0.06);
  border:1px solid rgba(0,212,255,0.2);
  font-size:.82rem;font-weight:600;
  transition:all .25s;
}
.skill-chip:hover{background:rgba(0,212,255,0.12);border-color:var(--neon);transform:translateX(4px)}
.skill-chip svg{width:16px;height:16px;color:var(--neon);flex-shrink:0}

/* Recognition card */
.recognition-card{
  display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:center;
  padding:40px;border-radius:24px;margin-bottom:40px;
  background:linear-gradient(135deg,rgba(217,180,74,0.08),rgba(0,212,255,0.05));
  border:1px solid rgba(217,180,74,0.3);
  position:relative;overflow:hidden;
}
.recognition-card::before{
  content:"\1F3C6";position:absolute;top:-30px;right:-30px;
  font-size:14rem;opacity:.05;transform:rotate(-15deg);
}
.recognition-photo{
  width:100%;border-radius:16px;
  box-shadow:0 25px 60px rgba(0,0,0,0.5);
  border:2px solid rgba(217,180,74,0.4);
  filter:contrast(1.05) saturate(1.1);
  transition:transform .4s;
}
.recognition-photo:hover{transform:scale(1.02)}
.recognition-info .founder-badge{
  background:linear-gradient(135deg,#d9b44a,#f4d35e);
  color:#1a1a1a;
}
.recognition-title{font-size:1.6rem;font-weight:900;margin:14px 0 10px;line-height:1.2}
.recognition-text{color:var(--text-soft);font-size:.95rem;line-height:1.7;margin-bottom:18px}
.recognition-citation{
  padding:14px 18px;border-radius:12px;
  background:rgba(217,180,74,0.08);
  border-left:3px solid #d9b44a;
  font-size:.85rem;font-style:italic;color:var(--text);
}

/* Mission card */
.mission-card{
  padding:50px;border-radius:24px;text-align:center;
  background:radial-gradient(ellipse at center,rgba(0,212,255,0.1),transparent 70%),rgba(255,255,255,0.02);
  border:1px solid rgba(0,212,255,0.2);
  margin-bottom:40px;position:relative;overflow:hidden;
}
.mission-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 0%,rgba(0,212,255,0.04) 50%,transparent 100%);
  animation:mission-shimmer 6s ease-in-out infinite;
}
@keyframes mission-shimmer{0%,100%{opacity:.3}50%{opacity:1}}
.mission-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:70px;height:70px;border-radius:50%;
  background:linear-gradient(135deg,var(--neon),var(--accent-2));
  margin-bottom:20px;
  box-shadow:0 0 40px rgba(0,212,255,0.4);
  position:relative;z-index:1;
}
.mission-icon svg{width:36px;height:36px;color:#000}
.mission-title{font-size:1.8rem;font-weight:900;margin-bottom:18px;position:relative;z-index:1}
.mission-text{
  max-width:780px;margin:0 auto;
  font-size:1.05rem;line-height:1.8;color:var(--text-soft);
  position:relative;z-index:1;
}
.mission-text strong{color:var(--neon);font-weight:700}

/* Coming Soon Office */
.office-soon{
  display:flex;align-items:center;gap:20px;
  padding:24px 30px;border-radius:18px;
  background:linear-gradient(135deg,rgba(34,197,94,0.1),rgba(0,212,255,0.05));
  border:1px solid rgba(34,197,94,0.3);
  margin-bottom:40px;
}
.office-soon-pulse{
  width:14px;height:14px;border-radius:50%;
  background:#22c55e;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(34,197,94,0.7);
  animation:pulse-green 2s infinite;
}
@keyframes pulse-green{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,0.7)}
  70%{box-shadow:0 0 0 20px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
.office-soon-text strong{display:block;color:#22c55e;font-weight:800;letter-spacing:1px;font-size:.75rem;text-transform:uppercase;margin-bottom:4px}
.office-soon-text p{color:var(--text);font-size:1rem;line-height:1.5}

/* Social Grid */
.founder-social{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.founder-social-link{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:22px 14px;border-radius:18px;
  background:rgba(255,255,255,0.025);
  border:1px solid var(--border);
  text-decoration:none;color:var(--text);
  transition:all .3s;
  position:relative;overflow:hidden;
}
.founder-social-link::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,var(--social-color,#00d4ff),transparent);
  opacity:0;transition:opacity .3s;
}
.founder-social-link:hover{transform:translateY(-6px);border-color:var(--social-color,#00d4ff);box-shadow:0 15px 40px rgba(0,0,0,0.3)}
.founder-social-link:hover::before{opacity:.15}
.founder-social-link svg{width:32px;height:32px;color:var(--social-color,#00d4ff);position:relative;z-index:1}
.founder-social-link span{font-size:.8rem;font-weight:600;position:relative;z-index:1}
.founder-social-link small{font-size:.7rem;color:var(--text-soft);position:relative;z-index:1}

/* Responsive */
@media (max-width:980px){
  .founder-hero{grid-template-columns:1fr;text-align:center;padding:30px}
  .founder-photo-wrap{margin:0 auto;width:260px;height:260px}
  .founder-quote{text-align:left}
  .founder-grid{grid-template-columns:1fr}
  .recognition-card{grid-template-columns:1fr;padding:24px}
  .founder-social{grid-template-columns:repeat(2,1fr)}
  .founder-stats{grid-template-columns:repeat(2,1fr)}
  .skills-grid{grid-template-columns:1fr}
  .mission-card{padding:30px 20px}
}

/* ---- COURSE CARDS ---- */
.tab-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:36px}
.tab-btn{
  padding:8px 18px;border-radius:100px;
  font-size:.78rem;font-weight:600;letter-spacing:.5px;
  background:transparent;color:var(--text-soft);
  border:1px solid var(--border-strong);transition:all .3s;
}
.tab-btn.active{background:linear-gradient(135deg,#0099cc,#00d4ff);color:#020817;border-color:transparent;box-shadow:0 4px 15px rgba(0,212,255,0.3)}
.tab-btn:hover:not(.active){border-color:var(--neon);color:var(--neon)}

.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.course-card{
  border-radius:16px;overflow:hidden;
  background:rgba(10,22,40,0.6);backdrop-filter:blur(8px);
  border:1px solid var(--border);
  transition:transform .3s,box-shadow .3s;
}
[data-theme="light"] .course-card{background:rgba(255,255,255,0.7)}
.course-card:hover{transform:translateY(-5px);box-shadow:0 14px 36px rgba(0,212,255,0.18)}
.course-thumb{
  height:170px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#0a1628,#1e3a8a);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
}
.course-thumb-ic{font-size:3rem;opacity:0.8}
.course-thumb-label{font-size:.7rem;letter-spacing:2px;font-weight:700}
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:100px;font-size:.65rem;font-weight:700;letter-spacing:.5px}
.b-beginner{background:rgba(34,197,94,0.15);color:#22c55e;border:1px solid rgba(34,197,94,0.3)}
.b-intermediate{background:rgba(234,179,8,0.15);color:#eab308;border:1px solid rgba(234,179,8,0.3)}
.b-advanced{background:rgba(239,68,68,0.15);color:#ef4444;border:1px solid rgba(239,68,68,0.3)}
.thumb-badge{position:absolute;top:10px;left:10px}
.thumb-time{position:absolute;top:10px;right:10px;background:rgba(0,0,0,0.6);padding:3px 9px;border-radius:100px;font-size:.7rem;color:#cbd5e1}
.course-body{padding:18px}
.course-body h3{font-size:.98rem;font-weight:700;margin-bottom:8px}
.course-body p{color:var(--text-soft);font-size:.82rem;line-height:1.55;margin-bottom:14px}
.progress-row{margin-bottom:14px}
.progress-meta{display:flex;justify-content:space-between;font-size:.72rem;color:var(--text-soft);margin-bottom:4px}
.progress-track{height:5px;background:rgba(255,255,255,0.08);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--neon),var(--accent-light));border-radius:3px}

/* ---- PDF CARDS ---- */
.filter-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:28px}
.search-wrap{position:relative;flex:1;min-width:220px}
.search-input{
  width:100%;padding:11px 14px 11px 38px;border-radius:10px;
  background:rgba(0,212,255,0.05);border:1px solid var(--border-strong);
  color:var(--text);font-size:.88rem;outline:none;transition:all .3s;
}
.search-input:focus{border-color:var(--neon);box-shadow:0 0 0 3px rgba(0,212,255,0.1)}
.search-input::placeholder{color:var(--text-muted)}
.search-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:.85rem;pointer-events:none}

.pdf-card{
  border-radius:14px;padding:18px;
  background:rgba(10,22,40,0.6);backdrop-filter:blur(8px);
  border:1px solid var(--border);
  transition:transform .3s,box-shadow .3s;
}
[data-theme="light"] .pdf-card{background:rgba(255,255,255,0.7)}
.pdf-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,212,255,0.15)}
.pdf-head{display:flex;gap:12px;margin-bottom:14px}
.pdf-icon-box{
  width:46px;height:56px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,#0099cc,#00d4ff);
  display:flex;align-items:center;justify-content:center;
  color:white;font-size:1.1rem;box-shadow:0 4px 15px rgba(0,212,255,0.3);
}
.pdf-info{flex:1;min-width:0}
.pdf-info-row{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;margin-bottom:6px}
.pdf-info-row h4{font-size:.88rem;font-weight:700;line-height:1.3}
.pdf-info p{color:var(--text-soft);font-size:.76rem;margin-bottom:8px;line-height:1.4}
.pdf-meta{display:flex;flex-wrap:wrap;gap:9px;font-size:.7rem;color:var(--text-muted)}
.pdf-meta span{display:inline-flex;align-items:center;gap:3px}
.pdf-actions{display:flex;gap:8px}
.pdf-actions .btn{flex:1;padding:9px;font-size:.78rem}
.pdf-actions .btn-outline{flex:0 0 auto;padding:9px 13px}
.label-free{background:rgba(34,197,94,0.15);color:#22c55e;border:1px solid rgba(34,197,94,0.3)}
.label-premium{background:rgba(234,179,8,0.15);color:#eab308;border:1px solid rgba(234,179,8,0.3)}

/* ---- YOUTUBE ---- */
.yt-card{
  border-radius:14px;overflow:hidden;cursor:pointer;
  background:rgba(10,22,40,0.6);border:1px solid var(--border);
  transition:transform .3s,box-shadow .3s;
}
[data-theme="light"] .yt-card{background:rgba(255,255,255,0.7)}
.yt-card:hover{transform:scale(1.03);box-shadow:0 12px 30px rgba(255,0,0,0.2)}
.yt-thumb{height:170px;position:relative;display:flex;align-items:center;justify-content:center}
.yt-play-btn{width:54px;height:54px;background:rgba(255,0,0,0.95);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:1.2rem;z-index:2;transition:transform .2s;box-shadow:0 4px 15px rgba(255,0,0,0.4)}
.yt-card:hover .yt-play-btn{transform:scale(1.15)}
.yt-thumb-ic{position:absolute;font-size:2.5rem;opacity:0.5}
.yt-duration{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,0.85);padding:3px 8px;border-radius:4px;font-size:.7rem;color:white;font-weight:600}
.yt-body{padding:14px}
.yt-body h4{font-size:.9rem;font-weight:700;margin-bottom:6px;line-height:1.3}
.yt-meta{display:flex;gap:12px;color:var(--text-soft);font-size:.72rem}

.yt-cta{
  border-radius:20px;padding:36px;text-align:center;margin-top:32px;
  background:rgba(255,0,0,0.04);
  border:1px solid rgba(255,0,0,0.2);backdrop-filter:blur(8px);
}
.yt-cta-ic{font-size:3rem;color:#ff4444;margin-bottom:12px;display:inline-block}
.yt-cta h3{font-size:1.2rem;margin-bottom:8px}
.yt-cta p{color:var(--text-soft);max-width:420px;margin:0 auto 22px}

/* ---- SOCIAL CARDS ---- */
.social-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
.social-card{
  border-radius:16px;padding:24px;text-align:center;
  background:rgba(10,22,40,0.6);backdrop-filter:blur(8px);
  border:1px solid var(--border);transition:all .3s;cursor:pointer;
}
[data-theme="light"] .social-card{background:rgba(255,255,255,0.7)}
.social-card:hover{transform:translateY(-6px)}
.social-card .ic{font-size:2.3rem;margin-bottom:10px;display:block}
.social-card .count{font-size:1.05rem;font-weight:900;margin-bottom:3px}
.social-card .name{font-weight:700;margin-bottom:3px;font-size:.92rem}
.social-card .desc{color:var(--text-soft);font-size:.76rem;margin-bottom:14px}
.social-yt:hover{box-shadow:0 14px 36px rgba(255,0,0,0.2);border-color:#ff4444}
.social-tg:hover{box-shadow:0 14px 36px rgba(0,136,204,0.2);border-color:#0088cc}
.social-fb:hover{box-shadow:0 14px 36px rgba(24,119,242,0.2);border-color:#1877f2}
.social-ig:hover{box-shadow:0 14px 36px rgba(225,48,108,0.2);border-color:#e1306c}
.social-tt:hover{box-shadow:0 14px 36px rgba(255,255,255,0.1);border-color:#ffffff}
.social-li:hover{box-shadow:0 14px 36px rgba(0,119,181,0.2);border-color:#0077b5}

/* ---- BLOG ---- */
.blog-featured{
  border-radius:20px;overflow:hidden;margin-bottom:30px;
  background:rgba(10,22,40,0.6);backdrop-filter:blur(8px);
  border:1px solid var(--border);
  display:grid;grid-template-columns:1fr;
}
[data-theme="light"] .blog-featured{background:rgba(255,255,255,0.7)}
@media(min-width:1024px){.blog-featured{grid-template-columns:1fr 1fr}}
.blog-feat-visual{min-height:260px;background:linear-gradient(135deg,#001433,#003366,#0066cc);display:flex;align-items:center;justify-content:center;position:relative}
.blog-feat-visual .ic{font-size:5rem;opacity:0.4}
.feat-pill{position:absolute;top:14px;left:14px;background:linear-gradient(135deg,#0099cc,#00d4ff);padding:4px 12px;border-radius:100px;font-size:.65rem;font-weight:900;color:#020817;letter-spacing:1px}
.blog-feat-body{padding:28px}
.blog-meta-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px;align-items:center}
.cat-pill{padding:4px 11px;background:rgba(0,212,255,0.1);border:1px solid var(--border-strong);border-radius:100px;font-size:.7rem;color:var(--neon);font-weight:600}
.blog-meta-row .date{color:var(--text-soft);font-size:.76rem}
.blog-feat-body h3{font-size:1.2rem;margin-bottom:12px;line-height:1.4}
.blog-feat-body p{color:var(--text-soft);line-height:1.7;margin-bottom:18px;font-size:.92rem}
.blog-stats{display:flex;gap:16px;font-size:.74rem;color:var(--text-muted);margin-bottom:18px}

.blog-card{
  border-radius:16px;overflow:hidden;
  background:rgba(10,22,40,0.6);border:1px solid var(--border);
  transition:transform .3s,box-shadow .3s;
}
[data-theme="light"] .blog-card{background:rgba(255,255,255,0.7)}
.blog-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(0,212,255,0.15)}
.blog-thumb{height:170px;position:relative;display:flex;align-items:center;justify-content:center}
.blog-thumb .ic{font-size:2.7rem;opacity:0.5}
.blog-body{padding:18px}
.blog-body h4{font-size:.93rem;font-weight:700;margin-bottom:8px;line-height:1.35}
.blog-body p{color:var(--text-soft);font-size:.8rem;line-height:1.55;margin-bottom:14px}
.blog-foot{display:flex;justify-content:space-between;align-items:center}
.blog-foot .read-time{color:var(--text-muted);font-size:.72rem}

/* ---- TESTIMONIALS ---- */
.testimonial-window{overflow:hidden;position:relative}
.testimonial-track{display:flex;transition:transform .5s cubic-bezier(0.4,0,0.2,1)}
.testimonial-slide{flex:0 0 100%;padding:0 8px}
@media(min-width:768px){.testimonial-slide{flex:0 0 50%}}
@media(min-width:1024px){.testimonial-slide{flex:0 0 33.333%}}
.t-card{
  border-radius:16px;padding:22px;height:100%;
  background:rgba(10,22,40,0.6);backdrop-filter:blur(8px);
  border:1px solid var(--border);
}
[data-theme="light"] .t-card{background:rgba(255,255,255,0.7)}
.t-stars{display:flex;gap:3px;margin-bottom:12px;color:#eab308;font-size:.85rem}
.t-quote{color:var(--text-soft);font-size:.86rem;line-height:1.7;margin-bottom:16px;font-style:italic}
.t-author{display:flex;align-items:center;gap:11px}
.t-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.85rem;color:white}
.t-name{font-weight:700;font-size:.88rem}
.t-role{color:var(--text-soft);font-size:.74rem}
.t-controls{display:flex;justify-content:center;gap:10px;margin-top:24px;align-items:center}
.t-dots{display:flex;gap:6px}
.t-dot{width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,0.2);cursor:pointer;transition:all .3s}
.t-dot.active{width:24px;background:var(--neon)}

/* ---- FAQ ---- */
.faq-wrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-item{
  border-radius:12px;overflow:hidden;
  background:rgba(10,22,40,0.4);border:1px solid var(--border);
}
[data-theme="light"] .faq-item{background:rgba(255,255,255,0.6)}
.faq-q{
  width:100%;padding:18px 20px;
  display:flex;justify-content:space-between;align-items:center;text-align:left;
  font-weight:700;font-size:.92rem;
}
.faq-icon{font-size:1.1rem;color:var(--neon);transition:transform .3s}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s;padding:0 20px}
.faq-a.open{padding:0 20px 18px;max-height:400px}
.faq-a p{color:var(--text-soft);line-height:1.75;font-size:.88rem}

/* ---- CONTACT ---- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:1024px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-item{
  padding:14px 18px;border-radius:12px;display:flex;align-items:center;gap:13px;margin-bottom:12px;
  background:rgba(10,22,40,0.5);border:1px solid var(--border);
}
[data-theme="light"] .contact-item{background:rgba(255,255,255,0.7)}
.contact-ic{
  width:42px;height:42px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
}
.contact-item .label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}
.contact-item .value{font-weight:600;font-size:.88rem}
.map-box{border-radius:14px;overflow:hidden;height:190px;background:linear-gradient(135deg,#0a1628,#1e3a8a);display:flex;align-items:center;justify-content:center;border:1px solid var(--border-strong);text-align:center;color:var(--text-soft)}
.map-box .ic{font-size:2rem;color:var(--neon);margin-bottom:6px;display:block}

.form-box{padding:30px;border-radius:18px;background:rgba(10,22,40,0.5);backdrop-filter:blur(12px);border:1px solid var(--border)}
[data-theme="light"] .form-box{background:rgba(255,255,255,0.8)}
.form-box h3{font-size:1rem;color:var(--neon);margin-bottom:20px;letter-spacing:1px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:.72rem;color:var(--text-soft);margin-bottom:5px;letter-spacing:.5px;font-weight:600}
.form-input{
  width:100%;padding:11px 14px;border-radius:10px;
  background:rgba(0,212,255,0.05);border:1px solid var(--border-strong);
  color:var(--text);font-size:.88rem;outline:none;transition:all .3s;
}
.form-input:focus{border-color:var(--neon);box-shadow:0 0 0 3px rgba(0,212,255,0.1)}
.form-input::placeholder{color:var(--text-muted)}
textarea.form-input{resize:vertical;min-height:110px}

/* ---- FOOTER ---- */
footer{background:rgba(2,8,23,0.98);border-top:1px solid var(--border);padding-top:56px}
[data-theme="light"] footer{background:rgba(240,244,248,0.98)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px;padding-bottom:36px;border-bottom:1px solid var(--border)}
.foot-col h4{font-size:.78rem;font-weight:900;color:var(--neon);letter-spacing:2px;margin-bottom:18px}
.foot-col ul li{margin-bottom:9px}
.foot-col ul li a, .foot-col ul li span{color:var(--text-soft);font-size:.82rem;transition:color .2s}
.foot-col ul li a:hover{color:var(--neon)}
.foot-social{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.foot-social-btn{
  width:38px;height:38px;border-radius:10px;
  background:rgba(0,212,255,0.05);border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-soft);font-size:1rem;transition:all .3s;
}
.foot-social-btn:hover{transform:translateY(-3px);color:var(--neon);border-color:var(--neon)}
.foot-bottom{padding:20px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.foot-bottom p, .foot-bottom a{color:var(--text-muted);font-size:.76rem}
.foot-bottom a:hover{color:var(--neon)}
.foot-bottom .links{display:flex;gap:18px}

/* ---- FLOATING UI ---- */
#notification{
  position:fixed;top:80px;right:16px;z-index:1500;
  padding:14px 18px;border-radius:12px;
  background:rgba(10,22,40,0.95);backdrop-filter:blur(12px);
  border:1px solid var(--border-strong);border-left:4px solid var(--neon);
  display:flex;align-items:center;gap:11px;
  min-width:260px;max-width:340px;
  transform:translateX(120%);transition:transform .4s;
}
#notification.show{transform:translateX(0)}
#notification .ic{color:#22c55e;font-size:1.1rem}
#notification .ti{font-weight:700;font-size:.88rem;line-height:1.3}
#notification .msg{color:var(--text-soft);font-size:.78rem;margin-top:2px}
#notification .close{margin-left:auto;color:var(--text-soft);font-size:.95rem}

#newsletter-popup{
  position:fixed;bottom:20px;right:20px;z-index:1500;
  padding:24px;border-radius:16px;max-width:300px;
  background:rgba(10,22,40,0.95);backdrop-filter:blur(16px);
  border:1px solid var(--border-strong);
  transform:translateY(150%);transition:transform .5s;
}
#newsletter-popup.show{transform:translateY(0)}
#newsletter-popup .close{position:absolute;top:10px;right:14px;color:var(--text-soft);font-size:1rem}
#newsletter-popup h3{font-size:1rem;color:var(--neon);margin:6px 0 6px;letter-spacing:1px}
#newsletter-popup p{color:var(--text-soft);font-size:.78rem;margin-bottom:14px;line-height:1.5}

#back-to-top{
  position:fixed;bottom:24px;left:20px;z-index:1000;
  width:46px;height:46px;border-radius:12px;
  background:linear-gradient(135deg,#0099cc,#00d4ff);
  color:#020817;font-size:1.05rem;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:all .3s;
  box-shadow:0 4px 20px rgba(0,212,255,0.4);
}
#back-to-top.visible{opacity:1;visibility:visible}
#back-to-top:hover{transform:translateY(-3px)}

/* ---- MODAL ---- */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:2000;
  display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;visibility:hidden;transition:all .3s;
}
.modal.show{opacity:1;visibility:visible}
.modal-box{
  border-radius:20px;max-width:520px;width:100%;padding:28px;
  background:rgba(10,22,40,0.98);backdrop-filter:blur(20px);
  border:1px solid var(--border-strong);
  transform:scale(0.9);transition:transform .3s;
  max-height:90vh;overflow-y:auto;
}
.modal.show .modal-box{transform:scale(1)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.modal-head h3{font-size:1.05rem;color:var(--neon)}
.modal-preview{height:240px;background:linear-gradient(135deg,#0a1628,#1e3a8a);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;margin-bottom:20px}
.modal-preview .ic{font-size:3.5rem;color:var(--neon)}
.modal-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.modal-meta-item{padding:11px;border-radius:10px;background:rgba(0,212,255,0.05);border:1px solid var(--border);text-align:center}
.modal-meta-item .l{font-size:.7rem;color:var(--text-soft);margin-bottom:3px}
.modal-meta-item .v{font-weight:700;font-size:.92rem}

/* ---- REVEAL ANIMATIONS ---- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s,transform .7s}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-l{opacity:0;transform:translateX(-40px);transition:opacity .7s,transform .7s}
.reveal-l.visible{opacity:1;transform:translateX(0)}
.reveal-r{opacity:0;transform:translateX(40px);transition:opacity .7s,transform .7s}
.reveal-r.visible{opacity:1;transform:translateX(0)}

/* ---- UTILS ---- */
.text-center{text-align:center}
.hidden{display:none!important}
.flex{display:flex}
.gap-2{gap:8px}
.mb-3{margin-bottom:12px}
.mt-4{margin-top:16px}
@media(max-width:640px){
  .hide-mobile{display:none}
  .form-row{grid-template-columns:1fr}
  .spec-row{grid-template-columns:1fr}
}

/* ============================================================
   i18n — Language switcher
   ============================================================ */
.lang-switcher{
  display:inline-flex;
  align-items:center;
  gap:2px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border-strong,rgba(255,255,255,0.1));
  border-radius:999px;
  padding:3px;
  margin-right:6px;
}
.lang-switcher .lang-btn{
  background:transparent;
  border:0;
  color:var(--text-soft,#94a3b8);
  font-size:.78rem;
  font-weight:600;
  padding:5px 10px;
  border-radius:999px;
  cursor:pointer;
  transition:all .2s ease;
  font-family:inherit;
  line-height:1;
  white-space:nowrap;
}
.lang-switcher .lang-btn:hover{
  color:var(--text,#e2e8f0);
  background:rgba(255,255,255,0.06);
}
.lang-switcher .lang-btn.is-active{
  background:var(--neon,#00d4ff);
  color:#020817;
}
/* Ge'ez-script labels get the right font */
.lang-switcher .lang-btn[data-lang-btn="ti"],
.lang-switcher .lang-btn[data-lang-btn="am"]{
  font-family:'Noto Sans Ethiopic','Segoe UI',system-ui,sans-serif;
  font-size:.85rem;
}
/* When TI/AM is active, the whole body uses Noto Sans Ethiopic for Ge'ez chars */
html[lang="ti"],
html[lang="am"]{
  font-feature-settings:"kern" 1;
}
html[lang="ti"] body,
html[lang="am"] body{
  font-family:'Noto Sans Ethiopic','Segoe UI',system-ui,-apple-system,sans-serif;
}
/* Mobile: switcher in mobile menu */
#mobile-menu .lang-switcher{
  margin:14px 0 4px;
  width:100%;
  justify-content:space-between;
}
#mobile-menu .lang-switcher .lang-btn{
  flex:1;
  text-align:center;
  padding:8px 6px;
  font-size:.85rem;
}
@media(max-width:880px){
  header .lang-switcher{display:none}
}
/* Draft notice banner for incomplete translations */
#i18n-draft-notice{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:78px;
  z-index:998;
  background:linear-gradient(135deg,rgba(251,191,36,0.95),rgba(217,119,6,0.95));
  color:#0c0a0a;
  font-size:.82rem;
  font-weight:600;
  padding:8px 16px;
  border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,0.3);
  max-width:92vw;
  text-align:center;
  font-family:'Noto Sans Ethiopic','Segoe UI',system-ui,sans-serif;
}
#i18n-draft-notice[hidden]{display:none}


/* Nav active state (multi-page) */
.nav-link.active { color: var(--neon) !important; }
.nav-link.active::after { width: 100%; }

/* Modal overlay (pages) */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:8000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s }
.modal-overlay.show { opacity:1;pointer-events:auto }
.modal-box { background:var(--bg-card);border:1px solid var(--border-strong);border-radius:20px;padding:32px;max-width:520px;width:100%;box-shadow:0 20px 80px rgba(0,0,0,.5) }
.modal-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px }
.modal-header h3 { font-size:1.1rem;font-weight:700 }
.modal-meta-item { background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px }
.modal-meta-item .l { font-size:.72rem;color:var(--text-muted);margin-bottom:4px }
.modal-meta-item .v { font-size:.9rem;font-weight:700 }

/* Notification bar (pages) - supplement */
.notif-bar { position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--bg-card);border:1px solid var(--border-strong);border-radius:12px;padding:14px 20px;display:flex;align-items:center;gap:12px;z-index:9000;box-shadow:0 8px 40px rgba(0,0,0,.4);transition:transform .4s cubic-bezier(.175,.885,.32,1.275);max-width:90vw;min-width:280px }
.notif-bar.show { transform:translateX(-50%) translateY(0) }
.notif-title { display:block;font-size:.88rem;font-weight:700;margin-bottom:2px }
.notif-msg { display:block;font-size:.78rem;color:var(--text-muted) }