/* Modern minimal styles for 425 Systems */
:root{
  --bg:#0b0f12;
  --card:#071018;
  --muted:#86a6bf;
  --accent:#1fb6ff;
  --glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;color:#dbe9f6;} 

/* Full-page canvas background for topology animation */
#hero-canvas{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  display:block;
  z-index:-1;
  pointer-events:none;
}

.container{max-width:980px;margin:0 auto;padding:24px}
.site-header{backdrop-filter: blur(6px);position:sticky;top:0;padding:10px 0;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;}

.logo{height:44px;width:44px;object-fit:contain;border-radius:8px}
.brand-text{
  font-weight:700;
  font-size:18px;
  background:linear-gradient(135deg, #cdeffd 0%, #7fd5ff 50%, var(--accent) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-0.02em;
  position:relative;
}
.nav a{color:var(--muted);text-decoration:none;margin-left:18px}
.hero{padding:48px 0}
.hero-grid{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:center}
.hero-card h1{font-size:36px;margin:0 0 12px}
.lead{color:#bfe1ff;font-size:18px;margin:0 0 12px}
.meta{color:var(--muted);margin-bottom:18px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--accent),#34d1ff);color:#021826}
.btn.ghost{border:1px solid rgba(255,255,255,0.06);color:#cfeafc;background:transparent;margin-left:10px}

/* iOS-style glass motif for hero-art */
.hero-art{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1;
  border-radius:32px;
  background:linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 8px 32px rgba(0,0,0,0.3), 
             inset 0 1px 0 rgba(255,255,255,0.15),
             0 0 0 1px rgba(255,255,255,0.05);
  overflow:hidden;
}

/* subtle inner glow effect */
.hero-art::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:32px;
  padding:1px;
  background:linear-gradient(145deg, rgba(255,255,255,0.2), transparent 50%, rgba(31,182,255,0.1));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  pointer-events:none;
}

.hero-logo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:10px;
  z-index:1;
  filter:drop-shadow(0 4px 16px rgba(31,182,255,0.2));
  border-radius:32px;
}

.section{padding:28px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{background:var(--glass);padding:18px;border-radius:12px}
.contact a{color:var(--accent);text-decoration:none}
.site-footer{padding:20px 0;text-align:center;color:var(--muted)}
@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr;}
  .logo{height:36px;width:36px}
  .hero-card h1{font-size:28px}
}