:root{
  --accent1: #00ffcc;
  --accent2: #00ccff;

  --bg: #0b0f14; /* 🔥 dark background */
  --surface: rgba(255,255,255,0.04); /* glass feel */
  
  --text: #e6edf3; /* light text */
  --muted: #9ca3af;

  --border: rgba(255,255,255,0.08);
}

/* reset */
*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: 'Segoe UI', Inter, system-ui, -apple-system, 'Helvetica Neue', Arial;

  background: var(--bg);
  color: var(--text);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* layout */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

main{
  padding:40px 0; /* 🔥 more breathing space */
}

/* typography */
h1,h2,h3{
  margin:0 0 14px;
  font-weight:700;
}

p{
  margin:0 0 16px;
  color:var(--muted);
  line-height:1.6; /* 🔥 readability */
}

/* buttons */
.btn{
  display:inline-block;
  padding:12px 20px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  transition: all 0.25s ease;
}

.btn.primary{
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  color:#06121a;
  box-shadow: 0 0 15px rgba(0,255,204,0.25);
}

.btn.primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(0,255,204,0.4);
}

.btn.outline{
  background: transparent;
  border:1px solid var(--border);
  color: var(--text);
}

.btn.outline:hover{
  border-color: var(--accent2);
  color: var(--accent2);
}

/* section title */
.section-title{
  text-align:center;
  margin-bottom:28px;
  font-size:30px;

  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* helper */
.muted{
  color: var(--muted);
}