/* Fred's Webs - lightweight, mobile-first */
:root{
  --bg0:#050816;
  --bg1:#0B1B3A;
  --bg2:#120A2E;
  --card: rgba(255,255,255,0.06);
  --card2: rgba(255,255,255,0.08);
  --stroke: rgba(255,255,255,0.12);
  --text:#F8FAFC;
  --muted:#CBD5E1;
  --muted2:#A5B4FC;
  --accent1:#7C3AED;
  --accent2:#22D3EE;
  --shadow: 0 18px 55px rgba(0,0,0,0.35);
  --radius: 18px;
  --container: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--text);
  background: var(--bg0);
  line-height: 1.5;
}

a{color:inherit}
img{max-width:100%; height:auto}

.bg{
  min-height:100vh;
  background-image: url("../img/tech-bg.svg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.container{
  width: min(100% - 28px, var(--container));
  margin-inline:auto;
}

.site-header{
  position: sticky;
  top:0;
  z-index: 50;
  background: rgba(4,8,22,0.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.header-inner{
  padding: 10px 0 12px;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 10px;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.brand img{
  width: 170px;
  height: auto;
}

.nav-buttons{
  width:100%;
  display:flex;
  justify-content:center;
  gap: 8px;
}

.nav-buttons a{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 1 1 0;
  padding: 8px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  font-size: 12px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.nav-buttons a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.18);
}

.nav-buttons a.active{
  background: linear-gradient(135deg, rgba(124,58,237,0.22), rgba(34,211,238,0.18));
  border-color: rgba(34,211,238,0.35);
}

@media (min-width: 720px){
  .header-inner{gap: 12px}
  .brand img{width: 210px}
  .nav-buttons{max-width: 760px}
  .nav-buttons a{font-size: 13px; padding: 9px 10px}
}

.hero{
  padding: 64px 0 34px;
  text-align:center;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--muted);
  font-weight: 650;
  font-size: 13px;
}

.badge .dot{
  width:10px;height:10px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--accent2), var(--accent1));
  box-shadow: 0 0 22px rgba(34,211,238,0.25);
}

.hero h1{
  margin: 16px auto 10px;
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.9px;
  max-width: 18ch;
}

.hero p{
  margin: 0 auto 18px;
  max-width: 62ch;
  color: var(--muted);
  font-size: 16px;
}

.actions{
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  text-decoration:none;
  font-weight: 800;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.18);}
.btn.primary{
  background: linear-gradient(135deg, rgba(124,58,237,0.85), rgba(34,211,238,0.65));
  border-color: rgba(255,255,255,0.12);
}
.btn.primary:hover{filter: brightness(1.05);}

.section{
  padding: 34px 0;
}

.grid{
  display:grid;
  gap: 14px;
}

@media (min-width: 860px){
  .grid.cols-3{grid-template-columns: repeat(3, 1fr);}
  .grid.cols-2{grid-template-columns: repeat(2, 1fr);}
}

.card{
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.card h3{
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: -0.2px;
}
.card p{margin:0; color: var(--muted);}

.kicker{
  margin: 0 0 12px;
  color: var(--muted2);
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: 12px;
}

.split{
  display:grid;
  gap: 16px;
  align-items: start;
}
@media (min-width: 980px){
  .split{grid-template-columns: 1.1fr 0.9fr;}
}

ul.clean{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
ul.clean li{margin: 6px 0;}

.hr{
  height:1px;
  background: rgba(255,255,255,0.10);
  margin: 22px 0;
  border:0;
}

.callout{
  background: linear-gradient(135deg, rgba(124,58,237,0.16), rgba(34,211,238,0.12));
  border: 1px solid rgba(34,211,238,0.22);
  border-radius: var(--radius);
  padding: 18px;
}

.callout h3{margin:0 0 6px;}
.small{font-size: 13px; color: var(--muted);}

.form{
  display:grid;
  gap: 12px;
}
.field{
  display:grid;
  gap: 6px;
}
label{font-weight: 750; font-size: 13px; color: var(--muted2);}
input, textarea, select{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  color: var(--text);
  outline: none;
}
textarea{min-height: 130px; resize: vertical;}
input:focus, textarea:focus, select:focus{border-color: rgba(34,211,238,0.45); box-shadow: 0 0 0 4px rgba(34,211,238,0.12);}

.footer{
  padding: 26px 0 36px;
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  text-align:center;
}
.footer a{color: rgba(255,255,255,0.85); text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,0.28);}
.footer a:hover{border-bottom-color: rgba(255,255,255,0.5);}

.notice{
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--muted);
}
.notice.good{border-color: rgba(34,211,238,0.25); background: rgba(34,211,238,0.10);}
.notice.bad{border-color: rgba(244,63,94,0.25); background: rgba(244,63,94,0.10);}

/* Utility classes for page headings and subtitles. Use these instead of inline styles. */
.page-title{
  margin: 0 0 10px;
  font-size: clamp(26px, 4.2vw, 44px);
  letter-spacing: -0.7px;
}
.page-subtitle{
  margin: 0;
  color: var(--muted);
  max-width: 72ch;
}