/* =========================================================
   ROBIN
   Personal Media Library
   ========================================================= */


/* ---------------------------------------------------------
   RESET
   --------------------------------------------------------- */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Helvetica Neue",
        "Segoe UI",
        Inter,
        Arial,
        sans-serif;

    font-weight: 400;

    color: rgba(245, 247, 250, 0.94);

    background:
        linear-gradient(
            135deg,
            #03070b 0%,
            #071018 42%,
            #050c12 100%
        );

    overflow-x: hidden;
}


/* ---------------------------------------------------------
   ATMOSPHERE
   --------------------------------------------------------- */

.background-glow {
    position: fixed;

    width: 70vw;
    height: 70vw;

    max-width: 1000px;
    max-height: 1000px;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(100px);

    opacity: 0.32;

    z-index: 0;
}

.glow-blue {
    top: -35%;
    left: -20%;

    background:
        radial-gradient(
            circle,
            rgba(32, 48, 91, 0.7),
            transparent 68%
        );
}

.glow-teal {
    top: 0;
    right: -25%;

    background:
        radial-gradient(
            circle,
            rgba(25, 73, 77, 0.65),
            transparent 68%
        );
}

.glow-orange {
    top: 35%;
    left: 35%;

    background:
        radial-gradient(
            circle,
            rgba(108, 48, 32, 0.38),
            transparent 65%
        );

    opacity: 0.22;
}


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

.page {
    position: relative;
    z-index: 1;

    width: min(1120px, calc(100% - 64px));

    margin: 0 auto;

    padding: 38px 0 48px;
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.site-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    min-height: 58px;
}


/* Brand */

.brand {
    display: flex;

    align-items: center;

    gap: 18px;

    color: inherit;

    text-decoration: none;
}

.brand-bird {
    width: 54px;
    height: 42px;

    object-fit: contain;
}

.brand-name {
    font-size: 1.35rem;

    font-weight: 300;

    letter-spacing: 0.38em;

    color:
        rgba(248, 249, 251, 0.9);
}


/* Dashboard */

.dashboard-link {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px 14px;

    color:
        rgba(220, 225, 231, 0.65);

    font-size: 0.86rem;

    font-weight: 400;

    text-decoration: none;

    border: 1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.025);

    transition:
        color 180ms ease,
        background 180ms ease,
        border-color 180ms ease;
}

.dashboard-link:hover {
    color:
        rgba(255, 255, 255, 0.94);

    background:
        rgba(255, 255, 255, 0.055);

    border-color:
        rgba(255, 255, 255, 0.15);
}

.arrow {
    font-size: 0.9rem;

    opacity: 0.7;
}


/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

.intro {
    margin-top: 112px;

    max-width: 680px;
}

.eyebrow {
    margin: 0 0 18px;

    color:
        #ff6a2a;

    font-size: 0.7rem;

    font-weight: 500;

    letter-spacing: 0.24em;
}

.intro h1 {
    margin: 0;

    font-size: clamp(
        2.8rem,
        5vw,
        4.6rem
    );

    line-height: 1.05;

    font-weight: 300;

    letter-spacing: -0.035em;

    color:
        rgba(248, 249, 251, 0.94);
}

.intro h1 span {
    display: block;

    color:
        rgba(205, 212, 220, 0.53);
}

.intro-text {
    margin: 25px 0 0;

    color:
        rgba(203, 211, 219, 0.6);

    font-size: 1.05rem;

    font-weight: 300;

    letter-spacing: 0.015em;
}


/* ---------------------------------------------------------
   SERVICE GRID
   --------------------------------------------------------- */

.services {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin-top: 62px;

    max-width: 920px;
}


/* ---------------------------------------------------------
   SERVICE CARD
   --------------------------------------------------------- */

.service-card {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 128px;

    padding: 22px 24px;

    border:
        1px solid
        rgba(255, 255, 255, 0.095);

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.065),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.2),

        inset 0 1px 0
        rgba(255, 255, 255, 0.035);

    backdrop-filter:
        blur(20px)
        saturate(120%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(120%);

    color: inherit;

    text-decoration: none;

    overflow: hidden;

    transition:
        transform 200ms ease,
        border-color 200ms ease,
        background 200ms ease,
        box-shadow 200ms ease;
}

.service-card::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.045),
            transparent 45%
        );
}

.service-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(255, 255, 255, 0.18);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.035)
        );

    box-shadow:
        0 24px 55px
        rgba(0, 0, 0, 0.3),

        inset 0 1px 0
        rgba(255, 255, 255, 0.055);
}


/* ---------------------------------------------------------
   SERVICE ICON
   --------------------------------------------------------- */

.service-icon {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 60px;
    height: 60px;

    margin-right: 20px;

    border-radius: 15px;

    background:
        rgba(3, 8, 13, 0.62);

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, 0.25),

        inset 0 1px 0
        rgba(255, 255, 255, 0.04);
}

.service-icon img {
    width: 39px;
    height: 39px;

    object-fit: contain;
}


/* ---------------------------------------------------------
   SERVICE TEXT
   --------------------------------------------------------- */

.service-info {
    position: relative;

    z-index: 1;
}

.service-info h2 {
    margin: 0;

    color:
        rgba(248, 249, 251, 0.94);

    font-size: 1.08rem;

    font-weight: 400;

    letter-spacing: 0;
}

.service-info p {
    margin: 7px 0 0;

    color:
        rgba(201, 209, 217, 0.57);

    font-size: 0.84rem;

    font-weight: 300;
}


/* ---------------------------------------------------------
   CARD ARROW
   --------------------------------------------------------- */

.service-arrow {
    position: absolute;

    right: 22px;
    bottom: 18px;

    color:
        rgba(255, 255, 255, 0.26);

    font-size: 0.95rem;

    transition:
        color 180ms ease,
        transform 180ms ease;
}

.service-card:hover .service-arrow {
    color:
        rgba(255, 106, 42, 0.9);

    transform: translate(2px, -2px);
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.site-footer {
    display: flex;

    flex-direction: column;

    align-items: center;

    margin-top: 110px;

    padding-top: 20px;
}

.site-footer img {
    width: 38px;
    height: 30px;

    margin-bottom: 13px;
}

.site-footer span {
    color:
        rgba(255, 106, 42, 0.68);

    font-size: 0.62rem;

    font-weight: 500;

    letter-spacing: 0.38em;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 720px) {

    .page {
        width:
            min(100% - 36px, 560px);

        padding-top: 24px;
    }

    .site-header {
        align-items: flex-start;
    }

    .brand {
        gap: 11px;
    }

    .brand-bird {
        width: 43px;
        height: 34px;
    }

    .brand-name {
        font-size: 1rem;

        letter-spacing: 0.3em;
    }

    .dashboard-link {
        padding: 8px 10px;

        font-size: 0.75rem;
    }

    .intro {
        margin-top: 90px;
    }

    .intro h1 {
        font-size: 2.8rem;
    }

    .services {
        grid-template-columns: 1fr;

        margin-top: 46px;
    }

    .service-card {
        min-height: 112px;
    }

    .site-footer {
        margin-top: 80px;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition: none !important;
    }
}