:root{
  --bg:#1f1f1f;
  --tile:#222;
  --tile-hi:#2a2a2a;
  --elev:#000000bf; /* black @ 75% */
  --fg:#f1f1f1;
  --muted:#cccccc;
  --muted-2:#aaaaaa;
  --brand:#0a84ff;
  --brand-dark:#0056b3;
  --accent:#ffcc00;
  --radius:14px;
  --shadow:0 10px 18px rgba(0,0,0,.7);
  --maxw:720px;
}

/* Base / layout */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--fg);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  line-height:1.45;
  /* Local-only “carbon” feel via pure CSS, no external image */
  background:
    linear-gradient(135deg, var(--tile) 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(225deg, var(--tile) 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(315deg, var(--tile) 25%, transparent 25%) 0px 0/16px 16px,
    linear-gradient(45deg,  var(--tile) 25%, transparent 25%) 0px 0/16px 16px,
    linear-gradient(0deg, var(--tile-hi), var(--bg));
  display:flex; align-items:flex-start; justify-content:center; padding:14px;
}

.shell{ width:100%; max-width:var(--maxw); }

/* Header: minimal */
header.site{
  display:flex; align-items:center; justify-content:flex-start; gap:.5rem;
  margin:0 0 .9rem;
}
.brand{
  font-weight:800; letter-spacing:.02em; font-size:1.05rem; white-space:nowrap;
}

/* Card container */
.card{
  background:var(--elev); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.1rem;
}

/* Hero text */
.hero h1{
  margin:.1rem 0 .3rem; font-size:clamp(1.5rem,6.5vw,2.3rem); letter-spacing:.02em;
}
.sub{ color:var(--muted); margin:0 0 1.2rem; font-size:1rem; }

/* One-button-per-line list */
.btn-list{ display:block; margin:.2rem 0 1.2rem; }
.btn{
  display:block; width:100%;
  text-align:center; text-decoration:none; color:#fff; font-weight:700;
  padding:.95rem 1rem; border-radius:12px; background:#3a3a3a;
  transition:transform .15s ease, filter .15s ease;
  margin:.45rem 0;
}

/* Primary login — double height */
.btn.login{
  background:var(--brand);
  padding:1.9rem 1rem; /* double height */
  font-size:1.2rem;
}

/* Hover effects only on devices that support hover */
@media (hover: hover){
  .btn:hover{ transform:translateY(-1px); filter:brightness(1.05); }
  /* Keep login button the same blue on hover (no dark swap) */
  .btn.login:hover{ background:var(--brand); filter:brightness(1.08); }
}

/* Optional content blocks */
.benefits{ display:block; margin:.6rem 0 .4rem }
.benefit{
  background:#1d1d1d; border:1px solid #2a2a2a; border-radius:10px; padding:.8rem;
  font-size:.98rem; margin:.5rem 0;
}
.benefit strong{ color:#ccc }

/* Footer */
footer.site{
  margin:.9rem 0 0; text-align:center; color:var(--muted-2); font-size:.95rem;
}
footer .links{ margin:.4rem 0 .2rem }
footer .links a,
footer a[href^="mailto"]{
  color:var(--muted-2);
  text-decoration:none;
  margin:0 .4rem;
}
footer .links a:hover,
footer a[href^="mailto"]:hover{
  text-decoration:underline;
  color:var(--fg);
}
footer .contact{ margin-top:.35rem }

/* Larger screens */
@media (min-width:720px){
  .card{ padding:1.35rem }
  .hero h1{ font-size:2.3rem }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .btn{ transition:none }
  .btn:hover{ transform:none }
}