/* ========================

   GLOBAL VARIABLES

======================== */

:root{

  --bg:#0b0f19;

  --bg2:#060913;

  --card:rgba(255,255,255,.06);

  --stroke:rgba(255,255,255,.10);

  --text:#fff;

  --muted:rgba(255,255,255,.72);

  --accent:#48dced;

  --accent2:#3a68f9;

  --radius:18px;

}

/* Reset */

*{ box-sizing:border-box; }

body{

  margin:0;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto;

  color:var(--text);

  background:

    radial-gradient(900px 520px at 25% 10%, rgba(72,220,237,0.16), transparent 60%),

    radial-gradient(900px 520px at 75% 20%, rgba(58,104,249,0.14), transparent 60%),

    linear-gradient(180deg, var(--bg), var(--bg2));

}

.wrap{

  max-width:920px;

  margin:0 auto;

  padding:30px 20px 60px;

}

.card{

  border:1px solid var(--stroke);

  background:var(--card);

  border-radius:var(--radius);

  padding:28px;

}

h1{

  font-size:28px;

  margin:8px 0;

}

p{

  color:var(--muted);

  line-height:1.7;

  font-size:14px;

}