:root {
      --terracotta: #b95737;
      --terracotta-dark: #873c27;
      --cream: #fff7ee;
      --white: #fffdf9;
      --ink: #251813;
      --muted: #71594f;
      --line: #ead8ca;
      --gold: #d89c45;
      --sage: #5f785e;
      --shadow: 0 18px 45px rgba(86, 43, 24, 0.13);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: "Cairo", Tahoma, Arial, sans-serif;
      background: var(--white);
      color: var(--ink);
      line-height: 1.8;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .page {
      overflow: hidden;
    }

    .section {
      padding: 64px 20px;
    }

    .wrap {
      width: min(1120px, 100%);
      margin: 0 auto;
    }

    .hero {
      min-height: 92vh;
      display: grid;
      align-items: center;
      padding: 28px 20px 44px;
      background:
        linear-gradient(110deg, rgba(31, 42, 33, 0.92), rgba(135, 60, 39, 0.66)),
        url("assets/hero-kitchen.png");
      background-size: cover;
      background-position: center;
      color: #fffdf9;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.08fr 0.92fr;
      gap: 42px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      margin-bottom: 18px;
      padding: 8px 14px;
      border: 1px solid rgba(255, 247, 238, 0.32);
      border-radius: 999px;
      background: rgba(255, 253, 249, 0.11);
      font-weight: 700;
      color: #ffe8cf;
    }

    .eyebrow::before {
      content: "";
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      background: currentColor;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5V5a2 2 0 0 1 2-2h11v18H6a2 2 0 0 1-2-1.5Z'/%3E%3Cpath d='M8 7h5'/%3E%3Cpath d='M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    h1,
    h2,
    h3,
    p {
      margin-top: 0;
    }

    h1 {
      max-width: 780px;
      margin-bottom: 20px;
      font-size: clamp(2.25rem, 7vw, 5.25rem);
      line-height: 1.08;
      letter-spacing: 0;
    }

    .subhead {
      max-width: 670px;
      margin-bottom: 30px;
      color: #fff1e2;
      font-size: clamp(1.08rem, 2.7vw, 1.45rem);
      font-weight: 700;
    }

    .cta {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 72px;
      padding: 15px 26px;
      border-radius: 12px;
      background: #ffd071;
      color: #30170e;
      box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
      font-size: 1.08rem;
      font-weight: 900;
      text-align: center;
      transition: transform 160ms ease, box-shadow 160ms ease;
    }

    .cta::before {
      content: "";
      width: 27px;
      height: 27px;
      flex: 0 0 27px;
      background: #30170e;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .cta-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1.45;
    }

    .cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 22px 45px rgba(0, 0, 0, 0.28);
    }

    .cta-text > span {
      margin-top: 2px;
      font-size: 0.82rem;
      font-weight: 700;
      color: #6d341f;
    }

    .hero-proof {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-top: 18px;
      color: #ffe8cf;
      font-size: 0.96rem;
      font-weight: 700;
    }

    .hero-proof::before {
      content: "";
      width: 19px;
      height: 19px;
      flex: 0 0 19px;
      background: #ffd071;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .quick-wins {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 0;
      margin: 18px 0 0;
      list-style: none;
    }

    .quick-wins li {
      padding: 8px 12px;
      border: 1px solid rgba(255, 247, 238, 0.24);
      border-radius: 999px;
      background: rgba(255, 253, 249, 0.12);
      color: #fff1e2;
      font-size: 0.93rem;
      font-weight: 800;
      line-height: 1.4;
    }

    .phone-card {
      position: relative;
      max-width: 385px;
      margin-right: auto;
      padding: 18px;
      border: 1px solid rgba(255, 247, 238, 0.28);
      border-radius: 34px;
      background: rgba(255, 253, 249, 0.13);
      backdrop-filter: blur(12px);
      box-shadow: var(--shadow);
    }

    .phone-screen {
      min-height: 510px;
      padding: 28px 24px;
      border-radius: 24px;
      background: var(--cream);
      color: var(--ink);
    }

    .pdf-label {
      width: fit-content;
      margin-bottom: 20px;
      padding: 5px 10px;
      border-radius: 999px;
      background: #f3d7bd;
      color: var(--terracotta-dark);
      font-size: 0.8rem;
      font-weight: 900;
    }

    .mock-title {
      margin-bottom: 14px;
      color: var(--terracotta-dark);
      font-size: 2rem;
      line-height: 1.2;
      font-weight: 900;
    }

    .mock-list {
      display: grid;
      gap: 12px;
      margin: 22px 0;
    }

    .mock-row {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--white);
      font-weight: 800;
    }

    .mock-row::before {
      content: "";
      width: 17px;
      height: 17px;
      flex: 0 0 17px;
      background: var(--sage);
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .section-title {
      max-width: 760px;
      margin-bottom: 32px;
    }

    .section-title h2 {
      margin-bottom: 12px;
      color: var(--terracotta-dark);
      font-size: clamp(1.8rem, 4.8vw, 3rem);
      line-height: 1.18;
      letter-spacing: 0;
    }

    .section-title p {
      color: var(--muted);
      font-size: 1.08rem;
      font-weight: 700;
    }

    .pain-grid,
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .pain-card,
    .feature-card,
    .faq-item {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fffdf9;
      box-shadow: 0 10px 26px rgba(86, 43, 24, 0.07);
    }

    .pain-card {
      padding: 24px;
    }

    .pain-card::before,
    .feature-card::before,
    .price-card::before,
    .faq-item::before {
      content: "";
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      margin-bottom: 15px;
      border-radius: 50%;
      background-color: #f5dfc7;
      background-image: var(--icon-url);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 22px;
    }

    .pain-card:nth-child(1) {
      --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23873c27' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3Cpath d='M8 11h6'/%3E%3C/svg%3E");
    }

    .pain-card:nth-child(2) {
      --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23873c27' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M5 10l1.5 8h11L19 10'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3Cpath d='M9 14h6'/%3E%3C/svg%3E");
    }

    .pain-card:nth-child(3) {
      --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23873c27' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 15h3'/%3E%3Cpath d='M14 15h2'/%3E%3C/svg%3E");
    }

    .pain-card strong,
    .feature-card strong {
      color: var(--terracotta-dark);
    }

    .pain-card h3,
    .feature-card h3 {
      margin-bottom: 10px;
      font-size: 1.22rem;
      line-height: 1.35;
    }

    .pain-card p,
    .feature-card p,
    .faq-item p {
      margin-bottom: 0;
      color: var(--muted);
      font-weight: 700;
    }

    .inside {
      background: var(--cream);
    }

    .feature-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .feature-card {
      padding: 26px;
      min-height: 240px;
    }

    .feature-card:nth-child(1) {
      --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23873c27' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11h16'/%3E%3Cpath d='M5 11l1.5 8h11L19 11'/%3E%3Cpath d='M9 8c0-2 1-3 3-5 2 2 3 3 3 5'/%3E%3C/svg%3E");
    }

    .feature-card:nth-child(2) {
      --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23873c27' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
    }

    .feature-card:nth-child(3) {
      --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23873c27' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v16H4z'/%3E%3Cpath d='M4 10h16'/%3E%3Cpath d='M10 4v16'/%3E%3Cpath d='M14 14h3'/%3E%3Cpath d='M7 14h1'/%3E%3C/svg%3E");
    }

    .feature-card:nth-child(4) {
      --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23873c27' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-11V5l-8-3-8 3v6c0 7 8 11 8 11Z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
    }

    .feature-card:nth-child(5) {
      --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23873c27' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2h8l1 5H7Z'/%3E%3Cpath d='M7 7h10l-1 15H8Z'/%3E%3Cpath d='M10 11h4'/%3E%3Cpath d='M10 15h4'/%3E%3C/svg%3E");
    }

    .feature-num {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      margin-bottom: 16px;
      border-radius: 50%;
      background: var(--terracotta);
      color: white;
      font-weight: 900;
    }

    .pricing {
      background: #24332a;
      color: var(--white);
    }

    .pricing .section-title h2,
    .pricing .section-title p {
      color: var(--white);
    }

    .price-box {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-bottom: 24px;
    }

    .price-card {
      padding: 28px;
      border: 1px solid rgba(255, 247, 238, 0.18);
      border-radius: 8px;
      background: rgba(255, 253, 249, 0.09);
      --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23873c27' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12V8H6a2 2 0 0 1 0-4h12v4'/%3E%3Cpath d='M4 6v14a2 2 0 0 0 2 2h14v-4'/%3E%3Cpath d='M18 12h4v6h-4a3 3 0 0 1 0-6Z'/%3E%3C/svg%3E");
    }

    .price-card h3 {
      margin-bottom: 10px;
      color: #ffd071;
      font-size: 1.25rem;
    }

    .price {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 8px;
    }

    .price strong {
      font-size: clamp(2.2rem, 6vw, 3.4rem);
      line-height: 1.18;
    }

    .old-price {
      display: inline-block;
      color: #d7b9a7;
      font-weight: 800;
      white-space: nowrap;
      text-decoration: line-through;
    }

    .urgency {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 0 26px;
      padding: 16px 18px;
      border-right: 5px solid #ffd071;
      background: rgba(255, 208, 113, 0.12);
      color: #fff1e2;
      font-weight: 900;
    }

    .urgency::before {
      content: "";
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
      background: #ffd071;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .payments {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
    }

    .payments span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 253, 249, 0.13);
      color: #fff1e2;
      font-weight: 800;
    }

    .payments span::before {
      content: "";
      width: 17px;
      height: 17px;
      flex: 0 0 17px;
      background: #ffd071;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .faq-list {
      display: grid;
      gap: 14px;
      max-width: 860px;
    }

    .faq-item {
      padding: 24px;
      --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23873c27' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.1 9a3 3 0 1 1 5.8 1c-.6 1-1.8 1.3-2.4 2.2-.3.4-.5.8-.5 1.3'/%3E%3Cpath d='M12 17h.01'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E");
    }

    .faq-item h3 {
      margin-bottom: 8px;
      color: var(--terracotta-dark);
      font-size: 1.18rem;
    }

    .final-cta {
      padding: 56px 20px 74px;
      background: var(--cream);
      text-align: center;
    }

    .final-cta h2 {
      max-width: 780px;
      margin: 0 auto 18px;
      color: var(--terracotta-dark);
      font-size: clamp(1.8rem, 5vw, 3rem);
      line-height: 1.2;
    }

    .final-cta p {
      max-width: 700px;
      margin: 0 auto 28px;
      color: var(--muted);
      font-weight: 800;
    }

    @media (max-width: 860px) {
      .hero {
        min-height: auto;
        padding-top: 30px;
      }

      .hero-grid,
      .pain-grid,
      .feature-grid,
      .price-box {
        grid-template-columns: 1fr;
      }

      .price {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
      }

      .phone-card {
        width: 100%;
        margin: 12px 0 0;
      }

      .phone-screen {
        min-height: auto;
      }
    }

    @media (max-width: 520px) {
      .section {
        padding: 48px 16px;
      }

      .hero {
        min-height: auto;
        padding-top: 24px;
        padding-right: 16px;
        padding-left: 16px;
        background-position: 58% center;
      }

      h1 {
        font-size: 2rem;
        line-height: 1.16;
      }

      .subhead {
        font-size: 1rem;
        line-height: 1.75;
      }

      .cta {
        width: 100%;
        min-height: 68px;
        gap: 10px;
        padding-right: 16px;
        padding-left: 16px;
        font-size: 1rem;
      }

      .cta::before {
        width: 23px;
        height: 23px;
        flex-basis: 23px;
      }

      .phone-card {
        padding: 10px;
        border-radius: 26px;
      }

      .phone-screen {
        padding: 22px 18px;
        border-radius: 19px;
      }

      .pain-card,
      .feature-card,
      .faq-item,
      .price-card {
        padding: 20px;
      }

      .mock-title {
        font-size: 1.62rem;
      }

      .quick-wins {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .quick-wins li {
        border-radius: 10px;
      }
    }

    @media (max-width: 380px) {
      .section {
        padding: 42px 14px;
      }

      .hero {
        padding-right: 14px;
        padding-left: 14px;
      }

      h1 {
        font-size: 1.78rem;
      }

      .section-title h2 {
        font-size: 1.55rem;
      }

      .cta {
        font-size: 0.93rem;
        padding-right: 12px;
        padding-left: 12px;
      }

      .cta-text > span {
        font-size: 0.76rem;
      }

      .price strong {
        font-size: 2rem;
      }
    }