/* =============================================================================
   Detector de Bulos — Landing Page Stylesheet
   Mobile-first. No external dependencies.
   Scroll-driven animations with IntersectionObserver fallback.
   Respects prefers-reduced-motion.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. CSS Custom Properties
   --------------------------------------------------------------------------- */

:root {
    /* Hell palette */
    --ddb-hell-bg:      #0a0500;
    --ddb-hell-mid:     #180c04;
    --ddb-hell-primary: #c0392b;
    --ddb-hell-accent:  #e67e22;
    --ddb-hell-text:    #f5f0eb;
    --ddb-hell-muted:   rgba(245, 240, 235, 0.65);

    /* Paradise palette */
    --ddb-paradise-bg:    #e8f5e9;
    --ddb-paradise-mid:   #d0ecf5;
    --ddb-paradise-green: #27ae60;
    --ddb-paradise-sky:   #2980b9;
    --ddb-paradise-gold:  #f39c12;
    --ddb-paradise-text:  #1a2035;
    --ddb-paradise-muted: rgba(26, 32, 53, 0.65);

    /* Shared brand */
    --ddb-brand:      #e74c3c;
    --ddb-brand-dark: #922b21;

    /* Fluid type */
    --ddb-text-sm:   clamp(0.875rem, 1.5vw, 1rem);
    --ddb-text-base: clamp(1rem,     1.5vw, 1.125rem);
    --ddb-text-lg:   clamp(1.125rem, 2vw,   1.375rem);
    --ddb-text-xl:   clamp(1.375rem, 3vw,   2rem);
    --ddb-text-2xl:  clamp(1.75rem,  4vw,   2.75rem);
    --ddb-text-hero: clamp(2.25rem,  6vw,   4.5rem);

    /* Spacing */
    --ddb-gap:    clamp(1.25rem, 3vw, 2.5rem);
    --ddb-gap-sm: clamp(0.75rem, 2vw, 1.25rem);

    /* Radii */
    --ddb-radius:    12px;
    --ddb-radius-sm: 6px;

    /* Scroll progress (updated by JS) */
    --ddb-progress: 0;

    /* Transitions */
    --ddb-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------------------
   2. Reset / base for the landing wrapper
   --------------------------------------------------------------------------- */

.ddb-landing,
.ddb-landing * {
    box-sizing: border-box;
}

.ddb-landing {
    position: relative;
    overflow-x: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: var(--ddb-text-base);
    line-height: 1.6;
    color: var(--ddb-hell-text);
}

.ddb-main-wrapper {
    padding: 0 !important;
    max-width: none !important;
}

/* Fixed background layers — z-index below content */
.ddb-bg-hell {
    position: fixed;
    inset: 0;
    background: var(--ddb-hell-bg);
    z-index: -2;
    pointer-events: none;
}

.ddb-bg-paradise {
    position: fixed;
    inset: 0;
    background: var(--ddb-paradise-bg);
    opacity: var(--ddb-progress);
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.05s linear;
}

/* Container */
.ddb-container {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 5vw, 2.5rem);
}

/* ---------------------------------------------------------------------------
   3. Language switcher
   --------------------------------------------------------------------------- */

.ddb-lang-switcher {
    position: fixed;
    top: clamp(0.75rem, 2vw, 1.25rem);
    right: clamp(0.75rem, 3vw, 2rem);
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(10, 5, 0, 0.85); /* increased opacity for WCAG AA contrast */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(192, 57, 43, 0.3);
}

.ddb-lang-btn {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: var(--ddb-hell-muted);
    padding: 0.15rem 0.25rem;
    transition: color 0.2s;
}

.ddb-lang-btn:hover,
.ddb-lang-btn.ddb-lang-active {
    color: var(--ddb-hell-text);
}

.ddb-lang-btn.ddb-lang-active {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ddb-lang-sep {
    color: rgba(245, 240, 235, 0.3);
    font-size: 0.75rem;
}

/* ---------------------------------------------------------------------------
   4. Section base
   --------------------------------------------------------------------------- */

.ddb-section {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding-block: clamp(4rem, 10vh, 7rem);
}

.ddb-section__h2 {
    font-size: var(--ddb-text-2xl);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 var(--ddb-gap-sm);
    color: var(--ddb-hell-text);
}

.ddb-section__h2--light {
    color: var(--ddb-paradise-text);
}

.ddb-section__subtitle {
    font-size: var(--ddb-text-lg);
    line-height: 1.55;
    color: var(--ddb-hell-muted);
    max-width: 680px;
    margin: 0 auto var(--ddb-gap);
}

.ddb-section__subtitle--light {
    color: var(--ddb-paradise-muted);
}

/* ---------------------------------------------------------------------------
   5. HERO
   --------------------------------------------------------------------------- */

.ddb-hero {
    background: transparent;
    text-align: center;
    min-height: 100svh;
    justify-content: center;
}

/* Cracked glass SVG */
.ddb-cracks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

/* Chaos icons */
.ddb-chaos-icons {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.ddb-icon {
    position: absolute;
    font-size: clamp(1.5rem, 4vw, 3rem);
    opacity: 0;
    animation: ddb-icon-float 8s var(--ddb-ease) infinite;
    animation-fill-mode: both;
}

.ddb-icon--1 { top: 12%; left: 8%;    animation-delay: 0s;   animation-duration: 9s;  }
.ddb-icon--2 { top: 20%; right: 10%;  animation-delay: 1s;   animation-duration: 7s;  }
.ddb-icon--3 { top: 65%; left: 5%;    animation-delay: 2s;   animation-duration: 11s; }
.ddb-icon--4 { top: 75%; right: 8%;   animation-delay: 0.5s; animation-duration: 8s;  }
.ddb-icon--5 { top: 40%; left: 3%;    animation-delay: 3s;   animation-duration: 10s; }
.ddb-icon--6 { top: 55%; right: 5%;   animation-delay: 1.5s; animation-duration: 9s;  }
.ddb-icon--7 { top: 30%; left: 15%;   animation-delay: 2.5s; animation-duration: 6s;  }
.ddb-icon--8 { top: 80%; left: 20%;   animation-delay: 4s;   animation-duration: 12s; }

@keyframes ddb-icon-float {
    0%   { opacity: 0;    transform: translateY(0)     rotate(0deg);   }
    15%  { opacity: 0.55; }
    50%  { opacity: 0.4;  transform: translateY(-20px) rotate(8deg);   }
    85%  { opacity: 0.55; }
    100% { opacity: 0;    transform: translateY(10px)  rotate(-5deg);  }
}

/* Hero content */
.ddb-hero__content {
    position: relative;
    z-index: 2;
}

.ddb-badge {
    display: inline-block;
    font-size: var(--ddb-text-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ddb-hell-accent);
    border: 1px solid rgba(230, 126, 34, 0.4);
    padding: 0.35rem 1rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
}

/* Glitch headline */
.ddb-hero__title {
    font-size: var(--ddb-text-hero);
    font-weight: 900;
    line-height: 1.05;
    margin: 0 auto 1.5rem;
    max-width: 16ch;
    color: var(--ddb-hell-text);
    text-shadow: 0 0 40px rgba(192, 57, 43, 0.4);
}

.ddb-glitch {
    position: relative;
}

.ddb-glitch::before,
.ddb-glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ddb-glitch::before {
    color: #ff3020;
    animation: ddb-glitch-a 4s infinite;
    animation-timing-function: steps(1);
}

.ddb-glitch::after {
    color: #00e5ff;
    animation: ddb-glitch-b 4s infinite;
    animation-timing-function: steps(1);
}

@keyframes ddb-glitch-a {
    0%, 90%, 100% { clip-path: none;                      transform: none;         }
    91%            { clip-path: inset(5%  0 90% 0);       transform: translateX(-3px); }
    92%            { clip-path: inset(40% 0 55% 0);       transform: translateX(3px);  }
    93%            { clip-path: inset(70% 0 20% 0);       transform: translateX(-2px); }
    94%            { clip-path: none;                      transform: none;         }
}

@keyframes ddb-glitch-b {
    0%, 90%, 100% { clip-path: none;                      transform: none;         }
    91%            { clip-path: inset(25% 0 70% 0);       transform: translateX(3px);  }
    92%            { clip-path: inset(60% 0 30% 0);       transform: translateX(-3px); }
    93%            { clip-path: inset(10% 0 85% 0);       transform: translateX(2px);  }
    94%            { clip-path: none;                      transform: none;         }
}

.ddb-hero__subtitle {
    font-size: var(--ddb-text-lg);
    color: var(--ddb-hell-muted);
    max-width: 560px;
    margin: 0 auto 2.5rem;
}

/* CTA buttons */
.ddb-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

/* Scroll hint */
.ddb-scroll-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--ddb-hell-muted);
    text-decoration: none;
    font-size: var(--ddb-text-sm);
    animation: ddb-scroll-bounce 2s ease-in-out infinite;
    z-index: 2;
}

.ddb-scroll-hint__label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@keyframes ddb-scroll-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}

/* ---------------------------------------------------------------------------
   6. HELL 2 — Floating fake headlines
   --------------------------------------------------------------------------- */

.ddb-hell-2 {
    background: transparent;
    text-align: center;
}

.ddb-hell-2 .ddb-container {
    position: relative;
    z-index: 2;
}

.ddb-headlines-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.ddb-fake-headline {
    position: absolute;
    font-size: clamp(0.7rem, 1.5vw, 0.95rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(192, 57, 43, 0.55);
    max-width: 28ch;
    line-height: 1.3;
    animation: ddb-headline-drift var(--ddb-hl-speed, 7s) ease-in-out infinite alternate;
    animation-delay: var(--ddb-hl-delay, 0s);
    background: rgba(10, 5, 0, 0.3);
    border: 1px solid rgba(192, 57, 43, 0.2);
    border-radius: var(--ddb-radius-sm);
    padding: 0.4rem 0.75rem;
}

/* Positioning for each headline */
.ddb-fake-headline--1 { top: 5%;  left: 2%;   transform: rotate(-3deg); }
.ddb-fake-headline--2 { top: 8%;  right: 3%;  transform: rotate(2deg);  }
.ddb-fake-headline--3 { top: 40%; left: 1%;   transform: rotate(-1deg); }
.ddb-fake-headline--4 { top: 55%; right: 2%;  transform: rotate(3deg);  }
.ddb-fake-headline--5 { bottom: 10%; left: 3%;  transform: rotate(-2deg);}
.ddb-fake-headline--6 { bottom: 8%;  right: 3%; transform: rotate(1deg); }

@keyframes ddb-headline-drift {
    0%   { transform: rotate(var(--rot, -2deg)) translateX(0);    opacity: 0.6; }
    100% { transform: rotate(calc(var(--rot, -2deg) * -1)) translateX(12px); opacity: 0.35; }
}

/* ---------------------------------------------------------------------------
   7. HELL 3 — Children and fear
   --------------------------------------------------------------------------- */

.ddb-hell-3 {
    background: linear-gradient(180deg, transparent 0%, rgba(5, 2, 0, 0.6) 100%);
    text-align: center;
}

.ddb-hell-3__bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 0;
    opacity: 0.35;
}

.ddb-child-silhouette {
    width: clamp(180px, 35vw, 320px);
    height: auto;
}

.ddb-hell-3__content {
    position: relative;
    z-index: 2;
}

.ddb-hell-3 .ddb-section__h2 {
    color: #f5e0dc;
    text-shadow: 0 0 60px rgba(192, 57, 43, 0.6);
}

/* ---------------------------------------------------------------------------
   8. TRANSITION
   --------------------------------------------------------------------------- */

.ddb-transition {
    background: linear-gradient(180deg,
        rgba(5, 2, 0, 0.4) 0%,
        rgba(39, 174, 96, 0.08) 100%
    );
    text-align: center;
}

.ddb-transition__content {
    position: relative;
    z-index: 2;
}

.ddb-cracks-healing {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    animation: ddb-crack-heal 3s ease-out forwards;
}

@keyframes ddb-crack-heal {
    0%   { opacity: 0.8; stroke-dashoffset: 0; }
    100% { opacity: 0;   stroke-dashoffset: 100; }
}

/* Extension mockup */
.ddb-ext-mockup {
    margin: 2rem auto 0;
    max-width: 540px;
}

.ddb-ext-mockup__browser {
    background: #1a1a2e;
    border-radius: var(--ddb-radius);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6),
                0 0  0 1px rgba(255,255,255,0.06);
}

.ddb-browser-bar {
    background: #12121f;
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ddb-browser-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ddb-browser-dot--red { background: #ff5f57; }
.ddb-browser-dot--yel { background: #febc2e; }
.ddb-browser-dot--grn { background: #28c840; }

.ddb-browser-address {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.35);
    margin-left: 0.5rem;
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ddb-browser-content {
    padding: 1.25rem 1.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ddb-line {
    height: 10px;
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
}
.ddb-line--h     { width: 60%; height: 16px; }
.ddb-line--p     { width: 100%; }
.ddb-line--short { width: 75%; }

/* Overlay (extension UI) */
.ddb-ext-overlay {
    margin: 0 1rem 1rem;
    border-radius: var(--ddb-radius-sm);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}

.ddb-ext-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #22223a;
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}

/* Verdict states use max-height instead of display to avoid CSS Animations Level 2
   (Chrome <116 / Firefox <117 / Safari <17.4 silently ignore display in keyframes). */
.ddb-ext-verdict {
    padding-inline: 1rem;
    padding-block: 0;       /* collapses to 0 height when hidden */
    font-weight: 700;
    font-size: var(--ddb-text-sm);
    display: flex;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}

.ddb-ext-verdict--analyzing {
    max-height: 100px;      /* revealed by default; keyframe hides it */
    padding-block: 0.75rem;
    opacity: 1;
    background: rgba(41,128,185,0.15);
    color: #74b9ff;
    animation: ddb-verdict-analyzing 1s ease-out 0.5s forwards;
}

.ddb-ext-verdict--fake {
    background: rgba(192, 57, 43, 0.2);
    color: #ff6b6b;
    animation: ddb-verdict-show 0.5s ease-out 2s forwards;
}

.ddb-ext-verdict--true {
    background: rgba(39, 174, 96, 0.2);
    color: #55efc4;
    animation: ddb-verdict-show 0.5s ease-out 4s forwards;
}

@keyframes ddb-verdict-analyzing {
    0%   { opacity: 1; max-height: 100px; padding-block: 0.75rem; }
    100% { opacity: 0; max-height: 0;     padding-block: 0; }
}

@keyframes ddb-verdict-show {
    0%   { opacity: 0; max-height: 0;     padding-block: 0; }
    2%   {             max-height: 100px; padding-block: 0.75rem; }
    100% { opacity: 1; max-height: 100px; padding-block: 0.75rem; }
}

.ddb-verdict-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---------------------------------------------------------------------------
   9. PARADISE
   --------------------------------------------------------------------------- */

.ddb-paradise {
    background: var(--ddb-paradise-bg); /* no-JS fallback; JS-driven fixed overlay still works on top */
    text-align: center;
    min-height: 100svh;
    overflow: visible;
}

.ddb-paradise__content {
    position: relative;
    z-index: 2;
}

.ddb-paradise .ddb-section__h2 {
    color: var(--ddb-paradise-text);
    text-shadow: none;
}

.ddb-paradise .ddb-section__subtitle {
    color: var(--ddb-paradise-muted);
}

/* Paradise scene (decorative elements) */
.ddb-paradise-scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

/* Flowers */
.ddb-flower {
    position: absolute;
    bottom: -10px;
    transform-origin: bottom center;
}

.ddb-flower__svg {
    width: clamp(50px, 8vw, 90px);
    height: auto;
    transform-origin: bottom center;
    transform: scaleY(0);
    animation: ddb-flower-grow 1.6s var(--ddb-ease) forwards;
}

.ddb-flower--1 { left: 3%;  animation-delay: 0.2s; }
.ddb-flower--2 { left: 14%; animation-delay: 0.5s; }
.ddb-flower--3 { left: 27%; animation-delay: 0.8s; }
.ddb-flower--4 { right: 14%; animation-delay: 0.4s; }
.ddb-flower--5 { right: 3%;  animation-delay: 0.7s; }

.ddb-flower--1 .ddb-flower__svg,
.ddb-flower--2 .ddb-flower__svg,
.ddb-flower--3 .ddb-flower__svg,
.ddb-flower--4 .ddb-flower__svg,
.ddb-flower--5 .ddb-flower__svg {
    animation-delay: inherit;
}

@keyframes ddb-flower-grow {
    0%   { transform: scaleY(0) scaleX(0.8); opacity: 0;   }
    60%  { transform: scaleY(1.08) scaleX(1); opacity: 1;  }
    80%  { transform: scaleY(0.97) scaleX(1); }
    100% { transform: scaleY(1)  scaleX(1);  opacity: 1;   }
}

/* Birds */
.ddb-bird {
    position: absolute;
}

.ddb-bird__svg {
    width: clamp(30px, 5vw, 60px);
    height: auto;
}

.ddb-bird--1 {
    top: 20%;
    animation: ddb-bird-fly 14s linear infinite;
    animation-delay: 0s;
}
.ddb-bird--2 {
    top: 35%;
    animation: ddb-bird-fly 18s linear infinite;
    animation-delay: 6s;
}

@keyframes ddb-bird-fly {
    0%   { transform: translateX(-150px); opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { transform: translateX(calc(100vw + 150px)); opacity: 0; }
}

/* Butterflies */
.ddb-butterfly {
    position: absolute;
}

.ddb-butterfly__svg {
    width: clamp(40px, 6vw, 80px);
    height: auto;
}

.ddb-butterfly--1 {
    top: 15%;
    left: 60%;
    animation: ddb-butterfly-float 8s ease-in-out infinite;
    animation-delay: 0.5s;
}
.ddb-butterfly--2 {
    top: 50%;
    left: 75%;
    animation: ddb-butterfly-float 10s ease-in-out infinite;
    animation-delay: 3s;
}

@keyframes ddb-butterfly-float {
    0%   { transform: translate(0, 0)    rotate(0deg);  }
    25%  { transform: translate(-15px,-20px) rotate(-8deg); }
    50%  { transform: translate(-5px,-35px)  rotate(5deg);  }
    75%  { transform: translate(10px,-20px)  rotate(-5deg); }
    100% { transform: translate(0, 0)    rotate(0deg);  }
}

/* Happy faces */
.ddb-happy-face {
    position: absolute;
    opacity: 0;
    transform: scale(0.5);
    animation: ddb-face-pop 0.6s var(--ddb-ease) forwards;
}

.ddb-happy-face__svg {
    width: clamp(40px, 6vw, 70px);
    height: auto;
}

.ddb-happy-face--1 { top: 25%; left: 42%;  animation-delay: 0.3s; }
.ddb-happy-face--2 { top: 55%; left: 50%;  animation-delay: 0.8s; }
.ddb-happy-face--3 { top: 30%; right: 38%; animation-delay: 1.2s; }

@keyframes ddb-face-pop {
    0%   { opacity: 0; transform: scale(0.4); }
    70%  { transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1);   }
}

/* ---------------------------------------------------------------------------
   10. FEATURES
   --------------------------------------------------------------------------- */

.ddb-features {
    background: rgba(232, 245, 233, 0.9);
    min-height: auto;
    padding-block: clamp(4rem, 8vh, 6rem);
}

.ddb-features__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ddb-gap);
    margin-top: var(--ddb-gap);
}

@media (min-width: 640px) {
    .ddb-features__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ddb-feature-card {
    background: white;
    border-radius: var(--ddb-radius);
    padding: clamp(1.5rem, 3vw, 2rem);
    box-shadow: 0 2px 16px rgba(26, 32, 53, 0.08);
    transition: transform 0.25s var(--ddb-ease), box-shadow 0.25s var(--ddb-ease);
}

.ddb-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(26, 32, 53, 0.14);
}

.ddb-feature-card__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    color: var(--ddb-paradise-green);
}

.ddb-feature-card__icon svg {
    width: 48px;
    height: 48px;
}

.ddb-feature-card__title {
    font-size: var(--ddb-text-lg);
    font-weight: 700;
    color: var(--ddb-paradise-text);
    margin: 0 0 0.6rem;
}

.ddb-feature-card__desc {
    font-size: var(--ddb-text-sm);
    color: var(--ddb-paradise-muted);
    margin: 0;
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   11. PRICING
   --------------------------------------------------------------------------- */

.ddb-pricing {
    background: white;
    min-height: auto;
    padding-block: clamp(4rem, 8vh, 6rem);
    text-align: center;
}

.ddb-pricing__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ddb-gap);
    margin-top: var(--ddb-gap);
    align-items: stretch;
}

@media (min-width: 640px) {
    .ddb-pricing__grid {
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
    }
}

.ddb-plan {
    border-radius: var(--ddb-radius);
    padding: clamp(1.5rem, 3vw, 2rem);
    text-align: left;
    position: relative;
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
    transition: box-shadow 0.25s var(--ddb-ease), transform 0.25s var(--ddb-ease);
}

.ddb-plan--free {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.ddb-plan--pro {
    background: #f8fafc;
    border-color: var(--ddb-paradise-sky);
    box-shadow: 0 4px 24px rgba(41, 128, 185, 0.12);
}

.ddb-plan--familia {
    background: linear-gradient(135deg, #fffdf0 0%, #fff8e1 100%);
    border-color: var(--ddb-paradise-gold);
    box-shadow: 0 8px 40px rgba(243, 156, 18, 0.2);
}

.ddb-plan:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

.ddb-plan__badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ddb-paradise-gold);
    color: #1a1a00;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    white-space: nowrap;
}

.ddb-plan__name {
    font-size: var(--ddb-text-xl);
    font-weight: 800;
    color: var(--ddb-paradise-text);
    margin: 0 0 0.75rem;
}

.ddb-plan__price-block {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    margin-bottom: 0.25rem;
}

.ddb-plan__price {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 900;
    color: var(--ddb-paradise-text);
    line-height: 1;
}

.ddb-plan__period {
    font-size: var(--ddb-text-sm);
    color: var(--ddb-paradise-muted);
    font-weight: 500;
}

.ddb-plan__alt-price {
    font-size: 0.8rem;
    color: var(--ddb-paradise-muted);
    margin: 0 0 1rem;
}

.ddb-plan__byok {
    font-size: 0.75rem;
    color: var(--ddb-paradise-muted);
    font-style: italic;
    margin: 0 0 1rem;
}

.ddb-plan__features {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ddb-plan__features li {
    font-size: var(--ddb-text-sm);
    color: var(--ddb-paradise-text);
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
}

.ddb-plan__features li:has(> :first-child:is([data-unavail])),
.ddb-plan__features li:not([class*="avail"]) {
    color: #aaa;
}

/* Unavailable items (✗ prefix) get muted */
.ddb-plan__features li:nth-child(n):is(:has-text("✗")) {
    color: #bbb;
}

/* Simple approach: items starting with ✗ */
.ddb-plan__features li:where(:first-child + * + * + * + *) {
    color: inherit;
}

/* ---------------------------------------------------------------------------
   12. BUTTONS
   --------------------------------------------------------------------------- */

.ddb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: var(--ddb-text-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    padding: 0.75rem 1.75rem;
    border-radius: var(--ddb-radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s,
                transform 0.15s var(--ddb-ease), box-shadow 0.2s;
    white-space: nowrap;
}

.ddb-btn:focus-visible {
    outline: 3px solid var(--ddb-brand);
    outline-offset: 3px;
}

/* Primary (red) */
.ddb-btn--primary {
    background: var(--ddb-brand);
    color: white;
    border-color: var(--ddb-brand);
}
.ddb-btn--primary:hover {
    background: var(--ddb-brand-dark);
    border-color: var(--ddb-brand-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.35);
}

/* Ghost */
.ddb-btn--ghost {
    background: transparent;
    color: var(--ddb-hell-text);
    border-color: rgba(245, 240, 235, 0.35);
}
.ddb-btn--ghost:hover {
    border-color: var(--ddb-hell-text);
    background: rgba(245, 240, 235, 0.08);
}

/* Outline (for light backgrounds) */
.ddb-btn--outline {
    background: transparent;
    color: var(--ddb-paradise-text);
    border-color: #cbd5e0;
}
.ddb-btn--outline:hover {
    border-color: var(--ddb-paradise-sky);
    color: var(--ddb-paradise-sky);
}

/* Gold */
.ddb-btn--gold {
    background: var(--ddb-paradise-gold);
    color: #1a1a00;
    border-color: var(--ddb-paradise-gold);
}
.ddb-btn--gold:hover {
    background: #d68910;
    border-color: #d68910;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(243, 156, 18, 0.35);
}

/* XL variant */
.ddb-btn--xl {
    font-size: var(--ddb-text-lg);
    padding: 1rem 2.5rem;
}

/* In pricing cards, button stretches */
.ddb-plan .ddb-btn {
    width: 100%;
    margin-top: auto;
}

/* ---------------------------------------------------------------------------
   13. TRUST
   --------------------------------------------------------------------------- */

.ddb-trust {
    background: var(--ddb-paradise-bg); /* no-JS fallback; was rgba(26,32,53,0.04) = near-transparent over hell bg */
    min-height: auto;
    padding-block: clamp(4rem, 8vh, 6rem);
    text-align: center;
}

.ddb-trust__list {
    list-style: none;
    margin: var(--ddb-gap) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ddb-gap-sm);
    max-width: 720px;
    margin-inline: auto;
}

.ddb-trust__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: white;
    border-radius: var(--ddb-radius);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 12px rgba(26,32,53,0.06);
    text-align: left;
}

.ddb-trust__icon {
    font-size: 1.75rem;
    flex-shrink: 0;
    line-height: 1;
}

.ddb-trust__text {
    margin: 0;
    font-size: var(--ddb-text-sm);
    color: var(--ddb-paradise-text);
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   14. FAQ
   --------------------------------------------------------------------------- */

.ddb-faq {
    background: white;
    min-height: auto;
    padding-block: clamp(4rem, 8vh, 6rem);
}

.ddb-faq__list {
    margin-top: var(--ddb-gap);
    max-width: 760px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ddb-faq__item {
    border: 1px solid #e2e8f0;
    border-radius: var(--ddb-radius-sm);
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.ddb-faq__item[open] {
    box-shadow: 0 4px 20px rgba(26,32,53,0.08);
}

.ddb-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    font-size: var(--ddb-text-base);
    font-weight: 600;
    color: var(--ddb-paradise-text);
    cursor: pointer;
    list-style: none;
    background: #f8fafc;
    transition: background 0.2s;
}

.ddb-faq__question::-webkit-details-marker { display: none; }

.ddb-faq__item[open] .ddb-faq__question {
    background: #edf2f7;
}

.ddb-faq__question:hover {
    background: #edf2f7;
}

.ddb-faq__chevron {
    flex-shrink: 0;
    color: var(--ddb-paradise-muted);
    transition: transform 0.25s var(--ddb-ease);
}

.ddb-faq__item[open] .ddb-faq__chevron {
    transform: rotate(180deg);
}

.ddb-faq__answer {
    padding: 1rem 1.25rem;
    font-size: var(--ddb-text-sm);
    color: var(--ddb-paradise-muted);
    line-height: 1.7;
    border-top: 1px solid #e2e8f0;
}

.ddb-faq__answer p {
    margin: 0;
}

/* ---------------------------------------------------------------------------
   15. FINAL CTA
   --------------------------------------------------------------------------- */

.ddb-cta-final {
    background: linear-gradient(135deg, var(--ddb-brand-dark) 0%, var(--ddb-brand) 100%);
    min-height: auto;
    padding-block: clamp(5rem, 12vh, 8rem);
    text-align: center;
}

.ddb-cta-final__h2 {
    font-size: var(--ddb-text-2xl);
    font-weight: 900;
    color: white;
    margin: 0 0 1rem;
}

.ddb-cta-final__subtitle {
    font-size: var(--ddb-text-lg);
    color: rgba(255,255,255,0.8);
    margin: 0 0 2.5rem;
}

.ddb-cta-final__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.ddb-cta-final .ddb-btn--primary {
    background: white;
    color: var(--ddb-brand-dark);
    border-color: white;
}
.ddb-cta-final .ddb-btn--primary:hover {
    background: #f8d7d5;
    border-color: #f8d7d5;
}

.ddb-cta-final .ddb-btn--ghost {
    color: white;
    border-color: rgba(255,255,255,0.5);
}
.ddb-cta-final .ddb-btn--ghost:hover {
    border-color: white;
    background: rgba(255,255,255,0.12);
}

.ddb-cta-final__note {
    font-size: var(--ddb-text-sm);
    color: rgba(255,255,255,0.6);
    margin: 0;
}

/* ---------------------------------------------------------------------------
   16. Scroll-reveal (IntersectionObserver fallback classes)
   --------------------------------------------------------------------------- */

.ddb-reveal {
    /* Visible by default — no-JS and no-scroll-animation fallback. */
    transition: opacity 0.7s var(--ddb-ease), transform 0.7s var(--ddb-ease);
}

/* Only hide elements when JS has confirmed it is available (class set by inline
   head script in functions.php). Without JS this rule never fires, so content
   stays visible on every browser, including those with no IntersectionObserver
   and no CSS scroll-driven animation support. */
.ddb-scroll-ready .ddb-reveal {
    opacity: 0;
    transform: translateY(28px);
}

.ddb-scroll-ready .ddb-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ddb-reveal--delay-1 { transition-delay: 0.12s; }
.ddb-reveal--delay-2 { transition-delay: 0.24s; }
.ddb-reveal--delay-3 { transition-delay: 0.36s; }
.ddb-reveal--delay-4 { transition-delay: 0.48s; }

/* ---------------------------------------------------------------------------
   17. CSS Scroll-driven animations (progressive enhancement)
   --------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
    .ddb-reveal {
        /* Remove IO-based transition; let scroll-driven handle it */
        animation: ddb-reveal-anim linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 35%;
    }
    /* Reset transition-based reveal so delays still apply */
    .ddb-reveal--delay-1 { animation-delay: calc(-1 * 0.12s); }
    .ddb-reveal--delay-2 { animation-delay: calc(-1 * 0.24s); }
    .ddb-reveal--delay-3 { animation-delay: calc(-1 * 0.36s); }

    @keyframes ddb-reveal-anim {
        from { opacity: 0; transform: translateY(28px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ---------------------------------------------------------------------------
   18. Reduced motion — disable ALL movement, keep content visible
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    /* -----------------------------------------------------------------------
       REDUCED motion, not ZERO motion.
       WCAG 2.3.3 targets vestibular triggers: large translation, parallax,
       rotation, scaling and rapid jitter. Opacity and colour transitions are
       safe and are what carry the narrative here, so they are kept (slowed).
       Result: users with the OS setting on still experience the hell -> paradise
       story, just without anything that moves across the screen.
       ----------------------------------------------------------------------- */

    /* Content is ALWAYS visible here — never gated behind JS.
       The reveal script bails out under reduced motion, so any opacity:0
       default would leave the page blank. Non-negotiable. */
    .ddb-reveal,
    .ddb-reveal.is-visible,
    .ddb-scroll-ready .ddb-reveal,
    .ddb-scroll-ready .ddb-reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: opacity 0.6s ease-in-out, background-color 0.8s ease-in-out !important;
    }

    /* Kill every movement-based decorative animation (float, spin, fly, glitch,
       pulse). These are the actual vestibular triggers. */
    .ddb-icon,
    .ddb-fake-headline,
    .ddb-glitch::before,
    .ddb-glitch::after,
    .ddb-scroll-hint,
    .ddb-bird,
    .ddb-butterfly,
    .ddb-cracks-healing {
        animation: none !important;
        transform: none !important;
    }

    /* Decorative elements stay visible and static, arranged rather than moving. */
    .ddb-icon,
    .ddb-fake-headline { opacity: 0.85; }
    .ddb-bird,
    .ddb-butterfly    { opacity: 0.9; }

    /* Flowers: no growth animation, but still fade in softly. */
    .ddb-flower__svg {
        animation: none !important;
        transform: scaleY(1) !important;
        opacity: 1;
        transition: opacity 0.9s ease-in-out !important;
    }

    /* Happy faces: fade, never pop/scale. */
    .ddb-happy-face {
        animation: none !important;
        transform: scale(1) !important;
        opacity: 1;
        transition: opacity 0.9s ease-in-out !important;
    }

    /* Glitch text renders as plain text. */
    .ddb-glitch::before,
    .ddb-glitch::after { display: none; }

    /* Verdict mockup: cross-fade only, no motion, all states legible. */
    .ddb-ext-verdict {
        animation: none !important;
        transform: none !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1;
        transition: opacity 0.6s ease-in-out !important;
    }
    .ddb-ext-verdict--analyzing { display: none !important; }

    /* KEEP the hell -> paradise colour shift: it is a colour/opacity change,
       not motion, and it is the core of the narrative. */
    .ddb-bg-paradise {
        opacity: var(--ddb-progress, 0.5);
        transition: opacity 0.8s ease-in-out !important;
    }
}

/* ---------------------------------------------------------------------------
   19. Responsive tweaks (mobile-first, expand for wider screens)
   --------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .ddb-hero__title {
        max-width: 14ch;
    }

    .ddb-trust__list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .ddb-trust__item {
        flex: 1 1 calc(50% - var(--ddb-gap-sm));
    }
}

@media (min-width: 1024px) {
    .ddb-fake-headline {
        max-width: 35ch;
    }

    .ddb-pricing__grid {
        gap: 1.5rem;
    }
}

/* Remove Twenty Twenty-Five constraints on the front page */
.ddb-main-wrapper .wp-block-group {
    max-width: none !important;
    padding: 0 !important;
}

/* ---------------------------------------------------------------------------
   Hell -> Paradise colour journey.
   Opacity is driven by --ddb-progress, which an inline script in the footer
   updates on scroll. Inline (not an external file) so it can never be served
   stale from cache and always runs. Opacity is a colour change, not motion,
   so it is intentionally preserved under prefers-reduced-motion.
   --------------------------------------------------------------------------- */
.ddb-bg-paradise,
html .ddb-bg-paradise {
    opacity: var(--ddb-progress, 0) !important;
    animation: none !important;
    transition: opacity 0.25s linear !important;
}