:root {
    --flame: #DC2626;
    --blush: #F87171;
    --teal: #2DD4BF;
    --coal: #0F172A;
    --slate: #1E293B;
    --ash: #334155;
    --fog: #94A3B8;
    --snow: #F1F5F9;
    --edge: 10px;
    --mw: 1024px;
    --motion: .2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Rubik', sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--snow);
    background: var(--coal);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); text-decoration: none; transition: color var(--motion); }
a:hover { color: var(--blush); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { list-style: none; }

h1, h2, h3, h4 {
    line-height: 1.25;
    font-weight: 600;
    color: var(--snow);
}
h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 1.25rem; }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); margin-bottom: .5rem; }

p { margin-bottom: .85rem; color: var(--fog); }
p:last-child { margin-bottom: 0; }

strong { color: var(--snow); font-weight: 600; }

.df-wrap {
    max-width: var(--mw);
    margin: 0 auto;
    padding: 0 1.25rem;
}

.df-center { text-align: center; margin-top: 1.5rem; }

/* ===== HEADER ===== */
.df-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--coal);
    border-bottom: 2px solid var(--flame);
}
.df-header .df-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}
.df-logo {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--snow);
    letter-spacing: -.02em;
}
.df-logo span { color: var(--flame); }
.df-logo:hover { color: var(--snow); }

.df-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.df-nav a {
    font-size: .9rem;
    font-weight: 500;
    color: var(--fog);
    transition: color var(--motion);
}
.df-nav a:hover, .df-nav a.df-on { color: var(--snow); }

.df-burger { display: none; cursor: pointer; }
.df-burger span,
.df-burger span::before,
.df-burger span::after {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--snow);
    transition: transform var(--motion);
    position: relative;
}
.df-burger span::before,
.df-burger span::after { content: ''; position: absolute; left: 0; }
.df-burger span::before { top: -7px; }
.df-burger span::after { top: 7px; }

@media (max-width: 900px) {
    .df-burger { display: block; }
    .df-nav {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        gap: 0;
        background: var(--coal);
        padding: 1rem 0;
        transform: translateX(100%);
        transition: transform .3s ease;
    }
    .df-nav a {
        display: block;
        padding: .85rem 1.5rem;
        font-size: 1.05rem;
        border-bottom: 1px solid var(--slate);
    }
    .df-toggle-chk:checked ~ .df-nav {
        transform: translateX(0);
    }
    .df-toggle-chk:checked ~ .df-burger span { background: transparent; }
    .df-toggle-chk:checked ~ .df-burger span::before { top: 0; transform: rotate(45deg); }
    .df-toggle-chk:checked ~ .df-burger span::after { top: 0; transform: rotate(-45deg); }
}

/* ===== CTA BUTTON ===== */
.df-cta {
    background: var(--flame);
    color: #fff !important;
    padding: .45rem 1.1rem;
    border-radius: var(--edge);
    font-weight: 600;
    font-size: .85rem;
    transition: background var(--motion), transform var(--motion);
}
.df-cta:hover { background: var(--blush); transform: scale(1.03); }

/* ===== BUTTONS ===== */
.df-btn {
    display: inline-block;
    padding: .75rem 1.75rem;
    border-radius: var(--edge);
    font-weight: 600;
    font-size: .95rem;
    text-align: center;
    transition: background var(--motion), transform var(--motion), box-shadow var(--motion);
    cursor: pointer;
    border: none;
}
.df-btn-flame {
    background: linear-gradient(135deg, var(--flame), #B91C1C);
    color: #fff;
    box-shadow: 0 4px 20px rgba(220,38,38,.3);
}
.df-btn-flame:hover {
    background: linear-gradient(135deg, var(--blush), var(--flame));
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(220,38,38,.4);
}
.df-btn-ghost {
    background: transparent;
    color: var(--snow);
    border: 1px solid var(--ash);
}
.df-btn-ghost:hover {
    border-color: var(--fog);
    color: var(--snow);
    background: rgba(255,255,255,.04);
}
.df-btn-lg { padding: 1rem 2.25rem; font-size: 1.05rem; }

/* ===== HERO ===== */
.df-hero {
    padding: 4.5rem 0 3.5rem;
    text-align: center;
    background: radial-gradient(ellipse at 50% 0%, rgba(220,38,38,.15) 0%, transparent 65%);
}
.df-hero h1 { margin-bottom: 1rem; }
.df-hero-sub {
    max-width: 620px;
    margin: 0 auto 1.75rem;
    font-size: 1.05rem;
    color: var(--fog);
}
.df-hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.df-hero-compact { padding: 3rem 0 2.5rem; }

/* ===== STATS STRIP ===== */
.df-strip {
    padding: 1.5rem 0;
    background: var(--slate);
    border-top: 1px solid var(--ash);
    border-bottom: 1px solid var(--ash);
}
.df-stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    text-align: center;
}
.df-stat-item strong {
    display: block;
    font-size: 1.5rem;
    color: var(--flame);
    font-weight: 700;
}
.df-stat-item span { font-size: .85rem; color: var(--fog); }

@media (max-width: 540px) {
    .df-stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* ===== SECTIONS ===== */
.df-section { padding: 3rem 0; }
.df-section-alt { background: var(--slate); }

.df-main { min-height: 60vh; }

/* ===== SPLIT LAYOUT ===== */
.df-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 900px) {
    .df-split { grid-template-columns: 1fr; }
}
.df-split-text p { margin-bottom: 1rem; }
.df-split-text ul { margin-top: .75rem; }
.df-split-text li {
    padding: .3rem 0 .3rem 1.25rem;
    position: relative;
    color: var(--fog);
}
.df-split-text li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .7rem;
    width: 6px;
    height: 6px;
    background: var(--flame);
    border-radius: 1px;
}

/* ===== INFO CARD ===== */
.df-info-card {
    background: var(--coal);
    border: 1px solid var(--ash);
    border-radius: var(--edge);
    padding: 1.25rem;
}
.df-info-card > strong {
    display: block;
    margin-bottom: .75rem;
    font-size: 1.1rem;
}
.df-info-line {
    display: flex;
    justify-content: space-between;
    padding: .55rem 0;
    border-bottom: 1px solid var(--ash);
    font-size: .9rem;
}
.df-info-line:last-child, .df-info-line:last-of-type { border-bottom: none; }
.df-info-line span { color: var(--fog); }
.df-info-card .df-btn { margin-top: 1rem; width: 100%; }

.df-section-alt .df-info-card { background: var(--slate); border-color: var(--ash); }

/* ===== APP CARD ===== */
.df-app-card {
    background: var(--coal);
    border: 1px solid var(--ash);
    border-radius: var(--edge);
    padding: 1.5rem;
}
.df-app-card > strong { display: block; font-size: 1.15rem; margin-bottom: 1rem; }
.df-app-card .df-btn { margin-top: 1rem; width: 100%; }

/* ===== CARDS ===== */
.df-card-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1rem;
}
@media (max-width: 900px) {
    .df-card-row { grid-template-columns: 1fr; }
}

.df-card {
    background: var(--coal);
    border-left: 3px solid var(--flame);
    border-radius: 0 var(--edge) var(--edge) 0;
    padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    transition: transform var(--motion), box-shadow var(--motion);
}
.df-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.df-section-alt .df-card { background: var(--slate); }
.df-card h3 { color: var(--snow); }
.df-card p { font-size: .9rem; }

.df-tag {
    display: inline-block;
    background: rgba(220,38,38,.15);
    color: var(--blush);
    font-size: .75rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: 4px;
    margin-bottom: .5rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.df-link {
    display: inline-block;
    margin-top: .5rem;
    font-weight: 500;
    font-size: .9rem;
    color: var(--teal);
}
.df-link:hover { color: var(--blush); }

/* ===== ICON GRID ===== */
.df-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 540px) {
    .df-icon-grid { grid-template-columns: repeat(2, 1fr); }
}
.df-icon-item {
    text-align: center;
    padding: 1.25rem .75rem;
    background: var(--coal);
    border-radius: var(--edge);
    border: 1px solid var(--ash);
    transition: border-color var(--motion);
}
.df-icon-item:hover { border-color: var(--flame); }
.df-section-alt .df-icon-item { background: var(--slate); }
.df-emoji { font-size: 1.75rem; display: block; margin-bottom: .5rem; }
.df-icon-item strong { display: block; font-size: .95rem; margin-bottom: .2rem; }
.df-icon-item span { font-size: .8rem; color: var(--fog); }

/* ===== METERS ===== */
.df-meters { max-width: 600px; }
.df-meter {
    display: grid;
    grid-template-columns: 140px 1fr 50px;
    align-items: center;
    gap: .75rem;
    margin-bottom: .85rem;
}
.df-meter span { font-size: .9rem; color: var(--fog); }
.df-bar {
    height: 8px;
    background: var(--ash);
    border-radius: 4px;
    overflow: hidden;
}
.df-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--flame), var(--blush));
    border-radius: 4px;
    transition: width .6s ease;
}
.df-meter strong { font-size: .9rem; text-align: right; }

@media (max-width: 540px) {
    .df-meter { grid-template-columns: 1fr 50px; }
    .df-meter > span { grid-column: 1 / -1; }
}

/* ===== TIMELINE STEPS ===== */
.df-timeline { max-width: 600px; margin-bottom: 1.5rem; }
.df-step {
    display: flex;
    gap: 1.25rem;
    padding-bottom: 1.5rem;
    position: relative;
}
.df-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 17px;
    top: 40px;
    bottom: 0;
    width: 2px;
    background: var(--ash);
}
.df-step-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--flame);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.df-step div h3 { margin-bottom: .25rem; }
.df-step div p { font-size: .9rem; margin-bottom: 0; }

/* ===== LIST GRID ===== */
.df-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
@media (max-width: 900px) {
    .df-list-grid { grid-template-columns: 1fr; }
}
.df-list-item {
    padding: 1.25rem;
    border: 1px solid var(--ash);
    border-radius: var(--edge);
    background: var(--coal);
}
.df-section-alt .df-list-item { background: var(--slate); }
.df-list-item h3 { font-size: 1.05rem; }

/* ===== CHECK LIST ===== */
.df-check-list li {
    padding: .6rem 0 .6rem 1.75rem;
    position: relative;
    color: var(--fog);
    font-size: .95rem;
    border-bottom: 1px solid rgba(51,65,85,.5);
}
.df-check-list li:last-child { border-bottom: none; }
.df-check-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--teal);
    font-weight: 700;
}

/* ===== PROS/CONS ===== */
.df-pros ul li,
.df-cons ul li {
    padding: .4rem 0 .4rem 1.5rem;
    position: relative;
    color: var(--fog);
    font-size: .9rem;
}
.df-pros ul li::before {
    content: '+';
    position: absolute;
    left: 0;
    color: var(--teal);
    font-weight: 700;
    font-size: 1.1rem;
}
.df-cons ul li::before {
    content: '−';
    position: absolute;
    left: 0;
    color: var(--blush);
    font-weight: 700;
    font-size: 1.1rem;
}
.df-pros h3, .df-cons h3 { margin-bottom: .75rem; }

/* ===== FAQ ===== */
.df-faq { max-width: 700px; }
.df-faq-item {
    border: 1px solid var(--ash);
    border-radius: var(--edge);
    margin-bottom: .65rem;
    overflow: hidden;
    transition: border-color var(--motion);
}
.df-faq-item[open] { border-color: var(--flame); }
.df-faq-item summary {
    padding: 1rem 1.25rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--snow);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.df-faq-item summary::-webkit-details-marker { display: none; }
.df-faq-item summary::after {
    content: '+';
    font-size: 1.2rem;
    color: var(--flame);
    flex-shrink: 0;
    transition: transform var(--motion);
}
.df-faq-item[open] summary::after { content: '−'; }
.df-faq-item p {
    padding: 0 1.25rem 1rem;
    font-size: .9rem;
}

/* ===== NEWS ===== */
.df-news-list { max-width: 700px; }
.df-news-item {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--ash);
}
.df-news-item:last-child { border-bottom: none; }
.df-news-item time {
    display: inline-block;
    font-size: .8rem;
    color: var(--flame);
    font-weight: 500;
    margin-bottom: .35rem;
}
.df-news-item h3 { margin-bottom: .35rem; }
.df-news-item p { font-size: .9rem; margin-bottom: 0; }

/* ===== CTA BLOCK ===== */
.df-cta-block {
    padding: 3.5rem 0;
    text-align: center;
    background: radial-gradient(ellipse at 50% 100%, rgba(220,38,38,.12) 0%, transparent 60%);
}
.df-cta-block h2 { margin-bottom: .75rem; }
.df-cta-block p { max-width: 500px; margin: 0 auto 1.5rem; }

/* ===== ARTICLE ===== */
.df-article h2 { margin-top: 1.5rem; }
.df-article h3 { margin-top: 1.25rem; color: var(--snow); }
.df-article p { font-size: .95rem; line-height: 1.7; }
.df-article a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.df-article a:hover { color: var(--blush); }

/* ===== FOOTNOTE ===== */
.df-footnote {
    font-size: .8rem;
    color: var(--ash);
    font-style: italic;
    margin-top: .5rem;
}

/* ===== FOOTER ===== */
.df-footer {
    background: #0A0F1C;
    padding: 3rem 0 1.5rem;
    margin-top: 2rem;
    border-top: 1px solid var(--ash);
}
.df-foot-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}
@media (max-width: 900px) {
    .df-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
    .df-foot-grid { grid-template-columns: 1fr; }
}
.df-foot-brand {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--snow);
    margin-bottom: .5rem;
}
.df-foot-col p { font-size: .85rem; color: var(--fog); }
.df-foot-col strong {
    display: block;
    font-size: .85rem;
    color: var(--fog);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .75rem;
}
.df-foot-col a {
    display: block;
    font-size: .9rem;
    color: var(--fog);
    padding: .2rem 0;
}
.df-foot-col a:hover { color: var(--snow); }

/* ===== LEGAL ===== */
.df-legal {
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--ash);
    border-bottom: 1px solid var(--ash);
    align-items: flex-start;
}
.df-age-mark {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 2px solid var(--flame);
    border-radius: 50%;
    font-weight: 700;
    font-size: 1rem;
    color: var(--flame);
}
.df-legal-text p {
    font-size: .8rem;
    color: var(--ash);
    line-height: 1.55;
    margin-bottom: .5rem;
}
.df-legal-text p:last-child { margin-bottom: 0; }

.df-foot-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.25rem;
    font-size: .8rem;
    color: var(--ash);
    flex-wrap: wrap;
    gap: .5rem;
}