/* SoftServe Company Day 2026 — V2, fixed CTA buttons */

:root{
    --bg:#070707;
    --text:#f6f3ee;
    --muted:rgba(246,243,238,.62);
    --line:rgba(246,243,238,.14);
    --orange:#ff8568;
    --orange-soft:#f1c5a4;
    --blue:#479fd7;
    --radius-xl:34px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

/* BACKGROUND */

.ambient-bg{
    position:fixed;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
    background:
        radial-gradient(circle at 50% -20%, rgba(255,255,255,.06), transparent 35%),
        linear-gradient(180deg,#070707 0%,#0b0b0d 55%,#070707 100%);
}

.silk{
    position:absolute;
    width:90vw;
    height:90vw;
    border-radius:50%;
    filter:blur(80px);
    opacity:.78;
    transform:translate3d(0,0,0);
}

.silk-one{
    left:-42vw;
    top:8vh;
    background:
        radial-gradient(circle at 35% 35%, rgba(71,159,215,.38), transparent 40%),
        radial-gradient(circle at 70% 45%, rgba(255,255,255,.08), transparent 35%);
    animation:silkOne 18s ease-in-out infinite alternate;
}

.silk-two{
    right:-46vw;
    top:18vh;
    background:
        radial-gradient(circle at 40% 40%, rgba(255,133,104,.36), transparent 36%),
        radial-gradient(circle at 65% 60%, rgba(255,255,255,.06), transparent 38%);
    animation:silkTwo 22s ease-in-out infinite alternate;
}

.grain{
    position:absolute;
    inset:0;
    opacity:.16;
    background-image:
        linear-gradient(115deg, rgba(255,255,255,.045) 0 1px, transparent 1px 18px),
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.06), transparent 28%);
    mix-blend-mode:screen;
    animation:grainDrift 16s ease-in-out infinite alternate;
}

@keyframes silkOne{
    0%{transform:translate3d(0,0,0) scale(1) rotate(0deg);}
    50%{transform:translate3d(10vw,2vh,0) scale(1.1) rotate(4deg);}
    100%{transform:translate3d(16vw,-6vh,0) scale(1.2) rotate(-3deg);}
}

@keyframes silkTwo{
    0%{transform:translate3d(0,0,0) scale(1) rotate(0deg);}
    50%{transform:translate3d(-9vw,5vh,0) scale(1.08) rotate(-4deg);}
    100%{transform:translate3d(-16vw,-3vh,0) scale(1.18) rotate(3deg);}
}

@keyframes grainDrift{
    0%{transform:translateX(-2%) translateY(1%); opacity:.12;}
    100%{transform:translateX(3%) translateY(-2%); opacity:.2;}
}

/* LAYOUT */

.hero,
main,
.lightbox{
    position:relative;
    z-index:1;
}

.hero{
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px 20px 36px;
    overflow:hidden;
}

.hero-image{
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        linear-gradient(180deg, rgba(0,0,0,.44), rgba(0,0,0,.88)),
        url("../images/hero.jpg") center/cover;
    opacity:.34;
    transform:scale(1.03);
}

.hero-content{
    width:100%;
    max-width:650px;
}

.topline{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:64px;
    color:var(--muted);
    font-size:13px;
    letter-spacing:.04em;
}

.mark{
    width:42px;
    height:42px;

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

    border:none;
    border-radius:0;
    background:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

.mark img{
    width:24px;
    height:24px;

    object-fit:contain;
    display:block;
}

.eyebrow{
    margin-bottom:18px;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.18em;
}

h1{
    max-width:640px;
    font-size:clamp(44px,13vw,82px);
    line-height:.92;
    letter-spacing:-.07em;
    font-weight:900;
    margin-bottom:24px;
}

.subtitle{
    max-width:480px;
    color:var(--muted);
    font-size:17px;
    line-height:1.48;
    margin-bottom:34px;
}

/* CTA — reverted to clean pill buttons */

.actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.cta{
    min-height:58px;
    padding:0 20px;
    border-radius:999px;
    border:0;
    color:#111;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    font-size:15px;
    font-weight:800;
    letter-spacing:-.02em;
    position:relative;
    overflow:hidden;
    transition:
        transform .35s ease,
        filter .35s ease,
        box-shadow .35s ease;
}

.cta::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(255,255,255,.28) 45%,
            transparent 78%
        );
    transform:translateX(-120%);
    transition:transform .55s ease;
    pointer-events:none;
}

.cta:hover,
.cta:focus-visible{
    transform:translateY(-3px);
    filter:saturate(1.06) brightness(1.03);
    outline:none;
}

.cta:hover::before,
.cta:focus-visible::before{
    transform:translateX(120%);
}

.cta-orange{
    background:linear-gradient(135deg,var(--orange),var(--orange-soft));
}

.cta-blue{
    background:linear-gradient(135deg,var(--blue),#8fc6e8);
}

.cta-donate{
    grid-column:1 / -1;
    background:linear-gradient(135deg,var(--orange),var(--orange-soft));
}

.cta-arrow{
    position:relative;
    z-index:1;
    font-size:18px;
    line-height:1;
    transition:transform .35s ease;
}

.cta span:first-child{
    position:relative;
    z-index:1;
}

.cta:hover .cta-arrow,
.cta:focus-visible .cta-arrow{
    transform:translateX(4px);
}

/* SECTIONS */

main{
    padding:12px 20px 48px;
}

.section{
    width:100%;
    max-width:760px;
    margin:0 auto 42px;
}

.section-head{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin-bottom:16px;
}

.section-kicker{
    margin-bottom:8px;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.section h2{
    font-size:clamp(34px,9vw,54px);
    line-height:.95;
    letter-spacing:-.06em;
    font-weight:900;
}

.section-note{
    max-width:460px;
    color:var(--muted);
    font-size:14px;
    line-height:1.45;
}

.media-frame{
    width:100%;
    border:1px solid var(--line);
    border-radius:var(--radius-xl);
    background:rgba(255,255,255,.055);
    padding:10px;
    display:block;
    overflow:hidden;
    cursor:pointer;
    text-align:left;
    color:var(--text);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;
}

.media-frame:hover,
.media-frame:focus-visible{
    transform:translateY(-3px);
    border-color:rgba(255,255,255,.24);
    background:rgba(255,255,255,.08);
    outline:none;
}

.media-frame img{
    width:100%;
    max-height:360px;
    object-fit:cover;
    display:block;
    border-radius:24px;
    background:#151515;
}

.media-action{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 8px 4px;
    color:var(--muted);
    font-size:13px;
    font-weight:600;
}

/* REVEAL */

.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:.75s ease;
}

.reveal.active{
    opacity:1;
    transform:none;
}

/* LIGHTBOX */

.lightbox{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:14px;
    background:rgba(0,0,0,.94);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    opacity:0;
    transition:opacity .25s ease;
}

.lightbox.active{
    display:flex;
    opacity:1;
}

.lightbox img{
    max-width:100%;
    max-height:92svh;
    border-radius:20px;
    transform:scale(.96);
    opacity:0;
    transition:
        transform .28s ease,
        opacity .28s ease;
}

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

.lightbox-close{
    position:absolute;
    top:18px;
    right:18px;
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    color:var(--text);
    font-size:28px;
    line-height:1;
    display:grid;
    place-items:center;
    cursor:pointer;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

/* MOBILE */

@media(max-width:560px){
    .hero{
        align-items:flex-start;
        padding-top:24px;
    }

    .topline{
        margin-bottom:72px;
    }

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

    .cta{
        min-height:56px;
    }

    .media-frame img{
        max-height:310px;
    }
}

@media(min-width:760px){
    .section-head{
        grid-template-columns:1fr .9fr;
        align-items:end;
    }
}

@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto;
    }

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