/* style.css */
:root{
  --ink:#102a43; --muted:#5b677a; --bg:#f6f8fb; --card:#fff; --edge:#e6eaf0;
  --primary:#2156a5; --primaryDark:#1b4a8f; --accent:#0ea5a5; --info:#3b82f6;
  --warn:#b45309; --good:#16a34a; --bad:#b91c1c;
}

*{box-sizing:border-box}
body{
  font-family: Arial, sans-serif;
  margin: 0;
  line-height: 1.55;
  background: var(--bg);
  color: var(--ink);
}
a{ color: var(--info); text-decoration: underline; }
.container{ max-width: 1040px; margin: 0 auto; padding: 22px; }

/* Top nav */
.topbar{
  background: #ffffff;
  border-bottom: 1px solid var(--edge);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-inner{
  max-width: 1040px;
  margin: 0 auto;
  padding: 14px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.brand{ display:flex; flex-direction:column; }
.brand-title{ font-size: 16px; font-weight: 900; letter-spacing: -0.1px; margin: 0; }
.brand-sub{ font-size: 12px; color: var(--muted); margin-top: 2px; }

.nav{ display:flex; gap: 10px; flex-wrap: wrap; justify-content:flex-end; }
.nav a{
  text-decoration:none;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid #cfd6e0;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(16,42,67,.06);
}
.nav a:hover{ border-color:#9fb3c8; }
.nav a.active{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Home hero */
.hero{
  background: linear-gradient(180deg, #eef3ff 0%, #f6f8fb 100%);
  border: 1px solid #cfd8ff;
  border-radius: 16px;
  padding: 24px 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  text-align: center;
}
.hero h1{
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.2px;
}
.hero p{
  margin: 10px auto 0 auto;
  color: var(--muted);
  font-size: 14px;
  max-width: 780px;
}
.hero-actions{ margin-top: 14px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

.card{
  background: var(--card);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  margin: 18px 0;
}
.card.soft{ background:#eef3ff; border-left: 6px solid var(--primary); }

.center{ text-align:center; }
.narrow{ max-width: 860px; margin-left:auto; margin-right:auto; }

h2{ margin:0 0 10px 0; font-size: 22px; font-weight: 900; }
h3{ margin:0 0 10px 0; font-size: 18px; font-weight: 900; }
p{ margin: 10px 0; }
.small{ font-size: 12px; color: var(--muted); }

.hr{ height:1px; background: var(--edge); margin: 14px 0; border:none; }

label{ display:block; font-weight: 900; margin-top: 12px; }
input[type="number"], input[type="text"], textarea{
  width:100%;
  max-width: 620px;
  padding: 12px 12px;
  border:1px solid #cfd6e0;
  border-radius: 10px;
  margin-top: 6px;
  font-size: 15px;
}
textarea{ height: 130px; }

.btn{
  display:inline-block;
  margin-top: 12px;
  padding: 12px 16px;
  border:none;
  border-radius: 10px;
  background: var(--primary);
  color:#fff;
  cursor:pointer;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(16,42,67,.15);
}
.btn:hover{ background: var(--primaryDark); }
.btn.secondary{
  background:#eef2f7;
  color: var(--ink);
  border:1px solid #cfd6e0;
}
.btn.secondary:hover{ background:#e7ecf4; }

.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.pill{
  display:inline-flex; align-items:center; gap:6px;
  background:#eef4ff; color: var(--ink);
  border:1px solid #cdd9ff;
  padding:6px 12px; border-radius:999px;
  font-size:12px; font-weight:900;
}

.stat{
  background:#f0f9ff;
  border:1px solid #cfe8ff;
  border-left:6px solid var(--info);
  padding:14px;
  border-radius:12px;
  max-width: 860px;
}
.stat.primary{ background:#eef3ff; border-color:#cfd8ff; border-left-color: var(--primary); }
.stat.accent{ background:#ecfcf8; border-color:#b9efe6; border-left-color: var(--accent); }
.stat.good{ background:#ecfdf3; border-color:#bbf7d0; border-left-color: var(--good); }
.stat.bad{ background:#fef2f2; border-color:#fecaca; border-left-color: var(--bad); }

.stat-title{
  font-size:12px;
  color:#000;
  letter-spacing:.02em;
  text-transform: uppercase;
  font-weight: 900;
}
.stat-value{
  font-size: 36px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.1;
  margin-top: 2px;
}
.stat-note{
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}

.guide{
  background:#fff8e7;
  border:1px solid #f2d8a7;
  border-left:6px solid #eab308;
  padding:16px;
  border-radius:12px;
  max-width: 920px;
  margin: 10px 0 16px 0;
}
.guide h4{ margin:0 0 8px 0; font-size: 18px; font-weight: 900; }
.guide ol{ margin: 8px 0 0 18px; }
.guide li{ margin: 6px 0; font-size: 16px; }

/* Tooltip info icon */
.info{
  display:inline-flex; justify-content:center; align-items:center;
  width:18px; height:18px; border-radius:999px;
  background:#e8eefc; color:#174;
  font-size:12px; font-weight:900;
  border:1px solid #cdd9ff;
  cursor:default; position:relative;
  margin-left:6px;
}
.info:hover::after{
  content: attr(data-tip);
  position:absolute; top:120%; left:50%; transform:translateX(-50%);
  background:#111827; color:#fff;
  padding:8px 10px; border-radius:8px;
  font-size:12px; width:max-content; max-width: 340px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  z-index:10; white-space:normal;
}
.info:hover::before{
  content:'';
  position:absolute; top:110%; left:50%; transform:translateX(-50%);
  border:6px solid transparent;
  border-bottom-color:#111827;
}

/* Video placeholder */
.video-shell{
  border: 1px solid var(--edge);
  background: #ffffff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.video-embed{
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 12px;
  overflow: hidden;
  background: #0b1220;
}
.video-embed iframe{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  border:0;
}
.video-caption{
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* Coming soon block */
.coming{
  background: #ffffff;
  border: 1px dashed #cfd6e0;
  border-radius: 14px;
  padding: 18px;
  text-align: center;
}
.coming .tag{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #cfd6e0;
  background:#f3f4f6;
  font-weight:900;
  font-size:12px;
}
.coming h2{ margin-top: 10px; }
.coming p{ max-width: 760px; margin: 10px auto; color: var(--muted); }

.footer{
  margin-top: 18px;
  color: var(--muted);
  font-size: 12px;
  padding: 18px 0 26px 0;
  text-align: center;
}
.footer-box{
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 14px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
}
.footer strong{ color: var(--ink); }
.footer a{ color: var(--info); }