:root {
    --primary: #0078d7;
    --secondary: #ffb900;
    --tertiary: #107c10;
    --background: #121212;
    --surface: #1e1e1e;
    --text-light: #f5f5f5;
    --text-muted: #a0a0a0;
    --border-color: #333333;
}

/* ==== GLOBAL ==== */
html, body {
    overflow-x: hidden;
    scroll-behavior: smooth;
    background-color: var(--background);
    color: var(--text-light);
}

/* ===========================================
   FIX #1 – HERO-TEXT SOM STICKER UT
   =========================================== */
@media (max-width: 640px) {
    .hero-text {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 1.15rem !important;
        line-height: 1.55 !important;

        /* FIXAR FYLLD HÖGERKANT */
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: auto !important;

        padding-right: 0.75rem !important; /* ger trygg luft på höger sida */
    }
}

/* ===========================================
   FIX #2 – KNAPPEN HAMNAR FÖR LÅNGT TILL HÖGER
   =========================================== */
@media (max-width: 640px) {
    .cta-button {
        width: auto !important;
        max-width: 360px !important; /* justera efter smak */
        margin-top: 2rem !important; /* öka eller minska efter behov */
        padding: 0.8rem !important;
        margin-left: -2px !important;
        margin-right: 0 !important;        
        gap: 0.5rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}


    .hero-button-row {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    display: block !important;
}



/* ===========================================
   FIX #3 – TERMINALEN STICKER UT
   =========================================== */
@media (max-width: 640px) {

    .terminal-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
        margin-top: 1.5rem !important;
        border-radius: 12px;

        overflow-y: auto !important; 
        overflow-x: auto !important;  /* ← FIXAR HÖGERUTSTICKNINGEN */
        -webkit-overflow-scrolling: touch;

        aspect-ratio: auto !important;
        max-height: 320px !important;
    }

    .terminal-wrapper pre {
        white-space: pre !important;   /* ingen word wrap */
        overflow-x: auto !important;
    }
}

/* ===========================================
   FIX #4 – HERO-SEKTIONEN TRYCKER UT ALLT
   =========================================== */
@media (max-width: 640px) {
    section.relative.min-h-screen.flex.items-center {
        display: block !important;
        min-height: auto !important;
        height: auto !important;
        padding-top: 4rem !important;
        padding-bottom: 3rem !important;
        align-items: flex-start !important;
    }
}


/* ==== CARD / FLOATING STYLE ==== */
.floating-card {
    background-color: rgba(30, 30, 30, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(51, 51, 51, 0.5);
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 120, 215, 0.2);
}

/* ==== CTA BUTTON ==== */
.cta-button {
    background-image: linear-gradient(to right, var(--primary), var(--secondary));
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-button:hover {
    background-image: linear-gradient(to right, #005a9e, #e3a300);
    box-shadow: 0 4px 15px rgba(0, 120, 215, 0.4);
    transform: translateY(-2px);
}

/* ==== INPUTS ==== */
.input-style {
    background-color: var(--surface);
    border: 1px solid var(--border-color);
    color: var(--text-light);
}

.input-style:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 120, 215, 0.5);
}

/* ==== WAVE ==== */
.wave-bottom path {
    fill: var(--surface);
}

@media (max-width: 640px) {
    .terminal-wrapper pre {
        white-space: pre-wrap !important;
        word-break: break-word !important;
    }
}

/* Dölj alla br normalt */
br {
    display: none;
}

/* Visa br på mobil när de har klassen .mobile-break */
@media (max-width: 640px) {
    br.mobile-break {
        display: block !important;
    }
}


@media (max-width: 640px) {
    br.mobile-break {
        display: block !important;
    }
}