:root{
    --bg:#070912;
    --bg-soft:rgba(7,9,18,.72);
    --card:rgba(0,0,0,.55);
    --card-soft:rgba(255,255,255,.05);
    --border:rgba(255,255,255,.10);
    --text:#eaf0ff;
    --muted:#9aa4c4;
    --cyan:#22D3EE;
    --purple:#7C3AED;
    --orange:#F97316;
    --danger:#ff6b81;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    scrollbar-gutter:stable;
}

body{
    margin:0;
    font-family:Inter,system-ui,sans-serif;
    color:var(--text);
    background:var(--bg);
    overflow-x:hidden;
    overflow-y:scroll;
    min-height:100vh;
}

body.lightbox-open{
    overflow:hidden;
}

.bg{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    z-index:-2;
    opacity:0;
    transform:scale(1.02);
    transition:opacity 2s ease, transform 8s ease;
}

.bg.active{
    opacity:1;
    transform:scale(1);
}

.overlay{
    position:fixed;
    inset:0;
    background:
        radial-gradient(1200px 900px at 18% 8%, rgba(124,58,237,.16), transparent 58%),
        radial-gradient(900px 700px at 82% 28%, rgba(34,211,238,.12), transparent 58%),
        linear-gradient(rgba(7,9,18,.38), rgba(7,9,18,.72));
    z-index:-1;
}

/* NAV */

.nav{
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter:blur(12px);
    background:rgba(7,9,18,.62);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.nav .bar{
    width:min(1200px,92%);
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:18px 0;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:#fff;
    min-width:0;
}

.brand img{
    height:42px;
    width:auto;
    border-radius:8px;
}

.brandtext{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.brandtext strong{
    font-size:18px;
    line-height:1.1;
}

.brandtext small{
    display:block;
    font-size:12px;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.navlinks{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:10px;
}

.navlinks a{
    text-decoration:none;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);
    color:#fff;
    font-size:14px;
    font-weight:600;
    transition:.2s ease;
}

.navlinks a:hover{
    background:rgba(255,255,255,.10);
    border-color:rgba(255,255,255,.18);
    transform:translateY(-1px);
}

.navlinks a.active{
    background:linear-gradient(135deg, rgba(124,58,237,.30), rgba(34,211,238,.20));
    border-color:rgba(34,211,238,.34);
    box-shadow:
        0 10px 28px rgba(34,211,238,.14),
        inset 0 1px 0 rgba(255,255,255,.06);
    color:#fff;
}

/* GLOBAL LAYOUT */

.section{
    width:min(1200px,92%);
    margin:auto;
}

.container{
    width:min(1200px,92%);
    margin:auto;
    padding:36px 0 80px;
}

.page-head{
    width:min(1200px,92%);
    margin:0 auto;
    padding:72px 0 20px;
}

.page-head h1{
    font-size:56px;
    line-height:1.02;
    margin:0 0 12px;
    font-weight:800;
    letter-spacing:-0.03em;
    text-wrap:balance;
}

.page-head p{
    margin:0;
    color:var(--muted);
    font-size:18px;
}

.grad{
    background:linear-gradient(90deg, var(--cyan) 0%, #7dd3fc 18%, var(--purple) 56%, var(--orange) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.card{
    background:var(--card);
    border:1px solid rgba(255,255,255,.06);
    border-radius:24px;
    padding:34px;
    backdrop-filter:blur(10px);
    box-shadow:0 12px 40px rgba(0,0,0,.22);
}

.card h1,
.card h2,
.card h3{
    margin-top:0;
}

.card h1{
    font-size:42px;
    margin-bottom:20px;
}

.card h2{
    font-size:26px;
    margin:34px 0 14px;
    color:var(--cyan);
}

.card p{
    color:var(--text);
    line-height:1.7;
    margin:0 0 16px;
}

.card ul{
    margin:0 0 20px 0;
    padding-left:20px;
}

.card li{
    margin-bottom:10px;
    line-height:1.7;
    color:var(--text);
}

.note{
    margin:18px 0 0;
    padding:14px 16px;
    border-radius:16px;
    background:rgba(124,58,237,.12);
    border:1px solid rgba(124,58,237,.28);
}

/* HERO */

.hero{
    width:min(1200px,92%);
    margin:auto;
    padding:96px 0 56px;
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(320px,430px);
    align-items:center;
    gap:40px;
    min-height:calc(100vh - 240px);
}

.hero-copy h1{
    font-size:clamp(46px,6vw,76px);
    line-height:0.94;
    margin:0 0 20px;
    font-weight:800;
    letter-spacing:-0.04em;
    text-wrap:balance;
    text-shadow:0 10px 30px rgba(0,0,0,.20);
}

.lead{
    color:var(--muted);
    font-size:20px;
    line-height:1.7;
    margin:0 0 30px;
    max-width:640px;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:4px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:13px 20px;
    min-height:48px;
    border-radius:14px;
    background:linear-gradient(135deg,var(--purple),var(--cyan));
    text-decoration:none;
    color:#fff;
    font-weight:700;
    border:none;
    cursor:pointer;
    transition:.22s ease;
    box-shadow:0 10px 30px rgba(34,211,238,.18);
}

.btn:hover{
    transform:translateY(-2px) scale(1.015);
    filter:brightness(1.05);
    box-shadow:0 14px 36px rgba(34,211,238,.22);
}

.btn.secondary{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:none;
}

.btn.secondary:hover{
    background:rgba(255,255,255,.09);
}

/* STATUS PANEL */

.panel{
    border-radius:24px;
    padding:22px;
    background:linear-gradient(180deg, rgba(3,8,18,.76), rgba(2,6,14,.70));
    border:1px solid rgba(255,255,255,.07);
    backdrop-filter:blur(14px);
    box-shadow:
        0 16px 44px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.status-panel{
    position:relative;
    overflow:hidden;
    transition:.25s ease;
    box-shadow:
        0 18px 46px rgba(0,0,0,.26),
        0 0 0 1px rgba(255,255,255,.03),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.status-panel:hover{
    transform:translateY(-4px);
    box-shadow:
        0 26px 60px rgba(0,0,0,.32),
        0 0 0 1px rgba(34,211,238,.10),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.status-panel::before{
    content:"";
    position:absolute;
    inset:-1px;
    pointer-events:none;
    border-radius:24px;
    background:linear-gradient(135deg, rgba(124,58,237,.18), rgba(34,211,238,.08), transparent 62%);
    opacity:.82;
}

.status-panel::after{
    content:"";
    position:absolute;
    inset:auto -40px -60px auto;
    width:180px;
    height:180px;
    border-radius:999px;
    background:radial-gradient(circle, rgba(34,211,238,.16), transparent 68%);
    pointer-events:none;
}

.status-top{
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
}

.status-eyebrow{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.20em;
    color:var(--muted);
    margin-bottom:8px;
    opacity:.95;
}

.status-top h3{
    margin:0;
    font-size:24px;
    line-height:1.06;
    letter-spacing:-0.02em;
    max-width:240px;
}

.status-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 11px;
    border-radius:999px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.07);
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}

.status-dot{
    width:8px;
    height:8px;
    border-radius:999px;
    background:#f59e0b;
    box-shadow:0 0 10px rgba(245,158,11,.60);
}

.status-pill.is-online .status-dot{
    background:#22D3EE;
    box-shadow:0 0 10px rgba(34,211,238,.60);
}

.status-pill.is-offline .status-dot{
    background:#ff6b81;
    box-shadow:0 0 10px rgba(255,107,129,.60);
}

.status-pill.is-unknown .status-dot{
    background:#f59e0b;
    box-shadow:0 0 10px rgba(245,158,11,.60);
}

.stats{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.stat{
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.07);
    padding:15px 16px;
    border-radius:16px;
    min-height:86px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    transition:.22s ease;
}

.stat:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.10);
}

.stat-label{
    display:block;
    color:var(--muted);
    font-size:12px;
    letter-spacing:.04em;
    margin-bottom:8px;
}

.stat-value{
    font-size:20px;
    font-weight:800;
    color:#fff;
    letter-spacing:-0.02em;
}

.ipbox{
    position:relative;
    z-index:1;
    margin-top:18px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.07);
    padding:13px 14px;
    border-radius:16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    transition:.22s ease;
}

.ipbox:hover{
    background:rgba(255,255,255,.055);
    border-color:rgba(255,255,255,.10);
}

.ip-meta{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}

.ip-label{
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
}

.ip-text{
    font-weight:800;
    font-size:19px;
    line-height:1.1;
    letter-spacing:-0.02em;
    word-break:break-word;
}

.copybtn{
    background:var(--cyan);
    color:#061019;
    border:none;
    padding:10px 15px;
    border-radius:12px;
    cursor:pointer;
    font-weight:800;
    transition:.22s ease;
    white-space:nowrap;
    min-width:120px;
    font-size:14px;
}

.copybtn:hover{
    transform:translateY(-1px) scale(1.02);
    filter:brightness(1.04);
    box-shadow:0 10px 26px rgba(34,211,238,.22);
}

.copybtn.copied{
    background:#7C3AED;
    color:#fff;
}

/* FEATURES */

.features-section{
    width:min(1200px,92%);
    margin:0 auto;
    padding:30px 0 70px;
}

.section-head{
    max-width:760px;
    margin-bottom:28px;
}

.section-kicker{
    display:inline-block;
    margin-bottom:12px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--cyan);
    text-shadow:0 6px 20px rgba(34,211,238,.18);
}

.section-head h2{
    margin:0 0 14px;
    font-size:42px;
    line-height:1.04;
    letter-spacing:-0.03em;
    text-wrap:balance;
}

.section-head p{
    margin:0;
    color:var(--muted);
    font-size:18px;
    line-height:1.8;
    max-width:720px;
}

.features-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:16px;
}

.feature-card{
    background:linear-gradient(180deg, rgba(0,0,0,.50), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.07);
    border-radius:22px;
    padding:24px;
    backdrop-filter:blur(10px);
    box-shadow:0 12px 34px rgba(0,0,0,.18);
    transition:.24s ease;
}

.feature-card:hover{
    transform:translateY(-4px) scale(1.01);
    border-color:rgba(34,211,238,.18);
    box-shadow:0 18px 42px rgba(0,0,0,.24);
}

.feature-icon{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    font-size:24px;
    margin-bottom:16px;
    border-radius:16px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    transition:.24s ease;
}

.feature-card:hover .feature-icon{
    transform:scale(1.08);
    border-color:rgba(34,211,238,.22);
    background:rgba(34,211,238,.08);
}

.feature-card h3{
    margin:0 0 12px;
    font-size:22px;
}

.feature-card p{
    margin:0;
    color:var(--muted);
    line-height:1.75;
    font-size:15px;
}

/* GALLERY */

.gallery-section{
    width:min(1200px,92%);
    margin:0 auto;
    padding:0 0 80px;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:16px;
}

.gallery-item{
    position:relative;
    padding:0;
    border:none;
    background:rgba(0,0,0,.38);
    border-radius:22px;
    overflow:hidden;
    cursor:pointer;
    border:1px solid rgba(255,255,255,.07);
    box-shadow:0 12px 34px rgba(0,0,0,.18);
    transition:.24s ease;
}

.gallery-item:hover{
    transform:translateY(-5px) scale(1.012);
    border-color:rgba(34,211,238,.22);
    box-shadow:0 22px 52px rgba(0,0,0,.28);
}

.gallery-item img{
    display:block;
    width:100%;
    aspect-ratio:16 / 10;
    object-fit:cover;
    transition:transform .4s ease, filter .4s ease;
}

.gallery-item:hover img{
    transform:scale(1.07);
    filter:brightness(.78);
}

.gallery-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:linear-gradient(rgba(7,9,18,.08), rgba(7,9,18,.68));
    opacity:0;
    transition:.24s ease;
    color:#fff;
    pointer-events:none;
}

.gallery-item:hover .gallery-overlay{
    opacity:1;
}

.gallery-plus{
    width:56px;
    height:56px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:rgba(34,211,238,.18);
    border:1px solid rgba(34,211,238,.30);
    font-size:30px;
    font-weight:700;
    box-shadow:
        0 12px 30px rgba(34,211,238,.18),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.gallery-text{
    font-size:14px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
}

/* LIGHTBOX */

.lightbox{
    position:fixed;
    inset:0;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    background:rgba(4,7,14,.90);
    backdrop-filter:blur(14px);
    opacity:0;
    visibility:hidden;
    transition:.22s ease;
}

.lightbox.active{
    opacity:1;
    visibility:visible;
}

.lightbox-content{
    position:relative;
    max-width:min(1240px,92vw);
    max-height:86vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.lightbox-content img{
    display:block;
    max-width:100%;
    max-height:86vh;
    object-fit:contain;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:
        0 30px 90px rgba(0,0,0,.42),
        0 0 0 1px rgba(255,255,255,.03);
}

.lightbox-close,
.lightbox-nav{
    position:absolute;
    border:none;
    cursor:pointer;
    color:#fff;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(12px);
    box-shadow:0 10px 30px rgba(0,0,0,.20);
    transition:.2s ease;
}

.lightbox-close:hover,
.lightbox-nav:hover{
    background:rgba(255,255,255,.16);
    transform:translateY(-1px);
}

.lightbox-close{
    top:20px;
    right:24px;
    width:50px;
    height:50px;
    border-radius:999px;
    font-size:30px;
    line-height:1;
}

.lightbox-nav{
    top:50%;
    transform:translateY(-50%);
    width:58px;
    height:58px;
    border-radius:999px;
    font-size:34px;
    line-height:1;
}

.lightbox-prev{
    left:24px;
}

.lightbox-next{
    right:24px;
}

/* RULES */

.rules-hero-polished{
    width:min(1200px,92%);
    margin:0 auto;
    padding:62px 0 18px;
}

.rules-hero-polished .rules-hero-inner{
    max-width:760px;
}

.rules-kicker{
    display:inline-block;
    margin-bottom:12px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.20em;
    text-transform:uppercase;
    color:var(--cyan);
    text-shadow:0 6px 20px rgba(34,211,238,.18);
}

.rules-hero-polished h1{
    margin:0 0 10px;
    font-size:clamp(48px,7vw,78px);
    line-height:.95;
    font-weight:800;
    letter-spacing:-0.04em;
}

.rules-hero-polished p{
    margin:0;
    font-size:19px;
    line-height:1.7;
    color:var(--muted);
    max-width:700px;
}

.rules-polished-wrap{
    width:min(1200px,92%);
    margin:0 auto;
    padding:10px 0 80px;
}

.rules-intro-strip{
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px 20px;
    margin-bottom:18px;
    border-radius:22px;
    background:rgba(0,0,0,.42);
    border:1px solid rgba(255,255,255,.07);
    backdrop-filter:blur(12px);
    box-shadow:0 12px 30px rgba(0,0,0,.16);
}

.rules-intro-strip-icon{
    width:52px;
    height:52px;
    border-radius:16px;
    display:grid;
    place-items:center;
    font-size:24px;
    background:rgba(34,211,238,.12);
    border:1px solid rgba(34,211,238,.22);
    flex-shrink:0;
}

.rules-intro-strip-content{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.rules-intro-strip-content strong{
    font-size:18px;
}

.rules-intro-strip-content span{
    color:var(--muted);
    line-height:1.7;
}

.rules-grid-polished{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:18px;
}

.rules-panel{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(5,10,20,.80), rgba(4,8,16,.72));
    border:1px solid rgba(255,255,255,.08);
    border-radius:26px;
    padding:22px;
    backdrop-filter:blur(14px);
    box-shadow:
        0 16px 40px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.03);
    transition:.24s ease;
}

.rules-panel::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:26px;
    pointer-events:none;
    background:linear-gradient(135deg, rgba(124,58,237,.10), rgba(34,211,238,.04), transparent 64%);
    opacity:.8;
}

.rules-panel:hover{
    transform:translateY(-3px);
    box-shadow:
        0 22px 50px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.rules-panel-wide{
    grid-column:1 / -1;
}

.rules-panel-head{
    position:relative;
    z-index:1;
    margin-bottom:18px;
}

.rules-tag{
    display:inline-flex;
    align-items:center;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
    font-size:13px;
    font-weight:700;
    margin-bottom:12px;
}

.rules-panel-head h2{
    margin:0;
    font-size:30px;
    line-height:1.06;
}

.rules-lines{
    position:relative;
    z-index:1;
    display:grid;
    gap:10px;
}

.rules-lines.compact{
    gap:8px;
}

.rules-lines-two{
    grid-template-columns:repeat(2, minmax(0,1fr));
}

.rules-line{
    position:relative;
    padding:15px 16px 15px 20px;
    border-radius:18px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    transition:.2s ease;
}

.rules-line::before{
    content:"";
    position:absolute;
    left:0;
    top:14%;
    bottom:14%;
    width:4px;
    border-radius:999px;
    background:linear-gradient(180deg, var(--cyan), var(--purple));
    opacity:.85;
}

.rules-line:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,.055);
    border-color:rgba(255,255,255,.09);
}

.rules-line p{
    margin:0;
    color:#fff;
    line-height:1.72;
}

.rules-message{
    position:relative;
    z-index:1;
    margin-top:16px;
    padding:16px 18px;
    border-radius:18px;
    line-height:1.7;
}

.rules-message-purple{
    background:rgba(124,58,237,.12);
    border:1px solid rgba(124,58,237,.22);
}

.rules-message-orange{
    background:rgba(249,115,22,.10);
    border:1px solid rgba(249,115,22,.24);
}

.rules-split{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.rules-subpanel{
    padding:18px;
    border-radius:20px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.07);
}

.rules-subpanel-danger{
    background:rgba(255,107,129,.08);
    border-color:rgba(255,107,129,.22);
}

.rules-subpanel h3{
    margin:0 0 14px;
    font-size:21px;
}

.rules-end-box{
    position:relative;
    z-index:1;
    display:grid;
    gap:14px;
}

.rules-end-box p{
    margin:0;
    padding:18px;
    border-radius:18px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    line-height:1.74;
}

/* LEGAL */

.legal-page{
    width:min(1200px,92%);
    margin:0 auto;
    padding:10px 0 80px;
}

.legal-card{
    background:linear-gradient(180deg, rgba(5,10,20,.80), rgba(4,8,16,.72));
    border:1px solid rgba(255,255,255,.08);
    border-radius:28px;
    padding:28px;
    backdrop-filter:blur(14px);
    box-shadow:
        0 18px 44px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.03);
}

.legal-card h2{
    margin:0 0 14px;
    font-size:28px;
    line-height:1.12;
    color:#fff;
}

.legal-card h3{
    margin:28px 0 10px;
    font-size:20px;
    color:var(--cyan);
}

.legal-card p{
    margin:0 0 14px;
    color:#fff;
    line-height:1.8;
}

.legal-card p:last-child{
    margin-bottom:0;
}

/* FOOTER */

footer{
    width:min(1200px,92%);
    margin:24px auto 0;
    text-align:center;
    padding:22px 20px 32px;
    color:var(--muted);
    background:rgba(0,0,0,.30);
    border:1px solid rgba(255,255,255,.06);
    border-radius:22px 22px 0 0;
    backdrop-filter:blur(10px);
}

footer .footer-links{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:14px;
}

footer a{
    color:#fff;
    text-decoration:none;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    transition:.2s ease;
}

footer a:hover{
    text-decoration:none;
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.14);
    transform:translateY(-1px);
}

/* RESPONSIVE */

@media (max-width: 1100px){
    .features-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }

    .gallery-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }

    .rules-grid-polished{
        grid-template-columns:1fr;
    }

    .rules-panel-wide{
        grid-column:auto;
    }

    .rules-lines-two{
        grid-template-columns:1fr;
    }
}

@media (max-width: 980px){
    .updates-featured-card{
        grid-template-columns:1fr;
    }

    .updates-featured-media img{
        aspect-ratio:16 / 9;
    }

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

    .panel{
        max-width:520px;
    }

    .page-head{
        padding-top:56px;
    }

    .page-head h1{
        font-size:42px;
    }

    .rules-split{
        grid-template-columns:1fr;
    }
}

@media (max-width: 760px){
    .nav .bar{
        flex-direction:column;
        align-items:flex-start;
    }

    .navlinks{
        width:100%;
        justify-content:flex-start;
    }

    .hero-copy h1{
        font-size:42px;
    }

    .lead{
        font-size:18px;
    }

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

    .ipbox{
        flex-direction:column;
        align-items:flex-start;
    }

    .status-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .card{
        padding:24px;
        border-radius:20px;
    }

    .card h1{
        font-size:34px;
    }

    .card h2{
        font-size:22px;
    }

    .ip-text{
        font-size:18px;
    }

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

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

    .section-head h2{
        font-size:32px;
    }

    .lightbox{
        padding:20px;
    }

    .lightbox-close{
        top:12px;
        right:12px;
    }

    .lightbox-prev{
        left:12px;
    }

    .lightbox-next{
        right:12px;
    }

    .rules-hero-polished{
        padding-top:56px;
    }

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

    .rules-hero-polished p{
        font-size:18px;
    }

    .rules-intro-strip{
        align-items:flex-start;
    }

    .rules-panel{
        padding:20px;
        border-radius:22px;
    }

    .rules-panel-head h2{
        font-size:26px;
    }

    .legal-card{
        padding:22px;
        border-radius:22px;
    }

    .legal-card h2{
        font-size:24px;
    }
}


/* MICRO UX / ANIMATIONEN */

.btn:active{
    transform:translateY(1px) scale(0.98);
}





/* RULES FLOW B */

.rules-flow-hero{
    width:min(1200px,92%);
    margin:0 auto;
    padding:76px 0 20px;
}

.rules-flow-hero-inner{
    max-width:760px;
}

.rules-flow-kicker{
    display:inline-block;
    margin-bottom:12px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.20em;
    text-transform:uppercase;
    color:var(--cyan);
    text-shadow:0 6px 20px rgba(34,211,238,.18);
}

.rules-flow-hero h1{
    margin:0 0 14px;
    font-size:clamp(52px,7vw,84px);
    line-height:.94;
    font-weight:800;
    letter-spacing:-0.04em;
    text-wrap:balance;
}

.rules-flow-hero p{
    margin:0;
    max-width:720px;
    color:var(--muted);
    font-size:19px;
    line-height:1.8;
}

.rules-flow-page{
    width:min(1200px,92%);
    margin:0 auto;
    padding:18px 0 88px;
}

.rules-flow-shell{
    max-width:1020px;
}

.rules-flow-intro{
    display:flex;
    align-items:center;
    gap:16px;
    padding:20px 22px;
    margin-bottom:34px;
    border-radius:22px;
    background:rgba(0,0,0,.36);
    border:1px solid rgba(255,255,255,.07);
    backdrop-filter:blur(12px);
    box-shadow:0 12px 30px rgba(0,0,0,.16);
}

.rules-flow-intro-icon{
    width:52px;
    height:52px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:16px;
    font-size:24px;
    background:rgba(34,211,238,.12);
    border:1px solid rgba(34,211,238,.22);
}

.rules-flow-intro-text{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.rules-flow-intro-text strong{
    font-size:18px;
}

.rules-flow-intro-text span{
    color:var(--muted);
    line-height:1.6;
}

.rules-flow-section{
    position:relative;
    margin-bottom:40px;
    padding-left:34px;
}

.rules-flow-section::before{
    content:"";
    position:absolute;
    left:9px;
    top:0;
    bottom:0;
    width:2px;
    background:linear-gradient(180deg, rgba(34,211,238,.28), rgba(124,58,237,.18), rgba(255,255,255,.04));
}

.rules-flow-head{
    position:relative;
    margin-bottom:18px;
}

.rules-flow-head::before{
    content:"";
    position:absolute;
    left:-34px;
    top:10px;
    width:20px;
    height:20px;
    border-radius:999px;
    background:radial-gradient(circle, rgba(34,211,238,.95) 0 28%, rgba(34,211,238,.20) 29% 100%);
    box-shadow:0 0 22px rgba(34,211,238,.20);
}





.rules-flow-label{
    display:inline-flex;
    align-items:center;
    gap:10px;

    font-size:16px;
    padding:11px 18px;
    border-radius:999px;

    font-weight:700;
    letter-spacing:.03em;

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04);

    backdrop-filter:blur(10px);
}





.rules-flow-head h2{
    display:none;
    margin:0;
    font-size:38px;
    line-height:1.02;
    letter-spacing:-0.04em;
    text-wrap:balance;
}

.rules-flow-list{
    display:grid;
    gap:12px;
}

.rules-flow-list.compact{
    gap:8px;
}

.rules-flow-item{
    position:relative;
    padding-left:18px;
}

.rules-flow-item::before{
    content:"";
    position:absolute;
    left:0;
    top:12px;
    width:8px;
    height:8px;
    border-radius:999px;
    background:linear-gradient(180deg, var(--cyan), var(--purple));
    box-shadow:0 0 12px rgba(34,211,238,.24);
}

.rules-flow-item p{
    margin:0;
    padding:0 0 16px;
    color:#fff;
    line-height:1.85;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.rules-flow-note{
    margin-top:18px;
    padding:17px 18px;
    border-radius:18px;
    line-height:1.78;
}

.rules-flow-note-purple{
    background:rgba(124,58,237,.12);
    border:1px solid rgba(124,58,237,.22);
}

.rules-flow-note-orange{
    background:rgba(249,115,22,.10);
    border:1px solid rgba(249,115,22,.24);
}

.rules-flow-sanctions{
    padding:22px 24px;
    border-radius:22px;
    background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 14px 32px rgba(0,0,0,.16);
}

.rules-flow-sanctions-block h3{
    margin:0 0 14px;
    font-size:24px;
    line-height:1.08;
    letter-spacing:-0.02em;
}

.rules-flow-sanctions-block-danger h3{
    color:#ffd7df;
}

.rules-flow-sanctions-divider{
    height:1px;
    margin:18px 0;
    background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.14), rgba(255,255,255,.04));
}

@media (max-width: 760px){
    .rules-flow-hero{
        padding-top:56px;
    }

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

    .rules-flow-hero p{
        font-size:18px;
    }

    .rules-flow-intro{
        align-items:flex-start;
    }

    .rules-flow-section{
        padding-left:28px;
    }

    .rules-flow-head::before{
        left:-28px;
    }

    .rules-flow-head h2{
    display:none;
        font-size:32px;
    }

    .rules-flow-sanctions{
        padding:18px;
    }

    .rules-flow-sanctions-block h3{
        font-size:22px;
    }
}


.rules-flow-section{
    transition:opacity .25s ease, transform .25s ease;
}

.rules-flow-section .rules-flow-label{
    transition:
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease,
        color .25s ease;
}

.rules-flow-section .rules-flow-head::before{
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease,
        opacity .25s ease;
}

.rules-flow-section:not(.is-active){
    opacity:.82;
}

.rules-flow-section.is-active{
    opacity:1;
}

.rules-flow-section.is-active .rules-flow-label{
    background:linear-gradient(135deg, rgba(124,58,237,.18), rgba(34,211,238,.14));
    border-color:rgba(34,211,238,.26);
    box-shadow:
        0 10px 26px rgba(34,211,238,.10),
        inset 0 1px 0 rgba(255,255,255,.05);
    transform:translateY(-1px);
}

.rules-flow-section.is-active .rules-flow-head::before{
    transform:scale(1.12);
    background:radial-gradient(circle, rgba(34,211,238,1) 0 30%, rgba(34,211,238,.24) 31% 100%);
    box-shadow:
        0 0 0 6px rgba(34,211,238,.08),
        0 0 24px rgba(34,211,238,.28);
}

@media (prefers-reduced-motion: reduce){
    .rules-flow-section,
    .rules-flow-section .rules-flow-label,
    .rules-flow-section .rules-flow-head::before{
        transition:none;
    }
}


/* HERO FADE-IN */

.hero-copy{
    animation:heroFadeUp .7s ease both;
}

.status-panel{
    animation:heroFadeUp .9s ease both;
}

@keyframes heroFadeUp{
    from{
        opacity:0;
        transform:translateY(18px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* CUSTOM SCROLLBAR */

html{
    scrollbar-color: rgba(124,58,237,.65) rgba(255,255,255,.06);
    scrollbar-width: thin;
}

::-webkit-scrollbar{
    width:12px;
}

::-webkit-scrollbar-track{
    background:rgba(255,255,255,.05);
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg, rgba(124,58,237,.85), rgba(34,211,238,.75));
    border-radius:999px;
    border:2px solid rgba(7,9,18,.85);
}

::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg, rgba(124,58,237,1), rgba(34,211,238,.95));
}


/* CURSOR GLOW */

#cursor-glow{
    position:fixed;
    top:0;
    left:0;
    width:170px;
    height:170px;
    border-radius:50%;
    pointer-events:none;
    z-index:9999;
    transform:translate(-50%, -50%) scale(1);
    background:
        radial-gradient(circle,
            rgba(255,255,255,0.09) 0%,
            rgba(255,255,255,0.055) 30%,
            rgba(255,255,255,0.022) 50%,
            transparent 74%
        );
    filter:blur(38px);
    opacity:0.36;
    mix-blend-mode:screen;
    will-change:left, top, width, height, opacity, filter, transform, background;
    transition:
        width .18s ease,
        height .18s ease,
        opacity .18s ease,
        filter .18s ease,
        transform .18s ease,
        background .18s ease;
}

#cursor-glow.is-moving{
    opacity:0.44;
    filter:blur(40px);
}

#cursor-glow.is-hover{
    width:205px;
    height:205px;
    opacity:0.56;
    filter:blur(44px);
    background:
        radial-gradient(circle,
            rgba(255,255,255,0.11) 0%,
            rgba(255,255,255,0.065) 30%,
            rgba(34,211,238,0.035) 52%,
            transparent 76%
        );
}

#cursor-glow.is-click{
    transform:translate(-50%, -50%) scale(0.94);
    opacity:0.62;
}

@media (pointer: coarse){
    #cursor-glow{
        display:none;
    }
}



/* BRANDING OVERHAUL */

.hero-branding{
    align-items:center;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:18px;
    padding:10px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
    font-size:14px;
    font-weight:700;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.hero-points{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:0 0 30px;
}

.hero-points span{
    display:inline-flex;
    align-items:center;
    padding:9px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
    font-size:14px;
    font-weight:600;
}

.brand-status-panel{
    position:relative;
}

.brand-mini-note{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.08);
    color:var(--muted);
    font-size:14px;
    line-height:1.6;
}

.brand-story-section{
    width:min(1200px,92%);
    margin:0 auto;
    padding:0 0 64px;
}

.brand-story-card{
    padding:30px;
    border-radius:28px;
    background:linear-gradient(180deg, rgba(5,10,20,.80), rgba(4,8,16,.72));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
        0 18px 44px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.03);
    backdrop-filter:blur(14px);
}

.brand-story-kicker{
    display:inline-block;
    margin-bottom:12px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--cyan);
    text-shadow:0 6px 20px rgba(34,211,238,.18);
}

.brand-story-card h2{
    margin:0 0 14px;
    font-size:40px;
    line-height:1.06;
    letter-spacing:-0.03em;
    text-wrap:balance;
}

.brand-story-card p{
    margin:0 0 24px;
    color:var(--muted);
    font-size:18px;
    line-height:1.8;
    max-width:860px;
}

.brand-story-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:16px;
}

.brand-story-item{
    padding:20px;
    border-radius:20px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.07);
}

.brand-story-item strong{
    display:block;
    margin-bottom:10px;
    font-size:19px;
    color:#fff;
}

.brand-story-item span{
    display:block;
    color:var(--muted);
    line-height:1.7;
}

.features-section{
    width:min(1200px,92%);
    margin:0 auto;
    padding:0 0 72px;
}

.section-head{
    margin:0 0 26px;
}

.feature-card-realm{
    background:linear-gradient(180deg, rgba(124,58,237,.18), rgba(34,211,238,.06));
    border-color:rgba(34,211,238,.18);
    box-shadow:0 18px 42px rgba(0,0,0,.24);
}

.progress-showcase{
    width:min(1200px,92%);
    margin:0 auto;
    padding:0 0 80px;
}

.progress-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:18px;
}

.progress-card{
    padding:26px;
    border-radius:24px;
    background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    transition:.25s ease;
}

.progress-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 42px rgba(0,0,0,.25);
    border-color:rgba(34,211,238,.2);
}

.progress-step{
    display:inline-block;
    margin-bottom:14px;
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    background:rgba(34,211,238,.12);
    border:1px solid rgba(34,211,238,.25);
    color:var(--cyan);
}

.progress-card h3{
    margin:0 0 10px;
    font-size:22px;
}

.progress-card p{
    margin:0;
    color:var(--muted);
    line-height:1.7;
}

.gallery-section{
    width:min(1200px,92%);
    margin:0 auto;
    padding:0 0 80px;
}

@media (max-width: 1100px){
    .brand-story-grid,
    .progress-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 760px){
    .hero-points{
        margin-bottom:24px;
    }

    .hero-points span{
        font-size:13px;
    }

    .brand-story-card{
        padding:22px;
        border-radius:22px;
    }

    .brand-story-card h2{
        font-size:32px;
    }

    .brand-story-card p{
        font-size:17px;
    }

    .progress-card{
        padding:22px;
        border-radius:22px;
    }
}

/* LIVE SECTION */

.live-section{
    width:100%;
    padding:14px 0 42px;
}

.live-container{
    width:min(1200px,92%);
    margin:0 auto;
}

.live-kicker{
    display:inline-block;
    margin-bottom:12px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--cyan);
    text-shadow:0 6px 20px rgba(34,211,238,.18);
}

.live-container h2{
    margin:0 0 10px;
    font-size:42px;
    line-height:1.04;
    letter-spacing:-0.03em;
    text-wrap:balance;
}

.live-sub{
    margin:0 0 28px;
    color:var(--muted);
    max-width:760px;
    font-size:18px;
    line-height:1.8;
}

.live-grid{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.live-row-big{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:16px;
}

.live-row-small{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:16px;
}

.live-card{
    background:linear-gradient(180deg, rgba(0,0,0,.50), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:24px;
    backdrop-filter:blur(10px);
    box-shadow:0 12px 34px rgba(0,0,0,.16);
    transition:.25s ease;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
    overflow:hidden;
}

.live-card::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:22px;
    pointer-events:none;
    background:linear-gradient(135deg, rgba(124,58,237,.10), rgba(34,211,238,.04), transparent 64%);
    opacity:.72;
}

.live-card:hover{
    transform:translateY(-4px);
    border-color:rgba(34,211,238,.25);
    box-shadow:0 16px 40px rgba(0,0,0,.25);
}

.live-card-featured{
    background:linear-gradient(180deg, rgba(124,58,237,.16), rgba(34,211,238,.06));
    border-color:rgba(34,211,238,.18);
    box-shadow:0 18px 42px rgba(0,0,0,.22);
}

.live-card-featured::before{
    background:linear-gradient(135deg, rgba(124,58,237,.18), rgba(34,211,238,.08), transparent 64%);
}

.live-row-big .live-card{
    min-height:150px;
}

.live-row-small .live-card{
    min-height:118px;
}

.live-label,
.live-value,
.live-meta{
    position:relative;
    z-index:1;
}

.live-label{
    display:block;
    font-size:12px;
    color:var(--muted);
    margin-bottom:10px;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.live-value{
    font-weight:800;
    letter-spacing:-0.03em;
    color:#fff;
    line-height:1.08;
    word-break:break-word;
    margin-bottom:8px;
}

.live-row-big .live-value{
    font-size:40px;
}

.live-row-small .live-value{
    font-size:22px;
}

.live-meta{
    display:block;
    color:var(--muted);
    font-size:14px;
    line-height:1.5;
}

@media (max-width: 980px){
    .live-row-big{
        grid-template-columns:1fr;
    }

    .live-row-small{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 640px){
    .live-section{
        padding:8px 0 34px;
    }

    .live-container h2{
        font-size:34px;
    }

    .live-sub{
        font-size:17px;
    }

    .live-row-small{
        grid-template-columns:1fr;
    }

    .live-row-big .live-value{
        font-size:34px;
    }

    .live-row-small .live-value{
        font-size:28px;
    }
}

/* MOBILE POLISH */

@media (max-width: 760px){
    .hero{
        width:min(1200px,94%);
        padding:56px 0 20px;
        gap:24px;
    }

    .hero-copy{
        text-align:left;
    }

    .hero-badge{
        margin-bottom:14px;
        padding:8px 13px;
        font-size:12px;
    }

    .hero-copy h1{
        font-size:36px;
        line-height:0.98;
        margin:0 0 16px;
    }

    .lead{
        font-size:16px;
        line-height:1.65;
        margin:0 0 22px;
    }

    .hero-points{
        gap:8px;
        margin:0 0 20px;
    }

    .hero-points span{
        padding:8px 12px;
        font-size:12px;
    }

    .hero-actions{
        flex-direction:column;
        align-items:stretch;
        gap:10px;
        margin-top:0;
    }

    .hero-actions .btn{
        width:100%;
        min-height:50px;
    }

    .panel,
    .brand-status-panel,
    .status-panel{
        width:100%;
        max-width:none;
        padding:18px;
        border-radius:20px;
    }

    .status-top{
        gap:10px;
        margin-bottom:14px;
    }

    .status-top h3{
        font-size:20px;
        max-width:none;
    }

    .status-pill{
        padding:6px 10px;
        font-size:12px;
    }

    .stats{
        gap:12px;
    }

    .stat{
        min-height:72px;
        padding:13px 14px;
        border-radius:14px;
    }

    .stat-label{
        font-size:11px;
        margin-bottom:6px;
    }

    .stat-value{
        font-size:18px;
    }

    .ipbox{
        margin-top:14px;
        padding:12px 13px;
        gap:10px;
        border-radius:14px;
    }

    .ip-meta{
        width:100%;
    }

    .ip-text{
        font-size:17px;
    }

    .copybtn{
        width:100%;
        min-height:48px;
    }

    .brand-mini-note{
        margin-top:12px;
        padding-top:12px;
        font-size:13px;
        line-height:1.5;
    }

    .navlinks{
        gap:8px;
    }

    .navlinks a{
        padding:9px 12px;
        font-size:13px;
    }

    .gallery-grid{
        gap:12px;
    }

    .gallery-item{
        border-radius:18px;
    }

    .gallery-plus{
        width:48px;
        height:48px;
        font-size:24px;
    }

    .gallery-text{
        font-size:12px;
    }

    .lightbox{
        padding:14px;
    }

    .lightbox-content img{
        border-radius:16px;
        max-height:78vh;
    }

    .lightbox-close{
        top:10px;
        right:10px;
        width:44px;
        height:44px;
        font-size:26px;
    }

    .lightbox-nav{
        width:46px;
        height:46px;
        font-size:28px;
    }

    .lightbox-prev{
        left:10px;
    }

    .lightbox-next{
        right:10px;
    }
}

@media (max-width: 480px){
    .hero{
        padding:48px 0 16px;
    }

    .hero-copy h1{
        font-size:32px;
    }

    .lead{
        font-size:15px;
    }

    .status-top h3{
        font-size:18px;
    }

    .ip-text{
        font-size:16px;
    }

    .live-container h2,
    .section-head h2,
    .brand-story-card h2{
        font-size:28px;
    }
}

/* SCROLL REVEAL */

.reveal{
    opacity:0;
    transform:translateY(34px);
    filter:blur(8px);
    transition:
        opacity .8s cubic-bezier(.22,1,.36,1),
        transform .8s cubic-bezier(.22,1,.36,1),
        filter .8s cubic-bezier(.22,1,.36,1);
    will-change:opacity, transform, filter;
}

.reveal.is-visible{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
}

.reveal-up{
    transform:translateY(34px);
}

.brand-story-section.reveal{
    transition-delay:.02s;
}

.live-section.reveal{
    transition-delay:.04s;
}

.features-section.reveal{
    transition-delay:.06s;
}

.progress-showcase.reveal{
    transition-delay:.08s;
}

.gallery-section.reveal{
    transition-delay:.10s;
}

@media (prefers-reduced-motion: reduce){
    .reveal{
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
        transition:none !important;
    }
}

/* REALM SPOTLIGHT */

.realm-spotlight{
    width:min(1200px,92%);
    margin:0 auto;
    padding:8px 0 76px;
}

.realm-spotlight-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:16px;
}

.realm-spotlight-card{
    position:relative;
    border-radius:22px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    cursor:pointer;
    transition:.28s ease;
    box-shadow:0 12px 34px rgba(0,0,0,.18);
    background:rgba(0,0,0,.35);
    padding:0;
    width:100%;
    appearance:none;
    -webkit-appearance:none;
    text-align:left;
}

.realm-spotlight-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    aspect-ratio:16 / 10;
    transition:transform .4s ease, filter .4s ease;
    display:block;
}

.realm-spotlight-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:18px;
    background:linear-gradient(transparent, rgba(0,0,0,.78));
    opacity:0;
    transition:.25s ease;
}

.realm-spotlight-title{
    font-size:16px;
    font-weight:800;
    color:#fff;
    line-height:1.2;
}

.realm-spotlight-sub{
    font-size:13px;
    color:var(--muted);
    margin-top:4px;
}

.realm-spotlight-card:hover{
    transform:translateY(-6px) scale(1.015);
    box-shadow:0 22px 50px rgba(0,0,0,.35);
    border-color:rgba(34,211,238,.25);
}

.realm-spotlight-card:hover img{
    transform:scale(1.08);
    filter:brightness(.78);
}

.realm-spotlight-card:hover .realm-spotlight-overlay{
    opacity:1;
}

@media (max-width: 980px){
    .realm-spotlight-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 640px){
    .realm-spotlight{
        padding:6px 0 64px;
    }

    .realm-spotlight-grid{
        grid-template-columns:1fr;
    }
}

/* REALMS PAGE */

.realms-hero{
    width:min(1200px,92%);
    margin:0 auto;
    padding:74px 0 22px;
}

.realms-hero-inner{
    max-width:820px;
}

.realms-kicker{
    display:inline-block;
    margin-bottom:12px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.20em;
    text-transform:uppercase;
    color:var(--cyan);
    text-shadow:0 6px 20px rgba(34,211,238,.18);
}

.realms-hero h1{
    margin:0 0 12px;
    font-size:clamp(48px,7vw,78px);
    line-height:.95;
    font-weight:800;
    letter-spacing:-0.04em;
}

.realms-hero p{
    margin:0;
    max-width:760px;
    color:var(--muted);
    font-size:19px;
    line-height:1.8;
}

.realms-intro{
    width:min(1200px,92%);
    margin:0 auto;
    padding:8px 0 34px;
}

.realms-intro-card{
    background:linear-gradient(180deg, rgba(5,10,20,.80), rgba(4,8,16,.72));
    border:1px solid rgba(255,255,255,.08);
    border-radius:26px;
    padding:24px;
    backdrop-filter:blur(14px);
    box-shadow:0 16px 40px rgba(0,0,0,.20);
}

.realms-intro-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:18px;
}

.realms-intro-item{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    border-radius:20px;
    padding:20px;
}

.realms-intro-item strong{
    display:block;
    margin-bottom:10px;
    font-size:20px;
    color:#fff;
}

.realms-intro-item span{
    display:block;
    color:var(--muted);
    line-height:1.7;
}

.realms-gallery{
    width:min(1200px,92%);
    margin:0 auto;
    padding:10px 0 72px;
}

.realms-gallery-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:18px;
}

.realms-gallery-card{
    position:relative;
    border:none;
    padding:0;
    width:100%;
    appearance:none;
    -webkit-appearance:none;
    text-align:left;
    border-radius:24px;
    overflow:hidden;
    cursor:pointer;
    background:rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 14px 38px rgba(0,0,0,.20);
    transition:.28s ease;
}

.realms-gallery-card img{
    width:100%;
    aspect-ratio:16 / 10;
    object-fit:cover;
    display:block;
    transition:transform .4s ease, filter .4s ease;
}

.realms-gallery-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:20px;
    background:linear-gradient(transparent, rgba(0,0,0,.78));
    opacity:0;
    transition:.25s ease;
}

.realms-gallery-title{
    font-size:18px;
    font-weight:800;
    color:#fff;
    line-height:1.2;
}

.realms-gallery-sub{
    margin-top:4px;
    font-size:13px;
    color:var(--muted);
}

.realms-gallery-card:hover{
    transform:translateY(-6px) scale(1.012);
    border-color:rgba(34,211,238,.25);
    box-shadow:0 24px 54px rgba(0,0,0,.30);
}

.realms-gallery-card:hover img{
    transform:scale(1.08);
    filter:brightness(.78);
}

.realms-gallery-card:hover .realms-gallery-overlay{
    opacity:1;
}

.realms-empty{
    padding:22px 24px;
    border-radius:20px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.07);
    color:var(--muted);
}

.realms-community-note{
    width:min(1200px,92%);
    margin:0 auto;
    padding:0 0 84px;
}

.realms-community-note-card{
    max-width:820px;
    background:linear-gradient(180deg, rgba(5,10,20,.80), rgba(4,8,16,.72));
    border:1px solid rgba(255,255,255,.08);
    border-radius:26px;
    padding:28px;
    backdrop-filter:blur(14px);
    box-shadow:0 16px 40px rgba(0,0,0,.20);
}

.realms-community-note-card h2{
    margin:0 0 12px;
    font-size:42px;
    line-height:1.04;
    letter-spacing:-0.03em;
}

.realms-community-note-card p{
    margin:0;
    color:var(--muted);
    font-size:18px;
    line-height:1.8;
    max-width:720px;
}

@media (max-width: 980px){
    .realms-intro-grid{
        grid-template-columns:1fr;
    }

    .realms-gallery-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 640px){
    .realms-hero{
        padding:60px 0 18px;
    }

    .realms-hero p{
        font-size:18px;
    }

    .realms-gallery-grid{
        grid-template-columns:1fr;
    }

    .realms-community-note-card h2{
        font-size:34px;
    }

    .realms-community-note-card p{
        font-size:17px;
    }
}

.realms-values{
    width:min(1200px,92%);
    margin:0 auto;
    padding:0 0 74px;
}

.realms-values-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:18px;
}

.realms-value-card{
    background:linear-gradient(180deg, rgba(5,10,20,.80), rgba(4,8,16,.72));
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:24px;
    backdrop-filter:blur(14px);
    box-shadow:0 14px 36px rgba(0,0,0,.20);
}

.realms-value-card strong{
    display:block;
    margin-bottom:10px;
    font-size:22px;
    color:#fff;
    line-height:1.2;
}

.realms-value-card span{
    display:block;
    color:var(--muted);
    line-height:1.8;
    font-size:16px;
}

.realms-cta{
    width:min(1200px,92%);
    margin:0 auto;
    padding:0 0 90px;
}

.realms-cta-card{
    max-width:900px;
    background:linear-gradient(180deg, rgba(5,10,20,.84), rgba(4,8,16,.76));
    border:1px solid rgba(255,255,255,.08);
    border-radius:28px;
    padding:30px;
    backdrop-filter:blur(14px);
    box-shadow:0 18px 44px rgba(0,0,0,.22);
}

.realms-cta-card h2{
    margin:0 0 12px;
    font-size:46px;
    line-height:1.04;
    letter-spacing:-0.03em;
}

.realms-cta-card p{
    margin:0;
    max-width:720px;
    color:var(--muted);
    font-size:18px;
    line-height:1.8;
}

.realms-cta-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:24px;
}

@media (max-width: 980px){
    .realms-values-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 640px){
    .realms-cta-card h2{
        font-size:36px;
    }

    .realms-cta-card p{
        font-size:17px;
    }
}

.realms-hero-showcase{
    margin:0 0 20px;
}

.realms-hero-showcase-card{
    position:relative;
    border-radius:28px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.35);
    box-shadow:0 22px 54px rgba(0,0,0,.28);
}

.realms-hero-showcase-card img{
    width:100%;
    display:block;
    aspect-ratio:16 / 7.5;
    object-fit:cover;
}

.realms-hero-showcase-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:28px;
    background:
        linear-gradient(180deg, rgba(7,9,18,.05) 0%, rgba(7,9,18,.22) 35%, rgba(7,9,18,.78) 100%);
}

.realms-hero-showcase-kicker{
    display:inline-flex;
    align-self:flex-start;
    margin-bottom:12px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.realms-hero-showcase-title{
    font-size:clamp(28px, 4vw, 46px);
    font-weight:800;
    line-height:1.02;
    letter-spacing:-0.03em;
    color:#fff;
}

.realms-hero-showcase-sub{
    margin-top:8px;
    max-width:720px;
    color:rgba(234,240,255,.82);
    font-size:16px;
    line-height:1.65;
}

@media (max-width: 640px){
    .realms-hero-showcase-card{
        border-radius:22px;
    }

    .realms-hero-showcase-card img{
        aspect-ratio:16 / 10;
    }

    .realms-hero-showcase-overlay{
        padding:20px;
    }

    .realms-hero-showcase-sub{
        font-size:15px;
    }
}

/* UPDATES PAGE */

.updates-hero{
    width:min(1200px,92%);
    margin:0 auto;
    padding:74px 0 24px;
}

.updates-hero-inner{
    max-width:860px;
}

.updates-kicker{
    display:inline-block;
    margin-bottom:12px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.20em;
    text-transform:uppercase;
    color:var(--cyan);
    text-shadow:0 6px 20px rgba(34,211,238,.18);
}

.updates-hero h1{
    margin:0 0 12px;
    font-size:clamp(48px,7vw,78px);
    line-height:.95;
    font-weight:800;
    letter-spacing:-0.04em;
}

.updates-hero p{
    margin:0;
    max-width:760px;
    color:var(--muted);
    font-size:19px;
    line-height:1.8;
}

.updates-featured{
    width:min(1200px,92%);
    margin:0 auto;
    padding:10px 0 56px;
}

.updates-featured-card{
    display:grid;
    grid-template-columns:minmax(420px, 620px) minmax(0, 1fr);
    gap:0;
    overflow:hidden;
    border-radius:30px;
    background:linear-gradient(180deg, rgba(5,10,20,.84), rgba(4,8,16,.76));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 52px rgba(0,0,0,.24);
    backdrop-filter:blur(14px);
}

.updates-featured-media img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    min-height:100%;
    aspect-ratio:16 / 11;
}

.updates-featured-content{
    padding:34px;
}

.updates-meta-row{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.updates-badge{
    display:inline-flex;
    align-items:center;
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);
    color:#fff;
}

.updates-badge.is-event{
    background:rgba(249,115,22,.12);
    border-color:rgba(249,115,22,.28);
    color:#fff;
}

.updates-badge.is-announcement{
    background:rgba(124,58,237,.16);
    border-color:rgba(124,58,237,.30);
    color:#fff;
}

.updates-badge.is-update{
    background:rgba(34,211,238,.12);
    border-color:rgba(34,211,238,.26);
    color:#fff;
}

.updates-date{
    color:var(--muted);
    font-size:14px;
}

.updates-featured-content h2{
    margin:0 0 12px;
    font-size:42px;
    line-height:1.04;
    letter-spacing:-0.03em;
}

.updates-featured-excerpt{
    margin:0 0 18px;
    color:#fff;
    font-size:18px;
    line-height:1.8;
}

.updates-featured-body p,
.updates-card-content p{
    margin:0 0 14px;
    color:var(--muted);
    line-height:1.8;
}

.updates-actions{
    margin-top:20px;
}

.updates-list{
    width:min(1200px,92%);
    margin:0 auto;
    padding:0 0 90px;
}

.updates-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:20px;
}

.updates-card{
    overflow:hidden;
    border-radius:26px;
    background:linear-gradient(180deg, rgba(5,10,20,.80), rgba(4,8,16,.72));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 16px 40px rgba(0,0,0,.20);
    backdrop-filter:blur(14px);
}

.updates-card-media img{
    width:100%;
    display:block;
    aspect-ratio:16 / 8.8;
    object-fit:cover;
}

.updates-card-body{
    padding:24px;
}

.updates-card h3{
    margin:0 0 12px;
    font-size:30px;
    line-height:1.08;
    letter-spacing:-0.03em;
}

.updates-card-excerpt{
    margin:0 0 18px;
    color:#fff;
    line-height:1.75;
}

@media (max-width: 980px){
    .updates-featured-card{
        grid-template-columns:1fr;
    }

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

@media (max-width: 640px){
    .updates-hero{
        padding:60px 0 18px;
    }

    .updates-hero p{
        font-size:18px;
    }

    .updates-featured-content{
        padding:22px;
    }

    .updates-featured-content h2{
        font-size:34px;
    }

    .updates-card-body{
        padding:22px;
    }

    .updates-card h3{
        font-size:26px;
    }
}




/* BLOG FEATURED UPDATE */

.updates-featured-hero img{
    width:100%;
    display:block;
    height:auto;
    max-height:520px;
    object-fit:contain;
    border-radius:26px;
    margin-bottom:18px;
    background:#000;
}

.updates-featured-content-new{
    max-width:860px;
    margin:0 auto;
}

.updates-featured-content-new h2{
    font-size:42px;
    margin:0 0 14px;
    line-height:1.05;
}

.updates-featured-body-collapsed{
    max-height:140px;
    overflow:hidden;
    position:relative;
    transition:.3s ease;
}

.updates-featured-body-collapsed::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:60px;
    background:linear-gradient(transparent, rgba(7,9,18,.9));
}

.updates-featured-body-collapsed.expanded{
    max-height:1000px;
}

.updates-featured-body-collapsed.expanded::after{
    display:none;
}

/* BLOG FEATURED UPDATE */

.updates-featured-hero img{
    width:100%;
    display:block;
    aspect-ratio:16 / 7;
    object-fit:cover;
    border-radius:26px;
    margin-bottom:18px;
}

.updates-featured-content-new{
    max-width:860px;
    margin:0 auto;
}

.updates-featured-content-new h2{
    font-size:42px;
    margin:0 0 14px;
    line-height:1.05;
}

.updates-featured-body-collapsed{
    max-height:140px;
    overflow:hidden;
    position:relative;
    transition:.3s ease;
}

.updates-featured-body-collapsed::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:60px;
    background:linear-gradient(transparent, rgba(7,9,18,.9));
}

.updates-featured-body-collapsed.expanded{
    max-height:1000px;
}

.updates-featured-body-collapsed.expanded::after{
    display:none;
}

/* BLOG FEATURED */

.updates-featured-hero img{
    width:100%;
    aspect-ratio:16/7;
    object-fit:cover;
    border-radius:26px;
    margin-bottom:18px;
}

.updates-featured-body-collapsed{
    max-height:140px;
    overflow:hidden;
    position:relative;
}

.updates-featured-body-collapsed.expanded{
    max-height:1000px;
}

/* FORCE: featured update image fully visible */
.updates-featured-hero{
    width:100% !important;
    overflow:visible !important;
}

.updates-featured-hero img{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    object-position:center center !important;
    display:block !important;
    border-radius:26px !important;
    margin-bottom:18px !important;
    background:#000 !important;
}

/* FINAL FIX: Featured Event Image */

.updates-featured-hero{
    width:100%;
    overflow:hidden;
    border-radius:0; /* wichtig */
}

.updates-featured-hero img{
    width:100%;
    height:auto;
    display:block;

    /* wichtig */
    object-fit:unset !important;
    aspect-ratio:unset !important;
    max-height:none !important;

    /* KEIN radius mehr am bild */
    border-radius:0 !important;
    margin-bottom:18px;
}

/* optional: container bekommt radius statt bild */
.updates-featured{
    border-radius:26px;
    overflow:hidden;
}

/* FINAL HERO FIX – NO CROP EVER */

.updates-featured{
    display:block !important;
    overflow:visible !important;
}

.updates-featured-hero{
    width:100%;
    overflow:visible !important;
    border-radius:26px;
}

.updates-featured-hero img{
    width:100%;
    height:auto;
    display:block;

    /* ALLES deaktivieren */
    object-fit:unset !important;
    aspect-ratio:auto !important;
    max-height:none !important;

    border-radius:26px;
    margin-bottom:20px;
}

/* ganz wichtig: alte grid styles killen */
.updates-featured-card{
    display:block !important;
    grid-template-columns:none !important;
}

/* HERO OVERLAY */

.updates-featured-hero.overlay-enabled{
    position:relative;
    overflow:hidden;
}

.updates-featured-hero.overlay-enabled::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(7,9,18,0.95) 0%,
        rgba(7,9,18,0.6) 35%,
        rgba(7,9,18,0.2) 60%,
        rgba(7,9,18,0.0) 100%
    );
}

.updates-hero-overlay-content{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:30px;
    z-index:2;
}

.updates-hero-overlay-content h2{
    margin:10px 0;
    font-size:42px;
    line-height:1.05;
}

.updates-hero-overlay-content p{
    max-width:700px;
    color:rgba(255,255,255,0.85);
    font-size:16px;
    line-height:1.7;
}

/* Featured text block under overlay */
.updates-featured-content-new{
    max-width:980px;
    margin:0 auto;
    padding-top:8px;
}

.updates-featured-content-new .updates-featured-body-collapsed p{
    color:var(--text);
    font-size:18px;
    line-height:1.85;
    margin:0 0 18px;
}

.updates-featured-content-new .updates-actions{
    margin-top:18px;
}

.updates-card{
    text-decoration:none;
    color:inherit;
    display:block;
    transition:.25s ease;
}

.updates-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

/* SINGLE UPDATE */

.update-single{
    width:min(1100px,92%);
    margin:40px auto;
}

.update-single-hero img{
    width:100%;
    border-radius:26px;
    margin-bottom:25px;
}

.update-single-content h1{
    font-size:48px;
    margin:10px 0 16px;
}

.update-intro{
    font-size:20px;
    color:#fff;
    margin-bottom:20px;
}

.update-body p{
    color:var(--muted);
    line-height:1.85;
    margin-bottom:18px;
}

/* HOMEPAGE PINNED UPDATE TEASER */

.home-update-teaser{
    width:min(1200px,92%);
    margin:0 auto;
    padding:0 0 32px;
}

.home-update-teaser-card{
    display:grid;
    grid-template-columns:minmax(320px, 500px) minmax(0, 1fr);
    gap:0;
    overflow:hidden;
    border-radius:28px;
    background:linear-gradient(180deg, rgba(5,10,20,.84), rgba(4,8,16,.76));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 52px rgba(0,0,0,.24);
    backdrop-filter:blur(14px);
}

.home-update-teaser-media{
    display:block;
    text-decoration:none;
}

.home-update-teaser-media img{
    width:100%;
    height:100%;
    min-height:100%;
    display:block;
    object-fit:cover;
}

.home-update-teaser-content{
    padding:30px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.home-update-teaser-meta{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.home-update-teaser-badge{
    display:inline-flex;
    align-items:center;
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    border:1px solid rgba(34,211,238,.22);
    background:rgba(34,211,238,.10);
    color:#fff;
}

.home-update-teaser-date{
    color:var(--muted);
    font-size:14px;
}

.home-update-teaser-content h2{
    margin:0 0 12px;
    font-size:42px;
    line-height:1.04;
    letter-spacing:-0.03em;
}

.home-update-teaser-text{
    margin:0;
    color:var(--muted);
    font-size:18px;
    line-height:1.8;
}

.home-update-teaser-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:24px;
}

@media (max-width: 980px){
    .home-update-teaser-card{
        grid-template-columns:1fr;
    }

    .home-update-teaser-media img{
        aspect-ratio:16 / 9;
    }
}

@media (max-width: 640px){
    .home-update-teaser-content{
        padding:22px;
    }

    .home-update-teaser-content h2{
        font-size:32px;
    }

    .home-update-teaser-text{
        font-size:17px;
    }
}

/* HOMEPAGE PINNED UPDATE TEASER */

.home-update-teaser{
    width:min(1200px,92%);
    margin:0 auto;
    padding:0 0 32px;
}

.home-update-teaser-card{
    display:grid;
    grid-template-columns:minmax(320px, 500px) minmax(0, 1fr);
    gap:0;
    overflow:hidden;
    border-radius:28px;
    background:linear-gradient(180deg, rgba(5,10,20,.84), rgba(4,8,16,.76));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 52px rgba(0,0,0,.24);
    backdrop-filter:blur(14px);
}

.home-update-teaser-media{
    display:block;
    text-decoration:none;
}

.home-update-teaser-media img{
    width:100%;
    height:100%;
    min-height:100%;
    display:block;
    object-fit:cover;
}

.home-update-teaser-content{
    padding:30px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.home-update-teaser-meta{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.home-update-teaser-badge{
    display:inline-flex;
    align-items:center;
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    border:1px solid rgba(34,211,238,.22);
    background:rgba(34,211,238,.10);
    color:#fff;
}

.home-update-teaser-date{
    color:var(--muted);
    font-size:14px;
}

.home-update-teaser-content h2{
    margin:0 0 12px;
    font-size:42px;
    line-height:1.04;
    letter-spacing:-0.03em;
}

.home-update-teaser-content p{
    margin:0;
    color:var(--muted);
    font-size:18px;
    line-height:1.8;
}

.home-update-teaser-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:24px;
}

@media (max-width: 980px){
    .home-update-teaser-card{
        grid-template-columns:1fr;
    }

    .home-update-teaser-media img{
        aspect-ratio:16 / 9;
    }
}

@media (max-width: 640px){
    .home-update-teaser-content{
        padding:22px;
    }

    .home-update-teaser-content h2{
        font-size:32px;
    }

    .home-update-teaser-content p{
        font-size:17px;
    }
}

/* HERO EVENT WIDGET */

.hero-event-widget{
    position:absolute;
    right:0;
    top:140px;
    width:300px;
    z-index:5;
}

.hero-event-card{
    background:linear-gradient(180deg, rgba(5,10,20,.92), rgba(4,8,16,.88));
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:18px;
    backdrop-filter:blur(12px);
    box-shadow:0 20px 50px rgba(0,0,0,.35);
    transition:.25s ease;
}

.hero-event-card:hover{
    transform:translateY(-4px);
    box-shadow:0 30px 70px rgba(0,0,0,.45);
}

.hero-event-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.hero-event-badge{
    font-size:11px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(34,211,238,.12);
    border:1px solid rgba(34,211,238,.28);
    font-weight:700;
    letter-spacing:.08em;
}

.hero-event-date{
    font-size:12px;
    color:var(--muted);
}

.hero-event-card h3{
    margin:0 0 10px;
    font-size:20px;
}

.hero-event-card p{
    margin:0 0 14px;
    color:var(--muted);
    font-size:14px;
    line-height:1.6;
}

/* Mobile fix */
@media (max-width: 1100px){
    .hero-event-widget{
        position:relative;
        width:100%;
        top:auto;
        margin-top:20px;
    }
}

/* HERO RIGHT STACK FIX */

.hero-side-stack{
    display:flex;
    flex-direction:column;
    gap:18px;
    align-self:center;
}

.hero-event-widget{
    display:none !important;
}

.hero-event-card{
    display:block;
    text-decoration:none;
    color:inherit;
    border-radius:22px;
    padding:18px;
    background:linear-gradient(180deg, rgba(5,10,20,.92), rgba(4,8,16,.88));
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    box-shadow:0 20px 50px rgba(0,0,0,.35);
    transition:.25s ease;
}

.hero-event-card:hover{
    transform:translateY(-4px);
    box-shadow:0 30px 70px rgba(0,0,0,.45);
}

.hero-event-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
}

.hero-event-badge{
    font-size:11px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(34,211,238,.12);
    border:1px solid rgba(34,211,238,.28);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.hero-event-date{
    font-size:12px;
    color:var(--muted);
}

.hero-event-card h3{
    margin:0 0 10px;
    font-size:22px;
    line-height:1.15;
}

.hero-event-card p{
    margin:0 0 14px;
    color:var(--muted);
    font-size:14px;
    line-height:1.6;
}

.hero-event-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:11px 16px;
    border-radius:14px;
    background:linear-gradient(135deg,var(--purple),var(--cyan));
    color:#fff;
    font-weight:700;
    box-shadow:0 10px 30px rgba(34,211,238,.18);
}

@media (max-width: 980px){
    .hero-side-stack{
        width:100%;
    }
}

/* SUBTLE EVENT INSIDE STATUS PANEL */

.status-event-inline{
    position:relative;
    z-index:1;
    margin-top:16px;
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:14px 15px;
    border-radius:16px;
    text-decoration:none;
    color:#fff;
    background:linear-gradient(135deg, rgba(124,58,237,.16), rgba(34,211,238,.10));
    border:1px solid rgba(34,211,238,.18);
    transition:.22s ease;
    box-shadow:0 10px 24px rgba(0,0,0,.16);
}

.status-event-inline:hover{
    transform:translateY(-2px);
    border-color:rgba(34,211,238,.28);
    box-shadow:0 16px 34px rgba(0,0,0,.24);
}

.status-event-inline-kicker{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.14em;
    color:var(--cyan);
    font-weight:800;
}

.status-event-inline-title{
    font-size:16px;
    line-height:1.35;
    font-weight:800;
    color:#fff;
}

.status-event-inline-cta{
    margin-top:2px;
    font-size:13px;
    color:var(--muted);
    font-weight:700;
}

/* SUBTLE EVENT INSIDE STATUS PANEL */

.status-event-inline{
    position:relative;
    z-index:1;
    margin-top:16px;
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:14px 15px;
    border-radius:16px;
    text-decoration:none;
    color:#fff;
    background:linear-gradient(135deg, rgba(124,58,237,.16), rgba(34,211,238,.10));
    border:1px solid rgba(34,211,238,.18);
    transition:.22s ease;
    box-shadow:0 10px 24px rgba(0,0,0,.16);
}

.status-event-inline:hover{
    transform:translateY(-2px);
    border-color:rgba(34,211,238,.28);
    box-shadow:0 16px 34px rgba(0,0,0,.24);
}

.status-event-inline-kicker{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.14em;
    color:var(--cyan);
    font-weight:800;
}

.status-event-inline-title{
    font-size:16px;
    line-height:1.35;
    font-weight:800;
    color:#fff;
}

.status-event-inline-cta{
    margin-top:2px;
    font-size:13px;
    color:var(--muted);
    font-weight:700;
}

.rules-flow-highlights{
    margin:34px 0 42px;
}

.rules-flow-highlight-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin-top:18px;
}

.rules-flow-highlight-card{
    background:linear-gradient(180deg, rgba(7,12,24,.88), rgba(6,10,20,.78));
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:20px 20px 18px;
    box-shadow:0 16px 36px rgba(0,0,0,.18);
}

.rules-flow-highlight-card strong{
    display:block;
    margin-bottom:10px;
    font-size:18px;
    line-height:1.3;
    color:#fff;
}

.rules-flow-highlight-card p{
    margin:0;
    color:var(--muted);
    line-height:1.7;
}

@media (max-width: 980px){
    .rules-flow-highlight-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width: 640px){
    .rules-flow-highlight-grid{
        grid-template-columns:1fr;
    }
}

/* === RULES FLOW IMPROVEMENT === */

.rules-flow-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.rules-flow-item{
    position:relative;
    padding:14px 16px 14px 22px;
    border-radius:14px;
    background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.05);
    transition:all .2s ease;
}

.rules-flow-item:hover{
    background:rgba(255,255,255,0.04);
    border-color:rgba(255,255,255,0.08);
}

.rules-flow-item::before{
    content:'';
    position:absolute;
    left:8px;
    top:20px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:linear-gradient(135deg,#4cc9f0,#7b5cff);
}

/* Optional: bessere Lesbarkeit */
.rules-flow-item p{
    margin:0;
    line-height:1.7;
}


/* =========================================================
   RULES PAGE — COMMUNITY STYLE REDESIGN
   ========================================================= */

.rules-flow-page{
    position:relative;
    z-index:1;
}

.rules-flow-shell{
    width:min(1120px, 92%);
    margin:0 auto;
}

/* Hero etwas ruhiger und hochwertiger */
.rules-flow-hero{
    padding:88px 0 34px;
}

.rules-flow-hero-inner{
    width:min(1120px, 92%);
    margin:0 auto;
}

.rules-flow-kicker{
    letter-spacing:.18em;
    font-weight:800;
}

.rules-flow-hero h1{
    margin:10px 0 14px;
    line-height:.95;
}

.rules-flow-hero p{
    max-width:760px;
    font-size:24px;
    line-height:1.55;
    color:rgba(255,255,255,.78);
}

/* Intro weniger technisch, mehr einladend */
.rules-flow-intro{
    display:flex;
    align-items:center;
    gap:16px;
    margin:0 0 34px;
    padding:18px 22px;
    border-radius:24px;
    background:linear-gradient(180deg, rgba(8,14,28,.72), rgba(6,11,22,.60));
    border:1px solid rgba(255,255,255,.07);
    box-shadow:0 18px 42px rgba(0,0,0,.18);
    backdrop-filter:blur(10px);
}

.rules-flow-intro-icon{
    flex:0 0 auto;
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:linear-gradient(135deg, rgba(53,192,255,.16), rgba(126,88,255,.16));
    border:1px solid rgba(85,210,255,.20);
}

.rules-flow-intro-text strong{
    display:block;
    margin-bottom:4px;
    font-size:24px;
    line-height:1.2;
    color:#fff;
}

.rules-flow-intro-text span{
    color:rgba(255,255,255,.72);
    line-height:1.6;
}

/* Highlights stärker, aber warm und weich */
.rules-flow-highlights{
    margin:8px 0 46px;
}

.rules-flow-highlight-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin-top:18px;
}

.rules-flow-highlight-card{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    padding:22px 22px 20px;
    background:
        radial-gradient(circle at top right, rgba(68,201,255,.10), transparent 42%),
        linear-gradient(180deg, rgba(9,15,28,.88), rgba(7,12,22,.78));
    border:1px solid rgba(255,255,255,.07);
    box-shadow:0 18px 40px rgba(0,0,0,.18);
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.rules-flow-highlight-card:hover{
    transform:translateY(-3px);
    border-color:rgba(105,218,255,.18);
    box-shadow:0 22px 48px rgba(0,0,0,.22);
}

.rules-flow-highlight-card::before{
    content:'';
    position:absolute;
    inset:0 auto auto 0;
    width:100%;
    height:2px;
    background:linear-gradient(90deg, rgba(68,201,255,.85), rgba(126,88,255,.85), rgba(255,138,76,.85));
    opacity:.9;
}

.rules-flow-highlight-card strong{
    display:block;
    margin-bottom:10px;
    font-size:28px;
    line-height:1.12;
    color:#fff;
}

.rules-flow-highlight-card p{
    margin:0;
    color:rgba(255,255,255,.72);
    line-height:1.72;
}

/* Sektionen weniger hart und weniger "timeline-ui" */
.rules-flow-section{
    position:relative;
    margin:0 0 34px;
    padding:0 0 0 26px;
}

.rules-flow-section::before{
    content:'';
    position:absolute;
    left:9px;
    top:0;
    bottom:0;
    width:1px;
    background:linear-gradient(180deg, rgba(62,199,255,.28), rgba(126,88,255,.12), transparent);
}

.rules-flow-section::after{
    content:'';
    position:absolute;
    left:0;
    top:14px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(70,212,255,.95) 0 32%, rgba(70,212,255,.16) 33% 100%);
    box-shadow:0 0 0 6px rgba(70,212,255,.08);
}

.rules-flow-head{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin:0 0 18px;
}

.rules-flow-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border-radius:999px;
    font-size:26px;
    font-weight:800;
    line-height:1;
    color:#f6f7fb;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.07);
    box-shadow:0 12px 26px rgba(0,0,0,.14);
}

.rules-flow-head h2{
    margin:0;
    font-size:18px;
    font-weight:700;
    letter-spacing:.02em;
    color:rgba(255,255,255,.54);
}

/* Die Listen selbst deutlich ruhiger und hochwertiger */
.rules-flow-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.rules-flow-item{
    position:relative;
    padding:0 0 0 18px;
    border:none;
    background:transparent;
    border-radius:0;
    transition:none;
}

.rules-flow-item::before{
    content:'';
    position:absolute;
    left:0;
    top:14px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:linear-gradient(135deg,#4cc9f0,#7b5cff);
    box-shadow:0 0 0 5px rgba(76,201,240,.08);
}

.rules-flow-item p{
    margin:0;
    padding:0 0 14px;
    line-height:1.82;
    font-size:24px;
    color:rgba(255,255,255,.88);
    border-bottom:1px solid rgba(255,255,255,.06);
}

.rules-flow-list.compact .rules-flow-item p{
    font-size:17px;
    line-height:1.72;
}

/* Hinweise weicher und klarer */
.rules-flow-note{
    margin-top:18px;
    padding:18px 20px;
    border-radius:20px;
    line-height:1.7;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 14px 30px rgba(0,0,0,.14);
}

.rules-flow-note strong{
    color:#fff;
}

.rules-flow-note-purple{
    background:linear-gradient(180deg, rgba(74,40,158,.20), rgba(30,18,70,.14));
}

.rules-flow-note-orange{
    background:linear-gradient(180deg, rgba(167,87,32,.18), rgba(63,26,12,.12));
}

/* Sanktionen kompakter und wertiger */
.rules-flow-sanctions{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
}

.rules-flow-sanctions-divider{
    display:none;
}

.rules-flow-sanctions-block{
    border-radius:28px;
    padding:22px 22px 18px;
    background:
        radial-gradient(circle at top right, rgba(90,208,255,.08), transparent 40%),
        linear-gradient(180deg, rgba(10,16,30,.78), rgba(7,12,22,.70));
    border:1px solid rgba(255,255,255,.07);
    box-shadow:0 18px 42px rgba(0,0,0,.16);
}

.rules-flow-sanctions-block h3{
    margin:0 0 12px;
    font-size:25px;
    line-height:1.16;
    color:#fff;
}

.rules-flow-sanctions-block-danger h3{
    color:#f2d1db;
}

/* Schlusswort etwas ruhiger */
#rules-schlusswort .rules-flow-item p{
    color:rgba(255,255,255,.82);
}

/* Mobile / Tablet */
@media (max-width: 1100px){
    .rules-flow-highlight-grid{
        grid-template-columns:1fr 1fr;
    }

    .rules-flow-highlight-card strong{
        font-size:23px;
    }

    .rules-flow-item p{
        font-size:18px;
    }
}

@media (max-width: 760px){
    .rules-flow-hero{
        padding:72px 0 28px;
    }

    .rules-flow-hero p{
        font-size:19px;
    }

    .rules-flow-intro{
        align-items:flex-start;
        padding:18px 18px;
    }

    .rules-flow-highlight-grid{
        grid-template-columns:1fr;
    }

    .rules-flow-label{
        font-size:18px;
    }

    .rules-flow-head h2{
        font-size:16px;
    }

    .rules-flow-highlight-card strong{
        font-size:20px;
    }

    .rules-flow-item p{
        font-size:17px;
        line-height:1.72;
    }
}


/* === RULES HIGHLIGHT BOOST === */

.rules-flow-highlights{
    margin:18px 0 64px;
}

.rules-flow-highlight-grid{
    gap:20px;
}

/* Highlight Cards größer und stärker */
.rules-flow-highlight-card{
    padding:26px 26px 24px;
    border-radius:28px;
    box-shadow:0 22px 60px rgba(0,0,0,.28);
}

/* Titel größer = mehr Gewicht */
.rules-flow-highlight-card strong{
    font-size:30px;
    line-height:1.05;
}

/* Text klarer */
.rules-flow-highlight-card p{
    font-size:17px;
    line-height:1.75;
}

/* leichter Glow für Fokus */
.rules-flow-highlight-card{
    position:relative;
}

.rules-flow-highlight-card::after{
    content:'';
    position:absolute;
    inset:-1px;
    border-radius:28px;
    background:linear-gradient(135deg, rgba(76,201,240,.15), rgba(123,92,255,.15));
    opacity:0;
    transition:opacity .25s ease;
    z-index:-1;
}

.rules-flow-highlight-card:hover::after{
    opacity:1;
}


/* === RULES TIMELINE SPACING FIX === */

.rules-flow-section{
    padding-left:34px;
}

.rules-flow-list{
    margin-left:12px;
}


/* === RULES REMOVE DOUBLE SECTION DOT === */

.rules-flow-section::after{
    display:none;
}


/* === SANCTIONS REDESIGN === */

.rules-flow-sanctions{
    display:flex;
    flex-direction:column;
    gap:28px;
}

/* Container insgesamt ruhiger und ernster */
.rules-flow-sanctions-block{
    background:rgba(10,14,22,.6);
    border:1px solid rgba(255,255,255,.06);
    border-radius:20px;
    padding:22px 24px;
    box-shadow:none;
}

/* Überschriften klarer */
.rules-flow-sanctions-block h3{
    margin:0 0 14px;
    font-size:18px;
    font-weight:700;
    color:#fff;
}

/* Danger-Bereich stärker */
.rules-flow-sanctions-block-danger{
    border-color:rgba(255,80,80,.25);
    background:linear-gradient(180deg, rgba(60,15,15,.35), rgba(25,8,8,.25));
}

.rules-flow-sanctions-block-danger h3{
    color:#ff9aa2;
}

/* Liste kompakter */
.rules-flow-list.compact{
    gap:6px;
}

/* Regeln hier klarer */
.rules-flow-list.compact .rules-flow-item{
    padding:6px 0 6px 18px;
}

.rules-flow-list.compact .rules-flow-item p{
    border:none;
    padding:0;
    font-size:15px;
    line-height:1.6;
    color:rgba(255,255,255,.78);
}

/* Bullet dezenter */
.rules-flow-list.compact .rules-flow-item::before{
    width:5px;
    height:5px;
    top:12px;
    background:#ff6b6b;
    box-shadow:none;
}


/* === RULES CLOSING CARD === */

.rules-flow-closing-card{
    margin-top:6px;
    padding:24px 24px 22px;
    border-radius:24px;
    background:
        radial-gradient(circle at top right, rgba(68,201,255,.08), transparent 38%),
        linear-gradient(180deg, rgba(10,16,30,.78), rgba(7,12,22,.70));
    border:1px solid rgba(255,255,255,.07);
    box-shadow:0 18px 42px rgba(0,0,0,.16);
}

.rules-flow-closing-card strong{
    display:block;
    margin-bottom:12px;
    font-size:26px;
    line-height:1.18;
    color:#fff;
}

.rules-flow-closing-card p{
    margin:0 0 12px;
    color:rgba(255,255,255,.76);
    line-height:1.8;
    font-size:17px;
}

.rules-flow-closing-card p:last-child{
    margin-bottom:0;
}

@media (max-width: 760px){
    .rules-flow-closing-card{
        padding:20px 18px 18px;
    }

    .rules-flow-closing-card strong{
        font-size:21px;
    }

    .rules-flow-closing-card p{
        font-size:16px;
        line-height:1.72;
    }
}

/* === RULES HEAD PREMIUM CLEANUP === */

.rules-flow-head{
    margin:0 0 14px;
}

.rules-flow-head h2{
    display:none;
}

/* === RULES HERO FINAL ALIGNMENT === */

.rules-flow-hero{
    width:min(1200px,92%);
    margin:0 auto;
    padding:74px 0 22px;
}

.rules-flow-hero-inner{
    max-width:760px;
    margin:0;
    padding:0;
    display:block;
}

.rules-flow-hero-inner *{
    text-align:left;
}


/* === SANCTIONS FLAT STYLE === */

.rules-flow-sanctions-flat{
    padding:20px 22px;
    border-radius:22px;
    background:linear-gradient(180deg, rgba(60,15,15,.28), rgba(25,8,8,.20));
    border:1px solid rgba(255,80,80,.22);
    box-shadow:0 18px 42px rgba(0,0,0,.18);
}

.rules-flow-sanctions-flat h3{
    margin:0 0 14px;
    font-size:18px;
    font-weight:700;
    color:#ff9aa2;
}


/* === RULES TYPOGRAPHY FIX === */

/* Haupt-Regeltext kleiner und ruhiger */
.rules-flow-item p{
    font-size:17px;
    line-height:1.7;
    color:rgba(255,255,255,.82);
}

/* kompakte Listen (z. B. Sanktionen) noch etwas kleiner */
.rules-flow-list.compact .rules-flow-item p{
    font-size:15px;
    line-height:1.6;
    color:rgba(255,255,255,.75);
}

/* Optional: etwas mehr Abstand zwischen Regeln */
.rules-flow-item{
    padding:10px 0 10px 18px;
}


/* =========================================================
   INDEX MOBILE FIX – HERO / LIVE / FEATURES / PROGRESS
   ========================================================= */

@media (max-width: 900px){
    .hero{
        grid-template-columns:1fr;
        min-height:auto;
        padding:64px 0 24px;
        gap:22px;
    }

    .hero-copy,
    .hero-side-stack,
    .panel,
    .brand-status-panel,
    .status-panel{
        width:100%;
        max-width:none;
    }

    .brand-story-grid,
    .progress-grid{
        grid-template-columns:1fr;
    }

    .live-row-big{
        grid-template-columns:1fr;
    }

    .live-row-small{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 760px){
    .hero,
    .brand-story-section,
    .features-section,
    .progress-showcase,
    .gallery-section,
    .live-container{
        width:min(1200px,94%);
    }

    .hero{
        grid-template-columns:1fr;
        min-height:auto;
        padding:52px 0 18px;
        gap:18px;
    }

    .hero-copy{
        width:100%;
        max-width:none;
    }

    .hero-copy h1{
        font-size:34px;
        line-height:1.02;
        margin:0 0 14px;
    }

    .lead{
        font-size:16px;
        line-height:1.65;
        margin:0 0 18px;
    }

    .hero-actions{
        flex-direction:column;
        gap:10px;
    }

    .hero-actions .btn{
        width:100%;
    }

    .panel,
    .status-panel{
        width:100%;
        max-width:none;
        padding:18px;
    }

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

    .ipbox{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .copybtn{
        width:100%;
    }

    .brand-story-grid,
    .features-grid,
    .progress-grid{
        grid-template-columns:1fr;
    }

    .live-row-big,
    .live-row-small{
        grid-template-columns:1fr;
    }

    .live-card{
        min-height:auto !important;
    }
}

@media (max-width: 480px){
    .hero-copy h1{
        font-size:30px;
    }

    .lead{
        font-size:15px;
    }
}

/* =========================================================
   INDEX MOBILE FIX V2 – NAV / BRAND / COMPACT LAYOUT
   ========================================================= */

@media (max-width: 760px){
    .nav .bar{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
        padding:12px 0;
    }

    .brand{
        width:100%;
        gap:10px;
        align-items:center;
    }

    .brand img{
        height:36px;
        flex-shrink:0;
    }

    .brandtext{
        min-width:0;
    }

    .brandtext strong{
        font-size:16px;
        line-height:1.05;
        display:block;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .brandtext small{
        font-size:11px;
        line-height:1.2;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .navlinks{
        width:100%;
        display:flex;
        flex-wrap:nowrap;
        justify-content:flex-start;
        gap:8px;
        overflow-x:auto;
        overflow-y:hidden;
        padding-bottom:2px;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .navlinks::-webkit-scrollbar{
        display:none;
    }

    .navlinks a{
        flex:0 0 auto;
        font-size:13px;
        padding:8px 12px;
        white-space:nowrap;
    }

    .hero,
    .brand-story-section,
    .features-section,
    .progress-showcase,
    .gallery-section,
    .live-container{
        width:min(1200px,94%);
    }

    .hero{
        grid-template-columns:1fr;
        min-height:auto;
        padding:38px 0 14px;
        gap:16px;
    }

    .hero-badge{
        margin-bottom:10px;
        padding:7px 11px;
        font-size:11px;
    }

    .hero-copy h1{
        font-size:30px;
        line-height:1.02;
        letter-spacing:-0.025em;
        margin:0 0 12px;
    }

    .lead{
        font-size:15px;
        line-height:1.6;
        margin:0 0 16px;
    }

    .hero-points{
        gap:6px;
        margin:0 0 16px;
    }

    .hero-points span{
        padding:7px 10px;
        font-size:11px;
        line-height:1.2;
    }

    .hero-actions{
        flex-direction:column;
        align-items:stretch;
        gap:8px;
    }

    .hero-actions .btn{
        width:100%;
        min-height:44px;
        padding:11px 16px;
        font-size:14px;
    }

    .panel,
    .brand-status-panel,
    .status-panel{
        padding:16px;
        border-radius:18px;
    }

    .status-top{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
        margin-bottom:12px;
    }

    .status-eyebrow{
        font-size:10px;
        margin-bottom:6px;
    }

    .status-top h3{
        font-size:18px;
        line-height:1.08;
    }

    .status-pill{
        font-size:11px;
        padding:6px 9px;
    }

    .stats{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .stat{
        min-height:66px;
        padding:11px 12px;
        border-radius:13px;
    }

    .stat-label{
        font-size:10px;
        margin-bottom:5px;
    }

    .stat-value{
        font-size:16px;
        line-height:1.15;
    }

    .ipbox{
        margin-top:12px;
        padding:11px 12px;
        gap:8px;
        border-radius:13px;
        flex-direction:column;
        align-items:flex-start;
    }

    .ip-label{
        font-size:10px;
    }

    .ip-text{
        font-size:15px;
        line-height:1.25;
        overflow-wrap:anywhere;
    }

    .copybtn{
        width:100%;
        min-width:0;
        min-height:42px;
        font-size:13px;
        padding:9px 12px;
    }

    .status-event-inline{
        margin-top:12px;
        padding:12px 13px;
        border-radius:13px;
    }

    .status-event-inline-kicker{
        font-size:10px;
    }

    .status-event-inline-title{
        font-size:14px;
        line-height:1.35;
    }

    .brand-story-card{
        padding:18px;
        border-radius:20px;
    }

    .brand-story-card h2{
        font-size:26px;
        line-height:1.08;
        margin:0 0 10px;
    }

    .brand-story-card p{
        font-size:15px;
        line-height:1.65;
        margin:0 0 18px;
    }

    .brand-story-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .brand-story-item{
        padding:16px;
        border-radius:16px;
    }

    .brand-story-item strong{
        font-size:17px;
        margin-bottom:6px;
    }

    .brand-story-item span{
        font-size:14px;
        line-height:1.6;
    }

    .live-section{
        padding:6px 0 28px;
    }

    .live-container h2{
        font-size:26px;
        line-height:1.08;
        margin:0 0 8px;
    }

    .live-sub{
        font-size:15px;
        line-height:1.65;
        margin:0 0 18px;
    }

    .live-grid{
        gap:10px;
    }

    .live-row-big{
        grid-template-columns:1fr;
        gap:10px;
    }

    .live-row-small{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .live-card{
        padding:16px;
        border-radius:18px;
        min-height:auto !important;
    }

    .live-label{
        font-size:10px;
        margin-bottom:7px;
    }

    .live-row-big .live-value{
        font-size:26px;
        line-height:1.08;
    }

    .live-row-small .live-value{
        font-size:18px;
        line-height:1.08;
    }

    .live-meta{
        font-size:12px;
        line-height:1.4;
    }

    .section-head{
        margin:0 0 18px;
    }

    .section-kicker,
    .live-kicker,
    .brand-story-kicker{
        font-size:10px;
        margin-bottom:10px;
    }

    .section-head h2{
        font-size:26px;
        line-height:1.08;
        margin:0 0 10px;
    }

    .section-head p{
        font-size:15px;
        line-height:1.65;
    }

    .features-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .feature-card{
        padding:18px;
        border-radius:18px;
    }

    .feature-icon{
        width:44px;
        height:44px;
        font-size:20px;
        margin-bottom:12px;
        border-radius:14px;
    }

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

    .feature-card p{
        font-size:14px;
        line-height:1.65;
    }

    .progress-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .progress-card{
        padding:18px;
        border-radius:18px;
    }

    .progress-step{
        margin-bottom:10px;
        padding:5px 10px;
        font-size:10px;
    }

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

    .progress-card p{
        font-size:14px;
        line-height:1.65;
    }
}

@media (max-width: 480px){
    .brand img{
        height:34px;
    }

    .brandtext strong{
        font-size:15px;
    }

    .brandtext small{
        font-size:10px;
    }

    .hero{
        padding:34px 0 12px;
    }

    .hero-copy h1{
        font-size:27px;
    }

    .lead{
        font-size:14px;
    }

    .hero-points{
        flex-direction:column;
        align-items:stretch;
    }

    .hero-points span{
        width:100%;
        justify-content:center;
        text-align:center;
    }

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

    .live-row-small{
        grid-template-columns:1fr;
    }

    .brand-story-card h2,
    .live-container h2,
    .section-head h2{
        font-size:24px;
    }
}

/* =========================================================
   SUBPAGES MOBILE FIX – REALMS / UPDATES / RULES / LEGAL
   ========================================================= */

@media (max-width: 760px){
    .page-head,
    .realms-hero,
    .updates-hero,
    .rules-flow-hero,
    .rules-hero-polished,
    .legal-page,
    .realms-intro,
    .realms-gallery,
    .realms-community-note,
    .realms-values,
    .realms-cta,
    .updates-featured,
    .updates-list,
    .update-single,
    .rules-flow-page,
    .rules-polished-wrap{
        width:min(1200px,94%);
    }

    .page-head,
    .realms-hero,
    .updates-hero,
    .rules-flow-hero,
    .rules-hero-polished{
        padding-top:52px;
        padding-bottom:16px;
    }

    .page-head h1,
    .realms-hero h1,
    .updates-hero h1,
    .rules-flow-hero h1,
    .rules-hero-polished h1,
    .update-single-content h1{
        font-size:34px;
        line-height:1.04;
        letter-spacing:-0.025em;
        margin:0 0 10px;
    }

    .page-head p,
    .realms-hero p,
    .updates-hero p,
    .rules-flow-hero p,
    .rules-hero-polished p,
    .realms-community-note-card p,
    .realms-cta-card p,
    .update-intro{
        font-size:16px;
        line-height:1.7;
    }

    .realms-intro-card,
    .realms-community-note-card,
    .realms-cta-card,
    .legal-card,
    .updates-featured-content,
    .updates-card-body,
    .card,
    .rules-flow-intro,
    .rules-flow-sanctions-block,
    .rules-flow-sanctions-flat,
    .rules-flow-closing-card,
    .rules-panel{
        padding:18px;
        border-radius:20px;
    }

    .realms-intro-grid,
    .realms-values-grid,
    .realms-gallery-grid,
    .realm-spotlight-grid,
    .updates-grid,
    .rules-flow-highlight-grid,
    .rules-grid-polished{
        grid-template-columns:1fr;
        gap:12px;
    }

    .realms-intro-item,
    .realms-value-card,
    .rules-flow-highlight-card,
    .rules-subpanel{
        padding:16px;
        border-radius:16px;
    }

    .realms-intro-item strong,
    .realms-value-card strong{
        font-size:18px;
        margin-bottom:6px;
    }

    .realms-intro-item span,
    .realms-value-card span{
        font-size:14px;
        line-height:1.65;
    }

    .realms-community-note-card h2,
    .realms-cta-card h2,
    .updates-featured-content h2,
    .updates-featured-content-new h2,
    .updates-card h3{
        font-size:28px;
        line-height:1.08;
    }

    .realms-cta-actions,
    .updates-actions,
    .home-update-teaser-actions{
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }

    .realms-cta-actions .btn,
    .updates-actions .btn,
    .home-update-teaser-actions .btn{
        width:100%;
    }

    .realms-gallery-card,
    .realm-spotlight-card,
    .updates-card,
    .updates-featured-card{
        border-radius:20px;
    }

    .realms-gallery-card img,
    .realm-spotlight-card img,
    .updates-card-media img,
    .updates-featured-media img{
        aspect-ratio:16 / 10;
    }

    .realms-hero-showcase-card{
        border-radius:20px;
    }

    .realms-hero-showcase-card img{
        aspect-ratio:16 / 9;
    }

    .realms-hero-showcase-overlay{
        padding:18px;
    }

    .realms-hero-showcase-title{
        font-size:26px;
        line-height:1.08;
    }

    .realms-hero-showcase-sub{
        font-size:14px;
        line-height:1.6;
    }

    .updates-featured{
        padding:8px 0 40px;
    }

    .updates-featured-content{
        padding:18px;
    }

    .updates-meta-row{
        gap:8px;
        margin-bottom:12px;
    }

    .updates-badge,
    .home-update-teaser-badge{
        font-size:10px;
        padding:6px 10px;
    }

    .updates-date,
    .home-update-teaser-date{
        font-size:12px;
    }

    .updates-featured-excerpt,
    .updates-card-excerpt,
    .home-update-teaser-text{
        font-size:15px;
        line-height:1.7;
    }

    .updates-featured-content-new .updates-featured-body-collapsed p,
    .updates-featured-body p,
    .updates-card-content p,
    .update-body p{
        font-size:15px;
        line-height:1.75;
    }

    .update-single{
        margin:24px auto;
    }

    .update-single-hero img{
        border-radius:20px;
        margin-bottom:18px;
    }

    .rules-flow-hero p{
        font-size:16px;
        line-height:1.7;
    }

    .rules-flow-intro{
        gap:12px;
        margin-bottom:24px;
        align-items:flex-start;
    }

    .rules-flow-intro-icon,
    .rules-intro-strip-icon{
        width:44px;
        height:44px;
        border-radius:14px;
        font-size:20px;
    }

    .rules-flow-intro-text strong,
    .rules-intro-strip-content strong{
        font-size:18px;
    }

    .rules-flow-intro-text span,
    .rules-intro-strip-content span{
        font-size:14px;
        line-height:1.6;
    }

    .rules-flow-section{
        padding-left:22px;
        margin-bottom:24px;
    }

    .rules-flow-section::before{
        left:7px;
    }

    .rules-flow-label{
        font-size:18px;
        padding:8px 13px;
    }

    .rules-flow-list{
        margin-left:0;
        gap:8px;
    }

    .rules-flow-item{
        padding:8px 0 8px 16px;
    }

    .rules-flow-item::before{
        top:16px;
        left:0;
        width:6px;
        height:6px;
    }

    .rules-flow-item p{
        font-size:15px;
        line-height:1.7;
        padding:0 0 12px;
    }

    .rules-flow-note{
        margin-top:14px;
        padding:15px 16px;
        border-radius:16px;
        font-size:14px;
        line-height:1.65;
    }

    .rules-flow-highlight-card{
        padding:16px;
        border-radius:18px;
    }

    .rules-flow-highlight-card strong{
        font-size:20px;
        line-height:1.12;
        margin-bottom:8px;
    }

    .rules-flow-highlight-card p{
        font-size:14px;
        line-height:1.65;
    }

    .rules-flow-sanctions{
        gap:16px;
    }

    .rules-flow-sanctions-block h3,
    .rules-flow-sanctions-flat h3{
        font-size:17px;
        margin:0 0 10px;
    }

    .rules-flow-list.compact .rules-flow-item{
        padding:6px 0 6px 14px;
    }

    .rules-flow-list.compact .rules-flow-item p{
        font-size:14px;
        line-height:1.6;
    }

    .rules-flow-closing-card strong{
        font-size:20px;
        margin-bottom:10px;
    }

    .rules-flow-closing-card p{
        font-size:14px;
        line-height:1.7;
    }

    .rules-panel-head h2,
    .legal-card h2{
        font-size:24px;
        line-height:1.1;
    }

    .legal-card h3{
        font-size:18px;
        margin:20px 0 8px;
    }

    .legal-card p{
        font-size:15px;
        line-height:1.75;
    }
}

@media (max-width: 480px){
    .page-head h1,
    .realms-hero h1,
    .updates-hero h1,
    .rules-flow-hero h1,
    .rules-hero-polished h1,
    .update-single-content h1{
        font-size:30px;
    }

    .realms-community-note-card h2,
    .realms-cta-card h2,
    .updates-featured-content h2,
    .updates-featured-content-new h2,
    .updates-card h3,
    .rules-panel-head h2,
    .legal-card h2{
        font-size:24px;
    }

    .realms-hero-showcase-title{
        font-size:22px;
    }

    .rules-flow-label{
        font-size:16px;
    }

    .realms-gallery-grid,
    .realm-spotlight-grid,
    .updates-grid,
    .rules-flow-highlight-grid{
        gap:10px;
    }
}

/* =========================================================
   SHOP PAGE
   ========================================================= */

.shop-hero{
    width:min(1200px,92%);
    margin:0 auto;
    padding:74px 0 22px;
}

.shop-hero-inner{
    max-width:820px;
}

.shop-kicker{
    display:inline-block;
    margin-bottom:12px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.20em;
    text-transform:uppercase;
    color:var(--cyan);
    text-shadow:0 6px 20px rgba(34,211,238,.18);
}

.shop-hero h1{
    margin:0 0 12px;
    font-size:clamp(48px,7vw,78px);
    line-height:.95;
    font-weight:800;
    letter-spacing:-0.04em;
}

.shop-hero p{
    margin:0;
    max-width:760px;
    color:var(--muted);
    font-size:19px;
    line-height:1.8;
}

.shop-status{
    width:min(1200px,92%);
    margin:0 auto;
    padding:8px 0 34px;
}

.shop-status-card{
    background:linear-gradient(180deg, rgba(5,10,20,.84), rgba(4,8,16,.76));
    border:1px solid rgba(255,255,255,.08);
    border-radius:26px;
    padding:26px;
    backdrop-filter:blur(14px);
    box-shadow:0 16px 40px rgba(0,0,0,.20);
}

.shop-status-badge{
    display:inline-flex;
    align-items:center;
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    background:rgba(249,115,22,.12);
    border:1px solid rgba(249,115,22,.26);
    color:#fff;
    margin-bottom:12px;
}

.shop-status-card h2{
    margin:0 0 12px;
    font-size:34px;
    line-height:1.08;
    letter-spacing:-0.03em;
}

.shop-status-card p{
    margin:0;
    color:var(--muted);
    font-size:17px;
    line-height:1.75;
    max-width:820px;
}

.shop-products{
    width:min(1200px,92%);
    margin:0 auto;
    padding:0 0 34px;
}

.shop-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:18px;
}

.shop-card{
    position:relative;
    overflow:hidden;
    padding:26px;
    border-radius:26px;
    background:linear-gradient(180deg, rgba(5,10,20,.80), rgba(4,8,16,.72));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 16px 40px rgba(0,0,0,.20);
    backdrop-filter:blur(14px);
}

.shop-card-featured{
    background:linear-gradient(180deg, rgba(124,58,237,.18), rgba(34,211,238,.08));
    border-color:rgba(34,211,238,.18);
    box-shadow:0 18px 42px rgba(0,0,0,.24);
}

.shop-card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.shop-card-badge{
    display:inline-flex;
    align-items:center;
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    background:rgba(34,211,238,.10);
    border:1px solid rgba(34,211,238,.22);
    color:#fff;
}

.shop-card-badge-plus{
    background:rgba(124,58,237,.18);
    border-color:rgba(124,58,237,.28);
}

.shop-card-price{
    color:var(--muted);
    font-size:14px;
    font-weight:700;
}

.shop-card h3{
    margin:0 0 12px;
    font-size:34px;
    line-height:1.08;
    letter-spacing:-0.03em;
}

.shop-card-text{
    margin:0 0 18px;
    color:var(--muted);
    font-size:16px;
    line-height:1.75;
}

.shop-feature-list{
    margin:0;
    padding:0;
    list-style:none;
    display:grid;
    gap:10px;
}

.shop-feature-list li{
    position:relative;
    padding-left:18px;
    color:#fff;
    line-height:1.7;
}

.shop-feature-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:11px;
    width:7px;
    height:7px;
    border-radius:999px;
    background:linear-gradient(135deg, var(--cyan), var(--purple));
    box-shadow:0 0 12px rgba(34,211,238,.24);
}

.shop-card-actions{
    margin-top:22px;
}

.shop-unavailable{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 16px;
    min-height:46px;
    border-radius:14px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
    font-weight:700;
}

.shop-info{
    width:min(1200px,92%);
    margin:0 auto;
    padding:0 0 34px;
}

.shop-info-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:16px;
}

.shop-info-card{
    padding:22px;
    border-radius:22px;
    background:linear-gradient(180deg, rgba(0,0,0,.50), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 12px 34px rgba(0,0,0,.18);
}

.shop-info-card strong{
    display:block;
    margin-bottom:10px;
    font-size:20px;
    color:#fff;
}

.shop-info-card span{
    display:block;
    color:var(--muted);
    line-height:1.75;
}

.shop-faq{
    width:min(1200px,92%);
    margin:0 auto;
    padding:0 0 90px;
}

.shop-faq-list{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:16px;
}

.shop-faq-item{
    padding:22px;
    border-radius:22px;
    background:linear-gradient(180deg, rgba(5,10,20,.80), rgba(4,8,16,.72));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 14px 36px rgba(0,0,0,.20);
}

.shop-faq-item h3{
    margin:0 0 10px;
    font-size:22px;
    line-height:1.15;
}

.shop-faq-item p{
    margin:0;
    color:var(--muted);
    line-height:1.75;
}

@media (max-width: 980px){
    .shop-grid,
    .shop-info-grid,
    .shop-faq-list{
        grid-template-columns:1fr;
    }
}

@media (max-width: 760px){
    .shop-hero,
    .shop-status,
    .shop-products,
    .shop-info,
    .shop-faq{
        width:min(1200px,94%);
    }

    .shop-hero{
        padding:56px 0 18px;
    }

    .shop-hero h1{
        font-size:38px;
        line-height:1.02;
    }

    .shop-hero p{
        font-size:16px;
        line-height:1.7;
    }

    .shop-status-card,
    .shop-card,
    .shop-info-card,
    .shop-faq-item{
        padding:18px;
        border-radius:20px;
    }

    .shop-status-card h2{
        font-size:28px;
    }

    .shop-card h3{
        font-size:28px;
    }

    .shop-card-text,
    .shop-status-card p,
    .shop-info-card span,
    .shop-faq-item p{
        font-size:15px;
        line-height:1.7;
    }

    .shop-info-card strong,
    .shop-faq-item h3{
        font-size:18px;
    }
}

@media (max-width: 480px){
    .shop-hero h1{
        font-size:32px;
    }

    .shop-status-card h2,
    .shop-card h3{
        font-size:24px;
    }
}

/* =========================================================
   SHOP MODAL / SHOP CARD TEXTS
   ========================================================= */

.shop-card-catch{
    margin:0 0 8px;
    color:#fff;
    font-size:22px;
    font-weight:800;
    line-height:1.2;
    letter-spacing:-0.02em;
}

.shop-card-subline{
    margin:0 0 18px;
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
}

.shop-card-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    margin-top:22px;
}

.shop-modal{
    position:fixed;
    inset:0;
    z-index:220;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(4,7,14,.82);
    backdrop-filter:blur(12px);
    opacity:0;
    visibility:hidden;
    transition:.22s ease;
}

.shop-modal.active{
    opacity:1;
    visibility:visible;
}

.shop-modal-content{
    position:relative;
    width:min(760px, 100%);
    max-height:88vh;
    overflow:auto;
    padding:28px;
    border-radius:26px;
    background:linear-gradient(180deg, rgba(5,10,20,.92), rgba(4,8,16,.86));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 24px 70px rgba(0,0,0,.35);
}

.shop-modal-close{
    position:absolute;
    top:16px;
    right:16px;
    width:46px;
    height:46px;
    border:none;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
    font-size:28px;
    line-height:1;
    cursor:pointer;
    transition:.2s ease;
}

.shop-modal-close:hover{
    background:rgba(255,255,255,.14);
    transform:translateY(-1px);
}

.shop-modal-content h2{
    margin:0 0 10px;
    font-size:38px;
    line-height:1.05;
    letter-spacing:-0.03em;
}

.shop-modal-head{
    margin:0 0 18px;
    color:#fff;
    font-size:18px;
    line-height:1.7;
    font-weight:700;
}

.shop-modal-list{
    margin:0;
    padding:0;
    list-style:none;
    display:grid;
    gap:12px;
}

.shop-modal-list li{
    position:relative;
    padding-left:22px;
    color:#fff;
    line-height:1.75;
    font-size:16px;
}

.shop-modal-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:11px;
    width:8px;
    height:8px;
    border-radius:999px;
    background:linear-gradient(135deg, var(--cyan), var(--purple));
    box-shadow:0 0 12px rgba(34,211,238,.24);
}

.shop-modal-note{
    margin:22px 0 12px;
    padding:16px 18px;
    border-radius:18px;
    background:rgba(124,58,237,.12);
    border:1px solid rgba(124,58,237,.22);
    color:#fff;
    line-height:1.7;
}

.shop-modal-fairness{
    margin:0;
    color:var(--muted);
    line-height:1.7;
    font-size:14px;
}

@media (max-width: 760px){
    .shop-card-catch{
        font-size:20px;
    }

    .shop-card-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .shop-card-actions .btn{
        width:100%;
    }

    .shop-modal{
        padding:16px;
    }

    .shop-modal-content{
        padding:22px;
        border-radius:22px;
    }

    .shop-modal-content h2{
        font-size:30px;
    }

    .shop-modal-head{
        font-size:16px;
    }

    .shop-modal-list li{
        font-size:15px;
        line-height:1.7;
    }
}

@media (max-width: 480px){
    .shop-modal-content{
        padding:18px;
    }

    .shop-modal-content h2{
        font-size:26px;
    }

    .shop-card-catch{
        font-size:18px;
    }

    .shop-card-subline{
        font-size:13px;
    }
}

/* =========================================================
   SHOP PREMIUM POLISH
   ========================================================= */

/* VIP+ Badge */
.shop-card-featured::before{
    content:"Beliebteste Wahl";
    position:absolute;
    top:16px;
    right:16px;
    padding:6px 10px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(124,58,237,.85), rgba(34,211,238,.85));
    color:#fff;
    box-shadow:0 8px 22px rgba(34,211,238,.25);
}

/* VIP+ stärker hervorheben */
.shop-card-featured{
    transform:scale(1.02);
    border-color:rgba(34,211,238,.28);
    box-shadow:
        0 22px 60px rgba(0,0,0,.30),
        0 0 0 1px rgba(34,211,238,.12),
        inset 0 1px 0 rgba(255,255,255,.05);
}

/* Hover Effekt allgemein */
.shop-card{
    transition:.25s ease;
}

.shop-card:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 60px rgba(0,0,0,.32);
}

/* VIP+ Hover stärker */
.shop-card-featured:hover{
    transform:translateY(-8px) scale(1.03);
    box-shadow:0 30px 80px rgba(0,0,0,.40);
}

/* Modal Head optisch stärker */
.shop-modal-head{
    color:var(--cyan);
    font-weight:800;
}

/* Modal Liste etwas cleaner */
.shop-modal-list li{
    font-weight:500;
}

/* CTA Gefühl verstärken */
.shop-unavailable{
    opacity:.85;
    font-size:14px;
}

/* Mobile: VIP+ nicht zu groß */
@media (max-width: 760px){
    .shop-card-featured{
        transform:none;
    }

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

    .shop-card-featured::before{
        top:12px;
        right:12px;
        font-size:10px;
    }
}

/* =========================================================
   SHOP FINAL POLISH
   ========================================================= */

.shop-support-note{
    margin-top:14px;
    font-size:13px;
    color:var(--muted);
    line-height:1.6;
}

.shop-unavailable{
    opacity:.6;
    font-size:13px;
    border-color:rgba(255,255,255,.06);
    background:rgba(255,255,255,.04);
}

.shop-card-actions{
    margin-top:18px;
}

@media (max-width: 760px){
    .shop-support-note{
        font-size:12px;
    }

    .shop-unavailable{
        font-size:12px;
    }
}

/* =========================================================
   SHOP ICONS
   ========================================================= */

.shop-card-icon{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:6px 0 14px;
}

.shop-card-icon img{
    width:136px;
    height:auto;
    object-fit:contain;
    transition:.25s ease;
}

.shop-card:hover .shop-card-icon img{
    transform:scale(1.05);
    filter:drop-shadow(0 8px 20px rgba(34,211,238,.18));
}

.shop-card-featured .shop-card-icon img{
    filter:drop-shadow(0 12px 28px rgba(124,58,237,.25));
}

@media (max-width: 760px){
    .shop-card-icon img{
        width:102px;
    }
}

.shop-card-layout{
    display:grid;
    grid-template-columns:1fr 140px;
    gap:20px;
    align-items:center;
}

.shop-card-icon{
    display:flex;
    justify-content:center;
    align-items:center;
}

.shop-card-icon img{
    width:120px;
    height:auto;
    object-fit:contain;
}

@media (max-width: 760px){
    .shop-card-layout{
        grid-template-columns:1fr;
    }

    .shop-card-icon{
        margin-top:12px;
    }
}

/* Größere Icons */
.shop-card-icon img{
    width:140px;
}

/* VIP+ stärker hervorheben */
.shop-card-featured .shop-card-icon img{
    width:160px;
}

/* Mehr Präsenz */
.shop-card-layout{
    align-items:center;
}

.shop-card-featured .shop-card-icon{
    transform:translateY(-6px);
}

/* Layout verbessern */
.shop-card-layout{
    display:grid;
    grid-template-columns:1fr 180px;
    gap:20px;
    align-items:center;
}

/* Icon größer + zentriert */
.shop-card-icon{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100%;
}

.shop-card-icon img{
    width:160px;
    height:auto;
    object-fit:contain;
    opacity:0.95;
    transition:.3s ease;
}

/* VIP+ stärker */
.shop-card-featured .shop-card-icon img{
    width:180px;
    filter:drop-shadow(0 14px 35px rgba(124,58,237,.35));
}

/* Hover Effekt */
.shop-card:hover .shop-card-icon img{
    transform:scale(1.08);
    opacity:1;
}

/* Mobile fix */
@media (max-width: 760px){
    .shop-card-layout{
        grid-template-columns:1fr;
    }

    .shop-card-icon{
        margin-top:14px;
    }

    .shop-card-icon img{
        width:110px;
    }
}

/* =========================================
   BIG ICON UPGRADE
========================================= */

/* Layout breiter */
.shop-card-layout{
    display:grid;
    grid-template-columns:1fr 220px;
    gap:20px;
    align-items:center;
}

/* Icon Container */
.shop-card-icon{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100%;
}

/* Standard VIP */
.shop-card-icon img{
    width:200px;
    max-width:100%;
    height:auto;
    object-fit:contain;
    opacity:0.95;
    transition:.35s ease;
}

/* VIP+ deutlich stärker */
.shop-card-featured .shop-card-icon img{
    width:230px;
    transform:scale(1.05);
    filter:
        drop-shadow(0 20px 40px rgba(124,58,237,.35))
        drop-shadow(0 0 30px rgba(124,58,237,.25));
}

/* Hover Effekt */
.shop-card:hover .shop-card-icon img{
    transform:scale(1.1);
    opacity:1;
}

/* VIP+ Hover noch stärker */
.shop-card-featured:hover .shop-card-icon img{
    transform:scale(1.15);
}

/* Mobile */
@media (max-width: 760px){
    .shop-card-layout{
        grid-template-columns:1fr;
    }

    .shop-card-icon{
        margin-top:14px;
    }

    .shop-card-icon img{
        width:130px;
    }

    .shop-card-featured .shop-card-icon img{
        width:150px;
    }
}

/* =========================================================
   SHOP ICONS - CORNER EMBEDDED LOOK
   ========================================================= */

.shop-card{
    position:relative;
    overflow:hidden;
}

.shop-card-layout{
    display:block;
}

.shop-card-content{
    position:relative;
    z-index:2;
    max-width:62%;
}

.shop-card-icon{
    position:absolute;
    right:26px;
    bottom:86px;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
    z-index:1;
    pointer-events:none;
}

.shop-card-icon img{
    width:190px;
    height:auto;
    object-fit:contain;
    opacity:.96;
    transition:transform .3s ease, filter .3s ease, opacity .3s ease;
    filter:drop-shadow(0 12px 24px rgba(0,0,0,.22));
}

.shop-card:hover .shop-card-icon img{
    transform:scale(1.04);
    opacity:1;
}

.shop-card-featured .shop-card-icon{
    right:22px;
    bottom:72px;
}

.shop-card-featured .shop-card-icon img{
    width:220px;
    filter:
        drop-shadow(0 18px 34px rgba(0,0,0,.26))
        drop-shadow(0 0 26px rgba(124,58,237,.20));
}

.shop-card-featured:hover .shop-card-icon img{
    transform:scale(1.06);
}

.shop-card-actions{
    position:relative;
    z-index:2;
}

@media (max-width: 1100px){
    .shop-card-content{
        max-width:60%;
    }

    .shop-card-icon img{
        width:170px;
    }

    .shop-card-featured .shop-card-icon img{
        width:195px;
    }
}

@media (max-width: 760px){
    .shop-card-layout{
        display:grid;
        grid-template-columns:1fr;
    }

    .shop-card-content{
        max-width:100%;
    }

    .shop-card-icon{
        position:relative;
        right:auto;
        bottom:auto;
        margin:12px 0 4px;
        justify-content:center;
        align-items:center;
    }

    .shop-card-icon img{
        width:130px;
    }

    .shop-card-featured .shop-card-icon img{
        width:150px;
    }
}

/* =========================================================
   SHOP ICONS - BIGGER WITHOUT BIGGER CARD
   ========================================================= */

.shop-card-icon{
    right:18px;
    bottom:54px;
}

.shop-card-icon img{
    width:240px;
    max-width:none;
}

.shop-card-featured .shop-card-icon{
    right:10px;
    bottom:42px;
}

.shop-card-featured .shop-card-icon img{
    width:285px;
}

@media (max-width: 1100px){
    .shop-card-icon{
        right:12px;
        bottom:52px;
    }

    .shop-card-icon img{
        width:210px;
    }

    .shop-card-featured .shop-card-icon{
        right:8px;
        bottom:40px;
    }

    .shop-card-featured .shop-card-icon img{
        width:245px;
    }
}

@media (max-width: 760px){
    .shop-card-icon{
        right:auto;
        bottom:auto;
    }

    .shop-card-icon img{
        width:130px;
        max-width:100%;
    }

    .shop-card-featured .shop-card-icon img{
        width:150px;
    }
}

/* =========================================================
   SHOP ICON SHOWCASE EMBED
   ========================================================= */

.shop-card{
    position:relative;
    overflow:hidden;
}

.shop-card::after{
    content:"";
    position:absolute;
    right:26px;
    bottom:34px;
    width:260px;
    height:260px;
    border-radius:999px;
    background:radial-gradient(circle, rgba(34,211,238,.08) 0%, rgba(34,211,238,.03) 38%, transparent 72%);
    pointer-events:none;
    z-index:0;
}

.shop-card-featured::after{
    right:8px;
    bottom:20px;
    width:320px;
    height:320px;
    background:radial-gradient(circle, rgba(124,58,237,.16) 0%, rgba(34,211,238,.08) 34%, transparent 74%);
}

.shop-card-content{
    position:relative;
    z-index:2;
    max-width:60%;
}

.shop-card-icon{
    position:absolute;
    right:22px;
    bottom:34px;
    width:260px;
    height:260px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    pointer-events:none;
    z-index:1;
}

.shop-card-featured .shop-card-icon{
    right:6px;
    bottom:18px;
    width:320px;
    height:320px;
}

.shop-card-icon::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:10px;
    width:170px;
    height:42px;
    transform:translateX(-50%);
    border-radius:999px;
    background:radial-gradient(ellipse at center, rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 48%, transparent 76%);
    filter:blur(6px);
    z-index:0;
}

.shop-card-featured .shop-card-icon::before{
    width:190px;
    height:48px;
    background:radial-gradient(ellipse at center, rgba(0,0,0,.46) 0%, rgba(0,0,0,.20) 48%, transparent 76%);
}

.shop-card-icon::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:18px;
    width:210px;
    height:210px;
    transform:translateX(-50%);
    border-radius:999px;
    background:radial-gradient(circle, rgba(255,255,255,.035) 0%, rgba(255,255,255,.015) 42%, transparent 72%);
    z-index:0;
}

.shop-card-featured .shop-card-icon::after{
    width:245px;
    height:245px;
    background:radial-gradient(circle, rgba(124,58,237,.10) 0%, rgba(34,211,238,.04) 40%, transparent 72%);
}

.shop-card-icon img{
    position:relative;
    z-index:1;
    width:240px;
    max-width:none;
    height:auto;
    object-fit:contain;
    opacity:.98;
    transform-origin:center bottom;
    transition:transform .35s ease, filter .35s ease, opacity .35s ease;
    filter:
        drop-shadow(0 18px 24px rgba(0,0,0,.24))
        drop-shadow(0 4px 12px rgba(34,211,238,.08));
}

.shop-card-featured .shop-card-icon img{
    width:290px;
    filter:
        drop-shadow(0 22px 30px rgba(0,0,0,.28))
        drop-shadow(0 0 28px rgba(124,58,237,.22))
        drop-shadow(0 0 12px rgba(34,211,238,.10));
}

.shop-card:hover .shop-card-icon img{
    transform:translateY(-4px) scale(1.04);
    opacity:1;
}

.shop-card-featured:hover .shop-card-icon img{
    transform:translateY(-6px) scale(1.05);
}

.shop-card-actions{
    position:relative;
    z-index:2;
}

@media (max-width: 1100px){
    .shop-card-content{
        max-width:58%;
    }

    .shop-card::after{
        right:10px;
        bottom:30px;
        width:220px;
        height:220px;
    }

    .shop-card-featured::after{
        width:270px;
        height:270px;
    }

    .shop-card-icon{
        right:8px;
        bottom:28px;
        width:220px;
        height:220px;
    }

    .shop-card-featured .shop-card-icon{
        right:2px;
        bottom:16px;
        width:270px;
        height:270px;
    }

    .shop-card-icon img{
        width:205px;
    }

    .shop-card-featured .shop-card-icon img{
        width:245px;
    }
}

@media (max-width: 760px){
    .shop-card-layout{
        display:grid;
        grid-template-columns:1fr;
    }

    .shop-card-content{
        max-width:100%;
    }

    .shop-card::after,
    .shop-card-featured::after{
        right:auto;
        left:50%;
        bottom:70px;
        transform:translateX(-50%);
        width:180px;
        height:180px;
    }

    .shop-card-icon,
    .shop-card-featured .shop-card-icon{
        position:relative;
        right:auto;
        bottom:auto;
        width:100%;
        height:auto;
        margin:10px 0 2px;
        justify-content:center;
        align-items:center;
    }

    .shop-card-icon::before{
        bottom:2px;
        width:120px;
        height:28px;
    }

    .shop-card-featured .shop-card-icon::before{
        width:132px;
        height:30px;
    }

    .shop-card-icon::after,
    .shop-card-featured .shop-card-icon::after{
        width:150px;
        height:150px;
        bottom:12px;
    }

    .shop-card-icon img{
        width:145px;
        max-width:100%;
    }

    .shop-card-featured .shop-card-icon img{
        width:165px;
    }
}

/* =========================================================
   SHOP ICON POSITION TWEAK
   ========================================================= */

.shop-card-icon{
    right:8px;
    bottom:58px;
}

.shop-card-featured .shop-card-icon{
    right:-4px;
    bottom:40px;
}

@media (max-width: 1100px){
    .shop-card-icon{
        right:2px;
        bottom:54px;
    }

    .shop-card-featured .shop-card-icon{
        right:-6px;
        bottom:36px;
    }
}

@media (max-width: 760px){
    .shop-card-icon,
    .shop-card-featured .shop-card-icon{
        right:auto;
        bottom:auto;
    }
}

/* =========================================================
   SHOP ICON HOVER BOOST
   ========================================================= */

.shop-card-icon{
    right:-6px;
    bottom:56px;
}

.shop-card-featured .shop-card-icon{
    right:-18px;
    bottom:38px;
}

.shop-card-icon img{
    transform:translateY(0) scale(1);
    transform-origin:center bottom;
    transition:
        transform .42s cubic-bezier(.22,1,.36,1),
        filter .42s cubic-bezier(.22,1,.36,1),
        opacity .32s ease;
}

/* VIP Hover */
.shop-card:hover .shop-card-icon img{
    transform:translateY(-18px) scale(1.06);
    opacity:1;
    filter:
        drop-shadow(0 28px 34px rgba(0,0,0,.28))
        drop-shadow(0 0 18px rgba(34,211,238,.16));
}

/* VIP+ stärkerer Hover */
.shop-card-featured:hover .shop-card-icon img{
    transform:translateY(-24px) scale(1.08);
    filter:
        drop-shadow(0 32px 38px rgba(0,0,0,.30))
        drop-shadow(0 0 28px rgba(124,58,237,.28))
        drop-shadow(0 0 16px rgba(34,211,238,.14));
}

/* Glow-Fläche bewegt sich leicht mit */
.shop-card::after{
    transition:
        transform .42s cubic-bezier(.22,1,.36,1),
        opacity .32s ease;
}

.shop-card:hover::after{
    transform:translateY(-8px) scale(1.04);
}

.shop-card-featured:hover::after{
    transform:translateY(-10px) scale(1.06);
}

/* Bodenschatten passt sich an */
.shop-card-icon::before{
    transition:
        transform .42s cubic-bezier(.22,1,.36,1),
        opacity .32s ease,
        filter .42s cubic-bezier(.22,1,.36,1);
}

.shop-card:hover .shop-card-icon::before{
    transform:translateX(-50%) scale(.88);
    opacity:.82;
    filter:blur(8px);
}

.shop-card-featured:hover .shop-card-icon::before{
    transform:translateX(-50%) scale(.84);
    opacity:.78;
    filter:blur(10px);
}

@media (max-width: 1100px){
    .shop-card-icon{
        right:-10px;
        bottom:52px;
    }

    .shop-card-featured .shop-card-icon{
        right:-20px;
        bottom:34px;
    }

    .shop-card:hover .shop-card-icon img{
        transform:translateY(-14px) scale(1.05);
    }

    .shop-card-featured:hover .shop-card-icon img{
        transform:translateY(-18px) scale(1.07);
    }
}

@media (max-width: 760px){
    .shop-card-icon,
    .shop-card-featured .shop-card-icon{
        right:auto;
        bottom:auto;
    }

    .shop-card:hover .shop-card-icon img,
    .shop-card-featured:hover .shop-card-icon img{
        transform:translateY(-8px) scale(1.04);
    }

    .shop-card:hover::after,
    .shop-card-featured:hover::after{
        transform:none;
    }
}

/* =========================================================
   SHOP ICON REVEAL ANIMATION
   ========================================================= */

.shop-card{
    overflow:hidden;
}

.shop-card-icon{
    right:-6px;
    bottom:54px;
    opacity:1;
}

.shop-card-featured .shop-card-icon{
    right:-26px;
    bottom:36px;
}

/* Icons anfangs versteckt */
.shop-card-icon img{
    opacity:0;
    transform:translateY(90px) scale(.78) rotate(-4deg);
    transform-origin:center bottom;
    transition:
        transform .62s cubic-bezier(.16,1,.3,1),
        opacity .28s ease,
        filter .42s cubic-bezier(.22,1,.36,1);
    will-change:transform, opacity, filter;
}

/* VIP Hover: Icon kommt hoch */
.shop-card:hover .shop-card-icon img{
    opacity:1;
    transform:translateY(0) scale(1) rotate(0deg);
    filter:
        drop-shadow(0 24px 28px rgba(0,0,0,.30))
        drop-shadow(0 0 18px rgba(34,211,238,.18));
}

/* VIP+ Hover: noch stärker */
.shop-card-featured:hover .shop-card-icon img{
    opacity:1;
    transform:translateY(0) scale(1.04) rotate(0deg);
    filter:
        drop-shadow(0 28px 34px rgba(0,0,0,.32))
        drop-shadow(0 0 26px rgba(124,58,237,.30))
        drop-shadow(0 0 14px rgba(34,211,238,.14));
}

/* Glow-Fläche kommt leicht mit */
.shop-card::after{
    opacity:.25;
    transition:
        transform .62s cubic-bezier(.16,1,.3,1),
        opacity .28s ease;
}

.shop-card:hover::after{
    opacity:1;
    transform:translateY(-10px) scale(1.08);
}

.shop-card-featured:hover::after{
    opacity:1;
    transform:translateY(-14px) scale(1.10);
}

/* Schattenfläche unten passt sich an */
.shop-card-icon::before{
    opacity:0;
    transform:translateX(-50%) scale(.55);
    transition:
        transform .62s cubic-bezier(.16,1,.3,1),
        opacity .28s ease,
        filter .42s cubic-bezier(.22,1,.36,1);
}

.shop-card:hover .shop-card-icon::before{
    opacity:.92;
    transform:translateX(-50%) scale(1);
    filter:blur(8px);
}

.shop-card-featured:hover .shop-card-icon::before{
    opacity:.96;
    transform:translateX(-50%) scale(1.06);
    filter:blur(10px);
}

/* Mobile deutlich sanfter */
@media (max-width: 1100px){
    .shop-card-icon{
        right:-10px;
        bottom:50px;
    }

    .shop-card-featured .shop-card-icon{
        right:-24px;
        bottom:34px;
    }

    .shop-card-icon img{
        transform:translateY(70px) scale(.82) rotate(-3deg);
    }
}

@media (max-width: 760px){
    .shop-card-icon,
    .shop-card-featured .shop-card-icon{
        right:auto;
        bottom:auto;
    }

    .shop-card-icon img{
        opacity:1;
        transform:none;
    }

    .shop-card-icon::before{
        opacity:1;
        transform:translateX(-50%) scale(1);
    }

    .shop-card::after,
    .shop-card:hover::after,
    .shop-card-featured:hover::after{
        opacity:1;
        transform:none;
    }
}

@media (prefers-reduced-motion: reduce){
    .shop-card-icon img,
    .shop-card::after,
    .shop-card-icon::before{
        transition:none !important;
        opacity:1 !important;
        transform:none !important;
    }
}

/* =========================================================
   FINAL PREMIUM ICON ANIMATION
   ========================================================= */

/* Ausgangszustand */
.shop-card-icon img{
    opacity:0.25;
    transform:translateY(40px) scale(0.9);
    transform-origin:center bottom;
    transition:
        transform .55s cubic-bezier(.22,1,.36,1),
        opacity .35s ease,
        filter .45s ease;
}

/* Hover */
.shop-card:hover .shop-card-icon img{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:
        drop-shadow(0 20px 26px rgba(0,0,0,.30))
        drop-shadow(0 0 18px rgba(34,211,238,.18));
}

/* VIP+ stärker und „floaty“ */
.shop-card-featured:hover .shop-card-icon img{
    transform:translateY(-6px) scale(1.05);
    filter:
        drop-shadow(0 28px 32px rgba(0,0,0,.32))
        drop-shadow(0 0 28px rgba(124,58,237,.32))
        drop-shadow(0 0 14px rgba(34,211,238,.18));
}

/* zusätzlicher Micro-Move (sehr wichtig für Premium Gefühl) */
.shop-card-featured:hover .shop-card-icon img{
    animation:vipFloat 1.6s ease-in-out infinite alternate;
}

@keyframes vipFloat{
    from{
        transform:translateY(-6px) scale(1.05);
    }
    to{
        transform:translateY(-10px) scale(1.06);
    }
}

/* Glow smoother */
.shop-card::after{
    opacity:.4;
    transition:transform .5s ease, opacity .3s ease;
}

.shop-card:hover::after{
    transform:scale(1.05);
    opacity:1;
}

/* Schatten passt sich an */
.shop-card-icon::before{
    opacity:.3;
    transform:translateX(-50%) scale(.8);
    transition:all .5s ease;
}

.shop-card:hover .shop-card-icon::before{
    opacity:.85;
    transform:translateX(-50%) scale(1);
}

/* Mobile */
@media (max-width: 760px){
    .shop-card-icon img{
        opacity:1;
        transform:none;
        animation:none !important;
    }
}

/* =========================================
   ICON ANIMATION FIX (SMOOTH + HIGHER)
========================================= */

/* Ausgang */
.shop-card-icon img{
    opacity:0.2;
    transform:translateY(70px) scale(0.88);
    transform-origin:center bottom;
    transition:
        transform .6s cubic-bezier(.22,1,.36,1),
        opacity .4s ease,
        filter .4s ease;
}

/* Hover VIP */
.shop-card:hover .shop-card-icon img{
    opacity:1;
    transform:translateY(-12px) scale(1);
    filter:
        drop-shadow(0 22px 26px rgba(0,0,0,.30))
        drop-shadow(0 0 18px rgba(34,211,238,.18));
}

/* Hover VIP+ → nur leicht stärker */
.shop-card-featured:hover .shop-card-icon img{
    transform:translateY(-18px) scale(1.04);
    filter:
        drop-shadow(0 28px 30px rgba(0,0,0,.32))
        drop-shadow(0 0 24px rgba(124,58,237,.28))
        drop-shadow(0 0 14px rgba(34,211,238,.16));
}

/* KEINE dauerhafte float animation mehr */
.shop-card-featured:hover .shop-card-icon img{
    animation:none;
}


/* =========================================================
   SHOP ICON SYNC FIX
   Beide Icons starten und enden auf gleicher Hoehe
   VIP+ wirkt nur durch Groesse/Glow staerker
   ========================================================= */

.shop-card-icon,
.shop-card-featured .shop-card-icon{
    bottom:48px;
}

.shop-card-icon img,
.shop-card-featured .shop-card-icon img{
    transform-origin:center bottom;
    opacity:0.18;
    transition:
        transform .68s cubic-bezier(.22,1,.36,1),
        opacity .38s ease,
        filter .42s ease;
    animation:none !important;
}

/* Einheitlicher Startzustand */
.shop-card-icon img{
    transform:translateY(76px) scale(0.88);
}

.shop-card-featured .shop-card-icon img{
    transform:translateY(76px) scale(0.94);
}

/* Einheitlicher Endzustand */
.shop-card:hover .shop-card-icon img{
    opacity:1;
    transform:translateY(-18px) scale(1);
    filter:
        drop-shadow(0 24px 28px rgba(0,0,0,.30))
        drop-shadow(0 0 18px rgba(34,211,238,.18));
}

.shop-card-featured:hover .shop-card-icon img{
    opacity:1;
    transform:translateY(-18px) scale(1.04);
    filter:
        drop-shadow(0 28px 32px rgba(0,0,0,.32))
        drop-shadow(0 0 24px rgba(124,58,237,.26))
        drop-shadow(0 0 14px rgba(34,211,238,.14));
}

/* Schatten unten verhaelt sich gleich */
.shop-card-icon::before,
.shop-card-featured .shop-card-icon::before{
    opacity:0.22;
    transform:translateX(-50%) scale(.72);
    transition:
        transform .68s cubic-bezier(.22,1,.36,1),
        opacity .32s ease,
        filter .42s ease;
}

.shop-card:hover .shop-card-icon::before,
.shop-card-featured:hover .shop-card-icon::before{
    opacity:.88;
    transform:translateX(-50%) scale(1);
    filter:blur(8px);
}

/* Glow-Flaeche gleichmaessig */
.shop-card::after,
.shop-card-featured::after{
    transition:
        transform .58s cubic-bezier(.22,1,.36,1),
        opacity .32s ease;
}

.shop-card:hover::after,
.shop-card-featured:hover::after{
    opacity:1;
    transform:translateY(-8px) scale(1.05);
}

/* Mobile: keine versteckten Icons */
@media (max-width: 760px){
    .shop-card-icon,
    .shop-card-featured .shop-card-icon{
        bottom:auto;
    }

    .shop-card-icon img,
    .shop-card-featured .shop-card-icon img{
        opacity:1;
        transform:none;
        animation:none !important;
    }

    .shop-card-icon::before,
    .shop-card-featured .shop-card-icon::before{
        opacity:1;
        transform:translateX(-50%) scale(1);
    }

    .shop-card::after,
    .shop-card-featured::after{
        opacity:1;
        transform:none;
    }
}

/* =========================================================
   VIP POSITION FIX (nur links anheben)
   ========================================================= */

/* nur VIP (nicht featured) etwas höher */
.shop-card:not(.shop-card-featured) .shop-card-icon{
    bottom:68px;
}

@media (max-width: 1100px){
    .shop-card:not(.shop-card-featured) .shop-card-icon{
        bottom:62px;
    }
}

/* =========================================================
   VIP MICRO ADJUST (minimal nach unten)
   ========================================================= */

.shop-card:not(.shop-card-featured) .shop-card-icon{
    bottom:60px;
}

@media (max-width: 1100px){
    .shop-card:not(.shop-card-featured) .shop-card-icon{
        bottom:56px;
    }
}

/* =========================================================
   VIP ULTRA MICRO FIX (1–2px nach unten)
   ========================================================= */

.shop-card:not(.shop-card-featured) .shop-card-icon{
    bottom:58px;
}

@media (max-width: 1100px){
    .shop-card:not(.shop-card-featured) .shop-card-icon{
        bottom:54px;
    }
}

/* =========================================================
   SHOP MOBILE POLISH
   ========================================================= */

@media (max-width: 760px){

    /* Layout untereinander */
    .shop-card-layout{
        display:flex;
        flex-direction:column;
    }

    /* Text wieder volle Breite */
    .shop-card-content{
        max-width:100%;
    }

    /* Icon unter Content platzieren */
    .shop-card-icon{
        position:relative;
        right:auto;
        bottom:auto;
        width:100%;
        height:auto;
        margin-top:10px;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    /* Icon Größe mobil */
    .shop-card-icon img{
        width:130px;
        opacity:1;
        transform:none;
        filter:
            drop-shadow(0 10px 18px rgba(0,0,0,.28))
            drop-shadow(0 0 12px rgba(34,211,238,.14));
    }

    /* VIP+ etwas größer */
    .shop-card-featured .shop-card-icon img{
        width:150px;
        filter:
            drop-shadow(0 14px 22px rgba(0,0,0,.30))
            drop-shadow(0 0 18px rgba(124,58,237,.28));
    }

    /* Animation auf Mobile deaktivieren (wichtig!) */
    .shop-card-icon img{
        animation:none !important;
        transition:none !important;
    }

    /* Glow Hintergrund neutral */
    .shop-card::after,
    .shop-card-featured::after{
        display:none;
    }

    /* Schatten unten vereinfachen */
    .shop-card-icon::before{
        display:none;
    }

    /* Buttons full width */
    .shop-card-actions{
        display:flex;
        flex-direction:column;
        gap:10px;
    }

    .shop-card-actions .btn,
    .shop-card-actions span{
        width:100%;
        text-align:center;
    }

    /* etwas mehr spacing */
    .shop-card{
        padding:20px;
    }
}

/* =========================================================
   FEATURED BADGE CENTER TOP
   ========================================================= */

/* Container vorbereiten */
.shop-card-featured{
    position:relative;
}

/* Badge neu positionieren */
.shop-card-featured::before{
    content:"Beliebteste Wahl";
    position:absolute;
    top:0;
    left:50%;
    transform:translate(-50%, -50%);
    
    padding:8px 14px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    
    border-radius:999px;
    
    background:linear-gradient(135deg, rgba(124,58,237,.95), rgba(34,211,238,.95));
    color:#fff;
    
    box-shadow:
        0 12px 28px rgba(34,211,238,.25),
        0 0 0 1px rgba(255,255,255,.06),
        inset 0 1px 0 rgba(255,255,255,.12);
    
    z-index:10;
}

/* alten Badge ausblenden */
.shop-card-featured .shop-card-badge-plus{
    display:none;
}

/* Mobile Anpassung */
@media (max-width: 760px){
    .shop-card-featured::before{
        font-size:10px;
        padding:6px 10px;
    }
}

/* =========================================================
   FEATURED BADGE FIX
   Mittig oben, leicht drueberhaengend, nicht abgeschnitten
   ========================================================= */

/* Grid bekommt oben etwas Luft fuer das Badge */
.shop-grid{
    padding-top:20px;
}

/* Featured Card darf ueberstehen */
.shop-card-featured{
    position:relative;
    overflow:visible;
}

/* VIP+ Badge links wieder normal anzeigen */
.shop-card-featured .shop-card-badge-plus{
    display:inline-flex;
}

/* Mittiges Haenge-Badge sauber positionieren */
.shop-card-featured::before{
    content:"Beliebteste Wahl";
    position:absolute;
    left:50%;
    top:0;
    transform:translate(-50%, -52%);
    z-index:12;

    padding:8px 16px;
    min-width:190px;
    text-align:center;

    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    line-height:1;

    border-radius:999px;
    color:#fff;

    background:linear-gradient(135deg, rgba(124,58,237,.96), rgba(34,211,238,.96));
    box-shadow:
        0 12px 28px rgba(34,211,238,.22),
        0 0 0 1px rgba(255,255,255,.06),
        inset 0 1px 0 rgba(255,255,255,.10);
}

/* Preis wieder sauber rechts oben */
.shop-card-featured .shop-card-top{
    position:relative;
    z-index:2;
}

/* Mobile etwas kompakter */
@media (max-width: 760px){
    .shop-grid{
        padding-top:16px;
    }

    .shop-card-featured::before{
        min-width:150px;
        padding:7px 12px;
        font-size:10px;
        transform:translate(-50%, -48%);
    }
}

/* Badge dezenter machen */
.shop-card-badge{
    font-size:11px;
    padding:6px 10px;
    opacity:0.85;
    letter-spacing:.06em;
}

/* Titel klar dominanter */
.shop-card h3{
    font-size:34px;
    font-weight:800;
}

/* =========================================================
   SHOP TRUST BLOCK
   ========================================================= */

.shop-trust{
    width:min(1200px,92%);
    margin:0 auto;
    padding:8px 0 34px;
}

.shop-trust-card{
    padding:26px;
    border-radius:26px;
    background:linear-gradient(180deg, rgba(5,10,20,.82), rgba(4,8,16,.74));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
        0 18px 44px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.03);
    backdrop-filter:blur(14px);
}

.shop-trust-intro{
    max-width:820px;
    margin-bottom:22px;
}

.shop-trust-kicker{
    display:inline-block;
    margin-bottom:10px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--cyan);
}

.shop-trust-intro h2{
    margin:0 0 12px;
    font-size:34px;
    line-height:1.08;
    letter-spacing:-0.03em;
    color:#fff;
}

.shop-trust-intro p{
    margin:0;
    color:var(--muted);
    font-size:17px;
    line-height:1.8;
}

.shop-trust-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:16px;
}

.shop-trust-item{
    padding:20px;
    border-radius:20px;
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.07);
    box-shadow:0 10px 26px rgba(0,0,0,.14);
}

.shop-trust-item strong{
    display:block;
    margin-bottom:10px;
    font-size:20px;
    line-height:1.2;
    color:#fff;
}

.shop-trust-item span{
    display:block;
    color:var(--muted);
    line-height:1.75;
    font-size:15px;
}

@media (max-width: 980px){
    .shop-trust-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 760px){
    .shop-trust{
        width:min(1200px,94%);
        padding:6px 0 28px;
    }

    .shop-trust-card{
        padding:20px;
        border-radius:22px;
    }

    .shop-trust-intro h2{
        font-size:28px;
    }

    .shop-trust-intro p{
        font-size:16px;
        line-height:1.7;
    }

    .shop-trust-item{
        padding:18px;
        border-radius:18px;
    }

    .shop-trust-item strong{
        font-size:18px;
    }

    .shop-trust-item span{
        font-size:14px;
    }
}

/* Mehr Abstand vor Trust Block */
.shop-trust{
    margin-top:40px;
}

.shop-trust-item{
    transition:.25s ease;
}

.shop-trust-item:hover{
    transform:translateY(-4px);
    border-color:rgba(34,211,238,.18);
    box-shadow:0 18px 42px rgba(0,0,0,.22);
}

.shop-trust-note{
    margin-top:18px;
    color:var(--muted);
    font-size:14px;
}

/* Abstand vor FAQ */
.shop-faq{
    margin-top:36px;
}

.shop-faq-item{
    transition:.25s ease;
}

.shop-faq-item:hover{
    transform:translateY(-3px);
    border-color:rgba(34,211,238,.18);
    box-shadow:0 16px 38px rgba(0,0,0,.22);
}

/* =========================================================
   MOBILE VIP ICON POSITION FIX
   ========================================================= */

@media (max-width: 760px){

    /* Nur VIP (nicht featured) minimal nach unten */
    .shop-card:not(.shop-card-featured) .shop-card-icon{
        margin-top:18px;
    }

}

/* =========================================================
   MOBILE VIP ICON OFFSET FIX
   Nur normales VIP-Icon mobil leicht nach unten
   ========================================================= */

@media (max-width: 760px){
    .shop-card:not(.shop-card-featured) .shop-card-icon{
        margin-top:0 !important;
    }

    .shop-card:not(.shop-card-featured) .shop-card-icon img{
        transform:translateY(10px) !important;
    }

    .shop-card:not(.shop-card-featured):hover .shop-card-icon img{
        transform:translateY(10px) !important;
    }

    .shop-card-featured .shop-card-icon img{
        transform:none !important;
    }
}