html {
  scroll-behavior: smooth;
}

:root {
  --accent: #0b78d1;
  --accent-dark: #1552a4;
  --dark: #0f1724;
  --muted: #6b7280;
  --bg: #f8fafc;
  --card: #ffffff;
  --radius: 12px;
  --shadow: 0 6px 18px rgba(12,16,20,0.06);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
}

* { box-sizing:border-box; margin:0; padding:0; }
body { background: var(--bg); color: var(--dark); line-height:1.6; font-size:16px; }

header { background: var(--card); border-bottom:1px solid #e3e8ef; }
.container { max-width:1180px; margin:0 auto; padding:28px; }
.nav { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.brand { display:flex; align-items:center; gap:12px; }
.logo { width:48px; height:48px; border-radius:8px; background: var(--accent); color:white; font-weight:700; display:flex; align-items:center; justify-content:center; }
nav a { color: var(--dark); text-decoration:none; margin-left:18px; font-weight:600; }
nav a:hover { color: var(--accent); }

.hero {
  display: grid;
  grid-template-columns:1fr 420px;
  gap:28px;
  padding: 60px 0;
  background: linear-gradient(to bottom, #ffffff, #f4f5f7);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.015) 0px,
    rgba(0,0,0,0.015) 1px,
    rgba(255,255,255,0.015) 2px
  );
  opacity:0.65;
  pointer-events:none;
}
.hero h1 { font-size:36px; z-index:1; max-width:900px; }
.hero p { color: var(--muted); margin-top:12px; font-size:16px; }

.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; margin-top:22px; }
.card { background: var(--card); padding:20px; border-radius: var(--radius); box-shadow: var(--shadow); text-align:center; transition: transform 0.2s; }
.card:hover { transform: translateY(-4px); }
.card h3 { margin-bottom:12px; }
.card .price { font-size:28px; font-weight:700; color: var(--accent); margin-bottom:10px; }
.card p { font-size:14px; color: var(--muted); margin-bottom:16px; }

.cta { margin-top:24px; }
.btn { background: var(--accent); color:white; padding:12px 20px; border-radius:10px; border:0; cursor:pointer; font-weight:600; text-decoration:none; }
.btn:hover { background: var(--accent-dark); }

footer { padding:28px 0; color: var(--muted); text-align:center; border-top:1px solid #e3e8ef; }

form input, form textarea { width:100%; padding:10px; border:1px solid #e6e9ee; border-radius:8px; margin-top:8px; }
form label { font-size:13px; color: var(--muted); }
form .small { font-size:13px; color: var(--muted); }

@media(max-width:900px){
  .hero { grid-template-columns:1fr; }
  .hero h1 { font-size:28px; }
}
nav a.active {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
<style>
/* Cyber Grid Animated Background */
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 1px, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 1px, transparent 1px, transparent 20px);
  z-index: 0;
  animation: moveGrid 10s linear infinite;
  pointer-events: none;
}

@keyframes moveGrid {
  0% {background-position:0 0, 0 0;}
  50% {background-position:20px 20px, -20px -20px;}
  100% {background-position:0 0, 0 0;}
}

/* Keep the hero content above the grid */
.hero * { position: relative; z-index: 1; }
</style>