/* =========================================================
   VaultPass – Black/White + Blue Accent (reference match)
========================================================= */

/* Theme */
:root{
  --bg: #000;            /* true black */
  --text: #ffffff;       /* white */
  --muted: #cfd6df;      /* soft gray */
  --panel: #0c0f12;      /* dark card */
  --border: #1c2229;
  --accent: #42a5ff;     /* bright blue */
  --accent-2: #2a7ad7;   /* darker blue */
  --shadow: 0 20px 60px rgba(0,0,0,.5);
  --radius: 18px;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem;
  --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem;
  --space-7:2rem; --space-8:3rem;
  --container: 960px;
}

/* Reset + base */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width:100%; display:block; }

/* Utilities */
.container{ width:min(100%, var(--container)); margin-inline:auto; padding-inline: clamp(1rem,3vw,2rem); }
.center{ text-align:center; }
.muted{ color: var(--muted); }
.sr-only{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}

/* Header (minimal) */
.header{ padding-block: 1rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.brand{ display:flex; align-items:center; gap:.75rem; color:var(--text); text-decoration:none; font-weight:800; }
.brand img{ width:44px; height:44px; border-radius:10px; }

/* Hero – big, bold, centered */
.hero{ padding-block: clamp(3rem, 8vw, 6rem); }
.hero-wrap{ display:grid; justify-items:center; gap: 1.25rem; }
.hero-logo{ width:96px; height:96px; border-radius:20px; box-shadow: 0 10px 40px rgba(66,165,255,.35); }
.hero h1{
  font-size: clamp(2rem, 6.2vw, 4rem);
  font-weight: 900;
  letter-spacing: .2px;
  text-align: center;
  line-height: 1.05;
  margin: 0;
}
.hero .sub{
  font-size: clamp(1rem, 2.1vw, 1.25rem);
  color: var(--muted);
  text-align:center;
  max-width: 56ch;
}
.hero .soon{
  margin-top: .25rem;
  font-weight: 800;
  letter-spacing: .3px;
}

/* Section titles */
h2{ font-size: clamp(1.35rem, 3vw, 2rem); margin:0 0 .5rem 0; }

/* Cards */
.card{
  background: linear-gradient(180deg, #0b0e12, #0a0d10);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 2.2vw, 2rem);
}

/* Grid */
.grid{ display:grid; gap: var(--space-6); }
.grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 860px){ .grid--2{ grid-template-columns: 1fr; } }

/* Buttons */
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#000;
  font-weight:900;
  text-decoration:none;
  box-shadow: 0 16px 40px rgba(66,165,255,.35);
  transition: transform .12s ease, filter .2s ease;
}
.button:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.button--ghost{
  background: transparent; color: var(--text);
  border: 1px solid rgba(255,255,255,.12); box-shadow:none;
}

/* Form */
form{
  max-width: 560px;
  margin: var(--space-8) auto 0;
  background: #0b0f13;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 2.2vw, 2rem);
}
.form-row{ margin-bottom: var(--space-5); }
label{ display:block; margin-bottom:.45rem; font-weight:800; }
input[type="text"], input[type="email"], textarea{
  width:100%; padding: 1rem 1rem;
  border-radius: 12px; border:1px solid rgba(255,255,255,.08);
  background:#070a0e; color:var(--text); font-size:1rem;
  outline:none; transition: box-shadow .15s ease, border .15s ease;
}
input:focus, textarea:focus{
  border-color: rgba(66,165,255,.8);
  box-shadow: 0 0 0 4px rgba(66,165,255,.2);
}
input::placeholder, textarea::placeholder{ color:#7c8a97; }
input[type="submit"]{
  width:100%; padding: 1rem 1.25rem; border:none; border-radius:12px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#000; font-weight:900; cursor:pointer;
  box-shadow: 0 16px 40px rgba(66,165,255,.35);
  transition: transform .12s ease, filter .2s ease;
}
input[type="submit"]:hover{ transform: translateY(-1px); filter:brightness(1.05); }

/* Footer */
.footer{ padding-block: 3rem; color: var(--muted); border-top:1px solid rgba(255,255,255,.06); text-align:center; }

/* Tiny motion */
.reveal{ opacity:0; transform: translateY(10px); animation: r .5s ease forwards; }
@keyframes r{ to{ opacity:1; transform:none; } }

/* =========================================================
   VaultPass – Legal / Secondary Pages
   (Appended styles, homepage unchanged)
========================================================= */

.page{ 
  max-width: 820px; 
  margin-inline: auto; 
  padding: var(--space-7) var(--space-4); 
  line-height: 1.65;
}

.page h1{ 
  font-size: clamp(1.75rem, 4vw, 2.5rem); 
  margin-bottom: var(--space-5); 
}

.page h2{ 
  font-size: clamp(1.25rem, 3vw, 1.75rem); 
  margin-top: var(--space-6); 
  margin-bottom: var(--space-3);
}

.page p, 
.page li{ 
  color: var(--muted); 
  font-size: 1rem; 
}

.page ul{ 
  padding-left: 1.25rem; 
}

.page a{ 
  color: var(--accent); 
  text-decoration: underline; 
}

.page a:hover{ 
  color: var(--accent-2); 
}

/* Simple header/footer bar for legal pages */
.simple-header, 
.simple-footer{ 
  border-bottom:1px solid rgba(255,255,255,.06); 
  border-top:1px solid rgba(255,255,255,.06); 
  padding: var(--space-4) var(--space-2); 
  text-align:center; 
}

.simple-footer{ 
  margin-top: var(--space-7); 
  color: var(--muted); 
  font-size: .9rem; 
}