:root {
      --green: #0b4a35;
      --green-dark: #073425;
      --green-deep: #052319;
      --red: #b41224;
      --red-dark: #7a0715;
      --gold: #f3c13f;
      --gold-soft: #ffe08a;
      --ink: #16221d;
      --muted: #5d6862;
      --line: #dce6df;
      --soft: #f6faf7;
      --paper: #ffffff;
      --shadow: 0 18px 45px rgba(6, 35, 25, .14);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Arial, "Helvetica Neue", sans-serif;
      color: var(--ink);
      background: #fff;
      line-height: 1.55;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    .site { overflow: hidden; background: #fff; }
    .container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }

    .top {
      background: #fff;
      border-bottom: 1px solid rgba(7, 52, 37, .12);
    }
    .top-inner {
      min-height: 78px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 28px;
    }
    .logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 30px;
      font-weight: 950;
      color: var(--green-dark);
      letter-spacing: 0;
      white-space: nowrap;
    }
    .logo-badge {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      color: #16210c;
      background: linear-gradient(180deg, #ffdf78, #d99d1d);
      box-shadow: inset 0 -4px 0 rgba(0,0,0,.16);
      font-size: 18px;
      font-weight: 950;
    }
    .main-nav {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 26px;
      color: #23372f;
      font-size: 14px;
      font-weight: 900;
      white-space: nowrap;
    }
    .main-nav a:first-child {
      color: var(--red);
      border-bottom: 3px solid var(--gold);
      padding-bottom: 9px;
    }
    .actions {
      display: flex;
      align-items: center;
      gap: 9px;
    }
    .btn {
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 18px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 950;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .btn-gold {
      color: #17120a;
      background: linear-gradient(180deg, #ffe48f, #e8aa24);
      box-shadow: 0 12px 22px rgba(232,170,36,.22);
    }
    .btn-green {
      color: #fff;
      background: var(--green);
      border-color: rgba(255,255,255,.18);
    }
    .category-bar {
      color: #fff;
      background: var(--green-dark);
    }
    .category-inner {
      min-height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      font-size: 13px;
      font-weight: 950;
      text-transform: uppercase;
    }

    .hero {
      background:
        linear-gradient(180deg, rgba(5,35,25,.94), rgba(5,35,25,.96)),
        radial-gradient(circle at 50% 0, rgba(243,193,63,.14), transparent 34rem);
      padding: 26px 0 46px;
    }
    .hero-banner {
      position: relative;
      min-height: 520px;
      display: flex;
      align-items: center;
      overflow: hidden;
      border-radius: 0;
      background:
        linear-gradient(90deg, rgba(5,35,25,.97) 0%, rgba(5,35,25,.68) 43%, rgba(5,35,25,.04) 72%),
        url("/assets/99ok-hero-v2.png") center right / cover no-repeat;
      border: 1px solid rgba(255,224,138,.22);
      box-shadow: 0 24px 72px rgba(0,0,0,.32);
    }
    .hero-copy {
      position: relative;
      z-index: 1;
      width: min(590px, 56%);
      padding: 58px 0 58px 54px;
      color: #fff;
    }
    .hero-copy h1 {
      margin: 0;
      font-size: clamp(42px, 4.4vw, 66px);
      line-height: 1.02;
      font-weight: 950;
      letter-spacing: 0;
    }
    .hero-copy h1 span { color: var(--gold-soft); }
    .hero-copy p {
      margin: 23px 0 0;
      max-width: 540px;
      color: rgba(255,255,255,.86);
      font-size: 17px;
    }
    .hero-buttons {
      margin-top: 30px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    .hero-info {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 30px;
      max-width: 540px;
    }
    .hero-info div {
      min-height: 74px;
      padding: 13px 14px;
      border: 1px solid rgba(255,224,138,.25);
      background: rgba(0,0,0,.22);
    }
    .hero-info strong {
      display: block;
      color: var(--gold-soft);
      font-size: 22px;
      line-height: 1;
    }
    .hero-info span {
      display: block;
      margin-top: 8px;
      color: rgba(255,255,255,.78);
      font-size: 12px;
      font-weight: 900;
    }

    .intro {
      padding: 58px 0 52px;
      background: #fff;
    }
    .intro-grid {
      display: grid;
      grid-template-columns: minmax(0, .88fr) minmax(480px, 1.12fr);
      gap: 54px;
      align-items: center;
    }
    h2 {
      margin: 0;
      color: var(--green-deep);
      font-size: clamp(30px, 3.1vw, 42px);
      line-height: 1.12;
      font-weight: 950;
      letter-spacing: 0;
    }
    .lead {
      margin: 18px 0 0;
      color: var(--muted);
      font-size: 16px;
    }
    .official-line {
      margin-top: 22px;
      padding: 17px 18px;
      border-left: 5px solid var(--gold);
      background: var(--soft);
      color: var(--green-dark);
      font-weight: 900;
    }
    .quality {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: var(--shadow);
    }
    .quality article {
      padding: 26px 22px;
      border-right: 1px solid var(--line);
    }
    .quality article:last-child { border-right: 0; }
    .icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      color: var(--gold-soft);
      background: var(--green);
      border-radius: 50%;
      font-weight: 950;
      margin-bottom: 18px;
    }
    .quality h3, .guide-card h3, .post h3, .faq-card h3 {
      margin: 0 0 9px;
      color: var(--green-deep);
      line-height: 1.22;
    }
    .quality p, .guide-card p, .post p, .faq-card p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .guide {
      padding: 68px 0;
      color: #fff;
      background:
        linear-gradient(180deg, var(--green-deep), #041812);
    }
    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 34px;
      margin-bottom: 30px;
    }
    .guide h2 { color: #fff; }
    .guide .lead { color: rgba(255,255,255,.72); max-width: 480px; }
    .guide-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }
    .guide-card {
      min-height: 230px;
      padding: 24px;
      border: 1px solid rgba(255,224,138,.2);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    }
    .guide-card .num {
      color: var(--gold-soft);
      font-size: 36px;
      line-height: 1;
      font-weight: 950;
      margin-bottom: 48px;
    }
    .guide-card h3 { color: #fff; font-size: 19px; }
    .guide-card p { color: rgba(255,255,255,.74); }

    .faq-section {
      padding: 64px 0 48px;
      background: var(--soft);
    }
    .faq-layout {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(470px, 1.1fr);
      gap: 42px;
      align-items: start;
    }
    .faq-list {
      margin-top: 24px;
      border-top: 2px solid var(--green);
      background: #fff;
      box-shadow: var(--shadow);
    }
    .faq-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      min-height: 58px;
      padding: 0 18px;
      border-bottom: 1px solid var(--line);
      color: var(--green-deep);
      font-weight: 900;
    }
    .faq-row em {
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--green);
      color: #fff;
      font-style: normal;
      flex: 0 0 auto;
    }
    .faq-card {
      padding: 28px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }
    .faq-card h3 { font-size: 26px; }
    .checklist {
      margin: 22px 0 0;
      display: grid;
      gap: 12px;
    }
    .checklist div {
      padding: 14px 15px;
      background: #f9fbf9;
      border-left: 4px solid var(--gold);
      color: var(--green-dark);
      font-weight: 850;
    }

    .news {
      padding: 58px 0 70px;
      background: #fff;
    }
    .news h2 { text-align: center; margin-bottom: 30px; }
    .post-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 22px;
    }
    .post {
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: 0 12px 28px rgba(7,52,37,.08);
    }
    .post-thumb {
      min-height: 132px;
      display: flex;
      align-items: end;
      padding: 14px;
      color: #fff;
      background:
        linear-gradient(135deg, rgba(5,35,25,.92), rgba(180,18,36,.74)),
        url("/assets/99ok-hero-v2.png") center / cover;
      font-size: 18px;
      line-height: 1.1;
      font-weight: 950;
    }
    .post-body { padding: 18px; }
    .post h3 { font-size: 17px; }
    .post-date {
      margin-top: 14px;
      color: var(--red);
      font-size: 13px;
      font-weight: 950;
    }

    .footer {
      padding: 52px 0 24px;
      color: #dcece3;
      background: var(--green-deep);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(160px, .6fr));
      gap: 40px;
    }
    .footer .logo { color: #fff; margin-bottom: 16px; }
    .footer p { margin: 0; color: rgba(220,236,227,.7); font-size: 14px; }
    .footer h3 { margin: 0 0 14px; color: var(--gold-soft); font-size: 17px; }
    .footer a { display: block; margin: 8px 0; color: rgba(220,236,227,.78); font-size: 14px; }
    .copy {
      margin-top: 34px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,.12);
      text-align: center;
      color: rgba(220,236,227,.55);
      font-size: 13px;
    }

    @media (max-width: 980px) {
      .top-inner { grid-template-columns: 1fr; gap: 14px; padding: 14px 0; }
      .main-nav { justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
      .actions { justify-content: flex-start; }
      .category-inner { justify-content: flex-start; overflow-x: auto; }
      .hero-copy { width: 68%; padding-left: 34px; }
      .intro-grid, .faq-layout { grid-template-columns: 1fr; }
      .quality { grid-template-columns: 1fr; }
      .quality article { border-right: 0; border-bottom: 1px solid var(--line); }
      .quality article:last-child { border-bottom: 0; }
      .guide-grid, .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 640px) {
      .container { width: min(100% - 28px, 1120px); }
      .logo { font-size: 25px; }
      .logo-badge { width: 40px; height: 40px; font-size: 15px; }
      .actions { width: 100%; }
      .actions .btn { flex: 1; }
      .hero { padding-top: 14px; }
      .hero-banner {
        min-height: 0;
        align-items: end;
        background:
          linear-gradient(180deg, rgba(5,35,25,.28) 0%, rgba(5,35,25,.82) 45%, rgba(5,35,25,.98) 100%),
          url("/assets/99ok-hero-v2.png") center top / cover no-repeat;
      }
      .hero-copy {
        width: 100%;
        padding: 260px 20px 26px;
      }
      .hero-copy h1 {
        font-size: 34px;
        line-height: 1.05;
      }
      .hero-copy p { font-size: 15px; }
      .hero-info { grid-template-columns: 1fr; }
      .section-head { display: block; }
      .guide-grid, .post-grid, .footer-grid { grid-template-columns: 1fr; }
      .guide-card { min-height: 180px; }
      .guide-card .num { margin-bottom: 28px; }
      .faq-row { font-size: 14px; }
    }

.post h3 a { color: inherit; }
.article-hero {
  color: #fff;
  background:
    linear-gradient(90deg, rgba(5,35,25,.96), rgba(5,35,25,.78)),
    url("/assets/99ok-hero-v2.png") center right / cover no-repeat;
  padding: 74px 0 82px;
}
.article-hero-inner { max-width: 820px; }
.article-hero h1 {
  margin: 0;
  font-size: clamp(34px, 4.4vw, 62px);
  line-height: 1.06;
  font-weight: 950;
}
.article-hero p {
  max-width: 680px;
  margin: 22px 0 0;
  color: rgba(255,255,255,.84);
  font-size: 17px;
}
.article-section { padding: 58px 0 70px; background: var(--soft); }
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 28px;
  align-items: start;
}
.article-card,
.side-card {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.article-card { padding: 30px; }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 20px;
}
.article-image {
  margin: 0 0 26px;
  overflow: hidden;
  border: 1px solid rgba(7,52,37,.18);
}
.article-image img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}
.article-content {
  color: #28372f;
  font-size: 16px;
  line-height: 1.86;
}
.article-content h2,
.article-content h3 {
  margin: 28px 0 12px;
  color: var(--green-deep);
  line-height: 1.22;
}
.article-content img {
  max-width: 100%;
  height: auto;
}
.article-actions {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.article-actions ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.article-actions li,
.article-actions a {
  color: var(--green-deep);
  font-weight: 900;
}
.article-actions li {
  background: var(--soft);
  padding: 9px 12px;
}
.side-card { padding: 24px; margin-bottom: 18px; }
.side-card.visual {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(5,35,25,.2), rgba(5,35,25,.94)),
    url("/assets/99ok-hero-v2.png") center / cover no-repeat;
}
.side-card.visual h2 { color: #fff; }
.side-card.visual p { color: rgba(255,255,255,.82); }
.side-card ul {
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.side-card li { margin: 8px 0; }
@media (max-width: 860px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-card { padding: 22px; }
}

.guide-card h3 a,
.post h3 a,
.article-content a,
.side-card li a {
  color: inherit;
}

.article-content ul {
  margin: 14px 0 18px;
  padding-left: 22px;
}

.article-content li {
  margin: 7px 0;
}