/* =====================================================
   HOME – HERO (FINAL, CLEAN)
   passt EXAKT zu /includes/header_slider.php
   ===================================================== */

/* ===============================
   HERO SECTION WRAPPER
   =============================== */

.home-hero {
    position: relative;
    overflow: hidden;

    /* schöner moderner Hintergrund */
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(37,99,235,.25), transparent),
        radial-gradient(900px 500px at 90% 10%, rgba(59,130,246,.18), transparent),
        linear-gradient(180deg, #0f172a, #020617);

    color: #e5e7eb;
}

body.light .home-hero {
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(37,99,235,.18), transparent),
        radial-gradient(900px 500px at 90% 10%, rgba(59,130,246,.12), transparent),
        linear-gradient(180deg, #ffffff, #f8fafc);

    color: #0f172a;
}

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

.hero-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 140px 20px 120px;

    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: center;
}

/* ===============================
   LEFT SIDE
   =============================== */

.hero-eyebrow {
    display: inline-block;
    margin-bottom: 18px;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;

    color: #60a5fa;
}

body.light .hero-eyebrow {
    color: #2563eb;
}

.hero-left h1 {
    margin: 0 0 22px;

    font-size: 56px;
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -0.02em;
}

.hero-text {
    max-width: 560px;
    margin-bottom: 38px;

    font-size: 18px;
    line-height: 1.65;

    color: #cbd5f5;
}

body.light .hero-text {
    color: #475569;
}

/* ===============================
   ACTIONS / BUTTONS
   =============================== */

.hero-actions {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

/* GLOBAL BUTTON BASE */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 16px 36px;
    border-radius: 16px;

    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease,
        color .15s ease;
}

/* PRIMARY */
.btn-primary {
    background: #2563eb;
    color: #ffffff;
    border: none;

    box-shadow: 0 12px 34px rgba(37,99,235,.45);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(37,99,235,.55);
}

/* SECONDARY */
.btn-secondary {
    background: transparent;
    color: #93c5fd;
    border: 2px solid #93c5fd;
}

.btn-secondary:hover {
    background: rgba(147,197,253,.12);
}

body.light .btn-secondary {
    color: #2563eb;
    border-color: #2563eb;
}

body.light .btn-secondary:hover {
    background: rgba(37,99,235,.08);
}

/* ===============================
   RIGHT SIDE – METRICS
   =============================== */

.hero-right {
    display: grid;
    gap: 22px;
}

.hero-metric {
    padding: 30px;
    border-radius: 22px;

    text-align: center;

    background: linear-gradient(
        180deg,
        rgba(15,23,42,.85),
        rgba(2,6,23,.85)
    );

    border: 1px solid rgba(255,255,255,.10);

    box-shadow: 0 20px 50px rgba(0,0,0,.45);
}

body.light .hero-metric {
    background: #ffffff;
    border-color: rgba(0,0,0,.08);
    box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

.hero-metric strong {
    display: block;
    margin-bottom: 6px;

    font-size: 34px;
    font-weight: 900;
}

.hero-metric span {
    font-size: 14px;
    color: #cbd5f5;
}

body.light .hero-metric span {
    color: #475569;
}

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

@media (max-width: 1024px) {
    .hero-grid {
        gap: 60px;
    }

    .hero-left h1 {
        font-size: 48px;
    }
}

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        padding: 120px 20px 100px;
        gap: 60px;
        text-align: center;
    }

    .hero-text {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        justify-content: center;
    }
}

@media (max-width: 520px) {
    .hero-left h1 {
        font-size: 36px;
    }

    .btn {
        width: 100%;
    }
}

/* =====================================================
   HOMEPAGE BANNER
   passt exakt zu homepage_banner.php
   ===================================================== */

.homepage-banner {
    max-width: 1200px;
    margin: 60px auto 0;
    padding: 0 20px;

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

/* Link ohne Nebeneffekte */
.homepage-banner a {
    display: inline-block;
    line-height: 0;
}

/* Banner Bild */
.homepage-banner img {
    display: block;
    max-width: 100%;
    height: auto;

    border-radius: 18px;

    /* hochwertiger Look */
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Hover Effekt */
.homepage-banner a:hover img {
    transform: translateY(-4px);
    box-shadow: 0 32px 80px rgba(0,0,0,.35);
}

/* Dark Mode – etwas kräftiger */
body.dark .homepage-banner img {
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

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

@media (max-width: 900px) {
    .homepage-banner {
        margin-top: 48px;
    }

    .homepage-banner img {
        border-radius: 14px;
    }
}

@media (max-width: 520px) {
    .homepage-banner {
        margin-top: 36px;
    }

    .homepage-banner img {
        border-radius: 12px;
    }
}

/* =====================================================
   SEO OVERVIEW – FINAL
   passt EXAKT zu /includes/seo_text.php
   ===================================================== */

.seo-overview {
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 20px 100px;

    font-family: Inter, system-ui, sans-serif;
}

/* ===============================
   HEADLINE + INTRO
   =============================== */

.seo-overview h1 {
    margin: 0 0 14px;
    font-size: 44px;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-align: center;          /* ← mittig */
}

.seo-intro {
    max-width: 820px;
    margin: 0 auto 64px;         /* ← horizontal zentriert */
    font-size: 17px;
    line-height: 1.6;
    color: #475569;
    text-align: center;          /* ← Text mittig */
}

body.dark .seo-intro {
    color: #94a3b8;
}

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

.seo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
}

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

.seo-block {
    padding: 32px 30px 34px;
    border-radius: 22px;

    background: #ffffff;
    border: 1px solid rgba(0,0,0,.08);

    transition: transform .2s ease, box-shadow .2s ease;
}

body.dark .seo-block {
    background: #0b1220;                 /* bewusst heller */
    border-color: rgba(255,255,255,.12);
}

.seo-block:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

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

.seo-block h2 {
    margin: 0 0 18px;

    font-size: 22px;
    font-weight: 800;
}

/* ===============================
   TABLE
   =============================== */

.seo-block table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    margin-bottom: 18px;
}

.seo-block th {
    text-align: left;
    padding: 8px 6px;

    font-weight: 700;
    color: #64748b;

    border-bottom: 1px solid rgba(0,0,0,.08);
}

body.dark .seo-block th {
    color: #94a3b8;
    border-bottom-color: rgba(255,255,255,.14);
}

.seo-block td {
    padding: 8px 6px;

    font-weight: 600;
    color: #0f172a;

    border-bottom: 1px solid rgba(0,0,0,.06);
}

body.dark .seo-block td {
    color: #e5e7eb;
    border-bottom-color: rgba(255,255,255,.10);
}

.seo-block tr:last-child td {
    border-bottom: none;
}

/* ===============================
   CHART
   =============================== */

.seo-block canvas {
    width: 100%;
    height: 140px;
    margin-top: 10px;
}

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

@media (max-width: 900px) {
    .seo-overview {
        padding: 100px 20px 80px;
    }

    .seo-grid {
        grid-template-columns: 1fr;
    }

    .seo-overview h1 {
        font-size: 36px;
    }
}

/* =====================================================
   SEO PACKAGES – FINAL
   passt EXAKT zu /includes/seo_packages_front.php
   ===================================================== */

.seo-packages {
    max-width: 1400px;
    margin: 0 auto;
    padding: 120px 20px 100px;
    font-family: Inter, system-ui, sans-serif;
}

/* ===============================
   HEADLINE + INTRO
   =============================== */

.seo-packages h1 {
    margin: 0 0 14px;
    font-size: 46px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.seo-packages-intro {
    max-width: 900px;
    margin: 0 auto 70px;   /* ← horizontal zentriert */
    font-size: 18px;
    line-height: 1.6;
    color: #475569;
    text-align: center;    /* ← Text mittig */
}


body.dark .seo-packages-intro {
    color: #94a3b8;
}

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

.seo-packages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
}

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

.seo-package {
    position: relative;
    padding: 42px 36px 44px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.08);
    transition: transform .25s ease, box-shadow .25s ease;
}

body.dark .seo-package {
    background: #0b1220;
    border-color: rgba(255,255,255,.12);
}

.seo-package:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 60px rgba(0,0,0,.20);
}

/* ===============================
   HIGHLIGHT
   =============================== */

.seo-package-highlight {
    border: 2px solid #2563eb;
    box-shadow: 0 34px 80px rgba(37,99,235,.28);
}

body.dark .seo-package-highlight {
    border-color: #60a5fa;
    box-shadow: 0 34px 80px rgba(96,165,250,.28);
}

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

.seo-package h2 {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 800;
}

/* ===============================
   PRICE  ✅ NEU & EINHEITLICH
   =============================== */

.seo-price {
    margin-bottom: 6px;
    font-size: 40px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: #2563eb;
}

body.dark .seo-price {
    color: #60a5fa;
}

.seo-price-note {
    display: block;
    margin-bottom: 30px;
    font-size: 14px;
    color: #64748b;
}

body.dark .seo-price-note {
    color: #94a3b8;
}

/* ❌ Enterprise-Sonderfall ENTFERNT */
/* Alle Pakete = gleicher Preisstil */

/* ===============================
   TABLE
   =============================== */

.seo-package table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 14px;
    font-size: 15px;
}

.seo-package td {
    padding: 0;
}

.seo-package td:first-child {
    color: #64748b;
}

body.dark .seo-package td:first-child {
    color: #94a3b8;
}

.seo-package td:last-child {
    text-align: right;
    font-weight: 700;
    color: #0f172a;
}

body.dark .seo-package td:last-child {
    color: #e5e7eb;
}

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

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

@media (max-width: 720px) {
    .seo-packages {
        padding: 100px 20px 80px;
    }

    .seo-packages-grid {
        grid-template-columns: 1fr;
    }

    .seo-packages h1 {
        font-size: 36px;
    }
}

/* ===============================
   BADGE: NEU (OBEN RECHTS, GELB)
   =============================== */

.seo-badge-new {
    position: absolute;
    top: -12px;
    right: 18px;

    padding: 6px 12px;
    border-radius: 999px;

    background: #facc15;        /* Gelb */
    color: #1e293b;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;

    box-shadow: 0 8px 20px rgba(250,204,21,.45);
    z-index: 2;
}

/* Dark Mode */
body.dark .seo-badge-new {
    color: #0f172a;
}

.seo-package-description {
    white-space: pre-line;
}

/* =====================================================
   SEO REFERENZEN – FINAL
   mit leichtem Section-Hintergrund
   passt exakt zu /includes/seo_referenzen.php */

.seo-referenzen {
    max-width: 1500px;
    margin: 0 auto;

    font-family: Inter, system-ui, sans-serif;
}

/* ===============================
   HEAD
   =============================== */

.seo-referenzen h1 {
    font-size: 44px;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    text-align: center;          /* ← mittig */
}

.seo-referenzen-intro {
    max-width: 900px;
    margin: 0 auto 64px;         /* ← horizontal zentriert */
    font-size: 18px;
    line-height: 1.6;
    color: #475569;
    text-align: center;          /* ← Text mittig */
}


body.dark .seo-referenzen-intro {
    color: #94a3b8;
}

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

.seo-referenzen-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
}

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

.seo-ref-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 22px;

    padding: 28px 28px 30px;

    display: flex;
    flex-direction: column;

    transition: transform .25s ease, box-shadow .25s ease;
}

/* Dark Card – heller als vorher */
body.dark .seo-ref-card {
    background: #0b1220;
    border-color: rgba(255,255,255,.12);
}

.seo-ref-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 60px rgba(0,0,0,.20);
}

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

.seo-ref-card img {
    width: 64px;
    height: 64px;
    object-fit: cover;

    border-radius: 12px;
    margin-bottom: 14px;
}

/* ===============================
   TITLE + STARS
   =============================== */

.seo-ref-card h2 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 6px;
}

.seo-stars {
    font-size: 15px;
    letter-spacing: 1px;
    color: #2563eb;
    margin-bottom: 12px;
}

/* ===============================
   QUOTE
   =============================== */

.seo-ref-quote {
    font-size: 14.5px;
    line-height: 1.55;
    font-style: italic;
    margin-bottom: 16px;

    color: #475569;
}

body.dark .seo-ref-quote {
    color: #cbd5f5;
}

/* ===============================
   TABLE
   =============================== */

.seo-ref-card table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;

    font-size: 14px;
}

.seo-ref-card td {
    padding: 0;
}

.seo-ref-card td:first-child {
    color: #64748b;
}

body.dark .seo-ref-card td:first-child {
    color: #94a3b8;
}

.seo-ref-card td:last-child {
    text-align: right;
    font-weight: 700;
    color: #0f172a;
}

body.dark .seo-ref-card td:last-child {
    color: #e5e7eb;
}

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

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

@media (max-width: 700px) {
    .seo-referenzen {
        padding: 100px 20px 80px;
    }

    .seo-referenzen-grid {
        grid-template-columns: 1fr;
    }

    .seo-referenzen h1 {
        font-size: 36px;
    }
}

/* =====================================================
   DOMAINCHECK – FINAL (RE-DESIGN)
   NUR FÜR DIESE DOMAINCHECK-DATEI (GENAU DIE KLASSEN)
   ===================================================== */

/* ===============================
   HERO – WEICHER, MODERNER BG
   =============================== */
.home-hero{
    position:relative;
    overflow:hidden;
    padding:0;
    background:
        radial-gradient(900px 420px at 18% 8%, rgba(37,99,235,.22), transparent 60%),
        radial-gradient(700px 360px at 92% 18%, rgba(59,130,246,.18), transparent 55%),
        linear-gradient(180deg, #0f172a 0%, #020617 100%);
}
body.light .home-hero{
    background:
        radial-gradient(900px 420px at 18% 8%, rgba(37,99,235,.16), transparent 60%),
        radial-gradient(700px 360px at 92% 18%, rgba(59,130,246,.12), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
}

/* Glow Layer */
.home-hero::before{
    content:"";
    position:absolute;
    inset:-120px -120px auto -120px;
    height:520px;
    background:
        radial-gradient(closest-side, rgba(37,99,235,.18), transparent 70%);
    filter: blur(18px);
    opacity: .9;
    pointer-events:none;
}
body.light .home-hero::before{
    opacity:.7;
}

/* ===============================
   CONTAINER / GRID
   =============================== */
.container{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}

.hero-grid{
    position:relative;
    z-index:1;

    max-width:1200px;
    margin:0 auto;
    padding:110px 20px 90px;

    display:grid;
    grid-template-columns: 1.2fr 1fr;
    gap:64px;
    align-items:center;
}

/* ===============================
   TYPO – MEHR PEP, SAUBER
   =============================== */
.hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;

    font-size:12px;
    font-weight:900;
    letter-spacing:.16em;
    text-transform:uppercase;

    color:#93c5fd;
    background: rgba(37,99,235,.18);
    border:1px solid rgba(147,197,253,.25);
    padding:8px 12px;
    border-radius:999px;
}

body.light .hero-eyebrow{
    color:#1d4ed8;
    background: rgba(37,99,235,.10);
    border-color: rgba(37,99,235,.18);
}

.hero-left h1{
    margin:18px 0 18px;
    font-size:56px;
    font-weight:950;
    line-height:1.05;
    letter-spacing:-0.03em;
    color:#e5e7eb;
}
body.light .hero-left h1{
    color:#0f172a;
}

.hero-text{
    margin:0 0 30px;
    max-width:560px;

    font-size:18px;
    line-height:1.65;
    color:#cbd5f5;
}
body.light .hero-text{
    color:#475569;
}

/* ===============================
   BUTTONS – EINHEITLICH (BLAU)
   =============================== */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:14px 26px;
    border-radius:14px;

    font-size:15px;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
    user-select:none;

    transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.btn-primary{
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color:#fff;
    border:1px solid rgba(255,255,255,.10);
    box-shadow: 0 14px 38px rgba(37,99,235,.32);
}
.btn-primary:hover{
    transform: translateY(-1px);
    box-shadow: 0 18px 48px rgba(37,99,235,.40);
}
.btn-primary:active{
    transform: translateY(0);
}

.btn-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:14px 22px;
    border-radius:14px;

    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);

    color:#e5e7eb;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;

    transition: transform .12s ease, background .18s ease, border-color .18s ease;
}
.btn-link:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.18);
}
body.light .btn-link{
    background: rgba(37,99,235,.08);
    border-color: rgba(37,99,235,.16);
    color:#1d4ed8;
}
body.light .btn-link:hover{
    background: rgba(37,99,235,.12);
    border-color: rgba(37,99,235,.22);
}

/* CTA Layout */
.hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    align-items:center;
}

/* ===============================
   METRICS – HELLER IM DARK
   =============================== */
.hero-right{
    display:grid;
    gap:16px;
}

.hero-metric{
    border-radius:18px;
    padding:22px 20px;
    text-align:left;

    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(8px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.06);
}

body.light .hero-metric{
    background:#ffffff;
    border:1px solid rgba(0,0,0,.08);
    box-shadow: 0 14px 34px rgba(15,23,42,.10);
}

.hero-metric strong{
    display:block;
    font-size:30px;
    font-weight:950;
    letter-spacing:-0.02em;
    color:#e5e7eb;
}
body.light .hero-metric strong{
    color:#0f172a;
}

.hero-metric span{
    display:block;
    margin-top:6px;
    font-size:14px;
    line-height:1.45;
    color:#cbd5f5;
}
body.light .hero-metric span{
    color:#475569;
}

/* Hover */
.hero-metric:hover{
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.16);
}
body.light .hero-metric:hover{
    box-shadow: 0 18px 44px rgba(15,23,42,.12);
}

/* ===============================
   CHECK SECTION
   =============================== */
.home-section{
    padding:90px 20px;
}

.home-section .container{
    max-width:1200px;
}

.home-section h2{
    margin:0 0 10px;
    font-size:38px;
    font-weight:950;
    letter-spacing:-0.02em;
    color:#e5e7eb;
}
body.light .home-section h2{
    color:#0f172a;
}

.home-section p{
    margin:0 0 26px;
    max-width:820px;
    font-size:17px;
    line-height:1.65;
    color:#cbd5f5;
}
body.light .home-section p{
    color:#475569;
}

/* ===============================
   SEO CHECK
   =============================== */
.seo-check{
    max-width: 980px;
    margin: 0 auto;              /* ← Block mittig */
}

.seo-check-form{
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;     /* ← Inhalt mittig */
    margin: 18px auto 26px;      /* ← Formular mittig */
}


.seo-check-form input{
    flex:1;
    padding:15px 16px;
    border-radius:14px;
    font-size:15px;

    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    color:#e5e7eb;

    outline:none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
body.light .seo-check-form input{
    background:#ffffff;
    border-color: rgba(0,0,0,.10);
    color:#0f172a;
}

.seo-check-form input::placeholder{
    color:#94a3b8;
}
.seo-check-form input:focus{
    border-color: rgba(59,130,246,.65);
    box-shadow: 0 0 0 3px rgba(59,130,246,.22);
    background: rgba(255,255,255,.08);
}
body.light .seo-check-form input:focus{
    background:#fff;
}

/* Button vom Form: exakt wie .btn-primary */
.seo-check-form button{
    padding:14px 26px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);

    font-size:15px;
    font-weight:900;

    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color:#fff;

    cursor:pointer;
    box-shadow: 0 14px 38px rgba(37,99,235,.32);
    transition: transform .12s ease, box-shadow .18s ease;
}
.seo-check-form button:hover{
    transform: translateY(-1px);
    box-shadow: 0 18px 48px rgba(37,99,235,.40);
}

/* ===============================
   RESULT STATES
   =============================== */
.seo-check-loading{
    padding:16px 0;
    font-weight:800;
    color:#cbd5f5;
}
body.light .seo-check-loading{
    color:#475569;
}

.seo-check-error{
    padding:16px 18px;
    border-radius:14px;
    background: rgba(220,38,38,.14);
    border:1px solid rgba(220,38,38,.18);
    color:#fecaca;
    font-weight:900;
}
body.light .seo-check-error{
    color:#dc2626;
}

/* ===============================
   RESULT CARD
   =============================== */
.seo-check-card{
    margin-top:18px;

    border-radius:22px;
    padding:30px 28px;

    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(10px);

    box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
body.light .seo-check-card{
    background:#ffffff;
    border-color: rgba(0,0,0,.08);
    box-shadow: 0 20px 50px rgba(15,23,42,.10);
}

.seo-check-card h2{
    margin:0 0 14px;
    font-size:22px;
    font-weight:950;
    letter-spacing:-0.01em;
    color:#e5e7eb;
}
body.light .seo-check-card h2{
    color:#0f172a;
}

.seo-check-card h3{
    font-size:18px;
    font-weight:950;
    margin:18px 0 10px;
    color:#e5e7eb;
}
body.light .seo-check-card h3{
    color:#0f172a;
}

.seo-check-card p{
    color:#cbd5f5;
}
body.light .seo-check-card p{
    color:#475569;
}

/* KPI Item */
.seo-check-item{
    padding:16px 16px;
    border-radius:16px;

    background: rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);
}
body.light .seo-check-item{
    background:#f8fafc;
    border-color: rgba(0,0,0,.06);
}

.seo-check-item span{
    display:block;
    font-size:12px;
    letter-spacing:.10em;
    text-transform:uppercase;
    font-weight:900;
    color:#cbd5f5;
    opacity:.85;
    margin-bottom:6px;
}
body.light .seo-check-item span{
    color:#64748b;
}

.seo-check-item strong{
    display:block;
    font-size:18px;
    font-weight:950;
    color:#e5e7eb;
}
body.light .seo-check-item strong{
    color:#0f172a;
}

.seo-check-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:16px;
    margin:18px 0 18px;
}

/* Lists */
.seo-check-card ul{
    margin:0;
    padding-left:18px;
    color:#cbd5f5;
}
body.light .seo-check-card ul{
    color:#475569;
}
.seo-check-card li{
    margin:6px 0;
    line-height:1.5;
}

/* Inline Buttons in Result (JS nutzt btn-link als button) */
.seo-check-card .btn-link{
    border:1px solid rgba(255,255,255,.14);
}
body.light .seo-check-card .btn-link{
    border-color: rgba(37,99,235,.18);
}

/* ===============================
   BANNER SECTION (nur spacing)
   =============================== */
.home-banner{
    padding:50px 20px 90px;
}

/* ===============================
   RESPONSIVE
   =============================== */
@media (max-width: 980px){
    .hero-grid{
        grid-template-columns: 1fr;
        gap:40px;
        padding:95px 20px 70px;
        text-align:center;
    }
    .hero-text{
        margin-left:auto;
        margin-right:auto;
    }
    .hero-actions{
        justify-content:center;
    }
    .hero-metric{
        text-align:center;
    }
}

@media (max-width: 740px){
    .hero-left h1{font-size:40px}
    .home-section h2{font-size:30px}
    .seo-check-form{
        flex-direction:column;
        align-items:stretch;
    }
    .seo-check-form button{
        width:100%;
    }
}

@media (max-width: 520px){
    .btn, .btn-primary, .btn-link{
        width:100%;
    }
}

/* =====================================================
   BACKLINKS PAGE – FINAL DESIGN
   GILT NUR FÜR backlinks.php
   ===================================================== */

/* ===============================
   HERO
   =============================== */
.home-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 420px at 20% 10%, rgba(37,99,235,.22), transparent 60%),
        radial-gradient(700px 360px at 90% 20%, rgba(59,130,246,.18), transparent 55%),
        linear-gradient(180deg, #0f172a 0%, #020617 100%);
}

body.light .home-hero {
    background:
        radial-gradient(900px 420px at 20% 10%, rgba(37,99,235,.14), transparent 60%),
        radial-gradient(700px 360px at 90% 20%, rgba(59,130,246,.10), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
}

/* ===============================
   CONTAINER / GRID
   =============================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero-grid {
    padding: 120px 20px 100px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 70px;
    align-items: center;
}

/* ===============================
   HERO TEXT
   =============================== */
.hero-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #93c5fd;
    background: rgba(37,99,235,.18);
    border-radius: 999px;
}

body.light .hero-eyebrow {
    color: #1d4ed8;
    background: rgba(37,99,235,.10);
}

.hero-left h1 {
    font-size: 56px;
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 22px;
    color: #e5e7eb;
}

body.light .hero-left h1 {
    color: #0f172a;
}

.hero-text {
    font-size: 18px;
    line-height: 1.65;
    max-width: 560px;
    margin-bottom: 36px;
    color: #cbd5f5;
}

body.light .hero-text {
    color: #475569;
}

/* ===============================
   HERO ACTIONS
   =============================== */
.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ===============================
   METRICS
   =============================== */
.hero-right {
    display: grid;
    gap: 18px;
}

.hero-metric {
    padding: 24px 22px;
    border-radius: 18px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
}

body.light .hero-metric {
    background: #ffffff;
    border-color: rgba(0,0,0,.08);
}

.hero-metric strong {
    display: block;
    font-size: 28px;
    font-weight: 950;
    margin-bottom: 6px;
    color: #e5e7eb;
}

body.light .hero-metric strong {
    color: #0f172a;
}

.hero-metric span {
    font-size: 14px;
    color: #cbd5f5;
}

body.light .hero-metric span {
    color: #475569;
}

/* ===============================
   SECTIONS
   =============================== */
.home-section {
    padding: 110px 20px;
}

.home-section h2 {
    font-size: 40px;
    font-weight: 950;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    color: #e5e7eb;
}

body.light .home-section h2 {
    color: #0f172a;
}

.home-section p {
    max-width: 820px;
    font-size: 17px;
    line-height: 1.65;
    margin-bottom: 48px;
    color: #cbd5f5;
}

body.light .home-section p {
    color: #475569;
}

/* ===============================
   CARDS GRID
   =============================== */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.card {
    padding: 30px 28px;
    border-radius: 22px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
}

body.light .card {
    background: #ffffff;
    border-color: rgba(0,0,0,.08);
}

.card h3 {
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 10px;
    color: #e5e7eb;
}

body.light .card h3 {
    color: #0f172a;
}

.card p {
    font-size: 15px;
    line-height: 1.6;
    color: #cbd5f5;
}

body.light .card p {
    color: #475569;
}

/* ===============================
   TRUST SECTION
   =============================== */
.home-trust {
    background: rgba(255,255,255,.04);
}

body.light .home-trust {
    background: #f8fafc;
}

.trust-text {
    max-width: 720px;
}

/* ===============================
   BADGES
   =============================== */
.badges-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.badge {
    padding: 18px;
    text-align: center;
    font-weight: 900;
    border-radius: 16px;
    background: rgba(37,99,235,.20);
    color: #e5e7eb;
}

body.light .badge {
    background: rgba(37,99,235,.12);
    color: #1d4ed8;
}

/* ===============================
   OFFER
   =============================== */
.home-offer {
    text-align: center;
    background:
        radial-gradient(600px 300px at 50% 0%, rgba(37,99,235,.25), transparent 60%),
        linear-gradient(180deg, #020617, #020617);
}

body.light .home-offer {
    background: #f1f5f9;
}

/* ===============================
   RESPONSIVE
   =============================== */
@media (max-width: 1000px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-text {
        margin-left: auto;
        margin-right: auto;
    }
    .hero-actions {
        justify-content: center;
    }
}

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

@media (max-width: 560px) {
    .cards-grid,
    .badges-grid {
        grid-template-columns: 1fr;
    }
    .hero-left h1 {
        font-size: 38px;
    }
}

/* =====================================================
   PUBLISHER PAGE – FINAL
   gilt NUR für backlink_anbieten.php
   ===================================================== */

/* ===============================
   HERO
   =============================== */
.home-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 420px at 15% 10%, rgba(37,99,235,.22), transparent 60%),
        radial-gradient(700px 360px at 90% 20%, rgba(59,130,246,.18), transparent 55%),
        linear-gradient(180deg, #0f172a 0%, #020617 100%);
}

body.light .home-hero {
    background:
        radial-gradient(900px 420px at 15% 10%, rgba(37,99,235,.14), transparent 60%),
        radial-gradient(700px 360px at 90% 20%, rgba(59,130,246,.10), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
}

/* ===============================
   CONTAINER / GRID
   =============================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero-grid {
    padding: 120px 20px 100px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 70px;
    align-items: center;
}

/* ===============================
   HERO TEXT (ZENTRIERT)
   =============================== */
.hero-left {
    text-align: center;
}

.hero-eyebrow {
    display: inline-block;
    margin: 0 auto 18px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    border-radius: 999px;
    color: #93c5fd;
    background: rgba(37,99,235,.18);
}

body.light .hero-eyebrow {
    color: #1d4ed8;
    background: rgba(37,99,235,.10);
}

.hero-left h1 {
    font-size: 56px;
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 22px;
    color: #e5e7eb;
}

body.light .hero-left h1 {
    color: #0f172a;
}

.hero-text {
    max-width: 620px;
    margin: 0 auto 36px;
    font-size: 18px;
    line-height: 1.65;
    color: #cbd5f5;
}

body.light .hero-text {
    color: #475569;
}

/* ===============================
   HERO ACTIONS
   =============================== */
.hero-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ===============================
   BUTTONS (GLOBAL)
   =============================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 34px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn-primary {
    background: #2563eb;
    color: #ffffff;
    border: none;
    box-shadow: 0 10px 30px rgba(37,99,235,.35);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(37,99,235,.45);
}

.btn-link {
    background: transparent;
    color: #93c5fd;
    border: 2px solid #93c5fd;
    padding: 14px 30px;
}

body.light .btn-link {
    color: #2563eb;
    border-color: #2563eb;
}

.btn-link:hover {
    background: rgba(37,99,235,.12);
}

/* ===============================
   METRICS
   =============================== */
.hero-right {
    display: grid;
    gap: 18px;
}

.hero-metric {
    padding: 24px 22px;
    border-radius: 18px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    text-align: center;
}

body.light .hero-metric {
    background: #ffffff;
    border-color: rgba(0,0,0,.08);
}

.hero-metric strong {
    display: block;
    font-size: 26px;
    font-weight: 950;
    margin-bottom: 6px;
    color: #e5e7eb;
}

body.light .hero-metric strong {
    color: #0f172a;
}

.hero-metric span {
    font-size: 14px;
    color: #cbd5f5;
}

body.light .hero-metric span {
    color: #475569;
}

/* ===============================
   SECTIONS (ZENTRIERT)
   =============================== */
.home-section {
    padding: 110px 20px;
    text-align: center;
}

.home-section h2 {
    font-size: 40px;
    font-weight: 950;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    color: #e5e7eb;
}

body.light .home-section h2 {
    color: #0f172a;
}

.home-section p {
    max-width: 820px;
    margin: 0 auto 48px;
    font-size: 17px;
    line-height: 1.65;
    color: #cbd5f5;
}

body.light .home-section p {
    color: #475569;
}

/* ===============================
   CARDS
   =============================== */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.card {
    padding: 30px 28px;
    border-radius: 22px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    text-align: left;
}

body.light .card {
    background: #ffffff;
    border-color: rgba(0,0,0,.08);
}

.card h3 {
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 10px;
    color: #e5e7eb;
}

body.light .card h3 {
    color: #0f172a;
}

.card p {
    font-size: 15px;
    line-height: 1.6;
    color: #cbd5f5;
}

body.light .card p {
    color: #475569;
}

/* ===============================
   FORM (MITTIG)
   =============================== */
.contact-form-wrap {
    max-width: 760px;
    margin: 40px auto 0;
    padding: 36px;
    border-radius: 22px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
}

body.light .contact-form-wrap {
    background: #ffffff;
    border-color: rgba(0,0,0,.08);
}

.contact-form label {
    display: block;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #e5e7eb;
}

body.light .contact-form label {
    color: #0f172a;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    margin-top: 6px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.18);
    background: #020617;
    color: #e5e7eb;
    font-size: 15px;
}

body.light .contact-form input,
body.light .contact-form select,
body.light .contact-form textarea {
    background: #ffffff;
    border-color: rgba(0,0,0,.12);
    color: #0f172a;
}

/* ===============================
   TRUST
   =============================== */
.home-trust {
    background: rgba(255,255,255,.04);
}

body.light .home-trust {
    background: #f8fafc;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.badge {
    padding: 18px;
    text-align: center;
    font-weight: 900;
    border-radius: 16px;
    background: rgba(37,99,235,.20);
    color: #e5e7eb;
}

body.light .badge {
    background: rgba(37,99,235,.12);
    color: #1d4ed8;
}

/* ===============================
   CTA / OFFER
   =============================== */
.home-offer {
    text-align: center;
    background:
        radial-gradient(600px 300px at 50% 0%, rgba(37,99,235,.25), transparent 60%),
        linear-gradient(180deg, #020617, #020617);
}

body.light .home-offer {
    background: #f1f5f9;
}

/* ===============================
   RESPONSIVE
   =============================== */
@media (max-width: 1000px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

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

@media (max-width: 560px) {
    .cards-grid,
    .badges-grid {
        grid-template-columns: 1fr;
    }
    .hero-left h1 {
        font-size: 38px;
    }
}

/* =====================================================
   CONTACT PAGE – FINAL
   ===================================================== */

/* ===============================
   HERO
   =============================== */
.home-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 420px at 15% 10%, rgba(37,99,235,.22), transparent 60%),
        radial-gradient(700px 360px at 90% 20%, rgba(59,130,246,.18), transparent 55%),
        linear-gradient(180deg, #0f172a 0%, #020617 100%);
}

body.light .home-hero {
    background:
        radial-gradient(900px 420px at 15% 10%, rgba(37,99,235,.14), transparent 60%),
        radial-gradient(700px 360px at 90% 20%, rgba(59,130,246,.10), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
}

/* ===============================
   CONTAINER
   =============================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===============================
   HERO GRID
   =============================== */
.hero-grid {
    padding: 120px 20px 100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

/* ===============================
   HERO TEXT
   =============================== */
.hero-left {
    text-align: center;
}

.hero-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    border-radius: 999px;
    color: #93c5fd;
    background: rgba(37,99,235,.18);
}

body.light .hero-eyebrow {
    color: #1d4ed8;
    background: rgba(37,99,235,.10);
}

.hero-left h1 {
    font-size: 56px;
    font-weight: 950;
    margin-bottom: 22px;
    color: #e5e7eb;
}

body.light .hero-left h1 {
    color: #0f172a;
}

.hero-text {
    max-width: 640px;
    margin: 0 auto 36px;
    font-size: 18px;
    line-height: 1.65;
    color: #cbd5f5;
}

body.light .hero-text {
    color: #475569;
}

/* ===============================
   SECTIONS
   =============================== */
.home-section {
    padding: 110px 20px;
    text-align: center;
}

.home-section h2 {
    font-size: 42px;
    font-weight: 950;
    margin-bottom: 16px;
}

.home-section p {
    max-width: 860px;
    margin: 0 auto 56px;
    font-size: 18px;
    line-height: 1.65;
}

/* ===============================
   CONTACT GRID
   =============================== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: stretch;
}

/* ===============================
   BOXES – EXAKT GLEICH
   =============================== */
.contact-form-wrap,
.contact-info {
    display: flex;
    flex-direction: column;
    padding: 46px;
    border-radius: 28px;
    min-height: 560px;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,.09),
        rgba(255,255,255,.03)
    );
    border: 1px solid rgba(255,255,255,.16);
}

body.light .contact-form-wrap,
body.light .contact-info {
    background: #ffffff;
    border-color: rgba(0,0,0,.08);
}

/* ===============================
   FORM – SCHRIFT GRÖSSER
   =============================== */
.contact-form {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.contact-form label {
    text-align: left;
    font-size: 17px;              /* ⬆ größer */
    font-weight: 800;
    margin-bottom: 22px;
}

.contact-form input,
.contact-form textarea {
    margin-top: 8px;
    padding: 18px 20px;           /* ⬆ größer */
    border-radius: 16px;
    font-size: 17px;              /* ⬆ größer */
}

.contact-form textarea {
    line-height: 1.6;
}

.contact-form button {
    margin-top: auto;
    font-size: 17px;              /* ⬆ Button Text */
    padding: 18px 28px;
}

/* ===============================
   CONTACT INFO
   =============================== */
.contact-info h2 {
    font-size: 32px;
    font-weight: 950;
    margin-bottom: 30px;
    text-align: left;
}

.contact-info ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    flex: 1;
    text-align: left;
}

.contact-info li {
    font-size: 17px;
    line-height: 1.75;
    margin-bottom: 18px;
    color: #e5e7eb;
}

body.light .contact-info li {
    color: #475569;
}

.contact-info a {
    font-weight: 800;
    font-size: 17px;
    color: #93c5fd;
    text-decoration: none;
}

body.light .contact-info a {
    color: #2563eb;
}

/* ===============================
   CAPTCHA
   =============================== */
.contact-captcha {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
    margin-bottom: 30px;
}

.captcha-box {
    padding: 18px;
    border-radius: 14px;
    font-weight: 900;
    font-size: 17px;
    letter-spacing: .24em;
    text-align: center;
    background: rgba(37,99,235,.25);
}

/* ===============================
   RESPONSIVE
   =============================== */
@media (max-width: 1000px) {
    .hero-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .hero-left h1 {
        font-size: 38px;
    }
}

/* =====================================================
   CMS PAGES – PREMIUM WEBSITE STYLE
   passend zu Hero / SEO / Packages
   ===================================================== */

/* ================= PAGE / BACKGROUND ================= */

.cms-page {
    max-width: 1400px;              /* ← ENDLICH BREIT */
    margin: 0 auto;
    padding: 120px 24px 120px;

    font-family: Inter, system-ui, sans-serif;

    /* GLEICHER CHARAKTER WIE HERO */
    background:
        radial-gradient(900px 420px at 12% 6%, rgba(37,99,235,.18), transparent 60%),
        radial-gradient(700px 360px at 88% 12%, rgba(59,130,246,.14), transparent 55%),
        linear-gradient(180deg, var(--bg), var(--bg));
}

/* ================= HEADER ================= */

.cms-header {
    max-width: 980px;
    margin: 0 auto 42px;
}

.cms-header h1 {
    font-size: 42px;                 /* ↓ kleiner als vorher */
    font-weight: 950;
    line-height: 1.08;
    letter-spacing: -0.02em;

    color: var(--text-dark);
}

body.light .cms-header h1 {
    color: var(--text-light);
}

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

.cms-content {
    max-width: 1100px;
    margin: 0 auto;

    position: relative;

    padding: 42px 52px 46px;

    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 26px;

    backdrop-filter: blur(8px);

    color: var(--text-dark);
    font-size: 14.5px;               /* ↓ professioneller */
    line-height: 1.65;

    box-shadow:
        0 28px 70px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.06);
}

/* LIGHT */
body.light .cms-content {
    background: #ffffff;
    border-color: rgba(0,0,0,.08);
    color: var(--text-light);

    box-shadow:
        0 24px 60px rgba(15,23,42,.12);
}

/* ================= LEFT ACCENT ================= */

.cms-content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22px;
    bottom: 22px;
    width: 6px;

    background: linear-gradient(
        180deg,
        #2563eb,
        #3b82f6
    );

    border-radius: 6px;
    box-shadow:
        0 0 0 6px rgba(37,99,235,.18);
}

/* ================= TEXT ================= */

.cms-content p {
    margin: 0 0 14px;
}

/* ================= HEADINGS ================= */

.cms-content h2 {
    margin: 34px 0 12px;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.cms-content h3 {
    margin: 22px 0 10px;
    font-size: 16px;
    font-weight: 800;
    opacity: .9;
}

/* ================= LISTS ================= */

.cms-content ul,
.cms-content ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

.cms-content li {
    margin-bottom: 6px;
}

/* ================= LINKS ================= */

.cms-content a {
    color: #60a5fa;
    font-weight: 700;
    text-decoration: underline;
}

.cms-content a:hover {
    text-decoration-thickness: 2px;
}

/* ================= TABLES ================= */

.cms-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0;
    font-size: 14px;
}

.cms-content th,
.cms-content td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.14);
}

body.light .cms-content th,
body.light .cms-content td {
    border-bottom-color: rgba(0,0,0,.08);
}

.cms-content th {
    font-weight: 800;
}

/* ================= INFO BLOCKS ================= */

.cms-content blockquote {
    margin: 22px 0;
    padding: 16px 20px;

    background: rgba(37,99,235,.12);
    border-left: 4px solid #2563eb;
    border-radius: 12px;

    font-style: normal;
}

/* ================= MOBILE ================= */

@media (max-width: 1100px) {
    .cms-header h1 {
        font-size: 36px;
    }

    .cms-content {
        padding: 30px 26px;
        font-size: 14.8px;
    }
}

@media (max-width: 700px) {
    .cms-page {
        padding: 90px 16px 90px;
    }

    .cms-header h1 {
        font-size: 30px;
    }
}
.feature-intro {
    max-width: 820px;
    margin: 80px auto 40px;
    padding: 0 20px;
}

.feature-intro h1 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 18px;
    line-height: 1.2;
}

.feature-intro p {
    font-size: 18px;
    color: #cbd5f5;
    max-width: 640px;
    margin-bottom: 28px;
}

.btn-primary {
    display: inline-block;
    padding: 14px 26px;
    background: #2563eb;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}
.seo-details {
    max-width: 820px;
    margin: 60px auto 80px;
    padding: 0 20px;
}

.seo-details summary {
    cursor: pointer;
    font-size: 15px;
    color: #94a3b8;
    margin-bottom: 16px;
}

.seo-content {
    margin-top: 20px;
    color: #cbd5f5;
    line-height: 1.7;
}