/* Base */
:root {
      --bg: #f7f8fc;
      --card: #ffffff;
      --text: #1f2937;
      --muted: #6b7280;
      --primary: #000000;
      --primary-dark: #0f0f0f;
      --accent: #b91c1c;
      --border: #e5e7eb;
      --radius: 14px;
      --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
      --max: 1120px;
    }

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

    body {
      font-family: "Segoe UI", Arial, sans-serif;
      /* background: linear-gradient(180deg, #eef7f6 0%, var(--bg) 220px); */
      color: var(--text);
      line-height: 1.6;
    }

    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }

    .container { width: min(var(--max), 92%); margin: 0 auto; }

    .site-header { padding: 18px 0; }
    .header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; }
    .brand-logo { width: 60px; height: 30px; }
    .nav { display: flex; gap: 16px; color: var(--muted); font-weight: 500; }

    .btn { display: inline-block; padding: 10px 18px; border-radius: 10px;      line-height: 24px; font-weight: 600; }
    .btn-primary { background: var(--primary); color: #fff; }
    .btn-primary:hover { background: var(--primary-dark); }
    .btn-danger { background: var(--accent); color: #fff; }

    .hero {
      padding: 54px 0 0px;
      background-color: #f8f8fb;
      background-image:
        linear-gradient(rgba(210, 213, 220, 0.45) 1px, transparent 1px),
        linear-gradient(90deg, rgba(210, 213, 220, 0.45) 1px, transparent 1px);
      background-size: 50px 50px;
      border-bottom: 1px solid #ececf2;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 30px;
      align-items: end;
      min-height: 520px;
    }
    .hero-copy { padding-bottom: 46px; }
    .hero-tag {
      display: inline-block;
      padding: 8px 12px;
      border-radius: 6px;
      background: #efe8ff;
      color: #12002e;
      font-size: .95rem;
      font-weight: 700;
      letter-spacing: .02em;
    }
    .hero h1 {
      font-size: clamp(2rem, 5vw, 4.05rem);
      line-height: 1.06;
      margin: 18px 0 14px;
      color: #14002f;
      max-width: 16ch;
    }
    .hero-copy p {
      color: #3d4158;
      font-size: 1.06rem;
      max-width: 62ch;
    }
    .hero-actions {
      display: flex;
      gap: 12px;
      margin-top: 22px;
      flex-wrap: wrap;
    }
    .hero-btn-dark {
      background: #000000;
      color: #fff;
      border-color: #000000;
      min-width: 114px;
      text-align: center;
      border-radius: 10px;
      padding: 10px 20px;
    }
    .hero-btn-light {
      background: #fff;
      color: #000000;
      border: 1px solid #d7d8e2;
      min-width: 102px;
      text-align: center;
      border-radius: 10px;
      padding: 10px 20px;
    }
    .hero-benefits {
      list-style: none;
      display: flex;
      gap: 34px;
      margin-top: 36px;
      padding: 0;
      flex-wrap: wrap;
      color: #1f2242;
      font-size: .95rem;
    }
    .hero-benefits li {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      line-height: 1;
    }
    .hero-benefits li::before {
      content: "";
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #8b5cf6;
      box-shadow: inset 0 0 0 3px #f5f3ff;
    }
    .hero-visual {
      position: relative;
      min-height: 520px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }
    .hero-image {
      max-height: 520px;
      width: auto;
      object-fit: contain;
      filter: drop-shadow(0 8px 24px rgba(22, 20, 40, 0.08));
    }
    .hero-float-card {
      position: absolute;
      background: #fff;
      border: 1px solid #d7d8e2;
      border-radius: 10px;
      padding: 16px 18px;
      box-shadow: 0 12px 22px rgba(20, 20, 40, 0.08);
    }
    .hero-float-rating {
      left: 2%;
      bottom: 48px;
      min-width: 205px;
    }
    .hero-stars {
      color: #f1a63e;
      letter-spacing: 2px;
      font-size: 1.05rem;
      margin-bottom: 8px;
    }
    .hero-score strong {
      color: #13002c;
      font-size: 2rem;
      font-weight: 700;
      line-height: 1;
    }
    .hero-score span {
      color: #444a67;
      font-weight: 700;
      margin-left: 6px;
    }
    .hero-float-customers {
      right: -1%;
      bottom: 140px;
      min-width: 258px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .hero-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid #d9dce8;
      overflow: hidden;
      flex: 0 0 44px;
    }
    .hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .hero-kpi strong {
      display: block;
      font-size: 2rem;
      color: #13002c;
      line-height: 1;
    }
    .hero-kpi span {
      color: #4d526f;
      font-size: .96rem;
    }

    .section { padding: 58px 0; }
    .section-head { margin-bottom: 18px; }
    .section-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 8px; }
    .section-head p { color: var(--muted); max-width: 68ch; }

    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
    .service-icon {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #ecfeff;
      color: var(--primary-dark);
      margin-bottom: 10px;
    }
    .service-icon svg {
      width: 22px;
      height: 22px;
      fill: currentColor;
    }
    .card h3 { margin-bottom: 8px; font-size: 1.1rem; }
    .card p { color: var(--muted); font-size: .97rem; }

    .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .stars { color: #f59e0b; font-weight: 700; margin-bottom: 6px; }

    .how-section {
      background: #f6f7fb;
      border-top: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;
    }
    .how-head {
      text-align: center;
      margin-bottom: 34px;
    }
    .how-head h2 {
      font-size: clamp(1.8rem, 3vw, 2.35rem);
      margin-bottom: 8px;
      color: #181c2f;
    }
    .how-head p {
      color: #5a607a;
      max-width: 62ch;
      margin: 0 auto;
    }
    .how-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
      align-items: start;
      gap: 12px;
    }
    .how-arrow {
      align-self: center;
      justify-self: center;
      color: #0f1328;
      font-size: 2rem;
      line-height: 1;
      margin-top: 18px;
    }
    .how-step {
      text-align: center;
      padding: 8px;
    }
    .how-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 14px;
      border-radius: 50%;
      background: #4263d8;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 16px rgba(66, 99, 216, 0.24);
    }
    .how-icon svg {
      width: 30px;
      height: 30px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .how-step h3 {
      font-size: 1.05rem;
      letter-spacing: .04em;
      margin-bottom: 8px;
      color: #131728;
    }
    .how-step p {
      color: #4f556f;
      font-size: .95rem;
      max-width: 26ch;
      margin: 0 auto;
    }

    .feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; margin-top: 20px; }
    .feature-box ul { padding-left: 18px; color: var(--muted); }
    .feature-box li { margin: 6px 0; }

    .hero-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }

    .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .stat { text-align: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 10px; box-shadow: var(--shadow); }
    .stat strong { display: block; font-size: 1.7rem; line-height: 1; margin-bottom: 7px; color: var(--primary-dark); }

    .faq-list { display: grid; gap: 10px; }
    .faq-item { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
    .faq-item h3 { font-size: 1rem; margin-bottom: 4px; }
    .faq-item p { color: var(--muted); font-size: .95rem; }

    .contact-section {
      background: linear-gradient(180deg, #f8fbff 0%, #f2f6ff 100%);
      border-top: 1px solid #e8edf8;
      border-bottom: 1px solid #e8edf8;
    }
    .contact-card {
      max-width: 820px;
      margin: 0 auto;
      text-align: center;
      background: #fff;
      border: 1px solid #dfe7f6;
      border-radius: 16px;
      padding: 30px 22px;
      box-shadow: 0 12px 26px rgba(15, 35, 95, 0.08);
    }
    .contact-card h2 {
      font-size: clamp(1.5rem, 3vw, 2rem);
      margin-bottom: 8px;
      color: #151a33;
    }
    .contact-sub {
      color: #5a607a;
      margin-bottom: 20px;
    }
    .contact-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      text-align: left;
    }
    .contact-item {
      border: 1px solid #dfe7f6;
      border-radius: 12px;
      background: #fbfdff;
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .contact-icon {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      flex: 0 0 42px;
    }
    .contact-icon.email { background: #4661d9; }
    .contact-icon.whats { background: #25d366; }
    .contact-icon svg {
      width: 20px;
      height: 20px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .contact-meta h3 {
      font-size: .95rem;
      color: #222844;
      margin-bottom: 3px;
    }
    .contact-email {
      display: inline-block;
      font-weight: 600;
      color: #2640a8;
      word-break: break-word;
      font-size: .95rem;
    }
    .whatsapp-btn {
      display: inline-block;
      background: #25d366;
      color: #fff;
      border-radius: 8px;
      padding: 8px 12px;
      font-weight: 700;
      border: 1px solid #25d366;
      font-size: .9rem;
    }

    .cta { text-align: center; background: #0f172a; color: #f8fafc; border-radius: 20px; padding: 38px 20px; }
    .cta p { color: #cbd5e1; margin: 8px auto 18px; max-width: 60ch; }

    .site-footer { padding: 24px 0 34px; color: var(--muted); font-size: .92rem; }
    .footer-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 18px; }

    /* Tablet */
@media (max-width: 980px) {
      .hero-grid, .grid-3, .review-grid, .feature-grid, .stats { grid-template-columns: 1fr 1fr; }
      .how-grid { grid-template-columns: 1fr auto 1fr; row-gap: 16px; }
      .how-grid .how-step:nth-child(7) { grid-column: span 3; justify-self: center; }
      .hero-float-customers { right: 4%; bottom: 120px; }
      .hero-float-rating { left: 4%; bottom: 30px; }
    }

    /* Mobile */
@media (max-width: 700px) {
      .nav { display: none; }
      .hero-grid, .grid-3, .review-grid, .feature-grid, .stats { grid-template-columns: 1fr; }
      .how-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 8px;
        row-gap: 24px;
      }
      .how-arrow { display: none; }
      .how-grid .how-step:nth-child(7) { grid-column: 2 / 3; }
      .how-icon {
        width: 54px;
        height: 54px;
        margin-bottom: 10px;
      }
      .how-icon svg {
        width: 24px;
        height: 24px;
      }
      .how-step h3 { font-size: .9rem; }
      .how-step p {
        font-size: .82rem;
        line-height: 1.45;
      }
      .hero { padding-top: 36px; }
      .hero-copy { padding-bottom: 0; }
      .hero h1 { max-width: 100%; }
      .hero-benefits { gap: 16px; margin-top: 24px; }
      .hero-visual { min-height: 300px; margin-top: 0; }
      .hero-image { max-height: 360px; }
      .hero-float-customers { right: 4px; bottom: 96px; min-width: 210px; }
      .hero-float-rating { left: 4px; bottom: 14px; min-width: 178px; }
      .contact-grid { grid-template-columns: 1fr; }
      .contact-item { text-align: left; }
    }


/* ── Creator program additions ── */
.header-cta { display: flex; gap: 8px; align-items: center; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: #fff; }
.codes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.code-explain { position: relative; }
.code-explain.code-share { border-color: #111; }
.code-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #9b1c47; background: #fbeef3; padding: 4px 8px; border-radius: 6px; margin-bottom: 10px; }
.code-tag.grey { color: #4b4a55; background: #efeef4; }
.code-sample { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; font-size: 1.35rem; letter-spacing: .06em;
  border: 1.5px dashed #c9c6d6; border-radius: 12px; padding: 10px 14px; margin: 6px 0 12px; background: #fcfcfe; color: #111; display: inline-block; }
.code-explain p b, .wallet-explain p b { color: var(--text); }
.wallet-explain { margin-top: 16px; }
@media (max-width: 700px) {
  .codes-grid { grid-template-columns: 1fr; }
  .header-cta .btn-ghost { display: none; }
}