css
/*
=====================================
GLOBAL RESET
=====================================
*/
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html {
    background: transparent;
    height: 100%;
}
/*
=====================================
BODY
=====================================
*/
body {
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow-x:hidden;
    font-family:"Inter",sans-serif;
    color:#111;
    position:relative;
    min-height: 100vh;
    min-height: 100vh;
    margin: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    background: transparent;
    isolation: isolate;
}
body::before {
    content:"";
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at top left, rgba(106,17,203,.45), transparent 40%),
        radial-gradient(circle at bottom right, rgba(37,117,252,.45), transparent 40%);
    z-index:-1;
}

/*
=====================================
BACKGROUND
=====================================
*/
.background {
    position:fixed;
    inset:0;
    background-image:linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.8)),
    url("fwatch.jpg");
    background-size:cover;
    background-position:center;
    z-index:0;
    animation:
        backgroundZoom 20s infinite alternate;
}
@keyframes backgroundZoom {
    from {transform:scale(1);}
    to {transform:scale(1.08);}
}

/*
=====================================
CURSOR LIGHT
=====================================
*/

.cursor-light {
    position:fixed;
    width:450px;
    height:450px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(0,0,0,.15), transparent 70%); pointer-events:none;
    transform:translate(-50%,-50%);
    z-index:1;
}
/*
=====================================
PARTICLES
=====================================
*/
.particles {
    position:fixed;
    inset:1;
    overflow:hidden;
    pointer-events:none;
    z-index:1;
}
.particles span {
    position:absolute;
    width:5px;
    height:5px;
    background:#000;
    border-radius:50%;
    opacity:.25;
    animation:
        floatParticle 10s infinite ease-in-out;
}
@keyframes floatParticle {
    0% {transform:translateY(0);opacity:0;}
    50% {opacity:.5;}
    100% {transform:translateY(-100vh);opacity:0;}
}

/*
=====================================
MAIN GLASS CARD (MATCHED THEME)
=====================================
*/

.content {
    position:relative;
    z-index:2;
    width:min(95%,1000px);
    padding:50px;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.05)
        );
    backdrop-filter:
        blur(18px);
    border-radius:30px;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow:
        0 30px 80px rgba(0,0,0,.55),
        inset 0 0 40px rgba(255,255,255,.05);
    color:white;
    opacity:0;
    transform:translateY(40px);
    transition:
        1s ease;
}



.content.show {
    opacity:1;
    transform:
        translateY(0);
}
/*
=====================================
TYPOGRAPHY
=====================================
*/

h1 {
    font-family:"Inter",sans-serif;
    font-size: clamp(60px,10vw,100px);
    letter-spacing:-3px;
    color:white;
    text-shadow:
        0 10px 30px rgba(0,0,0,.5);
}
.tagline {
    margin-top:10px;
    margin-bottom:40px;
    font-family:"Inter",sans-serif;
    font-size:22px;
    color: rgba(255,255,255,.7);
}
/*
=====================================
BUTTONS / LINKS
=====================================
*/
.links {
    display:flex;
    flex-direction:column;
    gap:20px;
}

.links a {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    padding:20px;
    border-radius:20px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter:
        blur(15px);
    color:white;
    text-decoration:none;
    font-family:"Inter",sans-serif;
    font-size:32px;
    font-weight:700;
    transition:.35s ease;
}

.links a:hover {
    transform:translateY(-8px) scale(1.04);
    background:rgba(255,255,255,.16);
    box-shadow:0 20px 50px rgba(37,117,252,.35);
}
/*
=====================================
GOOGLE LINK
=====================================
*/
.google {
    margin-top:35px;
    font-size:20px;}
.google a {
    color:#b8b8ff;
    font-weight:bold;}
/*
=====================================
IMAGE
=====================================
*/
.truth {
    margin-top:40px;
    margin-bottom:40px;
    width:min(100%,500px);
    border-radius:25px;
    box-shadow:0 20px 60px rgba(0,0,0,.65);
    transition:.5s ease;
}
.truth:hover {
    transform: scale(1.05);}
/*
=====================================
MEDIA PLAYER MATCHED THEME
=====================================
*/
.media-player {
    margin-top:20px;
    width:420px;
    height:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    border-radius:30px;
    background:
        linear-gradient(135deg, rgba(106,17,203,.35), rgba(37,117,252,.25));
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 25px 70px rgba(0,0,0,.55);
    overflow:hidden;
    transition:.4s ease;
}
.media-player:hover {
    transform:translateY(-5px);
    box-shadow: 0 35px 90px rgba(37,117,252,.45);}

.player-label {
    position:absolute;
    top:12px;
    left:50%;
    transform: translateX(-50%);
    font-size:12px;
    letter-spacing:5px;
    font-weight:800;
    color:white;
    opacity:.65;
}

.media-player audio {
    margin-top:10px;
    width:340px;
    filter: invert(1) hue-rotate(180deg);
}