/*====================================================

Mawiz Business Suite
Premium SaaS Landing Page
Author: ChatGPT
Version: 1.0

=====================================================*/

/*==========================
        GOOGLE FONT
===========================*/

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

/*==========================
        ROOT VARIABLES
===========================*/

:root{

    /* Brand Colors */

    --primary:#0A2342;
    --primary-light:#163B6B;
    --secondary:#F4B400;
    --secondary-dark:#D89A00;

    --white:#ffffff;
    --light:#F8FAFC;
    --dark:#081420;
    --gray:#6B7280;

    --success:#22C55E;

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

    --glass-border:rgba(255,255,255,.18);

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

    --transition:.35s ease;

}

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

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:#fff;

    color:var(--dark);

    overflow-x:hidden;

    line-height:1.7;

}

img{

    max-width:100%;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#ececec;

}

::-webkit-scrollbar-thumb{

    background:var(--secondary);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--secondary-dark);

}

/*==========================
        COMMON
===========================*/

section{

    position:relative;

}

.container{

    max-width:1240px;

}

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

.btn{

    border-radius:50px;

    padding:14px 34px;

    font-weight:600;

    transition:var(--transition);

}

.btn-main{

    background:linear-gradient(
    135deg,
    var(--secondary),
    #FFD84D);

    color:var(--primary);

    border:none;

    box-shadow:
    0 15px 40px rgba(244,180,0,.35);

}

.btn-main:hover{

    transform:translateY(-4px);

    box-shadow:
    0 25px 60px rgba(244,180,0,.45);

    color:var(--primary);

}

.btn-outline-custom{

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

    color:#fff;

    backdrop-filter:blur(8px);

}

.btn-outline-custom:hover{

    background:#fff;

    color:var(--primary);

}

.btn-nav{

    background:var(--secondary);

    color:var(--primary);

    font-size:.95rem;

    padding:12px 26px;

    border:none;

}

.btn-nav:hover{

    background:#FFD84D;

    transform:translateY(-2px);

}

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

.custom-navbar{

    padding:20px 0;

    transition:.4s;

    z-index:9999;

}

.custom-navbar.scrolled{

    background:#fff;

    box-shadow:
    0 12px 30px rgba(0,0,0,.08);

    padding:12px 0;

}

.logo-text{

    color:#fff;

    font-size:1.7rem;

    font-weight:800;

}

.logo-highlight{

    color:var(--secondary);

    font-size:1.2rem;

    font-weight:600;

}

.custom-navbar.scrolled
.logo-text{

    color:var(--primary);

}

.navbar-nav .nav-link{

    color:#fff;

    margin-left:25px;

    font-weight:500;

    transition:var(--transition);

}

.navbar-nav .nav-link:hover{

    color:var(--secondary);

}

.custom-navbar.scrolled
.nav-link{

    color:var(--primary);

}

.navbar-toggler{

    color:#fff;

    font-size:1.4rem;

}

.custom-navbar.scrolled
.navbar-toggler{

    color:var(--primary);

}

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

.hero-section{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
    135deg,
    #081420,
    #0A2342,
    #123E75);

}

.hero-section .container{

    position:relative;

    z-index:5;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

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

    backdrop-filter:blur(15px);

    color:#fff;

    padding:10px 20px;

    border-radius:40px;

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

    margin-bottom:28px;

    font-size:.9rem;

}

.hero-badge i{

    color:var(--secondary);

}

.hero-title{

    color:#fff;

    font-size:4rem;

    font-weight:800;

    line-height:1.15;

    margin-bottom:25px;

}

.hero-title span{

    display:block;

    color:var(--secondary);

}

.hero-description{

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

    font-size:1.1rem;

    margin-bottom:40px;

    max-width:620px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:45px;

}

/*====================================================
    STEP 1B.2
    Hero Visual Effects & Glass Components
====================================================*/

/*==========================
    HERO BACKGROUND BLOBS
===========================*/

.gradient-circle{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    opacity:.45;
    animation:blobFloat 12s ease-in-out infinite;
    pointer-events:none;
}

.circle-one{
    width:420px;
    height:420px;
    background:#F4B400;
    top:-140px;
    left:-120px;
}

.circle-two{
    width:520px;
    height:520px;
    background:#2A7FFF;
    right:-180px;
    top:120px;
    animation-delay:3s;
}

.circle-three{
    width:350px;
    height:350px;
    background:#00C2FF;
    bottom:-120px;
    left:40%;
    animation-delay:6s;
}

/*==========================
    HERO IMAGE AREA
===========================*/

.hero-image-area{

    position:relative;

    min-height:650px;

    display:flex;

    align-items:center;

    justify-content:center;

}

/*==========================
    MAIN GLASS CARD
===========================*/

.glass-card{

    width:420px;

    padding:45px;

    border-radius:28px;

    backdrop-filter:blur(18px);

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

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

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

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

    color:#fff;

    position:relative;

    overflow:hidden;

}

.glass-card::before{

    content:"";

    position:absolute;

    top:-40%;

    left:-20%;

    width:180px;

    height:180px;

    border-radius:50%;

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

}

.glass-card::after{

    content:"";

    position:absolute;

    bottom:-60px;

    right:-60px;

    width:160px;

    height:160px;

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

    border-radius:50%;

}

.main-card{

    animation:floatCard 6s ease-in-out infinite;

}

.glass-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

    font-size:2rem;

    background:linear-gradient(
        135deg,
        var(--secondary),
        #FFD84D
    );

    color:var(--primary);

    box-shadow:0 15px 40px rgba(244,180,0,.35);

}

.glass-card h4{

    font-size:1.8rem;

    font-weight:700;

    margin-bottom:12px;

}

.glass-card p{

    color:rgba(255,255,255,.8);

    margin-bottom:25px;

}

.glass-card hr{

    border-color:rgba(255,255,255,.15);

    margin:25px 0;

}

/*==========================
    MINI STATS
===========================*/

.mini-stats{

    display:flex;

    justify-content:space-between;

}

.mini-stats h3{

    color:var(--secondary);

    font-size:2rem;

    font-weight:700;

    margin-bottom:5px;

}

.mini-stats span{

    font-size:.9rem;

    color:rgba(255,255,255,.7);

}

/*==========================
    FLOATING FEATURE CARDS
===========================*/

.floating-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 22px;

    border-radius:18px;

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

    backdrop-filter:blur(16px);

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

    color:#fff;

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

    transition:var(--transition);

}

.floating-card:hover{

    transform:translateY(-8px) scale(1.03);

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

}

.floating-card i{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--secondary),
        #FFD84D
    );

    color:var(--primary);

    font-size:1.25rem;

}

.floating-card strong{

    display:block;

    font-size:1rem;

}

.floating-card small{

    color:rgba(255,255,255,.75);

}

.floating-one{

    top:60px;

    right:-20px;

    animation:floatOne 7s ease-in-out infinite;

}

.floating-two{

    left:-20px;

    bottom:100px;

    animation:floatTwo 8s ease-in-out infinite;

}

.floating-three{

    right:40px;

    bottom:-10px;

    animation:floatThree 6s ease-in-out infinite;

}

/*==========================
    TRUST BADGES
===========================*/

.trust-badges{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}

.trust-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:40px;

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

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

    color:#fff;

    font-size:.92rem;

    transition:var(--transition);

}

.trust-item:hover{

    transform:translateY(-3px);

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

}

.trust-item i{

    color:var(--secondary);

}

/*==========================
    PREMIUM SHADOWS
===========================*/

.glass-card,
.floating-card{

    transition:all .35s ease;

}

.glass-card:hover{

    transform:translateY(-8px);

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

}

/*==========================
    KEYFRAME ANIMATIONS
===========================*/

@keyframes blobFloat{

    0%{
        transform:translate(0,0) scale(1);
    }

    25%{
        transform:translate(30px,-20px) scale(1.08);
    }

    50%{
        transform:translate(-20px,30px) scale(.95);
    }

    75%{
        transform:translate(25px,20px) scale(1.04);
    }

    100%{
        transform:translate(0,0) scale(1);
    }

}

@keyframes floatCard{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-18px);
    }

    100%{
        transform:translateY(0);
    }

}

@keyframes floatOne{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-18px);
    }

}

@keyframes floatTwo{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(15px);
    }

}

@keyframes floatThree{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-14px);
    }

}

/*====================================================
    STEP 1B.3
    Responsive Design & Final Polish
====================================================*/

/*==========================
    ACCESSIBILITY
===========================*/

:focus-visible {
    outline: 3px solid var(--secondary);
    outline-offset: 4px;
    border-radius: 6px;
}

::selection {
    background: var(--secondary);
    color: var(--primary);
}

/*==========================
    PERFORMANCE
===========================*/

.gradient-circle,
.glass-card,
.floating-card,
.btn,
.navbar,
.hero-section {
    will-change: transform;
}

.glass-card,
.floating-card {
    backface-visibility: hidden;
    transform: translateZ(0);
}

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

.py-section {
    padding: 100px 0;
}

.mt-100 {
    margin-top: 100px;
}

.mb-100 {
    margin-bottom: 100px;
}

/*==========================
    LARGE DESKTOP
===========================*/

@media (min-width:1400px){

.hero-title{

    font-size:4.8rem;

}

.hero-description{

    font-size:1.2rem;

}

.hero-image-area{

    min-height:700px;

}

}

/*==========================
    LAPTOP
===========================*/

@media (max-width:1200px){

.hero-title{

    font-size:3.5rem;

}

.glass-card{

    width:360px;

    padding:35px;

}

.floating-card{

    transform:scale(.9);

}

}

/*==========================
    TABLET
===========================*/

@media (max-width:991px){

.custom-navbar{

    background:rgba(8,20,32,.95);

    backdrop-filter:blur(16px);

    padding:15px 0;

}

.navbar-collapse{

    margin-top:20px;

    padding:20px;

    border-radius:20px;

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

}

.navbar-nav .nav-link{

    margin:10px 0;

}

.btn-nav{

    width:100%;

    margin-top:15px;

}

.hero-section{

    text-align:center;

    padding:150px 0 80px;

}

.hero-title{

    font-size:3rem;

}

.hero-description{

    margin-left:auto;

    margin-right:auto;

}

.hero-buttons{

    justify-content:center;

}

.trust-badges{

    justify-content:center;

}

.hero-image-area{

    margin-top:70px;

    min-height:550px;

}

.main-card{

    width:100%;

    max-width:420px;

}

.floating-one{

    top:20px;

    right:20px;

}

.floating-two{

    left:20px;

}

.floating-three{

    right:20px;

    bottom:-20px;

}

}

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

@media (max-width:768px){

.hero-section{

    min-height:auto;

}

.hero-title{

    font-size:2.4rem;

    line-height:1.25;

}

.hero-description{

    font-size:1rem;

}

.hero-buttons{

    flex-direction:column;

}

.hero-buttons .btn{

    width:100%;

}

.hero-badge{

    font-size:.82rem;

}

.trust-badges{

    gap:10px;

}

.trust-item{

    font-size:.8rem;

}

.glass-card{

    width:100%;

    padding:30px;

}

.glass-icon{

    width:65px;

    height:65px;

    font-size:1.5rem;

}

.mini-stats{

    gap:20px;

}

.floating-card{

    position:relative;

    left:auto;

    right:auto;

    top:auto;

    bottom:auto;

    margin-top:20px;

    width:100%;

    animation:none;

}

.hero-image-area{

    display:flex;

    flex-direction:column;

    gap:20px;

    min-height:auto;

}

.gradient-circle{

    opacity:.25;

}

}

/*==========================
    SMALL PHONES
===========================*/

@media (max-width:576px){

.logo-text{

    font-size:1.45rem;

}

.logo-highlight{

    display:block;

    font-size:.95rem;

}

.hero-title{

    font-size:2rem;

}

.hero-description{

    font-size:.95rem;

}

.btn{

    padding:14px 24px;

}

.hero-section{

    padding-top:130px;

}

.glass-card{

    border-radius:22px;

}

.mini-stats{

    flex-direction:column;

}

}

/*==========================
    EXTRA SMALL
===========================*/

@media (max-width:400px){

.hero-title{

    font-size:1.75rem;

}

.hero-badge{

    padding:8px 15px;

}

.trust-item{

    width:100%;

    justify-content:center;

}

}

/*==========================
    REDUCE MOTION
===========================*/

@media (prefers-reduced-motion: reduce){

*{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}

/*==========================
    FINAL POLISH
===========================*/

.btn,
.nav-link,
.glass-card,
.floating-card,
.trust-item{

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

}

.hero-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top right,
    rgba(244,180,0,.12),
    transparent 35%),

    radial-gradient(circle at bottom left,
    rgba(42,127,255,.10),
    transparent 30%);

    pointer-events:none;

}

.hero-section::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(
        rgba(255,255,255,.02) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.02) 1px,
        transparent 1px
    );

    background-size:60px 60px;

    opacity:.35;

    pointer-events:none;

}

/*=========================================
SCROLL TO TOP BUTTON
=========================================*/

.scroll-top-btn{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#F4B400;

color:#0A2342;

font-size:18px;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

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

opacity:0;

visibility:hidden;

transform:translateY(30px);

transition:.35s;

z-index:999;

}

.scroll-top-btn.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.scroll-top-btn:hover{

transform:translateY(-5px);

}