:root {
  --bg: #0d1220;
  --bg-2: #121a2b;
  --card: #17233a;
  --line: #294061;
  --text: #e7eefc;
  --muted: #adbbd6;
  --brand: #59a8ff;
  --brand-2: #2f72ea;
  --orange: #ff9100;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  font-family: "Montserrat", "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 12%, #1f396814 0%, transparent 38%),
    radial-gradient(circle at 90% 88%, #3a2a1217 0%, transparent 35%),
    linear-gradient(145deg, #0b1020 0%, #10192c 56%, #0d1220 100%);
}

a { color: inherit; }

.container {
  width: min(1160px, 94vw);
  margin: 0 auto;
}

.page-header {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 14px 0;
  background: #0b1220e8;
  backdrop-filter: blur(6px);
}

.header-inner {
  width: min(1160px, 94vw);
  margin: 0 auto;
  background: linear-gradient(140deg, #162137 0%, #131d30 100%);
  border: 1px solid #284061;
  border-radius: 12px;
  box-shadow: 0 10px 24px #0000004d;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
}

.brand-logo {
  height: 52px;
  width: auto;
  display: block;
}

.header-nav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.header-nav a {
  text-decoration: none;
  color: #cfdbf2;
  font-weight: 600;
  font-size: 0.95rem;
}

.header-nav a:hover,
.header-nav a:focus-visible {
  color: #87beff;
}

.header-cta {
  text-decoration: none;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 800;
}

.main {
  padding: 44px 0 60px;
}

.hero {
  background: linear-gradient(180deg, #15233a 0%, #111a2e 100%);
  border: 1px solid #2b4469;
  border-radius: 16px;
  padding: 22px;
}

.kicker {
  margin: 0;
  color: #8fbeff;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  font-weight: 700;
}

h1 {
  margin: 10px 0 8px;
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  line-height: 1.08;
}

.subtitle {
  margin: 0;
  color: var(--muted);
  line-height: 1.62;
}

.grid {
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--card);
  border: 1px solid #2d4567;
  border-radius: 12px;
  padding: 16px;
}

.card h3 {
  margin: 0 0 8px;
  color: #9fcbff;
}

.card p,
.card li {
  color: #c5d4ec;
  line-height: 1.56;
}

.card ul {
  margin: 0;
  padding-left: 18px;
}

.tag {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid #3a5781;
  background: #1d2f4d;
  color: #b7d7ff;
  font-size: 0.82rem;
  font-weight: 700;
}

.price {
  margin: 8px 0 10px;
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffcb8c;
}

.price small {
  font-size: 0.95rem;
  color: #d8b98f;
  font-weight: 600;
}

.notice {
  margin-top: 18px;
  background: linear-gradient(140deg, #1c2d4b 0%, #1a2a43 100%);
  border: 1px solid #395986;
  border-radius: 12px;
  padding: 14px;
  color: #cde1ff;
  font-weight: 600;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  padding: 0 16px;
  border: 1px solid #4d6f9c;
  background: linear-gradient(135deg, #243959, #1b2e4a);
}

.btn-primary {
  border: 1px solid #3f8cff;
  background: linear-gradient(135deg, #2f72ea, #59a8ff);
}

.section-title {
  margin: 28px 0 12px;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
}

.reviews-section {
  margin-top: 28px;
  border: 1px solid #2c3552;
  border-radius: 16px;
  background: linear-gradient(150deg, #111a33 0%, #0f162b 55%, #0d1426 100%);
  padding: clamp(14px, 2.2vw, 22px);
}

.reviews-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.reviews-head h2 {
  margin: 0;
  font: 700 clamp(1rem, 1.9vw, 1.35rem) "Montserrat", sans-serif;
  color: #ced7e8;
}

.reviews-link {
  text-decoration: none;
  color: #d3dae6;
  font: 700 0.88rem/1 "Montserrat", sans-serif;
  border: 1px solid #616b80;
  border-radius: 8px;
  padding: 8px 12px;
  background: linear-gradient(130deg, #3d4453 0%, #5a6272 100%);
  transition: filter 0.12s ease;
}

.reviews-link:hover,
.reviews-link:focus-visible {
  filter: brightness(1.04);
}

.reviews-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b8c4de;
  margin-bottom: 14px;
}

.reviews-rating {
  font: 700 1rem/1 "Montserrat", sans-serif;
  color: #e6edf9;
}

.reviews-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 24px) / 3);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #2f3f67 transparent;
}

.reviews-grid::-webkit-scrollbar {
  height: 7px;
}

.reviews-grid::-webkit-scrollbar-thumb {
  background: #2f3f67;
  border-radius: 999px;
}

.review-card {
  border: 1px solid #2d3a61;
  border-radius: 12px;
  background: linear-gradient(155deg, #192243 0%, #141d38 55%, #121a31 100%);
  padding: 12px;
  scroll-snap-align: start;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.review-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #4b5e89;
  background: linear-gradient(150deg, #223358 0%, #1a2846 100%);
  position: relative;
  flex: 0 0 auto;
}

.review-avatar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #d7e2f7;
}

.review-avatar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 14px;
  height: 8px;
  margin-left: -7px;
  border-radius: 8px 8px 5px 5px;
  background: #d7e2f7;
}

.review-author {
  margin: 0;
  font: 700 0.95rem/1.25 "Montserrat", sans-serif;
  color: #d8e1f2;
}

.review-stars {
  color: #ffb347;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  margin-bottom: 7px;
}

.review-text {
  margin: 0;
  color: #b6c3dd;
  font-size: 0.9rem;
  line-height: 1.5;
}

.reviews-note {
  margin: 12px 0 0;
  color: #8ea0c2;
  font-size: 0.82rem;
}

.simple-list {
  margin: 0;
  padding-left: 20px;
  color: #c7d6ee;
  line-height: 1.7;
}

.simple-list li + li { margin-top: 4px; }

.site-footer {
  margin-top: 52px;
  border-top: 1px solid #2a3242;
  padding-bottom: 94px;
  background:
    radial-gradient(circle at 12% 22%, #2f72ea14 0%, transparent 35%),
    radial-gradient(circle at 86% 78%, #5db8ff14 0%, transparent 33%),
    linear-gradient(145deg, #11151d 0%, #0e131a 56%, #0b0f15 100%);
}

.footer-inner {
  width: min(1160px, 94vw);
  margin: 0 auto;
  padding: 32px 0 28px;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.footer-logo {
  width: auto;
  height: 52px;
  display: block;
}

.footer-social {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-social a {
  text-decoration: none;
  width: 40px;
  height: 40px;
  opacity: 0.9;
}

.footer-social a img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}

.footer-social .blog-link img {
  width: 34px;
  height: 34px;
}

.footer-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid #2a3242;
}

.footer-links-row a {
  color: #b0bdd6;
  text-decoration: none;
  font: 600 0.9rem/1.3 "Montserrat", sans-serif;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.footer-columns h3 {
  margin: 0 0 10px;
  color: #9ec9ff;
  font: 700 1.08rem/1.3 "Montserrat", sans-serif;
}

.footer-columns a {
  display: block;
  text-decoration: none;
  color: #afbdd6;
  font-weight: 300;
  margin-bottom: 8px;
  font-size: 0.93rem;
  line-height: 1.45;
}

.footer-bottom {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #2a3242;
}

.footer-bottom-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 16px;
}

.footer-legal {
  grid-column: 2;
  justify-self: center;
}

.footer-legal p {
  margin: 0;
  color: #91a1bc;
  font-size: 0.84rem;
  line-height: 1.5;
  text-align: center;
}

.footer-legal p + p { margin-top: 4px; }

@media (max-width: 980px) {
  .grid-4,
  .grid-3,
  .grid-2,
  .footer-columns { grid-template-columns: 1fr; }

  .header-nav { display: none; }

  .footer-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .reviews-grid {
    grid-auto-columns: calc((100% - 12px) / 2);
  }

  .footer-bottom-row {
    align-items: flex-start;
    flex-direction: column;
    display: flex;
  }
}

/* HTWS MOBILE CENTER FIX 2026-04-20 */
@media (max-width: 760px) {
  .container,
  main,
  .main,
  .header-inner,
  .footer-inner {
    text-align: center;
  }

  .header-inner {
    justify-content: center;
    flex-wrap: wrap;
  }

  .brand,
  .header-cta,
  .client-btn {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions,
  .hero-highlights,
  .footer-social,
  .footer-links-row,
  .billing-controls,
  .section-actions {
    justify-content: center;
  }

  h1,
  h2,
  h3,
  h4,
  .kicker,
  .subtitle,
  .section-sub,
  .hero-description,
  .breadcrumb,
  .plan-target,
  .plan-price,
  .price,
  .price-note,
  .faq-intro,
  .faq-grid p,
  .footer-columns h3,
  .footer-columns a,
  .footer-links-row a,
  .footer-legal p {
    text-align: center;
  }

  .hero-description,
  .section-sub,
  .subtitle,
  .faq-grid p,
  .plan-target {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-top,
  .footer-bottom-row {
    align-items: center !important;
  }

  .footer-columns section {
    text-align: center;
  }

  .footer-columns a {
    margin-left: auto;
    margin-right: auto;
  }

  .reviews-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* HTWS MOBILE FINE TUNE 2026-04-20 */
@media (max-width: 760px) {
  .container,
  .header-inner,
  .footer-inner,
  main,
  .main {
    width: min(94vw, 680px);
    margin-left: auto;
    margin-right: auto;
  }

  .hero,
  .hero-grid,
  .hero-content,
  .hero-media,
  .plans-grid,
  .benefits-grid,
  .modules-grid,
  .steps,
  .faq-grid,
  .split,
  .table-wrap,
  .comparison-table,
  .billing-controls,
  .cta-row,
  .section-actions {
    margin-left: auto;
    margin-right: auto;
  }

  .card,
  .plan-card,
  .benefits-grid article,
  .modules-grid article,
  .steps article,
  .faq details,
  .feature-card,
  .service-card,
  .pricing-card,
  .contact-card {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  th:first-child,
  td:first-child {
    text-align: center !important;
  }

  .btn,
  .btn-primary,
  .btn-ghost,
  .plan-btn,
  .header-cta,
  .client-btn {
    margin-left: auto;
    margin-right: auto;
  }
}