/* StartShirt — premium minimalist, AI t-shirt studio */

:root {
    --bg: #fafafa;
    --bg-soft: #f3f1ee;
    --bg-card: #ffffff;
    --ink: #0a0a0a;
    --ink-soft: #2a2a2a;
    --muted: #6b6b6b;
    --line: #e6e3df;
    --line-soft: #efece8;
    --accent: #ff5b3a;
    --accent-ink: #fff7f4;
    --shadow-sm: 0 1px 2px rgba(10, 10, 10, .06), 0 0 0 1px rgba(10, 10, 10, .04);
    --shadow: 0 8px 30px rgba(10, 10, 10, .08), 0 1px 3px rgba(10, 10, 10, .06);
    --shadow-lg: 0 32px 80px -20px rgba(10, 10, 10, .25), 0 1px 3px rgba(10, 10, 10, .06);
    --radius: 14px;
    --radius-lg: 22px;
    --content: 1180px;
    --easing: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
[dir="rtl"] body {
    font-family: 'Cairo', 'Inter', system-ui, sans-serif;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }

.container {
    width: 100%;
    max-width: var(--content);
    margin: 0 auto;
    padding: 0 24px;
}

.display {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.04;
}

/* ============= NAV ============= */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 250, 250, .8);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line-soft);
}
.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    gap: 24px;
}
.nav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.nav__brand-img {
    height: 36px;
    width: auto;
    display: block;
}
.nav__brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--ink);
    color: var(--bg);
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 700;
}
.nav__menu {
    display: flex;
    gap: 28px;
    align-items: center;
    font-size: 14.5px;
    color: var(--ink-soft);
}
.nav__menu a:hover { color: var(--accent); }
.nav__right { display: flex; align-items: center; gap: 14px; }

.lang-picker {
    position: relative;
}
.lang-picker__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-soft);
    background: var(--bg-card);
    transition: border-color .2s var(--easing);
}
.lang-picker__btn:hover { border-color: var(--ink); }
.lang-picker__list {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 6px;
    box-shadow: var(--shadow);
    min-width: 180px;
    display: none;
    z-index: 100;
}
.lang-picker.is-open .lang-picker__list { display: block; }
.lang-picker__list button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 14px;
    text-align: start;
}
.lang-picker__list button:hover { background: var(--bg-soft); }
.lang-picker__list button[aria-current="true"] { background: var(--ink); color: var(--bg); }

@media (max-width: 880px) {
    .nav__menu { display: none; }
}

/* ============= BUTTONS ============= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    transition: transform .18s var(--easing), background .2s, color .2s, box-shadow .2s;
    white-space: nowrap;
}
.btn--primary {
    background: var(--ink);
    color: var(--bg);
}
.btn--primary:hover {
    transform: translateY(-1px);
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 12px 28px -12px rgba(255, 91, 58, .55);
}
.btn--ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
}
.btn--ghost:hover { border-color: var(--ink); }
.btn--lg { padding: 17px 28px; font-size: 16px; }
.btn--full { width: 100%; justify-content: center; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn .icon { width: 16px; height: 16px; }

/* ============= HERO ============= */
.hero {
    position: relative;
    overflow: hidden;
    padding: 96px 0 80px;
}
.hero__inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}
.hero__title {
    margin: 22px 0 18px;
    font-size: clamp(40px, 6.4vw, 78px);
}
.hero__title span { color: var(--accent); }
.hero__subtitle {
    font-size: 18px;
    color: var(--muted);
    max-width: 520px;
    margin-bottom: 32px;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 44px; }
.hero__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding-top: 28px;
    border-top: 1px solid var(--line-soft);
    max-width: 540px;
}
.hero__stat-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.hero__stat-label {
    font-size: 13px;
    color: var(--muted);
    margin-top: 2px;
}

.hero__visual {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(135deg, #f5f1ec, #ece6df);
    box-shadow: var(--shadow-lg);
}
.hero__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero__floating {
    position: absolute;
    background: var(--bg-card);
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: var(--shadow);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hero__floating--top {
    top: 24px;
    inset-inline-start: 24px;
}
.hero__floating--bot {
    bottom: 24px;
    inset-inline-end: 24px;
}
.hero__floating .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #28c76f;
    box-shadow: 0 0 0 3px rgba(40, 199, 111, .2);
}

@media (max-width: 920px) {
    .hero { padding: 56px 0 56px; }
    .hero__inner { grid-template-columns: 1fr; gap: 40px; }
    .hero__stats { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .hero__stat-value { font-size: 22px; }
}

/* ============= SECTION SHARED ============= */
.section {
    padding: 96px 0;
    border-top: 1px solid var(--line-soft);
}
.section--soft { background: var(--bg-soft); }
.section__head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 56px;
}
.section__head--start { text-align: start; margin-inline: 0; }
.section__title {
    font-size: clamp(30px, 4.4vw, 48px);
    margin: 12px 0 14px;
}
.section__subtitle {
    color: var(--muted);
    font-size: 17px;
}

@media (max-width: 720px) {
    .section { padding: 64px 0; }
    .section__head { margin-bottom: 36px; }
}

/* ============= HOW ============= */
.how__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.how__card {
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 28px;
    position: relative;
    overflow: hidden;
    transition: transform .25s var(--easing), border-color .2s;
}
.how__card:hover {
    transform: translateY(-3px);
    border-color: var(--ink);
}
.how__num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.08em;
    margin-bottom: 36px;
}
.how__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--bg-soft);
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    color: var(--ink);
}
.how__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 21px;
    font-weight: 600;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.how__text {
    font-size: 15px;
    color: var(--muted);
    margin: 0;
}

@media (max-width: 820px) {
    .how__grid { grid-template-columns: 1fr; }
}

/* ============= STUDIO ============= */
.studio {
    background: var(--ink);
    color: var(--bg);
}
.studio .section__title { color: var(--bg); }
.studio .section__subtitle { color: rgba(255, 255, 255, .65); }
.studio .eyebrow {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .8);
}
.studio__grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 32px;
    align-items: stretch;
}
.studio__panel {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius-lg);
    padding: 28px;
}
.studio__field { margin-bottom: 22px; }
.studio__label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, .7);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.dropzone {
    border: 1.5px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius);
    padding: 38px 22px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s;
    position: relative;
    background: rgba(255, 255, 255, .025);
}
.dropzone:hover {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .04);
}
.dropzone.is-drag {
    border-color: var(--accent);
    background: rgba(255, 91, 58, .09);
    box-shadow: inset 0 0 0 2px var(--accent);
}
.dropzone__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
}
.dropzone__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 4px;
}
.dropzone__subtitle { font-size: 14px; color: rgba(255, 255, 255, .55); }
.dropzone__hint { font-size: 12px; color: rgba(255, 255, 255, .35); margin-top: 12px; }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.dropzone__preview {
    display: none;
    align-items: center;
    gap: 14px;
    text-align: start;
}
.dropzone.is-uploaded .dropzone__empty { display: none; }
.dropzone.is-uploaded .dropzone__preview { display: flex; }
.dropzone.is-uploaded { cursor: default; padding: 18px; border-style: solid; border-color: rgba(255, 255, 255, .14); }
.dropzone__thumb {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: var(--bg);
    display: grid;
    place-items: center;
    overflow: hidden;
    flex-shrink: 0;
}
.dropzone__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.dropzone__meta { flex: 1; min-width: 0; }
.dropzone__name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropzone__status { font-size: 12.5px; color: rgba(255, 255, 255, .5); margin-top: 2px; }
.dropzone__remove {
    color: rgba(255, 255, 255, .55);
    padding: 8px;
    border-radius: 8px;
    transition: all .2s;
}
.dropzone__remove:hover { background: rgba(255, 91, 58, .15); color: var(--accent); }

.choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.choice {
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    font-size: 13.5px;
    background: transparent;
    color: rgba(255, 255, 255, .85);
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.choice:hover { border-color: rgba(255, 255, 255, .35); }
.choice[aria-pressed="true"] { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.choice__sw {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .18);
}
.sw-white   { background: #f7f5f1; }
.sw-black   { background: #16161a; }
.sw-sand    { background: #d6c5a8; }
.sw-navy    { background: #1c2742; }
.sw-olive   { background: #5a6336; }
.sw-red     { background: #c43c2c; }

.studio__error {
    color: #ffb6a3;
    font-size: 13.5px;
    margin-top: 12px;
    display: none;
}
.studio__error.is-visible { display: block; }

.studio__preview {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
}
.studio__canvas {
    flex: 1;
    aspect-ratio: 4/5;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #1a1a1d, #0e0e10);
    display: grid;
    place-items: center;
}
.studio__canvas img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.studio__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.studio__placeholder img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.7) saturate(.85);
    transition: filter .3s var(--easing);
}
.studio__placeholder-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    mix-blend-mode: multiply;
    pointer-events: none;
    transition: background .35s var(--easing);
}
.studio__placeholder-text {
    position: relative;
    color: rgba(255, 255, 255, .9);
    text-align: center;
    padding: 28px 32px;
    font-size: 14.5px;
    max-width: 320px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
    line-height: 1.45;
}

.studio__loading {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    padding: 36px;
    color: rgba(255, 255, 255, .85);
}
.is-loading .studio__loading { display: flex; }
.is-loading .studio__placeholder,
.is-loading .studio__result { display: none; }
.is-result .studio__placeholder,
.is-result .studio__loading { display: none; }
.is-result .studio__result { display: block; }

.studio__result { display: none; width: 100%; height: 100%; }
.studio__result img { width: 100%; height: 100%; object-fit: cover; }

.studio__actions {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spinner {
    width: 36px;
    height: 36px;
    border: 2.5px solid rgba(255, 255, 255, .12);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 880px) {
    .studio__grid { grid-template-columns: 1fr; }
}

/* ============= PRODUCTS ============= */
.products__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.product {
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 30px;
    position: relative;
    transition: transform .25s var(--easing), box-shadow .25s, border-color .2s;
}
.product:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--ink);
}
.product--popular {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
.product--popular .product__price { color: var(--bg); }
.product--popular .product__feature { color: rgba(255, 255, 255, .8); }
.product--popular .product__weight { color: rgba(255, 255, 255, .55); }
.product__badge {
    position: absolute;
    top: 18px;
    inset-inline-end: 18px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.product__name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.product__weight {
    font-size: 13px;
    color: var(--muted);
    margin-top: 2px;
}
.product__price {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 38px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 22px 0 6px;
}
.product__price-from {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 22px;
}
.product__features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.product__feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--ink-soft);
}
.product__feature::before {
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23fff7f4' d='M6.4 11.6 3 8.2l1.4-1.4 2 2 4.2-4.2 1.4 1.4z'/></svg>") center/12px no-repeat;
}
.product--popular .btn--ghost { color: var(--bg); border-color: rgba(255, 255, 255, .25); }
.product--popular .btn--ghost:hover { border-color: var(--bg); }

@media (max-width: 880px) {
    .products__grid { grid-template-columns: 1fr; }
}

/* ============= CATEGORIES (product cards) ============= */
.cats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.cat {
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s var(--easing), border-color .2s, box-shadow .25s;
}
.cat:hover {
    transform: translateY(-4px);
    border-color: var(--ink);
    box-shadow: var(--shadow);
}
.cat__media {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--bg-soft);
}
.cat__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--easing);
}
.cat:hover .cat__media img { transform: scale(1.04); }
.cat__body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.cat__name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}
.cat__desc {
    color: var(--muted);
    font-size: 14px;
    flex: 1;
    margin-bottom: 18px;
}
.cat__foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}
.cat__price {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.cat__from {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    margin-inline-end: 4px;
}
.cat__cta {
    font-size: 14px;
    font-weight: 500;
    color: var(--accent);
    transition: gap .2s, color .2s;
}
.cat:hover .cat__cta { color: var(--ink); }

@media (max-width: 1080px) {
    .cats__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .cats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .cats__grid { grid-template-columns: 1fr; }
}

/* ============= STUDIO product chip variant ============= */
.choices--products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.choice--product {
    flex-direction: column;
    align-items: center;
    padding: 14px 8px;
    gap: 6px;
    border-radius: var(--radius);
    text-align: center;
    font-size: 12.5px;
}
.choice__icon {
    font-size: 26px;
    line-height: 1;
}

@media (max-width: 720px) {
    .choices--products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
    .choices--products { grid-template-columns: repeat(2, 1fr); }
}

/* ============= GALLERY ============= */
.gallery__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.gallery__item {
    aspect-ratio: 4/5;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-soft);
    transition: transform .3s var(--easing);
}
.gallery__item:hover { transform: scale(1.02); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 820px) {
    .gallery__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============= ORDER ============= */
.order {
    background: var(--bg-soft);
}
.order__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}
.order__form {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 32px;
    border: 1px solid var(--line-soft);
}
.field { margin-bottom: 16px; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field label {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.input, .select, .textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-card);
    font-size: 15px;
    transition: border-color .2s, box-shadow .2s;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 4px rgba(10, 10, 10, .06);
}
.textarea { min-height: 90px; resize: vertical; }

.order__summary {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 32px;
    border: 1px solid var(--line-soft);
    position: sticky;
    top: 88px;
}
.order__mockup {
    aspect-ratio: 4/5;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-soft);
    margin-bottom: 18px;
    display: grid;
    place-items: center;
}
.order__mockup img { width: 100%; height: 100%; object-fit: cover; }
.order__mockup-empty {
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    padding: 24px;
}
.order__line {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 1px solid var(--line-soft);
    font-size: 14.5px;
}
.order__line:first-of-type { border-top: 0; }
.order__line strong { font-weight: 600; }
.order__msg {
    margin-top: 14px;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    display: none;
}
.order__msg.is-visible { display: block; }
.order__msg--success { background: #e9f9ef; color: #137a3d; }
.order__msg--error   { background: #ffe9e3; color: #b3361c; }

@media (max-width: 880px) {
    .order__grid { grid-template-columns: 1fr; }
    .order__summary { position: static; }
}

/* ============= FAQ ============= */
.faq__list {
    max-width: 760px;
    margin: 0 auto;
}
.faq__item {
    border-bottom: 1px solid var(--line);
}
.faq__q {
    width: 100%;
    text-align: start;
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 18px;
}
.faq__q-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    font-size: 14px;
    transition: transform .2s, background .2s, color .2s;
}
.faq__item.is-open .faq__q-icon {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
    transform: rotate(45deg);
}
.faq__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s var(--easing);
    color: var(--muted);
    font-size: 16px;
}
.faq__item.is-open .faq__a { max-height: 280px; padding-bottom: 24px; }

/* ============= FOOTER ============= */
.footer {
    background: var(--ink);
    color: var(--bg);
    padding: 64px 0 32px;
}
.footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 48px;
}
.footer__brand {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
}
.footer__brand-img {
    height: 32px;
    width: auto;
    display: block;
    margin-bottom: 14px;
    filter: invert(1);
}
.footer__tagline { color: rgba(255, 255, 255, .55); font-size: 14.5px; max-width: 280px; }
.footer h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 14px;
    color: rgba(255, 255, 255, .85);
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer a { font-size: 14px; color: rgba(255, 255, 255, .6); transition: color .2s; }
.footer a:hover { color: var(--bg); }
.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 24px;
    font-size: 13px;
    color: rgba(255, 255, 255, .45);
}

@media (max-width: 720px) {
    .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ============= UTIL ============= */
.fade-up { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--easing), transform .6s var(--easing); }
.fade-up.is-in { opacity: 1; transform: none; }

[hidden] { display: none !important; }

/* RTL fixes */
[dir="rtl"] .hero__floating--top { inset-inline-start: 24px; inset-inline-end: auto; }
[dir="rtl"] .hero__floating--bot { inset-inline-end: 24px; inset-inline-start: auto; }