/* ==========================================================================
   GLOBAL CONFIGURATIONS & ULTRAPREMIUM VARIABLES
   ========================================================================= */
:root {
  --primary: #00AEEF;
  --primary-rgb: 0, 174, 239;
  --accent: #60EFFF;
  --navy: #0B1020;
  --navy-light: #151C2F;
  --white: #ffffff;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;

  --font-heading: 'Space Grotesk', 'Noto Sans Ethiopic', system-ui, sans-serif;
  --font-sans: 'Inter', 'Noto Sans Ethiopic', system-ui, sans-serif;
}

body {
  font-family: var(--font-sans);
}

h1, h2, h3, .font-heading {
  font-family: var(--font-heading);
}

/* Beautiful Text Gradient */
.text-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Premium Glassmorphism */
.glass-card {
  background: rgba(21, 28, 47, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* DYNAMIC MESH GRADIENT & GRAINY NOISE */
.mesh-container {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: -2;
  background: #0B1020;
  overflow: hidden;
  pointer-events: none;
}
.mesh-ball-1 {
  position: absolute; top: 10%; left: 20%; width: 600px; height: 600px;
  background: rgba(0, 174, 239, 0.12); border-radius: 50%; filter: blur(140px);
  animation: floatMesh 25s infinite alternate ease-in-out;
}
.mesh-ball-2 {
  position: absolute; bottom: 15%; right: 10%; width: 500px; height: 500px;
  background: rgba(96, 239, 255, 0.08); border-radius: 50%; filter: blur(120px);
  animation: floatMesh 20s infinite alternate-reverse ease-in-out;
}
@keyframes floatMesh {
  0% { transform: translate(0px, 0px) scale(1); }
  100% { transform: translate(80px, 50px) scale(1.15); }
}
.grain-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.025; pointer-events: none;
}

/* CUSTOM MAGNETIC CURSOR */
.custom-cursor {
  width: 8px; height: 8px; background: var(--primary); border-radius: 50%;
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s, background 0.3s;
}
.custom-cursor-follower {
  width: 40px; height: 40px; border: 1px solid rgba(0, 174, 239, 0.4); border-radius: 50%;
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%); transition: transform 0.08s cubic-bezier(0.25, 1, 0.5, 1), width 0.3s, height 0.3s, background 0.3s, border 0.3s;
}
body.cursor-hover .custom-cursor { width: 0px; height: 0px; }
body.cursor-hover .custom-cursor-follower {
  width: 70px; height: 70px; background: rgba(0, 174, 239, 0.1); border-color: var(--accent);
}

/* CINEMATIC BRAND PRELOADER */
#preloader {
  position: fixed; inset: 0; background: #0B1020; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform 1s cubic-bezier(0.85, 0, 0.15, 1), opacity 1s ease;
}
.loader-line {
  width: 200px; height: 2px; background: rgba(255,255,255,0.05); position: relative; margin-top: 20px; overflow: hidden; border-radius: 99px;
}
.loader-progress {
  position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width 0.1s linear;
}

/* MOUSE SPOTLIGHT GLOW EFFECT */
.spotlight-card { position: relative; overflow: hidden; }
.spotlight-card::before {
  content: ''; position: absolute; inset: -1px; opacity: 0;
  background: radial-gradient(350px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(0, 174, 239, 0.25), transparent 50%);
  z-index: 0; transition: opacity 0.4s ease; pointer-events: none; border-radius: inherit;
}
.spotlight-card:hover::before { opacity: 1; }
.spotlight-inner { position: relative; z-index: 1; background: rgba(21, 28, 47, 0.45); height: 100%; border-radius: inherit; }

/* COMMAND PALETTE */
#command-palette {
  position: fixed; inset: 0; background: rgba(11, 16, 32, 0.85); backdrop-filter: blur(12px);
  z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px;
}
#command-palette.active { display: flex; }

/* SCROLL-DRIVEN TEXT REVEAL */
.scroll-reveal-text { opacity: 0.15; transition: opacity 0.6s ease, transform 0.6s ease; transform: translateY(10px); }
.scroll-reveal-text.revealed { opacity: 1; transform: translateY(0); }

/* PURE CSS NAVBAR & HAMBURGER */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background-color: rgba(11, 16, 32, 0.75); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
#menu-toggle { display: none; }
.mobile-menu {
  display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%;
  background: rgba(11, 16, 32, 0.98); backdrop-filter: blur(24px); padding: 2rem; gap: 1.25rem;
  transform: translateY(-15px); opacity: 0; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none;
}
body:has(#menu-toggle:checked) .mobile-menu { display: flex; opacity: 1; transform: translateY(0); pointer-events: auto; }
.hamburger-icon line { transition: all 0.3s ease; transform-origin: center; }
body:has(#menu-toggle:checked) .line-1 { transform: translateY(6px) rotate(45deg); }
body:has(#menu-toggle:checked) .line-2 { opacity: 0; transform: scaleX(0); }
body:has(#menu-toggle:checked) .line-3 { transform: translateY(-6px) rotate(-45deg); }

/* NO-JS TABS CONTROL */
.hidden-tab-input { display: none; }
.tab-label { padding: 0.75rem 2rem; border-radius: 9999px; cursor: pointer; color: var(--gray-400); font-weight: 500; font-size: 0.875rem; transition: all 0.3s ease; }
body:has(#tab-web:checked) label[for="tab-web"],
body:has(#tab-bot:checked) label[for="tab-bot"],
body:has(#tab-design:checked) label[for="tab-design"] {
  background-color: var(--primary); color: var(--white); font-weight: 600; box-shadow: 0 4px 20px rgba(0, 174, 239, 0.3);
}
.tab-content { display: none; opacity: 0; transform: translateY(20px); }
body:has(#tab-web:checked) .content-web,
body:has(#tab-bot:checked) .content-bot,
body:has(#tab-design:checked) .content-design { display: grid; animation: tabFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes tabFadeIn { to { opacity: 1; transform: translateY(0); } }

/* INFINITE CSS MARQUEE LOOP */
.marquee-container { overflow: hidden; width: 100%; display: flex; }
.marquee-track { display: flex; white-space: nowrap; width: max-content; animation: infiniteScroll 25s linear infinite; }
.marquee-item { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: rgba(255, 255, 255, 0.12); letter-spacing: 0.15em; padding: 0 2.5rem; }
@keyframes infiniteScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* PREMIUM FAQ ACCORDION */
.faq-item { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 1.25rem; transition: all 0.3s ease; overflow: hidden; }
.faq-item[open] { border-color: rgba(0, 174, 239, 0.3); background: rgba(21, 28, 47, 0.5); }
.faq-item summary { list-style: none; outline: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { transition: transform 0.4s ease; }
.faq-item[open] .faq-icon { transform: rotate(180deg); color: var(--accent); }
.faq-content { padding: 1.5rem; padding-top: 0; color: var(--gray-400); font-size: 0.925rem; line-height: 1.6; border-top: 1px solid rgba(255, 255, 255, 0.04); margin-top: 0.5rem; }

/* FLOATING LABELS CONTACT FORM */
.form-group { position: relative; }
.form-input { width: 100%; background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.85rem; padding: 1.25rem 1rem; color: var(--white); font-size: 0.875rem; outline: none; transition: all 0.3s ease; }
.form-input::placeholder { color: transparent; }
.form-input:focus { border-color: var(--primary); background: rgba(0, 174, 239, 0.01) !important; box-shadow: 0 0 25px rgba(0, 174, 239, 0.15); }
.form-label { position: absolute; left: 1rem; top: 1.25rem; color: var(--gray-400); font-size: 0.875rem; pointer-events: none; transition: all 0.3s ease; }
.form-input:focus ~ .form-label, .form-input:not(:placeholder-shown) ~ .form-label { top: -0.65rem; left: 0.8rem; font-size: 0.75rem; color: var(--primary); background-color: #0B1020; padding: 0 0.4rem; }

/* FORCE AMHARIC FONT WHEN LANGUAGE IS ACTIVE */
body.lang-am {
  --font-sans: 'Noto Sans Ethiopic', system-ui, sans-serif;
  --font-heading: 'Noto Sans Ethiopic', system-ui, sans-serif;
}