/* VDRX theme: black/white with red highlights */
:root{
  --bg:#000;
  --fg:#fff;
  --muted:#cfcfcf;
  --red:#ff2d2d;
  --card:#0a0a0a;
  --border:#1b1b1b;
  --container:1100px;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.4);
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{max-width:var(--container);margin:0 auto;padding:0 1.25rem}
a{color:var(--fg); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s ease, color .2s ease}
a:hover{color:var(--red); border-color:var(--red)}

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(8px);
  background:rgba(0,0,0,.6); border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}
.nav{list-style:none; display:flex; gap:1rem; margin:0; padding:0}
.nav a{padding:.4rem .7rem; border-radius:999px}
.nav a.active,.nav a[aria-current="page"]{background:var(--card); border-color:var(--border)}
.brand img{display:block; height:auto}

.hero{padding:5rem 0 3rem; border-bottom:1px solid var(--border)}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
.hero h1{font-size:clamp(2.2rem,6vw,4rem); letter-spacing:.04em; margin:.2rem 0}
.tagline{color:var(--muted); font-size:1.1rem; margin-top:.3rem}
.hero-graphic img{max-width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow)}

.btn{
  display:inline-block; background:var(--red); color:#fff;
  padding:.75rem 1.1rem; border-radius:999px; border:0;
  box-shadow:var(--shadow); transition:transform .1s ease;
}
.btn:hover{transform:translateY(-1px)}

.features{padding:2.5rem 0}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.card{background:var(--card); border:1px solid var(--border); padding:1rem; border-radius:var(--radius)}
.card h2{margin-top:0}

.contact-form{display:grid; gap:1rem; margin:1rem 0 3rem}
.contact-form input,.contact-form textarea{
  width:100%; padding:.75rem; background:#0d0d0d; color:var(--fg);
  border:1px solid var(--border); border-radius:12px;
}
.contact-form .hp{display:none !important}

.notice{padding:1rem; border-radius:12px; border:1px solid var(--border); background:#0c0c0c}
.notice.success{border-color:#226d22}
.notice.error{border-color:#7d1b1b}

.site-footer{border-top:1px solid var(--border); margin-top:3rem; padding:2rem 0; color:var(--muted)}
.small{font-size:.9rem; color:var(--muted)}

@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr; text-align:center}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}