:root {
    --scale: 1.2;
    --fg: #2ab5b9;
    --fg-strong: #2ab5b9;
    --muted: #216577;
    --accent: #ff934d; /* warm amber */
    --accent-strong: #ff6a00;
    --panel: #0d0d0e;
    --panel-2: #1a1a1c;
    --shadow: 0 10px 30px rgba(0, 0, 0, .6);
}

* {
    box-sizing: border-box
}

html, body {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Chakra Petch", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: calc(70% * var(--scale));
    color: var(--fg);
    background: #000;
}

.cs-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(calc(16px * var(--scale)), calc(2vw * var(--scale)), calc(24px * var(--scale)));
    background: #000 url("assets/img/hero-bg-green.png") center/cover no-repeat fixed;
    overflow: hidden;
}

.cs-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 50% 10%, rgba(255, 147, 77, .12), rgba(0, 0, 0, .75) 40%, rgba(0, 0, 0, .92) 70%);
    pointer-events: none;
}

.cs-header {
    position: relative;
    text-align: center;
    margin-top: min(10vh, calc(90px * var(--scale)));
    z-index: 1;
}

.logo-group {
    position: fixed;
    top: clamp(calc(16px * var(--scale)), calc(3vw * var(--scale)), calc(28px * var(--scale)));
    left: clamp(calc(16px * var(--scale)), calc(3vw * var(--scale)), calc(28px * var(--scale)));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(12px * var(--scale));
    z-index: 10;
}

.site-logo {
    width: 190px;
    max-width: 80vw;
    height: auto;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6));
}

.title {
    position: relative;
    margin: 0 0 1em;
    line-height: .95;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 800;
    font-family: "Oxanium", "Chakra Petch", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    display: block;
    font-size: clamp(calc(23px * var(--scale)), calc(4.5vw * var(--scale)), calc(67px * var(--scale)));
    background: linear-gradient(110deg, #84f5ff 0%, #8f9bff 30%, #c14cff 55%, #ff8a3d 85%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .25),
        0 0 6px rgba(0, 213, 123, .55),
        0 0 14px rgba(0, 213, 123, .45),
        0 0 24px rgba(0, 213, 123, .35),
        0 10px 28px rgba(0, 0, 0, .7);
    -webkit-text-stroke: 1px rgba(0, 0, 0, .45);
    animation: cyber-flicker 6s ease-in-out infinite;
}

/* Horizontal position indicator (left sidebar) */
.hpos-indicator {
    position: fixed;
    left: 8px;
    top: 50%; /* roughly centered vertically */
    height: 140px;
    width: 34px;
    z-index: 10001; /* above crosshair (10000) and noise (9999) */
    pointer-events: none; /* never block interactions */
    /* beveled/neo-noir look */
    background: linear-gradient(145deg, rgba(0,0,0,0.86), rgba(5,213,126,0.92));
    /* chamfered edges like in screenshot: top-left and bottom-right */
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,108,44,0.05);
}

.hpos-track {
    position: absolute;
    left: 16px; /* center a slim track */
    top: 12px;
    bottom: 8px;
    width: 3px;
    /* Always-visible dark gray track */
    background: linear-gradient(180deg, rgba(60,60,60,0.95), rgba(80,80,80,0.95));
    border-radius: 0 0 2px 2px;
    /* mirror panel's bottom-right chamfer and clip inner fill/cap */
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}

.hpos-thumb {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0; /* will be set by JS as fill height */
    top: 0; /* anchored at top; grows downward */
    background: linear-gradient(180deg, #000000, #000000);
    border-radius: 0 0 2px 2px; /* flat top edge */
    /* ensure identical lower cut as the track to clip the white fill itself */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}

/* Bright indicator at the leading (bottom) edge of the fill */
.hpos-thumb::before {
    content: "";
    position: absolute;
    left: -1px; /* slight overhang for crisp highlight */
    right: -1px;
    bottom: 0; /* align to bottom of the fill; clipping will handle the tip */
    height: 14px; /* cap length */
    background: #000000;
    box-shadow: 0 0 8px #000000;
    /* apply same clip as track to guarantee the white cap is cut identically */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}

.hpos-thumb.is-empty::before {
    display: none;
}

.title .h1-sub{
    line-height: .15;
    font-size: clamp(calc(15px * var(--scale)), calc(2.5vw * var(--scale)), calc(30px * var(--scale)));
    background: linear-gradient(90deg, #ffd6a1 0%, #ff9a4a 55%, #ff6a2a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow:
        0 0 6px rgba(0, 213, 123, .6),
        0 0 18px rgba(0, 213, 123, .55),
        0 6px 18px rgba(0, 0, 0, .6);
    -webkit-text-stroke: 1px rgba(0, 0, 0, .35);
    animation: cyber-flicker 5s ease-in-out infinite;
}

@keyframes cyber-flicker {
    0%, 100% { opacity: 1; }
    42% { opacity: .92; }
    45% { opacity: .7; }
    47% { opacity: .98; }
    70% { opacity: .88; }
}

.subtitle {
    margin: .45em 0;
    font-size: clamp(calc(10px * var(--scale)), calc(1.5vw * var(--scale)), calc(17px * var(--scale)));
    letter-spacing: .06em;
    font-family: "Oxanium", "Chakra Petch", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    text-transform: uppercase;
    position: relative;
}

.subtitle + .subtitle {
    margin-top: .8em;
}

.subtitle.strong {
    font-weight: 800;
    background: linear-gradient(110deg, #e7fff4 0%, #6fffc1 45%, #00d57b 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow:
        0 0 6px rgba(0, 213, 123, .55),
        0 0 14px rgba(0, 213, 123, .4),
        0 6px 18px rgba(0, 0, 0, .6);
    -webkit-text-stroke: 1px rgba(0, 0, 0, .35);
    animation: cyber-flicker 7s ease-in-out infinite;
}

.subtitle.accent {
    letter-spacing: .08em;
    background: linear-gradient(110deg, #bfffe5 0%, #37eaa1 50%, #00d57b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow:
        0 0 5px rgba(0, 213, 123, .5),
        0 0 12px rgba(0, 213, 123, .35),
        0 6px 16px rgba(0, 0, 0, .6);
    -webkit-text-stroke: 1px rgba(0, 0, 0, .3);
    animation: cyber-flicker 5.5s ease-in-out infinite;
}

.cs-content {
    position: relative;
    z-index: 1;
    width: min(calc(820px * var(--scale)), 92%);
    margin: clamp(calc(70px * var(--scale)), calc(6vw * var(--scale)), calc(200px * var(--scale))) auto 0;
}

.lead {
    font-size: clamp(calc(15px * var(--scale)), calc(1.8vw * var(--scale)), calc(20px * var(--scale)));
    text-align: left;
    color: var(--fg);
    margin: 0 0 calc(10px * var(--scale)) 0;
}

/* Signup */
.signup {
}

.field label {
    display: block;
    font-weight: 700;
    color: var(--fg);
    margin: calc(6px * var(--scale)) calc(6px * var(--scale)) calc(10px * var(--scale));
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.input-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: calc(12px * var(--scale));
    align-items: stretch;
    background: linear-gradient(180deg, #121214, #0b0b0c);
    border-radius: calc(12px * var(--scale));
    padding: calc(10px * var(--scale));
    border: 1px solid #2b2b2f;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), var(--shadow);
}

.input-wrap input {
    order: 1;
    flex: 1;
    min-width: 0;
    background: #0a0a0b;
    color: #f0f0f0;
    border: 1px solid #2a2a2e;
    border-radius: calc(10px * var(--scale));
    padding: calc(14px * var(--scale)) calc(16px * var(--scale));
    font-size: clamp(calc(11px * var(--scale)), calc(1.3vw * var(--scale)), calc(13px * var(--scale)));
    outline: none;
    line-height: 1.4;
    min-height: calc(50px * var(--scale));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
}

.input-wrap input::placeholder {
    color: #00d57b;
    opacity: 0.9;
}

.input-wrap input:focus {
    border-color: #00d57b66;
    box-shadow: 0 0 0 3px #00d57b22 inset, 0 0 0 2px #00d57b22;
}

.btn-primary, .logo-btn-join {
    order: 2;
    background: radial-gradient(120% 120% at 30% 20%, #bfffe5, #00d57b 45%, #0a5a44 90%);
    color: #03140e;
    border: none;
    font-weight: 800;
    font-family: "Chakra Petch", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    text-transform: none;
    letter-spacing: .01em;
    padding: 0 calc(24px * var(--scale));
    border-radius: calc(10px * var(--scale));
    font-size: clamp(calc(11px * var(--scale)), calc(1.3vw * var(--scale)), calc(13px * var(--scale)));
    box-shadow: 0 8px 20px rgba(0, 213, 123, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
    cursor: pointer;
    transition: transform .08s ease, filter .15s ease, box-shadow .2s ease;
    white-space: nowrap;
    line-height: 1.4;
    min-height: calc(50px * var(--scale));
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.logo-btn-join {
    min-height: calc(36px * var(--scale));
    padding: 0 calc(18px * var(--scale));
    border-radius: calc(8px * var(--scale));
    width: 100%;
}

.desktop-only {
    display: inline-flex;
}

@media (max-width: 860px) {
    .desktop-only {
        display: none !important;
    }
}

.input-wrap .benefits {
    order: 3;
    flex-basis: 100%;
    margin-top: calc(4px * var(--scale));
}

@media (max-width: 720px) {
    .input-wrap {
        flex-direction: column;
    }
}

.btn-primary:hover, .logo-btn-join:hover {
    filter: saturate(105%) brightness(1.02);
    box-shadow: 0 10px 26px rgba(0, 213, 123, .45), inset 0 1px 0 rgba(255, 255, 255, .4);
}

.btn-primary:active, .logo-btn-join:active {
    transform: translateY(1px);
}

.form-hint {
    margin: calc(8px * var(--scale)) calc(6px * var(--scale)) 0;
    font-size: calc(10px * var(--scale));
    color: var(--muted);
    min-height: 1.2em;
}

.form-hint.err {
    color: #ff8d7a;
}

.form-hint.ok {
    color: #76e3a1;
}

/* Benefits */
.benefits {
    list-style: none;
    padding: 0;
    margin: 0 calc(18px * var(--scale)) calc(16px * var(--scale)) 0;
}

.benefits li {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--scale));
    padding: calc(5px * var(--scale)) calc(10px * var(--scale));
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: #00d57b;
    font-weight: 600;
    letter-spacing: .02em;
}

.benefits li:first-child {
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.benefits i {
    color: #00d57b;
    font-size: calc(14px * var(--scale));
    width: calc(24px * var(--scale));
    text-align: center;
    filter: drop-shadow(0 0 6px rgba(0, 213, 123, .45));
}

/* Video Section */
.video {
    margin-top: calc(24px * var(--scale));
    padding: calc(14px * var(--scale));
    border-radius: calc(14px * var(--scale));
    background: linear-gradient(180deg, rgba(10, 10, 12, 0.7), rgba(6, 6, 8, 0.75));
    border: 1px solid rgba(42, 181, 185, 0.25);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: calc(16px * var(--scale));
}

.video-container {
    border-radius: calc(8px * var(--scale));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.video-cta {
    padding: calc(12px * var(--scale)) calc(20px * var(--scale));
    border-radius: calc(10px * var(--scale));
    background: rgba(255, 147, 77, 0.1);
    border: 1px dashed rgba(255, 147, 77, 0.3);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.video-cta i {
    color: var(--accent);
    font-size: calc(18px * var(--scale));
    display: block;
    margin-bottom: calc(4px * var(--scale));
}

.video-cta-title {
    margin: 0;
    font-size: clamp(calc(12px * var(--scale)), calc(1.8vw * var(--scale)), calc(20px * var(--scale)));
    background: linear-gradient(90deg, #ffd6a1 0%, #ff9a4a 55%, #ff6a2a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.animated-up-down {
    animation: upDown 2s ease-in-out infinite;
}

@keyframes upDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Trust Factors Section */
.trust-factors {
    margin-top: calc(12px * var(--scale));
    padding: calc(14px * var(--scale));
    border-radius: calc(14px * var(--scale));
    background: linear-gradient(180deg, rgba(10, 10, 12, 0.7), rgba(6, 6, 8, 0.75));
    border: 1px solid rgba(42, 181, 185, 0.25);
    box-shadow: var(--shadow);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(12px * var(--scale));
}

.trust-item {
    background: rgba(42, 181, 185, 0.5); /* Ähnlich wie im Screenshot: gedecktes Türkis */
    padding: calc(16px * var(--scale)) calc(8px * var(--scale));
    border-radius: calc(10px * var(--scale));
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.trust-number {
    font-family: "Oxanium", "Chakra Petch", sans-serif;
    font-size: calc(24px * var(--scale));
    font-weight: 800;
    color: #fff;
    margin-bottom: calc(4px * var(--scale));
    display: block;
}

.trust-label {
    font-size: calc(10px * var(--scale));
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
    font-family: "LFT Etica Mono", monospace;
}

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

@media (max-width: 480px) {
    .trust-grid {
        grid-template-columns: 1fr;
    }
}

/* USPs */
.usps {
    margin-top: calc(12px * var(--scale));
    padding: calc(14px * var(--scale));
    border-radius: calc(14px * var(--scale));
    background: linear-gradient(180deg, rgba(10, 10, 12, 0.7), rgba(6, 6, 8, 0.75));
    border: 1px solid rgba(42, 181, 185, 0.25);
    box-shadow: var(--shadow);
}

.usp-title {
    margin: 0 0 calc(8px * var(--scale));
    font-size: clamp(calc(12px * var(--scale)), calc(1.6vw * var(--scale)), calc(18px * var(--scale)));
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fg);
    font-family: "Oxanium", "Chakra Petch", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.usp-title + .usp-list {
    margin-bottom: calc(16px * var(--scale));
}

.usp-list {
    margin: 0 0 calc(12px * var(--scale)) calc(18px * var(--scale));
    padding: 0;
    color: var(--fg);
    font-size: clamp(calc(11px * var(--scale)), calc(1.4vw * var(--scale)), calc(16px * var(--scale)));
    line-height: 1.45;
}

.usp-list li + li {
    margin-top: calc(6px * var(--scale));
}

.usp-list li{
    margin-bottom: 20px;
}

.usp-logos {
    display: flex;
    flex-wrap: wrap;
    gap: calc(10px * var(--scale));
    align-items: center;
    margin: 0 0 calc(14px * var(--scale));
}

.usp-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(8px * var(--scale)) calc(10px * var(--scale));
    border-radius: calc(10px * var(--scale));
    background: rgba(8, 12, 14, 0.6);
    border: 1px solid rgba(42, 181, 185, 0.2);
    text-decoration: none;
}

.usp-logo img {
    display: block;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

.usp-logo--inu img,
.usp-logo--gabal-verlag img,
.usp-logo--gabal-ev img {
    height: calc(28px * var(--scale));
}

.usp-logo--gabal-ev img {
    height: calc(24px * var(--scale));
}

/* Footer */
.cs-footer {
    position: relative;
    z-index: 1;
    margin: clamp(calc(18px * var(--scale)), calc(5vw * var(--scale)), calc(40px * var(--scale))) auto 0;
    width: min(calc(900px * var(--scale)), 94%);
    text-align: center;
}

.stay {
    font-weight: 800;
    color: var(--fg);
    letter-spacing: .06em;
    font-size: clamp(calc(10px * var(--scale)), calc(1.4vw * var(--scale)), calc(14px * var(--scale)));
    margin: calc(10px * var(--scale)) 0 calc(16px * var(--scale));
}

.social {
    display: flex;
    justify-content: center;
    gap: calc(14px * var(--scale));
}

.social-btn {
    width: calc(44px * var(--scale));
    height: calc(44px * var(--scale));
    display: grid;
    place-items: center;
    border-radius: calc(8px * var(--scale));
    color: var(--fg);
    background: linear-gradient(180deg, #1b1b1e, #0f0f11);
    border: 1px solid #2b2b2f;
    box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, .04);
    text-decoration: none;
    transition: transform .1s ease, box-shadow .2s ease, filter .2s ease;
}

.social-btn i {
    font-size: calc(15px * var(--scale));
}

.social-btn:hover {
    filter: saturate(110%);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.social-btn:active {
    transform: translateY(1px);
}

.footer-links {
    margin-top: calc(20px * var(--scale));
    font-size: calc(10px * var(--scale));
    color: var(--muted);
}

.footer-links a {
    color: var(--muted);
    text-decoration: none;
    transition: color .2s ease;
}

.footer-links a:hover {
    color: var(--fg);
}

.footer-links .sep {
    margin: 0 8px;
    opacity: 0.5;
}

/* Cyberpunk static noise overlay */
.cyber-noise {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.04;
    mix-blend-mode: overlay;
    image-rendering: pixelated;
}

.cyber-noise::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .15) 100%);
}

/* Crosshair cursor overlay */
.crosshair-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
}

.crosshair-line-h,
.crosshair-line-v {
    position: absolute;
    background: rgba(0, 213, 123, 0.18);
    box-shadow: 0 0 6px rgba(0, 213, 123, 0.35);
    top: 0;
    left: 0;
    will-change: transform;
}

.crosshair-line-h {
    height: 0.3px;
    left: 0;
    right: 0;
}

.crosshair-line-v {
    width: 0.3px;
    top: 0;
    bottom: 0;
}

.crosshair-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(200, 200, 200, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    top: 0;
    left: 0;
    will-change: transform;
}

/* Responsive tweaks to better match composition */
@media (max-width: 860px) {
    .crosshair-overlay {
        display: none;
    }

    .logo-group {
        left: 50%;
        transform: translateX(-50%);
        top: clamp(calc(12px * var(--scale)), calc(3vw * var(--scale)), calc(20px * var(--scale)));
        align-items: center;
    }

    .site-logo {
        width: 125px;
        max-width: 70vw;
    }

    .cs-header{
        margin-top: min(20vh, calc(180px * var(--scale)));
    }

    .cs-content {
        width: min(calc(640px * var(--scale)), 96%);
    }

    .input-wrap {
        flex-direction: column;
    }

    .btn-primary {
        padding: calc(14px * var(--scale)) calc(18px * var(--scale));
    }
}

@media (max-width: 520px) {
    .logo-group {
        top: clamp(calc(10px * var(--scale)), calc(4vw * var(--scale)), calc(18px * var(--scale)));
        position: absolute;
    }

    .site-logo {
        width: 180px;
        max-width: 78vw;
    }

    .benefits li {
        padding: calc(10px * var(--scale)) calc(6px * var(--scale));
    }

    .social-btn {
        width: calc(40px * var(--scale));
        height: calc(40px * var(--scale));
    }
}