/* Lumina Systems LTD — palette updated per reference (blue gradient, light theme) */
:root{
  --primary:#0066ff;
  --primary-dark:#0052cc;
  --secondary:#00d4ff;
  --dark:#0a0e27;
  --light:#f8f9fa;
  --gray:#6c757d;
  --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);

  /* map to site tokens */
  --bg:#ffffff;
  --bg-elev:var(--light);
  --panel:#ffffff;
  --text:var(--dark);
  --muted:var(--gray);
  --brand:var(--primary);
  --brand-ink:var(--primary-dark);
  --ring: rgba(0,102,255,.35);
  --card:#ffffff;
  --border:#e5e7eb;
  --container:1200px;
  color-scheme: light;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

img{ max-width:100%; height:auto; display:block; }
.container{ width:min(100%, var(--container)); margin-inline:auto; padding: 0 1rem; }
.eyebrow{ text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; color:var(--muted); }
.rounded{ border-radius:16px; box-shadow: 0 10px 30px rgba(0,0,0,.06); }

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{ left:1rem; top:1rem; width:auto; height:auto; background:var(--brand); color:#fff; padding:.5rem 1rem; border-radius:8px; }

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.85);
  border-bottom:1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:1rem; }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.brandmark{ width:28px; height:28px; fill:var(--primary); }
.brand-name{
  letter-spacing:.02em; font-weight:700; line-height:1;
  font-size:1.5rem; /* match reference logo size */
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-toggle{ display:none; background:transparent; color:inherit; border:1px solid var(--border); border-radius:10px; padding:.4rem; }
.nav-toggle:hover{ border-color:var(--brand); }
.site-nav ul{ display:flex; list-style:none; gap:1rem; margin:0; padding:0; }
.site-nav a{ color:var(--dark); text-decoration:none; padding:.5rem .75rem; border-radius:10px; font-weight:500; }
.site-nav a[aria-current="page"], .site-nav a.is-active{ background:var(--bg-elev); border:1px solid var(--border); }

@media (max-width: 860px){
  .nav-toggle{ display:inline-grid; place-items:center; }
  .site-nav{ position:absolute; top:64px; right:1rem; left:1rem; border:1px solid var(--border); background:var(--panel); border-radius:14px; padding:.5rem; display:none; }
  .site-nav.open{ display:block; }
  .site-nav ul{ flex-direction:column; }
}

/* Hero */
.hero{ padding: clamp(3rem, 6vw, 6rem) 0; }
.hero-inner{ display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center; }
.hero h1{ font-size: clamp(2rem, 4vw, 3rem); line-height:1.1; margin:.5rem 0 1rem; }
.hero p{ color:var(--muted); max-width:60ch; }
.hero-cta{ display:flex; gap:1rem; margin-top:1rem; }
.hero-badges{ display:flex; gap:.6rem; list-style:none; padding:0; margin:1rem 0 0; color:var(--muted); flex-wrap:wrap; }
.hero-media{ border-radius:18px; overflow:hidden; box-shadow:0 14px 40px rgba(0,0,0,.12); }

/* Sections */
.section{ padding: clamp(2.5rem, 4.5vw, 4rem) 0; }
.section.alt{ background: var(--bg-elev); border-block:1px solid var(--border); }
.page-header{ padding: clamp(2.5rem, 6vw, 5rem) 0 1rem; border-bottom:1px solid var(--border); }
.page-header p{ color: var(--muted); }

/* Grid & Cards */
.grid{ display:grid; gap:1.25rem; }
.grid.two{ grid-template-columns:1.2fr 1fr; }
.grid.three{ grid-template-columns: repeat(3, 1fr); }
.cards-3{ grid-template-columns: repeat(3, 1fr); }

@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .grid.two{ grid-template-columns:1fr; }
  .grid.three, .cards-3{ grid-template-columns: 1fr; }
}

.card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.card > img{ aspect-ratio: 16/9; object-fit:cover; }
.card-body{ padding:1rem 1rem 1.2rem; }
.card h3{ margin:.2rem 0 .2rem; }
.specs{ margin:.5rem 0 0; padding-left:1.1rem; color:var(--muted); }
.link{ color:var(--primary); text-decoration:none; font-weight:600; }
.link:hover{ text-decoration:underline; }

/* Logos */
.logos{ padding: 2rem 0; }
.logo-row{ display:grid; grid-template-columns: repeat(5, 1fr); gap:1rem; list-style:none; padding:0; margin:1rem 0 0; }
.logo-row img{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:1rem; aspect-ratio:16/9; object-fit:cover; }

/* CTA */
.cta-banner{ background: var(--gradient); color:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: clamp(1.6rem, 4vw, 2rem) 0; }

/* Buttons */
.btn{ display:inline-block; padding:.7rem 1rem; border-radius:999px; text-decoration:none; font-weight:700; border:1px solid transparent; }
.btn.primary{
  background: var(--gradient);
  color:#fff;
  box-shadow: 0 4px 15px rgba(0, 102, 255, 0.25);
}
.btn.primary:hover{ transform: translateY(-2px); box-shadow: 0 6px 25px rgba(0,102,255,.35); }
.btn.ghost{ background:transparent; color:var(--primary); border-color:var(--border); }
.btn.small{ padding:.45rem .7rem; font-size:.9rem; }

.btn:focus{ outline: 3px solid var(--ring); outline-offset:2px; }

/* Forms */
.field{ display:grid; gap:.4rem; margin-bottom:.9rem; }
input, select, textarea{ background:#fff; color:var(--text); border:2px solid #e0e0e0; border-radius:10px; padding:.6rem .7rem; font:inherit; }
input:focus, select:focus, textarea:focus{ outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1); }

fieldset{ border:1px dashed var(--border); border-radius:12px; padding:.6rem .8rem; display:grid; gap:.4rem; }

.actions{ display:flex; gap:.7rem; align-items:center; }

/* Footer */
.site-footer{ border-top:1px solid var(--border); margin-top:3rem; background: var(--dark); color:#fff; }
.footer-inner{ display:grid; gap:1rem; grid-template-columns: repeat(4, 1fr); padding:1.5rem 0; }
.footer-col h4{ margin:.3rem 0 .4rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col a{ color:inherit; text-decoration:none; }
.footer-col a:hover{ text-decoration:underline; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding:1rem 0; border-top:1px solid rgba(255,255,255,.12); }
.social{ display:flex; gap:.8rem; list-style:none; padding:0; margin:0; }

/* Utilities */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }