/* ==========================================================
   RTSC WEBSITE V14 ULTIMATE
   LAYOUT SYSTEM
   Version : 14.0
========================================================== */


/* ==========================================================
   APP WRAPPER
========================================================== */

#app{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    background:var(--background);

}

#main-site{

    flex:1;

}


/* ==========================================================
   HEADER
========================================================== */

#site-header{

    position:fixed;

    top:0;
    left:0;
    right:0;

    height:var(--header-height);

    z-index:var(--z-header);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    background:rgba(8,28,52,.88);

    border-bottom:1px solid var(--border);

    transition:var(--transition);

}

#site-header .container{

    height:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


/* ==========================================================
   LOGO
========================================================== */

.logo{

    display:flex;

    align-items:center;

    gap:16px;

}

.logo img{

    width:58px;

    transition:var(--transition);

}

.logo img:hover{

    transform:rotate(5deg) scale(1.08);

}


/* ==========================================================
   HEADER RIGHT
========================================================== */

.header-right{

    display:flex;

    align-items:center;

    gap:12px;

}

.header-right button{

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--surface);

    color:var(--text-primary);

}

.header-right button:hover{

    background:var(--color-primary);

    color:#000;

}


/* ==========================================================
   NAVIGATION
========================================================== */

#main-navigation{

    position:sticky;

    top:var(--header-height);

    z-index:998;

    background:rgba(9,22,39,.96);

    border-bottom:1px solid var(--border);

}

#main-navigation ul{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:32px;

    padding:18px;

}

#main-navigation a{

    position:relative;

    font-weight:600;

    color:var(--text-secondary);

    transition:var(--transition);

}

#main-navigation a:hover{

    color:var(--color-primary);

}

#main-navigation a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:2px;

    background:var(--color-primary);

    transition:var(--transition);

}

#main-navigation a:hover::after{

    width:100%;

}


/* ==========================================================
   HERO
========================================================== */

.hero-section{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding-top:140px;

}

.hero-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.hero-content{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.hero-title{

    font-size:clamp(3rem,7vw,5rem);

    line-height:1.05;

}

.hero-title span{

    color:var(--color-primary);

}

.hero-description{

    max-width:620px;

}

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    width:min(420px,80%);

    filter:drop-shadow(0 0 40px rgba(244,180,0,.25));

}

.logo-ring{

    position:absolute;

    width:460px;

    height:460px;

    border-radius:50%;

    border:2px solid rgba(244,180,0,.18);

}

.hero-glow{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(244,180,0,.25),
        transparent 70%);

    filter:blur(40px);

    z-index:-1;

}


/* ==========================================================
   GRID SYSTEM
========================================================== */

.grid{

    display:grid;

    gap:32px;

}

.grid-2{

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

}

.grid-3{

    grid-template-columns:repeat(3,1fr);

}

.grid-4{

    grid-template-columns:repeat(4,1fr);

}


/* ==========================================================
   FLEX UTILITIES
========================================================== */

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-column{

    display:flex;

    flex-direction:column;

}


/* ==========================================================
   FOOTER
========================================================== */

footer{

    margin-top:120px;

    background:var(--surface);

    border-top:1px solid var(--border);

}

.footer-top{

    padding:70px 0;

}

.footer-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:40px;

}

.footer-bottom{

    padding:24px;

    text-align:center;

    border-top:1px solid var(--border);

    color:var(--text-muted);

}


/* ==========================================================
   MOBILE MENU
========================================================== */

.mobile-menu{

    display:none;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1200px){

.hero-container{

grid-template-columns:1fr;

text-align:center;

}

.hero-content{

align-items:center;

}

.hero-description{

margin:auto;

}

}

@media(max-width:768px){

#main-navigation ul{

gap:18px;

font-size:.92rem;

}

.hero-buttons{

justify-content:center;

}

.logo img{

width:48px;

}

.header-right{

gap:8px;

}

}

@media(max-width:576px){

#main-navigation{

display:none;

}

.mobile-menu{

display:flex;

}

.hero-section{

padding-top:120px;

}

.grid-2,
.grid-3,
.grid-4{

grid-template-columns:1fr;

}

}