/*==================================================
            PREMIUM DOCUMENTATION CSS
                PART 1A-1
     Root Variables • Reset • Base Styles
==================================================*/

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

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

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

:root{

    /* Primary */

    --primary:#6366f1;
    --primary-light:#818cf8;
    --primary-dark:#4338ca;

    /* Accent */

    --secondary:#06b6d4;
    --accent:#8b5cf6;
    --success:#10b981;
    --warning:#f59e0b;
    --danger:#ef4444;

    /* Background */

    --bg:#050816;
    --bg-2:#0b1120;
    --bg-3:#111827;
    --bg-card:rgba(255,255,255,.05);

    /* Text */

    --text:#ffffff;
    --text-light:#d1d5db;
    --text-muted:#94a3b8;

    /* Borders */

    --border:rgba(255,255,255,.08);
    --border-light:rgba(255,255,255,.15);

    /* Shadows */

    --shadow-sm:
    0 8px 24px rgba(0,0,0,.15);

    --shadow-md:
    0 20px 50px rgba(0,0,0,.25);

    --shadow-lg:
    0 30px 70px rgba(0,0,0,.45);

    --shadow-glow:
    0 0 40px rgba(99,102,241,.35);

    /* Radius */

    --radius-xs:8px;
    --radius-sm:12px;
    --radius:18px;
    --radius-lg:28px;
    --radius-xl:40px;

    /* Transition */

    --transition:.35s cubic-bezier(.4,0,.2,1);

    /* Width */

    --container:1320px;

}

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

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

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

}

html{

    scroll-behavior:smooth;

    font-size:16px;

}

body{

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

    color:var(--text);

    background:var(--bg);

    overflow-x:hidden;

    line-height:1.7;

    position:relative;

    min-height:100vh;

}

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

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle at top left,
    rgba(99,102,241,.28),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(6,182,212,.20),
    transparent 30%),

    radial-gradient(circle at center,
    rgba(139,92,246,.12),
    transparent 40%),

    linear-gradient(
    135deg,
    #050816 0%,
    #08101f 45%,
    #0f172a 100%);

    z-index:-3;

}

body::after{

    content:"";

    position:fixed;

    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:45px 45px;

    opacity:.25;

    z-index:-2;

}

/*==============================
        SELECTION
==============================*/

::selection{

    background:var(--primary);

    color:#fff;

}

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

::-webkit-scrollbar{

    width:11px;

}

::-webkit-scrollbar-track{

    background:#0a1020;

}

::-webkit-scrollbar-thumb{

    border-radius:50px;

    background:
    linear-gradient(
    180deg,
    var(--primary),
    var(--secondary));

}

::-webkit-scrollbar-thumb:hover{

    background:
    linear-gradient(
    180deg,
    var(--secondary),
    var(--accent));

}

/*==============================
        IMAGES
==============================*/

img{

    display:block;

    max-width:100%;

}

/*==============================
        LINKS
==============================*/

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

/*==============================
        LISTS
==============================*/

ul{

    list-style:none;

}

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

button{

    font:inherit;

    border:none;

    outline:none;

    background:none;

    cursor:pointer;

}

/*==============================
        INPUTS
==============================*/

input,
textarea,
select{

    font:inherit;

    outline:none;

    border:none;

}

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

.container{

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

    margin-inline:auto;

}

/*==============================
        SECTIONS
==============================*/

section{

    padding:110px 0;

    position:relative;

}

/*==============================
        COMMON GLASS PANEL
==============================*/

.glass{

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

    backdrop-filter:blur(20px);

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

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

    border-radius:var(--radius);

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

}

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

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes pulseGlow{

    0%{

        box-shadow:
        0 0 0 rgba(99,102,241,.15);

    }

    50%{

        box-shadow:
        0 0 40px rgba(99,102,241,.45);

    }

    100%{

        box-shadow:
        0 0 0 rgba(99,102,241,.15);

    }

}

@keyframes rotateGradient{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}
/*==================================================
            PREMIUM DOCUMENTATION CSS
                  PART 1A-2
    Typography • Utilities • Section Titles
       Reusable Components • Global Styles
==================================================*/

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

h1,
h2,
h3,
h4,
h5,
h6{

    font-weight:700;
    color:var(--text);
    line-height:1.15;
    letter-spacing:-0.02em;
    margin-bottom:1rem;

}

h1{

    font-size:clamp(3rem,7vw,5.4rem);
    font-weight:800;

}

h2{

    font-size:clamp(2.1rem,5vw,3.4rem);

}

h3{

    font-size:1.55rem;

}

h4{

    font-size:1.2rem;

}

p{

    color:var(--text-light);
    font-size:1rem;
    line-height:1.9;

}

small{

    color:var(--text-muted);

}

strong{

    color:#fff;
    font-weight:700;

}

/*==============================
    GRADIENT TEXT
==============================*/

.gradient-text{

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary),
    var(--accent));

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

}

/*==============================
    COMMON SECTION TITLE
==============================*/

.section-title{

    max-width:850px;

    margin:0 auto 4.5rem;

    text-align:center;

    position:relative;

}

.section-title span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.7rem 1.4rem;

    margin-bottom:1.3rem;

    font-size:.88rem;

    font-weight:600;

    border-radius:100px;

    color:#fff;

    background:
    linear-gradient(
    135deg,
    rgba(99,102,241,.18),
    rgba(6,182,212,.18));

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

    backdrop-filter:blur(15px);

    letter-spacing:.06em;

    text-transform:uppercase;

}

.section-title h2{

    margin-bottom:1.2rem;

}

.section-title h2 span{

    padding:0;

    background:none;

    border:none;

    color:inherit;

    display:inline;

}

.section-title p{

    max-width:720px;

    margin:auto;

    color:var(--text-muted);

}

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

.card{

    position:relative;

    overflow:hidden;

    background:var(--bg-card);

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

    backdrop-filter:blur(18px);

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

    border-radius:var(--radius);

    transition:var(--transition);

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

}

.card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    140deg,
    rgba(255,255,255,.08),
    transparent 45%);

    opacity:0;

    transition:.45s;

}

.card:hover{

    transform:translateY(-12px);

    border-color:rgba(99,102,241,.35);

    box-shadow:

    0 25px 70px rgba(0,0,0,.45),
    0 0 40px rgba(99,102,241,.20);

}

.card:hover::before{

    opacity:1;

}

/*==============================
      PREMIUM ICON BOX
==============================*/

.card-icon,
.feature-icon,
.doc-icon,
.hero-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    margin-bottom:1.5rem;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#fff;

    font-size:1.8rem;

    box-shadow:

    0 15px 35px
    rgba(99,102,241,.35);

    transition:var(--transition);

}

.card:hover .card-icon,
.card:hover .feature-icon,
.card:hover .doc-icon{

    transform:

    rotate(-8deg)
    scale(1.08);

}

/*==============================
      PREMIUM LINKS
==============================*/

a{

    position:relative;

}

a:not(.primary-btn):not(.secondary-btn)::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:

    linear-gradient(
    90deg,
    var(--primary),
    var(--secondary));

    transition:.35s;

}

a:not(.primary-btn):not(.secondary-btn):hover::after{

    width:100%;

}

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

.stats-grid,
.features-grid,
.highlight-grid,
.documentation-grid,
.overview-grid{

    display:grid;

    gap:2rem;

}

.stats-grid{

    grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

}

.features-grid{

    grid-template-columns:
    repeat(auto-fit,minmax(310px,1fr));

}

.highlight-grid{

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

}

.documentation-grid{

    grid-template-columns:
    repeat(auto-fit,minmax(290px,1fr));

}

.overview-grid{

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

}

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

table{

    width:100%;

    border-collapse:collapse;

}

th{

    background:

    linear-gradient(
    135deg,
    rgba(99,102,241,.25),
    rgba(6,182,212,.20));

    color:#fff;

    font-weight:600;

}

th,
td{

    padding:1.1rem;

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

}

tbody tr{

    transition:.35s;

}

tbody tr:hover{

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

}

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

.doc-list li{

    display:flex;

    align-items:flex-start;

    gap:.8rem;

    margin-bottom:1rem;

    color:var(--text-light);

}

.doc-list li::before{

    content:"✓";

    width:28px;

    height:28px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:

    linear-gradient(
    135deg,
    var(--success),
    var(--secondary));

    color:#fff;

    font-size:.8rem;

    flex-shrink:0;

}

/*==============================
        CODE BLOCK
==============================*/

pre{

    padding:2rem;

    overflow:auto;

    border-radius:22px;

    background:

    linear-gradient(
    145deg,
    #0d1629,
    #111b31);

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

    color:#b6d8ff;

    font-size:.95rem;

    line-height:2;

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

}

/*==============================
      HORIZONTAL DIVIDER
==============================*/

.divider{

    width:100%;

    height:1px;

    margin:5rem 0;

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.12),
    transparent);

}

/*==============================
      FOCUS STATES
==============================*/

a:focus-visible,
button:focus-visible{

    outline:3px solid
    rgba(99,102,241,.55);

    outline-offset:5px;

    border-radius:8px;

}

/*==============================
        TEXT HELPERS
==============================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.mt-2{margin-top:2rem;}
.mt-3{margin-top:3rem;}
.mt-4{margin-top:4rem;}
.mb-2{margin-bottom:2rem;}
.mb-3{margin-bottom:3rem;}
.mb-4{margin-bottom:4rem;}

/*==============================
     PREMIUM HOVER EFFECT
==============================*/

.hover-glow{

    transition:var(--transition);

}

.hover-glow:hover{

    box-shadow:

    0 20px 60px rgba(99,102,241,.35),
    0 0 35px rgba(6,182,212,.25);

    transform:translateY(-8px);

}

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

.fade-up{

    animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}
/*==================================================
        PREMIUM DOCUMENTATION CSS
                PART 1B-1
        Ultra Premium Header & Navbar Layout
====================================================*/

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

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    padding:1rem 0;

    transition:all .45s cubic-bezier(.4,0,.2,1);

}

/*=========================================
        PREMIUM GLASS BACKGROUND
=========================================*/

.header::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    rgba(8,12,24,.45);

    backdrop-filter:blur(22px);

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

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

    z-index:-2;

}

/*=========================================
        TOP GLOW
=========================================*/

.header::after{

    content:"";

    position:absolute;

    left:50%;
    top:100%;

    transform:translateX(-50%);

    width:92%;

    height:1px;

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(99,102,241,.7),
    rgba(6,182,212,.7),
    transparent);

    opacity:.7;

}

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

.header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:3rem;

    position:relative;

}

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

.logo{

    display:flex;

    align-items:center;

    gap:1rem;

    font-size:1.25rem;

    font-weight:700;

    color:#fff;

    position:relative;

    z-index:5;

}

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

.logo i{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    font-size:1.35rem;

    color:#fff;

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:

    0 10px 30px rgba(99,102,241,.35),
    0 0 0 1px rgba(255,255,255,.08);

    transition:all .45s ease;

}

/*=========================================
        ICON SHINE
=========================================*/

.logo i::before{

    content:"";

    position:absolute;

    top:-120%;
    left:-60%;

    width:70%;

    height:320%;

    transform:rotate(25deg);

    background:

    rgba(255,255,255,.35);

    transition:.8s;

}

/*=========================================
        ICON HOVER
=========================================*/

.logo:hover i{

    transform:

    translateY(-4px)
    rotate(-8deg)
    scale(1.06);

    box-shadow:

    0 18px 40px rgba(99,102,241,.45),
    0 0 50px rgba(6,182,212,.25);

}

.logo:hover i::before{

    left:180%;

}

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

.logo span{

    font-size:1.2rem;

    font-weight:700;

    letter-spacing:.4px;

    background:

    linear-gradient(
    90deg,
    #ffffff,
    #dbeafe,
    #93c5fd);

    -webkit-background-clip:text;

    color:transparent;

}

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

.navbar{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    flex:1;

}

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

.nav-links{

    display:flex;

    align-items:center;

    gap:.7rem;

    padding:.55rem;

    border-radius:100px;

    background:

    rgba(255,255,255,.04);

    border:

    1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(15px);

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

    box-shadow:

    0 10px 35px rgba(0,0,0,.18);

}

/*=========================================
        NAV ITEM
=========================================*/

.nav-links li{

    position:relative;

}

/*=========================================
        FLOATING BACKDROP
=========================================*/

.nav-links::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:100px;

    background:

    linear-gradient(
    135deg,
    rgba(255,255,255,.04),
    rgba(255,255,255,.01));

    pointer-events:none;

}

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

.header .container::before{

    content:"";

    position:absolute;

    left:-120px;
    top:-70px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:

    radial-gradient(
    rgba(99,102,241,.18),
    transparent 70%);

    filter:blur(35px);

    z-index:-3;

}

.header .container::after{

    content:"";

    position:absolute;

    right:-80px;
    top:-90px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:

    radial-gradient(
    rgba(6,182,212,.16),
    transparent 70%);

    filter:blur(35px);

    z-index:-3;

}

/*=========================================
        PREMIUM SHADOW
=========================================*/

.header{

    box-shadow:

    0 12px 40px rgba(0,0,0,.12);

}

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

.header,
.logo,
.logo i,
.logo span,
.navbar,
.nav-links{

    transition:

    all .4s cubic-bezier(.4,0,.2,1);

}

/*=========================================
        DESKTOP SPACING
=========================================*/

@media (min-width:1200px){

    .header{

        padding:1.2rem 0;

    }

    .logo{

        font-size:1.3rem;

    }

    .nav-links{

        gap:.8rem;

        padding:.6rem;

    }

}
/*==================================================
        PREMIUM DOCUMENTATION CSS
                PART 1B-2
   Nav Links • Active State • Hover Effects
   Sticky Header • Responsive Navigation
====================================================*/

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

.nav-links a{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:.9rem 1.45rem;

    border-radius:999px;

    font-size:.96rem;

    font-weight:600;

    color:var(--text-light);

    letter-spacing:.02em;

    overflow:hidden;

    transition:all .35s cubic-bezier(.4,0,.2,1);

    z-index:1;

}

/* Remove global underline */

.nav-links a::after{

    display:none;

}

/*=========================================
        BACKGROUND LAYER
=========================================*/

.nav-links a::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

    linear-gradient(
    135deg,
    rgba(99,102,241,.15),
    rgba(6,182,212,.15));

    opacity:0;

    transform:scale(.85);

    transition:all .35s ease;

    z-index:-1;

}

/*=========================================
        HOVER
=========================================*/

.nav-links a:hover{

    color:#fff;

    transform:translateY(-2px);

}

.nav-links a:hover::before{

    opacity:1;

    transform:scale(1);

}

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

.nav-links a.active{

    color:#fff;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:

    0 12px 30px rgba(99,102,241,.35);

}

/*=========================================
    ACTIVE GLOW
=========================================*/

.nav-links a.active::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-10px;

    transform:translateX(-50%);

    width:70%;

    height:8px;

    border-radius:50%;

    background:

    radial-gradient(
    rgba(99,102,241,.55),
    transparent);

    filter:blur(8px);

}

/*=========================================
        SHINE EFFECT
=========================================*/

.nav-links a span{

    position:relative;

    z-index:2;

}

.nav-links a::selection{

    background:transparent;

}

/* Animated shine */

.nav-links a:hover{

    overflow:hidden;

}

.nav-links a:hover::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-30%;

    width:35%;

    height:320%;

    transform:rotate(25deg);

    background:

    rgba(255,255,255,.25);

    animation:navShine .8s linear;

}

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

.header.scrolled{

    padding:.65rem 0;

}

.header.scrolled::before{

    background:

    rgba(6,10,18,.72);

    border-bottom:

    1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(28px);

}

.header.scrolled .logo i{

    width:52px;
    height:52px;

    border-radius:16px;

    font-size:1.2rem;

}

.header.scrolled .nav-links{

    padding:.45rem;

}

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

.header.scrolled{

    box-shadow:

    0 18px 40px rgba(0,0,0,.28);

}

/*=========================================
        FOCUS
=========================================*/

.nav-links a:focus-visible{

    outline:3px solid rgba(99,102,241,.55);

    outline-offset:4px;

}

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

.menu-toggle{

    display:none;

    width:56px;

    height:56px;

    border-radius:18px;

    background:

    rgba(255,255,255,.06);

    border:

    1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.35s;

}

.menu-toggle:hover{

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    transform:translateY(-2px);

}

.menu-toggle i{

    color:#fff;

    font-size:1.25rem;

}

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

@media(max-width:992px){

    .menu-toggle{

        display:flex;

    }

    .navbar{

        position:fixed;

        top:95px;

        left:50%;

        transform:

        translateX(-50%)
        translateY(-20px);

        width:min(92%,500px);

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transition:.4s;

    }

    .navbar.active{

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transform:

        translateX(-50%)
        translateY(0);

    }

    .nav-links{

        width:100%;

        flex-direction:column;

        gap:.8rem;

        border-radius:28px;

        padding:1rem;

        background:

        rgba(12,18,34,.88);

        backdrop-filter:blur(24px);

    }

    .nav-links li{

        width:100%;

    }

    .nav-links a{

        width:100%;

        justify-content:center;

    }

}

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

@media(max-width:600px){

    .header{

        padding:.85rem 0;

    }

    .logo span{

        font-size:1rem;

    }

    .logo i{

        width:50px;

        height:50px;

        font-size:1.1rem;

    }

    .navbar{

        top:85px;

    }

}

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

@keyframes navShine{

    from{

        left:-45%;

    }

    to{

        left:150%;

    }

}

@keyframes menuFade{

    from{

        opacity:0;

        transform:

        translateY(-12px);

    }

    to{

        opacity:1;

        transform:

        translateY(0);

    }

}

.navbar.active{

    animation:menuFade .4s ease;

}
/*==================================================
        PREMIUM DOCUMENTATION CSS
                PART 1C-1
        Ultra Premium Hero Section Layout
====================================================*/

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

.hero{

    position:relative;

    overflow:hidden;

    padding:180px 0 140px;

    isolation:isolate;

}

/*=========================================
        AURORA BACKGROUND
=========================================*/

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at 15% 20%,
    rgba(99,102,241,.30),
    transparent 30%),

    radial-gradient(circle at 85% 18%,
    rgba(6,182,212,.25),
    transparent 28%),

    radial-gradient(circle at 50% 90%,
    rgba(139,92,246,.18),
    transparent 35%);

    z-index:-3;

}

/*=========================================
        GRID OVERLAY
=========================================*/

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

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

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

    background-size:60px 60px;

    mask-image:linear-gradient(to bottom,
    rgba(0,0,0,1),
    rgba(0,0,0,.15));

    z-index:-2;

}

/*=========================================
        FLOATING BLOBS
=========================================*/

.hero .container::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    left:-140px;

    top:-80px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(99,102,241,.35),
    transparent 70%);

    filter:blur(40px);

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

    z-index:-1;

}

.hero .container::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    right:-120px;

    bottom:-80px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(6,182,212,.28),
    transparent 70%);

    filter:blur(45px);

    animation:floatBlobTwo 13s ease-in-out infinite;

    z-index:-1;

}

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

.hero-container{

    display:grid;

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

    gap:4.5rem;

    align-items:center;

    position:relative;

}

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

.hero-content{

    position:relative;

    z-index:2;

}

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

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:.7rem;

    padding:.85rem 1.5rem;

    margin-bottom:2rem;

    border-radius:999px;

    font-size:.9rem;

    font-weight:600;

    color:#fff;

    letter-spacing:.05em;

    text-transform:uppercase;

    background:

    linear-gradient(
    135deg,
    rgba(99,102,241,.18),
    rgba(6,182,212,.18));

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

    backdrop-filter:blur(20px);

    box-shadow:

    0 12px 35px rgba(0,0,0,.18);

}

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

.hero-content h1{

    max-width:760px;

    margin-bottom:1.8rem;

    font-size:clamp(3.4rem,7vw,5.8rem);

    font-weight:800;

    line-height:1.05;

    letter-spacing:-.04em;

}

.hero-content h1 span{

    display:block;

    margin-top:.4rem;

    background:

    linear-gradient(
    90deg,
    #ffffff,
    #8b5cf6,
    #06b6d4);

    background-size:300%;

    -webkit-background-clip:text;

    color:transparent;

    animation:gradientShift 8s linear infinite;

}

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

.hero-content p{

    max-width:680px;

    font-size:1.08rem;

    color:var(--text-light);

    line-height:2;

    margin-bottom:2.5rem;

}

/*=========================================
        HERO BUTTON WRAPPER
=========================================*/

.hero-buttons{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:1.25rem;

}

/*=========================================
        DECORATIVE LINE
=========================================*/

.hero-content::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-35px;

    width:180px;

    height:4px;

    border-radius:999px;

    background:

    linear-gradient(
    90deg,
    var(--primary),
    var(--secondary),
    transparent);

}

/*=========================================
        FLOATING BADGE
=========================================*/

.hero-tag::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:#10b981;

    box-shadow:

    0 0 15px #10b981;

    animation:pulseDot 2s infinite;

}

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

.hero-content>*{

    animation:heroFade .9s ease both;

}

.hero-content h1{

    animation-delay:.1s;

}

.hero-content p{

    animation-delay:.2s;

}

.hero-buttons{

    animation-delay:.3s;

}

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

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes gradientShift{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

@keyframes pulseDot{

    0%{

        transform:scale(.9);

        opacity:.8;

    }

    50%{

        transform:scale(1.4);

        opacity:1;

    }

    100%{

        transform:scale(.9);

        opacity:.8;

    }

}

@keyframes floatBlobOne{

    0%,100%{

        transform:translateY(0) translateX(0);

    }

    50%{

        transform:translateY(-40px) translateX(30px);

    }

}

@keyframes floatBlobTwo{

    0%,100%{

        transform:translateY(0) translateX(0);

    }

    50%{

        transform:translateY(35px) translateX(-25px);

    }

}
/*==================================================
        PREMIUM DOCUMENTATION CSS
                PART 1C-2
     Hero Card • CTA Buttons • Premium Effects
     Responsive Hero Behavior
====================================================*/


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

.hero-card{

    position:relative;

    padding:3.5rem 2.8rem;

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

    background:

    linear-gradient(
    145deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.03));

    border:

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

    backdrop-filter:blur(25px);

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

    box-shadow:

    0 35px 90px rgba(0,0,0,.45),
    inset 0 0 40px rgba(255,255,255,.03);

    overflow:hidden;

    transform-style:preserve-3d;

    animation:

    heroCardFloat 6s ease-in-out infinite;

    transition:

    transform .5s cubic-bezier(.4,0,.2,1);

}


/*=========================================
        CARD GLOW BORDER
=========================================*/

.hero-card::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    transparent,
    var(--secondary));

    opacity:.5;

    z-index:-1;

    filter:blur(15px);

}


/*=========================================
        CARD SHINE
=========================================*/

.hero-card::after{

    content:"";

    position:absolute;

    top:-100%;

    left:-60%;

    width:80%;

    height:250%;

    transform:rotate(30deg);

    background:

    linear-gradient(
    rgba(255,255,255,.15),
    transparent);

    transition:.8s;

}


.hero-card:hover{

    transform:

    translateY(-15px)
    rotateY(-5deg)
    rotateX(5deg);

    box-shadow:

    0 50px 120px rgba(0,0,0,.55),
    0 0 60px rgba(99,102,241,.25);

}


.hero-card:hover::after{

    left:150%;

}


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

.hero-icon{

    width:100px;

    height:100px;

    margin:0 auto 2rem;

    border-radius:32px;

    font-size:2.5rem;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:

    0 25px 50px rgba(99,102,241,.45);

    animation:

    iconPulse 3s infinite;

    position:relative;

}


/*=========================================
        ICON INNER GLOW
=========================================*/

.hero-icon::before{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:inherit;

    background:

    radial-gradient(
    rgba(99,102,241,.45),
    transparent 70%);

    z-index:-1;

    filter:blur(15px);

}


/*=========================================
        CARD TEXT
=========================================*/

.hero-card h3{

    text-align:center;

    color:var(--text-muted);

    font-size:.95rem;

    font-weight:500;

    letter-spacing:.15em;

    text-transform:uppercase;

}


.hero-card h2{

    text-align:center;

    font-size:4rem;

    font-weight:800;

    margin:.8rem 0;

    background:

    linear-gradient(
    135deg,
    #fff,
    #93c5fd);

    -webkit-background-clip:text;

    color:transparent;

}


.hero-card p{

    text-align:center;

    color:var(--text-light);

    line-height:1.8;

}



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

.primary-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:1.15rem 2.3rem;

    border-radius:999px;

    color:#fff;

    font-weight:700;

    letter-spacing:.03em;

    overflow:hidden;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:

    0 20px 45px rgba(99,102,241,.35);

    transition:

    .4s cubic-bezier(.4,0,.2,1);

}


/* BUTTON LIGHT EFFECT */

.primary-btn::before{

    content:"";

    position:absolute;

    top:-50%;

    left:-80%;

    width:60%;

    height:200%;

    transform:rotate(25deg);

    background:

    rgba(255,255,255,.3);

    transition:.8s;

}


.primary-btn:hover{

    transform:

    translateY(-5px)
    scale(1.04);

    box-shadow:

    0 30px 70px rgba(99,102,241,.55);

}


.primary-btn:hover::before{

    left:140%;

}



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

.secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:1.1rem 2.25rem;

    border-radius:999px;

    font-weight:600;

    color:#fff;

    background:

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

    border:

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

    backdrop-filter:blur(15px);

    transition:.4s ease;

}


.secondary-btn:hover{

    background:

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

    border-color:

    rgba(255,255,255,.3);

    transform:

    translateY(-5px);

    box-shadow:

    0 20px 45px rgba(0,0,0,.25);

}



/*=========================================
        BUTTON ICON SUPPORT
=========================================*/

.primary-btn i,
.secondary-btn i{

    margin-left:.7rem;

    transition:.3s;

}


.primary-btn:hover i,
.secondary-btn:hover i{

    transform:translateX(5px);

}



/*=========================================
        HERO DECORATIVE ORBS
=========================================*/

.hero-card .orb{

    position:absolute;

    border-radius:50%;

    filter:blur(25px);

}


.hero-card .orb-one{

    width:120px;

    height:120px;

    top:-40px;

    right:-30px;

    background:

    rgba(99,102,241,.35);

}


.hero-card .orb-two{

    width:100px;

    height:100px;

    bottom:-30px;

    left:-20px;

    background:

    rgba(6,182,212,.3);

}



/*=========================================
        HERO CARD ANIMATION
=========================================*/

@keyframes heroCardFloat{

    0%,
    100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}


@keyframes iconPulse{

    0%{

        box-shadow:

        0 20px 40px rgba(99,102,241,.35);

    }

    50%{

        box-shadow:

        0 25px 70px rgba(6,182,212,.55);

    }

    100%{

        box-shadow:

        0 20px 40px rgba(99,102,241,.35);

    }

}



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

@media(max-width:1100px){

    .hero-container{

        grid-template-columns:1fr;

        text-align:center;

    }


    .hero-content{

        display:flex;

        flex-direction:column;

        align-items:center;

    }


    .hero-content p{

        max-width:700px;

    }


    .hero-content::after{

        left:50%;

        transform:translateX(-50%);

    }


    .hero-card{

        width:min(100%,430px);

        margin:auto;

    }

}



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

@media(max-width:600px){

    .hero{

        padding:

        140px 0 90px;

    }


    .hero-tag{

        font-size:.75rem;

        padding:.7rem 1rem;

    }


    .hero-content h1{

        font-size:

        clamp(2.5rem,12vw,3.4rem);

    }


    .hero-content p{

        font-size:.95rem;

    }


    .hero-buttons{

        width:100%;

        flex-direction:column;

    }


    .primary-btn,
    .secondary-btn{

        width:100%;

    }


    .hero-card{

        padding:

        2.5rem 1.5rem;

    }


    .hero-icon{

        width:85px;

        height:85px;

        font-size:2rem;

    }


    .hero-card h2{

        font-size:3rem;

    }

}
/*==================================================
        PREMIUM DOCUMENTATION CSS
                PART 2A-1
          PROJECT STATS SECTION
   Luxury Dashboard Cards • Glass UI • Effects
====================================================*/


/*=========================================
            PROJECT STATS SECTION
=========================================*/

.project-stats{

    position:relative;

    padding:90px 0;

    overflow:hidden;

    isolation:isolate;

}


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

.project-stats::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    top:-250px;

    left:-200px;

    border-radius:50%;

    background:

    radial-gradient(
    circle,
    rgba(99,102,241,.18),
    transparent 70%);

    filter:blur(50px);

    z-index:-1;

}


.project-stats::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    bottom:-250px;

    right:-180px;

    border-radius:50%;

    background:

    radial-gradient(
    circle,
    rgba(6,182,212,.15),
    transparent 70%);

    filter:blur(55px);

    z-index:-1;

}


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

.stats-grid{

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:2rem;

}


/*=========================================
        STAT CARD
=========================================*/

.stat-card{

    position:relative;

    padding:2.6rem 2rem;

    text-align:center;

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

    background:

    linear-gradient(
    145deg,
    rgba(255,255,255,.09),
    rgba(255,255,255,.03));

    border:

    1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(25px);

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

    overflow:hidden;

    box-shadow:

    0 20px 60px rgba(0,0,0,.25);

    transition:

    transform .45s cubic-bezier(.4,0,.2,1),
    box-shadow .45s ease,
    border-color .45s ease;

}


/*=========================================
        CARD TOP LIGHT
=========================================*/

.stat-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    135deg,
    rgba(255,255,255,.14),
    transparent 45%);

    opacity:0;

    transition:.4s;

}


/*=========================================
        CARD GLOW BORDER
=========================================*/

.stat-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    top:-80px;

    right:-80px;

    border-radius:50%;

    background:

    radial-gradient(
    rgba(99,102,241,.35),
    transparent 70%);

    filter:blur(25px);

}


/*=========================================
        HOVER EFFECT
=========================================*/

.stat-card:hover{

    transform:

    translateY(-15px);

    border-color:

    rgba(99,102,241,.45);

    box-shadow:

    0 35px 90px rgba(0,0,0,.45),

    0 0 45px rgba(99,102,241,.20);

}


.stat-card:hover::before{

    opacity:1;

}


/*=========================================
        STAT ICON
=========================================*/

.stat-card i{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 1.8rem;

    border-radius:25px;

    font-size:2rem;

    color:#fff;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:

    0 20px 40px rgba(99,102,241,.35);

    transition:.45s ease;

}


/*=========================================
        ICON HOVER
=========================================*/

.stat-card:hover i{

    transform:

    translateY(-8px)
    rotate(8deg)
    scale(1.08);

    box-shadow:

    0 30px 60px rgba(6,182,212,.45);

}


/*=========================================
        STAT NUMBER
=========================================*/

.stat-card h2{

    position:relative;

    z-index:2;

    font-size:

    clamp(2rem,4vw,2.8rem);

    font-weight:800;

    margin-bottom:.7rem;

    letter-spacing:-.04em;

    background:

    linear-gradient(
    135deg,
    #ffffff,
    #93c5fd);

    -webkit-background-clip:text;

    color:transparent;

}


/*=========================================
        LARGE TEXT VALUES
=========================================*/

.stat-card h2.long-value{

    font-size:

    clamp(1.3rem,2vw,1.8rem);

    line-height:1.4;

}


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

.stat-card p{

    position:relative;

    z-index:2;

    color:

    var(--text-muted);

    font-size:.95rem;

    font-weight:500;

    letter-spacing:.08em;

    text-transform:uppercase;

}


/*=========================================
        NUMBER SHINE ANIMATION
=========================================*/

.stat-card:hover h2{

    animation:

    numberGlow .8s ease;

}


@keyframes numberGlow{

    0%{

        filter:

        brightness(1);

    }


    50%{

        filter:

        brightness(1.6);

    }


    100%{

        filter:

        brightness(1);

    }

}


/*=========================================
        CARD ENTRY ANIMATION
=========================================*/

.stat-card{

    animation:

    statReveal .8s ease both;

}


.stat-card:nth-child(1){

    animation-delay:.1s;

}


.stat-card:nth-child(2){

    animation-delay:.2s;

}


.stat-card:nth-child(3){

    animation-delay:.3s;

}


.stat-card:nth-child(4){

    animation-delay:.4s;

}


@keyframes statReveal{

    from{

        opacity:0;

        transform:

        translateY(40px);

    }


    to{

        opacity:1;

        transform:

        translateY(0);

    }

}


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

@media(max-width:1100px){

    .stats-grid{

        grid-template-columns:

        repeat(2,1fr);

    }

}


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

@media(max-width:600px){

    .project-stats{

        padding:70px 0;

    }


    .stats-grid{

        grid-template-columns:1fr;

        gap:1.5rem;

    }


    .stat-card{

        padding:

        2.2rem 1.5rem;

    }


    .stat-card i{

        width:70px;

        height:70px;

        font-size:1.7rem;

    }

}
/*==================================================
        PREMIUM DOCUMENTATION CSS
                PART 2A-2
      ADVANCED STATS POLISH SYSTEM
 Counter Effects • Floating Elements
 Dashboard Details • Micro Interactions
====================================================*/


/*=========================================
        ADVANCED STAT CARD LAYER
=========================================*/

.stat-card{

    isolation:isolate;

}


/*=========================================
        INNER BORDER EFFECT
=========================================*/

.stat-card .inner-border{

    position:absolute;

    inset:1px;

    border-radius:inherit;

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

    pointer-events:none;

    opacity:.8;

}


/*=========================================
        PREMIUM TOP LINE
=========================================*/

.stat-card::marker{

    display:none;

}


.stat-card:hover::after{

    animation:

    rotateGlow 4s linear infinite;

}


/*=========================================
        ROTATING GLOW
=========================================*/

@keyframes rotateGlow{

    from{

        transform:

        rotate(0deg);

    }

    to{

        transform:

        rotate(360deg);

    }

}


/*=========================================
        STAT CARD ICON RING
=========================================*/

.stat-card i::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:inherit;

    border:

    1px solid rgba(99,102,241,.25);

    opacity:0;

    transform:scale(.7);

    transition:.4s;

}


.stat-card:hover i::after{

    opacity:1;

    transform:scale(1);

}


/*=========================================
        ICON FLOAT ANIMATION
=========================================*/

.stat-card:hover i{

    animation:

    iconBounce .7s ease;

}


@keyframes iconBounce{

    0%{

        transform:

        translateY(0);

    }

    40%{

        transform:

        translateY(-12px)
        rotate(8deg);

    }

    70%{

        transform:

        translateY(-5px);

    }

    100%{

        transform:

        translateY(-8px)
        rotate(8deg);

    }

}


/*=========================================
        STAT VALUE WRAPPER
=========================================*/

.stat-value{

    position:relative;

    display:inline-block;

}


/*=========================================
        VALUE GLOW
=========================================*/

.stat-value::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-15px;

    transform:

    translateX(-50%);

    width:80px;

    height:20px;

    background:

    radial-gradient(
    rgba(99,102,241,.45),
    transparent 70%);

    filter:blur(12px);

    opacity:.7;

}


/*=========================================
        COUNTER STYLE
=========================================*/

.counter{

    font-variant-numeric:

    tabular-nums;

    display:inline-block;

    position:relative;

}


.counter::selection{

    background:

    transparent;

}


/*=========================================
        DASHBOARD DIVIDER
=========================================*/

.stats-divider{

    width:100%;

    height:1px;

    margin:3rem 0;

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.12),
    transparent);

}


/*=========================================
        MINI STATUS BADGE
=========================================*/

.stat-badge{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    margin-top:1rem;

    padding:.45rem 1rem;

    border-radius:999px;

    font-size:.75rem;

    font-weight:600;

    color:#fff;

    background:

    rgba(16,185,129,.12);

    border:

    1px solid rgba(16,185,129,.25);

}


.stat-badge::before{

    content:"";

    width:7px;

    height:7px;

    border-radius:50%;

    background:

    var(--success);

    box-shadow:

    0 0 12px var(--success);

    animation:

    pulseStatus 2s infinite;

}


@keyframes pulseStatus{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.5);

        opacity:.5;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}


/*=========================================
        FLOATING PARTICLES
=========================================*/

.project-stats .particle{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    background:

    rgba(255,255,255,.25);

    filter:blur(1px);

}


.project-stats .particle.one{

    width:8px;

    height:8px;

    top:20%;

    left:12%;

    animation:

    particleMove 8s infinite;

}


.project-stats .particle.two{

    width:12px;

    height:12px;

    right:18%;

    bottom:20%;

    animation:

    particleMove 10s infinite reverse;

}


.project-stats .particle.three{

    width:6px;

    height:6px;

    top:50%;

    right:8%;

    animation:

    particleMove 7s infinite;

}


@keyframes particleMove{

    0%{

        transform:

        translateY(0)
        translateX(0);

        opacity:.3;

    }

    50%{

        transform:

        translateY(-40px)
        translateX(20px);

        opacity:1;

    }

    100%{

        transform:

        translateY(0)
        translateX(0);

        opacity:.3;

    }

}


/*=========================================
        STAT CARD COLOR VARIANTS
=========================================*/

.stat-card.primary i{

    background:

    linear-gradient(
    135deg,
    #6366f1,
    #818cf8);

}


.stat-card.cyan i{

    background:

    linear-gradient(
    135deg,
    #06b6d4,
    #22d3ee);

}


.stat-card.purple i{

    background:

    linear-gradient(
    135deg,
    #8b5cf6,
    #c084fc);

}


.stat-card.green i{

    background:

    linear-gradient(
    135deg,
    #10b981,
    #34d399);

}


/*=========================================
        STAT CARD ACTIVE PRESS
=========================================*/

.stat-card:active{

    transform:

    translateY(-8px)
    scale(.98);

}


/*=========================================
        GLASS REFLECTION
=========================================*/

.stat-card:hover{

    overflow:hidden;

}


.stat-card:hover::before{

    animation:

    glassSweep 1s ease;

}


@keyframes glassSweep{

    from{

        transform:

        translateX(-100%);

    }

    to{

        transform:

        translateX(100%);

    }

}


/*=========================================
        REDUCED MOTION SUPPORT
=========================================*/

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

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

        animation-duration:.01ms!important;

        animation-iteration-count:1!important;

        scroll-behavior:auto!important;

        transition-duration:.01ms!important;

    }

}


/*=========================================
        SMALL MOBILE OPTIMIZATION
=========================================*/

@media(max-width:420px){

    .stat-card h2{

        font-size:2rem;

    }


    .stat-card p{

        font-size:.8rem;

    }


    .stat-card{

        border-radius:22px;

    }

}
/*==================================================
        PREMIUM DOCUMENTATION CSS
                PART 2B-1
        PROJECT OVERVIEW SECTION
 Section Headers • Glass Cards • Premium Layout
====================================================*/


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

.overview{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    isolation:isolate;

}


/*=========================================
        OVERVIEW BACKGROUND AURA
=========================================*/

.overview::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    top:10%;

    right:-300px;

    border-radius:50%;

    background:

    radial-gradient(
    circle,
    rgba(139,92,246,.20),
    transparent 70%);

    filter:blur(80px);

    z-index:-1;

}


.overview::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    bottom:-200px;

    left:-200px;

    border-radius:50%;

    background:

    radial-gradient(
    circle,
    rgba(6,182,212,.16),
    transparent 70%);

    filter:blur(70px);

    z-index:-1;

}


/*=========================================
        SECTION TITLE SYSTEM
=========================================*/

.section-title{

    max-width:850px;

    margin:0 auto 5rem;

    text-align:center;

}


.section-title span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.65rem 1.4rem;

    margin-bottom:1.5rem;

    border-radius:999px;

    color:

    var(--secondary);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    background:

    rgba(6,182,212,.10);

    border:

    1px solid rgba(6,182,212,.25);

    backdrop-filter:blur(15px);

}



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

.section-title h2{

    position:relative;

    font-size:

    clamp(2.5rem,5vw,4rem);

    line-height:1.1;

    letter-spacing:-.04em;

    font-weight:800;

    margin-bottom:1.5rem;

    background:

    linear-gradient(
    135deg,
    #ffffff,
    #c7d2fe);

    -webkit-background-clip:text;

    color:transparent;

}



/*=========================================
        TITLE DECORATION
=========================================*/

.section-title h2::after{

    content:"";

    position:absolute;

    width:90px;

    height:4px;

    bottom:-18px;

    left:50%;

    transform:

    translateX(-50%);

    border-radius:999px;

    background:

    linear-gradient(
    90deg,
    var(--primary),
    var(--secondary));

}



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

.section-title p{

    margin-top:2.2rem;

    color:

    var(--text-light);

    line-height:2;

    font-size:1.05rem;

}



/*=========================================
        OVERVIEW GRID
=========================================*/

.overview-grid{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:2rem;

}



/*=========================================
        OVERVIEW CARD
=========================================*/

.overview-card{

    position:relative;

    padding:3rem 2.2rem;

    border-radius:

    var(--radius-lg);

    overflow:hidden;

    background:

    linear-gradient(
    145deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.03));

    border:

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

    backdrop-filter:

    blur(25px);

    box-shadow:

    0 25px 70px rgba(0,0,0,.25);

    transition:

    .45s cubic-bezier(.4,0,.2,1);

}



/*=========================================
        CARD LIGHT SWEEP
=========================================*/

.overview-card::before{

    content:"";

    position:absolute;

    top:-100%;

    left:-80%;

    width:70%;

    height:250%;

    transform:

    rotate(30deg);

    background:

    linear-gradient(
    rgba(255,255,255,.18),
    transparent);

    transition:.8s;

}



.overview-card:hover::before{

    left:140%;

}



/*=========================================
        CARD GLOW
=========================================*/

.overview-card::after{

    content:"";

    position:absolute;

    width:200px;

    height:200px;

    right:-90px;

    top:-90px;

    border-radius:50%;

    background:

    radial-gradient(
    rgba(99,102,241,.35),
    transparent 70%);

    filter:blur(25px);

}



/*=========================================
        CARD HOVER
=========================================*/

.overview-card:hover{

    transform:

    translateY(-18px);

    border-color:

    rgba(99,102,241,.4);

    box-shadow:

    0 45px 100px rgba(0,0,0,.45),

    0 0 50px rgba(99,102,241,.18);

}



/*=========================================
        CARD ICON
=========================================*/

.card-icon{

    width:85px;

    height:85px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:2rem;

    border-radius:28px;

    font-size:2rem;

    color:white;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:

    0 25px 50px rgba(99,102,241,.35);

    transition:.45s ease;

}



.overview-card:hover .card-icon{

    transform:

    translateY(-10px)
    rotate(10deg);

    box-shadow:

    0 35px 70px rgba(6,182,212,.45);

}



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

.overview-card h3{

    position:relative;

    z-index:2;

    font-size:1.5rem;

    font-weight:700;

    margin-bottom:1rem;

}



/*=========================================
        CARD TEXT
=========================================*/

.overview-card p{

    position:relative;

    z-index:2;

    color:

    var(--text-light);

    line-height:1.9;

    font-size:.98rem;

}



/*=========================================
        CARD NUMBER MARKER
=========================================*/

.overview-card:nth-child(1)::marker{

    display:none;

}


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

.overview-card{

    animation:

    overviewReveal .8s ease both;

}


.overview-card:nth-child(1){

    animation-delay:.15s;

}


.overview-card:nth-child(2){

    animation-delay:.3s;

}


.overview-card:nth-child(3){

    animation-delay:.45s;

}



@keyframes overviewReveal{

    from{

        opacity:0;

        transform:

        translateY(50px);

    }


    to{

        opacity:1;

        transform:

        translateY(0);

    }

}



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

@media(max-width:1000px){

    .overview-grid{

        grid-template-columns:

        repeat(2,1fr);

    }

}



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

@media(max-width:650px){

    .overview{

        padding:90px 0;

    }


    .section-title{

        margin-bottom:3rem;

    }


    .overview-grid{

        grid-template-columns:1fr;

    }


    .overview-card{

        padding:

        2.4rem 1.6rem;

    }


    .card-icon{

        width:75px;

        height:75px;

        font-size:1.7rem;

    }

}
/*==================================================
        PREMIUM DOCUMENTATION CSS
                PART 2B-2
      ADVANCED OVERVIEW POLISH SYSTEM
 Floating Details • Card Variants
 Premium Micro Interactions
====================================================*/


/*=========================================
        OVERVIEW DECORATIVE PARTICLES
=========================================*/

.overview .overview-particle{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    background:

    rgba(255,255,255,.18);

    filter:blur(1px);

}


.overview .particle-one{

    width:12px;

    height:12px;

    top:18%;

    left:8%;

    animation:

    overviewFloat 9s ease-in-out infinite;

}


.overview .particle-two{

    width:8px;

    height:8px;

    right:15%;

    top:35%;

    animation:

    overviewFloat 7s ease-in-out infinite reverse;

}


.overview .particle-three{

    width:15px;

    height:15px;

    bottom:15%;

    left:20%;

    animation:

    overviewFloat 11s ease-in-out infinite;

}



@keyframes overviewFloat{

    0%,
    100%{

        transform:

        translateY(0)
        translateX(0);

        opacity:.35;

    }


    50%{

        transform:

        translateY(-45px)
        translateX(25px);

        opacity:1;

    }

}



/*=========================================
        PREMIUM CARD TOP ACCENT
=========================================*/

.overview-card .accent-line{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:

    linear-gradient(
    90deg,
    var(--primary),
    var(--secondary));

    transform:

    scaleX(0);

    transform-origin:left;

    transition:.5s ease;

}



.overview-card:hover .accent-line{

    transform:

    scaleX(1);

}



/*=========================================
        CARD ICON RING SYSTEM
=========================================*/

.card-icon{

    position:relative;

    isolation:isolate;

}


.card-icon::before{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:inherit;

    background:

    radial-gradient(
    circle,
    rgba(99,102,241,.35),
    transparent 70%);

    filter:blur(15px);

    opacity:0;

    transition:.4s;

    z-index:-1;

}


.overview-card:hover .card-icon::before{

    opacity:1;

}



/*=========================================
        ICON ROTATING BORDER
=========================================*/

.card-icon::after{

    content:"";

    position:absolute;

    inset:-5px;

    border-radius:inherit;

    border:

    1px dashed rgba(255,255,255,.35);

    opacity:0;

    animation:

    iconRotate 8s linear infinite;

}



.overview-card:hover .card-icon::after{

    opacity:1;

}



@keyframes iconRotate{

    from{

        transform:

        rotate(0deg);

    }

    to{

        transform:

        rotate(360deg);

    }

}



/*=========================================
        CARD CONTENT REVEAL
=========================================*/

.overview-card h3,
.overview-card p{

    transition:

    transform .4s ease;

}


.overview-card:hover h3{

    transform:

    translateX(6px);

}


.overview-card:hover p{

    transform:

    translateX(4px);

}



/*=========================================
        CARD CATEGORY LABEL
=========================================*/

.card-label{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    margin-bottom:1.5rem;

    padding:.4rem .9rem;

    border-radius:999px;

    font-size:.72rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.1em;

    color:

    var(--secondary);

    background:

    rgba(6,182,212,.10);

    border:

    1px solid rgba(6,182,212,.2);

}



/*=========================================
        DIFFERENT CARD THEMES
=========================================*/

.overview-card.primary{

    --card-accent:

    rgba(99,102,241,.45);

}


.overview-card.secondary{

    --card-accent:

    rgba(6,182,212,.45);

}


.overview-card.success{

    --card-accent:

    rgba(16,185,129,.45);

}



.overview-card.primary::after{

    background:

    radial-gradient(
    var(--card-accent),
    transparent 70%);

}


.overview-card.secondary::after{

    background:

    radial-gradient(
    var(--card-accent),
    transparent 70%);

}


.overview-card.success::after{

    background:

    radial-gradient(
    var(--card-accent),
    transparent 70%);

}



/*=========================================
        PREMIUM CARD FOOTER
=========================================*/

.overview-card-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:2rem;

    padding-top:1.5rem;

    border-top:

    1px solid rgba(255,255,255,.08);

}



.overview-card-footer span{

    font-size:.85rem;

    color:

    var(--text-muted);

}



/*=========================================
        ARROW ACTION
=========================================*/

.card-action{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

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

    transition:.35s ease;

}


.card-action:hover{

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    transform:

    rotate(45deg);

}



/*=========================================
        GLASS BORDER ANIMATION
=========================================*/

.overview-card:hover{

    animation:

    borderPulse 1.8s infinite;

}



@keyframes borderPulse{

    0%{

        border-color:

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

    }


    50%{

        border-color:

        rgba(99,102,241,.55);

    }


    100%{

        border-color:

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

    }

}



/*=========================================
        OVERVIEW GRID STAGGER
=========================================*/

.overview-grid{

    perspective:1200px;

}


.overview-card:hover{

    transform:

    translateY(-18px)
    rotateX(4deg);

}



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

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

    .overview-card,
    .card-icon,
    .overview-particle{

        animation:none!important;

        transition:none!important;

    }

}



/*=========================================
        SMALL DEVICES
=========================================*/

@media(max-width:650px){

    .overview-card:hover{

        transform:

        translateY(-8px);

    }


    .overview-card-footer{

        flex-direction:

        column;

        align-items:flex-start;

        gap:1rem;

    }

}
/*==================================================
        PREMIUM DOCUMENTATION CSS
                PART 2C-1
          PROJECT HIGHLIGHTS SECTION
   Key Capabilities • Feature Cards • Glass UI
====================================================*/


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

.highlights{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    isolation:isolate;

}



/*=========================================
        BACKGROUND AURA SYSTEM
=========================================*/

.highlights::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-250px;

    left:-200px;

    border-radius:50%;

    background:

    radial-gradient(
    circle,
    rgba(99,102,241,.22),
    transparent 70%);

    filter:blur(80px);

    z-index:-1;

}



.highlights::after{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    bottom:-250px;

    right:-180px;

    border-radius:50%;

    background:

    radial-gradient(
    circle,
    rgba(6,182,212,.18),
    transparent 70%);

    filter:blur(75px);

    z-index:-1;

}



/*=========================================
        HIGHLIGHT GRID
=========================================*/

.highlight-grid{

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:2rem;

}



/*=========================================
        HIGHLIGHT CARD
=========================================*/

.highlight-card{

    position:relative;

    padding:3rem 2rem;

    overflow:hidden;

    border-radius:

    var(--radius-lg);

    background:

    linear-gradient(
    145deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.03));

    border:

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

    backdrop-filter:

    blur(25px);

    -webkit-backdrop-filter:

    blur(25px);

    box-shadow:

    0 25px 70px rgba(0,0,0,.25);

    transition:

    .45s cubic-bezier(.4,0,.2,1);

}



/*=========================================
        CARD LIGHT EFFECT
=========================================*/

.highlight-card::before{

    content:"";

    position:absolute;

    width:160%;

    height:100%;

    top:-100%;

    left:-120%;

    transform:

    rotate(35deg);

    background:

    linear-gradient(
    rgba(255,255,255,.18),
    transparent);

    transition:.9s;

}



.highlight-card:hover::before{

    left:100%;

}



/*=========================================
        CARD GLOW
=========================================*/

.highlight-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    top:-80px;

    right:-80px;

    border-radius:50%;

    background:

    radial-gradient(
    rgba(99,102,241,.35),
    transparent 70%);

    filter:blur(25px);

}



/*=========================================
        CARD HOVER
=========================================*/

.highlight-card:hover{

    transform:

    translateY(-18px);

    border-color:

    rgba(99,102,241,.45);

    box-shadow:

    0 45px 100px rgba(0,0,0,.45),

    0 0 55px rgba(99,102,241,.18);

}



/*=========================================
        FEATURE ICON
=========================================*/

.highlight-card i{

    position:relative;

    width:85px;

    height:85px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:2rem;

    border-radius:28px;

    font-size:2rem;

    color:#fff;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:

    0 25px 55px rgba(99,102,241,.35);

    transition:

    .45s ease;

}



/*=========================================
        ICON GLOW RING
=========================================*/

.highlight-card i::before{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:inherit;

    background:

    radial-gradient(
    circle,
    rgba(99,102,241,.35),
    transparent 70%);

    filter:blur(15px);

    opacity:0;

    transition:.4s;

}



.highlight-card:hover i::before{

    opacity:1;

}



/*=========================================
        ICON HOVER
=========================================*/

.highlight-card:hover i{

    transform:

    translateY(-10px)
    rotate(8deg)
    scale(1.08);

    box-shadow:

    0 35px 75px rgba(6,182,212,.45);

}



/*=========================================
        CARD TITLE
=========================================*/

.highlight-card h3{

    position:relative;

    z-index:2;

    font-size:

    1.35rem;

    font-weight:700;

    margin-bottom:1rem;

    letter-spacing:-.02em;

}



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

.highlight-card p{

    position:relative;

    z-index:2;

    color:

    var(--text-light);

    line-height:

    1.9;

    font-size:

    .96rem;

}



/*=========================================
        CARD NUMBER LABEL
=========================================*/

.highlight-card .feature-number{

    position:absolute;

    top:1.5rem;

    right:1.5rem;

    font-size:

    4rem;

    font-weight:900;

    color:

    rgba(255,255,255,.04);

    line-height:1;

}



/*=========================================
        CARD ENTRY ANIMATION
=========================================*/

.highlight-card{

    animation:

    highlightReveal .8s ease both;

}



.highlight-card:nth-child(1){

    animation-delay:.1s;

}


.highlight-card:nth-child(2){

    animation-delay:.2s;

}


.highlight-card:nth-child(3){

    animation-delay:.3s;

}


.highlight-card:nth-child(4){

    animation-delay:.4s;

}



@keyframes highlightReveal{

    from{

        opacity:0;

        transform:

        translateY(45px);

    }


    to{

        opacity:1;

        transform:

        translateY(0);

    }

}



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

@media(max-width:1150px){

    .highlight-grid{

        grid-template-columns:

        repeat(2,1fr);

    }

}



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

@media(max-width:650px){

    .highlights{

        padding:90px 0;

    }


    .highlight-grid{

        grid-template-columns:

        1fr;

    }


    .highlight-card{

        padding:

        2.4rem 1.6rem;

    }


    .highlight-card i{

        width:75px;

        height:75px;

        font-size:1.7rem;

    }

}
/*==================================================
        PREMIUM DOCUMENTATION CSS
                PART 2C-2
     ADVANCED HIGHLIGHTS POLISH SYSTEM
  Feature Variants • Floating Effects
  Premium Micro Interactions
====================================================*/


/*=========================================
        HIGHLIGHT PARTICLES
=========================================*/

.highlights .highlight-particle{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    background:

    rgba(255,255,255,.18);

    filter:blur(1px);

}



.highlights .particle-one{

    width:10px;

    height:10px;

    top:18%;

    left:10%;

    animation:

    highlightFloat 8s infinite ease-in-out;

}



.highlights .particle-two{

    width:15px;

    height:15px;

    right:12%;

    top:30%;

    animation:

    highlightFloat 11s infinite reverse;

}



.highlights .particle-three{

    width:7px;

    height:7px;

    bottom:18%;

    left:35%;

    animation:

    highlightFloat 7s infinite;

}



@keyframes highlightFloat{

    0%,
    100%{

        transform:

        translate3d(0,0,0);

        opacity:.35;

    }


    50%{

        transform:

        translate3d(25px,-45px,0);

        opacity:1;

    }

}



/*=========================================
        ADVANCED CARD BORDER SYSTEM
=========================================*/

.highlight-card{

    isolation:isolate;

}



.highlight-card .card-border{

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1px;

    background:

    linear-gradient(
    135deg,
    transparent,
    rgba(255,255,255,.25),
    transparent);

    opacity:0;

    transition:.5s;

    pointer-events:none;

}



.highlight-card:hover .card-border{

    opacity:1;

}



/*=========================================
        FEATURE ICON ROTATING RING
=========================================*/

.highlight-card i{

    isolation:isolate;

}



.highlight-card i::after{

    content:"";

    position:absolute;

    inset:-6px;

    border-radius:inherit;

    border:

    1px dashed rgba(255,255,255,.35);

    opacity:0;

    animation:

    featureRingRotate 10s linear infinite;

}



.highlight-card:hover i::after{

    opacity:1;

}



@keyframes featureRingRotate{

    from{

        transform:

        rotate(0deg);

    }

    to{

        transform:

        rotate(360deg);

    }

}



/*=========================================
        FEATURE TITLE HIGHLIGHT
=========================================*/

.highlight-card h3{

    transition:

    .35s ease;

}



.highlight-card:hover h3{

    color:

    #ffffff;

    transform:

    translateX(6px);

}



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

.highlight-card p{

    transition:

    .35s ease;

}



.highlight-card:hover p{

    transform:

    translateX(5px);

}



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

.highlight-tag{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    margin-bottom:1.3rem;

    padding:.45rem 1rem;

    border-radius:999px;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.1em;

    text-transform:uppercase;

    color:

    var(--secondary);

    background:

    rgba(6,182,212,.12);

    border:

    1px solid rgba(6,182,212,.25);

}



/*=========================================
        FEATURE TAG DOT
=========================================*/

.highlight-tag::before{

    content:"";

    width:7px;

    height:7px;

    border-radius:50%;

    background:

    var(--secondary);

    box-shadow:

    0 0 15px var(--secondary);

}



/*=========================================
        COLOR VARIANTS
=========================================*/

.highlight-card.finance i{

    background:

    linear-gradient(
    135deg,
    #10b981,
    #34d399);

}



.highlight-card.investment i{

    background:

    linear-gradient(
    135deg,
    #6366f1,
    #818cf8);

}



.highlight-card.health i{

    background:

    linear-gradient(
    135deg,
    #ef4444,
    #fb7185);

}



.highlight-card.frontend i{

    background:

    linear-gradient(
    135deg,
    #06b6d4,
    #22d3ee);

}



/*=========================================
        CARD FOOTER AREA
=========================================*/

.highlight-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:2rem;

    padding-top:1.4rem;

    border-top:

    1px solid rgba(255,255,255,.08);

}



.highlight-footer span{

    color:

    var(--text-muted);

    font-size:.85rem;

}



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

.highlight-action{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

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

    color:white;

    transition:

    .4s ease;

}



.highlight-action:hover{

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    transform:

    translateX(5px)
    rotate(-10deg);

}



/*=========================================
        CARD ACTIVE PRESS
=========================================*/

.highlight-card:active{

    transform:

    translateY(-10px)
    scale(.98);

}



/*=========================================
        PREMIUM GRID DEPTH
=========================================*/

.highlight-grid{

    perspective:1200px;

}



.highlight-card:hover{

    transform:

    translateY(-18px)
    rotateX(5deg)
    rotateY(-3deg);

}



/*=========================================
        REDUCED MOTION
=========================================*/

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

    .highlight-card,
    .highlight-particle,
    .highlight-card i::after{

        animation:none!important;

        transition:none!important;

    }

}



/*=========================================
        SMALL SCREEN OPTIMIZATION
=========================================*/

@media(max-width:650px){

    .highlight-card:hover{

        transform:

        translateY(-10px);

    }


    .highlight-footer{

        flex-direction:

        column;

        align-items:flex-start;

        gap:1rem;

    }

}
/*==================================================
        PREMIUM DOCUMENTATION CSS
                PART 3A-1
          FEATURES OVERVIEW SECTION
 Core Modules • Premium Feature Cards
 Dashboard Architecture • Glass UI
====================================================*/


/*=========================================
        FEATURES OVERVIEW SECTION
=========================================*/

.features-overview{

    position:relative;

    padding:130px 0;

    overflow:hidden;

    isolation:isolate;

}



/*=========================================
        BACKGROUND LIGHT SYSTEM
=========================================*/

.features-overview::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    top:-250px;

    right:-250px;

    border-radius:50%;

    background:

    radial-gradient(
    circle,
    rgba(99,102,241,.22),
    transparent 70%);

    filter:blur(90px);

    z-index:-1;

}



.features-overview::after{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    bottom:-220px;

    left:-220px;

    border-radius:50%;

    background:

    radial-gradient(
    circle,
    rgba(6,182,212,.18),
    transparent 70%);

    filter:blur(80px);

    z-index:-1;

}



/*=========================================
        FEATURES GRID
=========================================*/

.features-grid{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:2rem;

}



/*=========================================
        FEATURE CARD
=========================================*/

.feature-card{

    position:relative;

    padding:3rem 2.4rem;

    overflow:hidden;

    border-radius:

    var(--radius-lg);

    background:

    linear-gradient(
    145deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.03));

    border:

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

    backdrop-filter:

    blur(25px);

    -webkit-backdrop-filter:

    blur(25px);

    box-shadow:

    0 30px 80px rgba(0,0,0,.25);

    transition:

    transform .45s cubic-bezier(.4,0,.2,1),
    box-shadow .45s ease,
    border-color .45s ease;

}



/*=========================================
        FEATURE CARD LIGHT SWEEP
=========================================*/

.feature-card::before{

    content:"";

    position:absolute;

    width:80%;

    height:250%;

    top:-100%;

    left:-120%;

    transform:

    rotate(35deg);

    background:

    linear-gradient(
    rgba(255,255,255,.15),
    transparent);

    transition:

    .9s ease;

}



.feature-card:hover::before{

    left:140%;

}



/*=========================================
        FEATURE CARD GLOW
=========================================*/

.feature-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    top:-100px;

    right:-100px;

    border-radius:50%;

    background:

    radial-gradient(
    rgba(139,92,246,.35),
    transparent 70%);

    filter:

    blur(30px);

}



/*=========================================
        CARD HOVER
=========================================*/

.feature-card:hover{

    transform:

    translateY(-18px);

    border-color:

    rgba(139,92,246,.45);

    box-shadow:

    0 50px 110px rgba(0,0,0,.45),

    0 0 60px rgba(139,92,246,.20);

}



/*=========================================
        FEATURE ICON BOX
=========================================*/

.feature-icon{

    position:relative;

    width:90px;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:2rem;

    border-radius:30px;

    color:white;

    font-size:2.2rem;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:

    0 25px 60px rgba(99,102,241,.35);

    transition:

    .45s ease;

}



/*=========================================
        ICON AURA
=========================================*/

.feature-icon::before{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:inherit;

    background:

    radial-gradient(
    circle,
    rgba(99,102,241,.35),
    transparent 70%);

    filter:

    blur(18px);

    opacity:0;

    transition:.4s;

}



.feature-card:hover .feature-icon::before{

    opacity:1;

}



/*=========================================
        ICON HOVER MOTION
=========================================*/

.feature-card:hover .feature-icon{

    transform:

    translateY(-10px)
    rotate(8deg)
    scale(1.08);

    box-shadow:

    0 40px 80px rgba(6,182,212,.45);

}



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

.feature-card h3{

    position:relative;

    z-index:2;

    font-size:

    1.4rem;

    font-weight:700;

    margin-bottom:1rem;

    letter-spacing:-.025em;

}



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

.feature-card p{

    position:relative;

    z-index:2;

    color:

    var(--text-light);

    font-size:.98rem;

    line-height:

    1.9;

}



/*=========================================
        FEATURE NUMBER WATERMARK
=========================================*/

.feature-card .module-number{

    position:absolute;

    right:1.5rem;

    bottom:1rem;

    font-size:5rem;

    font-weight:900;

    color:

    rgba(255,255,255,.04);

    line-height:1;

}



/*=========================================
        CARD ENTRY ANIMATION
=========================================*/

.feature-card{

    animation:

    featureReveal .8s ease both;

}


.feature-card:nth-child(1){

    animation-delay:.1s;

}


.feature-card:nth-child(2){

    animation-delay:.2s;

}


.feature-card:nth-child(3){

    animation-delay:.3s;

}


.feature-card:nth-child(4){

    animation-delay:.4s;

}


.feature-card:nth-child(5){

    animation-delay:.5s;

}



@keyframes featureReveal{

    from{

        opacity:0;

        transform:

        translateY(50px);

    }


    to{

        opacity:1;

        transform:

        translateY(0);

    }

}



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

@media(max-width:1050px){

    .features-grid{

        grid-template-columns:

        repeat(2,1fr);

    }

}



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

@media(max-width:650px){

    .features-overview{

        padding:90px 0;

    }


    .features-grid{

        grid-template-columns:

        1fr;

    }


    .feature-card{

        padding:

        2.5rem 1.7rem;

    }


    .feature-icon{

        width:78px;

        height:78px;

        font-size:1.8rem;

    }

}
/*==================================================
        PREMIUM DOCUMENTATION CSS
                PART 3A-2
       ADVANCED FEATURE MODULE SYSTEM
  Badges • Rings • Indicators • Micro UI Effects
====================================================*/


/*=========================================
        FEATURE PARTICLE SYSTEM
=========================================*/

.features-overview .feature-particle{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    background:

    rgba(255,255,255,.2);

    filter:blur(1px);

}



.feature-particle.one{

    width:12px;

    height:12px;

    top:15%;

    left:12%;

    animation:

    featureParticleMove 9s infinite ease-in-out;

}



.feature-particle.two{

    width:18px;

    height:18px;

    top:45%;

    right:10%;

    animation:

    featureParticleMove 12s infinite reverse;

}



.feature-particle.three{

    width:8px;

    height:8px;

    bottom:20%;

    left:40%;

    animation:

    featureParticleMove 7s infinite;

}



@keyframes featureParticleMove{

    0%,
    100%{

        transform:

        translate(0,0);

        opacity:.3;

    }


    50%{

        transform:

        translate(35px,-50px);

        opacity:1;

    }

}



/*=========================================
        FEATURE MODULE BADGE
=========================================*/

.module-badge{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    padding:

    .45rem 1rem;

    margin-bottom:

    1.4rem;

    border-radius:

    999px;

    font-size:

    .72rem;

    font-weight:700;

    letter-spacing:

    .12em;

    text-transform:

    uppercase;

    color:

    var(--secondary);

    background:

    rgba(6,182,212,.12);

    border:

    1px solid rgba(6,182,212,.25);

}



/*=========================================
        BADGE ACTIVE DOT
=========================================*/

.module-badge::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:

    var(--secondary);

    box-shadow:

    0 0 18px var(--secondary);

    animation:

    badgePulse 2s infinite;

}



@keyframes badgePulse{

    0%{

        transform:scale(1);

        opacity:1;

    }


    50%{

        transform:scale(1.6);

        opacity:.4;

    }


    100%{

        transform:scale(1);

        opacity:1;

    }

}



/*=========================================
        ICON ROTATING ENERGY RING
=========================================*/

.feature-icon{

    isolation:isolate;

}



.feature-icon::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:inherit;

    border:

    1px dashed rgba(255,255,255,.35);

    opacity:0;

    animation:

    featureRotate 10s linear infinite;

}



.feature-card:hover .feature-icon::after{

    opacity:1;

}



@keyframes featureRotate{

    from{

        transform:

        rotate(0deg);

    }


    to{

        transform:

        rotate(360deg);

    }

}



/*=========================================
        MODULE STATUS INDICATOR
=========================================*/

.module-status{

    display:flex;

    align-items:center;

    gap:.6rem;

    margin-top:1.8rem;

    padding-top:

    1.2rem;

    border-top:

    1px solid rgba(255,255,255,.08);

}



.module-status span{

    font-size:.82rem;

    color:

    var(--text-muted);

}



.status-dot{

    width:9px;

    height:9px;

    border-radius:50%;

    background:

    #10b981;

    box-shadow:

    0 0 18px #10b981;

    animation:

    statusGlow 2.5s infinite;

}



@keyframes statusGlow{

    0%,
    100%{

        opacity:1;

    }


    50%{

        opacity:.45;

    }

}



/*=========================================
        FEATURE CARD TOP LINE
=========================================*/

.feature-card .top-line{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:

    linear-gradient(
    90deg,
    var(--primary),
    var(--secondary));

    transform:

    scaleX(0);

    transform-origin:left;

    transition:.5s ease;

}



.feature-card:hover .top-line{

    transform:

    scaleX(1);

}



/*=========================================
        MODULE VARIATIONS
=========================================*/

.feature-card.calculator .feature-icon{

    background:

    linear-gradient(
    135deg,
    #6366f1,
    #818cf8);

}



.feature-card.investment .feature-icon{

    background:

    linear-gradient(
    135deg,
    #10b981,
    #34d399);

}



.feature-card.health .feature-icon{

    background:

    linear-gradient(
    135deg,
    #ef4444,
    #fb7185);

}



.feature-card.goal .feature-icon{

    background:

    linear-gradient(
    135deg,
    #f59e0b,
    #fbbf24);

}



.feature-card.documentation .feature-icon{

    background:

    linear-gradient(
    135deg,
    #06b6d4,
    #22d3ee);

}



/*=========================================
        FEATURE META DATA
=========================================*/

.feature-meta{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:2rem;

}



.feature-meta strong{

    font-size:

    1.2rem;

    font-weight:800;

}



.feature-meta small{

    color:

    var(--text-muted);

    font-size:.8rem;

}



/*=========================================
        PROGRESS BAR STYLE
=========================================*/

.feature-progress{

    width:100%;

    height:6px;

    margin-top:1rem;

    overflow:hidden;

    border-radius:999px;

    background:

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

}



.feature-progress span{

    display:block;

    height:100%;

    width:85%;

    border-radius:inherit;

    background:

    linear-gradient(
    90deg,
    var(--primary),
    var(--secondary));

    animation:

    progressLoad 1.8s ease;

}



@keyframes progressLoad{

    from{

        width:0;

    }

}



/*=========================================
        FEATURE CARD PRESS EFFECT
=========================================*/

.feature-card:active{

    transform:

    translateY(-8px)
    scale(.97);

}



/*=========================================
        PREMIUM SHADOW MODE
=========================================*/

.feature-card:hover h3{

    text-shadow:

    0 0 25px rgba(255,255,255,.15);

}



/*=========================================
        REDUCED MOTION SUPPORT
=========================================*/

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

    .feature-card,
    .feature-icon::after,
    .feature-particle,
    .status-dot{

        animation:none!important;

    }

}



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

@media(max-width:650px){

    .feature-meta{

        flex-direction:

        column;

        align-items:flex-start;

        gap:.6rem;

    }


    .module-status{

        margin-top:

        1.2rem;

    }


    .module-badge{

        font-size:

        .65rem;

    }

}
/*==================================================
        PREMIUM DOCUMENTATION CSS
                PART 3B-1
     FEATURE DOCUMENTATION SYSTEM
 Technical Cards • Documentation Panels
 Developer Dashboard UI • Glass Layout
====================================================*/


/*=========================================
        FEATURE DOCUMENTATION SECTION
=========================================*/

.feature-documentation{

    position:relative;

    padding:130px 0;

    overflow:hidden;

    isolation:isolate;

}



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

.feature-documentation::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    top:20%;

    left:-280px;

    border-radius:50%;

    background:

    radial-gradient(
    circle,
    rgba(99,102,241,.18),
    transparent 70%);

    filter:

    blur(90px);

    z-index:-1;

}



.feature-documentation::after{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    bottom:10%;

    right:-250px;

    border-radius:50%;

    background:

    radial-gradient(
    circle,
    rgba(6,182,212,.15),
    transparent 70%);

    filter:

    blur(100px);

    z-index:-1;

}



/*=========================================
        DOCUMENTATION GRID
=========================================*/

.documentation-grid{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:2rem;

}



/*=========================================
        DOCUMENTATION CARD
=========================================*/

.documentation-card{

    position:relative;

    padding:2.8rem 2.3rem;

    overflow:hidden;

    border-radius:

    var(--radius-lg);

    background:

    linear-gradient(
    145deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.035));

    border:

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

    backdrop-filter:

    blur(25px);

    -webkit-backdrop-filter:

    blur(25px);

    box-shadow:

    0 30px 80px rgba(0,0,0,.25);

    transition:

    .45s cubic-bezier(.4,0,.2,1);

}



/*=========================================
        DOCUMENT CARD SHINE
=========================================*/

.documentation-card::before{

    content:"";

    position:absolute;

    width:120%;

    height:200%;

    top:-140%;

    left:-120%;

    transform:

    rotate(35deg);

    background:

    linear-gradient(
    rgba(255,255,255,.16),
    transparent);

    transition:

    .9s ease;

}



.documentation-card:hover::before{

    left:120%;

}



/*=========================================
        DOCUMENT CARD GLOW
=========================================*/

.documentation-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-80px;

    top:-80px;

    border-radius:50%;

    background:

    radial-gradient(
    rgba(99,102,241,.35),
    transparent 70%);

    filter:

    blur(30px);

}



/*=========================================
        DOCUMENT CARD HOVER
=========================================*/

.documentation-card:hover{

    transform:

    translateY(-15px);

    border-color:

    rgba(99,102,241,.45);

    box-shadow:

    0 45px 100px rgba(0,0,0,.45),

    0 0 60px rgba(99,102,241,.18);

}



/*=========================================
        DOCUMENT ICON
=========================================*/

.doc-icon{

    position:relative;

    width:75px;

    height:75px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:1.8rem;

    border-radius:

    24px;

    font-size:

    1.8rem;

    color:white;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:

    0 25px 55px rgba(99,102,241,.35);

    transition:

    .4s ease;

}



/*=========================================
        ICON GLOW
=========================================*/

.doc-icon::before{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:inherit;

    background:

    radial-gradient(
    circle,
    rgba(99,102,241,.4),
    transparent 70%);

    filter:

    blur(18px);

    opacity:0;

    transition:.4s;

}



.documentation-card:hover .doc-icon::before{

    opacity:1;

}



/*=========================================
        ICON MOTION
=========================================*/

.documentation-card:hover .doc-icon{

    transform:

    translateY(-8px)
    rotate(7deg)
    scale(1.08);

}



/*=========================================
        DOCUMENT TITLE
=========================================*/

.documentation-card h3{

    position:relative;

    z-index:2;

    margin-bottom:

    1rem;

    font-size:

    1.35rem;

    font-weight:

    700;

    letter-spacing:

    -.02em;

}



/*=========================================
        DOCUMENT TEXT
=========================================*/

.documentation-card p{

    position:relative;

    z-index:2;

    color:

    var(--text-light);

    line-height:

    1.9;

    font-size:

    .95rem;

}



/*=========================================
        DOCUMENTATION LABEL
=========================================*/

.doc-label{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    margin-bottom:

    1.3rem;

    padding:

    .4rem .9rem;

    border-radius:

    999px;

    font-size:

    .7rem;

    font-weight:

    700;

    letter-spacing:

    .12em;

    text-transform:

    uppercase;

    color:

    var(--secondary);

    background:

    rgba(6,182,212,.12);

    border:

    1px solid rgba(6,182,212,.25);

}



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

.documentation-card{

    animation:

    documentationReveal .8s ease both;

}



.documentation-card:nth-child(1){

    animation-delay:.1s;

}


.documentation-card:nth-child(2){

    animation-delay:.2s;

}


.documentation-card:nth-child(3){

    animation-delay:.3s;

}


.documentation-card:nth-child(4){

    animation-delay:.4s;

}


.documentation-card:nth-child(5){

    animation-delay:.5s;

}


.documentation-card:nth-child(6){

    animation-delay:.6s;

}



@keyframes documentationReveal{

    from{

        opacity:0;

        transform:

        translateY(45px);

    }


    to{

        opacity:1;

        transform:

        translateY(0);

    }

}



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

@media(max-width:1050px){

    .documentation-grid{

        grid-template-columns:

        repeat(2,1fr);

    }

}



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

@media(max-width:650px){

    .feature-documentation{

        padding:

        90px 0;

    }


    .documentation-grid{

        grid-template-columns:

        1fr;

    }


    .documentation-card{

        padding:

        2.3rem 1.6rem;

    }


    .doc-icon{

        width:

        68px;

        height:

        68px;

        font-size:

        1.5rem;

    }

}
/*==================================================
        PREMIUM DOCUMENTATION CSS
                PART 3B-2
      ADVANCED DOCUMENTATION INTERFACE
 Workflow UI • Code Blocks • Data Panels
 Enterprise Developer Portal Styling
====================================================*/


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

.doc-header{

    display:flex;

    align-items:flex-start;

    gap:2rem;

    margin-bottom:4rem;

    padding:3rem;

    border-radius:

    var(--radius-lg);

    background:

    linear-gradient(
    145deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.035));

    border:

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

    backdrop-filter:

    blur(25px);

    box-shadow:

    0 35px 90px rgba(0,0,0,.25);

}



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

.doc-header .doc-icon{

    flex-shrink:0;

    width:90px;

    height:90px;

    margin:0;

    border-radius:

    28px;

}



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

.doc-header h2{

    margin-bottom:1rem;

    font-size:

    clamp(2rem,4vw,3rem);

    font-weight:

    800;

    letter-spacing:

    -.04em;

}



.doc-header p{

    color:

    var(--text-light);

    line-height:

    1.9;

    max-width:

    850px;

}



/*=========================================
        DOC INFORMATION PANEL
=========================================*/

.doc-card{

    position:relative;

    margin-bottom:2.5rem;

    padding:3rem;

    overflow:hidden;

    border-radius:

    var(--radius-lg);

    background:

    linear-gradient(
    145deg,
    rgba(255,255,255,.09),
    rgba(255,255,255,.025));

    border:

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

    backdrop-filter:

    blur(25px);

    box-shadow:

    0 30px 80px rgba(0,0,0,.22);

    transition:.45s ease;

}



.doc-card:hover{

    transform:

    translateY(-8px);

    border-color:

    rgba(99,102,241,.4);

    box-shadow:

    0 45px 100px rgba(0,0,0,.35);

}



/*=========================================
        DOC CARD TOP ACCENT
=========================================*/

.doc-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:

    linear-gradient(
    90deg,
    var(--primary),
    var(--secondary));

    transform:

    scaleX(0);

    transform-origin:left;

    transition:.5s;

}



.doc-card:hover::before{

    transform:

    scaleX(1);

}



/*=========================================
        DOC CARD HEADING
=========================================*/

.doc-card h3{

    margin-bottom:

    1rem;

    font-size:

    1.7rem;

    font-weight:

    750;

}



.doc-card p{

    color:

    var(--text-light);

    line-height:

    1.9;

}



/*=========================================
        FEATURE BOX GRID
=========================================*/

.feature-grid{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:1.5rem;

    margin-top:2rem;

}



.feature-box{

    padding:1.8rem;

    border-radius:

    20px;

    background:

    rgba(255,255,255,.06);

    border:

    1px solid rgba(255,255,255,.1);

    transition:.35s ease;

}



.feature-box:hover{

    background:

    rgba(255,255,255,.1);

    transform:

    translateY(-8px);

}



.feature-box h4{

    margin-bottom:.8rem;

    font-size:

    1.1rem;

}



.feature-box p{

    font-size:.9rem;

}



/*=========================================
        WORKFLOW TIMELINE
=========================================*/

.workflow{

    display:flex;

    flex-direction:column;

    gap:1rem;

    margin-top:2rem;

}



.workflow-step{

    display:flex;

    align-items:center;

    gap:1.2rem;

    padding:1.2rem 1.5rem;

    border-radius:

    18px;

    background:

    rgba(255,255,255,.06);

    border:

    1px solid rgba(255,255,255,.1);

    transition:.35s ease;

}



.workflow-step:hover{

    transform:

    translateX(10px);

    background:

    rgba(99,102,241,.12);

}



/*=========================================
        WORKFLOW NUMBER
=========================================*/

.workflow-step span{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    flex-shrink:0;

    border-radius:50%;

    font-weight:800;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:

    0 10px 30px rgba(99,102,241,.35);

}



/*=========================================
        CODE / PROCESS BLOCK
=========================================*/

.workflow-box{

    margin-top:2rem;

    padding:2.5rem;

    border-radius:

    24px;

    background:

    rgba(0,0,0,.35);

    border:

    1px solid rgba(255,255,255,.1);

    overflow:auto;

    position:relative;

}



.workflow-box::before{

    content:"SYSTEM PROCESS";

    position:absolute;

    top:1rem;

    right:1.5rem;

    font-size:.65rem;

    letter-spacing:.15em;

    color:

    rgba(255,255,255,.4);

}



.workflow-box pre{

    margin:0;

    color:

    #e2e8f0;

    font-family:

    "Fira Code",
    monospace;

    font-size:

    .95rem;

    line-height:

    2;

}



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

.doc-list{

    margin-top:1.5rem;

    display:flex;

    flex-direction:column;

    gap:1rem;

}



.doc-list li{

    position:relative;

    padding-left:2rem;

    color:

    var(--text-light);

}



.doc-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    color:

    var(--secondary);

    font-weight:800;

}



/*=========================================
        DOCUMENT TABLE
=========================================*/

.documentation-table{

    width:100%;

    margin-top:2rem;

    border-collapse:

    separate;

    border-spacing:

    0;

    overflow:hidden;

    border-radius:

    18px;

    background:

    rgba(255,255,255,.04);

}



.documentation-table th{

    padding:

    1.2rem;

    text-align:left;

    background:

    rgba(99,102,241,.18);

    font-weight:

    700;

}



.documentation-table td{

    padding:

    1.2rem;

    border-bottom:

    1px solid rgba(255,255,255,.08);

    color:

    var(--text-light);

}



.documentation-table tr{

    transition:.3s ease;

}



.documentation-table tbody tr:hover{

    background:

    rgba(255,255,255,.06);

}



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

@media(max-width:1000px){

    .feature-grid{

        grid-template-columns:

        repeat(2,1fr);

    }

}



@media(max-width:700px){

    .doc-header{

        flex-direction:

        column;

        padding:2rem;

    }


    .doc-card{

        padding:

        2rem 1.5rem;

    }


    .feature-grid{

        grid-template-columns:

        1fr;

    }


    .workflow-step{

        align-items:flex-start;

    }


    .documentation-table{

        font-size:.85rem;

    }

}
/*==================================================
        PREMIUM DOCUMENTATION CSS
                PART 3C-1
          WORKFLOW VISUALIZATION SYSTEM
 Timeline Flow • Process Architecture
 Animated Steps • Developer Diagram UI
====================================================*/


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

.workflow{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    isolation:isolate;

}



/*=========================================
        WORKFLOW BACKGROUND EFFECTS
=========================================*/

.workflow::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-200px;

    left:-250px;

    border-radius:50%;

    background:

    radial-gradient(
    circle,
    rgba(99,102,241,.20),
    transparent 70%);

    filter:

    blur(90px);

    z-index:-1;

}



.workflow::after{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    bottom:-220px;

    right:-220px;

    border-radius:50%;

    background:

    radial-gradient(
    circle,
    rgba(6,182,212,.16),
    transparent 70%);

    filter:

    blur(100px);

    z-index:-1;

}



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

.workflow-container{

    position:relative;

    max-width:

    1000px;

    margin:auto;

}



/*=========================================
        WORKFLOW BOX PREMIUM STYLE
=========================================*/

.workflow-box{

    position:relative;

    padding:4rem 3rem;

    border-radius:

    32px;

    background:

    linear-gradient(
    145deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.035));

    border:

    1px solid rgba(255,255,255,.14);

    backdrop-filter:

    blur(30px);

    box-shadow:

    0 40px 100px rgba(0,0,0,.3);

}



/*=========================================
        WORKFLOW HEADER LABEL
=========================================*/

.workflow-box::before{

    content:"PROCESS FLOW";

    position:absolute;

    top:1.5rem;

    left:2rem;

    padding:.4rem 1rem;

    border-radius:999px;

    font-size:.7rem;

    font-weight:800;

    letter-spacing:.15em;

    color:

    var(--secondary);

    background:

    rgba(6,182,212,.12);

    border:

    1px solid rgba(6,182,212,.25);

}



/*=========================================
        WORKFLOW STEPS WRAPPER
=========================================*/

.workflow-flow{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:2rem;

    margin-top:3rem;

}



/*=========================================
        CONNECTING LINE
=========================================*/

.workflow-flow::before{

    content:"";

    position:absolute;

    left:34px;

    top:35px;

    width:3px;

    height:

    calc(100% - 70px);

    background:

    linear-gradient(
    var(--primary),
    var(--secondary));

    opacity:.45;

}



/*=========================================
        WORKFLOW STEP CARD
=========================================*/

.workflow-item{

    position:relative;

    display:flex;

    align-items:center;

    gap:2rem;

    padding:1.5rem;

    border-radius:

    22px;

    background:

    rgba(255,255,255,.06);

    border:

    1px solid rgba(255,255,255,.10);

    transition:

    .45s ease;

}



/*=========================================
        STEP HOVER
=========================================*/

.workflow-item:hover{

    transform:

    translateX(15px);

    background:

    rgba(99,102,241,.12);

    border-color:

    rgba(99,102,241,.35);

    box-shadow:

    0 25px 60px rgba(0,0,0,.25);

}



/*=========================================
        STEP NUMBER
=========================================*/

.workflow-number{

    position:relative;

    z-index:2;

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:50%;

    font-size:

    1.4rem;

    font-weight:900;

    color:white;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:

    0 20px 50px rgba(99,102,241,.45);

    transition:.4s ease;

}



/*=========================================
        NUMBER GLOW
=========================================*/

.workflow-number::before{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:50%;

    background:

    radial-gradient(
    circle,
    rgba(99,102,241,.4),
    transparent 70%);

    filter:

    blur(15px);

    opacity:0;

    transition:.4s;

}



.workflow-item:hover .workflow-number::before{

    opacity:1;

}



/*=========================================
        NUMBER ROTATION
=========================================*/

.workflow-item:hover .workflow-number{

    transform:

    rotate(12deg)
    scale(1.1);

}



/*=========================================
        STEP CONTENT
=========================================*/

.workflow-content h3{

    margin-bottom:.5rem;

    font-size:

    1.25rem;

    font-weight:

    750;

}



.workflow-content p{

    color:

    var(--text-light);

    line-height:

    1.7;

    font-size:.95rem;

}



/*=========================================
        ACTIVE STEP
=========================================*/

.workflow-item.active{

    border-color:

    rgba(6,182,212,.45);

    background:

    rgba(6,182,212,.10);

}



.workflow-item.active .workflow-number{

    background:

    linear-gradient(
    135deg,
    #06b6d4,
    #22d3ee);

}



/*=========================================
        FLOW ARROW
=========================================*/

.workflow-arrow{

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:

    -1rem auto;

    border-radius:50%;

    background:

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

    color:

    var(--secondary);

    animation:

    arrowBounce 2s infinite;

}



@keyframes arrowBounce{

    0%,
    100%{

        transform:

        translateY(0);

    }


    50%{

        transform:

        translateY(8px);

    }

}



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

.workflow-item{

    animation:

    workflowReveal .8s ease both;

}



.workflow-item:nth-child(1){

    animation-delay:.1s;

}

.workflow-item:nth-child(2){

    animation-delay:.2s;

}

.workflow-item:nth-child(3){

    animation-delay:.3s;

}

.workflow-item:nth-child(4){

    animation-delay:.4s;

}

.workflow-item:nth-child(5){

    animation-delay:.5s;

}



@keyframes workflowReveal{

    from{

        opacity:0;

        transform:

        translateY(40px);

    }


    to{

        opacity:1;

        transform:

        translateY(0);

    }

}



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

@media(max-width:800px){

    .workflow-box{

        padding:

        3rem 1.5rem;

    }


    .workflow-item{

        gap:1.2rem;

    }


    .workflow-number{

        width:55px;

        height:55px;

        font-size:1rem;

    }

}



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

@media(max-width:600px){

    .workflow{

        padding:90px 0;

    }


    .workflow-flow::before{

        left:27px;

    }


    .workflow-item{

        align-items:flex-start;

    }


    .workflow-content h3{

        font-size:

        1.1rem;

    }

}
/*==================================================
        PREMIUM DOCUMENTATION CSS
                PART 3C-2
       ADVANCED WORKFLOW ARCHITECTURE
 Flow Nodes • Terminal UI • System Diagram
 Enterprise Documentation Visualization
====================================================*/


/*=========================================
        WORKFLOW NODE SYSTEM
=========================================*/

.workflow-node{

    position:relative;

    display:flex;

    align-items:center;

    gap:1rem;

    padding:1.4rem 1.8rem;

    border-radius:

    20px;

    background:

    rgba(255,255,255,.07);

    border:

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

    transition:

    .45s cubic-bezier(.4,0,.2,1);

}



/*=========================================
        NODE HOVER EFFECT
=========================================*/

.workflow-node:hover{

    transform:

    translateX(18px);

    background:

    rgba(99,102,241,.14);

    border-color:

    rgba(99,102,241,.45);

    box-shadow:

    0 25px 70px rgba(0,0,0,.3);

}



/*=========================================
        NODE STATUS LIGHT
=========================================*/

.workflow-node::before{

    content:"";

    width:12px;

    height:12px;

    flex-shrink:0;

    border-radius:50%;

    background:

    var(--secondary);

    box-shadow:

    0 0 25px var(--secondary);

    animation:

    nodePulse 2s infinite;

}



@keyframes nodePulse{

    0%{

        transform:scale(1);

        opacity:1;

    }


    50%{

        transform:scale(1.5);

        opacity:.45;

    }


    100%{

        transform:scale(1);

        opacity:1;

    }

}



/*=========================================
        ARCHITECTURE DIAGRAM
=========================================*/

.architecture-diagram{

    position:relative;

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:2rem;

    margin-top:3rem;

}



/*=========================================
        DIAGRAM BLOCK
=========================================*/

.diagram-block{

    position:relative;

    padding:2rem;

    text-align:center;

    border-radius:

    24px;

    background:

    linear-gradient(
    145deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.03));

    border:

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

    backdrop-filter:

    blur(20px);

    transition:.4s ease;

}



.diagram-block:hover{

    transform:

    translateY(-12px);

    border-color:

    rgba(6,182,212,.45);

}



/*=========================================
        DIAGRAM ICON
=========================================*/

.diagram-icon{

    width:70px;

    height:70px;

    margin:

    0 auto 1.5rem;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:

    22px;

    font-size:

    1.8rem;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:

    0 25px 50px rgba(99,102,241,.35);

}



/*=========================================
        CONNECTION ARROWS
=========================================*/

.diagram-block:not(:last-child)::after{

    content:"→";

    position:absolute;

    right:-35px;

    top:50%;

    transform:

    translateY(-50%);

    font-size:

    2rem;

    color:

    var(--secondary);

    animation:

    arrowGlow 2s infinite;

}



@keyframes arrowGlow{

    0%,
    100%{

        opacity:.5;

    }


    50%{

        opacity:1;

    }

}



/*=========================================
        TERMINAL DOCUMENT BLOCK
=========================================*/

.terminal-box{

    position:relative;

    margin-top:3rem;

    padding:3rem 2rem 2rem;

    border-radius:

    25px;

    overflow:hidden;

    background:

    #050816;

    border:

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

    box-shadow:

    0 40px 100px rgba(0,0,0,.45);

}



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

.terminal-box::before{

    content:"● ● ●";

    position:absolute;

    top:1rem;

    left:1.5rem;

    color:

    rgba(255,255,255,.45);

    font-size:

    1rem;

    letter-spacing:.4rem;

}



.terminal-box::after{

    content:"SYSTEM EXECUTION";

    position:absolute;

    top:1rem;

    right:1.5rem;

    font-size:

    .65rem;

    letter-spacing:.15em;

    color:

    rgba(255,255,255,.4);

}



/*=========================================
        TERMINAL TEXT
=========================================*/

.terminal-box code{

    display:block;

    padding-top:1.5rem;

    font-family:

    "Fira Code",
    monospace;

    color:

    #e2e8f0;

    line-height:

    2;

    font-size:

    .95rem;

}



/*=========================================
        CODE HIGHLIGHT
=========================================*/

.code-key{

    color:

    #38bdf8;

}



.code-function{

    color:

    #a78bfa;

}



.code-value{

    color:

    #34d399;

}



/*=========================================
        DATA FLOW BAR
=========================================*/

.data-flow{

    display:flex;

    align-items:center;

    gap:1rem;

    margin-top:3rem;

    padding:1.5rem;

    border-radius:

    20px;

    background:

    rgba(255,255,255,.06);

    border:

    1px solid rgba(255,255,255,.1);

    overflow:hidden;

}



.data-flow span{

    padding:.8rem 1.3rem;

    border-radius:

    999px;

    background:

    rgba(99,102,241,.18);

    font-size:.85rem;

    font-weight:700;

    white-space:nowrap;

}



.data-flow i{

    color:

    var(--secondary);

    animation:

    flowMove 1.8s infinite;

}



@keyframes flowMove{

    0%{

        transform:

        translateX(0);

    }


    50%{

        transform:

        translateX(8px);

    }


    100%{

        transform:

        translateX(0);

    }

}



/*=========================================
        PROCESS COMPLETION BADGE
=========================================*/

.completed-badge{

    display:inline-flex;

    align-items:center;

    gap:.6rem;

    margin-top:2rem;

    padding:.7rem 1.4rem;

    border-radius:

    999px;

    color:

    #34d399;

    background:

    rgba(16,185,129,.12);

    border:

    1px solid rgba(16,185,129,.25);

}



.completed-badge::before{

    content:"✓";

    width:22px;

    height:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

    #10b981;

    color:white;

    font-weight:800;

}



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

@media(max-width:900px){

    .architecture-diagram{

        grid-template-columns:

        1fr;

    }


    .diagram-block:not(:last-child)::after{

        content:"↓";

        right:auto;

        top:auto;

        bottom:-35px;

        left:50%;

        transform:

        translateX(-50%);

    }


    .data-flow{

        overflow-x:auto;

    }

}



/*=========================================
        REDUCED MOTION
=========================================*/

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

    .workflow-node::before,
    .diagram-block,
    .data-flow i{

        animation:none!important;

        transition:none!important;

    }

}
/* .documentation-grid {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 10px;
    padding: 10px;
} */