/* eu2you minimal dark theme */
:root {
  --bg: #000000;
  --text: #D8D8D8; /* slightly softer light gray */
  --muted: #A0A0A0; /* lighter muted for easier reading */
  --primary: #5EE16A; /* softer green for dark bg */
  --accent: #FF00FF;
  --max-w: 1200px;
  --gutter: 24px;
  --lh: 1.5;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:#000; color:var(--text); font-family:"IBM Plex Mono", monospace; line-height:var(--lh); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.header { position: sticky; top:0; backdrop-filter: blur(6px); background: rgba(0,0,0,0.7); border-bottom: 1px solid #111; z-index: 20; }
.header .bar { display:flex; align-items:center; justify-content:space-between; padding: 0; min-height: 72px; }
.logo { color: var(--primary); font-weight:600; }
.nav { display:flex; align-items: center; gap: 16px; }
.btn { display:inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border: 1px solid var(--primary); color: var(--primary); background: rgba(94,225,106,0.06); line-height: 1; }
.nav a { display: inline-flex; align-items: center; height: 36px; }
.btn:hover { text-decoration: underline; }
.btn.primary { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn.accent { border-color: var(--primary); color: var(--primary); background: rgba(94,225,106,0.10); }
.btn.accent:hover { text-decoration: underline; }
.section { padding: 40px 0; scroll-margin-top: 84px; }
.hero { 
  text-align:center; 
  padding: 96px 0 80px; 
  background: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.75) 100%);
}
.hero .container { 
  max-width: 1000px;
}
.hero h1 { 
  line-height: 1.15;
  margin-bottom: 12px;
}
.hero p { 
  max-width: 960px;
  margin: 0 auto;
}
.hero .btn { 
  margin-top: 8px;
}
.grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.card { border: 1px solid #1a1a1a; padding: 16px; background: #0c0c0c; }
/* Features list refined */
.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #1a1a1a;
  background: #0c0c0c;
}
.feature-icon {
  width: 28px; height: 28px;
  border: 1px solid #262626;
  border-radius: 6px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--primary);
}
.feature-title { color: var(--text); font-weight: 600; }
.feature-desc { color: var(--muted); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px 8px; border-bottom: 1px solid #111; }
.table th { color: var(--muted); font-weight: 500; }
.footer { font-size: 12px; color: var(--muted); }
/* removed old form inputs */
/* Block-based layout */
.blocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 24px var(--gutter); }
.block { background: #121212; border: 1px solid #262626; padding: 24px; }
.block .container { padding: 0; }
@media (max-width: 991px) { .blocks { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .grid { grid-template-columns: repeat(6, 1fr);} }
/* Centered page content helper for subpages */
.page-centered .container { max-width: 760px; margin: 0 auto; text-align: center; }
.page-centered .card { margin: 0 auto; text-align: center; }
/* Vertically and horizontally center the main block on subpages */
.blocks.page-centered {
  /* account for header + footer approximate heights */
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.blocks.page-centered .section { width: 100%; }
@media (max-width: 576px) {
  .features { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(4, 1fr);} 
  .header .bar { flex-direction: row; align-items: center; justify-content: space-between; padding: 8px var(--gutter); }
  .logo { font-size: 16px; }
  .nav { width: auto; justify-content: flex-end; gap: 12px; }
  .nav a:not(.btn) { display: none; }
  .btn { width: auto; min-width: 140px; }
  .hero { padding: 80px 0 72px; }
}

@media (min-width: 992px) {
  .hero { padding: 120px 0 96px; }
}