/* ============================================================
   TOMOVISION
   Y2K / 2000s COMPUTER WEBSITE
   ============================================================ */


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    min-height: 100%;
}


body {
    font-family: Arial, Helvetica, sans-serif;
    color: #102c50;
    background: #062c68;
    overflow-x: hidden;
}


/* ============================================================
   RETRO BACKGROUND
   ============================================================ */

.retro-background {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: -10;
    background: radial-gradient( circle at 50% 10%, #63c9ff 0%, #1476c7 25%, #063b82 55%, #031b45 100% );
}


/* GRID */

.grid {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    background-image: linear-gradient( rgba(255,255,255,0.35) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,0.35) 1px, transparent 1px );
    background-size: 40px 40px;
    transform: perspective(600px) rotateX(60deg) scale(2);
    transform-origin: center bottom;
}


/* ============================================================
   GLOWING LIGHTS
   ============================================================ */

.glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    animation: floatingGlow 12s ease-in-out infinite alternate;
}


.glow-1 {
    width: 500px;
    height: 500px;
    top: -200px;
    left: -150px;
    background: #32baff;
    bottom: 3166px;
}


.glow-2 {
    width: 450px;
    height: 450px;
    right: -150px;
    bottom: -150px;
    background: #1856ff;
    animation-delay: -5s;
}


@keyframes floatingGlow {

    from {
        transform: translate( -30px, -20px );
    }

    to {
        transform: translate( 40px, 30px );
    }
}


/* ============================================================
   Y2K SWOOSHES
   ============================================================ */

.swoosh {
    position: absolute;
    width: 120%;
    height: 170px;
    border-radius: 50%;
    border-top: 8px solid rgba(255,255,255,0.65);
    border-bottom: 3px solid rgba(80,190,255,0.5);
    filter: blur(1px);
    transform: rotate(-12deg);
    opacity: 0.65;
}


.swoosh-1 {
    top: 8%;
    left: -10%;
    box-shadow: 0 0 20px rgba(255,255,255,0.5);
}


.swoosh-2 {
    top: 52%;
    left: -15%;
    transform: rotate(9deg);
    opacity: 0.25;
}


.swoosh-3 {
    bottom: 5%;
    left: -10%;
    transform: rotate(-6deg);
    opacity: 0.3;
}


/* ============================================================
   STARS
   ============================================================ */

#stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
}


.star {
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 8px white, 0 0 15px #8edcff;
    animation: twinkle 3s ease-in-out infinite alternate;
}


@keyframes twinkle {

    from {
        opacity: 0.2;
        transform: scale(0.7);
    }

    to {
        opacity: 1;
        transform: scale(1.7);
    }
}


/* ============================================================
   WEBSITE WRAPPER
   ============================================================ */

.website {
    width: min(1400px, calc(100% - 24px));
    margin: 12px auto 30px;
    position: relative;
}


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

.header {
    min-height: 160px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 4px solid #b9d9f2;
    border-radius: 18px;
    background: linear-gradient( 135deg, rgba(255,255,255,0.25), transparent 40% ), linear-gradient( 180deg, #4bb9ff, #1665ae 55%, #073b79 );
    box-shadow: inset 0 2px 3px white, inset 0 -10px 25px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.45);
    margin-top: 6px;
}


/* LOGO */

.logo-area {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}


.computer-icon {
    font-size: 65px;
    filter: drop-shadow(3px 5px 2px rgba(0,0,0,0.35));
}


.logo {
    font-size: clamp(38px, 5vw, 75px);
    font-weight: 900;
    font-style: italic;
    letter-spacing: -4px;
    color: #ffffff;
    text-shadow: 2px 2px #0b3971, 4px 4px #062b58, 0 0 12px rgba(255,255,255,0.6);
}


.tagline {
    color: white;
    font-weight: bold;
    font-size: 15px;
    text-shadow: 1px 2px #073568;
}


/* ============================================================
   WELCOME
   ============================================================ */

.welcome {
    width: 330px;
    padding: 17px;
    background: linear-gradient( 180deg, #ffffff, #e5edf5 );
    border: 3px solid #a8b7c8;
    border-radius: 13px;
    box-shadow: inset 0 2px white, 0 4px 7px rgba(0,0,0,0.35);
    line-height: 1.45;
}


    .welcome strong {
        color: #174c91;
        font-size: 18px;
    }


/* ============================================================
   STATUS
   ============================================================ */

.status {
    width: 215px;
    padding: 12px;
    color: white;
    background: linear-gradient( 180deg, #254a7d, #071d3c );
    border: 4px solid #b9cadc;
    border-radius: 12px;
    box-shadow: inset 0 2px 3px white, 0 4px 8px rgba(0,0,0,0.45);
}


.status-title {
    padding-bottom: 6px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: bold;
    border-bottom: 1px solid #7393b7;
}


.online {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    gap: 8px;
    align-items: center;
}


.led {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #38ff3c;
    box-shadow: 0 0 12px #38ff3c;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.navigation {
    margin-top: 8px;
    padding: 9px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 7px;
    background: linear-gradient( 180deg, #fdfefe, #ccd7e4 );
    border: 3px solid #aab8c8;
    border-radius: 12px;
    box-shadow: inset 0 2px white, 0 5px 10px rgba(0,0,0,0.35);
}


.nav-button {
    min-height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: #122d51;
    font-weight: bold;
    font-size: 12px;
    border: 2px solid #9caabd;
    border-radius: 9px;
    background: linear-gradient( 180deg, #ffffff 0%, #f7f9fb 40%, #d4dce5 100% );
    box-shadow: inset 0 2px white, inset 0 -3px rgba(0,0,0,0.08), 0 2px 3px rgba(0,0,0,0.25);
    transition: 0.15s;
}


    .nav-button:hover {
        transform: translateY(-3px);
        border-color: #3687d1;
        background: linear-gradient( 180deg, #ffffff, #d9efff );
        box-shadow: inset 0 2px white, 0 5px 9px rgba(0,0,0,0.3);
    }


.nav-icon {
    font-size: 30px;
    margin-bottom: 5px;
}

/* ============================================================
   TOMOVISION RETRO NAVIGATION
   ============================================================ */

.retro-nav {    
    width: 100%;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    padding: 10px 8px 12px;
    background:
    /* fijne horizontale lijnen */
    repeating-linear-gradient( 0deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 3px ), linear-gradient( 180deg, #244b76 0%, #102f54 45%, #071d37 100% );
    border: 3px solid #06172d;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -3px 5px rgba(0,0,0,0.7), 0 4px 10px rgba(0,0,0,0.4);
}


/* ============================================================
   INDIVIDUAL NAV ITEM
   ============================================================ */

.retro-nav-item {
    min-width: 0;
    padding: 3px 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    text-decoration: none;
    color: white;
    border-right: 1px solid rgba(255,255,255,0.12);
}


    /* laatste item geen divider */

    .retro-nav-item:last-child {
        border-right: none;
    }


/* ============================================================
   THE GLOSSY CIRCLE
   ============================================================ */

.retro-circle {
    width: 58px;
    height: 58px;
    margin-bottom: 7px;
    border-radius: 50%;
    position: relative;
    /* buitenste metalen rand */

    border: 3px solid #bfc7cf;
    box-shadow: 0 0 0 2px #071a32, inset 0 2px 2px rgba(255,255,255,0.95), inset 0 -5px 8px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.7);
    background: radial-gradient( circle at 35% 28%, #ffffff 0%, #f8f8f8 35%, #d4d4d4 70%, #a9a9a9 100% );
}


    /* ============================================================
   COLOURED RING
   ============================================================ */

    .retro-circle::before {
        content: "";
        position: absolute;
        inset: -3px;
        border-radius: 50%;
        border: 3px solid transparent;
        box-shadow: inset 0 0 0 3px var(--ring);
    }


/* ============================================================
   COLOURED RINGS
   ============================================================ */

.blue {
    --ring: #1769d1;
}

.green {
    --ring: #28a941;
}

.orange {
    --ring: #e57b19;
}

.purple {
    --ring: #8d27b9;
}

.yellow {
    --ring: #d9a900;
}

.red {
    --ring: #b92b25;
}

.cyan {
    --ring: #20b6c9;
}

.pink {
    --ring: #d12c92;
}


/* ============================================================
   EXTRA GLOSS
   ============================================================ */

.retro-circle::after {
    content: "";
    position: absolute;
    left: 13px;
    top: 7px;
    width: 28px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255,255,255,0.8);
    filter: blur(3px);
}


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

.retro-nav-text {
    width: 100%;
    min-height: 31px;
    color: #ffffff;
    font-size: 11px;
    line-height: 1.05;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #000, 0 2px 3px rgba(0,0,0,0.8);
}


    /* small text */

    .retro-nav-text small {
        font-size: 8px;
        font-weight: bold;
    }


/* ============================================================
   HOVER
   ============================================================ */

.retro-nav-item:hover .retro-circle {
    transform: scale(1.08);
    box-shadow: 0 0 0 2px #071a32, 0 0 12px var(--ring), inset 0 2px 2px rgba(255,255,255,1), inset 0 -5px 8px rgba(0,0,0,0.4), 0 3px 5px rgba(0,0,0,0.7);
}


.retro-nav-item:hover .retro-nav-text {
    color: #ffffff;
    text-shadow: 0 0 5px rgba(255,255,255,0.8), 1px 1px 0 #000;
}


/* ============================================================
   CLICK EFFECT
   ============================================================ */

.retro-nav-item:active .retro-circle {
    transform: scale(0.95);
}


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

@media (max-width: 900px) {

    .retro-nav {
        grid-template-columns: repeat(4, 1fr);
    }
}


@media (max-width: 500px) {

    .retro-nav {
        grid-template-columns: repeat(2, 1fr);
    }

    .retro-circle {
        width: 52px;
        height: 52px;
    }
}

/* ============================================================
   LIVE NEWS TICKER
   ============================================================ */

.news-bar {
    margin-top: 8px;
    margin-bottom: 8px;
    width: 100%;
    height: 38px;
    overflow: hidden;
    display: flex;
    align-items: center;
    color: white;
    background: repeating-linear-gradient( 0deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 3px ), linear-gradient( 180deg, #317ac2, #0b3974 );
    border: 3px solid #06172d;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -3px 5px rgba(0,0,0,0.55), 0 4px 8px rgba(0,0,0,0.4);
    text-shadow: 1px 1px #062b58;
}


/* ============================================================
   MOVING AREA
   ============================================================ */

.ticker {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-radius: 7px;
}


/* ============================================================
   MOVING CONTENT
   ============================================================ */

.ticker-content {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    white-space: nowrap;
    padding-left: 100%;
    animation: ticker-scroll 28s linear infinite;
}


/* ============================================================
   TICKER ANIMATION
   ============================================================ */

@keyframes ticker-scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}


/* ============================================================
   TICKER ITEMS
   ============================================================ */

.ticker-content span {
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
}


.ticker-content .new {
    color: #fff000;
    text-shadow: 1px 1px #7c3300;
}


.ticker-content .separator {
    opacity: 0.65;
}
/* ============================================================
   BANNERS
   ============================================================ */

.bannerbar {
    margin-top: 6px;
    margin-bottom: 6px;
    width: 387px;
    overflow: hidden;
    color: white;
    background: linear-gradient( 180deg, #317ac2, #0b3974 );
    border: 2px solid #082d5b;
    box-shadow: inset 0 1px rgba(255,255,255,0.4), 0 3px 6px rgba(0,0,0,0.3);
    text-shadow: 1px 1px #062b58;
    align-items:center
}

/* ============================================================
   PANELS
   ============================================================ */

.panel {
    background: linear-gradient( 135deg, rgba(255,255,255,0.95), rgba(225,238,249,0.95) );
    border: 3px solid #a4b4c5;
    border-radius: 13px;
    box-shadow: inset 0 2px white, 0 5px 12px rgba(0,0,0,0.3);
}


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

.hero {
    margin-top: 18px;
    padding: 35px;
    min-height: 300px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}


    .hero::before {
        content: "";
        position: absolute;
        width: 800px;
        height: 200px;
        left: -150px;
        top: 40px;
        border-radius: 50%;
        border-top: 8px solid rgba(50,160,255,0.25);
        transform: rotate(-10deg);
    }


.hero-content {
    flex: 1;
    position: relative;
    z-index: 2;
}


.hero-title {
    font-size: clamp(45px, 7vw, 85px);
    font-weight: 900;
    font-style: italic;
    color: #2771b9;
    text-shadow: 2px 2px white, 5px 6px rgba(0,0,0,0.2);
}


.hero-subtitle {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}

.hero-subsubtitle {
    font-size: 60px;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 2px 2px white, 5px 6px rgba(0,0,0,0.2);
}

.hero p {
    font-size: 18px;
    line-height: 1.5;
}


/* ============================================================
   HERO GRAPHIC
   ============================================================ */

.hero-graphic {
    width: 320px;
    height: 230px;
    position: relative;
}


.globe {
    position: absolute;
    left: 75px;
    top: 45px;
    font-size: 115px;
    filter: drop-shadow( 0 0 15px rgba(40,150,255,0.7) );
}


.orbit {
    position: absolute;
    border: 3px solid rgba(30,130,220,0.5);
    border-radius: 50%;
    transform: rotate(-20deg);
}


.orbit-1 {
    width: 280px;
    height: 90px;
    left: 20px;
    top: 85px;
}


.orbit-2 {
    width: 250px;
    height: 70px;
    left: 35px;
    top: 90px;
    transform: rotate(55deg);
}


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

.big-button,
.small-button {
    display: inline-block;
    padding: 12px 22px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    background: linear-gradient( 180deg, #6bc9ff, #1d78c8 50%, #0b4789 );
    border: 2px solid #0c3e77;
    border-radius: 8px;
    box-shadow: inset 0 2px white, 0 4px 7px rgba(0,0,0,0.35);
    text-shadow: 1px 2px #073564;
    transition: 0.15s;
}


.big-button {
    font-size: 17px;
    margin-top: 12px;
}


    .big-button:hover,
    .small-button:hover {
        transform: translateY(-2px);
        filter: brightness(1.15);
    }


/* ============================================================
   SERVICES
   ============================================================ */

.services {
    margin-top: 20px;
}


.section-header {
    padding: 11px 15px;
    color: white;
    font-size: 18px;
    font-weight: bold;
    background: linear-gradient( 180deg, #4a9de2, #17558f );
    border: 2px solid #123e6b;
    border-radius: 9px 9px 0 0;
    text-shadow: 1px 1px #07355f;
}


.service-grid {
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    background: rgba(205,220,235,0.95);
    border: 2px solid #8ea2b7;
    border-top: none;
}


.service {
    min-height: 210px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: #153354;
    background: linear-gradient( 180deg, #ffffff, #eaf1f7 55%, #cfdbe7 );
    border: 2px solid #9eafc0;
    border-radius: 12px;
    box-shadow: inset 0 2px white, 0 3px 6px rgba(0,0,0,0.22);
    transition: 0.15s;
}


    .service:hover {
        transform: translateY(-4px) scale(1.01);
        border-color: #3484c8;
        background: linear-gradient( 180deg, #ffffff, #d9efff );
    }


.service-icon {
    font-size: 48px;
    margin-bottom: 8px;
}


.service h3 {
    color: #175795;
    margin: 5px 0 10px;
}


.service p {
    font-size: 14px;
    line-height: 1.4;
    min-height: 42px;
}


.service span {
    color: #14518e;
    font-weight: bold;
    font-size: 12px;
}


/* ============================================================
   QUICK SUPPORT
   ============================================================ */

.quick {
    margin-top: 20px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient( 90deg, #fffde0, #fff49a, #fffde0 );
    border-color: #d0ba43;
}


.quick-icon {
    font-size: 48px;
}


.quick h2 {
    margin: 0;
    color: #9b5a00;
}


.quick div:nth-child(2) {
    flex: 1;
}


/* ============================================================
   TWO COLUMNS
   ============================================================ */

.two-columns {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}


/* ============================================================
   STICKY NOTE
   ============================================================ */

.sticky-note {
    position: relative;
    padding: 30px;
    background: linear-gradient( 135deg, #fffdb3, #fff17b );
    border: 1px solid #d4c550;
    box-shadow: 5px 7px 10px rgba(0,0,0,0.25);
    transform: rotate(-1deg);
}


    .sticky-note h2 {
        color: #796000;
    }


    .sticky-note p {
        font-size: 17px;
        line-height: 1.5;
    }


.pin {
    position: absolute;
    top: -18px;
    right: 30px;
    font-size: 30px;
}


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

.links {
    overflow: hidden;
    padding-bottom: 15px;
}


    .links a {
        display: block;
        margin: 10px 15px 0;
        padding: 10px;
        text-decoration: none;
        color: #17518b;
        font-weight: bold;
        background: linear-gradient( 180deg, white, #dce7f0 );
        border: 1px solid #98aabc;
        border-radius: 6px;
        box-shadow: inset 0 1px white;
    }


        .links a:hover {
            background: #d8efff;
        }


/* ============================================================
   FOOTER
   ============================================================ */

footer {
    margin-top: 25px;
    padding: 25px;
    text-align: center;
    color: white;
    text-shadow: 1px 2px #082d5c;
    background: rgba(3,32,72,0.55);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 10px;
}


    footer small {
        opacity: 0.8;
    }


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

@media (max-width: 1100px) {

    .navigation {
        grid-template-columns: repeat(4, 1fr);
    }

    .header {
        flex-wrap: wrap;
    }

    .welcome {
        flex: 1;
    }
}


@media (max-width: 800px) {

    .hero {
        flex-direction: column;
        text-align: center;
    }

    .hero-graphic {
        width: 280px;
    }

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

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


@media (max-width: 550px) {

    .website {
        width: calc(100% - 10px);
        margin: 5px auto;
    }

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

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

    .logo {
        font-size: 42px;
    }

    .header {
        text-align: center;
        justify-content: center;
    }

    .logo-area {
        justify-content: center;
    }

    .quick {
        flex-direction: column;
        text-align: center;
    }
}