:root {
    --bg: #050505;
    --panel: rgba(255,255,255,0.06);
    --panel-2: rgba(255,255,255,0.08);
    --text: #f3f3f3;
    --muted: rgba(255,255,255,0.70);

    --red: #c41e3a;
    --red-dark: #9f162f;

    --radius: 18px;
    --shadow: 0 16px 50px rgba(0,0,0,0.55);
    --shadow-soft: 0 10px 30px rgba(0,0,0,0.35);

    --container: 1200px;
}

/* Basic reset */
*{box-sizing: border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0;
    background: var(--bg);
    color: var(--text);
    font-family:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    line-height: 1.5;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}

/* Layout Helpers */
.container{
    width:min(var(--container), calc(100% - 48px));
    margin-inline:auto;
}

.section{
    padding: 72px;

}

.center{ text-align:center;}

/* Headings */
h1,h2,h3{margin:0 0 12px; line-height:1.1;}
p{
    margin:0 0 14px;
    color: var(--muted);

}

/* Buttons across site */
.btn,.btn-primary, .btn-secondary, .btn-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 700;
    border: 1-x solid transparent;

    transition: background-color .2s ease, filter .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease;
    cursor: pointer; /* pointer on hover */ 

}

.btn-primary{
    background: var(--red);
    color: #fff;
}

.btn-primary:hover{
    background: var(--red-dark); /* to darken on hover */
    filter: brightness(.98); 
}

.btn-secondary{
    background: #fff;
    color: #000; 
}

.btn-secondary:hover{
    background: #fff;
    color: var(--red);
    border-color: rgba(255,255,255,0.0);

}

.btn-outline:hover{
    filter: brightness(.90);
}

.btn-full{width:100%;}

/* Card base */
.card{
    background: var(--panel);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.reveal{   /*must still add this to the html code*/
    opacity: 0; 
    transform: translateY(22px);
    transition: opacity .65s ease, transform .65s ease; 
}

.reveal.is-visible{
    opacity:1;
    transform: translateY(0); 
}