:root {
      --wine: #79061f;
      --dark: #37050e;
      --ink: #172035;
      --muted: #596176;
      --rose: #fff2f4;
      --line: #eee2e4
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      color: var(--ink);
      font-family: 'Jost', Arial, sans-serif
    }

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

    button {
      font: inherit;
      cursor: pointer
    }

    .wrap {
      max-width: 1200px;
      margin: auto;
      padding: 0 38px
    }

    .topbar {
      height: 65px;
      background: #ffffffed;
      position: sticky;
      top: 0;
      z-index: 10;
      box-shadow: 0 2px 14px #22030b0d
    }

    .topbar .wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      gap: 20px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap
    }

    .brand-mark {
      background: linear-gradient(135deg, #ba193a, #400413);
      color: white;
      border-radius: 12px;
      width: 47px;
      height: 47px;
      display: grid;
      place-items: center;
      font-size: 24px;
      font-weight: 800
    }

    .brand-name {
      font-size: 29px;
      letter-spacing: -1.5px;
      line-height: .88;
      font-weight: 800
    }

    .brand-name small {
      display: block;
      letter-spacing: 5px;
      font-size: 11px;
      text-align: center;
      margin-top: 5px
    }

    .brand-name span {
      color: var(--wine)
    }

    nav {
      display: flex;
      align-items: center;
      gap: 29px;
      font-size: 13px
    }

    nav a:hover,
    nav a.active {
      color: var(--wine)
    }

    nav a.active {
      border-bottom: 2px solid var(--wine);
      padding-bottom: 9px
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      background: var(--wine);
      border: 1px solid var(--wine);
      border-radius: 9px;
      color: #fff;
      padding: 14px 25px;
      font-weight: 700;
      box-shadow: 0 8px 18px #76071c16
    }

    .btn:hover {
      background: #550319
    }

    .btn.outline {
      background: #fff9fa;
      color: var(--wine)
    }

    .btn.outline:hover {
      background: #fce7eb
    }

    .header-cta {
      font-size: 12px;
      padding: 12px 21px
    }

    .menu-btn {
      display: none;
      border: 0;
      background: none;
      font-size: 27px;
      color: var(--wine)
    }

    .hero {
      background: radial-gradient(circle at 45% 35%, #fff6f7, transparent 40%), linear-gradient(106deg, #fff 0%, #fff7f8 51%, #e9c9c0 100%);
      overflow: hidden
    }

    .hero-grid {
      min-height: 416px;
      display: grid;
      grid-template-columns: 41% 59%;
      align-items: center
    }

    .hero-copy {
      position: relative;
      z-index: 2;
      padding: 28px 0
    }

    .eyebrow {
      font-size: 12px;
      color: #704a52;
      letter-spacing: .04em
    }

    .hero h1 {
      font-size: clamp(37px, 4vw, 56px);
      letter-spacing: -2.5px;
      line-height: 1.03;
      margin: 12px 0;
      color: #35151a
    }

    .hero h1 span {
      color: var(--wine)
    }

    .hero p {
      font-size: 16px;
      line-height: 1.35;
      margin: 0 0 20px;
      max-width: 390px
    }

    .quick-features {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin: 16px 0 22px;
      max-width: 420px
    }

    .quick-features>div {
      text-align: center;
      font-size: 11px;
      line-height: 1.2
    }

    .quick-features b {
      display: grid;
      place-items: center;
      background: #fff;
      color: var(--wine);
      font-size: 26px;
      width: 45px;
      height: 44px;
      border-radius: 10px;
      margin: 0 auto 7px;
      box-shadow: 0 7px 20px #630a1c10
    }

    .hero-actions {
      display: flex;
      gap: 12px
    }

    .hero-actions .btn {
      min-width: 155px
    }

    .hero-trust {
      display: flex;
      gap: 18px;
      font-size: 11px;
      margin-top: 19px;
      white-space: nowrap
    }

    .hero-trust span:before {
      content: '✓';
      color: var(--wine);
      font-weight: 800;
      margin-right: 7px
    }

    .visual {
      position: relative;
      height: 410px;
      align-self: end
    }

    .visual:before {
      content: '';
      position: absolute;
      inset: 0 -90px 0 5%;
      background: radial-gradient(circle at 70% 43%, #50352c96, transparent 45%), linear-gradient(135deg, transparent 5%, #65473b32);
      filter: blur(25px)
    }

    .script {
      position: absolute;
      right: 2%;
      top: 17px;
      color: #fff;
      font: italic 25px 'Playfair Display', serif;
      transform: rotate(-9deg);
      text-align: center;
      text-shadow: 0 2px 6px #22080a
    }

    .screen {
      position: absolute;
      background: #191b20;
      border: 9px solid #1b1d22;
      box-shadow: 0 19px 25px #22090b58;
      border-radius: 19px
    }

    .desktop {
      width: 78%;
      height: 291px;
      right: -4%;
      top: 75px;
      transform: perspective(900px) rotateY(-7deg)
    }

    .screen-inner {
      background: #fff;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 7px
    }

    .mock-header {
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e8e8ec;
      padding: 0 10px;
      font-size: 9px;
      font-weight: 800
    }

    .mock-header strong {
      color: var(--wine)
    }

    .mock-body {
      display: flex;
      height: calc(100% - 34px);
      font-size: 9px
    }

    .mock-side {
      width: 19%;
      background: #fbf8f9;
      border-right: 1px solid #eee
    }

    .mock-side div {
      padding: 11px 5px;
      border-bottom: 1px solid #f5ebed
    }

    .mock-side div:first-child {
      background: var(--wine);
      color: white
    }

    .mock-products {
      width: 54%;
      padding: 12px 9px
    }

    .mock-search {
      border: 1px solid #e3e6ed;
      border-radius: 4px;
      color: #98a0aa;
      padding: 7px;
      margin-bottom: 9px
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 7px
    }

    .product {
      border: 1px solid #ece9e9;
      border-radius: 6px;
      text-align: center;
      padding: 4px;
      font-size: 7px
    }

    .product i {
      display: block;
      border-radius: 5px;
      height: 45px;
      margin-bottom: 4px;
      background: radial-gradient(circle at 44% 37%, #e8a044 0 12%, #a63a1d 15% 40%, #6e301a 43% 48%, #f8eee0 50%)
    }

    .mock-bill {
      width: 27%;
      border-left: 1px solid #eee;
      padding: 10px 7px
    }

    .mock-bill h4 {
      margin: 0 0 10px;
      background: var(--wine);
      color: white;
      padding: 7px;
      border-radius: 4px
    }

    .mock-bill p {
      display: flex;
      justify-content: space-between;
      margin: 0;
      padding: 9px 0;
      border-bottom: 1px solid #eee;
      font-size: 7px
    }

    .mock-pay {
      background: var(--wine);
      color: white;
      text-align: center;
      margin-top: 12px;
      border-radius: 3px;
      padding: 9px;
      font-weight: 700
    }

    .stand {
      position: absolute;
      bottom: -44px;
      left: 39%;
      width: 37%;
      height: 44px;
      background: linear-gradient(90deg, #1f1f23, #454446, #171719);
      clip-path: polygon(22% 0, 78% 0, 87% 100%, 13% 100%)
    }

    .tablet {
      width: 36%;
      height: 177px;
      left: 1%;
      bottom: 13px;
      border-width: 7px;
      transform: rotate(-2deg);
      z-index: 2
    }

    .tablet .screen-inner {
      padding: 8px
    }

    .tablet h5 {
      font-size: 9px;
      margin: 0 0 8px
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 3px
    }

    .stats div {
      font-size: 7px;
      padding: 6px 3px;
      background: #f4f8fc;
      border-radius: 3px;
      text-align: center
    }

    .stats b {
      display: block;
      font-size: 12px;
      color: var(--wine)
    }

    .bars {
      display: flex;
      align-items: end;
      gap: 4px;
      height: 65px;
      border-bottom: 1px solid #eee;
      margin: 12px 5px
    }

    .bars i {
      flex: 1;
      background: #db6a78;
      height: var(--h)
    }

    .phone {
      width: 74px;
      height: 151px;
      right: -3%;
      bottom: 9px;
      z-index: 3;
      border-width: 5px;
      border-radius: 14px
    }

    .phone .screen-inner {
      text-align: center;
      padding: 28px 4px 5px;
      font-size: 6px
    }

    .phone .brand-mark {
      width: 22px;
      height: 22px;
      font-size: 11px;
      border-radius: 5px;
      margin: auto
    }

    .phone-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
      margin-top: 16px;
      color: var(--wine)
    }

    .phone-grid div {
      padding: 6px 2px;
      background: #fff3f4;
      border-radius: 5px
    }

    .printer {
      position: absolute;
      bottom: 9px;
      right: 12%;
      width: 120px;
      height: 65px;
      background: linear-gradient(#2d2c2f, #090909);
      border-radius: 7px;
      box-shadow: 0 10px 15px #0005;
      z-index: 2;
      text-align: center;
      color: #fff;
      padding-top: 20px;
      font-weight: 800;
      font-size: 12px
    }

    .printer:before {
      content: '';
      position: absolute;
      background: #fff;
      top: -29px;
      left: 28px;
      width: 64px;
      height: 37px;
      transform: rotate(6deg)
    }

    .features {
      padding: 22px 0 27px;
      background: #fff
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 10px;
      text-align: center
    }

    .feature-icon {
      display: grid;
      place-items: center;
      color: var(--wine);
      background: #fff1f3;
      width: 47px;
      height: 45px;
      border-radius: 10px;
      margin: 0 auto 7px;
      font-size: 25px
    }

    .features-grid p {
      font-size: 11px;
      line-height: 1.22;
      margin: 0
    }

    .pricing {
      background: linear-gradient(115deg, #fff8f9, #fceef0 72%, #fff6f8);
      padding: 27px 0 18px
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: 1fr 1.08fr 1.08fr;
      gap: 16px;
      align-items: stretch
    }

    .pricing-intro h2,
    .section-heading h2 {
      font-size: 27px;
      letter-spacing: -1px;
      line-height: 1.15;
      margin: 0
    }

    .underline {
      width: 44px;
      height: 3px;
      background: var(--wine);
      margin: 13px 0
    }

    .pricing-intro>p {
      line-height: 1.3;
      margin: 0 0 17px
    }

    .check-list {
      list-style: none;
      padding: 0;
      margin: 0
    }

    .check-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 9px 0;
      font-size: 13px
    }

    .check-list li:before {
      content: '✓';
      background: var(--wine);
      color: #fff;
      border-radius: 50%;
      display: grid;
      place-items: center;
      flex: none;
      width: 17px;
      height: 17px;
      font-size: 10px;
      font-weight: 800
    }

    .plan {
      background: white;
      border-radius: 12px;
      padding: 17px 22px 15px;
      box-shadow: 0 5px 20px #660d1b0b;
      position: relative;
      display: flex;
      flex-direction: column
    }

    .plan.popular {
      border: 1px solid #ead4d8
    }

    .badge {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--wine);
      color: #fff;
      padding: 6px 17px;
      border-radius: 9px;
      font-size: 11px;
      white-space: nowrap
    }

    .plan-head {
      display: flex;
      align-items: center;
      gap: 15px
    }

    .plan-icon {
      background: #fbeef1;
      color: var(--wine);
      border-radius: 11px;
      width: 63px;
      height: 57px;
      display: grid;
      place-items: center;
      font-size: 33px;
      flex: none
    }

    .plan h3 {
      font-size: 19px;
      margin: 0
    }

    .plan-head p {
      font-size: 12px;
      color: var(--muted);
      margin: 1px 0
    }

    .price {
      text-align: center;
      color: var(--wine);
      font-size: 38px;
      line-height: 1;
      font-weight: 800;
      margin: 13px 0 0
    }

    .price-note {
      text-align: center;
      color: var(--muted);
      font-size: 11px;
      margin: 2px 0 9px
    }

    .plan .check-list li {
      font-size: 12px;
      margin: 5px 0
    }

    .plan .check-list li:before {
      width: 15px;
      height: 15px
    }

    .renewal {
      text-align: center;
      background: #ffe8ed;
      color: var(--wine);
      border-radius: 8px;
      padding: 7px;
      margin: 7px 0;
      font-size: 13px;
      font-weight: 700
    }

    .renewal small {
      display: block;
      font-size: 10px;
      font-weight: 400
    }

    .plan .btn {
      margin-top: auto;
      width: 100%;
      padding: 10px
    }

    .assurance {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      background: white;
      border-radius: 10px;
      margin-top: 17px;
      padding: 13px 8px
    }

    .assurance div {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border-right: 1px solid var(--line);
      font-size: 10px
    }

    .assurance div:last-child {
      border: 0
    }

    .assurance b {
      color: var(--wine);
      background: #fcebef;
      border-radius: 50%;
      width: 31px;
      height: 31px;
      display: grid;
      place-items: center;
      font-size: 17px;
      flex: none
    }

    .industries {
      padding: 18px 0 14px
    }

    .section-heading {
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .section-heading h2 {
      font-size: 22px
    }

    .section-heading a {
      font-size: 12px;
      color: var(--wine)
    }

    .industry-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 12px
    }

    .industry {
      position: relative;
      height: 108px;
      border-radius: 8px;
      overflow: hidden;
      background-size: cover;
      background-position: center
    }

    .industry:after {
      content: '';
      position: absolute;
      inset: 45% 0 0;
      background: linear-gradient(transparent, #0d0b0be6);
    }

    .industry span {
      position: absolute;
      bottom: 9px;
      left: 0;
      right: 0;
      text-align: center;
      color: white;
      font-size: 12px;
      font-weight: 700;
      z-index: 1
    }

    .cta {
      background: linear-gradient(90deg, #34030aa6, #42030de8), url('assets/food-banner.png') left center/auto 100% no-repeat, #3e050e;
      color: white
    }

    .cta-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 146px;
      gap: 30px;
      padding-left: 22%
    }

    .cta h2 {
      font-size: 21px;
      margin: 0 0 4px
    }

    .cta p {
      margin: 0 0 11px;
      font-size: 13px
    }

    .cta .btn {
      background: #a7062f;
      border-color: #a7062f;
      padding: 10px 19px;
      min-width: 185px
    }

    .cta .btn.outline {
      background: transparent;
      color: white;
      border-color: white;
      min-width: 130px
    }

    .cta-actions {
      display: flex;
      gap: 12px
    }

    .cta-icons {
      display: flex;
      gap: 30px;
      text-align: center;
      font-size: 11px
    }

    .cta-icons b {
      font-size: 29px;
      display: block;
      font-weight: 400;
      margin-bottom: 7px
    }

    footer {
      padding: 19px 0 27px;
      background: white
    }

    footer .wrap {
      display: grid;
      grid-template-columns: 2.2fr repeat(3, .9fr) 1.5fr;
      gap: 20px
    }

    footer .brand-name {
      font-size: 26px
    }

    footer .brand-mark {
      width: 41px;
      height: 41px
    }

    footer p,
    footer a {
      font-size: 11px;
      color: #5b6477
    }

    footer p {
      margin: 10px 0
    }

    footer h4 {
      font-size: 11px;
      margin: 0 0 7px
    }

    footer a {
      display: block;
      margin: 5px 0
    }

    footer a:hover {
      color: var(--wine)
    }

    .social {
      display: flex;
      gap: 8px
    }

    .social a {
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      color: white;
      background: #22548c;
      border-radius: 4px;
      font-weight: 700;
      font-size: 15px
    }

    .social a:nth-child(2) {
      background: #d7357a
    }

    .social a:nth-child(3) {
      background: #d7192a
    }

    .social a:nth-child(4) {
      background: #1876a3
    }

    .copyright {
      margin-top: 22px;
      font-size: 10px;
      color: #687187
    }

    .modal {
      position: fixed;
      inset: 0;
      background: #180309ad;
      z-index: 30;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px
    }

    .modal.open {
      display: flex
    }

    .modal-card {
      background: white;
      border-radius: 16px;
      padding: 27px;
      max-width: 450px;
      width: 100%;
      position: relative;
      box-shadow: 0 25px 90px #0005
    }

    .modal-card h2 {
      margin: 0 0 8px
    }

    .modal-card p {
      color: var(--muted);
      line-height: 1.5
    }

    .close {
      position: absolute;
      right: 15px;
      top: 10px;
      background: none;
      border: 0;
      font-size: 25px
    }

    .modal-card label {
      display: block;
      margin: 13px 0;
      font-size: 12px;
      font-weight: 700
    }

    .modal-card input,
    .modal-card textarea {
      display: block;
      width: 100%;
      border: 1px solid #dfd7da;
      border-radius: 7px;
      padding: 11px;
      margin-top: 5px;
      font: inherit
    }

    .modal-card .btn {
      width: 100%
    }

    .form-status {
      font-size: 12px;
      color: var(--wine)
    }

    @media(max-width:900px) {
      .wrap {
        padding: 0 24px
      }

      nav {
        gap: 13px;
        font-size: 12px
      }

      .hero-grid {
        grid-template-columns: 46% 54%
      }

      .hero-trust {
        gap: 7px;
        font-size: 9px
      }

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

      .pricing-intro {
        grid-column: 1/-1
      }

      .pricing-intro .check-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr)
      }

      .features-grid {
        grid-template-columns: repeat(5, 1fr);
        row-gap: 20px
      }

      .industry-grid {
        grid-template-columns: repeat(4, 1fr)
      }

      .cta-inner {
        padding-left: 17%
      }

      .cta-icons {
        gap: 12px
      }
    }

    @media(max-width:680px) {
      .topbar {
        height: 62px
      }

      .header-cta {
        display: none
      }

      .menu-btn {
        display: block
      }

      nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 62px;
        background: #fff;
        padding: 20px 24px;
        box-shadow: 0 15px 20px #2503091c;
        flex-direction: column;
        align-items: flex-start;
        font-size: 15px
      }

      nav.open {
        display: flex
      }

      .hero-grid {
        display: block
      }

      .hero-copy {
        padding: 30px 0 0
      }

      .hero h1 {
        font-size: 41px
      }

      .hero p {
        font-size: 14px
      }

      .visual {
        height: 330px;
        margin-top: 12px
      }

      .desktop {
        top: 18px;
        width: 85%;
        height: 250px
      }

      .tablet {
        bottom: 0
      }

      .phone {
        bottom: 0
      }

      .printer {
        bottom: 0
      }

      .script {
        top: 0;
        font-size: 18px
      }

      .hero-trust {
        flex-wrap: wrap;
        font-size: 10px
      }

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

      .pricing-intro .check-list {
        grid-template-columns: 1fr 1fr
      }

      .assurance {
        grid-template-columns: 1fr 1fr;
        gap: 14px
      }

      .assurance div {
        justify-content: flex-start;
        border: 0
      }

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

      .cta-inner {
        padding: 30px 0;
        display: block
      }

      .cta-icons {
        margin-top: 24px;
        justify-content: space-around
      }

      footer .wrap {
        grid-template-columns: 1fr 1fr
      }

      footer .wrap>div:first-child {
        grid-column: 1/-1
      }
    }

    @media(max-width:400px) {
      .wrap {
        padding: 0 17px
      }

      .hero-actions {
        flex-wrap: wrap
      }

      .hero-actions .btn {
        min-width: 135px;
        padding: 12px
      }

      .quick-features {
        gap: 3px
      }

      .quick-features>div {
        font-size: 9px
      }

      .visual {
        height: 290px
      }

      .desktop {
        height: 222px
      }

      .tablet {
        height: 140px
      }

      .pricing-intro .check-list {
        display: block
      }

      .features-grid {
        grid-template-columns: repeat(3, 1fr)
      }

      .cta-actions {
        flex-wrap: wrap
      }
    }

    /* Extra polish: keeps the same layout and palette */
    .btn {
      position: relative;
      overflow: hidden;
      isolation: isolate
    }

    .btn:after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .24) 50%, transparent 75%);
      transform: translateX(-130%);
      transition: transform .55s ease;
      z-index: -1
    }

    .btn:hover:after {
      transform: translateX(130%)
    }

    .feature-icon,
    .plan-icon {
      box-shadow: 0 8px 18px rgba(121, 6, 31, .10)
    }

    .industry {
      box-shadow: 0 8px 20px rgba(26, 8, 13, .18);
      transition: transform .25s ease, box-shadow .25s ease
    }

    .industry:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 27px rgba(26, 8, 13, .25)
    }

    .industry:before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(150deg, rgba(255, 255, 255, .12), transparent 45%);
      z-index: 1;
      pointer-events: none
    }

    .industry span {
      z-index: 2
    }

    .plan {
      transition: transform .3s ease, box-shadow .3s ease
    }

    .plan:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 34px rgba(90, 4, 25, .15)
    }

    .cta-icons div {
      transition: transform .25s ease
    }

    .cta-icons div:hover {
      transform: translateY(-5px)
    }

    .reveal {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .55s ease, transform .55s ease
    }

    .reveal.show {
      opacity: 1;
      transform: none
    }

    /* Hero and navigation finishing details */
    .topbar {
      backdrop-filter: blur(12px)
    }

    .brand,
    .header-cta,
    nav a {
      transition: color .2s ease, transform .2s ease, background .2s ease
    }

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

    .visual {
      transform-style: preserve-3d
    }

    .visual.is-moving .desktop {
      transition: transform .08s linear
    }

    .hero-copy {
      animation: hero-copy-in .65s ease both
    }

    @keyframes hero-copy-in {
      from {
        opacity: 0;
        transform: translateY(14px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    /* Exact hero-reference artwork */
    .hero {
      background: url("assets/hero-restaurant-bg.png") center/cover no-repeat
    }

    .visual:before {
      display: none
    }

    .visual>:not(.hero-pos-art) {
      display: none
    }

    .hero-pos-art {
      position: absolute;
      width: 720px;
      max-width: none;
      right: -104px;
      bottom: -43px;
      filter: drop-shadow(15px 20px 20px rgba(23, 4, 8, .26));
      animation: hero-pos-float 6s ease-in-out infinite
    }

    @keyframes hero-pos-float {
      50% {
        transform: translateY(-9px)
      }
    }

    @media(max-width:900px) {
      .hero-pos-art {
        width: 570px;
        right: -65px
      }
    }

    @media(max-width:680px) {
      .hero-pos-art {
        width: 590px;
        right: -150px;
        bottom: -15px
      }
    }

    /* Hero alignment calibrated against the supplied reference */
    .hero .wrap {
      max-width: none;
      padding-left: 35px;
      padding-right: 35px
    }

    .hero-grid {
      min-height: 432px;
      grid-template-columns: 37% 63%
    }

    .hero-copy {
      padding: 18px 0
    }

    .hero h1 {
      font-size: 43px;
      letter-spacing: -2.1px;
      line-height: 1.03;
      margin: 7px 0 10px
    }

    .hero p {
      font-size: 15px;
      line-height: 1.3;
      margin-bottom: 14px;
      max-width: 390px
    }

    .quick-features {
      margin: 12px 0 18px;
      max-width: 385px
    }

    .quick-features b {
      width: 43px;
      height: 43px;
      font-size: 23px;
      margin-bottom: 5px
    }

    .hero-actions .btn {
      min-width: 171px;
      padding: 14px 20px
    }

    .hero-trust {
      margin-top: 17px
    }

    .visual {
      height: 420px
    }

    .hero-pos-art {
      width: 840px;
      right: 210px;
      bottom: -42px
    }

    .script {
      right: 8%;
      top: 15px
    }

    @media(max-width:900px) {
      .hero .wrap {
        padding-left: 25px;
        padding-right: 25px
      }

      .hero-grid {
        grid-template-columns: 42% 58%
      }

      .hero h1 {
        font-size: 38px
      }

      .hero-pos-art {
        width: 700px;
        right: 120px
      }
    }

    @media(max-width:680px) {
      .hero-grid {
        display: block
      }

      .hero .wrap {
        padding: 0 20px
      }

      .hero-pos-art {
        width: 590px;
        right: -125px;
        bottom: -12px
      }
    }

    .hero-pos-art {
      right: 300px
    }

    @media(max-width:900px) {
      .hero-pos-art {
        right: 170px
      }
    }

    @media(max-width:680px) {
      .hero-pos-art {
        right: -125px
      }
    }

    /* Final reference geometry: content gutter, hero height and POS anchor */
    .hero .wrap {
      padding-left: 68px;
      padding-right: 35px
    }

    .hero-grid {
      min-height: 498px;
      grid-template-columns: 40% 60%
    }

    .hero-copy {
      padding: 34px 0 0;
      align-self: center;
    }

    .hero h1 {
      font-size: 47px;
      line-height: 1.02;
      margin: 8px 0 12px
    }

    .hero p {
      max-width: 355px;
      font-size: 16px;
      line-height: 1.32;
      margin-bottom: 17px
    }

    .quick-features {
      max-width: 455px;
      gap: 14px;
      margin: 14px 0 23px
    }

    .quick-features b {
      width: 51px;
      height: 51px;
      font-size: 26px;
      margin-bottom: 7px
    }

    .hero-actions .btn {
      min-width: 191px;
      padding: 15px 23px
    }

    .hero-trust {
      margin-top: 20px
    }

    .visual {
      height: 498px;
      align-self: start
    }

    .hero-pos-art {
      width: 840px;
      right: 80px;
      bottom: -18px
    }

    @media(max-width:900px) {
      .hero .wrap {
        padding-left: 35px
      }

      .hero-grid {
        grid-template-columns: 42% 58%
      }

      .hero h1 {
        font-size: 41px
      }

      .hero-pos-art {
        right: 95px;
        width: 710px
      }
    }

    @media(max-width:680px) {
      .hero .wrap {
        padding: 0 20px
      }

      .hero-grid {
        min-height: auto
      }

      .hero-copy {
        padding-top: 28px
      }

      .visual {
        height: 330px
      }

      .hero-pos-art {
        right: -125px;
        bottom: -12px;
        width: 590px
      }
    }

    .feature-icon {
      font-size: 0 !important
    }

    .feature-icon i {
      font-size: 22px;
      line-height: 1
    }

    .features-grid p {
      font-weight: 500
    }

    .feature-icon:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 20px rgba(121, 6, 31, .16)
    }

    body {
      font-size: 17px
    }

    /* Larger typography across every content section */
    main section h2 {
      font-size: 32px !important;
      line-height: 1.18
    }

    main section h3 {
      font-size: 22px !important
    }

    main section p {
      font-size: 16px !important;
      line-height: 1.48
    }

    main section .features-grid p {
      font-size: 13px !important;
      line-height: 1.28
    }

    main section .check-list li {
      font-size: 14px !important;
      line-height: 1.35
    }

    main section .plan-head p,
    main section .price-note {
      font-size: 13px !important
    }

    main section .section-heading a {
      font-size: 14px !important
    }

    main section .cta p {
      font-size: 15px !important
    }

    main section .cta h2 {
      font-size: 27px !important
    }

    /* Larger footer typography */
    footer h4 {
      font-size: 14px !important;
      margin-bottom: 10px !important
    }

    footer p,
    footer a {
      font-size: 13px !important;
      line-height: 1.45
    }

    footer .brand-name {
      font-size: 30px !important
    }

    footer .brand-name small {
      font-size: 10px !important
    }

    footer .copyright {
      font-size: 12px !important
    }

    footer .social a {
      font-size: 16px !important
    }

    /* Branded 3D page preloader */
    body.is-loading {
      overflow: hidden
    }

    body.is-loading header,
    body.is-loading main,
    body.is-loading footer {
      opacity: 0;
      filter: blur(5px);
      transform: perspective(1300px) rotateX(4deg) translateY(30px);
      pointer-events: none
    }

    header,
    main,
    footer {
      transition: opacity .75s ease, filter .75s ease, transform .85s cubic-bezier(.2, .8, .2, 1)
    }

    .page-preloader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: grid;
      place-content: center;
      justify-items: center;
      background: radial-gradient(circle at 50% 40%, #fff7f8 0, #f7e9eb 40%, #71001d 140%);
      color: #1b1831;
      transition: opacity .65s ease, visibility .65s ease
    }

    .page-preloader.is-hidden {
      opacity: 0;
      visibility: hidden
    }

    .loader-scene {
      width: 122px;
      height: 122px;
      display: grid;
      place-items: center;
      position: relative;
      perspective: 700px
    }

    .loader-cube {
      position: relative;
      z-index: 2;
      width: 63px;
      height: 63px;
      border-radius: 15px;
      background: linear-gradient(135deg, #b8113b, #560017);
      box-shadow: 0 17px 24px #57001752, inset 0 1px 0 #fff5;
      display: grid;
      place-items: center;
      transform-style: preserve-3d;
      animation: loader-spin 2.3s ease-in-out infinite
    }

    .loader-cube:before,
    .loader-cube:after {
      content: "";
      position: absolute;
      inset: 8px;
      border: 1px solid #fff5;
      border-radius: 10px;
      transform: translateZ(8px)
    }

    .loader-cube:after {
      inset: -8px;
      border-color: #97002d55;
      transform: translateZ(-11px)
    }

    .loader-cube span {
      font-size: 22px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -2px;
      transform: translateZ(18px)
    }

    .loader-orbit {
      position: absolute;
      border: 1px solid #a6083155;
      border-radius: 50%;
      transform-style: preserve-3d
    }

    .orbit-one {
      width: 113px;
      height: 48px;
      transform: rotateX(67deg) rotateZ(12deg);
      animation: orbit 1.8s linear infinite
    }

    .orbit-two {
      width: 100px;
      height: 42px;
      transform: rotateX(67deg) rotateZ(-63deg);
      animation: orbit 2.4s linear reverse infinite
    }

    .page-preloader strong {
      font-size: 27px;
      letter-spacing: -1.4px;
      margin-top: 14px
    }

    .page-preloader strong span {
      color: #8c0025
    }

    .page-preloader p {
      font-size: 12px;
      color: #645765;
      margin: 4px 0 15px
    }

    .loader-line {
      width: 170px;
      height: 4px;
      border-radius: 5px;
      background: #ead9dc;
      overflow: hidden
    }

    .loader-line i {
      display: block;
      height: 100%;
      width: 42%;
      border-radius: inherit;
      background: linear-gradient(90deg, #78001f, #bd1741);
      animation: load-line 2.25s ease-in-out forwards
    }

    @keyframes loader-spin {

      0%,
      100% {
        transform: rotateX(0) rotateY(0) translateY(0)
      }

      50% {
        transform: rotateX(18deg) rotateY(180deg) translateY(-8px)
      }
    }

    @keyframes orbit {
      to {
        transform: rotateX(67deg) rotateZ(372deg)
      }
    }

    @keyframes load-line {
      0% {
        transform: translateX(-110%)
      }

      55%,
      100% {
        transform: translateX(160%)
      }
    }

    .page-3d-in {
      animation: page-3d-in .72s both
    }

    @keyframes page-3d-in {
      from {
        opacity: 0;
        transform: perspective(1200px) rotateX(6deg) translateY(30px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    /* Food-themed preloader */
    .page-preloader {
      background: linear-gradient(90deg, rgba(255, 248, 249, .97) 0%, rgba(255, 245, 246, .92) 44%, rgba(116, 0, 31, .97) 100%), url('assets/food-banner.png') left bottom/auto 62% no-repeat
    }

    .page-preloader:before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 34%;
      height: 46%;
      background: url('assets/food-banner.png') left bottom/cover no-repeat;
      opacity: .9;
      mask-image: linear-gradient(90deg, #000 0%, transparent 100%)
    }

    .page-preloader>* {
      position: relative;
      z-index: 1
    }

    .loader-line i {
      animation-duration: 2.85s
    }

    .order-journey {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 10px;
      margin: 17px 0 8px
    }

    .journey-step {
      width: 54px;
      text-align: center;
      color: #78001f;
      font-size: 19px;
      position: relative;
      animation: journey-pop 2.7s ease-in-out infinite
    }

    .journey-step:nth-child(2) {
      animation-delay: .45s
    }

    .journey-step:nth-child(3) {
      animation-delay: .9s
    }

    .journey-step small {
      display: block;
      color: #624e58;
      font-size: 8px;
      font-weight: 700;
      margin-top: 5px
    }

    .journey-step:not(:last-child):after {
      content: "";
      position: absolute;
      top: 10px;
      left: 42px;
      width: 26px;
      height: 1px;
      background: #a6002e70
    }

    .journey-step:not(:last-child):before {
      content: "›";
      position: absolute;
      top: 0;
      right: -1px;
      color: #a6002e;
      font-size: 15px
    }

    @keyframes journey-pop {

      0%,
      100% {
        transform: translateY(0);
        color: #78001f
      }

      28% {
        transform: translateY(-6px) scale(1.12);
        color: #c20c3b
      }
    }

    /* 3D dine-in guest story */
    .page-preloader .loader-scene {
      display: none
    }

    .dine-story {
      width: 310px;
      height: 122px;
      position: relative;
      perspective: 750px;
      margin: 12px 0 3px
    }

    .story-person,
    .story-menu,
    .story-table,
    .story-bill {
      position: absolute;
      display: grid;
      place-items: center;
      color: #79061f;
      transform-style: preserve-3d
    }

    .story-person {
      left: 10px;
      bottom: 15px;
      font-size: 31px;
      animation: guest-walk 3s ease-in-out infinite
    }

    .story-person small,
    .story-table small {
      font-size: 8px;
      font-weight: 700;
      color: #604653;
      white-space: nowrap
    }

    .story-menu {
      left: 84px;
      top: 15px;
      width: 50px;
      height: 67px;
      border-radius: 8px;
      background: #fff;
      color: #97002d;
      box-shadow: 10px 12px 20px #7c08211d;
      transform: rotateY(-22deg) rotateX(8deg);
      animation: menu-turn 3s ease-in-out infinite
    }

    .story-menu i {
      font-size: 20px
    }

    .story-menu b {
      font-size: 8px
    }

    .story-menu em {
      font-size: 6px;
      font-style: normal;
      color: #8b7880
    }

    .story-table {
      left: 155px;
      bottom: 14px;
      width: 74px;
      height: 47px;
      border-radius: 50%;
      background: linear-gradient(145deg, #fff, #f5dfe3);
      border: 2px solid #b7153e;
      box-shadow: 0 12px 0 #72021d, 0 18px 18px #79001f32;
      animation: table-pop 3s ease-in-out infinite
    }

    .story-table i {
      font-size: 24px;
      transform: translateZ(13px)
    }

    .story-table span {
      position: absolute;
      inset: 14px;
      border: 1px dashed #be6780;
      border-radius: 50%
    }

    .story-table small {
      position: absolute;
      top: 58px
    }

    .story-bill {
      right: 15px;
      top: 27px;
      width: 43px;
      height: 57px;
      border-radius: 4px;
      background: #fff;
      box-shadow: 7px 10px 15px #6500192c;
      transform: rotateZ(7deg) rotateY(-13deg);
      animation: bill-print 3s ease-in-out infinite
    }

    .story-bill i {
      font-size: 18px
    }

    .story-bill b {
      font-size: 9px
    }

    .story-caption {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      color: #674854;
      font-size: 9px;
      font-weight: 700;
      margin-bottom: 12px
    }

    .story-caption i {
      font-style: normal;
      color: #a0002b;
      font-size: 14px
    }

    @keyframes guest-walk {

      0%,
      20% {
        transform: translateX(-14px);
        opacity: 0
      }

      35%,
      100% {
        transform: translateX(0);
        opacity: 1
      }
    }

    @keyframes menu-turn {

      0%,
      24% {
        transform: rotateY(65deg) scale(.85);
        opacity: .3
      }

      42%,
      100% {
        transform: rotateY(-22deg) rotateX(8deg);
        opacity: 1
      }
    }

    @keyframes table-pop {

      0%,
      43% {
        transform: translateY(9px) scale(.75);
        opacity: .15
      }

      58%,
      100% {
        transform: translateY(0) scale(1);
        opacity: 1
      }
    }

    @keyframes bill-print {

      0%,
      62% {
        transform: translateY(-16px) rotateZ(7deg);
        opacity: 0
      }

      76%,
      100% {
        transform: translateY(0) rotateZ(7deg);
        opacity: 1
      }
    }

    /* Video-like 3D preloader motion */
    .dine-story {
      transform-style: preserve-3d;
      animation: story-camera 3s cubic-bezier(.2, .7, .2, 1) infinite
    }

    .story-table:after {
      content: "";
      position: absolute;
      width: 18px;
      height: 28px;
      border-left: 2px solid #fff9;
      border-radius: 50%;
      top: -25px;
      left: 27px;
      filter: blur(.5px);
      animation: food-steam 1s ease-in-out infinite
    }

    .story-person i {
      filter: drop-shadow(3px 5px 4px rgba(74, 0, 17, .24))
    }

    .story-menu:after {
      content: "";
      position: absolute;
      right: 6px;
      bottom: 8px;
      width: 20px;
      height: 3px;
      background: #e5a9b7;
      border-radius: 4px;
      box-shadow: 0 -8px #e5a9b7, 0 -16px #e5a9b7;
      animation: menu-scan 3s ease-in-out infinite
    }

    .story-bill:after {
      content: "✓";
      position: absolute;
      right: -7px;
      bottom: -7px;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #20a570;
      color: #fff;
      font-size: 10px;
      box-shadow: 0 3px 8px #1e8e6755;
      animation: bill-check 3s ease-in-out infinite
    }

    @keyframes story-camera {

      0%,
      100% {
        transform: perspective(700px) rotateX(3deg) rotateY(-3deg) scale(.94)
      }

      45%,
      72% {
        transform: perspective(700px) rotateX(0) rotateY(2deg) scale(1.06)
      }
    }

    @keyframes food-steam {

      0%,
      100% {
        opacity: 0;
        transform: translateY(7px) scaleX(.6)
      }

      50% {
        opacity: 1;
        transform: translateY(-8px) scaleX(1)
      }
    }

    @keyframes menu-scan {

      0%,
      28% {
        opacity: 0;
        transform: translateY(7px)
      }

      43%,
      100% {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes bill-check {

      0%,
      68% {
        opacity: 0;
        transform: scale(.2)
      }

      83%,
      100% {
        opacity: 1;
        transform: scale(1)
      }
    }

    /* Full 3D hotel dine-in ordering story */
    .page-preloader .dine-story,
    .page-preloader .order-journey,
    .page-preloader .story-caption:not(.story-flow) {
      display: none
    }

    .hotel-story {
      position: relative;
      width: 355px;
      height: 145px;
      margin: 10px 0 1px;
      perspective: 900px;
      transform-style: preserve-3d
    }

    .story-hotel {
      position: absolute;
      left: 12px;
      top: 36px;
      width: 76px;
      height: 76px;
      border-radius: 12px;
      background: linear-gradient(145deg, #850022, #4e0015);
      display: grid;
      place-content: center;
      text-align: center;
      color: #fff;
      box-shadow: 0 16px 23px #69001e4a;
      transform: rotateY(14deg);
      animation: hotel-glow 5.5s ease-in-out infinite
    }

    .story-hotel i {
      font-size: 28px
    }

    .story-hotel small {
      font-size: 7px;
      font-weight: 800;
      margin-top: 6px
    }

    .story-walker {
      position: absolute;
      left: 78px;
      bottom: 16px;
      color: #75001e;
      text-align: center;
      font-size: 26px;
      z-index: 3;
      animation: walk-to-hotel 5.5s ease-in-out infinite
    }

    .story-walker small {
      display: block;
      font-size: 7px;
      font-weight: 700;
      white-space: nowrap
    }

    .story-phone-ui {
      position: absolute;
      right: 78px;
      top: 6px;
      width: 86px;
      height: 130px;
      background: #161820;
      border: 5px solid #23242c;
      border-radius: 16px;
      box-shadow: 12px 17px 22px #23050c3b;
      overflow: hidden;
      color: #19172c;
      transform: rotateY(-19deg) rotateX(5deg);
      animation: phone-open 5.5s ease-in-out infinite
    }

    .phone-notch {
      position: absolute;
      top: 0;
      left: 26px;
      width: 27px;
      height: 5px;
      background: #161820;
      border-radius: 0 0 5px 5px;
      z-index: 3
    }

    .story-phone-ui .qr {
      display: grid;
      place-items: center;
      height: 35px;
      margin-top: 13px;
      color: #830020;
      font-size: 24px;
      animation: qr-show 5.5s ease-in-out infinite
    }

    .scan-beam {
      position: absolute;
      left: 12px;
      right: 12px;
      top: 29px;
      height: 2px;
      background: #e30b3e;
      box-shadow: 0 0 8px #e30b3e;
      animation: scan-menu 5.5s linear infinite
    }

    .phone-menu {
      padding: 2px 7px;
      font-size: 6px;
      opacity: 0;
      animation: show-menu 5.5s ease-in-out infinite
    }

    .phone-menu strong {
      font-size: 8px
    }

    .phone-menu>span {
      float: right;
      color: #8e0027;
      background: #ffe6eb;
      padding: 3px;
      border-radius: 3px
    }

    .phone-menu div {
      position: relative;
      margin-top: 7px;
      border: 1px solid #eee;
      border-radius: 4px;
      padding: 5px;
      display: grid;
      grid-template-columns: 20px 1fr;
      gap: 3px
    }

    .phone-menu div i {
      grid-row: span 2;
      color: #bd4f25;
      font-size: 17px
    }

    .phone-menu div b {
      font-size: 6px
    }

    .phone-menu div small {
      font-size: 6px;
      color: #880023
    }

    .phone-menu div em {
      position: absolute;
      right: 3px;
      bottom: 2px;
      color: #fff;
      background: #920026;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-style: normal;
      font-size: 10px;
      animation: tap-add 5.5s ease-in-out infinite
    }

    .story-order {
      position: absolute;
      right: 0;
      bottom: 17px;
      width: 88px;
      height: 56px;
      border-radius: 9px;
      background: #fff;
      color: #800021;
      box-shadow: 8px 10px 17px #6500192b;
      display: grid;
      place-content: center;
      text-align: center;
      opacity: 0;
      transform: translateZ(-40px) scale(.7);
      animation: order-confirm 5.5s ease-in-out infinite
    }

    .story-order i {
      font-size: 19px
    }

    .story-order b {
      font-size: 8px;
      margin-top: 3px
    }

    .story-order small {
      font-size: 6px;
      color: #666
    }

    .story-flow {
      font-size: 8px !important;
      gap: 5px !important;
      margin-top: 4px !important
    }

    .story-flow span {
      animation: flow-text 5.5s ease-in-out infinite
    }

    .story-flow span:nth-of-type(2) {
      animation-delay: 1.2s
    }

    .story-flow span:nth-of-type(3) {
      animation-delay: 2.5s
    }

    .story-flow span:nth-of-type(4) {
      animation-delay: 3.7s
    }

    @keyframes hotel-glow {

      0%,
      100% {
        transform: rotateY(14deg)
      }

      45% {
        transform: rotateY(14deg) translateY(-4px)
      }
    }

    @keyframes walk-to-hotel {
      0% {
        opacity: 0;
        transform: translateX(-65px)
      }

      10%,
      25% {
        opacity: 1;
        transform: translateX(0)
      }

      30%,
      100% {
        opacity: 0;
        transform: translateX(7px)
      }
    }

    @keyframes phone-open {

      0%,
      22% {
        opacity: 0;
        transform: translateY(18px) rotateY(-55deg) scale(.7)
      }

      34%,
      100% {
        opacity: 1;
        transform: rotateY(-19deg) rotateX(5deg) scale(1)
      }
    }

    @keyframes qr-show {

      0%,
      27% {
        opacity: 0
      }

      34%,
      48% {
        opacity: 1
      }

      54%,
      100% {
        opacity: 0
      }
    }

    @keyframes scan-menu {

      0%,
      30% {
        opacity: 0;
        transform: translateY(0)
      }

      36%,
      49% {
        opacity: 1;
        transform: translateY(24px)
      }

      55%,
      100% {
        opacity: 0
      }
    }

    @keyframes show-menu {

      0%,
      48% {
        opacity: 0;
        transform: translateY(8px)
      }

      56%,
      100% {
        opacity: 1;
        transform: none
      }
    }

    @keyframes tap-add {

      0%,
      66% {
        transform: scale(1)
      }

      72% {
        transform: scale(.65)
      }

      79%,
      100% {
        transform: scale(1)
      }
    }

    @keyframes order-confirm {

      0%,
      71% {
        opacity: 0;
        transform: translateZ(-40px) scale(.7)
      }

      82%,
      100% {
        opacity: 1;
        transform: translateZ(16px) scale(1)
      }
    }

    @keyframes flow-text {

      0%,
      100% {
        color: #67505a
      }

      20% {
        color: #b00031;
        transform: translateY(-2px)
      }
    }

    .page-preloader .loader-line i {
      animation-duration: 5.15s
    }

    .preloader-guest {
      position: absolute;
      left: calc(50% - 390px);
      bottom: -42px;
      width: 245px;
      z-index: 0 !important;
      filter: drop-shadow(13px 17px 22px rgba(57, 0, 15, .24));
      animation: guest-entrance 5.5s ease-in-out infinite
    }

    @keyframes guest-entrance {

      0%,
      100% {
        transform: translateX(-13px) translateY(8px) scale(.96);
        opacity: .76
      }

      45% {
        transform: translateX(0) translateY(-5px) scale(1);
        opacity: 1
      }
    }

    @media(max-width:720px) {
      .preloader-guest {
        display: none
      }
    }

    /* Premium minimal 3D restaurant loader */
    .page-preloader {
      background: radial-gradient(circle at 50% 43%, #fff 0, #fff6f7 37%, #f2dfe3 100%)
    }

    .page-preloader .preloader-guest,
    .page-preloader .hotel-story,
    .page-preloader .dine-story,
    .page-preloader .order-journey,
    .page-preloader .story-caption {
      display: none
    }

    .premium-loader {
      width: 145px;
      height: 142px;
      position: relative;
      display: grid;
      place-items: center;
      perspective: 750px
    }

    .loader-aura {
      position: absolute;
      width: 122px;
      height: 45px;
      bottom: 7px;
      border-radius: 50%;
      background: radial-gradient(ellipse, #9e003450, transparent 68%);
      filter: blur(4px);
      transform: rotateX(68deg)
    }

    .loader-cube3d {
      width: 66px;
      height: 66px;
      position: absolute;
      top: 14px;
      left: 39px;
      transform-style: preserve-3d;
      animation: premium-cube 3.5s cubic-bezier(.4, 0, .2, 1) infinite
    }

    .cube-face {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      border-radius: 15px;
      background: linear-gradient(135deg, #b50d3a, #5d001b);
      color: #fff;
      font-size: 22px;
      font-weight: 800;
      box-shadow: inset 0 1px 0 #fff7
    }

    .cube-face.front {
      transform: translateZ(18px)
    }

    .cube-face.back {
      background: #4c0015;
      transform: rotateY(180deg) translateZ(18px)
    }

    .cube-face.side {
      background: #7d0026;
      transform: rotateY(90deg) translateZ(18px)
    }

    .loader-cloche {
      position: absolute;
      bottom: 10px;
      width: 88px;
      height: 43px;
      border: 3px solid #8c0027;
      border-radius: 55px 55px 12px 12px;
      background: linear-gradient(145deg, #fff, #f7e2e6);
      display: grid;
      place-items: center;
      color: #8c0027;
      box-shadow: 0 12px 16px #6f002525;
      transform: rotateX(18deg);
      animation: cloche-lift 3.5s ease-in-out infinite
    }

    .loader-cloche:before {
      content: "";
      position: absolute;
      top: -10px;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: #8c0027
    }

    .loader-cloche i {
      font-size: 19px;
      transform: translateY(3px)
    }

    .spark {
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #be1744;
      box-shadow: 0 0 10px #be1744;
      animation: sparkle 2.2s ease-in-out infinite
    }

    .spark-one {
      top: 22px;
      right: 14px
    }

    .spark-two {
      top: 61px;
      left: 9px;
      animation-delay: .6s
    }

    .spark-three {
      right: 21px;
      bottom: 42px;
      animation-delay: 1.1s
    }

    @keyframes premium-cube {

      0%,
      100% {
        transform: rotateX(-8deg) rotateY(0) translateY(0)
      }

      48% {
        transform: rotateX(18deg) rotateY(190deg) translateY(-13px)
      }
    }

    @keyframes cloche-lift {

      0%,
      100% {
        transform: rotateX(18deg) translateY(0)
      }

      48% {
        transform: rotateX(18deg) translateY(9px)
      }
    }

    @keyframes sparkle {

      0%,
      100% {
        opacity: .15;
        transform: scale(.5)
      }

      50% {
        opacity: 1;
        transform: scale(1.45)
      }
    }

    .page-preloader .loader-line i {
      animation-duration: 3.2s
    }

    /* Floating 3D POS cards around the loader */
    .premium-loader {
      overflow: visible
    }

    .pos-mini-card {
      position: absolute;
      width: 43px;
      height: 48px;
      border: 1px solid #fff;
      background: linear-gradient(145deg, #fff, #f9e7eb);
      border-radius: 9px;
      box-shadow: 0 10px 18px rgba(104, 0, 28, .16);
      display: grid;
      place-content: center;
      text-align: center;
      color: #8b0025;
      transform-style: preserve-3d;
      z-index: 1
    }

    .pos-mini-card i {
      font-size: 14px
    }

    .pos-mini-card small {
      font-size: 6px;
      font-weight: 800;
      margin-top: 3px
    }

    .card-menu {
      left: -8px;
      top: 39px;
      animation: card-menu-float 3.5s ease-in-out infinite
    }

    .card-order {
      right: -11px;
      top: 33px;
      animation: card-order-float 3.5s ease-in-out .35s infinite
    }

    .card-pay {
      right: 8px;
      bottom: 1px;
      animation: card-pay-float 3.5s ease-in-out .7s infinite
    }

    @keyframes card-menu-float {

      0%,
      100% {
        transform: rotateY(22deg) translateY(5px);
        opacity: .65
      }

      48% {
        transform: rotateY(22deg) translateY(-7px) translateZ(18px);
        opacity: 1
      }
    }

    @keyframes card-order-float {

      0%,
      100% {
        transform: rotateY(-25deg) translateY(5px);
        opacity: .65
      }

      48% {
        transform: rotateY(-25deg) translateY(-9px) translateZ(20px);
        opacity: 1
      }
    }

    @keyframes card-pay-float {

      0%,
      100% {
        transform: rotateX(12deg) translateY(2px);
        opacity: .5
      }

      48% {
        transform: rotateX(12deg) translateY(-6px) translateZ(15px);
        opacity: 1
      }
    }

    /* Cinematic restaurant image background and richer 3D loading stage */
    .page-preloader {
      isolation: isolate;
      background: linear-gradient(105deg, rgba(36, 0, 10, .95) 0%, rgba(96, 0, 28, .82) 48%, rgba(18, 3, 7, .74) 100%), url('assets/hero-restaurant-bg.png') center/cover no-repeat;
      color: #fff
    }

    .page-preloader:before {
      content: "";
      position: absolute;
      inset: 0;
      width: auto;
      height: auto;
      opacity: 1;
      mask-image: none;
      background: radial-gradient(circle at 50% 44%, rgba(255, 255, 255, .19), transparent 31%), linear-gradient(110deg, rgba(255, 255, 255, .10) 0%, transparent 34%, rgba(229, 164, 89, .13) 66%, transparent 100%);
      animation: preload-light 5s ease-in-out infinite;
      z-index: -1
    }

    .page-preloader:after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 38%;
      background: linear-gradient(transparent, rgba(16, 0, 5, .68));
      z-index: -1
    }

    .page-preloader strong {
      color: #fff;
      text-shadow: 0 3px 14px #210007
    }

    .page-preloader strong span {
      color: #ffd4dc
    }

    .page-preloader p {
      color: #f7dce2
    }

    .premium-loader {
      width: 190px;
      height: 168px;
      border-radius: 28px;
      background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03));
      border: 1px solid rgba(255, 255, 255, .26);
      box-shadow: 0 24px 45px rgba(14, 0, 5, .52), inset 0 1px 0 rgba(255, 255, 255, .35);
      backdrop-filter: blur(9px);
      transform: perspective(900px) rotateX(7deg);
      margin-bottom: 6px
    }

    .loader-aura {
      background: radial-gradient(ellipse, #ffb2c166, transparent 68%)
    }

    .loader-cube3d {
      left: 61px;
      top: 19px
    }

    .loader-cloche {
      bottom: 14px
    }

    .pos-mini-card {
      box-shadow: 0 13px 24px rgba(8, 0, 4, .4), inset 0 1px 0 #fff
    }

    .card-menu {
      left: 1px;
      top: 42px
    }

    .card-order {
      right: 0;
      top: 39px
    }

    .card-pay {
      right: 20px;
      bottom: 5px
    }

    .loader-line {
      background: rgba(255, 255, 255, .25);
      box-shadow: 0 5px 15px #1400074d
    }

    .loader-line i {
      background: linear-gradient(90deg, #ffb3c4, #a50031, #ffddd3);
      box-shadow: 0 0 13px #f6396a
    }

    @keyframes preload-light {

      0%,
      100% {
        transform: translateX(-4%);
        opacity: .65
      }

      50% {
        transform: translateX(5%);
        opacity: 1
      }
    }

    /* Original 3D cartoon restaurant backdrop */
    .page-preloader {
      background: linear-gradient(90deg, rgba(30, 0, 10, .73), rgba(94, 0, 29, .46), rgba(20, 0, 8, .78)), url('assets/preloader-cartoon-bg.png') center/cover no-repeat;
      background-size: cover;
      animation: cartoon-pan 8s ease-in-out infinite alternate
    }

    @keyframes cartoon-pan {
      from {
        background-position: 47% center
      }

      to {
        background-position: 54% center
      }
    }

    .page-preloader:before {
      background: radial-gradient(circle at 50% 42%, rgba(255, 199, 152, .12), transparent 35%), linear-gradient(110deg, rgba(255, 255, 255, .08), transparent 38%, rgba(255, 185, 101, .08) 68%, transparent 100%)
    }

    /* 3D mascot billing scene */
    .billing-mascot {
      position: absolute;
      left: calc(50% - 410px);
      bottom: -28px;
      width: 230px;
      z-index: 1;
      filter: drop-shadow(14px 19px 19px rgba(12, 0, 5, .48));
      transform-origin: bottom center;
      animation: mascot-billing 3.5s ease-in-out infinite
    }

    .mascot-bill {
      position: absolute;
      left: calc(50% + 155px);
      top: 50%;
      z-index: 2;
      width: 116px;
      padding: 13px 11px;
      border-radius: 12px;
      color: #7e0022;
      background: linear-gradient(145deg, #fff, #fbe7eb);
      box-shadow: 0 15px 30px rgba(12, 0, 5, .44), inset 0 1px #fff;
      transform: translateY(-20%) rotateY(-14deg);
      animation: bill-float 3.5s ease-in-out infinite
    }

    .mascot-bill i {
      font-size: 21px
    }

    .mascot-bill b {
      display: block;
      font-size: 12px;
      margin: 4px 0
    }

    .mascot-bill small {
      font-size: 8px;
      color: #67606a
    }

    .mascot-bill:after {
      content: "✓ PAID";
      position: absolute;
      right: -14px;
      bottom: -10px;
      background: #159b68;
      color: #fff;
      border-radius: 12px;
      padding: 4px 7px;
      font-size: 8px;
      font-weight: 800;
      animation: paid-pop 3.5s ease-in-out infinite
    }

    @keyframes mascot-billing {

      0%,
      100% {
        transform: translateY(5px) rotateY(-3deg)
      }

      48% {
        transform: translateY(-10px) rotateY(3deg)
      }
    }

    @keyframes bill-float {

      0%,
      45% {
        opacity: 0;
        transform: translateY(5px) translateX(-18px) rotateY(-32deg) scale(.7)
      }

      62%,
      100% {
        opacity: 1;
        transform: translateY(-20%) rotateY(-14deg) scale(1)
      }
    }

    @keyframes paid-pop {

      0%,
      66% {
        opacity: 0;
        transform: scale(.4)
      }

      80%,
      100% {
        opacity: 1;
        transform: scale(1)
      }
    }

    @media(max-width:820px) {
      .billing-mascot {
        left: calc(50% - 300px);
        width: 170px
      }

      .mascot-bill {
        left: calc(50% + 110px)
      }
    }

    @media(max-width:600px) {

      .billing-mascot,
      .mascot-bill {
        display: none
      }
    }

    /* Full-page 3D section motion */
    main {
      perspective: 1600px
    }

    main>section {
      transform-style: preserve-3d
    }

    .section-3d {
      --rx: 0deg;
      --ry: 0deg;
      transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
      transition: transform .35s ease, filter .4s ease
    }

    .section-3d.section-active {
      filter: drop-shadow(0 14px 24px rgba(84, 0, 25, .08))
    }

    .section-3d .features-grid>div,
    .section-3d .plan,
    .section-3d .assurance>div,
    .section-3d .industry,
    .section-3d .cta-icons>div {
      opacity: 0;
      transform: translateZ(-30px) translateY(24px)
    }

    .section-3d.section-active .features-grid>div,
    .section-3d.section-active .plan,
    .section-3d.section-active .assurance>div,
    .section-3d.section-active .industry,
    .section-3d.section-active .cta-icons>div {
      animation: section-card-3d .7s cubic-bezier(.2, .8, .2, 1) both;
      animation-delay: var(--stagger, 0ms)
    }

    @keyframes section-card-3d {
      from {
        opacity: 0;
        transform: perspective(800px) rotateX(13deg) rotateY(-7deg) translateZ(-30px) translateY(24px)
      }

      to {
        opacity: 1;
        transform: perspective(800px) rotateX(0) rotateY(0) translateZ(0) translateY(0)
      }
    }

    .section-3d .btn {
      transition: transform .25s ease, box-shadow .25s ease
    }

    .section-3d .btn:hover {
      transform: translateY(-4px) translateZ(12px);
      box-shadow: 0 14px 25px rgba(102, 0, 29, .25)
    }

    @media(prefers-reduced-motion:reduce) {

      .section-3d,
      .section-3d * {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important
      }
    }

    /* Ticket-to-bill 3D cartoon loading story */
    .page-preloader {
      overflow: hidden
    }

    .page-preloader .premium-loader,
    .page-preloader .billing-mascot,
    .page-preloader .mascot-bill {
      display: none
    }

    .order-cinema {
      width: 370px;
      height: 220px;
      position: relative;
      perspective: 950px;
      transform-style: preserve-3d
    }

    .cinema-customer {
      position: absolute;
      left: 2px;
      bottom: 26px;
      color: #fff;
      text-align: center;
      font-size: 30px;
      opacity: 0;
      animation: customer-in 6.2s ease-out forwards
    }

    .cinema-customer small {
      display: block;
      font-size: 8px;
      font-weight: 700
    }

    .order-ticket {
      position: absolute;
      left: 39px;
      top: 37px;
      width: 118px;
      padding: 10px;
      border-radius: 6px;
      background: #fff;
      color: #631127;
      box-shadow: 0 12px 18px #19000655;
      display: flex;
      flex-direction: column;
      gap: 5px;
      font-size: 7px;
      transform: rotateZ(-8deg) translateZ(15px);
      opacity: 0;
      animation: ticket-fly 6.2s cubic-bezier(.25, .8, .25, 1) forwards
    }

    .order-ticket b {
      font-size: 8px;
      color: #97002c;
      border-bottom: 1px dashed #dfc2c8;
      padding-bottom: 4px
    }

    .order-ticket strong {
      font-size: 7px;
      border-top: 1px dashed #dfc2c8;
      padding-top: 4px
    }

    .cinema-pos {
      position: absolute;
      left: 126px;
      top: 26px;
      width: 145px;
      height: 108px;
      border: 8px solid #202128;
      border-radius: 14px;
      background: #fff;
      box-shadow: 14px 18px 22px #16000566;
      overflow: hidden;
      transform: rotateY(-16deg) rotateX(5deg);
      opacity: 0;
      animation: pos-power 6.2s ease-out forwards
    }

    .pos-top {
      height: 22px;
      color: #fff;
      background: #820022;
      padding: 5px;
      font-size: 8px;
      font-weight: 700
    }

    .pos-top small {
      float: right;
      font-size: 5px;
      opacity: .8
    }

    .pos-lines {
      padding: 8px;
      display: flex;
      gap: 5px
    }

    .pos-lines i {
      height: 26px;
      flex: 1;
      border-radius: 3px;
      background: linear-gradient(135deg, #e3a04b, #9e321b);
      opacity: 0;
      animation: item-add .35s ease forwards
    }

    .pos-lines i:nth-child(1) {
      animation-delay: 2.7s
    }

    .pos-lines i:nth-child(2) {
      animation-delay: 2.95s
    }

    .pos-lines i:nth-child(3) {
      animation-delay: 3.2s
    }

    .pos-total {
      position: absolute;
      left: 7px;
      right: 7px;
      bottom: 6px;
      color: #820022;
      border-top: 1px solid #eee;
      padding-top: 4px;
      font-size: 7px;
      font-weight: 700
    }

    .pos-total b {
      float: right;
      font-size: 11px;
      animation: total-pop 6.2s ease forwards
    }

    .payment-card {
      position: absolute;
      right: 22px;
      top: 55px;
      width: 95px;
      height: 58px;
      border-radius: 10px;
      background: linear-gradient(145deg, #ca1540, #620019);
      color: white;
      display: grid;
      place-content: center;
      text-align: center;
      box-shadow: 0 13px 22px #29000d55;
      transform: rotateY(-36deg) translateZ(0);
      opacity: 0;
      animation: payment-tap 6.2s ease-in-out forwards
    }

    .payment-card i {
      font-size: 21px
    }

    .payment-card b {
      font-size: 8px;
      margin-top: 5px
    }

    .print-receipt {
      position: absolute;
      right: 93px;
      bottom: 17px;
      width: 82px;
      min-height: 65px;
      padding: 8px;
      background: #fff;
      color: #37171e;
      text-align: center;
      box-shadow: 5px 8px 13px #15000655;
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 6px;
      opacity: 0;
      transform-origin: bottom;
      animation: receipt-print 6.2s ease-in-out forwards
    }

    .print-receipt b {
      font-size: 8px;
      color: #860025
    }

    .print-receipt em {
      font-style: normal;
      color: #7b6a6e
    }

    .receipt-logo {
      position: absolute;
      left: 50%;
      top: 51px;
      width: 60px;
      height: 60px;
      margin-left: -30px;
      border-radius: 16px;
      background: linear-gradient(145deg, #b50d3a, #560017);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 23px;
      font-weight: 800;
      opacity: 0;
      transform: rotateX(80deg) scale(.25);
      box-shadow: 0 17px 25px #28000877;
      animation: receipt-fold-logo 6.2s ease-in-out forwards
    }

    .cinema-spark {
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #ffcf77;
      box-shadow: 0 0 14px #ffcf77;
      opacity: 0
    }

    .cinema-spark.one {
      left: 96px;
      top: 17px;
      animation: spark-burst 6.2s .05s forwards
    }

    .cinema-spark.two {
      right: 67px;
      top: 28px;
      animation: spark-burst 6.2s .2s forwards
    }

    .cinema-spark.three {
      right: 104px;
      bottom: 11px;
      animation: spark-burst 6.2s .35s forwards
    }

    .cinema-title {
      font-size: 28px !important;
      letter-spacing: -1.2px
    }

    .cinema-caption {
      font-size: 12px !important
    }

    .cinema-line i {
      animation-duration: 5.9s
    }

    @keyframes customer-in {
      0% {
        opacity: 0;
        transform: translateX(-35px)
      }

      9%,
      100% {
        opacity: 1;
        transform: none
      }
    }

    @keyframes ticket-fly {

      0%,
      10% {
        opacity: 0;
        transform: translateX(-30px) rotateZ(-8deg)
      }

      16% {
        opacity: 1
      }

      28% {
        opacity: 1;
        transform: translateX(104px) translateY(4px) scale(.6) rotateZ(0)
      }

      31%,
      100% {
        opacity: 0;
        transform: translateX(130px) translateY(6px) scale(.3)
      }
    }

    @keyframes pos-power {

      0%,
      20% {
        opacity: 0;
        transform: rotateY(-46deg) rotateX(13deg) scale(.75)
      }

      30%,
      70% {
        opacity: 1;
        transform: rotateY(-16deg) rotateX(5deg) scale(1)
      }

      80%,
      100% {
        opacity: 0;
        transform: rotateY(-16deg) scale(.7)
      }
    }

    @keyframes item-add {
      to {
        opacity: 1;
        transform: translateY(-3px)
      }
    }

    @keyframes total-pop {

      0%,
      48% {
        opacity: 0;
        transform: scale(.6)
      }

      55%,
      70% {
        opacity: 1;
        transform: scale(1.1)
      }

      100% {
        opacity: 1;
        transform: scale(1)
      }
    }

    @keyframes payment-tap {

      0%,
      48% {
        opacity: 0;
        transform: translateX(40px) rotateY(-55deg)
      }

      56%,
      63% {
        opacity: 1;
        transform: translateX(-12px) rotateY(-15deg) scale(1.07)
      }

      69% {
        opacity: 1;
        transform: translateX(-5px) rotateY(-15deg)
      }

      74%,
      100% {
        opacity: 0;
        transform: translateX(-5px) scale(.7)
      }
    }

    @keyframes receipt-print {

      0%,
      65% {
        opacity: 0;
        transform: translateY(-24px) scaleY(.2)
      }

      73%,
      80% {
        opacity: 1;
        transform: translateY(0) scaleY(1)
      }

      86%,
      100% {
        opacity: 0;
        transform: translateY(-5px) rotateY(70deg) scale(.25)
      }
    }

    @keyframes receipt-fold-logo {

      0%,
      82% {
        opacity: 0;
        transform: rotateX(80deg) scale(.25)
      }

      90%,
      100% {
        opacity: 1;
        transform: rotateX(0) scale(1)
      }
    }

    @keyframes spark-burst {

      0%,
      83% {
        opacity: 0;
        transform: scale(.2)
      }

      90%,
      100% {
        opacity: 1;
        transform: scale(1)
      }
    }

    /* The Busy Restaurant: four-second cartoon billing story */
    .page-preloader {
      background: linear-gradient(100deg, rgba(34, 0, 11, .73), rgba(115, 0, 35, .55)), url('assets/preloader-cartoon-bg.png') center/cover no-repeat
    }

    .page-preloader .order-cinema,
    .page-preloader .premium-loader {
      display: none
    }

    .busy-scene {
      width: 455px;
      height: 260px;
      position: relative;
      perspective: 1000px;
      transform-style: preserve-3d
    }

    .owner {
      position: absolute;
      width: 205px;
      left: 24px;
      bottom: 0;
      filter: drop-shadow(10px 14px 15px rgba(10, 0, 4, .46));
      transform-origin: bottom;
      z-index: 2
    }

    .worried-owner {
      animation: owner-worry 4s ease-in-out forwards
    }

    .happy-owner {
      opacity: 0;
      animation: owner-smile 4s ease-in-out forwards
    }

    .ticket-pile {
      position: absolute;
      left: 20px;
      top: 12px;
      width: 125px;
      height: 100px;
      z-index: 4
    }

    .ticket-pile i {
      position: absolute;
      width: 104px;
      padding: 7px 8px;
      background: #fff;
      color: #71001d;
      border-radius: 5px;
      box-shadow: 6px 8px 12px #1d00084d;
      font-style: normal;
      font-size: 7px;
      animation: ticket-clear 4s ease-in forwards
    }

    .ticket-pile i b {
      font-size: 6px;
      color: #75626a
    }

    .ticket-pile i:nth-child(1) {
      transform: rotate(-13deg);
      left: 0;
      top: 0
    }

    .ticket-pile i:nth-child(2) {
      transform: rotate(9deg);
      left: 22px;
      top: 15px;
      animation-delay: .08s
    }

    .ticket-pile i:nth-child(3) {
      transform: rotate(-3deg);
      left: 7px;
      top: 34px;
      animation-delay: .16s
    }

    .ticket-pile i:nth-child(4) {
      transform: rotate(12deg);
      left: 28px;
      top: 51px;
      animation-delay: .24s
    }

    .busy-pos {
      position: absolute;
      right: 36px;
      top: 46px;
      width: 158px;
      height: 121px;
      background: #fff;
      border: 8px solid #202128;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 14px 18px 25px #16000573;
      opacity: 0;
      transform: rotateY(-38deg) rotateX(9deg) scale(.7);
      animation: pos-arrive 4s ease-out forwards
    }

    .busy-pos header {
      height: 25px;
      padding: 7px;
      background: #820023;
      color: #fff;
      font-size: 8px;
      font-weight: 800
    }

    .busy-pos header span {
      float: right;
      font-size: 5px;
      padding: 2px 4px;
      border-radius: 3px;
      background: #f3b23c;
      color: #592000
    }

    .busy-pos p {
      margin: 7px;
      font-size: 8px;
      color: #262238
    }

    .busy-pos p b {
      float: right;
      color: #890025
    }

    .busy-pos>div {
      display: flex;
      gap: 5px;
      margin: 6px 7px
    }

    .busy-pos>div i {
      height: 26px;
      flex: 1;
      border-radius: 3px;
      background: linear-gradient(135deg, #e1a848, #a83a20)
    }

    .busy-pos strong {
      display: block;
      margin: 0 7px;
      padding: 5px;
      text-align: center;
      border-radius: 4px;
      background: #870024;
      color: #fff;
      font-size: 8px
    }

    .busy-receipt {
      position: absolute;
      right: 101px;
      bottom: 14px;
      width: 79px;
      padding: 8px 5px;
      background: #fff;
      color: #5c2a35;
      text-align: center;
      font-size: 7px;
      display: flex;
      flex-direction: column;
      gap: 3px;
      opacity: 0;
      box-shadow: 5px 8px 13px #16000662;
      transform-origin: bottom;
      animation: receipt-pop 4s ease-in-out forwards
    }

    .busy-receipt b {
      color: #8d0027;
      font-size: 8px
    }

    .busy-receipt em {
      font-style: normal;
      color: #179765;
      font-weight: 800
    }

    .busy-logo {
      position: absolute;
      left: 50%;
      top: 83px;
      margin-left: -31px;
      width: 62px;
      height: 62px;
      border-radius: 16px;
      background: linear-gradient(145deg, #b70f3d, #540017);
      color: #fff;
      display: grid;
      place-items: center;
      font-weight: 800;
      font-size: 23px;
      opacity: 0;
      transform: rotateX(75deg) scale(.25);
      box-shadow: 0 18px 30px #1a00097a;
      animation: logo-reveal 4s ease-in-out forwards
    }

    .busy-title {
      font-size: 29px !important
    }

    .busy-caption {
      font-size: 12px !important
    }

    .busy-line i {
      animation-duration: 3.8s
    }

    @keyframes owner-worry {

      0%,
      52% {
        opacity: 1;
        transform: translateY(0) rotateY(0)
      }

      61%,
      100% {
        opacity: 0;
        transform: translateY(7px) rotateY(-8deg)
      }
    }

    @keyframes owner-smile {

      0%,
      56% {
        opacity: 0;
        transform: translateY(8px) scale(.96)
      }

      67%,
      100% {
        opacity: 1;
        transform: none
      }
    }

    @keyframes ticket-clear {

      0%,
      31% {
        opacity: 1
      }

      48%,
      100% {
        opacity: 0;
        transform: translate(190px, 56px) rotate(0) scale(.36)
      }
    }

    @keyframes pos-arrive {

      0%,
      32% {
        opacity: 0;
        transform: rotateY(-38deg) rotateX(9deg) scale(.7)
      }

      43%,
      74% {
        opacity: 1;
        transform: rotateY(-12deg) rotateX(4deg) scale(1)
      }

      82%,
      100% {
        opacity: 0;
        transform: scale(.65)
      }
    }

    @keyframes receipt-pop {

      0%,
      67% {
        opacity: 0;
        transform: translateY(-32px) scaleY(.2)
      }

      76%,
      83% {
        opacity: 1;
        transform: translateY(0) scaleY(1)
      }

      89%,
      100% {
        opacity: 0;
        transform: rotateY(70deg) scale(.28)
      }
    }

    @keyframes logo-reveal {

      0%,
      85% {
        opacity: 0;
        transform: rotateX(75deg) scale(.25)
      }

      93%,
      100% {
        opacity: 1;
        transform: rotateX(0) scale(1)
      }
    }

    /* Cinematic refinement for the Busy Restaurant sequence */
    .busy-scene {
      animation: busy-camera 4s cubic-bezier(.2, .7, .2, 1) forwards
    }

    .order-alerts {
      position: absolute;
      left: 153px;
      top: 2px;
      z-index: 8
    }

    .order-alerts span {
      display: block;
      width: 84px;
      margin: 5px 0;
      padding: 5px 7px;
      border-radius: 7px;
      background: #fff;
      color: #830024;
      box-shadow: 0 8px 16px rgba(23, 0, 7, .45);
      font-size: 7px;
      font-weight: 800;
      opacity: 0;
      animation: alert-in 4s ease-in-out forwards
    }

    .order-alerts span:nth-child(2) {
      animation-delay: .22s
    }

    .order-alerts span:nth-child(3) {
      animation-delay: .44s
    }

    .busy-logo:after {
      content: "";
      position: absolute;
      inset: -22px;
      border: 2px solid #ffbe75;
      border-radius: 50%;
      opacity: 0;
      animation: logo-ripple 4s ease-out forwards
    }

    .busy-logo:before {
      content: "✦";
      position: absolute;
      right: -22px;
      top: -16px;
      color: #ffd37d;
      font-size: 18px;
      opacity: 0;
      animation: logo-star 4s ease-out forwards
    }

    @keyframes busy-camera {

      0%,
      35% {
        transform: perspective(1000px) scale(.92) rotateX(3deg)
      }

      57% {
        transform: perspective(1000px) scale(1.04) rotateX(0)
      }

      100% {
        transform: perspective(1000px) scale(.98)
      }
    }

    @keyframes alert-in {

      0%,
      8% {
        opacity: 0;
        transform: translateX(-25px) rotateY(35deg)
      }

      14%,
      28% {
        opacity: 1;
        transform: none
      }

      38%,
      100% {
        opacity: 0;
        transform: translateX(24px) scale(.82)
      }
    }

    @keyframes logo-ripple {

      0%,
      86% {
        opacity: 0;
        transform: scale(.3)
      }

      94% {
        opacity: .9;
        transform: scale(1)
      }

      100% {
        opacity: 0;
        transform: scale(1.45)
      }
    }

    @keyframes logo-star {

      0%,
      88% {
        opacity: 0;
        transform: scale(.2) rotate(0)
      }

      95% {
        opacity: 1;
        transform: scale(1) rotate(90deg)
      }

      100% {
        opacity: 0;
        transform: scale(1.45) rotate(150deg)
      }
    }

    /* Cinematic camera-to-logo final sequence */
    .page-preloader {
      animation: restaurant-camera 5.5s ease-in-out forwards
    }

    .page-preloader:after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 40% 46%, rgba(173, 0, 49, .42), transparent 26%), rgba(8, 0, 4, 0);
      pointer-events: none;
      animation: wine-reveal 5.5s ease-in-out forwards;
      z-index: 0
    }

    .busy-scene {
      animation: cinema-dolly 5.5s cubic-bezier(.2, .7, .2, 1) forwards !important
    }

    .owner,
    .ticket-pile i,
    .busy-pos,
    .busy-receipt,
    .busy-logo,
    .order-alerts span {
      animation-duration: 5.5s !important
    }

    .busy-pos {
      animation-name: cinema-pos-turn !important
    }

    .busy-receipt {
      animation-name: cinema-receipt-rise !important
    }

    .busy-logo {
      z-index: 20;
      animation-name: cinema-logo-fill !important
    }

    .busy-title,
    .busy-caption,
    .busy-line {
      position: relative;
      z-index: 21
    }

    .busy-title {
      animation: brand-fade 5.5s ease forwards
    }

    .order-alerts {
      animation: slow-motion 5.5s ease-in-out forwards
    }

    .busy-scene:before {
      content: "";
      position: absolute;
      left: 118px;
      top: 35px;
      width: 170px;
      height: 125px;
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(178, 0, 48, .3), transparent 68%);
      filter: blur(12px);
      animation: face-glow 5.5s ease-in-out forwards;
      z-index: 1
    }

    @keyframes restaurant-camera {

      0%,
      100% {
        background-position: 48% center
      }

      58% {
        background-position: 55% center
      }
    }

    @keyframes cinema-dolly {

      0%,
      24% {
        transform: perspective(1050px) translateX(-12px) scale(.91) rotateY(2deg)
      }

      42%,
      70% {
        transform: perspective(1050px) translateX(8px) scale(1.04) rotateY(-4deg)
      }

      100% {
        transform: perspective(1050px) scale(.98)
      }
    }

    @keyframes wine-reveal {

      0%,
      19% {
        opacity: 0
      }

      37%,
      73% {
        opacity: 1
      }

      100% {
        opacity: .1
      }
    }

    @keyframes face-glow {

      0%,
      22% {
        opacity: 0;
        transform: scale(.5)
      }

      38%,
      70% {
        opacity: 1;
        transform: scale(1)
      }

      100% {
        opacity: 0
      }
    }

    @keyframes slow-motion {

      0%,
      18% {
        filter: blur(0)
      }

      27%,
      48% {
        filter: blur(.6px)
      }

      100% {
        filter: none
      }
    }

    @keyframes cinema-pos-turn {

      0%,
      31% {
        opacity: 0;
        transform: translateX(48px) rotateY(-65deg) rotateX(12deg) scale(.72)
      }

      45%,
      76% {
        opacity: 1;
        transform: rotateY(-12deg) rotateX(4deg) scale(1)
      }

      84%,
      100% {
        opacity: 0;
        transform: scale(.6)
      }
    }

    @keyframes cinema-receipt-rise {

      0%,
      66% {
        opacity: 0;
        transform: translateY(-22px) scaleY(.2)
      }

      76%,
      84% {
        opacity: 1;
        transform: translateY(-10px) scaleY(1)
      }

      92%,
      100% {
        opacity: 0;
        transform: translateY(-135px) scale(1.5)
      }
    }

    @keyframes cinema-logo-fill {

      0%,
      85% {
        opacity: 0;
        transform: rotateX(75deg) scale(.25)
      }

      92% {
        opacity: 1;
        transform: rotateX(0) scale(1)
      }

      100% {
        opacity: 1;
        transform: rotateX(0) scale(18)
      }
    }

    @keyframes brand-fade {

      0%,
      85% {
        opacity: 1
      }

      94%,
      100% {
        opacity: 0
      }
    }

    /* Fast, non-blocking 3D logo preloader */
    .quick-preloader {
      background: radial-gradient(circle at 50% 42%, #fff 0, #fff1f3 42%, #7b001f 155%);
      display: grid;
      place-content: center;
      justify-items: center
    }

    .quick-mark {
      width: 82px;
      height: 82px;
      border-radius: 22px;
      background: linear-gradient(135deg, #c31a45, #520016);
      display: grid;
      place-items: center;
      box-shadow: 0 22px 35px #59001956, inset 0 1px #fff6;
      transform-style: preserve-3d;
      animation: quick-logo 1.1s cubic-bezier(.2, .85, .25, 1) both
    }

    .quick-mark:after {
      content: "";
      position: absolute;
      width: 100px;
      height: 30px;
      border-radius: 50%;
      background: #8500253b;
      filter: blur(5px);
      transform: translateY(57px) rotateX(70deg)
    }

    .quick-mark span {
      position: relative;
      z-index: 1;
      color: #fff;
      font-size: 29px;
      font-weight: 800;
      letter-spacing: -3px;
      transform: translateZ(15px)
    }

    .quick-preloader strong {
      margin-top: 17px;
      font-size: 26px;
      color: #1d1728;
      animation: quick-word .7s .2s both
    }

    .quick-preloader strong span {
      color: #8c0025
    }

    .quick-dotline {
      display: flex;
      gap: 7px;
      margin-top: 13px
    }

    .quick-dotline i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #920027;
      animation: quick-dot .7s ease-in-out infinite
    }

    .quick-dotline i:nth-child(2) {
      animation-delay: .12s
    }

    .quick-dotline i:nth-child(3) {
      animation-delay: .24s
    }

    @keyframes quick-logo {
      0% {
        opacity: 0;
        transform: rotateX(70deg) rotateY(-70deg) scale(.4)
      }

      65% {
        opacity: 1;
        transform: rotateX(-8deg) rotateY(12deg) scale(1.08)
      }

      100% {
        transform: none
      }
    }

    @keyframes quick-word {
      from {
        opacity: 0;
        transform: translateY(8px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes quick-dot {
      50% {
        transform: translateY(-6px);
        background: #d71746
      }
    }

    /* Short 3D cartoon billing video */
    .mini-cartoon-loader {
      background: radial-gradient(circle at 50% 45%, #fff8f7 0, #f7e2e5 42%, #7a0020 150%);
      display: grid;
      place-content: center;
      justify-items: center;
      overflow: hidden
    }

    .mini-scene {
      width: 405px;
      height: 190px;
      position: relative;
      perspective: 800px
    }

    .mini-owner {
      position: absolute;
      width: 160px;
      left: 8px;
      bottom: -22px;
      filter: drop-shadow(8px 12px 11px rgba(66, 0, 17, .23));
      transform-origin: bottom;
      animation: owner-bob 2.8s ease-in-out both
    }

    .order-bubble {
      position: absolute;
      left: 130px;
      top: 23px;
      width: 68px;
      padding: 7px 4px;
      border-radius: 11px;
      background: #fff;
      color: #870025;
      box-shadow: 6px 8px 15px #4d001c32;
      text-align: center;
      display: grid;
      gap: 2px;
      z-index: 3;
      animation: order-to-pos 2.8s cubic-bezier(.2, .8, .2, 1) both
    }

    .order-bubble i {
      font-size: 17px
    }

    .order-bubble b {
      font-size: 7px
    }

    .order-bubble small {
      font-size: 6px;
      color: #72616a
    }

    .mini-pos {
      position: absolute;
      right: 60px;
      top: 27px;
      width: 135px;
      height: 102px;
      border: 7px solid #212129;
      border-radius: 13px;
      background: #fff;
      box-shadow: 12px 16px 20px #21000855;
      overflow: hidden;
      transform: rotateY(-15deg) rotateX(4deg);
      animation: pos-pop 2.8s ease-out both
    }

    .mini-pos header {
      background: #850024;
      color: white;
      height: 22px;
      padding: 5px;
      font-size: 8px;
      font-weight: 800
    }

    .mini-items {
      display: flex;
      gap: 5px;
      padding: 8px
    }

    .mini-items i {
      height: 27px;
      flex: 1;
      border-radius: 3px;
      background: linear-gradient(135deg, #dfad53, #a4371d);
      opacity: 0;
      animation: item-in .2s ease forwards
    }

    .mini-items i:nth-child(1) {
      animation-delay: .95s
    }

    .mini-items i:nth-child(2) {
      animation-delay: 1.1s
    }

    .mini-items i:nth-child(3) {
      animation-delay: 1.25s
    }

    .mini-pos>b {
      display: block;
      margin: 0 7px;
      padding: 5px;
      text-align: center;
      background: #f9e5e8;
      color: #850024;
      border-radius: 4px;
      font-size: 8px
    }

    .mini-receipt {
      position: absolute;
      right: 25px;
      bottom: 24px;
      width: 45px;
      height: 57px;
      background: #fff;
      color: #19a269;
      box-shadow: 4px 6px 11px #23000944;
      text-align: center;
      padding-top: 10px;
      font-size: 20px;
      opacity: 0;
      transform-origin: bottom;
      animation: receipt-mini 2.8s ease-in-out both
    }

    .mini-receipt small {
      display: block;
      color: #6d555d;
      font-size: 6px;
      font-weight: 800
    }

    .mini-logo {
      position: absolute;
      left: 50%;
      top: 55px;
      margin-left: -27px;
      width: 54px;
      height: 54px;
      border-radius: 15px;
      background: linear-gradient(145deg, #bd123f, #550017);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 20px;
      font-weight: 800;
      opacity: 0;
      transform: rotateX(75deg) scale(.3);
      box-shadow: 0 14px 25px #4c001a52;
      animation: mini-logo 2.8s ease-in-out both
    }

    .mini-star {
      position: absolute;
      color: #f3bd64;
      font-size: 16px;
      opacity: 0;
      animation: mini-spark 2.8s ease both
    }

    .star-a {
      left: 155px;
      top: 28px
    }

    .star-b {
      right: 83px;
      top: 34px
    }

    .mini-cartoon-loader>strong {
      font-size: 27px;
      color: #211827;
      margin-top: 5px
    }

    .mini-cartoon-loader>strong span {
      color: #8b0025
    }

    .mini-cartoon-loader>p {
      font-size: 11px;
      color: #70565f;
      margin: 4px 0 0
    }

    @keyframes owner-bob {

      0%,
      100% {
        transform: translateY(0)
      }

      42% {
        transform: translateY(-5px)
      }
    }

    @keyframes order-to-pos {

      0%,
      19% {
        opacity: 0;
        transform: translateX(-20px) translateY(12px) scale(.65)
      }

      26% {
        opacity: 1;
        transform: none
      }

      40%,
      100% {
        opacity: 0;
        transform: translate(112px, 17px) scale(.22)
      }
    }

    @keyframes pos-pop {

      0%,
      20% {
        opacity: 0;
        transform: rotateY(-55deg) scale(.7)
      }

      28%,
      73% {
        opacity: 1;
        transform: rotateY(-15deg) rotateX(4deg)
      }

      83%,
      100% {
        opacity: 0;
        transform: scale(.6)
      }
    }

    @keyframes item-in {
      to {
        opacity: 1;
        transform: translateY(-2px)
      }
    }

    @keyframes receipt-mini {

      0%,
      54% {
        opacity: 0;
        transform: translateY(-25px) scaleY(.2)
      }

      65%,
      74% {
        opacity: 1;
        transform: translateY(0) scaleY(1)
      }

      82%,
      100% {
        opacity: 0;
        transform: translateY(-17px) rotateY(65deg)
      }
    }

    @keyframes mini-logo {

      0%,
      75% {
        opacity: 0;
        transform: rotateX(75deg) scale(.3)
      }

      86% {
        opacity: 1;
        transform: rotateX(0) scale(1)
      }

      100% {
        opacity: 1;
        transform: scale(10)
      }
    }

    @keyframes mini-spark {

      0%,
      83% {
        opacity: 0;
        transform: scale(.2)
      }

      91%,
      100% {
        opacity: 1;
        transform: scale(1.2)
      }
    }

    /* Hotel restaurant backdrop for the cartoon preloader */
    .mini-cartoon-loader {
      background: linear-gradient(100deg, rgba(38, 0, 12, .77), rgba(116, 0, 34, .48), rgba(30, 0, 11, .78)), url('assets/preloader-cartoon-bg.png') center/cover no-repeat
    }

    .mini-cartoon-loader:before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 44%, rgba(255, 230, 194, .16), transparent 33%);
      pointer-events: none
    }

    .mini-cartoon-loader>* {
      position: relative;
      z-index: 1
    }

    .mini-cartoon-loader>strong {
      color: #fff;
      text-shadow: 0 2px 11px #270008
    }

    .mini-cartoon-loader>strong span {
      color: #ffd6de
    }

    .mini-cartoon-loader>p {
      color: #f8dce3
    }

    /* 3D character response for plan selection */
    .plan-character {
      position: fixed;
      right: 28px;
      bottom: 24px;
      z-index: 80;
      pointer-events: none;
      opacity: 0;
      transform: perspective(1000px) translateY(90px) rotateX(22deg) rotateY(-12deg);
      transition: opacity .28s ease, transform .65s cubic-bezier(.18, .9, .2, 1)
    }

    .plan-character.show {
      opacity: 1;
      transform: perspective(1000px) translateY(0) rotateX(0) rotateY(0)
    }

    .plan-character-card {
      position: relative;
      width: 320px;
      min-height: 145px;
      border-radius: 18px;
      padding: 22px 18px 18px 120px;
      background: linear-gradient(135deg, #fff, #ffe9ee);
      border: 1px solid #fff;
      box-shadow: 0 24px 50px rgba(75, 0, 20, .3), inset 0 1px #fff;
      overflow: hidden
    }

    .plan-character-card:after {
      content: "";
      position: absolute;
      inset: auto -20px -45px;
      width: 180px;
      height: 75px;
      border-radius: 50%;
      background: #8d002833;
      filter: blur(7px)
    }

    .plan-character img {
      position: absolute;
      width: 145px;
      left: -14px;
      bottom: -16px;
      filter: drop-shadow(7px 10px 7px rgba(67, 0, 16, .22));
      transform-origin: bottom;
      animation: character-wave 1.1s ease-in-out infinite alternate
    }

    .plan-character-badge {
      display: inline-block;
      padding: 4px 7px;
      border-radius: 5px;
      color: #fff;
      background: #8b0026;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: .6px
    }

    .plan-character h3 {
      margin: 8px 0 4px;
      color: #73001f;
      font-size: 18px
    }

    .plan-character p {
      margin: 0;
      color: #5c5361;
      font-size: 12px
    }

    .plan-character i {
      position: absolute;
      right: 13px;
      top: 13px;
      color: #e89a34;
      font-size: 16px;
      animation: character-spark 1s ease-in-out infinite
    }

    .plan-click-orb {
      position: fixed;
      z-index: 90;
      width: 22px;
      height: 22px;
      margin: -11px;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(circle, #fff 0 18%, #a2002e 21% 44%, transparent 47%);
      animation: click-orb .65s ease-out forwards
    }

    @keyframes character-wave {
      to {
        transform: rotate(-2deg) translateY(-5px)
      }
    }

    @keyframes character-spark {
      50% {
        transform: rotate(24deg) scale(1.3)
      }
    }

    @keyframes click-orb {
      to {
        transform: scale(6);
        opacity: 0
      }
    }

    @media(max-width:520px) {
      .plan-character {
        right: 12px;
        left: 12px;
        bottom: 12px
      }

      .plan-character-card {
        width: 100%
      }
    }

    .plan-character {
      z-index: 10020 !important
    }

    .plan-character.show {
      display: block !important
    }

    /* A small live ordering story over the POS artwork */
    .visual>.hero-order-story {
      display: block !important;
      position: absolute;
      z-index: 5;
      width: 145px;
      height: 178px;
      left: 8px;
      bottom: 10px;
      pointer-events: none;
    }

    .hero-order-story .story-guest {
      position: absolute;
      width: 105px;
      left: -54px;
      bottom: -9px;
      filter: drop-shadow(0 11px 9px rgba(30, 3, 8, .28));
      animation: guest-arrives 7s cubic-bezier(.22, .7, .24, 1) infinite;
    }

    .hero-order-story .food-token {
      position: absolute;
      width: 33px;
      height: 33px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: #850020;
      background: #fffaf8;
      box-shadow: 0 7px 15px rgba(72, 2, 20, .22);
      border: 1px solid rgba(139, 0, 35, .13);
      opacity: 0;
      animation: order-flies 7s ease-in-out infinite;
    }

    .hero-order-story .food-token i {
      font-size: 15px;
    }

    .hero-order-story .food-one {
      left: 31px;
      bottom: 102px;
      animation-delay: .75s;
    }

    .hero-order-story .food-two {
      left: 4px;
      bottom: 74px;
      animation-delay: 1.25s;
    }

    .hero-order-story .food-three {
      left: 45px;
      bottom: 48px;
      animation-delay: 1.75s;
    }

    .hero-order-story .order-done {
      position: absolute;
      right: -12px;
      top: 12px;
      display: flex;
      gap: 5px;
      align-items: center;
      padding: 6px 8px;
      border-radius: 10px;
      color: white;
      background: #8d0025;
      font: 700 10px/1 Jost, sans-serif;
      box-shadow: 0 8px 16px rgba(90, 0, 23, .28);
      opacity: 0;
      animation: order-confirmed 7s ease-in-out infinite;
    }

    @keyframes guest-arrives {

      0%,
      8% {
        opacity: 0;
        transform: translateX(-88px) translateY(8px) scale(.78);
      }

      18%,
      63% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
      }

      70%,
      100% {
        opacity: 0;
        transform: translateX(-22px) translateY(4px) scale(.88);
      }
    }

    @keyframes order-flies {

      0%,
      18% {
        opacity: 0;
        transform: translate(-64px, 36px) scale(.45) rotate(-18deg);
      }

      26% {
        opacity: 1;
      }

      40% {
        opacity: 1;
        transform: translate(72px, -45px) scale(1) rotate(9deg);
      }

      45%,
      100% {
        opacity: 0;
        transform: translate(112px, -70px) scale(.35) rotate(20deg);
      }
    }

    @keyframes order-confirmed {

      0%,
      49% {
        opacity: 0;
        transform: translateY(9px) scale(.8);
      }

      56%,
      76% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }

      83%,
      100% {
        opacity: 0;
        transform: translateY(-7px) scale(.9);
      }
    }

    @media (max-width: 900px) {
      .visual>.hero-order-story {
        display: none !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .hero-order-story *,
      .hero-order-story {
        animation: none !important;
      }
    }

    /* Compact plan-button hover helper */
    .plan-character {
      right: 18px;
      bottom: 18px;
      transform: perspective(700px) translateY(38px) scale(.82) rotateX(14deg) rotateY(-8deg);
      transform-origin: bottom right;
    }

    .plan-character.show {
      transform: perspective(700px) translateY(0) scale(1) rotateX(0) rotateY(0);
    }

    .plan-character-card {
      width: 218px;
      min-height: 76px;
      padding: 13px 12px 12px 82px;
      border-radius: 14px;
      box-shadow: 0 13px 28px rgba(75, 0, 20, .22), inset 0 1px #fff;
    }

    .plan-character-card:after {
      width: 112px;
      height: 36px;
      inset: auto -9px -19px;
      filter: blur(5px);
    }

    .plan-character img {
      width: 94px;
      left: -8px;
      bottom: -11px;
    }

    .plan-character-badge,
    .plan-character p {
      display: none;
    }

    .plan-character h3 {
      margin: 13px 0 0;
      font-size: 14px;
      line-height: 1.18;
    }

    .plan-character i {
      font-size: 13px;
      right: 12px;
      top: 11px;
    }

    @media(max-width:520px) {
      .plan-character {
        right: 10px;
        left: auto;
        bottom: 10px;
      }

      .plan-character-card {
        width: 196px;
      }
    }

    /* Refined micro-story: plays inside a plan card only on hover */
    .plan-character {
      display: none !important;
    }

    .plan {
      transition: transform .28s ease, box-shadow .28s ease;
      overflow: hidden;
    }

    .plan:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 34px rgba(102, 13, 27, .14);
    }

    .plan-mini-story {
      position: absolute;
      top: 20px;
      right: 19px;
      width: 74px;
      height: 42px;
      opacity: 0;
      transform: translateX(9px) scale(.86);
      transition: opacity .2s ease, transform .25s ease;
      pointer-events: none;
    }

    .plan:hover .plan-mini-story {
      opacity: 1;
      transform: translateX(0) scale(1);
    }

    .plan-mini-story span {
      position: absolute;
      display: grid;
      place-items: center;
      border-radius: 10px;
      box-shadow: 0 6px 12px rgba(91, 0, 25, .17);
    }

    .mini-plate {
      left: 0;
      top: 8px;
      width: 29px;
      height: 29px;
      color: #9b002a;
      background: #fff0f3;
    }

    .mini-ticket {
      right: 10px;
      top: 1px;
      width: 31px;
      height: 37px;
      color: #fff;
      background: #8e0028;
    }

    .mini-check {
      right: 0;
      bottom: 0;
      width: 15px;
      height: 15px;
      color: #fff;
      background: #22a36a;
      font-size: 8px;
    }

    .plan-mini-story i {
      font-size: 13px;
    }

    .mini-check i {
      font-size: 8px;
    }

    .plan:hover .mini-plate {
      animation: mini-food-to-bill 1.15s cubic-bezier(.2, .8, .25, 1) infinite;
    }

    .plan:hover .mini-ticket {
      animation: mini-ticket-pop 1.15s ease-in-out infinite;
    }

    .plan:hover .mini-check {
      animation: mini-check-pop 1.15s ease-in-out infinite;
    }

    @keyframes mini-food-to-bill {

      0%,
      15% {
        transform: translate(0, 0) rotate(0);
      }

      55% {
        transform: translate(29px, -8px) rotate(10deg) scale(.82);
      }

      72%,
      100% {
        transform: translate(0, 0) rotate(0);
      }
    }

    @keyframes mini-ticket-pop {

      0%,
      44% {
        transform: scale(1);
      }

      58% {
        transform: scale(1.12) rotate(-3deg);
      }

      74%,
      100% {
        transform: scale(1);
      }
    }

    @keyframes mini-check-pop {

      0%,
      57% {
        opacity: 0;
        transform: scale(.25);
      }

      68%,
      86% {
        opacity: 1;
        transform: scale(1.15);
      }

      100% {
        opacity: .8;
        transform: scale(1);
      }
    }

    @media(max-width:700px) {
      .plan-mini-story {
        display: none;
      }
    }

    /* Tiny owner video loop inside the hovered plan card */
    .plan-mini-story {
      top: 12px;
      right: 13px;
      width: 94px;
      height: 58px;
    }

    .plan-mini-story .mini-owner {
      position: absolute;
      z-index: 3;
      width: 48px;
      left: -7px;
      bottom: -6px;
      filter: drop-shadow(2px 5px 4px rgba(71, 0, 20, .22));
      transform-origin: bottom center;
    }

    .plan-mini-story .mini-plate {
      left: 34px;
      top: 24px;
      width: 24px;
      height: 24px;
      border-radius: 8px;
    }

    .plan-mini-story .mini-ticket {
      right: 7px;
      top: 5px;
      width: 28px;
      height: 33px;
      border-radius: 8px;
    }

    .plan-mini-story .mini-check {
      right: 0;
      bottom: 8px;
    }

    .plan:hover .mini-owner {
      animation: mini-owner-order 1.45s ease-in-out infinite;
    }

    .plan:hover .mini-plate {
      animation: mini-food-to-bill 1.45s cubic-bezier(.2, .8, .25, 1) infinite;
    }

    .plan:hover .mini-ticket {
      animation: mini-ticket-pop 1.45s ease-in-out infinite;
    }

    .plan:hover .mini-check {
      animation: mini-check-pop 1.45s ease-in-out infinite;
    }

    @keyframes mini-owner-order {

      0%,
      16% {
        transform: translateX(-12px) rotate(-4deg) scale(.88);
        opacity: 0;
      }

      28%,
      55% {
        transform: translateX(0) rotate(1deg) scale(1);
        opacity: 1;
      }

      65% {
        transform: translateX(4px) rotate(-3deg) scale(1.03);
        opacity: 1;
      }

      82%,
      100% {
        transform: translateX(-4px) rotate(1deg) scale(.94);
        opacity: 0;
      }
    }

    /* Small owner loop lives inside the existing plan icon — no content overlap */
    .plan-mini-story {
      display: none !important;
    }

    .plan-icon {
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    .plan-icon::after {
      content: "";
      position: absolute;
      inset: -5px -7px -3px;
      z-index: 1;
      opacity: 0;
      background: url("assets/owner-happy.png") center bottom / 70px auto no-repeat;
      transform: translateX(-13px) translateY(6px) scale(.78);
    }

    .plan:hover .plan-icon {
      color: transparent;
    }

    .plan:hover .plan-icon::after {
      animation: plan-icon-owner 1.7s ease-in-out infinite;
    }

    @keyframes plan-icon-owner {

      0%,
      14% {
        opacity: 0;
        transform: translateX(-13px) translateY(6px) scale(.78);
      }

      29%,
      61% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
      }

      72% {
        opacity: 1;
        transform: translateX(3px) translateY(-2px) scale(1.04);
      }

      88%,
      100% {
        opacity: 0;
        transform: translateX(9px) translateY(5px) scale(.85);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .plan:hover .plan-icon::after {
        animation: none;
        opacity: 1;
        transform: none;
      }
    }

    /* Keep the popular label fully visible and align both pricing cards */
    .pricing-grid>.plan {
      height: 100%;
    }

    .plan.popular .badge {
      top: 9px;
      z-index: 3;
      box-shadow: 0 5px 12px rgba(102, 0, 31, .16);
    }

    .plan.popular .plan-head {
      padding-top: 20px;
    }

    /* Fit the complete animated owner into the full plan-icon area */
    .plan-icon::after {
      inset: 3px;
      background-size: contain;
      background-position: center center;
    }

    /* New right-side guest: click the desktop POS to add an order */
    .hero-pos-art {
      cursor: pointer;
    }

    .visual>.hero-click-order {
      display: block !important;
      position: absolute;
      z-index: 8;
      right: -6px;
      bottom: -8px;
      width: 134px;
      height: 205px;
      pointer-events: none;
    }

    .hero-click-order>img {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 126px;
      max-height: 196px;
      object-fit: contain;
      object-position: bottom center;
      filter: drop-shadow(0 12px 10px rgba(37, 2, 8, .34));
      opacity: .93;
      transform: translateX(70px) translateY(8px) scale(.88);
      transition: transform .45s cubic-bezier(.2, .9, .25, 1), opacity .25s ease;
    }

    .guest-order-food,
    .guest-order-ok,
    .guest-order-hint {
      position: absolute;
      opacity: 0;
    }

    .guest-order-food {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border-radius: 10px;
      right: 74px;
      bottom: 111px;
      color: #8c0027;
      background: #fff;
      box-shadow: 0 7px 14px rgba(67, 0, 17, .25);
    }

    .guest-order-ok {
      right: 77px;
      bottom: 84px;
      white-space: nowrap;
      padding: 5px 7px;
      border-radius: 7px;
      color: #fff;
      background: #138b57;
      font: 700 10px/1 Jost, sans-serif;
    }

    .guest-order-hint {
      right: 7px;
      bottom: 4px;
      width: 122px;
      padding: 5px 7px;
      border-radius: 8px;
      text-align: center;
      color: #fff;
      background: rgba(91, 0, 28, .82);
      font: 600 9px/1.15 Jost, sans-serif;
      transition: opacity .25s ease;
    }

    .visual:hover .guest-order-hint {
      opacity: 1;
    }

    .visual.order-playing .hero-click-order>img {
      opacity: 1;
      transform: translateX(0) translateY(0) scale(1);
      animation: guest-tap-pos 1.8s ease-in-out;
    }

    .visual.order-playing .guest-order-food {
      animation: guest-food-add 1.8s ease-in-out;
    }

    .visual.order-playing .guest-order-ok {
      animation: guest-added 1.8s ease-in-out;
    }

    @keyframes guest-tap-pos {

      0%,
      15% {
        transform: translateX(70px) translateY(8px) scale(.88);
      }

      43% {
        transform: translateX(0) translateY(0) scale(1);
      }

      62% {
        transform: translateX(-8px) translateY(0) scale(1.02);
      }

      100% {
        transform: translateX(0) translateY(0) scale(1);
      }
    }

    @keyframes guest-food-add {

      0%,
      37% {
        opacity: 0;
        transform: translate(28px, 18px) scale(.4);
      }

      52% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
      }

      76% {
        opacity: 1;
        transform: translate(-118px, -83px) scale(.7);
      }

      86%,
      100% {
        opacity: 0;
        transform: translate(-145px, -99px) scale(.25);
      }
    }

    @keyframes guest-added {

      0%,
      72% {
        opacity: 0;
        transform: scale(.7) translateY(5px);
      }

      81%,
      94% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }

      100% {
        opacity: 0;
        transform: scale(.9) translateY(-3px);
      }
    }

    @media(max-width:900px) {
      .visual>.hero-click-order {
        display: none !important;
      }
    }

    @media(prefers-reduced-motion:reduce) {

      .hero-click-order *,
      .hero-click-order>img {
        animation: none !important;
        transition: none !important;
      }
    }

    /* Keep the new diner fully visible; only the ordering action moves on click */
    .visual>.hero-click-order {
      right: 18px;
      bottom: -5px;
    }

    .hero-click-order>img {
      opacity: 1;
      transform: translateX(0) translateY(0) scale(1);
    }

    .guest-order-ticket {
      position: absolute;
      right: 86px;
      bottom: 55px;
      z-index: 2;
      white-space: nowrap;
      padding: 6px 8px;
      border-radius: 7px;
      color: #4a0719;
      background: #fffdf9;
      box-shadow: 0 7px 15px rgba(55, 0, 13, .25);
      font: 700 9px/1 Jost, sans-serif;
      opacity: 0;
    }

    .guest-order-ticket i {
      color: #97002c;
      margin-right: 3px;
    }

    .visual.order-playing .guest-order-ticket {
      animation: guest-ticket-place 1.8s ease-in-out;
    }

    .visual.order-playing .hero-click-order>img {
      animation: guest-tap-pos-visible 1.8s ease-in-out;
    }

    @keyframes guest-tap-pos-visible {

      0%,
      22% {
        transform: translateX(14px) translateY(2px) scale(.97);
      }

      44%,
      65% {
        transform: translateX(0) translateY(0) scale(1);
      }

      78% {
        transform: translateX(-7px) translateY(0) scale(1.02);
      }

      100% {
        transform: translateX(0) translateY(0) scale(1);
      }
    }

    @keyframes guest-ticket-place {

      0%,
      74% {
        opacity: 0;
        transform: translateY(12px) rotate(4deg) scale(.75);
      }

      84%,
      96% {
        opacity: 1;
        transform: translateY(0) rotate(0) scale(1);
      }

      100% {
        opacity: 0;
        transform: translateY(-4px) scale(.92);
      }
    }

    /* Automatic desktop ordering story */
    .visual>.hero-order-story {
      display: none !important
    }

    .hero-pos-art {
      cursor: default
    }

    .visual>.hero-click-order {
      right: 8px;
      bottom: -4px;
      width: 150px;
      height: 218px
    }

    .hero-click-order>img {
      width: 142px;
      max-height: 212px;
      opacity: 0;
      transform: translateX(155px) translateY(8px) scale(.9)
    }

    .guest-order-hint {
      display: none
    }

    .guest-order-food {
      right: 96px;
      bottom: 120px
    }

    .guest-order-ok {
      right: 50px;
      bottom: 78px
    }

    .guest-order-ticket {
      right: 94px;
      bottom: 50px
    }

    .visual.order-playing .hero-click-order>img {
      opacity: 1;
      animation: diner-arrives-and-orders 5.8s cubic-bezier(.22, .72, .24, 1) both
    }

    .visual.order-playing .guest-order-food {
      animation: diner-selects-dish 5.8s ease-in-out both
    }

    .visual.order-playing .guest-order-ok {
      animation: diner-order-confirmed 5.8s ease-in-out both
    }

    .visual.order-playing .guest-order-ticket {
      animation: diner-ticket-prints 5.8s ease-in-out both
    }

    @keyframes diner-arrives-and-orders {

      0%,
      9% {
        opacity: 0;
        transform: translateX(155px) translateY(8px) scale(.9)
      }

      24%,
      71% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1)
      }

      47% {
        transform: translateX(-8px) translateY(1px) scale(1.02)
      }

      88%,
      100% {
        opacity: 0;
        transform: translateX(72px) translateY(8px) scale(.94)
      }
    }

    @keyframes diner-selects-dish {

      0%,
      31% {
        opacity: 0;
        transform: translate(32px, 25px) scale(.35)
      }

      39%,
      49% {
        opacity: 1;
        transform: translate(0, 0) scale(1)
      }

      64% {
        opacity: 1;
        transform: translate(-110px, -85px) scale(.72)
      }

      70%,
      100% {
        opacity: 0;
        transform: translate(-137px, -104px) scale(.28)
      }
    }

    @keyframes diner-ticket-prints {

      0%,
      61% {
        opacity: 0;
        transform: translateY(15px) rotate(4deg) scale(.72)
      }

      69%,
      81% {
        opacity: 1;
        transform: translateY(0) rotate(0) scale(1)
      }

      88%,
      100% {
        opacity: 0;
        transform: translateY(-5px) scale(.9)
      }
    }

    @keyframes diner-order-confirmed {

      0%,
      70% {
        opacity: 0;
        transform: translateY(7px) scale(.75)
      }

      77%,
      86% {
        opacity: 1;
        transform: translateY(0) scale(1)
      }

      94%,
      100% {
        opacity: 0;
        transform: translateY(-5px) scale(.9)
      }
    }

    @media (prefers-reduced-motion:reduce) {

      .visual>.hero-click-order,
      .hero-click-order>img {
        opacity: 1;
        transform: none
      }
    }

    /* Keep the customer and all order feedback inside the desktop POS display. */
    .visual>.hero-click-order {
      left: 45%;
      right: auto;
      top: 146px;
      bottom: auto;
      width: 76px;
      height: 116px;
      z-index: 8;
      overflow: visible
    }

    .hero-click-order>img {
      right: auto;
      left: 0;
      bottom: 0;
      width: 76px;
      max-height: 112px;
      filter: drop-shadow(0 3px 3px rgba(37, 2, 8, .24))
    }

    .guest-order-food {
      right: auto;
      left: 21px;
      bottom: 61px;
      width: 20px;
      height: 20px;
      border-radius: 6px;
      font-size: 9px
    }

    .guest-order-food i {
      font-size: 9px
    }

    .guest-order-ok {
      right: auto;
      left: 89px;
      bottom: 46px;
      padding: 3px 4px;
      font-size: 7px;
      border-radius: 4px
    }

    .guest-order-ticket {
      right: auto;
      left: 87px;
      bottom: 25px;
      padding: 3px 4px;
      font-size: 7px;
      border-radius: 4px
    }

    .visual.order-playing .hero-click-order>img {
      animation: customer-in-pos 5.8s ease-in-out both
    }

    .visual.order-playing .guest-order-food {
      animation: item-to-order-panel 5.8s ease-in-out both
    }

    .visual.order-playing .guest-order-ok {
      animation: pos-order-confirmed 5.8s ease-in-out both
    }

    .visual.order-playing .guest-order-ticket {
      animation: pos-order-ticket 5.8s ease-in-out both
    }

    @keyframes customer-in-pos {

      0%,
      9% {
        opacity: 0;
        transform: translateX(-58px) translateY(4px) scale(.78)
      }

      24%,
      71% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1)
      }

      47% {
        transform: translateX(5px) translateY(2px) scale(1.03)
      }

      88%,
      100% {
        opacity: 0;
        transform: translateX(-34px) translateY(4px) scale(.85)
      }
    }

    @keyframes item-to-order-panel {

      0%,
      31% {
        opacity: 0;
        transform: translate(-8px, 18px) scale(.35)
      }

      39%,
      49% {
        opacity: 1;
        transform: translate(0, 0) scale(1)
      }

      64% {
        opacity: 1;
        transform: translate(105px, -12px) scale(.7)
      }

      70%,
      100% {
        opacity: 0;
        transform: translate(120px, -15px) scale(.25)
      }
    }

    @keyframes pos-order-ticket {

      0%,
      61% {
        opacity: 0;
        transform: translateX(11px) translateY(8px) scale(.72)
      }

      69%,
      81% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1)
      }

      88%,
      100% {
        opacity: 0;
        transform: translateY(-4px) scale(.9)
      }
    }

    @keyframes pos-order-confirmed {

      0%,
      70% {
        opacity: 0;
        transform: translateY(5px) scale(.75)
      }

      77%,
      86% {
        opacity: 1;
        transform: translateY(0) scale(1)
      }

      94%,
      100% {
        opacity: 0;
        transform: translateY(-4px) scale(.9)
      }
    }

    @media(max-width:900px) {
      .visual>.hero-click-order {
        display: none !important
      }
    }

    /* Customer walks in from the LEFT, adds a dish and places it on the POS order. */
    .visual>.hero-click-order {
      left: -7px;
      right: auto;
      top: auto;
      bottom: -5px;
      width: 132px;
      height: 202px;
      z-index: 8;
      overflow: visible
    }

    .hero-click-order>img {
      left: 0;
      right: auto;
      bottom: 0;
      width: 126px;
      max-height: 196px;
      filter: drop-shadow(0 12px 10px rgba(37, 2, 8, .34))
    }

    .guest-order-food {
      left: 94px;
      right: auto;
      bottom: 105px;
      width: 31px;
      height: 31px;
      border-radius: 10px
    }

    .guest-order-food i {
      font-size: 14px
    }

    .guest-order-ok {
      left: 126px;
      right: auto;
      bottom: 82px;
      padding: 5px 7px;
      font-size: 10px;
      border-radius: 7px
    }

    .guest-order-ticket {
      left: 124px;
      right: auto;
      bottom: 52px;
      padding: 6px 8px;
      font-size: 9px;
      border-radius: 7px
    }

    .visual.order-playing .hero-click-order>img {
      animation: left-diner-walks-to-pos 5.8s cubic-bezier(.22, .72, .24, 1) both
    }

    .visual.order-playing .guest-order-food {
      animation: left-diner-adds-product 5.8s ease-in-out both
    }

    .visual.order-playing .guest-order-ok {
      animation: left-diner-order-done 5.8s ease-in-out both
    }

    .visual.order-playing .guest-order-ticket {
      animation: left-diner-order-ticket 5.8s ease-in-out both
    }

    @keyframes left-diner-walks-to-pos {

      0%,
      8% {
        opacity: 0;
        transform: translateX(-145px) translateY(7px) scale(.84)
      }

      23% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1)
      }

      34%,
      41% {
        transform: translateX(6px) translateY(-3px) scale(1)
      }

      48% {
        transform: translateX(13px) translateY(1px) scale(1.02)
      }

      70% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1)
      }

      88%,
      100% {
        opacity: 0;
        transform: translateX(-65px) translateY(6px) scale(.9)
      }
    }

    @keyframes left-diner-adds-product {

      0%,
      34% {
        opacity: 0;
        transform: translate(-25px, 20px) scale(.35)
      }

      42%,
      49% {
        opacity: 1;
        transform: translate(0, 0) scale(1)
      }

      64% {
        opacity: 1;
        transform: translate(155px, -76px) scale(.7)
      }

      70%,
      100% {
        opacity: 0;
        transform: translate(184px, -91px) scale(.25)
      }
    }

    @keyframes left-diner-order-ticket {

      0%,
      61% {
        opacity: 0;
        transform: translateX(-12px) translateY(13px) rotate(4deg) scale(.72)
      }

      69%,
      81% {
        opacity: 1;
        transform: translateX(0) translateY(0) rotate(0) scale(1)
      }

      88%,
      100% {
        opacity: 0;
        transform: translateY(-5px) scale(.9)
      }
    }

    @keyframes left-diner-order-done {

      0%,
      70% {
        opacity: 0;
        transform: translateY(7px) scale(.75)
      }

      77%,
      86% {
        opacity: 1;
        transform: translateY(0) scale(1)
      }

      94%,
      100% {
        opacity: 0;
        transform: translateY(-5px) scale(.9)
      }
    }

    /* Three-step POS story: menu -> product dialog -> order saved. */
    .visual {
      overflow: hidden
    }

    .visual>.hero-pos-art,
    .visual>.hero-click-order,
    .visual>.hero-order-story,
    .visual>.script,
    .visual>.screen,
    .visual>.printer {
      display: none !important
    }

    .visual>.pos-story-video {
      display: block !important;
      position: absolute;
      inset: 0;
      border-radius: 22px;
      background: url('assets/pos-order-story.png') 0 50%/300% 100% no-repeat;
      box-shadow: 0 20px 38px rgba(37, 4, 8, .3);
      animation: pos-order-story 7.2s steps(1, end) infinite
    }

    @keyframes pos-order-story {

      0%,
      29% {
        background-position: 0 50%
      }

      30%,
      62% {
        background-position: 50% 50%
      }

      63%,
      86% {
        background-position: 100% 50%
      }

      87%,
      100% {
        background-position: 0 50%
      }
    }

    @media(max-width:900px) {
      .visual>.pos-story-video {
        border-radius: 16px
      }
    }

    /* Four-frame lady order journey: arrive -> select -> add -> saved. */
    .visual>.pos-story-video {
      background-size: 400% 100%;
      animation: lady-pos-order-story 8.8s steps(1, end) infinite
    }

    @keyframes lady-pos-order-story {

      0%,
      23% {
        background-position: 0 50%
      }

      24%,
      48% {
        background-position: 33.333% 50%
      }

      49%,
      73% {
        background-position: 66.667% 50%
      }

      74%,
      91% {
        background-position: 100% 50%
      }

      92%,
      100% {
        background-position: 0 50%
      }
    }

    /* Restore the original POS artwork; keep only the customer order animation as an overlay. */
    .visual {
      overflow: visible
    }

    .visual>.pos-story-video {
      display: none !important
    }

    .visual>.hero-pos-art {
      display: block !important
    }

    .visual>.hero-click-order {
      display: block !important
    }

    .visual>.hero-order-story {
      display: none !important
    }

    /* Customer finishes in the centre of the original POS artwork. */
    .visual>.hero-click-order {
      left: calc(50% - 66px);
      right: auto;
      bottom: 8px
    }

    /* Larger centered customer character. */
    .visual>.hero-click-order {
      left: calc(50% - 85px);
      width: 170px;
      height: 260px
    }

    .hero-click-order>img {
      width: 162px;
      max-height: 252px
    }

    /* Extra-large centered customer character. */
    .visual>.hero-click-order {
      left: calc(50% - 108px);
      width: 216px;
      height: 330px;
      bottom: 2px
    }

    .hero-click-order>img {
      width: 206px;
      max-height: 320px
    }

    /* Visual polish for the large ordering character. */
    .visual>.hero-click-order {
      isolation: isolate
    }

    .visual>.hero-click-order:before {
      content: '';
      position: absolute;
      z-index: -1;
      left: 50%;
      bottom: 8px;
      width: 190px;
      height: 190px;
      transform: translateX(-50%);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 231, 192, .52) 0%, rgba(157, 0, 46, .12) 48%, transparent 71%)
    }

    .visual>.hero-click-order:after {
      content: 'LIVE ORDER';
      position: absolute;
      z-index: 4;
      left: 50%;
      bottom: -16px;
      transform: translateX(-50%);
      white-space: nowrap;
      padding: 6px 10px;
      border: 1px solid rgba(255, 255, 255, .45);
      border-radius: 999px;
      background: linear-gradient(135deg, #a50036, #700020);
      box-shadow: 0 7px 16px rgba(68, 0, 20, .28);
      color: #fff;
      font: 700 9px/1 Arial, sans-serif;
      letter-spacing: .09em
    }

    .hero-click-order>img {
      position: relative;
      z-index: 2
    }

    .hero-click-order .guest-order-food,
    .hero-click-order .guest-order-ok,
    .hero-click-order .guest-order-ticket {
      z-index: 3
    }

    /* Warm premium background treatment behind the POS story. */
    .hero {
      background-image: radial-gradient(circle at 86% 13%, rgba(255, 190, 93, .28) 0 2%, transparent 20%), radial-gradient(circle at 7% 84%, rgba(147, 0, 47, .21) 0 4%, transparent 28%), linear-gradient(110deg, rgba(255, 250, 244, .78) 0%, rgba(255, 250, 244, .18) 38%, rgba(52, 5, 16, .30) 100%), url('assets/hero-restaurant-bg.png');
      background-size: auto, auto, auto, cover;
      background-position: center;
      background-repeat: no-repeat
    }

    .hero:after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .2;
      background-image: radial-gradient(rgba(128, 0, 40, .42) 1px, transparent 1px);
      background-size: 22px 22px;
      mask-image: linear-gradient(90deg, black, transparent 42%, transparent 72%, black)
    }

    .hero .wrap {
      position: relative;
      z-index: 1
    }

    /* Static industry-card hover treatment. */
    .industry {
      cursor: pointer;
      background-size: cover;
      background-repeat: no-repeat;
      transition: transform .38s cubic-bezier(.2, .8, .2, 1), box-shadow .38s ease, background-size .7s cubic-bezier(.2, .8, .2, 1)
    }

    .industry:hover {
      transform: translateY(-9px) scale(1.035);
      background-size: 118%;
      box-shadow: 0 20px 32px rgba(71, 3, 23, .32);
      animation: industry-card-pop .5s ease both
    }

    .industry:after {
      z-index: 1
    }

    .industry:before {
      content: '';
      position: absolute;
      z-index: 2;
      inset: 0;
      pointer-events: none;
      transform: translateX(-125%) skewX(-18deg);
      background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .42) 49%, transparent 67%);
      transition: transform .65s ease
    }

    .industry:hover:before {
      transform: translateX(125%) skewX(-18deg)
    }

    .industry span {
      z-index: 3;
      transition: transform .32s ease, text-shadow .32s ease
    }

    .industry:hover span {
      transform: translateY(-5px);
      text-shadow: 0 3px 10px rgba(0, 0, 0, .7)
    }

    @keyframes industry-card-pop {
      0% {
        transform: translateY(0) scale(1)
      }

      60% {
        transform: translateY(-11px) scale(1.05)
      }

      100% {
        transform: translateY(-9px) scale(1.035)
      }
    }

    @media(prefers-reduced-motion:reduce) {

      .industry,
      .industry:before,
      .industry span {
        transition: none !important;
        animation: none !important
      }
    }

    /* Keep industry images bright and clear—no black image overlay. */
    .industry:after {
      background: linear-gradient(transparent 45%, rgba(103, 0, 32, .12) 100%)
    }

    .industry span {
      bottom: 8px;
      margin: auto;
      width: max-content;
      max-width: calc(100% - 12px);
      padding: 4px 7px;
      border-radius: 999px;
      background: rgba(112, 0, 35, .78);
      box-shadow: 0 3px 10px rgba(45, 0, 12, .18);
      text-shadow: none
    }

    /* LetzBill logo treatment used in the header and footer. */
    .letzbill-logo {
      display: inline-flex;
      align-items: center;
      isolation: isolate;
      font-family: Arial, sans-serif;
      font-weight: 900;
      letter-spacing: -1.8px;
      line-height: 1;
      filter: drop-shadow(0 2px 2px rgba(20, 20, 20, .12))
    }

    .letzbill-logo .letz {
      position: relative;
      z-index: 1;
      padding: 8px 19px 8px 10px;
      background: linear-gradient(135deg, #79061f, #8a0522);
      color: #fff;
      font-size: 24px
    }

    .letzbill-logo .bill {
      position: relative;
      z-index: 2;
      margin-left: -12px;
      padding: 7px 10px;
      border: 3px solid #242021;
      border-radius: 0 0 11px 0;
      background: #fff;
      color: #242021;
      font-size: 24px;
      box-shadow: 10px 9px 0 -3px #242021
    }

    footer .letzbill-logo {
      transform: scale(1.08);
      transform-origin: left center
    }

    /* Give each industry image more visible space. */
    .industry {
      height: 132px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover
    }

    .industry:after {
      inset: 68% 0 0;
      background: linear-gradient(transparent, rgba(18, 18, 22, .42))
    }

    .industry span {
      bottom: 9px
    }

    /* Supplied LetzBill POS demo: video with the existing POS image as its poster. */
    .visual>.hero-demo-video {
      display: block !important;
      position: absolute;
      inset: 0;
      z-index: 12;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 22px;
      box-shadow: 0 20px 38px rgba(37, 4, 8, .3);
      background: #fff
    }

    @media(max-width:900px) {
      .visual>.hero-demo-video {
        border-radius: 16px
      }
    }

    /* The POS video replaces the old transparent guest overlay. */
    .visual>.hero-click-order {
      display: none !important
    }

    .visual>.hero-demo-video {
      z-index: 30 !important;
      opacity: 1 !important
    }

    /* Transparent video container: no static image or white loading background. */
    .visual>.hero-demo-video {
      background: transparent !important
    }

    .visual>.hero-pos-art {
      display: none !important
    }

    /* Clean POS background behind the transparent video overlay. */
    .visual {
      background: #080808 url('assets/pos-video-background.png') center/cover no-repeat
    }

    .visual>.hero-demo-video {
      object-fit: cover
    }

    /* Customer walking scene over the clean POS background. */
    .visual>.hero-demo-video {
      display: none !important
    }

    .visual>.hero-walking-boy {
      display: block !important;
      position: absolute;
      z-index: 32;
      bottom: -2%;
      left: 0;
      height: 76%;
      max-width: 42%;
      object-fit: contain;
      pointer-events: none;
      filter: drop-shadow(10px 14px 13px rgba(18, 8, 8, .28));
      animation: hero-boy-walk 9s linear infinite
    }

    @keyframes hero-boy-walk {
      0% {
        transform: translateX(-145%) scale(.78)
      }

      48% {
        transform: translateX(72%) scale(.94)
      }

      52% {
        transform: translateX(72%) scale(.94)
      }

      100% {
        transform: translateX(250%) scale(.78)
      }
    }

    @media(max-width:900px) {
      .visual>.hero-walking-boy {
        height: 65%;
        max-width: 48%
      }
    }

    @media(max-width:680px) {
      .visual>.hero-walking-boy {
        height: 55%;
        max-width: 54%
      }
    }

    /* Restore the original POS artwork while the customer walks in front of it. */
    .visual {
      background: transparent
    }

    .visual>.hero-pos-art {
      display: block !important;
      z-index: 10 !important
    }

    .visual>.hero-walking-boy {
      z-index: 32
    }

    /* Use the exact WhatsApp demo video only. */
    .visual>.hero-demo-video {
      display: block !important;
      z-index: 30 !important;
      background: #000 !important
    }

    .visual>.hero-pos-art,
    .visual>.hero-walking-boy {
      display: none !important
    }
  
    /* Hero video is the primary visual. */
    .visual > .hero-demo-video {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      z-index: 5 !important;
      object-fit: cover;
    }
    .visual > .hero-pos-art,
    .visual > .hero-click-order,
    .visual > .hero-order-story,
    .visual > .pos-story-video,
    .visual > .hero-modern-scene {
      display: none !important;
    }
    .hero-video-badge,
    .hero-video-caption,
    .hero-order-toast { z-index: 6; }
    /* Content-and-video hero layout inspired by the supplied reference. */
    .hero {
      background: radial-gradient(circle at 39% 49%, rgba(231, 139, 151, .32), transparent 15%), linear-gradient(90deg, #fffdf9 0%, #fffdf9 42%, #7d001e 65%, #5b0017 100%);
    }

    .hero .wrap {
      max-width: none;
      width: 100%;
      padding: 0;
    }

    .hero-grid {
      min-height: 520px;
      grid-template-columns: 44% 56%;
      align-items: stretch;
    }

    .hero-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 48px clamp(36px, 5vw, 80px);
      background: linear-gradient(90deg, rgba(255, 253, 249, 1) 0%, rgba(255, 253, 249, .96) 82%, rgba(255, 253, 249, 0) 100%);
    }

    .eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .28em; color: #531426; }
    .eyebrow:before { content: ''; display: inline-block; width: 38px; height: 2px; margin: 0 20px 3px 0; background: #c8873d; }
    .hero h1 { max-width: 690px; margin: 22px 0 20px; font-size: clamp(42px, 4.1vw, 76px); line-height: 1.04; letter-spacing: -3px; }
    .hero p { max-width: 610px; margin-bottom: 30px; font-size: clamp(16px, 1.35vw, 22px); line-height: 1.35; color: #755b5c; }

    .quick-features { grid-template-columns: repeat(3, max-content); max-width: none; gap: clamp(18px, 2.5vw, 52px); margin: 0 0 30px; }
    .quick-features > div:last-child { display: none; }
    .quick-features > div { display: flex; align-items: center; gap: 11px; text-align: left; color: #531426; font-size: 13px; font-weight: 700; }
    .quick-features b { width: 50px; height: 50px; margin: 0; font-size: 25px; border-radius: 50%; background: #fde7e6; box-shadow: none; }
    .hero-actions { gap: 18px; }
    .hero-actions .btn { min-width: 190px; padding: 16px 24px; font-size: 16px; }
    .hero-trust { display: none; }

    .visual { height: 520px; align-self: stretch; overflow: hidden; background: #670018; }
    .visual > .hero-demo-video { inset: 0 !important; width: 100% !important; height: 100% !important; border: 0; border-radius: 0; box-shadow: none; object-position: center; }
    .visual:before { display: block; z-index: 6; inset: 0 auto 0 -1px; width: 160px; filter: none; pointer-events: none; background: linear-gradient(90deg, rgba(255, 253, 249, .95), rgba(255, 253, 249, .58) 28%, transparent 100%); }
    .visual:after { display: none; }

    @media (max-width: 900px) {
      .hero-grid { min-height: 440px; grid-template-columns: 46% 54%; }
      .hero-copy { padding: 34px; }
      .visual { height: 440px; }
      .hero h1 { font-size: 42px; }
      .hero p { font-size: 16px; margin-bottom: 20px; }
      .quick-features { gap: 12px; }
      .quick-features > div { font-size: 10px; }
      .quick-features b { width: 40px; height: 40px; font-size: 20px; }
    }

    @media (max-width: 680px) {
      .hero-grid { display: block; min-height: 0; }
      .hero-copy { min-height: 410px; padding: 50px 24px 35px; }
      .hero h1 { font-size: 40px; letter-spacing: -2px; }
      .hero p { font-size: 16px; }
      .quick-features { grid-template-columns: repeat(3, 1fr); gap: 8px; }
      .quick-features > div { display: grid; justify-items: center; gap: 5px; text-align: center; }
      .visual { height: 290px; }
      .visual:before { width: 80px; }
      .hero-actions .btn { min-width: 0; flex: 1; padding: 14px 10px; font-size: 14px; }
    }
    /* Exact clean content-panel styling from the supplied reference. */
    .hero-copy {
      padding: 44px 48px;
      border: 0;
      background: #fffdfb;
      box-shadow: none;
    }
    .eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .25em; color: #6c2435; }
    .eyebrow:before { width: 20px; margin-right: 14px; background: #d09650; }
    .hero h1 { margin: 20px 0 14px; max-width: 470px; font-size: clamp(38px, 4vw, 52px); line-height: 1.02; letter-spacing: -2.6px; color: #41131d; }
    .hero h1 span { color: #a80031; }
    .hero p { max-width: 430px; margin-bottom: 24px; color: #806365; font-size: 16px; line-height: 1.38; }
    .quick-features { grid-template-columns: repeat(3, 1fr); max-width: 405px; gap: 15px; margin: 0 0 23px; }
    .quick-features > div { display: flex; align-items: center; gap: 9px; text-align: left; color: #611428; font-size: 10px; font-weight: 700; white-space: nowrap; }
    .quick-features b { flex: 0 0 40px; width: 40px; height: 40px; margin: 0; border: 0; border-radius: 50%; background: #fde8e9; box-shadow: none; color: #aa0034; font-size: 20px; }
    .hero-actions { gap: 12px; }
    .hero-actions .btn { min-width: 155px; padding: 13px 18px; font-size: 14px; border-radius: 9px; }
    .hero-actions .btn:not(.outline) { background: linear-gradient(135deg, #aa0034, #890026); color: #fff; }
    .hero-actions .btn.outline { background: #fff; border-color: #c6003d; color: #9e0032; }

    @media (max-width: 680px) {
      .hero-copy { min-height: 350px; padding: 42px 48px 24px; }
      .hero h1 { margin-top: 18px; font-size: 40px; }
      .hero p { margin-bottom: 18px; font-size: 16px; }
      .quick-features { max-width: 100%; gap: 8px; margin-bottom: 18px; }
      .quick-features > div { display: flex; gap: 6px; font-size: 9px; }
      .quick-features b { flex-basis: 36px; width: 36px; height: 36px; font-size: 18px; }
      .hero-actions .btn { padding: 12px 8px; }
    }
    /* Reference-matched editorial content + live video hero. */
    .hero {
      background: #fffdfa;
      overflow: hidden;
    }

    .hero .wrap {
      width: 100%;
      max-width: none;
      padding: 0;
    }

    .hero-grid {
      min-height: clamp(510px, 37.5vw, 768px);
      grid-template-columns: 46% 54%;
      align-items: stretch;
    }

    .hero-copy {
      z-index: 3;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(46px, 4vw, 82px);
      border: 0;
      background: radial-gradient(circle at 95% 48%, rgba(227, 129, 142, .28), transparent 24%), linear-gradient(90deg, #fffdfa 0%, #fffdfa 74%, rgba(255, 253, 250, .55) 100%);
      box-shadow: none;
    }

    .eyebrow { font-size: clamp(10px, .62vw, 13px); letter-spacing: .35em; color: #491222; }
    .eyebrow:before { width: 40px; height: 2px; margin-right: 24px; background: #cf8c40; }
    .hero h1 { max-width: 820px; margin: 28px 0 22px; font-size: clamp(52px, 4.7vw, 96px); line-height: .98; letter-spacing: -5px; color: #3b0d18; }
    .hero h1 span { color: #a30031; }
    .hero p { max-width: 700px; margin-bottom: clamp(28px, 2.1vw, 42px); font-size: clamp(18px, 1.35vw, 28px); line-height: 1.35; color: #765c5f; }

    .quick-features { grid-template-columns: repeat(3, max-content); max-width: none; gap: clamp(24px, 3.1vw, 64px); margin: 0 0 clamp(28px, 2.2vw, 44px); }
    .quick-features > div { display: flex; align-items: center; gap: 14px; color: #541426; font-size: clamp(12px, .9vw, 18px); font-weight: 700; text-align: left; white-space: nowrap; }
    .quick-features b { flex: 0 0 clamp(42px, 3.5vw, 72px); width: clamp(42px, 3.5vw, 72px); height: clamp(42px, 3.5vw, 72px); margin: 0; border-radius: 50%; border: 0; background: #fde6e6; box-shadow: none; color: #a90033; font-size: clamp(20px, 1.65vw, 34px); }
    .hero-actions { gap: 18px; }
    .hero-actions .btn { min-width: clamp(170px, 11vw, 280px); padding: clamp(14px, 1.1vw, 22px) clamp(20px, 1.5vw, 32px); border-radius: 13px; font-size: clamp(15px, 1.15vw, 23px); }
    .hero-actions .btn:not(.outline) { background: linear-gradient(135deg, #b50038, #820020); color: #fff; box-shadow: 0 16px 32px rgba(121, 0, 34, .16); }
    .hero-actions .btn.outline { border: 1.5px solid #c8003d; background: #fff; color: #a30032; }
    .hero-trust { display: none; }

    .visual { height: auto; min-height: clamp(510px, 37.5vw, 768px); align-self: stretch; overflow: hidden; background: #4b0016; box-shadow: none; }
    .visual > .hero-demo-video { display: block !important; z-index: 2 !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0; border-radius: 0; box-shadow: none; object-fit: cover; object-position: center; }
    .visual:before { display: block; z-index: 4; inset: 0 auto 0 0; width: clamp(110px, 10vw, 230px); filter: none; pointer-events: none; background: linear-gradient(90deg, #fffdfa 0%, rgba(255, 253, 250, .86) 22%, rgba(255, 253, 250, .32) 52%, transparent 100%); }
    .visual:after { display: none; }

    @media (max-width: 900px) {
      .hero-grid { grid-template-columns: 45% 55%; min-height: 475px; }
      .hero-copy { padding: 38px 32px; }
      .hero h1 { font-size: 48px; letter-spacing: -3px; }
      .hero p { font-size: 16px; }
      .quick-features { gap: 14px; }
      .quick-features > div { font-size: 10px; gap: 7px; }
      .quick-features b { flex-basis: 40px; width: 40px; height: 40px; font-size: 20px; }
      .visual { min-height: 475px; }
    }

    @media (max-width: 680px) {
      .hero-grid { display: block; min-height: 0; }
      .hero-copy { min-height: 400px; padding: 48px 30px 34px; background: #fffdfa; }
      .hero h1 { margin: 20px 0 16px; font-size: 44px; letter-spacing: -2.4px; }
      .hero p { margin-bottom: 22px; font-size: 16px; }
      .quick-features { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 23px; }
      .quick-features > div { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 9px; white-space: normal; }
      .quick-features b { flex-basis: 38px; width: 38px; height: 38px; font-size: 18px; }
      .hero-actions { gap: 10px; }
      .hero-actions .btn { min-width: 0; flex: 1; padding: 13px 8px; font-size: 14px; }
      .visual { min-height: 290px; height: 290px; }
      .visual:before { width: 74px; }
    }
    /* Feature icons reveal one by one when this strip enters the screen. */
    .section-3d.section-active .features-grid > div .feature-icon {
      animation: feature-icon-pop .46s cubic-bezier(.2, .85, .25, 1.25) both;
      animation-delay: calc(var(--stagger, 0ms) + 120ms);
    }

    .section-3d.section-active .features-grid > div p {
      animation: feature-label-in .35s ease both;
      animation-delay: calc(var(--stagger, 0ms) + 200ms);
    }

    @keyframes feature-icon-pop {
      from { opacity: 0; transform: translateY(12px) scale(.55) rotate(-10deg); }
      to { opacity: 1; transform: none; }
    }

    @keyframes feature-label-in {
      from { opacity: 0; transform: translateY(7px); }
      to { opacity: 1; transform: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .section-3d.section-active .features-grid > div .feature-icon,
      .section-3d.section-active .features-grid > div p { animation: none; }
    }
    /* Visitor-controlled sound for the autoplaying hero video. */
    .hero-sound-toggle {
      display: inline-flex;
      position: absolute;
      z-index: 10;
      right: 24px;
      bottom: 24px;
      align-items: center;
      gap: 8px;
      padding: 10px 13px;
      border: 1px solid rgba(255, 255, 255, .42);
      border-radius: 999px;
      background: rgba(42, 4, 14, .78);
      box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
      color: #fff;
      cursor: pointer;
      font: 700 12px/1 Arial, sans-serif;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: transform .2s ease, background .2s ease;
    }
    .hero-sound-toggle:hover { transform: translateY(-2px); background: #92002d; }
    .hero-sound-toggle.is-on { background: #9a0031; }
    .hero-sound-toggle i { color: #ffce80; }
    @media (max-width: 680px) { .hero-sound-toggle { right: 14px; bottom: 14px; padding: 8px 10px; font-size: 10px; } }
    /* RPOS image logo for the header and footer. */
    .brand-rpos {
      display: block;
      width: auto;
      height: 46px;
      max-width: 160px;
      object-fit: contain;
    }
    footer .brand-rpos { height: 58px; max-width: 180px; }
    @media (max-width: 680px) {
      .brand-rpos { height: 38px; }
      footer .brand-rpos { height: 50px; }
    }