/*=====================================================
  SAZERAC STUDIOS
  Premium Landing Page
======================================================*/

/*=====================================================
  CSS Variables
======================================================*/

:root {

    --navy: #071C2D;
    --navy-light: #0E2B45;

    --copper: #C98A42;
    --copper-light: #E3A965;

    --white: #ffffff;
    --light: #F4F6F8;

    --text: #D9DEE3;
    --text-dark: #8C98A6;

    --glass: rgba(10,18,28,.58);
    --glass-border: rgba(255,255,255,.08);

    --shadow:
        0 20px 60px rgba(0,0,0,.35);

    --transition: all .35s ease;

}

/*=====================================================
  Reset
======================================================*/

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;
    color:var(--white);
    background:var(--navy);
    overflow-x:hidden;

}

/*=====================================================
  Background Video
======================================================*/

.video-container{

    position:fixed;

    inset:0;

    z-index:-3;

}

.hero-video {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.05);

    filter:
        brightness(.55)
        saturate(.9);

}

.desktop-video{

    display:block;

}

.mobile-video{

    display:none;

}

@media (max-width:768px){

    .desktop-video{

        display:none;

    }

    .mobile-video{

        display:block;

    }

}

.video-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(5,12,22,.55),
            rgba(6,14,24,.72)
        );

    backdrop-filter:blur(2px);

}

/*=====================================================
  Navigation
======================================================*/

header{

    position:fixed;

    top:0;

    width:100%;

    z-index:999;

    transition:var(--transition);

}

.navbar{

    max-width:1300px;

    margin:auto;

    padding:26px 50px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.navbar.scrolled{

    margin-top:12px;

    border-radius:18px;

    background:rgba(10,20,32,.65);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.05);

}

.logo img{

    height:56px;

}

.nav-links{

    display:flex;

    list-style:none;

    gap:42px;

}

.nav-links a{

    text-decoration:none;

    color:white;

    font-weight:500;

    transition:var(--transition);

    letter-spacing:.5px;

}

.nav-links a:hover{

    color:var(--copper-light);

}

.mobile-menu-btn{

    display:none;

}

/*=====================================================
  Hero
======================================================*/

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:140px 40px;

}

.glass-panel{

    width:min(780px,92%);

    text-align:center;

    padding:70px;

    background:var(--glass);

    backdrop-filter:blur(18px);

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

    border-radius:28px;

    box-shadow:var(--shadow);

    animation:fadeUp 1.2s ease;

}

.hero-logo{

    width:175px;

    margin-bottom:32px;

}

.hero h1{

    font-family:'Playfair Display',serif;

    font-size:4rem;

    font-weight:600;

    margin-bottom:12px;

    letter-spacing:1px;

}

.hero-tagline{

    color:var(--copper-light);

    font-size:1.45rem;

    margin-bottom:24px;

    font-weight:500;

}

.hero-description{

    max-width:650px;

    margin:auto;

    color:var(--text);

    line-height:1.9;

    font-size:1.12rem;

}

/*=====================================================
  Buttons
======================================================*/

.hero-buttons{

    margin-top:42px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    padding:17px 38px;

    border-radius:999px;

    transition:var(--transition);

    font-weight:600;

}

.btn-primary{

    background:var(--copper);

    color:white;

    box-shadow:
        0 10px 30px rgba(201,138,66,.35);

}

.btn-primary:hover{

    background:var(--copper-light);

    transform:translateY(-3px);

}

.btn-secondary{

    border:1px solid rgba(255,255,255,.18);

    color:white;

    background:rgba(255,255,255,.05);

}

.btn-secondary:hover{

    background:rgba(255,255,255,.10);

}

/*=====================================================
  Sections
======================================================*/

.content-section{

    position:relative;

    padding:120px 60px;

    background:
        linear-gradient(
            rgba(7,18,29,.93),
            rgba(7,18,29,.97)
        );

}

.dark-section{

    background:#07141F;

}

.section-header{

    text-align:center;

    margin-bottom:80px;

}

.section-subtitle{

    color:var(--copper-light);

    letter-spacing:3px;

    font-size:.82rem;

}

.section-header h2{

    font-family:'Playfair Display',serif;

    font-size:2.8rem;

    margin-top:16px;

}

/*=====================================================
  Services
======================================================*/

.services-grid{

    max-width:1300px;

    margin:auto;

    display:grid;

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

    gap:30px;

}

.service-card{

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.06);

    padding:40px;

    border-radius:22px;

    transition:var(--transition);

}

.service-card:hover{

    transform:translateY(-10px);

    border-color:rgba(201,138,66,.45);

}

.service-card h3{

    color:var(--copper-light);

    margin-bottom:18px;

}

.service-card p{

    color:var(--text);

    line-height:1.8;

}

/*=====================================================
  Timeline
======================================================*/

.timeline{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:45px;

}

.timeline-step{

    text-align:center;

}

.timeline-step span{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:74px;

    height:74px;

    border-radius:50%;

    background:var(--copper);

    color:white;

    font-weight:bold;

    margin-bottom:20px;

}

.timeline-step h3{

    font-weight:500;

}

/*=====================================================
  Technology
======================================================*/

.tech-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:22px;

}

.tech-item{

    background:rgba(255,255,255,.04);

    padding:30px;

    text-align:center;

    border-radius:18px;

    transition:var(--transition);

}

.tech-item img {

    width: 56px;
    height: auto;

    object-fit: contain;

    margin-bottom: 16px;

}

.tech-item:hover{

    background:rgba(201,138,66,.10);

    transform:translateY(-5px);

}

/*=====================================================
  CTA
======================================================*/

.cta-section{

    padding:160px 30px;

    text-align:center;

    background:
        linear-gradient(
            rgba(7,18,29,.85),
            rgba(7,18,29,.95)
        );

}

.cta-container{

    max-width:800px;

    margin:auto;

}

.cta-container h2{

    font-family:'Playfair Display',serif;

    font-size:3rem;

}

.cta-container p{

    margin:30px 0 50px;

    color:var(--text);

    line-height:1.9;

}

/*=====================================================
  Footer
======================================================*/

footer{

    background:#050D17;

    padding:45px;

    text-align:center;

}

footer img{

    width:90px;

    margin-bottom:20px;

}

footer p{

    color:#8D97A5;

    font-size:.95rem;

}

/*=====================================================
  Animations
======================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
            translateY(40px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}

/*=====================================================
  Responsive
======================================================*/

@media(max-width:900px){

    .hero h1{

        font-size:2.8rem;

    }

    .glass-panel{

        padding:45px;

    }

    .nav-links{

        display:none;

    }

    .mobile-menu-btn{

        display:block;

        font-size:2rem;

        color:white;

        background:none;

        border:none;

        cursor:pointer;

    }

    .navbar{

        padding:24px;

    }

}

@media(max-width:640px){

    .hero{

        padding:120px 20px;

    }

    .hero-logo{

        width:130px;

    }

    .hero h1{

        font-size:2.2rem;

    }

    .hero-tagline{

        font-size:1.1rem;

    }

    .section-header h2{

        font-size:2rem;

    }

    .content-section{

        padding:90px 28px;

    }

}