/* =========================================
   AVIVA MULTIPLE — LUXURY EMERALD GOLD UI
   COMPLETE PREMIUM CSS THEME
========================================= */

/* =========================
   GOOGLE FONTS
========================= */
/*
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
*/

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

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

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

:root{

    /* COLORS */
    --gold:#D4A24C;
    --gold-light:#F1D08A;
    --gold-dark:#B8862B;

    --emerald:#062F2C;
    --emerald-dark:#021716;

    --dark:#0F1115;
    --dark-soft:#151922;

    --cream:#F7F3EA;

    --white-05:rgba(255,255,255,0.05);
    --white-04:rgba(255,255,255,0.04);
    --white-03:rgba(255,255,255,0.03);
    --white-02:rgba(255,255,255,0.02);

    --gold-border:rgba(212,162,76,0.16);

    /* GRADIENTS */
    --gradient-gold:
    linear-gradient(
    135deg,
    #D4A24C 0%,
    #F1D08A 50%,
    #B8862B 100%
    );

    --gradient-emerald:
    linear-gradient(
    135deg,
    #021716 0%,
    #062F2C 45%,
    #0F1115 100%
    );

    /* SHADOWS */
    --shadow-gold:
    0 10px 35px rgba(212,162,76,0.18);

    --shadow-gold-lg:
    0 20px 60px rgba(212,162,76,0.28);

    --shadow-dark:
    0 10px 40px rgba(0,0,0,0.45);

    /* GLASS */
    --glass:
    rgba(255,255,255,0.04);

    /* TRANSITIONS */
    --transition:
    all .3s ease;
}

/* =========================
   HTML + BODY
========================= */

html{
    scroll-behavior:smooth;
}

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

    background:
    linear-gradient(
    135deg,
    #021716 0%,
    #062F2C 45%,
    #0F1115 100%
    );

    color:#fff;

    min-height:100vh;

    overflow-x:hidden;

    line-height:1.7;
}

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

h1,h2,h3,h4,h5,h6,
.hero-title,
.section-title,
.card-title,
.header-title{
    font-family:'Cinzel',serif;
}

.gradient-text{
    background:
    linear-gradient(
    135deg,
    #F7F3EA 0%,
    #F1D08A 40%,
    #D4A24C 100%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

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

.container{
    position:relative;
    z-index:2;
}

/* =========================
   NAVBAR
========================= */

.navbar{
    background:
    rgba(6,47,44,0.88)!important;

    backdrop-filter:blur(18px);

    border-bottom:
    1px solid rgba(212,162,76,0.12);

    padding:1rem 0;

    transition:var(--transition);
}

.navbar-brand img{
    height:48px;
}

.navbar-nav .nav-link{
    color:#fff!important;

    margin:0 .6rem;

    position:relative;

    transition:var(--transition);
}

.navbar-nav .nav-link:hover{
    color:var(--gold-light)!important;
}

.navbar-nav .nav-link::after{
    content:'';

    position:absolute;

    bottom:-6px;
    left:0;

    width:0;
    height:2px;

    background:var(--gold);

    transition:var(--transition);
}

.navbar-nav .nav-link:hover::after{
    width:100%;
}

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

.btn-nav-signin,
.btn-nav-signup{
    padding:.7rem 1.5rem;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);

    text-decoration:none;

    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.btn-nav-signin{
    background:var(--white-04);

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

    color:#fff;
}

.btn-nav-signin:hover{
    background:rgba(212,162,76,0.08);

    color:#fff;

    transform:translateY(-2px);
}

.btn-nav-signup{
    background:var(--gradient-gold);

    border:none;

    color:#fff;

    box-shadow:var(--shadow-gold);
}

.btn-nav-signup:hover{
    transform:translateY(-3px);

    box-shadow:var(--shadow-gold-lg);

    color:#fff;
}

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

.hero-section{
    position:relative;

    min-height:100vh;

    overflow:hidden;

    background:var(--gradient-emerald);
}

.hero-overlay{
    position:absolute;

    inset:0;

    background:
    linear-gradient(
    135deg,
    rgba(2,23,22,0.88),
    rgba(6,47,44,0.82),
    rgba(15,17,21,0.9)
    );
}

.hero-title{
    font-size:4.5rem;

    line-height:1.1;

    margin-bottom:1.5rem;

    letter-spacing:1px;
}

.hero-subtitle{
    color:
    rgba(255,255,255,0.72);

    font-size:1.2rem;

    max-width:700px;
}

.hero-badge{
    display:inline-block;

    padding:.8rem 1.5rem;

    border-radius:50px;

    background:
    rgba(212,162,76,0.08);

    border:
    1px solid rgba(212,162,76,0.18);

    color:var(--gold-light);

    margin-bottom:1.5rem;
}

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

.btn-premium,
.btn-primary{
    background:var(--gradient-gold);

    border:none;

    color:#fff;

    border-radius:50px;

    padding:1rem 2rem;

    font-weight:600;

    transition:var(--transition);

    box-shadow:var(--shadow-gold);
}

.btn-premium:hover,
.btn-primary:hover{
    transform:translateY(-3px);

    box-shadow:var(--shadow-gold-lg);

    color:#fff;
}

.btn-outline-light{
    border:1px solid rgba(255,255,255,0.2);

    background:rgba(255,255,255,0.04);

    color:#fff;

    backdrop-filter:blur(10px);

    border-radius:50px;

    transition:var(--transition);
}

.btn-outline-light:hover{
    background:rgba(212,162,76,0.08);

    border-color:rgba(212,162,76,0.25);

    color:#fff;
}

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

section{
    padding:100px 0;

    position:relative;
}

.section-badge{
    display:inline-block;

    padding:.5rem 1.2rem;

    border-radius:50px;

    background:
    rgba(212,162,76,0.08);

    border:
    1px solid rgba(212,162,76,0.18);

    color:var(--gold-light);

    font-size:.85rem;

    font-weight:600;

    margin-bottom:1rem;
}

.section-title{
    font-size:3rem;

    color:var(--cream);

    margin-bottom:1rem;
}

.section-subtitle{
    color:
    rgba(255,255,255,0.65);

    max-width:700px;

    margin:auto;
}

.title-underline{
    width:100px;
    height:5px;

    background:var(--gradient-gold);

    border-radius:10px;

    margin:1.5rem auto 2rem;
}

/* =========================
   GLASS CARD SYSTEM
========================= */

.glass-card,
.about-card,
.product-card,
.process-card,
.feature-card,
.contact-card,
.contact-info-card,
.mission-card,
.summary-card{
    background:
    rgba(255,255,255,0.04);

    border:
    1px solid rgba(212,162,76,0.12);

    border-radius:24px;

    backdrop-filter:blur(18px);

    box-shadow:
    0 10px 35px rgba(0,0,0,0.35);

    transition:var(--transition);

    overflow:hidden;

    position:relative;
}

.glass-card::before,
.about-card::before,
.product-card::before,
.process-card::before,
.feature-card::before{
    content:'';

    position:absolute;

    inset:0;

    background:
    radial-gradient(
    circle,
    rgba(212,162,76,0.04),
    transparent
    );

    opacity:0;

    transition:var(--transition);
}

.glass-card:hover::before,
.about-card:hover::before,
.product-card:hover::before,
.process-card:hover::before,
.feature-card:hover::before{
    opacity:1;
}

.glass-card:hover,
.about-card:hover,
.product-card:hover,
.process-card:hover,
.feature-card:hover,
.summary-card:hover{
    transform:translateY(-8px);

    border-color:
    rgba(212,162,76,0.24);

    box-shadow:var(--shadow-gold);
}

/* =========================
   ICONS
========================= */

.card-icon,
.feature-icon,
.process-icon,
.summary-icon{
    background:var(--gradient-gold);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.icon-wrapper,
.summary-icon{
    width:70px;
    height:70px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:auto;

    border-radius:50%;

    background:var(--gradient-gold);

    box-shadow:
    0 0 25px rgba(212,162,76,0.25);
}

/* =========================
   PRODUCT CARDS
========================= */

.product-content{
    padding:2rem;
}

.product-content h4{
    color:#fff;

    margin-bottom:.8rem;
}

.product-price{
    background:var(--gradient-gold);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    font-size:1.8rem;

    font-weight:700;
}

/* =========================
   TABLES
========================= */

.table-container{
    overflow-x:auto;

    border-radius:20px;

    background:rgba(255,255,255,0.03);
}

table{
    width:100%;

    border-collapse:collapse;
}

table thead{
    background:
    rgba(212,162,76,0.08);
}

table th{
    color:var(--gold-light);

    padding:1rem;

    text-transform:uppercase;

    font-size:.75rem;

    letter-spacing:1px;
}

table td{
    padding:1rem;

    border-bottom:
    1px solid rgba(212,162,76,0.08);

    color:#ddd;
}

table tbody tr:hover{
    background:
    rgba(212,162,76,0.03);
}

/* =========================
   FORM CONTROLS
========================= */

.form-control,
.form-input,
.filter-input{
    width:100%;

    background:
    rgba(255,255,255,0.03);

    border:
    1px solid rgba(212,162,76,0.14);

    color:#fff;

    padding:1rem 1.2rem;

    border-radius:14px;

    transition:var(--transition);
}

.form-control:focus,
.form-input:focus,
.filter-input:focus{
    outline:none;

    border-color:var(--gold);

    background:
    rgba(255,255,255,0.05);

    box-shadow:
    0 0 0 4px rgba(212,162,76,0.12);
}

.form-label,
.filter-label{
    color:var(--gold-light);

    margin-bottom:.5rem;

    display:block;

    font-weight:600;
}

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

.level-badge,
.status-badge{
    display:inline-block;

    padding:.4rem .8rem;

    border-radius:10px;

    background:
    rgba(212,162,76,0.08);

    border:
    1px solid rgba(212,162,76,0.18);

    color:var(--gold-light);

    font-size:.75rem;

    font-weight:600;
}

/* =========================
   ALERTS
========================= */

.alert-success{
    background:
    rgba(34,197,94,0.12);

    border:
    1px solid rgba(34,197,94,0.2);

    color:#4ade80;

    border-radius:14px;

    padding:1rem;
}

.alert-error{
    background:
    rgba(239,68,68,0.12);

    border:
    1px solid rgba(239,68,68,0.2);

    color:#f87171;

    border-radius:14px;

    padding:1rem;
}

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

.footer-section{
    background:
    linear-gradient(
    180deg,
    #021716 0%,
    #0F1115 100%
    );

    border-top:
    1px solid rgba(212,162,76,0.12);

    padding:80px 0 30px;
}

.footer-links{
    list-style:none;
}

.footer-links li{
    margin-bottom:.7rem;
}

.footer-links a{
    color:
    rgba(255,255,255,0.7);

    text-decoration:none;

    transition:var(--transition);
}

.footer-links a:hover{
    color:var(--gold-light);
}

/* =========================
   SOCIAL ICONS
========================= */

.social-links{
    display:flex;
    gap:1rem;
}

.social-link{
    width:48px;
    height:48px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
    rgba(255,255,255,0.04);

    border:
    1px solid rgba(212,162,76,0.14);

    color:#fff;

    transition:var(--transition);
}

.social-link:hover{
    background:var(--gradient-gold);

    transform:translateY(-5px);

    box-shadow:var(--shadow-gold);
}

/* =========================
   PREMIUM BOTTOM NAVBAR
========================= */

.bottom-nav{
    position:fixed;

    bottom:12px;
    left:12px;

    width:calc(100% - 24px);

    display:flex;
    justify-content:space-around;
    align-items:center;

    padding:
    .9rem 0
    calc(.9rem + env(safe-area-inset-bottom));

    border-radius:24px;

    background:
    linear-gradient(
    180deg,
    rgba(6,47,44,0.96),
    rgba(15,17,21,0.98)
    );

    border:
    1px solid rgba(212,162,76,0.18);

    backdrop-filter:blur(20px);

    box-shadow:
    0 8px 35px rgba(0,0,0,0.45);

    z-index:999;
}

.nav-item{
    display:flex;
    flex-direction:column;
    align-items:center;

    gap:6px;

    padding:10px 14px;

    border-radius:16px;

    transition:var(--transition);
}

.nav-item.active{
    background:
    linear-gradient(
    135deg,
    rgba(212,162,76,0.16),
    rgba(212,162,76,0.06)
    );

    border:
    1px solid rgba(212,162,76,0.2);
}

.nav-icon{
    width:22px;
    height:22px;

    stroke:
    rgba(247,243,234,0.75);
}

.nav-item.active .nav-icon{
    stroke:#D4A24C;

    filter:
    drop-shadow(
    0 0 8px rgba(212,162,76,0.45)
    );
}

.nav-label{
    font-size:11px;

    color:
    rgba(255,255,255,0.65);
}

.nav-item.active .nav-label{
    color:#F1D08A;
}

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

@media(max-width:992px){

    .hero-title{
        font-size:3.5rem;
    }

    .section-title{
        font-size:2.4rem;
    }
}

@media(max-width:768px){

    .hero-title{
        font-size:2.5rem;
    }

    .section-title{
        font-size:2rem;
    }

    .glass-card,
    .about-card,
    .product-card{
        padding:1.5rem;
    }

    .bottom-nav{
        border-radius:20px;
    }
}

@media(max-width:576px){

    .hero-title{
        font-size:2rem;
    }

    .hero-subtitle{
        font-size:1rem;
    }

    .section-title{
        font-size:1.6rem;
    }

    .btn-premium,
    .btn-primary{
        width:100%;
    }
}