:root {
    --accent-red: #C3001E;
    --bg-dark: #0D0D0D;
    --text-white: #FFFFFF;
    --frame-skew: 60px;
    --desktop-padding: 120px;
    --font-main: 'Inter', sans-serif;
    --font-accent: 'Oswald', sans-serif;
}

body {
    background-color: var(--bg-dark);
    margin: 0;
    font-family: var(--font-main);
    color: var(--text-white);
    overflow-x: hidden;
}


.my-frame {
    position: relative;
    padding-top: var(--desktop-padding);
    padding-bottom: calc(var(--desktop-padding) + var(--frame-skew));
    overflow: visible;
}

.skew-right { 
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--frame-skew)), 0 100%); 
}
.skew-right::after { 
    transform-origin: bottom left; 
    transform: skewY(-3deg); 
}

.skew-left { 
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--frame-skew))); 
}
.skew-left::after { 
    transform-origin: bottom right; 
    transform: skewY(3deg); 
}

.hollow-text {
    -webkit-text-stroke: 1px rgba(255,255,255,0.2);
    color: transparent;
    font-size: clamp(60px, 15vw, 180px);
    font-weight: 900;
    margin: 0;
    line-height: 0.8;
}

.btn-premium {
    background: var(--accent-red);
    border: none;
    color: white;
    padding: 20px 40px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-top: 40px;
    cursor: pointer;
}