/* ============== RESET / BASE ============== */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #0E1418;
    --bg-soft: #131B20;
    --bg-elev: #1A242B;
    --ink: #F4ECDD;
    --ink-mute: rgba(244, 236, 221, 0.65);
    --ink-dim: rgba(244, 236, 221, 0.4);
    --accent: #D97448;
    --accent-soft: #E89870;
    --accent-deep: #B85A30;
    --green: #5A8B5C;
    --green-deep: #2F4D32;
    --line: rgba(244, 236, 221, 0.1);
    --line-strong: rgba(244, 236, 221, 0.18);
    --frame: #2A2520;
    --frame-light: #4A3F35;
    --shadow: 0 30px 80px -20px rgba(0,0,0,0.5);
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    touch-action: pan-y;
    overscroll-behavior-y: none;
}

/* ============== GLOBAL BACKGROUND ============== */
/* The train-window scenery now sits behind every page — fixed to viewport,
   so it stays visible while .pages translates between sections */
.global-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: #050709;
}

/* ============== FULLPAGE container ============== */
.pages {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100svh;
    transform: translate3d(0, 0, 0);
    transition: transform 1100ms cubic-bezier(0.86, 0, 0.07, 1);
    will-change: transform;
}
.pages > section,
.pages > .footer {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
    background: transparent;
    isolation: isolate;
}

/* Smooth dark vignette over the train window for non-hero sections —
   keeps content readable without hiding the moving scenery.
   Using ::after so we don't clobber .cyl-section::before (orange glow).
   z-index: -1 + isolation: isolate on the section keeps it behind content
   without forcing positioning on children (preserving absolute layouts). */
.pages > section:not(.hero)::after,
.pages > .footer::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 75% at 50% 50%, rgba(8, 12, 16, 0.55) 0%, rgba(8, 12, 16, 0.78) 70%, rgba(8, 12, 16, 0.88) 100%),
        linear-gradient(180deg, rgba(8, 12, 16, 0.35) 0%, rgba(8, 12, 16, 0.15) 50%, rgba(8, 12, 16, 0.45) 100%);
    backdrop-filter: blur(2px) saturate(1.05);
    -webkit-backdrop-filter: blur(2px) saturate(1.05);
    transition: opacity 900ms ease;
}
/* Each non-hero page: vertically center its container */
.pages > section:not(.hero) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.pages > .footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Pages dots indicator (right side) */
.pages-dots {
    position: fixed;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: auto;
}
.pages-dots__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(244, 236, 221, 0.45);
    background: transparent;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s, border-color 0.3s;
    padding: 0;
}
.pages-dots__dot:hover { transform: scale(1.25); border-color: var(--accent-soft); }
.pages-dots__dot.is-active {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.15);
}
@media (max-width: 768px) {
    .pages-dots { right: 14px; gap: 10px; }
    .pages-dots__dot { width: 8px; height: 8px; }
}

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

.container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width: 768px) {
    .container { padding: 0 20px; }
}

/* ============== TYPOGRAPHY ============== */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 500;
}
.eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--accent);
}

.section-title {
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;
    font-size: clamp(36px, 5.5vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin-top: 18px;
    margin-bottom: 22px;
}

.section-sub {
    font-size: 18px;
    color: var(--ink-mute);
    max-width: 540px;
    line-height: 1.55;
}

.section-head { margin-bottom: 80px; }
.section-head--center { text-align: center; }
.section-head--center .section-sub { margin: 22px auto 0; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .eyebrow::before { display: none; }

@media (max-width: 768px) {
    .section-head { margin-bottom: 50px; }
}

/* ============== NAVIGATION ============== */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 18px 0;
    background: rgba(14, 20, 24, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
    transition: padding 0.3s ease;
}
.nav.is-scrolled { padding: 12px 0; background: rgba(14, 20, 24, 0.92); }

.nav__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.nav__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Unbounded', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.05em;
    color: var(--ink);
}
.nav__logo em {
    font-style: normal;
    color: var(--accent);
    font-weight: 400;
}

.nav__menu {
    display: flex;
    gap: 36px;
    list-style: none;
}
.nav__menu a {
    font-size: 14px;
    color: var(--ink-mute);
    transition: color 0.2s;
    position: relative;
}
.nav__menu a:hover { color: var(--ink); }
.nav__menu a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -4px;
    width: 0; height: 1px;
    background: var(--accent);
    transition: width 0.3s ease;
}
.nav__menu a:hover::after { width: 100%; }

.nav__cta {
    background: var(--accent);
    color: #fff;
    padding: 10px 22px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    transition: transform 0.2s, background 0.2s;
}
.nav__cta:hover { background: var(--accent-deep); transform: translateY(-1px); }

.nav__burger { display: none; flex-direction: column; gap: 4px; padding: 8px; }
.nav__burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }

@media (max-width: 980px) {
    .nav__menu, .nav__cta { display: none; }
    .nav__burger { display: flex; }
}

/* ============== HERO — TRAIN WINDOW ============== */
.hero {
    position: relative;
    height: 100svh;
    min-height: 700px;
    overflow: hidden;
    background: transparent;
}

/* Cinematic gradient under text — keeps video bright but text readable */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background:
        linear-gradient(115deg,
            rgba(8, 12, 16, 0.85) 0%,
            rgba(8, 12, 16, 0.65) 25%,
            rgba(8, 12, 16, 0.35) 45%,
            transparent 65%),
        linear-gradient(180deg,
            rgba(8, 12, 16, 0.4) 0%,
            transparent 25%,
            transparent 60%,
            rgba(8, 12, 16, 0.6) 100%);
}

.train-window {
    position: absolute;
    inset: 0;
    background: #050709;
}

/* Glass area — fills entire hero, no frame */
.train-glass {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #050709;
}

/* Subtle continuous train shake on the view outside */
.train-view {
    position: absolute;
    inset: 0;
    overflow: hidden;
    animation: trainShake 0.32s ease-in-out infinite alternate;
}

@keyframes trainShake {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(0.5px, 0.8px, 0); }
    100% { transform: translate3d(-0.4px, -0.5px, 0); }
}

.train-view__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    /* subtle base softness — like looking through real glass */
    filter: blur(0.8px) saturate(1.05) contrast(1.02);
}

/* Frosted glass overlay — heavier blur at the edges, clear center */
.window-frost {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    pointer-events: none;
    /* radial mask: clear in middle, frosted at the edges */
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 30%, rgba(0,0,0,0.4) 65%, black 100%);
            mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 30%, rgba(0,0,0,0.4) 65%, black 100%);
    z-index: 2;
}

.layer {
    position: absolute;
    left: 0; right: 0;
    pointer-events: none;
}

/* Sky */
.layer--sky {
    inset: 0;
    background: linear-gradient(
        180deg,
        #C8D9E8 0%,
        #DCE5EE 20%,
        #F2DCC0 55%,
        #E8C2A0 75%,
        #C89878 100%
    );
}

/* Sun */
.layer--sun {
    top: 18%;
    right: 15%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFE9C8 0%, #FFC890 40%, transparent 70%);
    filter: blur(2px);
    animation: sunGlow 4s ease-in-out infinite alternate;
}

@keyframes sunGlow {
    from { opacity: 0.85; transform: scale(1); }
    to   { opacity: 1; transform: scale(1.04); }
}

/* Clouds — slow drift */
.layer--clouds {
    top: 8%;
    height: 30%;
}
.cloud {
    position: absolute;
    background: #fff;
    border-radius: 100px;
    filter: blur(1px);
    opacity: 0.85;
    animation: cloudMove linear infinite;
}
.cloud::before, .cloud::after {
    content: '';
    position: absolute;
    background: #fff;
    border-radius: 50%;
}
.cloud--1 { width: 120px; height: 28px; top: 30%; left: 100%; animation-duration: 60s; }
.cloud--1::before { width: 50px; height: 50px; top: -22px; left: 18px; }
.cloud--1::after  { width: 70px; height: 70px; top: -38px; left: 50px; }

.cloud--2 { width: 90px; height: 22px; top: 60%; left: 100%; animation-duration: 70s; animation-delay: -20s; opacity: 0.7; }
.cloud--2::before { width: 36px; height: 36px; top: -18px; left: 12px; }
.cloud--2::after  { width: 50px; height: 50px; top: -28px; left: 36px; }

.cloud--3 { width: 140px; height: 30px; top: 20%; left: 100%; animation-duration: 55s; animation-delay: -30s; }
.cloud--3::before { width: 56px; height: 56px; top: -28px; left: 22px; }
.cloud--3::after  { width: 80px; height: 80px; top: -42px; left: 60px; }

.cloud--4 { width: 100px; height: 24px; top: 75%; left: 100%; animation-duration: 65s; animation-delay: -45s; opacity: 0.75; }
.cloud--4::before { width: 40px; height: 40px; top: -20px; left: 14px; }
.cloud--4::after  { width: 56px; height: 56px; top: -30px; left: 42px; }

@keyframes cloudMove {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100vw - 200px)); }
}

/* Mountain layers — each contains 2 identical SVGs side by side for seamless loop */
.layer--mountain-far {
    bottom: 28%;
    height: 35%;
    width: 200%;
    display: flex;
    animation: scrollHalf 90s linear infinite;
}
.layer--mountain-far svg { width: 50%; height: 100%; flex-shrink: 0; display: block; }

.layer--mountain-main {
    bottom: 22%;
    height: 50%;
    width: 200%;
    display: flex;
    animation: scrollHalf 50s linear infinite;
}
.layer--mountain-main svg { width: 50%; height: 100%; flex-shrink: 0; display: block; }

.layer--hills {
    bottom: 18%;
    height: 22%;
    width: 200%;
    display: flex;
    animation: scrollHalf 22s linear infinite;
}
.layer--hills svg { width: 50%; height: 100%; flex-shrink: 0; display: block; }

@keyframes scrollHalf { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* (scrollHalf keyframe defined above) */

/* Green field — the foreground that flies past */
.layer--field {
    bottom: 0;
    height: 22%;
    background: linear-gradient(180deg, #6BA86E 0%, #4F8253 50%, #2F5A36 100%);
    overflow: hidden;
}
.field__grass {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60px 8px at 10% 30%, rgba(255,255,255,0.12), transparent),
        radial-gradient(ellipse 80px 8px at 35% 50%, rgba(255,255,255,0.08), transparent),
        radial-gradient(ellipse 50px 6px at 60% 70%, rgba(0,0,0,0.18), transparent),
        radial-gradient(ellipse 70px 8px at 85% 40%, rgba(255,255,255,0.1), transparent);
    background-size: 400px 100%;
    animation: fieldScroll 1.4s linear infinite;
}
.field__texture {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, transparent 0, transparent 19px, rgba(47, 90, 54, 0.5) 20px, transparent 21px),
        linear-gradient(90deg, transparent 0, transparent 39px, rgba(47, 90, 54, 0.3) 40px, transparent 41px);
    background-size: 60px 100%, 80px 100%;
    animation: fieldScroll 0.8s linear infinite;
    opacity: 0.6;
}

@keyframes fieldScroll {
    from { background-position: 0 0; }
    to   { background-position: -400px 0; }
}

/* Foreground objects flying past */
.layer--foreground {
    bottom: 18%;
    height: 30%;
    overflow: hidden;
}

.fg-item {
    position: absolute;
    bottom: 0;
    right: -200px;
    animation: fgFly 11s linear infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes fgFly {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100vw - 400px)); }
}

.fg-tree {
    width: 70px;
    height: 130px;
    background:
        radial-gradient(ellipse 35px 60px at 50% 30%, #2A4A2D 0%, #1F3A22 70%, transparent 75%),
        radial-gradient(ellipse 28px 45px at 30% 50%, #2F5532 0%, transparent 70%),
        radial-gradient(ellipse 28px 45px at 70% 55%, #2F5532 0%, transparent 70%);
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
}
.fg-tree::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 30px;
    background: #2D1F0F;
}

.fg-tree--small {
    width: 50px;
    height: 95px;
}

.fg-pole {
    width: 6px;
    height: 160px;
    background: linear-gradient(180deg, #5A4A3A 0%, #3A2E22 100%);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}
.fg-pole::before {
    content: '';
    position: absolute;
    top: 14px;
    left: -30px;
    width: 66px;
    height: 4px;
    background: #3A2E22;
}
.fg-pole::after {
    content: '';
    position: absolute;
    top: 8px;
    left: -2px;
    width: 10px;
    height: 12px;
    background: #2A1E14;
    border-radius: 2px 2px 0 0;
}

/* Glass reflections / glare */
.window-glare {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 0%,
        transparent 30%,
        rgba(255,255,255,0.06) 35%,
        rgba(255,255,255,0.12) 40%,
        rgba(255,255,255,0.04) 45%,
        transparent 50%,
        transparent 70%,
        rgba(255,255,255,0.04) 73%,
        rgba(255,255,255,0.08) 76%,
        transparent 80%
    );
    pointer-events: none;
    mix-blend-mode: screen;
    animation: glareShift 8s ease-in-out infinite alternate;
}

@keyframes glareShift {
    from { opacity: 0.6; transform: translateX(0); }
    to   { opacity: 0.9; transform: translateX(-30px); }
}

.window-dust {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.03) 1px, transparent 2px),
                      radial-gradient(circle at 70% 60%, rgba(255,255,255,0.04) 1px, transparent 2px),
                      radial-gradient(circle at 20% 80%, rgba(255,255,255,0.02) 1px, transparent 2px),
                      radial-gradient(circle at 80% 20%, rgba(255,255,255,0.03) 1px, transparent 2px);
    background-size: 200px 200px, 300px 300px, 250px 250px, 180px 180px;
    pointer-events: none;
    opacity: 0.7;
}

/* ============== HERO CONTENT ============== */
.hero__content {
    position: absolute;
    z-index: 10;
    bottom: 130px;
    left: 100px;
    max-width: 640px;
    color: var(--ink);
    text-shadow: 0 2px 24px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.6);
}

.hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(14, 20, 24, 0.55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(244, 236, 221, 0.2);
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 28px;
}
.hero__tag .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5BB85B;
    box-shadow: 0 0 10px #5BB85B;
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.hero__title {
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;
    font-size: clamp(48px, 8vw, 120px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
}
.hero__title .line { display: block; }
.hero__title .line--accent {
    color: var(--accent-soft);
    font-style: italic;
    font-weight: 300;
    font-size: 0.7em;
    margin-top: 6px;
}

.hero__sub {
    font-size: 19px;
    line-height: 1.5;
    color: rgba(244, 236, 221, 0.98);
    max-width: 560px;
    margin-bottom: 36px;
    text-shadow: 0 1px 12px rgba(0,0,0,0.8);
}

.hero__actions {
    display: flex;
    gap: 14px;
    margin-bottom: 56px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 500;
    transition: transform 0.2s, background 0.2s, border-color 0.2s;
    cursor: pointer;
}
.btn--primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 12px 32px -8px rgba(217, 116, 72, 0.6);
}
.btn--primary:hover { background: var(--accent-deep); transform: translateY(-2px); }
.btn--ghost {
    background: rgba(244, 236, 221, 0.08);
    color: var(--ink);
    border: 1px solid rgba(244, 236, 221, 0.2);
    backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(244, 236, 221, 0.15); border-color: rgba(244, 236, 221, 0.35); }
.btn--large { padding: 18px 32px; font-size: 16px; width: 100%; justify-content: center; }

.hero__stats {
    display: flex;
    gap: 48px;
    padding-top: 28px;
    border-top: 1px solid rgba(244, 236, 221, 0.15);
}
.stat__num {
    font-family: 'Unbounded', sans-serif;
    font-size: 28px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 4px;
}
.stat__label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-mute);
}

.hero__scroll {
    position: absolute;
    z-index: 10;
    right: 70px;
    bottom: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: rgba(244, 236, 221, 0.7);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.scroll-mouse {
    width: 24px;
    height: 38px;
    border: 1.5px solid rgba(244, 236, 221, 0.7);
    border-radius: 12px;
    position: relative;
}
.scroll-mouse__wheel {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 3px;
    height: 6px;
    background: rgba(244, 236, 221, 0.9);
    border-radius: 2px;
    transform: translateX(-50%);
    animation: scrollWheel 1.6s ease-in-out infinite;
}
@keyframes scrollWheel {
    0%   { transform: translate(-50%, 0); opacity: 1; }
    100% { transform: translate(-50%, 14px); opacity: 0; }
}

@media (max-width: 980px) {
    .hero__content { left: 60px; right: 60px; bottom: 110px; }
    .hero__stats { gap: 28px; }
    .hero__scroll { display: none; }
}

@media (max-width: 640px) {
    .hero__content { left: 40px; right: 40px; bottom: 100px; }
    .hero__stats { gap: 18px; flex-wrap: wrap; }
    .stat__num { font-size: 22px; }
    .hero__actions { flex-direction: column; align-items: stretch; }
    .btn { justify-content: center; }
}

/* ============== TOURS ============== */
.tours {
    padding: 140px 0;
    background: transparent;
    position: relative;
}

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

@media (max-width: 1100px) {
    .tours__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .tours__grid { grid-template-columns: 1fr; }
    .tours { padding: 80px 0; }
}

.tour-card {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.4s ease, border-color 0.3s;
    position: relative;
    display: flex;
    flex-direction: column;
}
.tour-card:hover {
    transform: translateY(-6px);
    border-color: var(--line-strong);
}
.tour-card--featured { grid-row: span 1; }

.tour-card__num {
    position: absolute;
    top: 20px;
    right: 24px;
    font-family: 'Unbounded', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: var(--ink-dim);
    z-index: 2;
}

.tour-card__art {
    height: 240px;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Each tour gets a hand-crafted SVG-as-background landscape */
.tour-art--canyon {
    background:
        linear-gradient(180deg, #D4B388 0%, #B8915C 40%, #6E4A2A 100%),
        radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.4), transparent 60%);
    position: relative;
    overflow: hidden;
}
.tour-art--canyon::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(45deg, transparent 30%, rgba(110, 74, 42, 0.6) 70%),
        linear-gradient(-45deg, transparent 40%, rgba(140, 96, 56, 0.4) 80%);
}
.tour-art--canyon::after {
    content: '';
    position: absolute;
    bottom: 0; left: 10%; right: 10%;
    height: 30%;
    background: linear-gradient(180deg, #4A7AAA 0%, #2D5588 100%);
    clip-path: polygon(0 100%, 100% 100%, 90% 30%, 70% 0%, 30% 20%, 10% 0%);
    opacity: 0.7;
}

.tour-art--village {
    background: linear-gradient(180deg, #B8A085 0%, #7A634A 100%);
    position: relative;
    overflow: hidden;
}
.tour-art--village::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, #4A3A2A 5%, transparent 30%),
        radial-gradient(circle at 30% 70%, #3A2E22 8%, transparent 12%),
        radial-gradient(circle at 50% 65%, #4A3A2A 6%, transparent 10%),
        radial-gradient(circle at 70% 75%, #2D2418 10%, transparent 14%),
        radial-gradient(circle at 20% 80%, #3A2E22 7%, transparent 11%);
}
.tour-art--village::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(0deg, transparent 50%, rgba(58, 46, 34, 0.5) 51%, transparent 52%),
        linear-gradient(0deg, transparent 65%, rgba(74, 58, 42, 0.4) 66%, transparent 67%);
    background-size: 100% 30px, 100% 50px;
}

.tour-art--peak {
    background: linear-gradient(180deg, #88A0C8 0%, #4A6B95 100%);
    position: relative;
    overflow: hidden;
}
.tour-art--peak::before {
    content: '';
    position: absolute;
    bottom: 0; left: -10%; right: -10%;
    height: 80%;
    background: linear-gradient(180deg, #3D5375 0%, #1F2D45 100%);
    clip-path: polygon(0 100%, 100% 100%, 95% 40%, 80% 60%, 60% 10%, 40% 50%, 20% 30%, 5% 60%);
}
.tour-art--peak::after {
    content: '';
    position: absolute;
    bottom: 30%; left: -10%; right: -10%;
    height: 50%;
    background: #FFFFFF;
    clip-path: polygon(38% 100%, 42% 35%, 60% 5%, 78% 30%, 62% 100%);
    opacity: 0.95;
}

.tour-art--sea {
    background: linear-gradient(180deg, #FFD9A8 0%, #FFA878 30%, #6FB5D0 60%, #2E6E92 100%);
    position: relative;
    overflow: hidden;
}
.tour-art--sea::before {
    content: '';
    position: absolute;
    top: 30%;
    right: 25%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFE5B4 0%, #FFA868 80%);
    box-shadow: 0 0 40px rgba(255, 168, 104, 0.6);
}
.tour-art--sea::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 40%;
    background:
        repeating-linear-gradient(0deg, transparent 0, transparent 8px, rgba(255,255,255,0.15) 9px, transparent 10px);
}

.tour-card__body { padding: 24px 26px 26px; flex: 1; display: flex; flex-direction: column; }
.tour-card__meta { display: flex; gap: 8px; margin-bottom: 14px; }
.tag {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 100px;
    background: rgba(244, 236, 221, 0.08);
    color: var(--ink-mute);
}
.tour-card h3 {
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.15;
    margin-bottom: 10px;
}
.tour-card__body > p {
    color: var(--ink-mute);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 22px;
    flex: 1;
}

.tour-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.price {
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: var(--accent-soft);
}
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink-mute);
    transition: gap 0.2s, color 0.2s;
}
.link-arrow:hover { color: var(--accent-soft); gap: 10px; }
/* reset для <button class="link-arrow"> — нужен, чтобы кнопка карточки тура выглядела как ссылка */
button.link-arrow { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }

/* ============== CYLINDRIX 3D GALLERY ============== */
.cyl-section {
    padding: 140px 0 100px;
    background: transparent;
    position: relative;
    overflow: hidden;
}

.cyl-section::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(217, 116, 72, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.cylinder-stage {
    position: relative;
    height: 620px;
    margin: 40px auto 20px;
    perspective: 2400px;
    perspective-origin: 50% 50%;
}

.cylinder {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 460px;
    height: 540px;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateY(0deg);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.cylinder.is-spinning {
    animation: cylinderAuto 40s linear infinite;
}
@keyframes cylinderAuto {
    from { transform: translate(-50%, -50%) rotateY(0deg); }
    to   { transform: translate(-50%, -50%) rotateY(-360deg); }
}

.panel {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    /* 8 panels — 360deg / 8 = 45deg between */
    /* radius = width / (2 * tan(22.5°)). For 460 ≈ 555 */
    transform: rotateY(calc(var(--i) * 45deg)) translateZ(555px);
}

.panel__inner {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    overflow: hidden;
    background: var(--bg-elev);
    box-shadow:
        0 30px 60px -20px rgba(0,0,0,0.6),
        inset 0 0 0 1px rgba(244, 236, 221, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    color: #fff;
    transition: transform 0.4s, box-shadow 0.4s;
}
.panel__inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85) 100%);
    z-index: 1;
}
.panel__inner > * { position: relative; z-index: 2; }

.panel__no {
    position: absolute;
    top: 20px;
    left: 24px;
    font-family: 'Unbounded', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.1em;
}

.panel__inner h4 {
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.1;
    margin-bottom: 6px;
}
.panel__inner p {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
}

/* Panel art backgrounds — pure CSS scenes */
.panel--sulak {
    background:
        linear-gradient(180deg, #88A8C8 0%, #4A6B95 35%, #2D4A6E 70%, #1A2D45 100%);
    position: relative;
}
.panel--sulak::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 80%, #2A5878 0%, transparent 50%),
        linear-gradient(45deg, transparent 30%, rgba(74, 107, 149, 0.4) 70%),
        linear-gradient(-45deg, transparent 30%, rgba(45, 74, 110, 0.5) 70%);
}

.panel--gamsutl {
    background: linear-gradient(180deg, #C8B595 0%, #8A6E4F 50%, #4A3A28 100%);
    position: relative;
}
.panel--gamsutl::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 40% 70%, #3A2E22 5%, transparent 8%),
        radial-gradient(circle at 60% 65%, #4A3A28 6%, transparent 10%),
        radial-gradient(circle at 50% 75%, #2D2418 8%, transparent 12%),
        radial-gradient(circle at 30% 80%, #3A2E22 5%, transparent 8%),
        linear-gradient(0deg, #2A1F12 0%, transparent 30%);
}

.panel--derbent {
    background: linear-gradient(180deg, #FFD8A0 0%, #E8A878 50%, #B87850 100%);
    position: relative;
}
.panel--derbent::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, #6E4A2A 0%, transparent 25%),
        repeating-linear-gradient(90deg, transparent 0, transparent 22px, rgba(110, 74, 42, 0.5) 23px, transparent 24px);
}

.panel--shalbuzdag {
    background: linear-gradient(180deg, #A0B5D0 0%, #6080A8 50%, #2D4878 100%);
    position: relative;
}
.panel--shalbuzdag::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 40%, #FFFFFF 45%, transparent 55%),
        linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.6) 45%, transparent 55%);
    clip-path: polygon(0 100%, 100% 100%, 95% 50%, 70% 25%, 50% 35%, 30% 15%, 10% 40%);
}

.panel--sarykum {
    background: linear-gradient(180deg, #FFE0B5 0%, #E8B878 50%, #B8804A 100%);
    position: relative;
}
.panel--sarykum::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 70%, #C8954A 0%, transparent 50%),
        radial-gradient(ellipse at 70% 75%, #B8804A 0%, transparent 60%);
}

.panel--gunib {
    background: linear-gradient(180deg, #B0C5A0 0%, #6B8A5C 50%, #3A5A38 100%);
    position: relative;
}
.panel--gunib::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, #2A4225 0%, transparent 25%),
        radial-gradient(ellipse at 50% 60%, #4A6B40 0%, transparent 50%);
}

.panel--karadakh {
    background: linear-gradient(180deg, #6A5848 0%, #3A2E22 50%, #1A140D 100%);
    position: relative;
}
.panel--karadakh::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, #2A1F14 0%, transparent 30%, transparent 70%, #2A1F14 100%),
        radial-gradient(ellipse at 50% 30%, #C8B595 0%, transparent 30%);
}

.panel--caspian {
    background: linear-gradient(180deg, #88B8D8 0%, #4A88B0 50%, #1F4868 100%);
    position: relative;
}
.panel--caspian::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 25%, #FFE5B4 0%, transparent 8%),
        repeating-linear-gradient(0deg, transparent 0, transparent 14px, rgba(255,255,255,0.12) 15px, transparent 16px);
}

.cylinder-reflection {
    position: absolute;
    left: 50%;
    bottom: -60px;
    transform: translateX(-50%);
    width: 700px;
    max-width: 90%;
    height: 80px;
    background: radial-gradient(ellipse at center, rgba(217, 116, 72, 0.15) 0%, transparent 70%);
    filter: blur(12px);
    pointer-events: none;
}

.cyl-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 50px;
}

.cyl-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(244, 236, 221, 0.06);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.cyl-btn:hover { background: var(--accent); border-color: var(--accent); transform: scale(1.05); }

.cyl-hint {
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

/* Tablets — proportionally smaller but still wide-format panels */
@media (max-width: 980px) {
    .cylinder-stage { height: 500px; margin: 30px auto 16px; transform: translateY(190px); }
    .cylinder { width: 360px; height: 420px; }
    /* radius ≈ 360 / (2 * tan(22.5°)) ≈ 434 */
    .panel { transform: rotateY(calc(var(--i) * 45deg)) translateZ(434px); }
    .panel__inner { padding: 20px; border-radius: 20px; }
    .panel__inner h4 { font-size: 18px; }
    .panel__inner p { font-size: 12px; }
    .panel__no { top: 16px; left: 20px; font-size: 12px; }
    .cyl-controls { gap: 16px; margin-top: 30px; }
    .cyl-btn { width: 46px; height: 46px; }
    .cyl-hint { font-size: 11px; letter-spacing: 0.12em; max-width: 140px; text-align: center; }
}

/* Phones */
@media (max-width: 600px) {
    .cyl-section { padding: 70px 0 60px; }
    .cylinder-stage { height: 460px; margin: 24px auto 12px; }
    .cylinder { width: 320px; height: 380px; }
    /* radius ≈ 320 / (2 * tan(22.5°)) ≈ 386 */
    .panel { transform: rotateY(calc(var(--i) * 45deg)) translateZ(386px); }
    .panel__inner { padding: 18px; border-radius: 18px; }
    .panel__inner h4 { font-size: 17px; }
    .panel__no { top: 14px; left: 18px; font-size: 11px; }
}

@media (max-width: 420px) {
    .cylinder-stage { height: 400px; }
    .cylinder { width: 270px; height: 320px; }
    /* radius ≈ 270 / (2 * tan(22.5°)) ≈ 326 */
    .panel { transform: rotateY(calc(var(--i) * 45deg)) translateZ(326px); }
    .panel__inner { padding: 16px; }
    .panel__inner h4 { font-size: 16px; }
    .panel__inner p { font-size: 11px; }
}

/* ============== ABOUT ============== */
.about {
    padding: 140px 0;
    background: transparent;
    border-top: 1px solid var(--line);
}

.about__inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: center;
}

@media (max-width: 980px) {
    .about__inner { grid-template-columns: 1fr; gap: 60px; }
    .about { padding: 80px 0; }
}

.about__text > p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-mute);
    margin-bottom: 18px;
    max-width: 520px;
}

.about__features {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 480px) {
    .about__features { grid-template-columns: 1fr; }
}

.feature {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.feature__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(217, 116, 72, 0.12);
    color: var(--accent-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.feature__icon svg { width: 20px; height: 20px; }
.feature h5 {
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 4px;
}
.feature p { font-size: 13px; color: var(--ink-mute); line-height: 1.4; }

.about__visual {
    position: relative;
    height: 560px;
}

.visual-card {
    position: absolute;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--line-strong);
    transition: transform 0.4s ease;
}
.visual-card:hover { transform: translateY(-4px) rotate(0deg); }

.visual-card__art {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.visual-card__label {
    position: absolute;
    bottom: 16px;
    left: 18px;
    right: 18px;
    background: rgba(14, 20, 24, 0.7);
    backdrop-filter: blur(6px);
    padding: 8px 14px;
    border-radius: 100px;
    font-size: 12px;
    letter-spacing: 0.05em;
    color: #fff;
}

.visual-card--1 {
    width: 60%;
    height: 55%;
    top: 0;
    left: 0;
    transform: rotate(-2deg);
}
.visual-card--2 {
    width: 50%;
    height: 50%;
    top: 25%;
    right: 0;
    transform: rotate(2deg);
}
.visual-card--3 {
    width: 65%;
    height: 40%;
    bottom: 0;
    left: 10%;
    transform: rotate(-1deg);
}

.art--mountain {
    background: linear-gradient(180deg, #88A0C8 0%, #4A6B95 60%, #2D4878 100%);
    position: relative;
}
.art--mountain::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.7) 45%, transparent 55%);
    clip-path: polygon(0 100%, 100% 100%, 90% 60%, 70% 30%, 50% 45%, 30% 20%, 10% 50%);
}

.art--village {
    background: linear-gradient(180deg, #B8A085 0%, #7A634A 100%);
    position: relative;
}
.art--village::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 70%, #3A2E22 5%, transparent 9%),
        radial-gradient(circle at 50% 65%, #4A3A2A 4%, transparent 7%),
        radial-gradient(circle at 70% 75%, #2D2418 6%, transparent 10%),
        linear-gradient(0deg, #4A3A2A 0%, transparent 30%);
}

.art--sea {
    background: linear-gradient(180deg, #FFD9A8 0%, #FFA878 25%, #6FB5D0 50%, #2E6E92 100%);
}

@media (max-width: 980px) {
    .about__visual { height: 460px; }
}

/* ============== GALLERY ============== */
.gallery {
    padding: 140px 0;
    background: transparent;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.gallery__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 220px 220px;
    gap: 16px;
}

@media (max-width: 980px) {
    .gallery__grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: 180px 180px 180px; }
    .gallery { padding: 80px 0; }
}
@media (max-width: 600px) {
    .gallery__grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(6, 160px); }
}

.gallery__item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s;
}
.gallery__item:hover { transform: scale(1.02); }
.gallery__item span {
    position: absolute;
    bottom: 16px;
    left: 18px;
    z-index: 2;
    font-family: 'Unbounded', sans-serif;
    font-size: 14px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.gallery__item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);
    z-index: 1;
}

.gallery-art-1 { grid-column: span 3; grid-row: span 1;
    background: linear-gradient(180deg, #88A8C8 0%, #4A6B95 50%, #2D4A6E 100%); }
.gallery-art-1::after { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 30%, rgba(74, 107, 149, 0.6) 70%); }

.gallery-art-2 { grid-column: span 2; grid-row: span 1;
    background: linear-gradient(180deg, #B8A085 0%, #5A4632 100%);
    background-image:
        radial-gradient(circle at 30% 70%, #3A2E22 8%, transparent 12%),
        radial-gradient(circle at 60% 65%, #4A3A2A 6%, transparent 10%),
        linear-gradient(180deg, #B8A085 0%, #5A4632 100%);
}

.gallery-art-3 { grid-column: span 1; grid-row: span 2;
    background: linear-gradient(180deg, #88A0C8 0%, #4A6B95 50%, #FFFFFF 60%, #2D4878 100%);
}

.gallery-art-4 { grid-column: span 2; grid-row: span 1;
    background: linear-gradient(180deg, #FFD8A0 0%, #B87850 100%);
    background-image:
        repeating-linear-gradient(90deg, transparent 0, transparent 22px, rgba(110, 74, 42, 0.5) 23px, transparent 24px),
        linear-gradient(180deg, #FFD8A0 0%, #B87850 100%);
}

.gallery-art-5 { grid-column: span 2; grid-row: span 1;
    background: linear-gradient(180deg, #FFE0B5 0%, #B8804A 100%);
}

.gallery-art-6 { grid-column: span 1; grid-row: span 1;
    background: linear-gradient(180deg, #FFD9A8 0%, #6FB5D0 50%, #2E6E92 100%);
}

@media (max-width: 980px) {
    .gallery-art-1 { grid-column: span 4; }
    .gallery-art-2 { grid-column: span 2; }
    .gallery-art-3 { grid-column: span 2; grid-row: span 1; }
    .gallery-art-4 { grid-column: span 2; }
    .gallery-art-5 { grid-column: span 2; }
    .gallery-art-6 { grid-column: span 4; }
}
@media (max-width: 600px) {
    .gallery__grid > * { grid-column: span 2 !important; grid-row: span 1 !important; }
}

/* ============== CONTACT ============== */
.contact {
    padding: 140px 0;
    background: transparent;
}

.contact__inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: start;
}

@media (max-width: 980px) {
    .contact__inner { grid-template-columns: 1fr; gap: 50px; }
    .contact { padding: 80px 0; }
}

.contact__head > p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-mute);
    margin-bottom: 30px;
    max-width: 480px;
}

.contact__info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 30px;
}

.contact-line {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    font-size: 15px;
    transition: color 0.2s;
}
.contact-line:hover { color: var(--accent-soft); }
.contact-line svg { color: var(--accent); }

.contact__form {
    background: var(--bg-soft);
    border: 1px solid var(--line-strong);
    border-radius: 24px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

@media (max-width: 540px) {
    .contact__form { padding: 28px 24px; }
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
}
.field input,
.field select,
.field textarea {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    color: var(--ink);
    font-size: 15px;
    transition: border-color 0.2s;
    outline: none;
    font-family: inherit;
    resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-dim); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) {
    .field-row { grid-template-columns: 1fr; }
}

.form-note {
    font-size: 12px;
    color: var(--ink-dim);
    text-align: center;
    margin-top: -4px;
}

/* ============== FOOTER ============== */
.footer {
    background: transparent;
    padding: 80px 0 30px;
    border-top: 1px solid var(--line);
}

.footer__inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

@media (max-width: 768px) {
    .footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
}

.footer__brand p {
    margin-top: 16px;
    color: var(--ink-mute);
    font-size: 14px;
    max-width: 280px;
}

.footer__col h6 {
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 18px;
    color: var(--ink);
}
.footer__col a {
    display: block;
    color: var(--ink-mute);
    font-size: 14px;
    padding: 6px 0;
    transition: color 0.2s;
}
.footer__col a:hover { color: var(--accent-soft); }

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 32px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink-dim);
}
@media (max-width: 900px) {
    .footer__bottom { justify-content: center; text-align: center; gap: 10px 24px; }
}
@media (max-width: 540px) {
    .footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ============== UTILITIES / REVEAL ============== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

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

/* ============================================================
   FULLPAGE adaptations — make every section fit 100vh
   (overrides padding/heights from individual section blocks)
   ============================================================ */

/* TOURS — 4 cards in one row, tighter padding so they fit one screen */
.pages > .tours { padding: 110px 0 60px; }
.pages > .tours .tour-card__art { height: 150px; }
.pages > .tours .tour-card__body { padding: 18px 22px 20px; }
.pages > .tours .tour-card__body > p { margin-bottom: 14px; -webkit-line-clamp: 3; }
.pages > .tours .tour-card h3 { font-size: 19px; margin-bottom: 8px; }
.pages > .tours .tour-card__foot { padding-top: 12px; }
.pages > .tours .section-head { margin-bottom: 30px; }
.pages > .tours .section-title { margin-top: 14px; margin-bottom: 14px; font-size: clamp(32px, 4vw, 56px); }
.pages > .tours .section-sub { font-size: 15px; }
.pages > .tours .tours__grid { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 18px; }

/* CYLINDER section — title pinned to top, controls pinned to bottom,
   cylinder sits at the geometric center of the viewport (not the center
   of the gap between them). Cylinder height adapts to viewport height
   so it never crowds the title.
   Only active in fullpage mode (>980px); mobile keeps natural flow. */
@media (min-width: 981px) {
    .pages > .cyl-section {
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .pages > .cyl-section > .container:first-child {
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        z-index: 2;
    }
    .pages > .cyl-section .section-head { margin-bottom: 0; }
    .pages > .cyl-section .section-title { font-size: clamp(28px, 3.4vw, 48px); margin-bottom: 8px; }
    .pages > .cyl-section .section-sub { font-size: 15px; }
    .pages > .cyl-section .cylinder-stage {
        flex: 0 0 auto;
        height: 0;
        margin: 0 auto;
        transform: translateY(190px);
    }
    .pages > .cyl-section .cylinder {
        /* fluid: shrinks with viewport so it always clears the title.
           480 reserved for title (top:70 + ~150) + controls (bottom:30 + ~50) + buffer */
        height: min(540px, calc(100vh - 480px));
    }
    .pages > .cyl-section .cyl-controls {
        position: absolute;
        bottom: 30px;
        left: 0;
        right: 0;
        z-index: 2;
        margin-top: 0;
        padding-top: 0;
    }
}

/* ABOUT — vertical centering of two columns; trim spacing */
.pages > .about { padding: 110px 0 60px; }
.pages > .about .about__inner { gap: 60px; }
.pages > .about .section-title { font-size: clamp(30px, 4vw, 56px); margin-bottom: 16px; }
.pages > .about .about__text > p { font-size: 15px; line-height: 1.55; margin-bottom: 12px; }
.pages > .about .about__features { margin-top: 26px; gap: 18px; }
.pages > .about .about__visual { height: 480px; }

/* GALLERY — shorter rows so the grid fits between header and bottom */
.pages > .gallery { padding: 100px 0 60px; }
.pages > .gallery .section-head { margin-bottom: 28px; }
.pages > .gallery .section-title { font-size: clamp(30px, 4vw, 56px); margin-bottom: 0; }
.pages > .gallery .gallery__grid { grid-template-rows: 180px 180px; gap: 14px; }

/* CONTACT — tighter padding so form fits */
.pages > .contact { padding: 100px 0 50px; }
.pages > .contact .contact__inner { gap: 60px; }
.pages > .contact .section-title { font-size: clamp(32px, 4vw, 56px); }
.pages > .contact .contact__head > p { margin-bottom: 18px; font-size: 15px; }
.pages > .contact .contact__info { margin-top: 22px; gap: 12px; }
.pages > .contact .contact__form { padding: 28px 30px; gap: 14px; }

/* FOOTER — compact, treated as final page */
.pages > .footer { padding: 80px 0 30px; }
.pages > .footer .footer__inner { margin-bottom: 36px; gap: 50px; }

/* On shorter screens, slightly looser type doesn't fit — scale down further */
@media (max-height: 760px) {
    .pages > .tours { padding: 90px 0 40px; }
    .pages > .tours .tour-card__art { height: 120px; }
    .pages > .tours .section-title { font-size: clamp(26px, 3vw, 42px); margin-bottom: 8px; }
    .pages > .cyl-section > .container:first-child { top: 50px; }
    .pages > .cyl-section .section-title { font-size: clamp(24px, 2.8vw, 38px); }
    .pages > .cyl-section .cyl-controls { bottom: 20px; }
    .pages > .about { padding: 90px 0 40px; }
    .pages > .about .about__visual { height: 400px; }
    .pages > .about .about__features { margin-top: 18px; gap: 14px; }
    .pages > .gallery { padding: 90px 0 40px; }
    .pages > .gallery .gallery__grid { grid-template-rows: 150px 150px; }
    .pages > .contact { padding: 90px 0 40px; }
    .pages > .contact .contact__form { padding: 22px 24px; gap: 12px; }
    .pages > .footer { padding: 60px 0 24px; }
    .pages > .footer .footer__inner { margin-bottom: 24px; gap: 40px; }
}

/* ============================================================
   MOBILE / TABLET — disable fullpage, use native scroll
   On screens ≤980px wide, sections flow naturally; finger-scroll
   replaces page-flip. Layout is tightened to phone widths.
   ============================================================ */
@media (max-width: 980px) {
    html, body {
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .pages {
        height: auto;
        transform: none !important;
        transition: none !important;
        will-change: auto;
    }
    .pages > section,
    .pages > .footer {
        height: auto;
        min-height: 0;
        overflow: visible;
        display: block;
    }
    /* Keep video hero full-screen on mobile (raise specificity to beat .pages > section above) */
    .pages > .hero {
        height: 100svh;
        min-height: 560px;
    }

    .pages-dots { display: none; }

    /* Reset most padding overrides made for fullpage so content breathes */
    .pages > .tours          { padding: 80px 0 60px; }
    .pages > .cyl-section    { padding: 80px 0 60px; }
    .pages > .about          { padding: 80px 0 60px; }
    .pages > .gallery        { padding: 80px 0 60px; }
    .pages > .reviews        { padding: 80px 0 60px; }
    .pages > .contact        { padding: 80px 0 60px; }
    .pages > .footer         { padding: 60px 0 30px; }

    /* TOURS — show all 4 cards, single column */
    .pages > .tours .tours__grid { grid-template-columns: 1fr; gap: 16px; }
    .pages > .tours .tour-card:nth-child(n+3) { display: flex; }
    .pages > .tours .tour-card__art { height: 200px; }
    .pages > .tours .section-title { font-size: clamp(28px, 7vw, 40px); }

    /* CYLINDER — smaller stage that fits phone; reset desktop translateY so it doesn't sink into the next section */
    .pages > .cyl-section .cylinder-stage { height: 320px; margin: 20px auto 14px; transform: translateY(50px); }
    .pages > .cyl-section .section-title { font-size: clamp(26px, 6.5vw, 38px); }

    /* ABOUT — single column */
    .pages > .about .about__inner { grid-template-columns: 1fr; gap: 30px; }
    .pages > .about .about__visual { height: 320px; }
    .pages > .about .section-title { font-size: clamp(28px, 7vw, 42px); }
    .pages > .about .about__features { grid-template-columns: 1fr 1fr; gap: 16px; }

    /* GALLERY — auto rows */
    .pages > .gallery .gallery__grid { grid-template-rows: auto; }
    .pages > .gallery .section-title { font-size: clamp(26px, 6.5vw, 40px); }

    /* REVIEWS — single column */
    .pages > .reviews .section-title { font-size: clamp(26px, 6.5vw, 38px); }
    .pages > .reviews .reviews__grid { grid-template-columns: 1fr; gap: 14px; }

    /* CONTACT — single column */
    .pages > .contact .contact__inner { grid-template-columns: 1fr; gap: 30px; }
    .pages > .contact .section-title { font-size: clamp(28px, 7vw, 42px); }
    .pages > .contact .contact__form { padding: 24px 22px; }

    /* HERO content breathing room */
    .hero__content { left: 24px; right: 24px; bottom: 80px; }
    .hero__title { font-size: clamp(42px, 11vw, 80px); }
    .hero__sub { font-size: 14px; }
    .hero__stats { gap: 14px; }
    .hero__scroll { display: none; }

    /* Burger nav */
    .nav__menu { display: none; }
    .nav__cta { display: none; }
    .nav__burger { display: flex; }
    .nav__menu.is-open {
        display: flex;
        position: fixed;
        top: 64px; left: 0; right: 0;
        flex-direction: column;
        background: rgba(14, 20, 24, 0.97);
        backdrop-filter: blur(6px);
        padding: 18px 24px;
        gap: 4px;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        z-index: 90;
    }
    .nav__menu.is-open li { width: 100%; }
    .nav__menu.is-open a {
        display: block;
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
        font-size: 15px;
    }
    .nav__menu.is-open li:last-child a { border-bottom: 0; }

    /* MODALS — full-bleed on mobile */
    .place-modal__panel { width: 100%; margin: 0; min-height: 100svh; border-radius: 0; }
    .place-modal__hero { height: 220px; }
    .place-modal__body { padding: 24px 20px 32px; }
    .place-modal__title { font-size: clamp(26px, 7vw, 36px); }
    .place-modal__desc { font-size: 14.5px; }
    .place-modal__facts { grid-template-columns: 1fr; gap: 10px; margin-bottom: 24px; }
    .place-fact { padding: 14px 16px; }
    .place-modal__gallery {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 140px;
        gap: 8px;
    }
    .place-modal__gallery > .place-photo--wide { grid-column: span 2; }
    .place-modal__close { top: 14px; right: 14px; }
    .tour-days { padding-left: 24px; margin-left: 8px; }
    .tour-day::before { left: -32px; }
    .tour-modal__cta { flex-direction: column; align-items: stretch; }
    .tour-modal__cta .btn { width: 100%; justify-content: center; }
    .policy-modal .place-modal__body { padding: 50px 20px 28px; }
}

/* Very narrow phones */
@media (max-width: 480px) {
    .pages > .about .about__features { grid-template-columns: 1fr; }
    .container { padding: 0 16px; }
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn { justify-content: center; }
    .pages > .tours .tour-card__art { height: 170px; }
    .pages > .cyl-section .cylinder-stage { height: 280px; }
    .pages > .cyl-section .cylinder { width: 220px; height: 280px; }
    .pages > .cyl-section .panel { transform: rotateY(calc(var(--i) * 45deg)) translateZ(265px); }
    .review-card { padding: 20px 18px; }
}

/* ============================================================
   REAL PHOTOS — override the SVG-style gradient placeholders
   Source: Wikimedia Commons (CC BY-SA / public domain)
   ============================================================ */

/* TOURS — replace illustration art with real photos */
.tour-card__art {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.tour-art--canyon { background-image: url('images/sulak.jpg'); }
.tour-art--canyon::before,
.tour-art--canyon::after { display: none; }

.tour-art--village { background-image: url('images/gamsutl.webp'); }
.tour-art--village::before,
.tour-art--village::after { display: none; }

.tour-art--peak { background-image: url('images/shalbuzdag.webp'); }
.tour-art--peak::before,
.tour-art--peak::after { display: none; }

.tour-art--sea { background-image: url('images/derbent.jpg'); }
.tour-art--sea::before,
.tour-art--sea::after { display: none; }

/* CYLINDER PANELS — real photos */
.panel--sulak,
.panel--gamsutl,
.panel--derbent,
.panel--shalbuzdag,
.panel--sarykum,
.panel--gunib,
.panel--karadakh,
.panel--caspian {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.panel--sulak { background-image: url('images/sulak.jpg'); }
.panel--gamsutl { background-image: url('images/gamsutl.webp'); }
.panel--derbent { background-image: url('images/derbent.jpg'); }
.panel--shalbuzdag { background-image: url('images/shalbuzdag.webp'); }
.panel--sarykum { background-image: url('images/sarykum.webp'); }
.panel--gunib { background-image: url('images/gunib.webp'); }
.panel--karadakh { background-image: url('images/karadakh.jpg'); }
.panel--caspian { background-image: url('images/caspian.webp'); }
.panel--sulak::after,
.panel--gamsutl::after,
.panel--derbent::after,
.panel--shalbuzdag::after,
.panel--sarykum::after,
.panel--gunib::after,
.panel--karadakh::after,
.panel--caspian::after { display: none; }
/* Hide the "01"-"08" numbers on cylinder panels */
.cylinder .panel__no { display: none; }

/* GALLERY — real photos */
.gallery__item[class*="gallery-art-"] {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.gallery-art-1 { background-image: url('images/sulak.jpg'); }
.gallery-art-1::after { display: none; }
.gallery-art-2 { background-image: url('images/gamsutl.webp'); }
.gallery-art-3 { background-image: url('images/shalbuzdag.webp'); }
.gallery-art-4 { background-image: url('images/derbent.jpg'); }
.gallery-art-5 { background-image: url('images/sarykum.webp'); }
.gallery-art-6 { background-image: url('images/caspian.webp'); }

/* ABOUT — visual cards with real photos */
.art--mountain,
.art--village,
.art--sea {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.art--mountain { background-image: url('images/mountains.webp'); }
.art--mountain::after { display: none; }
.art--village { background-image: url('images/chokh.webp'); }
.art--village::after { display: none; }
.art--sea { background-image: url('images/caspian.webp'); }

/* ============================================================
   CYLINDER PANELS — hover zoom + clickable
   ============================================================ */
.panel { cursor: pointer; }
.panel__inner {
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                background-size 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    background-size: 105% auto !important;
    background-position: center center !important;
}
.panel__inner:hover {
    background-size: 130% auto !important;
    box-shadow:
        0 40px 80px -20px rgba(0, 0, 0, 0.75),
        inset 0 0 0 2px rgba(217, 116, 72, 0.6);
}
.panel__inner:hover .panel__open-hint {
    opacity: 1;
    transform: translateY(0);
}
.panel__open-hint {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    background: rgba(217, 116, 72, 0.92);
    color: #fff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 12px;
    border-radius: 100px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    backdrop-filter: blur(6px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Touch devices: always show the hint since there's no hover */
@media (hover: none) and (pointer: coarse) {
    .panel__open-hint {
        opacity: 1;
        transform: translateY(0);
    }
    /* Suppress :hover-triggered zoom/glow on touch — sticky tap-hover causes flicker during vertical scroll */
    .panel__inner,
    .panel__inner:hover {
        background-size: 105% auto !important;
        box-shadow:
            0 30px 60px -20px rgba(0,0,0,0.6),
            inset 0 0 0 1px rgba(244, 236, 221, 0.08);
    }
}

/* ============================================================
   PLACE MODAL (lightbox)
   ============================================================ */
.place-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.place-modal.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.place-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 16, 0.85);
    backdrop-filter: blur(6px) saturate(0.9);
    -webkit-backdrop-filter: blur(6px) saturate(0.9);
    cursor: pointer;
}

.place-modal__panel {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    width: calc(100% - 60px);
    margin: 60px auto;
    background: var(--bg-soft);
    border: 1px solid var(--line-strong);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 60px 120px -30px rgba(0, 0, 0, 0.7);
    transform: translateY(40px) scale(0.97);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.4s ease;
}
.place-modal.is-open .place-modal__panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.place-modal__close {
    position: fixed;
    top: 24px;
    right: 28px;
    z-index: 5;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(8, 12, 16, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(244, 236, 221, 0.18);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s, border-color 0.2s;
}
.place-modal__close:hover {
    background: var(--accent);
    transform: scale(1.05);
}

.place-modal__hero {
    height: 380px;
    background-size: cover;
    background-position: center;
    background-color: #1A242B;
    position: relative;
}
.place-modal__hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(19, 27, 32, 0.95) 100%);
}

.place-modal__body {
    padding: 40px 50px 50px;
}

.place-modal__meta { margin-bottom: 22px; }
.place-modal__title {
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.1;
    margin-top: 14px;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}
.place-modal__sub {
    color: var(--accent-soft);
    font-size: 15px;
    letter-spacing: 0.02em;
}

.place-modal__desc {
    color: var(--ink-mute);
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 24px;
    max-width: 720px;
}

.place-modal__facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 36px;
}
.place-fact {
    background: rgba(244, 236, 221, 0.04);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
}
.place-fact__num {
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;
    font-size: 22px;
    color: var(--accent-soft);
    margin-bottom: 4px;
}
.place-fact__label {
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--ink-mute);
    text-transform: uppercase;
}

.place-modal__gallery-title {
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 18px;
    color: var(--ink);
}
.place-modal__gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    gap: 12px;
}
.place-modal__gallery > .place-photo {
    border-radius: 14px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    cursor: zoom-in;
    transition: transform 0.4s, box-shadow 0.4s;
    position: relative;
}
.place-modal__gallery > .place-photo:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.6);
}
.place-modal__gallery > .place-photo--wide { grid-column: span 2; }

@media (max-width: 768px) {
    .place-modal__panel { width: calc(100% - 24px); margin: 24px auto; }
    .place-modal__body { padding: 28px 24px 32px; }
    .place-modal__hero { height: 240px; }
    .place-modal__facts { grid-template-columns: 1fr; }
    .place-modal__gallery {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 160px;
    }
    .place-modal__gallery > .place-photo--wide { grid-column: span 2; }
}

/* When modal is open, suppress fullpage wheel/key by class hook on body */
body.modal-open .pages { pointer-events: none; }
body.modal-open .pages-dots { display: none; }

/* ============================================================
   LIGHTBOX — full-screen photo viewer (used by place / tour gallery)
   ============================================================ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2200;
    background: rgba(6, 9, 12, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}
.lightbox.is-open {
    opacity: 1;
    visibility: visible;
}
.lightbox__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 40px 100px -10px rgba(0, 0, 0, 0.8);
    transform: scale(0.96);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    -webkit-user-drag: none;
}
.lightbox.is-open .lightbox__img { transform: scale(1); }

.lightbox__close,
.lightbox__nav {
    position: absolute;
    top: 50%;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(244, 236, 221, 0.08);
    border: 1px solid rgba(244, 236, 221, 0.18);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
    z-index: 2;
}
.lightbox__close {
    top: 24px;
    right: 24px;
    transform: none;
}
.lightbox__nav--prev {
    left: 24px;
    transform: translateY(-50%);
}
.lightbox__nav--next {
    right: 24px;
    transform: translateY(-50%);
}
.lightbox__close:hover,
.lightbox__nav:hover {
    background: var(--accent);
    border-color: var(--accent);
}
.lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.05); }
.lightbox__nav--next:hover { transform: translateY(-50%) scale(1.05); }

.lightbox__counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Unbounded', sans-serif;
    font-size: 13px;
    letter-spacing: 0.1em;
    color: rgba(244, 236, 221, 0.7);
    background: rgba(14, 20, 24, 0.7);
    padding: 8px 16px;
    border-radius: 100px;
    border: 1px solid rgba(244, 236, 221, 0.12);
}

@media (max-width: 600px) {
    .lightbox { padding: 16px; }
    .lightbox__close { top: 14px; right: 14px; width: 44px; height: 44px; }
    .lightbox__nav { width: 44px; height: 44px; }
    .lightbox__nav--prev { left: 12px; }
    .lightbox__nav--next { right: 12px; }
    .lightbox__counter { bottom: 14px; font-size: 12px; padding: 6px 14px; }
}

/* ============================================================
   TOUR MODAL — day-by-day program timeline + booking CTA
   ============================================================ */
.tour-days {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 36px;
    border-left: 2px solid var(--line-strong);
    padding-left: 28px;
    margin-left: 14px;
    position: relative;
}
.tour-day {
    position: relative;
    padding: 14px 18px;
    background: rgba(244, 236, 221, 0.03);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: border-color 0.2s, background 0.2s;
}
.tour-day:hover {
    border-color: var(--line-strong);
    background: rgba(244, 236, 221, 0.05);
}
.tour-day::before {
    content: '';
    position: absolute;
    left: -38px;
    top: 22px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    border: 4px solid var(--bg-soft);
    box-shadow: 0 0 0 2px var(--accent);
}
.tour-day__num {
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-soft);
    margin-bottom: 6px;
}
.tour-day__title {
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: var(--ink);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
.tour-day__desc {
    color: var(--ink-mute);
    font-size: 14px;
    line-height: 1.55;
}

.tour-modal__cta {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.tour-modal__price-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
    margin-bottom: 4px;
}
.tour-modal__price {
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;
    font-size: 28px;
    color: var(--accent-soft);
}

/* Tour cards: make "Подробнее" link button-style and stop nav */
.tour-card .link-arrow { cursor: pointer; }

/* ============================================================
   REVIEWS section
   ============================================================ */
.reviews {
    padding: 140px 0;
    background: transparent;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 50px;
}
.review-card {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px 26px 22px;
    transition: transform 0.3s, border-color 0.3s;
    display: flex;
    flex-direction: column;
}
.review-card:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
}
.review-card__head {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}
.review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: #fff;
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}
.review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.review-name {
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 2px;
}
.review-meta {
    font-size: 11px;
    color: var(--ink-mute);
    letter-spacing: 0.02em;
}
.review-stars {
    color: #F0B048;
    font-size: 13px;
    letter-spacing: 0.05em;
}
.review-text {
    color: var(--ink-mute);
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 980px) {
    .reviews__grid { grid-template-columns: 1fr 1fr; }
    .reviews { padding: 80px 0; }
}
@media (max-width: 600px) {
    .reviews__grid { grid-template-columns: 1fr; }
}

/* Fullpage adapt for reviews */
.pages > .reviews { padding: 110px 0 60px; }
.pages > .reviews .section-head { margin-bottom: 28px; }
.pages > .reviews .section-title { font-size: clamp(28px, 4vw, 50px); margin-bottom: 0; }
.pages > .reviews .reviews__grid { margin-top: 30px; gap: 16px; }
.pages > .reviews .review-card { padding: 22px 22px 18px; }
.pages > .reviews .review-text { font-size: 13px; }
@media (max-height: 760px) {
    .pages > .reviews { padding: 90px 0 40px; }
    .pages > .reviews .review-card { padding: 18px 18px 14px; }
    .pages > .reviews .review-text { font-size: 12.5px; line-height: 1.5; }
}

/* ============================================================
   SOCIAL MESSENGERS — VK, Telegram, MAX, WhatsApp
   ============================================================ */
.socials {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.social-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 100px;
    border: 1px solid var(--line-strong);
    background: rgba(244, 236, 221, 0.04);
    color: var(--ink);
    font-size: 14px;
    transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.social-link:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    background: rgba(217, 116, 72, 0.08);
}
.social-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.social-link__name { white-space: nowrap; }
.social-link--whatsapp:hover svg { color: #25D366; }
.social-link--telegram:hover svg { color: #2AABEE; }
.social-link--vk:hover svg { color: #07F; }
.social-link--max:hover svg { color: #FF6633; }

.socials--footer .social-link {
    padding: 8px 14px;
    font-size: 13px;
}

/* ============================================================
   COOKIE BANNER + CONSENT
   ============================================================ */
.cookie-banner {
    position: fixed;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 150;
    background: rgba(14, 20, 24, 0.96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 22px;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5);
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s;
    max-width: 920px;
    margin: 0 auto;
}
.cookie-banner.is-visible {
    transform: translateY(0);
    opacity: 1;
}
.cookie-banner__text {
    flex: 1;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-mute);
}
.cookie-banner__text a {
    color: var(--accent-soft);
    text-decoration: underline;
    text-decoration-color: rgba(232, 152, 112, 0.4);
}
.cookie-banner__text a:hover { color: var(--accent); }
.cookie-banner__actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.cookie-banner__actions .btn {
    padding: 10px 22px;
    font-size: 13px;
}
.btn--ghost-sm {
    border: 1px solid var(--line-strong);
    color: var(--ink-mute);
    padding: 10px 18px;
    border-radius: 100px;
    font-size: 13px;
    background: transparent;
    transition: color 0.2s, border-color 0.2s;
}
.btn--ghost-sm:hover { color: var(--ink); border-color: var(--line); }

@media (max-width: 720px) {
    .cookie-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        left: 16px;
        right: 16px;
        bottom: 16px;
        padding: 16px 18px;
    }
    .cookie-banner__actions { width: 100%; }
    .cookie-banner__actions .btn,
    .cookie-banner__actions .btn--ghost-sm { flex: 1; justify-content: center; text-align: center; }
}

/* Consent checkbox in form */
.field-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 12px;
    color: var(--ink-mute);
    line-height: 1.5;
    margin-top: -4px;
}
.field-consent input[type="checkbox"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    flex-shrink: 0;
}
.field-consent a {
    color: var(--accent-soft);
    text-decoration: underline;
    text-decoration-color: rgba(232, 152, 112, 0.4);
}
.field-consent a:hover { color: var(--accent); }

/* Privacy/Policy modal — reuse place-modal styling but text-only */
.policy-modal .place-modal__panel {
    max-width: 820px;
}
.policy-modal .place-modal__hero { display: none; }
.policy-modal .place-modal__body { padding: 60px 50px 50px; }
.policy-content {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.7;
}
.policy-content h2 {
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;
    font-size: 22px;
    margin: 24px 0 10px;
    letter-spacing: -0.01em;
}
.policy-content h3 {
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;
    font-size: 16px;
    margin: 20px 0 8px;
}
.policy-content p { color: var(--ink-mute); margin-bottom: 12px; }
.policy-content ul { color: var(--ink-mute); padding-left: 22px; margin-bottom: 12px; }
.policy-content li { margin-bottom: 6px; }
.policy-content strong { color: var(--ink); }

/* SEO h1 helper — visually hidden but readable for crawlers/screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}