/* =========
   StellarTec Systems — Styles
   ========= */
:root{
  --navy:#0A1A2F;
  --navy-2:#0f243e;
  --white:#ffffff;
  --muted:#E5E7EB;
  --orange:#FF4C00;
  --card:#0e1f36;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--white);
  background: radial-gradient(1200px 800px at 10% -10%, #133054 0%, transparent 60%),
              radial-gradient(800px 500px at 90% -10%, #162f4f 0%, transparent 60%),
              var(--navy);
  letter-spacing:.2px;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1200px, 92%); margin-inline:auto}

/* Accessibility */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:var(--orange);color:#111;padding:.5rem .75rem;border-radius:.5rem}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background:linear-gradient(to bottom, rgba(10,26,47,.85), rgba(10,26,47,.55));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:76px}
.brand{display:flex;align-items:center;gap:.75rem}
.brand img{width:42px;height:42px;object-fit:cover;border-radius:.25rem;box-shadow:var(--shadow)}
.brand-text{font-weight:700;letter-spacing:.5px}

.menu{display:flex;gap:1.25rem;align-items:center;list-style:none;margin:0;padding:0}
.menu a{opacity:.9}
.menu a:hover{opacity:1}
.menu .cta{margin-left:.75rem}

.nav-toggle{display:none;flex-direction:column;gap:5px;background:transparent;border:0}
.nav-toggle span{width:22px;height:2px;background:var(--white);display:block}

/* Buttons */
.btn{display:inline-block;padding:.85rem 1.15rem;border-radius:.6rem;font-weight:700;line-height:1;transition:.2s transform, .2s box-shadow, .2s background, .2s color; border:1px solid transparent}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.3)}
.btn-primary{background:var(--orange); color:#111}
.btn-primary:hover{filter:brightness(1.05)}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.35);color:var(--white)}
.btn-outline:hover{border-color:var(--white);}
.btn-small{padding:.6rem .85rem;border-radius:.5rem}

/* Hero */
.hero{position:relative;overflow:hidden;padding:8rem 0 4rem}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:center}
.hero h1{font-size: clamp(2.2rem, 3.8vw + 1rem, 4rem); line-height:1.08;margin:0 0 1rem}
.accent{color:var(--orange)}
.lead{font-size:1.1rem;opacity:.9;max-width:42ch}
.hero-ctas{display:flex;gap:1rem;margin:1.25rem 0 1rem}
.trust{display:flex;gap:1.25rem;list-style:none;padding:0;margin:1rem 0 0;opacity:.85;font-size:.95rem}
.hero-visual{position:relative;min-height:360px;border-radius:1rem;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06); box-shadow:var(--shadow)}
.hero-visual .glow{position:absolute;inset:-40px -60px 0; background:radial-gradient(400px 180px at 70% 10%, rgba(255,76,0,.25), transparent 60%), radial-gradient(500px 260px at 30% 20%, rgba(255,255,255,.14), transparent 60%)}
.hero-visual .grid{position:absolute;inset:0;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:40px 40px;mask-image:radial-gradient(70% 60% at 50% 40%, black, transparent)}
.orbital .orbit{position:absolute;width:140%;left:-15%;top:-6rem;stroke:var(--orange);opacity:.5;stroke-width:3}

/* Sections */
.section{padding:4.5rem 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06)}
.section-head{margin-bottom:2rem}
.section h2{font-size:clamp(1.6rem, 1.4vw + 1rem, 2.2rem); margin:.25rem 0 0}
.section p{opacity:.9}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:1rem;padding:1rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.75rem;transition:.2s transform, .25s box-shadow, .25s border-color}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 42px rgba(0,0,0,.45);border-color:rgba(255,255,255,.2)}
.card h3{margin:.25rem 0}
.card p{opacity:.9}
.card-link{margin-top:auto;font-weight:700;color:var(--orange)}

.card-media{height:140px;border-radius:.75rem;background:
  radial-gradient(120px 80px at 20% 30%, rgba(255,255,255,.15), transparent 60%),
  radial-gradient(160px 90px at 80% 10%, rgba(255,76,0,.25), transparent 60%),
  linear-gradient(135deg, #0a2039, #0b2847 60%, #122e4d);
  border:1px solid rgba(255,255,255,.06)
}
.cm-2{background:
  radial-gradient(120px 80px at 80% 30%, rgba(255,255,255,.14), transparent 60%),
  radial-gradient(160px 90px at 10% 10%, rgba(255,76,0,.25), transparent 60%),
  linear-gradient(135deg, #0a2039, #0b2847 60%, #122e4d)}
.cm-3{background:
  radial-gradient(120px 80px at 50% 10%, rgba(255,255,255,.14), transparent 60%),
  radial-gradient(160px 90px at 80% 10%, rgba(255,76,0,.25), transparent 60%),
  linear-gradient(135deg, #091d33, #0a2543 60%, #123158)}
.cm-4{background:
  radial-gradient(120px 80px at 70% 10%, rgba(255,255,255,.14), transparent 60%),
  radial-gradient(160px 90px at 20% 40%, rgba(255,76,0,.25), transparent 60%),
  linear-gradient(135deg, #0a2039, #0b2847 60%, #132f50)}

/* Solutions */
.solution-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:1.25rem}
.solution{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:1rem;padding:1.25rem;box-shadow:var(--shadow)}
.solution h3{margin-top:.5rem}
.solution ul{margin:.5rem 0 1rem 1.1rem; opacity:.9}

/* About */
.about{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.about-visual{height:320px;border-radius:1rem;border:1px solid rgba(255,255,255,.06);background:
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
  url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 600 300\'><g fill=\'none\' stroke=\'rgba(255,255,255,.15)\'><path d=\'M0 260 L600 260\'/><path d=\'M0 230 L600 230\'/><path d=\'M0 200 L600 200\'/><path d=\'M0 170 L600 170\'/><path d=\'M0 140 L600 140\'/></g><g fill=\'rgba(255,76,0,.5)\'><circle cx=\'80\' cy=\'260\' r=\'3\'/><circle cx=\'180\' cy=\'230\' r=\'3\'/><circle cx=\'340\' cy=\'200\' r=\'3\'/><circle cx=\'480\' cy=\'170\' r=\'3\'/></g></svg>');
  background-size:cover;box-shadow:var(--shadow);
}

/* Contact */
.contact{display:grid;grid-template-columns:1fr .8fr;gap:2rem;align-items:start}
.contact-form{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:1rem;padding:1.25rem;box-shadow:var(--shadow)}
label{display:block;font-weight:600;margin:.5rem 0}
input, textarea{
  width:100%; padding:.85rem 1rem; border-radius:.6rem;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); color:var(--white)
}
input:focus, textarea:focus{outline:2px solid var(--orange); border-color:transparent}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-status{min-height:1.4rem; margin-top:.6rem; opacity:.9}

.contact-details{background:transparent;border-left:1px solid rgba(255,255,255,.08);padding-left:1rem}
.contact-details ul{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.contact-details a{color:var(--muted)}
.contact-details a:hover{color:var(--white)}

/* Footer */
.site-footer{padding:2.5rem 0;border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.04))}
.footer-inner{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center}
.footer-brand{display:flex;align-items:center;gap:.6rem;font-weight:700}
.footer-brand img{width:28px;height:28px;border-radius:.25rem}
.site-footer nav{display:flex;gap:1rem;justify-content:center}
.legal{text-align:right;opacity:.8}

/* Responsive */
@media (max-width: 1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .solution-grid{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .hero-inner{grid-template-columns:1fr}
  .menu{position:fixed;inset:76px 0 auto 0; background:rgba(10,26,47,.98); padding:1rem; flex-direction:column; gap:.75rem; transform:translateY(-120%); transition:.25s transform; border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-toggle{display:flex}
  .menu.open{transform:translateY(0)}
  .footer-inner{grid-template-columns:1fr; gap:1rem}
  .legal{text-align:left}
}