/* Aalimex Softcode - shared styles (all pages) */
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { font-family: 'Poppins', system-ui, sans-serif; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #facc15; outline-offset: 2px; }

.hero { background: linear-gradient(135deg, #020617, #172554, #312e81); }
.hero-card { backdrop-filter: blur(18px); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); }
.slide-up { animation: slideUp .9s ease both; }
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.float { animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-12px); } }
.glow { animation: glow 3s infinite; }
@keyframes glow { 0%,100% { box-shadow: 0 0 20px rgba(59,130,246,.3); } 50% { box-shadow: 0 0 40px rgba(59,130,246,.65); } }

/* Desktop: every main section fills one screen (header = 64px) */
@media (min-width: 1024px) {
  .screen { min-height: calc(100vh - 64px); display: flex; flex-direction: column; justify-content: center; }
  .screen-hero { min-height: calc(100vh - 100px); display: flex; flex-direction: column; justify-content: center; }
}

/* Animated backgrounds */
.bg-grid {
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 48px 48px; animation: gridMove 22s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%); mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
}
@keyframes gridMove { to { background-position: 48px 48px; } }
.bg-dots { background-image: radial-gradient(rgba(37,99,235,.13) 1.5px, transparent 1.5px); background-size: 24px 24px; }
.blob { position: absolute; border-radius: 9999px; filter: blur(80px); opacity: .32; pointer-events: none; animation: drift 16s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(60px, -40px) scale(1.15); } }
.glyph { position: absolute; font-family: ui-monospace, monospace; font-weight: 700; color: #93c5fd; opacity: .16; pointer-events: none; user-select: none; animation: bob 9s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-24px) rotate(6deg); } }
.shine { background-size: 200% auto; animation: shine 6s linear infinite; }
@keyframes shine { to { background-position: 200% center; } }

/* Logo marquee */
.marquee { display: flex; width: max-content; animation: marquee 35s linear infinite; }
.marquee:hover { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Courses dropdown (desktop) */
.dd-panel { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s, transform .18s, visibility .18s; }
.dd:hover .dd-panel, .dd:focus-within .dd-panel, .dd.open .dd-panel { opacity: 1; visibility: visible; transform: none; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
details summary::-webkit-details-marker { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- added: logo rows, floating tech logos, zigzag, quotes ---- */
.marquee-rev { animation-direction: reverse; }
.tech-float { position: absolute; width: 54px; height: 54px; opacity: .13; pointer-events: none; animation: techFloat 12s ease-in-out infinite; }
.tech-dark .tech-float { opacity: .2; }
@keyframes techFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-30px) rotate(12deg); } }
.quote-float { position: absolute; font-family: Georgia, serif; font-size: 11rem; line-height: 1; color: #6366f1; opacity: .08; pointer-events: none; animation: bob 10s ease-in-out infinite; }
.ring-pulse { animation: ringPulse 2.4s ease-out infinite; }
@keyframes ringPulse { 0% { box-shadow: 0 0 0 0 rgba(99,102,241,.5); } 100% { box-shadow: 0 0 0 14px rgba(99,102,241,0); } }
.zz-dot-l { right: calc(-2.5rem - 10px); }
.zz-dot-r { left: calc(-2.5rem - 10px); }
@media (min-width: 768px) { .zz-right { transform: translateY(3.25rem); } }

/* ---- "Why Students Join Us?" orbit (home hero) ---- */
.orbit-host { container-type: inline-size; }
.orbit-wrap { --W: min(460px, 88vw); --R: calc(var(--W) * .355); --S: calc(var(--W) * .24); position: relative; width: var(--W); height: var(--W); margin: 0 auto 1.5rem; }
@supports (width: 1cqw) { .orbit-wrap { --W: min(460px, 100cqw); } }
.orbit-ring { position: absolute; border-radius: 9999px; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.orbit-ring.r1 { width: calc(var(--R) * 2); height: calc(var(--R) * 2); border: 2px dashed rgba(255,255,255,.28); animation: orbitSpin 60s linear infinite; }
.orbit-ring.r2 { width: calc(var(--W) * .5); height: calc(var(--W) * .5); border: 2px dotted rgba(250,204,21,.45); animation: orbitSpin 30s linear infinite reverse; }
.orbit-ring.r3 { width: calc(var(--W) * .98); height: calc(var(--W) * .98); border: 1px solid rgba(147,197,253,.15); }
.orbit-spark { position: absolute; left: 50%; top: 50%; width: calc(var(--R) * 2); height: calc(var(--R) * 2); margin: calc(var(--R) * -1); animation: orbitSpin 9s linear infinite; pointer-events: none; }
.orbit-spark::before { content: ''; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 9999px; background: #facc15; box-shadow: 0 0 16px 4px rgba(250,204,21,.8); }
.orbit-spark.s2 { animation-duration: 14s; animation-direction: reverse; }
.orbit-spark.s2::before { background: #38bdf8; box-shadow: 0 0 16px 4px rgba(56,189,248,.8); }
.orbit-center { position: absolute; left: 50%; top: 50%; width: calc(var(--W) * .34); height: calc(var(--W) * .34); transform: translate(-50%, -50%); border-radius: 9999px;
  background: radial-gradient(circle at 30% 25%, #3b82f6, #1e3a8a 60%, #172554); border: 4px solid rgba(255,255,255,.85);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; animation: centerPulse 3.2s ease-in-out infinite; z-index: 2; }
@keyframes centerPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(59,130,246,.55), 0 20px 50px rgba(2,6,23,.6); } 50% { box-shadow: 0 0 0 18px rgba(59,130,246,0), 0 20px 50px rgba(2,6,23,.6); } }
.orbit { position: absolute; inset: 0; animation: orbitSpin 40s linear infinite; z-index: 3; }
.orbit-item { position: absolute; left: 50%; top: 50%; width: var(--S); height: var(--S); margin: calc(var(--S) / -2); transform: rotate(var(--a)) translate(var(--R)) rotate(calc(-1 * var(--a))); }
.orbit-card { width: 100%; height: 100%; animation: orbitSpin 40s linear infinite reverse; }
.orbit-pic { width: 100%; height: 100%; border-radius: 9999px; padding: 4px; box-shadow: 0 12px 30px rgba(2,6,23,.45); transition: transform .3s; }
.orbit-pic img { width: 100%; height: 100%; object-fit: cover; border-radius: 9999px; border: 3px solid #fff; background: #fff; }
.orbit-item:hover .orbit-pic { transform: scale(1.12); }
.orbit-label { position: absolute; left: 50%; top: calc(100% - 14px); transform: translateX(-50%); white-space: nowrap; color: #fff; font-weight: 700; line-height: 1.15; text-align: center;
  font-size: clamp(9px, calc(var(--W) * .026), 12px); padding: 5px 11px; border-radius: 9999px; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 8px 18px rgba(2,6,23,.4); }
.orbit-label small { display: block; font-weight: 600; font-size: .85em; opacity: .9; }
.orbit-wrap:hover .orbit, .orbit-wrap:hover .orbit-card, .orbit-wrap:focus-within .orbit, .orbit-wrap:focus-within .orbit-card { animation-play-state: paused; }
@keyframes orbitSpin { to { rotate: 360deg; } }
.orbit-ring.r1, .orbit-ring.r2 { animation-name: orbitSpinC; }
@keyframes orbitSpinC { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* hero orbit: on laptops the size also follows the screen height, so the whole hero fits one screen */
@media (min-width: 1024px) {
  .orbit-wrap { --W: min(440px, 88vw, calc(100vh - 210px)); }
  @supports (width: 1cqw) { .orbit-wrap { --W: min(440px, 100cqw, calc(100vh - 210px)); } }
}
@media (min-width: 1024px) and (max-height: 640px) { .orbit-wrap { --W: 400px; } }

/* ---- animated AI chip (Learn with AI sections) ---- */
.ai-spin, .ai-spin-rev, .ai-pulse, .ai-float { transform-box: view-box; transform-origin: 200px 200px; }
.ai-spin { animation: aiSpin 30s linear infinite; }
.ai-spin-rev { animation: aiSpin 22s linear infinite reverse; }
@keyframes aiSpin { to { transform: rotate(360deg); } }
.ai-pulse { animation: aiPulse 3.5s ease-in-out infinite; }
@keyframes aiPulse { 50% { transform: scale(.92); opacity: .7; } }
.ai-flow { stroke-dasharray: 10 22; animation: aiFlow 1.8s linear infinite; }
@keyframes aiFlow { to { stroke-dashoffset: -64; } }
.ai-blink { animation: aiBlink 2.4s ease-in-out infinite; }
@keyframes aiBlink { 50% { opacity: .25; } }
.ai-float { animation: aiFloat 5s ease-in-out infinite; }
@keyframes aiFloat { 50% { transform: translateY(-8px); } }

/* ---- update 4: one-line top bar and main menu ---- */
.topbar, .topbar * { white-space: nowrap; }
.mainnav a, .mainnav button { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .mainnav { font-size: 14px; }
  .mainnav > a, .mainnav > .dd > button { padding-left: .55rem; padding-right: .55rem; }
}
@media (min-width: 1280px) and (max-width: 1535px) { .topbar { font-size: 12px; } .topbar nav { gap: .5rem; } }

/* ---- update 4: video section, layered cards ---- */
.vstage { position: relative; height: clamp(230px, 34vw, 380px); perspective: 1200px; }
.vcard { position: absolute; left: 50%; top: 50%; width: min(560px, 78%); aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden;
  box-shadow: 0 25px 60px rgba(2,6,23,.45); border: 4px solid #fff; background: #0f172a; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s, box-shadow .3s; }
.vcard img { width: 100%; height: 100%; object-fit: cover; }
.vcard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(2,6,23,.85), rgba(2,6,23,0) 55%); }
.vplay { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 2; width: 64px; height: 64px; border-radius: 9999px; background: #ef4444; color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 0 rgba(239,68,68,.6); animation: vpulse 2s infinite; }
@keyframes vpulse { 70% { box-shadow: 0 0 0 18px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
.vtitle { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 2; color: #fff; font-weight: 700; font-size: clamp(13px, 1.4vw, 17px); line-height: 1.3; }
.vcard:not(.vactive) .vplay { width: 46px; height: 46px; animation: none; }
.vcard.vactive:hover { box-shadow: 0 30px 70px rgba(37,99,235,.55); }

/* ---- update 4: AI-themed background icons (subtle, every home section) ---- */
.ai-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ai-pattern { position: absolute; inset: 0; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='%231d4ed8' stroke-width='1.4'%3E%3Cpath d='M10 40h40l15 15h30M95 55V20h40M20 120h30l20-20h60M130 100v45M60 160v-25l20-15'/%3E%3Ccircle cx='10' cy='40' r='3'/%3E%3Ccircle cx='135' cy='20' r='3'/%3E%3Ccircle cx='20' cy='120' r='3'/%3E%3Ccircle cx='130' cy='145' r='3'/%3E%3Ccircle cx='80' cy='120' r='3'/%3E%3C/svg%3E"); }
.ai-dark .ai-pattern { opacity: .08; filter: invert(1) hue-rotate(180deg) brightness(1.6); }
.ai-icon { position: absolute; color: #1d4ed8; opacity: .07; animation: aiDrift 14s ease-in-out infinite; }
.ai-dark .ai-icon { color: #93c5fd; opacity: .12; }
.ai-icon svg { width: 100%; height: 100%; }
@keyframes aiDrift { 50% { transform: translateY(-18px) rotate(6deg); } }
@media (max-width: 767px) { .ai-icon.hide-sm { display: none; } .ai-icon { transform: scale(.7); } }
section > .max-w-7xl, section > .max-w-6xl, section > .max-w-5xl, section > .max-w-4xl, section > .relative { position: relative; z-index: 1; }

/* ---- update 5: phones and small tablets ---- */
.hero-cta > * { text-align: center; }
@media (max-width: 640px) {
  section h2 { line-height: 1.2; }
  [data-hero-tagline] { gap: .45rem; }
  [data-hero-tagline] > span { font-size: 12px; padding: .4rem .75rem; }
  .hero-cta > * { padding-top: .8rem; padding-bottom: .8rem; }
  .journey-pills { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .journey-pills > button { justify-content: center; padding: .7rem .6rem; font-size: 13px; }
  .marquee > div { width: 8rem; height: 3.5rem; margin-left: .4rem; margin-right: .4rem; }
  #faq details > div { padding-left: 1.25rem; }
  #why .zz-right, .zz-right { transform: none; }
  .fab-stack { right: .75rem; bottom: .75rem; gap: .5rem; }
  .fab-stack > a, .fab-stack > button { width: 2.6rem; height: 2.6rem; }
  .fab-stack > a img, .fab-stack svg { width: 1.25rem; height: 1.25rem; }
  .fab-stack > a:first-child img { width: 100%; height: 100%; }
  .orbit-wrap { --W: min(460px, 84vw); }
  .vstage { height: 210px; }
  .vcard { width: 82%; }
  .vtitle { font-size: 13px; }
}
@media (max-width: 380px) {
  .topbar [data-social] { display: none; }
}

/* ---- update 7: phones - bottom contact bar instead of round floating buttons ---- */
@media (max-width: 639px) {
  body { padding-bottom: 60px; }
  .fab-stack { bottom: 72px; }
  .fab-stack > a { display: none !important; }          /* logo, mail, call, WhatsApp move to the bottom bar */
  .hero-badge { line-height: 1.5; }
  .hero-text { font-size: 14px; }
  #home h1 { font-size: 2rem; line-height: 1.15; }
}