/* HonuFon — shared styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { color: #e8f5f0; font-family: Georgia, serif; background: #061410; }
a { color: #5dcaa5; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Nav ── */
nav {
  background: #020c09;
  padding: 0 48px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #1a3d30;
  flex-wrap: wrap;
}
.nav-logo {
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.5px;
  margin-right: auto;
  padding: 14px 0;
  border-bottom: 3px solid transparent;
}
.nav-logo:hover { text-decoration: none; color: #5dcaa5; }
nav a {
  color: #9fd4c5;
  padding: 16px 16px;
  font-size: 15px;
  letter-spacing: 0.3px;
  border-bottom: 3px solid transparent;
  display: inline-block;
  transition: color 0.2s, border-color 0.2s;
}
nav a:hover, nav a.active {
  color: #5dcaa5;
  border-bottom: 3px solid #5dcaa5;
  text-decoration: none;
}

/* ── Header ── */
header {
  background: linear-gradient(135deg, #061410 0%, #2a6048 50%, #0d2b22 100%);
  padding: 40px 60px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
header h1 {
  font-size: 96px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -2px;
}
header .tagline {
  font-size: 17px;
  color: #9fd4c5;
  font-style: italic;
  margin-top: 14px;
  max-width: 460px;
  line-height: 1.5;
}
header .header-turtle { width: 280px; flex-shrink: 0; }
header .header-turtle img { width: 100%; }

/* ── Hero text ── */
.hero-text {
  background: linear-gradient(180deg, #0d2b22 0%, #1a3d30 100%);
  padding: 20px 60px 50px;
}
.hero-text p { font-size: 22px; max-width: 700px; line-height: 1.8; color: #c8e8df; }

/* ── Sections ── */
.sec1 { background: linear-gradient(135deg, #2a6048 0%, #0f2d24 60%, #0a1f18 100%); padding: 60px; }
.sec2 { background: linear-gradient(135deg, #061410 0%, #1a3d30 50%, #061410 100%); padding: 60px; }
.sec3 { background: linear-gradient(135deg, #2a6048 0%, #122b22 60%, #06120f 100%); padding: 60px; }
.sec4 { background: linear-gradient(135deg, #061410 0%, #1e4035 50%, #0a1f18 100%); padding: 60px; }
.sec5 { background: linear-gradient(135deg, #0a2018 0%, #162f25 50%, #061410 100%); padding: 60px; }

.section-left { display: flex; gap: 60px; align-items: center; }
.section-left .turtle { width: 220px; flex-shrink: 0; }
.section-left .turtle img { width: 100%; }
.section-left .text { flex: 1; }

.section-right { display: flex; gap: 60px; align-items: center; }
.section-right .turtle { width: 220px; flex-shrink: 0; order: 2; }
.section-right .turtle img { width: 100%; }
.section-right .text { flex: 1; order: 1; }

h2 { font-size: 36px; color: #5dcaa5; margin-bottom: 16px; font-weight: 700; }
h3 { font-size: 22px; color: #9fd4c5; margin-bottom: 10px; font-weight: 700; }
p { font-size: 18px; line-height: 1.8; color: #c8e8df; margin-bottom: 12px; }
ul { color: #c8e8df; font-size: 17px; line-height: 1.8; padding-left: 22px; margin-bottom: 12px; }
ul li { margin-bottom: 4px; }

/* ── Download section ── */
.download-section {
  background: linear-gradient(135deg, #061410 0%, #0a1f1a 50%, #061410 100%);
  padding: 70px 60px;
  text-align: center;
}
.download-section h2 { font-size: 42px; margin-bottom: 16px; }
.download-section > p { margin-bottom: 32px; font-size: 20px; color: #9fd4c5; }

/* ── Buttons ── */
.btn {
  display: inline-block;
  background: #1d9e75;
  color: #ffffff;
  padding: 18px 48px;
  border-radius: 50px;
  font-size: 20px;
  text-decoration: none;
  font-family: Georgia, serif;
  margin: 8px;
  transition: background 0.2s, color 0.2s;
}
.btn:hover { background: #5dcaa5; color: #0a1f1a; text-decoration: none; }

.btn-gplay {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #111;
  color: #fff;
  padding: 12px 24px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid #2a6048;
  margin: 8px;
  transition: background 0.2s, border-color 0.2s;
}
.btn-gplay:hover { background: #1a2e28; border-color: #5dcaa5; text-decoration: none; }
.btn-gplay .gp-text { text-align: left; line-height: 1.25; }
.btn-gplay .gp-text small {
  font-size: 11px;
  color: #9fd4c5;
  letter-spacing: 0.8px;
  font-family: sans-serif;
  display: block;
  text-transform: uppercase;
}
.btn-gplay .gp-text strong { font-size: 22px; font-family: sans-serif; font-weight: 500; color: #fff; }

/* ── Blocked counter banner ── */
.blocked-banner {
  background: linear-gradient(90deg, #020c09, #0f2d24, #020c09);
  border-top: 1px solid #1a3d30;
  border-bottom: 1px solid #1a3d30;
  padding: 14px 20px;
  text-align: center;
  font-size: 17px;
  color: #9fd4c5;
  letter-spacing: 0.3px;
}
.blocked-banner .count {
  color: #5dcaa5;
  font-weight: bold;
  font-size: 21px;
}

/* ── Pricing grid ── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.pricing-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid #2a4a3a;
  border-radius: 12px;
  padding: 28px 22px;
}
.pricing-card.featured {
  border-color: #5dcaa5;
  background: rgba(29, 158, 117, 0.08);
}
.pricing-card h3 { color: #5dcaa5; margin-bottom: 6px; }
.pricing-card .price { font-size: 38px; color: #fff; font-weight: 900; margin: 8px 0 4px; }
.pricing-card .price small { font-size: 14px; color: #9fd4c5; font-weight: normal; }
.pricing-card ul { font-size: 15px; margin-top: 14px; }

/* ── FAQ ── */
.faq-item { border-bottom: 1px solid #1a3d30; padding: 22px 0; }
.faq-q { color: #5dcaa5; font-size: 20px; margin-bottom: 10px; }
.faq-item p { font-size: 17px; }

/* ── Content / doc pages ── */
.content-wrap {
  background: linear-gradient(180deg, #0d2b22 0%, #061410 100%);
  padding: 60px 80px;
  min-height: 60vh;
}
.content-wrap h1 { font-size: 42px; color: #5dcaa5; margin-bottom: 8px; }
.content-wrap .updated { font-size: 14px; color: #5f8a7a; margin-bottom: 32px; }
.content-wrap h2 { font-size: 24px; margin-top: 28px; margin-bottom: 10px; }
.content-wrap p, .content-wrap ul { font-size: 17px; }

/* ── VM Portal ── */
.portal-wrap {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #061410 0%, #1a3d30 50%, #061410 100%);
  padding: 60px;
}
.portal-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid #2a6048;
  border-radius: 16px;
  padding: 48px;
  width: 100%;
  max-width: 420px;
  text-align: center;
}
.portal-card h2 { margin-bottom: 12px; }
.portal-card p { font-size: 16px; margin-bottom: 24px; }
.portal-input {
  width: 100%;
  padding: 14px 18px;
  border-radius: 8px;
  border: 1px solid #2a6048;
  background: rgba(255,255,255,0.06);
  color: #e8f5f0;
  font-size: 17px;
  font-family: Georgia, serif;
  margin-bottom: 14px;
  outline: none;
}
.portal-input:focus { border-color: #5dcaa5; }
.portal-btn {
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  border: none;
  background: #1d9e75;
  color: #fff;
  font-size: 18px;
  font-family: Georgia, serif;
  cursor: pointer;
  transition: background 0.2s;
}
.portal-btn:hover { background: #5dcaa5; color: #0a1f1a; }

/* ── Footer ── */
footer {
  background: linear-gradient(180deg, #061410 0%, #020c09 100%);
  padding: 28px 60px;
  text-align: center;
  color: #5f8a7a;
  border-top: 1px solid #1a3d30;
}
footer p { font-size: 14px; margin-bottom: 6px; color: #5f8a7a; }
footer a { color: #5dcaa5; }

/* ── Download tagline ── */
.download-tagline {
  font-size: 17px;
  color: #9fd4c5;
  font-style: italic;
  margin-top: 22px;
  letter-spacing: 0.2px;
}

/* ── Stats Dashboard ── */
.dash-wrap {
  min-height: 80vh;
  background: linear-gradient(135deg, #061410 0%, #1a3d30 50%, #061410 100%);
  padding: 40px 48px;
}
.dash-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}
.dash-header h2 { margin: 0; font-size: 28px; }
.dash-header .tier-badge {
  background: #1d9e75;
  color: #fff;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  font-family: sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 36px;
}
.stat-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid #1a3d30;
  border-radius: 12px;
  padding: 20px 18px;
  text-align: center;
}
.stat-card .stat-num {
  font-size: 36px;
  font-weight: 900;
  color: #5dcaa5;
  line-height: 1;
  margin-bottom: 6px;
}
.stat-card .stat-label {
  font-size: 13px;
  color: #9fd4c5;
  font-family: sans-serif;
  letter-spacing: 0.5px;
}
.stat-card.alert .stat-num { color: #e88a8a; }
.stat-card.warn .stat-num { color: #f0c060; }
.stat-card.neutral .stat-num { color: #c8e8df; }

.dash-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #1a3d30;
  margin-bottom: 24px;
}
.dash-tab {
  padding: 10px 22px;
  font-size: 15px;
  color: #9fd4c5;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: Georgia, serif;
  transition: color 0.2s, border-color 0.2s;
}
.dash-tab:hover { color: #5dcaa5; }
.dash-tab.active { color: #5dcaa5; border-bottom-color: #5dcaa5; }

.dash-table-wrap { overflow-x: auto; }
.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.dash-table th {
  text-align: left;
  padding: 10px 14px;
  color: #5dcaa5;
  font-size: 13px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-bottom: 1px solid #1a3d30;
  font-family: sans-serif;
  font-weight: 600;
}
.dash-table td {
  padding: 10px 14px;
  color: #c8e8df;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dash-table tr:hover td { background: rgba(255,255,255,0.03); }
.action-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-family: sans-serif;
  letter-spacing: 0.5px;
}
.action-BLOCKED, .action-BLACKLISTED { background: rgba(232,138,138,0.2); color: #e88a8a; }
.action-HUMAN_PASS { background: rgba(93,202,165,0.2); color: #5dcaa5; }
.action-SCREENING, .action-WHITELIST_VM { background: rgba(240,192,96,0.2); color: #f0c060; }
.action-limit_exceeded { background: rgba(180,120,220,0.2); color: #c890e8; }
.dash-empty { text-align: center; padding: 48px; color: #5f8a7a; font-size: 16px; }
.dash-logout { 
  margin-left: auto; 
  background: none; 
  border: 1px solid #2a4a3a; 
  color: #9fd4c5; 
  padding: 8px 18px; 
  border-radius: 20px; 
  cursor: pointer; 
  font-family: Georgia, serif;
  font-size: 14px;
}
.dash-logout:hover { border-color: #5dcaa5; color: #5dcaa5; }

/* ── Mobile ── */
@media (max-width: 768px) {
  header { 
    flex-direction: row; 
    padding: 20px 20px 14px; 
    gap: 12px; 
    align-items: flex-start;
  }
  header h1 { font-size: 44px; }
  header .tagline { font-size: 14px; margin-top: 10px; max-width: none; }
  header .header-turtle { width: 88px; flex-shrink: 0; align-self: flex-start; margin-top: 4px; }
  header .header-turtle img { width: 100%; }
  .sec1, .sec2, .sec3, .sec4, .sec5 { padding: 40px 24px; }
  .section-left, .section-right { flex-direction: column; gap: 30px; }
  .section-right .turtle { order: 0; }
  .hero-text { padding: 20px 24px 32px; }
  .hero-text p { font-size: 18px; }
  .download-section { padding: 40px 24px; }
  nav { padding: 0 12px; }
  nav a { padding: 12px 10px; font-size: 13px; }
  .content-wrap { padding: 36px 24px; }
  .portal-wrap { padding: 24px; }
  .portal-card { padding: 32px 22px; }
  footer { padding: 24px; }
}