/*==============================================================
    BEYONDWAFER TECHNOLOGIES
    Premium Engineering Website
    Version : 1.0
==============================================================*/


/*==============================================================
    GOOGLE FONTS
==============================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');


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

:root{

    /*========================
        Brand Colors
    ========================*/

    --primary:#0a84ff;
    --primary-dark:#0066CC;
    --primary-light:#DCEEFF;

    --secondary:#081A2E;
    --secondary-light:#16355D;

    --accent:#27D3FF;

    --success:#14B86A;
    --warning:#F6A623;
    --danger:#F44336;

    /*========================
        Neutral Palette
    ========================*/

    --white:#FFFFFF;

    --bg:#F8FBFF;

    --surface:#FFFFFF;

    --surface-alt:#F3F8FD;

    --border:#E7EEF7;

    --text:#1E293B;

    --text-light:#64748B;

    --text-muted:#94A3B8;

    /*========================
        Typography
    ========================*/

    --font-heading:"Space Grotesk",sans-serif;

    --font-body:"Inter",sans-serif;

    --h1:clamp(2.4rem,3.5vw,3.5rem);

    --h2:clamp(2.0rem,2.5vw,2.5rem);

    --h3:2rem;

    --h4:1.4rem;

    --body-lg:1.15rem;

    --body:1rem;

    --small:.92rem;

    /*========================
        Layout
    ========================*/

    --container:1320px;

    --container-xl:1500px;

    --section-space:120px;

    --section-space-sm:80px;

    /*========================
        Radius
    ========================*/

    --radius-sm:10px;

    --radius:18px;

    --radius-lg:30px;

    --radius-pill:999px;

    /*========================
        Shadows
    ========================*/

    --shadow-sm:
    0 8px 20px rgba(9,30,66,.05);

    --shadow:
    0 18px 45px rgba(9,30,66,.08);

    --shadow-lg:
    0 40px 90px rgba(9,30,66,.12);

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

    --transition:.35s ease;

    --transition-slow:.6s ease;

}

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

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

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

    scroll-padding-top:90px;

}

body{

    font-family:var(--font-body);

    font-size:var(--body);

    color:var(--text);

    background:var(--bg);

    line-height:1.7;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}

input,
textarea{

    outline:none;

    font-family:inherit;

}

.section{

    position:relative;

        padding:120px 0;

        padding:var(--section-space) 0;
}

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

h1,
h2,
h3,
h4,
h5{

    font-family:var(--font-heading);

    color:var(--secondary);

    line-height:1.1;

    font-weight:700;

}

h1{

    font-size:var(--h1);

}

h2{

    font-size:var(--h2);

}

h3{

    font-size:var(--h3);

}

p{

    color:var(--text-light);

    font-size:var(--body-lg);

}

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:20px;

    color:var(--primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.section-tag::before{

    content:"";

    width:42px;

    height:2px;

    background:var(--primary);

}

/*==============================================================
    LAYOUT
==============================================================*/

.container{

    width:min(92%,var(--container));

    margin-inline:auto;

}

.container-xl{

    width:min(94%,var(--container-xl));

}



.section-header{

    max-width:760px;

    margin:0 auto 20px;

    text-align:center;

     position:relative;

    z-index:5;

}

.section-header p{

    margin-top:5px;

    color:var(--text-light);

    line-height:1.8;

}

.section-header h2{

    margin-bottom:20px;

}

.section-header h2 span{

    color:var(--primary);

}


/*==============================================================
    BUTTONS
==============================================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 34px;

    border-radius:var(--radius-pill);

    font-weight:600;

    transition:var(--transition);
    font-size:17px;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

    box-shadow:var(--shadow);

}

.btn-primary:hover{

    transform:translateY(-3px);

    background:var(--primary-dark);

}

.btn-secondary{

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

    background:#fff;

    color:var(--secondary);

}

.btn-secondary:hover{

    border-color:var(--primary);

    color:var(--primary);

}

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

.text-center{

    text-align:center;

}

.mt-40{

    margin-top:40px;

}

.mb-40{

    margin-bottom:40px;

}

.grid{

    display:grid;

}

.flex{

    display:flex;

}

.hidden{

    display:none;

}

/*==============================================================
    BACKGROUND HELPERS
==============================================================*/

.bg-light{

    background:var(--bg);

}

.bg-white{

    background:#fff;

}

.bg-dark{

    background:var(--secondary);

    color:#fff;

}

.bg-gradient{

    background:
    radial-gradient(circle at top right,
    rgba(10,132,255,.12),
    transparent 40%),
    #fff;

}

/*==============================================================
                        NAVBAR
==============================================================*/
.header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:90px;

    z-index:1000;

    background:rgba(255,255,255,.75);
    backdrop-filter:blur(15px);
    border-bottom:1px solid rgba(0,0,0,.05);

    transition:all .35s ease;
    animation:navbarFade .9s ease forwards;

}

.header.scrolled{

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

    backdrop-filter:blur(18px);

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

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

    box-shadow:

    0 12px 40px rgba(9,30,66,.06);

}

.navbar{

    height:60px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    width:auto;

    height:48px;

    transition:var(--transition);

}

.logo:hover img{

    transform:scale(1.04);

}

.nav-menu{

    display:flex;

    align-items:center;

}

.nav-menu ul{

    display:flex;

    align-items:center;

    gap:42px;

}

.nav-menu a{

    position:relative;

    color:var(--secondary);

    font-size:.96rem;

    font-weight:500;

    transition:var(--transition);

}

.nav-menu a:hover{

    color:var(--primary);

}

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:width .35s ease;

}

.nav-menu a:hover::after,

.nav-menu a.active::after{

    width:100%;

}

.nav-menu a.active{

    color:var(--primary);

}

.nav-button{

    padding:14px 30px;

    border-radius:999px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.nav-button:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

.mobile-toggle{

    display:flex;

    width:48px;

    height:48px;

    border-radius:50%;

    align-items:center;

    justify-content:center;

    color:var(--secondary);

    background:#fff;

    box-shadow:var(--shadow-sm);

}





@keyframes navbarFade{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@media(max-width:992px){

.nav-menu{

    position:fixed;

    top:90px;

    right:-100%;

    width:320px;

    height:calc(100vh - 90px);

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding-top:60px;

    transition:.45s ease;

    box-shadow:

    -10px 0 50px rgba(0,0,0,.08);

}

.nav-menu.active{

    right:0;

}

.nav-menu ul{

    flex-direction:column;

    gap:30px;

}



.nav-button{

    display:none;

}

}

@media(max-width:576px){

.navbar{

    height:80px;

}

.logo img{

    height:48px;

}

.nav-menu{

    top:80px;

    height:calc(100vh - 80px);

    width:100%;

}

}

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

.hero{

    position:relative;

    overflow:hidden;

    min-height:auto;

   align-items:center;

    background:#ffffff;

    padding-top:90px;
    display:flex;

}

.hero-background{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:1;

}

.hero-gradient{

    position:absolute;

    width:900px;

    height:900px;

    right:-180px;

    top:-120px;

    background:

    radial-gradient(circle,

    rgba(10,132,255,.18),

    transparent 70%);

}

.hero-grid{

    position:absolute;

    inset:0;

    opacity:.05;

    background-image:

    linear-gradient(#0a84ff 1px,transparent 1px),

    linear-gradient(90deg,#0a84ff 1px,transparent 1px);

    background-size:70px 70px;

}

.hero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

}

.hero-glow-1{

    width:500px;

    height:500px;

    right:10%;

    top:25%;

    background:#42A5FF33;

}

.hero-glow-2{

    width:350px;

    height:350px;

    left:-120px;

    bottom:-120px;

    background:#00D8FF22;

}


.hero-container  {

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:.8fr 1.06fr;

    align-items:start;

    min-height:calc(100vh - 90px);

    gap:20px;

    position:relative;

}

.hero-content{

     width:100%;

    max-width:560px;

    z-index:5;

    align-self:center;
    
    text-align:left;

}



.hero-content p{

font-size:18px;

line-height:1.8;

color:#5c6573;

max-width:620px;
}

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:14px;

    color:var(--primary);

    letter-spacing:2px;

    font-weight:700;

    font-size:.85rem;

    margin-bottom:30px;

}

.hero-tag::before{

    content:"";

    width:45px;

    height:2px;

    background:var(--primary);

}

.hero h1{

    margin-bottom:30px;

    font-size:36px;

line-height:1.1;

font-weight:600;

letter-spacing:-2px;

}

.hero h1 span{

    color:var(--primary);

}

.hero p{

    max-width:520px;

    margin-bottom:45px;

    font-size:  16px;
}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:60px;
    flex-direction:column;

}

.hero-stats{

    display:flex;

    gap:55px;

    margin-top:60px;

    align-items:center;

}

.stat h3{

    color:var(--primary);

    margin-bottom:6px;

    font-size:1.8rem;

}

.stat span{

    color:var(--text-light);

    font-size:.9rem;

}

.hero-animation{

    position:relative;

    width:100%;

      aspect-ratio:900/650;

  /*  height:450px;

    overflow:visible;*/

}

a,
button,
img,
.stage,
.btn{

    transition:all .35s ease;

}

::selection{

    background:var(--primary);

    color:#fff;

}

.stage{

    position:absolute;

   width:120px;

    height:145px;

    padding:14px;

    background:#fff;

    border-radius:26px;

    flex-direction:column;

    box-shadow:0 20px 50px rgba(20,50,120,.12);
    display:flex;

    transition:.4s;

}

.stage:hover{

       transform:translateY(-10px) scale(1.05);

}

.stage img{

    width:72px;

    height:72px;

    object-fit:contain;
    
    display:block;

margin:auto;
}

.stage span{

    font-size:.82rem;

    font-weight:600;

}

.stage-wafer{

    left:4%;

    top:74%;

}

.stage-chip{

    left:4%;

    top:6%;

}

.stage-embedded{

    left:41%;

    top:19%;

}

.stage-cloud{

    left:77%;

    top:6%;

}

.stage-ai{

    left:77%;

    top:74%;

}

.stage-enterprise{

    left:41%;

    top:59%;

}

.energy-pulse{

    position:absolute;

    width:18px;
    height:18px;

    border-radius:50%;

    background:#0a84ff;

    box-shadow:
        0 0 10px #0a84ff,
        0 0 25px #0a84ff,
        0 0 45px #0a84ff,
        0 0 70px rgba(0,200,255,.6);

    z-index:100;

    pointer-events:none;

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

}

.scroll-indicator{

    position:absolute;

    bottom:25px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    z-index:10;

}

.mouse{

    width:28px;

    height:46px;

    border:2px solid var(--primary);

    border-radius:20px;

    display:flex;

    justify-content:center;

}

.wheel{

    width:4px;

    height:10px;

    background:var(--primary);

    border-radius:10px;

    margin-top:8px;

    animation:scrollWheel 2s infinite;

}

@keyframes scrollWheel{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    100%{

        transform:translateY(16px);

        opacity:0;

    }

}


.hero-title{

    font-size:48px;

    line-height:1.15;

    letter-spacing:-2px;

    font-weight:800;

    color:#0F172A;

    max-width:520px;

}
.hero-description{

    max-width:520px;

    font-size:1.25rem;

    line-height:1.8;

    color:#52637A;

    margin:35px 0;

}




.stat{

    display:flex;

    flex-direction:column;

}

.hero-visual::after{

    content:"";

    position:absolute;

    inset:0;

    background:url("assets/images/circuit-bg.png") center/contain no-repeat;

    opacity:.18;

    z-index:-2;

}

.hero-visual::before{

    content:"";

    position:absolute;

    inset:10% 0 10% 10%;

    

    background:

    radial-gradient(circle at center,

    rgba(0,174,239,.18),

    transparent 70%);

    z-index:-1;

}




/*==========================================
    HERO SVG CIRCUIT
==========================================*/

.hero-circuit{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    z-index:1;

}

.circuit-path{

    fill:none;

    stroke:#179BFF;

    stroke-width:4;

    stroke-linecap:round;

    stroke-linejoin:round;

    stroke-dasharray:12 10;

    opacity:.65;

    filter:drop-shadow(0 0 10px #00AEEF);

}

/*==============================================================
    MOBILE TOGGLE
==============================================================*/

.mobile-toggle.active{

    background:var(--primary);

    color:#fff;

}

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

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==============================================================
    SCROLLBAR
==============================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#EDF4FB;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}

/*==============================================================
    TECHNOLOGY HUB - JS SUPPORT
==============================================================*/

/*------------------------------------
    Initial Reveal State
------------------------------------*/

.technology{

    opacity:0;

    transform:translateY(80px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.technology.show{

    opacity:1;

    transform:translateY(0);

}

/*------------------------------------
    Technology Card Active State
------------------------------------*/

.tech-card{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.tech-card.active{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:
        0 20px 45px rgba(10,132,255,.18);

}

/*------------------------------------
    Center Hub
------------------------------------*/

.hub-center{

    position:relative;

    transition:transform .35s ease;

}

/*------------------------------------
    Hub Pulse Animation
------------------------------------*/

.hub-center.pulse{

    animation:hubPulse .8s ease;

}

@keyframes hubPulse{

    0%{

        transform:scale(1);

    }

    40%{

        transform:scale(1.12);

    }

    100%{

        transform:scale(1);

    }

}

/*------------------------------------
    Expanding Energy Ring
------------------------------------*/

.hub-center::after{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:50%;

    border:2px solid rgba(10,132,255,.25);

    opacity:0;

    pointer-events:none;

}

.hub-center.pulse::after{

    animation:energyRing .8s ease;

}

@keyframes energyRing{

    0%{

        transform:scale(.8);

        opacity:.8;

    }

    100%{

        transform:scale(1.8);

        opacity:0;

    }

}