/* ==========================================================
   MAKERCELL V2
   Engineering the Future
   Version : 2.0
   ========================================================== */

/* ==========================================================
   CSS VARIABLES
   ========================================================== */

:root{

    --primary:#081d38;
    --secondary:#10305c;
    --accent:#f0b400;
    --cyan:#00dfff;
    --white:#ffffff;
    --gray:#d9d9d9;

    --glass:rgba(255,255,255,.08);

    --radius:18px;

    --transition:.35s ease;

    --shadow:
        0 15px 40px rgba(0,0,0,.25);

}

/* ==========================================================
   RESET
   ========================================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:
    "Segoe UI",
    "Inter",
    Arial,
    sans-serif;

    background:var(--primary);

    color:var(--white);

    overflow-x:hidden;

    line-height:1.65;

    -webkit-font-smoothing:antialiased;

}

/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1,h2,h3,h4,h5{

    font-weight:800;

    line-height:1.2;

}

p{

    color:#dfe8f3;

}

/* ==========================================================
   IMAGE
   ========================================================== */

img{

    display:block;

    width:100%;

    height:auto;

}

/* ==========================================================
   LINK
   ========================================================== */

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

/* ==========================================================
   LIST
   ========================================================== */

ul{

    list-style:none;

}

/* ==========================================================
   CONTAINER
   ========================================================== */

.container{

    width:min(1400px,92%);

    margin:auto;

}

/* ==========================================================
   SECTION
   ========================================================== */

section{

    position:relative;

    padding:110px 0;

}

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

#header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:88px;

    z-index:9999;

    transition:.4s;

    background:rgba(8,29,56,.78);

    backdrop-filter:blur(18px);

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

    border-bottom:1px solid rgba(255,255,255,.08);

}

.header-wrap{

    height:88px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

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

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    height:58px;

    width:auto;

    transition:.35s;

}

.logo img:hover{

    transform:scale(1.05);

}

/*=========================
DESKTOP MENU
=========================*/

.desktop-menu{

    display:flex;

    align-items:center;

    gap:32px;

}

.desktop-menu a{

    position:relative;

    color:#fff;

    font-size:15px;

    font-weight:600;

    letter-spacing:.4px;

    padding:8px 0;

}

/* Animated underline */

.desktop-menu a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--accent);

    transition:.35s;

    transform:translateX(-50%);

}

.desktop-menu a:hover{

    color:var(--accent);

}

.desktop-menu a:hover::after{

    width:100%;

}

/*=========================
QUOTE BUTTON
=========================*/

.quote-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        #f0b400,
        #ffd54a
    );

    color:#081d38;

    font-weight:700;

    box-shadow:
        0 8px 25px rgba(240,180,0,.35);

}

.quote-btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 15px 35px rgba(240,180,0,.50);

}

/*=========================
HAMBURGER
=========================*/

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    border:none;

    background:none;

    color:#fff;

    font-size:34px;

    cursor:pointer;

}

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

.mobile-menu{

    position:absolute;

    top:88px;

    left:0;

    width:100%;

    display:none;

    background:#081d38;

    border-top:1px solid rgba(255,255,255,.08);

    box-shadow:0 20px 40px rgba(0,0,0,.30);

}

.mobile-menu.show{

    display:block;

    animation:menuDown .35s ease;

}

.mobile-menu a{

    display:block;

    padding:18px;

    color:#fff;

    text-align:center;

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

    transition:.3s;

}

.mobile-menu a:hover{

    background:#123861;

    color:var(--accent);

}

/*=========================
ANIMATION
=========================*/

@keyframes menuDown{

    from{

        opacity:0;

        transform:translateY(-20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

#header.scrolled{

    height:72px;

    background:rgba(6,22,42,.96);

    box-shadow:0 12px 35px rgba(0,0,0,.25);

}

#header.scrolled .header-wrap{

    height:72px;

}

#header.scrolled .logo img{

    height:50px;

}

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

@media(max-width:1100px){

.desktop-menu,
.quote-btn{

    display:none;

}

.menu-toggle{

    display:block;

}

}

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

.hero{

    position:relative;

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    padding-top:88px;

}

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

.hero-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transform:scale(1.05);

    animation:bgZoom 18s ease-in-out infinite alternate;

}

/*=========================
Overlay
=========================*/

.overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(5,18,38,.68),
            rgba(8,29,56,.72)
        );

    z-index:1;

}

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

.hero-content{

    position:relative;

    z-index:5;

    width:min(1200px,92%);

    text-align:center;

}

.hero-content h2{

    margin-top:25px;

    font-size:clamp(26px,3vw,46px);

    font-weight:300;

    letter-spacing:4px;

    color:#ffffff;

}

.hero-content p{

    max-width:850px;

    margin:30px auto;

    color:#d8e4ef;

    font-size:20px;

    line-height:1.9;

}

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

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:40px;

}

.hero-buttons a{

    min-width:220px;

    padding:18px 36px;

    border-radius:60px;

    font-size:17px;

    font-weight:700;

    transition:.35s;

}

.hero-buttons a:first-child{

    background:linear-gradient(
        135deg,
        #f0b400,
        #ffd54a
    );

    color:#081d38;

}

.hero-buttons a:last-child{

    border:2px solid rgba(255,255,255,.35);

    color:#fff;

    backdrop-filter:blur(10px);

}

.hero-buttons a:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(0,0,0,.30);

}

/*=========================
Scroll Down
=========================*/

.scroll-down{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    color:#ffffff;

    font-size:14px;

    letter-spacing:3px;

    animation:bounce 2s infinite;

    z-index:6;

}

/*=========================
Animation
=========================*/

@keyframes bgZoom{

    from{

        transform:scale(1.05);

    }

    to{

        transform:scale(1.12);

    }

}

@keyframes bounce{

    0%,100%{

        transform:translate(-50%,0);

    }

    50%{

        transform:translate(-50%,12px);

    }

}

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

@media(max-width:768px){

.hero{

    min-height:90vh;

}

.hero-content h2{

    font-size:28px;

    letter-spacing:2px;

}

.hero-content p{

    font-size:17px;

    line-height:1.7;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.hero-buttons a{

    width:100%;

    max-width:320px;

}

}

/*=========================================================
PHASE 4 : CINEMATIC LOGO
=========================================================*/

.hero-logo{

    position:relative;

    display:inline-block;

    overflow:hidden;

}

.hero-logo .text{

    display:block;

    position:relative;

    font-size:clamp(70px,8vw,140px);

    font-weight:900;

    letter-spacing:8px;

    color:#ffffff;

    text-transform:uppercase;

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f6f6f6 20%,
        #d8d8d8 45%,
        #ffffff 60%,
        #bfc7d5 100%
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:logoPulse 18s infinite;

}

.hero-logo .shine{

    position:absolute;

    top:-40%;

    left:-200%;

    width:90px;

    height:220%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.2),
        rgba(255,255,255,1),
        rgba(0,220,255,.95),
        rgba(255,255,255,1),
        transparent
    );

    transform:rotate(20deg);

    filter:blur(8px);

    animation:logoSweep 18s infinite;

}

@keyframes logoSweep{

0%,90%,100%{

left:-220%;

opacity:0;

}

2%{

opacity:1;

}

8%{

left:220%;

opacity:1;

}

12%{

opacity:0;

}

}

@keyframes logoPulse{

0%,100%{

filter:none;

}

4%{

filter:drop-shadow(0 0 8px #00dfff)
drop-shadow(0 0 25px #00dfff)
drop-shadow(0 0 60px #00dfff);

}

8%{

filter:none;

}

}

/*=========================================================
PHASE 6
LENS FLARE
=========================================================*/

.hero::after{

content:"";

position:absolute;

right:-180px;

top:-180px;

width:500px;

height:500px;

background:

radial-gradient(

circle,

rgba(0,220,255,.40),

rgba(0,220,255,.12),

transparent 72%

);

filter:blur(20px);

animation:flareMove 12s ease-in-out infinite;

pointer-events:none;

z-index:2;

}

@keyframes flareMove{

0%{

transform:translate(0,0) scale(1);

}

50%{

transform:translate(-50px,30px) scale(1.18);

}

100%{

transform:translate(0,0) scale(1);

}

}

/* Premium Button */

.hero-buttons a{

position:relative;

overflow:hidden;

}

.hero-buttons a::before{

content:"";

position:absolute;

left:-160%;

top:0;

width:70%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.65),

transparent

);

transform:skewX(-25deg);

transition:.8s;

}

.hero-buttons a:hover::before{

left:180%;

}