/* style.css — futuristic / tech-driven visual language */

/* Reset-ish */
* { box-sizing: border-box; }
html,body { height: 100%; margin: 0; }

/* Layout helpers */
.container { max-width: 1140px; margin: 0 auto; padding: 0 18px; }

/* Header */
.site-header {
  backdrop-filter: blur(6px);
  background: linear-gradient(90deg, rgba(4,8,23,0.6), rgba(8,16,46,0.6));
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; gap: 18px; padding: 18px 0; }
.brand { display:flex; align-items:center; gap:14px; }
.brand img { height:58px; width:auto; border-radius:8px; background: rgba(255,255,255,0.02); padding:6px; }
.brand h1 { margin:0; font-size:1.1rem; letter-spacing:0.6px; }
.tagline { margin:0; font-size:0.85rem; color: rgba(255,255,255,0.85); }

/* Nav */
.main-nav { display:flex; gap:10px; align-items:center; }
.main-nav a { color: rgba(255,255,255,0.9); text-decoration:none; padding:10px 12px; border-radius:8px; font-weight:600; font-size:0.95rem; }
.main-nav a:hover { background: rgba(255,255,255,0.03); }
.btn { display:inline-block; padding:10px 16px; border-radius:8px; text-decoration:none; font-weight:700; }
.btn-cta { background: linear-gradient(90deg,#00d4ff,#6b6bff); color:#08122a; box-shadow: 0 6px 22px rgba(107,107,255,0.12); }
.btn-outline { border: 1px solid rgba(255,255,255,0.12); color: #e6f7ff; background: transparent; }

/* HERO */
.hero { padding:48px 0 22px; background: radial-gradient(1200px 400px at 10% 0%, rgba(0,212,255,0.06), transparent), linear-gradient(180deg,#031124 0%, #061730 50%); color: #eaf7ff; }
.hero-inner { display:flex; gap: 28px; align-items:center; justify-content:space-between; }
.hero-text { max-width: 52%; }
.hero h2 { margin:0 0 10px 0; font-size: clamp(1.6rem, 2.4vw, 2.4rem); color: #fff; letter-spacing: -0.02em; }
.lead { margin:0 0 18px 0; color: #cfeeff; font-size:1.05rem; line-height:1.5; }
.hero-ctas { display:flex; gap:12px; margin-top:8px; }
.hero-svg { width:420px; height:260px; display:block; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.45)); border-radius:14px; }

/* Responsive hero stack */
@media (max-width: 900px) {
  .hero-inner { flex-direction: column-reverse; gap: 18px; text-align: center; }
  .hero-text { max-width: 100%; }
  .hero-svg { width: 90%; height:auto; }
}

/* Panels & glass */
.panel { padding: 26px; margin-top: 18px; border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(2,6,23,0.06); }
.panel.glass { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.03); backdrop-filter: blur(6px); color: #e9f7ff; }

/* Specific layout inside panels */
.panel-grid { display:flex; gap:20px; align-items:center; justify-content:space-between; }
.stat-cards { display:flex; gap:12px; }
.stat { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); padding: 12px 16px; border-radius:10px; text-align:center; min-width:110px; }
.stat-value { font-size:1.35rem; font-weight:800; color:#fff; }
.stat-label { font-size:0.85rem; color: rgba(255,255,255,0.85); }

/* Tech grid */
.tech-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:18px; margin-top:12px; }
.tech-card { background: linear-gradient(180deg,#08182a 0%, #061424 100%); color: #cfeeff; padding:16px; border-radius:12px; min-height:140px; display:flex; gap:12px; align-items:flex-start; }
.tech-card .icon { width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:10px; background: linear-gradient(135deg,#00d4ff, #6b6bff); color:#08122a; flex-shrink:0; }
.tech-card h4 { margin:0 0 6px 0; color:#fff; }
.tech-card p { margin:0; color:#cdefff; font-size:0.95rem; line-height:1.4; }

/* Products grid */
.products-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-top:14px; }
.product-card { border-radius:12px; padding:16px; background: linear-gradient(180deg,#ffffff,#f7fbff); box-shadow: 0 8px 22px rgba(11,116,222,0.06); display:flex; flex-direction:column; gap:10px; }
.product-card .p-head { font-weight:800; color:#0b74de; }
.product-card .p-body { color:#333; flex:1; }
.product-card .p-foot { font-size:0.9rem; color:#666; }

/* Contact grid */
.contact-grid { display:flex; gap:20px; justify-content:space-between; }
.contact-grid div { flex:1; }
.muted { color: rgba(0,0,0,0.55); font-size:0.95rem; }

/* Lists */
.bullet-list { margin-left:18px; }

/* Prefer a distinct, light card style for key content sections */
.light-panel {
  background: linear-gradient(180deg, #ffffff, #f6fbff);
  color: #0b2741;                 /* dark, high-contrast text */
  box-shadow: 0 12px 28px rgba(6, 24, 52, 0.08);
  border: 1px solid rgba(11,116,222,0.06);
}

/* Make headings inside light panels stand out */
.light-panel h2,
.light-panel h3 {
  color: #08325a;
  border-left-color: #00a8ff;     /* subtle left accent */
}

/* Paragraphs, lists inside light panels use readable color */
.light-panel p,
.light-panel li {
  color: #16324a;
  line-height: 1.65;
}

/* Product cards inside the light area: slightly stronger contrast */
.light-panel .product-card {
  background: linear-gradient(180deg,#ffffff,#f0f7ff);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(11,116,222,0.04);
  color: #133149;
}


/* Footer */
.site-footer { background: linear-gradient(90deg,#051225,#0b2741); color:#cfeeff; padding:20px 0; margin-top: 36px; }
.footer-inner { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.footer-inner .muted { color: #9ccce8; font-size:0.95rem; }

/* Responsive tweaks */
@media (max-width: 880px) {
  .panel-grid { flex-direction:column; align-items:flex-start; }
  .stat-cards { width:100%; justify-content:space-between; }
  .tech-grid { grid-template-columns: 1fr; }
  .contact-grid { flex-direction:column; }
   /* ensure light panel spacing on mobile */
  .light-panel { padding: 20px; }
  .footer-inner { flex-direction:column; text-align:center; }
}
/* Improve readability for #about while keeping glass aesthetic */
.panel.glass#about {
  background: linear-gradient(180deg, rgba(6,18,36,0.88), rgba(8,22,44,0.85)); /* slightly darker backdrop */
  border: 1px solid rgba(255,255,255,0.04);
  color: #eaf7ff; /* bright text for contrast */
  box-shadow: 0 14px 32px rgba(2,6,23,0.18);
}

.panel.glass#about h3,
.panel.glass#about h2 {
  color: #dff6ff;
  border-left-color: #00d4ff;
}

.panel.glass#about p,
.panel.glass#about .muted,
.panel.glass#about .stat-label,
.panel.glass#about .stat-value {
  color: #dceffd;
}

/* Make stat cards inside about pop a bit more */
.panel.glass#about .stat {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color: #eaf7ff;
}
/* ===== FIX: Make 'Explore Products' CTA & product cards clearly visible ===== */

/* Ensure primary buttons in hero are bright and readable */
.hero-ctas .btn {
  background: linear-gradient(90deg, #00d4ff, #6b6bff);
  color: #041028;                /* dark text on bright gradient for good contrast */
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(107,107,255,0.12);
  border: none;
  padding: 12px 18px;
  border-radius: 10px;
  text-decoration: none;
}

/* Outline button in hero — make it luminous so it reads on dark background */
.hero-ctas .btn-outline {
  background: transparent;
  color: #dff6ff;
  border: 1px solid rgba(223,246,255,0.22);
  box-shadow: 0 4px 18px rgba(0,212,255,0.06);
}

/* Hover states */
.hero-ctas .btn:hover { transform: translateY(-2px); }
.hero-ctas .btn-outline:hover {
  background: rgba(255,255,255,0.03);
  color: #ffffff;
}

/* Improve visibility of product cards when page has mixed themes */
.products-grid .product-card {
  background: linear-gradient(180deg,#ffffff,#f3f9ff);
  color: #0b2741;
  border: 1px solid rgba(11,116,222,0.06);
  box-shadow: 0 10px 24px rgba(11,116,222,0.05);
}

/* Product card headings */
.products-grid .product-card .p-head {
  color: #09345b;
  font-weight: 800;
  letter-spacing: -0.2px;
}

/* Make sure body text inside product cards is readable */
.products-grid .product-card .p-body,
.products-grid .product-card .p-foot {
  color: #264b66;
  line-height: 1.5;
}

/* Small-screen tweak: ensure hero buttons don't collapse visually */
@media (max-width: 720px) {
  .hero-ctas { flex-direction: column; gap: 12px; }
  .hero-ctas .btn, .hero-ctas .btn-outline { width: 100%; text-align:center; }
}
/* ===== HERO BUTTON FIXES ===== */

/* Main bright gradient button */
.btn-explore {
  background: linear-gradient(90deg, #00d4ff 0%, #6b6bff 100%);
  color: #041028;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 8px 26px rgba(107,107,255,0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effect with elevation */
.btn-explore:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(0,212,255,0.35);
}

/* Outline button next to it */
.btn-outline {
  border: 1px solid rgba(223,246,255,0.3);
  color: #dff6ff;
  background: transparent;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.btn-outline:hover {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border-color: rgba(255,255,255,0.5);
}

/* Layout for button pair */
.hero-ctas {
  display: flex;
  gap: 14px;
  margin-top: 18px;
}

/* Responsive fix: stack buttons on small screens */
@media (max-width: 720px) {
  .hero-ctas {
    flex-direction: column;
    align-items: center;
  }
  .hero-ctas .btn-explore,
  .hero-ctas .btn-outline {
    width: 80%;
    text-align: center;
  }
}