.ttgl {
  --ttgl-bg: linear-gradient(180deg, #ffffff, #f3f7f5);
  --ttgl-border: rgba(12, 45, 32, 0.16);
  --ttgl-text: #0f2c1f;
  --ttgl-track-bg: #e8f3ed;
  --ttgl-thumb-bg: #ffffff;
  --ttgl-thumb-ring: rgba(16, 185, 129, 0.28);
  --ttgl-icon-muted: rgba(15, 44, 31, 0.45);
  --ttgl-shadow: 0 10px 24px rgba(7, 28, 19, 0.18);

  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ttgl-border);
  background: var(--ttgl-bg);
  color: var(--ttgl-text);
  border-radius: 999px;
  padding: 5px 10px 5px 6px;
  min-height: 38px;
  cursor: pointer;
  box-shadow: var(--ttgl-shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.ttgl:hover {
  transform: translateY(-1px);
}

.ttgl:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.38), var(--ttgl-shadow);
}

.ttgl-track {
  width: 54px;
  height: 26px;
  border-radius: 999px;
  background: var(--ttgl-track-bg);
  border: 1px solid rgba(10, 35, 24, 0.14);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  overflow: hidden;
}

.ttgl-icon {
  width: 13px;
  height: 13px;
  display: inline-flex;
  color: var(--ttgl-icon-muted);
  transition: color 0.2s ease, opacity 0.2s ease;
  z-index: 1;
}

.ttgl-icon svg {
  width: 100%;
  height: 100%;
}

.ttgl-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--ttgl-thumb-bg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 4px 10px rgba(15, 35, 26, 0.22);
  transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.ttgl-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  min-width: 32px;
}

.ttgl.is-dark {
  --ttgl-bg: linear-gradient(180deg, #0f1713, #0b120f);
  --ttgl-border: rgba(255, 255, 255, 0.14);
  --ttgl-text: #d8ffec;
  --ttgl-track-bg: #173527;
  --ttgl-thumb-bg: #052e1c;
  --ttgl-thumb-ring: rgba(16, 185, 129, 0.35);
  --ttgl-icon-muted: rgba(216, 255, 236, 0.55);
  --ttgl-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

.ttgl.is-light .ttgl-icon--sun {
  color: #047857;
}

.ttgl.is-dark .ttgl-icon--moon {
  color: #6ee7b7;
}

.ttgl.is-dark .ttgl-thumb {
  transform: translateX(28px);
  box-shadow: 0 0 0 3px var(--ttgl-thumb-ring), 0 4px 14px rgba(0, 0, 0, 0.5);
}

@media (max-width: 640px) {
  .ttgl-label {
    display: none;
  }
  .ttgl {
    padding-right: 6px;
  }
}


.ui-lang {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    padding: 3px;
}

.ui-lang button {
    border: none;
    border-radius: 999px;
    min-width: 36px;
    height: 28px;

    letter-spacing: 0.08em;
    font-weight: 700;
    background: transparent;
    color: #edf9f2;
    cursor: pointer;
}
.ui-lang span {
    font-size: 12px;
}
.dark .ui-lang button span {
    color: black;
}

.ui-lang button.is-active {
    background: #ffffff;
    color: #114833;
}

.ui-cookie-wrap {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 320;
    pointer-events: none;
}

.ui-cookie {
    max-width: 560px;
    border-radius: 16px;
    border: 1px solid rgba(28, 154, 107, 0.22);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 30px rgba(15, 70, 48, 0.14);
    padding: 12px;
    pointer-events: auto;
}

.ui-cookie h4 {
    margin: 0;
    font-size: 15px;
    color: #154d38;
}

.ui-cookie p {
    margin: 8px 0 0;
    color: #2d5f4a;
    font-size: 13px;
    line-height: 1.55;
}

.ui-cookie-actions {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ui-cookie-actions button {
    border: none;
    min-height: 34px;
    border-radius: 999px;
    padding: 0 12px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
}

.ui-cookie-actions .primary {
    background: linear-gradient(135deg, #1ea672, #2fbf90);
    color: #f8fffb;
}

.ui-cookie-actions .ghost {
    background: #edf7f2;
    color: #1d513d;
    border: 1px solid #d6e9df;
}

.ui-wa {
    position: fixed;
    bottom: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.ui-wa--right {
    right: 16px;
}

.ui-wa--left {
    left: 16px;
    align-items: flex-start;
}

/* PANEL */
.ui-wa-panel {
    width: min(320px, calc(100vw - 32px));
    margin-bottom: 8px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(28, 154, 107, 0.24);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 16px 30px rgba(13, 70, 47, 0.18);
    animation: ui-wa-slide-up 0.25s ease-out;
}

@keyframes ui-wa-slide-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.ui-wa-head {
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 800;
    color: #f5fffa;
}

.ui-wa-body {
    padding: 12px;
}

.ui-wa-body p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #2f5f4b;
}

.ui-wa-link {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.ui-wa-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 24px rgba(13, 82, 54, 0.3);
}

.dark .ui-cookie,
[data-theme="dark"] .ui-cookie {
    background: rgba(11, 21, 17, 0.92);
    border-color: rgba(255, 255, 255, 0.12);
}

.dark .ui-cookie h4,
.dark .ui-cookie p,
[data-theme="dark"] .ui-cookie h4,
[data-theme="dark"] .ui-cookie p {
    color: #d7f3e6;
}

.dark .ui-cookie-actions .ghost,
[data-theme="dark"] .ui-cookie-actions .ghost {
    background: #1a2b24;
    border-color: #29433a;
    color: #d7f3e6;
}

.dark .ui-wa-panel,
[data-theme="dark"] .ui-wa-panel {
    background: rgba(11, 21, 17, 0.94);
    border-color: rgba(255, 255, 255, 0.12);
}

.dark .ui-wa-body p,
[data-theme="dark"] .ui-wa-body p {
    color: #c1e5d5;
}

@media (max-width: 700px) {
    .ui-wa {
        bottom: 92px;
    }

    .ui-wa--right {
        right: 12px;
    }

    .ui-wa--left {
        left: 12px;
    }

    .ui-cookie-wrap {
        left: 12px;
        right: 12px;
    }
}
.dark .lang-modal {
    background: rgba(11, 21, 17, 0.94);
    border-color: rgba(255, 255, 255, 0.12);
}
.dark .lang-item {
    background: #1a2b24;
    border-color: #29433a;
    color: #d7f3e6;
}
.dark .lang-item:hover {
    background: #29433a;
    border-color: #22c55e;
}
.dark .lang-item.active {
    background: #22c55e;
    border-color: #22c55e;
    font-weight: 600;
}

/* Açma butonu */
.lang-open-btn {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.25s;
}

.lang-open-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.4);
}

/* Overlay */
.lang-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    animation: fadeIn 0.2s ease;
}

/* Modal kutu */
.lang-modal {
    width: 100%;
    max-width: 380px;
    background: #ffffff;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: scaleIn 0.25s ease;
}

/* Header */
.lang-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 12px;
}

.lang-header button {
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

/* Liste */
.lang-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Dil item */
.lang-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f6fef9;
    border: 1px solid transparent;
    cursor: pointer;
    transition: 0.2s;
}

.lang-item:hover {
    background: #dcfce7;
    border-color: #22c55e;
}

.lang-item.active {
    background: #bbf7d0;
    border-color: #16a34a;
    font-weight: 600;
}

.lang-item .code {
    opacity: 0.6;
    font-size: 13px;
}

/* Animasyonlar */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.lang-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lang-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.flag-img {
    width: 22px;
    height: 16px;
    flex: 0 0 22px;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 4px;
    display: inline-block;
    overflow: hidden;
    background: #eef5f1;
    vertical-align: middle;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.flag-emoji {
    width: 22px;
    height: 16px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
}

.flag-fallback {
    width: 22px;
    height: 16px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.lang-close-btn {
    color: #888;
}
.ui-wa-head button:hover {
    opacity: 0.7;
}
.ui-wa-close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);

    background: transparent;
    border: none;
    color: white;
    cursor: pointer;

    font-size: 14px;
    line-height: 1;
    padding: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
}
/* ===== WhatsApp Header Fix ===== */

.ui-wa-head {
    position: relative;
    padding: 12px 42px 12px 14px; /* sağa boşluk */
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

/* Başlık */
.ui-wa-title {
    display: block;
    line-height: 1.2;
}

/* Kapatma butonu */
.ui-wa-close {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);

    width: 26px;
    height: 26px;

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

    background: rgba(255, 255, 255, 0.18);
    border: none;
    border-radius: 50%;

    color: white;
    cursor: pointer;

    font-size: 12px;
    transition: all 0.2s ease;
}

/* Hover */
.ui-wa-close:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-50%) scale(1.05);
}
/* ===== LAPTOP (1366x768 ve altı) ===== */
@media (max-width: 1366px) {
    .ui-cookie {
        max-width: 480px;
        padding: 10px;
    }

    .ui-wa-panel {
        width: min(300px, calc(100vw - 24px));
    }

    .lang-modal {
        max-width: 340px;
        padding: 16px;
    }

    .ui-wa-btn {
        width: 52px;
        height: 52px;
        font-size: 18px;
    }
}
/* ===== TABLET ===== */
@media (max-width: 1024px) {
    .ui-cookie {
        max-width: 420px;
    }

    .ui-wa-panel {
        width: 280px;
    }

    .lang-modal {
        max-width: 320px;
    }

    .ui-lang button {
        min-width: 32px;
        height: 26px;
    }
}
/* ===== SMALL MOBILE ===== */
@media (max-width: 480px) {
    .ui-cookie {
        padding: 10px;
    }

    .ui-cookie-actions {
        flex-direction: column;
    }

    .ui-cookie-actions button {
        width: 100%;
    }

    .ui-wa-btn {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .lang-open-btn {
        padding: 8px 10px;
        font-size: 13px;
    }

    .lang-item span {
        font-size: 13px;
    }
}
/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .ui-cookie-wrap {
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    .ui-cookie {
        max-width: 100%;
        border-radius: 12px;
    }

    .ui-cookie h4 {
        font-size: 14px;
    }

    .ui-cookie p {
        font-size: 12px;
    }

    .ui-cookie-actions button {
        flex: 1;
        font-size: 10px;
    }

    .ui-wa {
        bottom: 80px;
    }

    .ui-wa-panel {
        width: 100%;
    }

    .ui-wa-btn {
        width: 48px;
        height: 48px;
    }

    .lang-modal {
        width: 100%;
        max-width: 100%;
        border-radius: 14px;
        padding: 14px;
    }

    .lang-item {
        padding: 8px 10px;
    }

    .flag-img {
        width: 20px;
        height: 14px;
    }
}
/* ===== LANG BUTTON ===== */
.lang-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: white;
    border: none;

    padding: clamp(6px, 1vw, 10px) clamp(10px, 1.2vw, 14px);
    border-radius: 10px;

    font-size: clamp(12px, 1vw, 14px);
    font-weight: 500;

    cursor: pointer;
    transition: 0.25s;
}

.lang-open-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.4);
}

/* ===== MODAL ===== */
.lang-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);

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

    z-index: 999;
    padding: 12px;
}

.lang-modal {
    width: 100%;
    max-width: min(380px, 100%);

    background: #ffffff;
    border-radius: 18px;

    padding: clamp(14px, 2vw, 18px);

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: scaleIn 0.25s ease;
}

/* ===== HEADER ===== */
.lang-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px;
}

.lang-header button {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

/* ===== LIST ===== */
.lang-list {
    display: flex;
    flex-direction: column;
    gap: 6px;

    max-height: 60vh;
    overflow-y: auto;
}

/* ===== ITEM ===== */
.lang-item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: clamp(8px, 1vw, 10px) clamp(10px, 1vw, 12px);
    border-radius: 10px;

    background: #f6fef9;
    border: 1px solid transparent;

    cursor: pointer;
    transition: 0.2s;

    font-size: clamp(13px, 1vw, 14px);
}

.lang-item:hover {
    background: #dcfce7;
    border-color: #22c55e;
}

.lang-item.active {
    background: #bbf7d0;
    border-color: #16a34a;
    font-weight: 600;
}

.lang-item .code {
    opacity: 0.6;
    font-size: 12px;
}

/* ===== LEFT SIDE ===== */
.lang-left {
    display: flex;
    align-items: center;
    gap: 8px;

    min-width: 0;
}

.lang-left span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== FLAGS ===== */
.flag-img {
    width: clamp(18px, 2vw, 22px);
    height: clamp(14px, 2vw, 16px);

    flex: 0 0 auto;
    -o-object-fit: cover;
       object-fit: cover;

    border-radius: 4px;
    background: #eef5f1;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.flag-emoji,
.flag-fallback {
    width: clamp(18px, 2vw, 22px);
    height: clamp(14px, 2vw, 16px);

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

    font-size: 12px;
}

/* ===== DARK MODE ===== */
.dark .lang-modal {
    background: rgba(11, 21, 17, 0.94);
    border-color: rgba(255, 255, 255, 0.12);
}

.dark .lang-item {
    background: #1a2b24;
    border-color: #29433a;
    color: #d7f3e6;
}

.dark .lang-item:hover {
    background: #29433a;
    border-color: #22c55e;
}

.dark .lang-item.active {
    background: #22c55e;
    border-color: #22c55e;
}

/* ===== RESPONSIVE ===== */

/* Tablet */
@media (max-width: 1024px) {
    .lang-modal {
        max-width: 320px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .lang-modal {
        max-width: 100%;
        border-radius: 14px;
    }

    .lang-item {
        padding: 8px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .lang-open-btn {
        width: 100%;
        justify-content: center;
    }

    .lang-item {
        font-size: 13px;
    }
}
:root {
    --wp-green-950: #062e22;
    --wp-green-900: #0a3a29;
    --wp-green-800: #0f4b34;
    --wp-green-700: #155d3f;
    --wp-green-600: #1a6f4a;
    --wp-green-500: #1f8155;
    --wp-green-400: #2a9765;
    --wp-green-300: #57b489;
    --wp-green-200: #9ad7bd;
    --wp-green-100: #e6f6ee;

    --wp-ink-900: #0f172a;
    --wp-ink-800: #1f2937;
    --wp-ink-700: #334155;
    --wp-ink-600: #475569;
    --wp-ink-500: #64748b;
    --wp-ink-300: #cbd5e1;
    --wp-ink-200: #e2e8f0;
    --wp-ink-100: #f1f5f9;

    --wp-white: #fff;

    --wp-glass: rgba(255, 255, 255, 0.88);
    --wp-border: #e5efe9;

    --wp-shadow-sm: 0 4px 16px rgba(2, 6, 23, 0.06);
    --wp-shadow: 0 14px 36px rgba(2, 6, 23, 0.1);

    --wp-ring: rgba(31, 129, 85, 0.28);

    --wp-container: 1650px !important;

    --wp-radius: 12px;
    --wp-radius-lg: 16px;
}

html.light .wh-header,
html:not(.dark) .wh-header {
    --wh-ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
    --wh-header-bg-1: var(--site-footer-background-color);
    --wh-header-bg-2: var(--site-header-background-color);
    --wh-header-bg-3: var(--site-h1-color);
    --wh-header-accent: #f0fff6;
    --wh-header-accent-strong: #ffffff;
    --wh-header-text: #ffffff;
    --wh-header-text-soft: rgba(255, 255, 255, 0.94);
    --wh-header-text-muted: rgba(255, 255, 255, 0.82);
    --wh-header-line: rgba(255, 255, 255, 0.28);
    --wh-header-line-soft: rgba(255, 255, 255, 0.18);
    --wh-header-panel: rgba(255, 255, 255, 0.12);
    --wh-header-cta-shadow: rgba(255, 255, 255, 0.35);
    --wh-header-btn-fg: #ffffff;
    --wh-header-btn-bg: rgba(255, 255, 255, 0.22);
    --wh-header-btn-border: rgba(255, 255, 255, 0.45);
    --wh-header-btn-glow: rgba(200, 255, 220, 0.55);
}

html.dark .wh-header,
.dark .wh-header,
[data-theme="dark"] .wh-header {
    --wh-ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
    --wh-header-bg-1: #06160f;
    --wh-header-bg-2: #0b241a;
    --wh-header-bg-3: #123327;
    --wh-header-accent: #9de9bf;
    --wh-header-accent-strong: #c2f7d9;
    --wh-header-text: #f4fbf7;
    --wh-header-text-soft: rgba(244, 251, 247, 0.72);
    --wh-header-text-muted: rgba(244, 251, 247, 0.56);
    --wh-header-line: rgba(255, 255, 255, 0.12);
    --wh-header-line-soft: rgba(255, 255, 255, 0.07);
    --wh-header-panel: rgba(255, 255, 255, 0.035);
    --wh-header-cta-shadow: rgba(0, 0, 0, 0.25);
    --wh-header-btn-fg: #0d2419;
    --wh-header-btn-bg: linear-gradient(135deg, #d4ffe7, #98dfbb);
    --wh-header-btn-border: transparent;
    --wh-header-btn-glow: rgba(140, 223, 180, 0.45);
}

.dark,
[data-theme="dark"] {
    --wp-glass: rgba(12, 18, 24, 0.86);

    --wp-ink-900: #e5e7eb;
    --wp-ink-800: #dbe0e6;
    --wp-ink-700: #cbd5e1;
    --wp-ink-600: #aab6c5;
    --wp-ink-500: #94a3b8;

    --wp-ink-300: #3b495c;
    --wp-ink-200: #263243;
    --wp-ink-100: #18202b;

    --wp-border: #1d2a26;

    --wp-shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.28);
    --wp-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);

    --wp-green-100: rgba(31, 129, 85, 0.14);
}

.wh-container {
    max-width: var(--wp-container);
    margin-inline: auto;
    padding-inline: 20px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

.wh-header {
    position: fixed;

    top: 0;
    left: 0;
    width: 100%;
    z-index: 200;
}

.wh-topbar {
    color: var(--wh-header-text);
    background: linear-gradient(
        126deg,
        var(--wh-header-bg-1) 0%,
        var(--wh-header-bg-2) 52%,
        var(--wh-header-bg-3) 100%
    );
}

.wh-topbar__inner {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
@media screen and (max-width: 1024px) {
    .wh-topbar__inner .wh-topbar__left {
        display: none;
    }
    .wh-topbar__inner {
        justify-content: center;
    }
}

.wh-topbar__left,
.wh-topbar__right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wh-toplink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--wh-header-text-soft);
    text-decoration: none;
    opacity: 0.95;
    transition: 0.2s;
}

.wh-toplink:hover {
    color: var(--wh-header-accent-strong);
    opacity: 1;
    transform: translateY(-1px);
}

.wh-ico {
    display: inline-flex;
    width: 16px;
    height: 16px;
}

.wh-ico svg {
    width: 16px;
    height: 16px;
}

.wh-socials {
    display: flex;
    gap: 8px;
}

.wh-social {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--wh-header-text);
    text-decoration: none;
    background: var(--wh-header-panel);
    border: 1px solid var(--wh-header-line-soft);
    transition: 0.18s;
}

.wh-social:hover {
    transform: translateY(-1px);
    background: var(--wh-header-btn-bg);
    border-color: var(--wh-header-line);
    color: var(--wh-header-btn-fg);
}

html.light .wh-header .wh-social:hover,
html:not(.dark) .wh-header .wh-social:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.65);
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
}
.wh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    height: 34px;
    padding: 0 14px;

    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);

    border-radius: 999px;
    border: 1px solid transparent;

    cursor: pointer;
    text-decoration: none;

    transition: 0.18s;
}

.wh-btn--ghost {
    color: var(--wh-header-text);
    border-color: var(--wh-header-line);
}

.wh-btn--ghost:hover {
    background: var(--wh-header-panel);
    border-color: var(--wh-header-line-soft);
    color: var(--wh-header-accent-strong);
}

.wh-btn--light {
    background: var(--wh-header-accent-strong);
    color: var(--wh-header-bg-3);
    border: 1px solid var(--wh-header-line-soft);
}

.dark .wh-btn--light {
    background: var(--wh-header-panel);
    color: var(--wh-header-text);
    border-color: var(--wh-header-line);
}

.wh-btn--primary {
    background: var(--wh-header-btn-bg);
    color: var(--wh-header-btn-fg);
    border-color: var(--wh-header-btn-border);
    box-shadow: 0 10px 28px var(--wh-header-btn-glow);
}

.wh-btn--primary:hover {
    filter: brightness(1.05);
    box-shadow: 0 12px 32px var(--wh-header-btn-glow);
}

.wh-navwrap {
    background: linear-gradient(
        126deg,
        var(--wh-header-bg-1) 0%,
        var(--wh-header-bg-2) 52%,
        var(--wh-header-bg-3) 100%
    );
    border-bottom: 1px solid var(--wh-header-line);
    box-shadow: 0 4px 24px var(--wh-header-cta-shadow);
}

.wh-nav__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(8px, 1.2vw, 20px);
    min-height: 72px;
    padding-block: 8px;
    box-sizing: border-box;
}

.wh-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: clamp(96px, 14vw, 200px);
    flex-shrink: 0;
}

.wh-brand__logo {
    height: clamp(48px, 3.6vw + 1.75rem, 84px);
    width: auto;
    max-width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.wh-brand__logo--dark {
    display: none;
}

html.dark .wh-brand__logo--light {
    display: none;
}

html.dark .wh-brand__logo--dark {
    display: block;
}

@media (min-width: 1280px) {
    .wh-nav__inner {
        grid-template-columns: minmax(210px, 250px) minmax(0, 1fr) auto;
        gap: clamp(12px, 1vw, 18px);
    }

    .wh-brand {
        width: clamp(210px, 16vw, 250px);
        max-width: none;
    }

    .wh-brand__logo {
        height: clamp(52px, 3vw + 1.5rem, 74px);
    }

    .wh-nav-desktop {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        align-content: center;
        gap: clamp(5px, 0.45vw, 8px);
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        line-height: 1.15;
        min-width: 0;
    }
}

.wh-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2em;
    padding: 0.35em 0.45em;
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 1em;
    font-weight: var(--font-bold);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--wh-header-text);
    text-decoration: none;
    white-space: nowrap;
    transition:
        color 0.18s ease,
        text-shadow 0.18s ease;
}

/* app.css span { color: site-text } nav etiketini bozuyor; a + span birlikte beyaz */
.wh-header .wh-nav-desktop a.wh-link,
.wh-header .wh-nav-desktop a.wh-link .wh-link__label {
    color: #ffffff;
}

.wh-nav-desktop .wh-link {
    padding: 0.08em 0.18em;

    font-weight: 600;
    letter-spacing: 0.01em;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

.wh-nav-desktop .wh-link:hover {
    color: #ffffff;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.24),
        0 0 16px rgba(255, 255, 255, 0.28);
}

.wh-nav-desktop .wh-link.is-active {
    color: #ffffff;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.22),
        0 0 1px rgba(255, 255, 255, 0.95);
}

.wh-link__label {
    display: inline-block;
    white-space: nowrap;
}

.wh-header .wh-nav-desktop .wh-link__label {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.wh-link:hover {
    color: var(--wh-header-accent-strong);
}

.wh-nav-desktop .wh-link:hover {
    color: #ffffff;
}

.wh-link .wh-arrow {
    flex-shrink: 0;
    color: var(--wh-header-text-soft);
}

.wh-nav-desktop .wh-link .wh-arrow {
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.68em;
    line-height: 1;
    text-shadow: none;
}

.wh-link:hover .wh-arrow {
    color: var(--wh-header-accent);
}

.wh-nav-desktop .wh-link:hover .wh-arrow {
    color: #ffffff;
}

.wh-hamburger {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--wh-header-line-soft);
    border-radius: 10px;
    background: var(--wh-header-accent-strong);
    cursor: pointer;
}

.wh-hamburger span {
    width: 22px;
    height: 2px;
    background: var(--wh-header-bg-3);
}

html.dark .wh-hamburger,
.dark .wh-hamburger {
    background: var(--wh-header-panel);
    border-color: var(--wh-header-line);
}

html.dark .wh-hamburger span,
.dark .wh-hamburger span {
    background: var(--wh-header-text);
}

@media (min-width: 1280px) {
    .wh-hamburger {
        display: none;
    }
}

.wh-drawer {
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
}

.wh-drawer.is-open {
    pointer-events: auto;
}

.wh-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.wh-drawer.is-open .wh-drawer__backdrop {
    opacity: 1;
}

.wh-drawer__panel {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: min(92%, 400px);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: linear-gradient(
        165deg,
        var(--wh-header-bg-1) 0%,
        var(--wh-header-bg-2) 45%,
        var(--wh-header-bg-3) 100%
    );
    border-left: 1px solid var(--wh-header-line);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.22);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
}

.wh-drawer.is-open .wh-drawer__panel {
    transform: translateX(0);
}

.wh-drawer__head {
    flex-shrink: 0;
    min-height: 64px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--wh-header-line);
}

.wh-drawer__head .wh-brand {
    max-width: min(200px, 58vw);
}

.wh-drawer__head .wh-brand__logo {
    height: 38px;
}

.wh-close {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 1px solid var(--wh-header-line-soft);
    border-radius: 12px;
    background: var(--wh-header-panel);
    color: var(--wh-header-text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.wh-close:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--wh-header-line);
}

.wh-close:focus-visible {
    outline: 2px solid var(--wh-header-accent);
    outline-offset: 2px;
}

.wh-drawer__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    padding: 12px 16px 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.wh-m-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wh-m-item {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wh-m-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    box-sizing: border-box;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    text-align: left;
    text-decoration: none;
    color: #ffffff;
    background: var(--wh-header-panel);
    border: 1px solid var(--wh-header-line-soft);
    border-radius: 12px;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.wh-drawer .wh-m-link span {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.wh-m-link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--wh-header-line);
    color: #ffffff;
}

.wh-m-link:focus-visible {
    outline: 2px solid var(--wh-header-accent);
    outline-offset: 2px;
}

.wh-m-link--leaf {
    cursor: pointer;
}

.wh-m-chevron {
    flex-shrink: 0;
    font-size: 0.75rem;
    opacity: 0.85;
    transition: transform 0.22s ease;
}

.wh-m-chevron.is-open {
    transform: rotate(-180deg);
}

.wh-m-ctas {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--wh-header-line);
    display: grid;
    gap: 12px;
}

.wh-m-lang {
    display: flex;
    justify-content: center;
    padding: 4px 0 8px;
}

.wh-drawer .wh-m-lang .ui-lang {
    width: 100%;
    max-width: 280px;
    justify-content: center;
}

.wh-btn--block {
    width: 100%;
}

.wh-m-contact {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--wh-header-line);
}

@media (max-width: 1279px) {
    .wh-nav__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 72px;
    }

    .wh-brand__logo {
        height: 42px;
    }

    .wh-topbar__inner {
        height: 46px;
    }

    .wh-topbar__left {
        gap: 10px;
        font-size: 12px;
    }
    .wh-nav-desktop {
        display: none;
    }
}

.wh-nav-item {
    position: relative;
    flex: 0 0 auto;
    max-width: 100%;
}

.wh-nav-item > .wh-link {
    max-width: 100%;
    padding: 3px 5px;
    font-size: 0.79rem;
}

.wh-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: 0.2s;
}

.wh-nav-item:hover .wh-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.wh-dropdown-link {
    display: block;
    padding: 10px 14px;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    text-decoration: none;
    color: #333;
    border-radius: 8px;
}

.wh-dropdown-link:hover {
    background: #f3f3f3;
}

.wh-m-sub {
    margin-top: 4px;
    margin-left: 8px;
    padding: 6px 0 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-left: 2px solid var(--wh-header-line-soft);
}

.wh-m-sublink {
    padding: 10px 14px;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    color: rgba(255, 255, 255, 0.92);
    border-radius: 10px;
    transition: background 0.18s ease;
}

.wh-m-sublink:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.wh-m-contact-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.wh-m-contact-link {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.88) !important;
    text-decoration: none;
    word-break: break-word;
    padding: 8px 4px;
    border-radius: 8px;
    transition:
        color 0.18s ease,
        background 0.18s ease;
}

.wh-m-contact-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06);
}

.wh-nav-ctas {
    position: relative;
    z-index: 4;
    isolation: isolate;
    display: flex;
    gap: 15px;
    align-items: center;
    flex-shrink: 0;
}

.wh-nav-ctas .wh-btn {
    min-width: 0;
    height: clamp(30px, 0.9vw + 1.6rem, 36px);
    padding: 0 clamp(8px, 0.5vw + 0.35rem, 12px);
    font-size: clamp(10px, 0.35vw + 0.42rem, 12px);
    line-height: 1;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

@media (max-width: 1439px) and (min-width: 1280px) {
    .wh-nav__inner {
        grid-template-columns: 132px minmax(0, 1fr) auto;
        gap: 6px;
    }

    .wh-brand {
        width: 132px;
    }

    .wh-brand__logo {
        height: 46px;
    }

    .wh-nav-desktop {
        gap: 4px;
    }

    .wh-nav-desktop .wh-link {
        font-size: 0.88em;
        padding: 0.06em 0.22em;
        letter-spacing: 0;
        font-weight: 520;
    }

    .wh-nav-ctas {
        gap: 4px;
    }

    .wh-nav-ctas .wh-btn {
        height: 28px;
        padding: 0 7px;
        font-size: 8px;
        letter-spacing: -0.02em;
        font-weight: 700;
    }
}

@media (max-width: 1520px) and (min-width: 1440px) {
    .wh-nav__inner {
        grid-template-columns: 150px minmax(0, 1fr) auto;
        gap: 8px;
    }

    .wh-brand {
        width: 150px;
    }

    .wh-brand__logo {
        height: 52px;
    }

    .wh-nav-desktop {
        gap: 5px;
    }

    .wh-nav-desktop .wh-link {
        font-size: 0.94em;
        padding: 0.08em 0.24em;
        font-weight: 540;
    }

    .wh-nav-ctas {
        gap: 5px;
    }

    .wh-nav-ctas .wh-btn {
        height: 30px;
        padding: 0 8px;
        font-size: 8.5px;
    }
}

@media (max-width: 1279px) {
    .wh-nav-ctas {
        display: none;
    }
}
/* Light: site panel renkleri + güçlü beyaz metin; dark: sabit orman yeşili + yumuşak mint metin */

html.light .wh-foot,
html:not(.dark) .wh-foot {
    --wh-ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
    --wh-footer-bg-1: var(--site-footer-background-color);
    --wh-footer-bg-2: var(--site-header-background-color);
    --wh-footer-bg-3: var(--site-h1-color);
    --wh-footer-accent: #f0fff6;
    --wh-footer-accent-strong: #ffffff;
    --wh-footer-text: #ffffff;
    --wh-footer-text-soft: rgba(255, 255, 255, 0.94);
    --wh-footer-text-muted: rgba(255, 255, 255, 0.82);
    --wh-footer-line: rgba(255, 255, 255, 0.28);
    --wh-footer-line-soft: rgba(255, 255, 255, 0.18);
    --wh-footer-panel: rgba(255, 255, 255, 0.12);
    --wh-footer-cta-shadow: rgba(255, 255, 255, 0.35);
    --wh-footer-btn-fg: #ffffff;
    --wh-footer-btn-bg: rgba(255, 255, 255, 0.22);
    --wh-footer-btn-border: rgba(255, 255, 255, 0.45);
    --wh-footer-btn-glow: rgba(200, 255, 220, 0.55);
}

html.dark .wh-foot,
.dark .wh-foot,
[data-theme="dark"] .wh-foot {
    --wh-ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
    --wh-footer-bg-1: #06160f;
    --wh-footer-bg-2: #0b241a;
    --wh-footer-bg-3: #123327;
    --wh-footer-accent: #9de9bf;
    --wh-footer-accent-strong: #c2f7d9;
    --wh-footer-text: #f4fbf7;
    --wh-footer-text-soft: rgba(244, 251, 247, 0.72);
    --wh-footer-text-muted: rgba(244, 251, 247, 0.56);
    --wh-footer-line: rgba(255, 255, 255, 0.12);
    --wh-footer-line-soft: rgba(255, 255, 255, 0.07);
    --wh-footer-panel: rgba(255, 255, 255, 0.035);
    --wh-footer-cta-shadow: rgba(0, 0, 0, 0.25);
    --wh-footer-btn-fg: #0d2419;
    --wh-footer-btn-bg: linear-gradient(135deg, #d4ffe7, #98dfbb);
    --wh-footer-btn-border: transparent;
    --wh-footer-btn-glow: rgba(140, 223, 180, 0.45);
}

.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;
}

.wh-container {
    margin-inline: auto;
}

.wh-foot {
    position: relative;
    overflow: clip;
    color: var(--wh-footer-text);
    background: linear-gradient(
        126deg,
        var(--wh-footer-bg-1) 0%,
        var(--wh-footer-bg-2) 52%,
        var(--wh-footer-bg-3) 100%
    );
}

html.light .wh-foot::before,
html:not(.dark) .wh-foot::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            900px 420px at 84% 92%,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0) 75%
        ),
        linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0) 26%
        );
}

html.dark .wh-foot::before,
.dark .wh-foot::before,
[data-theme="dark"] .wh-foot::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            1000px 480px at 84% 95%,
            rgba(157, 233, 191, 0.12) 0%,
            rgba(157, 233, 191, 0) 78%
        ),
        linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.045) 0%,
            rgba(255, 255, 255, 0) 22%
        );
}

.wh-foot-ambient {
    position: absolute;
    inset: -10% -6%;
    z-index: 0;
    pointer-events: none;
    filter: blur(4px);
    animation: whAmbientMove 18s ease-in-out infinite;
}

html.light .wh-foot-ambient,
html:not(.dark) .wh-foot-ambient {
    background:
        radial-gradient(
            520px 240px at 80% 20%,
            rgba(255, 255, 255, 0.35),
            transparent 70%
        ),
        radial-gradient(
            400px 220px at 14% 100%,
            rgba(220, 255, 236, 0.28),
            transparent 72%
        );
}

html.dark .wh-foot-ambient,
.dark .wh-foot-ambient,
[data-theme="dark"] .wh-foot-ambient {
    background:
        radial-gradient(
            560px 260px at 82% 22%,
            rgba(170, 250, 207, 0.22),
            transparent 70%
        ),
        radial-gradient(
            420px 240px at 18% 100%,
            rgba(118, 194, 154, 0.18),
            transparent 72%
        );
}

.wh-nature-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

html.light .wh-tree--a,
html:not(.dark) .wh-tree--a {
    opacity: 0.26;
}

html.light .wh-tree--b,
html:not(.dark) .wh-tree--b {
    opacity: 0.2;
}

html.light .wh-tree--c,
html:not(.dark) .wh-tree--c {
    opacity: 0.16;
}

html.light .wh-tree--d,
html:not(.dark) .wh-tree--d {
    opacity: 0.12;
}

.wh-tree {
    position: absolute;
    right: clamp(-2rem, -4vw, 0rem);
    bottom: -1.5rem;
    width: clamp(220px, 30vw, 440px);
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
    opacity: 0.2;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.36));
    transform-origin: 65% 100%;
    animation: whTreeFloat 13s ease-in-out infinite;
}

.wh-tree--a {
    right: clamp(-2rem, -4vw, 0rem);
    width: clamp(260px, 32vw, 470px);
    opacity: 0.2;
    animation-duration: 14s;
}

.wh-tree--b {
    right: clamp(7rem, 14vw, 16rem);
    bottom: -1.1rem;
    width: clamp(200px, 24vw, 330px);
    opacity: 0.16;
    animation-duration: 16s;
    animation-delay: -3s;
}

.wh-tree--c {
    right: clamp(16rem, 29vw, 34rem);
    bottom: -1.2rem;
    width: clamp(160px, 19vw, 270px);
    opacity: 0.12;
    animation-duration: 18s;
    animation-delay: -6s;
}

.wh-tree--d {
    right: clamp(24rem, 43vw, 50rem);
    bottom: -1.05rem;
    width: clamp(120px, 14vw, 210px);
    opacity: 0.1;
    animation-duration: 20s;
    animation-delay: -8s;
}

.wh-leaves {
    position: absolute;
    inset: -6% 0 -9%;
}

.wh-leaf {
    position: absolute;
    top: -10%;
    left: var(--leaf-left);
    width: var(--leaf-size);
    height: calc(var(--leaf-size) * 1.35);
    border-radius: 65% 0 65% 0;
    background: linear-gradient(145deg, #d8ffe9, #7ad0a1);
    opacity: 0.65;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    animation: whLeafFall var(--leaf-duration) linear var(--leaf-delay) infinite;
}

.wh-foot-cta,
.wh-foot-main,
.wh-foot-bottom {
    position: relative;
    z-index: 2;
}

.wh-foot-cta {
    border-bottom: 1px solid var(--wh-footer-line);
    backdrop-filter: blur(2px);
}

.wh-foot-cta__inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.wh-foot-cta__inner h2 {
    margin: 0;
    max-width: 34ch;
    font-size: clamp(1.05rem, 1.85vw, 1.55rem);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--wh-footer-text);
}

html.light .wh-foot-cta__inner h2,
html:not(.dark) .wh-foot-cta__inner h2 {
    text-shadow: 0 1px 2px var(--wh-footer-cta-shadow);
}

.wh-foot-main {
    padding: 2.1rem 0 2rem;
    border-bottom: 1px solid var(--wh-footer-line);
}

.wh-foot-grid {
    display: grid;
    grid-template-columns: minmax(200px, 1.25fr) repeat(2, minmax(160px, 1fr));
    gap: 1.35rem;
    align-items: start;
}

.wh-foot-col {
    min-width: 0;
    padding: 0.95rem;
    border: 1px solid transparent;
    border-radius: 16px;
    background: linear-gradient(
        180deg,
        var(--wh-footer-panel),
        rgba(255, 255, 255, 0.015)
    );
    transition:
        transform 0.45s var(--wh-ease-premium),
        border-color 0.45s var(--wh-ease-premium),
        box-shadow 0.45s var(--wh-ease-premium);
}

.wh-foot-col:hover {
    transform: translateY(-4px);
    border-color: var(--wh-footer-line);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.26);
}

.wh-foot-brand {
    display: inline-flex;
    margin-bottom: 0.72rem;
}

.wh-foot-logo {
    width: auto;
    max-width: 148px;
    max-height: 70px;
    -o-object-fit: contain;
       object-fit: contain;
}

.wh-foot-wordmark {
    display: inline-block;
    margin-bottom: 0.95rem;
    color: var(--wh-footer-text);
    text-decoration: none;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
}

.wh-foot-text {
    margin: 0;
    color: var(--wh-footer-text-soft);
    max-width: 34ch;
    font-size: 0.875rem;
    line-height: 1.65;
}

html.light .wh-foot-text,
html:not(.dark) .wh-foot-text {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.wh-foot-socials {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.wh-foot-social {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid var(--wh-footer-line-soft);
    color: var(--wh-footer-text);
    background: rgba(255, 255, 255, 0.02);
    text-decoration: none;
    transition:
        transform 0.35s var(--wh-ease-premium),
        border-color 0.35s var(--wh-ease-premium),
        color 0.35s var(--wh-ease-premium),
        box-shadow 0.35s var(--wh-ease-premium);
}

.wh-foot-social:hover {
    transform: translateY(-2px);
    border-color: var(--wh-footer-accent);
    color: var(--wh-footer-accent-strong);
    box-shadow: 0 10px 20px rgba(121, 208, 162, 0.25);
}

.wh-foot-title {
    margin: 0 0 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.68rem;
    color: var(--wh-footer-text-muted);
}

.wh-foot .wh-foot-title {
    color: var(--wh-footer-text-muted);
}

.wh-foot-list,
.wh-foot-links,
.wh-foot-mini {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wh-foot-list {
    display: grid;
    gap: 0.4rem;
}

.wh-foot-list a {
    font-size: 0.84rem;
}

.wh-foot-list a,
.wh-foot-link {
    color: var(--wh-footer-text-soft);
    text-decoration: none;
    line-height: 1.55;
    transition:
        transform 0.32s var(--wh-ease-premium),
        color 0.32s var(--wh-ease-premium),
        text-shadow 0.32s var(--wh-ease-premium);
}

.wh-foot-list a:hover,
.wh-foot-link:hover {
    color: var(--wh-footer-text);
    transform: translateX(3px);
    text-shadow: 0 0 18px rgba(157, 233, 191, 0.25);
}

.wh-foot-address {
    margin: 0 0 0.72rem;
    font-style: normal;
    font-size: 0.84rem;
    line-height: 1.65;
    color: var(--wh-footer-text-soft);
}

.wh-foot-links {
    display: grid;
    gap: 0.4rem;
}

.wh-foot-links .wh-foot-link {
    font-size: 0.84rem;
}

.wh-foot-news-text {
    margin: 0 0 0.9rem;
    color: var(--wh-footer-text-soft);
    line-height: 1.7;
}

.wh-foot-news {
    display: flex;
    gap: 0.55rem;
}

.wh-input {
    flex: 1;
    min-width: 0;
    height: 2.7rem;
    border-radius: 11px;
    border: 1px solid var(--wh-footer-line-soft);
    background: rgba(255, 255, 255, 0.03);
    color: var(--wh-footer-text);
    padding: 0 0.86rem;
    outline: none;
    transition:
        border-color 0.3s var(--wh-ease-premium),
        box-shadow 0.3s var(--wh-ease-premium),
        background 0.3s var(--wh-ease-premium);
}

.wh-input::-moz-placeholder {
    color: var(--wh-footer-text-muted);
}

.wh-input::placeholder {
    color: var(--wh-footer-text-muted);
}

.wh-input:focus {
    border-color: var(--wh-footer-accent);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 4px rgba(157, 233, 191, 0.12);
}

.wh-btn {
    border: 1px solid transparent;
    border-radius: 11px;
    height: 2.45rem;
    padding: 0 0.9rem;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.32s var(--wh-ease-premium),
        box-shadow 0.32s var(--wh-ease-premium),
        background 0.32s var(--wh-ease-premium),
        color 0.32s var(--wh-ease-premium),
        border-color 0.32s var(--wh-ease-premium);
}

.wh-btn:hover {
    transform: translateY(-2px);
}

.wh-btn--primary {
    color: var(--wh-footer-btn-fg);
    background: var(--wh-footer-btn-bg);
    border-color: var(--wh-footer-btn-border);
    box-shadow: 0 8px 22px var(--wh-footer-btn-glow);
}

.wh-btn--primary:hover {
    box-shadow: 0 12px 28px var(--wh-footer-btn-glow);
}

.wh-btn--ghost {
    color: var(--wh-footer-text);
    border-color: var(--wh-footer-line);
    background: rgba(255, 255, 255, 0.02);
}

.wh-btn--ghost:hover {
    border-color: var(--wh-footer-accent);
    color: var(--wh-footer-accent-strong);
}

.wh-foot-bottom {
    padding: 1.05rem 0;
}

.wh-foot-bottom__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem 1.25rem;
}

.wh-foot-copy {
    margin: 0;
    color: var(--wh-footer-text-muted);
    font-size: 0.83rem;
}

.wh-foot-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
}

.wh-foot-mini a {
    color: var(--wh-footer-text-muted);
    text-decoration: none;
    font-size: 0.8rem;
    transition:
        color 0.3s var(--wh-ease-premium),
        transform 0.3s var(--wh-ease-premium);
}

.wh-foot-mini a:hover {
    color: var(--wh-footer-text);
    transform: translateY(-1px);
}

.wh-foot a:focus-visible,
.wh-foot button:focus-visible,
.wh-foot input:focus-visible {
    outline: 2px solid var(--wh-footer-accent);
    outline-offset: 2px;
}

@keyframes whLeafFall {
    0% {
        transform: translate3d(0, -8%, 0)
            rotate(calc(var(--leaf-rotation) * 0deg));
        opacity: 0;
    }
    12% {
        opacity: 0.62;
    }
    100% {
        transform: translate3d(var(--leaf-drift), 118%, 0)
            rotate(calc(var(--leaf-rotation) * 330deg));
        opacity: 0;
    }
}

@keyframes whTreeFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(-8px, -10px, 0);
    }
}

@keyframes whAmbientMove {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(-12px, 8px, 0) scale(1.03);
    }
}

@media (max-width: 1080px) {
    .wh-foot-grid {
        grid-template-columns: 1fr 1fr;
    }

    .wh-foot-col--brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .wh-container {
        width: min(100% - 1.25rem, 1120px);
    }

    .wh-foot-cta__inner {
        min-height: auto;
        padding: 1.35rem 0;
        align-items: flex-start;
        flex-direction: column;
    }

    .wh-foot-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .wh-foot-col {
        padding: 1rem;
    }

    .wh-foot-news {
        flex-direction: column;
    }

    .wh-btn--ghost {
        width: 100%;
    }

    .wh-foot-bottom__inner {
        justify-content: center;
        text-align: center;
    }

    .wh-tree {
        width: 230px;
        opacity: 0.22;
    }

    .wh-tree--b,
    .wh-tree--c,
    .wh-tree--d {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wh-foot *,
    .wh-foot::before,
    .wh-foot::after {
        animation: none !important;
        transition: none !important;
    }
}
.dp-wrapper {
    display: flex;
    flex-direction: column;
    background: #f4f6f5;
}

.dp-hero {
    position: relative;
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    overflow: hidden;
    background: linear-gradient(135deg, #0d3f2c, #0f5c3d);
}

.dp-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.7);
    transform: scale(1.05);
}

.dp-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.35),
        rgba(0, 0, 0, 0.65)
    );
}

.dp-hero__inner {
    position: relative;
    text-align: center;
    padding: 0 20px;
    max-width: 900px;
}

.dp-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background-color: #0f8f5a;
    border-radius: 999px;
    font-family: var(--font-sans);
    color: white;
    font-size: var(--text-xs);
    font-weight: var(--font-extrabold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dp-title {
    font-size: 56px;
    font-weight: 600;
    margin: 20px 0;
    color: white;
    letter-spacing: 1px;
}

.dp-subtitle {
    font-size: 20px;
    opacity: 0.9;
    max-width: 700px;
    margin: 0 auto;
}

.dp-content {
    position: relative;
    margin-top: -80px;
    padding: 0 20px 120px;
}

.dp-container {
    max-width: 1100px;
    margin: 0 auto;
}

.dp-block,
.dp-text,
.dp-card {
    background: #ffffff;
    padding: 70px;
    border-radius: 22px;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.08),
        0 10px 25px rgba(0, 0, 0, 0.04);
    font-size: 18px;
    line-height: 1.9;
    color: #2d2d2d;
    transition: all 0.3s ease;
    margin-bottom: 50px;
}

.dp-block:hover,
.dp-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.12),
        0 15px 30px rgba(0, 0, 0, 0.05);
}

.dp-h2 {
    font-size: 32px;
    margin-bottom: 25px;
    font-weight: 600;
    color: #0f4c33;
}

.dp-text {
    font-size: 18px;
    line-height: 1.9;
    color: #333;
}

.dp-richtext {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.dp-richtext > :first-child {
    margin-top: 0;
}

.dp-richtext > :last-child {
    margin-bottom: 0;
}

.dp-richtext p,
.dp-richtext ul,
.dp-richtext ol,
.dp-richtext blockquote {
    margin: 0 0 1rem;
}

.dp-richtext ul,
.dp-richtext ol {
    padding-left: 1.25rem;
}

.dp-richtext li + li {
    margin-top: 0.4rem;
}

.dp-richtext strong,
.dp-richtext b,
.dp-richtext h2,
.dp-richtext h3,
.dp-richtext h4 {
    color: #163725;
}

.dp-richtext a {
    color: #0f8f5a;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dp-image img {
    width: 100%;
    border-radius: 18px;
    margin-top: 20px;
    transition: transform 0.4s ease;
}

.dp-image img:hover {
    transform: scale(1.02);
}

.dp-content--gallery {
    margin-top: -40px;
    padding-bottom: 80px;
}

.dp-container--gallery {
    max-width: 1320px;
}

.dp-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.dp-gallery-card {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    cursor: zoom-in;
    display: block;
    text-align: inherit;
}

.dp-gallery-card img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 3;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.3s ease;
}

.dp-gallery-card:hover img,
.dp-gallery-card:focus-visible img {
    transform: scale(1.04);
}

.dp-gallery-card:focus-visible {
    outline: 3px solid #10b981;
    outline-offset: 3px;
}

.dp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 84px;
    background: rgba(5, 15, 12, 0.9);
    cursor: zoom-out;
}

.dp-lightbox__figure {
    margin: 0;
    max-width: min(1120px, 100%);
    max-height: 100%;
    cursor: default;
}

.dp-lightbox__figure img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 144px);
    -o-object-fit: contain;
       object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}

.dp-lightbox__close,
.dp-lightbox__nav {
    position: fixed;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.dp-lightbox__close:hover,
.dp-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.24);
    transform: scale(1.04);
}

.dp-lightbox__close:focus-visible,
.dp-lightbox__nav:focus-visible {
    outline: 3px solid #6ee7b7;
    outline-offset: 3px;
}

.dp-lightbox__close {
    top: 22px;
    right: 22px;
    width: 44px;
    height: 44px;
    font-size: 32px;
    line-height: 1;
}

.dp-lightbox__nav {
    top: 50%;
    width: 48px;
    height: 48px;
    font-size: 42px;
    line-height: 1;
}

.dp-lightbox__nav--prev {
    left: 24px;
}

.dp-lightbox__nav--next {
    right: 24px;
}

@media (max-width: 768px) {
    .dp-title {
        font-size: 38px;
    }

    .dp-block,
    .dp-text,
    .dp-card {
        padding: 40px;
    }

    .dp-content {
        margin-top: -40px;
    }

    .dp-content--gallery {
        margin-top: -20px;
        padding-bottom: 56px;
    }

    .dp-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .dp-lightbox {
        padding: 64px 16px;
    }

    .dp-lightbox__figure img {
        max-height: calc(100vh - 128px);
    }

    .dp-lightbox__nav {
        width: 42px;
        height: 42px;
        font-size: 34px;
    }

    .dp-lightbox__nav--prev {
        left: 10px;
    }

    .dp-lightbox__nav--next {
        right: 10px;
    }
}
.ep-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 18px;
    background:
        radial-gradient(circle at top left, rgba(25, 191, 115, 0.18), transparent 32%),
        radial-gradient(circle at right center, rgba(59, 130, 246, 0.16), transparent 28%),
        linear-gradient(180deg, #f5faf7 0%, #eaf4ef 100%);
}

.ep-shell {
    width: min(100%, 1040px);
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
}

.ep-code {
    font-size: clamp(5rem, 16vw, 10rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.06em;
    color: rgba(6, 78, 59, 0.16);
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
}

.ep-card {
    border-radius: 28px;
    padding: 34px 30px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.12);
}

.ep-kicker {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0f766e;
}

.ep-title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.05;
    color: #0f172a;
}

.ep-text {
    margin: 16px 0 0;
    max-width: 56ch;
    font-size: 1rem;
    line-height: 1.75;
    color: #475569;
}

.ep-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.ep-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.ep-btn--primary {
    background: linear-gradient(135deg, #059669, #14b8a6);
    color: #fff;
    box-shadow: 0 16px 32px rgba(5, 150, 105, 0.24);
}

.ep-btn--ghost {
    background: transparent;
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.14);
}

.ep-btn:hover {
    transform: translateY(-1px);
}

html[data-theme="dark"] .ep-wrap,
.dark .ep-wrap,
body[data-theme="dark"] .ep-wrap {
    background:
        radial-gradient(circle at top left, rgba(16, 185, 129, 0.18), transparent 32%),
        radial-gradient(circle at right center, rgba(56, 189, 248, 0.12), transparent 28%),
        linear-gradient(180deg, #08110e 0%, #0b1512 100%);
}

html[data-theme="dark"] .ep-code,
.dark .ep-code {
    color: rgba(110, 231, 183, 0.12);
}

html[data-theme="dark"] .ep-card,
.dark .ep-card {
    background: rgba(10, 15, 13, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .ep-title,
.dark .ep-title {
    color: #f8fafc;
}

html[data-theme="dark"] .ep-text,
.dark .ep-text {
    color: #cbd5e1;
}

html[data-theme="dark"] .ep-btn--ghost,
.dark .ep-btn--ghost {
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.18);
}

@media (max-width: 760px) {
    .ep-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .ep-code {
        text-align: left;
    }

    .ep-card {
        padding: 26px 20px;
    }

    .ep-actions {
        flex-direction: column;
    }

    .ep-btn {
        width: 100%;
    }
}
.gvf-page {
    padding: 28px 20px 70px;
    background: linear-gradient(180deg, #dae9fb, #cfe0f5);
}

.gvf-box {
    max-width: 1380px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 78, 141, 0.12);
    border-radius: 20px;
    box-shadow: 0 26px 64px rgba(13, 33, 70, 0.15);
    padding: 22px;
}

.gvf-head {
    text-align: center;
    margin-bottom: 18px;
}

.gvf-head h1 {
    margin: 0 0 6px;
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.08;
    color: #0f172a;
}

.gvf-head p {
    margin: 0;
    color: #64748b;
    font-size: 16px;
}

.gvf-top {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}

.gvf-amounts h2,
.gvf-section h2 {
    margin: 0 0 12px;
    font-size: 26px;
    color: #2a9765;
}

.gvf-amount-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.gvf-amount-card {
    position: relative;
    padding: 16px 14px 14px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    display: grid;
    gap: 5px;
    text-align: left;
    cursor: pointer;
    transition:
        transform 0.16s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.gvf-amount-card strong {
    font-size: 30px;
    color: #1e293b;
}

.gvf-amount-card small {
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
}

.gvf-amount-card:hover {
    transform: translateY(-1px);
}

.gvf-amount-card.is-active {
    border-color: #2a9765;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
}

.gvf-radio {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: #fff;
}

.gvf-amount-card.is-active .gvf-radio,
.gvf-custom.is-active .gvf-radio {
    border-color: #2a9765;
    background: radial-gradient(circle at center, #2a9765 45%, transparent 46%);
}

.gvf-custom {
    margin-top: 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 14px;
    padding: 16px;
    position: relative;
    cursor: pointer;
}

.gvf-custom-body h3 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #1e293b;
}

.gvf-custom-input {
    display: flex;
    align-items: center;
    width: min(290px, 100%);
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    overflow: hidden;
    background: #f8fafc;
}

.gvf-custom-input span {
    padding: 10px 12px;
    color: #334155;
    border-right: 1px solid #dbeafe;
    font-weight: 700;
}

.gvf-custom-input input {
    width: 100%;
    border: 0;
    outline: none;
    padding: 10px 12px;
    background: transparent;
    color: #0f172a;
}

.gvf-custom-body p {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 14px;
}

.gvf-custom.is-active {
    border-color: #2a9765;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}

.gvf-preview {
    min-height: 245px;
    display: grid;
    place-items: center;
    position: relative;
    perspective: 1000px;
}

.gvf-card {
    width: min(420px, 100%);
    aspect-ratio: 16/10;
    border-radius: 18px;
    transition: transform 0.3s ease;
}

.gcf-back {
    position: absolute;
    transform: translate(-18px, 12px) rotate(8deg);
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.34),
        rgba(255, 255, 255, 0.1)
    );
}

.gcf-front {
    position: relative;
    transform: rotate(-4deg);
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: linear-gradient(160deg, #2dcf7e, #0e9b5b 55%, #0a7d49);
    box-shadow: 0 24px 56px rgba(5, 150, 105, 0.42);
    color: #eff6ff;
    padding: 18px;
    display: grid;
    align-content: space-between;
}

.gcf-chip {
    width: 42px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f7c15f, #eab308);
}

.gcf-brand {
    position: absolute;
    top: 18px;
    color: white;
    right: 18px;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.gcf-front strong {
    font-size: 26px;
}

.gcf-front em {
    justify-self: end;
    font-style: normal;
    font-size: 18px;
    font-weight: 900;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 6px 10px;
}

.gvf-section {
    padding-top: 18px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.12);
    padding-bottom: 18px;
}

.gvf-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.gvf-section label {
    display: grid;
    gap: 6px;
    color: #1e293b;
    font-size: 15px;
    font-weight: 600;
}

.gvf-section input,
.gvf-section select,
.gvf-section textarea {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    padding: 10px 12px;
    color: #0f172a;
    outline: none;
}

.gvf-section input:focus,
.gvf-section select:focus,
.gvf-section textarea:focus {
    border-color: #2a9765;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.gvf-full {
    margin-top: 12px;
}

.gvf-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.gvf-footer {
    margin-top: 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.1);
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gvf-total {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #64748b;
}

.gvf-total strong {
    color: #0f172a;
    font-size: 24px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 6px 12px;
}

.gvf-pay-btn {
    border: 0;
    border-radius: 10px;
    padding: 12px 22px;
    font-weight: 800;
    color: #eff6ff;
    background: linear-gradient(90deg, #2a9765, #1d4ed8);
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.32);
    cursor: pointer;
}

.gvf-pay-btn:hover {
    filter: brightness(1.04);
}

html[data-theme="dark"] .gvf-page,
.dark .gvf-page {
    background: linear-gradient(180deg, #09101f, #0b1424);
}

html[data-theme="dark"] .gvf-box,
.dark .gvf-box {
    background: rgba(2, 6, 23, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .gvf-head h1,
html[data-theme="dark"] .gvf-amounts h2,
html[data-theme="dark"] .gvf-section h2,
html[data-theme="dark"] .gvf-section label,
.dark .gvf-head h1,
.dark .gvf-amounts h2,
.dark .gvf-section h2,
.dark .gvf-section label {
    color: #e2e8f0;
}

html[data-theme="dark"] .gvf-head p,
html[data-theme="dark"] .gvf-custom-body p,
.dark .gvf-head p,
.dark .gvf-custom-body p {
    color: #94a3b8;
}

html[data-theme="dark"] .gvf-amount-card,
html[data-theme="dark"] .gvf-custom,
html[data-theme="dark"] .gvf-section input,
html[data-theme="dark"] .gvf-section select,
html[data-theme="dark"] .gvf-section textarea,
html[data-theme="dark"] .gvf-total strong,
.dark .gvf-amount-card,
.dark .gvf-custom,
.dark .gvf-section input,
.dark .gvf-section select,
.dark .gvf-section textarea,
.dark .gvf-total strong {
    background: rgba(15, 23, 42, 0.84);
    border-color: rgba(255, 255, 255, 0.18);
    color: #e2e8f0;
}

html[data-theme="dark"] .gvf-amount-card strong,
html[data-theme="dark"] .gvf-amount-card small,
.dark .gvf-amount-card strong,
.dark .gvf-amount-card small {
    color: #cbd5e1;
}

html[data-theme="dark"] .gvf-footer,
.dark .gvf-footer {
    border-top-color: rgba(255, 255, 255, 0.14);
}

@media (max-width: 1200px) {
    .gvf-amount-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .gvf-top {
        grid-template-columns: minmax(0, 1fr);
    }

    .gvf-preview {
        order: -1;
    }

    .gvf-form-row,
    .gvf-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 700px) {
    .gvf-amount-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Landing + payment method selection */
.gvf-box--landing {
    padding-bottom: 28px;
}

.gvf-api-banner {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.35);
    color: #7f1d1d;
    font-size: 14px;
    line-height: 1.45;
}

.gvf-pay-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 8px;
}

.gvf-pay-card {
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    padding: 18px 16px;
    display: grid;
    gap: 10px;
    min-height: 160px;
    align-content: start;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.gvf-pay-card h2 {
    margin: 0;
    font-size: 22px;
    color: #0b4a8f;
}

.gvf-pay-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.45;
    flex: 1;
}

.gvf-pay-card.is-disabled {
    opacity: 0.55;
    filter: grayscale(0.2);
}

.gvf-pay-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
    color: #eff6ff;
    background: linear-gradient(90deg, #2a9765, #1d4ed8);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
}

.gvf-pay-link:hover {
    filter: brightness(1.05);
}

.gvf-pay-card--paypal .gvf-pay-link {
    background: linear-gradient(90deg, #0070ba, #003087);
}

.gvf-pay-card--sepa .gvf-pay-link {
    background: linear-gradient(90deg, #0f766e, #0d9488);
}

.gvf-pay-locked {
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
}

.gvf-invoice-hint {
    margin: 22px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.2);
    color: #334155;
    font-size: 14px;
    line-height: 1.45;
}

.gvf-method-stack {
    display: grid;
    gap: 8px;
}

.gvf-side-section {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(15, 23, 42, 0.1);
}

.gvf-side-section h2 {
    margin: 0 0 12px;
    font-size: 20px;
    color: #0b4a8f;
}

.gvf-company-list {
    margin: 0;
    padding-left: 18px;
    color: #334155;
}

.gvf-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.1);
}

.gvf-invoices-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.gvf-invoices-table th,
.gvf-invoices-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.gvf-invoices-table th {
    background: rgba(37, 99, 235, 0.08);
    color: #0f172a;
    font-weight: 700;
}

/* Checkout */
.gvf-checkout-top {
    margin-bottom: 8px;
}

.gvf-back {
    display: inline-block;
    margin-bottom: 12px;
    font-weight: 700;
    color: #2a9765;
    text-decoration: none;
    font-size: 14px;
}

.gvf-back:hover {
    text-decoration: underline;
}

.gvf-payment-slot {
    margin-top: 14px;
}

.gvf-method-panel {
    border-radius: 14px;
    border: 1px dashed rgba(37, 99, 235, 0.35);
    background: rgba(37, 99, 235, 0.06);
    padding: 14px 16px;
}

.gvf-method-panel h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: #0b4a8f;
}

.gvf-hint {
    margin: 0 0 8px;
    color: #14532d;
    font-size: 14px;
}

.gvf-warn {
    margin: 0 0 8px;
    color: #9a3412;
    font-size: 14px;
    font-weight: 600;
}

.gvf-note {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

.gvf-method-panel code {
    font-size: 12px;
    background: rgba(255, 255, 255, 0.85);
    padding: 2px 6px;
    border-radius: 6px;
}

.gvf-sepa-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.gvf-sepa-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #334155;
}

.gvf-sepa-list span {
    color: #64748b;
}

.gvf-pay-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.2);
}

.gvf-pay-btn--paypal {
    background: linear-gradient(90deg, #0070ba, #003087);
    box-shadow: 0 12px 28px rgba(0, 112, 186, 0.35);
}

.gvf-pay-btn--sepa {
    background: linear-gradient(90deg, #0f766e, #0d9488);
    box-shadow: 0 12px 28px rgba(15, 118, 110, 0.32);
}

.gvf-submit-state {
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.1);
}

.gvf-submit-state strong {
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
}

.gvf-submit-state p {
    margin: 0;
    line-height: 1.5;
}

.gvf-submit-state--error {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(220, 38, 38, 0.2);
    color: #991b1b;
}

.gvf-submit-state--success {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(22, 163, 74, 0.18);
    color: #14532d;
}

.gvf-invoice-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.gvf-invoice-result-grid div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.66);
}

.gvf-invoice-result-grid span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.gvf-invoice-result-grid b {
    color: #0f172a;
    word-break: break-word;
}

@media (max-width: 980px) {
    .gvf-pay-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

html[data-theme="dark"] .gvf-api-banner,
.dark .gvf-api-banner {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fecaca;
}

html[data-theme="dark"] .gvf-pay-card,
.dark .gvf-pay-card {
    background: rgba(15, 23, 42, 0.84);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .gvf-invoices-table th,
.dark .gvf-invoices-table th {
    background: rgba(37, 99, 235, 0.18);
    color: #e2e8f0;
}

html[data-theme="dark"] .gvf-invoices-table td,
.dark .gvf-invoices-table th {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .gvf-method-panel,
.dark .gvf-method-panel {
    border-color: rgba(96, 165, 250, 0.35);
    background: rgba(37, 99, 235, 0.12);
}

html[data-theme="dark"] .gvf-method-panel code,
.dark .gvf-method-panel code {
    background: rgba(2, 6, 23, 0.65);
    color: #e2e8f0;
}

html[data-theme="dark"] .gvf-submit-state--error,
.dark .gvf-submit-state--error {
    background: rgba(127, 29, 29, 0.32);
    border-color: rgba(248, 113, 113, 0.22);
    color: #fecaca;
}

html[data-theme="dark"] .gvf-submit-state--success,
.dark .gvf-submit-state--success {
    background: rgba(20, 83, 45, 0.36);
    border-color: rgba(74, 222, 128, 0.2);
    color: #dcfce7;
}

html[data-theme="dark"] .gvf-invoice-result-grid div,
.dark .gvf-invoice-result-grid div {
    background: rgba(15, 23, 42, 0.76);
}

html[data-theme="dark"] .gvf-invoice-result-grid span,
.dark .gvf-invoice-result-grid span {
    color: #94a3b8;
}

html[data-theme="dark"] .gvf-invoice-result-grid b,
.dark .gvf-invoice-result-grid b {
    color: #e2e8f0;
}

/* Refined gift voucher layout */
.gvf-page {
    background:
        radial-gradient(
            circle at top left,
            rgba(255, 255, 255, 0.78),
            transparent 34%
        ),
        linear-gradient(180deg, #dbeafe 0%, #d5e6fb 44%, #eaf2fb 100%);
}

.gvf-box {
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.12);
}

.gvf-head--landing,
.gvf-head--checkout {
    text-align: left;
    max-width: 760px;
    margin-bottom: 24px;
}

.gvf-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    background: rgba(255, 255, 255, 0.84);
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gvf-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.gvf-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.gvf-intro {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 16px;
    margin-bottom: 24px;
}

.gvf-intro-card {
    padding: 22px;
    border-radius: 20px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.92),
        rgba(248, 250, 252, 0.92)
    );
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.gvf-intro-card--highlight {
    background: linear-gradient(145deg, #0f172a, #026e2b 55%, #2a9765);
    color: #eff6ff;
}

.gvf-intro-card--highlight p,
.gvf-intro-card--highlight .gvf-intro-label {
    color: rgba(239, 246, 255, 0.88);
}
.gvf-intro-card h2 {
    margin: 0 0 8px;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.1;
}

.gvf-intro-card p {
    margin: 0;
    color: white;
    line-height: 1.6;
}

.gvf-intro-label {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1d4ed8;
}

.gvf-method-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin: 10px 0 14px;
}

.gvf-method-header h2,
.gvf-section-head h2 {
    margin: 0 0 6px;
}

.gvf-method-header p,
.gvf-section-head p {
    margin: 0;
    color: #64748b;
    line-height: 1.55;
}

.gvf-pay-grid {
    gap: 18px;
}

.gvf-pay-card {
    position: relative;
    min-height: 210px;
    padding: 24px 20px 20px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.gvf-pay-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #2a9765, #1d4ed8);
}

.gvf-pay-card--paypal::before {
    background: linear-gradient(90deg, #0070ba, #003087);
}

.gvf-pay-card--sepa::before {
    background: linear-gradient(90deg, #0f766e, #0d9488);
}

.gvf-pay-badge {
    display: inline-flex;
    width: -moz-fit-content;
    width: fit-content;
    margin-bottom: 14px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gvf-pay-card--paypal .gvf-pay-badge {
    background: rgba(0, 112, 186, 0.12);
    color: #005ea6;
}

.gvf-pay-card--sepa .gvf-pay-badge {
    background: rgba(15, 118, 110, 0.12);
    color: #0f766e;
}

.gvf-pay-card h2 {
    font-size: 28px;
}

.gvf-pay-card p {
    font-size: 15px;
}

.gvf-pay-card.is-disabled {
    opacity: 1;
    filter: none;
}

.gvf-pay-card.is-disabled .gvf-pay-link {
    pointer-events: none;
}

.gvf-pay-locked {
    margin-top: auto;
    padding: 11px 14px;
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.12);
    color: #64748b;
}

.gvf-side-section {
    margin-top: 26px;
}

.gvf-company-list {
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gvf-company-list li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.gvf-box--checkout {
    padding-top: 20px;
}

.gvf-checkout-top {
    margin-bottom: 18px;
}

.gvf-back {
    margin-bottom: 16px;
    padding: 8px 0;
}

.gvf-section-head {
    margin-bottom: 14px;
}

.gvf-amount-card,
.gvf-custom,
.gvf-section input,
.gvf-section textarea,
.gvf-method-panel {
    border-radius: 16px;
}

.gvf-amount-card {
    padding: 18px 16px 16px;
}

.gvf-amount-card strong {
    font-size: 28px;
}

.gvf-preview {
    min-height: 320px;
}

.gcf-front {
    transform: rotate(-5deg);
    background:
        radial-gradient(
            circle at top right,
            rgba(255, 255, 255, 0.2),
            transparent 26%
        ),
        linear-gradient(145deg, #0f172a 0%, #14532d 45%, #15803d 100%);
}

.gcf-brand {
    font-size: 16px;
    letter-spacing: 0.14em;
}

.gcf-tag {
    display: inline-flex;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 32px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: white;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gcf-copy {
    margin: 10px 0 0;
    max-width: 240px;
    color: rgba(239, 246, 255, 0.84);
    line-height: 1.5;
}

.gvf-summary-grid {
    margin-top: 6px;
}

.gvf-payment-slot {
    margin-top: 18px;
}

.gvf-method-panel {
    padding: 18px;
    background: linear-gradient(
        180deg,
        rgba(37, 99, 235, 0.06),
        rgba(255, 255, 255, 0.66)
    );
}

.gvf-api-banner,
.gvf-invoice-hint {
    border-radius: 16px;
}

html[data-theme="dark"] .gvf-page,
.dark .gvf-page {
    background:
        radial-gradient(
            circle at top left,
            rgba(59, 130, 246, 0.18),
            transparent 28%
        ),
        linear-gradient(180deg, #07101f 0%, #0b1424 52%, #101c34 100%);
}

html[data-theme="dark"] .gvf-kicker,
html[data-theme="dark"] .gvf-pill,
html[data-theme="dark"] .gvf-company-list li,
.dark .gvf-kicker,
.dark .gvf-pill,
.dark .gvf-company-list li {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(255, 255, 255, 0.12);
    color: #dbeafe;
}

html[data-theme="dark"] .gvf-intro-card,
.dark .gvf-intro-card {
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.92),
        rgba(10, 16, 31, 0.92)
    );
    border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .gvf-intro-card h2,
html[data-theme="dark"] .gvf-method-header h2,
html[data-theme="dark"] .gvf-section-head h2,
html[data-theme="dark"] .gcf-copy,
.dark .gvf-intro-card h2,
.dark .gvf-method-header h2,
.dark .gvf-section-head h2,
.dark .gcf-copy {
    color: #e2e8f0;
}

html[data-theme="dark"] .gvf-intro-card p,
html[data-theme="dark"] .gvf-method-header p,
html[data-theme="dark"] .gvf-section-head p,
html[data-theme="dark"] .gvf-invoice-hint,
.dark .gvf-intro-card p,
.dark .gvf-method-header p,
.dark .gvf-section-head p,
.dark .gvf-invoice-hint {
    color: #94a3b8;
}

html[data-theme="dark"] .gvf-invoice-hint,
.dark .gvf-invoice-hint {
    background: rgba(37, 99, 235, 0.14);
    border-color: rgba(96, 165, 250, 0.18);
}

@media (max-width: 980px) {
    .gvf-intro {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .gvf-box {
        padding: 18px;
    }

    .gvf-pay-card {
        min-height: auto;
    }

    .gcf-brand {
        right: 14px;
        top: 14px;
        font-size: 14px;
    }

    .gvf-invoice-result-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
:root {
    --hero-green: var(--site-primary-color);
    --hero-green-700: color-mix(in oklab, var(--site-primary-color) 80%, black);
    --hero-ink: var(--site-text-color);
    --hero-white: #ffffff;
    --hero-glass: rgba(255, 255, 255, 0.75);
    --hero-glass-dark: rgba(15, 23, 42, 0.58);
    --hero-shadow: 0 20px 60px rgba(2, 6, 23, 0.22);
}

@media (prefers-color-scheme: dark) {
    :root {
        --hero-ink: #e5e7eb;
        --hero-glass: rgba(15, 23, 42, 0.58);
        --hero-glass-dark: rgba(15, 23, 42, 0.68);
    }
}

.hero {
    position: relative;
    min-height: clamp(60vh, 72vh, 88vh);
    display: grid;
    place-items: center;
    overflow: clip;
    isolation: isolate;
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    z-index: -2;
    filter: saturate(1.05) contrast(1.03);
}

.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-slider-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #1a3a2a;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.hero-slider-slide.is-active {
    opacity: 1;
    z-index: 1;
}
.hero-slider-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    filter: saturate(1.05) contrast(1.03);
}
.hero-slider-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}
.hero-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}
.hero-slider-dot:hover,
.hero-slider-dot.is-active {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.95);
}
.hero-slider-dot.is-active {
    transform: scale(1.2);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(
            80% 70% at 50% 35%,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.25) 70%,
            rgba(0, 0, 0, 0.55) 100%
        ),
        linear-gradient(
            180deg,
            rgba(31, 129, 85, 0.28) 0%,
            rgba(0, 0, 0, 0.35) 100%
        );
}

.container {
    width: min(1600px, calc(100% - 40px));
    margin-inline: auto;
}

.hero-content {
    text-align: center;
    color: var(--hero-white);
    display: grid;
    position: relative;
    z-index: 2;
    gap: 14px;
    transform: translateY(-4vh);
}

.hero-content > h1,
.hero-content > p {
    color: white;
    display: inline-block;
    margin-inline: auto;
    padding: 0.55rem 0.9rem;
    border-radius: 14px;
}

.hero-content > h1 {
    font-family: var(--font-serif);
    font-size: var(--text-display);
    font-weight: var(--font-bold);
    letter-spacing: 0.02em;
    line-height: var(--leading-tight);
    color: white;
}

.hero-content > p {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}

.hero-ctas {
    display: inline-flex;
    gap: 12px;
    margin-top: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition:
        transform 0.06s ease,
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}
.btn:active {
    transform: translateY(1px);
}

.btn--primary {
    background: var(--hero-green);
    color: #fff;
    box-shadow: 0 14px 32px
        color-mix(in srgb, var(--hero-green) 35%, transparent);
}
.btn--primary:hover {
    background: var(--hero-green-700);
}

.btn--ghost {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
}
.btn--ghost:hover {
    background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 640px) {
    .hero {
        min-height: 64vh;
    }
    .hero-content {
        transform: translateY(-2vh);
    }
    .hero-content > h1,
    .hero-content > p {
        padding: 0.5rem 0.75rem;
    }
}
:root {
    --hotel-green: #1f8155;
    --hotel-green-light: #57b489;
    --hotel-dark-bg: #0f172a;
    --hotel-light-bg: #517451;
    --hotel-card-bg: rgba(255, 255, 255, 0.8);
    --hotel-card-border: rgba(31, 129, 85, 0.15);
    --hotel-text: #0f172a;
    --hotel-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.hotels-section {
    padding: clamp(48px, 6vw, 84px) 20px;
    transition: background 0.4s ease;
    background-color: var(--hotel-light-bg);
}
.hotels-background {
    background-image: url(/images/Logo/werrapark-logo.png);
    background-repeat: repeat;
    background-size: 100px auto;
    opacity: 0.4;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    animation: hotelPatternMove 120s linear infinite;
}
@keyframes hotelPatternMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 800px 600px;
    }
}
.dark .hotels-section,
[data-theme="dark"] .hotels-section {
    background: var(--hotel-dark-bg);
}

.hotels-container {
    max-width: 1280px;
    margin-inline: auto;
}
.hotels-title {
    font-family: var(--font-serif);
    font-size: var(--text-4xl);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
    text-align: center;
    margin-bottom: clamp(28px, 5vw, 52px);
}

.hotels-subtitle {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    margin: -20px auto 28px;
    max-width: 780px;
    color: white;
    text-align: center;
}

/* GRID */
.hotel-grid {
    display: grid;
    gap: clamp(14px, 2vw, 24px);
    grid-template-columns: repeat(5, minmax(0, 1fr)); /* desktop 5 */
    align-items: stretch;
    grid-auto-rows: 1fr;
}

@media (max-width: 1440px) and (min-width: 1281px) {
    .hotel-grid {
        gap: 14px;
    }

    .hotel-body {
        padding: 14px;
        gap: 8px;
        grid-template-rows: minmax(48px, auto) 20px minmax(82px, auto) auto;
    }

    .hotel-body h3 {
        font-size: 0.8rem;
    }

    .hotel-rating {
        gap: 2px;
    }

    .hotel-link {
        min-height: 36px;
        padding: 0 10px;
        font-size: 0.68rem;
        gap: 6px;
    }

    .hotel-detail-btn {
        font-size: 0.78rem;
        padding: 9px 10px;
    }
}

@media (max-width: 1280px) {
    .hotel-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 1100px) {
    .hotel-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 820px) {
    .hotel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 520px) {
    .hotel-grid {
        grid-template-columns: 1fr;
    }
}

.hotel-eb {
    width: 100%;
    height: 100%;
    display: flex;
}
.hotel-eb > * {
    flex: 1;
    display: flex;
}

.hotel-card {
    background: var(--hotel-card-bg);
    border: 1px solid var(--hotel-card-border);
    border-radius: 16px;
    box-shadow: var(--hotel-shadow);
    backdrop-filter: blur(10px) saturate(1.08);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    will-change: transform;
}
.hotel-card--clickable {
    cursor: pointer;
}
.hotel-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: var(--hotel-green-light);
}
.hotel-card:focus-visible {
    outline: 3px solid rgba(87, 180, 137, 0.6);
    outline-offset: 2px;
}

.hotel-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.hotel-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    display: block;
    filter: saturate(1.02) contrast(1.02);
    border-bottom: 1px solid var(--hotel-card-border);
}

.hotel-body {
    padding: 18px;
    display: grid;
    gap: 10px;
    grid-template-rows: minmax(54px, auto) 22px minmax(92px, auto) auto;
    flex: 1;
    align-content: start;
}
.hotel-body h3 {
    font-family: var(--font-serif);
    font-size: 0.88rem;
    font-weight: var(--font-extrabold);
    line-height: var(--leading-snug);
    color: var(--hotel-text);
    text-align: center;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hotel-tagline {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    margin: 2px 0 4px;
    text-align: center;
    color: rgba(15, 23, 42, 0.78);
}

.hotel-rating {
    display: flex;
    justify-content: center;
    gap: 4px;
}
.hotel-star-empty {
    color: #94a3b8;
    transition: color 0.2s ease;
}
.hotel-star-filled {
    color: var(--hotel-green-light);
}

.hotel-contact {
    display: grid;
    gap: 8px;
    align-content: start;
}
.hotel-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    width: 100%;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--hotel-card-border);
    background: rgba(255, 255, 255, 0.44);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--hotel-text);
    text-decoration: none;
    transition:
        color 0.2s ease,
        transform 0.15s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
    overflow-wrap: anywhere;
}
.hotel-link:hover {
    color: var(--hotel-green);
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(31, 129, 85, 0.22);
}

.hotel-detail-btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: 0.02em;
    border: none;
    border-radius: 10px;
    background: linear-gradient(
        135deg,
        var(--hotel-green) 0%,
        var(--hotel-green-light) 100%
    );
    color: #f8fffb;
    text-decoration: none;
    padding: 10px 12px;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
    box-shadow: 0 8px 20px rgba(31, 129, 85, 0.25);
}
.hotel-detail-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 10px 24px rgba(31, 129, 85, 0.32);
}

.eb-reset {
    border: none;
    box-shadow: none;
    overflow: hidden;
    background: var(--hotel-card-bg);
}

@media (max-width: 820px) {
    .hotel-image {
        aspect-ratio: 4 / 3;
    }
}
@media (max-width: 520px) {
    .hotel-body {
        padding: 16px;
        grid-template-rows: minmax(48px, auto) 22px minmax(84px, auto) auto;
    }
}

.hotels-section {
    position: relative;
    overflow: hidden;
}

.pixeltrail-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hotels-container {
    position: relative;
    z-index: 1;
}

.pixeltrail-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            120% 90% at 50% 10%,
            rgba(255, 255, 255, 0.65) 0%,
            rgba(255, 255, 255, 0.25) 35%,
            rgba(255, 255, 255, 0) 60%
        ),
        radial-gradient(
            120% 100% at 50% 120%,
            rgba(0, 0, 0, 0.18) 0%,
            rgba(0, 0, 0, 0) 55%
        );
}

.dark .pixeltrail-bg::after,
[data-theme="dark"] .pixeltrail-bg::after {
    background:
        radial-gradient(
            120% 90% at 50% 10%,
            rgba(15, 23, 42, 0.55) 0%,
            rgba(15, 23, 42, 0.28) 35%,
            rgba(15, 23, 42, 0) 60%
        ),
        radial-gradient(
            120% 100% at 50% 120%,
            rgba(0, 0, 0, 0.32) 0%,
            rgba(0, 0, 0, 0) 55%
        );
}

.pixeltrail-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.6;
    mix-blend-mode: overlay;
}
.dark .pixeltrail-bg {
    opacity: 0.4;
    mix-blend-mode: soft-light;
}
.hotels-section {
    position: relative;
    isolation: isolate;
}

.pixeltrail-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
}

.pixeltrail-bg > * {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

:root.dark .pixeltrail-bg,
:root[class~="dark"] .pixeltrail-bg {
    mix-blend-mode: normal !important;
}
.electric-border {
  --electric-light-color: oklch(from var(--electric-border-color) l c h);
  --eb-border-width: 2px;
  position: relative;
  border-radius: inherit;
  overflow: visible;
  isolation: isolate;
}

.eb-svg {
  position: fixed;
  left: -10000px;
  top: -10000px;
  width: 10px;
  height: 10px;
  opacity: 0.001;
  pointer-events: none;
}

.eb-content {
  position: relative;
  border-radius: inherit;
  z-index: 1;
}

.eb-layers {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}

.eb-stroke,
.eb-glow-1,
.eb-glow-2,
.eb-overlay-1,
.eb-overlay-2,
.eb-background-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-sizing: border-box;
}

.eb-stroke {
  border: var(--eb-border-width) solid var(--electric-border-color);
}

.eb-glow-1 {
  border: var(--eb-border-width) solid oklch(from var(--electric-border-color) l c h / 0.6);
  opacity: 0.5;
  filter: blur(calc(0.5px + (var(--eb-border-width) * 0.25)));
}

.eb-glow-2 {
  border: var(--eb-border-width) solid var(--electric-light-color);
  opacity: 0.5;
  filter: blur(calc(2px + (var(--eb-border-width) * 0.5)));
}

.eb-background-glow {
  z-index: -1;
  transform: scale(1.08);
  filter: blur(32px);
  opacity: 0.3;
  background: linear-gradient(-30deg, var(--electric-light-color), transparent, var(--electric-border-color));
}
/* Revize Edilmiş - Daha Küçük TeamGrid Kartları */
:root {
    --tg-bg: var(--background_color);
    --tg-surface: var(--background_color);
    --tg-ink: var(--text_color);
    --tg-muted: var(--text_color);
    --tg-accent: var(--site_accent_color);
    --tg-primary: var(--site_primary_color);
    --tg-secondary: var(--site_secondary_color);
    --tg-border: rgba(0, 0, 0, 0.08);
    /* Kart gölgesini küçülttük */
    --tg-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.dark:root {
    --tg-bg: #0e1619;
    --tg-surface: #101814;
    --tg-ink: #e7f6ed;
    --tg-muted: #a6b7ad;
    --tg-accent: var(--site_accent_color);
    --tg-border: rgba(255, 255, 255, 0.12);
    --tg-shadow: 0 6px 15px rgba(0, 0, 0, 0.35);
}

.tg-section {
    position: relative;
    /* Bölüm padding'lerini biraz azalttık */
    padding: clamp(20px, 3vw, 40px) 16px clamp(40px, 5vw, 60px);
    background: var(--tg-bg);
    overflow: hidden;
}

.tg-shell {
    /* Shell genişliğini biraz daralttık */
    max-width: 1320px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.tg-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("/images/Logo/werrapark-logo.png");
    background-repeat: repeat;
    background-size: 150px auto; /* Deseni de hafif küçülttük */
}

.dark .tg-pattern {
    opacity: 0.12;
    filter: invert(1);
}

/* HEADER - Küçültüldü */

.tg-head {
    text-align: center;
    max-width: 580px; /* Başlığı daha kompakt hale getirdik */
    margin: 0 auto 16px; /* Boşluğu azalttık */
}

.tg-eyebrow {
    display: inline-block;
    padding: 4px 8px; /* Padding'i azalttık */
    border-radius: 999px;
    border: 1px solid var(--tg-primary);
    background: rgba(0, 0, 0, 0.03);
    color: var(--tg-primary);
    font-size: 10px; /* Fontu küçülttük */
    letter-spacing: 0.1em;
    font-weight: 700;
    text-transform: uppercase;
}

.tg-heading {
    margin: 6px 0 4px;
    /* Başlık boyutunu küçülttük */
    font-size: clamp(20px, 2.5vw, 28px);
    line-height: 1.1;
}

.tg-sub {
    margin: 0;
    color: var(--text_color);
    /* Alt başlık boyutunu küçülttük */
    font-size: clamp(12px, 1.3vw, 14px);
}

/* GRID - Kartları Küçük Tutmak İçin Sütun Sayısı Artırıldı */

.tg-grid {
    display: flex; /* Grid yerine Flex'e geçtik */
    flex-wrap: wrap; /* Sığmazsa alt satıra geç */
    justify-content: center; /* KARTLARI MERKEZE HİZALAR */
    gap: 16px; /* Kartlar arası boşluk */
    align-items: stretch;
}

@media (max-width: 1400px) {
    .tg-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1200px) {
    .tg-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .tg-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

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

/* CARD - Kritik Küçültme */

.tg-card {
    /* Her bir kartın genişliğini burada belirliyoruz */
    /* 1320px shell içinde 5 kart + boşluklar için ideal genişlik: */
    flex: 0 1 240px;

    border-radius: 14px;
    border: 1px solid var(--tg-border);
    background: color-mix(in srgb, var(--tg-surface) 92%, white 8%);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    height: auto;
    /* Kartın boyunu çok uzatmamak için aspect ratio ekleyebiliriz */
    min-height: 400px;
}
@media (max-width: 1200px) {
    .tg-card {
        flex: 0 1 220px; /* Biraz daha küçülür */
    }
}

@media (max-width: 820px) {
    .tg-card {
        flex: 0 1 calc(50% - 20px); /* Yan yana 2 kart */
    }
}

@media (max-width: 560px) {
    .tg-card {
        flex: 0 1 100%; /* Tek sütun */
    }
}

.tg-card:hover,
.tg-card:focus-within {
    transform: translateY(-2px);
    border-color: var(--site_accent_color);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

.dark .tg-card:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}

.tg-card.is-lead {
    border-color: var(--site_primary_color);
    box-shadow: 0 12px 30px rgba(22, 163, 74, 0.1);
}

/* MEDIA (Görüntü Alanı) - Küçültüldü */

.tg-media {
    position: relative;
    /* Kartın aspect-ratio'suna göre görüntü alanını orantılı küçülttük */
    aspect-ratio: 1 / 1; /* Kare görüntü alanı */
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.2),
            rgba(15, 23, 42, 0.12)
        ),
        #e8edf1;
}

.tg-media__img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center top;
       object-position: center top;
    transition: transform 0.35s ease;
}

.tg-card:hover .tg-media__img {
    transform: scale(1.04);
}

/* NAMEBAR - Gerekiyorsa (React kodunda bu sınıf yoktu ama CSS'te vardı, duruyor) */

.tg-namebar {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 6px 8px; /* Padding'i azalttık */
    border-radius: 8px;
    background: var(--tg-surface);
    color: var(--text_color);
    border: 1px solid var(--tg-border);
}

.dark .tg-namebar {
    background: rgba(16, 24, 20, 0.8);
}

/* INFO (Metin Alanı) - Kritik Küçültme */

.tg-info {
    display: flex; /* Grid'den flex'e geçtik */
    flex-direction: column;
    flex: 1;
    /* Yükseklik sınırlarını azalttık */
    padding: 10px 10px 12px;
    border-top: 1px solid var(--tg-border);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.88),
            rgba(255, 255, 255, 0.96)
        ),
        var(--tg-surface);
}

.tg-info__body {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Boşlukları daralttık */
    flex: 1; /* Body'nin tüm alanı kaplamasını sağladık */
}

.dark .tg-info {
    background:
        linear-gradient(180deg, rgba(16, 24, 20, 0.92), rgba(16, 24, 20, 0.98)),
        var(--tg-surface);
}

.tg-info__name {
    color: #14261a;
    font-size: 15px; /* Fontu küçülttük */
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.01em;
    min-height: 0; /* Min yükseklik kaldırıldı */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dark .tg-info__name {
    color: #f2fff7;
}

.tg-info__title {
    /* Başlığın alanını küçülttük ve satır sayısını 2 yaptık */
    font-size: 11px;
    line-height: 1.4;
    color: var(--tg-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 3 satırdan 2 satıra düştü */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px; /* Boşluk ekledik */
}

/* CONTACT (Çipler) - Kritik Küçültme */

.tg-contacts {
    display: flex; /* Grid'den flex'e geçtik */
    flex-direction: column;
    gap: 5px; /* Boşlukları daralttık */
    margin-top: auto; /* Contacts alanını kartın altına sabitledik */
}

.tg-chip {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px; /* İkon boşluğunu azalttık */
    min-height: 32px; /* Yüksekliği azalttık */
    width: 100%;
    padding: 0 8px; /* Padding'i azalttık */
    border-radius: 8px; /* Köşeleri daha az yuvarlak yaptık */
    border: 1px solid var(--tg-border);
    background: rgba(0, 0, 0, 0.03);
    color: var(--tg-ink);
    font-size: 10px; /* Fontu küçülttük */
    font-weight: 700;
    line-height: 1.2;
}

.dark .tg-chip {
    background: rgba(255, 255, 255, 0.05);
}

.tg-chip--link {
    text-decoration: none;
    background: var(--button_color);
    color: var(--link_color);
}

.tg-chip--link:hover {
    background: var(--site_secondary_color);
}

.tg-chip svg {
    flex: 0 0 auto;
    width: 12px; /* İkon boyutunu küçülttük (Lucide propu da değişmeli ama CSS ile de bastırıyoruz) */
    height: 12px;
}

.tg-chip__text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tg-chip__text--phone {
    white-space: nowrap; /* Tek satır */
    overflow-wrap: normal;
    word-break: normal;
}

/* PERFORMANCE */

@media (prefers-reduced-motion: reduce) {
    .tg-card,
    .tg-media__img {
        transition: none !important;
    }
}
:root {
    --vp-max: 1280px;
    --vp-ink: #334155;
    --vp-ink-strong: #0f172a;
    --vp-bg-dark: #0b1a13;
    --vp-bg: #e7f3ec;
    --vp-accent: #10b981;
}

.vp-section {
    background:
        radial-gradient(
            1000px 480px at 8% 0%,
            rgba(16, 185, 129, 0.14),
            transparent 65%
        ),
        radial-gradient(
            920px 480px at 100% 0%,
            rgba(5, 150, 105, 0.12),
            transparent 66%
        ),
        var(--vp-bg);
    padding: 44px 0 54px;
}
.dark .vp-section {
    background:
        radial-gradient(
            1000px 520px at 8% 0%,
            rgba(16, 185, 129, 0.2),
            transparent 66%
        ),
        radial-gradient(
            920px 520px at 100% 0%,
            rgba(5, 150, 105, 0.16),
            transparent 68%
        ),
        var(--vp-bg-dark);
}
.vp-shell {
    max-width: var(--vp-max);
    margin-inline: auto;
    padding: 0 1rem;
}

.vp-head {
    text-align: center;
    margin: 0 auto 18px;
    max-width: 860px;
}

.vp-eyebrow {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #065f46;
    background: rgba(16, 185, 129, 0.18);
}

.vp-title {
    margin: 10px 0 8px;
    font-size: clamp(1.6rem, 1rem + 2.2vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.vp-subtitle {
    margin: 0;
    color: var(--vp-ink);
    font-size: clamp(0.95rem, 0.8rem + 0.4vw, 1.08rem);
}

.vp-aspect {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(16, 185, 129, 0.24);
    box-shadow: 0 28px 64px rgba(6, 31, 21, 0.28);
    background: #020617;
}

.vp-aspect.is-playing {
    box-shadow: 0 24px 56px rgba(2, 6, 23, 0.38);
}

.vp-poster {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.vp-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    filter: saturate(1.04) contrast(1.04);
    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}

.vp-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            60% 60% at 50% 35%,
            rgba(0, 0, 0, 0.02),
            rgba(0, 0, 0, 0.44)
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.52));
    pointer-events: none;
}

.vp-poster:hover .vp-img {
    transform: scale(1.035);
    filter: saturate(1.1) contrast(1.08) brightness(1.03);
}

.vp-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    transition: transform 0.2s ease;
}
.vp-poster:hover .vp-play {
    transform: scale(1.06);
}

.vp-cta {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    background: linear-gradient(90deg, #10b981, #0ea567);
    color: #ecfdf5;
    font-weight: 800;
    border-radius: 999px;
    padding: 0.6rem 1rem;
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.36);
    font-size: 0.92rem;
}

.vp-meta {
    position: absolute;
    left: 1rem;
    top: 1rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: #0f172a;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.vp-reset {
    position: absolute;
    right: 12px;
    top: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(2, 6, 23, 0.62);
    color: #f1f5f9;
    border-radius: 999px;
    padding: 7px 12px;
    font-weight: 700;
    cursor: pointer;
}

.vp-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
}

.vp-poster:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px rgba(16, 185, 129, 0.42);
    border-radius: 12px;
}

.dark .vp-title {
    color: #ecfdf5;
}
.dark .vp-subtitle {
    color: #bbf7d0;
}
.dark .vp-meta {
    background: rgba(2, 6, 23, 0.65);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
:root {
    --og-bg: #f6f5f1;
    --og-ink: #1e2e23;
    --og-muted: #6e7a71;
    --og-accent: #0f3d2f;
    --og-accent-2: #1a5d48;
    --og-surface: #fff;
    --og-pill: #efe9db;
    --og-radius-xl: 24px;
    --og-radius-lg: 18px;
    --og-shadow: 0 14px 40px rgba(0, 0, 0, 0.1);
    --og-border: 1px solid rgba(16, 42, 32, 0.08);
}

* {
    box-sizing: border-box;
}
img {
    max-width: 100%;
    display: block;
    height: auto;
}

.og-wrap {
    background: var(--og-bg);
    color: var(--og-ink);
    padding: clamp(28px, 4vw, 52px) 20px clamp(56px, 6vw, 84px);
    min-height: 100%;
    position: relative;
    isolation: isolate;
}
.dark .og-wrap {
    --og-bg: #0f1210;
    --og-ink: #eaf7ef;
    --og-muted: #a9b7af;
    --og-accent: #8ee7c8;
    --og-accent-2: #8ee7c8;
    --og-surface: #141814;
    --og-pill: #213127;
    --og-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
    --og-border: 1px solid rgba(255, 255, 255, 0.08);
}

.og-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 20px;
}
.og-eyebrow {
    display: inline-block;
    padding: 6px 12px;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: #e7efe9;
    color: var(--og-accent);
    border-radius: 999px;
}
.og-title {
    margin: 10px 0 4px;
    font-family: var(--font-serif);
    font-size: var(--text-4xl);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
}
.dark .og-title {
    color: white;
}
.og-subtitle {
    margin: 0 auto;
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}

.og-flow-shell {
    margin: 22px auto 28px;
    max-width: 1100px;
    border-radius: 16px;
    padding: 10px;
    background:
        radial-gradient(
            90% 80% at 50% 0%,
            rgba(26, 93, 72, 0.08),
            transparent 60%
        ),
        var(--og-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border: var(--og-border);
}

.og-grid {
    --col: 4;
    display: grid;
    grid-template-columns: repeat(var(--col), minmax(0, 1fr));
    gap: clamp(14px, 2vw, 22px);
    max-width: 1600px;
    margin: 0 auto;
    align-items: stretch;
}
@media (max-width: 1280px) {
    .og-grid {
        --col: 3;
    }
}
@media (max-width: 1000px) {
    .og-grid {
        --col: 2;
    }
}
@media (max-width: 640px) {
    .og-grid {
        --col: 1;
    }
}

.og-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--og-surface);
    border-radius: var(--og-radius-xl);
    overflow: hidden;
    box-shadow: var(--og-shadow);
    border: var(--og-border);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
    will-change: transform;
}
.og-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16);
}

.og-card-media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16/10;
    background: #dfe6e1;
}
.og-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transform: scale(1.02);
    transition: transform 0.5s ease;
}
.og-card:hover .og-img {
    transform: scale(1.08);
}
.og-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(12, 39, 30, 0.05),
        rgba(12, 39, 30, 0.45) 85%
    );
    pointer-events: none;
}
.og-badge {
    position: absolute;
    left: 12px;
    top: 12px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    padding: 6px 10px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}
.dark .og-badge {
    color: black;
}
.og-fav {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: var(--og-border);
    background: rgba(255, 255, 255, 0.9);
    color: var(--og-accent-2);
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    transition:
        transform 0.15s ease,
        background 0.2s ease;
}
.og-fav:active {
    transform: scale(0.96);
}

.og-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    padding: 16px 16px 18px;
}
.dark .og-card-title {
    color: white;
}
.og-card-title {
    margin: 2px 0 0;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-snug);
    color: #1e3c2d;
    min-height: calc(2 * 1.35em);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.og-card-sub {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--og-muted);
    min-height: calc(3 * 1.5em);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.og-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 6px;
}
.og-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: #234;
    background: #eef3ef;
    border: var(--og-border);
    border-radius: 999px;
    padding: 6px 10px;
}
.og-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 8px;
}
.og-price {
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    font-weight: var(--font-extrabold);
    color: var(--og-accent-2);
}
.og-old-price {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: #9aa79e;
    text-decoration: line-through;
}
.og-actions {
    margin-top: auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    padding-top: 6px;
}
.og-btn {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 36px;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: var(--font-bold);
    letter-spacing: 0.01em;
    text-decoration: none;
    padding: 7px 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, #14532d, #1f7a53);
    color: #f8fffb;
    box-shadow: 0 8px 18px rgba(20, 83, 45, 0.14);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}
.dark .og-btn {
    color: white;
}
.og-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(20, 83, 45, 0.18);
}
.og-btn:active {
    transform: translateY(0);
}
.og-btn--ghost {
    background: rgba(20, 83, 45, 0.04);
    color: #14532d;
    border-color: rgba(20, 83, 45, 0.1);
}

.dark .og-btn--ghost {
    background: rgba(255, 255, 255, 0.05);
    color: #d9fff0;
    border-color: rgba(255, 255, 255, 0.1);
}

.og-btn--ghost:hover {
    background: rgba(20, 83, 45, 0.12);
}

.dark .og-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.og-empty {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 1280px) {
    .og-empty {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 900px) {
    .og-empty {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    .og-empty {
        grid-template-columns: 1fr;
    }

    .og-actions {
        flex-direction: column;
    }

    .og-btn {
        width: auto;
    }
}
.og-skeleton-card {
    height: 280px;
    border-radius: var(--og-radius-xl);
    background: linear-gradient(90deg, #e9ece8 25%, #f2f4f1 37%, #e9ece8 63%);
    background-size: 400% 100%;
    animation: og-shimmer 1.2s infinite;
    border: var(--og-border);
}
@keyframes og-shimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: 0 0;
    }
}

.og-ribbons-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.9;
    transform: translateZ(0);
}
.og-ribbons-fit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.og-ribbons-bg canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.og-head,
.og-flow-shell,
.og-grid {
    position: relative;
    z-index: 1;
}

.og-wrap {
    position: relative;
    overflow: hidden;
}
.dark .og-wrap {
    background-color: #0f3d2f;
}

/* BACKGROUND */

.og-background {
    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    background-image:
        linear-gradient(rgba(31, 129, 85, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 129, 85, 0.08) 1px, transparent 1px);

    background-size: 60px 60px;

    animation: gridMove 18s linear infinite;
}

/* gradient glow */

.og-background::before {
    content: "";

    position: absolute;
    inset: -300px;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(31, 129, 85, 0.35),
            transparent 60%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(87, 180, 137, 0.3),
            transparent 60%
        ),
        radial-gradient(
            circle at 50% 10%,
            rgba(26, 111, 74, 0.25),
            transparent 60%
        );

    filter: blur(70px);

    animation: glowMove 20s ease-in-out infinite alternate;
}

/* grid animation */

@keyframes gridMove {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 120px 120px;
    }
}

/* glow animation */

@keyframes glowMove {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(-150px, 120px) scale(1.2);
    }
}

/* content */

.og-head,
.og-grid {
    position: relative;
    z-index: 2;
}

/* ---- Scroll-reveal ---- */

.og-hidden.og-head {
    opacity: 0;
    transform: translateY(30px);
}

.og-revealed.og-head {
    animation: og-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.og-hidden .og-card-anim {
    opacity: 0;
    transform: translateY(48px) scale(0.96);
}

.og-revealed .og-card-anim {
    animation: og-card-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--card-i, 0) * 0.1s + 0.05s);
    opacity: 0;
}

@keyframes og-fade-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes og-card-in {
    from {
        opacity: 0;
        transform: translateY(48px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .og-hidden.og-head,
    .og-hidden .og-card-anim {
        opacity: 1;
        transform: none;
    }
    .og-revealed.og-head,
    .og-revealed .og-card-anim {
        animation: none;
        opacity: 1;
        transform: none;
    }
}
.gvp-wrap {
    padding: 22px 20px 40px;
    position: relative;
    isolation: isolate;
    background: var(--tg-bg);
}

.gvp-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(
            900px 500px at 5% 0%,
            rgba(45, 207, 126, 0.16),
            transparent 58%
        ),
        radial-gradient(
            800px 520px at 100% 20%,
            rgba(14, 155, 91, 0.12),
            transparent 62%
        );
}

.gvp-shell {
    max-width: 1600px;
    margin: 0 auto;
    border-radius: 22px;
    border: 1px solid rgba(25, 191, 115, 0.24);
    background:
        radial-gradient(
            1300px 540px at -10% -20%,
            rgba(45, 207, 126, 0.24),
            transparent 65%
        ),
        radial-gradient(
            900px 400px at 110% 0%,
            rgba(14, 155, 91, 0.18),
            transparent 62%
        ),
        linear-gradient(135deg, #e5f0e9, #dbe8df);
    box-shadow: 0 24px 55px rgba(15, 35, 24, 0.14);
    padding: 26px;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.gvp-shell::after {
    content: "";
    position: absolute;
    inset: -35% auto auto -25%;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.48),
        rgba(255, 255, 255, 0)
    );
    filter: blur(8px);
    pointer-events: none;
}

.gvp-copy {
    display: grid;
    gap: 12px;
}

.gvp-badge {
    width: -moz-fit-content;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #065f46;
    background: rgba(255, 255, 255, 0.66);
    border-radius: 999px;
    padding: 6px 11px;
}

.gvp-title {
    margin: 0;
    font-size: clamp(28px, 4.4vw, 46px);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.gvp-title span {
    color: #065f46;
}

.gvp-desc {
    margin: 0;
    max-width: 62ch;
    line-height: 1.75;
    color: #475569;
    font-size: 20px;
}

.gvp-actions {
    margin-top: 4px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.gvp-btn {
    text-decoration: none;
    border-radius: 999px;
    padding: 12px 20px;
    font-weight: 800;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.gvp-btn--primary {
    background: linear-gradient(90deg, #198f53, #0e9b5b);
    color: #ecfdf5;
    box-shadow: 0 12px 30px rgba(14, 155, 91, 0.34);
}

.gvp-btn--ghost {
    background: rgba(255, 255, 255, 0.9);
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.12);
}

.gvp-btn:hover {
    transform: translateY(-1px);
}

.gvp-list {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    color: #334155;
    font-weight: 700;
}

.gvp-list li {
    position: relative;
    padding-left: 16px;
}

.gvp-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.52em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #198f53;
}

.gvp-visual {
    position: relative;
    min-height: 220px;
    display: grid;
    place-items: center;
    perspective: 1000px;
}

.gvp-card {
    width: min(360px, 100%);
    aspect-ratio: 16 / 10;
    border-radius: 18px;
    transition:
        transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.35s ease,
        filter 0.35s ease;
}

.gvp-card--back {
    position: absolute;
    transform: translate(-18px, 14px) rotate(8deg);
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.35),
        rgba(255, 255, 255, 0.08)
    );
}

.gvp-card--front {
    position: relative;
    transform: rotate(-4deg);
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: linear-gradient(160deg, #2dcf7e, #0e9b5b 55%, #0a7d49);
    box-shadow: 0 26px 60px rgba(5, 150, 105, 0.45);
    color: #ecfdf5;
    padding: 20px;
    display: grid;
    align-content: space-between;
    isolation: isolate;
    transform-style: preserve-3d;
    animation: gvp-float 4.8s ease-in-out infinite;
}

.gvp-card--front::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 20%,
        rgba(255, 255, 255, 0.42) 45%,
        transparent 70%
    );
    transform: translateX(-120%);
    transition: transform 0.65s ease;
    pointer-events: none;
    z-index: 0;
}

.gvp-card--front > * {
    position: relative;
    z-index: 1;
}

.gvp-visual:hover .gvp-card--front {
    transform: rotate(-2deg) translateY(-6px) translateZ(16px);
    box-shadow: 0 34px 76px rgba(5, 150, 105, 0.52);
}

.gvp-visual:hover .gvp-card--front::after {
    transform: translateX(120%);
}

.gvp-visual:hover .gvp-card--back {
    transform: translate(-30px, 22px) rotate(11deg) scale(1.03);
    filter: brightness(1.08);
}

.gvp-card--front .chip {
    width: 40px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f7c15f, #eab308);
}

.gvp-card--front .brand {
    position: absolute;
    top: 20px;
    right: 20px;
    font-weight: 900;
    letter-spacing: 0.08em;
    font-size: 24px;
}

.gvp-card--front strong {
    font-size: 32px;
}

.gvp-card--front em {
    width: -moz-fit-content;
    width: fit-content;
    justify-self: end;
    padding: 8px 12px;
    border-radius: 12px;
    font-style: normal;
    font-weight: 900;
    font-size: 30px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

html[data-theme="dark"] .gvp-shell,
.dark .gvp-shell {
    background:
        radial-gradient(
            1200px 520px at 5% -15%,
            rgba(45, 207, 126, 0.18),
            transparent 62%
        ),
        radial-gradient(
            1000px 520px at 100% 0%,
            rgba(16, 185, 129, 0.14),
            transparent 60%
        ),
        linear-gradient(135deg, #1f2937, #111827);
    border-color: rgba(110, 231, 183, 0.3);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .gvp-title,
html[data-theme="dark"] .gvp-desc,
html[data-theme="dark"] .gvp-list,
.dark .gvp-title,
.dark .gvp-desc,
.dark .gvp-list {
    color: #d1fae5;
}

html[data-theme="dark"] .gvp-btn--ghost,
.dark .gvp-btn--ghost {
    color: #e2e8f0;
    background: rgba(30, 41, 59, 0.72);
    border-color: rgba(255, 255, 255, 0.22);
}

html[data-theme="dark"] .gvp-wrap::before,
.dark .gvp-wrap::before {
    background:
        radial-gradient(
            900px 500px at 0% 0%,
            rgba(16, 185, 129, 0.22),
            transparent 58%
        ),
        radial-gradient(
            900px 520px at 100% 12%,
            rgba(5, 150, 105, 0.2),
            transparent 62%
        );
}

@keyframes gvp-float {
    0%,
    100% {
        transform: rotate(-4deg) translateY(0);
    }
    50% {
        transform: rotate(-3.2deg) translateY(-5px);
    }
}

@media (max-width: 980px) {
    .gvp-shell {
        grid-template-columns: minmax(0, 1fr);
    }
    .gvp-visual {
        order: -1;
    }
}

@media (max-width: 640px) {
    .gvp-shell {
        padding: 18px;
    }
    .gvp-btn {
        width: 100%;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gvp-card,
    .gvp-card--front {
        transition: none !important;
        animation: none !important;
    }
}
.ex-wrap {
    --brand: #18b86a;
    --brand-2: #0ea567;

    --ex-bg: #edf5f0;
    --ex-surface: #ffffff;
    --ex-text: #0f1a14;
    --ex-muted: #50645c;
    --ex-accent: #0f1a14;
    --ex-border: rgba(10, 42, 28, 0.1);
    --ex-soft: rgba(15, 35, 26, 0.05);
    --ex-ring: rgba(24, 184, 106, 0.45);
    --ex-shadow: 0 22px 60px rgba(16, 48, 36, 0.12);

    --badge-bg: linear-gradient(135deg, #10b565, #0c8f56);
    --badge-grid: rgba(255, 255, 255, 0.06);

    position: relative;
    padding: 56px 20px 72px;
    background:
        radial-gradient(
            900px 600px at 8% -10%,
            rgba(24, 184, 106, 0.14),
            transparent 60%
        ),
        linear-gradient(180deg, var(--ex-bg), #e8f2ec 60%, #e3efe8);
    color: var(--ex-text);
}

html[data-theme="dark"] .ex-wrap,
body[data-theme="dark"] .ex-wrap,
.dark .ex-wrap {
    --ex-bg: #0c1210;
    --ex-surface: #0f1613;

    --ex-text: #ffffff;
    --ex-muted: rgba(255, 255, 255, 0.88);
    --ex-accent: #ffffff;

    --ex-border: rgba(255, 255, 255, 0.2);
    --ex-soft: rgba(255, 255, 255, 0.1);
    --ex-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);

    --badge-bg: linear-gradient(135deg, #15c374, #0ea567);
    --badge-grid: rgba(0, 0, 0, 0.15);

    background:
        radial-gradient(
            1200px 800px at 8% -10%,
            rgba(24, 184, 106, 0.12),
            transparent 60%
        ),
        linear-gradient(180deg, #0b1411, #0a100e 60%, #0a0f0d);
}

html[data-theme="dark"] .ex-wrap .ex-title,
html[data-theme="dark"] .ex-wrap .ex-desc,
html[data-theme="dark"] .ex-wrap .ex-meta-label,
html[data-theme="dark"] .ex-wrap .ex-link,
html[data-theme="dark"] .ex-wrap .ex-content {
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .ex-wrap .ex-link:hover {
    color: #b7ffe0 !important;
    border-color: rgba(183, 255, 224, 0.65);
}

.ex-container {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 42px;
    align-items: start;
    position: relative;
    z-index: 1;
}

.ex-pattern {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(40vw, 720px);
    opacity: 0.25;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(
        120% 120% at 0% 50%,
        #000,
        transparent 70%
    );
    mask-image: radial-gradient(120% 120% at 0% 50%, #000, transparent 70%);
    background:
        radial-gradient(
                16px 16px at 12px 12px,
                transparent 12px,
                currentColor 13px
            )
            0 0 / 72px 72px,
        radial-gradient(
                16px 16px at 36px 36px,
                transparent 12px,
                currentColor 13px
            )
            0 0 / 72px 72px;
    color: var(--ex-soft);
}

.ex-media {
    position: relative;
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    box-shadow: var(--ex-shadow);
}
.ex-media img,
.ex-media .ex-slider-img {
    display: block;
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    filter: saturate(0.98) contrast(0.98);
    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}
.ex-media:hover img,
.ex-media:hover .ex-slider-img.is-active {
    transform: scale(1.02);
    filter: saturate(1) contrast(1);
}

.ex-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
}
.ex-slider-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.ex-slider-img.is-active {
    opacity: 1;
    position: relative;
}
.ex-slider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}
.ex-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}
.ex-slider-dot:hover,
.ex-slider-dot.is-active {
    background: rgba(255, 255, 255, 0.95);
}
.ex-slider-dot.is-active {
    transform: scale(1.2);
}

.ex-badge {
    position: absolute;
    left: 24px;
    bottom: 24px;
    display: grid;
    gap: 12px;
    min-width: 250px;
    max-width: 290px;
    padding: 18px 20px 20px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(9, 44, 30, 0.94), rgba(7, 30, 22, 0.92)),
        radial-gradient(
            120% 120% at 0% 0%,
            rgba(31, 197, 120, 0.22),
            transparent 58%
        );
    border-radius: 20px;
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.22),
        0 2px 0 rgba(255, 255, 255, 0.04) inset;
    border: 1px solid rgba(255, 255, 255, 0.12);
    overflow: hidden;
}
.ex-badge::before {
    content: "";
    position: absolute;
    inset: -20% auto auto 58%;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(44, 220, 138, 0.34),
        rgba(44, 220, 138, 0)
    );
    pointer-events: none;
    opacity: 0.9;
}
.ex-badge > * {
    position: relative;
    z-index: 1;
}
.ex-badge-label {
    width: -moz-fit-content;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    padding: 0;
    border-radius: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(218, 255, 235, 0.8);
    background: transparent;
    border: 0;
}
.ex-badge-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.ex-badge-num {
    font-family: var(--font-sans);
    font-size: 2.2rem;
    font-weight: var(--font-extrabold);
    letter-spacing: -0.08em;
    line-height: 0.78;
    text-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    display: inline-flex;
    align-items: baseline;
}
.ex-badge-unit {
    margin-bottom: 8px;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
    color: rgba(228, 255, 238, 0.78);
}
.ex-badge-divider {
    width: 56px;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(70, 228, 149, 0.8),
        rgba(255, 255, 255, 0.18)
    );
}
.ex-badge-caption {
    max-width: 18ch;
    font-size: 0.86rem;
    line-height: 1.45;
    color: rgba(236, 255, 244, 0.84);
}
.ex-badge-num .ex-count-up {
    font-variant-numeric: tabular-nums;
    display: inline-block;
    font-size: inherit;
    color: white;
    font-weight: inherit;
    line-height: inherit;
}

.ex-content {
    padding-top: 6px;
}

.ex-eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brand-2);
    background: linear-gradient(
        90deg,
        rgba(24, 184, 106, 0.15),
        transparent 70%
    );
    padding: 6px 10px;
    border-radius: 999px;
}

.ex-title {
    margin: 10px 0 12px;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 800;
    font-size: clamp(24px, 3.6vw, 44px);
    line-height: 1.08;
    text-wrap: balance;
}

.ex-desc {
    margin: 0 0 18px;
    color: var(--ex-muted);
    line-height: 1.7;
    max-width: 60ch;
}

.ex-rule {
    height: 1px;
    border: 0;
    background: linear-gradient(
        90deg,
        transparent,
        var(--ex-border),
        transparent
    );
    margin: 16px 0 14px;
}

.ex-meta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px 28px;
    align-items: center;
}
.ex-meta-block {
}
.ex-meta-label {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ex-muted);
    margin-bottom: 8px;
}
.ex-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--ex-text);
    text-decoration: none;
    border-bottom: 1px dashed rgba(24, 184, 106, 0.35);
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}
.ex-icon {
    width: 18px;
    height: 18px;
    color: var(--brand-2);
}
.ex-link:hover {
    color: var(--brand-2);
    border-color: rgba(24, 184, 106, 0.75);
}

.ex-social {
    display: flex;
    gap: 10px;
}
.ex-social-btn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--ex-text);
    border: 1px solid var(--ex-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}
.ex-social-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(24, 184, 106, 0.55);
    box-shadow: 0 0 0 4px var(--ex-ring);
}

@media (max-width: 1024px) {
    .ex-container {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .ex-pattern {
        width: 60vw;
        opacity: 0.2;
    }
    .ex-meta {
        grid-template-columns: 1fr;
    }
    .ex-media .ex-badge {
        left: 16px;
        bottom: 16px;
        min-width: 214px;
        max-width: 244px;
        padding: 16px 17px 18px;
    }
    .ex-badge-num {
        font-size: clamp(4.4rem, 13vw, 6rem);
    }
    .ex-badge-unit {
        margin-bottom: 6px;
        font-size: 0.82rem;
    }
    .ex-badge-caption {
        font-size: 0.76rem;
    }
    .ex-badge-divider {
        width: 44px;
    }
}
.rs-wrap {
    --brand: #19bf73;
    --brand-2: #0ea567;

    --rs-bg: transparent;
    --rs-title: #0f1a14;
    --rs-text: #0f1a14;
    --rs-muted: #5f6f67;

    --rs-surface: #ffffff;
    --rs-card: #ffffff;
    --rs-border: rgba(10, 42, 28, 0.1);
    --rs-shadow: 0 24px 60px rgba(16, 48, 36, 0.12);
    --rs-glass: rgba(255, 255, 255, 0.75);

    --rs-onphoto: #ffffff;
    --rs-onphoto-muted: rgba(255, 255, 255, 0.92);
    --rs-onphoto-border: rgba(255, 255, 255, 0.28);
    --rs-onphoto-glass: rgba(255, 255, 255, 0.16);

    --rs-shade: 0.88;
    padding: 48px 20px 72px;
    background: var(--rs-bg);
    color: var(--rs-text);
}

html[data-theme="dark"] .rs-wrap,
body[data-theme="dark"] .rs-wrap,
.dark .rs-wrap {
    --rs-title: #ecfff7;
    --rs-text: #eaf7ef;
    --rs-muted: #a8b8b0;

    --rs-surface: #0f1613;
    --rs-card: #0f1613;
    --rs-border: rgba(255, 255, 255, 0.08);
    --rs-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
    --rs-glass: rgba(18, 26, 23, 0.6);

    --rs-onphoto: #ecfff7;
    --rs-onphoto-muted: rgba(255, 255, 255, 0.88);
    --rs-onphoto-border: rgba(255, 255, 255, 0.28);
    --rs-onphoto-glass: rgba(255, 255, 255, 0.14);

    --rs-shade: 0.82;
}

.rs-top {
    max-width: 1100px;
    margin: 0 auto 26px;
    text-align: center;
}
.rs-eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--brand-2);
    background: linear-gradient(
        90deg,
        rgba(25, 191, 115, 0.12),
        transparent 70%
    );
    padding: 6px 10px;
    border-radius: 999px;
}
.rs-title {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 800;
    font-size: clamp(26px, 3.8vw, 44px);
    margin: 10px 0 8px;
}
.rs-intro {
    max-width: 70ch;
    margin: 0 auto 18px;

    line-height: 1.7;
}

.rs-grid {
    --col: 3;
    display: grid;
    grid-template-columns: repeat(var(--col), 1fr);
    gap: 22px;
    max-width: 1100px;
    margin: 0 auto 22px;
}
@media (max-width: 1100px) {
    .rs-grid {
        --col: 2;
    }
}
@media (max-width: 720px) {
    .rs-grid {
        --col: 1;
    }
}

.rs-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 12px;
    border-radius: 18px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0)
        ),
        var(--rs-card);
    border: 1px solid var(--rs-border);
    box-shadow: var(--rs-shadow);
    overflow: hidden;
    padding: 18px 18px 16px;
    isolation: isolate;
    min-height: 320px;
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;

    color: var(--rs-onphoto);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.rs-card:hover {
    transform: translateY(-2px);
    border-color: rgba(25, 191, 115, 0.45);
    box-shadow: 0 22px 60px rgba(12, 45, 31, 0.22);
}

.rs-card--empty {
    min-height: 220px;
    align-content: center;
    justify-items: start;
}

.rs-card--wide {
    max-width: 1100px;
    margin: 18px auto 0;
    min-height: 380px;
}

.rs-card__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transform: scale(1.02);
    filter: saturate(0.92) contrast(0.95) brightness(0.85);
    z-index: -2;
    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}
.rs-card__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0.45) 70%,
        rgba(0, 0, 0, 0.55)
    );
    opacity: var(--rs-shade);
    z-index: -1;
    transition: opacity 0.3s ease;
}
.rs-card:hover .rs-card__media {
    transform: scale(1.05);
    filter: saturate(1) contrast(1) brightness(0.92);
}
.rs-card:hover .rs-card__shade {
    opacity: calc(var(--rs-shade) + 0.07);
}

.rs-card__head {
    display: grid;
    gap: 6px;
}
.rs-card__title {
    margin: 0;
    font-weight: 800;
    color: var(--rs-onphoto);
    font-size: clamp(18px, 2.4vw, 22px);
}
.rs-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--rs-onphoto-muted);
    letter-spacing: 0.04em;
}
.rs-icon {
    width: 18px;
    height: 18px;
    color: var(--brand-2);
}

.rs-list {
    list-style: none;
    margin: 4px 0 6px;
    padding: 0;
    display: grid;
    gap: 8px;
}
.rs-list li {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: start;
    gap: 10px;
    font-size: 14px;
    color: var(--rs-onphoto);
}
.rs-list li .rs-icon {
    margin-top: 2px;
}
.rs-list span {
    color: white;
}
.rs-card__meta span {
    color: white;
}

.rs-cta {
    margin-top: 6px;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    color: var(--rs-onphoto);
    text-decoration: none;
    background: linear-gradient(180deg, var(--rs-onphoto-glass), transparent);
    border: 1px solid var(--rs-onphoto-border);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 6px 16px rgba(0, 0, 0, 0.18);
    transition:
        transform 0.15s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}
.rs-cta:hover {
    transform: translateY(-1px);
    border-color: rgba(25, 191, 115, 0.55);
    box-shadow:
        0 0 0 4px rgba(25, 191, 115, 0.35),
        0 8px 22px rgba(0, 0, 0, 0.22);
    color: var(--rs-onphoto);
}
.rs-cta:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 4px rgba(25, 191, 115, 0.55),
        0 0 0 6px rgba(25, 191, 115, 0.2);
}

@media (prefers-reduced-motion: reduce) {
    .rs-card,
    .rs-card__media,
    .rs-card__shade,
    .rs-cta {
        transition: none !important;
    }
}

@media (max-width: 560px) {
    .rs-card {
        padding: 16px 14px;
        border-radius: 16px;
    }
}

.rs-card a {
    position: relative;
    z-index: 1;
}

.rs-wrap.rs-with-bg {
    position: relative;
    z-index: 0;
    --rs-bg: #cfe3d7;
    opacity: 1;
    background: var(--rs-bg);
}

html[data-theme="dark"] .rs-wrap.rs-with-bg,
body[data-theme="dark"] .rs-wrap.rs-with-bg,
.dark .rs-wrap.rs-with-bg {
    --rs-bg:
        radial-gradient(
            1200px 800px at 20% -10%,
            rgba(15, 118, 110, 0.25),
            transparent 55%
        ),
        radial-gradient(
            1400px 900px at 80% 110%,
            rgba(6, 95, 70, 0.2),
            transparent 60%
        ),
        #020617;
    --rs-dot-base: rgba(255, 255, 255, 0.09);
    --rs-dot-active: rgba(255, 255, 255, 0.58);
}

.rs-top,
.rs-grid,
.rs-card,
.rs-card--wide {
    position: relative;
    z-index: 1;
}

.rs-with-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            1200px 800px at 20% -10%,
            rgba(25, 191, 115, 0.1),
            transparent 55%
        ),
        radial-gradient(
            1400px 900px at 80% 110%,
            rgba(25, 191, 115, 0.08),
            transparent 60%
        );
    z-index: 0;
}

/* Refined room showcase cards */
.rs-grid {
    align-items: stretch;
}

.rs-card {
    grid-template-rows: auto auto auto 1fr auto;
    gap: 16px;
    min-height: 420px;
    padding: 22px 20px 18px;
}

.rs-card__head {
    gap: 10px;
}

.rs-card__title {
    max-width: 18ch;
    font-size: clamp(22px, 2.6vw, 28px);
}

.rs-card__desc {
    margin: 0;
    max-width: 48ch;
    color: var(--rs-onphoto-muted);
    line-height: 1.6;
    font-size: 14px;
}

.rs-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.rs-fact {
    display: flex;
    align-items: start;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.16),
        rgba(255, 255, 255, 0.08)
    );
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
}

.rs-fact__copy {
    display: grid;
    gap: 2px;
}

.rs-fact__label {
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.76);
}

.rs-fact__copy strong {
    font-size: 14px;
    line-height: 1.35;
    color: var(--rs-onphoto);
}

.rs-fact__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    flex-shrink: 0;
}

.rs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rs-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--rs-onphoto);
    font-size: 13px;
    font-weight: 700;
}

.rs-tag .rs-icon {
    width: 14px;
    height: 14px;
}

.rs-list {
    margin-top: 0;
    gap: 10px;
}

.rs-list li {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .rs-fact,
body[data-theme="dark"] .rs-fact,
.dark .rs-fact,
html[data-theme="dark"] .rs-tag,
body[data-theme="dark"] .rs-tag,
.dark .rs-tag,
html[data-theme="dark"] .rs-list li,
body[data-theme="dark"] .rs-list li,
.dark .rs-list li {
    background: rgba(15, 23, 42, 0.28);
    border-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 900px) {
    .rs-facts {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .rs-card {
        min-height: 360px;
        padding: 18px 16px 16px;
    }

    .rs-card__title {
        max-width: none;
    }
}

/* Simple clean room cards */
.rs-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 100%;
    padding: 0;
    background: #ffffff;
    color: #0f172a;
    text-shadow: none;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.rs-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12);
    border-color: rgba(14, 165, 91, 0.18);
}

.rs-card__media-wrap {
    position: relative;
    height: 220px;
    padding: 18px;
    background: linear-gradient(180deg, #f8fafc, #eef5f0);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.rs-card__media {
    position: static;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    transform: none;
    filter: none;
    z-index: auto;
}

.rs-card__shade {
    display: none;
}

.rs-card__body {
    display: grid;
    gap: 14px;
    padding: 20px 18px 18px;
}

.rs-card__title {
    max-width: none;
    color: #0f172a;
    font-size: clamp(22px, 2.2vw, 28px);
}

.rs-card__desc {
    color: #475569;
    max-width: none;
}

.rs-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.rs-fact {
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.22);
    backdrop-filter: none;
}

.rs-fact__icon {
    background: rgba(14, 165, 91, 0.1);
    color: #15803d;
}

.rs-fact__label {
    color: #64748b;
}

.rs-fact__copy strong {
    color: #0f172a;
}

.rs-tags {
    gap: 8px;
}

.rs-tag {
    background: #f0fdf4;
    border: 1px solid rgba(34, 197, 94, 0.15);
    color: #166534;
}

.rs-list {
    gap: 8px;
}

.rs-list li {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.rs-list span {
    color: #334155;
}

.rs-cta {
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 4px;
    padding: 11px 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #16a34a, #15803d);
    border: 0;
    box-shadow: 0 12px 24px rgba(22, 163, 74, 0.18);
}

.rs-cta:hover {
    color: #ffffff;
    border: 0;
    box-shadow: 0 16px 28px rgba(22, 163, 74, 0.24);
}

.rs-card--empty {
    padding: 20px;
}

html[data-theme="dark"] .rs-card,
body[data-theme="dark"] .rs-card,
.dark .rs-card {
    background: #0f172a;
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .rs-card__media-wrap,
body[data-theme="dark"] .rs-card__media-wrap,
.dark .rs-card__media-wrap {
    background: linear-gradient(180deg, #111827, #0b1220);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .rs-card__title,
body[data-theme="dark"] .rs-card__title,
.dark .rs-card__title,
html[data-theme="dark"] .rs-fact__copy strong,
body[data-theme="dark"] .rs-fact__copy strong,
.dark .rs-fact__copy strong,
html[data-theme="dark"] .rs-list span,
body[data-theme="dark"] .rs-list span,
.dark .rs-list span {
    color: #e2e8f0;
}

html[data-theme="dark"] .rs-card__desc,
body[data-theme="dark"] .rs-card__desc,
.dark .rs-card__desc,
html[data-theme="dark"] .rs-fact__label,
body[data-theme="dark"] .rs-fact__label,
.dark .rs-fact__label {
    color: #94a3b8;
}

html[data-theme="dark"] .rs-fact,
body[data-theme="dark"] .rs-fact,
.dark .rs-fact,
html[data-theme="dark"] .rs-list li,
body[data-theme="dark"] .rs-list li,
.dark .rs-list li {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .rs-tag,
body[data-theme="dark"] .rs-tag,
.dark .rs-tag {
    background: rgba(22, 163, 74, 0.12);
    border-color: rgba(34, 197, 94, 0.18);
    color: #bbf7d0;
}

@media (max-width: 560px) {
    .rs-card__media-wrap {
        height: 180px;
        padding: 14px;
    }

    .rs-card__body {
        padding: 16px;
    }

    .rs-facts {
        grid-template-columns: 1fr;
    }
}

/* Balanced room cards */
.rs-grid {
    align-items: stretch;
}

.rs-card {
    height: 100%;
}

.rs-card__media-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rs-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 16px;
}

.rs-card__head {
    min-height: 108px;
    align-content: start;
}

.rs-card__desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.rs-card__content {
    flex: 1 1 auto;
    display: grid;
    align-content: start;
    gap: 12px;
}

.rs-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.rs-fact {
    min-height: 76px;
}

.rs-facts--empty,
.rs-tags--empty,
.rs-list--empty {
    display: block;
}

.rs-facts--empty {
    min-height: 162px;
}

.rs-tags {
    min-height: 70px;
    align-content: start;
}

.rs-tags--empty {
    min-height: 70px;
}

.rs-list {
    min-height: 192px;
    align-content: start;
}

.rs-list--empty {
    min-height: 192px;
}

.rs-list li {
    min-height: 52px;
}

.rs-cta {
    margin-top: auto;
}

@media (max-width: 900px) {
    .rs-card__head {
        min-height: 96px;
    }

    .rs-facts--empty {
        min-height: 248px;
    }
}

@media (max-width: 560px) {
    .rs-card__head {
        min-height: 0;
    }

    .rs-facts,
    .rs-facts--empty {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .rs-tags,
    .rs-tags--empty,
    .rs-list,
    .rs-list--empty {
        min-height: 0;
    }
}

/* Minimal room showcase redesign */
.rs-wrap.rs-with-bg {
    padding: 64px 20px 84px;
    background: linear-gradient(180deg, #f6f8f6 0%, #eff3ef 100%);
}

.rs-with-bg::before {
    display: none;
}

.rs-top {
    max-width: 1600px;
    margin: 0 auto 28px;
    text-align: left;
}

.rs-eyebrow {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #198754;
    letter-spacing: 0.18em;
}

.rs-title {
    max-width: 12ch;
    margin: 8px 0 10px;
    line-height: 0.98;
    letter-spacing: -0.03em;
    color: #101915;
    font-size: clamp(28px, 3.2vw, 42px);
}

.rs-intro {
    max-width: 58ch;
    margin: 0;
    color: #627067;
    font-size: 15px;
    line-height: 1.7;
}

.rs-grid {
    max-width: 1600px;
    gap: 22px;
}

.rs-card {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(16, 25, 21, 0.08);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 30px rgba(16, 25, 21, 0.06);
}

.rs-card:hover {
    transform: translateY(-2px);
    border-color: rgba(25, 135, 84, 0.16);
    box-shadow: 0 16px 34px rgba(16, 25, 21, 0.08);
}

.rs-card__media-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    padding: 20px;
    background: #eef3ef;
    border-bottom: 1px solid rgba(16, 25, 21, 0.06);
}

.rs-card__media-wrap::after {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.28);
    pointer-events: none;
}

.rs-card__media {
    position: relative;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center;
       object-position: center;
    z-index: 1;
    filter: none;
}

.rs-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px 20px;
}

.rs-card__head {
    min-height: 96px;
    gap: 8px;
}

.rs-card__title {
    color: #101915;
    font-size: clamp(21px, 2vw, 26px);
    line-height: 1.06;
}

.rs-card__desc {
    color: #6a766f;
    font-size: 14px;
    line-height: 1.6;
}

.rs-card__content {
    gap: 12px;
}

.rs-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.rs-fact {
    min-height: 72px;
    padding: 12px;
    border-radius: 14px;
    background: #f7faf8;
    border: 1px solid rgba(16, 25, 21, 0.06);
}

.rs-fact__icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
}

.rs-fact__label {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a8780;
}

.rs-fact__copy strong {
    font-size: 14px;
    color: #101915;
}

.rs-tags {
    min-height: 46px;
    gap: 8px;
}

.rs-tag {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f3f7f4;
    border: 1px solid rgba(16, 25, 21, 0.06);
    color: #365247;
    font-size: 12px;
    font-weight: 600;
}

.rs-tags--empty {
    min-height: 46px;
}

.rs-list {
    min-height: 156px;
    gap: 8px;
}

.rs-list li {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 12px;
    background: transparent;
    border: 1px solid rgba(16, 25, 21, 0.08);
}

.rs-list span {
    color: #43544c;
}

.rs-list--empty {
    min-height: 156px;
}

.rs-cta {
    width: 100%;
    margin-top: auto;
    padding: 12px 14px;
    border-radius: 14px;
    justify-content: space-between;
    color: #101915;
    background: #f3f7f4;
    border: 1px solid rgba(16, 25, 21, 0.08);
    box-shadow: none;
}

.rs-cta:hover {
    color: #101915;
    border-color: rgba(25, 135, 84, 0.16);
    box-shadow: none;
}

.rs-card--empty {
    justify-content: center;
}

html[data-theme="dark"] .rs-wrap.rs-with-bg,
body[data-theme="dark"] .rs-wrap.rs-with-bg,
.dark .rs-wrap.rs-with-bg {
    background: linear-gradient(180deg, #0b120f 0%, #0f1713 100%);
}

html[data-theme="dark"] .rs-eyebrow,
body[data-theme="dark"] .rs-eyebrow,
.dark .rs-eyebrow {
    color: #7ce2ac;
}

html[data-theme="dark"] .rs-title,
body[data-theme="dark"] .rs-title,
.dark .rs-title,
html[data-theme="dark"] .rs-card__title,
body[data-theme="dark"] .rs-card__title,
.dark .rs-card__title,
html[data-theme="dark"] .rs-fact__copy strong,
body[data-theme="dark"] .rs-fact__copy strong,
.dark .rs-fact__copy strong {
    color: #e8f4ee;
}

html[data-theme="dark"] .rs-intro,
body[data-theme="dark"] .rs-intro,
.dark .rs-intro,
html[data-theme="dark"] .rs-card__desc,
body[data-theme="dark"] .rs-card__desc,
.dark .rs-card__desc,
html[data-theme="dark"] .rs-fact__label,
body[data-theme="dark"] .rs-fact__label,
.dark .rs-fact__label {
    color: #95a69c;
}

html[data-theme="dark"] .rs-card,
body[data-theme="dark"] .rs-card,
.dark .rs-card {
    background: #111916;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .rs-card__media-wrap,
body[data-theme="dark"] .rs-card__media-wrap,
.dark .rs-card__media-wrap {
    background: #151f1a;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .rs-card__media-wrap::after,
body[data-theme="dark"] .rs-card__media-wrap::after,
.dark .rs-card__media-wrap::after {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .rs-fact,
body[data-theme="dark"] .rs-fact,
.dark .rs-fact,
html[data-theme="dark"] .rs-tag,
body[data-theme="dark"] .rs-tag,
.dark .rs-tag,
html[data-theme="dark"] .rs-list li,
body[data-theme="dark"] .rs-list li,
.dark .rs-list li,
html[data-theme="dark"] .rs-cta,
body[data-theme="dark"] .rs-cta,
.dark .rs-cta {
    background: #17211c;
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .rs-tag,
body[data-theme="dark"] .rs-tag,
.dark .rs-tag,
html[data-theme="dark"] .rs-list span,
body[data-theme="dark"] .rs-list span,
.dark .rs-list span,
html[data-theme="dark"] .rs-cta,
body[data-theme="dark"] .rs-cta,
.dark .rs-cta {
    color: #cfddd5;
}

@media (max-width: 900px) {
    .rs-card__media-wrap {
        height: 264px;
    }
}

@media (max-width: 560px) {
    .rs-wrap.rs-with-bg {
        padding: 52px 16px 68px;
    }

    .rs-top {
        margin-bottom: 22px;
    }

    .rs-card__media-wrap {
        height: 228px;
        padding: 14px;
    }

    .rs-card__body {
        padding: 18px 16px 16px;
    }

    .rs-card__head,
    .rs-facts--empty,
    .rs-tags,
    .rs-tags--empty,
    .rs-list,
    .rs-list--empty {
        min-height: 0;
    }
}

/* Rooms Showcase v2 */
.rsm-wrap {
    padding: 68px 20px 88px;
    background:
        radial-gradient(
            900px 500px at 0% 0%,
            rgba(25, 135, 84, 0.08),
            transparent 58%
        ),
        linear-gradient(180deg, #f7faf7 0%, #eef4ef 100%);
}

.rsm-shell {
    max-width: 1600px;
    margin: 0 auto;
}

.rsm-header {
    max-width: 720px;
    margin-bottom: 30px;
}

.rsm-eyebrow {
    margin: 0;
    color: #1a8a56;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.rsm-heading {
    margin: 10px 0 12px;
    max-width: 12ch;
    font-size: clamp(30px, 3.6vw, 48px);
    line-height: 0.96;
    letter-spacing: -0.035em;
}

.rsm-intro {
    margin: 0;
    max-width: 58ch;
    color: #66756d;
    font-size: 15px;
    line-height: 1.72;
}

.rsm-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.rsm-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(16, 24, 21, 0.08);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 44px rgba(16, 24, 21, 0.08);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.rsm-card:hover {
    transform: translateY(-3px);
    border-color: rgba(26, 138, 86, 0.16);
    box-shadow: 0 24px 52px rgba(16, 24, 21, 0.12);
}

.rsm-media {
    padding: 16px 16px 0;
}

.rsm-media__frame {
    height: 340px;
    border-radius: 18px;
    border: 1px solid rgba(16, 24, 21, 0.05);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.64),
            rgba(255, 255, 255, 0.18)
        ),
        linear-gradient(180deg, #eef3ef 0%, #e5ede7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.rsm-media__image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    padding: 0;
}

.rsm-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
}

.rsm-header-block {
    min-height: 108px;
}

.rsm-title {
    margin: 0;
    color: #121b17;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.04;
    letter-spacing: -0.02em;
}

.rsm-desc {
    margin: 10px 0 0;
    color: #69776f;
    font-size: 14px;
    line-height: 1.65;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.rsm-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.rsm-fact {
    min-height: 78px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(16, 24, 21, 0.06);
    background: #f8faf8;
}

.rsm-fact__icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1a8a56;
    background: rgba(26, 138, 86, 0.1);
}

.rsm-fact__copy {
    display: grid;
    gap: 3px;
}

.rsm-fact__label {
    font-size: 10px;
    color: #7b8881;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rsm-fact__copy strong {
    color: #121b17;
    font-size: 14px;
    line-height: 1.35;
}

.rsm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 40px;
}

.rsm-chip {
    min-height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: #f1f6f2;
    border: 1px solid rgba(16, 24, 21, 0.06);
    color: #40554a;
    font-size: 12px;
    font-weight: 600;
}

.rsm-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    min-height: 154px;
}

.rsm-points li {
    min-height: 44px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border-radius: 14px;
    border: 1px solid rgba(16, 24, 21, 0.07);
    background: #ffffff;
    color: #42534b;
}

.rsm-points li svg {
    color: #1a8a56;
}

.rsm-cta {
    width: 100%;
    margin-top: auto;
    padding: 13px 15px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 16px;
    border: 1px solid rgba(16, 24, 21, 0.08);
    background: #f3f7f4;
    color: #121b17;
    text-decoration: none;
    font-weight: 700;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.rsm-cta:hover {
    background: #eef5f0;
    border-color: rgba(26, 138, 86, 0.18);
    transform: translateY(-1px);
    color: #121b17;
}

.rsm-empty {
    padding: 30px;
    border-radius: 24px;
    border: 1px solid rgba(16, 24, 21, 0.08);
    background: rgba(255, 255, 255, 0.94);
}

.rsm-empty h3 {
    margin: 0 0 8px;
    color: #121b17;
    font-size: 24px;
}

.rsm-empty p {
    margin: 0;
    color: #66756d;
    line-height: 1.7;
}

html[data-theme="dark"] .rsm-wrap,
body[data-theme="dark"] .rsm-wrap,
.dark .rsm-wrap {
    background: linear-gradient(180deg, #0c120f 0%, #101713 100%);
}

html[data-theme="dark"] .rsm-eyebrow,
body[data-theme="dark"] .rsm-eyebrow,
.dark .rsm-eyebrow {
    color: #7ce2ac;
}

html[data-theme="dark"] .rsm-heading,
body[data-theme="dark"] .rsm-heading,
.dark .rsm-heading,
html[data-theme="dark"] .rsm-title,
body[data-theme="dark"] .rsm-title,
.dark .rsm-title,
html[data-theme="dark"] .rsm-fact__copy strong,
body[data-theme="dark"] .rsm-fact__copy strong,
.dark .rsm-fact__copy strong,
html[data-theme="dark"] .rsm-empty h3,
body[data-theme="dark"] .rsm-empty h3,
.dark .rsm-empty h3 {
    color: #e7f3ec;
}

html[data-theme="dark"] .rsm-intro,
body[data-theme="dark"] .rsm-intro,
.dark .rsm-intro,
html[data-theme="dark"] .rsm-desc,
body[data-theme="dark"] .rsm-desc,
.dark .rsm-desc,
html[data-theme="dark"] .rsm-fact__label,
body[data-theme="dark"] .rsm-fact__label,
.dark .rsm-fact__label,
html[data-theme="dark"] .rsm-empty p,
body[data-theme="dark"] .rsm-empty p,
.dark .rsm-empty p {
    color: #97a79f;
}

html[data-theme="dark"] .rsm-card,
body[data-theme="dark"] .rsm-card,
.dark .rsm-card,
html[data-theme="dark"] .rsm-empty,
body[data-theme="dark"] .rsm-empty,
.dark .rsm-empty {
    background: #121916;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .rsm-media__frame,
body[data-theme="dark"] .rsm-media__frame,
.dark .rsm-media__frame {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.04),
            rgba(255, 255, 255, 0.02)
        ),
        linear-gradient(180deg, #18211c 0%, #141c18 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .rsm-fact,
body[data-theme="dark"] .rsm-fact,
.dark .rsm-fact,
html[data-theme="dark"] .rsm-chip,
body[data-theme="dark"] .rsm-chip,
.dark .rsm-chip,
html[data-theme="dark"] .rsm-points li,
body[data-theme="dark"] .rsm-points li,
.dark .rsm-points li,
html[data-theme="dark"] .rsm-cta,
body[data-theme="dark"] .rsm-cta,
.dark .rsm-cta {
    background: #18211c;
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .rsm-chip,
body[data-theme="dark"] .rsm-chip,
.dark .rsm-chip,
html[data-theme="dark"] .rsm-points li,
body[data-theme="dark"] .rsm-points li,
.dark .rsm-points li,
html[data-theme="dark"] .rsm-cta,
body[data-theme="dark"] .rsm-cta,
.dark .rsm-cta {
    color: #cfddd6;
}

@media (max-width: 1180px) {
    .rsm-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rsm-media__frame {
        height: 320px;
    }
}

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

@media (max-width: 560px) {
    .rsm-wrap {
        padding: 54px 16px 70px;
    }

    .rsm-header {
        margin-bottom: 24px;
    }

    .rsm-media {
        padding: 14px 14px 0;
    }

    .rsm-media__frame {
        height: 270px;
    }

    .rsm-body {
        padding: 16px;
    }

    .rsm-header-block,
    .rsm-points {
        min-height: 0;
    }

    .rsm-facts {
        grid-template-columns: 1fr;
    }
}

/* Refined room showcase cards */
.rs-grid {
    gap: 22px;
}

.rs-card {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.96),
        rgba(248, 252, 249, 0.96)
    );
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08);
}

.rs-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 58px rgba(15, 23, 42, 0.12);
    border-color: rgba(22, 163, 74, 0.16);
}

.rs-card__media-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 280px;
    padding: 16px;
    background:
        radial-gradient(
            120% 120% at 50% 0%,
            rgba(37, 99, 235, 0.08),
            transparent 45%
        ),
        radial-gradient(
            120% 120% at 50% 100%,
            rgba(22, 163, 74, 0.12),
            transparent 55%
        ),
        linear-gradient(180deg, #f8fbf9 0%, #edf5f0 100%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.rs-card__media-wrap::after {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.36),
        rgba(255, 255, 255, 0.1)
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    pointer-events: none;
}

.rs-card__media {
    position: relative;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center;
       object-position: center;
    z-index: 1;
    filter: drop-shadow(0 14px 28px rgba(15, 23, 42, 0.16));
}

.rs-card__body {
    gap: 16px;
    padding: 22px 20px 20px;
}

.rs-card__head {
    min-height: 102px;
    gap: 8px;
}

.rs-card__title {
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.02;
    letter-spacing: -0.02em;
}

.rs-card__desc {
    color: #5b6b64;
    font-size: 14px;
    line-height: 1.6;
}

.rs-card__content {
    gap: 14px;
}

.rs-facts {
    gap: 10px;
}

.rs-fact {
    min-height: 78px;
    padding: 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f7fbf8 0%, #eef6f1 100%);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.rs-fact__icon {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        rgba(22, 163, 74, 0.14),
        rgba(34, 197, 94, 0.08)
    );
    color: #15803d;
}

.rs-fact__label {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7c74;
}

.rs-fact__copy strong {
    font-size: 14px;
    line-height: 1.35;
}

.rs-tags {
    min-height: 74px;
    gap: 8px;
}

.rs-tag {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f1fbf4;
    border: 1px solid rgba(22, 163, 74, 0.12);
    color: #166534;
    font-size: 12px;
    font-weight: 700;
}

.rs-list {
    min-height: 184px;
    gap: 8px;
}

.rs-list li {
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.rs-cta {
    width: 100%;
    margin-top: auto;
    justify-content: space-between;
    padding: 13px 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    box-shadow: 0 14px 28px rgba(22, 163, 74, 0.18);
}

.rs-cta:hover {
    box-shadow: 0 18px 32px rgba(22, 163, 74, 0.22);
}

html[data-theme="dark"] .rs-card,
body[data-theme="dark"] .rs-card,
.dark .rs-card {
    background: linear-gradient(180deg, #0f172a 0%, #101a17 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .rs-card__media-wrap,
body[data-theme="dark"] .rs-card__media-wrap,
.dark .rs-card__media-wrap {
    background:
        radial-gradient(
            120% 120% at 50% 0%,
            rgba(37, 99, 235, 0.14),
            transparent 45%
        ),
        radial-gradient(
            120% 120% at 50% 100%,
            rgba(22, 163, 74, 0.12),
            transparent 55%
        ),
        linear-gradient(180deg, #101a17 0%, #0a120f 100%);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .rs-card__media-wrap::after,
body[data-theme="dark"] .rs-card__media-wrap::after,
.dark .rs-card__media-wrap::after {
    border-color: rgba(255, 255, 255, 0.12);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.02)
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .rs-card__desc,
body[data-theme="dark"] .rs-card__desc,
.dark .rs-card__desc,
html[data-theme="dark"] .rs-fact__label,
body[data-theme="dark"] .rs-fact__label,
.dark .rs-fact__label {
    color: #9aaea4;
}

html[data-theme="dark"] .rs-fact,
body[data-theme="dark"] .rs-fact,
.dark .rs-fact,
html[data-theme="dark"] .rs-list li,
body[data-theme="dark"] .rs-list li,
.dark .rs-list li {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .rs-tag,
body[data-theme="dark"] .rs-tag,
.dark .rs-tag {
    background: rgba(22, 163, 74, 0.12);
    border-color: rgba(34, 197, 94, 0.18);
    color: #bbf7d0;
}

@media (max-width: 900px) {
    .rs-card__media-wrap {
        height: 248px;
    }

    .rs-facts--empty {
        min-height: 248px;
    }
}

@media (max-width: 560px) {
    .rs-grid {
        gap: 16px;
    }

    .rs-card__media-wrap {
        height: 220px;
        padding: 12px;
    }

    .rs-card__body {
        padding: 18px 16px 16px;
    }

    .rs-card__head,
    .rs-facts--empty,
    .rs-tags,
    .rs-tags--empty,
    .rs-list,
    .rs-list--empty {
        min-height: 0;
    }
}
.tt3-wrap {
    --brand: #19bf73;
    --brand-2: #0ea567;

    --tt3-text: #0f1a14;
    --tt3-muted: #586a63;
    --tt3-surface: #ffffff;
    --tt3-border: rgba(10, 42, 28, 0.1);
    --tt3-shadow: 0 22px 60px rgba(16, 48, 36, 0.14);

    --tt3-bg:
        radial-gradient(
            1100px 700px at 8% -10%,
            rgba(25, 191, 115, 0.15),
            transparent 60%
        ),
        radial-gradient(
            900px 700px at 100% 0%,
            rgba(14, 165, 103, 0.12),
            transparent 60%
        ),
        linear-gradient(180deg, #f8fcf9, #eef6f1 60%, #e9f3ed);

    background: var(--tt3-bg);
    color: var(--tt3-text);
}

html[data-theme="dark"] .tt3-wrap,
body[data-theme="dark"] .tt3-wrap,
.dark .tt3-wrap {
    --tt3-text: #eaf7ef;
    --tt3-muted: #a7b8b1;
    --tt3-surface: #0f1613;
    --tt3-border: rgba(255, 255, 255, 0.08);
    --tt3-shadow: 0 26px 68px rgba(0, 0, 0, 0.42);
    --tt3-bg:
        radial-gradient(
            1400px 800px at 0% -20%,
            rgba(25, 191, 115, 0.16),
            transparent 55%
        ),
        radial-gradient(
            1100px 700px at 100% 0%,
            rgba(14, 165, 103, 0.14),
            transparent 60%
        ),
        linear-gradient(180deg, #0e161a, #0f171b 60%, #0d1417);
    background: var(--tt3-bg);
}

.tt3-header {
    max-width: 1600px;
    margin: 0 auto;
    padding: 48px 20px 26px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 28px;
    align-items: stretch;
}
@media (max-width: 980px) {
    .tt3-header {
        grid-template-columns: 1fr;
    }
}

.tt3-head-text {
    align-self: stretch;
    display: grid;
    align-content: center;
    gap: 10px;
    min-height: 100%;
    padding: 26px 24px;
    border-radius: 22px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.94),
        rgba(255, 255, 255, 0.84)
    );
    border: 1px solid var(--tt3-border);
    box-shadow: var(--tt3-shadow);
}

html[data-theme="dark"] .tt3-head-text,
.dark .tt3-head-text {
    background: radial-gradient(
        circle at 0 0,
        rgba(25, 191, 115, 0.15),
        rgba(9, 17, 14, 0.95)
    );
}
.tt3-eyebrow {
    display: inline-block;
    justify-self: start;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 12px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    background: rgba(25, 191, 115, 0.2);
    padding: 6px 10px;
    border-radius: 999px;
}
html[data-theme="dark"] .tt3-eyebrow,
.dark .tt3-eyebrow {
    color: #d9fff0;
}

.tt3-title {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 800;
    line-height: 1.06;
    font-size: clamp(28px, 4.8vw, 52px);
    margin: 12px 0 8px;
}
html[data-theme="dark"] .tt3-title,
.dark .tt3-title {
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.tt3-desc {
    line-height: 1.7;
    margin: 0 0 16px;
    max-width: 62ch;
}

.tt3-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.tt3-btn {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border-radius: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 12px 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
    border: 1px solid var(--tt3-border);
}
.tt3-btn--primary {
    background: #19bf73;
    color: #0b1b14;
    border-color: transparent;
    box-shadow: 0 10px 26px rgba(25, 191, 115, 0.25);
}
.tt3-btn--primary:hover {
    transform: translateY(-1px);
    background: #12a864;
}
.tt3-btn--ghost {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0)
    );
    color: var(--tt3-text);
}
html[data-theme="dark"] .tt3-btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
}
.tt3-btn--ghost:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 4px rgba(25, 191, 115, 0.28);
}

.tt3-head-mosaic {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(180px, 1fr);
    gap: 10px;
    background: var(--tt3-surface);
    border: 1px solid var(--tt3-border);
    box-shadow: var(--tt3-shadow);
    padding: 10px;
}
.tt3-mosaic-item {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    display: block;
    isolation: isolate;
    min-height: 180px;
}
.tt3-mosaic-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transform: scale(1.02);
    filter: saturate(0.96) contrast(0.96);
    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}
.tt3-mosaic-item:hover img {
    transform: scale(1.06);
    filter: saturate(1) contrast(1);
}
.tt3-mosaic--xl,
.tt3-mosaic--tall {
    grid-area: auto;
}

.tt3-mosaic-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 14px 14px 12px;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0.5) 60%,
        rgba(0, 0, 0, 0.62)
    );
    color: #fff;
    display: grid;
    gap: 6px;
}
.tt3-mosaic-overlay strong {
    font-size: 16px;
    letter-spacing: 0.04em;
}
.tt3-mosaic-overlay span {
    font-size: 13px;
    opacity: 0.95;
    color: white;
}

.tt3-grid {
    --col: 4;
    max-width: 1600px;
    margin: 18px auto 0;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(var(--col), minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
    padding-bottom: 1.5rem;
}
@media (max-width: 1100px) {
    .tt3-grid {
        --col: 3;
    }
}
@media (max-width: 900px) {
    .tt3-grid {
        --col: 2;
    }
}
@media (max-width: 620px) {
    .tt3-grid {
        --col: 1;
    }
}

.tt3-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    height: 100%;
    background: var(--tt3-surface);
    border: 1px solid var(--tt3-border);
    box-shadow: var(--tt3-shadow);
    display: grid;
    grid-template-rows: auto 1fr;
    transition:
        transform 0.18s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
    isolation: isolate;
}
.tt3-card:hover {
    transform: translateY(-3px);
    border-color: rgba(25, 191, 115, 0.45);
    box-shadow: 0 24px 64px rgba(12, 45, 31, 0.28);
}

.tt3-card-border {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    z-index: -1;
    background: linear-gradient(
        135deg,
        rgba(25, 191, 115, 0.55),
        rgba(14, 165, 103, 0.18) 40%,
        rgba(25, 191, 115, 0.1)
    );
    filter: blur(8px);
    opacity: 0.55;
    pointer-events: none;
}

.tt3-card-media {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}
.tt3-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transform: scale(1.02);
    filter: saturate(0.98) contrast(0.98);
    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}
.tt3-card:hover .tt3-card-media img {
    transform: scale(1.06);
    filter: saturate(1) contrast(1);
}
.tt3-media-grad {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35));
    pointer-events: none;
}

.tt3-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    padding: 16px 16px 14px;
    gap: 10px;
}
.tt3-card-title {
    margin: 0;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: clamp(16px, 2vw, 18px);
    color: var(--tt3-text);
    min-height: calc(2 * 1.35em);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tt3-card-excerpt {
    color: var(--tt3-muted);
    line-height: 1.6;
    margin: 0;
    min-height: calc(3 * 1.6em);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tt3-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
    margin-top: auto;
    padding-top: 6px;
}
.tt3-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    color: var(--tt3-text);
    text-decoration: none;
    font-weight: 800;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--tt3-border);
    background: rgba(255, 255, 255, 0.58);
    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}
.tt3-link:hover {
    color: var(--brand-2);
    border-color: rgba(25, 191, 115, 0.52);
    background: rgba(25, 191, 115, 0.08);
    transform: translateY(-1px);
}

.tt3-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--tt3-text);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0)
    );
    border: 1px solid var(--tt3-border);
    transition:
        transform 0.15s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}
.tt3-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(25, 191, 115, 0.55);
    box-shadow: 0 0 0 4px rgba(25, 191, 115, 0.28);
}

@media (max-width: 620px) {
    .tt3-card-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .tt3-link,
    .tt3-chip {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .tt3-head-text {
        padding: 22px 18px;
    }

    .tt3-head-mosaic {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: minmax(170px, 1fr);
    }
}

.tt3-hidden .tt3-head-text {
    opacity: 0;
    transform: translateY(32px);
}
.tt3-hidden .tt3-head-mosaic {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
}

.tt3-revealed .tt3-head-text {
    animation: tt3-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.tt3-revealed .tt3-head-mosaic {
    animation: tt3-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
    opacity: 0;
}

.tt3-hidden .tt3-card-anim {
    opacity: 0;
    transform: translateY(48px) scale(0.96);
}

.tt3-revealed .tt3-card-anim {
    animation: tt3-card-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--card-i, 0) * 0.1s + 0.05s);
    opacity: 0;
}

@keyframes tt3-fade-up {
    from {
        opacity: 0;
        transform: translateY(32px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tt3-card-in {
    from {
        opacity: 0;
        transform: translateY(48px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tt3-mosaic-item img,
    .tt3-card,
    .tt3-card-media img,
    .tt3-btn {
        transition: none !important;
    }
    .tt3-hidden .tt3-head-text,
    .tt3-hidden .tt3-head-mosaic,
    .tt3-hidden .tt3-card-anim {
        opacity: 1;
        transform: none;
    }
    .tt3-revealed .tt3-head-text,
    .tt3-revealed .tt3-head-mosaic,
    .tt3-revealed .tt3-card-anim {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.tt3-with-bends {
    position: relative;
    isolation: isolate;
    overflow: clip;
    --tt3-bend-1: #19bf73;
    --tt3-bend-2: #0ea567;
    --tt3-bend-3: #0a7a4e;
    --tt3-bend-4: #063b2a;
}

html[data-theme="dark"] .tt3-with-bends,
body[data-theme="dark"] .tt3-with-bends,
.dark .tt3-with-bends {
    --tt3-bend-1: #32f39c;
    --tt3-bend-2: #19d385;
    --tt3-bend-3: #10a56a;
    --tt3-bend-4: #0a5a3c;
}

.tt3-particles-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.tt3-particles {
    width: 100%;
    height: 100%;
    opacity: 0.55;
    filter: saturate(1.05);
}

.tt3-header,
.tt3-grid {
    position: relative;
    z-index: 1;
}
.hr-wrap {
    padding: 30px 20px 70px;
    background:
        radial-gradient(
            1200px 650px at 0% 0%,
            rgba(25, 191, 115, 0.14),
            transparent 65%
        ),
        radial-gradient(
            1000px 700px at 100% 0%,
            rgba(14, 165, 103, 0.12),
            transparent 62%
        ),
        linear-gradient(180deg, #f3fbf6, #e8f4ed);
    overflow: hidden;
}

.hr-head {
    max-width: 940px;
    margin: 0 auto 18px;
    text-align: center;
}

.hr-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-extrabold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #065f46;
    background: rgba(16, 185, 129, 0.18);
    border-radius: 999px;
}

.hr-title {
    margin: 10px 0 6px;
    font-family: var(--font-serif);
    font-size: var(--text-4xl);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
}

.hr-sub {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

.hr-marquee {
    max-width: 1300px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(
        to right,
        transparent,
        black 8%,
        black 92%,
        transparent
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black 8%,
        black 92%,
        transparent
    );
}

.hr-track {
    display: flex;
    gap: 16px;
    width: -moz-max-content;
    width: max-content;
    animation: hr-scroll 42s linear infinite;
    padding: 10px 0;
}

.hr-marquee:hover .hr-track {
    animation-play-state: paused;
}

.hr-card {
    width: min(360px, 78vw);
    border-radius: 16px;
    padding: 16px 16px 14px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(10, 42, 28, 0.08);
    box-shadow: 0 18px 42px rgba(10, 42, 28, 0.14);
    transition:
        transform 0.18s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.hr-card:hover {
    transform: translateY(-3px);
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 22px 52px rgba(10, 42, 28, 0.2);
}

.hr-stars {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: #16a34a;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
}

.hr-text {
    margin: 0 0 12px;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: #1f2937;
}

.hr-meta {
    display: grid;
    gap: 3px;
}

.hr-meta strong {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: #052e16;
}

.hr-meta span {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: #64748b;
}

html[data-theme="dark"] .hr-wrap,
.dark .hr-wrap {
    background:
        radial-gradient(
            1200px 650px at 0% 0%,
            rgba(16, 185, 129, 0.2),
            transparent 65%
        ),
        radial-gradient(
            1000px 700px at 100% 0%,
            rgba(5, 150, 105, 0.18),
            transparent 62%
        ),
        linear-gradient(180deg, #030712, #0b1318);
}

html[data-theme="dark"] .hr-title,
html[data-theme="dark"] .hr-sub,
html[data-theme="dark"] .hr-text,
html[data-theme="dark"] .hr-meta strong,
html[data-theme="dark"] .hr-meta span,
.dark .hr-title,
.dark .hr-sub,
.dark .hr-text,
.dark .hr-meta strong,
.dark .hr-meta span {
    color: #d1fae5;
}

html[data-theme="dark"] .hr-card,
.dark .hr-card {
    background: rgba(3, 7, 18, 0.82);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
}

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

@media (prefers-reduced-motion: reduce) {
    .hr-track {
        animation: none !important;
    }
}
.mp-section {
    --mp-bg: #f0f7f3;
    --mp-surface: #ffffff;
    --mp-text: #0f1a14;
    --mp-muted: #5b6b63;
    --mp-accent: #16a34a;
    --mp-border: rgba(16, 42, 28, 0.08);
    --mp-shadow: 0 20px 50px -20px rgba(16, 48, 36, 0.15);

    position: relative;
    padding: 56px 20px 72px;
    background:
        radial-gradient(
            1000px 500px at 50% 0%,
            rgba(24, 184, 106, 0.08),
            transparent 70%
        ),
        linear-gradient(180deg, var(--mp-bg) 0%, #e8f2ec 100%);
}

.dark .mp-section,
.dark .mp-section {
    --mp-bg: #0a0f0c;
    --mp-surface: #101814;
    --mp-text: #e7f6ed;
    --mp-muted: #a6b7ad;
    --mp-border: rgba(255, 255, 255, 0.12);
    --mp-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5);

    background:
        radial-gradient(
            1000px 500px at 50% 0%,
            rgba(24, 184, 106, 0.06),
            transparent 70%
        ),
        linear-gradient(180deg, #0a0f0c 0%, #0c1210 100%);
}

.mp-header {
    max-width: 640px;
    margin: 0 auto 32px;
    text-align: center;
}

.mp-eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--mp-accent);
    margin-bottom: 10px;
}

.mp-title {
    margin: 0 0 12px;
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
}

.mp-subtitle {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

.mp-map-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    padding: 11px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 14px 28px rgba(22, 163, 74, 0.22);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

.mp-map-link:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 18px 34px rgba(22, 163, 74, 0.26);
}

.mp-map-link:focus-visible {
    outline: 3px solid rgba(22, 163, 74, 0.18);
    outline-offset: 2px;
}

.mp-map-wrap {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--mp-shadow);
    border: 1px solid var(--mp-border);
}

.mp-map,
.mp-google-iframe {
    width: 100%;
    height: 420px;
    min-height: 320px;
    z-index: 0;
    display: block;
}

.mp-overlay-card {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 1000;
    pointer-events: none;
}

.mp-card-inner {
    pointer-events: auto;
    background: var(--mp-surface);
    padding: 18px 22px;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--mp-border);
}

.mp-card-inner h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--mp-text);
}

.mp-card-inner p {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--mp-muted);
}

.mp-route-btn {
    display: inline-block;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--mp-accent);
    border-radius: 10px;
    text-decoration: none;
    transition:
        background 0.2s ease,
        transform 0.15s ease;
}

.mp-route-btn:hover {
    background: #15803d;
    transform: translateY(-1px);
}

.mp-placeholder {
    max-width: 1100px;
    margin: 0 auto;
    height: 420px;
    border-radius: 20px;
    background: var(--mp-surface);
    border: 1px solid var(--mp-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mp-placeholder-inner {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    text-align: center;
    color: var(--mp-muted);
}

.mp-placeholder-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
    opacity: 0.6;
}

@media (max-width: 640px) {
    .mp-section {
        padding: 40px 16px 56px;
    }

    .mp-map,
    .mp-google-iframe,
    .mp-placeholder {
        height: 320px;
    }

    .mp-overlay-card {
        left: 16px;
        bottom: 16px;
        right: 16px;
    }

    .mp-card-inner {
        padding: 14px 18px;
    }
}
.rw-grid {
    position: relative; /* 🔥 en önemli fix */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    padding: 28px;
    min-height: 170px;
    overflow: hidden;
}

/* BACKGROUND */
.rw-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background-image: url("/images/Logo/werrapark-logo.png");
    background-repeat: repeat;
    background-size: 170px auto;

    opacity: 0.08; /* 🔥 çok önemli (yoksa çirkin olur) */
}

/* CARDS */
.rw-card-equal {
    position: relative;
    z-index: 1; /* 🔥 background üstüne gelsin */

    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.92); /* 🔥 glass hissi */
    backdrop-filter: blur(6px);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    color: #111;
    min-width: 260px;
    transition: all 0.25s ease;
}

.rw-card-equal:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

/* LOGO */
.rw-card-equal img {
    width: 40px;
    height: 40px;
    -o-object-fit: contain;
       object-fit: contain;
}

/* TEXT */
.rw-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rw-title {
    font-weight: 600;
    font-size: 14px;
}

/* STARS */
.rw-stars {
    display: flex;
    gap: 2px;
    font-size: 13px;
}

.star {
    color: #d1d5db;
}

.star.filled {
    color: #f59e0b;
}
.dark .star.filled {
    color: #287415;
}

.dark .star.half {
    color: #287415;
}

/* SCORE */
.rw-score {
    margin-left: auto;
    font-weight: 700;
    font-size: 14px;
    color: #16a34a;
}
/* MARQUEE WRAPPER */
.rw-marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 20px 0;
}

/* TRACK (KAYAN ALAN) */
.rw-track {
    display: flex;
    gap: 14px;
    width: -moz-max-content;
    width: max-content;

    animation: rw-scroll 25s linear infinite;
}

/* HOVER'DA DUR */
.rw-marquee:hover .rw-track {
    animation-play-state: paused;
}

/* ANIMATION */
@keyframes rw-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
.rw-marquee::before,
.rw-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.rw-marquee::before {
    left: 0;
    background: linear-gradient(to right, white, transparent);
}
.dark .rw-marquee::before {
    display: none;
}

.dark .rw-marquee::after {
    display: none;
}

.rw-marquee::after {
    right: 0;
    background: linear-gradient(to left, white, transparent);
}
:root {
    --ct-bg: #f5f7f6;
    --ct-surface: #ffffff;
    --ct-muted-surface: #f0f5f2;

    --ct-text: #0b1b14;
    --ct-muted: #5b6b63;

    --ct-line: #dfe8e3;

    --ct-accent: #16a34a;
    --ct-accent-2: #22c55e;
    --ct-accent-3: #0ea5e9;

    --ct-radius-lg: 18px;
    --ct-radius-md: 14px;

    --ct-shadow:
        0 12px 30px -18px rgba(2, 6, 4, 0.22),
        0 6px 18px -12px rgba(2, 6, 4, 0.12);

    --ct-ring: 0 0 0 4px color-mix(in oklab, var(--ct-accent) 30%, transparent);

    --ct-card-h: 200px;

    --ct-gap: clamp(14px, 2.5vw, 24px);
}

html {
    color-scheme: light;
}

/* ========================================
   DARK MODE
======================================== */

html.dark {
    --ct-bg: #0a0f0c;
    --ct-surface: #101814;
    --ct-muted-surface: #0c1410;

    --ct-text: #e7f6ed;
    --ct-muted: #a6b7ad;

    --ct-line: #1b2821;

    --ct-shadow:
        0 20px 45px -20px rgba(0, 0, 0, 0.7),
        0 10px 30px -15px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    html:not(.light) {
        --ct-bg: #0a0f0c;
        --ct-surface: #101814;
        --ct-muted-surface: #0c1410;

        --ct-text: #e7f6ed;
        --ct-muted: #a6b7ad;

        --ct-line: #1b2821;
    }
}

html,
body,
#app {
    background: var(--ct-bg);
    color: var(--ct-text);
}

.ct-section {
    background:
        radial-gradient(
            900px 380px at 50% -10%,
            color-mix(in oklab, var(--ct-accent) 16%, transparent),
            transparent 70%
        ),
        linear-gradient(
            180deg,
            color-mix(in oklab, var(--ct-bg) 96%, var(--ct-accent) 4%),
            var(--ct-bg)
        );
}

html.dark .ct-section {
    background:
        radial-gradient(
            900px 380px at 50% -10%,
            color-mix(in oklab, var(--ct-accent) 28%, transparent),
            transparent 70%
        ),
        linear-gradient(
            180deg,
            color-mix(in oklab, #06110c 80%, var(--ct-accent) 20%),
            #06110c
        );
}

.ct-container {
    max-width: 1600px;

    margin-inline: auto;

    padding: clamp(28px, 5vw, 56px) clamp(16px, 3vw, 28px)
        clamp(48px, 6vw, 80px);
}

/* ========================================
   HEADER
======================================== */

.ct-header {
    text-align: center;
    margin-bottom: clamp(24px, 4vw, 40px);
}

.ct-title {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
    font-size: var(--text-display);
    letter-spacing: -0.02em;
    line-height: var(--leading-tight);
}

.ct-title::after {
    content: "";
    display: block;
    width: 100px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--ct-accent),
        var(--ct-accent-2),
        var(--ct-accent-3)
    );
}

.ct-subtitle {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--ct-muted);
    max-width: 70ch;
    margin: 0.75rem auto 0;
}
.ct-block {
    padding-top: 2rem;
}
.ct-block__title {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    margin: 0 0 clamp(16px, 3vw, 24px);
}

.ct-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ct-gap);
    align-items: stretch;
    grid-auto-rows: 1fr;
}

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

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

.ct-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: var(--ct-card-h);
    padding: 18px;
    background: var(--ct-surface);
    border-radius: var(--ct-radius-lg);
    border: 1px solid var(--ct-line);
    box-shadow: var(--ct-shadow);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.ct-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 45px -16px rgba(0, 0, 0, 0.25);
}

html.dark .ct-card:hover {
    box-shadow: 0 25px 55px -18px rgba(0, 0, 0, 0.7);
}

@media (max-width: 480px) {
    .ct-card {
        height: auto;
    }
}
.ct-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ct-card__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    outline: 3px solid color-mix(in oklab, var(--ct-accent) 35%, transparent);
}

@media (max-width: 480px) {
    .ct-card__avatar {
        width: 48px;
        height: 48px;
    }
}

.ct-card__name {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
}

.ct-card__role {
    margin: 2px 0 0;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--ct-muted);
}

.ct-panel {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--ct-gap);
    margin-top: clamp(24px, 6vw, 48px);
}

@media (max-width: 900px) {
    .ct-panel {
        grid-template-columns: 1fr;
    }
}

.ct-panel__info {
    background: linear-gradient(
        180deg,
        color-mix(in oklab, var(--ct-accent) 18%, var(--ct-muted-surface)),
        var(--ct-muted-surface)
    );
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-radius-lg);
    padding: clamp(18px, 3vw, 26px);
    box-shadow: var(--ct-shadow);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

html.dark .ct-panel__info {
    background: linear-gradient(
        180deg,
        color-mix(in oklab, var(--ct-accent) 16%, #0c1511),
        #0c1511
    );
}

.ct-panel__title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
}

.ct-info {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ct-info li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ct-info a {
    color: var(--ct-text);
    text-decoration: none;
}

.ct-info a:hover {
    text-decoration: underline;
}

.ct-map-placeholder {
    margin-top: 16px;
    border-radius: var(--ct-radius-lg);
    border: 1px dashed color-mix(in oklab, var(--ct-accent) 50%, var(--ct-line));
    background:
        radial-gradient(
            100% 150% at 0% 0%,
            color-mix(in oklab, var(--ct-accent) 16%, transparent),
            transparent 60%
        ),
        radial-gradient(
            100% 150% at 100% 100%,
            color-mix(in oklab, var(--ct-accent-3) 16%, transparent),
            transparent 60%
        ),
        color-mix(in oklab, var(--ct-muted-surface) 70%, #ffffff 30%);
    overflow: hidden;
}

.ct-map-placeholder--link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.ct-map-placeholder--link:hover {
    border-color: color-mix(in oklab, var(--ct-accent) 80%, var(--ct-line));
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--ct-accent) 25%, transparent);
}

.ct-map-inner {
    position: relative;
    aspect-ratio: 16 / 10;
    min-height: 280px;
    overflow: hidden;
}

.ct-map-badge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.12);
    color: #fff;
    width: -moz-fit-content;
    width: fit-content;
}

.ct-map-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #d9e4de;
}

.ct-map-open {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(11, 27, 20, 0.72);
    color: #fff;
    text-decoration: none;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.ct-map-open:hover {
    background: rgba(11, 27, 20, 0.86);
}

.ct-map-text {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--ct-muted);
    margin: 0;
}

.ct-form-status {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    margin-bottom: 16px;
    font-size: 0.95rem;
    box-shadow: 0 14px 34px -22px rgba(0, 0, 0, 0.25);
}

.ct-form-status--success {
    background: color-mix(in oklab, var(--ct-accent) 20%, transparent);
    border: 1px solid var(--ct-accent);
    color: var(--ct-text);
}

.ct-form-status--error {
    background: linear-gradient(
        180deg,
        color-mix(in oklab, #dc2626 14%, #ffffff),
        color-mix(in oklab, #dc2626 8%, #ffffff)
    );
    border: 1px solid rgba(220, 38, 38, 0.28);
    color: #7f1d1d;
}

.ct-form-status__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.ct-form-status__body {
    display: grid;
    gap: 4px;
}

.ct-form-status__title {
    display: block;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.2;
}

.ct-form-status__text {
    margin: 0;
    line-height: 1.5;
    color: inherit;
}

html.dark .ct-form-status--error {
    background: linear-gradient(
        180deg,
        rgba(127, 29, 29, 0.36),
        rgba(69, 10, 10, 0.42)
    );
    border-color: rgba(248, 113, 113, 0.3);
    color: #fee2e2;
}

html.dark .ct-form-status__icon {
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
}

.ct-form {
    background: var(--ct-surface);
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-radius-lg);
    padding: clamp(18px, 3vw, 26px);
    box-shadow: var(--ct-shadow);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ct-gap);
}

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

.ct-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ct-field--full {
    grid-column: 1/-1;
}

.ct-field label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

.ct-field input,
.ct-field textarea {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-radius-md);
    padding: 12px 14px;
    background: var(--ct-muted-surface);
    color: var(--ct-text);
}

.ct-actions {
    grid-column: 1/-1;
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

@media (max-width: 720px) {
    .ct-actions {
        justify-content: center;
    }
}

.ct-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    background: linear-gradient(90deg, var(--ct-accent), var(--ct-accent-2));
    color: #fff;
    box-shadow: 0 10px 24px -12px rgba(22, 163, 74, 0.5);
    transition:
        transform 0.15s ease,
        filter 0.2s ease;
}

.ct-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.ct-button:disabled,
.ct-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(0.1);
    transform: none;
    box-shadow: none;
}

.ct-button:focus-visible {
    outline: none;
    box-shadow: var(--ct-ring);
}

/* ================================
   CARD
================================ */

.ct-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    height: 100%;

    padding: 20px;

    background: linear-gradient(
        180deg,
        color-mix(in oklab, var(--ct-surface) 92%, white 8%),
        var(--ct-surface)
    );
    border-radius: var(--ct-radius-lg);
    border: 1px solid var(--ct-line);

    box-shadow: var(--ct-shadow);

    min-height: 240px;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

html.dark .ct-card {
    background: linear-gradient(
        180deg,
        rgba(16, 24, 20, 0.98),
        rgba(12, 20, 16, 0.98)
    );
}

.ct-card:hover {
    transform: translateY(-4px);
    border-color: rgba(22, 163, 74, 0.3);
}

/* ================================
   HEADER
================================ */

.ct-card__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* avatar */

.ct-card__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    flex-shrink: 0;
    border: 3px solid color-mix(in oklab, var(--ct-accent) 35%, transparent);
}

/* title container */

.ct-card__titles {
    display: flex;
    flex-direction: column;
    gap: 6px;

    min-height: 84px;
    justify-content: center;
}

/* name */

.ct-card__name {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(1.05rem, 1.2vw, 1.18rem);
    font-weight: var(--font-extrabold);
    line-height: 1.2;
}

/* role */

.ct-card__role {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--ct-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ================================
   META
================================ */

.ct-card__meta {
    margin-top: auto;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* meta row */

.ct-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    width: 100%;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--ct-line);
    background: color-mix(in oklab, var(--ct-muted-surface) 86%, white 14%);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    text-decoration: none;
    color: var(--ct-text);
    transition:
        transform 0.15s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

/* icon */

.ct-meta-row svg {
    width: 16px;
    height: 16px;

    color: var(--ct-muted);

    flex-shrink: 0;
}

/* link */

.ct-meta-row:hover {
    transform: translateY(-1px);
    border-color: var(--ct-accent);
    background: color-mix(in oklab, var(--ct-muted-surface) 74%, white 26%);
}

/* ========================================
   SUCCESS MODAL
======================================== */

.ct-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ct-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 27, 20, 0.6);
    backdrop-filter: blur(4px);
}

.ct-modal__backdrop-enter {
    transition: opacity 0.2s ease-out;
}

.ct-modal__backdrop-enter-from {
    opacity: 0;
}

.ct-modal__backdrop-enter-to {
    opacity: 1;
}

.ct-modal__backdrop-leave {
    transition: opacity 0.15s ease-in;
}

.ct-modal__backdrop-leave-from {
    opacity: 1;
}

.ct-modal__backdrop-leave-to {
    opacity: 0;
}

.ct-modal__wrap {
    position: relative;
    width: 100%;
    max-width: 420px;
}

.ct-modal__container {
    display: flex;
    min-height: 100px;
    align-items: center;
    justify-content: center;
}

.ct-modal__panel {
    width: 100%;
    padding: 32px 28px;
    background: var(--ct-surface);
    border-radius: var(--ct-radius-lg);
    box-shadow: var(--ct-shadow);
    border: 1px solid var(--ct-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.ct-modal__panel-enter {
    transition:
        opacity 0.2s ease-out,
        transform 0.2s ease-out;
}

.ct-modal__panel-enter-from {
    opacity: 0;
    transform: scale(0.95);
}

.ct-modal__panel-enter-to {
    opacity: 1;
    transform: scale(1);
}

.ct-modal__panel-leave {
    transition:
        opacity 0.15s ease-in,
        transform 0.15s ease-in;
}

.ct-modal__panel-leave-from {
    opacity: 1;
    transform: scale(1);
}

.ct-modal__panel-leave-to {
    opacity: 0;
    transform: scale(0.95);
}

.ct-modal__icon {
    color: var(--ct-accent);
}

.ct-modal__title {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--ct-text);
    margin: 0;
}

.ct-modal__desc {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--ct-muted);
    margin: 0;
}

.ct-modal__btn {
    margin-top: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border: none;
    cursor: pointer;
    background: linear-gradient(90deg, var(--ct-accent), var(--ct-accent-2));
    color: #fff;
    transition:
        transform 0.15s ease,
        filter 0.2s ease;
}

.ct-modal__btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}
:root {
    --uu-bg: #f6faf7;
    --uu-ink: #0f1a14;
    --uu-muted: #5e6f68;
    --uu-accent: #1f8155;
    --uu-accent-2: #19bf73;
    --uu-surface: #ffffff;
    --uu-surface-2: #eef6f1;
    --uu-stroke: rgba(16, 42, 32, 0.1);
    --uu-shadow: 0 16px 44px rgba(16, 48, 36, 0.12);
    --uu-radius: 16px;
}
.dark:root {
    --uu-bg: #0f1512;
    --uu-ink: #eaf7ef;
    --uu-muted: #a7b8b1;
    --uu-accent: #8bdab9;
    --uu-accent-2: #5de0a6;
    --uu-surface: #0f1613;
    --uu-surface-2: #0c120f;
    --uu-stroke: rgba(255, 255, 255, 0.1);
    --uu-shadow: 0 22px 60px rgba(0, 0, 0, 0.48);
}

* {
    box-sizing: border-box;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
}

.uu {
    background: var(--uu-bg);
    color: var(--uu-ink);
}
.uu-shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

.uu-hero {
    position: relative;
    overflow: hidden;
    padding: 76px 0 48px;
}
.uu-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.18;
    background-size: cover;
    background-position: center;
    filter: grayscale(0.2) contrast(1.05);
}
.dark .uu-hero__bg {
    opacity: 0.12;
    filter: grayscale(0.6) brightness(0.9);
}
.uu-hero__pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-size: 220px auto;
    background-repeat: repeat;
    opacity: 0.06;
}
.dark .uu-hero__pattern {
    opacity: 0.12;
    filter: invert(1) brightness(1.08);
    mix-blend-mode: screen;
}

.uu-meshbg::before,
.uu-meshbg::after {
    content: "";
    position: absolute;
    inset: auto;
    pointer-events: none;
    z-index: 0;
}
.uu-meshbg::before {
    left: -10%;
    top: -20%;
    width: 70vw;
    height: 70vw;
    border-radius: 50%;
    background: radial-gradient(
        closest-side,
        rgba(31, 129, 85, 0.2),
        rgba(31, 129, 85, 0)
    );
    filter: blur(22px);
}
.uu-meshbg::after {
    right: -15%;
    bottom: -25%;
    width: 80vw;
    height: 80vw;
    border-radius: 50%;
    background: radial-gradient(
        closest-side,
        rgba(25, 191, 115, 0.18),
        rgba(25, 191, 115, 0)
    );
    filter: blur(20px);
}

.uu-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}
.uu-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 10px;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-extrabold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: rgba(31, 129, 85, 0.14);
    color: var(--uu-accent);
    border-radius: 999px;
}
.dark .uu-eyebrow {
    background: rgba(139, 218, 185, 0.14);
}
.uu-title {
    margin: 6px 0 10px;
    font-family: var(--font-serif);
    font-size: var(--text-display);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
}
.uu-sub {
    margin: 0 auto;
    max-width: 820px;
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--uu-muted);
}

.uu-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 28px auto 42px;
}
@media (max-width: 980px) {
    .uu-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .uu-stats {
        grid-template-columns: 1fr;
    }
}
.uu-stat {
    background: linear-gradient(180deg, var(--uu-surface), var(--uu-surface-2));
    border: 1px solid var(--uu-stroke);
    border-radius: var(--uu-radius);
    padding: 18px 16px;
    box-shadow: var(--uu-shadow);
    text-align: center;
}
.uu-stat__value {
    font-family: var(--font-sans);
    font-weight: var(--font-extrabold);
    font-size: var(--text-3xl);
    color: var(--uu-accent-2);
}
.uu-stat__label {
    margin-top: 6px;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--uu-muted);
}

.uu-split {
    display: block;
}
@media (max-width: 980px) {
    .uu-split {
        grid-template-columns: 1fr;
    }
}
.uu-pane {
    background: linear-gradient(180deg, var(--uu-surface), var(--uu-surface-2));
    border: 1px solid var(--uu-stroke);
    border-radius: var(--uu-radius);
    padding: 20px;
    width: 100%;
    max-width: 100%;
    box-shadow: var(--uu-shadow);
}
.uu-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.uu-card img {
    width: 100%;
    height: auto;
    display: flex;
}

.uu-h2 {
    font-size: clamp(20px, 4vw, 28px);
    margin: 0 0 10px;
}
.uu-text {
    color: var(--uu-muted);
    margin: 0 0 12px;
}
.uu-list {
    margin: 0;
    padding: 0 0 0 18px;
    color: var(--uu-ink);
}
.uu-list li {
    margin: 6px 0;
}

.uu-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 10px auto 38px;
}
@media (max-width: 980px) {
    .uu-values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .uu-values {
        grid-template-columns: 1fr;
    }
}
.uu-value {
    background: linear-gradient(180deg, var(--uu-surface), var(--uu-surface-2));
    border: 1px solid var(--uu-stroke);
    border-radius: var(--uu-radius);
    padding: 16px;
    box-shadow: var(--uu-shadow);
}
.uu-value h3 {
    margin: 0 0 6px;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
}
.uu-value p {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--uu-muted);
}

.uu-timeline {
    margin: 8px auto 40px;
}
.uu-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.uu-step {
    position: relative;
    padding: 14px 14px 14px 42px;
    background: linear-gradient(180deg, var(--uu-surface), var(--uu-surface-2));
    border: 1px solid var(--uu-stroke);
    border-radius: var(--uu-radius);
    box-shadow: var(--uu-shadow);
}
.uu-step + .uu-step {
    margin-top: 10px;
}
.uu-step__dot {
    position: absolute;
    left: 14px;
    top: 20px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--uu-accent);
    box-shadow: 0 0 0 6px rgba(31, 129, 85, 0.16);
}
.uu-step__year {
    font-family: var(--font-sans);
    font-weight: var(--font-extrabold);
    font-size: var(--text-base);
    color: var(--uu-accent-2);
}
.uu-step__title {
    font-family: var(--font-sans);
    font-weight: var(--font-bold);
    font-size: var(--text-base);
    margin-top: 2px;
}
.uu-step__text {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--uu-muted);
}

.uu-team {
    margin: 8px 0 8px;
}

.uu-cta {
    position: relative;
    padding: 28px 0 64px;
}
.uu-cta__inner {
    background: linear-gradient(180deg, var(--uu-surface), var(--uu-surface-2));
    border: 1px solid var(--uu-stroke);
    border-radius: calc(var(--uu-radius) + 4px);
    padding: 28px;
    box-shadow: var(--uu-shadow);
    text-align: center;
}
.uu-cta__title {
    margin: 0 0 10px;
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
}
.uu-cta__text {
    margin: 0 0 16px;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--uu-muted);
}
.uu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    padding: 10px 16px;
    border-radius: 999px;
    text-decoration: none;
    color: #0e1c16;
    background: linear-gradient(180deg, #e9f8f0, #d9f3e7);
    border: 1px solid var(--uu-stroke);
    box-shadow: 0 12px 24px rgba(16, 48, 36, 0.16);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}
.uu-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(16, 48, 36, 0.22);
}
.dark .uu-btn {
    color: #eafff6;
    background: linear-gradient(180deg, #1a2a23, #16241f);
}
.uu-text .about-section {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.uu-text .stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.uu-text .stat-item {
    background: #f5f7f6;
    padding: 25px;
    border-radius: 14px;
    text-align: center;
}

.uu-text .stat-item h3 {
    color: #1f7a4d;
    font-size: 28px;
    margin-bottom: 5px;
}

.uu-text .about-content h2 {
    color: #1f7a4d;
    font-size: 28px;
    margin-bottom: 10px;
}

.uu-text .features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.uu-text .feature-item {
    background: #f5f7f6;
    padding: 20px;
    border-radius: 14px;
}

.uu-text .feature-item h3 {
    color: #1f7a4d;
    margin-bottom: 8px;
}

.uu-text .history {
    margin-top: 20px;
}

.uu-text .history h2 {
    color: #1f7a4d;
    margin-bottom: 20px;
}

.uu-text .history-item {
    background: #f5f7f6;
    padding: 20px;
    border-radius: 14px;
    margin-bottom: 15px;
}

.uu-text .history-item .year {
    font-weight: bold;
    color: #1f7a4d;
}
.hd-wrap {
    --hd-brand: #19bf73;
    --hd-brand-dark: #0ea567;
    --hd-bg:
        radial-gradient(
            1200px 700px at 0% 0%,
            rgba(25, 191, 115, 0.16),
            transparent 65%
        ),
        radial-gradient(
            1000px 700px at 100% 0%,
            rgba(14, 165, 103, 0.14),
            transparent 60%
        ),
        linear-gradient(180deg, #f6fbf8, #e7f2ec);
    color: #0f1a14;
    background: var(--hd-bg);
    padding: 48px 16px 64px;
}

html[data-theme="dark"] .hd-wrap,
body[data-theme="dark"] .hd-wrap,
.dark .hd-wrap {
    --hd-bg:
        radial-gradient(
            1400px 800px at 0% -20%,
            rgba(25, 191, 115, 0.22),
            transparent 55%
        ),
        radial-gradient(
            1100px 700px at 100% 0%,
            rgba(14, 165, 103, 0.18),
            transparent 60%
        ),
        linear-gradient(180deg, #050b09, #091411 60%, #07100d);
    color: #eaf7ef;
}

.hd-hero {
    position: relative;
    margin: 0 auto 40px;
    max-width: 1600px;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 26px 70px rgba(5, 30, 20, 0.5);
    isolation: isolate;
}

.hd-hero-inner {
    position: relative;
    min-height: 260px;
}

.hd-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    filter: saturate(1.05) contrast(1.03) brightness(0.9);
    transform: scale(1.03);
    transition:
        transform 0.45s ease,
        filter 0.45s ease;
    z-index: -2;
}

.hd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            90% 90% at 10% 0%,
            rgba(0, 0, 0, 0.35),
            transparent 60%
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.85));
    opacity: 0.9;
    z-index: -1;
}

.hd-hero:hover .hd-hero-bg {
    transform: scale(1.06);
    filter: saturate(1.1) contrast(1.06) brightness(0.96);
}

.hd-hero-layout {
    position: relative;
    padding: 28px 26px 26px;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr);
    gap: 20px;
    align-items: flex-end;
    color: #ecfdf5;
}

.hd-hero-copy {
    display: grid;
    gap: 10px;
    max-width: 520px;
}

.hd-eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #d1fae5;
    background: rgba(25, 191, 115, 0.18);
    padding: 6px 12px;
    border-radius: 999px;
    width: -moz-fit-content;
    width: fit-content;
}

html[data-theme="dark"] .hd-eyebrow,
.dark .hd-eyebrow {
    color: #d1fae5;
    background: rgba(6, 95, 70, 0.5);
}

.hd-title {
    margin: 12px 0 4px;
    font-family: var(--font-serif);
    font-size: var(--text-4xl);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
    color: #ecfdf5;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.hd-location {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #bbf7d0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hd-intro {
    margin: 6px 0 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    max-width: 60ch;
    color: #d1fae5;
}

.hd-card--intro {
    padding: 22px 22px 20px;
}

.hd-description {
    display: grid;
    gap: 14px;
}

.hd-description p {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.8;
    color: #234235;
}

html[data-theme="dark"] .hd-description p,
.dark .hd-description p {
    color: #d1fae5;
}

.hd-rating {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.hd-star {
    color: rgba(255, 255, 255, 0.3);
    fill: rgba(255, 255, 255, 0.1);
}

.hd-star.active {
    color: #fbbf24;
    fill: #fbbf24;
}

.hd-hero-media {
    justify-self: flex-end;
    max-width: 360px;
    width: 100%;
}

.hd-hero-img-wrap {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: 0 18px 40px rgba(4, 47, 46, 0.65);
}

.hd-hero-grad {
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55));
    pointer-events: none;
}

.hd-layout {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
    gap: 24px;
}

.hd-main {
    display: grid;
    gap: 18px;
    align-content: start;
}

.hd-card {
    border-radius: 20px;
    padding: 20px 18px 18px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(10, 42, 28, 0.08);
    box-shadow: 0 18px 40px rgba(16, 48, 36, 0.16);
}

html[data-theme="dark"] .hd-card,
.dark .hd-card {
    background: radial-gradient(
        circle at 0 0,
        rgba(34, 197, 94, 0.1),
        rgba(7, 19, 14, 0.98)
    );
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.7);
}

.hd-card-title {
    margin: 0 0 12px;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #052e16;
    display: flex;
    align-items: center;
    gap: 8px;
}

html[data-theme="dark"] .hd-card-title,
.dark .hd-card-title {
    color: #bbf7d0;
}

.hd-list {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.hd-list li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: #234235;
}

.hd-list li svg {
    color: var(--hd-brand);
    margin-top: 3px;
}

html[data-theme="dark"] .hd-list li,
.dark .hd-list li {
    color: #d1fae5;
}

.hd-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hd-chip {
    min-height: 30px;
    padding: 0 10px;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    border-radius: 999px;
    border: 1px solid rgba(20, 154, 104, 0.22);
    background: rgba(20, 154, 104, 0.11);
    color: #194b38;
    display: inline-flex;
    align-items: center;
}

html[data-theme="dark"] .hd-chip,
.dark .hd-chip {
    color: #d8f8ea;
    background: rgba(20, 154, 104, 0.22);
    border-color: rgba(255, 255, 255, 0.14);
}

.hd-aside {
    display: grid;
    align-content: start;
    position: sticky;
    top: 100px;
}

.hd-aside-card {
    border-radius: 20px;
    padding: 20px 18px 18px;
    background: linear-gradient(
        145deg,
        rgba(25, 191, 115, 0.94),
        rgba(13, 148, 136, 0.92)
    );
    color: #022c22;
    box-shadow: 0 22px 50px rgba(4, 47, 46, 0.6);
}

.hd-aside-title {
    margin: 0 0 10px;
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: var(--font-extrabold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hd-aside-text {
    margin: 4px 0 0;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: #022c22;
}

.hd-contact-info {
    margin-top: 14px;
    display: grid;
    gap: 8px;
}

.hd-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: #022c22;
    text-decoration: none;
    transition: opacity 0.2s;
}

.hd-contact-link:hover {
    opacity: 0.75;
}

.hd-ideal-for {
    margin-top: 14px;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: #022c22;
}

.hd-actions {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: 0.02em;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.hd-btn--primary {
    background: #ecfdf5;
    color: #064e3b;
    box-shadow: 0 10px 24px rgba(15, 118, 110, 0.4);
}

.hd-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(15, 118, 110, 0.5);
}

.hd-btn--ghost {
    background: rgba(6, 95, 70, 0.18);
    color: #ecfdf5;
    border-color: rgba(22, 163, 74, 0.55);
}

.hd-btn--ghost:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px rgba(190, 242, 100, 0.4);
}

.hd-btn--website {
    background: rgba(6, 95, 70, 0.12);
    color: #064e3b;
    border-color: rgba(22, 163, 74, 0.32);
    box-shadow: 0 10px 24px rgba(5, 78, 59, 0.14);
}

.hd-btn--website:hover {
    transform: translateY(-1px);
    background: rgba(6, 95, 70, 0.18);
    box-shadow: 0 12px 28px rgba(5, 78, 59, 0.18);
}

html[data-theme="dark"] .hd-btn--website,
.dark .hd-btn--website {
    background: rgba(236, 253, 245, 0.1);
    color: #ecfdf5;
    border-color: rgba(187, 247, 208, 0.24);
}

html[data-theme="dark"] .hd-btn--website:hover,
.dark .hd-btn--website:hover {
    background: rgba(236, 253, 245, 0.16);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

@media (max-width: 900px) {
    .hd-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .hd-aside {
        position: static;
    }
}

@media (max-width: 640px) {
    .hd-wrap {
        padding-top: 32px;
    }

    .hd-hero-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .hd-hero-media {
        max-width: 100%;
    }

    .hd-actions {
        flex-direction: column;
    }

    .hd-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hd-btn {
        transition: none !important;
    }
}
.kr-page {
    background: #f4f7f4;
    color: #163725;
}

.kr-hero {
    position: relative;
    min-height: 58vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #0d3f2c, #0f5c3d);
}

.kr-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.66);
    transform: scale(1.04);
}

.kr-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.62)),
        radial-gradient(
            circle at 50% 40%,
            rgba(15, 143, 90, 0.22),
            transparent 42%
        );
}

.kr-hero__inner {
    position: relative;
    z-index: 1;
    width: min(100%, 960px);
    padding: 72px 20px 92px;
    text-align: center;
}

.kr-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(15, 143, 90, 0.92);
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-extrabold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.kr-hero h1 {
    margin: 20px 0 0;
    color: #ffffff;
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    line-height: 1.06;
}

.kr-hero p {
    width: min(100%, 720px);
    margin: 18px auto 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.08rem;
}

.kr-main {
    position: relative;
    margin-top: -68px;
    padding: 0 20px 110px;
}

.kr-shell {
    width: min(100%, 1180px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}

.kr-content,
.kr-form-card {
    border: 1px solid rgba(15, 76, 51, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.08),
        0 10px 24px rgba(0, 0, 0, 0.04);
}

.kr-content {
    padding: clamp(26px, 5vw, 56px);
}

.kr-richtext {
    color: #2d3a32;
    font-size: 1.05rem;
    line-height: 1.85;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.kr-richtext > :first-child,
.kr-empty > :first-child {
    margin-top: 0;
}

.kr-richtext > :last-child,
.kr-empty > :last-child {
    margin-bottom: 0;
}

.kr-richtext p,
.kr-richtext ul,
.kr-richtext ol {
    margin: 0 0 1rem;
}

.kr-richtext ul,
.kr-richtext ol {
    padding-left: 1.25rem;
}

.kr-richtext h2,
.kr-richtext h3,
.kr-empty h2 {
    color: #123927;
}

.kr-richtext a {
    color: #0f8f5a;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kr-blocks {
    display: grid;
    gap: 28px;
}

.kr-block {
    display: grid;
    gap: 14px;
}

.kr-block h2 {
    margin: 0;
    color: #123927;
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.kr-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 1.2rem;
    color: #2d3a32;
    line-height: 1.7;
}

.kr-image-block {
    margin: 0;
}

.kr-image-block img {
    width: 100%;
    display: block;
    border-radius: 16px;
    -o-object-fit: cover;
       object-fit: cover;
}

.kr-empty p {
    color: #52655a;
}

.kr-form-card {
    position: sticky;
    top: 120px;
    padding: 26px;
}

.kr-form-head {
    margin-bottom: 18px;
}

.kr-form-head span {
    display: inline-flex;
    margin-bottom: 8px;
    color: #0f8f5a;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.kr-form-head h2 {
    margin: 0;
    color: #123927;
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.kr-form {
    display: grid;
    gap: 15px;
}

.kr-field {
    display: grid;
    gap: 8px;
}

.kr-field span {
    color: #173d2b;
    font-size: 0.92rem;
    font-weight: 700;
}

.kr-field input,
.kr-field textarea {
    width: 100%;
    border: 1px solid rgba(15, 76, 51, 0.16);
    border-radius: 14px;
    background: #fbfdfb;
    color: #17251d;
    font: inherit;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.kr-field input {
    height: 52px;
    padding: 0 15px;
}

.kr-field textarea {
    min-height: 150px;
    padding: 14px 15px;
    resize: vertical;
}

.kr-field input:focus,
.kr-field textarea:focus {
    border-color: rgba(15, 143, 90, 0.55);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(15, 143, 90, 0.12);
}

.kr-submit {
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #0f7049, #18a565);
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
    box-shadow: 0 16px 30px rgba(15, 143, 90, 0.22);
}

.kr-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 20px 34px rgba(15, 143, 90, 0.28);
}

.kr-submit:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.kr-status {
    margin-bottom: 15px;
    padding: 13px 14px;
    border-radius: 13px;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.5;
}

.kr-status--success {
    color: #166534;
    background: #ecfdf3;
    border: 1px solid rgba(34, 197, 94, 0.24);
}

.kr-status--error {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid rgba(239, 68, 68, 0.24);
}

html.dark .kr-page,
.dark .kr-page,
html[data-theme="dark"] .kr-page,
body[data-theme="dark"] .kr-page {
    background: #0e1619;
    color: #eaf7ef;
}

html.dark .kr-content,
html.dark .kr-form-card,
.dark .kr-content,
.dark .kr-form-card,
html[data-theme="dark"] .kr-content,
html[data-theme="dark"] .kr-form-card,
body[data-theme="dark"] .kr-content,
body[data-theme="dark"] .kr-form-card {
    background: rgba(14, 28, 23, 0.96);
    border-color: rgba(87, 180, 137, 0.18);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.32);
}

html.dark .kr-richtext,
html.dark .kr-list,
html.dark .kr-empty p,
.dark .kr-richtext,
.dark .kr-list,
.dark .kr-empty p,
html[data-theme="dark"] .kr-richtext,
html[data-theme="dark"] .kr-list,
html[data-theme="dark"] .kr-empty p,
body[data-theme="dark"] .kr-richtext,
body[data-theme="dark"] .kr-list,
body[data-theme="dark"] .kr-empty p {
    color: #c6d8cd;
}

html.dark .kr-richtext h2,
html.dark .kr-richtext h3,
html.dark .kr-block h2,
html.dark .kr-empty h2,
html.dark .kr-form-head h2,
html.dark .kr-field span,
.dark .kr-richtext h2,
.dark .kr-richtext h3,
.dark .kr-block h2,
.dark .kr-empty h2,
.dark .kr-form-head h2,
.dark .kr-field span,
html[data-theme="dark"] .kr-richtext h2,
html[data-theme="dark"] .kr-richtext h3,
html[data-theme="dark"] .kr-block h2,
html[data-theme="dark"] .kr-empty h2,
html[data-theme="dark"] .kr-form-head h2,
html[data-theme="dark"] .kr-field span,
body[data-theme="dark"] .kr-richtext h2,
body[data-theme="dark"] .kr-richtext h3,
body[data-theme="dark"] .kr-block h2,
body[data-theme="dark"] .kr-empty h2,
body[data-theme="dark"] .kr-form-head h2,
body[data-theme="dark"] .kr-field span {
    color: #f1f8f3;
}

html.dark .kr-form-head span,
.dark .kr-form-head span,
html[data-theme="dark"] .kr-form-head span,
body[data-theme="dark"] .kr-form-head span {
    color: #75d09c;
}

html.dark .kr-field input,
html.dark .kr-field textarea,
.dark .kr-field input,
.dark .kr-field textarea,
html[data-theme="dark"] .kr-field input,
html[data-theme="dark"] .kr-field textarea,
body[data-theme="dark"] .kr-field input,
body[data-theme="dark"] .kr-field textarea {
    background: rgba(6, 18, 15, 0.78);
    border-color: rgba(117, 208, 156, 0.22);
    color: #f1f8f3;
}

html.dark .kr-field input:focus,
html.dark .kr-field textarea:focus,
.dark .kr-field input:focus,
.dark .kr-field textarea:focus,
html[data-theme="dark"] .kr-field input:focus,
html[data-theme="dark"] .kr-field textarea:focus,
body[data-theme="dark"] .kr-field input:focus,
body[data-theme="dark"] .kr-field textarea:focus {
    background: rgba(8, 26, 20, 0.96);
    border-color: rgba(117, 208, 156, 0.6);
    box-shadow: 0 0 0 4px rgba(87, 180, 137, 0.16);
}

@media (max-width: 920px) {
    .kr-hero {
        min-height: 48vh;
    }

    .kr-hero__inner {
        padding: 58px 18px 86px;
    }

    .kr-main {
        margin-top: -54px;
        padding: 0 16px 80px;
    }

    .kr-shell {
        grid-template-columns: 1fr;
    }

    .kr-form-card {
        position: static;
        padding: 22px;
        border-radius: 18px;
    }

    .kr-content {
        padding: 28px;
        border-radius: 18px;
    }
}

@media (max-width: 560px) {
    .kr-hero__inner {
        padding: 48px 14px 72px;
    }

    .kr-hero h1 {
        font-size: clamp(2rem, 11vw, 3rem);
    }

    .kr-hero p {
        font-size: 0.96rem;
    }

    .kr-main {
        padding: 0 12px 64px;
    }

    .kr-content,
    .kr-form-card {
        padding: 18px;
        border-radius: 16px;
    }

    .kr-richtext {
        font-size: 0.96rem;
        line-height: 1.7;
    }

    .kr-field input {
        height: 50px;
    }

    .kr-field textarea {
        min-height: 136px;
    }
}
.of-wrap {
    --of-brand: #19bf73;
    --of-brand-dark: #0ea567;
    --of-bg:
        radial-gradient(
            1200px 700px at 0% 0%,
            rgba(25, 191, 115, 0.16),
            transparent 65%
        ),
        radial-gradient(
            1000px 700px at 100% 0%,
            rgba(14, 165, 103, 0.14),
            transparent 60%
        ),
        linear-gradient(180deg, #f5faf7, #e6f2ec);
    color: #0f1a14;
    background: var(--of-bg);
    padding: 48px 16px 64px;
}

html[data-theme="dark"] .of-wrap,
body[data-theme="dark"] .of-wrap,
.dark .of-wrap {
    --of-bg:
        radial-gradient(
            1400px 800px at 0% -20%,
            rgba(25, 191, 115, 0.22),
            transparent 55%
        ),
        radial-gradient(
            1100px 700px at 100% 0%,
            rgba(14, 165, 103, 0.18),
            transparent 60%
        ),
        linear-gradient(180deg, #050b09, #091411 60%, #07100d);
    color: #eaf7ef;
}

.of-hero {
    position: relative;
    margin: 0 auto 40px;
    max-width: 1600px;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 26px 70px rgba(5, 30, 20, 0.5);
    isolation: isolate;
}

.of-hero-inner {
    position: relative;
    min-height: 260px;
}

.of-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    filter: saturate(1.05) contrast(1.03) brightness(0.9);
    transform: scale(1.03);
    transition:
        transform 0.45s ease,
        filter 0.45s ease;
    z-index: -2;
}

.of-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            90% 90% at 10% 0%,
            rgba(0, 0, 0, 0.35),
            transparent 60%
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.85));
    opacity: 0.9;
    z-index: -1;
}

.of-hero:hover .of-hero-bg {
    transform: scale(1.06);
    filter: saturate(1.1) contrast(1.06) brightness(0.96);
}

.of-hero-layout {
    position: relative;
    padding: 26px 26px 24px;
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
    gap: 20px;
    align-items: flex-start;
    color: #ecfdf5;
}

.of-hero-copy {
    display: grid;
    gap: 10px;
    max-width: 540px;
}

.of-eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #bbf7d0;
}

.of-title {
    margin: 6px 0 4px;
    font-family: var(--font-serif);
    font-size: var(--text-4xl);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
    color: white;
}

.of-intro {
    margin: 6px 0 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    max-width: 60ch;
    color: #d1fae5;
}

.of-hero-badge {
    justify-self: flex-end;
    align-self: stretch;
    display: grid;
    align-content: space-between;
    gap: 10px;
}

.of-hero-logo {
    max-width: 140px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.of-hero-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.9);
    color: #ecfdf5;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}

.of-layout {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .of-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.of-main {
    display: grid;
    gap: 18px;
}

.of-card {
    border-radius: 20px;
    padding: 20px 18px 18px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(10, 42, 28, 0.08);
    box-shadow: 0 18px 40px rgba(16, 48, 36, 0.16);
}

.of-card--pdf {
    display: grid;
    gap: 18px;
}

html[data-theme="dark"] .of-card,
.dark .of-card {
    background: radial-gradient(
        circle at 0 0,
        rgba(34, 197, 94, 0.1),
        rgba(7, 19, 14, 0.98)
    );
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.7);
}

.of-card-title {
    margin: 0 0 8px;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #052e16;
}

html[data-theme="dark"] .of-card-title,
.dark .of-card-title {
    color: #bbf7d0;
}

.of-list {
    margin: 4px 0 0;
    padding-left: 1.1rem;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    display: grid;
    gap: 6px;
    color: #234235;
}

.of-list li::marker {
    color: var(--of-brand);
}

html[data-theme="dark"] .of-list,
.dark .of-list {
    color: #d1fae5;
}

.of-text {
    margin: 4px 0 0;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: #3b5c4a;
}

.of-pdf-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.of-pdf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.of-pdf-cta {
    min-width: min(100%, 320px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 18px;
    text-decoration: none;
    color: #f0fdf4;
    background:
        linear-gradient(135deg, rgba(7, 89, 58, 0.98), rgba(5, 150, 105, 0.92)),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent);
    box-shadow: 0 18px 34px rgba(5, 46, 33, 0.22);
    border: 1px solid rgba(16, 185, 129, 0.24);
    transition:
        transform 0.18s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.of-pdf-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 42px rgba(5, 46, 33, 0.28);
    border-color: rgba(16, 185, 129, 0.45);
}

.of-pdf-cta-copy {
    display: grid;
    gap: 4px;
}

.of-pdf-cta-title {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: white;
    font-weight: var(--font-extrabold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.of-pdf-cta-text {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    color: rgba(220, 252, 231, 0.88);
}

.of-pdf-cta-arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(236, 253, 245, 0.14);
    border: 1px solid rgba(236, 253, 245, 0.24);
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: var(--font-extrabold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.of-pdf-frame-wrap {
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(10, 42, 28, 0.1);
    background: #f3f7f4;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.of-pdf-frame {
    width: 100%;
    height: min(78vh, 860px);
    border: 0;
    display: block;
    background: #fff;
}

html[data-theme="dark"] .of-text,
.dark .of-text {
    color: #c4f0d4;
}

html[data-theme="dark"] .of-pdf-frame-wrap,
.dark .of-pdf-frame-wrap {
    border-color: rgba(255, 255, 255, 0.08);
    background: #0b1410;
}

.of-aside {
    display: grid;
    align-content: start;
}

.of-aside-card {
    position: sticky;
    top: 112px;
    display: grid;
    gap: 14px;
    border-radius: 24px;
    padding: 22px 20px 20px;
    background:
        radial-gradient(
            120% 120% at 0% 0%,
            rgba(52, 211, 153, 0.22),
            transparent 58%
        ),
        linear-gradient(160deg, #052e25, #0b4a3d 58%, #0f766e);
    color: #ecfdf5;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 24px 48px rgba(4, 32, 28, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.of-aside-card::before {
    content: "";
    width: 56px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #86efac, #d9f99d);
    box-shadow: 0 0 22px rgba(134, 239, 172, 0.35);
}

.of-aside-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    font-weight: var(--font-extrabold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #f0fdf4;
    line-height: 1.2;
}

.of-aside-card .of-text {
    margin: 0;
    color: rgba(220, 252, 231, 0.88);
    font-size: 0.96rem;
}

.of-aside-card .of-actions {
    margin-top: 2px;
    display: grid;
    gap: 10px;
}

.of-aside-card .of-btn {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 14px;
    justify-content: center;
    text-align: center;
    font-weight: var(--font-extrabold);
}

.of-aside-card .of-btn--primary {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #065f46;
    box-shadow: 0 14px 30px rgba(2, 44, 34, 0.22);
}

.of-aside-card .of-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(2, 44, 34, 0.28);
}

.of-aside-card .of-btn--ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #ecfdf5;
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: none;
}

.of-aside-card .of-btn--ghost:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 3px rgba(236, 253, 245, 0.08);
}

.of-actions {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.of-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: 0.02em;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.of-btn--primary {
    background: #ecfdf5;
    color: #064e3b;
    box-shadow: 0 10px 24px rgba(15, 118, 110, 0.4);
}

.of-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(15, 118, 110, 0.5);
}

.of-btn--ghost {
    background: rgba(6, 95, 70, 0.18);
    color: #ecfdf5;
    border-color: rgba(22, 163, 74, 0.55);
}

.of-btn--ghost:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px rgba(190, 242, 100, 0.4);
}

@media (max-width: 640px) {
    .of-wrap {
        padding-top: 32px;
    }
    .of-hero-inner {
        padding: 22px 18px 18px;
    }
    .of-hero-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .of-hero-badge {
        justify-self: flex-start;
        align-content: start;
    }
    .of-actions {
        flex-direction: column;
    }
    .of-aside-card {
        position: static;
        top: auto;
        padding: 20px 18px 18px;
    }
    .of-pdf-head,
    .of-pdf-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .of-pdf-cta {
        min-width: 100%;
    }
    .of-btn {
        width: 100%;
    }
    .of-pdf-frame {
        height: 70vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .of-btn {
        transition: none !important;
    }
}
:root {
    --green-900: #052e16;
    --green-800: #14532d;
    --green-700: #166534;
    --green-600: #15803d;
    --green-500: #16a34a;
    --green-400: #22c55e;
    --green-300: #4ade80;
    --green-200: #86efac;
    --green-100: #dcfce7;
    --green-050: #f0fdf4;

    --white: #ffffff;
    --text-main: #0f172a;
    --text-soft: #475569;
    --text-muted: #64748b;
    --border-soft: rgba(22, 163, 74, 0.16);

    --shadow-main: 0 20px 60px rgba(6, 95, 38, 0.15);
    --shadow-soft: 0 10px 30px rgba(22, 101, 52, 0.12);
    --shadow-btn: 0 14px 30px rgba(22, 163, 74, 0.28);

    --radius-xl: 32px;
    --radius-lg: 22px;
    --radius-md: 16px;

    --transition: all 0.3s ease;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
}

.review-page {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    padding: 80px 20px 110px;
    background:
        radial-gradient(
            circle at top left,
            rgba(74, 222, 128, 0.18),
            transparent 30%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(34, 197, 94, 0.16),
            transparent 28%
        ),
        linear-gradient(135deg, #f6fff8 0%, #effcf3 35%, #ecfdf3 100%);
}

.review-container {
    z-index: 2;
    max-width: 1380px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-bg-shape {
    position: absolute;
    border-radius: 999px;
    filter: blur(10px);
    opacity: 0.7;
    z-index: 0;
}

.review-bg-shape-1 {
    width: 340px;
    height: 340px;
    top: -70px;
    left: -90px;
    background: radial-gradient(
        circle,
        rgba(74, 222, 128, 0.35),
        transparent 70%
    );
}

.review-bg-shape-2 {
    width: 420px;
    height: 420px;
    bottom: -120px;
    right: -120px;
    background: radial-gradient(
        circle,
        rgba(22, 163, 74, 0.2),
        transparent 70%
    );
}

.review-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(21, 128, 61, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21, 128, 61, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    z-index: 0;
    pointer-events: none;
}

.review-hero {
    position: relative;
    z-index: 2;
    padding: 60px 26px 60px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.review-badge {
    display: inline-flex;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.1);
    border: 1px solid rgba(22, 163, 74, 0.2);
    color: var(--green-700);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-bottom: 22px;
}

.review-hero h1 {
    margin: 0 0 18px;
    font-size: clamp(2.6rem, 4vw, 4.8rem);
    line-height: 1.08;
    font-weight: 800;
    color: var(--green-900);
    letter-spacing: -1.5px;
}

.review-hero p {
    margin: 0;
    max-width: 680px;
    font-size: 1.12rem;
    line-height: 1.9;
    color: var(--text-soft);
}

.review-hero-stats {
    margin-top: 42px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.hero-stat-card {
    padding: 24px 20px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(22, 163, 74, 0.14);
    box-shadow: var(--shadow-soft);
}

.hero-stat-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--green-700);
}

.hero-stat-card span {
    display: block;
    color: var(--text-soft);
    font-size: 0.98rem;
    line-height: 1.5;
}

.review-card {
    position: relative;
    z-index: 2;
    width: min(100%, 980px);
    border-radius: var(--radius-xl);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.94),
        rgba(255, 255, 255, 0.88)
    );
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: var(--shadow-main);
    padding: 34px;
}

.review-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xl);
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(34, 197, 94, 0.45),
        rgba(255, 255, 255, 0.65),
        rgba(22, 163, 74, 0.25)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.review-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
}

.mini-label {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--green-600);
}

.review-card-top h2 {
    margin: 0 0 10px;
    font-size: clamp(1.9rem, 2.6vw, 2.7rem);
    line-height: 1.2;
    color: var(--green-900);
    font-weight: 800;
}

.review-card-top p {
    margin: 0;
    color: var(--text-soft);
    font-size: 1rem;
    line-height: 1.8;
}

.review-score-box {
    min-width: 155px;
    padding: 18px 18px;
    border-radius: 22px;
    background: linear-gradient(180deg, #f3fff6 0%, #e8fff0 100%);
    border: 1px solid rgba(34, 197, 94, 0.18);
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.review-score-box span {
    display: block;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.review-score-box strong {
    display: block;
    font-size: 2rem;
    line-height: 1;
    color: var(--green-700);
    font-weight: 800;
}

.review-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.review-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.input-group label {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--green-800);
}

.input-group input,
.input-group textarea {
    width: 100%;
    border: 1px solid var(--border-soft);
    outline: none;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-main);
    border-radius: 18px;
    font-size: 1rem;
    font-family: inherit;
    transition: var(--transition);
    box-shadow: 0 4px 16px rgba(21, 128, 61, 0.04);
}

.input-group input {
    height: 62px;
    padding: 0 18px;
}

.input-group textarea {
    min-height: 190px;
    padding: 18px;
    resize: vertical;
}

.input-group input::-moz-placeholder, .input-group textarea::-moz-placeholder {
    color: #94a3b8;
}

.input-group input::placeholder,
.input-group textarea::placeholder {
    color: #94a3b8;
}

.input-group input:focus,
.input-group textarea:focus {
    border-color: rgba(22, 163, 74, 0.45);
    background: #ffffff;
    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.12),
        0 10px 24px rgba(22, 163, 74, 0.08);
    transform: translateY(-1px);
}

.rating-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    border-radius: 24px;
    background: linear-gradient(
        180deg,
        rgba(240, 253, 244, 0.92),
        rgba(220, 252, 231, 0.85)
    );
    border: 1px solid rgba(34, 197, 94, 0.16);
}

.rating-panel--criteria {
    margin-bottom: 10px;
    padding: 14px 16px;
    border-radius: 14px;
}

.rating-texts {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rating-title {
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--green-900);
}

.rating-subtitle {
    font-size: 0.95rem;
    color: var(--text-soft);
}

.star-rating {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.star {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 18px;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    color: #cbd5e1;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    transition: var(--transition);
}

.star:hover {
    transform: translateY(-3px) scale(1.03);
}

.star.filled {
    color: var(--green-700);
    background: linear-gradient(180deg, #ffffff 0%, #adfac7 100%);
}

.review-actions {
    display: flex;
    justify-content: flex-start;
}

.submit-btn {
    position: relative;
    min-width: 240px;
    height: 62px;
    border: none;
    border-radius: 18px;
    padding: 0 26px;
    background: linear-gradient(135deg, var(--green-700), var(--green-500));
    color: var(--white);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: var(--shadow-btn);
    transition: var(--transition);
}

.submit-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(22, 163, 74, 0.34);
    background: linear-gradient(135deg, #166534, #22c55e);
}

.submit-btn:active:not(:disabled) {
    transform: translateY(-1px);
}

.submit-btn:disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

.submit-btn.loading {
    pointer-events: none;
}

.status-msg {
    border-radius: 18px;
    padding: 18px 20px;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.6;
    border: 1px solid transparent;
}

.status-msg.success {
    color: #166534;
    background: #ecfdf3;
    border-color: rgba(34, 197, 94, 0.25);
}

.status-msg.error {
    color: #991b1b;
    background: #fef2f2;
    border-color: rgba(239, 68, 68, 0.2);
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

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

@media (max-width: 1200px) {
    .review-container {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .review-hero {
        padding: 20px 0 0;
    }
}

@media (max-width: 768px) {
    .review-page {
        padding: 50px 16px 80px;
    }

    .review-card {
        padding: 22px;
        border-radius: 24px;
    }

    .review-card-top {
        flex-direction: column;
        align-items: stretch;
    }

    .review-form-grid {
        grid-template-columns: 1fr;
    }

    .review-hero-stats {
        grid-template-columns: 1fr;
    }

    .rating-panel {
        flex-direction: column;
        align-items: flex-start;
    }

    .star-rating {
        gap: 10px;
    }

    .star {
        width: 52px;
        height: 52px;
        font-size: 1.8rem;
    }

    .submit-btn {
        width: 100%;
        min-width: unset;
    }

    .review-hero h1 {
        font-size: 2.3rem;
    }
}

@media (max-width: 480px) {
    .review-page {
        padding: 38px 12px 70px;
    }

    .review-hero h1 {
        font-size: 2rem;
    }

    .review-hero p,
    .review-card-top p {
        font-size: 0.96rem;
        line-height: 1.7;
    }

    .input-group input {
        height: 56px;
    }

    .input-group textarea {
        min-height: 160px;
    }

    .star {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        font-size: 1.6rem;
    }
}

.ratings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 15px;
}

@media (max-width: 900px) {
    .review-page {
        min-height: auto;
        padding: 58px 18px 76px;
    }

    .review-container {
        width: 100%;
        display: block;
    }

    .review-card {
        width: 100%;
        padding: 24px;
        border-radius: 22px;
    }

    .review-card::before {
        border-radius: 22px;
    }

    .review-card-top {
        gap: 12px;
        margin-bottom: 24px;
    }

    .mini-label {
        margin-bottom: 8px;
        font-size: 11px;
        line-height: 1.3;
    }

    .review-card-top h2 {
        font-size: clamp(1.65rem, 8vw, 2.2rem);
        line-height: 1.12;
    }

    .review-card-top p {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .review-form {
        gap: 18px;
    }

    .review-form-grid,
    .ratings-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .input-group {
        gap: 8px;
    }

    .input-group label {
        font-size: 0.92rem;
    }

    .input-group input {
        height: 54px;
        border-radius: 14px;
        padding: 0 15px;
        font-size: 0.96rem;
    }

    .input-group textarea {
        min-height: 150px;
        border-radius: 14px;
        padding: 15px;
        font-size: 0.96rem;
    }

    .ratings-container h3 {
        margin-bottom: 10px !important;
        font-size: 1rem !important;
        line-height: 1.35;
    }

    .rating-panel,
    .rating-panel--criteria {
        width: 100%;
        min-width: 0;
        align-items: stretch;
        gap: 12px;
        padding: 14px;
        border-radius: 16px;
    }

    .rating-texts {
        min-width: 0;
    }

    .rating-title {
        font-size: 0.98rem !important;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .rating-subtitle {
        font-size: 0.88rem;
        line-height: 1.45;
    }

    .star-rating {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
    }

    .star {
        width: 100%;
        height: 42px;
        min-width: 0;
        border-radius: 12px;
        font-size: 1.45rem;
    }

    .review-actions {
        width: 100%;
    }

    .submit-btn {
        width: 100%;
        min-width: 0;
        height: 54px;
        border-radius: 14px;
        padding: 0 18px;
        font-size: 0.96rem;
    }

    .status-msg {
        border-radius: 14px;
        padding: 14px 15px;
        font-size: 0.92rem;
        line-height: 1.5;
    }
}

@media (max-width: 520px) {
    .review-page {
        padding: 42px 12px 64px;
    }

    .review-bg-shape {
        opacity: 0.45;
    }

    .review-bg-shape-1 {
        width: 240px;
        height: 240px;
        top: -95px;
        left: -120px;
    }

    .review-bg-shape-2 {
        width: 260px;
        height: 260px;
        right: -150px;
        bottom: -120px;
    }

    .review-card {
        padding: 18px;
        border-radius: 18px;
    }

    .review-card::before {
        border-radius: 18px;
    }

    .review-card-top {
        margin-bottom: 20px;
    }

    .review-card-top h2 {
        font-size: clamp(1.45rem, 9vw, 1.9rem);
    }

    .review-card-top p {
        font-size: 0.9rem;
    }

    .review-form {
        gap: 15px;
    }

    .review-form-grid,
    .ratings-grid {
        gap: 12px;
    }

    .input-group input {
        height: 50px;
        font-size: 0.94rem;
    }

    .input-group textarea {
        min-height: 138px;
        font-size: 0.94rem;
    }

    .rating-panel,
    .rating-panel--criteria {
        padding: 12px;
        border-radius: 14px;
    }

    .rating-title {
        font-size: 0.94rem !important;
    }

    .star-rating {
        gap: 6px;
    }

    .star {
        height: 38px;
        border-radius: 10px;
        font-size: 1.28rem;
    }

    .submit-btn {
        height: 52px;
    }
}

html.dark .review-page,
.dark .review-page,
html[data-theme="dark"] .review-page,
body[data-theme="dark"] .review-page {
    --text-main: #f1f8f3;
    --text-soft: #c6d8cd;
    --text-muted: #9fb5a8;
    --border-soft: rgba(117, 208, 156, 0.24);
    --shadow-main: 0 24px 70px rgba(0, 0, 0, 0.42);
    --shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.28);
    --shadow-btn: 0 18px 36px rgba(31, 129, 85, 0.34);
    background:
        radial-gradient(
            circle at 12% 6%,
            rgba(87, 180, 137, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 86%,
            rgba(31, 129, 85, 0.18),
            transparent 30%
        ),
        linear-gradient(135deg, #08110e 0%, #0e1619 46%, #10251c 100%);
}

html.dark .review-bg-shape-1,
.dark .review-bg-shape-1,
html[data-theme="dark"] .review-bg-shape-1,
body[data-theme="dark"] .review-bg-shape-1 {
    background: radial-gradient(
        circle,
        rgba(87, 180, 137, 0.2),
        transparent 70%
    );
}

html.dark .review-bg-shape-2,
.dark .review-bg-shape-2,
html[data-theme="dark"] .review-bg-shape-2,
body[data-theme="dark"] .review-bg-shape-2 {
    background: radial-gradient(
        circle,
        rgba(42, 151, 101, 0.24),
        transparent 70%
    );
}

html.dark .review-bg-grid,
.dark .review-bg-grid,
html[data-theme="dark"] .review-bg-grid,
body[data-theme="dark"] .review-bg-grid {
    background-image:
        linear-gradient(rgba(117, 208, 156, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(117, 208, 156, 0.055) 1px, transparent 1px);
}

html.dark .review-card,
.dark .review-card,
html[data-theme="dark"] .review-card,
body[data-theme="dark"] .review-card {
    background: linear-gradient(
        180deg,
        rgba(18, 37, 29, 0.96),
        rgba(10, 24, 20, 0.94)
    );
    border-color: rgba(117, 208, 156, 0.18);
    box-shadow: var(--shadow-main);
}

html.dark .review-card::before,
.dark .review-card::before,
html[data-theme="dark"] .review-card::before,
body[data-theme="dark"] .review-card::before {
    background: linear-gradient(
        135deg,
        rgba(117, 208, 156, 0.45),
        rgba(255, 255, 255, 0.08),
        rgba(31, 129, 85, 0.38)
    );
}

html.dark .mini-label,
.dark .mini-label,
html[data-theme="dark"] .mini-label,
body[data-theme="dark"] .mini-label {
    color: #75d09c;
}

html.dark .review-card-top h2,
html.dark .review-hero h1,
html.dark .rating-title,
.dark .review-card-top h2,
.dark .review-hero h1,
.dark .rating-title,
html[data-theme="dark"] .review-card-top h2,
html[data-theme="dark"] .review-hero h1,
html[data-theme="dark"] .rating-title,
body[data-theme="dark"] .review-card-top h2,
body[data-theme="dark"] .review-hero h1,
body[data-theme="dark"] .rating-title {
    color: #f1f8f3;
}

html.dark .review-card-top p,
html.dark .review-hero p,
html.dark .rating-subtitle,
.dark .review-card-top p,
.dark .review-hero p,
.dark .rating-subtitle,
html[data-theme="dark"] .review-card-top p,
html[data-theme="dark"] .review-hero p,
html[data-theme="dark"] .rating-subtitle,
body[data-theme="dark"] .review-card-top p,
body[data-theme="dark"] .review-hero p,
body[data-theme="dark"] .rating-subtitle {
    color: #c6d8cd;
}

html.dark .input-group label,
.dark .input-group label,
html[data-theme="dark"] .input-group label,
body[data-theme="dark"] .input-group label {
    color: #d8efe0;
}

html.dark .input-group input,
html.dark .input-group textarea,
.dark .input-group input,
.dark .input-group textarea,
html[data-theme="dark"] .input-group input,
html[data-theme="dark"] .input-group textarea,
body[data-theme="dark"] .input-group input,
body[data-theme="dark"] .input-group textarea {
    background: rgba(6, 18, 15, 0.78);
    border-color: rgba(117, 208, 156, 0.24);
    color: #f1f8f3;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.dark .input-group input::-moz-placeholder, html.dark .input-group textarea::-moz-placeholder, .dark .input-group input::-moz-placeholder, .dark .input-group textarea::-moz-placeholder, html[data-theme="dark"] .input-group input::-moz-placeholder, html[data-theme="dark"] .input-group textarea::-moz-placeholder, body[data-theme="dark"] .input-group input::-moz-placeholder, body[data-theme="dark"] .input-group textarea::-moz-placeholder {
    color: #7f9588;
}

html.dark .input-group input::placeholder,
html.dark .input-group textarea::placeholder,
.dark .input-group input::placeholder,
.dark .input-group textarea::placeholder,
html[data-theme="dark"] .input-group input::placeholder,
html[data-theme="dark"] .input-group textarea::placeholder,
body[data-theme="dark"] .input-group input::placeholder,
body[data-theme="dark"] .input-group textarea::placeholder {
    color: #7f9588;
}

html.dark .input-group input:focus,
html.dark .input-group textarea:focus,
.dark .input-group input:focus,
.dark .input-group textarea:focus,
html[data-theme="dark"] .input-group input:focus,
html[data-theme="dark"] .input-group textarea:focus,
body[data-theme="dark"] .input-group input:focus,
body[data-theme="dark"] .input-group textarea:focus {
    background: rgba(8, 26, 20, 0.96);
    border-color: rgba(117, 208, 156, 0.62);
    box-shadow:
        0 0 0 4px rgba(87, 180, 137, 0.16),
        0 12px 24px rgba(0, 0, 0, 0.28);
}

html.dark .rating-panel,
.dark .rating-panel,
html[data-theme="dark"] .rating-panel,
body[data-theme="dark"] .rating-panel {
    background: linear-gradient(
        180deg,
        rgba(17, 47, 35, 0.9),
        rgba(9, 30, 24, 0.9)
    );
    border-color: rgba(117, 208, 156, 0.2);
}

html.dark .star,
.dark .star,
html[data-theme="dark"] .star,
body[data-theme="dark"] .star {
    background: rgba(7, 22, 17, 0.88);
    color: #5f7469;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
}

html.dark .star.filled,
.dark .star.filled,
html[data-theme="dark"] .star.filled,
body[data-theme="dark"] .star.filled {
    color: #ffd166;
    background: linear-gradient(180deg, rgba(31, 55, 43, 0.96), #143826);
}

html.dark .submit-btn,
.dark .submit-btn,
html[data-theme="dark"] .submit-btn,
body[data-theme="dark"] .submit-btn {
    color: #ffffff;
    background: linear-gradient(135deg, #1f8155, #57b489);
}

html.dark .submit-btn:hover:not(:disabled),
.dark .submit-btn:hover:not(:disabled),
html[data-theme="dark"] .submit-btn:hover:not(:disabled),
body[data-theme="dark"] .submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #257a54, #75d09c);
    box-shadow: 0 18px 34px rgba(87, 180, 137, 0.28);
}

html.dark .status-msg.success,
.dark .status-msg.success,
html[data-theme="dark"] .status-msg.success,
body[data-theme="dark"] .status-msg.success {
    color: #d8efe0;
    background: rgba(31, 129, 85, 0.16);
    border-color: rgba(117, 208, 156, 0.26);
}

html.dark .status-msg.error,
.dark .status-msg.error,
html[data-theme="dark"] .status-msg.error,
body[data-theme="dark"] .status-msg.error {
    color: #fecaca;
    background: rgba(127, 29, 29, 0.22);
    border-color: rgba(248, 113, 113, 0.28);
}
.rux-calendar-panel {
    border-radius: 16px;
    border: 1px solid rgba(19, 124, 86, 0.15);
    background: #fff;
    padding: 14px;
}

/* HEADER */
.rux-calendar-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rux-calendar-panel__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}
.rux-calendar-panel__title h1 {
    font-size: 24px;
    margin: 0;
}
/* NAV */
.rux-calendar-nav {
    display: flex;
    gap: 8px;
}

/* BUTTON FIX */
.rux-calendar-nav button {
    width: 36px;
    height: 36px;
    border-radius: 50%;

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

    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #166534;

    cursor: pointer;
    transition: all 0.2s ease;
}

/* ICON FIX */
.rux-calendar-nav button svg {
    width: 16px;
    height: 16px;
}

/* HOVER */
.rux-calendar-nav button:hover {
    background: #16a34a;
    color: #ffffff;
    border-color: #16a34a;

    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(22, 163, 74, 0.2);
}

/* DISABLED */
.rux-calendar-nav button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* TOOLBAR */
.rux-calendar-toolbar {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rux-calendar-month-pills,
.rux-calendar-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rux-calendar-pill,
.rux-calendar-shortcuts button {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    background: #fff;
    transition: all 0.2s ease;
}

.rux-calendar-pill:hover,
.rux-calendar-shortcuts button:hover {
    border-color: #16a34a;
    color: #16a34a;
}

.rux-calendar-pill.is-active {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: #fff;
    border: none;
}

/* ========================= */
/* 🔥 SENİN YENİ TASARIMIN 🔥 */
/* ========================= */

/* GRID */
.rux-calendar-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    -moz-column-gap: 10px;
         column-gap: 10px;
    row-gap: 10px;
}

/* CELL */
.rux-calendar-cell {
    position: relative;
    z-index: 0;
    height: 64px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #fff;

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

    transition: all 0.2s ease;
}

.rux-calendar-cell.is-plain-selectable {
    cursor: pointer;
}

/* HOVER */
.rux-calendar-cell:hover {
    border-color: #16a34a;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* DAY */
.dark .rux-day {
    color: #d1d5db;
}
.rux-day {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
}

/* PRICE */
.rux-price {
    font-size: 11px;
    font-weight: 700;
    color: #16a34a;
    margin-top: 4px;
}

.rux-calendar-cell.is-in-range {
    background: linear-gradient(135deg, #bbf7d0, #dcfce7);
    border-color: #4ade80;
    box-shadow:
        inset 0 0 0 1px rgba(22, 163, 74, 0.16),
        0 6px 14px rgba(22, 163, 74, 0.1);
}

.rux-calendar-cell.is-in-range::before,
.rux-calendar-cell.is-selected::before {
    content: "";
    position: absolute;
    inset: -1px -11px;
    z-index: -1;
    background: linear-gradient(
        90deg,
        rgba(22, 163, 74, 0.14),
        rgba(22, 163, 74, 0.22),
        rgba(22, 163, 74, 0.14)
    );
}

.rux-calendar-cell.is-range-start::before {
    left: 50%;
    border-radius: 0;
}

.rux-calendar-cell.is-range-end::before {
    right: 50%;
    border-radius: 0;
}

.rux-calendar-cell.is-range-start.is-range-end::before,
.rux-calendar-cell.is-selected:not(.is-range-start):not(.is-range-end)::before {
    display: none;
}

/* SELECTED */
.rux-calendar-cell.is-selected {
    background: linear-gradient(135deg, #047857, #16a34a);
    color: white;
    border-color: #047857;
    box-shadow:
        0 10px 22px rgba(4, 120, 87, 0.26),
        inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

.rux-calendar-cell.is-selected .rux-day,
.rux-calendar-cell.is-selected .rux-price {
    color: white;
}

.rux-calendar-cell.is-selected .rux-day {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
}

.rux-calendar-cell.is-in-range .rux-day {
    color: #065f46;
}

.rux-range-marker {
    position: absolute;
    top: 9px;
    left: 12px;
    right: 12px;
    height: 4px;
    border-radius: 999px;
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
}

.rux-calendar-cell.is-range-start,
.rux-calendar-cell.is-range-end {
    position: relative;
}

.rux-calendar-cell.is-range-start::after,
.rux-calendar-cell.is-range-end::after {
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* CLOSED */
.rux-calendar-cell.is-closed {
    opacity: 0.3;
    cursor: not-allowed;
}

.rux-calendar-cell.is-past {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    border-color: #d1d5db;
    cursor: not-allowed;
    opacity: 0.75;
    box-shadow: none;
    transform: none;
}

.rux-calendar-cell.is-past:hover {
    border-color: #d1d5db;
    box-shadow: none;
    transform: none;
}

.rux-calendar-cell.is-past .rux-day {
    color: #9ca3af;
}

.rux-calendar-cell.is-past .rux-price {
    color: #9ca3af;
}

/* EMPTY */
.rux-calendar-cell.is-empty {
    background: transparent;
    border: none;
}

/* MONTH TITLE */
.rux-calendar-month__head h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    margin-top: 8px;
}

/* DETAIL WRAPPER */
.rux-calendar-detail {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;

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

    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    border: 1px solid rgba(22, 163, 74, 0.15);
}

/* CENTER */
.rux-calendar-detail__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.rux-detail-range {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.rux-detail-range__item {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(22, 163, 74, 0.12);
    display: grid;
    gap: 4px;
}

.rux-detail-label {
    font-size: 11px;
    font-weight: 700;
    color: #15803d;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rux-detail-date {
    font-size: 13px;
    font-weight: 700;
    color: #166534;
}

.rux-detail-meta {
    display: grid;
    gap: 4px;
    text-align: center;
}

.rux-detail-price {
    font-size: 18px;
    font-weight: 800;
    color: #16a34a;
}

.rux-detail-nights {
    font-size: 12px;
    font-weight: 600;
    color: #166534;
}

.rux-calendar-book-btn {
    min-width: 100%;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
    box-shadow: 0 10px 24px rgba(22, 163, 74, 0.22);
}

.rux-calendar-book-btn svg {
    flex: 0 0 auto;
}

.rux-calendar-book-btn span {
    line-height: 1;
}

.rux-calendar-book-btn:hover {
    transform: translateY(-1px);
}

.rux-calendar-book-btn.is-disabled {
    pointer-events: auto;
    opacity: 0.55;
    box-shadow: none;
}

/* NAV BUTTON */
.rux-detail-nav {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #d1fae5;
    background: #fff;
    color: #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: all 0.2s ease;
}

.rux-detail-nav:hover {
    background: #16a34a;
    color: white;
    border-color: #16a34a;
}

.rux-detail-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.rux-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-top: 10px;
    margin-bottom: 6px;
}

.rux-calendar-weekdays span {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
}

@media (max-width: 640px) {
    .rux-calendar-detail {
        padding: 12px;
    }

    .rux-detail-range {
        grid-template-columns: 1fr;
    }
}
.rux-wrap {
    padding: clamp(28px, 4vw, 52px) 18px clamp(56px, 7vw, 94px);
    background:
        radial-gradient(
            1000px 620px at -8% -14%,
            rgba(35, 170, 118, 0.18),
            transparent 56%
        ),
        radial-gradient(
            1000px 680px at 108% -6%,
            rgba(35, 170, 118, 0.12),
            transparent 58%
        ),
        linear-gradient(180deg, #f7fcf9, #edf8f2 56%, #f8fcfa);
    color: #16372a;
}

.rux-grid,
.rux-bottom {
    max-width: 1600px;
    margin-inline: auto;
}

.rux-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
    gap: 14px;
}

.rux-stage-card {
    border-radius: 24px;
    border: 1px solid rgba(19, 124, 86, 0.18);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 24px 48px rgba(20, 87, 62, 0.14);
    padding: 14px;
}

.rux-stage {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    aspect-ratio: 16/9;
}

.rux-stage img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.45s ease;
}

.rux-stage:hover img {
    transform: scale(1.015);
}

.rux-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.04),
            rgba(0, 0, 0, 0.3) 55%,
            rgba(0, 0, 0, 0.55)
        ),
        radial-gradient(
            60% 80% at 15% 0%,
            rgba(35, 170, 118, 0.22),
            transparent 65%
        );
}

.rux-caption {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    margin: 0;
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(8, 27, 20, 0.62);
    color: #eafff4;
    border: 1px solid rgba(255, 255, 255, 0.2);
    line-height: 1.6;
}

.rux-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(8, 27, 20, 0.48);
    color: #ebfff6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
}

.rux-arrow--left {
    left: 10px;
}

.rux-arrow--right {
    right: 10px;
}

.rux-thumbs {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    flex-wrap: wrap;
}

.rux-thumb {
    border: 1px solid rgba(19, 124, 86, 0.2);
    border-radius: 11px;
    background: transparent;
    padding: 3px;
    cursor: pointer;

    /* FIX */
    width: 100%;
    max-width: 90px;
    flex: 1;
}

.rux-thumb img {
    width: 100%;
    aspect-ratio: 16/10;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 8px;
}

.rux-thumb.is-active {
    border-color: #149a68;
    box-shadow: 0 0 0 3px rgba(20, 154, 104, 0.2);
}

.rux-thumbs--single {
    margin-top: 8px;
}

.rux-thumb--single {
    width: min(280px, 72vw);
}

.rux-thumb-nav {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(19, 124, 86, 0.2);
    background: #fff;
    color: #1d6b4d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.rux-thumb-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.rux-thumb-counter {
    flex-basis: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #4c7d69;
}

.rd-hotel-float-row {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 6;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    pointer-events: none;
}

.rd-hotel-float {
    min-width: 0;
    min-height: 58px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: linear-gradient(
        145deg,
        rgba(9, 30, 23, 0.82),
        rgba(17, 70, 50, 0.68)
    );
    color: #f2fff9;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 14px 34px rgba(4, 17, 12, 0.28);
    backdrop-filter: blur(14px) saturate(130%);
}

.rd-hotel-float span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(225, 255, 242, 0.72);
}

.rd-hotel-float strong {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 13px;
    line-height: 1.22;
    font-weight: 850;
    letter-spacing: 0;
}

.rd-hotel-float--stars {
    align-items: center;
    text-align: center;
}

.rd-stars-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #ffd166;
}

.rd-price-float {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 6;
    width: min(330px, calc(100% - 24px));
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(8, 27, 20, 0.58);
    color: #ebfff6;
    padding: 10px 12px;
    backdrop-filter: blur(3px);
}

.rd-price-float__title {
    display: inline-flex;
    margin-bottom: 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(235, 255, 246, 0.8);
}

.rd-price-float__list {
    display: grid;
    gap: 6px;
}

.rd-price-float__list p {
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.rd-price-float__list strong {
    font-size: 12px;
    font-weight: 700;
    color: white;
}

.rd-price-float__list em {
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
    color: #149a68;
    white-space: nowrap;
}

.rd-hotel-strip {
    margin-top: 10px;
    border-radius: 16px;
    border: 1px solid rgba(19, 124, 86, 0.16);
    background: linear-gradient(
        145deg,
        rgba(243, 251, 246, 0.98),
        rgba(233, 247, 239, 0.94)
    );
    padding: 12px;
}
.dark .rd-hotel-strip {
    background: rgba(19, 34, 28, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
}
.dark .rd-hotel-chip {
    background-color: transparent;
}

.dark .rd-hotel-chip strong {
    color: white;
}

.rd-hotel-strip__head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #15784f;
    margin-bottom: 10px;
}

.rd-hotel-strip__head h3 {
    margin: 0;
    color: #15784f;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rd-hotel-strip__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.rd-hotel-chip {
    border-radius: 12px;
    border: 1px solid rgba(19, 124, 86, 0.14);
    background: rgba(255, 255, 255, 0.88);
    padding: 9px 10px;
    display: grid;
    gap: 5px;
}

.rd-hotel-chip__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4c7d69;
    font-size: 11px;
}

.rd-hotel-chip strong {
    color: #153f2f;
    font-size: 12px;
    line-height: 1.4;
}

.rux-aside {
    border-radius: 24px;
    border: 1px solid rgba(19, 124, 86, 0.18);
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.92),
        rgba(242, 250, 246, 0.94)
    );
    box-shadow: 0 24px 48px rgba(20, 87, 62, 0.12);
    padding: 18px;
    display: grid;
    grid-auto-rows: min-content;
    gap: 10px;
}

.rux-aside--compact {
    padding: 14px;
    gap: 8px;
}

.rux-eyebrow {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: #4d8e74;
}

.rux-title {
    margin: 0;
    font-size: clamp(30px, 4.2vw, 24px);
    line-height: 0.98;
}

.rux-loc {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #1d6b4d;
}

.rux-loc--hotel {
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 10px;
    border: 1px solid rgba(19, 124, 86, 0.16);
    background: rgba(255, 255, 255, 0.58);
    padding: 8px 10px;
}

.rux-loc--hotel strong {
    color: #123c2b;
}

.rux-loc--price {
    margin-top: 4px;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 999px;
    border: 1px solid rgba(20, 154, 104, 0.28);
    background: linear-gradient(
        135deg,
        rgba(20, 154, 104, 0.18),
        rgba(47, 191, 144, 0.14)
    );
    color: #0f5a3f;
    padding: 7px 12px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(20, 87, 62, 0.14);
}

.rux-loc--price svg {
    color: #149a68;
}

.rux-loc--price span {
    letter-spacing: 0.01em;
}

.rux-intro {
    margin: 2px 0 0;
    color: #335f4b;
    line-height: 1.72;
}

.rux-intro p {
    margin: 0 0 0.85rem;
}

.rux-intro p:last-child {
    margin-bottom: 0;
}

.rux-hotel-card {
    margin-top: 2px;
    border-radius: 18px;
    border: 1px solid rgba(19, 124, 86, 0.16);
    background: linear-gradient(
        145deg,
        rgba(243, 251, 246, 0.98),
        rgba(233, 247, 239, 0.94)
    );
    padding: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.rux-hotel-card__head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #15784f;
}

.rux-hotel-card__head h2 {
    margin: 0;
    color: #15784f;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.rux-hotel-card__body {
    margin-top: 12px;
    display: grid;
    gap: 9px;
}

.rux-hotel-card__item {
    border-radius: 14px;
    border: 1px solid rgba(19, 124, 86, 0.14);
    background: rgba(255, 255, 255, 0.84);
    padding: 11px 12px;
    display: grid;
    gap: 5px;
}

.rux-hotel-card__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4c7d69;
    font-size: 12px;
}

.rux-hotel-card__item strong {
    color: #153f2f;
    line-height: 1.5;
}

.rux-facts {
    margin-top: 4px;
    display: grid;
    gap: 8px;
}

.rux-facts--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rux-fact {
    border-radius: 11px;
    border: 1px solid rgba(19, 124, 86, 0.2);
    background: #f2faf6;
    padding: 9px 10px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.rux-fact__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rux-fact span {
    font-size: 12px;
    color: #527e6c;
}

.rux-fact strong {
    font-size: 13px;
    color: #164735;
}

.rux-cta {
    margin-top: 4px;
    border-radius: 16px;
    border: 1px solid rgba(19, 124, 86, 0.18);
    background: linear-gradient(
        140deg,
        rgba(22, 162, 109, 0.18),
        rgba(255, 255, 255, 0.72)
    );
    padding: 12px;
}

.rux-lang-card {
    margin-top: 4px;
    border-radius: 16px;
    border: 1px solid rgba(19, 124, 86, 0.18);
    background: rgba(241, 250, 246, 0.9);
    padding: 12px;
}

.rux-lang-card__head,
.rux-subpanel__head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #15784f;
}

.rux-lang-card__head h2,
.rux-subpanel__head h4 {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rux-lang-row {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rux-lang-chip {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(20, 154, 104, 0.18);
    background: rgba(255, 255, 255, 0.92);
    color: #205642;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
}

.rux-lang-chip.is-active {
    color: #f6fffb;
    background: linear-gradient(135deg, #1ea672 0%, #2fbf90 100%);
    border-color: transparent;
}

.rux-kicker {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: #4d8e74;
}

.rux-cta h2 {
    margin: 8px 0 4px;
    font-size: 22px;
    color: #133f2f;
}

.rux-cta p {
    margin: 0;
    line-height: 1.66;
    color: #315c49;
}

.rux-actions {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
@media (max-width: 980px) {
    .rux-contact-fab {
        display: none;
    }
}
.rux-contact-fab {
    position: fixed;
    left: 16px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    z-index: 50;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(20, 154, 104, 0.24);
    background: linear-gradient(135deg, #1ea672 0%, #2fbf90 100%);
    color: #f6fffb;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    padding: 0 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 30px rgba(20, 87, 62, 0.24);
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        filter 160ms ease;
}

.rux-contact-fab:hover {
    transform: translateY(calc(-50% - 2px));
    filter: brightness(1.02);
    box-shadow: 0 18px 34px rgba(20, 87, 62, 0.28);
}

.rux-contact-fab:focus-visible {
    outline: 2px solid rgba(30, 166, 114, 0.55);
    outline-offset: 2px;
}

.rux-btn {
    min-height: 38px;
    border-radius: 999px;
    padding: 0 14px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rux-btn--primary {
    color: #f6fffb;
    background: linear-gradient(135deg, #1ea672 0%, #2fbf90 100%);
}

.rux-btn--ghost {
    color: #1d4f3b;
    border: 1px solid rgba(20, 154, 104, 0.28);
    background: #f4fbf7;
}

.rux-bottom {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.rux-panel {
    border-radius: 20px;
    border: 1px solid rgba(19, 124, 86, 0.17);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 30px rgba(20, 87, 62, 0.08);
    padding: 16px;
}

.rux-panel--collapse {
    padding: 0;
    overflow: hidden;
}

.rux-collapse {
    display: block;
}

.rux-collapse__summary {
    list-style: none;
    cursor: pointer;
    padding: 16px;
}

.rux-collapse__summary::-webkit-details-marker {
    display: none;
}

.rux-collapse__summary .rux-panel-head {
    justify-content: space-between;
}

.rux-collapse__summary .rux-panel-head::after {
    content: "+";
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid rgba(19, 124, 86, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
}

.rux-collapse[open] .rux-collapse__summary .rux-panel-head::after {
    content: "-";
}

.rux-collapse__content {
    padding: 0 16px 16px;
}

.rux-panel-head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #138359;
}

.rux-panel-head h3 {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.rux-list {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.rux-list li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    color: #2a5744;
    line-height: 1.58;
}

.rux-panel--amenities {
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.95),
        rgba(244, 251, 247, 0.96)
    );
}

.rux-panel--sections {
    grid-column: 1 / -1;
}

.rux-section-grid,
.rux-translation-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.rux-subpanel {
    border-radius: 16px;
    border: 1px solid rgba(19, 124, 86, 0.16);
    background: linear-gradient(
        180deg,
        rgba(248, 252, 249, 0.96),
        rgba(239, 248, 243, 0.92)
    );
    padding: 14px;
}

.rux-subpanel .rux-list {
    margin-top: 10px;
}

.rux-translation-name {
    margin: 10px 0 6px;
    font-weight: 800;
    color: #153f2f;
}

.rux-translation-text {
    margin: 0;
    color: #315c49;
    line-height: 1.7;
    white-space: pre-line;
}

.rux-chip-grid {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rux-chip {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(20, 154, 104, 0.22);
    background: rgba(20, 154, 104, 0.11);
    color: #194b38;
    display: inline-flex;
    align-items: center;
}

.rux-note {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 8px;
    color: #4b7e68;
    font-size: 13px;
    line-height: 1.58;
}

.rux-note p {
    margin: 0;
}

.rux-note--plain {
    margin-top: 12px;
}

@media (max-width: 980px) {
    .rux-grid,
    .rux-bottom {
        grid-template-columns: 1fr;
    }

    .rux-section-grid,
    .rux-translation-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .rd-hotel-strip__grid {
        grid-template-columns: 1fr;
    }

    .rd-hotel-float-row {
        position: static;
        grid-template-columns: 1fr;
        margin: 8px 8px 0;
        gap: 6px;
    }

    .rd-hotel-float {
        min-height: auto;
        padding: 9px 10px;
    }

    .rd-price-float {
        position: static;
        width: auto;
        margin: 8px 8px 0;
    }

    .rux-stage {
        aspect-ratio: 4/3;
    }

    .rux-facts--grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .rux-actions {
        flex-direction: column;
    }

    .rux-btn {
        width: 100%;
    }

    .rux-calendar-scroll__inner {
        width: max(100%, 280px);
    }

    .rux-calendar-weekdays span {
        font-size: 9px;
        letter-spacing: 0.06em;
    }

    .rux-calendar-detail__headline {
        text-align: left;
    }

    .rux-contact-fab {
        left: 12px;
        right: 12px;
        bottom: 12px;
        min-height: 42px;
        display: none;
    }
}

.dark .rux-wrap,
[data-theme="dark"] .rux-wrap {
    background:
        radial-gradient(
            1000px 620px at -8% -14%,
            rgba(35, 170, 118, 0.24),
            transparent 56%
        ),
        radial-gradient(
            1000px 680px at 108% -6%,
            rgba(35, 170, 118, 0.18),
            transparent 58%
        ),
        linear-gradient(180deg, #08110e, #0d1512 56%, #0b130f);
    color: #d9f5e8;
}

.dark .rux-stage-card,
.dark .rux-aside,
.dark .rux-panel,
.dark .rux-subpanel,
[data-theme="dark"] .rux-stage-card,
[data-theme="dark"] .rux-aside,
[data-theme="dark"] .rux-panel,
[data-theme="dark"] .rux-subpanel {
    background: rgba(13, 23, 19, 0.88);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

.dark .rux-loc,
.dark .rux-panel-head,
[data-theme="dark"] .rux-loc,
[data-theme="dark"] .rux-panel-head {
    color: #9ce8cc;
}

.dark .rux-loc--price,
[data-theme="dark"] .rux-loc--price {
    border-color: rgba(47, 191, 144, 0.45);
    background: linear-gradient(
        135deg,
        rgba(20, 154, 104, 0.24),
        rgba(47, 191, 144, 0.2)
    );
    color: #d8f8ea;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.dark .rux-loc--hotel,
[data-theme="dark"] .rux-loc--hotel {
    border-color: rgba(156, 232, 204, 0.18);
    background: rgba(255, 255, 255, 0.06);
}

.dark .rux-loc--hotel strong,
[data-theme="dark"] .rux-loc--hotel strong {
    color: #d8f8ea;
}

.dark .rux-intro,
.dark .rux-translation-text,
.dark .rux-cta p,
.dark .rux-list li,
.dark .rux-note,
[data-theme="dark"] .rux-intro,
[data-theme="dark"] .rux-translation-text,
[data-theme="dark"] .rux-cta p,
[data-theme="dark"] .rux-list li,
[data-theme="dark"] .rux-note {
    color: #b5d9c9;
}

.dark .rux-hotel-card,
[data-theme="dark"] .rux-hotel-card,
.dark .rux-hotel-card__item,
.dark .rux-calendar-panel,
.dark .rux-calendar-detail,
[data-theme="dark"] .rux-hotel-card__item,
[data-theme="dark"] .rux-calendar-panel,
[data-theme="dark"] .rux-calendar-detail {
    background: rgba(19, 34, 28, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
}

.dark .rux-hotel-card__head,
.dark .rux-calendar-panel__title,
[data-theme="dark"] .rux-hotel-card__head,
[data-theme="dark"] .rux-calendar-panel__title {
    color: #9ce8cc;
}

.dark .rux-hotel-card__label,
[data-theme="dark"] .rux-hotel-card__label {
    color: #9ac7b4;
}

.dark .rux-hotel-card__item strong,
.dark .rux-calendar-detail__top,
[data-theme="dark"] .rux-hotel-card__item strong,
[data-theme="dark"] .rux-calendar-detail__top {
    color: #e3fff1;
}

.dark .rux-fact,
[data-theme="dark"] .rux-fact {
    background: #182823;
    border-color: rgba(255, 255, 255, 0.14);
}

.dark .rux-fact span,
[data-theme="dark"] .rux-fact span {
    color: #9ac7b4;
}

.dark .rux-fact strong,
[data-theme="dark"] .rux-fact strong {
    color: #d8f8ea;
}

.dark .rux-chip,
[data-theme="dark"] .rux-chip,
.dark .rux-lang-chip,
[data-theme="dark"] .rux-lang-chip {
    color: #d8f8ea;
    background: rgba(20, 154, 104, 0.22);
}

.dark .rux-lang-chip.is-active,
[data-theme="dark"] .rux-lang-chip.is-active {
    color: #f6fffb;
    background: linear-gradient(135deg, #1ea672 0%, #2fbf90 100%);
}

[data-theme="dark"] .rux-chip {
    color: #d8f8ea;
    background: rgba(20, 154, 104, 0.22);
}

.dark .rux-translation-name,
[data-theme="dark"] .rux-translation-name {
    color: #e3fff1;
}

.dark .rux-calendar-month,
.dark .rux-calendar-cell,
[data-theme="dark"] .rux-calendar-month,
[data-theme="dark"] .rux-calendar-cell {
    background: rgba(19, 34, 28, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
}

.dark .rux-calendar-month__hint,
.dark .rux-calendar-weekdays span,
.dark .rux-calendar-note,
[data-theme="dark"] .rux-calendar-month__hint,
[data-theme="dark"] .rux-calendar-weekdays span,
[data-theme="dark"] .rux-calendar-note {
    color: #b5d9c9;
}

.dark .rux-calendar-day,
.dark .rux-calendar-price,
[data-theme="dark"] .rux-calendar-day,
[data-theme="dark"] .rux-calendar-price {
    color: #d8f8ea;
}

.dark .rux-calendar-meta span,
.dark .rux-calendar-discount,
[data-theme="dark"] .rux-calendar-meta span,
[data-theme="dark"] .rux-calendar-discount {
    color: #d8f8ea;
    background: rgba(20, 154, 104, 0.22);
}

.dark .rux-calendar-nav__btn,
.dark .rux-calendar-pill,
.dark .rux-calendar-shortcut,
.dark .rux-calendar-day-nav,
[data-theme="dark"] .rux-calendar-nav__btn,
[data-theme="dark"] .rux-calendar-pill,
[data-theme="dark"] .rux-calendar-shortcut,
[data-theme="dark"] .rux-calendar-day-nav {
    background: #15261f;
    color: #d8f8ea;
    border-color: rgba(255, 255, 255, 0.14);
}

.dark .rux-calendar-detail__top span,
[data-theme="dark"] .rux-calendar-detail__top span {
    color: #9ce8cc;
}

.dark .rux-calendar-detail__meta span,
[data-theme="dark"] .rux-calendar-detail__meta span {
    color: #d8f8ea;
    background: rgba(20, 154, 104, 0.22);
}

.dark .rux-calendar-detail__note,
[data-theme="dark"] .rux-calendar-detail__note {
    color: #b5d9c9;
}

.dark .rux-thumb,
[data-theme="dark"] .rux-thumb {
    border-color: rgba(255, 255, 255, 0.14);
}

.dark .rux-btn--ghost,
[data-theme="dark"] .rux-btn--ghost {
    color: #d8f6e8;
    background: #15261f;
    border-color: rgba(255, 255, 255, 0.18);
}

.rux-grid--3col {
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1024px) {
    .rux-grid--3col {
        grid-template-columns: 1fr;
    }
}
.rux-left,
.rux-right {
    position: sticky;
    top: 20px;
    height: -moz-fit-content;
    height: fit-content;
}
.td-wrap {
  --td-brand: #19bf73;
  --td-brand-dark: #0ea567;
  --td-bg: radial-gradient(1200px 700px at 0% 0%, rgba(25,191,115,.16), transparent 65%),
           radial-gradient(1000px 700px at 100% 0%, rgba(14,165,103,.14), transparent 60%),
           linear-gradient(180deg, #f7fcf8, #e9f3ed);
  color: #0f1a14;
  background: var(--td-bg);
  padding: 48px 16px 64px;
}

html[data-theme="dark"] .td-wrap,
body[data-theme="dark"] .td-wrap,
.dark .td-wrap {
  --td-bg: radial-gradient(1400px 800px at 0% -20%, rgba(25,191,115,.22), transparent 55%),
           radial-gradient(1100px 700px at 100% 0%, rgba(14,165,103,.18), transparent 60%),
           linear-gradient(180deg, #050b09, #091411 60%, #07100d);
  color: #eaf7ef;
}

.td-hero {
  max-width: 1400px;
  margin: 0 auto 32px;
}

.td-hero-inner {
  border-radius: 28px;
  padding: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.88));
  box-shadow: 0 22px 60px rgba(16,48,36,.16);
  border: 1px solid rgba(10,42,28,.08);
}

html[data-theme="dark"] .td-hero-inner,
.dark .td-hero-inner {
  background: radial-gradient(circle at 0 0, rgba(25,191,115,.18), rgba(4,14,10,.96));
  border-color: rgba(255,255,255,.06);
  box-shadow: 0 26px 68px rgba(0,0,0,.6);
}

.td-hero-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, .9fr);
  gap: 26px;
  align-items: center;
  padding: 22px;
  border-radius: 24px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(25,191,115,.12), transparent 55%),
    linear-gradient(135deg, rgba(244,251,246,.96), rgba(233,245,238,.92));
  border: 1px solid rgba(15, 72, 52, 0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

html[data-theme="dark"] .td-hero-layout,
.dark .td-hero-layout {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(25,191,115,.14), transparent 58%),
    linear-gradient(135deg, rgba(10,22,17,.96), rgba(12,26,20,.92));
  border-color: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.td-hero-copy {
  display: grid;
  gap: 12px;
  align-content: center;
  min-height: 100%;
  padding: 10px 4px 10px 2px;
  max-width: 720px;
  justify-items: start;
}

.td-hero-media {
  justify-self: stretch;
  max-width: 100%;
  width: 100%;
}

.td-hero-img-wrap {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  min-height: 320px;
  box-shadow: 0 24px 54px rgba(4,47,46,.28);
}

.td-hero-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.02);
  transition: transform .4s ease, filter .4s ease;
}

.td-hero-img-wrap:hover img {
  transform: scale(1.06);
  filter: saturate(1.06) contrast(1.04);
}

.td-hero-grad {
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55));
  pointer-events: none;
}

.td-eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: start;
  width: -moz-fit-content;
  width: fit-content;
  max-width: -moz-max-content;
  max-width: max-content;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ecfdf5;
  background: #15803d;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 10px 20px rgba(21,128,61,.18);
}

html[data-theme="dark"] .td-eyebrow,
.dark .td-eyebrow {
  color: #d1fae5;
  background: rgba(6,95,70,.5);
}

.td-title {
  margin: 10px 0 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.02;
  font-weight: 800;
  font-family: Georgia, "Times New Roman", serif;
  color: #052e16;
}

html[data-theme="dark"] .td-title,
.dark .td-title {
  color: #ecfdf5;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}

.td-layout {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: 26px;
}

@media (max-width: 900px) {
  .td-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.td-main {
  display: grid;
  gap: 18px;
}

.td-card {
  border-radius: 24px;
  padding: 24px 22px 22px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(10,42,28,.08);
  box-shadow: 0 18px 40px rgba(16,48,36,.16);
}

.td-card--soft {
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.80));
}

html[data-theme="dark"] .td-card,
.dark .td-card {
  background: radial-gradient(circle at 0 0, rgba(34,197,94,.1), rgba(7,19,14,.98));
  border-color: rgba(255,255,255,.06);
  box-shadow: 0 22px 52px rgba(0,0,0,.7);
}

.td-card-title {
  margin: 0 0 10px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #052e16;
}

html[data-theme="dark"] .td-card-title,
.dark .td-card-title {
  color: #bbf7d0;
}

.td-list {
  margin: 6px 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 10px;
  line-height: 1.75;
  color: #234235;
}

.td-list li::marker {
  color: var(--td-brand);
}

html[data-theme="dark"] .td-list,
.dark .td-list {
  color: #d1fae5;
}

.td-text {
  margin: 4px 0 0;
  line-height: 1.7;
  white-space: pre-line;
  overflow-wrap: anywhere;
  color: #3b5c4a;
}

.td-text > :first-child {
  margin-top: 0;
}

.td-text > :last-child {
  margin-bottom: 0;
}

.td-text p,
.td-text ul,
.td-text ol,
.td-text blockquote {
  margin: 0 0 1rem;
}

.td-text ul,
.td-text ol {
  padding-left: 1.25rem;
}

.td-text li + li {
  margin-top: .4rem;
}

.td-text strong,
.td-text b {
  color: #163725;
}

.td-text a {
  color: #0f8f5a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

html[data-theme="dark"] .td-text,
.dark .td-text {
  color: #c4f0d4;
}

html[data-theme="dark"] .td-text strong,
html[data-theme="dark"] .td-text b,
.dark .td-text strong,
.dark .td-text b {
  color: #ecfdf5;
}

html[data-theme="dark"] .td-text a,
.dark .td-text a {
  color: #86efac;
}

.td-aside {
  display: grid;
  align-content: start;
}

.td-aside-card {
  position: sticky;
  top: 112px;
  display: grid;
  gap: 14px;
  border-radius: 24px;
  padding: 22px 20px 20px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(52,211,153,.22), transparent 58%),
    linear-gradient(160deg, #052e25, #0b4a3d 58%, #0f766e);
  color: #ecfdf5;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 48px rgba(4,32,28,.34), inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden;
}

.td-aside-card::before {
  content: "";
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #86efac, #d9f99d);
  box-shadow: 0 0 22px rgba(134,239,172,.35);
}

.td-aside-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #f0fdf4;
}

.td-aside-card .td-text {
  margin: 0;
  color: rgba(220,252,231,.88);
}

.td-actions {
  margin-top: 2px;
  display: grid;
  gap: 10px;
}

.td-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .02em;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.td-btn--primary {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  color: #065f46;
  box-shadow: 0 14px 30px rgba(2,44,34,.22);
}

.td-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(2,44,34,.28);
}

.td-btn--ghost {
  background: rgba(255,255,255,.08);
  color: #ecfdf5;
  border-color: rgba(255,255,255,.16);
}

.td-btn--ghost:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 3px rgba(236,253,245,.08);
}

@media (max-width: 640px) {
  .td-wrap {
    padding-top: 32px;
  }
  .td-hero-inner {
    padding: 22px 18px 18px;
  }
  .td-hero-layout {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
  .td-hero-media {
    max-width: 100%;
  }
  .td-hero-img-wrap {
    min-height: 240px;
  }
  .td-aside-card {
    position: static;
    top: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .td-btn {
    transition: none !important;
  }
}


*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Figtree, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

input::placeholder,textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

::-webkit-datetime-edit {
  display: inline-flex;
}

::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

[multiple],[size]:where(select:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

[type='checkbox'],[type='radio'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

[type='checkbox'] {
  border-radius: 0px;
}

[type='radio'] {
  border-radius: 100%;
}

[type='checkbox']:focus,[type='radio']:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type='checkbox']:checked,[type='radio']:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {

  [type='checkbox']:checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {

  [type='radio']:checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

@media (forced-colors: active)  {

  [type='checkbox']:indeterminate {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='file'] {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

[type='file']:focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}
.\!container {
  width: 100% !important;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}
.visible {
  visibility: visible;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.right-0 {
  right: 0px;
}
.top-0 {
  top: 0px;
}
.z-0 {
  z-index: 0;
}
.z-20 {
  z-index: 20;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.-ml-px {
  margin-left: -1px;
}
.-mr-0\.5 {
  margin-right: -0.125rem;
}
.-mr-2 {
  margin-right: -0.5rem;
}
.-mt-px {
  margin-top: -1px;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-12 {
  margin-left: 3rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-4 {
  margin-left: 1rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.h-16 {
  height: 4rem;
}
.h-20 {
  height: 5rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.min-h-screen {
  min-height: 100vh;
}
.w-20 {
  width: 5rem;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-8 {
  width: 2rem;
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-xl {
  max-width: 36rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.shrink-0 {
  flex-shrink: 0;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-default {
  cursor: default;
}
.resize {
  resize: both;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-items-center {
  justify-items: center;
}
.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
  overflow: hidden;
}
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-l-md {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.rounded-r-md {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.border {
  border-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-400 {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color: transparent;
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.fill-current {
  fill: currentColor;
}
.p-2 {
  padding: 0.5rem;
}
.p-6 {
  padding: 1.5rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.text-center {
  text-align: center;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.not-italic {
  font-style: normal;
}
.leading-4 {
  line-height: 1rem;
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-7 {
  line-height: 1.75rem;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-muted {
  color: hsl(var(--muted));
}
.underline {
  text-decoration-line: underline;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-gray-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@keyframes enter {

  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.duration-150 {
  animation-duration: 150ms;
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
  animation-play-state: running;
}
.\!paused {
  animation-play-state: paused !important;
}
.paused {
  animation-play-state: paused;
}
/* =========================
   TYPOGRAPHY SYSTEM
========================= */
:root {
    --font-sans:
        "DM Sans", "Figtree", "Inter", "Segoe UI", "Noto Sans",
        "Noto Sans Cyrillic", "Noto Sans Arabic", "Arial Unicode MS", system-ui,
        -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif:
        "Playfair Display", "Noto Serif", Georgia, "Times New Roman", serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: clamp(1.5rem, 3vw, 2rem);
    --text-4xl: clamp(1.75rem, 4vw, 2.5rem);
    --text-display: clamp(2rem, 5vw, 3.25rem);

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    --leading-tight: 1.2;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
}
/* =========================
   PANEL VARIABLES (LIGHT)
========================= */
:root {
    --site-primary-color: #007bff;
    --site-secondary-color: #6c757d;
    --site-accent-color: #28a745;
    --site-button-color: #007bff;
    --site-text-color: #333333;
    --site-h1-color: #000000;
    --site-h2-color: #333333;
    --site-h3-color: #555555;
    --site-link-color: #007bff;
    --site-background-color: #ffffff;
    --site-header-background-color: #ffffff;
    --site-footer-background-color: #f8f9fa;
    --site-header-text-color: #ffffff;

    /* Tailwind tokens */
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
}
/* =========================
   DARK MODE
========================= */
html.dark,
.dark,
[data-theme="dark"] {
    --site-primary-color: #1f8155 !important;
    --site-secondary-color: #57b489 !important;
    --site-accent-color: #2a9765 !important;
    --site-button-color: #1f8155 !important;
    --site-text-color: #eaf7ef !important;
    --site-h1-color: #eaf7ef !important;
    --site-h2-color: #eaf7ef !important;
    --site-h3-color: #c4f0d4 !important;
    --site-link-color: #57b489 !important;
    --site-background-color: #0e1619 !important;
    --site-header-background-color: #0f4b34 !important;
    --site-footer-background-color: #0d1411 !important;
    --site-header-text-color: #ffffff !important;

    /* Tailwind tokens */
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
}
/* =========================
   GLOBAL STYLES
========================= */
* {
    border-color: hsl(var(--border));
}
body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    background-color: var(--site-background-color);
    color: var(--site-text-color);
}
/* HEADINGS */
h1 {
    font-family: var(--font-serif);
    font-size: var(--text-display);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--site-h1-color);
}
h2 {
    font-family: var(--font-serif);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--site-h2-color);
}
h3 {
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    color: var(--site-h3-color);
}
:where(h4, h5, h6) {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    color: var(--site-h3-color);
}
p {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--site-text-color);
}
span {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--site-text-color);
}
.eyebrow,
[class*="eyebrow"] {
    font-size: var(--text-xs);
    font-weight: var(--font-extrabold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
/* LINKS */
a {
    color: var(--site-link-color);
}
/* BUTTON GLOBAL (bonus ekledim 🔥) */
button,
.btn {
    background-color: var(--site-button-color);
    color: var(--site-link-color);
}
footer {
    background-color: var(--site-footer-background-color);
}
/* SCROLL */
html,
body {
    overflow-x: hidden;
    scroll-behavior: smooth;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-extrabold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #065f46;
    background: rgba(16, 185, 129, 0.18);
}
input,
textarea,
select,
button {
    font-family: inherit;
}
a {
    font-family: inherit;
}
/* =========================
  PAGE TRANSITION LOADER
========================= */
@keyframes loader-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes loader-panel-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes loader-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.page-transition-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    pointer-events: all;
    animation: loader-fade-in 120ms ease-out;
}
.page-transition-loader.is-exiting {
    opacity: 0;
    transition:
        opacity 140ms ease,
        visibility 140ms ease;
}
.page-transition-loader__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(248, 250, 252, 0.78);
    backdrop-filter: blur(6px);
}
.dark .page-transition-loader__backdrop,
[data-theme="dark"] .page-transition-loader__backdrop {
    background: rgba(7, 12, 15, 0.76);
}
.page-transition-loader__progress-track {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
}
.page-transition-loader__progress-bar {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7);
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.45);
    transition: width 120ms ease-out;
}
.page-transition-loader__content {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.9rem;
    padding: 1.25rem 1.5rem;
    text-align: center;
    animation: loader-panel-in 140ms ease-out;
}
.page-transition-loader__copy {
    position: relative;
    z-index: 1;
}
.page-transition-loader__spinner {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 2px solid rgba(15, 23, 42, 0.1);
    border-top-color: #10b981;
    animation: loader-spin 900ms linear infinite;
}
.dark .page-transition-loader__spinner,
[data-theme="dark"] .page-transition-loader__spinner {
    border-color: rgba(255, 255, 255, 0.12);
    border-top-color: #6ee7b7;
}
.page-transition-loader__label {
    display: inline-flex;
    margin-bottom: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.56);
}
.dark .page-transition-loader__label,
[data-theme="dark"] .page-transition-loader__label {
    color: rgba(255, 255, 255, 0.58);
}
.page-transition-loader__title {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 2.6vw, 1.6rem);
    line-height: 1.15;
    color: var(--site-h1-color);
}
@media (max-width: 640px) {
    .page-transition-loader__content {
        padding: 1rem 1.25rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .page-transition-loader,
    .page-transition-loader__content,
    .page-transition-loader__spinner,
    .page-transition-loader__progress-bar {
        animation: none !important;
        transition: none !important;
    }
}
html {
    scroll-behavior: smooth;
}
.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:text-gray-400:hover {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-500:hover {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-700:hover {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.focus\:z-10:focus {
  z-index: 10;
}
.focus\:border-blue-300:focus {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.focus\:bg-gray-100:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.focus\:text-gray-500:focus {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.active\:bg-gray-100:active {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.active\:text-gray-500:active {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.active\:text-gray-700:active {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.dark\:bg-gray-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
@media (min-width: 640px) {

  .sm\:-my-px {
    margin-top: -1px;
    margin-bottom: -1px;
  }

  .sm\:ml-10 {
    margin-left: 2.5rem;
  }

  .sm\:ml-6 {
    margin-left: 1.5rem;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:max-w-md {
    max-width: 28rem;
  }

  .sm\:flex-1 {
    flex: 1 1 0%;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-start {
    justify-content: flex-start;
  }

  .sm\:justify-center {
    justify-content: center;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:rounded-lg {
    border-radius: var(--radius);
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:pt-0 {
    padding-top: 0px;
  }
}
@media (min-width: 1024px) {

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}