/*
Theme Name:  BY Technology
Theme URI:   https://bytechnology.org
Description: BY Technology — AI & Security Solutions. Child theme of Hello Elementor.
Author:      BY Technology
Author URI:  https://bytechnology.org
Template:    hello-elementor
Version:     1.0.1
*/

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

/* ── CSS VARIABLES ─────────────────────────────────────────── */
:root {
  --navy:     #0D1B2A;
  --navy2:    #1a2744;
  --blue:     #1B4FD8;
  --blue2:    #3B82F6;
  --gold:     #F59E0B;
  --gold2:    #D97706;
  --white:    #FFFFFF;
  --gray:     #94A3B8;
  --gray2:    #F8FAFC;
  --dark:     #0F172A;
  --green:    #10B981;
  --radius:   12px;
  --shadow:   0 4px 24px rgba(0,0,0,0.15);
  --shadow-lg:0 8px 48px rgba(0,0,0,0.25);
  --transition:all 0.3s ease;
}

/* ── BASE ──────────────────────────────────────────────────── */
* { box-sizing: border-box; }
body {
  font-family: 'Inter', sans-serif !important;
  background: #ffffff;
  color: #1e293b;
  line-height: 1.7;
}
h1,h2,h3,h4,h5,h6 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700;
  line-height: 1.2;
}
a { transition: var(--transition); }

/* ── HEADER ────────────────────────────────────────────────── */
.site-header,
header.elementor-section {
  background: var(--navy) !important;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.site-header .site-branding img { height: 50px; }

/* High-contrast header text (WCAG AA on navy #0D1B2A) */
.site-header,
.site-header .header-inner,
.site-header .site-branding {
  color: #ffffff !important;
}
.site-header .site-title,
.site-header .site-title a,
.site-header .site-logo-text,
.site-header a.site-title {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.site-header .site-title a:hover,
.site-header .site-title a:focus {
  color: #93C5FD !important;
}
.site-header .site-description {
  color: #CBD5E1 !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}

/* ── NAVIGATION ────────────────────────────────────────────── */
.site-header .site-navigation a,
.site-header .menu a,
.site-header nav a,
.main-navigation a,
.elementor-nav-menu a {
  color: #E2E8F0 !important;
  font-weight: 500;
  font-size: 15px;
  padding: 8px 16px !important;
  border-radius: 6px;
  transition: var(--transition);
  text-decoration: none !important;
}
.site-header .site-navigation a:hover,
.site-header .site-navigation a:focus,
.site-header .menu a:hover,
.site-header .menu a:focus,
.site-header nav a:hover,
.site-header nav a:focus,
.main-navigation a:hover,
.main-navigation a:focus,
.elementor-nav-menu a:hover,
.elementor-nav-menu a:focus {
  color: #ffffff !important;
  background: rgba(255,255,255,0.12) !important;
}
.site-header .current-menu-item > a,
.site-header .current_page_item > a,
.main-navigation .current-menu-item > a {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Override Hello Elementor default magenta (#c36) links inside header */
.site-header a {
  color: #E2E8F0;
}
.site-header a:hover,
.site-header a:focus {
  color: #ffffff;
}

/* Mobile menu toggle visible on dark header */
.site-header .site-navigation-toggle-holder .site-navigation-toggle,
.site-header .menu-toggle {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.4) !important;
}

/* ── HERO SECTION ──────────────────────────────────────────── */
.bytech-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 60%, #0f2040 100%);
  color: white;
  padding: 120px 0 100px;
  position: relative;
  overflow: hidden;
}
.bytech-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(27,79,216,0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(245,158,11,0.08) 0%, transparent 40%);
  pointer-events: none;
}
.bytech-hero h1 {
  font-size: clamp(36px,5vw,64px);
  font-weight: 900;
  color: white;
  line-height: 1.1;
  margin-bottom: 24px;
}
.bytech-hero p {
  font-size: clamp(16px,2vw,20px);
  color: #94a3b8;
  max-width: 640px;
  line-height: 1.8;
}

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn-primary, .elementor-button.btn-primary {
  background: var(--blue) !important;
  color: white !important;
  padding: 16px 40px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  border: none !important;
  cursor: pointer;
  transition: var(--transition) !important;
  text-decoration: none !important;
  display: inline-block;
}
.btn-primary:hover {
  background: var(--blue2) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(27,79,216,0.4) !important;
  color: white !important;
}
.btn-outline {
  background: transparent !important;
  color: white !important;
  padding: 14px 36px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  transition: var(--transition) !important;
}
.btn-outline:hover {
  border-color: white !important;
  background: rgba(255,255,255,0.1) !important;
}

/* ── STAT CARDS ────────────────────────────────────────────── */
.bytech-stats {
  background: var(--navy);
  padding: 60px 0;
}
.stat-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: 40px 30px;
  text-align: center;
  backdrop-filter: blur(10px);
  transition: var(--transition);
}
.stat-card:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.stat-number {
  font-size: 56px;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  color: #94a3b8;
  font-size: 15px;
  font-weight: 500;
}

/* ── SECTION STYLES ────────────────────────────────────────── */
.section-dark {
  background: var(--navy);
  color: white;
}
.section-dark h2, .section-dark h3 { color: white; }
.section-dark p { color: #94a3b8; }

.section-light { background: #f8fafc; }

.section-title {
  font-size: clamp(28px,4vw,44px);
  font-weight: 800;
  margin-bottom: 16px;
}
.section-subtitle {
  font-size: 18px;
  color: #64748b;
  max-width: 640px;
  margin: 0 auto 60px;
  line-height: 1.7;
}

/* ── PRODUCT CARDS ─────────────────────────────────────────── */
.product-card {
  background: white;
  border-radius: 16px;
  padding: 40px 32px;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1px solid #e2e8f0;
  height: 100%;
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue);
}
.product-icon {
  font-size: 48px;
  margin-bottom: 20px;
  display: block;
}
.product-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--dark);
}
.product-card p { color: #64748b; line-height: 1.7; }

/* ── FEATURE LIST ──────────────────────────────────────────── */
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
.feature-icon {
  width: 48px; height: 48px;
  background: rgba(27,79,216,0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.feature-text h4 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.feature-text p  { font-size: 14px; color: #64748b; margin: 0; }

/* ── CTA SECTION ───────────────────────────────────────────── */
.cta-section {
  background: linear-gradient(135deg, var(--blue) 0%, #1e40af 100%);
  color: white;
  padding: 100px 0;
  text-align: center;
}
.cta-section h2 { color: white; font-size: 40px; margin-bottom: 20px; }
.cta-section p  { color: rgba(255,255,255,0.8); font-size: 18px; margin-bottom: 40px; }

/* ── FOOTER ────────────────────────────────────────────────── */
.site-footer {
  background: var(--dark) !important;
  color: #94a3b8 !important;
  padding: 60px 0 30px !important;
}
.site-footer a { color: #94a3b8 !important; }
.site-footer a:hover { color: white !important; }
.footer-brand { font-size: 20px; font-weight: 700; color: white; margin-bottom: 8px; }

/* ── GOLD ACCENT ───────────────────────────────────────────── */
.gold { color: var(--gold) !important; }
.text-blue { color: var(--blue) !important; }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .bytech-hero { padding: 80px 0 60px; }
  .bytech-hero h1 { font-size: 32px; }
  .stat-number { font-size: 40px; }
  .section-title { font-size: 28px; }
}