:root {

    --font-display: "Fraunces", var(--font-body);
    --hp-ring: color-mix(in srgb, var(--color-primary) 45%, transparent);
    --hp-glass: color-mix(in srgb, var(--color-surface) 78%, transparent);
    --hp-line: color-mix(in srgb, var(--color-text) 12%, transparent);
    --hp-shadow: 0 30px 80px -40px rgba(0, 0, 0, .65);
}

.scroll-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 120;
    pointer-events: none;
    background: transparent;
}
.scroll-progress span {
    display: block;
    height: 100%;
    width: var(--sp, 0%);
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    box-shadow: 0 0 12px var(--hp-ring);
    transition: width .12s linear;
}

[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
    will-change: opacity, transform;
}
[data-reveal].is-in {
    opacity: 1;
    transform: none;
}
[data-reveal][data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal][data-reveal-delay="4"] { transition-delay: .32s; }

.site-header {
    transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
.site-header.is-scrolled {
    background: color-mix(in srgb, var(--color-background) 82%, transparent);
    box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .8);
    border-bottom: 1px solid var(--hp-line);
}

.home-page .btn,
.hero__actions .btn {
    position: relative;
    border-radius: 14px;
    font-weight: 700;
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease, background .25s ease;
}
.hero__actions .btn-primary { box-shadow: 0 16px 34px -16px var(--hp-ring); }
.hero__actions .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -16px var(--hp-ring); }
.hero__actions .btn-primary i { transition: transform .25s ease; }
.hero__actions .btn-primary:hover i { transform: translateX(-4px); }
.hero__actions .btn-secondary:hover { transform: translateY(-2px); }

main.home-page { counter-reset: sec; }
.section-head { counter-increment: sec; }
.section-head span:first-child::before {
    content: counter(sec, decimal-leading-zero) " · ";
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}
.section-head h2,
.hero__content h1 {
    font-family: var(--font-display);
    letter-spacing: -.01em;
    line-height: 1.18;
}
.hero__hl {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--color-primary);
    position: relative;
    white-space: nowrap;
}
.hero__hl::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -.06em;
    height: .28em;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    opacity: .28;
    border-radius: 999px;
    z-index: -1;
}

.hero {
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    padding-top: clamp(3rem, 7vw, 6rem);
    padding-bottom: clamp(3rem, 7vw, 5.5rem);
}
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .95rem;
    border-radius: 999px;
    border: 1px solid var(--hp-line);
    background: var(--hp-glass);
    font-size: .82rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--color-text) 78%, transparent);
    backdrop-filter: blur(8px);
}
.hero__eyebrow-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 0 var(--hp-ring);
    animation: heroPulse 2.4s ease-out infinite;
}
@keyframes heroPulse {
    0% { box-shadow: 0 0 0 0 var(--hp-ring); }
    70% { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.hero__content h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
.hero__trust {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-top: 1.6rem;
}
.hero__trust p { margin: 0; font-size: .92rem; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.hero__trust strong { color: var(--color-text); }
.hero__avatars { display: inline-flex; direction: ltr; }
.hero__avatars span {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    margin-inline-start: -10px;
    font-size: .85rem; font-weight: 700;
    color: #1a1205;
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
    border: 2px solid var(--color-background);
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .6);
}
.hero__avatars span:first-child { margin-inline-start: 0; }
.hero__avatar--logo { overflow: hidden; padding: 0; background: var(--color-surface, #fff); }
.hero__avatar--logo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

.hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--hp-line);
}
.hero__stats strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    line-height: 1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.hero__stats span { font-size: .82rem; color: color-mix(in srgb, var(--color-text) 65%, transparent); }

.hero__visual {
    position: relative;
    min-height: clamp(360px, 42vw, 480px);
    display: grid;
    place-items: center;
    isolation: isolate;
}
.hero__spot {
    position: absolute;
    inset: 6% 8%;
    background: radial-gradient(60% 60% at 60% 35%, color-mix(in srgb, var(--color-primary) 42%, transparent), transparent 70%);
    filter: blur(28px);
    z-index: -1;
    animation: spotFloat 9s ease-in-out infinite;
}
@keyframes spotFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-14px) scale(1.05); }
}

.hero__steam {
    position: absolute;
    top: 8%; left: 50%;
    translate: -50% 0;
    display: flex; gap: 10px;
    z-index: 3;
}
.hero__steam span {
    width: 6px; height: 42px;
    border-radius: 999px;
    background: linear-gradient(to top, transparent, color-mix(in srgb, var(--color-text) 30%, transparent));
    opacity: 0;
    animation: steamRise 3.2s ease-in-out infinite;
}
.hero__steam span:nth-child(2) { animation-delay: .5s; height: 54px; }
.hero__steam span:nth-child(3) { animation-delay: 1s; }
@keyframes steamRise {
    0% { opacity: 0; transform: translateY(10px) scaleY(.6); }
    35% { opacity: .55; }
    100% { opacity: 0; transform: translateY(-26px) scaleY(1.2); }
}

.menu-card {
    position: relative;
    width: min(340px, 84%);
    padding: 1.35rem;
    border-radius: 22px;
    background: var(--hp-glass);
    border: 1px solid var(--hp-line);
    backdrop-filter: blur(18px);
    box-shadow: var(--hp-shadow);
    transform: perspective(1000px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
    transition: transform .2s ease;
    z-index: 2;
}
.menu-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.menu-card__brand { display: flex; align-items: center; gap: .7rem; }
.menu-card__mark {
    position: relative;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 15px;
    font-size: 1.08rem; font-weight: 800;
    color: #1a1205;

    background: linear-gradient(150deg, #ffe9c2, var(--color-primary) 58%, #e8862f);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .65),
        inset 0 -3px 7px rgba(120, 60, 0, .26),
        0 10px 20px -10px var(--hp-ring);
}
.menu-card__mark::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, .3);
    pointer-events: none;
}
.menu-card__brand strong { display: block; font-size: .98rem; }
.menu-card__brand small { color: color-mix(in srgb, var(--color-text) 60%, transparent); font-size: .76rem; }
.menu-card__stamp {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    border: 1px solid var(--hp-ring);
}
.menu-card__section {
    display: inline-block;
    font-size: .74rem; font-weight: 700;
    letter-spacing: .04em;
    color: var(--color-primary);
    margin-bottom: .6rem;
}
.menu-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.menu-card__list li {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: .6rem;
    padding: .55rem .55rem;
    border-radius: 12px;
    transition: background .25s ease;
}
.menu-card__list li.is-featured { background: color-mix(in srgb, var(--color-primary) 12%, transparent); }
.menu-card__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); }
.menu-card__dot--cake { background: #e879a6; }
.menu-card__dot--tea { background: #5ec8a4; }
.menu-card__name { font-size: .9rem; font-weight: 600; }
.menu-card__lead {
    height: 1px;
    align-self: end;
    margin-bottom: .28em;
    background-image: radial-gradient(currentColor 1px, transparent 1.5px);
    background-size: 6px 2px;
    background-repeat: repeat-x;
    color: color-mix(in srgb, var(--color-text) 30%, transparent);
}
.menu-card__price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}
.menu-card__price::after { content: " ت"; font-size: .7em; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.menu-card__foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 1rem; padding-top: .9rem;
    border-top: 1px solid var(--hp-line);
    font-size: .8rem;
    color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.menu-card__cta { color: var(--color-primary); font-weight: 700; }

.qr-ticket, .order-toast {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .85rem;
    border-radius: 15px;
    background: var(--hp-glass);
    border: 1px solid var(--hp-line);
    backdrop-filter: blur(14px);
    box-shadow: var(--hp-shadow);
    z-index: 4;
}
.qr-ticket {
    bottom: 12%;
    inset-inline-start: 2%;
    animation: floatA 6s ease-in-out infinite;
}
.order-toast {
    top: 14%;
    inset-inline-end: 0%;
    animation: floatB 7s ease-in-out infinite;
}
@keyframes floatA { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes floatB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.qr-mark {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}
.qr-ticket__code {
    --qr-tile: 42px;
    box-sizing: border-box;
    width: var(--qr-tile);
    height: var(--qr-tile);
    flex: 0 0 auto;
    padding: 7px;
    border-radius: 11px;
    color: #1a1205;
    background: linear-gradient(145deg, #fff3dd, #ffe1b3);
    box-shadow: inset 0 0 0 1px rgba(26, 18, 5, .12);
}
.qr-ticket__qr { width: 100%; height: 100%; }
.qr-ticket__meta strong, .order-toast strong { display: block; font-size: .82rem; }
.qr-ticket__meta small, .order-toast small { font-size: .72rem; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.order-toast__pulse {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: #1a1205;
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
}
.order-toast__pulse::after {
    content: "";
    position: absolute;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    animation: toastRing 2s ease-out infinite;
}
@keyframes toastRing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }

.feature-bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 1.1rem;
}
.feature-bento .feature-card {
    border: 1px solid var(--hp-line);
    border-radius: 20px;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.feature-bento .feature-card:hover {
    transform: translateY(-6px);
    border-color: var(--hp-ring);
    box-shadow: 0 26px 50px -34px rgba(0,0,0,.7);
}
.feature-card--lg {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
}
.feature-card__top { display: flex; align-items: center; justify-content: space-between; }
.feature-tag {
    font-size: .72rem; font-weight: 700;
    padding: .3rem .7rem; border-radius: 999px;
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.feature-preview {
    margin-top: auto;
    padding: 1rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--color-background) 55%, transparent);
    border: 1px solid var(--hp-line);
}
.feature-preview__tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.feature-preview__tabs span {
    font-size: .76rem; padding: .28rem .7rem; border-radius: 999px;
    border: 1px solid var(--hp-line);
    color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.feature-preview__tabs span.is-active { background: var(--color-primary); color: #1a1205; border-color: transparent; font-weight: 700; }
.feature-preview__row {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: .6rem;
    padding: .5rem .2rem; font-size: .86rem;
    border-top: 1px dashed var(--hp-line);
}
.feature-preview__row i { color: var(--color-primary); }
.feature-preview__row span { font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--color-text) 70%, transparent); }

.brand-grid { gap: 1rem; }
.brand-item {
    border: 1px solid var(--hp-line);
    border-radius: 16px;
    transition: transform .3s ease, border-color .3s ease, filter .3s ease;
    filter: saturate(.85);
}
.brand-item:hover { transform: translateY(-4px); border-color: var(--hp-ring); filter: saturate(1); }
.brand-placeholder {
    color: #1a1205;
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
}

.pricing-card, .testimonial-card, .step-card, .faq-item {
    transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.pricing-card:hover, .step-card:hover { transform: translateY(-6px); }
.pricing-card.is-featured { border-color: var(--hp-ring); }

@media (max-width: 900px) {
    .feature-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feature-card--lg { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 640px) {
    .feature-bento { grid-template-columns: 1fr; }
    .feature-card--lg { grid-column: span 1; }
    .hero__stats { gap: .6rem; }
    .qr-ticket { inset-inline-start: -2%; bottom: 6%; }
    .order-toast { inset-inline-end: -2%; }
    .section-head span:first-child::before { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    .hero__eyebrow-dot, .hero__spot, .hero__steam span,
    .qr-ticket, .order-toast, .order-toast__pulse::after { animation: none; }
    .scroll-progress span { transition: none; }
    .menu-card { transform: none !important; }
}

:root[data-theme="light"] .testimonial-card {
    background: linear-gradient(145deg, #ffffff, #fbf7f1) !important;
    border-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
    box-shadow: 0 26px 60px -34px rgba(120, 80, 20, .28);
}
:root[data-theme="light"] .brand-item {
    background: linear-gradient(145deg, #ffffff, #faf6f0) !important;
    border-color: color-mix(in srgb, var(--color-primary) 16%, transparent);
    box-shadow: 0 18px 40px -30px rgba(120, 80, 20, .22);
}
:root[data-theme="light"] .brand-item:hover {
    background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--color-primary) 8%, #fff)) !important;
    border-color: var(--hp-ring);
}

:root[data-theme="light"] .final-cta__grid {
    opacity: .5;
    background-image:
        linear-gradient(rgba(120, 80, 20, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 80, 20, .08) 1px, transparent 1px);
}

:root {
    --hp-shadow: 0 30px 80px -42px rgba(46, 28, 10, .62);
    --hp-warm-line: color-mix(in srgb, var(--color-primary) 20%, transparent);
    --hp-warm-fill: color-mix(in srgb, var(--color-primary) 10%, var(--hp-glass));
}

.hero__eyebrow,
.final-cta__eyebrow {
    background: var(--hp-warm-fill);
    border-color: var(--hp-warm-line);
    color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.testimonial-verified {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    border-radius: 999px;
    padding: .28rem .7rem;
    font-weight: 600;
}

.hero__content > p {
    max-inline-size: 46ch;
    line-height: 1.95;
    color: color-mix(in srgb, var(--color-text) 84%, transparent);
}

.section-head h2 { text-wrap: balance; }

.menu-card {
    box-shadow: var(--hp-shadow), inset 0 1px 0 color-mix(in srgb, #fff 9%, transparent);
}

.testimonial-card { position: relative; }
.testimonial-card::before {
    content: "\201C";
    position: absolute;
    top: .04em;
    inset-inline-start: .32em;
    font-family: "Fraunces", serif;
    font-size: 7.5rem;
    line-height: 1;
    color: color-mix(in srgb, var(--color-primary) 15%, transparent);
    pointer-events: none;
    z-index: 0;
}
.testimonial-card__top,
.testimonial-rating,
.testimonial-card p,
.testimonial-author {
    position: relative;
    z-index: 1;
}
.testimonial-card p {
    font-size: clamp(1.04rem, 1.5vw, 1.2rem);
    line-height: 2;
    font-weight: 500;
    color: color-mix(in srgb, var(--color-text) 92%, transparent);
    text-wrap: pretty;
}

.section-head span:first-child {
    letter-spacing: .01em;
    color: color-mix(in srgb, var(--color-text) 66%, transparent);
}

:root[data-theme="light"] .testimonial-card::before {
    color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.comparison-table-wrap {
    border: 1px solid var(--hp-line);
    border-radius: 20px;
    background:
        radial-gradient(120% 100% at 50% 0, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 42%),
        var(--hp-glass);
    box-shadow: var(--hp-shadow);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.comparison-table {
    border-collapse: separate;
    border-spacing: 0;
}

.comparison-table th,
.comparison-table td {
    border: 0;
    border-bottom: 1px solid var(--hp-line);
}

.comparison-table thead th {
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
    border-bottom: 1px solid var(--hp-line);
}
.comparison-table thead strong {
    font-family: var(--font-display);
    letter-spacing: .01em;
}
.comparison-table thead small {
    color: var(--color-text-muted);
}

.comparison-table thead th:nth-child(3),
.comparison-table tbody td:nth-child(3) {
    background: color-mix(in srgb, var(--color-primary) 9%, transparent);
    box-shadow:
        inset 1px 0 color-mix(in srgb, var(--color-primary) 26%, transparent),
        inset -1px 0 color-mix(in srgb, var(--color-primary) 26%, transparent);
}
.comparison-table thead th:nth-child(3) {
    border-radius: 14px 14px 0 0;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--color-primary) 20%, transparent),
            color-mix(in srgb, var(--color-primary) 6%, transparent));
}
.comparison-table thead th:nth-child(3)::before {
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    box-shadow: 0 2px 12px var(--hp-ring);
}
.comparison-table thead th:nth-child(3) strong {
    color: var(--color-primary);
}

.comparison-table tbody tr:nth-child(even) td,
.comparison-table tbody tr:nth-child(even) th {
    background: color-mix(in srgb, var(--color-text) 3%, transparent);
}
.comparison-table tbody tr:hover td,
.comparison-table tbody tr:hover th {
    background: color-mix(in srgb, var(--color-primary) 7%, transparent);
}
.comparison-table tbody tr:hover td:nth-child(3) {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.comparison-table tbody tr:last-child td,
.comparison-table tbody tr:last-child th {
    border-bottom: 0;
}
.comparison-table tbody tr:last-child td:nth-child(3) {
    border-radius: 0 0 14px 14px;
}

.comparison-table tbody td {
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
}
.comparison-value--strong {
    color: var(--color-primary) !important;
    font-weight: 700;
}

.comparison-table tbody td .fa-check {
    width: 28px;
    height: 28px;
    background: color-mix(in srgb, #2fbf82 22%, transparent);
    color: #2fbf82;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #2fbf82 45%, transparent);
}
:root[data-theme="light"] .comparison-table tbody td .fa-check {
    background: color-mix(in srgb, #159c66 16%, transparent);
    color: #0f8a58;
}

.comparison-toggle {
    border: 1px solid var(--hp-line);
    background: color-mix(in srgb, var(--color-primary) 7%, transparent);
    color: var(--color-text);
    font-weight: 600;
}
.comparison-toggle:hover,
.comparison-toggle:focus-visible {
    border-color: var(--hp-ring);
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}

@media (max-width: 640px) {
    .comparison-table tbody th,
    .comparison-table thead th:first-child {
        position: sticky;
        inset-inline-start: 0;
        z-index: 1;
        background: var(--color-surface);
    }
}

@media (prefers-reduced-motion: reduce) {
    .comparison-table tbody tr:hover td,
    .comparison-table tbody tr:hover th,
    .comparison-table tbody tr:hover td:nth-child(3) {
        transition: none;
    }
}

.brand-placeholder--logo {
    padding: 0;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--hp-line);
}
.brand-placeholder--logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pp-menu {
    --pp-primary: #6d5efc;
    --pp-accent: #00e0c6;
    --pp-bg: #0a0c14;
    --pp-card: #12141f;
    --pp-ink: #f4f5ff;
    --pp-ink-soft: rgba(244, 245, 255, .68);
    --pp-line: rgba(255, 255, 255, .12);
    position: relative;
    overflow: hidden;
    padding: 16px 16px 18px;
    background: var(--pp-bg);
    color: var(--pp-ink);
    font-family: var(--font-body, "Vazir", Tahoma, sans-serif);
    isolation: isolate;
}

.pp-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pp-aurora span {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
}
.pp-aurora span:first-child {
    top: -30%; inset-inline-end: -18%;
    width: 58%; aspect-ratio: 1;
    background: radial-gradient(circle at 40% 40%, var(--pp-primary), transparent 68%);
}
.pp-aurora span:last-child {
    bottom: -26%; inset-inline-start: -16%;
    width: 54%; aspect-ratio: 1;
    background: radial-gradient(circle at 60% 60%, var(--pp-accent), transparent 68%);
}
.pp-menu > *:not(.pp-aurora) { position: relative; z-index: 1; }

.pp-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.pp-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pp-brand-mark {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--pp-primary), var(--pp-accent));
    color: #0a0c14;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 10px 22px -12px var(--pp-primary);
}
.pp-brand strong { display: block; font-size: .92rem; font-weight: 800; color: var(--pp-ink); }
.pp-brand small { display: block; font-size: .68rem; color: var(--pp-ink-soft); }
.pp-bar-actions { display: flex; gap: 8px; }
.pp-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 12px;
    border: 1px solid var(--pp-line);
    background: rgba(255, 255, 255, .06);
    color: var(--pp-ink);
    font-size: .82rem;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.pp-cart-count {
    position: absolute;
    top: -6px; inset-inline-start: -6px;
    min-width: 18px; height: 18px;
    display: grid; place-items: center;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--pp-accent);
    color: #06221d;
    font-size: .62rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.pp-tabs {
    display: flex;
    gap: 6px;
    padding: 5px;
    margin-bottom: 12px;
    border: 1px solid var(--pp-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    overflow: hidden;
}
.pp-tabs span {
    flex: 0 0 auto;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    color: var(--pp-ink-soft);
    white-space: nowrap;
}
.pp-tabs span.is-active {
    background: linear-gradient(135deg, var(--pp-primary), var(--pp-accent));
    color: #0a0c14;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}

.pp-heading { margin-bottom: 12px; }
.pp-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--pp-accent);
    font-size: .66rem; font-weight: 900; letter-spacing: .04em;
}
.pp-eyebrow::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--pp-accent); }
.pp-heading strong { display: block; margin-top: 2px; font-size: 1.08rem; font-weight: 900; color: var(--pp-ink); }

.pp-carousel {
    display: flex;
    gap: 12px;
    margin: 0 -16px 14px;
    padding: 2px 16px 6px;
    overflow: hidden;
}
.pp-poster {
    position: relative;
    flex: 0 0 62%;
    aspect-ratio: 3 / 4;
    max-height: 230px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 22px 46px -22px rgba(0, 0, 0, .8);
}
.pp-poster::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid color-mix(in srgb, var(--pp-accent) 42%, transparent);
    opacity: .6;
    pointer-events: none;
}
.pp-poster--coffee { background: linear-gradient(155deg, #6f4b2e, #2a1a10); }
.pp-poster--cake   { background: linear-gradient(155deg, #b5486e, #3a1526); }
.pp-poster--tea    { background: linear-gradient(155deg, #1f8f7a, #0c2f2a); }
.pp-poster-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
    background: linear-gradient(180deg, transparent 34%, rgba(6, 8, 14, .82) 100%);
}
.pp-badge {
    position: absolute;
    top: 12px; inset-inline-start: 12px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--pp-accent);
    color: #06221d;
    font-size: .6rem;
    font-weight: 900;
}
.pp-badge--new { background: #12b886; color: #fff; }
.pp-poster-foot { display: flex; flex-direction: column; gap: 10px; }
.pp-poster-title strong { display: block; font-size: .96rem; font-weight: 900; color: #fff; }
.pp-poster-title small { display: block; font-size: .68rem; color: rgba(255, 255, 255, .82); }
.pp-poster-buy { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pp-price {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(10, 12, 20, .42);
    color: #fff;
    font-size: .64rem;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.pp-price b { font-size: .92rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.pp-add {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pp-primary), var(--pp-accent));
    color: #0a0c14;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), 0 12px 26px -10px var(--pp-primary);
}

.pp-dock {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--pp-accent) 40%, transparent);
    background: linear-gradient(135deg, #2a2350, #14112e);
    color: #fff;
    box-shadow: 0 26px 60px -30px #000;
}
.pp-dock > i { color: var(--pp-accent); font-size: .95rem; }
.pp-dock-info { flex: 1; min-width: 0; }
.pp-dock-info strong { display: block; font-size: .82rem; font-weight: 900; }
.pp-dock-info small { display: block; font-size: .66rem; color: rgba(255, 255, 255, .68); }
.pp-dock-total { color: var(--pp-accent); font-size: .88rem; font-weight: 900; white-space: nowrap; }

.footer-social a { display: inline-flex; align-items: center; gap: 8px; }
.footer-social a i { color: var(--color-primary); }
.footer-enamad {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 20px 14px;
    border: 1px dashed var(--hp-line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--color-primary) 5%, transparent);
    color: var(--color-text-muted);
    text-align: center;
}
.footer-enamad i { font-size: 1.4rem; color: var(--color-primary); }
.footer-enamad span { font-size: .86rem; font-weight: 700; color: var(--color-text); }
.footer-enamad small { font-size: .74rem; }
.footer-credit i { color: var(--color-primary); }
.footer-credit a { color: var(--color-primary); font-weight: 700; }
.footer-credit a:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .pp-poster { flex-basis: 74%; }
}

.home-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.trusted-brands .home-cta-row {
    position: relative;
    z-index: 1;
    justify-content: center;
    margin-top: 40px;
}

.comparison-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
}
.comparison-table {
    min-width: 560px;
    max-width: none;
}

.comparison-table-wrap {
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--color-surface) 92%, transparent) 0, transparent 46px);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 46px 100%;
}

.final-cta {
    --cta-surface: #17130f;
    --cta-line: color-mix(in srgb, var(--color-accent) 24%, transparent);
    --cta-heading: #fff8ed;
    --cta-body: #c9b9a2;
    --cta-muted: #bca991;
    --cta-chip: rgba(255, 255, 255, .05);

    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(28px, 4vw, 56px);
    padding: clamp(34px, 5vw, 74px) clamp(22px, 5.5vw, 80px);
    border: 1px solid var(--cta-line);
    border-radius: 34px;
    background:
        radial-gradient(circle at 84% 20%, color-mix(in srgb, var(--color-primary) 17%, transparent), transparent 46%),
        radial-gradient(circle at 6% 94%, rgba(66, 194, 160, .1), transparent 48%),
        linear-gradient(140deg, #1d1710, var(--cta-surface) 54%, #11181a);
    box-shadow: 0 40px 100px -52px rgba(0, 0, 0, .78);
}

.final-cta__eyebrow {
    padding: 7px 15px 7px 13px;
    border: 1px solid var(--cta-line);
    border-radius: 999px;
    background: var(--cta-chip);
}

.final-cta h2 {
    max-width: 620px;
    margin: 18px 0 14px;
    color: var(--cta-heading);
    font-size: clamp(1.75rem, 3.4vw, 3.05rem);
    line-height: 1.35;
}

.final-cta p {
    max-width: 540px;
    margin: 0 0 28px;
    color: var(--cta-body);
    font-size: clamp(.95rem, 1.05vw, 1.05rem);
    line-height: 1.95;
}

.final-cta__stats {
    gap: 10px;
    margin-top: 30px;
    padding-top: 24px;
    
    color: var(--cta-muted);
    border-top: 1px solid color-mix(in srgb, var(--cta-heading) 10%, transparent);
}
.final-cta__stats span {
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid color-mix(in srgb, var(--cta-heading) 10%, transparent);
    border-radius: 999px;
    background: var(--cta-chip);
}
.final-cta__stats strong { color: var(--color-accent); font-size: .88rem; }

.final-cta__aside {

    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(240px, 25vw, 300px);
}

.final-cta__aside::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: min(110%, 360px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 24%, transparent), transparent 64%);
    filter: blur(4px);
    pointer-events: none;
}
.final-cta__orbit {
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border: 1px dashed color-mix(in srgb, var(--color-accent) 22%, transparent);
    border-radius: 50%;
    transform: none;
    pointer-events: none;
}
.final-cta__orbit--one { width: min(58%, 230px); height: auto; aspect-ratio: 1; }
.final-cta__orbit--two { width: min(84%, 320px); height: auto; aspect-ratio: 1; }

.final-cta__qr-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 18px 20px 20px;
    border: 1px solid var(--cta-line);
    border-radius: 20px;
    background: color-mix(in srgb, var(--cta-surface) 86%, #fff 8%);
    box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .8);
    text-align: center;
    transform: none;
}
.final-cta__qr {

    display: block;
    grid-template-columns: none;
    gap: 0;
    box-sizing: border-box;
    width: clamp(74px, 9vw, 96px);
    height: clamp(74px, 9vw, 96px);
    padding: 10px;
    border-radius: 14px;
    color: #1a1205;
    background: linear-gradient(145deg, #fff3dd, #ffe1b3);
    box-shadow: inset 0 0 0 1px rgba(26, 18, 5, .12);
}
.final-cta__qr-mark { display: block; width: 100%; height: 100%; }
.final-cta__qr-meta strong {
    display: block;
    color: var(--cta-heading);
    font-size: .86rem;
}
.final-cta__qr-meta small {
    display: block;
    margin-top: 5px;
    color: var(--cta-muted);
    font-size: .72rem;
}

.final-cta__icon {
    position: absolute;
    top: -13px;
    inset-inline-end: -13px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 13px;
    color: #1a1205;
    background: linear-gradient(140deg, var(--color-accent), var(--color-primary));
    box-shadow: 0 14px 28px -14px var(--hp-ring);
    font-size: 1rem;
    opacity: 1;
    animation: ctaBadge 5.5s ease-in-out infinite;
}
@keyframes ctaBadge {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-7px) rotate(-4deg); }
}

:root[data-theme="light"] .final-cta {
    --cta-surface: #ffffff;
    --cta-line: color-mix(in srgb, var(--color-primary) 30%, transparent);
    --cta-heading: #241a10;
    --cta-body: #6b5b45;
    --cta-muted: #8a785e;
    --cta-chip: rgba(120, 80, 20, .05);

    background:
        radial-gradient(circle at 84% 20%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 46%),
        linear-gradient(135deg, #ffffff, #fbf6ee 62%, #fdf4e6);
    
    box-shadow: 0 34px 80px -46px rgba(120, 80, 20, .32);
}
:root[data-theme="light"] .final-cta__aside::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 20%, transparent), transparent 66%);
}
:root[data-theme="light"] .final-cta__orbit {
    border-color: color-mix(in srgb, var(--color-primary) 26%, transparent);
}
:root[data-theme="light"] .final-cta__qr-card {
    background: #fff;
    border-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
    box-shadow: 0 24px 50px -30px rgba(120, 80, 20, .35);
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

.hero > *,
.hero__stats > *,
.hero__actions > *,
.feature-grid > *,
.steps-grid > *,
.pricing-grid > *,
.brand-grid > *,
.footer-inner > *,
.final-cta > *,
.comparison-table-wrap {
    min-width: 0;
}

.browser-address,
.qr-ticket__meta small,
.final-cta__qr-meta small,
[data-slug-base],
[data-page-slug-base] {
    overflow-wrap: anywhere;
}

.nav-toggle,
.theme-toggle,
.testimonial-control,
.faq-question,
.auth-modal__close {
    -webkit-tap-highlight-color: transparent;
}
.faq-question,
.nav-panel a {
    min-height: 44px;
}
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.site-footer {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (max-width: 1180px) {
    .hero {
        gap: 34px;
    }
    .hero h1 {
        font-size: clamp(2.2rem, 4.4vw, 3.5rem);
    }
    .hero__visual {
        min-height: clamp(340px, 40vw, 440px);
    }
    .final-cta {
        margin-top: 112px;
    }
}

@media (max-width: 1024px) {
    .feature-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .feature-bento .feature-card--lg {
        grid-column: span 2;
    }
    .final-cta {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .final-cta h2,
    .final-cta p {
        margin-inline: auto;
    }
    .final-cta__eyebrow {
        margin-inline: auto;
    }
    .final-cta__stats,
    .home-cta-row {
        justify-content: center;
    }
    .final-cta__stats span {
        justify-content: center;
    }
    .final-cta__aside {
        min-height: 280px;
    }
}

@media (max-width: 860px) {
    .feature-grid,
    .feature-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .feature-bento .feature-card--lg {
        grid-column: span 2;
    }
    .hero__actions {

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }
    .hero__actions .btn:first-child {
        grid-column: 1 / -1;
    }
    .hero__actions .btn {
        width: 100%;
    }
    .qr-ticket__code {
        --qr-tile: 38px;
    }
}

@media (max-width: 720px) {
    .feature-grid,
    .feature-bento {
        grid-template-columns: 1fr;
    }
    .feature-bento .feature-card--lg {
        grid-column: span 1;
    }
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
    }
    .brand-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .brand-item:last-child {
        grid-column: auto;
        width: auto;
        justify-self: stretch;
    }
    .final-cta {
        margin-top: 96px;
    }
    .final-cta__aside {
        min-height: 250px;
    }
}

@media (max-width: 560px) {
    .home-page {
        padding-top: 14px;
    }
    .hero {
        gap: 26px;
    }
    .hero h1 {
        font-size: clamp(1.9rem, 8.4vw, 2.6rem);
        line-height: 1.4;
    }
    .hero__actions {
        grid-template-columns: 1fr;
    }
    .hero__actions .btn:first-child {
        grid-column: auto;
    }
    .hero__trust {
        justify-content: center;
        text-align: center;
    }

    .hero__visual {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        min-height: 0;
        padding-bottom: 8px;
    }
    .hero__visual .menu-card {
        width: min(340px, 100%);
        align-self: center;
    }
    .hero__steam {
        display: none;
    }
    .qr-ticket,
    .order-toast {
        position: static;
        inset: auto;
        width: 100%;
        justify-content: space-between;
        animation: none;
    }
    .qr-ticket {
        order: 1;
    }
    .order-toast {
        order: 2;
    }

    .section-head h2 {
        font-size: clamp(1.55rem, 6.4vw, 2rem);
        line-height: 1.45;
    }
    .trusted-brands,
    .how-it-works,
    .features,
    .pricing,
    .comparison,
    .testimonials,
    .faq {
        padding-top: 76px;
    }

    .final-cta {
        margin-top: 80px;
        padding: 34px 20px 30px;
        border-radius: 26px;
    }
    .final-cta__orbit--one { width: min(70%, 190px); }
    .final-cta__orbit--two { width: min(96%, 250px); }
    .final-cta__icon {
        top: -10px;
        inset-inline-end: -10px;
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: .86rem;
    }
    .final-cta__stats {
        gap: 8px;
    }
    .final-cta__stats span {
        flex: 1 1 auto;
    }

    .home-cta-row {
        gap: 10px;
    }
    .comparison-table {
        min-width: 520px;
    }

    .footer-links a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
}

@media (max-width: 420px) {
    .container {
        width: min(var(--container-width), calc(100% - 24px));
    }
    .hero h1 {
        font-size: clamp(1.7rem, 8.6vw, 2.2rem);
    }
    .hero__eyebrow {
        font-size: .72rem;
    }
    .hero__stats div {
        flex: 1 1 100%;
    }
    .menu-card {
        padding: 1.05rem;
    }
    .menu-card__name,
    .menu-card__price {
        font-size: .84rem;
    }
    .qr-ticket {
        --qr-tile: 36px;
    }
    .qr-ticket__meta small {
        font-size: .66rem;
    }
    .final-cta {
        padding: 28px 16px 26px;
        border-radius: 22px;
    }
    .final-cta h2 {
        font-size: 1.6rem;
    }
    .final-cta__stats span {
        flex: 1 1 100%;
        justify-content: center;
    }
    .final-cta__icon {
        display: none;
    }
    .comparison-table {
        min-width: 460px;
    }

    .testimonial-slider {
        gap: 6px;
    }
}

@media (max-width: 560px) {
    .final-cta__icon {
        animation: none;
    }
}

@media (max-width: 980px) {
    .hero__trust {
        justify-content: center;
        text-align: center;
    }

    .hero__visual {
        width: 100%;
        max-width: 470px;
        margin-inline: auto;
    }
}

@media (max-width: 720px) {
    .hero__stats div {
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .pricing,
    .faq {
        padding-top: 92px;
    }

    .product-showcase {
        margin-top: 80px;
        padding: 72px 0;
    }
}

@media (max-width: 560px) {
    .pricing,
    .faq {
        padding-top: 76px;
    }

    .product-showcase {
        margin-top: 80px;
        padding: 64px 0;
    }

    .hero__stats div {
        padding: 12px 8px 10px;
    }

    .hero__stats strong {
        font-size: clamp(1.2rem, 5.4vw, 1.55rem);
    }

    .hero__stats span {
        font-size: 0.74rem;
        line-height: 1.5;
    }

    .hero__content > p {
        font-size: 0.98rem;
        line-height: 1.9;
    }

    .showcase-copy h2 {
        font-size: clamp(1.55rem, 6.4vw, 2rem);
        line-height: 1.45;
    }

    .faq-question {
        padding: 16px;
        font-size: 0.88rem;
    }

    .faq-answer p {
        padding: 0 16px;
    }

    .faq-item.is-open .faq-answer p {
        padding-bottom: 16px;
    }
}

@media (max-width: 480px) {
    .hero__eyebrow {
        gap: 0.45rem;
        padding: 0.38rem 0.75rem;
        font-size: 0.72rem;
    }
}

@media (max-width: 420px) {
    .pp-tabs {
        gap: 5px;
    }

    .pp-tabs span {
        padding: 7px 11px;
    }

    .btn {
        white-space: normal;
        text-align: center;
    }
}

.home-page {
    mask-image: linear-gradient(to bottom, black calc(100% - 80px), transparent 100%);
}

.brand-item strong,
.brand-item small {
    max-width: 100%;
    overflow-wrap: anywhere;
}