:root {
      --bg: #fcfbf9;
      --band: #eef5fb;
      --card: #fff;
      --ink: #0d1f4a;
      --text: #3d4a66;
      --muted: #6b7690;
      --blue: #0e7490;
      --blue-d: #083344;
      --accent: #10b981;
      --mint: #c9f1e6;
      --mint-d: #0f6e5a;
      --line: #dfe6f1;
      --soft: #e9f0fd;
      box-sizing: border-box;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    @media (prefers-color-scheme:dark) {
      :root:not([data-theme="light"]) {
        --bg: #0b1226;
        --band: #0f1a33;
        --card: #121c38;
        --ink: #eef2fb;
        --text: #b9c3da;
        --muted: #8a96b3;
        --blue: #38bdf8;
        --blue-d: #0284c7;
        --accent: #34d399;
        --mint: #15493f;
        --mint-d: #7fe3c8;
        --line: #24304f;
        --soft: #182750;
        color-scheme: dark
      }
    }

    :root[data-theme="dark"] {
      --bg: #0b1226;
      --band: #0f1a33;
      --card: #121c38;
      --ink: #eef2fb;
      --text: #b9c3da;
      --muted: #8a96b3;
      --blue: #38bdf8;
      --blue-d: #0284c7;
      --accent: #34d399;
      --mint: #15493f;
      --mint-d: #7fe3c8;
      --line: #24304f;
      --soft: #182750;
      color-scheme: dark
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 80px
    }

    * {
      box-sizing: border-box
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
      line-height: 1.55;
      font-size: 16px
    }

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

    :focus-visible {
      outline: 3px solid var(--blue);
      outline-offset: 3px;
      border-radius: 6px
    }

    .wrap {
      max-width: 1250px;
      margin: 0 auto;
      padding: 0 24px
    }

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

    /* nav */
    header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: color-mix(in srgb, var(--bg) 92%, transparent);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent)
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 72px;
      gap: 16px
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      font-size: 27px;
      color: var(--ink);
      letter-spacing: -.03em
    }

    .logo-icon {
      width: 36px;
      height: 38px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .links {
      display: flex;
      gap: 32px;
      font-size: 14.5px;
      font-weight: 600;
      color: var(--ink)
    }

    .links a {
      transition: color .18s ease
    }

    .links a:hover {
      color: var(--blue)
    }

    .actions {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 22px;
      border-radius: 8px;
      font-weight: 700;
      font-size: 15px;
      border: 1px solid transparent;
      cursor: pointer;
      font-family: inherit;
      transition: all .2s ease;
      text-decoration: none
    }

    .btn.sm {
      padding: 9px 18px;
      font-size: 13.5px
    }

    .primary {
      background: linear-gradient(135deg, #0e7490, #0369a1);
      color: #fff;
      box-shadow: 0 4px 14px rgba(14, 116, 144, .28)
    }

    .primary:hover {
      background: linear-gradient(135deg, #0369a1, #075985);
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(14, 116, 144, .38);
      color: #fff
    }

    .ghost {
      background: var(--card);
      border-color: var(--line);
      color: var(--ink)
    }

    .ghost:hover {
      border-color: var(--blue);
      color: var(--blue)
    }

    .outline {
      background: transparent;
      border-color: var(--blue);
      color: var(--blue)
    }

    .outline:hover {
      background: var(--soft);
      transform: translateY(-1px)
    }

    .accent-btn {
      background: linear-gradient(135deg, #10b981, #059669);
      color: #fff;
      box-shadow: 0 4px 14px rgba(16, 185, 129, .28)
    }

    .accent-btn:hover {
      background: linear-gradient(135deg, #059669, #047857);
      color: #fff;
      transform: translateY(-1px)
    }

    /* hero */
    .hero {
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: 28px;
      align-items: center;
      padding: 52px 0 64px
    }

    .kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--blue);
      background: var(--soft);
      padding: 6px 14px;
      border-radius: 99px;
      font-weight: 700;
      font-size: 12.5px;
      letter-spacing: .04em;
      text-transform: uppercase;
      margin: 0 0 18px
    }

    .hero h1 {
      font-size: clamp(40px, 5vw, 60px);
      line-height: 1.06;
      font-weight: 800;
      margin-bottom: 22px
    }

    .hero h1 span.gradient {
      background: linear-gradient(135deg, #0e7490, #10b981);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent
    }

    .hero p.lead {
      font-size: 18.5px;
      max-width: 32em;
      margin: 0 0 30px;
      color: var(--text);
      line-height: 1.6
    }

    .cta {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      align-items: center
    }

    .cta .btn {
      padding: 15px 28px;
      font-size: 16px
    }

    .tg-note {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 24px;
      font-size: 14px;
      color: var(--muted)
    }

    .tg {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #27a7e7;
      display: grid;
      place-items: center;
      flex: none
    }

    .tg svg {
      width: 13px;
      height: 13px
    }

    .tg-note-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--text);
      font-weight: 500;
      transition: color .2s
    }

    .tg-note-link:hover {
      color: var(--blue)
    }

    /* device mockups */
    .stage {
      position: relative;
      height: 410px
    }

    .blob {
      position: absolute;
      inset: 6% 2% 0 8%;
      background: var(--mint);
      opacity: .55;
      border-radius: 46% 54% 50% 50%/55% 45% 55% 45%
    }

    .laptop {
      position: absolute;
      left: 0;
      top: 30px;
      width: 76%;
      background: var(--card);
      border: 6px solid #0d2150;
      border-radius: 14px 14px 4px 4px;
      box-shadow: 0 20px 40px -18px rgba(13, 31, 74, .4);
      overflow: hidden
    }

    .base {
      position: absolute;
      left: -4%;
      top: 318px;
      width: 84%;
      height: 12px;
      background: linear-gradient(#cfd6e2, #a9b2c4);
      border-radius: 0 0 40px 40px
    }

    .ui-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 10px;
      font-size: 9px;
      font-weight: 700;
      color: var(--ink);
      border-bottom: 1px solid var(--line)
    }

    .ui-body {
      display: grid;
      grid-template-columns: 76px 1fr;
      min-height: 250px
    }

    .side {
      border-right: 1px solid var(--line);
      padding: 8px 6px;
      font-size: 7px;
      color: var(--muted);
      display: grid;
      gap: 7px;
      align-content: start
    }

    .side b {
      background: var(--soft);
      color: var(--blue);
      padding: 4px 5px;
      border-radius: 4px;
      font-weight: 600
    }

    .side span {
      padding: 0 5px
    }

    .main {
      padding: 10px 12px
    }

    .main h4 {
      margin: 0;
      font-size: 8px;
      color: var(--ink)
    }

    .main small {
      font-size: 6px;
      color: var(--muted)
    }

    .grid3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 8px
    }

    .tile i {
      display: block;
      height: 44px;
      border-radius: 4px;
      margin-bottom: 3px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      overflow: hidden;
      position: relative;
    }

    .tile i img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 4px;
    }

    .tile span {
      font-size: 6.5px;
      font-weight: 700;
      color: var(--ink);
      display: block
    }

    .tile em {
      font-size: 5.5px;
      color: var(--muted);
      font-style: normal
    }

    .c1 {
      background: #5d5f2f url('/static/images/sheqela/c1_living_room.webp') center/cover no-repeat;
    }

    .c2 {
      background: #a8672a url('/static/images/sheqela/c2_chairs_desks.webp') center/cover no-repeat;
    }

    .c3 {
      background: #7d5330 url('/static/images/sheqela/c3_dining.webp') center/cover no-repeat;
    }

    .c4 {
      background: #1f3d6b url('/static/images/sheqela/c4_fashion.webp') center/cover no-repeat;
    }

    .c5 {
      background: #a89578 url('/static/images/sheqela/c5_decor_art.webp') center/cover no-repeat;
    }

    .c6 {
      background: #3b3b3b url('/static/images/sheqela/c6_kitchenware.webp') center/cover no-repeat;
    }

    .c7 {
      background: #4a6f99 url('/static/images/sheqela/c7_comfort_sofa.webp') center/cover no-repeat;
    }

    .c8 {
      background: #3a4120 url('/static/images/sheqela/c8_leather_jacket.webp') center/cover no-repeat;
    }

    .c-chair {
      background: #a8672a url('/static/images/sheqela/handmade_chair.webp') center/cover no-repeat;
    }

    .c-vase {
      background: #a89578 url('/static/images/sheqela/ceramic_vase.webp') center/cover no-repeat;
    }

    .c-sofa {
      background: #4a6f99 url('/static/images/sheqela/c7_comfort_sofa.webp') center/cover no-repeat;
    }

    .phone {
      position: absolute;
      right: 0;
      top: 0;
      width: 27%;
      min-width: 130px;
      height: 355px;
      background: var(--card);
      border: 6px solid #0d2150;
      border-radius: 26px;
      overflow: hidden;
      box-shadow: 0 20px 40px -18px rgba(13, 31, 74, .5)
    }

    .phone .ui-bar {
      padding: 12px 10px 6px
    }

    .promo {
      margin: 6px;
      padding: 10px 8px;
      border-radius: 8px;
      background: linear-gradient(120deg, #e8efe6 55%, #4f7a45);
      font-size: 7px;
      color: var(--ink)
    }

    .promo b {
      display: block;
      font-size: 8px;
      line-height: 1.2;
      margin-bottom: 3px
    }

    .feat {
      display: flex;
      justify-content: space-between;
      font-size: 7px;
      font-weight: 700;
      color: var(--ink);
      padding: 4px 8px
    }

    .feat u {
      color: var(--blue);
      text-decoration: none;
      font-weight: 600
    }

    .grid2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      padding: 0 8px
    }

    .grid2 .tile i {
      height: 52px
    }

    /* value strip */
    .strip {
      background: var(--band)
    }

    .strip .wrap {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      padding-top: 28px;
      padding-bottom: 28px
    }

    .val {
      display: flex;
      gap: 16px;
      align-items: center;
      padding: 0 24px
    }

    .val+.val {
      border-left: 1px solid var(--line)
    }

    .val:first-child {
      padding-left: 0
    }

    .ico {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--mint);
      display: grid;
      place-items: center;
      flex: none;
      color: var(--mint-d)
    }

    .ico svg {
      width: 26px;
      height: 26px
    }

    .val h3 {
      font-size: 15.5px;
      font-weight: 700;
      margin-bottom: 2px
    }

    .val p {
      margin: 0;
      font-size: 13.5px;
      color: var(--muted)
    }

    /* steps */
    .section-title {
      text-align: center;
      font-size: clamp(26px, 3vw, 34px);
      font-weight: 800;
      margin: 68px 0 16px
    }

    .section-desc {
      text-align: center;
      font-size: 16.5px;
      color: var(--muted);
      max-width: 32em;
      margin: 0 auto 40px
    }

    .steps {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      gap: 14px;
      align-items: stretch
    }

    .step {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 28px 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03)
    }

    .step-header {
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .num {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--soft);
      color: var(--blue);
      font-weight: 800;
      font-size: 14px;
      display: grid;
      place-items: center
    }

    .step .pic {
      width: 38px;
      height: 38px;
      color: var(--blue)
    }

    .step h3 {
      font-size: 18px;
      font-weight: 700
    }

    .step p {
      margin: 0;
      font-size: 14px;
      color: var(--muted);
      flex: 1
    }

    .arrow {
      color: var(--blue);
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    /* essentials */
    .ess {
      background: var(--band);
      margin-top: 70px;
      padding: 50px 0 76px
    }

    .ess h2 {
      font-size: 28px;
      font-weight: 800;
      margin-bottom: 24px
    }

    .ess-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px
    }

    .panel {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 28px;
      display: grid;
      grid-template-columns: 1fr 190px;
      gap: 20px;
      align-items: start;
      overflow: hidden;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03)
    }

    .panel .ico {
      border-radius: 12px;
      background: var(--soft);
      color: var(--blue);
      margin-bottom: 14px
    }

    .panel.g .ico {
      background: var(--mint)
    }

    .panel h3 {
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 8px
    }

    .panel p {
      margin: 0;
      font-size: 14px;
      color: var(--muted);
      line-height: 1.6
    }

    .mini {
      border: 1px solid var(--line);
      border-radius: 8px 8px 0 0;
      padding: 8px;
      margin-bottom: -60px;
      background: var(--bg);
      font-size: 8px;
      color: var(--ink);
      font-weight: 700
    }

    .mini .row {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 0;
      border-top: 1px solid var(--line);
      margin-top: 6px
    }

    .mini .row i {
      width: 26px;
      height: 20px;
      border-radius: 3px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      overflow: hidden;
      flex-shrink: 0;
    }

    .mini .row i img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 3px;
    }

    .mini .row span {
      flex: 1
    }

    .mini .row em {
      font-style: normal;
      color: var(--muted);
      font-weight: 500
    }

    /* pricing section */
    .pricing-section {
      padding: 70px 0 80px
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 28px;
      max-width: 960px;
      margin: 0 auto
    }

    .price-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 34px 30px;
      display: flex;
      flex-direction: column;
      position: relative;
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
      transition: transform .2s ease
    }

    .price-card:hover {
      transform: translateY(-3px)
    }

    .price-card.featured {
      border: 2px solid var(--blue);
      box-shadow: 0 12px 36px rgba(14, 116, 144, 0.14)
    }

    .price-badge {
      position: absolute;
      top: -12px;
      right: 24px;
      background: linear-gradient(135deg, #0e7490, #10b981);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
      padding: 4px 12px;
      border-radius: 99px;
      text-transform: uppercase
    }

    .price-tier {
      font-size: 22px;
      font-weight: 800;
      margin-bottom: 6px
    }

    .price-desc {
      font-size: 14px;
      color: var(--muted);
      margin-bottom: 20px;
      line-height: 1.5
    }

    .price-amt {
      font-size: 38px;
      font-weight: 800;
      color: var(--ink);
      margin-bottom: 6px;
      display: flex;
      align-items: baseline;
      gap: 4px
    }

    .price-amt span {
      font-size: 14px;
      font-weight: 600;
      color: var(--muted)
    }

    .price-features {
      list-style: none;
      padding: 0;
      margin: 24px 0;
      display: flex;
      flex-direction: column;
      gap: 11px;
      font-size: 14.5px
    }

    .price-features li {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .price-features li span.check {
      color: #10b981;
      font-weight: 800;
      font-size: 16px
    }

    .price-card .btn {
      width: 100%;
      margin-top: auto
    }

    /* pre-footer cta banner */
    .cta-banner {
      background: linear-gradient(135deg, #0d1f4a 0%, #083344 100%);
      color: #fff;
      border-radius: 16px;
      padding: 48px 40px;
      margin: 40px auto 80px;
      text-align: center;
      box-shadow: 0 16px 40px rgba(13, 31, 74, .18)
    }

    .cta-banner h2 {
      color: #fff;
      font-size: clamp(28px, 3.4vw, 38px);
      font-weight: 800;
      margin-bottom: 12px
    }

    .cta-banner p {
      color: #cbd5e1;
      font-size: 17px;
      max-width: 32em;
      margin: 0 auto 28px;
      line-height: 1.6
    }

    .cta-banner .cta {
      justify-content: center
    }

    /* footer */
    footer {
      background: #0d1f4a;
      color: #c3cde4;
      padding: 60px 0 30px;
      font-size: 14px
    }

    .f-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 36px
    }

    footer .logo {
      color: #fff;
      font-size: 25px;
      margin-bottom: 12px
    }

    footer p {
      margin: 0;
      max-width: 26em;
      line-height: 1.6;
      color: #94a3b8
    }

    footer h4 {
      margin: 0 0 16px;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase
    }

    footer ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 10px
    }

    footer a {
      color: #cbd5e1;
      transition: color .18s
    }

    footer a:hover {
      color: #fff;
      text-decoration: underline
    }

    .f-bottom {
      border-top: 1px solid rgba(255, 255, 255, .14);
      margin-top: 48px;
      padding-top: 22px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      font-size: 13px;
      color: #93a1c4
    }

    @media (max-width:980px) {
      .links {
        display: none
      }

      .hero {
        grid-template-columns: 1fr;
        padding: 36px 0 44px
      }

      .stage {
        height: 380px;
        max-width: 560px;
        margin: 0 auto;
        width: 100%
      }

      .strip .wrap {
        grid-template-columns: 1fr;
        gap: 20px
      }

      .val {
        padding: 0 !important;
        border: 0 !important
      }

      .steps {
        grid-template-columns: 1fr
      }

      .arrow {
        display: none
      }

      .ess-grid {
        grid-template-columns: 1fr
      }

      .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 480px
      }

      .f-grid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media (max-width:560px) {
      .actions .ghost {
        display: none
      }

      .panel {
        grid-template-columns: 1fr
      }

      .mini {
        display: none
      }

      .logo {
        font-size: 24px
      }

      .cta-banner {
        padding: 36px 20px
      }

      .f-grid {
        grid-template-columns: 1fr
      }
    }

    @media (prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }
    }