/*
Theme Name: EcranDirect
Theme URI: https://ecrandirect.com/
Author: EcranDirect
Description: Site premium de télévision et divertissement en streaming pour la Belgique.
Version: 1.5.0
Text Domain: veoahora
*/

:root {
    --ink: #090711;
    --ink-soft: #12101b;
    --navy: #090d17;
    --paper: #f8f7f4;
    --white: #ffffff;
    --muted: #6f6b78;
    --line: rgba(16, 13, 27, .1);
    --coral: #ff4d76;
    --orange: #ff7a2f;
    --violet: #7b61ff;
    --green: #25d366;
    --gradient: linear-gradient(115deg, var(--coral), var(--orange));
    --shadow: 0 24px 70px rgba(30, 14, 40, .14);
    --radius-xl: 34px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --shell: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.screen-reader-text {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.section-shell { width: var(--shell); margin-inline: auto; }
.section-pad { padding: 112px 0; }

.site-header {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    padding: 22px 0;
    color: var(--white);
}
.header-shell {
    width: var(--shell);
    min-height: 68px;
    margin: auto;
    padding: 9px 10px 9px 22px;
    display: flex;
    align-items: center;
    gap: 28px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 999px;
    background: rgba(11, 8, 17, .76);
    backdrop-filter: blur(22px);
    box-shadow: 0 16px 48px rgba(0,0,0,.22);
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 21px; font-weight: 850; letter-spacing: -.7px; white-space: nowrap; }
.brand-mark {
    position: relative; width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 12px; border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(145deg, #272333, #111019); box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.brand-mark span {
    width: 0; height: 0; margin-left: 3px;
    border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid var(--coral);
    filter: drop-shadow(0 0 7px rgba(255,77,118,.75));
}
.brand-plus { color: var(--orange); }
.main-nav { display: flex; align-items: center; justify-content: center; gap: 27px; margin-left: auto; }
.main-nav a { color: rgba(255,255,255,.72); font-size: 13px; font-weight: 700; transition: color .2s ease; }
.main-nav a:hover { color: #fff; }
.header-cta {
    display: inline-flex; align-items: center; gap: 8px; padding: 13px 18px;
    border-radius: 999px; color: #fff; background: var(--gradient); font-size: 13px; font-weight: 800;
    box-shadow: 0 10px 25px rgba(255,77,118,.24); transition: transform .2s ease, box-shadow .2s ease;
}
.header-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(255,77,118,.34); }
.wa-dot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.18); }
.menu-toggle { display: none; margin-left: auto; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.menu-toggle > span:not(.screen-reader-text) { display: block; width: 22px; height: 2px; margin: 4px auto; background: #fff; border-radius: 2px; }

.hero {
    position: relative;
    width: 100%;
    max-width: none;
    min-height: 800px;
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(500px, 1.14fr);
    align-items: center;
    gap: 42px;
    padding: 150px max(40px, calc((100vw - 1180px) / 2)) 76px;
    overflow: hidden;
    color: var(--white);
    background:
        radial-gradient(circle at 12% 30%, rgba(123,97,255,.15), transparent 29%),
        radial-gradient(circle at 70% 18%, rgba(255,77,118,.12), transparent 27%),
        linear-gradient(130deg, #090711 0%, #0e0914 56%, #120b10 100%);
}
.hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .34;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 58px 58px; mask-image: linear-gradient(to right, #000, transparent 58%);
}
.hero-copy { position: relative; z-index: 2; padding-top: 30px; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px;
    color: var(--coral); font-size: 12px; font-weight: 850; letter-spacing: 1.5px; text-transform: uppercase;
}
.eyebrow span { width: 24px; height: 2px; border-radius: 2px; background: var(--gradient); }
.eyebrow.light { color: #ffb1c3; }
.hero h1, .section-heading h2, .split-heading h2, .install h2, .faq h2, .final-cta h2 {
    margin: 0; font-weight: 820; letter-spacing: -2.7px; line-height: 1.02;
}
.hero h1 { max-width: 650px; font-size: clamp(54px, 6vw, 86px); }
.hero h1 em, .split-heading h2 em, .final-cta h2 em { display: block; color: transparent; background: var(--gradient); background-clip: text; -webkit-background-clip: text; font-style: normal; }
.hero-lead { max-width: 570px; margin: 26px 0 32px; color: rgba(255,255,255,.7); font-size: 18px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 52px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px;
    font-size: 14px; font-weight: 820; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--gradient); box-shadow: 0 15px 35px rgba(255,77,118,.24); }
.button-primary:hover { box-shadow: 0 18px 42px rgba(255,77,118,.35); }
.button-secondary { color: #fff; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.button-secondary:hover { border-color: rgba(255,255,255,.35); }
.button-secondary.dark { color: var(--ink); border-color: var(--line); background: transparent; }
.play-mini { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: rgba(255,255,255,.12); font-size: 9px; }
.hero-trust { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
.avatars { display: flex; }
.avatars span {
    width: 34px; height: 34px; margin-left: -8px; display: grid; place-items: center;
    border: 2px solid #110d18; border-radius: 50%; background: linear-gradient(145deg, #655a71, #26202e); color: #fff; font-size: 8px; font-weight: 800;
}
.avatars span:first-child { margin-left: 0; }
.hero-trust strong, .hero-trust small { display: block; }
.hero-trust strong { font-size: 12px; }
.hero-trust small { margin-top: 2px; color: rgba(255,255,255,.48); font-size: 10px; }
.hero-visual { position: relative; z-index: 1; margin-right: -8vw; }
.hero-visual::after {
    content: ""; position: absolute; inset: 0; border-radius: var(--radius-xl);
    background: linear-gradient(90deg, rgba(9,7,17,.55), transparent 28%, transparent 76%, rgba(9,7,17,.15)); pointer-events: none;
}
.hero-visual img { width: 100%; min-height: 490px; object-fit: cover; border-radius: var(--radius-xl) 0 0 var(--radius-xl); box-shadow: 0 40px 100px rgba(0,0,0,.55); }
.hero-glow { position: absolute; inset: 18% 10% 0 30%; border-radius: 50%; background: rgba(255,77,118,.35); filter: blur(80px); }
.visual-badge {
    position: absolute; z-index: 3; min-width: 160px; padding: 15px 17px;
    display: grid; grid-template-columns: auto 1fr; gap: 0 9px; align-items: center;
    border: 1px solid rgba(255,255,255,.14); border-radius: 17px; background: rgba(16,13,26,.82); backdrop-filter: blur(16px); box-shadow: 0 18px 45px rgba(0,0,0,.32);
}
.visual-badge > span { grid-row: 1 / 3; color: var(--coral); font-size: 18px; font-weight: 900; }
.visual-badge strong { font-size: 13px; }
.visual-badge small { color: rgba(255,255,255,.48); font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }
.badge-live { top: 13%; left: -5%; }
.badge-quality { right: 11%; bottom: 9%; }
.badge-quality > span { font-size: 15px; }

.stats { color: #fff; background: #070b12; border-top: 1px solid rgba(255,255,255,.05); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats-grid div { padding: 38px 34px; border-right: 1px solid rgba(255,255,255,.08); }
.stats-grid div:last-child { border-right: 0; }
.stats-grid strong { display: block; color: transparent; background: var(--gradient); background-clip: text; -webkit-background-clip: text; font-size: 34px; letter-spacing: -1.5px; line-height: 1; }
.stats-grid span { display: block; margin-top: 10px; color: rgba(255,255,255,.45); font-size: 10px; font-weight: 750; letter-spacing: 1.3px; text-transform: uppercase; }

.section-heading { max-width: 660px; margin-bottom: 52px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading h2, .split-heading h2, .install h2, .faq h2 { font-size: clamp(39px, 5vw, 60px); }
.section-heading p { margin: 18px auto 0; color: var(--muted); font-size: 16px; }
.plans { background: #f6f4f0; }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan-card {
    position: relative; display: flex; flex-direction: column; padding: 31px;
    border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 12px 45px rgba(22,16,32,.05); transition: transform .25s ease, box-shadow .25s ease;
}
.plan-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
.plan-card.featured { color: #fff; border-color: transparent; background: linear-gradient(145deg, #17111d, #0d0c14); box-shadow: 0 28px 65px rgba(28,13,35,.2); }
.plan-card.featured::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--gradient); }
.popular-label { position: absolute; top: 0; right: 25px; padding: 7px 14px; border-radius: 0 0 12px 12px; color: #fff; background: var(--gradient); font-size: 9px; font-weight: 850; letter-spacing: 1px; text-transform: uppercase; }
.plan-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.plan-name { color: var(--coral); font-size: 10px; font-weight: 850; letter-spacing: 1.5px; text-transform: uppercase; }
.plan-card h3 { margin: 5px 0 0; font-size: 26px; line-height: 1.2; }
.plan-card > p { min-height: 25px; margin: 14px 0 25px; color: var(--muted); font-size: 13px; }
.plan-card.featured > p, .plan-card.featured .price-note { color: rgba(255,255,255,.52); }
.plan-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--coral); background: rgba(255,77,118,.09); }
.price { font-size: 54px; font-weight: 860; letter-spacing: -3px; line-height: 1; }
.price sup { margin-right: 5px; font-size: 19px; font-weight: 750; vertical-align: 21px; }
.price-note { margin-top: 8px; color: var(--muted); font-size: 10px; }
.plan-card ul { padding: 23px 0 6px; margin: 25px 0; border-top: 1px solid var(--line); list-style: none; }
.plan-card.featured ul { border-color: rgba(255,255,255,.1); }
.plan-card li { position: relative; margin: 12px 0; padding-left: 24px; font-size: 12px; }
.plan-card li::before { content: "✓"; position: absolute; left: 0; color: var(--coral); font-weight: 900; }
.plan-card .button { width: 100%; margin-top: auto; }
.button-card { border-color: var(--line); background: #f6f4f1; }
.button-card:hover { border-color: rgba(255,77,118,.35); }
.payment-note { display: flex; justify-content: center; gap: 10px; margin-top: 27px; color: var(--muted); font-size: 11px; }

.benefits { color: #fff; background: linear-gradient(145deg, #0b0911, #0a0f18); }
.split-heading { display: grid; grid-template-columns: 1fr .65fr; align-items: end; gap: 80px; margin-bottom: 52px; }
.split-heading p { max-width: 460px; margin: 0 0 7px; color: rgba(255,255,255,.52); font-size: 15px; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.08); border-left: 1px solid rgba(255,255,255,.08); }
.benefit-grid article { min-height: 240px; padding: 36px; border-right: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); transition: background .25s ease; }
.benefit-grid article:hover { background: rgba(255,255,255,.035); }
.feature-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; color: var(--coral); background: rgba(255,77,118,.1); font-size: 15px; font-weight: 900; }
.benefit-grid h3 { margin: 26px 0 10px; font-size: 17px; }
.benefit-grid p { margin: 0; color: rgba(255,255,255,.45); font-size: 12px; line-height: 1.8; }

.install { background: #fff; }
.install-shell { display: grid; grid-template-columns: .75fr 1.25fr; gap: 90px; align-items: start; }
.install-copy { position: sticky; top: 35px; }
.install-copy > p { max-width: 470px; margin: 22px 0; color: var(--muted); }
.text-link { color: var(--coral); font-size: 13px; font-weight: 800; }
.steps { margin: 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 76px 1fr; gap: 25px; padding: 29px 0; border-bottom: 1px solid var(--line); }
.steps li:first-child { padding-top: 0; }
.steps > li > span { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(255,77,118,.2); border-radius: 18px; color: var(--coral); background: rgba(255,77,118,.05); font-size: 14px; font-weight: 850; }
.steps h3 { margin: 0; font-size: 20px; }
.steps p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

.comparison { background: #f1efeb; }
.table-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 15px 50px rgba(25,18,33,.06); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 22px 28px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; }
th { color: var(--muted); background: #f8f7f5; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
th.highlight { color: #fff; background: linear-gradient(115deg, #ff4d76, #ff713a); }
td.highlight { color: var(--coral); background: rgba(255,77,118,.035); font-weight: 800; }
tbody tr:last-child td { border-bottom: 0; }

.testimonials { color: #fff; background: #0b0d14; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.testimonial-grid article { padding: 30px; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg); background: rgba(255,255,255,.025); }
.stars { color: #ffb13c; letter-spacing: 2px; }
.testimonial-grid article > p { min-height: 122px; margin: 19px 0 26px; color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.9; }
.reviewer { display: flex; align-items: center; gap: 12px; }
.reviewer > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--gradient); font-size: 10px; font-weight: 850; }
.reviewer strong, .reviewer small { display: block; }
.reviewer strong { font-size: 12px; }
.reviewer small { color: rgba(255,255,255,.38); font-size: 10px; }

.faq { background: #fff; }
.faq-shell { display: grid; grid-template-columns: .75fr 1.25fr; gap: 90px; }
.faq-intro > p { max-width: 430px; margin: 20px 0 25px; color: var(--muted); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { padding: 23px 0; display: flex; justify-content: space-between; gap: 25px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 780; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--coral); font-size: 23px; font-weight: 400; transition: transform .2s ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { margin: -5px 45px 25px 0; color: var(--muted); font-size: 13px; line-height: 1.85; }

.final-cta { padding: 78px 0; color: #fff; background: var(--gradient); }
.final-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 70px; }
.cta-kicker { display: block; margin-bottom: 10px; color: rgba(255,255,255,.75); font-size: 11px; font-weight: 850; letter-spacing: 1.4px; text-transform: uppercase; }
.final-cta h2 { font-size: clamp(38px, 5vw, 62px); }
.final-cta h2 em { display: inline; color: #fff; background: none; }
.final-cta p { margin: 15px 0 0; color: rgba(255,255,255,.72); }
.button-light { flex: none; color: var(--ink); background: #fff; box-shadow: 0 14px 35px rgba(85,24,30,.16); }

.site-footer { padding: 75px 0 22px; color: #fff; background: #080a10; }
.footer-grid { display: grid; grid-template-columns: 1.35fr .7fr .7fr .8fr; gap: 70px; padding-bottom: 58px; }
.footer-brand > p { max-width: 330px; margin: 19px 0 0; color: rgba(255,255,255,.43); font-size: 12px; }
.site-footer h3 { margin: 5px 0 20px; color: rgba(255,255,255,.85); font-size: 12px; }
.site-footer > .section-shell div:not(.footer-brand) > a { display: block; margin: 11px 0; color: rgba(255,255,255,.42); font-size: 11px; transition: color .2s ease; }
.site-footer > .section-shell div:not(.footer-brand) > a:hover { color: #fff; }
.footer-contact p { color: rgba(255,255,255,.4); font-size: 11px; }
.footer-wa { display: inline-flex !important; align-items: center; gap: 9px; color: #fff !important; font-weight: 800; }
.footer-wa span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--green); }
.footer-bottom { padding-top: 20px; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.07); color: rgba(255,255,255,.28); font-size: 9px; }

.floating-wa { position: fixed; z-index: 90; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; color: #fff; border-radius: 999px; background: #11151b; box-shadow: 0 16px 40px rgba(0,0,0,.3); font-size: 11px; font-weight: 800; }
.floating-wa > span:first-child { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--green); font-size: 18px; }

/* Interior pages */
.inner-header { position: absolute; }
.page-hero {
    position: relative; min-height: 510px; display: flex; align-items: flex-end; padding: 165px 0 90px;
    overflow: hidden; color: #fff; background:
        radial-gradient(circle at 80% 25%, rgba(255,77,118,.24), transparent 27%),
        radial-gradient(circle at 18% 80%, rgba(123,97,255,.13), transparent 30%),
        linear-gradient(145deg, #0a0811, #101019 65%, #180d13);
}
.page-hero::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 55px 55px; }
.page-hero-inner { position: relative; z-index: 1; }
.page-hero h1, .post-hero h1 { max-width: 900px; margin: 0; font-size: clamp(51px, 7vw, 84px); line-height: 1; letter-spacing: -3.8px; }
.page-hero h1 em { color: transparent; background: var(--gradient); background-clip: text; -webkit-background-clip: text; font-style: normal; }
.page-hero p { max-width: 690px; margin: 25px 0 0; color: rgba(255,255,255,.62); font-size: 17px; }
.pricing-expanded { background: #f6f4f0; }
.pricing-page-grid .plan-card h2 { margin: 5px 0 0; font-size: 26px; }
.price-assurance { margin: 30px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 13px 30px; color: var(--muted); font-size: 11px; font-weight: 700; }
.deep-comparison { background: #fff; }
.comparison-wide { overflow-x: auto; }
.comparison-wide table { min-width: 900px; }
.payments { color: #fff; background: #0b0d14; }
.payment-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.payment-grid article { padding: 30px 24px; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg); background: rgba(255,255,255,.025); text-align: center; }
.payment-grid article > span { width: 48px; height: 48px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: var(--gradient); font-size: 17px; font-weight: 850; }
.payment-grid h3 { margin: 0 0 7px; font-size: 15px; }
.payment-grid p { margin: 0; color: rgba(255,255,255,.45); font-size: 11px; }
.pricing-faq { background: #f7f5f1; }

/* Blog */
.blog-hero { min-height: 470px; }
.blog-index { background: #f6f4f0; }
.blog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.blog-toolbar strong, .blog-toolbar span { display: block; }
.blog-toolbar strong { font-size: 22px; }
.blog-toolbar > div > span { color: var(--muted); font-size: 11px; }
.blog-categories { display: flex; gap: 8px; }
.blog-categories span { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #fff; font-size: 10px; font-weight: 750; }
.blog-categories span:first-child { color: #fff; border-color: transparent; background: var(--ink); }
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.blog-card { display: grid; grid-template-columns: 42% 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 10px 35px rgba(24,16,32,.05); transition: transform .25s ease, box-shadow .25s ease; }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.blog-card.lead-story { grid-column: 1 / -1; grid-template-columns: 52% 1fr; min-height: 370px; }
.blog-art { position: relative; min-height: 265px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; color: #fff; }
.blog-art::before, .blog-art::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); }
.blog-art::before { width: 230px; height: 230px; right: -60px; bottom: -70px; background: rgba(255,255,255,.12); }
.blog-art::after { width: 115px; height: 115px; left: -40px; top: -35px; background: rgba(255,255,255,.08); }
.art-1 { background: linear-gradient(145deg, #522040, #ff4d76 52%, #ff8a33); }
.art-2 { background: linear-gradient(145deg, #19182b, #6656ca 55%, #bd57a5); }
.art-3 { background: linear-gradient(145deg, #16252b, #167a7a 55%, #f5a344); }
.art-4 { background: linear-gradient(145deg, #2d1625, #a43050 55%, #fa7547); }
.blog-art-icon { position: relative; z-index: 1; font-size: 58px; font-weight: 300; }
.blog-art small { position: relative; z-index: 1; font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.blog-card-body { padding: 27px; display: flex; flex-direction: column; justify-content: center; }
.post-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .5px; text-transform: uppercase; }
.post-meta span:first-child { color: var(--coral); }
.blog-card h2 { margin: 14px 0 12px; font-size: 24px; line-height: 1.15; letter-spacing: -1px; }
.lead-story h2 { font-size: 36px; }
.blog-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.read-more { margin-top: 21px; color: var(--coral); font-size: 11px; font-weight: 850; }
.blog-newsletter { padding: 70px 0; color: #fff; background: var(--gradient); }
.newsletter-inner { display: flex; justify-content: space-between; align-items: center; gap: 50px; }
.newsletter-inner span { font-size: 10px; font-weight: 850; letter-spacing: 1.3px; text-transform: uppercase; }
.newsletter-inner h2 { max-width: 730px; margin: 7px 0 0; font-size: clamp(28px, 4vw, 45px); line-height: 1.08; letter-spacing: -1.8px; }

/* Single article */
.post-hero { padding: 175px 0 85px; color: #fff; background: radial-gradient(circle at 78% 35%, rgba(255,77,118,.23), transparent 26%), linear-gradient(145deg, #0a0811, #12101b); }
.back-blog { display: inline-block; margin-bottom: 36px; color: rgba(255,255,255,.6); font-size: 11px; font-weight: 750; }
.post-hero .post-meta { margin-bottom: 18px; color: rgba(255,255,255,.43); }
.post-hero h1 { max-width: 930px; font-size: clamp(45px, 6vw, 73px); }
.post-hero p { max-width: 720px; margin: 24px 0 0; color: rgba(255,255,255,.58); font-size: 17px; }
.article-layout { padding-top: 78px; padding-bottom: 100px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 80px; align-items: start; }
.article-content { max-width: 760px; }
.article-content h2 { margin: 45px 0 14px; font-size: 32px; line-height: 1.15; letter-spacing: -1.2px; }
.article-content h3 { margin: 32px 0 10px; font-size: 22px; }
.article-content p, .article-content li { color: #4f4a58; font-size: 15px; line-height: 1.9; }
.article-content ul, .article-content ol { padding-left: 22px; }
.article-content blockquote { margin: 32px 0; padding: 23px 27px; border-left: 4px solid var(--coral); background: #f6f3f1; }
.article-content blockquote p { margin: 0; color: var(--ink); font-weight: 700; }
.article-aside { position: sticky; top: 30px; }
.aside-box { padding: 28px; color: #fff; border-radius: var(--radius-lg); background: linear-gradient(145deg, #16111c, #0c0c13); }
.aside-box > span { color: #ff93ab; font-size: 9px; font-weight: 850; letter-spacing: 1px; text-transform: uppercase; }
.aside-box h3 { margin: 10px 0; font-size: 25px; line-height: 1.1; }
.aside-box p { color: rgba(255,255,255,.5); font-size: 11px; }
.aside-box .button { width: 100%; margin-top: 13px; padding-inline: 14px; font-size: 11px; }
.aside-links { padding: 26px 5px; }
.aside-links strong { display: block; margin-bottom: 12px; font-size: 11px; }
.aside-links a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }

@media (max-width: 1050px) {
    .main-nav { gap: 18px; }
    .main-nav a { font-size: 11px; }
    .hero { grid-template-columns: .9fr 1.1fr; padding-inline: 30px; }
    .hero-visual { margin-right: -30px; }
    .plan-card { padding: 25px; }
}

@media (max-width: 860px) {
    :root { --shell: min(100% - 30px, 720px); }
    .section-pad { padding: 84px 0; }
    .header-shell { padding-left: 16px; }
    .menu-toggle { display: block; }
    .header-cta { display: none; }
    .main-nav {
        position: fixed; top: 102px; left: 15px; right: 15px; display: none; flex-direction: column; align-items: stretch; gap: 0;
        padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: rgba(10,8,16,.97); box-shadow: 0 20px 60px rgba(0,0,0,.45);
    }
    .main-nav.is-open { display: flex; }
    .main-nav a { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 13px; }
    .main-nav a:last-child { border-bottom: 0; }
    .hero { min-height: auto; grid-template-columns: 1fr; gap: 55px; padding: 145px 25px 72px; text-align: center; }
    .hero-copy { padding-top: 10px; }
    .eyebrow, .hero-actions, .hero-trust { justify-content: center; }
    .hero h1, .hero-lead { margin-inline: auto; }
    .hero-visual { margin: 0 -25px; }
    .hero-visual img { min-height: 380px; border-radius: 25px; }
    .badge-live { left: 2%; }
    .badge-quality { right: 3%; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid div:nth-child(2) { border-right: 0; }
    .stats-grid div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.08); }
    .plan-grid, .benefit-grid, .testimonial-grid { grid-template-columns: 1fr; }
    .plan-card.featured { order: -1; }
    .benefit-grid article { min-height: auto; }
    .split-heading, .install-shell, .faq-shell { grid-template-columns: 1fr; gap: 45px; }
    .split-heading { align-items: start; }
    .install-copy { position: static; }
    .final-cta-inner { flex-direction: column; align-items: flex-start; gap: 30px; }
    .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 45px; }
    .footer-brand { grid-column: 1 / -1; }
    .payment-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-grid { grid-template-columns: 1fr; }
    .blog-card, .blog-card.lead-story { grid-column: auto; grid-template-columns: 1fr; min-height: 0; }
    .blog-art { min-height: 250px; }
    .lead-story h2 { font-size: 28px; }
    .article-layout { grid-template-columns: 1fr; gap: 40px; }
    .article-aside { position: static; }
}

@media (max-width: 580px) {
    :root { --shell: calc(100% - 24px); }
    .site-header { padding-top: 12px; }
    .header-shell { min-height: 60px; }
    .brand { font-size: 18px; }
    .brand-mark { width: 35px; height: 35px; }
    .hero { padding: 120px 18px 55px; }
    .hero h1 { font-size: 48px; letter-spacing: -2.2px; }
    .hero-lead { font-size: 15px; }
    .hero-actions { flex-direction: column; }
    .hero-actions .button { width: 100%; }
    .hero-visual { margin-inline: -18px; }
    .hero-visual img { min-height: 310px; }
    .visual-badge { min-width: 135px; padding: 12px; }
    .badge-live { top: 5%; }
    .stats-grid div { padding: 29px 20px; }
    .stats-grid strong { font-size: 27px; }
    .section-heading h2, .split-heading h2, .install h2, .faq h2 { font-size: 39px; letter-spacing: -2px; }
    .plan-card { padding: 25px 22px; }
    .benefit-grid article { padding: 29px 25px; }
    .steps li { grid-template-columns: 58px 1fr; gap: 17px; }
    .steps > li > span { width: 50px; height: 50px; }
    th, td { min-width: 145px; padding: 17px 16px; font-size: 11px; }
    .table-wrap { overflow-x: auto; }
    .testimonial-grid article > p { min-height: auto; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 35px 25px; }
    .footer-brand, .footer-contact { grid-column: 1 / -1; }
    .footer-bottom { flex-direction: column; gap: 8px; }
    .floating-wa { right: 14px; bottom: 14px; padding-right: 8px; }
    .floating-label { display: none; }
    .page-hero { min-height: 430px; padding: 140px 0 65px; }
    .page-hero h1, .post-hero h1 { font-size: 45px; letter-spacing: -2.4px; }
    .page-hero p, .post-hero p { font-size: 14px; }
    .payment-grid { grid-template-columns: 1fr; }
    .blog-toolbar { align-items: flex-start; flex-direction: column; }
    .blog-categories { max-width: 100%; overflow-x: auto; }
    .blog-art { min-height: 210px; }
    .newsletter-inner { flex-direction: column; align-items: flex-start; }
    .post-hero { padding: 145px 0 65px; }
    .article-layout { padding-top: 55px; padding-bottom: 75px; }
    .article-content h2 { font-size: 27px; }
}

/* EcranDirect Thunder Edition — electric yellow over midnight black */
:root {
    --ink: #0a0a0c;
    --ink-soft: #17140a;
    --navy: #11100a;
    --paper: #f8f7f1;
    --muted: #6f6a5b;
    --line: rgba(70, 57, 12, .14);
    --coral: #ffd21c;
    --orange: #ff9800;
    --violet: #ffe66b;
    --gradient: linear-gradient(126deg, #ffe95c 0%, #ffd000 48%, #ff9800 100%);
    --shadow: 0 26px 80px rgba(86, 64, 0, .16);
}

body { background: radial-gradient(circle at 50% 0, rgba(255,210,28,.09), transparent 26%), var(--paper); }
.header-shell { border-color: rgba(255,218,57,.2); background: rgba(8,8,9,.8); box-shadow: 0 18px 65px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,235,132,.06); }
.brand-plus { color: #ffd51f; text-shadow: 0 0 18px rgba(255,213,31,.72); }
.brand-mark { background: linear-gradient(145deg, #2b2717, #0b0b0c); border-color: rgba(255,215,37,.28); }
.brand-mark span { border-left-color: #ffe35a; filter: drop-shadow(0 0 8px rgba(255,218,31,.9)); }
.main-nav a:hover { color: #ffe15a; }
.header-cta { color: #111; background: var(--gradient); box-shadow: 0 12px 34px rgba(255,188,0,.28); }
.header-cta:hover { box-shadow: 0 18px 46px rgba(255,184,0,.42); }
.wa-dot { color: #111; background: rgba(255,255,255,.35); }

.hero { background: radial-gradient(circle at 17% 31%, rgba(255,210,28,.22), transparent 30%), radial-gradient(circle at 76% 20%, rgba(255,152,0,.13), transparent 28%), linear-gradient(132deg, #070708 0%, #11100b 55%, #171205 100%); }
.hero::after { background-image: linear-gradient(rgba(255,223,89,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,223,89,.035) 1px, transparent 1px); }
.hero h1 em, .page-hero h1 em { background: linear-gradient(110deg, #fff27a, #ffd21c 52%, #ff9d00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow, .eyebrow.light { color: #ffe263; }
.eyebrow > span { background: linear-gradient(90deg, #ff9d00, #ffe45b); box-shadow: 0 0 20px rgba(255,211,30,.52); }
.hero-visual img { filter: sepia(.45) hue-rotate(345deg) saturate(1.28) contrast(1.08); }
.hero-glow { background: rgba(255,192,0,.4); box-shadow: 0 0 130px rgba(255,205,0,.24); }
.visual-badge { border-color: rgba(255,220,57,.28); background: rgba(13,12,8,.84); }
.visual-badge > span { color: #ffe45b; }

.button-primary { color: #111; background: var(--gradient); box-shadow: 0 16px 38px rgba(255,188,0,.28); }
.button-primary:hover { color: #050505; box-shadow: 0 20px 50px rgba(255,177,0,.42); }
.button-secondary { border-color: rgba(255,220,57,.25); background: rgba(255,210,28,.07); }
.button-secondary:hover { border-color: rgba(255,224,80,.55); background: rgba(255,210,28,.12); }
.button-card { color: #17130a; background: #fff9df; border-color: rgba(214,161,0,.2); }
.button-card:hover { color: #5c4100; border-color: rgba(255,183,0,.58); }
.button-light { color: #111; }

.stats { background: linear-gradient(105deg, #080808, #131108 54%, #1a1303); }
.stats-grid div:nth-child(2) strong, .stats-grid div:nth-child(4) strong { color: #ffdc36; }
.plans, .pricing-expanded, .blog-index { background: linear-gradient(180deg, #faf9f4, #f2efe3); }
.plan-card { border-color: rgba(111,82,0,.13); box-shadow: 0 18px 55px rgba(90,67,0,.08); }
.plan-card:hover { box-shadow: 0 28px 70px rgba(90,67,0,.17); }
.plan-card.featured { background: radial-gradient(circle at 90% 5%, rgba(255,210,28,.2), transparent 27%), linear-gradient(150deg, #211d0c, #0b0b0d 72%); box-shadow: 0 30px 80px rgba(64,47,0,.32); }
.popular-label { color: #111; background: var(--gradient); }
.plan-icon, .feature-icon { color: #9b6d00; background: rgba(255,210,28,.14); }
.plan-card.featured .plan-icon { color: #ffe45a; background: rgba(255,210,28,.12); }
.plan-card li::before { color: #d79a00; }

.benefits { background: radial-gradient(circle at 95% 10%, rgba(255,210,28,.12), transparent 31%), linear-gradient(145deg, #080808, #171306); }
.benefit-grid { border-color: rgba(255,218,62,.13); }
.benefit-grid article { border-color: rgba(255,218,62,.1); }
.benefit-grid article:hover { background: linear-gradient(145deg, rgba(255,210,28,.1), rgba(255,151,0,.04)); }
.benefit-grid article:nth-child(even) .feature-icon { color: #ffbc21; background: rgba(255,185,0,.09); }
.steps > li > span { color: #8f6500; border-color: rgba(255,192,0,.27); background: linear-gradient(145deg, rgba(255,210,28,.14), rgba(255,152,0,.05)); }
.comparison { background: #efede4; }
th.highlight { color: #111; background: var(--gradient); }
td.highlight { color: #8a6000; background: rgba(255,205,0,.06); }
.testimonials, .payments { background: radial-gradient(circle at 12% 100%, rgba(255,210,28,.16), transparent 35%), #090909; }
.stars { color: #ffd62d; }
.faq { background: #fcfbf7; }

.final-cta, .blog-newsletter { color: #111; background: linear-gradient(115deg, #ffe65c 0%, #ffd000 54%, #ff9d00 100%); }
.final-cta::before, .blog-newsletter::before { border-color: rgba(34,24,0,.16); box-shadow: 0 0 0 45px rgba(255,255,255,.09), 0 0 0 95px rgba(255,255,255,.05); }
.final-cta h2, .blog-newsletter h2, .final-cta h2 em { color: #0b0b0b; }
.cta-kicker, .final-cta p, .blog-newsletter span { color: rgba(20,14,0,.68); }
.site-footer { background: linear-gradient(150deg, #060606, #131005); }

.page-hero { background: radial-gradient(circle at 78% 24%, rgba(255,210,28,.24), transparent 28%), radial-gradient(circle at 15% 80%, rgba(255,151,0,.14), transparent 32%), linear-gradient(145deg, #070707, #151207 68%, #1c1403); }
.payment-grid article { border-color: rgba(255,218,57,.14); }
.payment-grid article > span { color: #111; background: var(--gradient); }
.blog-card { box-shadow: 0 16px 45px rgba(88,67,0,.09); }
.art-1 { background: linear-gradient(145deg, #5c4000, #d69400 52%, #ffe55a); }
.art-2 { background: linear-gradient(145deg, #17140a, #6e5600 55%, #f2be18); }
.art-3 { background: linear-gradient(145deg, #4b2a00, #d67500 55%, #ffe36a); }
.art-4 { background: linear-gradient(145deg, #292000, #aa7b00 55%, #ffd83e); }
.post-hero { background: radial-gradient(circle at 78% 35%, rgba(255,210,28,.2), transparent 28%), radial-gradient(circle at 16% 70%, rgba(255,151,0,.12), transparent 30%), linear-gradient(145deg, #070707, #161307); }
.article-content blockquote { border-left-color: #e2a600; background: #faf5df; }
.aside-box { background: radial-gradient(circle at 100% 0, rgba(255,210,28,.17), transparent 35%), linear-gradient(145deg, #211c08, #0d0d0d); }
.aside-box > span { color: #ffe15b; }

.footer-wa .wa-icon, .floating-wa .wa-icon { color: #fff; background: var(--green); }
.wa-icon svg { width: 23px; height: 23px; display: block; }
.floating-wa { background: #11110d; border-color: rgba(255,214,39,.26); box-shadow: 0 18px 45px rgba(0,0,0,.4), 0 0 0 5px rgba(255,210,28,.07); }
.floating-wa > .wa-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; box-shadow: 0 0 22px rgba(37,211,102,.42); }
.footer-wa .wa-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; }
.footer-wa .wa-icon svg { width: 17px; height: 17px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* EcranDirect Aurora foundation — electric, clean and unmistakably modern */
:root {
    --ink: #070914;
    --ink-soft: #10152b;
    --navy: #08101f;
    --paper: #f4f7fb;
    --muted: #667085;
    --line: rgba(35, 54, 99, .12);
    --coral: #6d5dfc;
    --orange: #19cbd1;
    --violet: #8b5cf6;
    --gradient: linear-gradient(128deg, #7357ff 0%, #397dff 52%, #19cbd1 100%);
    --shadow: 0 26px 80px rgba(41, 66, 145, .15);
    --radius-xl: 40px;
    --radius-lg: 26px;
}

body { background: radial-gradient(circle at 50% 0, rgba(109,93,252,.08), transparent 25%), var(--paper); }
.header-shell {
    border-color: rgba(110, 231, 255, .16);
    background: rgba(7, 9, 22, .75);
    box-shadow: 0 18px 65px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
}
.brand-plus { color: #50e7f2; text-shadow: 0 0 18px rgba(80,231,242,.65); }
.brand-mark { background: linear-gradient(145deg, #22284c, #0b0d18); border-color: rgba(80,231,242,.22); }
.brand-mark span { border-left-color: #74f2f7; filter: drop-shadow(0 0 8px rgba(80,231,242,.8)); }
.main-nav a:hover { color: #70edf4; }
.header-cta { background: var(--gradient); box-shadow: 0 12px 34px rgba(76,92,255,.32); }
.header-cta:hover { box-shadow: 0 18px 46px rgba(55,128,255,.42); }

.hero {
    background:
        radial-gradient(circle at 17% 31%, rgba(116,87,255,.23), transparent 30%),
        radial-gradient(circle at 73% 18%, rgba(25,203,209,.16), transparent 28%),
        linear-gradient(132deg, #060815 0%, #0a1024 54%, #071923 100%);
}
.hero::after { opacity: .85; background-size: 66px 66px; }
.hero h1 em, .page-hero h1 em { background: linear-gradient(110deg, #8f7cff, #6ceaf1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow, .eyebrow.light { color: #73eaf1; }
.eyebrow > span { background: linear-gradient(90deg, #795eff, #56e8ef); box-shadow: 0 0 18px rgba(86,232,239,.38); }
.hero-visual img { filter: hue-rotate(175deg) saturate(.88) contrast(1.06); border-radius: 46px 10px 46px 10px; }
.hero-glow { background: rgba(80,112,255,.38); box-shadow: 0 0 120px rgba(25,203,209,.18); }
.visual-badge { border-color: rgba(93,226,238,.24); background: rgba(8,13,30,.8); }
.visual-badge > span { color: #6eeaf1; }

.button { position: relative; overflow: hidden; border-radius: 15px; }
.button::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.18), transparent 72%); transform: translateX(-115%); transition: transform .45s ease; }
.button:hover::after { transform: translateX(115%); }
.button-primary { background: var(--gradient); box-shadow: 0 16px 38px rgba(65,93,255,.3); }
.button-primary:hover { box-shadow: 0 20px 50px rgba(47,131,255,.42); }
.button-secondary { border-color: rgba(112,237,244,.22); background: rgba(100,117,255,.08); }
.button-secondary:hover { border-color: rgba(112,237,244,.5); background: rgba(100,117,255,.14); }
.button-card { background: #f0f4ff; border-color: rgba(82,101,202,.16); }
.button-card:hover { border-color: rgba(76,92,255,.5); color: #4b45d9; }

.stats { background: linear-gradient(105deg, #070b19, #0a1225 54%, #071b22); }
.stats-grid strong { color: #f7fbff; }
.stats-grid div:nth-child(2) strong, .stats-grid div:nth-child(4) strong { color: #71ebf1; }
.plans, .pricing-expanded, .blog-index { background: linear-gradient(180deg, #f6f8fc, #eef3fa); }
.plan-card { border-color: rgba(54,76,147,.12); border-radius: 12px 30px 12px 30px; box-shadow: 0 18px 55px rgba(43,62,130,.08); }
.plan-card:hover { box-shadow: 0 28px 70px rgba(43,62,130,.16); }
.plan-card.featured { background: radial-gradient(circle at 90% 5%, rgba(25,203,209,.16), transparent 26%), linear-gradient(150deg, #151336, #081424 72%); box-shadow: 0 30px 80px rgba(31,49,119,.3); }
.popular-label { background: var(--gradient); border-radius: 0 18px 0 18px; }
.plan-icon, .feature-icon { color: #594ff0; background: rgba(109,93,252,.1); }
.plan-card.featured .plan-icon { color: #6ceaf1; background: rgba(25,203,209,.1); }
.plan-card li::before { color: #3d7eff; }

.benefits { background: radial-gradient(circle at 95% 10%, rgba(25,203,209,.1), transparent 31%), linear-gradient(145deg, #070815, #0b1326); }
.benefit-grid { border-color: rgba(96,231,240,.12); }
.benefit-grid article { border-color: rgba(96,231,240,.1); }
.benefit-grid article:hover { background: linear-gradient(145deg, rgba(109,93,252,.1), rgba(25,203,209,.04)); }
.benefit-grid article:nth-child(even) .feature-icon { color: #4edfe7; background: rgba(25,203,209,.09); }
.steps > li > span { color: #584eea; border-color: rgba(109,93,252,.22); background: linear-gradient(145deg, rgba(109,93,252,.1), rgba(25,203,209,.05)); }
.comparison { background: #edf2f8; }
th.highlight { background: var(--gradient); }
td.highlight { color: #4f54dc; background: rgba(74,107,255,.045); }
.testimonials, .payments { background: radial-gradient(circle at 12% 100%, rgba(109,93,252,.17), transparent 35%), #070b17; }
.stars { color: #65e9ef; }
.faq { background: #f9fbfe; }

.final-cta, .blog-newsletter { position: relative; overflow: hidden; background: linear-gradient(115deg, #5c46e8 0%, #327eff 52%, #16bcc7 100%); }
.final-cta::before, .blog-newsletter::before { content: ""; position: absolute; width: 420px; height: 420px; right: -130px; top: -220px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; box-shadow: 0 0 0 45px rgba(255,255,255,.035), 0 0 0 95px rgba(255,255,255,.025); }
.final-cta-inner, .newsletter-inner { position: relative; z-index: 1; }
.site-footer { background: linear-gradient(150deg, #050711, #08101e); }
.floating-wa { background: #0d1623; border: 1px solid rgba(37,211,102,.35); box-shadow: 0 18px 45px rgba(0,0,0,.36), 0 0 0 5px rgba(37,211,102,.08); }
.floating-wa > span:first-child { background: var(--green); box-shadow: 0 0 20px rgba(37,211,102,.38); }

.page-hero { background: radial-gradient(circle at 78% 24%, rgba(25,203,209,.22), transparent 28%), radial-gradient(circle at 15% 80%, rgba(109,93,252,.22), transparent 32%), linear-gradient(145deg, #070815, #0a1427 68%, #071921); }
.payment-grid article { border-radius: 10px 28px 10px 28px; border-color: rgba(92,228,238,.13); }
.payment-grid article > span { background: var(--gradient); }
.blog-card { border-radius: 12px 30px 12px 30px; box-shadow: 0 16px 45px rgba(38,59,120,.08); }
.art-1 { background: linear-gradient(145deg, #312886, #6658ff 52%, #28cbd6); }
.art-2 { background: linear-gradient(145deg, #0b3044, #087f9c 55%, #62ddd4); }
.art-3 { background: linear-gradient(145deg, #171d54, #4057d9 55%, #9b72ff); }
.art-4 { background: linear-gradient(145deg, #082c3c, #2662b8 55%, #24c6ca); }
.post-hero { background: radial-gradient(circle at 78% 35%, rgba(25,203,209,.18), transparent 28%), radial-gradient(circle at 16% 70%, rgba(109,93,252,.16), transparent 30%), linear-gradient(145deg, #070815, #0b1326); }
.article-content blockquote { border-left-color: #5b5cf2; background: #f0f4fb; }
.aside-box { background: radial-gradient(circle at 100% 0, rgba(25,203,209,.15), transparent 35%), linear-gradient(145deg, #151438, #081521); }
.aside-box > span { color: #6ceaf1; }

@media (max-width: 580px) {
    .hero-visual img { border-radius: 30px 8px 30px 8px; }
    .plan-card, .blog-card { border-radius: 10px 24px 10px 24px; }
    .final-cta::before, .blog-newsletter::before { width: 260px; height: 260px; right: -150px; top: -130px; }
}

/* Thunder palette final cascade */
:root {
    --ink:#0a0a0c; --ink-soft:#17140a; --navy:#11100a; --paper:#f8f7f1;
    --muted:#6f6a5b; --line:rgba(70,57,12,.14); --coral:#ffd21c;
    --orange:#ff9800; --violet:#ffe66b;
    --gradient:linear-gradient(126deg,#ffe95c 0%,#ffd000 48%,#ff9800 100%);
    --shadow:0 26px 80px rgba(86,64,0,.16);
}
body{background:radial-gradient(circle at 50% 0,rgba(255,210,28,.09),transparent 26%),var(--paper)}
.header-shell{border-color:rgba(255,218,57,.2);background:rgba(8,8,9,.8);box-shadow:0 18px 65px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,235,132,.06)}
.brand-plus{color:#ffd51f;text-shadow:0 0 18px rgba(255,213,31,.72)}
.brand-mark{background:linear-gradient(145deg,#2b2717,#0b0b0c);border-color:rgba(255,215,37,.28)}
.brand-mark span{border-left-color:#ffe35a;filter:drop-shadow(0 0 8px rgba(255,218,31,.9))}
.main-nav a:hover{color:#ffe15a}
.header-cta{color:#111;background:var(--gradient);box-shadow:0 12px 34px rgba(255,188,0,.28)}
.header-cta:hover{box-shadow:0 18px 46px rgba(255,184,0,.42)}
.wa-dot{color:#111;background:rgba(255,255,255,.35)}
.hero{background:radial-gradient(circle at 17% 31%,rgba(255,210,28,.22),transparent 30%),radial-gradient(circle at 76% 20%,rgba(255,152,0,.13),transparent 28%),linear-gradient(132deg,#070708 0%,#11100b 55%,#171205 100%)}
.hero::after{background-image:linear-gradient(rgba(255,223,89,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,223,89,.035) 1px,transparent 1px)}
.hero h1 em,.page-hero h1 em{background:linear-gradient(110deg,#fff27a,#ffd21c 52%,#ff9d00);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow,.eyebrow.light{color:#ffe263}.eyebrow>span{background:linear-gradient(90deg,#ff9d00,#ffe45b);box-shadow:0 0 20px rgba(255,211,30,.52)}
.hero-visual img{filter:sepia(.45) hue-rotate(345deg) saturate(1.28) contrast(1.08)}
.hero-glow{background:rgba(255,192,0,.4);box-shadow:0 0 130px rgba(255,205,0,.24)}
.visual-badge{border-color:rgba(255,220,57,.28);background:rgba(13,12,8,.84)}.visual-badge>span{color:#ffe45b}
.button-primary{color:#111;background:var(--gradient);box-shadow:0 16px 38px rgba(255,188,0,.28)}
.button-primary:hover{color:#050505;box-shadow:0 20px 50px rgba(255,177,0,.42)}
.button-secondary{border-color:rgba(255,220,57,.25);background:rgba(255,210,28,.07)}
.button-secondary:hover{border-color:rgba(255,224,80,.55);background:rgba(255,210,28,.12)}
.button-card{color:#17130a;background:#fff9df;border-color:rgba(214,161,0,.2)}
.button-card:hover{color:#5c4100;border-color:rgba(255,183,0,.58)}
.stats{background:linear-gradient(105deg,#080808,#131108 54%,#1a1303)}
.stats-grid div:nth-child(2) strong,.stats-grid div:nth-child(4) strong{color:#ffdc36}
.plans,.pricing-expanded,.blog-index{background:linear-gradient(180deg,#faf9f4,#f2efe3)}
.plan-card{border-color:rgba(111,82,0,.13);box-shadow:0 18px 55px rgba(90,67,0,.08)}
.plan-card:hover{box-shadow:0 28px 70px rgba(90,67,0,.17)}
.plan-card.featured{background:radial-gradient(circle at 90% 5%,rgba(255,210,28,.2),transparent 27%),linear-gradient(150deg,#211d0c,#0b0b0d 72%);box-shadow:0 30px 80px rgba(64,47,0,.32)}
.popular-label{color:#111;background:var(--gradient)}
.plan-icon,.feature-icon{color:#9b6d00;background:rgba(255,210,28,.14)}
.plan-card.featured .plan-icon{color:#ffe45a;background:rgba(255,210,28,.12)}
.plan-card li::before{color:#d79a00}
.benefits{background:radial-gradient(circle at 95% 10%,rgba(255,210,28,.12),transparent 31%),linear-gradient(145deg,#080808,#171306)}
.benefit-grid{border-color:rgba(255,218,62,.13)}.benefit-grid article{border-color:rgba(255,218,62,.1)}
.benefit-grid article:hover{background:linear-gradient(145deg,rgba(255,210,28,.1),rgba(255,151,0,.04))}
.benefit-grid article:nth-child(even) .feature-icon{color:#ffbc21;background:rgba(255,185,0,.09)}
.steps>li>span{color:#8f6500;border-color:rgba(255,192,0,.27);background:linear-gradient(145deg,rgba(255,210,28,.14),rgba(255,152,0,.05))}
.comparison{background:#efede4}th.highlight{color:#111;background:var(--gradient)}td.highlight{color:#8a6000;background:rgba(255,205,0,.06)}
.testimonials,.payments{background:radial-gradient(circle at 12% 100%,rgba(255,210,28,.16),transparent 35%),#090909}.stars{color:#ffd62d}.faq{background:#fcfbf7}
.final-cta,.blog-newsletter{color:#111;background:linear-gradient(115deg,#ffe65c 0%,#ffd000 54%,#ff9d00 100%)}
.final-cta::before,.blog-newsletter::before{border-color:rgba(34,24,0,.16);box-shadow:0 0 0 45px rgba(255,255,255,.09),0 0 0 95px rgba(255,255,255,.05)}
.final-cta h2,.blog-newsletter h2,.final-cta h2 em{color:#0b0b0b}.cta-kicker,.final-cta p,.blog-newsletter span{color:rgba(20,14,0,.68)}
.site-footer{background:linear-gradient(150deg,#060606,#131005)}
.page-hero{background:radial-gradient(circle at 78% 24%,rgba(255,210,28,.24),transparent 28%),radial-gradient(circle at 15% 80%,rgba(255,151,0,.14),transparent 32%),linear-gradient(145deg,#070707,#151207 68%,#1c1403)}
.payment-grid article{border-color:rgba(255,218,57,.14)}.payment-grid article>span{color:#111;background:var(--gradient)}
.blog-card{box-shadow:0 16px 45px rgba(88,67,0,.09)}
.art-1{background:linear-gradient(145deg,#5c4000,#d69400 52%,#ffe55a)}.art-2{background:linear-gradient(145deg,#17140a,#6e5600 55%,#f2be18)}
.art-3{background:linear-gradient(145deg,#4b2a00,#d67500 55%,#ffe36a)}.art-4{background:linear-gradient(145deg,#292000,#aa7b00 55%,#ffd83e)}
.post-hero{background:radial-gradient(circle at 78% 35%,rgba(255,210,28,.2),transparent 28%),radial-gradient(circle at 16% 70%,rgba(255,151,0,.12),transparent 30%),linear-gradient(145deg,#070707,#161307)}
.article-content blockquote{border-left-color:#e2a600;background:#faf5df}.aside-box{background:radial-gradient(circle at 100% 0,rgba(255,210,28,.17),transparent 35%),linear-gradient(145deg,#211c08,#0d0d0d)}.aside-box>span{color:#ffe15b}
.footer-wa .wa-icon,.floating-wa .wa-icon{color:#fff;background:var(--green)}
.wa-icon svg{width:23px;height:23px;display:block}
.floating-wa{background:#11110d;border-color:rgba(255,214,39,.26);box-shadow:0 18px 45px rgba(0,0,0,.4),0 0 0 5px rgba(255,210,28,.07)}
.floating-wa>span.wa-icon:first-child{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;box-shadow:0 0 22px rgba(37,211,102,.42)}
.footer-wa span.wa-icon{width:27px;height:27px;display:grid;place-items:center;border-radius:50%}.footer-wa .wa-icon svg{width:17px;height:17px}

/* French navigation labels need a little more breathing room. */
@media (min-width: 861px) {
    .header-shell { gap: 20px; }
    .main-nav { gap: 21px; }
    .main-nav a { white-space: nowrap; }
    .header-cta { padding-inline: 16px; white-space: nowrap; }
}

/* EcranDirect identity */
.brand-mark svg {
    width: 27px;
    height: 27px;
    display: block;
    color: #ffd51f;
    filter: drop-shadow(0 0 9px rgba(255, 213, 31, .46));
}
.brand-plus { margin-left: 1px; }