/* Landing page – Tech aesthetic */
:root{
  --bg: #06070a;
  --fg: #e9eef5;
  --muted: #9aa4b2;
  --primary: #00E3FF;
  --accent: #8A6DFF;
  --neon: #00FFB2;
  --card-bg: rgba(16,18,24,0.6);
  --border: rgba(255,255,255,0.12);
  --ring: rgba(0,227,255,0.25);
}

/* Ensure landing overrides general bg on home only */
body.home-landing{
  background: radial-gradient(1200px 800px at 10% 10%, rgba(0,227,255,0.07) 0%, transparent 50%),
              radial-gradient(1200px 800px at 90% 20%, rgba(138,109,255,0.07) 0%, transparent 50%),
              var(--bg) !important;
  color: var(--fg);
}

.hero-tech{
  position: relative;
  padding: 160px 0 80px;
  overflow: hidden;
}
.hero-tech .grid-overlay{
  position:absolute; inset:0; pointer-events:none; opacity:.22;
  background-image: linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  mask: radial-gradient(circle at 50% 30%, black 60%, transparent 100%);
}
.hero-tech .orb{
  position:absolute; width:520px; height:520px; border-radius:50%;
  filter: blur(80px);
  opacity:.35; pointer-events:none;
}
.hero-tech .orb.orb-a{ background: radial-gradient(circle at 30% 30%, var(--primary), transparent 60%); top:-120px; left:-120px; }
.hero-tech .orb.orb-b{ background: radial-gradient(circle at 70% 40%, var(--accent), transparent 60%); top:-80px; right:-80px; }

.hero-inner{ position:relative; z-index:2; text-align:center; max-width:1000px; margin:0 auto; padding:0 24px; }
.hero-title{ font-weight:900; letter-spacing:.6px; margin:0 0 14px; font-size: clamp(32px, 6vw, 64px);
  background: linear-gradient(90deg, var(--primary), var(--neon), var(--accent));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-sub{ color:var(--muted); font-size: clamp(14px, 2.4vw, 18px); line-height:1.8; margin:0 auto 28px; max-width:820px; }

.hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn-tech{ position:relative; display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px; border:1px solid var(--border); color:var(--fg); text-decoration:none; transition:.2s ease; background: rgba(255,255,255,0.04); }
.btn-tech:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,227,255,0.15); border-color: rgba(255,255,255,0.22); }
.btn-primary-tech{ background: linear-gradient(90deg, var(--primary), var(--neon)); color:#001015; border-color: transparent; }
.btn-primary-tech:hover{ box-shadow: 0 10px 28px rgba(0,255,178,0.28); }

.features-tech{ padding: 40px 0 20px; }
.features-grid{ display:grid; grid-template-columns: repeat(3, minmax(240px,1fr)); gap:18px; padding:0 24px; max-width:1200px; margin:0 auto; }
@media (max-width: 960px){ .features-grid{ grid-template-columns: 1fr; } }

.card-tech{ position:relative; background: var(--card-bg); border:1px solid var(--border); border-radius:16px; padding:22px; overflow:hidden; transition:.25s ease; }
.card-tech::after{ content:''; position:absolute; inset:0; border-radius:16px; pointer-events:none; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03); }
.card-tech:hover{ transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 0 0 1px var(--ring); }
.card-tech h3{ margin:10px 0 8px; font-size:20px; }
.card-tech p{ margin:0 0 14px; color:var(--muted); }
.icon-ring{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background: radial-gradient(circle at 50% 50%, rgba(0,227,255,.25), transparent 60%); border:1px solid rgba(255,255,255,0.12); color:var(--fg); }

.band-enterprise{ margin: 20px auto 0; padding: 20px 24px 40px; max-width:1200px; }
.band-inner{ background: linear-gradient(180deg, rgba(0,227,255,0.08), rgba(138,109,255,0.08)); border:1px solid var(--border); border-radius:16px; padding: 24px; display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; }
@media (max-width: 960px){ .band-inner{ grid-template-columns: 1fr; } }
.band-inner h3{ margin:0 0 8px; }
.band-inner p{ margin:0 0 14px; color:var(--muted); }
.links-row{ display:flex; flex-wrap:wrap; gap:10px; }

/* Utility */
.muted{ color: var(--muted) }
.mt-8{ margin-top: 8px }
.mt-14{ margin-top: 14px }
.mt-20{ margin-top: 20px }