/* gamevoora.com — Revontulet dark */

@font-face {
  font-family: 'Zilla Slab';
  src: url('/assets/fonts/zilla-slab-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Zilla Slab';
  src: url('/assets/fonts/zilla-slab-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Sofia Sans';
  src: url('/assets/fonts/sofia-sans-var.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: optional;
}

:root {
  --c-bg: #10131F;
  --c-surface: #181D2E;
  --c-surface-2: #1F2540;
  --c-line: rgba(237, 241, 247, .09);
  --c-text: #EDF1F7;
  --c-muted: #9AA3B8;
  --c-teal: #35E0B8;
  --c-green: #7CF9A6;
  --c-mag: #C465E8;
  --c-grad: linear-gradient(120deg, #35E0B8 0%, #7CF9A6 100%);
  --acc: var(--c-teal);
  --acc-soft: rgba(53, 224, 184, .13);
  --ease-glide: cubic-bezier(.22, 1, .36, 1);
  --ease-snap: cubic-bezier(.65, 0, .35, 1);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font-d: 'Zilla Slab', 'Georgia', serif;
  --font-b: 'Sofia Sans', 'Segoe UI', sans-serif;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow-1: 0 14px 34px rgba(4, 7, 16, .45);
}
body.cas {
  --acc: #E3B54A;
  --acc-soft: rgba(227, 181, 74, .14);
  --c-grad: linear-gradient(120deg, #E3B54A 0%, #F4D98C 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-b);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
img, video, svg { max-width: 100%; }
img { height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
a, p { overflow-wrap: break-word; word-break: break-word; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-d);
  font-weight: 700;
  line-height: 1.14;
  overflow-wrap: break-word;
  word-break: break-word;
}
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
textarea { resize: none; }
button { background: none; border: 0; cursor: pointer; }
a, button, label, summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button, .btn, .burger, .icon-btn, label, summary {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }

.container { max-width: 1240px; margin: 0 auto; padding-inline: 24px; width: 100%; }
@media (max-width: 520px) { .container { padding-inline: 16px; } }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  border: 1px solid transparent;
  transition: transform .35s var(--ease-glide), box-shadow .35s var(--ease-glide),
    border-color .3s var(--ease-glide), background-position .6s var(--ease-glide), color .3s var(--ease-glide);
  white-space: normal;
  text-align: center;
}
.btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.btn--primary {
  background-image: linear-gradient(120deg, #35E0B8 0%, #7CF9A6 55%, #35E0B8 100%);
  background-size: 220% 100%;
  background-position: 0% 0;
  color: #0A1A15;
  box-shadow: 0 10px 26px rgba(53, 224, 184, .28);
}
body.cas .btn--primary {
  background-image: linear-gradient(120deg, #E3B54A 0%, #F4D98C 55%, #E3B54A 100%);
  color: #1E1503;
  box-shadow: 0 10px 26px rgba(227, 181, 74, .28);
}
.btn--primary:hover { background-position: 95% 0; transform: translateY(-2px); }
.btn--ghost { border-color: var(--c-line); color: var(--c-text); background: rgba(237, 241, 247, .03); }
.btn--ghost:hover { border-color: var(--acc); color: var(--acc); transform: translateY(-2px); }
.btn--sm { padding: 10px 18px; font-size: 15px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
  overflow: visible;
}
.hdr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 12px;
}
.hdr-botrow {
  border-top: 1px solid var(--c-line);
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .45s var(--ease-glide);
}
.site-header[data-fold="true"] .hdr-botrow { grid-template-rows: 0fr; }
.site-header[data-fold="true"] .hdr-bot { padding-block: 0; opacity: 0; }
.hdr-fold {
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 22px;
  border: 1px solid var(--c-line);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #EDF1F7;
  z-index: 55;
  transition: color .3s var(--ease-glide);
}
.hdr-fold:hover { color: var(--acc); }
.hdr-fold svg {
  width: 15px;
  height: 15px;
  transform: rotate(180deg);
  transition: transform .35s var(--ease-snap);
}
.site-header[data-fold="true"] .hdr-fold svg { transform: rotate(0deg); }
.hdr-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-block: 8px;
  min-height: 0;
  overflow: hidden;
  transition: padding .45s var(--ease-glide), opacity .3s var(--ease-glide);
}
.hdr-bot .hdr-actions { margin-left: auto; }
.brand { display: inline-flex; align-items: center; gap: 0; font-family: var(--font-d); font-weight: 700; font-size: 23px; flex: 0 0 auto; letter-spacing: .2px; }
.brand .brand-m { width: 32px; height: 24px; margin: 3px 2px 0; }

.nav { display: flex; align-items: center; justify-content: flex-end; gap: 0; min-width: 0; }
.nav a:not(.nav-cta) { font-weight: 600; font-size: 15.5px; position: relative; padding: 8px 24px; transition: color .3s var(--ease-glide), text-shadow .3s var(--ease-glide); }
.nav a:not(.nav-cta):last-of-type { padding-right: 0; }
.nav a:not(.nav-cta) + a:not(.nav-cta)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 16px;
  background: var(--c-line);
}
.nav a:not(.nav-cta):hover, .nav a.is-active { color: var(--acc); text-shadow: 0 0 18px var(--acc-soft); }

.hdr-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1px solid var(--c-line);
  background: rgba(237, 241, 247, .04);
  color: var(--c-text);
  transition: border-color .3s var(--ease-glide), color .3s var(--ease-glide), transform .3s var(--ease-glide);
}
.icon-btn:hover { border-color: var(--acc); color: var(--acc); transform: translateY(-2px); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn .badge {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 19px; height: 19px;
  padding-inline: 5px;
  border-radius: 999px;
  background: var(--c-grad);
  color: #0A1A15;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 19px;
  text-align: center;
}
body.cas .icon-btn .badge { color: #1E1503; }
.hdr-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin-inline: 6px; transition: color .3s var(--ease-glide); }
.hdr-phone svg { width: 19px; height: 19px; }
.hdr-phone:hover { color: var(--acc); }
.nav-cta { margin-left: 2px; }
.nav-cta.btn { padding: 10px 18px; font-size: 14.5px; }

.burger {
  display: none;
  width: 44px; height: 44px;
  position: relative;
  z-index: 110;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(237, 241, 247, .05);
  border: 1px solid var(--c-line);
  cursor: pointer;
}
.burger span {
  position: absolute;
  left: 12px; right: 12px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease), top .3s var(--ease);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.nav-extra { display: none; }

@media (max-width: 1220px) {
  .burger { display: block; }
  .hdr-phone, .nav-cta, .cb-btn { display: none; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    width: 100%;
    max-width: 100vw;
    max-height: calc(100dvh - var(--header-offset, 64px));
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px 24px 30px;
    background: linear-gradient(165deg, #141828 0%, #1B2138 100%);
    border-top: 1px solid var(--c-line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .3s var(--ease), opacity .25s var(--ease), visibility 0s linear .3s;
  }
  .nav[data-open="true"] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .3s var(--ease), opacity .25s var(--ease), visibility 0s linear 0s;
  }
  .hdr-bot { justify-content: flex-end; padding-block: 7px; }
  .nav a:not(.nav-cta) { width: 100%; padding: 15px 0; font-size: 21px; border-bottom: 1px solid var(--c-line); }
  .nav a:not(.nav-cta) + a:not(.nav-cta)::before { display: none; }
  .nav-extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
  }
  .nav-extra .hdr-phone, .nav-extra .nav-cta { display: inline-flex; margin: 0; }
  .nav-extra .hdr-phone { font-size: 17px; }
}
@media (max-width: 520px) {
  .nav { padding-inline: 16px; }
}

/* Header search panel */
.hdr-search {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  z-index: 90;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .3s var(--ease-glide), opacity .25s var(--ease-glide), visibility 0s linear .3s;
}
.hdr-search[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform .3s var(--ease-glide), opacity .25s var(--ease-glide), visibility 0s linear 0s;
}
.hdr-search__inner { padding-block: 18px; }
.hdr-search__field { display: flex; align-items: center; gap: 12px; }
.hdr-search__field svg { width: 20px; height: 20px; color: var(--c-muted); flex: 0 0 auto; }
.hdr-search__field input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  font-size: 18px;
  padding-block: 8px;
  color: var(--c-text);
}
.hdr-search__results { display: grid; gap: 4px; padding-top: 8px; }
.hdr-search__results a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  transition: background .25s var(--ease-glide);
}
.hdr-search__results a:hover { background: rgba(237, 241, 247, .05); }
.hdr-search__results img { width: 52px; height: 40px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.hdr-search__results .s-city { color: var(--c-muted); font-size: 14px; }
.hdr-search__empty { color: var(--c-muted); padding: 10px; }

/* Mini panel (wishlist) */
.mini-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 24px;
  width: min(380px, calc(100vw - 32px));
  z-index: 95;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: 14px;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .3s var(--ease-glide), opacity .25s var(--ease-glide), visibility 0s linear .3s;
}
.mini-panel[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform .3s var(--ease-glide), opacity .25s var(--ease-glide), visibility 0s linear 0s;
}
.mini-panel__title { font-family: var(--font-d); font-weight: 700; font-size: 18px; padding: 2px 6px 10px; }
.mini-panel ul { display: grid; gap: 4px; max-height: 320px; overflow-y: auto; }
.mini-panel li a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r-sm); transition: background .25s var(--ease-glide); }
.mini-panel li a:hover { background: rgba(237, 241, 247, .05); }
.mini-panel img { width: 56px; height: 42px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.mini-panel .mp-city { color: var(--c-muted); font-size: 14px; }
.mini-panel .mp-empty { color: var(--c-muted); padding: 6px 6px 10px; }

/* ---------- Hero (home) ---------- */
.home-hero {
  position: relative;
  z-index: 10;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: center;
  isolation: isolate;
}
.home-hero__media { overflow: clip; }
.home-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.home-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(16, 19, 31, .92) 0%, rgba(16, 19, 31, .42) 46%, rgba(16, 19, 31, .18) 70%),
    linear-gradient(180deg, rgba(16, 19, 31, .62) 0%, rgba(16, 19, 31, .18) 34%, rgba(16, 19, 31, .78) 100%);
}
.home-hero__inner {
  width: 100%;
  padding-block: 120px 72px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.home-hero h1 {
  font-size: clamp(34px, 5.4vw, 62px);
  max-width: 21ch;
  margin-inline: auto;
  animation: heroUp .9s var(--ease-glide) both;
}
.home-hero__sub {
  font-size: clamp(17px, 2vw, 21px);
  color: var(--c-text);
  opacity: .92;
  animation: heroUp .9s var(--ease-glide) .14s both;
}
@keyframes heroUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-search {
  width: 100%;
  margin-top: 18px;
  background: rgba(24, 29, 46, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 12px;
  text-align: left;
  animation: heroUp .9s var(--ease-glide) .3s both;
  position: relative;
  z-index: 5;
}
.hs-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hs-field > span { font-size: 13px; font-weight: 700; color: var(--c-muted); letter-spacing: .4px; text-transform: uppercase; }
.hs-field input {
  width: 100%;
  min-width: 0;
  background: rgba(16, 19, 31, .55);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  outline: none;
  transition: border-color .3s var(--ease-glide);
}
.hs-field input:focus { border-color: var(--acc); }
.hero-search .btn { align-self: end; }

/* ---------- Custom select ---------- */
.cselect { position: relative; min-width: 0; }
.cselect__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(16, 19, 31, .55);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  text-align: left;
  transition: border-color .3s var(--ease-glide);
  min-height: 47px;
}
.cselect__btn:hover, .cselect[data-open="true"] .cselect__btn { border-color: var(--acc); }
.cselect__btn svg { width: 17px; height: 17px; color: var(--c-muted); flex: 0 0 auto; transition: transform .3s var(--ease-snap); }
.cselect[data-open="true"] .cselect__btn svg { transform: rotate(180deg); }
.cselect__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  z-index: 40;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-1);
  padding: 6px;
  display: grid;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
  transform: translateY(-6px) scale(.98);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .25s var(--ease-glide), opacity .2s var(--ease-glide), visibility 0s linear .25s;
}
.cselect[data-open="true"] .cselect__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform .25s var(--ease-glide), opacity .2s var(--ease-glide), visibility 0s linear 0s;
}
.cselect__opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border-radius: 7px;
  font-size: 15.5px;
  transition: background .2s var(--ease-glide), color .2s var(--ease-glide);
}
.cselect__opt:hover { background: rgba(237, 241, 247, .06); }
.cselect__opt[aria-selected="true"] { color: var(--acc); background: var(--acc-soft); font-weight: 700; }

/* ---------- Sections ---------- */
.sec { padding-block: 84px; }
.sec-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; max-width: 100%; }
.sec-head h2 { font-size: clamp(27px, 3.4vw, 42px); position: relative; }
.sec-head .sec-sub { color: var(--c-muted); font-size: 18px; }
.sec-head--row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sec-head--row > div { display: flex; flex-direction: column; gap: 12px; }
.sec-line {
  font-family: var(--font-d);
  font-size: 30px;
  line-height: .6;
  letter-spacing: 7px;
  background: var(--c-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: max-content;
}
.sec-line::before { content: '***'; }

/* Reveal */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .75s var(--ease-glide) var(--d, 0s), transform .75s var(--ease-glide) var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
.tgrid > .rv, .igrid > .rv, .rgrid > .rv, .bgrid > .rv, .kgrid > .rv { display: flex; flex-direction: column; min-width: 0; }
.tgrid > .rv > .tcard, .igrid > .rv > .icard, .rgrid > .rv > .rcard, .bgrid > .rv > .bcard, .kgrid > .rv > .kcard { flex: 1; }

/* ---------- Trip card ---------- */
.tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.tgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .tgrid, .tgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tgrid, .tgrid--4 { grid-template-columns: minmax(0, 1fr); } }

.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: clip;
  transition: transform .45s var(--ease-glide), box-shadow .45s var(--ease-glide), border-color .45s var(--ease-glide);
}
.tcard::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--c-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-snap);
}
.tcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-1); border-color: rgba(53, 224, 184, .25); }
.tcard:hover::after { transform: scaleX(1); }
.tcard__media { position: relative; aspect-ratio: 4 / 3; overflow: clip; }
.tcard__media img { width: 100%; height: 100%; object-fit: cover; }
.tcard__price {
  position: absolute;
  left: 14px; bottom: 14px;
  background: rgba(16, 19, 31, .82);
  backdrop-filter: blur(6px);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 800;
  font-size: 15px;
}
.tcard__price b { color: var(--acc); }
.wish-btn {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 3;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(16, 19, 31, .72);
  backdrop-filter: blur(6px);
  border: 1px solid var(--c-line);
  color: #fff;
  transition: color .3s var(--ease-glide), transform .3s var(--ease-glide), border-color .3s var(--ease-glide);
}
.wish-btn svg { width: 20px; height: 20px; }
.wish-btn:hover { transform: scale(1.1); color: var(--c-mag); border-color: var(--c-mag); }
.wish-btn[aria-pressed="true"] { color: var(--c-mag); border-color: var(--c-mag); }
.wish-btn[aria-pressed="true"] svg { fill: currentColor; }
.tcard__body { display: flex; flex-direction: column; gap: 10px; padding: 20px; flex: 1; }
.tcard__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--c-muted); font-size: 14.5px; }
.tcard__meta span { display: inline-flex; align-items: center; gap: 6px; }
.tcard__meta svg { width: 16px; height: 16px; flex: 0 0 auto; }
.tcard__title { font-size: 21px; }
.tcard__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.tcard__title a { transition: color .3s var(--ease-glide); }
.tcard:hover .tcard__title a { color: var(--acc); }
.tcard__teaser { color: var(--c-muted); font-size: 15.5px; flex: 1; }
.tcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; padding-top: 4px; flex-wrap: wrap; }
.tcard__tag {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-mag);
  background: rgba(196, 101, 232, .12);
  border-radius: 999px;
  padding: 4px 12px;
}
body.cas .tcard__tag { color: #F4D98C; background: rgba(227, 181, 74, .12); }

/* Stars */
.stars { display: inline-flex; align-items: center; gap: 8px; }
.stars__vis { position: relative; width: max-content; line-height: 0; }
.stars__row { display: flex; gap: 2px; color: rgba(237, 241, 247, .22); }
.stars__row svg { width: 15px; height: 15px; flex: 0 0 auto; }
.stars__fill { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; }
.stars__fill .stars__row { color: #F5C445; }
.stars__num { font-size: 14px; color: var(--c-muted); font-weight: 600; white-space: nowrap; }

/* ---------- Home sections ---------- */
.home-popular { padding-block: 96px 84px; }
.home-ideat { background: var(--c-surface); border-block: 1px solid var(--c-line); }

.igrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 1100px) { .igrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .igrid { grid-template-columns: minmax(0, 1fr); } }
.icard {
  position: relative;
  border-radius: var(--r-lg);
  overflow: clip;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--c-line);
  transition: transform .45s var(--ease-glide), box-shadow .45s var(--ease-glide);
}
.icard:hover { transform: translateY(-6px); box-shadow: var(--shadow-1); }
.icard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.icard::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(16, 19, 31, .32) 0%, rgba(16, 19, 31, .62) 52%, rgba(16, 19, 31, .95) 100%);
}
.icard__body { position: relative; padding: 22px; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.icard__body h3 { font-size: 23px; }
.icard__body p { color: rgba(237, 241, 247, .85); font-size: 15px; }
.icard__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--acc);
  font-weight: 700;
  font-size: 15px;
  margin-top: 6px;
  transition: gap .3s var(--ease-snap);
}
.icard__go svg { width: 17px; height: 17px; }
.icard:hover .icard__go { gap: 14px; }
.icard > a::after { content: ''; position: absolute; inset: 0; z-index: 2; }

/* How it works */
.home-how__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; position: relative; }
@media (max-width: 820px) { .home-how__grid { grid-template-columns: minmax(0, 1fr); } }
.how-step {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 30px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .45s var(--ease-glide), border-color .45s var(--ease-glide);
}
.how-step:hover { transform: translateY(-6px); border-color: rgba(53, 224, 184, .3); }
.how-step__n {
  font-family: var(--font-d);
  font-size: 15px;
  font-weight: 700;
  color: var(--acc);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}
.how-step__n::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--acc-soft), transparent); }
.how-step__ico {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--acc-soft);
  color: var(--acc);
}
.how-step__ico svg { width: 27px; height: 27px; }
.how-step h3 { font-size: 22px; }
.how-step p { color: var(--c-muted); font-size: 15.5px; }

/* Reviews */
.home-reviews { background: var(--c-surface); border-block: 1px solid var(--c-line); }
.rgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 820px) { .rgrid { grid-template-columns: minmax(0, 1fr); } }
.rcard {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform .45s var(--ease-glide), border-color .45s var(--ease-glide);
}
.rcard:hover { transform: translateY(-4px); border-color: rgba(196, 101, 232, .3); }
.rcard blockquote { font-size: 16.5px; line-height: 1.65; flex: 1; }
.rcard blockquote::before { content: '“'; display: block; font-family: var(--font-d); font-size: 44px; line-height: .6; color: var(--c-mag); margin-bottom: 10px; }
.rcard__who { display: flex; align-items: center; gap: 14px; justify-content: space-between; flex-wrap: wrap; }
.rcard__who > div { min-width: 0; flex: 1; }
@media (max-width: 520px) {
  .rcard { padding: 20px; }
  .rcard blockquote { font-size: 15.5px; }
  .rcard__who { gap: 12px; }
  .rcard__who img { width: 44px; height: 44px; }
  .rcard__who .stars { width: 100%; }
}
.rcard__who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.rcard__who .rw-name { font-weight: 800; }
.rcard__who .rw-trip { color: var(--c-muted); font-size: 14px; }

/* Blog cards */
.bgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 1100px) { .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bgrid { grid-template-columns: minmax(0, 1fr); } }
.bcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: clip;
  transition: transform .45s var(--ease-glide), box-shadow .45s var(--ease-glide);
}
.bcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-1); }
.bcard__media { aspect-ratio: 3 / 2; overflow: clip; }
.bcard__media img { width: 100%; height: 100%; object-fit: cover; }
.bcard__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.bcard__meta { display: flex; gap: 14px; color: var(--c-muted); font-size: 13.5px; font-weight: 600; }
.bcard h3 { font-size: 19px; flex: 1; }
.bcard h3 a { transition: color .3s var(--ease-glide); }
.bcard h3 a::after { content: ''; position: absolute; inset: 0; }
.bcard:hover h3 a { color: var(--acc); }

/* Subscribe */
.subscribe {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid rgba(53, 224, 184, .28);
  background:
    radial-gradient(90% 160% at 8% 0%, rgba(53, 224, 184, .13) 0%, transparent 55%),
    radial-gradient(80% 150% at 95% 100%, rgba(196, 101, 232, .12) 0%, transparent 55%),
    var(--c-surface);
  padding: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  overflow: clip;
}
.subscribe h2 { font-size: clamp(25px, 3vw, 36px); margin-bottom: 12px; }
.subscribe p { color: var(--c-muted); }
.subscribe form { display: flex; gap: 12px; flex-wrap: wrap; }
.subscribe input {
  flex: 1;
  min-width: 200px;
  background: rgba(16, 19, 31, .6);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 14px 22px;
  outline: none;
  transition: border-color .3s var(--ease-glide);
}
.subscribe input:focus { border-color: var(--acc); }
.subscribe .sub-note { font-size: 13.5px; margin-top: 12px; opacity: .75; }
@media (max-width: 820px) { .subscribe { grid-template-columns: minmax(0, 1fr); padding: 34px 26px; } }

/* ---------- Matkat page ---------- */
.mk-head { padding-block: 64px 8px; }
.mk-head h1 { font-size: clamp(30px, 4vw, 50px); margin-bottom: 12px; }
.mk-head p { color: var(--c-muted); font-size: 18px; }
.mk-count { color: var(--acc); font-weight: 800; }

.mk-layout {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: 34px;
  padding-block: 36px 90px;
  align-items: start;
}
.mk-layout > div:first-child { align-self: stretch; }
@media (max-width: 1100px) { .mk-layout { grid-template-columns: minmax(0, 1fr); } }

.mk-filters {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 18px;
  position: sticky;
  top: calc(var(--header-offset, 64px) + 16px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 1100px) {
  .mk-filters { position: static; max-height: none; overflow: visible; display: none; }
  .mk-filters[data-open="true"] { display: flex; }
}
.mk-filters__toggle { display: none; }
@media (max-width: 1100px) {
  .mk-filters__toggle { display: inline-flex; align-self: flex-start; }
}
.flt-group { display: flex; flex-direction: column; gap: 9px; border-bottom: 1px solid var(--c-line); padding-bottom: 13px; }
.flt-group:last-of-type { border-bottom: 0; padding-bottom: 0; }
.flt-group > h3 { font-size: 14px; letter-spacing: .4px; text-transform: uppercase; color: var(--c-muted); }
.flt-check { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14.5px; color: var(--c-muted); transition: color .25s var(--ease-glide); }
.flt-check:hover { color: var(--c-text); }
.flt-check input { position: absolute; opacity: 0; pointer-events: none; }
.flt-check .box {
  width: 19px; height: 19px;
  flex: 0 0 auto;
  border-radius: 6px;
  border: 1.5px solid rgba(237, 241, 247, .3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0A1A15;
  transition: background .25s var(--ease-snap), border-color .25s var(--ease-snap);
}
.flt-check .box svg { width: 13px; height: 13px; opacity: 0; transition: opacity .2s var(--ease-snap); }
.flt-check input:checked + .box { background: var(--c-grad); border-color: transparent; }
.flt-check input:checked + .box svg { opacity: 1; }
.flt-check input:checked ~ span:last-child { color: var(--c-text); }
.flt-check input:focus-visible + .box { outline: 2px solid var(--acc); outline-offset: 2px; }

.flt-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.flt-chip { position: relative; cursor: pointer; }
.flt-chip input { position: absolute; opacity: 0; pointer-events: none; }
.flt-chip span {
  display: inline-flex;
  padding: 6px 12px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-muted);
  transition: border-color .25s var(--ease-snap), color .25s var(--ease-snap), background .25s var(--ease-snap);
}
.flt-chip:hover span { border-color: var(--acc); color: var(--c-text); }
.flt-chip input:checked + span { background: var(--acc-soft); border-color: var(--acc); color: var(--acc); }
.flt-chip input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }

.flt-range output { font-weight: 800; color: var(--acc); font-size: 15px; }
input[type="range"].flt-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--c-teal) var(--fill, 100%), rgba(237, 241, 247, .16) var(--fill, 100%));
  outline: none;
  cursor: pointer;
}
input[type="range"].flt-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--c-teal);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
  cursor: grab;
}
input[type="range"].flt-slider::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--c-teal);
  cursor: grab;
}
.flt-date input {
  width: 100%;
  background: rgba(16, 19, 31, .55);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  outline: none;
  color-scheme: dark;
  transition: border-color .3s var(--ease-glide);
}
.flt-date input:focus { border-color: var(--acc); }

.flt-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15.5px; color: var(--c-muted); }
.flt-switch input { position: absolute; opacity: 0; pointer-events: none; }
.flt-switch .sw {
  width: 44px; height: 25px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(237, 241, 247, .16);
  position: relative;
  transition: background .3s var(--ease-snap);
}
.flt-switch .sw::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: #fff;
  transition: transform .3s var(--ease-snap);
}
.flt-switch input:checked + .sw { background: var(--c-teal); }
.flt-switch input:checked + .sw::after { transform: translateX(19px); }
.flt-switch input:focus-visible + .sw { outline: 2px solid var(--acc); outline-offset: 2px; }
.flt-reset { color: var(--c-muted); font-weight: 700; font-size: 14.5px; text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; transition: color .25s; }
.flt-reset:hover { color: var(--acc); }

.mk-toolbar {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.mk-toolbar .cselect { min-width: 230px; }
.mk-results { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 26px; }
.mk-empty {
  background: var(--c-surface);
  border: 1px dashed var(--c-line);
  border-radius: var(--r-lg);
  padding: 44px 30px;
  text-align: center;
  color: var(--c-muted);
}
.mk-sub { padding-bottom: 90px; }

/* ---------- Kohteet ---------- */
.kh-head { padding-block: 64px 26px; }
.kh-head h1 { font-size: clamp(30px, 4vw, 50px); margin-bottom: 14px; }
.kh-head p { color: var(--c-muted); font-size: 17.5px; max-width: 100%; }
.kh-head .kh-intro { display: grid; gap: 12px; margin-top: 10px; }
.kh-grid-wrap { padding-block: 10px 96px; }
.kgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 1100px) { .kgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kgrid { grid-template-columns: minmax(0, 1fr); } }
.kcard {
  position: relative;
  border-radius: var(--r-lg);
  overflow: clip;
  aspect-ratio: 4 / 3.4;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--c-line);
  transition: transform .45s var(--ease-glide), box-shadow .45s var(--ease-glide);
}
.kcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-1); }
.kcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kcard::before { content: ''; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(16, 19, 31, .28) 0%, rgba(16, 19, 31, .6) 50%, rgba(16, 19, 31, .95) 100%); }
.kcard__body {
  position: relative;
  padding: 56px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  background: linear-gradient(180deg, rgba(16, 19, 31, 0) 0%, rgba(16, 19, 31, .68) 30%, rgba(16, 19, 31, .94) 100%);
}
.kcard__hint {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--acc);
  background: rgba(16, 19, 31, .68);
  border: 1px solid var(--c-line);
  padding: 5px 12px;
  border-radius: 999px;
}
.kcard h2 { font-size: 26px; }
.kcard p { color: rgba(237, 241, 247, .85); font-size: 15px; }
.kcard ul { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.kcard ul li { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: rgba(237, 241, 247, .75); }
.kcard ul svg { width: 13px; height: 13px; color: var(--acc); flex: 0 0 auto; }
.kcard > a::after { content: ''; position: absolute; inset: 0; z-index: 2; }

/* ---------- Ideat ---------- */
.id-head { padding-block: 64px 26px; }
.id-head h1 { font-size: clamp(30px, 4vw, 50px); margin-bottom: 14px; }
.id-head .id-intro { display: grid; gap: 12px; color: var(--c-muted); font-size: 17.5px; }
.id-grid-wrap { padding-block: 10px 96px; }

.idd-hero { position: relative; padding-block: 88px 70px; overflow: clip; isolation: isolate; }
.idd-hero img.idd-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.idd-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16, 19, 31, .72), rgba(16, 19, 31, .9)); }
.idd-hero h1 { font-size: clamp(30px, 4vw, 52px); margin-bottom: 12px; }
.idd-hero p { font-size: 18px; opacity: .92; }
.idd-intro { padding-block: 64px 10px; display: grid; gap: 14px; font-size: 17.5px; color: var(--c-muted); }
.idd-trips { padding-block: 40px 96px; }

/* ---------- Trip detail ---------- */
.tr-crumbs { padding-block: 22px 0; display: flex; flex-wrap: wrap; gap: 8px; color: var(--c-muted); font-size: 14.5px; }
.tr-crumbs a { transition: color .25s; }
.tr-crumbs a:hover { color: var(--acc); }
.tr-crumbs .cr-sep { opacity: .5; }

.tr-top { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 34px; padding-block: 20px 40px; align-items: start; }
@media (max-width: 1100px) { .tr-top { grid-template-columns: minmax(0, 1fr); } }

.tr-gal { position: relative; border-radius: var(--r-lg); overflow: clip; border: 1px solid var(--c-line); }
.tr-gal__track { display: flex; transition: transform .6s var(--ease-glide); }
.tr-gal__slide { flex: 0 0 100%; min-width: 0; aspect-ratio: 3 / 2; }
.tr-gal__slide img { width: 100%; height: 100%; object-fit: cover; }
.tr-gal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 19, 31, .72);
  backdrop-filter: blur(6px);
  border: 1px solid var(--c-line);
  color: #fff;
  transition: background .3s, color .3s;
  z-index: 3;
}
.tr-gal__nav:hover { color: var(--acc); background: rgba(16, 19, 31, .9); }
.tr-gal__nav svg { width: 20px; height: 20px; }
.tr-gal__nav--prev { left: 14px; }
.tr-gal__nav--next { right: 14px; }
.tr-gal__dots {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
  background: rgba(16, 19, 31, .55);
  padding: 7px 11px;
  border-radius: 999px;
}
.tr-gal__dots button { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .35); transition: background .3s, transform .3s; }
.tr-gal__dots button[aria-current="true"] { background: var(--acc); transform: scale(1.25); }

.tr-book {
  position: sticky;
  top: calc(var(--header-offset, 64px) + 16px);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 1100px) { .tr-book { position: static; } }
.tr-book h1 { font-size: clamp(26px, 2.6vw, 33px); }
.tr-book__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--c-muted); font-size: 15px; }
.tr-book__meta span { display: inline-flex; align-items: center; gap: 7px; }
.tr-book__meta svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--acc); }
.tr-book__price { display: flex; align-items: baseline; gap: 10px; border-block: 1px solid var(--c-line); padding-block: 16px; }
.tr-book__price b { font-family: var(--font-d); font-size: 38px; color: var(--acc); line-height: 1; }
.tr-book__price span { color: var(--c-muted); font-size: 15px; }
.tr-book__row { display: flex; gap: 10px; }
.tr-book__row .btn { flex: 1; }
.tr-book .wish-btn { position: static; width: 52px; height: 52px; border-radius: 14px; flex: 0 0 auto; background: rgba(237, 241, 247, .04); }
.tr-book__note { color: var(--c-muted); font-size: 13.5px; }

.tr-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 60px; padding-block: 20px 90px; }
.tr-sec h2 { font-size: clamp(24px, 2.8vw, 33px); margin-bottom: 22px; display: flex; align-items: center; gap: 14px; }
.tr-sec h2 svg { width: 27px; height: 27px; color: var(--acc); flex: 0 0 auto; }
.tr-intro-txt { display: grid; gap: 14px; font-size: 17.5px; }

.tr-days ol { display: grid; gap: 0; position: relative; }
.tr-day { position: relative; padding: 0 0 26px 54px; }
.tr-day::before {
  content: '';
  position: absolute;
  left: 15px; top: 34px; bottom: -2px;
  border-left: 2px dashed rgba(53, 224, 184, .4);
}
.tr-day:last-child::before { display: none; }
.tr-day__dot {
  position: absolute;
  left: 0; top: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--acc-soft);
  border: 2px solid var(--acc);
  color: var(--acc);
  font-weight: 800;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tr-day h3 { font-size: 20px; margin-bottom: 8px; }
.tr-day p { color: var(--c-muted); }

.tr-inc__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 820px) { .tr-inc__cols { grid-template-columns: minmax(0, 1fr); } }
.tr-inc__col { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 26px; }
.tr-inc__col h3 { font-size: 19px; margin-bottom: 16px; }
.tr-inc__col ul { display: grid; gap: 11px; }
.tr-inc__col li { display: flex; gap: 11px; align-items: flex-start; color: var(--c-muted); font-size: 15.5px; }
.tr-inc__col li svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 2px; }
.tr-inc__col--yes li svg { color: var(--c-green); }
.tr-inc__col--no li svg { color: var(--c-mag); }

.tr-dates ul { display: flex; flex-wrap: wrap; gap: 12px; }
.tr-dates li {
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: border-color .3s;
}
.tr-dates li:hover { border-color: var(--acc); }
.tr-dates li svg { width: 16px; height: 16px; color: var(--acc); flex: 0 0 auto; }
.tr-similar { background: var(--c-surface); border-top: 1px solid var(--c-line); padding-block: 84px 96px; }

/* ---------- Blog ---------- */
.bl-head { padding-block: 64px 30px; }
.bl-head h1 { font-size: clamp(30px, 4vw, 50px); margin-bottom: 12px; }
.bl-head p { color: var(--c-muted); font-size: 18px; }
.bl-feat-wrap { padding-block: 6px 44px; }
.bl-feat {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: clip;
  transition: transform .45s var(--ease-glide), box-shadow .45s var(--ease-glide);
}
.bl-feat:hover { transform: translateY(-5px); box-shadow: var(--shadow-1); }
@media (max-width: 820px) { .bl-feat { grid-template-columns: minmax(0, 1fr); } }
.bl-feat__media { min-height: 300px; }
.bl-feat__media img { width: 100%; height: 100%; object-fit: cover; }
.bl-feat__body { padding: 36px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.bl-feat__body h2 { font-size: clamp(23px, 2.6vw, 32px); }
.bl-feat__body h2 a::after { content: ''; position: absolute; inset: 0; }
.bl-feat__body p { color: var(--c-muted); }
.bl-grid-wrap { padding-block: 0 96px; }
.bgrid--blog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .bgrid--blog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bgrid--blog { grid-template-columns: minmax(0, 1fr); } }

.bla-hero { padding-block: 60px 8px; }
.bla-hero .bla-meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--c-muted); font-weight: 600; font-size: 14.5px; margin-bottom: 16px; }
.bla-hero .bla-meta span { display: inline-flex; align-items: center; gap: 7px; }
.bla-hero .bla-meta svg { width: 16px; height: 16px; color: var(--acc); }
.bla-hero h1 { font-size: clamp(29px, 3.8vw, 46px); }
.bla-cover { padding-block: 30px 6px; }
.bla-cover img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--c-line); aspect-ratio: 21 / 9; object-fit: cover; }
.bla-body { padding-block: 34px 90px; display: grid; gap: 20px; font-size: 18px; }
.bla-body h2 { font-size: clamp(23px, 2.6vw, 31px); margin-top: 16px; }
.bla-body ul { display: grid; gap: 12px; }
.bla-body ul li { position: relative; padding-left: 32px; }
.bla-body ul li::before {
  content: '';
  position: absolute;
  left: 4px; top: 9px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c-grad);
}

/* ---------- Casino ---------- */
.cas-hero {
  position: relative;
  padding-block: 110px 90px;
  overflow: clip;
  isolation: isolate;
  text-align: center;
}
.cas-hero img.cas-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cas-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 130% at 50% 115%, rgba(227, 181, 74, .16) 0%, transparent 55%),
    linear-gradient(180deg, rgba(16, 19, 31, .82), rgba(16, 19, 31, .92));
}
.cas-hero h1 { font-size: clamp(31px, 4.6vw, 56px); max-width: 22ch; margin-inline: auto; animation: heroUp .9s var(--ease-glide) both; }
.cas-hero p { font-size: clamp(17px, 2vw, 20px); opacity: .92; margin-top: 16px; animation: heroUp .9s var(--ease-glide) .15s both; }
.cas-hero .cas-hero__cta { margin-top: 28px; animation: heroUp .9s var(--ease-glide) .3s both; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.cas-about { padding-block: 88px; }
.cas-about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
@media (max-width: 1100px) { .cas-about__grid { grid-template-columns: minmax(0, 1fr); } }
.cas-about__txt { display: grid; gap: 14px; font-size: 17.5px; }
.cas-about__txt p { color: var(--c-muted); }
.cas-about img { border-radius: var(--r-lg); border: 1px solid var(--c-line); width: 100%; }

.cas-ideas { background: var(--c-surface); border-block: 1px solid var(--c-line); }
.cas-games .games-list { display: grid; gap: 26px; }
.gamerow {
  position: relative;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: clip;
  transition: transform .45s var(--ease-glide), border-color .45s var(--ease-glide), box-shadow .45s var(--ease-glide);
}
.gamerow:nth-child(even) { grid-template-columns: minmax(0, 1fr) 340px; }
.gamerow:nth-child(even) .gamerow__media { order: 2; }
.gamerow:hover { transform: translateY(-5px); border-color: rgba(227, 181, 74, .35); box-shadow: var(--shadow-1); }
@media (max-width: 820px) {
  .gamerow, .gamerow:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .gamerow:nth-child(even) .gamerow__media { order: 0; }
}
.gamerow__media { min-height: 220px; }
.gamerow__media img { width: 100%; height: 100%; object-fit: cover; }
.gamerow__body { padding: 30px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.gamerow__body h3 { font-size: 24px; }
.gamerow__body h3 a::after { content: ''; position: absolute; inset: 0; }
.gamerow__body p { color: var(--c-muted); }
.gamerow__go { display: inline-flex; align-items: center; gap: 8px; color: var(--acc); font-weight: 700; margin-top: 6px; transition: gap .3s var(--ease-snap); }
.gamerow__go svg { width: 17px; height: 17px; }
.gamerow:hover .gamerow__go { gap: 14px; }

.cas-works { background: var(--c-surface); border-block: 1px solid var(--c-line); }
.workset { margin-bottom: 44px; }
.workset:last-child { margin-bottom: 0; }
.workset h3 { font-size: 23px; margin-bottom: 8px; }
.workset .ws-cap { color: var(--c-muted); margin-bottom: 20px; }
.ws-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .ws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ws-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  transition: border-color .5s var(--ease-glide);
}
.ws-grid img:hover { border-color: rgba(227, 181, 74, .4); }

.cas-note { padding-block: 0 30px; }
.cas-note p {
  border: 1px solid rgba(227, 181, 74, .3);
  background: rgba(227, 181, 74, .07);
  border-radius: var(--r-md);
  padding: 18px 22px;
  color: var(--c-muted);
  font-size: 15px;
}

.cas-contact { padding-block: 84px 96px; }
.cas-form {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 820px) { .cas-form { grid-template-columns: minmax(0, 1fr); padding: 26px 20px; } }
.cas-form .ff { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cas-form .ff--full { grid-column: 1 / -1; }
.ff label { font-size: 14px; font-weight: 700; color: var(--c-muted); }
.ff input, .ff textarea {
  width: 100%;
  min-width: 0;
  background: rgba(16, 19, 31, .55);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  outline: none;
  color-scheme: dark;
  transition: border-color .3s var(--ease-glide);
}
.ff input:focus, .ff textarea:focus { border-color: var(--acc); }
.ff textarea { min-height: 120px; }
.ff .f-err { font-size: 13px; color: #FF7D9C; min-height: 18px; }
.cas-form .btn { justify-self: start; }

/* Casino detail pages */
.casd-hero { position: relative; padding-block: 96px 76px; overflow: clip; isolation: isolate; }
.casd-hero img.casd-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.casd-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16, 19, 31, .74), rgba(16, 19, 31, .93)); }
.casd-hero h1 { font-size: clamp(30px, 4vw, 50px); }
.casd-hero p { font-size: 18.5px; opacity: .92; margin-top: 12px; }
.casd-body { padding-block: 70px 40px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 44px; align-items: start; }
@media (max-width: 1100px) { .casd-body { grid-template-columns: minmax(0, 1fr); } }
.casd-txt { display: grid; gap: 16px; font-size: 17.5px; }
.casd-txt p { color: var(--c-muted); }
.casd-img img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--c-line); }
.casd-feats { padding-block: 20px 60px; }
.casd-feats h2 { font-size: clamp(23px, 2.8vw, 32px); margin-bottom: 22px; }
.casd-feats ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 820px) { .casd-feats ul { grid-template-columns: minmax(0, 1fr); } }
.casd-feats li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  color: var(--c-muted);
}
.casd-feats li svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--acc); margin-top: 2px; }
.casd-atmo { padding-block: 0 70px; }
.casd-atmo p {
  font-family: var(--font-d);
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.5;
  border-left: 3px solid var(--acc);
  padding-left: 24px;
}
.casd-cta { padding-block: 0 96px; display: flex; gap: 14px; flex-wrap: wrap; }

.gm-steps { padding-block: 20px 60px; }
.gm-steps h2 { font-size: clamp(23px, 2.8vw, 32px); margin-bottom: 24px; }
.gm-steps ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; counter-reset: gm; }
@media (max-width: 820px) { .gm-steps ol { grid-template-columns: minmax(0, 1fr); } }
.gm-steps li {
  counter-increment: gm;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 22px;
  position: relative;
}
.gm-steps li::before {
  content: counter(gm, decimal-leading-zero);
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 15px;
  color: var(--acc);
  letter-spacing: 2px;
  display: block;
  margin-bottom: 8px;
}
.gm-steps li h3 { font-size: 19px; margin-bottom: 6px; }
.gm-steps li p { color: var(--c-muted); font-size: 15.5px; }
.gm-facts { padding-block: 0 70px; }
.gm-facts h2 { font-size: clamp(23px, 2.8vw, 32px); margin-bottom: 22px; }
.gm-facts ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 820px) { .gm-facts ul { grid-template-columns: minmax(0, 1fr); } }
.gm-facts li {
  display: flex;
  gap: 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  color: var(--c-muted);
}
.gm-facts li svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--acc); margin-top: 3px; }

/* ---------- Kori ---------- */
.kori-head { padding-block: 64px 20px; }
.kori-head h1 { font-size: clamp(30px, 4vw, 48px); margin-bottom: 12px; }
.kori-head p { color: var(--c-muted); font-size: 18px; }
.kori-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 34px; padding-block: 20px 96px; align-items: start; }
@media (max-width: 1100px) { .kori-layout { grid-template-columns: minmax(0, 1fr); } }
.kori-items { display: grid; gap: 16px; }
.kori-item {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 14px;
}
@media (max-width: 520px) { .kori-item { grid-template-columns: 90px minmax(0, 1fr) auto; } }
.kori-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); }
.kori-item h3 { font-size: 18px; margin-bottom: 4px; }
.kori-item .ki-meta { color: var(--c-muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.kori-item .ki-price { font-weight: 800; color: var(--acc); }
.kori-remove { color: var(--c-muted); width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; transition: color .3s, background .3s; }
.kori-remove:hover { color: #FF7D9C; background: rgba(255, 125, 156, .1); }
.kori-remove svg { width: 19px; height: 19px; }
.kori-empty {
  background: var(--c-surface);
  border: 1px dashed var(--c-line);
  border-radius: var(--r-lg);
  padding: 46px 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.kori-empty h2 { font-size: 23px; }
.kori-empty p { color: var(--c-muted); }
.kori-form {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 30px;
  display: grid;
  gap: 18px;
}
.kori-form h2 { font-size: 24px; }

.kori-how { padding-block: 0 96px; }
.kori-how__txt { display: grid; gap: 16px; font-size: 17px; }
.kori-how__txt p { color: var(--c-muted); }

/* ---------- Legal ---------- */
.lg-head { padding-block: 64px 10px; }
.lg-head h1 { font-size: clamp(29px, 3.8vw, 46px); margin-bottom: 10px; }
.lg-head .lg-upd { color: var(--c-muted); font-weight: 600; }
.legal-content { padding-block: 30px 96px; display: grid; gap: 18px; font-size: 17.5px; }
.legal-content h2 { font-size: clamp(21px, 2.4vw, 28px); margin-top: 18px; }
.legal-content p { color: var(--c-muted); }

/* ---------- Footer «Postikortti» ---------- */
.site-footer { margin-top: auto; background: #0C0F19; border-top: 1px solid var(--c-line); padding-block: 64px 26px; }
.postcard {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) 1px minmax(0, 1.25fr);
  gap: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: clip;
  box-shadow: var(--shadow-1);
}
.postcard::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(237, 241, 247, .06);
  border-radius: 12px;
  pointer-events: none;
}
.postcard__letter {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background:
    repeating-linear-gradient(180deg, transparent 0 34px, rgba(237, 241, 247, .045) 34px 35px);
}
.postcard__greeting { font-family: var(--font-d); font-size: 24px; color: var(--acc); }
.postcard__brandline { display: flex; align-items: center; gap: 11px; font-family: var(--font-d); font-weight: 700; font-size: 21px; }
.postcard__brandline img { width: 36px; height: 36px; }
.postcard__tagline { color: var(--c-muted); font-size: 15.5px; max-width: 100%; }
.postcard__contacts { display: grid; gap: 10px; margin-top: 6px; }
.postcard__contacts a, .postcard__contacts address {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--c-muted);
  font-style: normal;
  font-size: 15px;
  transition: color .3s var(--ease-glide);
}
.postcard__contacts a:hover { color: var(--acc); }
.postcard__contacts svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 3px; color: var(--acc); }
.postcard__divider { background: repeating-linear-gradient(180deg, var(--c-line) 0 10px, transparent 10px 18px); }
.postcard__side { position: relative; padding: 44px 40px 40px; }
.postcard__stamp {
  position: absolute;
  top: 22px; right: 24px;
  width: 74px; height: 88px;
  border: 2px dashed rgba(53, 224, 184, .45);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(4deg);
  background: rgba(53, 224, 184, .05);
}
body.cas .postcard__stamp { border-color: rgba(227, 181, 74, .5); background: rgba(227, 181, 74, .06); }
.postcard__stamp img { width: 42px; height: 42px; }
.postcard__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; padding-right: 86px; }
.postcard__col h2 { font-size: 16px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-muted); margin-bottom: 16px; }
.postcard__col ul { display: grid; gap: 11px; }
.postcard__col a { color: var(--c-text); font-size: 15.5px; font-weight: 600; transition: color .3s var(--ease-glide), padding-left .3s var(--ease-snap); }
.postcard__col a:hover { color: var(--acc); padding-left: 5px; }
.postcard__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-right: 0;
}
.postcard__pay { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding-inline: 11px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: rgba(237, 241, 247, .03);
}
.pay-badge svg { width: 30px; height: 19px; }
.pay-visa { font-weight: 800; font-style: italic; font-size: 13px; letter-spacing: 1px; color: #B9C6FF; }
.pay-mp { font-weight: 700; font-size: 12.5px; color: #9FB2FF; }
.pay-kl { font-weight: 800; font-size: 12.5px; color: #FFC2D1; }
.postcard__social { display: flex; gap: 10px; }
.postcard__social a {
  width: 40px; height: 40px;
  border-radius: 11px;
  border: 1px solid var(--c-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  transition: color .3s, border-color .3s, transform .3s;
}
.postcard__social a:hover { color: var(--acc); border-color: var(--acc); transform: translateY(-3px); }
.postcard__social svg { width: 18px; height: 18px; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 24px;
  color: var(--c-muted);
  font-size: 14px;
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer-bottom a { transition: color .3s; }
.footer-bottom a:hover { color: var(--acc); }
@media (max-width: 820px) {
  .postcard { grid-template-columns: minmax(0, 1fr); }
  .postcard__divider { display: none; }
  .postcard__letter { padding: 30px 24px; }
  .postcard__side { padding: 0 24px 30px; border-top: 1px dashed var(--c-line); padding-top: 28px; }
  .postcard__stamp { top: 16px; right: 16px; width: 62px; height: 74px; }
  .postcard__cols { padding-right: 0; }
}
@media (max-width: 430px) {
  .postcard__cols { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Cookie ---------- */
.cookie {
  position: fixed;
  left: 20px; bottom: 20px;
  z-index: 120;
  width: min(400px, calc(100vw - 40px));
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: 22px;
}
.cookie h2 { font-size: 18px; margin-bottom: 8px; }
.cookie p { color: var(--c-muted); font-size: 14.5px; margin-bottom: 16px; }
.cookie p a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }
.cookie__row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- Toast ---------- */
.toast-wrap {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 12, 20, .6);
  backdrop-filter: blur(4px);
}
.toast {
  background: var(--c-surface-2);
  border: 1px solid rgba(53, 224, 184, .35);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 34px 38px;
  max-width: 430px;
  width: 100%;
  text-align: center;
  animation: toastIn .5s var(--ease-glide) both;
}
body.cas .toast { border-color: rgba(227, 181, 74, .4); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to { opacity: 1; transform: none; }
}
.toast__ico {
  width: 62px; height: 62px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-grad);
  color: #0A1A15;
}
body.cas .toast__ico { color: #1E1503; }
.toast__ico svg { width: 30px; height: 30px; }
.toast h2 { font-size: 22px; margin-bottom: 8px; }
.toast p { color: var(--c-muted); font-size: 15.5px; }

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 12, 20, .64);
  backdrop-filter: blur(4px);
}
.modal__box {
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 34px;
  max-width: 440px;
  width: 100%;
  position: relative;
  animation: toastIn .45s var(--ease-glide) both;
  display: grid;
  gap: 16px;
}
.modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  transition: color .3s, background .3s;
}
.modal__close:hover { color: var(--c-text); background: rgba(237, 241, 247, .07); }
.modal__close svg { width: 19px; height: 19px; }
.modal__box h3 { font-size: 23px; padding-right: 30px; }
.modal__box > p { color: var(--c-muted); font-size: 15.5px; }

/* ---------- Chat ---------- */
.chat-toggle {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 150;
  width: 62px; height: 62px;
  border-radius: 50%;
  overflow: visible;
  box-shadow: 0 10px 30px rgba(53, 224, 184, .3);
  transition: transform .35s var(--ease-glide), box-shadow .35s var(--ease-glide);
}
.chat-toggle::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(53, 224, 184, .5);
  animation: chatPulse 2.6s var(--ease-glide) infinite;
}
@keyframes chatPulse {
  0% { transform: scale(.92); opacity: .9; }
  70% { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
.chat-toggle:hover { transform: scale(1.08); box-shadow: 0 14px 36px rgba(53, 224, 184, .42); }
.chat-toggle {
  background: var(--c-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0A1A15;
}
.chat-toggle .ct-open { display: inline-flex; }
.chat-toggle .ct-open svg { width: 29px; height: 29px; }
.chat-toggle[aria-expanded="true"] .ct-open { display: none; }
.chat-toggle .ct-close {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c-surface-2);
  border: 2px solid var(--c-teal);
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--c-text);
}
.chat-toggle .ct-close svg { width: 24px; height: 24px; }
.chat-toggle[aria-expanded="true"] .ct-close { display: flex; }
.chat-toggle[aria-expanded="true"]::before { display: none; }

.chat-panel {
  position: fixed;
  right: 20px; bottom: 94px;
  z-index: 150;
  width: 360px;
  height: 460px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 120px);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  overflow: clip;
  transform: translateY(14px) scale(.97);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .35s var(--ease-glide), opacity .3s var(--ease-glide), visibility 0s linear .35s;
}
.chat-panel[data-open="true"] {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform .35s var(--ease-glide), opacity .3s var(--ease-glide), visibility 0s linear 0s;
}
.chat-panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface-2);
}
.chat-panel__head img { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; }
.chat-panel__head .ch-name { font-weight: 800; font-size: 16px; }
.chat-panel__head .ch-role { color: var(--c-muted); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.chat-panel__head .ch-role::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c-green); }
.chat-panel__msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-msg {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  animation: msgIn .4s var(--ease-glide) both;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.chat-msg--bot { align-self: flex-start; background: var(--c-surface-2); border: 1px solid var(--c-line); border-bottom-left-radius: 4px; }
.chat-msg--user { align-self: flex-end; background: var(--acc-soft); border: 1px solid rgba(53, 224, 184, .3); border-bottom-right-radius: 4px; }
.chat-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.chat-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-muted); animation: typing 1.1s infinite; }
.chat-typing i:nth-child(2) { animation-delay: .18s; }
.chat-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.chat-panel__form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--c-line);
}
.chat-panel__form input {
  flex: 1;
  min-width: 0;
  background: rgba(16, 19, 31, .55);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 10px 16px;
  outline: none;
  font-size: 14.5px;
  transition: border-color .3s;
}
.chat-panel__form input:focus { border-color: var(--acc); }
.chat-panel__form button {
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--c-grad);
  color: #0A1A15;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s var(--ease-glide);
}
.chat-panel__form button:hover { transform: scale(1.08); }
.chat-panel__form svg { width: 18px; height: 18px; }

/* Cookie + chat collision (small screens): lift chat above the banner */
@media (max-width: 640px) {
  .chat-toggle { bottom: calc(20px + var(--cookie-h, 0px)); }
  .chat-panel { bottom: calc(94px + var(--cookie-h, 0px)); }
}

/* ---------- Responsive misc ---------- */
@media (max-width: 1100px) {
  .hero-search { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-search .btn { grid-column: 3; }
}
@media (max-width: 820px) {
  .sec { padding-block: 62px; }
  .hero-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-search .btn { grid-column: 2; }
  .home-hero__inner { padding-block: 96px 56px; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .hero-search { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .hero-search .btn { grid-column: 1; }
  .sec { padding-block: 52px; }
  .mini-panel { right: 16px; }
  .tr-gal__nav { width: 40px; height: 40px; }
  .cas-form .btn { justify-self: stretch; }
}
@media (max-width: 520px) {
  .site-header__row { gap: 10px; }
  .hdr-actions { gap: 6px; }
  .icon-btn { width: 38px; height: 38px; border-radius: 10px; }
  .icon-btn svg { width: 18px; height: 18px; }
  .burger { width: 40px; height: 40px; }
  .burger span { left: 11px; right: 11px; }
  .burger span:nth-child(1) { top: 14px; }
  .burger span:nth-child(2) { top: 19px; }
  .burger span:nth-child(3) { top: 24px; }
  .burger[aria-expanded="true"] span:nth-child(1),
  .burger[aria-expanded="true"] span:nth-child(3) { top: 19px; }
  .brand { font-size: 19px; }
  .brand .brand-m { width: 27px; height: 20px; margin-top: 2px; }
}
@media (max-width: 380px) {
  .brand .b-pre, .brand .b-post { display: none; }
  .brand .brand-m { width: 38px; height: 28px; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
  .home-hero__media video { display: none; }
  .home-hero__media { background: url('/assets/img/hero-poster.avif') center / cover no-repeat; }
}