/* =========================================================
   STARK BEAUTY CENTER — COMPLETE PUBLIC UI
   Modern Luxury / RTL / Responsive / Mobile First
   Scoped with .stark-public to protect the admin panel
   ========================================================= */

/* ===== Yekan Bakh ===== */

@font-face{
    font-family:'YekanBakh';
    src:url('../fonts/YekanBakhNoEn-Regular.woff2') format('woff2');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:'YekanBakh';
    src:url('../fonts/YekanBakhNoEn-Bold.woff2') format('woff2');
    font-weight:700;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:'YekanBakh';
    src:url('../fonts/YekanBakhNoEn-ExtraBlack.woff2') format('woff2');
    font-weight:900;
    font-style:normal;
    font-display:swap;
}

html,
body{
    font-family:'YekanBakh',sans-serif;
    font-weight:400;
}


button,
input,
textarea,
select{
    font-family:'YekanBakh',sans-serif;
    font-weight:400;
}

:root {
    --st-black: #090909;
    --st-ink: #111111;
    --st-charcoal: #202020;
    --st-dark-gray: #343434;
    --st-muted: #777772;
    --st-soft-muted: #9a9a94;
    --st-line: #e7e7e2;
    --st-line-dark: rgba(255, 255, 255, 0.1);
    --st-background: #f6f6f3;
    --st-background-soft: #fbfbf9;
    --st-white: #ffffff;
    --st-gold: #b7935a;
    --st-gold-light: #d7bd92;
    --st-success: #1f8b4c;
    --st-danger: #c0392b;
    --st-warning: #b7791f;

    --st-radius-xs: 10px;
    --st-radius-sm: 14px;
    --st-radius-md: 20px;
    --st-radius-lg: 28px;
    --st-radius-xl: 36px;

    --st-shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.05);
    --st-shadow-md: 0 24px 65px rgba(0, 0, 0, 0.09);
    --st-shadow-lg: 0 35px 90px rgba(0, 0, 0, 0.16);

    --st-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --st-container: 1180px;
}

/* =========================
   Public reset
   ========================= */

body.stark-public,
body.stark-public * {
    box-sizing: border-box;
}

body.stark-public {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    direction: rtl;
    text-align: right;
    background: var(--st-background);
    color: var(--st-ink);
    font-family: "YekanBakh", Tahoma, Arial, sans-serif;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.stark-public.menu-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.stark-public img {
    display: block;
    max-width: 100%;
}

.stark-public a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.stark-public button,
.stark-public input,
.stark-public textarea,
.stark-public select {
    font: inherit;
}

.stark-public button {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.stark-public ul,
.stark-public ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stark-public h1,
.stark-public h2,
.stark-public h3,
.stark-public h4,
.stark-public p {
    overflow-wrap: break-word;
}

.stark-public svg {
    display: block;
}

.stark-public ::selection {
    background: var(--st-black);
    color: var(--st-white);
}

.stark-public a:focus-visible,
.stark-public button:focus-visible,
.stark-public input:focus-visible,
.stark-public textarea:focus-visible,
.stark-public select:focus-visible {
    outline: 3px solid rgba(183, 147, 90, 0.65);
    outline-offset: 3px;
}

/* =========================
   Layout
   ========================= */

.stark-public .container {
    width: 100%;
    max-width: var(--st-container);
    margin-right: auto;
    margin-left: auto;
    padding-right: 18px;
    padding-left: 18px;
}

.stark-public .section {
    padding: clamp(66px, 8vw, 105px) 0;
}

.stark-public .text-center {
    text-align: center;
}

.stark-public .section-heading {
    max-width: 680px;
    margin: 0 auto 48px;
    text-align: center;
}

.stark-public .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
    color: var(--st-gold);
    font-size: 0.75rem;
    font-weight: 900;
}

.stark-public .section-tag::before {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
}

.stark-public .section-title {
    margin: 0;
    color: var(--st-ink);
    font-size: clamp(1.75rem, 4vw, 2.8rem);
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: -0.035em;
}

.stark-public .section-subtitle {
    max-width: 610px;
    margin: 13px auto 0;
    color: var(--st-muted);
    font-size: 0.92rem;
    line-height: 2;
}

.stark-public .section-dark {
    background: var(--st-black);
    color: var(--st-white);
}

.stark-public .section-dark .section-title {
    color: var(--st-white);
}

.stark-public .section-dark .section-subtitle {
    color: #9d9d97;
}

/* =========================
   Buttons
   ========================= */

.stark-public .btn {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 25px;
    border: 1px solid var(--st-black);
    border-radius: 16px;
    background: var(--st-black);
    color: var(--st-white);
    font-size: 0.88rem;
    font-weight: 900;
    transition:
        transform 0.35s var(--st-ease),
        box-shadow 0.35s ease,
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.stark-public .btn svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s var(--st-ease);
}

.stark-public .btn:hover {
    transform: translateY(-3px);
    background: #292929;
    color: var(--st-white);
    box-shadow: 0 17px 38px rgba(0, 0, 0, 0.17);
}

.stark-public .btn:hover svg {
    transform: translateX(-4px);
}

.stark-public .btn-outline {
    border-color: #d8d8d3;
    background: var(--st-white);
    color: var(--st-ink);
}

.stark-public .btn-outline:hover {
    border-color: var(--st-black);
    background: var(--st-black);
    color: var(--st-white);
}

.stark-public .btn-invert {
    border-color: var(--st-white);
    background: var(--st-white);
    color: var(--st-ink);
}

.stark-public .btn-invert:hover {
    border-color: var(--st-gold);
    background: var(--st-gold);
    color: var(--st-white);
}

.stark-public .btn-block {
    width: 100%;
}

.stark-public .btn:disabled,
.stark-public .btn.disabled {
    cursor: not-allowed;
    opacity: 0.45;
    transform: none;
    box-shadow: none;
}

/* =========================
   Announcement
   ========================= */

.stark-public .announcement-bar {
    position: relative;
    z-index: 1002;
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 8px 16px;
    background: var(--st-black);
    color: var(--st-white);
    text-align: center;
    font-size: 0.77rem;
    font-weight: 700;
}

.stark-public .announcement-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--st-gold);
    box-shadow: 0 0 0 5px rgba(183, 147, 90, 0.15);
}

/* =========================
   Header
   ========================= */

.stark-public .site-header,
.stark-public .mobile-lux-header {
    position: sticky;
    top: 0;
    z-index: 2000;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 8px 35px rgba(0, 0, 0, 0.035);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.stark-public .site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 42px rgba(0, 0, 0, 0.075);
}

.stark-public .header-inner {
    position: relative;
    display: flex;
    min-height: 80px;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.stark-public .app-logo {
    display: inline-flex;
    min-width: max-content;
    align-items: center;
    gap: 12px;
    color: var(--st-ink);
    transition: transform 0.35s var(--st-ease);
}

.stark-public .app-logo:hover {
    transform: scale(1.025);
}

.stark-public .app-logo-visual {
    position: relative;
    display: flex;
    width: 46px;
    height: 46px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 15px;
    background: linear-gradient(145deg, #ffffff, #eeeeeb);
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.08);
}

.stark-public .app-logo-visual img {
    position: relative;
    z-index: 2;
    width: 78%;
    height: 78%;
    object-fit: contain;
}

.stark-public .logo-fallback {
    position: absolute;
    z-index: 1;
    color: var(--st-ink);
    direction: ltr;
    font-size: 0.95rem;
    font-weight: 900;
}

.stark-public .app-logo-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.45;
}

.stark-public .app-logo strong {
    max-width: 230px;
    overflow: hidden;
    color: var(--st-ink);
    font-size: 0.92rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stark-public .app-logo small {
    max-width: 210px;
    overflow: hidden;
    color: var(--st-muted);
    font-size: 0.65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stark-public .app-nav {
    display: flex;
    align-items: center;
    gap: 27px;
}

.stark-public .app-nav > a:not(.nav-book) {
    position: relative;
    padding: 27px 0;
    color: #50504b;

    font-family: "YekanBakh", Tahoma, sans-serif;
    font-size: .90rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;

    transition:
        color .25s ease,
        transform .3s var(--st-ease);
}

.stark-public .nav-item-text{
    display:flex;
    flex-direction:column;
    font-family:inherit;
}

.stark-public .nav-item-text strong{
    font-family:"YekanBakh",Tahoma,sans-serif;
    font-weight:700;
    font-size:inherit;
    line-height:1.2;
}

.stark-public .nav-item-text small{
    display:none;
    font-family:"YekanBakh",Tahoma,sans-serif;
    font-weight:400;
}
.stark-public .app-nav > a:not(.nav-book)::after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: 18px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--st-black);
    transform: translateX(50%);
    transition: width 0.3s var(--st-ease);
}

.stark-public .app-nav > a:not(.nav-book):hover,
.stark-public .app-nav > a.active:not(.nav-book) {
    color: var(--st-black);
    transform: translateY(-2px);
}

.stark-public .app-nav > a:not(.nav-book):hover::after,
.stark-public .app-nav > a.active:not(.nav-book)::after {
    width: 22px;
}

.stark-public .nav-item-text {
    display: flex;
    flex-direction: column;
}

.stark-public .nav-item-text strong {
    font-size: inherit;
    font-weight: inherit;
}

.stark-public .nav-item-text small {
    display: none;
}

.stark-public .nav-book {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 22px;
    border: 1px solid var(--st-black);
    border-radius: 15px;
    background: var(--st-black);
    color: var(--st-white);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.15);
    font-size: 0.81rem;
    font-weight: 900;
    transition:
        transform 0.35s var(--st-ease),
        box-shadow 0.35s ease,
        background 0.25s ease;
}

.stark-public .nav-book svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s var(--st-ease);
}

.stark-public .nav-book:hover {
    transform: translateY(-3px);
    background: #292929;
    color: var(--st-white);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.2);
}

.stark-public .nav-book:hover svg {
    transform: translateX(-4px);
}

.stark-public .mobile-menu-btn {
    display: none;
}

.stark-public .mobile-menu-backdrop {
    position: fixed;
    z-index: 1900;
    inset: 0;
    visibility: hidden;
    border: 0;
    background: rgba(5, 5, 5, 0.56);
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.stark-public.menu-open .mobile-menu-backdrop {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* =========================
   Mobile bottom navigation
   ========================= */

.stark-public .mobile-bottom-nav {
    position: fixed;
    z-index: 1800;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 10px;
    display: none;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 69px;
    align-items: stretch;
    padding: 7px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transition:
        transform 0.38s var(--st-ease),
        opacity 0.3s ease;
}

.stark-public .mobile-bottom-nav.mbn-hidden,
.stark-public.menu-open .mobile-bottom-nav {
    opacity: 0;
    pointer-events: none;
    transform: translateY(135%);
}

.stark-public .mobile-bottom-nav > a {
    display: flex;
    min-width: 0;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    border-radius: 17px;
    color: #92928c;
    font-size: 0.59rem;
    font-weight: 800;
    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.2s ease;
}

.stark-public .mobile-bottom-nav > a:active {
    transform: scale(0.9);
}

.stark-public .mobile-bottom-nav > a.active:not(.mbn-cta) {
    background: #f0f0ec;
    color: var(--st-black);
}

.stark-public .mbn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.stark-public .mbn-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stark-public .mbn-label {
    line-height: 1.2;
}

.stark-public .mbn-cta {
    position: relative;
    margin-top: -25px;
}

.stark-public .mbn-cta-circle {
    display: flex;
    width: 51px;
    height: 51px;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(255, 255, 255, 0.96);
    border-radius: 18px;
    background: var(--st-black);
    color: var(--st-white);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.23);
    transform: rotate(45deg);
    transition:
        transform 0.3s var(--st-ease),
        background 0.3s ease;
}

.stark-public .mbn-cta-circle svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    transform: rotate(-45deg);
}

.stark-public .mbn-cta:active .mbn-cta-circle {
    transform: rotate(45deg) scale(0.9);
}

.stark-public .mbn-cta.active .mbn-cta-circle {
    background: var(--st-gold);
}

/* =========================
   Hero
   ========================= */

.stark-public .home-page {
    overflow: hidden;
    background: var(--st-background);
}

.stark-public .lux-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: min(850px, calc(100svh - 80px));
    align-items: center;
    overflow: hidden;
    padding: 82px 20px 65px;
    background:
        radial-gradient(
            circle at 50% 8%,
            rgba(255, 255, 255, 0.96),
            transparent 34%
        ),
        linear-gradient(145deg, #f8f8f5 0%, #ececea 100%);
}

.stark-public .lux-hero::before {
    content: "";
    position: absolute;
    z-index: -3;
    inset: 0;
    opacity: 0.45;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.025) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, #000, transparent 85%);
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
}

.stark-public .lux-hero::after {
    content: "STARK";
    position: absolute;
    z-index: -2;
    right: 50%;
    bottom: -15px;
    color: rgba(0, 0, 0, 0.025);
    direction: ltr;
    font-family: "YekanBakh", sans-serif;
    font-size: clamp(7rem, 22vw, 19rem);
    font-weight: 900;
    letter-spacing: -0.08em;
    line-height: 1;
    transform: translateX(50%);
    white-space: nowrap;
}

.stark-public .lux-hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.stark-public .lux-glow {
    position: absolute;
    z-index: -1;
    top: -300px;
    right: 15%;
    width: 680px;
    height: 680px;
    pointer-events: none;
    background: radial-gradient(
        circle,
        rgba(0, 0, 0, 0.09),
        transparent 66%
    );
    filter: blur(50px);
}

.stark-public .hero-orbit {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(0, 0, 0, 0.065);
    border-radius: 50%;
    pointer-events: none;
}

.stark-public .hero-orbit-one {
    top: 7%;
    left: -180px;
    width: 380px;
    height: 380px;
}

.stark-public .hero-orbit-two {
    top: -15%;
    left: -310px;
    width: 650px;
    height: 650px;
    opacity: 0.55;
}

.stark-public .lux-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
    animation: heroReveal 0.9s var(--st-ease) both;
}

@keyframes heroReveal {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stark-public .lux-logo-placeholder {
    position: relative;
    display: flex;
    width: 116px;
    height: 116px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 27px;
    overflow: visible;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: logoFloat 6s ease-in-out infinite;
}

.stark-public .lux-logo-placeholder::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -16px;
    border-radius: 45px;
    background: radial-gradient(
        circle,
        rgba(0, 0, 0, 0.1),
        transparent 68%
    );
    filter: blur(9px);
}

.stark-public .lux-logo-placeholder img {
    position: relative;
    z-index: 2;
    width: 76%;
    height: 76%;
    object-fit: contain;
}

.stark-public .hero-logo-fallback {
    position: absolute;
    z-index: 1;
    color: var(--st-ink);
    direction: ltr;
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: -0.08em;
}

@keyframes logoFloat {
    0%,
    100% {
        transform: translateY(0);
    }

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

.stark-public .lux-badge {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 21px;
    padding: 7px 17px;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--st-ink);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
    font-size: 0.75rem;
    font-weight: 900;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.stark-public .lux-badge-icon {
    color: var(--st-gold);
    font-size: 1rem;
}

.stark-public .lux-hero h1 {
    margin: 0;
    color: var(--st-ink);
    font-size: clamp(2.6rem, 7vw, 5.6rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.055em;
}

.stark-public .lux-hero h2 {
    margin: 18px 0 0;
    color: #555550;
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-weight: 500;
    line-height: 1.6;
}

.stark-public .hero-description {
    max-width: 590px;
    margin: 18px auto 34px;
    color: var(--st-muted);
    font-size: 0.96rem;
    line-height: 2.05;
}

.stark-public .lux-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.stark-public .lux-primary,
.stark-public .lux-secondary {
    display: inline-flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 0 32px;
    border-radius: 18px;
    font-size: 0.9rem;
    font-weight: 900;
    transition:
        transform 0.35s var(--st-ease),
        box-shadow 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease;
}

.stark-public .lux-primary {
    border: 1px solid var(--st-black);
    background: var(--st-black);
    color: var(--st-white);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

.stark-public .lux-primary svg,
.stark-public .lux-secondary svg,
.stark-public .service-link svg,
.stark-public .cta-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s var(--st-ease);
}

.stark-public .lux-primary:hover {
    transform: translateY(-4px);
    background: #292929;
    color: var(--st-white);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.22);
}

.stark-public .lux-primary:hover svg {
    transform: translateX(-5px);
}

.stark-public .lux-secondary {
    border: 1px solid #deded9;
    background: rgba(255, 255, 255, 0.72);
    color: var(--st-ink);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.stark-public .lux-secondary:hover {
    transform: translateY(-4px);
    border-color: var(--st-black);
    background: var(--st-white);
}

.stark-public .lux-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 590px;
    margin: 58px auto 0;
    gap: 12px;
}

.stark-public .lux-info > div {
    min-width: 0;
    padding: 19px 12px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition:
        transform 0.35s var(--st-ease),
        box-shadow 0.35s ease;
}

.stark-public .lux-info > div:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.1);
}

.stark-public .lux-info strong {
    display: block;
    color: var(--st-ink);
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    font-weight: 900;
    line-height: 1.25;
}

.stark-public .lux-info span {
    display: block;
    margin-top: 5px;
    color: var(--st-muted);
    font-size: 0.72rem;
    line-height: 1.5;
}

.stark-public .hero-scroll-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 34px;
    color: var(--st-muted);
    font-size: 0.68rem;
    font-weight: 800;
    transition: color 0.25s ease;
}

.stark-public .hero-scroll-button:hover {
    color: var(--st-black);
}

.stark-public .hero-scroll-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: scrollArrow 1.8s ease-in-out infinite;
}

@keyframes scrollArrow {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}

/* =========================
   Generic grids
   ========================= */

.stark-public .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.stark-public .services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

/* =========================
   Cards
   ========================= */

.stark-public .card {
    min-width: 0;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
    background: var(--st-white);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.035);
    transition:
        transform 0.42s var(--st-ease),
        box-shadow 0.42s ease,
        border-color 0.3s ease;
}

.stark-public .card:hover {
    transform: translateY(-7px);
    border-color: #d6d6d0;
    box-shadow: var(--st-shadow-md);
}

/* =========================
   Homepage services
   ========================= */

.stark-public .home-services {
    background: var(--st-white);
}

.stark-public .home-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.stark-public .home-service-card {
    position: relative;
    isolation: isolate;
    display: flex;
    min-width: 0;
    min-height: 415px;
    flex-direction: column;
    overflow: hidden;
    padding: 28px;
    border: 1px solid var(--st-line);
    border-radius: 29px;
    background: var(--st-white);
    transition:
        transform 0.45s var(--st-ease),
        box-shadow 0.45s ease,
        border-color 0.35s ease;
}

.stark-public .home-service-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -90px;
    left: -90px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(183, 147, 90, 0.2),
        transparent 68%
    );
    opacity: 0;
    transition: opacity 0.45s ease;
}

.stark-public .home-service-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    background: var(--st-gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.45s var(--st-ease);
}

.stark-public .home-service-card:hover {
    transform: translateY(-10px);
    border-color: #d8d8d2;
    box-shadow: var(--st-shadow-md);
}

.stark-public .home-service-card:hover::before {
    opacity: 1;
}

.stark-public .home-service-card:hover::after {
    transform: scaleX(1);
}

.stark-public .service-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.stark-public .cat-tag {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    background: #f1f1ed;
    color: #555550;
    font-size: 0.68rem;
    font-weight: 900;
}

.stark-public .service-number {
    color: #c3c3bd;
    direction: ltr;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.stark-public .home-service-card .service-icon {
    display: flex;
    width: 62px;
    height: 62px;
    align-items: center;
    justify-content: center;
    margin: 27px 0 22px;
    border-radius: 20px;
    background: var(--st-black);
    color: var(--st-gold);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.14);
}

.stark-public .home-service-card .service-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stark-public .home-service-card h3 {
    margin: 0 0 9px;
    color: var(--st-ink);
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.6;
}

.stark-public .home-service-card > p {
    display: -webkit-box;
    min-height: 58px;
    overflow: hidden;
    margin: 0;
    color: var(--st-muted);
    font-size: 0.84rem;
    line-height: 2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.stark-public .service-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding: 18px 0 16px;
    border-top: 1px dashed var(--st-line);
}

.stark-public .service-meta > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.stark-public .service-meta small {
    color: #999993;
    font-size: 0.67rem;
}

.stark-public .service-meta strong {
    color: var(--st-ink);
    font-size: 0.9rem;
    font-weight: 900;
}

.stark-public .service-meta strong span {
    color: #888883;
    font-size: 0.67rem;
    font-weight: 500;
}

.stark-public .service-duration {
    text-align: left;
}

.stark-public .service-link {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--st-ink);
    font-size: 0.82rem;
    font-weight: 900;
}

.stark-public .service-link:hover svg {
    transform: translateX(-5px);
}

.stark-public .services-more {
    margin-top: 42px;
    text-align: center;
}

.stark-public .mobile-scroll-hint {
    display: none;
}

/* =========================
   General service cards
   ========================= */

.stark-public .service-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 9px;
    overflow: hidden;
    padding: 25px;
}

.stark-public .service-card h3 {
    margin: 5px 0 0;
    color: var(--st-ink);
    font-size: 1.08rem;
    font-weight: 900;
}

.stark-public .service-card p {
    margin: 0;
    color: var(--st-muted);
    font-size: 0.86rem;
    line-height: 2;
}

.stark-public .service-card .price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px dashed var(--st-line);
}

.stark-public .service-card .price {
    color: var(--st-ink);
    font-size: 1rem;
    font-weight: 900;
}

.stark-public .service-card .duration {
    color: var(--st-muted);
    font-size: 0.75rem;
}

/* =========================
   Features
   ========================= */

.stark-public .home-features {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(183, 147, 90, 0.14),
            transparent 35%
        ),
        var(--st-black);
}

.stark-public .home-features::before {
    content: "";
    position: absolute;
    top: -180px;
    left: -180px;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    box-shadow:
        0 0 0 45px rgba(255, 255, 255, 0.02),
        0 0 0 90px rgba(255, 255, 255, 0.015);
}

.stark-public .features-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1050px;
    margin: 0 auto;
    gap: 18px;
}

.stark-public .feature-box {
    position: relative;
    min-height: 250px;
    overflow: hidden;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.045);
    transition:
        transform 0.4s var(--st-ease),
        background 0.4s ease,
        border-color 0.4s ease;
}

.stark-public .feature-box:hover {
    transform: translateY(-8px);
    border-color: rgba(183, 147, 90, 0.55);
    background: rgba(255, 255, 255, 0.08);
}

.stark-public .feature-icon {
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    border: 1px solid rgba(183, 147, 90, 0.45);
    border-radius: 18px;
    background: rgba(183, 147, 90, 0.12);
    color: var(--st-gold);
}

.stark-public .feature-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stark-public .feature-index {
    position: absolute;
    top: 28px;
    left: 28px;
    color: rgba(255, 255, 255, 0.25);
    direction: ltr;
    font-size: 0.72rem;
    font-weight: 900;
}

.stark-public .feature-box h3 {
    margin: 0 0 9px;
    color: var(--st-white);
    font-size: 1.08rem;
    font-weight: 900;
}

.stark-public .feature-box p {
    margin: 0;
    color: #999993;
    font-size: 0.84rem;
    line-height: 2;
}

/* =========================
   Booking steps homepage
   ========================= */

.stark-public .home-booking-steps {
    background: var(--st-background);
}

.stark-public .home-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1050px;
    margin: 0 auto;
    gap: 18px;
}

.stark-public .home-step-card {
    position: relative;
    min-height: 245px;
    overflow: hidden;
    padding: 28px;
    border: 1px solid var(--st-line);
    border-radius: 27px;
    background: var(--st-white);
    transition:
        transform 0.4s var(--st-ease),
        box-shadow 0.4s ease;
}

.stark-public .home-step-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--st-shadow-md);
}

.stark-public .home-step-number {
    position: absolute;
    top: 26px;
    left: 26px;
    color: #c3c3bd;
    font-size: 0.72rem;
    font-weight: 900;
}

.stark-public .home-step-icon {
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border-radius: 18px;
    background: var(--st-black);
    color: var(--st-gold);
    font-size: 1.3rem;
    font-weight: 900;
}

.stark-public .home-step-card h3 {
    margin: 0 0 10px;
    color: var(--st-ink);
    font-size: 1.05rem;
    font-weight: 900;
}

.stark-public .home-step-card p {
    margin: 0;
    color: var(--st-muted);
    font-size: 0.84rem;
    line-height: 2;
}

/* =========================
   CTA
   ========================= */

.stark-public .cta-section {
    padding-top: 30px;
    background: var(--st-background);
}

.stark-public .cta-panel {
    position: relative;
    isolation: isolate;
    max-width: 1050px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 34px;
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(183, 147, 90, 0.25),
            transparent 30%
        ),
        var(--st-ink);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.15);
}

.stark-public .cta-panel::before,
.stark-public .cta-panel::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.stark-public .cta-panel::before {
    top: -230px;
    right: -100px;
    width: 360px;
    height: 360px;
}

.stark-public .cta-panel::after {
    bottom: -170px;
    left: -70px;
    width: 240px;
    height: 240px;
}

.stark-public .cta-content {
    position: relative;
    z-index: 2;
    padding: 70px 25px;
    text-align: center;
}

.stark-public .cta-content h2 {
    margin: 0 0 11px;
    color: var(--st-white);
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.5;
}

.stark-public .cta-content p {
    margin: 0 0 27px;
    color: #aaaaa4;
    font-size: 0.9rem;
}

.stark-public .cta-button {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 0 27px;
    border-radius: 17px;
    background: var(--st-white);
    color: var(--st-ink);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    font-size: 0.86rem;
    font-weight: 900;
    transition:
        transform 0.35s var(--st-ease),
        background 0.3s ease,
        color 0.3s ease;
}

.stark-public .cta-button:hover {
    transform: translateY(-4px);
    background: var(--st-gold);
    color: var(--st-white);
}

.stark-public .cta-button:hover svg {
    transform: translateX(-5px);
}

/* =========================
   Generic page hero / About
   ========================= */

.stark-public .page-hero,
.stark-public .about-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(58px, 8vw, 95px) 0;
    border-bottom: 1px solid var(--st-line);
    background:
        radial-gradient(
            circle at 75% 0%,
            rgba(183, 147, 90, 0.12),
            transparent 32%
        ),
        linear-gradient(145deg, #f9f9f6, #eeeeeb);
}

.stark-public .page-hero::before,
.stark-public .about-hero::before {
    content: "";
    position: absolute;
    top: -170px;
    left: -150px;
    width: 380px;
    height: 380px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 50%;
}

.stark-public .page-hero h1,
.stark-public .about-hero h1 {
    margin: 0 0 10px;
    color: var(--st-ink);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    line-height: 1.35;
}

.stark-public .page-hero p,
.stark-public .about-hero p {
    max-width: 700px;
    margin: 0;
    color: var(--st-muted);
    font-size: 0.95rem;
    line-height: 2;
}

.stark-public .established-badge {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin-bottom: 16px;
    padding: 6px 17px;
    border: 1px solid var(--st-ink);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 900;
}

.stark-public .about-content {
    max-width: 780px;
    color: var(--st-dark-gray);
    font-size: 0.95rem;
    line-height: 2.2;
}

/* =========================
   Video cards
   ========================= */

.stark-public .video-card {
    overflow: hidden;
    padding: 0;
}

.stark-public .video-embed {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 56.25%;
    background: var(--st-black);
}

.stark-public .video-embed iframe,
.stark-public .video-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.stark-public .video-card .video-info {
    padding: 20px;
}

.stark-public .video-card h3 {
    margin: 0 0 7px;
    color: var(--st-ink);
    font-size: 1rem;
    font-weight: 900;
}

.stark-public .video-card p {
    margin: 0;
    color: var(--st-muted);
    font-size: 0.82rem;
    line-height: 1.9;
}

/* =========================
   Filters
   ========================= */

.stark-public .filter-tabs {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    margin-bottom: 24px;
    padding-bottom: 9px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.stark-public .filter-tabs::-webkit-scrollbar {
    display: none;
}

.stark-public .filter-tab {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--st-line);
    border-radius: 999px;
    background: var(--st-white);
    color: var(--st-dark-gray);
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
    scroll-snap-align: start;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.stark-public .filter-tab:hover,
.stark-public .filter-tab.active {
    border-color: var(--st-black);
    background: var(--st-black);
    color: var(--st-white);
    transform: translateY(-2px);
}

/* =========================
   Booking
   ========================= */

.stark-public .booking-wrap {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

.stark-public .steps-indicator {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-bottom: 36px;
}

.stark-public .steps-indicator::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 18px;
    right: 6%;
    left: 6%;
    height: 2px;
    background: var(--st-line);
}

.stark-public .step-item {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    align-items: center;
    flex: 1;
    flex-direction: column;
    gap: 7px;
    color: var(--st-muted);
    text-align: center;
    font-size: 0.7rem;
}

.stark-public .step-item .dot {
    display: flex;
    width: 37px;
    height: 37px;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--st-line);
    border-radius: 50%;
    background: var(--st-white);
    color: var(--st-muted);
    font-weight: 900;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s var(--st-ease);
}

.stark-public .step-item.active,
.stark-public .step-item.done {
    color: var(--st-black);
    font-weight: 800;
}

.stark-public .step-item.active .dot,
.stark-public .step-item.done .dot {
    border-color: var(--st-black);
    background: var(--st-black);
    color: var(--st-white);
}

.stark-public .step-item.active .dot {
    transform: scale(1.08);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

.stark-public .booking-panel {
    width: 100%;
    padding: clamp(21px, 4vw, 35px);
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
    background: var(--st-white);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.07);
}

.stark-public .step-heading {
    margin: 0 0 22px;
    color: var(--st-ink);
    font-size: clamp(1.25rem, 3vw, 1.7rem);
    font-weight: 900;
}

/* =========================
   Service select cards
   ========================= */

.stark-public .service-select-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.stark-public .service-select-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 18px;
    border: 1px solid var(--st-line);
    border-radius: 19px;
    background: var(--st-white);
    cursor: pointer;
    transition:
        border-color 0.25s ease,
        transform 0.3s var(--st-ease),
        box-shadow 0.3s ease,
        background 0.25s ease;
}

.stark-public .service-select-card:hover {
    transform: translateY(-4px);
    border-color: #cfcfc9;
    box-shadow: var(--st-shadow-sm);
}

.stark-public .service-select-card.selected {
    border-color: var(--st-black);
    background: #f8f8f5;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.stark-public .service-select-card .cat-tag {
    margin-bottom: 9px;
}

.stark-public .service-select-card h4 {
    margin: 0 0 5px;
    color: var(--st-ink);
    font-size: 0.96rem;
    font-weight: 900;
}

.stark-public .service-select-card p {
    margin: 0;
    color: var(--st-muted);
    font-size: 0.8rem;
    line-height: 1.9;
}

.stark-public .service-select-card .price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px dashed var(--st-line);
    font-size: 0.8rem;
}

.stark-public .service-select-card .select-check {
    position: absolute;
    z-index: 3;
    top: 12px;
    left: 12px;
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--st-black);
    color: var(--st-white);
    font-size: 0.7rem;
    opacity: 0;
    transform: scale(0.5);
    transition:
        opacity 0.2s ease,
        transform 0.25s var(--st-ease);
}

.stark-public .service-select-card.selected .select-check {
    opacity: 1;
    transform: scale(1);
}

.stark-public .service-thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 12px;
    border-radius: 13px;
    background: #eeeeea;
}

.stark-public .service-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--st-ease);
}

.stark-public .service-select-card:hover .service-thumb img {
    transform: scale(1.04);
}

/* =========================
   Calendar
   ========================= */

.stark-public .cal-card {
    padding: clamp(15px, 3vw, 23px);
    border: 1px solid var(--st-line);
    border-radius: 22px;
    background: var(--st-white);
}

.stark-public .cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 17px;
}

.stark-public .cal-header h4 {
    margin: 0;
    color: var(--st-ink);
    font-size: 1rem;
    font-weight: 900;
}

.stark-public .cal-nav-btn {
    display: flex;
    width: 37px;
    height: 37px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--st-line);
    border-radius: 12px;
    background: var(--st-white);
    color: var(--st-ink);
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.2s ease;
}

.stark-public .cal-nav-btn:hover {
    border-color: var(--st-black);
    background: var(--st-black);
    color: var(--st-white);
}

.stark-public .cal-nav-btn:active {
    transform: scale(0.9);
}

.stark-public .cal-nav-btn:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}

.stark-public .cal-weekdays,
.stark-public .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.stark-public .cal-weekdays span {
    padding-bottom: 7px;
    color: var(--st-muted);
    text-align: center;
    font-size: 0.68rem;
    font-weight: 900;
}

.stark-public .cal-cell {
    position: relative;
    display: flex;
    aspect-ratio: 1;
    min-width: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 11px;
    background: var(--st-background);
    color: var(--st-dark-gray);
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.stark-public .cal-cell:not(.cal-past):not(.cal-outside):hover {
    border-color: var(--st-black);
    transform: translateY(-2px);
}

.stark-public .cal-cell.cal-outside {
    visibility: hidden;
    pointer-events: none;
}

.stark-public .cal-cell.cal-past {
    cursor: not-allowed;
    opacity: 0.3;
    pointer-events: none;
}

.stark-public .cal-cell.cal-today {
    border-color: var(--st-dark-gray);
}

.stark-public .cal-cell.cal-holiday {
    background: #fbeaea;
    color: var(--st-danger);
    text-decoration: line-through;
}

.stark-public .cal-cell.cal-holiday.cal-clickable {
    cursor: pointer;
    pointer-events: auto;
}

.stark-public .cal-cell.cal-selected {
    border-color: var(--st-black);
    background: var(--st-black);
    color: var(--st-white);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.stark-public .calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 15px;
    color: var(--st-muted);
    font-size: 0.72rem;
}

.stark-public .legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 4px;
    border-radius: 3px;
    vertical-align: middle;
}

.stark-public .legend-today {
    border: 2px solid var(--st-dark-gray);
}

.stark-public .legend-holiday {
    border: 1px solid var(--st-danger);
    background: #fbeaea;
}

.stark-public .legend-normal {
    border: 1px solid var(--st-line);
    background: var(--st-background);
}

/* =========================
   Time slots
   ========================= */

.stark-public .slots-heading {
    margin: 18px 0 10px;
    color: var(--st-ink);
    font-size: 0.86rem;
    font-weight: 900;
}

.stark-public .slots-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-top: 14px;
}

.stark-public .slot-btn {
    min-height: 44px;
    padding: 7px 4px;
    border: 1px solid var(--st-line);
    border-radius: 11px;
    background: var(--st-white);
    color: var(--st-ink);
    font-size: 0.8rem;
    font-weight: 800;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.stark-public .slot-btn:hover:not(:disabled) {
    border-color: var(--st-black);
    transform: translateY(-2px);
}

.stark-public .slot-btn.selected {
    border-color: var(--st-black);
    background: var(--st-black);
    color: var(--st-white);
}

.stark-public .slot-btn:disabled {
    cursor: not-allowed;
    opacity: 0.3;
    text-decoration: line-through;
}

/* =========================
   Forms
   ========================= */

.stark-public .form-group {
    margin-bottom: 18px;
}

.stark-public .form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--st-ink);
    font-size: 0.84rem;
    font-weight: 900;
}

.stark-public .form-control {
    width: 100%;
    min-height: 52px;
    padding: 13px 15px;
    border: 1px solid #dfdfda;
    border-radius: 13px;
    background: var(--st-white);
    color: var(--st-ink);
    font-size: 0.9rem;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.stark-public textarea.form-control {
    min-height: 125px;
    resize: vertical;
}

.stark-public .form-control::placeholder {
    color: #aaaaa4;
}

.stark-public .form-control:focus {
    border-color: var(--st-black);
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
}

.stark-public .form-control:disabled {
    cursor: not-allowed;
    background: #f1f1ee;
    opacity: 0.7;
}

.stark-public input[type="tel"],
.stark-public input[type="email"],
.stark-public input[type="number"] {
    direction: ltr;
    text-align: right;
}

.stark-public .floating-group {
    position: relative;
    margin-bottom: 20px;
}

.stark-public .floating-group .form-control {
    min-height: 58px;
    padding: 20px 15px 7px;
}

.stark-public .floating-group label {
    position: absolute;
    top: 16px;
    right: 15px;
    padding: 0 4px;
    background: var(--st-white);
    color: var(--st-muted);
    font-size: 0.88rem;
    pointer-events: none;
    transition:
        top 0.18s ease,
        color 0.18s ease,
        font-size 0.18s ease;
}

.stark-public .floating-group .form-control:focus + label,
.stark-public .floating-group .form-control:not(:placeholder-shown) + label {
    top: -8px;
    color: var(--st-black);
    font-size: 0.68rem;
    font-weight: 900;
}

/* =========================
   Alerts
   ========================= */

.stark-public .alert {
    margin-bottom: 17px;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 13px;
    font-size: 0.83rem;
    line-height: 1.9;
}

.stark-public .alert-error {
    border-color: #f1c4c0;
    background: #fff0ee;
    color: #a92f24;
}

.stark-public .alert-success {
    border-color: #bde1c9;
    background: #edf9f1;
    color: #176c3b;
}

.stark-public .alert-warning {
    border-color: #f0d7ab;
    background: #fff8e8;
    color: #94601a;
}

/* =========================
   Payment
   ========================= */

.stark-public .pay-wrap {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.stark-public .pay-card {
    padding: clamp(24px, 5vw, 34px);
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
    background: var(--st-white);
    text-align: center;
    box-shadow: var(--st-shadow-lg);
}

.stark-public .pay-lock {
    display: flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    border-radius: 17px;
    background: var(--st-black);
    color: var(--st-gold);
    font-size: 1.4rem;
}

.stark-public .pay-title {
    margin: 0 0 7px;
    color: var(--st-ink);
    font-size: 1.3rem;
    font-weight: 900;
}

.stark-public .pay-sub {
    margin: 0 0 20px;
    color: var(--st-muted);
    font-size: 0.8rem;
}

.stark-public .pay-amount {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 18px;
    padding: 19px;
    border-radius: 18px;
    background: var(--st-black);
    color: var(--st-white);
}

.stark-public .pay-amount-label {
    color: #aaaaa4;
    font-size: 0.72rem;
}

.stark-public .pay-amount-value {
    font-size: 1.55rem;
    font-weight: 900;
}

.stark-public .pay-amount-value small {
    font-size: 0.8rem;
    font-weight: 400;
}

.stark-public .pay-card-visual {
    position: relative;
    overflow: hidden;
    margin: 18px 0;
    padding: 21px;
    border-radius: 20px;
    background: linear-gradient(135deg, #242424, #080808);
    color: var(--st-white);
    text-align: right;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.2);
}

.stark-public .pay-card-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 80% 0%,
        rgba(255, 255, 255, 0.1),
        transparent 60%
    );
    pointer-events: none;
}

.stark-public .pay-chip {
    width: 36px;
    height: 25px;
    margin-bottom: 18px;
    border-radius: 6px;
    background: var(--st-gold);
}

.stark-public .pay-number {
    margin-bottom: 16px;
    direction: ltr;
    text-align: left;
    font-size: 1rem;
    letter-spacing: 3px;
}

.stark-public .pay-card-footer {
    display: flex;
    justify-content: space-between;
    color: #ccccC6;
    font-size: 0.65rem;
}

.stark-public .pay-secure-note {
    margin: 15px 0 0;
    color: var(--st-muted);
    font-size: 0.7rem;
}

/* =========================
   Summary and success
   ========================= */

.stark-public .summary-box {
    margin-bottom: 20px;
    padding: 18px;
    border: 1px solid var(--st-line);
    border-radius: 17px;
    background: var(--st-background-soft);
}

.stark-public .summary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--st-line);
    font-size: 0.84rem;
}

.stark-public .summary-row:last-child {
    border-bottom: 0;
}

.stark-public .summary-row span:first-child {
    color: var(--st-muted);
}

.stark-public .summary-row span:last-child {
    color: var(--st-ink);
    text-align: left;
    font-weight: 900;
}

.stark-public .success-box {
    padding: 20px 0;
    text-align: center;
}

.stark-public .success-icon {
    display: flex;
    width: 84px;
    height: 84px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border-radius: 27px;
    background: var(--st-black);
    color: var(--st-white);
    box-shadow: 0 17px 38px rgba(0, 0, 0, 0.17);
    font-size: 1.8rem;
}

.stark-public .tracking-code {
    display: inline-block;
    margin: 12px 0 20px;
    padding: 11px 15px;
    border: 2px dashed var(--st-black);
    border-radius: 12px;
    background: var(--st-background);
    direction: ltr;
    font-family: monospace;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 2px;
}

/* =========================
   Empty states
   ========================= */

.stark-public .empty-state,
.stark-public .empty-services {
    max-width: 580px;
    margin: 0 auto;
    padding: 38px 24px;
    border: 1px dashed #d2d2cc;
    border-radius: 24px;
    background: #fafaf8;
    text-align: center;
}

.stark-public .empty-state h3,
.stark-public .empty-services h3 {
    margin: 0 0 7px;
    color: var(--st-ink);
    font-size: 1rem;
}

.stark-public .empty-state p,
.stark-public .empty-services p {
    margin: 0;
    color: var(--st-muted);
    font-size: 0.82rem;
}

/* =========================
   Public tables
   ========================= */

.stark-public .table-responsive {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--st-line);
    border-radius: 18px;
    background: var(--st-white);
}

.stark-public .data-table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
}

.stark-public .data-table th,
.stark-public .data-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--st-line);
    text-align: right;
    font-size: 0.8rem;
}

.stark-public .data-table th {
    background: #f4f4f1;
    color: var(--st-ink);
    font-weight: 900;
}

.stark-public .data-table td {
    color: var(--st-dark-gray);
}

/* =========================
   Badges
   ========================= */

.stark-public .badge {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.67rem;
    font-weight: 900;
}

.stark-public .badge-success {
    background: #e8f6ed;
    color: var(--st-success);
}

.stark-public .badge-danger {
    background: #fdecea;
    color: var(--st-danger);
}

.stark-public .badge-warning {
    background: #fff5df;
    color: var(--st-warning);
}

/* =========================
   Footer
   ========================= */

.stark-public .site-footer {
    position: relative;
    margin-top: 0;
    padding: 65px 0 25px;
    background: #090909;
    color: #a1a19b;
    font-size: 0.8rem;
}

.stark-public .footer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 38px;
    margin-bottom: 38px;
}

.stark-public .footer-grid h4 {
    margin: 0 0 15px;
    color: var(--st-white);
    font-size: 0.86rem;
    font-weight: 900;
}

.stark-public .footer-grid p {
    margin: 0;
    color: #90908a;
    font-size: 0.78rem;
    line-height: 2;
}

.stark-public .footer-grid a {
    display: block;
    width: fit-content;
    margin-bottom: 8px;
    color: #969690;
    font-size: 0.76rem;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.stark-public .footer-grid a:hover {
    color: var(--st-white);
    transform: translateX(-3px);
}

.stark-public .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #6f6f69;
    text-align: center;
    font-size: 0.68rem;
}

/* =========================
   Utilities
   ========================= */

.stark-public .muted-note {
    margin-top: 15px;
    color: var(--st-muted);
    font-size: 0.8rem;
}

.stark-public .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: var(--st-white);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================
   Reveal animations
   ========================= */

.stark-public.reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(27px);
    transition:
        opacity 0.75s ease,
        transform 0.75s var(--st-ease);
}

.stark-public.reveal-ready [data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   Tablet
   ========================= */

@media (min-width: 640px) {
    .stark-public .grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .stark-public .grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .stark-public .grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1050px) {
    .stark-public .header-inner {
        gap: 20px;
    }

    .stark-public .app-nav {
        gap: 18px;
    }

    .stark-public .app-logo small {
        display: none;
    }
}

/* =========================
   Mobile navigation
   ========================= */

@media (max-width: 899px) {
    body.stark-public.has-bottom-nav {
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }

    .stark-public .header-inner {
        min-height: 72px;
        justify-content: center;
        padding-right: 55px;
        padding-left: 55px;
    }

    .stark-public .app-logo {
        min-width: 0;
        justify-content: center;
    }

    .stark-public .app-logo-visual {
        width: 43px;
        height: 43px;
        border-radius: 14px;
    }

    .stark-public .app-logo-content {
        min-width: 0;
    }

    .stark-public .app-logo strong {
        max-width: 180px;
        font-size: 0.8rem;
    }

    .stark-public .app-logo small {
        display: block;
        max-width: 170px;
        font-size: 0.57rem;
    }

    .stark-public .mobile-menu-btn {
        position: absolute;
        top: 50%;
        right: 0;
        display: flex;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        padding: 0;
        border: 1px solid var(--st-line);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.75);
        transform: translateY(-50%);
    }

    .stark-public .mobile-menu-btn span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 999px;
        background: var(--st-black);
        transition:
            transform 0.35s var(--st-ease),
            opacity 0.25s ease,
            width 0.3s ease;
    }

    .stark-public .mobile-menu-btn.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .stark-public .mobile-menu-btn.active span:nth-child(2) {
        width: 0;
        opacity: 0;
    }

    .stark-public .mobile-menu-btn.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .stark-public .app-nav {
        position: absolute;
        top: calc(100% + 10px);
        right: 14px;
        left: 14px;
        display: flex;
        max-height: calc(100svh - 105px);
        overflow-y: auto;
        align-items: stretch;
        flex-direction: column;
        gap: 7px;
        padding: 17px;
        border: 1px solid rgba(255, 255, 255, 0.75);
        border-radius: 27px;
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 30px 85px rgba(0, 0, 0, 0.2);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-18px) scale(0.96);
        transform-origin: top center;
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        transition:
            opacity 0.3s ease,
            visibility 0.35s ease,
            transform 0.42s var(--st-ease);
    }

    .stark-public .app-nav.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .stark-public .app-nav > a:not(.nav-book) {
        display: flex;
        min-height: 64px;
        align-items: center;
        padding: 9px 15px;
        border: 1px solid transparent;
        border-radius: 18px;
    }

    .stark-public .app-nav > a:not(.nav-book)::after {
        display: none;
    }

    .stark-public .app-nav > a:not(.nav-book):hover,
    .stark-public .app-nav > a.active:not(.nav-book) {
        border-color: var(--st-line);
        background: linear-gradient(135deg, #f0f0ec, #ffffff);
        transform: none;
    }

    .stark-public .nav-item-text {
        gap: 2px;
    }

    .stark-public .nav-item-text strong {
        color: var(--st-ink);
        font-size: 0.9rem;
        font-weight: 900;
    }

    .stark-public .nav-item-text small {
        display: block;
        color: var(--st-muted);
        font-size: 0.63rem;
        font-weight: 400;
    }

    .stark-public .nav-book {
        width: 100%;
        min-height: 55px;
        margin-top: 5px;
        border-radius: 17px;
    }

    .stark-public .mobile-bottom-nav {
        display: grid;
    }

    .stark-public .home-services-grid,
    .stark-public .features-grid,
    .stark-public .home-steps-grid,
    .stark-public .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stark-public .home-service-card:last-child,
    .stark-public .feature-box:last-child,
    .stark-public .home-step-card:last-child {
        grid-column: span 2;
    }
}

/* =========================
   Small mobile
   ========================= */

@media (max-width: 680px) {
    .stark-public .container {
        padding-right: 17px;
        padding-left: 17px;
    }

    .stark-public .announcement-bar {
        min-height: 35px;
        font-size: 0.67rem;
    }

    .stark-public .section {
        padding: 72px 0;
    }

    .stark-public .section-heading {
        margin-bottom: 34px;
    }

    .stark-public .section-title {
        font-size: 1.72rem;
    }

    .stark-public .section-subtitle {
        font-size: 0.83rem;
    }

    .stark-public .lux-hero {
        min-height: auto;
        padding: 58px 18px 52px;
    }

    .stark-public .lux-logo-placeholder {
        width: 92px;
        height: 92px;
        margin-bottom: 22px;
        border-radius: 28px;
    }

    .stark-public .lux-badge {
        min-height: 33px;
        margin-bottom: 18px;
        padding: 6px 14px;
        font-size: 0.67rem;
    }

    .stark-public .lux-hero h1 {
        font-size: clamp(2.25rem, 12vw, 3.35rem);
        letter-spacing: -0.06em;
    }

    .stark-public .lux-hero h2 {
        margin-top: 12px;
        font-size: 1.08rem;
    }

    .stark-public .hero-description {
        margin: 15px auto 27px;
        font-size: 0.84rem;
        line-height: 2;
    }

    .stark-public .lux-actions {
        width: 100%;
        flex-direction: column;
        gap: 9px;
    }

    .stark-public .lux-primary,
    .stark-public .lux-secondary {
        width: 100%;
        min-height: 54px;
        border-radius: 17px;
    }

    .stark-public .lux-info {
        margin-top: 38px;
        gap: 7px;
    }

    .stark-public .lux-info > div {
        padding: 15px 5px;
        border-radius: 17px;
    }

    .stark-public .lux-info strong {
        font-size: 1.14rem;
    }

    .stark-public .lux-info span {
        font-size: 0.61rem;
    }

    .stark-public .hero-scroll-button {
        margin-top: 27px;
    }

    .stark-public .home-services .section-heading {
        padding-right: 18px;
        padding-left: 18px;
    }

    .stark-public .mobile-scroll-hint {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: -16px 18px 17px;
        color: var(--st-muted);
        font-size: 0.62rem;
        font-weight: 700;
    }

    .stark-public .mobile-scroll-hint::before {
        content: "←";
        color: var(--st-gold);
        font-size: 0.95rem;
    }

    .stark-public .home-services-grid {
        display: flex;
        max-width: none;
        overflow-x: auto;
        gap: 13px;
        margin-right: -17px;
        margin-left: -17px;
        padding: 5px 18px 28px;
        scroll-padding-right: 18px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .stark-public .home-services-grid::-webkit-scrollbar {
        display: none;
    }

    .stark-public .home-service-card,
    .stark-public .home-service-card:last-child {
        grid-column: auto;
        flex: 0 0 min(86vw, 355px);
        min-height: 398px;
        padding: 23px;
        border-radius: 25px;
        scroll-snap-align: start;
    }

    .stark-public .features-grid,
    .stark-public .home-steps-grid,
    .stark-public .services-grid {
        grid-template-columns: 1fr;
    }

    .stark-public .feature-box:last-child,
    .stark-public .home-step-card:last-child {
        grid-column: auto;
    }

    .stark-public .feature-box,
    .stark-public .home-step-card {
        min-height: 210px;
        padding: 24px;
    }

    .stark-public .cta-section {
        padding-top: 10px;
    }

    .stark-public .cta-panel {
        border-radius: 28px;
    }

    .stark-public .cta-content {
        padding: 52px 20px;
    }

    .stark-public .cta-content h2 {
        font-size: 1.7rem;
    }

    .stark-public .service-select-grid {
        grid-template-columns: 1fr;
    }

    .stark-public .booking-panel {
        padding: 19px;
        border-radius: 21px;
    }

    .stark-public .steps-indicator {
        margin-bottom: 29px;
    }

    .stark-public .step-item {
        font-size: 0.57rem;
    }

    .stark-public .step-item .dot {
        width: 32px;
        height: 32px;
    }

    .stark-public .steps-indicator::before {
        top: 15px;
    }

    .stark-public .cal-weekdays,
    .stark-public .cal-grid {
        gap: 3px;
    }

    .stark-public .cal-cell {
        border-radius: 8px;
        font-size: 0.72rem;
    }

    .stark-public .slots-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    .stark-public .form-control,
    .stark-public .floating-group .form-control {
        font-size: 16px;
    }

    .stark-public .summary-row {
        font-size: 0.77rem;
    }

    .stark-public .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* =========================
   Very small mobile
   ========================= */

@media (max-width: 390px) {
    .stark-public .app-logo strong {
        max-width: 145px;
        font-size: 0.74rem;
    }

    .stark-public .app-logo small {
        max-width: 140px;
        font-size: 0.53rem;
    }

    .stark-public .lux-info strong {
        font-size: 1rem;
    }

    .stark-public .lux-info span {
        font-size: 0.55rem;
    }

    .stark-public .mobile-bottom-nav {
        right: 6px;
        left: 6px;
        padding: 6px 4px;
        border-radius: 21px;
    }

    .stark-public .mobile-bottom-nav > a {
        font-size: 0.53rem;
    }

    .stark-public .mbn-icon svg {
        width: 19px;
        height: 19px;
    }
}

/* =========================
   Desktop
   ========================= */

@media (min-width: 900px) {
    body.stark-public.has-bottom-nav {
        padding-bottom: 0;
    }

    .stark-public .mobile-bottom-nav {
        display: none !important;
    }

    .stark-public .mobile-menu-backdrop {
        display: none !important;
    }
}

/* =========================
   Touch devices
   ========================= */

@media (hover: none) {
    .stark-public .home-service-card:hover,
    .stark-public .feature-box:hover,
    .stark-public .home-step-card:hover,
    .stark-public .card:hover,
    .stark-public .lux-info > div:hover {
        transform: none;
    }
}

/* =========================
   Reduced motion
   ========================= */

@media (prefers-reduced-motion: reduce) {
    .stark-public *,
    .stark-public *::before,
    .stark-public *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .stark-public.reveal-ready [data-reveal] {
        opacity: 1;
        transform: none;
    }
}
/* =========================================================
   HOTFIX 2026 - FIX STICKY TIME SLOTS / ACTION BUTTONS
   این رو بذار تهِ style.css
   ========================================================= */

body.stark-public .cal-card,
body.stark-public .booking-panel{
  overflow: hidden;
}

/* گرید ساعت ها */
body.stark-public .slots-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 20px 0 26px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

/* خود دکمه های ساعت */
body.stark-public .slot-btn{
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border-radius: 14px !important;
  font-size: .88rem !important;
  font-weight: 900 !important;
  transform: none !important;
}

body.stark-public .slot-btn.selected{
  box-shadow: 0 10px 25px rgba(0,0,0,.16) !important;
}

/* کانتینر دکمه های ادامه و بازگشت - هرچی کلاسی داشته باشه میگیره */
body.stark-public .booking-panel .booking-actions,
body.stark-public .booking-panel .booking-nav,
body.stark-public .booking-panel .form-actions,
body.stark-public .booking-panel .actions,
body.stark-public .booking-panel > div:has(> .btn){
  display: flex !important;
  gap: 12px !important;
  margin-top: 28px !important;
  flex-wrap: wrap !important;
  border-top: 1px solid var(--st-line) !important;
  padding-top: 20px !important;
}

body.stark-public .booking-panel .booking-actions .btn,
body.stark-public .booking-panel .booking-nav .btn,
body.stark-public .booking-panel .form-actions .btn,
body.stark-public .booking-panel .actions .btn{
  flex: 1 1 140px !important;
  min-width: 0 !important;
  width: auto !important;
}

/* موبایل */
@media (max-width: 680px){
  body.stark-public .slots-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 22px !important;
  }
  body.stark-public .slot-btn{
    min-height: 46px !important;
    font-size: .82rem !important;
    border-radius: 13px !important;
  }
  body.stark-public .booking-panel .booking-actions,
  body.stark-public .booking-panel .booking-nav,
  body.stark-public .booking-panel .form-actions,
  body.stark-public .booking-panel .actions,
  body.stark-public .booking-panel > div:has(> .btn){
    flex-direction: column-reverse !important;
  }
  body.stark-public .booking-panel .booking-actions .btn,
  body.stark-public .booking-panel .booking-nav .btn,
  body.stark-public .booking-panel .form-actions .btn{
    width: 100% !important;
    flex: 1 1 auto !important;
  }
}

@media (max-width: 400px){
  body.stark-public .slots-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* =========================================================
   FINAL FIX - VIDEOS PAGE PREMIUM BALANCED 2026
   بذار تهِ style.css
   ========================================================= */

body.stark-public .videos-page{
  background: var(--st-background);
  min-height: 75vh;
}

body.stark-public .videos-hero{
  padding: 62px 0 28px !important;
  background: linear-gradient(180deg, #fff 0%, var(--st-background) 100%) !important;
  border-bottom: 1px solid var(--st-line) !important;
  text-align: center !important;
}

body.stark-public .videos-hero-inner{
  max-width: 700px;
  margin: 0 auto;
}

body.stark-public .videos-title{
  text-align: center !important;
}

body.stark-public .videos-hero .section-subtitle{
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

body.stark-public .videos-count-badge{
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--st-black);
  color: var(--st-white);
  font-size: .68rem;
  font-weight: 900;
  vertical-align: middle;
}

body.stark-public .videos-content{
  padding-top: 34px !important;
  padding-bottom: 80px !important;
}

/* گرید اصلی - کلید حل مشکلت اینه */
body.stark-public .videos-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(330px, 420px)) !important;
  justify-content: center !important;
  gap: 22px !important;
  align-items: stretch !important;
  max-width: 1340px;
  margin: 0 auto;
}

/* کارت ویدیو */
body.stark-public .videos-grid .video-card{
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  border: 1px solid var(--st-line) !important;
  background: var(--st-white) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.04) !important;
  transition: transform .45s var(--st-ease), box-shadow .45s ease, border-color .3s ease !important;
}

body.stark-public .videos-grid .video-card:hover{
  transform: translateY(-8px) !important;
  border-color: #d8d8d2 !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.11) !important;
}

body.stark-public .videos-grid .video-embed{
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  padding-top: 0 !important;
  background: #0a0a0a !important;
  overflow: hidden !important;
}

body.stark-public .videos-grid .video-embed iframe{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

body.stark-public .videos-grid .video-info{
  padding: 18px 20px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 1 !important;
}

body.stark-public .videos-grid .video-info h3{
  margin: 0 !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1.7 !important;
  color: var(--st-ink) !important;
}

body.stark-public .videos-grid .video-info p{
  margin: 0 !important;
  font-size: .82rem !important;
  color: var(--st-muted) !important;
  line-height: 1.9 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.stark-public .empty-videos{
  max-width: 520px !important;
  margin: 60px auto !important;
  padding: 50px 30px !important;
  border-radius: 26px !important;
  background: var(--st-white) !important;
  border: 1px dashed #d2d2cc !important;
  text-align: center !important;
}
body.stark-public .empty-videos-icon{
  font-size: 2.2rem;
  margin-bottom: 12px;
}

@media (max-width: 900px){
  body.stark-public .videos-grid{
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 680px){
  body.stark-public .videos-hero{
    padding: 42px 0 20px !important;
  }
  body.stark-public .videos-grid{
    grid-template-columns: 1fr !important;
  }
  body.stark-public .videos-grid .video-card{
    border-radius: 22px !important;
  }
}
/* =========================================================
   FINAL FIX - SERVICES PAGE BALANCED LIKE VIDEOS 2026
   بذار تهِ style.css - با stark-public به ادمین گیر نمیده
   ========================================================= */

body.stark-public .services-page{
  background: var(--st-background);
}

body.stark-public .services-hero{
  padding: 62px 0 26px !important;
  background: linear-gradient(180deg, #fff 0%, var(--st-background) 100%) !important;
  border-bottom: 1px solid var(--st-line) !important;
  text-align: center !important;
}

body.stark-public .services-hero-inner{
  max-width: 760px;
  margin: 0 auto;
}

body.stark-public .services-hero .section-title{
  text-align: center !important;
  font-size: clamp(1.9rem, 5vw, 2.9rem) !important;
}

body.stark-public .services-hero .section-subtitle{
  margin: 10px auto 0 !important;
  text-align: center !important;
}

body.stark-public .services-count-badge{
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--st-black);
  color: var(--st-white);
  font-size: .68rem;
  font-weight: 900;
  vertical-align: middle;
}

body.stark-public .services-content{
  padding-top: 28px !important;
  padding-bottom: 80px !important;
}

/* فیلتر ها بیاد وسط */
body.stark-public .services-page .filter-tabs,
body.stark-public .services-page .filter-wrap .filter-tabs{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 auto 30px !important;
  padding-bottom: 6px !important;
  max-width: 900px;
}

/* گرید اصلی - کلید حل مشکل تو اینه - flex وسط چین */
body.stark-public .services-grid{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 20px !important;
  max-width: 1240px;
  margin: 0 auto;
}

/* فیکس گرید قدیمی grid-3 اگر هنوز استفاده میکنی */
body.stark-public .grid:has(> .service-card),
body.stark-public .grid-3:has(> .service-card){
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 20px !important;
}

body.stark-public .services-grid .service-card,
body.stark-public .grid:has(> .service-card) .service-card,
body.stark-public .grid-3:has(> .service-card) .service-card{
  flex: 0 1 360px !important;
  width: 100% !important;
  max-width: 380px !important;
  min-width: 300px !important;
  min-height: 280px !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 26px !important;
}

/* کارت خوشگل تر */
body.stark-public .services-grid .service-card .cat-tag{
  background: #f1f1ed !important;
  color: #555550 !important;
  font-size: .68rem !important;
}

body.stark-public .services-grid .service-card h3{
  font-size: 1.05rem !important;
  margin-top: 12px !important;
}

body.stark-public .services-grid .service-card .price-row{
  margin-top: auto !important;
  padding-top: 16px !important;
  border-top: 1px dashed var(--st-line) !important;
}

body.stark-public .services-cta{
  margin-top: 40px !important;
  text-align: center !important;
}

@media (max-width: 680px){
  body.stark-public .services-hero{
    padding: 42px 0 18px !important;
  }
  body.stark-public .services-grid{
    gap: 14px !important;
  }
  body.stark-public .services-grid .service-card,
  body.stark-public .grid:has(> .service-card) .service-card{
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 22px !important;
  }
}
/* =========================
   GALLERY PAGE - STARK UI
   ========================= */

.stark-public .gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.stark-public .gallery-item {
    padding: 0 !important; /* چون عکس داریم، پدینگ نمیخوایم */
    overflow: hidden;
}

.stark-public .gallery-image-wrap {
    width: 100%;
    aspect-ratio: 1 / 1; /* مربع باشه که شیک‌تره */
    overflow: hidden;
    background: #f0f0f2;
}

.stark-public .gallery-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--st-ease);
}

.stark-public .gallery-item:hover .gallery-image-wrap img {
    transform: scale(1.08);
}

/* هماهنگی اطلاعات کارت با بقیه سایت */
.stark-public .gallery-item .video-info {
    padding: 20px;
    border-top: 1px dashed var(--st-line);
}

/* ریسپانسیو مشابه بقیه صفحات */
@media (max-width: 991px) {
    .stark-public .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .stark-public .gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .stark-public .gallery-item {
        max-width: 100%;
    }
}
.about-premium-page{background:#fff;overflow:hidden}
.about-premium-page .section{padding:90px 0}
.about-lux-hero{position:relative;padding:130px 0 90px;background:linear-gradient(180deg,#fff 0%,#f7f7f5 100%);text-align:center;border-bottom:1px solid #ecece9;isolation:isolate}
.about-lux-hero-bg{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1585747860715-2ba37e788b70?auto=format&fit=crop&w=1920&q=80') center/cover;opacity:.06;filter:grayscale(1);z-index:-2}
.about-lux-glow{position:absolute;width:600px;height:600px;top:-200px;right:10%;background:radial-gradient(circle,rgba(183,147,90,.12),transparent 65%);filter:blur(40px);z-index:-1}
.about-lux-hero-content{max-width:800px;margin:auto}
.about-lux-badge{display:inline-flex;padding:7px 18px;border-radius:999px;border:1.5px solid #0a0a0a;font-size:.75rem;font-weight:900;letter-spacing:.1em;margin-bottom:22px}
.about-lux-hero-content h1{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:900;line-height:1.15;letter-spacing:-.04em;color:#0a0a0a;margin:0}
.about-lux-hero-content h1 .gold-text{background:linear-gradient(135deg,#d7bd92 0%,#b7935a 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.about-lux-hero-content p{margin:18px 0 0;color:#777772;font-size:1.1rem}
.about-lux-scroll{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:8px}
.about-lux-scroll .mouse{width:22px;height:36px;border:2px solid #111;border-radius:99px;position:relative}
.about-lux-scroll .mouse span{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:4px;height:8px;background:#b7935a;border-radius:99px;animation:scrollDot 1.6s infinite}
.about-lux-scroll small{font-size:.68rem;color:#9a9a94;font-weight:700}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}50%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}
.about-lux-quote{background:#fff;border-bottom:1px solid #f0f0ec}
.quote-wrap{max-width:800px;margin:0 auto;text-align:center;position:relative;padding:40px 20px;border:1px solid #eee;border-radius:32px;background:#fbfbfa}
.quote-mark{position:absolute;top:-20px;left:50%;transform:translateX(-50%);width:56px;height:56px;background:#0a0a0a;color:#b7935a;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-family:serif}
.quote-wrap blockquote{margin:20px 0 30px;font-size:clamp(1.15rem,2.5vw,1.6rem);line-height:2;color:#111;font-weight:500;font-style:italic}
.quote-author{display:flex;align-items:center;justify-content:center;gap:12px}
.author-avatar{width:44px;height:44px;border-radius:50%;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900}
.quote-author strong{display:block;font-size:.9rem;color:#111}
.quote-author span{font-size:.72rem;color:#999}
.about-lux-editorial{background:#fff}
.editorial-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:70px;align-items:center;max-width:1180px;margin:0 auto}
.editorial-img{position:relative;border-radius:32px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.12)}
.editorial-img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.editorial-img:hover img{transform:scale(1.05)}
.img-overlay-card{position:absolute;bottom:18px;right:18px;background:rgba(10,10,10,.85);backdrop-filter:blur(12px);color:#fff;padding:14px 18px;border-radius:18px;border:1px solid rgba(255,255,255,.1)}
.img-overlay-card strong{display:block;font-size:.88rem}
.img-overlay-card span{font-size:.72rem;color:#d7bd92}
.editorial-text h2{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:900;line-height:1.3;margin:10px 0 18px;letter-spacing:-.02em;color:#0a0a0a}
.editorial-text .lead{font-size:.96rem;line-height:2.2;color:#55555a;margin-bottom:16px;font-weight:700}
.editorial-text .body-text{font-size:.92rem;line-height:2.2;color:#777}
.check-list{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.check-list div{background:#f7f7f5;border:1px solid #ecece9;padding:12px 16px;border-radius:14px;font-size:.86rem;font-weight:700;display:flex;gap:12px;align-items:center}
.check-list b{background:#111;color:#fff;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem}
.about-lux-numbers{background:#f7f7f5;border-top:1px solid #ecece9;border-bottom:1px solid #ecece9}
.numbers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
.num-item .num{font-size:clamp(3rem,6vw,4.5rem);font-weight:900;background:linear-gradient(135deg,#0a0a0a,#b7935a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.num-item h4{margin:12px 0 6px;font-size:1.05rem;font-weight:900;color:#0a0a0a}
.num-item p{margin:0;color:#888;font-size:.85rem}
.about-lux-timeline{background:#fff}
.timeline{position:relative;max-width:800px;margin:50px auto 0}
.timeline::before{content:'';position:absolute;top:0;bottom:0;right:50%;width:1px;background:linear-gradient(to bottom,transparent,#e9e9e6 15%,#e9e9e6 85%,transparent)}
.t-item{display:flex;width:100%;margin-bottom:50px;position:relative}
.t-year{width:50%;text-align:left;padding-left:50px;font-size:1.8rem;font-weight:900;color:#b7935a}
.t-dot{position:absolute;right:50%;top:12px;transform:translateX(50%);width:10px;height:10px;background:#0a0a0a;border-radius:50%;box-shadow:0 0 0 6px #fff,0 0 0 8px #ecece9}
.t-content{width:50%;padding-right:50px}
.t-content h3{margin:0 0 8px;font-size:1.1rem;font-weight:800;color:#0a0a0a}
.t-content p{margin:0;font-size:.88rem;line-height:1.9;color:#777}
.about-lux-cta{background:#fff}
.cta-premium{background:#0a0a0a;border-radius:36px;padding:80px 24px;text-align:center;position:relative;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.18)}
.cta-premium::before{content:'';position:absolute;inset:0;opacity:.06;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:40px 40px}
.cta-premium h2{position:relative;color:#fff;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;margin:0 0 12px}
.cta-premium p{position:relative;color:#a0a0ab;margin:0 0 32px}
.btn-cta{position:relative;display:inline-flex;gap:12px;align-items:center;background:#fff;color:#0a0a0a;padding:0 36px;min-height:56px;border-radius:18px;font-weight:900;font-size:.95rem;transition:all .35s cubic-bezier(.16,1,.3,1)}
.btn-cta:hover{background:#b7935a;color:#fff;transform:translateY(-4px)}
.reveal{opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.16,1,.3,1)}
.reveal.active{opacity:1;transform:none}
@media(max-width:991px){.editorial-grid{grid-template-columns:1fr;gap:40px}.editorial-img{order:-1}.numbers-grid{grid-template-columns:1fr;gap:30px}.timeline::before{right:20px}.t-item{flex-direction:column}.t-year{width:100%;text-align:right;padding:0 50px 10px 0}.t-dot{right:20px;left:auto;transform:translateX(50%)}.t-content{width:100%;padding:0 50px 0 0}}


/* =========================================================
   FOOTER - LUXURY DARK V6
   ========================================================= */
.stark-public .site-footer{
  position:relative; background:#07070a; color:#9b9ba3;
  margin-top:0; padding:0; overflow:hidden;
  border-top:1px solid rgba(255,255,255,.07);
}
.stark-public .site-footer .footer-glow{
  position:absolute; width:600px; height:600px; top:-250px; right:-100px;
  background:radial-gradient(circle, rgba(183,147,90,.12), transparent 65%);
  filter:blur(30px); pointer-events:none; z-index:1;
}
.stark-public .site-footer .footer-grid-lines{
  position:absolute; inset:0; z-index:1; opacity:.04;
  background-image:linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px);
  background-size:50px 50px; pointer-events:none;
}
.stark-public .site-footer .footer-watermark{
  position:absolute; right:-10px; bottom:-30px; z-index:1;
  font-size:20vw; font-weight:900; line-height:.9; letter-spacing:-.07em;
  color:rgba(255,255,255,.02); pointer-events:none; user-select:none;
}
.stark-public .site-footer .container{ position:relative; z-index:2; }
.stark-public .site-footer .footer-main{
  display:grid; grid-template-columns:1.6fr .9fr 1.1fr;
  gap:50px; padding:75px 0 35px;
}
.stark-public .footer-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.stark-public .footer-logo-wrap{
  width:46px; height:46px; border-radius:14px; background:#fff;
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.1); flex-shrink:0;
}
.stark-public .footer-logo-wrap img{ width:78%; height:78%; object-fit:contain; position:relative; z-index:2; }
.stark-public .footer-logo-wrap .logo-fallback{ position:absolute; font-weight:900; color:#111; font-size:.9rem; }
.stark-public .footer-brand-text strong{ display:block; color:#fff; font-weight:900; font-size:1rem; line-height:1.3; }
.stark-public .footer-brand-text small{ display:block; color:#77777e; font-size:.68rem; margin-top:2px; }
.stark-public .footer-desc{ margin:18px 0 0; font-size:.88rem; line-height:2; color:#808088; max-width:360px; }
.stark-public .footer-social{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  padding:9px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  color:#fff; font-size:.8rem; font-weight:800; transition:.3s;
}
.stark-public .footer-social:hover{ background:#fff; color:#111; border-color:#fff; transform:translateY(-2px); }

.stark-public .footer-links-col h4,
.stark-public .footer-contact-col h4{
  color:#fff; font-size:.9rem; font-weight:900; margin:0 0 18px;
}
.stark-public .footer-links-col nav{ display:flex; flex-direction:column; gap:10px; }
.stark-public .footer-links-col nav a{
  color:#8a8a92; font-size:.84rem; width:fit-content; transition:.25s; position:relative;
}
.stark-public .footer-links-col nav a::before{
  content:''; position:absolute; right:0; bottom:-2px; width:0; height:1px; background:#b7935a; transition:.3s;
}
.stark-public .footer-links-col nav a:hover{ color:#fff; transform:translateX(-4px); }
.stark-public .footer-links-col nav a:hover::before{ width:100%; }

.stark-public .footer-contact-item{ margin-bottom:18px; }
.stark-public .footer-contact-item small{ display:block; font-size:.68rem; color:#66666e; font-weight:700; margin-bottom:6px; letter-spacing:.04em; }
.stark-public .footer-contact-item a,
.stark-public .footer-contact-item span{ color:#e2e2e6; font-size:.88rem; line-height:1.8; }
.stark-public .footer-contact-item a{ direction:ltr; font-weight:800; }
.stark-public .footer-badge{
  display:inline-flex; gap:8px; align-items:center; margin-top:8px;
  background:rgba(183,147,90,.1); border:1px solid rgba(183,147,90,.25);
  color:#d7bd92; padding:8px 14px; border-radius:999px; font-size:.75rem; font-weight:800;
}
.stark-public .footer-badge span{ color:#b7935a; animation:pulseDot 1.6s infinite; }
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.4}}

.stark-public .footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 0 26px; border-top:1px solid rgba(255,255,255,.07);
  font-size:.72rem; color:#60606a;
}
.stark-public .footer-copy-gold{ color:#b7935a; font-weight:800; }

/* Responsive */
@media(max-width:950px){
  .stark-public .site-footer .footer-main{ grid-template-columns:1fr 1fr; gap:40px; }
  .stark-public .footer-brand-col{ grid-column:1/-1; }
}
@media(max-width:640px){
  .stark-public .site-footer .footer-main{ grid-template-columns:1fr; gap:34px; padding:50px 0 20px; }
  .stark-public .site-footer .footer-watermark{ font-size:28vw; bottom:10px; }
  .stark-public .footer-bottom{ flex-direction:column; align-items:flex-start; padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
}

/* ====== FIX: FOOTER STICKY TO BOTTOM - MOBILE GAP ====== */
html{
  min-height:100%;
  background:#07070a;
}
body.stark-public{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:#ffffff;
}
body.stark-public > header,
body.stark-public > .announcement-bar{
  flex:0 0 auto;
}
body.stark-public > main,
body.stark-public .home-page,
body.stark-public .about-premium-page,
body.stark-public .services-page,
body.stark-public .gallery-page,
body.stark-public .videos-page{
  flex:1 0 auto;
}
body.stark-public .site-footer{
  flex-shrink:0;
  margin-top:auto;
  width:100%;
}

/* مهمترین قسمت - حذف اون نوار سفید پایین موبایل */
@media(max-width:900px){
  body.stark-public.has-bottom-nav{
    padding-bottom:0 !important;
  }
  body.stark-public.has-bottom-nav .site-footer{
    padding-bottom:calc(105px + env(safe-area-inset-bottom)) !important;
  }
  /* واترمارک STARK هم بیاد بالا تر که زیر منو نره */
  body.stark-public .site-footer .footer-watermark{
    bottom:calc(95px + env(safe-area-inset-bottom));
  }
  /* منوی پایین شناور خوشگل بمونه */
  body.stark-public .mobile-bottom-nav{
    bottom:calc(10px + env(safe-area-inset-bottom)) !important;

    
  }
}
/* GALLERY V9 FINAL - WHITE LUXURY */
.stark-public .gallery-page{background:#fcfcfa}
.stark-public .gallery-section{padding:90px 0 100px}
.stark-public .gallery-section .section-heading{max-width:700px;margin:0 auto 36px;text-align:center}
.stark-public .gallery-section .section-tag::before{content:'';width:22px;height:1px;background:currentColor;display:inline-block;margin-left:8px}
.stark-public .gallery-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:36px}
.stark-public .gallery-filter .filter-tab{min-height:42px;padding:0 20px;border-radius:999px;border:1.5px solid #e8e8e2;background:#fff;font-weight:800;cursor:pointer}
.stark-public .gallery-filter .filter-tab.active{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.stark-public .gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:1180px;margin:0 auto}
.stark-public .gallery-item{background:#fff;border:1px solid #e9e9e6;border-radius:26px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,.04);transition:.45s;position:relative}
.stark-public .gallery-item:hover{transform:translateY(-8px);box-shadow:0 24px 55px rgba(0,0,0,.1)}
.stark-public .gallery-item::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:#b7935a;transform:scaleX(0);transform-origin:right;transition:.45s}
.stark-public .gallery-item:hover::after{transform:scaleX(1)}
.stark-public .gallery-image-container{position:relative;aspect-ratio:4/3;overflow:hidden;background:#f5f5f2}
.stark-public .gallery-image{width:100%;height:100%;object-fit:cover;transition:.7s}
.stark-public .gallery-item:hover .gallery-image{transform:scale(1.07)}
.stark-public .gallery-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.45) 100%);opacity:0;transition:.35s;display:flex;align-items:center;justify-content:center}
.stark-public .gallery-item:hover .gallery-overlay{opacity:1}
.stark-public .gallery-zoom-icon{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(12px);border:2px solid rgba(255,255,255,.3);color:#fff;display:flex;align-items:center;justify-content:center}
.stark-public .gallery-item-number{position:absolute;top:10px;left:10px;background:rgba(10,10,10,.75);color:#fff;padding:3px 9px;border-radius:8px;font-size:.7rem;font-weight:900;direction:ltr}
.stark-public .gallery-content{padding:16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.stark-public .gallery-cat-tag{font-size:.68rem;background:#f4f4f0;padding:2px 8px;border-radius:999px;font-weight:800;width:fit-content}
.stark-public .gallery-item-title{font-size:1.02rem;font-weight:900;margin:0}
.stark-public .gallery-item-desc{font-size:.82rem;color:#777;margin:0;line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.stark-public .gallery-item-footer{margin-top:auto;padding-top:10px;border-top:1px dashed #e9e9e6}
.lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.35s}
.lightbox.active{opacity:1;visibility:visible}.lightbox-backdrop{position:absolute;inset:0;background:rgba(7,7,10,.9);backdrop-filter:blur(10px)}.lightbox-content{position:relative;z-index:2;max-width:90vw}.lightbox-image-wrap{max-width:85vw;max-height:70vh;border-radius:18px;overflow:hidden}.lightbox-image{max-width:100%;max-height:70vh;display:block}.lightbox-close{position:absolute;top:-44px;right:0;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;cursor:pointer}
@media(max-width:991px){.stark-public .gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.stark-public .gallery-grid{grid-template-columns:1fr}.stark-public .gallery-section{padding:70px 0 90px}.stark-public .gallery-filter{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px}}
body.lightbox-open{overflow:hidden}


/* ===== LIGHTBOX NAV FIX V10 - LUXURY MODERN ===== */
.stark-public .lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.35s cubic-bezier(.16,1,.3,1)}
.stark-public .lightbox.active{opacity:1;visibility:visible}
.stark-public .lightbox-backdrop{position:absolute;inset:0;background:rgba(7,7,10,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.stark-public .lightbox-content{position:relative;z-index:3;width:min(92vw,1100px);display:flex;flex-direction:column;align-items:center;animation:lbPop .45s cubic-bezier(.16,1,.3,1)}
@keyframes lbPop{from{transform:scale(.94) translateY(16px);opacity:0}to{transform:none;opacity:1}}
.stark-public .lightbox-image-wrap{position:relative;width:100%;max-height:72vh;border-radius:22px;overflow:hidden;background:#0a0a0a;box-shadow:0 30px 90px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12)}
.stark-public .lightbox-image{width:100%;max-height:72vh;object-fit:contain;display:block}

/* دکمه بستن مدرن */
.stark-public .lightbox-close{
  position:absolute;top:-56px;right:0;width:46px;height:46px;border-radius:50%;
  background:rgba(20,20,22,.7);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(20px);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:.3s; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.stark-public .lightbox-close:hover{background:#fff;color:#07070a;transform:rotate(90deg) scale(1.05)}
.stark-public .lightbox-close svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}

/* کلید چپ راست - مدرن لوکس */
.stark-public .lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:56px;height:56px;border-radius:50%;
  background:rgba(20,20,22,.72);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  color:#fff;cursor:pointer;z-index:5;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  transition:all .38s cubic-bezier(.16,1,.3,1);
}
.stark-public .lightbox-nav:hover{
  background:#ffffff;color:#07070a;border-color:#ffffff;
  transform:translateY(-50%) scale(1.1);
  box-shadow:0 18px 45px rgba(0,0,0,.5);
}
.stark-public .lightbox-nav:active{transform:translateY(-50%) scale(.92)}
.stark-public .lightbox-nav svg{width:24px;height:24px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.stark-public .lightbox-prev{right:22px}
.stark-public .lightbox-next{left:22px}
.stark-public .lightbox-nav:hover svg{stroke:#07070a}

.stark-public .lightbox-caption{text-align:center;color:#fff;margin-top:20px;max-width:600px;padding:0 16px}
.stark-public .lightbox-title{margin:0 0 6px;font-size:1.15rem;font-weight:900}
.stark-public .lightbox-desc{margin:0;color:rgba(255,255,255,.6);font-size:.88rem;line-height:1.9}
.stark-public .lightbox-counter{
  margin-top:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  padding:5px 12px;border-radius:999px;color:rgba(255,255,255,.6);font-size:.75rem;font-weight:800;direction:ltr;letter-spacing:.05em
}

@media(max-width:900px){
  .stark-public .lightbox-prev{right:12px}
  .stark-public .lightbox-next{left:12px}
  .stark-public .lightbox-nav{width:48px;height:48px}
  .stark-public .lightbox-close{top:-52px;right:6px;width:42px;height:42px}
  .stark-public .lightbox-image-wrap{max-width:94vw;max-height:68vh;border-radius:18px}
}
@media(max-width:600px){
  .stark-public .lightbox-nav{width:44px;height:44px}
  .stark-public .lightbox-nav svg{width:20px;height:20px}
}
body.lightbox-open{overflow:hidden}

.hero-logo-fallback{
    width:80px;
    height:80px;
    border-radius:24px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.hero-logo-fallback img{
    width:130%;
    height:130%;
    object-fit:contain;
    padding:0;
}

.brand-logo-box{
    width:100px;
    height:100px;
    border-radius:28px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.brand-logo-box img{
    width:140%;
    height:140%;
    object-fit:contain;
    padding:0;
}
/* ===============================
   STARK FOOTER SOCIAL PREMIUM
================================ */

.footer-social-list{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:18px;
}


.footer-social-item{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    min-width:120px;
    height:42px;

    padding:0 18px;

    border-radius:14px;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.02)
    );

    border:1px solid rgba(255,255,255,.12);

    color:#fff;

    text-decoration:none;

    font-size:.85rem;
    font-weight:700;

    transition:
    .35s ease;

    backdrop-filter:blur(10px);
}



.footer-social-item span{

    width:24px;
    height:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#c9a45c;

    color:#111;

    font-size:.8rem;

}



.footer-social-item:hover{

    transform:
    translateY(-5px);

    border-color:#c9a45c;

    box-shadow:
    0 12px 30px rgba(201,164,92,.25);

    color:#c9a45c;

}



.footer-social-item:hover span{

    transform:rotate(15deg);

}




/* موبایل */

@media(max-width:700px){

.footer-social-list{

    justify-content:center;

}


.footer-social-item{

    flex:1;

    min-width:140px;

}


}

* {
    -webkit-tap-highlight-color: transparent;
}


html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    -webkit-tap-highlight-color: transparent;
}

img {
    max-width: 100%;
    height: auto;
    content-visibility: auto;
}

.card,
button,
a {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* =========================================
   STARK — Lightning Luxury Loader V2
   Isolated loader styles — no global selectors
   ========================================= */

.stark-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #020202;
    opacity: 1;
    visibility: visible;
    isolation: isolate;
    transition:
        opacity .8s cubic-bezier(.4,0,.2,1),
        visibility .8s cubic-bezier(.4,0,.2,1);
}

.stark-loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.stark-loader-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255,255,255,.10) 0%,
            rgba(255,255,255,.035) 16%,
            transparent 42%
        ),
        radial-gradient(
            circle at 50% 50%,
            rgba(212,175,55,.10) 0%,
            transparent 48%
        ),
        #020202;
    animation: starkBgBreath 2.8s ease-in-out infinite;
}

/* انرژی اطراف هسته */

.stark-loader-energy {
    position: absolute;
    width: 245px;
    height: 245px;
    border-radius: 50%;
    animation: starkEnergySpin 5s linear infinite;
}

.stark-loader-energy span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow:
        0 0 18px rgba(255,255,255,.025),
        inset 0 0 18px rgba(212,175,55,.02);
}

.stark-loader-energy span:nth-child(1) {
    transform: rotate(35deg) scale(.94);
    border-right-color: rgba(255,255,255,.85);
    border-bottom-color: rgba(212,175,55,.35);
}

.stark-loader-energy span:nth-child(2) {
    transform: rotate(145deg) scale(.82);
    border-left-color: rgba(212,175,55,.85);
}

.stark-loader-energy span:nth-child(3) {
    transform: rotate(235deg) scale(.70);
    border-top-color: rgba(255,255,255,.75);
}

/* هسته */

.stark-loader-core {
    position: relative;
    z-index: 5;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.08),
            rgba(10,10,10,.96) 65%
        );
    border: 1px solid rgba(255,255,255,.38);
    box-shadow:
        0 0 18px rgba(255,255,255,.12),
        0 0 55px rgba(212,175,55,.16),
        0 0 110px rgba(212,175,55,.08),
        inset 0 0 35px rgba(255,255,255,.06);
    animation:
        starkCorePulse 1.7s ease-in-out infinite,
        starkCoreGlow 2.4s ease-in-out infinite;
}

/* لوگو */

.stark-loader-logo {
    position: relative;
    font-family: Arial, sans-serif;
    font-size: 42px;
    font-weight: 900;
    letter-spacing: -4px;
    color: #fff;
    text-shadow:
        0 0 5px rgba(255,255,255,.95),
        0 0 15px rgba(255,255,255,.75),
        0 0 30px rgba(212,175,55,.65);
    animation: starkLogoFlash 2.6s ease-in-out infinite;
}

/* هاله نور لوگو */

.stark-loader-core::before,
.stark-loader-core::after {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    pointer-events: none;
}

.stark-loader-core::before {
    border: 1px solid rgba(212,175,55,.30);
    animation: starkRingPulse 1.8s ease-out infinite;
}

.stark-loader-core::after {
    inset: -38px;
    border: 1px solid rgba(255,255,255,.08);
    animation: starkRingPulse 2.4s ease-out infinite .4s;
}

/* =========================================
   STARK — Cinematic Natural Lightning 2.2s
   ========================================= */

.stark-lightning {
    position: absolute;
    z-index: 4;
    width: 3px;
    height: 185px;
    opacity: 0;
    pointer-events: none;

    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255,255,255,.72) 10%,
        #fff 30%,
        rgba(255,255,255,.95) 55%,
        rgba(255,255,255,.38) 82%,
        transparent 100%
    );

    border-radius: 50%;

    filter:
        drop-shadow(0 0 3px #fff)
        drop-shadow(0 0 8px rgba(255,255,255,.85))
        drop-shadow(0 0 16px rgba(212,175,55,.35));

    clip-path: polygon(
        47% 0%,
        58% 0%,
        52% 12%,
        68% 24%,
        53% 36%,
        64% 48%,
        48% 60%,
        57% 73%,
        42% 86%,
        50% 100%,
        36% 100%,
        40% 87%,
        29% 75%,
        41% 61%,
        27% 48%,
        40% 35%,
        30% 23%,
        43% 12%
    );
}

/* رعد اصلی */
.lightning-1 {
    transform:
        translate(-118px,-92px)
        rotate(-24deg)
        scaleY(1.12);

    animation: starkLightning22 2.2s infinite;
}

/* رعد دوم — ضعیف‌تر و با تأخیر */
.lightning-2 {
    transform:
        translate(120px,-48px)
        rotate(31deg)
        scaleY(.82);

    animation: starkLightning22 2.2s infinite .42s;
}

/* رعد سوم — خیلی ظریف */
.lightning-3 {
    transform:
        translate(-88px,96px)
        rotate(151deg)
        scaleY(.72);

    animation: starkLightning22 2.2s infinite .91s;
}

/* نور محیطی بسیار ظریف */
.stark-loader::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: rgba(255,255,255,0);

    animation: starkLightningAmbient22 2.2s infinite;
}

/* =========================================
   Lightning — 2.2 Second Natural Cycle
   ========================================= */

@keyframes starkLightning22 {

    /* سکوت */
    0%,
    62%,
    100% {
        opacity: 0;
    }

    /* برق اولیه */
    63% {
        opacity: .08;
    }

    /* ضربه اصلی */
    64% {
        opacity: .95;
    }

    /* خاموشی ناگهانی */
    64.45% {
        opacity: .08;
    }

    /* برگشت کوتاه */
    64.9% {
        opacity: .72;
    }

    /* شکست نور */
    65.35% {
        opacity: .16;
    }

    /* آخرین جرقه */
    66.1% {
        opacity: .48;
    }

    /* خاموشی */
    67.2% {
        opacity: 0;
    }
}

@keyframes starkLightningAmbient22 {

    0%,
    62%,
    100% {
        background: rgba(255,255,255,0);
    }

    64% {
        background: rgba(255,255,255,.018);
    }

    64.35% {
        background: rgba(255,255,255,.07);
    }

    64.8% {
        background: rgba(255,255,255,.018);
    }

    65.4% {
        background: rgba(212,175,55,.025);
    }

    66.2% {
        background: rgba(255,255,255,0);
    }
}

/* برند */

.stark-loader-brand {
    position: absolute;
    top: calc(50% + 108px);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-width: 220px;
    text-align: center;
    line-height: 1;
}

.stark-loader-brand strong {
    display: block;
    margin: 0;
    padding: 0 0 10px;
    white-space: nowrap;
    font-family: Arial, sans-serif;
    font-size: 23px;
    font-weight: 900;
    letter-spacing: 8px;
    color: #fff;
    text-shadow:
        0 0 10px rgba(255,255,255,.5),
        0 0 24px rgba(212,175,55,.35);
}

.stark-loader-brand span {
    display: block;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    font-family: Arial, sans-serif;
    font-size: 8px;
    line-height: 1.4;
    letter-spacing: 4px;
    color: rgba(255,255,255,.45);
}

/* progress */

.stark-loader-progress {
    position: absolute;
    top: calc(50% + 155px);
    width: 145px;
    height: 2px;
    overflow: hidden;
    background: rgba(255,255,255,.08);
    box-shadow: 0 0 10px rgba(212,175,55,.08);
}

.stark-loader-progress span {
    display: block;
    width: 42%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        #fff,
        #d4af37,
        transparent
    );
    box-shadow:
        0 0 8px #fff,
        0 0 15px rgba(212,175,55,.75);
    animation: starkProgressLuxury 1.15s ease-in-out infinite;
}

/* animations */

@keyframes starkEnergySpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes starkBgBreath {
    0%,100% {
        opacity: .72;
    }

    50% {
        opacity: 1;
    }
}

@keyframes starkCorePulse {
    0%,100% {
        transform: scale(.96);
    }

    50% {
        transform: scale(1.045);
    }
}

@keyframes starkCoreGlow {
    0%,100% {
        box-shadow:
            0 0 18px rgba(255,255,255,.12),
            0 0 55px rgba(212,175,55,.14),
            0 0 100px rgba(212,175,55,.06),
            inset 0 0 35px rgba(255,255,255,.05);
    }

    50% {
        box-shadow:
            0 0 30px rgba(255,255,255,.25),
            0 0 75px rgba(212,175,55,.28),
            0 0 135px rgba(212,175,55,.12),
            inset 0 0 45px rgba(255,255,255,.09);
    }
}

@keyframes starkLogoFlash {
    0%,72%,100% {
        opacity: .88;
        filter: brightness(1);
    }

    76% {
        opacity: 1;
        filter: brightness(2);
    }

    79% {
        opacity: .72;
        filter: brightness(.8);
    }

    82% {
        opacity: 1;
        filter: brightness(1.7);
    }
}

@keyframes starkRingPulse {
    0% {
        transform: scale(.75);
        opacity: 0;
    }

    35% {
        opacity: .75;
    }

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

@keyframes starkLightningReal {
    0%,72%,100% {
        opacity: 0;
        filter:
            drop-shadow(0 0 2px #fff)
            drop-shadow(0 0 5px rgba(255,255,255,.5));
    }

    74% {
        opacity: .18;
    }

    75% {
        opacity: 1;
        filter:
            drop-shadow(0 0 5px #fff)
            drop-shadow(0 0 14px #fff)
            drop-shadow(0 0 30px rgba(212,175,55,.9));
    }

    76% {
        opacity: .05;
    }

    77% {
        opacity: .95;
    }

    78% {
        opacity: .12;
    }

    80% {
        opacity: .75;
    }

    82% {
        opacity: 0;
    }
}

@keyframes starkLightningFlash {
    0%,73%,100% {
        background: rgba(255,255,255,0);
    }

    75% {
        background: rgba(255,255,255,.035);
    }

    76% {
        background: rgba(255,255,255,.13);
    }

    77% {
        background: rgba(255,255,255,.025);
    }

    79% {
        background: rgba(212,175,55,.055);
    }

    81% {
        background: rgba(255,255,255,0);
    }
}

@keyframes starkProgressLuxury {
    0% {
        transform: translateX(-240%);
    }

    100% {
        transform: translateX(350%);
    }
}

/* موبایل */

@media (max-width: 600px) {

    .stark-loader-energy {
        width: 190px;
        height: 190px;
    }

    .stark-loader-core {
        width: 105px;
        height: 105px;
    }

    .stark-loader-logo {
        font-size: 36px;
    }

    .stark-loader-brand {
        top: calc(50% + 90px);
    }

    .stark-loader-progress {
        top: calc(50% + 145px);
        width: 125px;
    }

    .stark-lightning {
        height: 125px;
    }
}

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

    .stark-loader *,
    .stark-loader {
        animation: none !important;
        transition: none !important;
    }
}



/* =========================================
   STARK Loader — Text Separation Fix
   ========================================= */

.stark-loader-brand {
    position: absolute !important;
    top: calc(50% + 125px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 260px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;
}

.stark-loader-brand strong {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-family: Arial, sans-serif !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    letter-spacing: 8px !important;
    white-space: nowrap !important;
}

.stark-loader-brand span {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-family: Arial, sans-serif !important;
    font-size: 8px !important;
    letter-spacing: 4px !important;
    white-space: nowrap !important;
}

@media (max-width: 600px) {
    .stark-loader-brand {
        top: calc(50% + 115px) !important;
        width: 240px !important;
        gap: 9px !important;
    }

    .stark-loader-brand strong {
        font-size: 23px !important;
        letter-spacing: 7px !important;
    }

    .stark-loader-brand span {
        font-size: 7px !important;
        letter-spacing: 3px !important;
    }
}


/* Loader subtitle spacing */
.stark-loader-brand span {
    margin-top: 6px !important;
    transform: translateY(4px) !important;
}


/* STARK Loader: skip after first visit in current tab */
html.stark-skip-loader #stark-loader {
    display: none !important;
}

/* STARK Loader Persian Subtitle */
.stark-loader-brand span {
    font-family: 'YekanBakh', 'Yekan Bakh', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500;
    letter-spacing: 0 !important;
    line-height: 1.8;
    white-space: nowrap;
    color: rgba(255,255,255,.72);
}


/* =========================================
   STARK — Smooth Cinematic BOOM
   GPU Friendly / Luxury Motion
   ========================================= */

.stark-loader-hidden .stark-lightning {
    animation: starkSmoothBoom .72s cubic-bezier(.22,.61,.36,1) forwards !important;
    will-change: opacity, transform;
}

.stark-loader-hidden::after {
    animation: starkSmoothAmbient .72s ease-out forwards !important;
}

@keyframes starkSmoothBoom {

    0% {
        opacity: .18;
        transform: translate(-118px,-92px) rotate(-24deg) scaleY(.92);
    }

    18% {
        opacity: .95;
    }

    30% {
        opacity: .32;
    }

    42% {
        opacity: .78;
    }

    56% {
        opacity: .18;
    }

    70% {
        opacity: .42;
    }

    100% {
        opacity: 0;
        transform: translate(-118px,-92px) rotate(-24deg) scaleY(1.02);
    }
}

@keyframes starkSmoothAmbient {

    0% {
        opacity: 0;
        background: rgba(255,255,255,0);
    }

    18% {
        opacity: 1;
        background: rgba(255,255,255,.035);
    }

    32% {
        opacity: .45;
        background: rgba(255,255,255,.065);
    }

    55% {
        opacity: .18;
        background: rgba(255,255,255,.018);
    }

    100% {
        opacity: 0;
        background: rgba(255,255,255,0);
    }
}

/* کاهش فشار رندر */
.stark-lightning {
    will-change: opacity, transform;
}

.stark-loader-hidden .stark-loader-core {
    animation: starkCoreBoom .72s cubic-bezier(.22,.61,.36,1) forwards !important;
    will-change: transform, opacity;
}

@keyframes starkCoreBoom {

    0% {
        transform: scale(1);
    }

    22% {
        transform: scale(1.025);
    }

    42% {
        transform: scale(1.045);
    }

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

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

    .stark-loader-hidden .stark-lightning,
    .stark-loader-hidden::after,
    .stark-loader-hidden .stark-loader-core {
        animation: none !important;
    }
}