:root {
  --ink: #102f29;
  --ink-soft: #4b665f;
  --green: #25d366;
  --green-dark: #08765a;
  --green-deep: #075e54;
  --mint: #eaf8f1;
  --mint-light: #f5fbf8;
  --paper: #ffffff;
  --line: #cee5da;
  --white: #ffffff;
  --shadow: 0 24px 70px rgba(7, 94, 84, 0.12);
  --radius: 28px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, sans-serif;
  margin: 0;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.page-shell {
  margin-left: auto;
  margin-right: auto;
  max-width: 1160px;
  width: calc(100% - 48px);
}

.site-header {
  align-items: center;
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr auto 1fr;
  margin: 0 auto;
  max-width: 1160px;
  padding: 24px 0;
  width: calc(100% - 48px);
}

.brand, .footer-brand {
  align-items: center;
  display: flex;
  gap: 11px;
}

.brand { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }

.brand-mark {
  align-items: center;
  background: var(--green-deep);
  border-radius: 50% 50% 50% 12px;
  color: var(--white);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 800;
  height: 36px;
  justify-content: center;
  transform: rotate(-3deg);
  width: 36px;
}

.top-nav { display: flex; gap: 28px; }
.top-nav a { color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.top-nav a:hover { color: var(--green-dark); }
.independent-label { color: var(--ink-soft); font-size: 12px; font-weight: 650; justify-self: end; }

.hero {
  align-items: center;
  background: var(--mint);
  border: 1px solid var(--line);
  border-radius: 34px;
  display: grid;
  gap: 54px;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  min-height: 610px;
  overflow: hidden;
  padding: 54px;
}

.eyebrow, .section-kicker, .step-label {
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow { align-items: center; display: flex; gap: 9px; margin: 0 0 20px; }
.eyebrow span { background: var(--green); border-radius: 50%; height: 9px; width: 9px; }

.hero h1 {
  font-size: clamp(45px, 5vw, 68px);
  font-weight: 690;
  letter-spacing: -0.062em;
  line-height: 1;
  margin: 0;
}

.hero h1 em { color: var(--green-deep); display: block; font-style: normal; }

.hero-lead {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.65;
  margin: 26px 0 0;
  max-width: 560px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  gap: 9px;
  justify-content: center;
  min-height: 50px;
  padding: 0 21px;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--green-deep); color: var(--white); }
.button-primary:hover { background: #064c44; box-shadow: 0 12px 28px rgba(7, 94, 84, 0.2); }
.button-secondary { background: var(--white); border-color: #a8d2bf; color: var(--green-deep); }
.button-secondary:hover { border-color: var(--green-deep); }

.button:focus-visible, .brand:focus-visible, .top-nav a:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(37, 211, 102, 0.55);
  outline-offset: 4px;
}

.safe-note {
  align-items: flex-start;
  color: var(--ink-soft);
  display: flex;
  font-size: 12px;
  line-height: 1.5;
  margin: 20px 0 0;
}

.safe-note > span {
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--green-dark);
  display: flex;
  flex: 0 0 auto;
  font-size: 9px;
  height: 19px;
  justify-content: center;
  margin-right: 8px;
  width: 19px;
}

.hero-media {
  border-radius: 28px;
  box-shadow: var(--shadow);
  height: 500px;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.hero-media::after {
  background: linear-gradient(180deg, transparent 55%, rgba(5, 63, 57, 0.48));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.hero-media img { height: 100%; object-fit: cover; width: 100%; }

.hero-media figcaption {
  align-items: center;
  bottom: 18px;
  color: var(--white);
  display: flex;
  font-size: 12px;
  font-weight: 750;
  gap: 9px;
  left: 20px;
  position: absolute;
  z-index: 1;
}

.hero-media figcaption span {
  align-items: center;
  background: var(--green);
  border-radius: 50%;
  color: var(--ink);
  display: flex;
  height: 25px;
  justify-content: center;
  width: 25px;
}

.visitor-counter {
  align-items: center;
  background: var(--green-deep);
  border-radius: 18px;
  color: var(--white);
  display: grid;
  gap: 12px;
  grid-template-columns: auto 1fr auto;
  margin-top: 16px;
  padding: 17px 23px;
}

.visitor-counter[hidden] { display: none; }
.visitor-counter p { font-size: 15px; margin: 0; }
.visitor-counter strong { color: #66ed99; font-size: 18px; }
.visitor-counter small { color: #b9d8d0; font-size: 11px; }
.counter-dot { background: var(--green); border-radius: 50%; box-shadow: 0 0 0 6px rgba(37, 211, 102, 0.16); height: 9px; width: 9px; }

.intro-band {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 38px;
  grid-template-columns: 150px 1fr;
  padding-bottom: 38px;
  padding-top: 38px;
}

.intro-band > span { color: var(--green-dark); font-size: 11px; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.intro-band p { color: var(--ink-soft); font-size: 17px; line-height: 1.55; margin: 0; }
.intro-band strong { color: var(--ink); }

.content-section { padding-bottom: 112px; padding-top: 108px; }

.section-heading { margin-bottom: 45px; max-width: 680px; }
.section-heading h2, .support-main h2, .typo-section h2 {
  font-size: clamp(38px, 4.2vw, 56px);
  letter-spacing: -0.055em;
  line-height: 1.06;
  margin: 12px 0 18px;
}
.section-heading > p:last-child { color: var(--ink-soft); font-size: 17px; line-height: 1.65; margin: 0; }
.section-kicker, .step-label { margin: 0; }

.guide-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(7, 94, 84, 0.07);
  overflow: hidden;
}

.prepare-row {
  align-items: center;
  background: var(--mint-light);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 20px;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  padding: 22px 32px;
}

.prepare-row strong { font-size: 14px; }
.prepare-row span { color: var(--ink-soft); font-size: 13px; }
.prepare-row span::before { color: var(--green-dark); content: "✓"; font-weight: 850; margin-right: 8px; }

.guide-row {
  align-items: center;
  display: grid;
  gap: 24px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 36px 32px;
}

.computer-row { border-bottom: 1px solid var(--line); }
.big-number {
  align-items: center;
  background: var(--green-deep);
  border-radius: 50%;
  color: var(--white);
  display: flex;
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 850;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.guide-copy h3, .phone-heading h3 { font-size: 23px; letter-spacing: -0.03em; margin: 7px 0 0; }
.guide-copy > p:last-child { color: var(--ink-soft); font-size: 14px; line-height: 1.6; margin: 10px 0 0; }
.compact-button { white-space: nowrap; }

.phone-heading { align-items: center; display: flex; gap: 18px; padding: 36px 32px 22px; }

.platform-columns { display: grid; grid-template-columns: 1fr 1fr; padding: 0 32px 32px; }
.platform-column { padding: 10px 34px 8px 0; }
.platform-column + .platform-column { border-left: 1px solid var(--line); padding-left: 34px; padding-right: 0; }
.platform-title { align-items: center; display: flex; gap: 14px; }
.platform-title small { color: var(--ink-soft); font-size: 11px; }
.platform-title h3 { font-size: 21px; margin: 3px 0 0; }
.platform-icon {
  align-items: center;
  background: var(--ink);
  border-radius: 50%;
  color: var(--white);
  display: flex;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 850;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.light-icon { background: var(--mint); color: var(--ink); }

.platform-steps { list-style: none; margin: 22px 0 0; padding: 0; }
.platform-steps li { align-items: flex-start; display: flex; gap: 11px; padding: 9px 0; }
.platform-steps li > span {
  align-items: center;
  background: var(--mint);
  border-radius: 50%;
  color: var(--green-dark);
  display: flex;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 850;
  height: 23px;
  justify-content: center;
  width: 23px;
}
.platform-steps p { color: var(--ink-soft); font-size: 14px; line-height: 1.5; margin: 0; }
.platform-steps strong { color: var(--ink); }

.done-note {
  align-items: center;
  background: var(--green);
  display: flex;
  font-size: 14px;
  gap: 8px;
  justify-content: center;
  margin: 0;
  padding: 17px 24px;
}

.support-section { background: var(--mint-light); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); padding: 100px 0; }
.support-panel { display: grid; gap: 72px; grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.75fr); }
.support-main h2 { margin-bottom: 34px; }
.fix-list { list-style: none; margin: 0; padding: 0; }
.fix-list li { align-items: flex-start; border-top: 1px solid var(--line); display: flex; gap: 17px; padding: 20px 0; }
.fix-list li:last-child { border-bottom: 1px solid var(--line); }
.fix-list li > span {
  align-items: center;
  background: var(--green-deep);
  border-radius: 50%;
  color: var(--white);
  display: flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 850;
  height: 28px;
  justify-content: center;
  width: 28px;
}
.fix-list strong { display: block; font-size: 15px; margin: 3px 0 6px; }
.fix-list p { color: var(--ink-soft); font-size: 13px; line-height: 1.5; margin: 0; }

.support-aside { background: var(--green-deep); border-radius: var(--radius); color: var(--white); overflow: hidden; }
.aside-block { padding: 34px; }
.aside-block + .aside-block { border-top: 1px solid rgba(255, 255, 255, 0.15); }
.aside-block .step-label { color: #6def9e; }
.aside-block h3 { font-size: 25px; letter-spacing: -0.035em; line-height: 1.12; margin: 12px 0 15px; }
.aside-block > p:last-of-type { color: #c4ddd6; font-size: 14px; line-height: 1.6; margin: 0; }
.aside-block a { border-bottom: 1px solid #77dca0; color: #77dca0; display: inline-flex; font-size: 13px; font-weight: 800; gap: 7px; margin-top: 24px; padding-bottom: 3px; }
.safety-block { background: rgba(0, 0, 0, 0.1); }

.typo-section { align-items: center; display: grid; gap: 70px; grid-template-columns: minmax(0, 1fr) 380px; padding-bottom: 110px; padding-top: 110px; }
.typo-section h2 { margin-bottom: 20px; }
.typo-section > div > p:last-child { color: var(--ink-soft); font-size: 16px; line-height: 1.7; margin: 0; }
.typo-section strong { color: var(--ink); }
.address-link {
  align-items: center;
  background: var(--mint);
  border: 1px solid var(--line);
  border-radius: 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 27px;
  transition: border-color 160ms ease, transform 160ms ease;
}
.address-link:hover { border-color: var(--green-deep); transform: translateY(-2px); }
.address-link span { color: var(--ink-soft); font-size: 11px; grid-column: 1; }
.address-link strong { font-size: 20px; grid-column: 1; margin-top: 6px; }
.address-link > span:last-child { color: var(--green-deep); font-size: 20px; grid-column: 2; grid-row: 1 / span 2; }

.faq-section { background: var(--mint-light); border-top: 1px solid var(--line); padding: 100px 0 112px; }
.faq-inner { display: grid; gap: 80px; grid-template-columns: 0.7fr 1.3fr; }
.faq-inner .section-heading { margin: 0; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { align-items: center; cursor: pointer; display: flex; font-size: 17px; font-weight: 780; justify-content: space-between; list-style: none; padding: 22px 2px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--green-dark); font-size: 24px; font-weight: 400; transition: transform 160ms ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details > p { color: var(--ink-soft); font-size: 14px; line-height: 1.7; margin: -2px 0 24px; max-width: 680px; padding-right: 30px; }

.final-cta { background: var(--green-deep); color: var(--white); padding: 95px 0 100px; text-align: center; }
.final-cta p { color: #b9d8d0; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; margin: 0; text-transform: uppercase; }
.final-cta h2 { font-size: clamp(38px, 5vw, 60px); letter-spacing: -0.055em; line-height: 1.03; margin: 14px 0 30px; }
.button-bright { background: var(--green); color: var(--ink); }
.button-bright:hover { background: #69e997; }

.site-footer { background: #053f39; color: var(--white); padding: 50px 0; }
.footer-inner { align-items: flex-start; display: grid; gap: 54px; grid-template-columns: 1fr 1.6fr 0.7fr; }
.footer-brand strong { display: block; font-size: 16px; }
.footer-brand p { color: #a7c9c1; font-size: 11px; margin: 5px 0 0; }
.disclaimer { color: #a7c9c1; font-size: 11px; line-height: 1.6; margin: 0; }
.site-footer nav { display: flex; flex-direction: column; gap: 9px; }
.site-footer nav a { color: #d6e7e2; font-size: 12px; }
.site-footer nav a:hover { color: var(--green); }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .top-nav { display: none; }
  .hero { gap: 32px; grid-template-columns: 1fr; padding: 44px; }
  .hero-copy { max-width: 720px; }
  .hero-media { height: 440px; }
  .support-panel { gap: 40px; }
  .typo-section { grid-template-columns: 1fr; }
  .address-link { width: 100%; }
  .faq-inner { gap: 50px; grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .site-footer nav { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 720px) {
  .page-shell, .site-header { width: calc(100% - 36px); }
  .site-header { padding: 19px 0; }
  .independent-label { display: none; }
  .hero { border-left: 0; border-radius: 0 0 28px 28px; border-right: 0; padding: 38px 22px 22px; width: 100%; }
  .hero h1 { font-size: clamp(42px, 13vw, 58px); }
  .hero-lead { font-size: 16px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-media { height: 340px; }
  .visitor-counter { grid-template-columns: auto 1fr; }
  .visitor-counter small { grid-column: 2; }
  .intro-band { gap: 10px; grid-template-columns: 1fr; }
  .content-section { padding-bottom: 82px; padding-top: 80px; }
  .section-heading { margin-bottom: 34px; }
  .prepare-row { align-items: flex-start; grid-template-columns: 1fr; gap: 10px; padding: 24px; }
  .prepare-row strong { margin-bottom: 5px; }
  .guide-row { align-items: flex-start; grid-template-columns: auto 1fr; padding: 28px 24px; }
  .compact-button { grid-column: 1 / -1; width: 100%; }
  .phone-heading { padding: 28px 24px 18px; }
  .platform-columns { grid-template-columns: 1fr; padding: 0 24px 24px; }
  .platform-column { padding: 14px 0 24px; }
  .platform-column + .platform-column { border-left: 0; border-top: 1px solid var(--line); padding: 26px 0 8px; }
  .done-note { align-items: flex-start; text-align: left; }
  .support-section { padding: 80px 0; }
  .support-panel { grid-template-columns: 1fr; }
  .typo-section { gap: 38px; padding-bottom: 82px; padding-top: 82px; }
  .faq-section { padding: 80px 0 88px; }
  .final-cta { padding: 78px 0 84px; }
  .footer-inner { gap: 30px; grid-template-columns: 1fr; }
  .site-footer nav { grid-column: auto; grid-row: auto; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 42px; }
  .hero-media { height: 285px; }
  .visitor-counter { padding: 16px 18px; }
  .visitor-counter p { font-size: 14px; }
  .guide-copy h3, .phone-heading h3 { font-size: 20px; }
  .big-number { height: 42px; width: 42px; }
  .aside-block { padding: 28px; }
  .address-link { padding: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}