* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  background: #ffffff;
  color: #17191b;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.58;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
  background: #f8f9fa;
}

a {
  color: #17191b;
  text-decoration: none;
}

.viewport-spacer    { height: 18vh; min-height: 140px; }
.hero-spacer        { height: 32vh; min-height: 240px; max-height: 360px; }
.spacer-large       { height: 20vh; min-height: 160px; }
.spacer-xl          { height: 28vh; min-height: 220px; }
.spacer-xxl         { height: 40vh; min-height: 320px; }

.logo-container {
  text-align: center;
  padding: 0 20px;
  margin: 1.8rem 0 3.2rem;
}

.section-intro {
  text-align: center;
  padding: 0 24px;
  margin-bottom: 3.2rem;
}

h1 {
  font-size: clamp(2.5rem, 6.5vw, 3.6rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  margin-bottom: 0.5rem;
  line-height: 1.05;
}

.subtitle {
  color: #5f6773;
  font-size: clamp(1.12rem, 2.6vw, 1.32rem);
  font-weight: 400;
  opacity: 0.94;
}

.lead {
  font-size: 1.3rem;
  font-weight: 500;
  margin: 1.8rem 0 1.4rem;
  color: #1f2329;
}

.text-block {
  max-width: 660px;
  margin: 0 auto;
  padding: 0 28px;
  color: #22272e;
}

.text-block p {
  margin: 1.35em 0;
  font-size: 1.09rem;
}

h2 {
  font-size: clamp(1.8rem, 4.2vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -0.018em;
  margin: 3rem 0 1.5rem;
  color: #17191b;
}

.section-mirrors {
  text-align: center;
  padding: 0 24px;
  margin: 3.2rem 0;
}

.mirror-notice,
.mirror-warning {
  color: #64748b;
  font-size: 1.03rem;
  margin: 1.1rem 0 1.9rem;
  font-weight: 400;
}

.mirror-list {
  max-width: 780px;
  margin: 0 auto;
}

.mirror-item {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1.05rem;
  line-height: 1.84;
  word-break: break-all;
  color: #17191b;
  background: rgba(23,25,27,0.038);
  padding: 1.25em 1.7em;
  margin: 1em 0;
  border-radius: 8px;
  border: 1px solid rgba(23,25,27,0.09);
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.mirror-item:hover {
  background: #313c48;
  color: #f3f6f9;
  border-color: #313c48;
}

.section-features {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 34px 30px;
  margin-top: 2.6rem;
}

.feature-item {
  background: rgba(23,25,27,0.028);
  padding: 1.9rem 1.7rem;
  border-radius: 10px;
  border: 1px solid rgba(23,25,27,0.07);
  transition: background 0.18s ease, transform 0.18s ease;
}

.feature-item:hover {
  background: rgba(23,25,27,0.048);
  transform: translateY(-1.5px);
}

.feature-item h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: #17191b;
}

.feature-item p {
  color: #374151;
  font-size: 1.03rem;
}

.media-block {
  margin: 2.2rem auto;
  max-width: 1020px;
  padding: 0 24px;
}

.media-block img {
  border: 1px solid #e3e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}

.media-block img:hover {
  transform: scale(1.006);
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
  gap: 68px 44px;
  max-width: 1260px;
  margin: 3.2rem auto;
  padding: 0 24px;
}

.media-grid .media-block {
  margin: 0;
}

.caption {
  margin-top: 1.6rem;
  color: #64748b;
  font-size: 0.99rem;
  text-align: center;
  font-weight: 400;
}

.guide ol.steps {
  list-style: none;
  counter-reset: step;
  text-align: left;
  max-width: 740px;
  margin: 2.6rem auto;
  padding: 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 1.2rem 1.2rem 1.2rem 3.4rem;
  margin: 1.5rem 0;
  background: rgba(23,25,27,0.028);
  border-radius: 8px;
  border: 1px solid rgba(23,25,27,0.075);
  font-size: 1.06rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.2rem;
  height: 2.2rem;
  background: #17191b;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.98rem;
  font-weight: 600;
}

.section-rules {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 32px;
}

.rules-list {
  list-style: none;
  margin-top: 2.2rem;
}

.rules-list li {
  padding: 1.05rem 0;
  border-bottom: 1px solid #f1f3f5;
  font-size: 1.04rem;
  color: #2d3748;
}

.rules-list li:last-child {
  border-bottom: none;
}

.stats-block {
  max-width: 940px;
  margin: 4.2rem auto 2.2rem;
  padding: 0 32px;
  text-align: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 26px 22px;
  margin-top: 2.8rem;
}

.stats-grid div {
  background: rgba(23,25,27,0.032);
  padding: 1.7rem 1.3rem;
  border-radius: 10px;
  border: 1px solid rgba(23,25,27,0.07);
}

.stats-grid div span {
  display: block;
  font-weight: 600;
  margin-top: 0.8rem;
  color: #17191b;
  font-size: 1.12rem;
}

.small-note {
  color: #6b7280;
  font-size: 0.99rem;
  margin: 1.7rem 0;
  font-style: italic;
}

.product-list {
  list-style: none;
  text-align: left;
  max-width: 640px;
  margin: 1.9rem auto;
}

.product-list li {
  padding: 0.85rem 0;
  font-size: 1.05rem;
  border-bottom: 1px solid #f3f4f6;
  color: #2d3748;
}

.faq-item {
  margin: 2.2rem 0;
  text-align: left;
}

.faq-item h3 {
  font-size: 1.24rem;
  margin-bottom: 0.9rem;
  color: #17191b;
}

.faq-item p {
  font-size: 1.04rem;
  color: #374151;
}

.tiny-footer {
  text-align: center;
  color: #94a3b8;
  font-size: 0.87rem;
  padding: 190px 0 230px;
  letter-spacing: 0.008em;
  opacity: 0.92;
}