/* SafeKey - 2FAuth site styles */
:root{
  --bg-1:#0f1222;
  --bg-2:#11162b;
  --accent:#41e0a4;
  --accent-2:#4da3ff;
  --text:#e9eef5;
  --muted:#b7c3d1;
  --card:#171b31;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}

html,body{
  margin:0; padding:0; min-height:100%; color:var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(65,224,164,.25), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(77,163,255,.2), transparent 60%),
    radial-gradient(1200px 700px at 50% 120%, rgba(65,224,164,.15), transparent 70%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1100px; margin:0 auto; padding:24px}

.header{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 24px; position:sticky; top:0; backdrop-filter: blur(8px);
  background:linear-gradient(180deg, rgba(17,22,43,.8), rgba(17,22,43,.4));
  border-bottom:1px solid rgba(255,255,255,.06);
  z-index:5;
}

.brand{display:flex; gap:12px; align-items:center}
.brand-logo{
  width:36px; height:36px; border-radius:10px; background:conic-gradient(from 120deg, var(--accent), var(--accent-2)); box-shadow:var(--shadow);
}
.brand h1{font-size:18px; margin:0; letter-spacing:.2px}

.nav{display:flex; gap:8px; flex-wrap:wrap}
.nav a{
  display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:10px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
.nav a:hover{background:rgba(255,255,255,.1)}

.hero{padding:56px 24px 16px}
.hero-grid{display:grid; grid-template-columns: 1.2fr 1fr; gap:32px; align-items:center}
.hero h2{font-size:40px; margin:0 0 12px}
.hero p{font-size:18px; color:var(--muted); margin:0 0 16px}
.cta{
  display:inline-flex; gap:10px; align-items:center; padding:12px 16px; background:var(--accent); color:#0a0e1f; border-radius:12px; font-weight:700; box-shadow:var(--shadow)
}
.badge{display:inline-block; padding:6px 10px; border:1px solid rgba(255,255,255,.15); border-radius:999px; color:var(--muted); margin-bottom:10px; background:rgba(255,255,255,.04)}

.phone{
  background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:16px; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
}
.phone img{display:block; width:100%; height:auto; border-radius:22px; filter: drop-shadow(0 10px 25px rgba(0,0,0,.35));}
.phone.small{transform: scale(.5); transform-origin: top right;} /* visually “two times smaller” */

.features{padding:32px 24px}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.card{
  background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; box-shadow:var(--shadow);
}
.card h3{margin:0 0 8px}
.card p{margin:0; color:var(--muted)}

.gallery{padding:12px 24px 48px}
.gallery .row{display:grid; grid-template-columns: repeat(2, 1fr); gap:18px}
.gallery .shot{background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:10px; display:flex; align-items:center; justify-content:center}
.gallery img{width:100%; height:auto; border-radius:12px}

.support{padding:32px 24px 56px}
.support .wrap{display:flex; gap:18px; align-items:center; justify-content:space-between; background:linear-gradient(180deg, rgba(65,224,164,.12), rgba(77,163,255,.08)); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:18px}
.support p{margin:0; color:var(--text)}
.support a.btn{background:rgba(255,255,255,.1); padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.18)}

.footer{padding:24px; color:var(--muted); text-align:center; border-top:1px solid rgba(255,255,255,.06)}

.main{min-height:60vh}

section.prose{
  background:rgba(0,0,0,.12); padding:24px; border:1px solid rgba(255,255,255,.1); border-radius:14px; box-shadow:var(--shadow)
}
.prose h2{margin-top:0}
.prose h3{margin-bottom:8px}
.prose p, .prose li{color:var(--muted); line-height:1.65}
.prose ol{padding-left:18px}

.bottom-nav{margin-top:24px; display:flex; gap:10px; flex-wrap:wrap}
.bottom-nav a{display:inline-flex; padding:10px 14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:12px}

@media (max-width: 900px){
  .hero-grid{grid-template-columns: 1fr; gap:12px}
  .phone.small{transform: scale(.75); transform-origin: top left;}
  .grid-3{grid-template-columns:1fr}
  .gallery .row{grid-template-columns:1fr}
}