:root {
  --bg: #070b10;
  --bg-soft: #0d131a;
  --panel: rgba(18, 27, 36, .78);
  --panel-solid: #101821;
  --line: rgba(127, 175, 213, .18);
  --text: #f4f7fa;
  --muted: #a8b3bf;
  --blue: #1598ee;
  --blue-2: #42c4ff;
  --green: #6bb93f;
  --shadow: 0 24px 80px rgba(0,0,0,.38);
  --radius: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 75% 8%, rgba(21,152,238,.10), transparent 26%),
    radial-gradient(circle at 12% 28%, rgba(107,185,63,.06), transparent 24%),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(7,11,16,.82);
  backdrop-filter: blur(18px);
}
.nav-shell {
  width: min(1180px, calc(100% - 36px));
  height: 74px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:760; letter-spacing:.02em; }
.brand img { width:40px; height:40px; border-radius:50%; }
.nav-links { display:flex; gap:28px; align-items:center; }
.nav-links a { color:var(--muted); text-decoration:none; font-size:.95rem; transition:.2s ease; }
.nav-links a:hover { color:var(--text); }
.nav-toggle { display:none; border:0; background:transparent; color:var(--text); font-size:1.5rem; }
.hero { position:relative; overflow:hidden; padding: 88px 0 0; }
.hero-inner, .section, .footer-inner {
  width: min(1180px, calc(100% - 36px)); margin-inline:auto;
}
.hero-inner { display:grid; grid-template-columns: 1.15fr .85fr; gap:60px; align-items:center; min-height:480px; }
.hero-copy { position:relative; z-index:2; }
.eyebrow { display:inline-block; color:var(--blue-2); text-transform:uppercase; font-size:.77rem; letter-spacing:.19em; font-weight:800; margin-bottom:14px; }
h1, h2, h3, p { margin-top:0; }
h1 { font-size:clamp(3.7rem, 8vw, 7.3rem); line-height:.88; letter-spacing:-.055em; margin-bottom:28px; }
h1 span { color:var(--blue-2); }
.hero-copy p { max-width:680px; color:var(--muted); font-size:1.15rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px; border-radius:13px; text-decoration:none; font-weight:760; border:1px solid transparent; transition:.2s ease; }
.button-primary { background:linear-gradient(135deg,var(--blue),#0d74c6); box-shadow:0 12px 32px rgba(21,152,238,.18); }
.button-primary:hover { transform:translateY(-2px); box-shadow:0 16px 36px rgba(21,152,238,.28); }
.button-secondary { background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.12); color:#dbe4ec; }
.button-secondary:hover { border-color:rgba(66,196,255,.45); }
.hero-logo-wrap { display:flex; justify-content:center; position:relative; z-index:1; }
.hero-logo { width:min(420px,90%); filter:drop-shadow(0 28px 55px rgba(0,0,0,.46)); animation:float 7s ease-in-out infinite; }
@keyframes float { 50% { transform:translateY(-10px); } }
.hero-glow { position:absolute; border-radius:50%; filter:blur(1px); pointer-events:none; }
.hero-glow-a { width:520px; height:520px; background:radial-gradient(circle,rgba(21,152,238,.16),transparent 68%); right:-100px; top:-80px; }
.hero-glow-b { width:380px; height:380px; background:radial-gradient(circle,rgba(107,185,63,.08),transparent 70%); left:-180px; top:120px; }
.banner-wrap { width:min(1500px,calc(100% - 24px)); margin:60px auto 0; border:1px solid rgba(255,255,255,.09); border-bottom:0; border-radius:26px 26px 0 0; overflow:hidden; box-shadow:var(--shadow); background:#0b1016; }
.studio-banner { width:100%; height:auto; }
.section { padding:110px 0; }
.section-heading { max-width:760px; margin-bottom:44px; }
.section-heading h2 { font-size:clamp(2.2rem,5vw,4rem); line-height:1.02; letter-spacing:-.035em; margin-bottom:18px; }
.section-heading p { color:var(--muted); font-size:1.08rem; }
.pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pillar, .product-card, .contact-panel { border:1px solid var(--line); background:linear-gradient(180deg,rgba(17,27,36,.78),rgba(10,16,23,.86)); box-shadow:var(--shadow); }
.pillar { padding:30px; border-radius:20px; }
.pillar-icon { font-size:2rem; color:var(--blue-2); }
.pillar h3 { margin:16px 0 8px; font-size:1.25rem; }
.pillar p { color:var(--muted); margin-bottom:0; }
.products-section { border-top:1px solid rgba(255,255,255,.045); }
.product-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px; }
.product-card { border-radius:22px; overflow:hidden; min-height:100%; }
.product-card-featured img { aspect-ratio: 3 / 2; width:100%; object-fit:cover; }
.product-card-body { padding:24px; }
.product-labels { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.product-labels span { border:1px solid rgba(66,196,255,.23); color:#9bdcff; background:rgba(21,152,238,.08); padding:5px 9px; border-radius:999px; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.product-card h3 { font-size:1.55rem; margin-bottom:10px; }
.product-card p { color:var(--muted); }
.text-link { color:var(--blue-2); text-decoration:none; font-weight:700; }
.future-card { display:flex; flex-direction:column; }
.future-visual { min-height:220px; display:grid; place-items:center; font-size:5rem; font-weight:900; letter-spacing:-.08em; color:rgba(66,196,255,.88); background:radial-gradient(circle at 50% 40%,rgba(21,152,238,.15),transparent 55%),linear-gradient(135deg,#111a23,#091017); border-bottom:1px solid var(--line); }
.collider-section { padding-top:80px; }
.collider-heading { max-width:none; display:flex; justify-content:space-between; gap:30px; align-items:end; }
.collider-heading > div { max-width:720px; }
.collider-feature { display:grid; grid-template-columns:.85fr 1.15fr; gap:38px; align-items:center; margin-top:30px; }
.collider-copy h3 { font-size:2rem; margin-bottom:15px; }
.collider-copy p { color:var(--muted); }
.feature-list { margin:24px 0 0; padding:0; list-style:none; }
.feature-list li { padding:10px 0 10px 28px; position:relative; color:#d5dde5; border-bottom:1px solid rgba(255,255,255,.045); }
.feature-list li::before { content:"✓"; color:var(--blue-2); font-weight:900; position:absolute; left:0; }
.media-frame { margin:0; border-radius:22px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); }
.gallery { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; }
.gallery-item { padding:0; border:1px solid var(--line); background:#080d12; border-radius:18px; overflow:hidden; cursor:zoom-in; }
.gallery-item img { width:100%; aspect-ratio:16/9; object-fit:cover; transition:.25s ease; }
.gallery-item:hover img { transform:scale(1.015); }
.specs { margin-top:22px; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:18px; overflow:hidden; background:rgba(12,19,26,.72); }
.specs div { padding:20px; border-right:1px solid var(--line); }
.specs div:last-child { border-right:0; }
.specs strong, .specs span { display:block; }
.specs strong { font-size:.78rem; color:#8bd5ff; text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.specs span { color:#d6dee6; }
.contact-section { padding-bottom:130px; }
.contact-panel { border-radius:24px; padding:42px; display:flex; justify-content:space-between; align-items:center; gap:30px; }
.contact-panel h2 { font-size:2.3rem; margin-bottom:10px; }
.contact-panel p { color:var(--muted); max-width:660px; }
.contact-actions { display:flex; flex-direction:column; gap:10px; min-width:230px; }
.contact-hint { font-size:.88rem; opacity:.78; }
code { color:#d9ecff; background:rgba(255,255,255,.06); padding:2px 6px; border-radius:6px; }
.site-footer { border-top:1px solid rgba(255,255,255,.07); background:#05080c; }
.footer-inner { min-height:170px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.footer-brand { display:flex; align-items:center; gap:14px; }
.footer-brand img { width:52px; height:52px; border-radius:50%; }
.footer-brand strong, .footer-brand span { display:block; }
.footer-brand span, .footer-inner p { color:#8694a1; font-size:.85rem; }
.footer-inner p { text-align:right; max-width:570px; margin:0; }
.legal { opacity:.72; }
.lightbox { position:fixed; inset:0; z-index:100; background:rgba(2,5,8,.94); display:grid; place-items:center; padding:48px 26px; }
.lightbox[hidden] { display:none; }
.lightbox img { max-width:min(1500px,94vw); max-height:88vh; border-radius:15px; box-shadow:0 30px 100px #000; }
.lightbox-close { position:absolute; right:22px; top:12px; border:0; background:transparent; color:#fff; font-size:2.8rem; cursor:pointer; }
@media (max-width: 980px) {
  .hero-inner { grid-template-columns:1fr; text-align:center; min-height:auto; }
  .hero-copy p { margin-inline:auto; }
  .hero-actions { justify-content:center; }
  .hero-logo { width:min(340px,75vw); }
  .pillars, .product-grid { grid-template-columns:1fr; }
  .product-card-featured { display:grid; grid-template-columns:1fr 1fr; }
  .product-card-featured img { height:100%; aspect-ratio:auto; object-fit:cover; }
  .collider-feature { grid-template-columns:1fr; }
  .specs { grid-template-columns:1fr 1fr; }
  .specs div:nth-child(2) { border-right:0; }
  .specs div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
}
@media (max-width: 720px) {
  .nav-toggle { display:block; }
  .nav-links { position:absolute; top:74px; left:0; right:0; display:none; flex-direction:column; align-items:stretch; padding:15px 24px 22px; background:rgba(7,11,16,.98); border-bottom:1px solid var(--line); }
  .nav-links.open { display:flex; }
  .nav-links a { padding:8px 0; }
  .hero { padding-top:58px; }
  h1 { font-size:clamp(3.1rem,16vw,5.2rem); }
  .hero-inner { gap:30px; }
  .banner-wrap { margin-top:40px; border-radius:16px 16px 0 0; }
  .section { padding:78px 0; }
  .product-card-featured { display:block; }
  .collider-heading { display:block; }
  .collider-heading .button { margin-top:8px; }
  .gallery { grid-template-columns:1fr; }
  .specs { grid-template-columns:1fr; }
  .specs div { border-right:0; border-bottom:1px solid var(--line); }
  .specs div:last-child { border-bottom:0; }
  .contact-panel { display:block; padding:30px; }
  .contact-actions { margin-top:24px; min-width:0; }
  .footer-inner { padding:34px 0; display:block; }
  .footer-inner p { text-align:left; margin-top:22px; }
}