:root {
      --bg: #f4f0eb;
      --bg-deep: #ece5dc;
      --surface: rgba(255, 251, 246, 0.88);
      --surface-strong: rgba(255, 252, 248, 0.96);
      --card: rgba(255, 252, 248, 0.92);
      --ink: #245646;
      --ink-strong: #1f272d;
      --muted: #58616f;
      --primary: #3f835d;
      --primary-dark: #2f6d4e;
      --accent: #e78a34;
      --accent-soft: #f2dcc0;
      --line: #e7dacb;
      --shadow-soft: 0 16px 42px rgba(97, 85, 69, 0.10);
      --shadow-card: 0 18px 48px rgba(97, 85, 69, 0.10);
      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 18px;
      --max: 1024px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      line-height: 1.6;
      background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.68), transparent 28%),
        linear-gradient(180deg, #f3efea 0%, #f0ebe5 100%);
      min-height: 100vh;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: auto;
      z-index: -1;
      width: 320px;
      height: 320px;
      pointer-events: none;
      filter: blur(1px);
      opacity: .45;
      background:
        radial-gradient(circle at 72% 16%, rgba(231, 138, 52, .14) 0, rgba(231, 138, 52, .14) 8px, transparent 9px),
        radial-gradient(circle at 52% 25%, rgba(170, 188, 129, .22) 0, rgba(170, 188, 129, .22) 20px, transparent 21px),
        radial-gradient(circle at 24% 70%, rgba(231, 138, 52, .16) 0, rgba(231, 138, 52, .16) 6px, transparent 7px),
        radial-gradient(circle at 50% 78%, rgba(170, 188, 129, .16) 0, rgba(170, 188, 129, .16) 30px, transparent 31px);
    }

    body::before {
      left: -40px;
      bottom: 120px;
    }

    body::after {
      right: -30px;
      bottom: 60px;
      transform: scaleX(-1);
    }

    .wrap {
      max-width: calc(var(--max) + 48px);
      margin: 0 auto;
      padding: 26px 24px 48px;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 18px;
    }

    .brand-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--ink);
      text-decoration: none;
      font-weight: 800;
      font-size: 1.05rem;
      letter-spacing: -.02em;
    }

    .brand-link img {
      width: 28px;
      height: 28px;
      object-fit: contain;
    }

    nav {
      display: flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    nav a,
    .locale a {
      color: var(--ink);
      text-decoration: none;
      font-weight: 700;
      letter-spacing: -.01em;
    }

    nav a:hover,
    .locale a:hover {
      opacity: .8;
    }

    .locale {
      color: #8a8f9d;
      font-weight: 700;
      white-space: nowrap;
    }

    .locale a {
      opacity: .58;
    }

    .locale a.active {
      opacity: 1;
      text-decoration: underline;
      text-underline-offset: 3px;
      color: var(--ink);
    }

    .panel {
      position: relative;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .hero {
      overflow: hidden;
      padding: 44px 34px 30px;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: auto auto 18px 42%;
      width: 420px;
      height: 220px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(236, 139, 45, .10) 0%, rgba(231, 138, 52, 0) 72%);
      pointer-events: none;
    }

    .hero-inner {
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
      gap: 28px;
      align-items: center;
    }

    .hero-copy {
      position: relative;
      z-index: 1;
      padding: 10px 0 10px;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      padding: 0 18px;
      border-radius: 999px;
      background: rgba(77, 139, 99, 0.16);
      border: 1px solid rgba(77, 139, 99, 0.28);
      color: #356b51;
      font-weight: 700;
      font-size: .98rem;
      letter-spacing: -.01em;
      margin-bottom: 18px;
      cursor: default;
    }

    h1,
    h2,
    h3 {
      letter-spacing: -.04em;
      margin: 0;
      color: var(--ink);
    }

    h1 {
      max-width: 11ch;
      font-size: clamp(2.5rem, 6vw, 4.2rem);
      line-height: .98;
      margin-bottom: 18px;
    }

    .hero-copy p {
      max-width: 620px;
      font-size: 1.08rem;
      color: var(--muted);
      margin: 0;
    }

    .hero-copy p strong {
      color: var(--ink-strong);
    }

    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 26px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 54px;
      padding: 0 18px;
      border-radius: 14px;
      border: 1px solid transparent;
      text-decoration: none;
      font-weight: 800;
      font-size: 1rem;
      letter-spacing: -.02em;
      transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
    }

    .btn:hover {
      transform: translateY(-1px);
    }

    .btn.primary {
      background: linear-gradient(180deg, #4c9165 0%, #2f6d4e 100%);
      color: #fff;
      box-shadow: 0 12px 24px rgba(47, 109, 78, 0.25), inset 0 1px 0 rgba(255, 255, 255, .22);
    }

    .btn.primary:hover {
      background: linear-gradient(180deg, #4a8d62 0%, #295f44 100%);
    }

    .btn.ghost {
      background: rgba(255, 251, 247, 0.92);
      color: var(--ink);
      border-color: var(--line);
      box-shadow: 0 10px 20px rgba(109, 80, 45, 0.05), inset 0 1px 0 rgba(255, 255, 255, .85);
    }

    .hero-art {
      position: relative;
      min-height: 440px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-art::before,
    .hero-art::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(231, 138, 52, .14) 0%, rgba(231, 138, 52, 0) 68%);
      pointer-events: none;
    }

    .hero-art::before {
      width: 220px;
      height: 220px;
      right: 10%;
      top: 6%;
    }

    .hero-art::after {
      width: 160px;
      height: 160px;
      left: 8%;
      bottom: 10%;
    }

    .hero-figure {
      position: relative;
      width: min(100%, 520px);
      z-index: 1;
    }

    .hero-figure img {
      display: block;
      width: 100%;
      height: auto;
    }

    .section {
      margin-top: 22px;
      padding: 30px 24px;
    }

    .section h2 {
      font-size: clamp(1.8rem, 3vw, 2.2rem);
      margin-bottom: 10px;
    }

    .section p {
      margin: 0;
      font-size: 1.02rem;
      color: var(--muted);
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      margin-top: 16px;
    }

    .step-card {
      background: var(--surface-strong);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 22px 18px 20px;
      box-shadow: var(--shadow-card);
      min-height: 100%;
    }

    .step-title {
      font-size: clamp(1.45rem, 2vw, 1.8rem);
      margin-bottom: 12px;
    }

    .step-title .number {
      color: var(--accent);
    }

    .step-visual {
      display: block;
      width: 100%;
      max-width: 220px;
      height: auto;
      margin: 6px auto 14px;
    }

    .step-card p {
      margin: 0;
      font-size: 1rem;
      color: var(--muted);
    }

    .seo-strip {
      margin-top: 22px;
      padding: 32px 24px;
      background: linear-gradient(180deg, rgba(255, 252, 249, .88) 0%, rgba(255, 248, 242, .92) 100%);
    }

    .seo-strip h2 {
      font-size: clamp(1.8rem, 3vw, 2.35rem);
      margin-bottom: 10px;
    }

    .seo-strip p {
      max-width: 720px;
      color: var(--muted);
      margin-bottom: 18px;
    }

    .benefits {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px 18px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .benefits li {
      position: relative;
      padding-left: 18px;
      color: var(--ink);
      font-weight: 600;
    }

    .benefits li::before {
      content: "•";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--primary);
      font-size: 1.2rem;
      line-height: 1;
    }

    footer {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px 18px;
      margin-top: 24px;
      padding: 6px 2px 0;
      color: #746f6a;
      font-size: .96rem;
    }

    footer a {
      color: var(--ink);
      text-decoration: none;
      font-weight: 700;
    }

    footer a:hover {
      opacity: .78;
    }

    .legal-page {
      padding-top: 22px;
    }

    .legal-intro {
      margin-bottom: 18px;
    }

    .legal-intro h1 {
      max-width: none;
      font-size: clamp(2rem, 5vw, 3.1rem);
      line-height: 1.03;
      margin-bottom: 10px;
    }

    .legal-updated {
      margin: 0;
      color: var(--muted);
      font-weight: 600;
    }

    .legal-content {
      margin-top: 16px;
      padding: 30px 24px;
      background: var(--surface-strong);
    }

    .legal-content h2 {
      font-size: clamp(1.2rem, 2.4vw, 1.46rem);
      margin: 30px 0 8px;
      color: var(--ink-strong);
    }

    .legal-content h2:first-of-type {
      margin-top: 0;
    }

    .legal-content p {
      margin: 0;
      color: var(--muted);
      white-space: pre-line;
    }

    .legal-content a {
      color: var(--primary-dark);
      font-weight: 700;
      text-decoration-color: rgba(47, 109, 78, .35);
      text-underline-offset: 2px;
    }

    .legal-content ul,
    .legal-content ol {
      margin: 12px 0;
      padding-left: 20px;
      color: var(--muted);
    }

    .legal-content li+li {
      margin-top: 6px;
    }

    @media (max-width: 980px) {
      .hero-inner {
        grid-template-columns: 1fr;
      }

      .hero {
        padding: 34px 24px 26px;
      }

      .hero-copy {
        padding-top: 0;
      }

      .hero-copy p,
      h1 {
        max-width: none;
      }

      .hero-art {
        min-height: auto;
      }

      .hero-figure {
        max-width: 560px;
        margin: 0 auto;
      }
    }

    @media (max-width: 760px) {
      .wrap {
        padding: 18px 16px 34px;
      }

      .topbar {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 16px;
      }

      nav {
        gap: 12px;
        justify-content: flex-start;
      }

      .section,
      .seo-strip,
      .legal-content {
        padding: 24px 18px;
      }

      .steps,
      .benefits {
        grid-template-columns: 1fr;
      }

      h1 {
        font-size: clamp(2.2rem, 12vw, 3.3rem);
      }

      .hero-copy p,
      .section p,
      .step-card p,
      .seo-strip p {
        font-size: .99rem;
      }

      .btn {
        width: 100%;
      }

      .cta-row {
        display: grid;
        grid-template-columns: 1fr;
      }
    }