/*=========================================
  MMK MEDIA & GRAPHICS
  Premium Homepage CSS
=========================================*/

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

html{
    scroll-behavior:smooth;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    overflow-x:clip;
}

body{
    font-family:'Inter',sans-serif;
    background:#f3f6ff;
    color:var(--text);
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    overflow-x:clip;
    position:relative;
}

/*=========================
      ROOT COLORS
==========================*/

:root{
    /* ===== EDIT THESE TO RE-THEME THE WHOLE SITE ===== */
    --primary:#2467D8;
    --secondary:#3EA8F4;
    --orange:#F45A22;
    --orange-light:#ff884d;
    --bg:hsl(0, 0%, 100%);
    --card:red;
    --text:black;
    --muted:#474747;
    --black: Black;



    /* RGB companions (needed for rgba()/opacity overlays tied to the colors above) */
    --primary-rgb:47,95,179;
    --secondary-rgb:77,180,255;
    --orange-rgb:242,101,34;
    --bg-rgb:255,255,255;
    --text-rgb:255,255,255;

    /* dashboard colors */
        --bg-main-1: white;
    --bg-main-2: white;

    --card-1: white;
    --card-2: white;
    --border:#cacaca;
    --blue:#0055ff;
    --blue-bright:#63D9FF;
    --cyan:#22E5D0;
    --orange2:#F45A22;
    --orange-bright:#F45A22;
    --green:#34E19D;
    --text-white:black;
    --text-gray:#313131;
    --text-gray-dim:#5C6B7A;
}

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

.container{
    width:92%;
    max-width:1400px;
    margin:auto;
}

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

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    backdrop-filter:blur(20px);
    background:rgb(var(--bg-rgb));
    border-bottom:1px solid rgba(255,255,255,.05);
}

.header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:90px;
    gap:20px;
}

.logo img{
    height:58px;
    width:auto;
    max-width:44vw;
    object-fit:contain;
    font-size:0;
    color:transparent;
}

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

.navbar ul{
    display:flex;
    list-style:none;
    gap:45px;
}

.navbar a{
    color: black;
    text-decoration:none;
    font-size:15px;
    font-weight:500;
    transition:.35s;
}

.navbar a:hover{
    color:#3EA8F4;
}

/*=========================
      DROPDOWN (Company menu)
==========================*/

.navbar li.has-dropdown{
    position:relative;
}

.navbar .dropdown-toggle{
    display:flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
}

.navbar .dropdown-toggle svg{
    width:12px;
    height:12px;
    flex-shrink:0;
    transition:transform .25s ease;
}

.navbar .dropdown-menu{
    position:absolute;
    top:calc(100% + 16px);
    left:0;
    min-width:200px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 24px 46px -22px rgba(16,30,60,.28);
    padding:8px;
    list-style:none;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:.25s ease;
    z-index:60;
}

.navbar .dropdown-menu li{
    list-style:none;
}

.navbar .dropdown-menu a{
    display:block;
    padding:10px 12px;
    border-radius:8px;
    font-size:14px;
    font-weight:500;
    color:var(--text);
}

.navbar .dropdown-menu a:hover{
    background:rgba(var(--primary-rgb),.07);
    color:var(--primary);
}

.navbar li.has-dropdown.open .dropdown-menu,
.navbar li.has-dropdown.open > .dropdown-toggle svg{
    /* JS-driven state (mobile / click) */
}

.navbar li.has-dropdown.open .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.navbar li.has-dropdown.open > .dropdown-toggle svg{
    transform:rotate(180deg);
}

@media (hover:hover) and (pointer:fine){
    .navbar li.has-dropdown:hover .dropdown-menu{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }
    .navbar li.has-dropdown:hover > .dropdown-toggle svg{
        transform:rotate(180deg);
    }
}

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

.header-btn{
      background:var(--orange);
    color:white;
    text-decoration:none;
    padding:15px 28px;
    border-radius:50px;
    font-weight:700;
    white-space:nowrap;
    transition:.4s;
}

.header-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 40px rgba(242,101,34,.35);
}

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

/* IMAGE SIZE: hero-bg.png -> 1920x1000px (or min 1600x900), landscape.
   background-size:cover below fills the full-width hero on every screen
   without stretching — keep the important part of the image centered so
   it isn't cropped out on narrow/tall screens. */
.hero{
    position:relative;
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding:160px 0 90px;

    background:
          url('../images/hero-bg.png');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.hero-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:60px;
    align-items:center;
    width:100%;
    min-width:0;
}

.hero-content{
    min-width:0;
}

/*=========================
      TAG
==========================*/

.hero-tag{
    display:inline-block;
    padding:12px 22px;
    border-radius:50px;
    background:rgba(77,180,255,.12);
    border:1px solid rgba(77,180,255,.25);
    color:var(--secondary);
    font-size:13px;
    letter-spacing:2px;
    margin-bottom:28px;
}

/*=========================
      HEADING
==========================*/

.hero h1{
    font-size:clamp(25px, 4.6vw, 55px);
    line-height:1.1;
    font-weight:800;
    word-wrap:break-word;
}

.hero h1 span{
    display:block;
    color:var(--orange);
}

/*=========================
      DESCRIPTION
==========================*/

.hero p{
    margin-top:26px;
    color:var(--black);
    font-size:clamp(15px, 1.6vw, 15px);
    line-height:1.85;
    max-width:500px;
}

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

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-top:40px;
}

.btn-primary{
    position:relative;
    overflow:hidden;
    background:var(--orange);
    color:white;
    text-decoration:none;
    padding:17px 34px;
    border-radius:50px;
    font-weight:700;
    display:inline-block;
    transition:.35s;
}

.btn-primary:hover{
    transform:translateY(-5px);
    box-shadow:0 25px 45px rgba(242,101,34,.35);
}

.btn-primary::before{
    content:"";
    position:absolute;
    left:-120%;
    top:0;
    width:120%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    transition:.8s;
}

.btn-primary:hover::before{
    left:120%;
}

.btn-secondary{
    border:1px solid rgba(121, 121, 121, 0.15);
    color:black;
    text-decoration:none;
    padding:17px 34px;
    border-radius:50px;
    display:inline-block;
    transition:.35s;
}

.btn-secondary:hover{
    background:white;
    color:#111;
}

/*=========================
      FEATURE ICON-BOX ROW (mobile only — see responsive.css)
==========================*/

.hero-features{
    display:none; /* shown only on mobile, @media max-width:768px in responsive.css */
}

.feature-box{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

/* ICON SIZE NOTE: source icon files should be 1080x1080 square PNGs.
   object-fit:contain on the <img> means the whole icon always fits
   inside the circle and is never cut off, regardless of source size. */
.feature-icon-wrap img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

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

.hero-stats{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    margin-top:60px;
}

.stat-box{
    position: relative;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,.95) 0%,
        rgba(250,252,255,.90) 100%
    );
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 22px;
    padding: 24px 26px;
    min-width: 150px;
    flex: 1;
    overflow: hidden;

    box-shadow:
        0 8px 20px rgba(15,23,42,.05),
        0 20px 45px rgba(15,23,42,.06),
        inset 0 1px 0 rgba(255,255,255,.9);

    backdrop-filter: blur(20px);
    transition: all .45s cubic-bezier(.4,0,.2,1);
}

.stat-box::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(255,255,255,.45),
        transparent 45%
    );
    opacity:0;
    transition:.45s;
    pointer-events:none;
}

.stat-box:hover{
    transform:translateY(-8px);
    border-color:rgba(62,168,244,.35);

    box-shadow:
        0 15px 35px rgba(15,23,42,.08),
        0 35px 70px rgba(10,44,115,.14),
        0 0 0 1px rgba(62,168,244,.10),
        inset 0 1px 0 rgba(255,255,255,1);
}

.stat-box:hover::before{
    opacity:1;
}

.stat-box h2{
    color:#0A2C73;
    font-size:32px;
    font-weight:800;
    margin-bottom:8px;
}


.stat-box h2{
    font-size:30px;
    color:var(--black);
}

.stat-box span{
    display:block;
    margin-top:8px;
   color:#424243;
    font-size:14px;
}

/*=========================
   BACKGROUND GLOW
==========================*/

.blur{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    z-index:-1;
    pointer-events:none;
}

.blur-blue{
    width:450px;
    height:450px;
    background:var(--primary);
    top:-100px;
    right:-150px;
    opacity:.28;
}

.blur-orange{
    width:350px;
    height:350px;
    background:var(--orange);
    bottom:-120px;
    left:-120px;
    opacity:.22;
}

/*=========================================
      TRUST STATS BAR
=========================================*/

.stats-bar{
    position:relative;
    padding:10px 0 70px;
}

.stats-bar-inner{
    position:relative;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    background:#2467D8;
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border-radius:22px;
    padding:8px;
    overflow:hidden;
}

.stats-bar-inner::before{
    content:"";
    position:absolute;
    top:0; right:0;
    width:260px; height:100%;
    background:radial-gradient(ellipse at top right, rgba(242,101,34,.14), transparent 70%);
    pointer-events:none;
}

.stats-bar-item{
    position:relative;
    flex:1 1 0;
    min-width:180px;
    display:flex;
    align-items:center;
    gap:16px;
    padding:22px 24px;
}

.stats-bar-item:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0;
    top:18%;
    height:64%;
    width:1px;
    background:rgba(255,255,255,.08);
}

.stats-bar-icon{
    flex-shrink:0;
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:  white;
    background:radial-gradient(circle at 35% 30%, rgba(77,180,255,.28), rgba(47,95,179,.10));
    border:1px solid rgba(77,180,255,.25);
    box-shadow:0 0 18px rgba(77,180,255,.25);
}

.stats-bar-icon svg{
    width:21px;
    height:21px;
}

.stats-bar-text h3{
    font-size:22px;
    font-weight:800;
    color: white;
    line-height:1.1;
    white-space:nowrap;
}

.stats-bar-text span{
    display:block;
    margin-top:5px;
    color: white;
    font-size:12.5px;
    white-space:nowrap;
}



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

.solutions{
    position:relative;
    padding:20px 0 90px;
}

.solutions-grid{
    display:grid;
    grid-template-columns:0.78fr 1.22fr;
    gap:60px;
    align-items:center;
}

.solutions-content{
    min-width:0;
}

.solutions-tag{
    display:block;
    color:var(--primary);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:14px;
}

.solutions-content h2{
    font-size:clamp(26px, 2.6vw, 38px);
    font-weight:800;
    line-height:1.22;
    color:var(--text);
}

.solutions-content h2 span{
    color:var(--orange);
}

.solutions-content p{
    margin-top:18px;
    color:var(--muted);
    font-size:15px;
    line-height:1.8;
    max-width:420px;
}

.btn-outline{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:30px;
    padding:15px 26px;
    border:1px solid rgba(var(--secondary-rgb),.4);
    border-radius:50px;
    color:var(--text);
    font-weight:600;
    font-size:14.5px;
    text-decoration:none;
    transition:.35s;
}

.btn-outline svg{
    width:16px;
    height:16px;
    transition:transform .35s ease;
}

.btn-outline:hover{
    background:rgba(var(--secondary-rgb),.12);
    border-color:var(--secondary);
}

.btn-outline:hover svg{
    transform:translateX(4px);
}

.solutions-cards{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:16px;
}

.solution-card{
    display:block;
    min-width:0;
    text-decoration:none;
    background:rgba(255,255,255,.03);
    border:1.5px solid rgba(var(--secondary-rgb),.3);
    border-radius:18px;
    padding:22px 20px;
    transition:.3s ease;
    box-shadow:none;
}

.solution-card:hover{
    transform:translateY(-4px);
    border-color:rgba(var(--secondary-rgb),.55);
    background:rgba(255,255,255,.05);
    box-shadow:0 8px 24px -8px rgba(var(--secondary-rgb),.35);
}

.solution-icon{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    color:var(--secondary);
    background:radial-gradient(circle at 35% 30%, rgba(var(--secondary-rgb),.28), rgba(var(--primary-rgb),.10));
    border:1px solid rgba(var(--secondary-rgb),.25);
    box-shadow:0 0 16px rgba(var(--secondary-rgb),.2);
    margin-bottom:16px;
}

.solution-icon svg{
    width:20px;
    height:20px;
}

.solution-card h4{
    font-size:14.5px;
    font-weight:700;
    color:var(--text);
    margin-bottom:8px;
    line-height:1.4;
}

.solution-card h4 span{
    color:var(--orange);
}

.solution-card p{
    color:var(--muted);
    font-size:12.5px;
    line-height:1.65;
}

/*=========================================
      CASE STUDIES SECTION
=========================================*/

.case-studies{
    position:relative;
    padding:90px 0;
}

.case-studies-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    margin-bottom:40px;
}

.case-studies-tag{
    display:block;
    color:var(--primary);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:14px;
}

.case-studies-header h2{
    font-size:clamp(24px, 2.4vw, 34px);
    font-weight:800;
    color:var(--text);
}

.case-studies-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--secondary);
    font-weight:600;
    font-size:14px;
    text-decoration:none;
    white-space:nowrap;
    transition:.3s;
}

.case-studies-link svg{
    width:15px;
    height:15px;
    transition:transform .3s ease;
}

.case-studies-link:hover{
    color:var(--text);
}

.case-studies-link:hover svg{
    transform:translateX(4px);
}

.case-studies-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:22px;
}

.case-study-card{
    min-width:0;
    background:var(--card-1);
    border:1.5px solid rgba(var(--secondary-rgb),.28);
    border-radius:18px;
    overflow:hidden;
    transition:.3s ease;
}

.case-study-card:hover{
    transform:translateY(-4px);
    border-color:rgba(var(--secondary-rgb),.55);
    box-shadow:0 14px 32px -14px rgba(36,103,216,.3);
}

/* IMAGE SIZE: 500x190px (or bigger, same ~2.6:1 ratio) if you want a real
   project photo here instead of the icon. Add via:
   style="background-image:url('images/case-studies/xyz.jpg'); background-size:cover; background-position:center;"
   Fixed 190px height above means the photo always fills edge-to-edge on
   any screen width with no distortion or awkward cropping. */
.case-study-image{
    position:relative;
    height:190px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:1px solid rgba(255,255,255,.08);
    overflow:hidden;
}

.case-study-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
}

.case-study-image svg{
    width:64px;
    height:64px;
    opacity:.35;
    position:relative;
    z-index:1;
}

.case-study-image--blue{
    background:
        radial-gradient(circle at 75% 20%, rgba(var(--secondary-rgb),.35), transparent 60%),
        linear-gradient(160deg, #0b1c30, #06101c 70%);
}

.case-study-image--blue svg{ color:var(--secondary-bright, var(--secondary)); }

.case-study-image--orange{
    background:
        radial-gradient(circle at 75% 20%, rgba(var(--orange-rgb),.35), transparent 60%),
        linear-gradient(160deg, #2a1508, #150b06 70%);
}

.case-study-image--orange svg{ color:var(--orange-light); }

.case-study-badge{
    position:absolute;
    top:16px;
    left:16px;
    z-index:2;
    padding:6px 14px;
    border-radius:50px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
}

.case-study-badge--blue{
    background:rgba(var(--secondary-rgb),.18);
    color:var(--secondary);
    border:1px solid rgba(var(--secondary-rgb),.4);
}

.case-study-badge--orange{
    background:rgba(var(--orange-rgb),.18);
    color:var(--orange-light);
    border:1px solid rgba(var(--orange-rgb),.4);
}

.case-study-body{
    padding:22px 22px 24px;
}



.case-study-body h3{
    font-size:17px;
    font-weight:800;
    line-height:1.35;
    color:var(--text);
}

.case-study-sub{
    margin-top:8px;
    color:var(--muted);
    font-size:13px;
}

.case-study-metrics{
    display:flex;
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.08);
}

.case-study-metric{
    position:relative;
    flex:1;
    min-width:0;
}

.case-study-metric:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0;
    top:2px;
    height:calc(100% - 4px);
    width:1px;
    background:rgba(255,255,255,.08);
}

.case-study-metric strong{
    display:block;
    font-size:17px;
    font-weight:800;
    color:var(--text);
}

.case-study-metric span{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:11px;
    line-height:1.4;
    padding-right:8px;
}

.case-study-cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:20px;
    color:var(--orange-light);
    font-weight:600;
    font-size:13.5px;
    text-decoration:none;
    transition:.3s;
}

.case-study-cta svg{
    width:14px;
    height:14px;
    transition:transform .3s ease;
}

.case-study-cta:hover{
    color:var(--orange);
}

.case-study-cta:hover svg{
    transform:translateX(4px);
}

/* ---- mini stats row under the case study cards ---- */

.case-studies-stats{
    margin-top:26px;
}

.case-studies-stats-inner{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    background:#fff;
    border:1.5px solid rgba(var(--secondary-rgb),.25);
    border-radius:22px;
    padding:8px;
    box-shadow:0 14px 34px -18px rgba(36,103,216,.25);
}

.case-stats-item{
    position:relative;
    flex:1 1 0;
    min-width:170px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:20px 22px;
}

.case-stats-item:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0;
    top:18%;
    height:64%;
    width:1px;
    background:rgba(0,0,0,.08);
}

.case-stats-icon{
    flex-shrink:0;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:var(--secondary);
    background:radial-gradient(circle at 35% 30%, rgba(77,180,255,.28), rgba(47,95,179,.10));
    border:1px solid rgba(77,180,255,.25);
    box-shadow:0 0 18px rgba(77,180,255,.25);
}

.case-stats-icon svg{
    width:19px;
    height:19px;
}

.case-stats-text h3{
    font-size:20px;
    font-weight:800;
    color:var(--text);
    line-height:1.1;
    white-space:nowrap;
}

.case-stats-text span{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:12px;
    white-space:nowrap;
}

@media (max-width:1100px){
    .case-studies-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:640px){
    .case-studies-grid{ grid-template-columns:1fr; }
    .case-stats-item{ flex:1 1 45%; }
    .case-stats-item:not(:last-child)::after{ display:none; }
}

/*=========================================
      LATEST INSIGHTS SECTION
=========================================*/

.insights{
    position:relative;
    padding:20px 0 90px;
}

.insights-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    margin-bottom:40px;
}

.insights-tag{
    display:block;
    color:var(--primary);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:14px;
}

.insights-header h2{
    font-size:clamp(24px, 2.4vw, 34px);
    font-weight:800;
    color:var(--text);
}

.insights-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--secondary);
    font-weight:600;
    font-size:14px;
    text-decoration:none;
    white-space:nowrap;
    transition:.3s;
}

.insights-link svg{
    width:15px;
    height:15px;
    transition:transform .3s ease;
}

.insights-link:hover{ color:var(--text); }
.insights-link:hover svg{ transform:translateX(4px); }

.insights-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:22px;
}

.insight-card{
    min-width:0;
    background:var(--card-1);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    overflow:hidden;
    transition:.35s;
}

.insight-card:hover{
    transform:translateY(-6px);
    border-color:rgba(var(--secondary-rgb),.35);
    box-shadow:0 20px 45px -20px rgba(116, 115, 115, 0.6);
}

/* Thumbnail area: fixed aspect-ratio + object-fit-style icon centering so
   nothing is ever cropped oddly at any screen size. If real photos are
   used instead of the icon graphic, add them as <img class="insight-photo">
   inside .insight-image with the same aspect-ratio -- object-fit:cover
   will keep them filling the box without distortion. */
/* ============================================================
   IMAGE SIZE GUIDE — Insight/Blog card thumbnail (background)
   ------------------------------------------------------------
   Recommended size : 640 x 400px  (ratio 16:10)
   Format            : JPG/WebP, under 200KB
   How to add        : put the image file in images/blog/ then
                        set it as the card's background, e.g:
                        <div class="insight-image insight-image--blue"
                             style="background-image:url('images/blog/strategy.jpg')">
   Notes             : background-size:cover + background-position:center
                        below auto-fit the image with NO cropping issues
                        on any screen size — box height is fixed by the
                        16:10 aspect-ratio, so the photo never stretches
                        or gets awkwardly cut on resize.
   ============================================================ */
.insight-image{
    position:relative;
    aspect-ratio:16/10;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:1px solid rgba(255,255,255,.08);
    overflow:hidden;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.insight-image img.insight-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

.insight-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
}

.insight-image svg{
    width:56px;
    height:56px;
    opacity:.35;
    position:relative;
    z-index:1;
}

.insight-image--blue{
    background:
        radial-gradient(circle at 75% 20%, rgba(var(--secondary-rgb),.35), transparent 60%),
        linear-gradient(160deg, #0b1c30, #06101c 70%);
}

.insight-image--blue svg{ color:var(--secondary-bright, var(--secondary)); }

.insight-image--orange{
    background:
        radial-gradient(circle at 75% 20%, rgba(var(--orange-rgb),.35), transparent 60%),
        linear-gradient(160deg, #2a1508, #150b06 70%);
}

.insight-image--orange svg{ color:var(--orange-light); }

.insight-badge{
    position:absolute;
    top:16px;
    left:16px;
    z-index:2;
    padding:6px 14px;
    border-radius:50px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
}

.insight-badge--blue{
    background:rgba(var(--secondary-rgb),.18);
    color:var(--secondary);
    border:1px solid rgba(var(--secondary-rgb),.4);
}

.insight-badge--orange{
    background:rgba(var(--orange-rgb),.18);
    color:var(--orange-light);
    border:1px solid rgba(var(--orange-rgb),.4);
}

.insight-body {
    background-color: white;
    border: 1px solid #e6e6e6;
    border-radius: 0 0 18px 18px;
    padding: 20px 20px 22px;
}

.insight-body h3{
    font-size:16px;
    font-weight:800;
    line-height:1.4;
    color:var(--text);
    min-height:45px;
}

.insight-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:16px;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,.08);
}

.insight-meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--muted);
    font-size:12px;
}

.insight-meta svg{
    width:14px;
    height:14px;
    flex-shrink:0;
    color:var(--muted);
}

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

.process{
    position:relative;
    padding:20px 0 100px;
}

.process-header{
    text-align:center;
    margin-bottom:56px;
}

.process-tag{
    display:inline-block;
    color:var(--primary);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:2px;
}

.process-row{
    display:flex;
    align-items:stretch;
    gap:0;
}

.process-step{
    flex:1 1 0;
    min-width:0;
    background:var(--card-1);
    border:1px solid var(--border);
    border-radius:18px;
    padding:24px 20px 26px;
    transition:.35s;
}

.process-step:hover{
    transform:translateY(-6px);
    border-color:rgba(var(--primary-rgb),.35);
    box-shadow:0 20px 45px -20px rgba(var(--primary-rgb),.35);
}

.process-visual{
    position:relative;
    width:120px;
    height:120px;
    margin-bottom:22px;
}

.process-number{
    position:absolute;
    top:0;
    left:0;
    font-size:84px;
    font-weight:800;
    line-height:1;
    color:rgba(var(--secondary-rgb),.12);
    user-select:none;
}

.process-icon{
    position:absolute;
    right:0;
    bottom:0;
    width:84px;
    height:84px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

/* Icons are dropped in square — object-fit:contain guarantees the full
   image is always visible inside the badge, never cropped, no matter the
   source image's internal padding/shape. */
.process-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.process-step h4{
    color:var(--orange);
    font-size:17px;
    font-weight:700;
    margin-bottom:10px;
}

.process-step p{
    color:var(--muted);
    font-size:13px;
    line-height:1.7;
    max-width:230px;
}

.process-arrow{
    flex:0 0 auto;
    width:52px;
    margin-top:52px;
    padding:0 6px;
    color:rgba(255,255,255,.22);
}

.process-arrow svg{
    width:100%;
    height:auto;
}

/*=========================================
      CLIENT REVIEWS SECTION
=========================================*/

.reviews{
    position:relative;
    padding:90px 0 70px;
}

.reviews-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    margin-bottom:34px;
}

.reviews-tag{
    display:block;
    color:var(--primary);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:14px;
}

.reviews-header h2{
    font-size:clamp(24px, 2.4vw, 34px);
    font-weight:800;
    color:var(--text);
}

.reviews-nav{
    display:flex;
    gap:10px;
}

.reviews-nav button{
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid var(--border);
    background:#fff;
    color:var(--text);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.3s;
    flex-shrink:0;
}

.reviews-nav button svg{
    width:17px;
    height:17px;
}

.reviews-nav button:hover{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
}

.reviews-nav button:disabled{
    opacity:.35;
    cursor:default;
    pointer-events:none;
}

.reviews-track-wrap{
    overflow:hidden;
}

.reviews-track{
    display:flex;
    gap:18px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-bottom:2px;
}

.reviews-track::-webkit-scrollbar{
    display:none;
}

.review-card{
    scroll-snap-align:start;
    flex:0 0 calc(25% - 13.5px);
    min-width:240px;
    background:white;
    border:1px solid rgba(31, 31, 31, 0.14);
    border-radius:18px;
    padding:24px 22px;
    display:flex;
    flex-direction:column;
    transition:.3s ease;
}

.review-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px -22px rgba(16,30,60,.22);
    border-color:rgba(var(--secondary-rgb),.45);
}

.review-quote{
    color:var(--secondary);
    opacity:.6;
    margin-bottom:10px;
}

.review-quote svg{
    width:26px;
    height:26px;
}

.review-card p{
    color:var(--muted);
    font-size:13.5px;
    line-height:1.7;
    flex:1;
}

.review-stars{
    display:flex;
    gap:3px;
    margin:16px 0 14px;
}

.review-stars svg{
    width:14px;
    height:14px;
    color:var(--orange-light);
}

.review-person{
    display:flex;
    align-items:center;
    gap:12px;
    padding-top:14px;
    border-top:1px solid var(--border);
}

.review-avatar{
    width:38px;
    height:38px;
    border-radius:50%;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:700;
    color:#04101c;
    background:linear-gradient(135deg, var(--secondary), var(--blue-bright));
}

.review-person h5{
    font-size:13px;
    font-weight:700;
    color:var(--text);
}

.review-person span{
    display:block;
    margin-top:2px;
    font-size:11.5px;
    color:var(--muted);
}

.reviews-dots{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:28px;
}

.reviews-dots button{
    width:8px;
    height:8px;
    padding:0;
    border:none;
    border-radius:50px;
    background:var(--border);
    cursor:pointer;
    transition:.3s;
}

.reviews-dots button.active{
    width:24px;
    background:var(--orange);
}

/*=========================================
      INDUSTRIES WE SERVE SECTION
=========================================*/

.industries{
    padding:20px 0 90px;
}

.industries-tag{
    display:block;
    text-align:center;
    color:var(--primary);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:26px;
}

.industries-grid{
    display:grid;
    grid-template-columns:repeat(9, minmax(0,1fr));
    gap:14px;
}

.industry-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:12px;
    padding:22px 10px;
    background:white;
    border:1px  solid #cbcbcb7d;
    border-radius:16px;
    transition:.3s;
    text-decoration:none;
}

.industry-item:hover{
    transform:translateY(-4px);
    border-color:rgba(var(--secondary-rgb),.35);
    background:rgba(255,255,255,.05);
}

.industry-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    color:var(--secondary);
    background:radial-gradient(circle at 35% 30%, rgba(var(--secondary-rgb),.28), rgba(var(--primary-rgb),.10));
    border:1px solid rgba(var(--secondary-rgb),.25);
    box-shadow:0 0 16px rgba(var(--secondary-rgb),.2);
}

.industry-icon svg{
    width:20px;
    height:20px;
}

.industry-item span{
    font-size:11.5px;
    font-weight:600;
    color:var(--muted);
    line-height:1.3;
}

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

.cta{
    padding:0 0 100px;
}

/* IMAGE SIZE: to put a photo behind this CTA box -> 1600x600px (or wider,
   ~2.6:1 ratio) since the box is a short wide banner. Add it as the LAST
   item in the background list below (after the gradients, so the gradients
   stay on top as a dark overlay and the text stays readable), e.g:
   background: <existing gradients above>, url('../images/cta-bg.jpg');
   Keep background-size:cover + background-position:center (already set)
   -- this guarantees the image always fills the box on any screen size
   without stretching or getting awkwardly cut off. */
.cta-box{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:32px;
    padding:52px 48px;
    border-radius:26px;
    /* background:
        radial-gradient(circle at 12% 20%, rgba(var(--secondary-rgb),.16), transparent 55%),
        radial-gradient(circle at 88% 85%, rgba(var(--orange-rgb),.18), transparent 55%),
        linear-gradient(135deg, #060d16, #0a1420 60%, #12090a); */

    background-color: var(--primary);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    border:1px solid rgba(var(--orange-rgb),.3);
    box-shadow:0 0 60px -20px rgba(var(--orange-rgb),.25);
}

.cta-box::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 1px, transparent 1px 90px);
    opacity:.5;
    pointer-events:none;
}

.cta-content{
    position:relative;
    z-index:1;
    max-width:560px;
}

.cta-content h2{
    font-size:clamp(24px, 2.6vw, 34px);
    font-weight:800;
    color: white;
    margin-bottom:14px;
}

.cta-content p{
    color: white;
    font-size:14.5px;
    line-height:1.7;
    max-width:480px;
}

.cta-checklist{
    display:flex;
    flex-wrap:wrap;
    gap:22px;
    margin-top:22px;
}

.cta-checklist span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:white;
    font-weight:500;
}

.cta-checklist svg{
    width:16px;
    height:16px;
    color:white;
    flex-shrink:0;
}

.cta-action{
    position:relative;
    z-index:1;
    flex-shrink:0;
}

.cta-action .btn-primary{
    display:inline-flex;
    align-items:center;
    gap:10px;
}

.cta-action .btn-primary svg{
    width:16px;
    height:16px;
    transition:transform .3s ease;
}

.cta-action .btn-primary:hover svg{
    transform:translateX(4px);
}

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

.menu-toggle{
    display:none;
    width:48px;
    height:48px;
    padding:0;
    flex:0 0 48px;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(0,0,0,.03);
    cursor:pointer;
    position:relative;
    z-index:1002;
}

.menu-toggle span{
    position:absolute;
    left:50%;
    width:22px;
    height:2px;
    background:var(--text);
    border-radius:10px;
    transform:translateX(-50%);
    transition:top .35s ease, transform .35s ease, opacity .25s ease, background .35s ease;
}

.menu-toggle span:nth-child(1){ top:15px; }
.menu-toggle span:nth-child(2){ top:22px; }
.menu-toggle span:nth-child(3){ top:29px; }

.menu-toggle.active span:nth-child(1){ top:22px; transform:translateX(-50%) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity:0; }
.menu-toggle.active span:nth-child(3){ top:22px; transform:translateX(-50%) rotate(-45deg); }

.menu-toggle.active{
    border-color:rgba(242,101,34,.5);
    background:rgba(242,101,34,.12);
}

.nav-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(2px);
    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease, visibility .35s ease;
    /* Must stay BELOW .header's own z-index (999). .header creates its own
       stacking context (position:fixed + z-index), and .navbar lives inside
       that context — so no z-index on .navbar can ever lift it above this
       backdrop if the backdrop's z-index is >= header's. Going above 999
       here was exactly what made the open menu look "blurred" and made its
       links unclickable: the backdrop was literally sitting on top of it. */
    z-index:998;
}

.nav-backdrop.active{
    opacity:1;
    visibility:visible;
}

body.menu-open{
    overflow:hidden;
}

/* =====================================================
   BUSINESS GROWTH DASHBOARD (hero visual)
===================================================== */

.stage{
    width:100%;
    min-width:0;
    perspective:2000px;
}

.dashboard{
    position:relative;
    width:100%;
    min-width:0;
    aspect-ratio:1.15/1;
    background:
        radial-gradient(circle at 15% 10%, rgba(59,130,246,.06), transparent 40%),
        radial-gradient(circle at 85% 90%, rgba(255,122,46,.06), transparent 40%),
        linear-gradient(135deg, var(--bg-main-1) 0%, var(--bg-main-2) 100%);
    background-color:var(--bg-main-1);
    border-radius:20px;
    border:1px solid var(--border);
    padding:28px 30px;
    display:flex;
    flex-direction:column;
    gap:18px;
    overflow:hidden;
    transform:rotateX(4deg) rotateY(-6deg) rotateZ(.5deg);
    transform-style:preserve-3d;
    box-shadow:
        0 50px 100px -25px rgba(0,0,0,.85),
        0 0 90px -20px rgba(59,130,246,.35),
        0 0 90px -20px rgba(255,122,46,.28),
        inset 0 1px 0 rgba(255,255,255,.04);
    animation:floatTilt 7s ease-in-out infinite, pulseGlow 5s ease-in-out infinite;
}

.dashboard .grid-texture{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:34px 34px;
    -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 10%, transparent 72%);
    mask-image:radial-gradient(ellipse at 50% 40%, #000 10%, transparent 72%);
    pointer-events:none;
    z-index:0;
}

.edge-spin-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
    pointer-events:none;
    overflow:visible;
}

.dashboard::after{
    content:"";
    position:absolute;
    top:-40px; left:-40px;
    width:220px; height:220px;
    background:radial-gradient(circle, rgba(94,200,255,.30), transparent 70%);
    filter:blur(10px);
    pointer-events:none;
    z-index:0;
}

.glow-orange-corner{
    position:absolute;
    bottom:-40px; right:-40px;
    width:260px; height:260px;
    background:radial-gradient(circle, rgba(255,122,46,.30), transparent 70%);
    filter:blur(10px);
    pointer-events:none;
    z-index:0;
    border-radius:20px;
}

/* ---------- DASHBOARD HEADER ---------- */
.dash-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    z-index:2;
    opacity:0;
    animation:fadeUp .7s ease forwards;
    animation-delay:.05s;
}

.header-left{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.app-icon{
    width:26px; height:26px;
    flex-shrink:0;
    border-radius:7px;
    background:linear-gradient(135deg, var(--blue) 0%, var(--orange2) 100%);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2px;
    padding:4px;
}

.app-icon span{
    background:rgba(255,255,255,.85);
    border-radius:1.5px;
}

.header-title{
    font-size:14px;
    font-weight:600;
    color:var(--text-white);
    letter-spacing:.2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.header-right{
    display:flex;
    align-items:center;
    gap:6px;
    background:var(--card-2);
    border:1px solid var(--border);
    border-radius:8px;
    padding:6px 12px;
    font-size:11.5px;
    color:var(--text-gray);
    white-space:nowrap;
}

.header-right svg{ width:9px; height:9px; opacity:.7; }

.live-badge{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:10px;
    font-weight:600;
    letter-spacing:.6px;
    color:#34E19D;
    background:rgba(74,222,128,.08);
    border:1px solid rgba(74,222,128,.25);
    padding:5px 10px;
    border-radius:20px;
    margin-right:10px;
    white-space:nowrap;
}

.live-dot{
    width:6px; height:6px;
    border-radius:50%;
    background:#34E19D;
    box-shadow:0 0 6px #34E19D;
    animation:livePulse 1.6s ease-in-out infinite;
}

.header-right-group{ display:flex; align-items:center; }

/* ---------- METRIC ROW ---------- */
.metrics{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:14px;
    z-index:2;
}

.metric-card{
    position:relative;
    min-width:0;
    background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 40%), var(--card-1);
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px 16px;
    display:flex;
    flex-direction:column;
    gap:6px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 20px -14px rgba(0,0,0,.6);
    opacity:0;
    animation:fadeUp .7s ease forwards;
    transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.metric-card:nth-child(1){ animation-delay:.12s; }
.metric-card:nth-child(2){ animation-delay:.20s; }
.metric-card:nth-child(3){ animation-delay:.28s; }
.metric-card:nth-child(4){ animation-delay:.36s; }

.metric-card:hover{
    transform:translateY(-4px);
    border-color:#2A4258;
    box-shadow:0 10px 30px -10px rgba(94,200,255,.25);
}

.metric-label{
    font-size:10.5px;
    color:var(--text-gray-dim);
    font-weight:500;
    letter-spacing:.2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.metric-value{
    font-size:clamp(15px, 1.8vw, 21px);
    font-weight:700;
    color:var(--text-white);
    letter-spacing:-.3px;
    white-space:nowrap;
    background:linear-gradient(90deg, #fff 0%, #fff 45%, #cfe6ff 50%, #fff 55%, #fff 100%);
    background-size:250% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    animation:shimmer 3.5s linear infinite;
    animation-delay:1s;
}

.metric-change{
    font-size:10.5px;
    color:var(--green);
    display:flex;
    align-items:center;
    gap:4px;
    animation:blink 2.6s ease-in-out infinite;
}

.metric-sub{
    font-size:9.5px;
    color:var(--text-gray-dim);
}

.metric-change-row{
    display:flex;
    align-items:baseline;
    gap:6px;
}

/* ---------- SECOND ROW ---------- */
.second-row{
    display:grid;
    grid-template-columns:65fr 35fr;
    gap:14px;
    flex:1;
    z-index:2;
    min-height:0;
    min-width:0;
}

.panel{
    position:relative;
    min-width:0;
    background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 40%), var(--card-1);
    border:1px solid var(--border);
    border-radius:14px;
    padding:16px 18px;
    display:flex;
    flex-direction:column;
    min-height:0;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px -16px rgba(0,0,0,.65);
    opacity:0;
    animation:fadeUp .7s ease forwards;
}

.second-row .panel:nth-child(1){ animation-delay:.46s; }
.second-row .panel:nth-child(2){ animation-delay:.54s; }

.panel-title{
    font-size:12.5px;
    font-weight:600;
    color:var(--text-white);
    margin-bottom:8px;
}

.chart-area{
    position:relative;
    flex:1;
    min-height:0;
    min-width:0;
}

.chart-area svg{
    width:100%;
    height:100%;
    display:block;
}

.tooltip{
    position:absolute;
    top:8%;
    left:52%;
    transform:translateX(-50%);
    background:#0D1620;
    border:1px solid #24405A;
    border-radius:8px;
    padding:6px 12px;
    text-align:center;
    box-shadow:0 0 20px rgba(94,200,255,.25);
    opacity:0;
    animation:fillIn .6s ease forwards, tooltipFloat 3s ease-in-out infinite;
    animation-delay:1.6s, 2.2s;
}

.tooltip .tv{ font-size:14px; font-weight:700; color:#fff; }
.tooltip .tl{ font-size:9px; color:var(--text-gray); }

.x-axis{
    display:flex;
    justify-content:space-between;
    font-size:9px;
    color:var(--text-gray-dim);
    margin-top:4px;
    padding:0 2px;
}

/* donut panel */
.donut-wrap{
    position:relative;
    flex:1;
    min-height:128px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.donut-wrap svg{
    width:100%;
    max-width:110px;
    height:auto;
    aspect-ratio:1/1;
}

.donut-center{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    text-align:center;
    pointer-events:none;
}

.donut-center .dv{ font-size:19px; font-weight:700; color:#fff; }
.donut-center .dl{ font-size:9px; color:var(--text-gray-dim); }

.legend{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:8px;
}

.legend-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-size:10.5px;
    color:var(--text-gray);
}

.legend-left{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
}

.dot{ width:7px; height:7px; flex-shrink:0; border-radius:50%; }
.legend-item .val{ color:var(--text-white); font-weight:600; }

/* ---------- BOTTOM NAV ---------- */
.bottom-nav{
    display:flex;
    justify-content:space-between;
    z-index:2;
    padding-top:2px;
    opacity:0;
    animation:fadeUp .7s ease forwards;
    animation-delay:.65s;
}

.nav-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    flex:1;
    min-width:0;
}

.nav-icon{
    width:34px; height:34px;
    flex-shrink:0;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    background:var(--card-2);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.nav-icon svg{ width:16px; height:16px; }

.nav-item:hover .nav-icon{
    transform:translateY(-3px) scale(1.06);
    border-color:#2A4258;
    box-shadow:0 8px 20px -8px rgba(94,200,255,.35);
}

.nav-label{
    font-size:9.5px;
    color:var(--text-gray);
    font-weight:500;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
}

/* ---------- ANIMATIONS ---------- */
@keyframes fadeUp{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
}
@keyframes pulseGlow{
    0%,100%{ box-shadow:0 40px 80px -20px rgba(0,0,0,.8), 0 0 90px -20px rgba(59,130,246,.35), 0 0 90px -20px rgba(255,122,46,.28); }
    50%{ box-shadow:0 40px 80px -20px rgba(0,0,0,.8), 0 0 120px -15px rgba(59,130,246,.55), 0 0 120px -15px rgba(255,122,46,.48); }
}
@keyframes floatTilt{
    0%,100%{ transform:rotateX(4deg) rotateY(-6deg) rotateZ(.5deg) translateY(0); }
    50%{ transform:rotateX(3.2deg) rotateY(-5.2deg) rotateZ(.3deg) translateY(-6px); }
}
@keyframes dashDraw{ to{ stroke-dashoffset:0; } }
@keyframes fillIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes donutSpinIn{ from{ stroke-dashoffset:465; } }
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
@keyframes tooltipFloat{
    0%,100%{ transform:translateX(-50%) translateY(0); }
    50%{ transform:translateX(-50%) translateY(-4px); }
}
@keyframes shimmer{
    0%{ background-position:-200% 0; }
    100%{ background-position:200% 0; }
}
@keyframes livePulse{
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:.35; transform:scale(1.5); }
}

.chart-blue-path{
    stroke-dasharray:900;
    stroke-dashoffset:900;
    animation:dashDraw 1.8s ease forwards;
    animation-delay:.7s;
}
.chart-orange-path{
    stroke-dasharray:500;
    stroke-dashoffset:500;
    animation:dashDraw 1.4s ease forwards;
    animation-delay:2.3s;
}
.chart-fill{
    opacity:0;
    animation:fillIn 1s ease forwards;
    animation-delay:2s;
}
.pt{
    opacity:0;
    animation:fillIn .4s ease forwards;
}
.pt-glow{
    animation:ringPulse 2.2s ease-in-out infinite;
}
@keyframes ringPulse{
    0%,100%{ opacity:.55; transform:scale(1); }
    50%{ opacity:.15; transform:scale(1.15); }
}
.donut-ring{
    animation:donutSpinIn 1.6s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay:.6s;
}

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

.site-footer{
    position:relative;
    z-index:1;
    padding:70px 0 0;
    border-top:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg, transparent, rgba(255,255,255,.015));
}

.footer-top{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;
    gap:32px;
    padding-bottom:46px;
}

.footer-logo img{
    height:52px;
    width:auto;
    max-width:60vw;
    object-fit:contain;
    font-size:0;
    color:transparent;
    margin-bottom:16px;
}

.footer-about p{
    color:var(--black);
    font-size:13.5px;
    line-height:1.75;
    max-width:280px;
}

.footer-social{
    display:flex;
    gap:10px;
    margin-top:22px;
}

.footer-social a{
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color: white;
    border:1px solid rgba(255,255,255,.12);
    background:var(--primary);
    transition:.3s;
}

.footer-social a svg{
    width:16px;
    height:16px;
}

.footer-social a:hover{
    background:var(--secondary);
    border-color:var(--secondary);
    color:#06121c;
    transform:translateY(-3px);
}

.footer-links h4,
.footer-contact h4{
    color:var(--primary);
    font-size:13.5px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:20px;
}

.footer-links ul,
.footer-contact ul{
    list-style:none;
}

.footer-links li:not(:last-child){
    margin-bottom:13px;
}

.footer-links a{
    color:var(--black);
    font-size:13.5px;
    text-decoration:none;
    transition:.25s;
}

.footer-links a:hover{
    color:var(--black);
    padding-left:3px;
}

.footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--black);
    font-size:13.5px;
    line-height:1.5;
}

.footer-contact li:not(:last-child){
    margin-bottom:16px;
}

.footer-contact svg{
    width:17px;
    height:17px;
    flex-shrink:0;
    margin-top:1px;
    color:var(--orange-light);
}

.footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    padding:24px 0;
    border-top:1px solid rgba(255,255,255,.08);
}

.footer-bottom p{
    color:var(--muted);
    font-size:12.5px;
}

.footer-bottom-links{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--muted);
    font-size:12.5px;
}

.footer-bottom-links a{
    color:var(--muted);
    text-decoration:none;
    transition:.25s;
}

.footer-bottom-links a:hover{
    color:var(--text);
}

/*=========================================
      BACK TO TOP BUTTON
=========================================*/

.back-to-top{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:900;
    width:48px;
    height:48px;
    border-radius:50%;
    border:1px solid rgba(var(--orange-rgb),.4);
    background:rgba(var(--orange-rgb),.14);
    color:var(--orange-light);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    transition:opacity .3s ease, transform .3s ease, background .3s ease, visibility .3s ease;
    backdrop-filter:blur(10px);
}

.back-to-top.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.back-to-top:hover{
    background:var(--orange);
    color:#0a0a0a;
    border-color:var(--orange);
}

.back-to-top svg{
    width:20px;
    height:20px;
}














html,
body{
    margin:0;
    padding:0;
    min-height:100%;
}

body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

main{
    flex:1;
}

.site-footer{
    margin-top:auto;
    margin-bottom:0;
    padding-bottom:0;
}


.site-footer{
    min-height:auto !important;
}

.site-footer::after{
    display:none;
}

body{
    overflow-x:hidden;
}



.navbar li.has-dropdown.open .dropdown-menu{
    display: block;
}

.navbar .dropdown-menu{
    display: block;
}
/*=========================
      FLOATING WHATSAPP BUTTON
      (number shown depends on visitor's country — see script.js)
==========================*/

.wa-float-btn{
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
    z-index: 999;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

.wa-float-btn:hover{
    transform: scale(1.08);
    box-shadow: 0 14px 32px rgba(0,0,0,.3);
    color:#fff;
}

.wa-float-btn svg{
    width: 28px;
    height: 28px;
}

@media (max-width: 576px){
    .wa-float-btn{ right: 14px; bottom: 14px; width: 50px; height: 50px; }
    .wa-float-btn svg{ width: 24px; height: 24px; }
}