/*
 * OsterreichTV - Premium IPTV Theme
 * Blocksy Child Theme Styles
 */

/* ============================================
   TOKENS
============================================ */
:root {
    --ot-red: #C8102E;
    --ot-red-dark: #A00D25;
    --ot-red-deep: #7A0A1C;
    --ot-red-soft: #FDE8EC;
    --ot-red-glow: rgba(200, 16, 46, 0.18);

    --ot-ink: #0F1419;
    --ot-ink-2: #2A2F36;
    --ot-ink-3: #5A6068;
    --ot-ink-muted: #8A9099;

    --ot-bg: #FAFAF7;
    --ot-bg-alt: #F4F2EC;
    --ot-surface: #FFFFFF;
    --ot-line: rgba(15, 20, 25, 0.08);
    --ot-line-strong: rgba(15, 20, 25, 0.14);

    --ot-shadow-sm: 0 2px 8px rgba(15, 20, 25, 0.04), 0 1px 3px rgba(15, 20, 25, 0.03);
    --ot-shadow-md: 0 10px 30px -10px rgba(15, 20, 25, 0.10), 0 4px 10px -4px rgba(15, 20, 25, 0.05);
    --ot-shadow-lg: 0 30px 60px -20px rgba(15, 20, 25, 0.20), 0 10px 25px -8px rgba(15, 20, 25, 0.08);
    --ot-shadow-red: 0 20px 50px -15px rgba(200, 16, 46, 0.45), 0 8px 20px -6px rgba(200, 16, 46, 0.25);
    --ot-shadow-wa: 0 12px 30px -6px rgba(37, 211, 102, 0.45), 0 4px 12px -2px rgba(37, 211, 102, 0.3);

    --ot-radius-sm: 10px;
    --ot-radius: 16px;
    --ot-radius-lg: 24px;
    --ot-radius-xl: 32px;

    --ot-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
    --ot-font-body: 'Inter', -apple-system, sans-serif;

    --ot-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ot-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    --ot-container: 1240px;
    --ot-container-narrow: 860px;
    --ot-header-pad: 100px;

    --ot-wa-green: #25D366;
    --ot-wa-green-dark: #1DA851;
}

/* ============================================
   BASE
============================================ */
body {
    font-family: var(--ot-font-body);
    color: var(--ot-ink);
    background: var(--ot-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ot-main {
    overflow-x: hidden;
}

.ot-main h1,
.ot-main h2,
.ot-main h3,
.ot-main h4 {
    font-family: var(--ot-font-display);
    color: var(--ot-ink);
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-weight: 700;
}

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

.ot-container--narrow {
    max-width: var(--ot-container-narrow);
}

.ot-accent {
    background: linear-gradient(135deg, var(--ot-red) 0%, var(--ot-red-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   COMMON
============================================ */
.ot-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ot-red);
    background: var(--ot-red-soft);
    padding: 7px 14px;
    border-radius: 100px;
    margin-bottom: 16px;
}

.ot-eyebrow i {
    font-size: 13px;
}

.ot-eyebrow--dark {
    color: var(--ot-red);
    background: var(--ot-red-soft);
}

.ot-eyebrow--light {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
}

.ot-section-head {
    margin-bottom: 40px;
}

.ot-section-head--center {
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.ot-section-head h2 {
    font-size: clamp(26px, 3.6vw, 40px);
    margin: 0 0 12px;
}

.ot-section-head p {
    color: var(--ot-ink-3);
    font-size: 15px;
    margin: 0;
    line-height: 1.7;
}

.ot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    font-family: var(--ot-font-display);
    font-weight: 600;
    font-size: 15px;
    border-radius: 100px;
    text-decoration: none;
    transition: all 0.3s var(--ot-ease);
    border: none;
    cursor: pointer;
    line-height: 1;
    position: relative;
    overflow: hidden;
}

.ot-btn--primary {
    background: linear-gradient(135deg, var(--ot-red) 0%, var(--ot-red-dark) 100%);
    color: #fff;
    box-shadow: var(--ot-shadow-red);
}

.ot-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 25px 60px -15px rgba(200, 16, 46, 0.55);
    color: #fff;
}

.ot-btn--white {
    background: #fff;
    color: var(--ot-ink);
    box-shadow: var(--ot-shadow-md);
}

.ot-btn--white:hover {
    transform: translateY(-2px);
    color: var(--ot-red);
    box-shadow: var(--ot-shadow-lg);
}

.ot-btn--lg {
    padding: 17px 34px;
    font-size: 16px;
}

/* ============================================
   HERO / PRICING
============================================ */
.ot-hero {
    padding: var(--ot-header-pad) 0 70px;
    background: radial-gradient(ellipse 80% 50% at 50% -20%, var(--ot-red-glow), transparent 60%), var(--ot-bg);
    position: relative;
}

.ot-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(15, 20, 25, 0.06) 1px, transparent 0);
    background-size: 32px 32px;
    mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
    pointer-events: none;
    opacity: 0.5;
}

.ot-hero>* {
    position: relative;
    z-index: 1;
}

.ot-hero__intro {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 40px;
}

.ot-hero__title {
    font-size: clamp(30px, 4.5vw, 52px);
    margin: 0 0 14px;
    font-weight: 800;
}

.ot-hero__subtitle {
    font-size: clamp(15px, 1.4vw, 17px);
    color: var(--ot-ink-3);
    margin: 0 0 24px;
    line-height: 1.6;
}

/* STEPS */
.ot-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 44px;
}

.ot-step-card {
    background: var(--ot-surface);
    border: 1px solid var(--ot-line);
    border-radius: var(--ot-radius-lg);
    padding: 26px;
    transition: all 0.4s var(--ot-ease);
    position: relative;
    overflow: hidden;
}

.ot-step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ot-red), var(--ot-red-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ot-ease);
}

.ot-step-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ot-shadow-lg);
    border-color: transparent;
}

.ot-step-card:hover::before {
    transform: scaleX(1);
}

.ot-step-card__num {
    font-family: var(--ot-font-display);
    font-size: 36px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--ot-red) 0%, var(--ot-red-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    letter-spacing: -0.04em;
    line-height: 1;
}

.ot-step-card h3 {
    font-size: 18px;
    margin: 0 0 8px;
}

.ot-step-card p {
    margin: 0;
    color: var(--ot-ink-3);
    font-size: 14px;
    line-height: 1.6;
}

/* PRICING */
.ot-pricing {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 44px;
    align-items: stretch;
}

.ot-price-card {
    background: var(--ot-surface);
    border-radius: var(--ot-radius-lg);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ot-line);
    transition: all 0.4s var(--ot-ease);
    box-shadow: var(--ot-shadow-sm);
}

.ot-price-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ot-shadow-lg);
    border-color: var(--ot-red);
}

.ot-price-card__header {
    padding: 16px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ot-price-card--1 .ot-price-card__header {
    background: linear-gradient(135deg, #4A5568, #2A2F36);
}

.ot-price-card--2 .ot-price-card__header {
    background: linear-gradient(135deg, #C8102E, #A00D25);
}

.ot-price-card--3 .ot-price-card__header {
    background: linear-gradient(135deg, #2A2F36, #0F1419);
}

.ot-price-card--4 .ot-price-card__header {
    background: linear-gradient(135deg, #A00D25, #7A0A1C);
}

.ot-price-card__price-block {
    padding: 28px 20px 22px;
    text-align: center;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200, 16, 46, 0.05), transparent 70%), var(--ot-surface);
    border-bottom: 1px solid var(--ot-line);
}

.ot-price-card__price {
    display: block;
    font-family: var(--ot-font-display);
    font-size: 48px;
    font-weight: 800;
    color: var(--ot-ink);
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 6px;
}

.ot-price-card__type {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--ot-ink-muted);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ot-price-card__features {
    list-style: none;
    padding: 6px 0;
    margin: 0;
    flex: 1;
}

.ot-price-card__features li {
    padding: 10px 22px;
    font-size: 13.5px;
    color: var(--ot-ink-2);
    text-align: center;
    border-bottom: 1px solid var(--ot-line);
}

.ot-price-card__features li:last-child {
    border-bottom: none;
}

.ot-price-card__features li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--ot-red);
    margin-right: 8px;
    font-size: 11px;
    opacity: 0.75;
}

.ot-price-card__btn {
    display: block;
    text-align: center;
    margin: 16px;
    padding: 14px 22px;
    background: var(--ot-ink);
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 100px;
    text-decoration: none;
    transition: all 0.3s var(--ot-ease);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.ot-price-card__btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--ot-red), var(--ot-red-dark));
    transform: translateY(100%);
    transition: transform 0.4s var(--ot-ease);
    z-index: -1;
}

.ot-price-card__btn:hover {
    color: #fff;
    box-shadow: var(--ot-shadow-red);
}

.ot-price-card__btn:hover::before {
    transform: translateY(0);
}

.ot-price-card--featured {
    transform: scale(1.03);
    border-color: var(--ot-red);
    box-shadow: var(--ot-shadow-red);
    z-index: 2;
}

.ot-price-card--featured:hover {
    transform: scale(1.03) translateY(-6px);
}

.ot-price-card--featured .ot-price-card__btn {
    background: linear-gradient(135deg, var(--ot-red), var(--ot-red-dark));
}

/* TRUST */
.ot-trust {
    background: var(--ot-surface);
    border: 1px solid var(--ot-line);
    border-radius: var(--ot-radius-lg);
    padding: 28px;
    box-shadow: var(--ot-shadow-sm);
}

.ot-trust__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 22px;
}

.ot-trust__title span {
    flex: 1;
    height: 1px;
    background: var(--ot-line-strong);
    max-width: 140px;
}

.ot-trust__title p {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--ot-ink-3);
}

.ot-trust__badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.ot-trust__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--ot-line);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ot-ink-2);
    background: var(--ot-bg);
    transition: all 0.3s var(--ot-ease);
}

.ot-trust__badge i {
    font-size: 18px;
    color: var(--ot-red);
}

.ot-trust__badge:hover {
    border-color: var(--ot-red);
    transform: translateY(-2px);
    box-shadow: var(--ot-shadow-sm);
}

.ot-trust__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    flex-wrap: wrap;
}

.ot-trust__stars {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ot-trust__score {
    font-family: var(--ot-font-display);
    font-size: 28px;
    font-weight: 800;
    color: var(--ot-ink);
}

.ot-stars {
    color: #F5A623;
    font-size: 17px;
    letter-spacing: 2px;
}

.ot-trust__google {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ot-trust__google i {
    font-size: 22px;
    color: #4285F4;
}

.ot-trust__google span {
    font-weight: 600;
    color: var(--ot-ink-2);
}

/* ============================================
   CAROUSEL CONTROLS (shared)
============================================ */
.ot-carousel-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--ot-line);
    background: var(--ot-surface);
    color: var(--ot-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s var(--ot-ease);
    box-shadow: var(--ot-shadow-md);
    flex-shrink: 0;
    z-index: 4;
}

.ot-carousel-arrow:hover:not(:disabled) {
    background: var(--ot-red);
    color: #fff;
    border-color: var(--ot-red);
    transform: scale(1.08);
    box-shadow: var(--ot-shadow-red);
}

.ot-carousel-arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.ot-carousel-arrow--floating {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.ot-carousel-arrow--floating:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.08);
}

.ot-carousel-arrow--prev.ot-carousel-arrow--floating {
    left: 12px;
}

.ot-carousel-arrow--next.ot-carousel-arrow--floating {
    right: 12px;
}

.ot-carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
    grid-column: 1 / -1;
}

.ot-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--ot-line-strong);
    cursor: pointer;
    transition: all 0.3s var(--ot-ease);
    padding: 0;
}

.ot-carousel-dot:hover {
    background: var(--ot-ink-muted);
}

.ot-carousel-dot--active {
    background: var(--ot-red);
    width: 28px;
    border-radius: 100px;
}

/* ============================================
   REVIEWS CAROUSEL (WhatsApp screenshots)
============================================ */
.ot-reviews {
    padding: 70px 0;
    background: var(--ot-bg-alt);
}

.ot-reviews-carousel {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
}

.ot-reviews-carousel__viewport {
    overflow: hidden;
    border-radius: var(--ot-radius);
}

.ot-reviews-carousel__track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.ot-review-slide {
    flex: 0 0 25%;
    padding: 0 10px;
    box-sizing: border-box;
}

.ot-review-card {
    aspect-ratio: 9 / 16;
    border-radius: var(--ot-radius);
    overflow: hidden;
    background: linear-gradient(135deg, #0d1f17, #0a1410);
    border: 2px solid var(--ot-wa-green);
    box-shadow: var(--ot-shadow-md);
    position: relative;
    transition: transform 0.4s var(--ot-ease), box-shadow 0.4s var(--ot-ease);
}

.ot-review-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ot-shadow-lg);
}

.ot-review-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ot-review-card__fallback {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--ot-wa-green);
    background: linear-gradient(135deg, #0d1f17, #0a1410);
}

.ot-review-card__fallback i {
    font-size: 56px;
    opacity: 0.6;
}

.ot-review-card__fallback span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

.ot-review-card--fallback .ot-review-card__fallback {
    display: flex;
}

/* ============================================
   VOD / STATS / POSTERS / FEATURES
============================================ */
.ot-vod {
    padding: 70px 0;
    background: var(--ot-surface);
    text-align: center;
}

.ot-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 40px 0 56px;
}

.ot-stat {
    padding: 28px 18px;
    border-radius: var(--ot-radius);
    background: linear-gradient(180deg, var(--ot-bg-alt), var(--ot-bg));
    border: 1px solid var(--ot-line);
    transition: all 0.4s var(--ot-ease);
}

.ot-stat:hover {
    transform: translateY(-4px);
    border-color: var(--ot-red);
    background: var(--ot-surface);
    box-shadow: var(--ot-shadow-md);
}

.ot-stat__num {
    display: block;
    font-family: var(--ot-font-display);
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 800;
    background: linear-gradient(135deg, var(--ot-red), var(--ot-red-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.03em;
    margin-bottom: 4px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.ot-stat__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ot-ink-3);
    letter-spacing: 0.04em;
}

/* POSTERS */
.ot-posters {
    position: relative;
    margin: 0 0 56px;
    padding: 8px 0;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.ot-posters--dragging {
    cursor: grabbing;
}



.ot-posters__track {
    display: flex;
    gap: 18px;
    width: max-content;

    will-change: transform;
}





.ot-poster {
    flex: 0 0 auto;
    width: 200px;
    height: 300px;
    border-radius: var(--ot-radius);
    overflow: hidden;
    background: linear-gradient(135deg, var(--ot-ink-2), var(--ot-ink));
    position: relative;
    box-shadow: var(--ot-shadow-sm);
    transition: transform 0.4s var(--ot-ease), box-shadow 0.4s var(--ot-ease);
    pointer-events: auto;
}

.ot-poster:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: var(--ot-shadow-lg);
    z-index: 2;
}

.ot-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.ot-poster__fallback {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 48px;
    background: linear-gradient(135deg, var(--ot-ink-2), var(--ot-ink));
}

.ot-poster--fallback .ot-poster__fallback {
    display: flex;
}

.ot-posters__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    pointer-events: none;
    z-index: 3;
}

.ot-posters__fade--left {
    left: 0;
    background: linear-gradient(90deg, var(--ot-surface) 0%, transparent 100%);
}

.ot-posters__fade--right {
    right: 0;
    background: linear-gradient(-90deg, var(--ot-surface) 0%, transparent 100%);
}

/* FEATURES */
.ot-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: left;
}

.ot-feature {
    padding: 30px 28px;
    background: var(--ot-surface);
    border: 1px solid var(--ot-line);
    border-radius: var(--ot-radius-lg);
    transition: all 0.4s var(--ot-ease);
}

.ot-feature:hover {
    transform: translateY(-4px);
    border-color: var(--ot-red);
    box-shadow: var(--ot-shadow-lg);
}

.ot-feature__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ot-red-soft), #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 22px;
    color: var(--ot-red);
    box-shadow: inset 0 0 0 1px var(--ot-red-glow);
}

.ot-feature h3 {
    font-size: 18px;
    margin: 0 0 8px;
}

.ot-feature p {
    margin: 0;
    color: var(--ot-ink-3);
    font-size: 14.5px;
    line-height: 1.65;
}

/* ============================================
   CTA BANNER
============================================ */
.ot-cta-banner {
    padding: 0 0 70px;
    background: var(--ot-surface);
}

.ot-cta-banner__inner {
    background: linear-gradient(135deg, var(--ot-ink) 0%, var(--ot-ink-2) 100%);
    border-radius: var(--ot-radius-lg);
    padding: 34px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--ot-shadow-lg);
}

.ot-cta-banner__inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 100% at 100% 50%, var(--ot-red-glow), transparent 60%);
    pointer-events: none;
}

.ot-cta-banner__inner::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: var(--ot-red);
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.25;
}

.ot-cta-banner__inner>* {
    position: relative;
    z-index: 1;
}

.ot-cta-banner__inner h3 {
    color: #fff;
    font-size: 24px;
    margin: 0 0 6px;
}

.ot-cta-banner__inner p {
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    font-size: 15px;
}

/* ============================================
   INSTALLATION + FLAG
============================================ */
.ot-install {
    padding: 70px 0;
    background: var(--ot-bg-alt);
    text-align: center;
}

.ot-flag-wrap {
    margin-top: 36px;
    display: flex;
    justify-content: center;
}

.ot-flag {
    width: min(520px, 100%);
    aspect-ratio: 3 / 2;
    border-radius: var(--ot-radius);
    overflow: hidden;
    box-shadow: var(--ot-shadow-lg);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.6s var(--ot-ease);
}

.ot-flag:hover {
    transform: rotate(-1deg) scale(1.02);
}

.ot-flag__stripe {
    flex: 1;
}

.ot-flag__stripe--red {
    background: var(--ot-red);
}

.ot-flag__stripe--white {
    background: #FFFFFF;
}

.ot-flag__shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 40%, transparent 60%, rgba(0, 0, 0, 0.08) 100%);
    pointer-events: none;
}

/* ============================================
   FAQ
============================================ */
.ot-faq {
    padding: 70px 0;
    background: var(--ot-bg);
}

.ot-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ot-acc-item {
    background: var(--ot-surface);
    border: 1px solid var(--ot-line);
    border-radius: var(--ot-radius);
    overflow: hidden;
    transition: all 0.3s var(--ot-ease);
}

.ot-acc-item:hover {
    border-color: var(--ot-line-strong);
}

.ot-acc-item[open] {
    border-color: var(--ot-red);
    box-shadow: var(--ot-shadow-md);
}

.ot-acc-item summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    font-weight: 600;
    font-size: 15.5px;
    color: var(--ot-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: color 0.3s var(--ot-ease);
}

.ot-acc-item summary::-webkit-details-marker {
    display: none;
}

.ot-acc-item summary:hover {
    color: var(--ot-red);
}

.ot-acc-item[open] summary {
    color: var(--ot-red);
}

.ot-acc-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ot-bg-alt);
    position: relative;
    flex-shrink: 0;
    transition: all 0.3s var(--ot-ease);
}

.ot-acc-icon::before,
.ot-acc-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 2px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.3s var(--ot-ease);
}

.ot-acc-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.ot-acc-item[open] .ot-acc-icon {
    background: var(--ot-red-soft);
}

.ot-acc-item[open] .ot-acc-icon::after {
    transform: translate(-50%, -50%) rotate(0);
}

.ot-acc-body {
    padding: 0 22px 20px;
    color: var(--ot-ink-3);
    font-size: 14.5px;
    line-height: 1.7;
}

.ot-acc-body p {
    margin: 0;
}

/* ============================================
   STREAMING SOLUTIONS
============================================ */
.ot-solutions {
    padding: 70px 0;
    background: var(--ot-surface);
}

.ot-solution-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.ot-solution {
    background: var(--ot-surface);
    border: 1px solid var(--ot-line);
    border-radius: var(--ot-radius-lg);
    overflow: hidden;
    transition: all 0.4s var(--ot-ease);
    display: flex;
    flex-direction: column;
}

.ot-solution:hover {
    transform: translateY(-6px);
    box-shadow: var(--ot-shadow-lg);
    border-color: transparent;
}

.ot-solution__img {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    position: relative;
    background-image: linear-gradient(135deg, var(--ot-ink) 0%, var(--ot-ink-2) 100%);
}

.ot-solution__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.85), rgba(122, 10, 28, 0.7));
    color: #fff;
    font-size: 56px;
    opacity: 1;
    transition: opacity 0.4s var(--ot-ease);
}

.ot-solution:hover .ot-solution__overlay {
    opacity: 0.85;
}

.ot-solution__body {
    padding: 28px;
}

.ot-solution__body h3 {
    font-size: 21px;
    margin: 0 0 12px;
}

.ot-solution__body p {
    margin: 0;
    color: var(--ot-ink-3);
    font-size: 14.5px;
    line-height: 1.7;
}

/* ============================================
   CONTACT
============================================ */
.ot-contact {
    padding: 70px 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(200, 16, 46, 0.25), transparent 60%),
        linear-gradient(135deg, var(--ot-ink) 0%, #060709 100%);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ot-contact::before,
.ot-contact::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(150px);
    pointer-events: none;
}

.ot-contact::before {
    top: -100px;
    left: -100px;
    background: var(--ot-red);
    opacity: 0.2;
}

.ot-contact::after {
    bottom: -100px;
    right: -100px;
    background: var(--ot-red-dark);
    opacity: 0.25;
}

.ot-contact__inner {
    position: relative;
    z-index: 1;
}

.ot-contact h2 {
    color: #fff;
    font-size: clamp(26px, 3.6vw, 36px);
    margin: 0 0 14px;
}

.ot-contact p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 28px;
    font-size: 15.5px;
}

/* ============================================
   FOOTER (rendered via wp_footer hook)
============================================ */
.ot-footer {
    background: linear-gradient(180deg, #0a0d11 0%, #050608 100%);
    color: rgba(255, 255, 255, 0.7);
    padding: 70px 0 30px;
    position: relative;
    overflow: hidden;
    font-size: 14.5px;
}

.ot-footer__glow {
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 400px;
    background: var(--ot-red);
    border-radius: 50%;
    filter: blur(180px);
    opacity: 0.18;
    pointer-events: none;
}

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

.ot-footer__top {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 56px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ot-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ot-font-display);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.ot-footer__logo i {
    color: var(--ot-red);
    font-size: 24px;
    background: rgba(200, 16, 46, 0.15);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ot-footer__logo strong {
    background: linear-gradient(135deg, var(--ot-red), #ff4d63);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

.ot-footer__tag {
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 20px;
    line-height: 1.65;
    max-width: 380px;
}

.ot-footer__socials {
    display: flex;
    gap: 10px;
}

.ot-footer__socials a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s var(--ot-ease);
}

.ot-footer__socials a:hover {
    background: var(--ot-red);
    border-color: var(--ot-red);
    color: #fff;
    transform: translateY(-2px);
}

.ot-footer__col h4 {
    color: #fff;
    font-family: var(--ot-font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0 0 18px;
    position: relative;
    padding-bottom: 12px;
}

.ot-footer__col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 28px;
    height: 2px;
    background: var(--ot-red);
    border-radius: 2px;
}

.ot-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ot-footer__col a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.25s var(--ot-ease);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ot-footer__col a::before {
    content: '';
    width: 0;
    height: 1px;
    background: var(--ot-red);
    transition: width 0.3s var(--ot-ease);
}

.ot-footer__col a:hover {
    color: #fff;
    padding-left: 4px;
}

.ot-footer__col a:hover::before {
    width: 12px;
}

.ot-footer__contact li {
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    gap: 10px;
}

.ot-footer__contact i {
    color: var(--ot-red);
    width: 16px;
    text-align: center;
}

.ot-footer__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 11px 22px;
    background: linear-gradient(135deg, var(--ot-red), var(--ot-red-dark));
    color: #fff;
    text-decoration: none;
    border-radius: 100px;
    font-weight: 600;
    font-size: 13.5px;
    transition: all 0.3s var(--ot-ease);
    box-shadow: 0 8px 20px -6px rgba(200, 16, 46, 0.4);
}

.ot-footer__cta:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -8px rgba(200, 16, 46, 0.6);
}

.ot-footer__bottom {
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.ot-footer__bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
}

.ot-footer__payments {
    display: flex;
    gap: 14px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 22px;
}

/* ============================================
   FLOATING WHATSAPP BUTTON
============================================ */
.ot-whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ot-wa-green), var(--ot-wa-green-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    text-decoration: none;
    z-index: 999;
    box-shadow: var(--ot-shadow-wa);
    transition: all 0.3s var(--ot-ease);
}

.ot-whatsapp-float::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: var(--ot-wa-green);
    opacity: 0.35;
    z-index: -1;
    animation: ot-wa-pulse 2.4s ease-out infinite;
}

@keyframes ot-wa-pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.5;
    }

    70% {
        transform: scale(1.4);
        opacity: 0;
    }

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

.ot-whatsapp-float:hover {
    transform: scale(1.08);
    color: #fff;
    box-shadow: 0 18px 40px -8px rgba(37, 211, 102, 0.6);
}

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 1024px) {
    .ot-pricing {
        grid-template-columns: repeat(2, 1fr);
    }

    .ot-price-card--featured {
        transform: none;
    }

    .ot-price-card--featured:hover {
        transform: translateY(-6px);
    }

    .ot-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .ot-steps {
        grid-template-columns: 1fr;
    }

    .ot-features {
        grid-template-columns: 1fr;
    }

    .ot-solution-cards {
        grid-template-columns: 1fr;
    }

    .ot-poster {
        width: 170px;
        height: 255px;
    }

    .ot-footer__top {
        grid-template-columns: 1fr 1fr;
    }

    .ot-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    :root {
        --ot-header-pad: 90px;
    }

    .ot-hero {
        padding-bottom: 56px;
    }

    .ot-vod,
    .ot-install,
    .ot-faq,
    .ot-solutions,
    .ot-contact,
    .ot-reviews {
        padding: 56px 0;
    }

    .ot-pricing {
        grid-template-columns: 1fr;
    }

    .ot-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .ot-cta-banner__inner {
        flex-direction: column;
        text-align: center;
        padding: 28px 24px;
    }

    .ot-trust {
        padding: 22px;
    }

    .ot-trust__badges {
        gap: 8px;
    }

    .ot-trust__badge {
        padding: 8px 12px;
        font-size: 12px;
    }

    .ot-section-head {
        margin-bottom: 32px;
    }

    .ot-solution__body {
        padding: 22px;
    }

    .ot-poster {
        width: 140px;
        height: 210px;
    }

    .ot-posters__track {
        gap: 14px;
        animation-duration: 45s;
    }

    .ot-posters__fade {
        width: 40px;
    }

    .ot-carousel-arrow {
        width: 42px;
        height: 42px;
        font-size: 14px;
    }

    .ot-carousel-arrow--floating.ot-carousel-arrow--prev {
        left: 8px;
    }

    .ot-carousel-arrow--floating.ot-carousel-arrow--next {
        right: 8px;
    }

    .ot-footer {
        padding: 50px 0 24px;
    }

    .ot-footer__top {
        grid-template-columns: 1fr;
        gap: 36px;
        padding-bottom: 32px;
    }

    .ot-footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    .ot-whatsapp-float {
        width: 52px;
        height: 52px;
        font-size: 24px;
        bottom: 18px;
        right: 18px;
    }
}

/* ============================================
   FADE-IN ANIMATIONS
============================================ */
@keyframes ot-fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.ot-hero__intro,
.ot-step-card,
.ot-price-card,
.ot-feature,
.ot-stat {
    animation: ot-fade-up 0.7s var(--ot-ease) both;
}

.ot-step-card:nth-child(2) {
    animation-delay: 0.08s;
}

.ot-step-card:nth-child(3) {
    animation-delay: 0.16s;
}

.ot-price-card:nth-child(2) {
    animation-delay: 0.08s;
}

.ot-price-card:nth-child(3) {
    animation-delay: 0.16s;
}

.ot-price-card:nth-child(4) {
    animation-delay: 0.24s;
}

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

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }



    .ot-whatsapp-float::before {
        animation: none !important;
    }
}

/* ============================================
   BLOCKSY HEADER BUTTON — match our primary button
============================================ */
.ct-button {
    background: linear-gradient(135deg, var(--ot-red) 0%, var(--ot-red-dark) 100%) !important;
    color: #fff !important;
    font-family: var(--ot-font-display) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
    padding: 12px 24px !important;
    border-radius: 100px !important;
    border: none !important;
    text-decoration: none !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 12px 30px -10px rgba(200, 16, 46, 0.45), 0 4px 12px -4px rgba(200, 16, 46, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
    position: relative;
    overflow: hidden;
}

.ct-button:hover,
.ct-button:focus {
    transform: translateY(-2px);
    color: #fff !important;
    box-shadow: 0 18px 40px -10px rgba(200, 16, 46, 0.55), 0 6px 16px -4px rgba(200, 16, 46, 0.3) !important;
}

.ct-button:active {
    transform: translateY(0);
}

/* Optional: subtle shine sweep on hover */
.ct-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s var(--ot-ease);
}

.ct-button:hover::before {
    left: 100%;
}

/* ============================================
   CONTACT PAGE
   Append to child.css
============================================ */

/* HERO */
.ot-kp-hero {
    padding: var(--ot-header-pad) 0 50px;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, var(--ot-red-glow), transparent 60%),
        var(--ot-bg);
    position: relative;
    text-align: center;
}

.ot-kp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(15, 20, 25, 0.06) 1px, transparent 0);
    background-size: 32px 32px;
    mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
    pointer-events: none;
    opacity: 0.5;
}

.ot-kp-hero>* {
    position: relative;
    z-index: 1;
}

.ot-kp-hero__title {
    font-size: clamp(34px, 5vw, 56px);
    margin: 0 0 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.ot-kp-hero__subtitle {
    font-size: clamp(15px, 1.4vw, 17px);
    color: var(--ot-ink-3);
    margin: 0 auto;
    max-width: 640px;
    line-height: 1.65;
}

/* INFO CARDS */
.ot-kp-info {
    padding: 0 0 70px;
    background: var(--ot-bg);
    position: relative;
    z-index: 1;
}

.ot-kp-info__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: -30px;
}

.ot-kp-info-card {
    background: var(--ot-surface);
    border: 1px solid var(--ot-line);
    border-radius: var(--ot-radius-lg);
    padding: 32px 28px;
    transition: all 0.4s var(--ot-ease);
    box-shadow: var(--ot-shadow-sm);
    position: relative;
    overflow: hidden;
}

.ot-kp-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ot-red), var(--ot-red-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ot-ease);
}

.ot-kp-info-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ot-shadow-lg);
    border-color: transparent;
}

.ot-kp-info-card:hover::before {
    transform: scaleX(1);
}

.ot-kp-info-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ot-red-soft), #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 22px;
    color: var(--ot-red);
    box-shadow: inset 0 0 0 1px var(--ot-red-glow);
}

.ot-kp-info-card__icon--wa {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.15), rgba(37, 211, 102, 0.05));
    color: var(--ot-wa-green);
    box-shadow: inset 0 0 0 1px rgba(37, 211, 102, 0.25);
}

.ot-kp-info-card h3 {
    font-size: 19px;
    margin: 0 0 4px;
    color: var(--ot-ink);
}

.ot-kp-info-card__meta {
    font-size: 12px;
    font-weight: 600;
    color: var(--ot-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 18px;
}

.ot-kp-info-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ot-kp-info-card__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    color: var(--ot-ink-2);
    font-weight: 500;
}

.ot-kp-info-card__list i {
    color: var(--ot-red);
    font-size: 15px;
    width: 18px;
    text-align: center;
}

/* Featured WhatsApp card */
.ot-kp-info-card--featured {
    background: linear-gradient(135deg, #0d1f17, #0a1410);
    border-color: rgba(37, 211, 102, 0.3);
    color: #fff;
}

.ot-kp-info-card--featured::before {
    background: linear-gradient(90deg, var(--ot-wa-green), var(--ot-wa-green-dark));
}

.ot-kp-info-card--featured:hover {
    border-color: rgba(37, 211, 102, 0.5);
}

.ot-kp-info-card--featured h3 {
    color: #fff;
}

.ot-kp-info-card--featured .ot-kp-info-card__meta {
    color: rgba(255, 255, 255, 0.5);
}

.ot-kp-wa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 22px;
    background: linear-gradient(135deg, var(--ot-wa-green), var(--ot-wa-green-dark));
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border-radius: 100px;
    text-decoration: none;
    transition: all 0.3s var(--ot-ease);
    box-shadow: var(--ot-shadow-wa);
    margin-top: 4px;
}

.ot-kp-wa-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -8px rgba(37, 211, 102, 0.6);
}

.ot-kp-wa-btn i {
    font-size: 18px;
}

/* FAQ on contact page */
.ot-kp-faq {
    padding: 70px 0;
    background: var(--ot-bg-alt);
}

/* ABOUT */
.ot-kp-about {
    padding: 70px 0;
    background: var(--ot-surface);
}

.ot-kp-about__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
}

.ot-kp-about__text h2 {
    font-size: clamp(28px, 3.6vw, 40px);
    margin: 0 0 18px;
    color: var(--ot-ink);
}

.ot-kp-about__text p {
    color: var(--ot-ink-3);
    font-size: 15.5px;
    line-height: 1.75;
    margin: 0 0 16px;
}

.ot-kp-about__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--ot-line);
}

.ot-kp-about__stat {
    text-align: left;
}

.ot-kp-about__num {
    display: block;
    font-family: var(--ot-font-display);
    font-size: 32px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--ot-red), var(--ot-red-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 4px;
}

.ot-kp-about__num sup {
    font-size: 0.55em;
    vertical-align: super;
}

.ot-kp-about__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ot-ink-3);
    letter-spacing: 0.04em;
}

.ot-kp-about__visual {
    display: flex;
    justify-content: center;
}

.ot-kp-about__visual .ot-flag {
    width: 100%;
    max-width: 440px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .ot-kp-info__grid {
        grid-template-columns: 1fr;
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
        margin-top: -20px;
    }

    .ot-kp-about__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ot-kp-about__visual {
        order: -1;
    }
}

@media (max-width: 640px) {
    .ot-kp-hero {
        padding-bottom: 40px;
    }

    .ot-kp-info {
        padding-bottom: 56px;
    }

    .ot-kp-faq,
    .ot-kp-about {
        padding: 56px 0;
    }

    .ot-kp-info-card {
        padding: 26px 22px;
    }

    .ot-kp-about__stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .ot-kp-about__num {
        font-size: 26px;
    }
}

/* ============================================
   BLOG PAGE
   Append to child.css
============================================ */

/* HERO */
.ot-blog-hero {
    padding: var(--ot-header-pad) 0 60px;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, var(--ot-red-glow), transparent 60%),
        var(--ot-bg);
    position: relative;
    text-align: center;
}

.ot-blog-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(15, 20, 25, 0.06) 1px, transparent 0);
    background-size: 32px 32px;
    mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
    pointer-events: none;
    opacity: 0.5;
}

.ot-blog-hero>* {
    position: relative;
    z-index: 1;
}

.ot-blog-hero__title {
    font-size: clamp(34px, 5vw, 56px);
    margin: 0 0 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.ot-blog-hero__subtitle {
    font-size: clamp(15px, 1.4vw, 17px);
    color: var(--ot-ink-3);
    margin: 0 auto;
    max-width: 600px;
    line-height: 1.65;
}

/* BREADCRUMBS */
.ot-breadcrumbs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 13px;
    color: var(--ot-ink-3);
}

.ot-breadcrumbs a {
    color: var(--ot-ink-3);
    text-decoration: none;
    transition: color 0.3s var(--ot-ease);
}

.ot-breadcrumbs a:hover {
    color: var(--ot-red);
}

.ot-breadcrumbs__sep {
    font-size: 9px;
    opacity: 0.5;
}

.ot-breadcrumbs__current {
    color: var(--ot-ink);
    font-weight: 600;
}

/* BLOG LIST */
.ot-blog-list {
    padding: 0 0 90px;
    background: var(--ot-bg);
}

.ot-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* POST CARD */
.ot-post-card {
    background: var(--ot-surface);
    border: 1px solid var(--ot-line);
    border-radius: var(--ot-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.4s var(--ot-ease);
    box-shadow: var(--ot-shadow-sm);
}

.ot-post-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ot-shadow-lg);
    border-color: transparent;
}

.ot-post-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, var(--ot-ink-2), var(--ot-ink));
}

.ot-post-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ot-ease);
}

.ot-post-card:hover .ot-post-card__img {
    transform: scale(1.06);
}

.ot-post-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.2);
    font-size: 48px;
}

/* DATE PILL */
.ot-post-card__date {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ot-ink-2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    letter-spacing: 0.01em;
}

.ot-post-card__date i {
    font-size: 11px;
    color: var(--ot-red);
}

/* CARD BODY */
.ot-post-card__body {
    padding: 24px 26px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ot-post-card__title {
    font-family: var(--ot-font-display);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}

.ot-post-card__title a {
    color: var(--ot-ink);
    text-decoration: none;
    transition: color 0.3s var(--ot-ease);
    display: inline;
    background-image: linear-gradient(var(--ot-red), var(--ot-red));
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.4s var(--ot-ease), color 0.3s var(--ot-ease);
}

.ot-post-card__title a:hover {
    color: var(--ot-red);
    background-size: 100% 1px;
}

.ot-post-card__excerpt {
    color: var(--ot-ink-3);
    font-size: 14.5px;
    line-height: 1.65;
    margin: 0 0 18px;
    flex: 1;
}

.ot-post-card__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ot-red);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    align-self: flex-start;
    transition: gap 0.3s var(--ot-ease), color 0.3s var(--ot-ease);
}

.ot-post-card__more i {
    font-size: 12px;
    transition: transform 0.3s var(--ot-ease);
}

.ot-post-card__more:hover {
    color: var(--ot-red-dark);
    gap: 12px;
}

.ot-post-card__more:hover i {
    transform: translateX(2px);
}

/* PAGINATION */
.ot-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 56px;
    flex-wrap: wrap;
}

.ot-pagination__item .page-numbers,
.ot-pagination__item>a,
.ot-pagination__item>span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--ot-surface);
    border: 1px solid var(--ot-line);
    color: var(--ot-ink-2);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s var(--ot-ease);
    box-shadow: var(--ot-shadow-sm);
}

.ot-pagination__item .page-numbers:hover,
.ot-pagination__item>a:hover {
    border-color: var(--ot-red);
    color: var(--ot-red);
    transform: translateY(-2px);
    box-shadow: var(--ot-shadow-md);
}

.ot-pagination__item .page-numbers.current,
.ot-pagination__item>.current {
    background: linear-gradient(135deg, var(--ot-red), var(--ot-red-dark));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--ot-shadow-red);
}

.ot-pagination__item .page-numbers.dots {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--ot-ink-muted);
}

/* EMPTY STATE */
.ot-blog-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--ot-ink-3);
}

.ot-blog-empty i {
    font-size: 56px;
    color: var(--ot-line-strong);
    margin-bottom: 20px;
}

.ot-blog-empty h3 {
    font-size: 22px;
    margin: 0 0 8px;
    color: var(--ot-ink);
}

.ot-blog-empty p {
    margin: 0;
    font-size: 15px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .ot-blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }
}

@media (max-width: 640px) {
    .ot-blog-hero {
        padding-bottom: 48px;
    }

    .ot-blog-list {
        padding-bottom: 60px;
    }

    .ot-blog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ot-post-card__body {
        padding: 22px;
    }

    .ot-pagination {
        margin-top: 40px;
        gap: 6px;
    }

    .ot-pagination__item .page-numbers,
    .ot-pagination__item>a,
    .ot-pagination__item>span {
        min-width: 38px;
        height: 38px;
        font-size: 13px;
    }
}

/* ============================================
   SINGLE POST PAGE
   Targets Blocksy's default single post markup
   Append to child.css
============================================ */

/* ============================================
   HERO SECTION (image background, title, meta)
============================================ */
.single-post .hero-section[data-type="type-2"] {
    position: relative;
    min-height: 480px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: var(--ot-ink);
}

.single-post .hero-section[data-type="type-2"]>figure {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 0;
}

.single-post .hero-section[data-type="type-2"]>figure,
.single-post .hero-section[data-type="type-2"] .ct-media-container {
    width: 100%;
    height: 100%;
}

.single-post .hero-section[data-type="type-2"] .ct-media-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Dark gradient overlay so text is readable */
.single-post .hero-section[data-type="type-2"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(15, 20, 25, 0.55) 0%, rgba(15, 20, 25, 0.85) 70%, rgba(15, 20, 25, 0.95) 100%),
        radial-gradient(ellipse 60% 80% at 50% 100%, var(--ot-red-glow), transparent 60%);
    z-index: 1;
}

/* Header content sits over the overlay */
.single-post .hero-section[data-type="type-2"] .entry-header {
    position: relative;
    z-index: 2;
    padding: calc(var(--ot-header-pad) + 40px) 24px 70px;
    text-align: center;
    max-width: var(--ot-container);
    margin: 0 auto;
}

/* BREADCRUMBS in hero */
.single-post .hero-section[data-type="type-2"] .ct-breadcrumbs {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-bottom: 24px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.single-post .hero-section[data-type="type-2"] .ct-breadcrumbs>span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.single-post .hero-section[data-type="type-2"] .ct-breadcrumbs a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s var(--ot-ease);
}

.single-post .hero-section[data-type="type-2"] .ct-breadcrumbs a:hover {
    color: #fff;
}

.single-post .hero-section[data-type="type-2"] .ct-breadcrumbs .ct-separator {
    fill: rgba(255, 255, 255, 0.4);
    margin: 0 4px;
    width: 6px;
    height: 6px;
}

.single-post .hero-section[data-type="type-2"] .ct-breadcrumbs .last-item {
    color: #fff;
    font-weight: 600;
}

/* TITLE in hero */
.single-post .hero-section[data-type="type-2"] .page-title {
    color: #fff;
    font-family: var(--ot-font-display);
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 auto 24px;
    max-width: 820px;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}

/* META in hero (date + category) */
.single-post .hero-section[data-type="type-2"] .entry-meta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.single-post .hero-section[data-type="type-2"] .entry-meta li {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.single-post .hero-section[data-type="type-2"] .entry-meta li::before {
    margin-right: 6px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 11px;
    color: var(--ot-red);
}

.single-post .hero-section[data-type="type-2"] .entry-meta li.meta-date::before {
    content: '\f073';
}

.single-post .hero-section[data-type="type-2"] .entry-meta li.meta-categories::before {
    content: '\f02b';
}

.single-post .hero-section[data-type="type-2"] .entry-meta a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s var(--ot-ease);
}

.single-post .hero-section[data-type="type-2"] .entry-meta a:hover {
    color: #fff;
}

/* ============================================
   ARTICLE CONTENT
============================================ */
.single-post #main {
    background: var(--ot-bg);
}

.single-post .ct-container-full {
    background: var(--ot-bg);
    padding-top: 0;
}

/* The article itself sits on a white card, raised over the hero */
.single-post article.post {
    background: var(--ot-surface);
    border-radius: var(--ot-radius-lg);
    padding: 56px clamp(24px, 5vw, 64px);
    margin: -50px auto 60px;
    max-width: 820px;
    box-shadow: var(--ot-shadow-lg);
    position: relative;
    z-index: 3;
}

.single-post .entry-content {
    color: var(--ot-ink-2);
    font-size: 16.5px;
    line-height: 1.85;
}

.single-post .entry-content>*+* {
    margin-top: 1.6em;
}

.single-post .entry-content p,
.single-post .entry-content .wp-block-paragraph {
    margin: 0 0 1.6em;
    color: var(--ot-ink-2);
}

.single-post .entry-content p:last-child {
    margin-bottom: 0;
}

.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4 {
    font-family: var(--ot-font-display);
    color: var(--ot-ink);
    letter-spacing: -0.02em;
    margin: 2em 0 0.7em;
    line-height: 1.25;
    font-weight: 700;
}

.single-post .entry-content h2 {
    font-size: 28px;
}

.single-post .entry-content h3 {
    font-size: 22px;
}

.single-post .entry-content h4 {
    font-size: 18px;
}

.single-post .entry-content a {
    color: var(--ot-red);
    text-decoration: none;
    background-image: linear-gradient(var(--ot-red), var(--ot-red));
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.3s var(--ot-ease), color 0.3s var(--ot-ease);
}

.single-post .entry-content a:hover {
    color: var(--ot-red-dark);
    background-size: 100% 2px;
}

.single-post .entry-content ul,
.single-post .entry-content ol {
    padding-left: 1.4em;
    margin: 0 0 1.6em;
}

.single-post .entry-content ul li,
.single-post .entry-content ol li {
    margin-bottom: 0.5em;
    color: var(--ot-ink-2);
}

.single-post .entry-content ul li::marker {
    color: var(--ot-red);
}

.single-post .entry-content blockquote {
    margin: 2em 0;
    padding: 24px 28px;
    border-left: 4px solid var(--ot-red);
    background: var(--ot-bg-alt);
    border-radius: 0 var(--ot-radius) var(--ot-radius) 0;
    font-style: italic;
    color: var(--ot-ink);
}

.single-post .entry-content blockquote p:last-child {
    margin-bottom: 0;
}

.single-post .entry-content img,
.single-post .entry-content .wp-block-image img {
    border-radius: var(--ot-radius);
    box-shadow: var(--ot-shadow-md);
    margin: 1em 0;
}

.single-post .entry-content code {
    background: var(--ot-bg-alt);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.9em;
    color: var(--ot-red-dark);
    border: 1px solid var(--ot-line);
}

/* ============================================
   SHARE BOX
============================================ */
.single-post .ct-share-box {
    max-width: 820px;
    margin: 0 auto 60px;
    padding: 28px clamp(24px, 5vw, 64px);
    background: var(--ot-surface);
    border: 1px solid var(--ot-line);
    border-radius: var(--ot-radius-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.single-post .ct-share-box .ct-module-title {
    font-family: var(--ot-font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--ot-ink);
    letter-spacing: -0.01em;
}

.single-post .ct-share-box>div {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.single-post .ct-share-box a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--ot-bg-alt);
    color: var(--ot-ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s var(--ot-ease);
    border: 1px solid var(--ot-line);
}

.single-post .ct-share-box a:hover {
    background: var(--ot-red);
    color: #fff;
    border-color: var(--ot-red);
    transform: translateY(-3px);
    box-shadow: var(--ot-shadow-red);
}

.single-post .ct-share-box a svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ============================================
   POST NAVIGATION (prev/next)
============================================ */
.single-post .post-navigation {
    max-width: 820px;
    margin: 0 auto 80px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.single-post .post-navigation .nav-item-prev,
.single-post .post-navigation .nav-item-next {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--ot-surface);
    border: 1px solid var(--ot-line);
    border-radius: var(--ot-radius-lg);
    text-decoration: none;
    color: var(--ot-ink);
    transition: all 0.4s var(--ot-ease);
    box-shadow: var(--ot-shadow-sm);
}

.single-post .post-navigation .nav-item-next {
    flex-direction: row-reverse;
    text-align: right;
}

.single-post .post-navigation .nav-item-prev:hover,
.single-post .post-navigation .nav-item-next:hover {
    transform: translateY(-4px);
    box-shadow: var(--ot-shadow-lg);
    border-color: var(--ot-red);
}

.single-post .post-navigation .nav-item-prev:empty,
.single-post .post-navigation .nav-item-next:empty {
    background: transparent;
    border: none;
    box-shadow: none;
    pointer-events: none;
}

.single-post .post-navigation .ct-media-container {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: var(--ot-radius);
    overflow: hidden;
    position: relative;
    background: var(--ot-ink-2);
}

.single-post .post-navigation .ct-media-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.single-post .post-navigation .ct-media-container svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 14px;
    fill: #fff;
    background: var(--ot-red);
    padding: 8px 10px;
    border-radius: 50%;
    box-sizing: content-box;
    opacity: 0;
    transition: opacity 0.3s var(--ot-ease);
    z-index: 2;
}

.single-post .post-navigation .nav-item-prev:hover .ct-media-container svg,
.single-post .post-navigation .nav-item-next:hover .ct-media-container svg {
    opacity: 1;
}

.single-post .post-navigation .ct-media-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 20, 25, 0.5);
    opacity: 0;
    transition: opacity 0.3s var(--ot-ease);
    z-index: 1;
}

.single-post .post-navigation .nav-item-prev:hover .ct-media-container::before,
.single-post .post-navigation .nav-item-next:hover .ct-media-container::before {
    opacity: 1;
}

.single-post .post-navigation .item-content {
    min-width: 0;
    flex: 1;
}

.single-post .post-navigation .item-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ot-red);
    margin-bottom: 6px;
}

.single-post .post-navigation .item-title {
    display: block;
    font-family: var(--ot-font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--ot-ink);
    line-height: 1.4;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ============================================
   RELATED POSTS
============================================ */
.single-post .ct-related-posts-container {
    background: var(--ot-bg-alt);
    padding: 70px 0;
    margin: 0;
}

.single-post .ct-related-posts-container .ct-container-narrow {
    max-width: var(--ot-container);
    margin: 0 auto;
    padding: 0 24px;
}

.single-post .ct-related-posts .ct-module-title {
    font-family: var(--ot-font-display);
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 700;
    color: var(--ot-ink);
    text-align: center;
    margin: 0 0 40px;
    letter-spacing: -0.02em;
}

.single-post .ct-related-posts-items[data-layout="grid"] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.single-post .ct-related-posts-items article {
    background: var(--ot-surface);
    border: 1px solid var(--ot-line);
    border-radius: var(--ot-radius-lg);
    overflow: hidden;
    transition: all 0.4s var(--ot-ease);
    box-shadow: var(--ot-shadow-sm);
}

.single-post .ct-related-posts-items article:hover {
    transform: translateY(-6px);
    box-shadow: var(--ot-shadow-lg);
    border-color: transparent;
}

.single-post .ct-related-posts-items article>div {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.single-post .ct-related-posts-items .ct-media-container {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--ot-ink-2);
}

.single-post .ct-related-posts-items .ct-media-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ot-ease);
}

.single-post .ct-related-posts-items article:hover .ct-media-container img {
    transform: scale(1.06);
}

.single-post .ct-related-posts-items .related-entry-title {
    font-family: var(--ot-font-display);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    margin: 22px 24px 10px;
    letter-spacing: -0.01em;
}

.single-post .ct-related-posts-items .related-entry-title a {
    color: var(--ot-ink);
    text-decoration: none;
    transition: color 0.3s var(--ot-ease);
}

.single-post .ct-related-posts-items .related-entry-title a:hover {
    color: var(--ot-red);
}

.single-post .ct-related-posts-items .entry-meta {
    list-style: none;
    padding: 0;
    margin: 0 24px 22px;
    font-size: 12.5px;
    color: var(--ot-ink-muted);
    font-weight: 500;
}

.single-post .ct-related-posts-items .entry-meta::before {
    content: '\f073';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--ot-red);
    margin-right: 6px;
    font-size: 11px;
}

/* ============================================
   COMMENTS
============================================ */
.single-post .ct-comments-container {
    background: var(--ot-bg);
    padding: 70px 0;
}

.single-post .ct-comments-container .ct-container-narrow {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 24px;
}

.single-post .comment-reply-title {
    font-family: var(--ot-font-display);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: var(--ot-ink);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.single-post .comment-form {
    background: var(--ot-surface);
    border: 1px solid var(--ot-line);
    border-radius: var(--ot-radius-lg);
    padding: 36px;
    box-shadow: var(--ot-shadow-sm);
    margin-top: 24px;
}

.single-post .comment-notes {
    font-size: 13px;
    color: var(--ot-ink-3);
    margin: 0 0 24px;
}

.single-post .comment-notes .required {
    color: var(--ot-red);
}

.single-post .comment-form p {
    margin: 0 0 18px;
}

.single-post .comment-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ot-ink);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

.single-post .comment-form label .required {
    color: var(--ot-red);
}

.single-post .comment-form input[type="text"],
.single-post .comment-form input[type="email"],
.single-post .comment-form input[type="url"],
.single-post .comment-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--ot-line-strong);
    border-radius: var(--ot-radius-sm);
    background: var(--ot-bg);
    color: var(--ot-ink);
    font-family: var(--ot-font-body);
    font-size: 14.5px;
    transition: all 0.3s var(--ot-ease);
    box-sizing: border-box;
}

.single-post .comment-form input:focus,
.single-post .comment-form textarea:focus {
    outline: none;
    border-color: var(--ot-red);
    background: var(--ot-surface);
    box-shadow: 0 0 0 4px var(--ot-red-glow);
}

.single-post .comment-form textarea {
    min-height: 140px;
    resize: vertical;
    font-family: var(--ot-font-body);
}

.single-post .comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--ot-ink-3);
}

.single-post .comment-form-cookies-consent input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--ot-red);
    margin: 0;
    flex-shrink: 0;
}

.single-post .comment-form-cookies-consent label {
    margin: 0;
    font-weight: 500;
    color: var(--ot-ink-3);
}

.single-post .form-submit button[type="submit"],
.single-post .form-submit .submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--ot-red), var(--ot-red-dark));
    color: #fff;
    font-family: var(--ot-font-display);
    font-weight: 600;
    font-size: 14.5px;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s var(--ot-ease);
    box-shadow: var(--ot-shadow-red);
    letter-spacing: 0.01em;
}

.single-post .form-submit button[type="submit"]:hover,
.single-post .form-submit .submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 25px 60px -15px rgba(200, 16, 46, 0.55);
}

/* Existing comments list */
.single-post .comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.single-post .comment-list .comment {
    background: var(--ot-surface);
    border: 1px solid var(--ot-line);
    border-radius: var(--ot-radius);
    padding: 24px;
}

.single-post .comment-list .comment-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.single-post .comment-list .comment-author img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.single-post .comment-list .fn {
    font-weight: 700;
    color: var(--ot-ink);
}

.single-post .comment-list .comment-meta {
    font-size: 12px;
    color: var(--ot-ink-muted);
    margin-bottom: 10px;
}

.single-post .comment-list .comment-content {
    color: var(--ot-ink-2);
    line-height: 1.7;
}

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 1024px) {
    .single-post .ct-related-posts-items[data-layout="grid"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .single-post .hero-section[data-type="type-2"] {
        min-height: 380px;
    }

    .single-post .hero-section[data-type="type-2"] .entry-header {
        padding: calc(var(--ot-header-pad) + 20px) 20px 50px;
    }

    .single-post .hero-section[data-type="type-2"] .entry-meta {
        gap: 8px;
    }

    .single-post .hero-section[data-type="type-2"] .entry-meta li {
        padding: 6px 12px;
        font-size: 12px;
    }

    .single-post article.post {
        padding: 36px 24px;
        margin: -30px 16px 40px;
        border-radius: var(--ot-radius);
    }

    .single-post .entry-content {
        font-size: 15.5px;
    }

    .single-post .ct-share-box {
        margin: 0 16px 40px;
        padding: 22px 24px;
        flex-direction: column;
        align-items: flex-start;
    }

    .single-post .post-navigation {
        margin: 0 16px 50px;
        flex-direction: column;
    }

    .single-post .post-navigation .nav-item-next {
        flex-direction: row;
        text-align: left;
    }

    .single-post .post-navigation .ct-media-container {
        width: 64px;
        height: 64px;
    }

    .single-post .ct-related-posts-container {
        padding: 50px 0;
    }

    .single-post .ct-related-posts-items[data-layout="grid"] {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .single-post .ct-comments-container {
        padding: 50px 0;
    }

    .single-post .comment-form {
        padding: 24px;
    }
}

/* ============================================
   CATEGORY ARCHIVE PAGE
   Blocksy boxed grid cards
   Inspired by custom Blog page cards
   Append to child.css
============================================ */

/* Page background */
.archive.category #main,
.archive.category .site-main {
    background: var(--ot-bg);
}

/* Main archive container */
.archive.category .ct-container[data-vertical-spacing] {
    background: var(--ot-bg);
    padding-top: 0;
}

/* Inner section width/spacing */
.archive.category .ct-container[data-vertical-spacing]>section {
    max-width: var(--ot-container);
    margin: 0 auto;
    padding: 70px 24px 90px;
}

/* ============================================
   CATEGORY TITLE / HERO
============================================ */

.archive.category .hero-section[data-type="type-1"] {
    margin: 0 0 40px;
    padding: 0;
    text-align: left;
}

.archive.category .hero-section[data-type="type-1"] .entry-header {
    padding: 0;
}

.archive.category .page-title {
    font-family: var(--ot-font-display);
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--ot-ink);
    text-transform: none;
}

.archive.category .page-title .ct-title-label {
    color: var(--ot-red);
    font: inherit;
    letter-spacing: inherit;
    text-transform: none;
}

/* Optional subtle subtitle */
.archive.category .hero-section[data-type="type-1"] .entry-header::after {
    content: 'Alle Beiträge aus dieser Kategorie';
    display: block;
    margin-top: 14px;
    max-width: 560px;
    color: var(--ot-ink-3);
    font-size: 16px;
    line-height: 1.65;
}

/* ============================================
   GRID
============================================ */

.archive.category .entries[data-archive="default"][data-layout="grid"] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}

/* ============================================
   CARD
============================================ */

.archive.category .entries[data-archive="default"] article.entry-card {
    background: var(--ot-surface) !important;
    border: 1px solid var(--ot-line) !important;
    border-radius: var(--ot-radius-lg) !important;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    flex-direction: column;
    min-height: 100%;

    box-shadow: var(--ot-shadow-sm);
    transition:
        transform 0.4s var(--ot-ease),
        box-shadow 0.4s var(--ot-ease),
        border-color 0.4s var(--ot-ease);
}

.archive.category .entries[data-archive="default"] article.entry-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ot-shadow-lg);
    border-color: transparent !important;
}

/* ============================================
   IMAGE AREA
============================================ */

/* Blocksy places the title before image in this card type.
   This keeps the image clean and premium. */
.archive.category .entry-card .ct-media-container {
    order: 1;
    position: relative;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 0 !important;
    background: linear-gradient(135deg, var(--ot-ink-2), var(--ot-ink));
    aspect-ratio: 16 / 10;
}

.archive.category .entry-card .ct-media-container img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    display: block;
    object-fit: cover !important;
    object-position: center;
    aspect-ratio: auto !important;
    transition: transform 0.6s var(--ot-ease);
}

.archive.category .entry-card:hover .ct-media-container img {
    transform: scale(1.06);
}

/* ============================================
   TITLE
============================================ */

.archive.category .entry-card .entry-title {
    order: 2;
    font-family: var(--ot-font-display);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    margin: 0 !important;
    padding: 24px 26px 0 !important;
    color: var(--ot-ink);
    text-transform: none;
}

.archive.category .entry-card .entry-title a {
    color: var(--ot-ink);
    text-decoration: none;
    display: inline;
    background-image: linear-gradient(var(--ot-red), var(--ot-red));
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition:
        background-size 0.4s var(--ot-ease),
        color 0.3s var(--ot-ease);
}

.archive.category .entry-card .entry-title a:hover {
    color: var(--ot-red);
    background-size: 100% 1px;
}

/* ============================================
   EXCERPT
============================================ */

.archive.category .entry-card .entry-excerpt {
    order: 3;
    padding: 10px 26px 0 !important;
    margin: 0 !important;
    color: var(--ot-ink-3);
    font-size: 14.5px;
    line-height: 1.65;
    flex: 1;
}

.archive.category .entry-card .entry-excerpt p {
    margin: 0;
}

/* ============================================
   READ MORE
============================================ */

.archive.category .entry-card .entry-excerpt::after {
    content: 'Weiterlesen';
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;

    color: var(--ot-red);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;

    transition:
        color 0.3s var(--ot-ease),
        transform 0.3s var(--ot-ease);
}

.archive.category .entry-card .entry-excerpt::after {
    content: 'Weiterlesen →';
}

.archive.category .entry-card:hover .entry-excerpt::after {
    color: var(--ot-red-dark);
    transform: translateX(3px);
}

/* ============================================
   META
============================================ */

.archive.category .entry-card .entry-meta {
    order: 4;
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    margin: 0 !important;
    padding: 18px 26px 26px !important;

    color: var(--ot-ink-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.archive.category .entry-card .entry-meta li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.archive.category .entry-card .entry-meta li:not(:last-child)::after {
    content: '/';
    margin-left: 8px;
    color: var(--ot-red);
    opacity: 0.75;
}

.archive.category .entry-card .entry-meta a,
.archive.category .entry-card .entry-meta time {
    color: inherit;
    text-decoration: none;
}

.archive.category .entry-card .entry-meta a:hover {
    color: var(--ot-red);
}

.archive.category .entry-card .entry-meta .meta-author::before {
    content: '\f007';
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    color: var(--ot-red);
    font-size: 11px;
}

.archive.category .entry-card .entry-meta .meta-date::before {
    content: '\f073';
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    color: var(--ot-red);
    font-size: 11px;
}

/* ============================================
   OPTIONAL DATE PILL OVER IMAGE
   Uncomment this block if you prefer the date like your custom blog cards.
============================================ */

/*
.archive.category .entry-card {
    position: relative;
}

.archive.category .entry-card .entry-meta .meta-date {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 100px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    color: var(--ot-ink-2);
}

.archive.category .entry-card .entry-meta .meta-date::after {
    display: none;
}
*/

/* ============================================
   PAGINATION
============================================ */

.archive.category .ct-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 56px;
    flex-wrap: wrap;
}

.archive.category .ct-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 42px;
    height: 42px;
    padding: 0 12px;

    border-radius: 12px;
    background: var(--ot-surface);
    border: 1px solid var(--ot-line);
    color: var(--ot-ink-2);

    font-weight: 600;
    font-size: 14px;
    text-decoration: none;

    transition: all 0.3s var(--ot-ease);
    box-shadow: var(--ot-shadow-sm);
}

.archive.category .ct-pagination a.page-numbers:hover {
    border-color: var(--ot-red);
    color: var(--ot-red);
    transform: translateY(-2px);
    box-shadow: var(--ot-shadow-md);
}

.archive.category .ct-pagination .page-numbers.current {
    background: linear-gradient(135deg, var(--ot-red), var(--ot-red-dark));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--ot-shadow-red);
}

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

@media (max-width: 1024px) {
    .archive.category .entries[data-archive="default"][data-layout="grid"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }
}

@media (max-width: 640px) {
    .archive.category .ct-container[data-vertical-spacing]>section {
        padding: 48px 20px 60px;
    }

    .archive.category .hero-section[data-type="type-1"] {
        margin-bottom: 30px;
    }

    .archive.category .hero-section[data-type="type-1"] .entry-header::after {
        font-size: 15px;
    }

    .archive.category .entries[data-archive="default"][data-layout="grid"] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .archive.category .entry-card .entry-title {
        padding: 22px 22px 0 !important;
        font-size: 18px;
    }

    .archive.category .entry-card .entry-excerpt {
        padding: 10px 22px 0 !important;
    }

    .archive.category .entry-card .entry-meta {
        padding: 18px 22px 22px !important;
    }

    .archive.category .ct-pagination {
        margin-top: 40px;
        gap: 6px;
    }

    .archive.category .ct-pagination .page-numbers {
        min-width: 38px;
        height: 38px;
        font-size: 13px;
    }
}

/* Hide author + remove slash after author on category cards */
.archive.category .entry-card .entry-meta .meta-author {
    display: none !important;
}

/* Remove separator slash from hidden author */
.archive.category .entry-card .entry-meta .meta-author::after {
    display: none !important;
}

/* If date is now the first visible meta item, make it clean */
.archive.category .entry-card .entry-meta .meta-date::after {
    display: none !important;
}

/* Remove fake Weiterlesen link from category cards */
.archive.category .entry-card .entry-excerpt::after {
    content: none !important;
    display: none !important;
}

/* ============================================
   LEGAL PAGES (Datenschutz, Rückerstattung, etc.)
   Append to child.css
============================================ */

/* HERO */
.ot-legal-hero {
    padding: var(--ot-header-pad) 0 50px;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, var(--ot-red-glow), transparent 60%),
        var(--ot-bg);
    position: relative;
    text-align: center;
}

.ot-legal-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(15, 20, 25, 0.06) 1px, transparent 0);
    background-size: 32px 32px;
    mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
    pointer-events: none;
    opacity: 0.5;
}

.ot-legal-hero>* {
    position: relative;
    z-index: 1;
}

.ot-legal-hero__title {
    font-family: var(--ot-font-display);
    font-size: clamp(30px, 4.5vw, 48px);
    margin: 0 0 14px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ot-ink);
    line-height: 1.15;
}

.ot-legal-hero__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ot-ink-3);
    margin: 0;
    font-weight: 500;
}

.ot-legal-hero__meta i {
    color: var(--ot-red);
    font-size: 12px;
}

/* CONTENT WRAPPER */
.ot-legal-content {
    padding: 0 0 90px;
    background: var(--ot-bg);
}

/* ARTICLE CARD */
.ot-legal-article {
    background: var(--ot-surface);
    border: 1px solid var(--ot-line);
    border-radius: var(--ot-radius-lg);
    padding: clamp(32px, 5vw, 56px);
    box-shadow: var(--ot-shadow-sm);
    color: var(--ot-ink-2);
    font-size: 15.5px;
    line-height: 1.8;
}

/* Intro paragraph — slightly larger, more emphasis */
.ot-legal-article .ot-legal-intro {
    font-size: 17px;
    line-height: 1.7;
    color: var(--ot-ink);
    margin: 0 0 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--ot-line);
    font-weight: 500;
}

/* Headings */
.ot-legal-article h2 {
    font-family: var(--ot-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--ot-ink);
    margin: 40px 0 14px;
    letter-spacing: -0.01em;
    line-height: 1.3;
    position: relative;
    padding-left: 18px;
}

.ot-legal-article h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 4px;
    background: linear-gradient(180deg, var(--ot-red), var(--ot-red-dark));
    border-radius: 2px;
}

.ot-legal-article h2:first-child {
    margin-top: 0;
}

.ot-legal-article h3 {
    font-family: var(--ot-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--ot-ink);
    margin: 28px 0 10px;
    letter-spacing: -0.01em;
}

/* Paragraphs */
.ot-legal-article p {
    margin: 0 0 16px;
    color: var(--ot-ink-2);
}

.ot-legal-article p strong {
    color: var(--ot-ink);
    font-weight: 600;
}

/* Lists */
.ot-legal-article ul,
.ot-legal-article ol {
    margin: 0 0 20px;
    padding-left: 4px;
    list-style: none;
}

.ot-legal-article ul li,
.ot-legal-article ol li {
    position: relative;
    padding: 4px 0 4px 28px;
    color: var(--ot-ink-2);
}

.ot-legal-article ul li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 14px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ot-red);
}

.ot-legal-article ol {
    counter-reset: legal-list;
}

.ot-legal-article ol li {
    counter-increment: legal-list;
}

.ot-legal-article ol li::before {
    content: counter(legal-list);
    position: absolute;
    left: 0;
    top: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ot-red-soft);
    color: var(--ot-red);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ot-legal-article li strong {
    color: var(--ot-ink);
    font-weight: 600;
}

/* Links */
.ot-legal-article a {
    color: var(--ot-red);
    text-decoration: none;
    background-image: linear-gradient(var(--ot-red), var(--ot-red));
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.3s var(--ot-ease), color 0.3s var(--ot-ease);
    font-weight: 500;
}

.ot-legal-article a:hover {
    color: var(--ot-red-dark);
    background-size: 100% 2px;
}

/* HIGHLIGHT BOX (e.g. the "satisfaction guarantee" callout) */
.ot-legal-highlight {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
    background: linear-gradient(135deg, var(--ot-red-soft), #fff);
    border: 1px solid var(--ot-red-glow);
    border-radius: var(--ot-radius);
    margin: 0 0 32px;
}

.ot-legal-highlight i {
    flex-shrink: 0;
    font-size: 24px;
    color: var(--ot-red);
    margin-top: 2px;
}

.ot-legal-highlight strong {
    display: block;
    font-family: var(--ot-font-display);
    font-size: 16px;
    color: var(--ot-ink);
    margin-bottom: 4px;
    font-weight: 700;
}

.ot-legal-highlight p {
    margin: 0;
    font-size: 14.5px;
    color: var(--ot-ink-3);
}

/* CONTACT BOX at the bottom */
.ot-legal-contact-box {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-top: 40px;
    padding: 26px 28px;
    background: linear-gradient(135deg, #0d1f17, #0a1410);
    border: 1px solid rgba(37, 211, 102, 0.25);
    border-radius: var(--ot-radius-lg);
    color: #fff;
}

.ot-legal-contact-box>i {
    flex-shrink: 0;
    font-size: 36px;
    color: var(--ot-wa-green);
    margin-top: 4px;
}

.ot-legal-contact-box h3 {
    font-family: var(--ot-font-display);
    font-size: 18px;
    color: #fff;
    margin: 0 0 6px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ot-legal-contact-box p {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 1.6;
}

.ot-legal-contact-box a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--ot-wa-green), var(--ot-wa-green-dark));
    color: #fff;
    font-weight: 600;
    font-size: 13.5px;
    border-radius: 100px;
    text-decoration: none;
    background-image: linear-gradient(135deg, var(--ot-wa-green), var(--ot-wa-green-dark));
    background-size: 100% 100%;
    transition: all 0.3s var(--ot-ease);
    box-shadow: var(--ot-shadow-wa);
}

.ot-legal-contact-box a:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -8px rgba(37, 211, 102, 0.6);
    background-size: 100% 100%;
}

/* BACK LINK */
.ot-legal-back {
    text-align: center;
    margin-top: 36px;
}

.ot-legal-back__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    color: var(--ot-ink-3);
    background: transparent;
    border: 1px solid var(--ot-line-strong);
    border-radius: 100px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s var(--ot-ease);
}

.ot-legal-back__link:hover {
    color: var(--ot-red);
    border-color: var(--ot-red);
    transform: translateY(-2px);
    box-shadow: var(--ot-shadow-md);
}

.ot-legal-back__link i {
    transition: transform 0.3s var(--ot-ease);
}

.ot-legal-back__link:hover i {
    transform: translateX(-3px);
}

/* RESPONSIVE */
@media (max-width: 640px) {
    .ot-legal-hero {
        padding-bottom: 40px;
    }

    .ot-legal-content {
        padding-bottom: 60px;
    }

    .ot-legal-article {
        padding: 28px 22px;
        font-size: 15px;
    }

    .ot-legal-article .ot-legal-intro {
        font-size: 15.5px;
    }

    .ot-legal-article h2 {
        font-size: 19px;
        margin-top: 32px;
    }

    .ot-legal-contact-box {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 24px 22px;
    }

    .ot-legal-highlight {
        padding: 18px 20px;
    }
}

/* ============================================
   INSTALLATION GUIDE PAGE
   Template: page-installation.php
============================================ */

.ot-install-page {
    background: var(--ot-bg);
}

/* HERO */
.ot-install-hero {
    padding: var(--ot-header-pad) 0 62px;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, var(--ot-red-glow), transparent 60%),
        var(--ot-bg);
    position: relative;
    text-align: center;
    overflow: hidden;
}

.ot-install-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(15, 20, 25, 0.06) 1px, transparent 0);
    background-size: 32px 32px;
    mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
    pointer-events: none;
    opacity: 0.5;
}

.ot-install-hero>* {
    position: relative;
    z-index: 1;
}

.ot-install-hero__title {
    font-size: clamp(34px, 5vw, 56px);
    margin: 0 0 16px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.ot-install-hero__subtitle {
    font-size: clamp(15px, 1.4vw, 17px);
    color: var(--ot-ink-3);
    margin: 0 auto;
    max-width: 760px;
    line-height: 1.75;
}

.ot-install-hero__actions {
    margin-top: 28px;
}

/* BREADCRUMBS */
.ot-install-page .ot-breadcrumbs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 13px;
    color: var(--ot-ink-3);
}

.ot-install-page .ot-breadcrumbs a {
    color: var(--ot-ink-3);
    text-decoration: none;
    transition: color 0.3s var(--ot-ease);
}

.ot-install-page .ot-breadcrumbs a:hover {
    color: var(--ot-red);
}

.ot-install-page .ot-breadcrumbs__sep {
    font-size: 9px;
    opacity: 0.5;
}

.ot-install-page .ot-breadcrumbs__current {
    color: var(--ot-ink);
    font-weight: 600;
}

/* INTRO */
.ot-install-intro {
    padding: 0 0 70px;
    background: var(--ot-bg);
}

.ot-install-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: flex-start;
    background: var(--ot-surface);
    border: 1px solid var(--ot-line);
    border-radius: var(--ot-radius-lg);
    padding: 30px;
    box-shadow: var(--ot-shadow-sm);
    margin-top: -28px;
    position: relative;
    z-index: 3;
}

.ot-install-note__icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--ot-red-soft), #fff);
    color: var(--ot-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: inset 0 0 0 1px var(--ot-red-glow);
}

.ot-install-note h2 {
    margin: 0 0 8px;
    font-size: 24px;
}

.ot-install-note p {
    margin: 0;
    color: var(--ot-ink-3);
    line-height: 1.75;
    font-size: 15px;
}

/* DEVICE PILLS */
.ot-install-devices {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-top: 24px;
}

.ot-install-device {
    background: var(--ot-surface);
    border: 1px solid var(--ot-line);
    border-radius: var(--ot-radius);
    padding: 18px 12px;
    text-align: center;
    box-shadow: var(--ot-shadow-sm);
    transition: all 0.35s var(--ot-ease);
}

.ot-install-device:hover {
    transform: translateY(-4px);
    border-color: var(--ot-red);
    box-shadow: var(--ot-shadow-md);
}

.ot-install-device i {
    display: block;
    color: var(--ot-red);
    font-size: 24px;
    margin-bottom: 8px;
}

.ot-install-device span {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ot-ink);
}

/* GUIDE SECTION */
.ot-install-guide {
    padding: 70px 0;
    background: var(--ot-bg-alt);
}

.ot-install-accordion {
    gap: 14px;
}

/* ACCORDION ITEMS */
.ot-install-acc {
    border-radius: var(--ot-radius-lg);
    box-shadow: var(--ot-shadow-sm);
}

.ot-install-acc summary {
    padding: 20px 24px;
    font-family: var(--ot-font-display);
    font-size: 16px;
    font-weight: 700;
}

.ot-install-acc summary span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ot-install-acc summary i {
    width: 22px;
    color: var(--ot-red);
    text-align: center;
}

.ot-install-acc[open] {
    box-shadow: var(--ot-shadow-lg);
}

.ot-install-acc[open] summary {
    border-bottom: 1px solid var(--ot-line);
}

/* BODY */
.ot-install-acc .ot-acc-body {
    padding: 24px;
    font-size: 15px;
    line-height: 1.75;
}

.ot-install-acc .ot-acc-body p {
    margin: 0 0 16px;
}

.ot-install-acc .ot-acc-body p:last-child {
    margin-bottom: 0;
}

.ot-install-acc .ot-acc-body h3 {
    font-size: 20px;
    margin: 26px 0 12px;
    color: var(--ot-ink);
}

.ot-install-acc .ot-acc-body h3:first-child {
    margin-top: 0;
}

.ot-install-acc .ot-acc-body strong {
    color: var(--ot-ink);
}

/* LISTS */
.ot-install-list,
.ot-install-bullets {
    margin: 0 0 20px;
    padding-left: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.ot-install-list {
    counter-reset: ot-install-step;
}

.ot-install-list li,
.ot-install-bullets li {
    position: relative;
    padding: 12px 14px 12px 48px;
    background: var(--ot-bg);
    border: 1px solid var(--ot-line);
    border-radius: 14px;
    color: var(--ot-ink-2);
}

.ot-install-list li::before {
    counter-increment: ot-install-step;
    content: counter(ot-install-step);
    position: absolute;
    top: 11px;
    left: 13px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ot-red), var(--ot-red-dark));
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ot-install-bullets li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 13px;
    left: 16px;
    color: var(--ot-red);
    font-size: 12px;
}

/* HELP BOX */
.ot-install-help {
    margin-top: 18px;
    padding: 18px 20px;
    background:
        radial-gradient(ellipse 80% 120% at 0% 0%, var(--ot-red-glow), transparent 60%),
        var(--ot-surface);
    border: 1px solid var(--ot-line);
    border-left: 4px solid var(--ot-red);
    border-radius: var(--ot-radius);
    color: var(--ot-ink-2);
    box-shadow: var(--ot-shadow-sm);
}

.ot-install-help a {
    color: var(--ot-red);
    font-weight: 700;
    text-decoration: none;
    background-image: linear-gradient(var(--ot-red), var(--ot-red));
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 100%;
}

.ot-install-help a:hover {
    color: var(--ot-red-dark);
}

/* FINAL DEVICE BOX */
.ot-install-final {
    text-align: center;
    padding: 14px 0 4px;
}

.ot-install-final h3 {
    font-size: clamp(24px, 3vw, 34px);
    margin: 0 0 12px !important;
}

.ot-install-final p {
    max-width: 560px;
    margin: 0 auto 22px !important;
    color: var(--ot-ink-3);
}

/* CTA */
.ot-install-cta {
    padding: 70px 0;
    background: var(--ot-bg);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .ot-install-devices {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 760px) {
    .ot-install-note {
        grid-template-columns: 1fr;
        padding: 24px;
        text-align: left;
    }

    .ot-install-devices {
        grid-template-columns: repeat(2, 1fr);
    }

    .ot-install-acc summary {
        padding: 18px 20px;
    }

    .ot-install-acc .ot-acc-body {
        padding: 20px;
    }

    .ot-install-cta .ot-cta-banner__inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px;
    }
}

@media (max-width: 520px) {
    .ot-install-hero {
        padding-bottom: 52px;
    }

    .ot-install-intro {
        padding-bottom: 54px;
    }

    .ot-install-guide,
    .ot-install-cta {
        padding: 56px 0;
    }

    .ot-install-devices {
        grid-template-columns: 1fr;
    }

    .ot-install-list li,
    .ot-install-bullets li {
        padding-right: 12px;
    }
}