@font-face{
    font-family:Vazirmatn;
    src:url('/static/fonts/Vazirmatn-Regular.woff2');
    font-weight:400;
}

@font-face{
    font-family:Vazirmatn;
    src:url('/static/fonts/Vazirmatn-Bold.woff2');
    font-weight:700;
}

@font-face{
    font-family:Vazirmatn;
    src:url('/static/fonts/Vazirmatn-ExtraBold.woff2');
    font-weight:900;
}
@font-face {
    font-family: 'Roboto Mono';
    src: url('/static/fonts/RobotoMono-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}
:root{

    --bg:#f5f7f6;
    --bg-soft:#eef3f0;

    --surface:rgba(255,255,255,.68);
    --surface-strong:rgba(255,255,255,.92);

    --text:#17231e;
    --muted:#718079;

    --line:rgba(18,38,29,.09);

    --accent:#168b63;
    --accent-dark:#0d6848;
    --accent-soft:rgba(22,139,99,.13);

    --glow:rgba(22,139,99,.18);

    --shadow-sm:
        0 8px 25px rgba(20,40,30,.06);

    --shadow:
        0 18px 55px rgba(20,40,30,.10);

    --shadow-lg:
        0 35px 100px rgba(20,40,30,.15);

    --radius-sm:14px;
    --radius:22px;
    --radius-lg:30px;

    --header-height:82px;

    --transition:.25s cubic-bezier(.2,.8,.2,1);
}


/* =========================
   DARK MODE
========================= */

html[data-theme="dark"]{

    --bg:#0b1110;
    --bg-soft:#101a17;

    --surface:rgba(18,29,25,.72);
    --surface-strong:rgba(20,32,28,.94);

    --text:#eef7f2;
    --muted:#9cafa6;

    --line:rgba(255,255,255,.09);

    --shadow-sm:
        0 8px 30px rgba(0,0,0,.18);

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

    --shadow-lg:
        0 40px 120px rgba(0,0,0,.45);
}


/* =========================
   ACADEMY THEME
========================= */

body[data-area="academy"]{

    --accent:#1976d2;
    --accent-dark:#0d56a5;

    --accent-soft:rgba(25,118,210,.13);

    --glow:rgba(25,118,210,.20);
}


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

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    margin:0;

    min-height:100vh;

    font-family:Vazirmatn,system-ui,sans-serif;

    background:

        radial-gradient(
            circle at 5% 5%,
            var(--glow),
            transparent 28%
        ),

        radial-gradient(
            circle at 95% 15%,
            var(--glow),
            transparent 25%
        ),

        var(--bg);

    color:var(--text);

    line-height:1.9;

    transition:
        background .3s ease,
        color .3s ease;

    overflow-x:hidden;
}


body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.45;

    background-image:

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

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

    background-size:45px 45px;

    z-index:-1;
}


img{
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
textarea,
select{
    font:inherit;
}


button{
    cursor:pointer;
}


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

.container{

    width:min(
        1200px,
        calc(100% - 40px)
    );

    margin-inline:auto;
}


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

.glass{

    background:var(--surface);

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

    backdrop-filter:
        blur(22px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(150%);

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


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

.topbar{

    position:sticky;

    top:0;

    z-index:1000;

    width:100%;

    background:

        color-mix(
            in srgb,
            var(--bg) 78%,
            transparent
        );

    backdrop-filter:
        blur(20px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(150%);

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

    transition:
        background var(--transition),
        border var(--transition);
}


.nav{

    min-height:var(--header-height);

    display:flex;

    align-items:center;

    gap:24px;
}


/* =========================
   BRAND
========================= */

.brand{

    display:flex;

    align-items:center;

    gap:13px;

    flex-shrink:0;

    min-width:220px;
}


.brand img{
    width:120px;
    height:60px;
    object-fit:contain;
    object-position:center;
    display:block;
    transition:transform var(--transition);
}

.brand:hover img{

    transform:
        scale(1.035);
}


.brand-text{

    display:flex;

    flex-direction:column;

    justify-content:center;

    line-height:1.3;
}


.brand-text > span{

    font-size:15px;

    font-weight:900;

    letter-spacing:-.2px;
}


.brand-text small{

    margin-top:3px;

    color:var(--muted);

    font-size:11px;

    font-weight:500;

    white-space:nowrap;
}


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

.navlinks{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:3px;

    margin-right:auto;

    padding:5px;

    border-radius:18px;

    background:

        color-mix(
            in srgb,
            var(--surface) 75%,
            transparent
        );

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


.navlinks a{

    position:relative;

    padding:
        9px 13px;

    border-radius:13px;

    color:var(--muted);

    font-size:13px;

    font-weight:700;

    transition:
        all var(--transition);
}


.navlinks a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:5px;

    width:0;

    height:2px;

    border-radius:99px;

    background:var(--accent);

    transform:
        translateX(-50%);

    transition:
        width var(--transition);
}


.navlinks a:hover{

    color:var(--text);

    background:
        var(--accent-soft);
}


.navlinks a:hover::after{

    width:45%;
}


/* =========================
   ACTIONS
========================= */

.actions{

    display:flex;

    align-items:center;

    gap:8px;
}


.iconbtn{

    width:44px;

    height:44px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:4px;

    border-radius:15px;

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

    background:
        var(--surface);

    color:
        var(--text);

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

    transition:
        all var(--transition);
}


.iconbtn:hover{

    transform:
        translateY(-2px);

    background:
        var(--accent-soft);

    border-color:
        color-mix(
            in srgb,
            var(--accent) 35%,
            var(--line)
        );

    box-shadow:
        0 12px 30px var(--glow);
}


.iconbtn:active{

    transform:
        scale(.95);
}


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-height:46px;

    padding:
        11px 19px;

    border-radius:15px;

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

    font-weight:800;

    font-size:14px;

    transition:
        all var(--transition);

    position:relative;

    overflow:hidden;
}


.btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,.20),
            transparent
        );

    transform:
        translateX(-120%);

    transition:
        transform .55s ease;
}


.btn:hover::before{

    transform:
        translateX(120%);
}


.btn:hover{

    transform:
        translateY(-2px);
}


.btn:active{

    transform:
        scale(.97);
}


.btn-primary{

    color:white;

    border-color:transparent;

    background:

        linear-gradient(
            135deg,
            var(--accent),
            var(--accent-dark)
        );

    box-shadow:
        0 12px 30px var(--glow);
}


.btn-soft{

    background:
        var(--surface);

    color:
        var(--text);

    backdrop-filter:
        blur(12px);
}


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

.hero{

    padding:
        85px 0
        55px;
}


.hero-grid{

    display:grid;

    grid-template-columns:
        minmax(0,1.2fr)
        minmax(340px,.8fr);

    gap:45px;

    align-items:center;
}


.eyebrow{

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:
        7px 13px;

    border-radius:999px;

    color:
        var(--accent);

    background:
        var(--accent-soft);

    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent) 18%,
            transparent
        );

    font-size:12px;

    font-weight:900;
}


.hero h1{

    margin:
        18px 0 16px;

    font-size:
        clamp(
            36px,
            5vw,
            68px
        );

    line-height:1.28;

    letter-spacing:-1.5px;

    font-weight:900;
}


.hero p{

    max-width:720px;

    margin:0;

    font-size:17px;

    color:
        var(--muted);
}


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

.hero-card{

    position:relative;

    padding:30px;

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

    overflow:hidden;
}


.hero-card::before{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

    background:
        var(--glow);

    filter:
        blur(35px);

    left:-90px;

    bottom:-110px;

    pointer-events:none;
}


.hero-card::after{

    content:"";

    position:absolute;

    width:160px;

    height:160px;

    border-radius:50%;

    background:
        var(--accent-soft);

    filter:
        blur(30px);

    right:-70px;

    top:-70px;
}


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

.logo-stage{

    min-height:340px;

    display:grid;

    place-items:center;
}


.logo-stage img{
    width:min(380px,85%);
    height:230px;
    object-fit:contain;
    object-position:center;
    position:relative;
    z-index:2;
    filter:drop-shadow(0 20px 35px rgba(0,0,0,.08));
    animation:floatLogo 5s ease-in-out infinite;
    border-radius:24px;
    padding:20px;
    background:rgba(255,255,255,0.92);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.12),
        inset 0 0 0 1px rgba(255,255,255,0.5);
}

html[data-theme="dark"] .logo-stage img{
    background:rgba(255,255,255,0.95);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.5),
        inset 0 0 0 1px rgba(255,255,255,0.3);
}

@keyframes floatLogo{

    0%,
    100%{

        transform:
            translateY(0);
    }

    50%{

        transform:
            translateY(-10px);
    }
}


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

.section{

    padding:
        55px 0;
}


.section-head{

    display:flex;

    justify-content:space-between;

    align-items:end;

    gap:20px;

    margin-bottom:25px;
}


.section h2{

    margin:0;

    font-size:
        clamp(
            25px,
            3vw,
            33px
        );

    line-height:1.4;

    font-weight:900;
}


.muted{

    color:
        var(--muted);
}


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

.grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:20px;
}


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

.card{

    padding:20px;

    border-radius:
        var(--radius);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border var(--transition);
}


.card:hover{

    border-color:

        color-mix(
            in srgb,
            var(--accent) 20%,
            var(--line)
        );
}


/* =========================
   PRODUCT CARD
========================= */

.product-card,
.course-card{

    display:flex;

    flex-direction:column;

    height:100%;

    overflow:hidden;
}


.product-card:hover,
.course-card:hover{

    transform:
        translateY(-6px);

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


/* =========================
   PRODUCT IMAGE
========================= */

.thumb{

    width:100%;

    aspect-ratio:1 / 1;

    min-height:0;

    border-radius:19px;

    overflow:hidden;

    display:grid;

    place-items:center;

    background:

        linear-gradient(
            145deg,
            var(--surface-strong),
            var(--surface)
        );

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

    position:relative;
}


.thumb::after{

    content:"";

    position:absolute;

    width:150px;

    height:150px;

    border-radius:50%;

    background:
        var(--accent-soft);

    filter:
        blur(30px);

    z-index:0;
}


.thumb img{

    width:88%;

    height:88%;

    max-width:88%;

    max-height:88%;

    object-fit:contain;

    object-position:center;

    position:relative;

    z-index:2;

    transition:
        transform .4s ease;
}


.product-card:hover .thumb img,
.course-card:hover .thumb img{

    transform:
        scale(1.05);
}


/* =========================
   CARD BODY
========================= */

.card-body{

    display:flex;

    flex-direction:column;

    flex:1;

    gap:9px;

    padding-top:16px;
}


.card-body h3{

    margin:0;

    font-size:18px;

    line-height:1.6;

    font-weight:900;
}


.card-body p{

    margin:0;

    font-size:13px;
}


.card-actions{

    display:flex;

    gap:9px;

    margin-top:auto;

    padding-top:14px;
}


.card-actions .btn{

    flex:1;

    padding-inline:10px;
}


/* =========================
   PILL
========================= */

.pill{

    display:inline-flex;

    align-items:center;

    width:max-content;

    padding:
        5px 10px;

    border-radius:999px;

    background:
        var(--accent-soft);

    color:
        var(--accent);

    font-size:11px;

    font-weight:900;
}


/* =========================
   PRICE
========================= */

.price{

    color:
        var(--accent);

    font-size:20px;

    font-weight:900;

    margin-top:3px;
}


/* =========================
   SPLIT
========================= */

.split{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:24px;
}


/* =========================
   CHOICE
========================= */

.choice-grid{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:20px;

    margin-top:32px;
}


.choice{

    padding:28px;

    border-radius:28px;

    position:relative;

    overflow:hidden;

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}


.choice::after{

    content:"";

    position:absolute;

    width:150px;

    height:150px;

    border-radius:50%;

    background:
        var(--c);

    opacity:.08;

    left:-50px;

    bottom:-60px;

    filter:
        blur(20px);
}


.choice:hover{

    transform:
        translateY(-6px);

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


.choice.shop{

    --c:#168b63;
}


.choice.academy{

    --c:#1976d2;
}


.choice-icon{

    width:62px;

    height:62px;

    display:grid;

    place-items:center;

    border-radius:20px;

    background:

        color-mix(
            in srgb,
            var(--c) 14%,
            transparent
        );

    font-size:27px;
}


.choice h3{

    margin:
        16px 0 5px;

    font-size:28px;

    font-weight:900;
}


.choice p{

    color:
        var(--muted);

    margin-bottom:20px;
}


.choice .btn{

    background:
        var(--c);

    color:white;

    border:0;
}


/* =========================
   FORMS
========================= */

.form{

    display:grid;

    gap:15px;
}


.field{

    display:grid;

    gap:7px;
}


.field label{

    font-size:13px;

    font-weight:900;
}


.field input,
.field textarea,
.field select{

    width:100%;

    min-height:50px;

    padding:
        12px 15px;

    border-radius:15px;

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

    background:
        var(--surface-strong);

    color:
        var(--text);

    outline:none;

    transition:
        all var(--transition);
}


.field textarea{

    min-height:120px;

    resize:vertical;
}


.field input:focus,
.field textarea:focus,
.field select:focus{

    border-color:
        var(--accent);

    box-shadow:
        0 0 0 4px
        var(--accent-soft);
}


/* =========================
   DETAILS
========================= */

.detail{

    display:grid;

    grid-template-columns:
        minmax(320px,.9fr)
        minmax(0,1.1fr);

    gap:35px;

    align-items:start;
}


.detail-image{

    min-height:420px;

    display:grid;

    place-items:center;

    padding:25px;

    border-radius:28px;

    overflow:hidden;
}


.detail-image img{

    width:100%;

    height:100%;

    max-width:420px;

    max-height:420px;

    object-fit:contain;
}


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

.stat-row{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:12px;
}


.stat{

    padding:16px;

    border-radius:18px;

    background:
        var(--surface-strong);

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


.stat b{

    display:block;

    margin-top:4px;

    font-size:20px;

    color:
        var(--accent);
}


/* =========================
   EMPTY
========================= */

.empty{

    padding:45px 25px;

    text-align:center;

    color:
        var(--muted);

    border:
        2px dashed var(--line);

    border-radius:24px;
}


/* =========================
   TOAST
========================= */

.toast{

    position:fixed;

    left:25px;

    bottom:25px;

    z-index:5000;

    max-width:360px;

    padding:
        14px 18px;

    border-radius:17px;

    background:
        var(--text);

    color:
        var(--bg);

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

    transform:
        translateY(150px);

    opacity:0;

    transition:
        all .35s ease;
}


.toast.show{

    transform:
        translateY(0);

    opacity:1;
}


/* =========================
   MODAL
========================= */

.modal-backdrop{

    position:fixed;

    inset:0;

    z-index:3000;

    display:none;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:
        rgba(0,0,0,.45);

    backdrop-filter:
        blur(8px);
}


.modal-backdrop.show{

    display:flex;
}


.modal{

    width:
        min(560px,100%);

    padding:25px;

    border-radius:28px;

    background:
        var(--surface-strong);

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


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

.footer{

    margin-top:80px;

    padding:
        55px 0 30px;

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

    background:

        linear-gradient(
            180deg,
            transparent,
            var(--bg-soft)
        );
}


.footer-grid{

    display:grid;

    grid-template-columns:
        1.5fr 1fr 1fr;

    gap:35px;
}


.footer-grid b{

    font-size:16px;

    font-weight:900;
}


.footer-grid p{

    color:
        var(--muted);

    font-size:13px;
}


.footer a{

    transition:
        color var(--transition);
}


.footer a:hover{

    color:
        var(--accent);
}


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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
            translateY(20px);
    }

    to{

        opacity:1;

        transform:
            translateY(0);
    }
}


.hero,
.section{

    animation:
        fadeUp .55s ease both;
}


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

@media(max-width:1000px){

    .hero-grid{

        grid-template-columns:
            1fr;
    }

    .logo-stage{

        min-height:280px;
    }

    .grid{

        grid-template-columns:
            repeat(2,1fr);
    }

    .navlinks{

        display:none;
    }

    .brand{

        min-width:0;
    }
}


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

@media(max-width:650px){

    .container{

        width:
            min(
                100% - 24px,
                1200px
            );
    }

    .nav{

        min-height:72px;

        gap:10px;
    }

    .brand{

        gap:7px;
    }

    .brand img{

        width:88px;

        height:48px;
    }

    .brand-text small{

        display:none;
    }

    .brand-text > span{

        font-size:12px;
    }

    .actions{

        gap:5px;
    }

    .iconbtn{

        width:40px;

        height:40px;

        border-radius:13px;
    }

    .hero{

        padding:
            55px 0
            30px;
    }

    .hero h1{

        font-size:38px;

        letter-spacing:-.8px;
    }

    .hero p{

        font-size:15px;
    }

    .choice-grid,
    .grid,
    .split,
    .footer-grid,
    .detail{

        grid-template-columns:
            1fr;
    }

    .section{

        padding:
            40px 0;
    }

    .section-head{

        align-items:start;

        flex-direction:column;
    }

    .card-actions{

        flex-direction:column;
    }

    .card-actions .btn{

        width:100%;
    }

    .stat-row{

        grid-template-columns:
            1fr 1fr;
    }

    .hero-card{

        padding:20px;
    }

    .logo-stage{

        min-height:230px;
    }

    .logo-stage img{

        height:170px;
    }

    .detail-image{

        min-height:300px;
    }

    .toast{

        left:12px;

        right:12px;

        bottom:12px;

        max-width:none;
    }
}



/* =========================
   FOOTER V2 - Glassmorphism
========================= */

.footer{
    margin-top:80px;
    padding:60px 0 30px;
    border-top:1px solid var(--line);
    background:
        linear-gradient(
            180deg,
            transparent,
            var(--bg-soft)
        );
    position:relative;
    overflow:hidden;
}

.footer::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--accent),
            transparent
        );
    opacity:.4;
}

.footer-grid{
    display:grid;
    grid-template-columns:
        2fr 1fr 1fr 1.3fr;
    gap:40px;
    padding-bottom:40px;
    border-bottom:1px solid var(--line);
}

.footer-col{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.footer-brand{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.footer-brand img{
    width:130px;
    height:65px;
    object-fit:contain;
    object-position:right;
    padding:4px 8px;
    background:rgba(255,255,255,0.85);
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.3);
}

html[data-theme="dark"] .footer-brand img{
    background:rgba(255,255,255,0.92);
}

.footer-brand p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.9;
}

.footer-col b{
    display:block;
    margin-bottom:5px;
    font-size:15px;
    font-weight:900;
    color:var(--text);
}

.footer-col a{
    display:inline-block;
    color:var(--muted);
    font-size:13px;
    line-height:2.2;
    transition:all .25s ease;
    text-decoration:none;
}

.footer-col a:hover{
    color:var(--accent);
    padding-right:6px;
}

.footer-col p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:2;
}

.footer-contact-item{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--muted);
    font-size:13px;
    margin-bottom:4px;
}

.footer-contact-item span{
    color:var(--accent);
    font-size:16px;
}

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

.footer-social a{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:var(--surface);
    border:1px solid var(--line);
    font-size:16px;
    transition:all .25s ease;
    padding:0;
}

.footer-social a:hover{
    background:var(--accent-soft);
    border-color:var(--accent);
    transform:translateY(-3px);
    padding:0;
}

.footer-enamad{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    padding:25px 0;
    border-bottom:1px solid var(--line);
}

.footer-enamad img{
    height:75px;
    width:auto;
    opacity:.85;
    transition:opacity .3s;
    background:rgba(255,255,255,0.9);
    border-radius:8px;
    padding:5px;
}

.footer-enamad img:hover{
    opacity:1;
}

.footer-copyright{
    text-align:center;
    padding-top:25px;
    color:var(--muted);
    font-size:12px;
}

.footer-copyright p{
    margin:0 0 6px;
}

.footer-copyright a{
    color:var(--accent);
    font-weight:700;
}

/* ===== Footer Responsive ===== */
@media(max-width:1000px){

    .footer-grid{
        grid-template-columns:
            1fr 1fr;
        gap:30px;
    }

}

@media(max-width:650px){

    .footer{
        padding:40px 0 20px;
        margin-top:50px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:25px;
        text-align:center;
    }

    .footer-brand{
        align-items:center;
    }

    .footer-brand img{
        object-position:center;
    }

    .footer-social{
        justify-content:center;
    }

    .footer-contact-item{
        justify-content:center;
    }

    .footer-enamad img{
        height:60px;
    }

}


/* =========================
   CONTACT PAGE
========================= */

.contact-hero{
    padding:70px 0 40px;
    text-align:center;
}

.contact-hero h1{
    margin:15px 0;
    font-size:clamp(32px,4vw,52px);
    font-weight:900;
    letter-spacing:-1px;
}

.contact-hero p{
    max-width:650px;
    margin:0 auto;
    color:var(--muted);
    font-size:16px;
    line-height:2;
}

/* ===== Contact Layout ===== */
.contact-layout{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:30px;
    align-items:start;
}

/* ===== Contact Info Cards ===== */
.contact-info{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.contact-info-card{
    padding:22px;
    border-radius:22px;
    display:flex;
    align-items:flex-start;
    gap:15px;
    transition:all .3s ease;
}

.contact-info-card:hover{
    border-color:var(--accent);
    transform:translateY(-3px);
}

.contact-info-icon{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border-radius:15px;
    background:var(--accent-soft);
    color:var(--accent);
    font-size:22px;
    flex-shrink:0;
}

.contact-info-content{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.contact-info-content b{
    font-size:15px;
    font-weight:900;
    color:var(--text);
}

.contact-info-content span,
.contact-info-content a{
    color:var(--muted);
    font-size:13px;
    line-height:1.9;
    text-decoration:none;
}

.contact-info-content a:hover{
    color:var(--accent);
}

/* ===== Contact Form ===== */
.contact-form-card{
    padding:30px;
    border-radius:28px;
}

.contact-form-card h2{
    margin:0 0 8px;
    font-size:24px;
    font-weight:900;
}

.contact-form-card > p{
    margin:0 0 25px;
    color:var(--muted);
    font-size:14px;
    line-height:1.9;
}

.contact-form{
    display:grid;
    gap:15px;
}

.contact-form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.contact-form textarea{
    min-height:130px;
    resize:vertical;
}

.contact-submit{
    width:100%;
    min-height:52px;
    font-size:15px;
}

/* ===== Contact Success ===== */
.contact-success{
    display:none;
    text-align:center;
    padding:40px 20px;
}

.contact-success.show{
    display:block;
}

.contact-success .icon{
    width:80px;
    height:80px;
    margin:0 auto 20px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--accent-soft);
    font-size:38px;
}

.contact-success h3{
    margin:0 0 10px;
    font-size:22px;
    font-weight:900;
}

.contact-success p{
    color:var(--muted);
    font-size:14px;
    margin:0 0 20px;
}

/* ===== Contact Map ===== */
.contact-map{
    margin-top:40px;
    padding:25px;
    border-radius:28px;
    overflow:hidden;
}

.contact-map h3{
    margin:0 0 15px;
    font-size:20px;
    font-weight:900;
}

.contact-map-frame{
    width:100%;
    min-height:350px;
    border-radius:20px;
    overflow:hidden;
    background:var(--surface-strong);
    display:grid;
    place-items:center;
    border:1px solid var(--line);
}

.contact-map-frame iframe{
    width:100%;
    height:350px;
    border:0;
    display:block;
}

/* ===== Contact FAQ ===== */
.contact-faq{
    margin-top:40px;
}

.contact-faq h3{
    margin:0 0 20px;
    font-size:22px;
    font-weight:900;
    text-align:center;
}

.faq-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    max-width:820px;
    margin:0 auto;
}

.faq-item{
    padding:20px 24px;
    border-radius:20px;
    cursor:pointer;
    transition:all .3s ease;
}

.faq-item:hover{
    border-color:var(--accent);
}

.faq-question{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    font-size:15px;
    font-weight:800;
    color:var(--text);
}

.faq-question::after{
    content:"+";
    color:var(--accent);
    font-size:22px;
    font-weight:900;
    transition:transform .3s ease;
}

.faq-item.open .faq-question::after{
    transform:rotate(45deg);
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease, padding .3s ease;
    color:var(--muted);
    font-size:13px;
    line-height:2;
}

.faq-item.open .faq-answer{
    max-height:400px;
    padding-top:15px;
}

/* ===== Contact Responsive ===== */
@media(max-width:1000px){
    .contact-layout{
        grid-template-columns:1fr;
    }
}

@media(max-width:650px){
    .contact-form-row{
        grid-template-columns:1fr;
    }
    .contact-info-card{
        padding:18px;
    }
    .contact-form-card{
        padding:22px;
    }
}

/* =========================
   ABOUT PAGE
========================= */

.about-hero{
    padding:70px 0 50px;
    text-align:center;
}

.about-hero h1{
    margin:15px 0;
    font-size:clamp(32px,4vw,52px);
    font-weight:900;
    letter-spacing:-1px;
}

.about-hero p{
    max-width:700px;
    margin:0 auto;
    color:var(--muted);
    font-size:16px;
    line-height:2.1;
}

/* ===== About Stats ===== */
.about-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin-top:40px;
}

.about-stat-card{
    padding:25px 20px;
    border-radius:24px;
    text-align:center;
    transition:all .3s ease;
}

.about-stat-card:hover{
    transform:translateY(-5px);
    border-color:var(--accent);
}

.about-stat-icon{
    font-size:32px;
    margin-bottom:10px;
}

.about-stat-number{
    font-size:32px;
    font-weight:900;
    color:var(--accent);
    line-height:1.2;
    margin:5px 0;
}

.about-stat-label{
    color:var(--muted);
    font-size:13px;
    font-weight:700;
}

/* ===== About Story ===== */
.about-story{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:40px;
    align-items:center;
    margin-top:60px;
}

.about-story-text h2{
    margin:0 0 20px;
    font-size:clamp(24px,3vw,34px);
    font-weight:900;
    line-height:1.4;
}

.about-story-text p{
    margin:0 0 15px;
    color:var(--muted);
    font-size:15px;
    line-height:2.2;
    text-align:justify;
}

.about-story-text strong{
    color:var(--accent);
    font-weight:900;
}

.about-story-image{
    padding:30px;
    border-radius:28px;
    display:grid;
    place-items:center;
    min-height:380px;
    position:relative;
    overflow:hidden;
}

.about-story-image::before{
    content:"";
    position:absolute;
    width:200px;
    height:200px;
    border-radius:50%;
    background:var(--glow);
    filter:blur(40px);
    top:-50px;
    right:-50px;
}

.about-story-image img{
    width:100%;
    max-width:320px;
    height:auto;
    object-fit:contain;
    position:relative;
    z-index:2;
    filter:drop-shadow(0 15px 30px rgba(0,0,0,0.1));
}

/* ===== About Timeline ===== */
.about-timeline-section{
    margin-top:70px;
}

.about-timeline-section h2{
    text-align:center;
    margin:0 0 40px;
    font-size:clamp(24px,3vw,34px);
    font-weight:900;
}

.timeline{
    position:relative;
    max-width:850px;
    margin:0 auto;
    padding:20px 0;
}

.timeline::before{
    content:"";
    position:absolute;
    right:30px;
    top:0;
    bottom:0;
    width:2px;
    background:linear-gradient(to bottom,transparent,var(--accent),transparent);
}

.timeline-item{
    display:flex;
    gap:30px;
    margin-bottom:35px;
    position:relative;
    padding-right:70px;
}

.timeline-dot{
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--accent);
    position:absolute;
    right:23px;
    top:8px;
    box-shadow:0 0 20px var(--glow);
    z-index:2;
}

.timeline-year{
    min-width:70px;
    font-size:18px;
    font-weight:900;
    color:var(--accent);
    padding-top:2px;
}

.timeline-content{
    flex:1;
    padding:20px 24px;
    border-radius:20px;
    transition:all .3s ease;
}

.timeline-content:hover{
    border-color:var(--accent);
    transform:translateX(-5px);
}

.timeline-content h3{
    margin:0 0 8px;
    font-size:17px;
    font-weight:900;
    color:var(--accent);
}

.timeline-content p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:2;
}

/* ===== About Values ===== */
.about-values-section{
    margin-top:70px;
}

.about-values-section h2{
    text-align:center;
    margin:0 0 15px;
    font-size:clamp(24px,3vw,34px);
    font-weight:900;
}

.about-values-section > .container > p{
    text-align:center;
    color:var(--muted);
    font-size:15px;
    max-width:600px;
    margin:0 auto 40px;
    line-height:2;
}

.values-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.value-card{
    padding:30px 24px;
    border-radius:24px;
    text-align:center;
    transition:all .3s ease;
}

.value-card:hover{
    transform:translateY(-6px);
    border-color:var(--accent);
    box-shadow:var(--shadow-lg);
}

.value-icon{
    width:70px;
    height:70px;
    margin:0 auto 18px;
    display:grid;
    place-items:center;
    border-radius:20px;
    background:var(--accent-soft);
    font-size:30px;
}

.value-card h3{
    margin:0 0 10px;
    font-size:18px;
    font-weight:900;
}

.value-card p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:2;
}

/* ===== About Team ===== */
.about-team-section{
    margin-top:70px;
}

.about-team-section h2{
    text-align:center;
    margin:0 0 15px;
    font-size:clamp(24px,3vw,34px);
    font-weight:900;
}

.about-team-section > .container > p{
    text-align:center;
    color:var(--muted);
    font-size:15px;
    max-width:600px;
    margin:0 auto 40px;
    line-height:2;
}

.team-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.team-card{
    padding:30px 24px;
    border-radius:24px;
    text-align:center;
    transition:all .3s ease;
}

.team-card:hover{
    transform:translateY(-6px);
    border-color:var(--accent);
}

.team-avatar{
    width:100px;
    height:100px;
    margin:0 auto 18px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));
    color:white;
    font-size:36px;
    font-weight:900;
    box-shadow:0 10px 30px var(--glow);
}

.team-card h3{
    margin:0 0 5px;
    font-size:18px;
    font-weight:900;
}

.team-card .role{
    color:var(--accent);
    font-size:13px;
    font-weight:700;
    margin-bottom:12px;
}

.team-card p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:2;
}

/* ===== About CTA ===== */
.about-cta{
    margin-top:70px;
    padding:50px 40px;
    border-radius:30px;
    text-align:center;
    background:
        linear-gradient(
            135deg,
            var(--accent-soft),
            transparent
        );
    border:1px solid var(--line);
}

.about-cta h2{
    margin:0 0 15px;
    font-size:clamp(24px,3vw,32px);
    font-weight:900;
}

.about-cta p{
    margin:0 auto 25px;
    max-width:600px;
    color:var(--muted);
    font-size:15px;
    line-height:2;
}

.about-cta-buttons{
    display:flex;
    gap:15px;
    justify-content:center;
    flex-wrap:wrap;
}

/* ===== About Responsive ===== */
@media(max-width:1000px){
    .about-stats{
        grid-template-columns:repeat(2,1fr);
    }
    .about-story{
        grid-template-columns:1fr;
    }
    .values-grid,
    .team-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:650px){
    .about-hero h1{
        font-size:30px;
    }
    .about-stats{
        grid-template-columns:1fr 1fr;
    }
    .about-stat-number{
        font-size:24px;
    }
    .timeline::before{
        right:15px;
    }
    .timeline-item{
        flex-direction:column;
        gap:5px;
        padding-right:45px;
    }
    .timeline-dot{
        right:8px;
    }
    .values-grid,
    .team-grid{
        grid-template-columns:1fr;
    }
    .about-cta{
        padding:35px 20px;
    }
}

/* =========================
   SERVICES PAGE
========================= */

.services-hero{
    padding:70px 0 50px;
    text-align:center;
}

.services-hero h1{
    margin:15px 0;
    font-size:clamp(32px,4vw,52px);
    font-weight:900;
    letter-spacing:-1px;
}

.services-hero p{
    max-width:700px;
    margin:0 auto;
    color:var(--muted);
    font-size:16px;
    line-height:2.1;
}

/* ===== Services Grid ===== */
.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin-top:50px;
}

.service-card{
    padding:35px 28px;
    border-radius:28px;
    transition:all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.service-card::before{
    content:"";
    position:absolute;
    width:200px;
    height:200px;
    border-radius:50%;
    background:var(--accent-soft);
    filter:blur(40px);
    top:-80px;
    left:-80px;
    opacity:0;
    transition:opacity .4s ease;
}

.service-card:hover::before{
    opacity:1;
}

.service-card:hover{
    transform:translateY(-8px);
    border-color:var(--accent);
    box-shadow:var(--shadow-lg);
}

.service-icon{
    width:70px;
    height:70px;
    display:grid;
    place-items:center;
    border-radius:20px;
    background:linear-gradient(135deg,var(--accent-soft),transparent);
    border:1px solid var(--line);
    font-size:32px;
    margin-bottom:20px;
    position:relative;
    z-index:2;
}

.service-card h3{
    margin:0 0 12px;
    font-size:20px;
    font-weight:900;
    position:relative;
    z-index:2;
}

.service-card > p{
    margin:0 0 20px;
    color:var(--muted);
    font-size:14px;
    line-height:2;
    flex:1;
    position:relative;
    z-index:2;
}

.service-features{
    list-style:none;
    padding:0;
    margin:0 0 20px;
    display:flex;
    flex-direction:column;
    gap:8px;
    position:relative;
    z-index:2;
}

.service-features li{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--muted);
    font-size:13px;
    line-height:1.8;
}

.service-features li::before{
    content:"✓";
    color:var(--accent);
    font-weight:900;
    font-size:14px;
    flex-shrink:0;
}

.service-price{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:18px;
    border-top:1px solid var(--line);
    margin-top:auto;
    position:relative;
    z-index:2;
}

.service-price span{
    color:var(--accent);
    font-size:17px;
    font-weight:900;
}

.service-price small{
    color:var(--muted);
    font-size:12px;
}

/* ===== Services Process ===== */
.services-process{
    margin-top:70px;
}

.services-process h2{
    text-align:center;
    margin:0 0 15px;
    font-size:clamp(24px,3vw,34px);
    font-weight:900;
}

.services-process > .container > p{
    text-align:center;
    color:var(--muted);
    font-size:15px;
    max-width:600px;
    margin:0 auto 40px;
    line-height:2;
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    position:relative;
}

.process-step{
    padding:30px 24px;
    border-radius:24px;
    text-align:center;
    transition:all .3s ease;
    position:relative;
}

.process-step:hover{
    transform:translateY(-5px);
    border-color:var(--accent);
}

.process-number{
    width:50px;
    height:50px;
    margin:0 auto 15px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));
    color:white;
    font-size:20px;
    font-weight:900;
    box-shadow:0 8px 20px var(--glow);
}

.process-step h3{
    margin:0 0 10px;
    font-size:16px;
    font-weight:900;
}

.process-step p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.9;
}

/* ===== Services CTA ===== */
.services-cta{
    margin-top:70px;
    padding:50px 40px;
    border-radius:30px;
    text-align:center;
    background:
        linear-gradient(
            135deg,
            var(--accent-soft),
            transparent
        );
    border:1px solid var(--line);
}

.services-cta h2{
    margin:0 0 15px;
    font-size:clamp(24px,3vw,32px);
    font-weight:900;
}

.services-cta p{
    margin:0 auto 25px;
    max-width:600px;
    color:var(--muted);
    font-size:15px;
    line-height:2;
}

.services-cta-buttons{
    display:flex;
    gap:15px;
    justify-content:center;
    flex-wrap:wrap;
}

/* ===== Services Responsive ===== */
@media(max-width:1000px){
    .services-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .process-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:650px){
    .services-hero h1{
        font-size:30px;
    }
    .services-grid,
    .process-grid{
        grid-template-columns:1fr;
    }
    .services-cta{
        padding:35px 20px;
    }
}
/* =========================
   PRODUCT CARD V2 - حرفه‌ای
========================= */

.product-card{
    display:flex;
    flex-direction:column;
    height:100%;
    overflow:hidden;
    border-radius:24px;
    transition:all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position:relative;
}

.product-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-lg);
    border-color:var(--accent);
}

/* ===== Product Image (مربعی) ===== */
.product-card .thumb{
    width:100%;
    aspect-ratio:1 / 1;
    min-height:0;
    border-radius:20px;
    overflow:hidden;
    display:grid;
    place-items:center;
    background:
        linear-gradient(
            145deg,
            var(--surface-strong),
            var(--surface)
        );
    border:1px solid var(--line);
    position:relative;
    padding:15px;
}

.product-card .thumb::before{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    border-radius:50%;
    background:var(--accent-soft);
    filter:blur(35px);
    z-index:0;
    opacity:.6;
    transition:opacity .4s ease;
}

.product-card:hover .thumb::before{
    opacity:1;
}

.product-card .thumb img{
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    object-position:center;
    position:relative;
    z-index:2;
    transition:transform .5s ease;
    filter:drop-shadow(0 10px 20px rgba(0,0,0,0.08));
}

.product-card:hover .thumb img{
    transform:scale(1.08);
}

/* ===== Product Discount Badge ===== */
.product-discount-badge{
    position:absolute;
    top:12px;
    right:12px;
    z-index:5;
    padding:5px 12px;
    border-radius:999px;
    background:linear-gradient(135deg,#ef4444,#dc2626);
    color:white;
    font-size:11px;
    font-weight:900;
    box-shadow:0 6px 15px rgba(239,68,68,0.4);
    animation:pulseBadge 2s ease-in-out infinite;
}

@keyframes pulseBadge{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.05)}
}

/* ===== Product Stock Status ===== */
.product-stock{
    position:absolute;
    top:12px;
    left:12px;
    z-index:5;
    padding:5px 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
}

.product-stock.in-stock{
    background:rgba(16,185,129,0.15);
    color:#10b981;
    border:1px solid rgba(16,185,129,0.3);
}

.product-stock.out-stock{
    background:rgba(239,68,68,0.15);
    color:#ef4444;
    border:1px solid rgba(239,68,68,0.3);
}

/* ===== Product Body ===== */
.product-card .card-body{
    display:flex;
    flex-direction:column;
    flex:1;
    gap:10px;
    padding-top:18px;
}

.product-card .card-body h3{
    margin:0;
    font-size:17px;
    line-height:1.6;
    font-weight:900;
    color:var(--text);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.product-card .card-body > p{
    margin:0;
    font-size:13px;
    line-height:1.9;
    color:var(--muted);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* ===== Product Meta ===== */
.product-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-top:4px;
}

.product-meta .category{
    display:inline-flex;
    align-items:center;
    padding:4px 10px;
    border-radius:999px;
    background:var(--accent-soft);
    color:var(--accent);
    font-size:11px;
    font-weight:900;
}

.product-meta .weight-info{
    color:var(--muted);
    font-size:11px;
    font-weight:700;
}

/* ===== Product Price ===== */
.product-card .price{
    color:var(--accent);
    font-size:20px;
    font-weight:900;
    margin-top:2px;
    display:flex;
    align-items:baseline;
    gap:6px;
}

.product-card .price small{
    font-size:11px;
    color:var(--muted);
    font-weight:500;
}

/* ===== Product Actions ===== */
.product-card .card-actions{
    display:flex;
    gap:9px;
    margin-top:auto;
    padding-top:14px;
    border-top:1px solid var(--line);
}

.product-card .card-actions .btn{
    flex:1;
    padding:10px 12px;
    font-size:13px;
    min-height:42px;
}

.product-card .card-actions .btn-soft{
    flex:0.8;
}

.product-card .card-actions .btn-primary{
    flex:1.2;
}

/* ===== Add to Cart Button Animation ===== */
.product-card .card-actions .btn-primary:active{
    transform:scale(0.96);
}

/* ===== Product Card Responsive ===== */
@media(max-width:650px){
    .product-card .thumb{
        padding:10px;
    }
    .product-card .card-body h3{
        font-size:15px;
    }
    .product-card .price{
        font-size:17px;
    }
    .product-card .card-actions .btn{
        font-size:12px;
        padding:8px 10px;
        min-height:38px;
    }
}


/* =========================
   PRODUCT DETAIL PAGE
========================= */

.product-detail-wrapper{
    padding:40px 0 60px;
}

/* ===== Breadcrumb ===== */
.breadcrumb{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:25px;
    font-size:13px;
    color:var(--muted);
}

.breadcrumb a{
    color:var(--muted);
    transition:color .25s ease;
}

.breadcrumb a:hover{
    color:var(--accent);
}

.breadcrumb span{
    opacity:.5;
}

/* ===== Product Detail Layout ===== */
.product-detail-grid{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:40px;
    align-items:start;
    margin-bottom:50px;
}

/* ===== Product Gallery ===== */
.product-gallery-box{
    position:sticky;
    top:100px;
}

.product-main-image{
    width:100%;
    aspect-ratio:1 / 1;
    border-radius:24px;
    overflow:hidden;
    display:grid;
    place-items:center;
    background:
        linear-gradient(
            145deg,
            var(--surface-strong),
            var(--surface)
        );
    border:1px solid var(--line);
    padding:30px;
    margin-bottom:15px;
    position:relative;
}

.product-main-image::before{
    content:"";
    position:absolute;
    width:200px;
    height:200px;
    border-radius:50%;
    background:var(--accent-soft);
    filter:blur(50px);
    opacity:.5;
    z-index:0;
}

.product-main-image img{
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    object-position:center;
    position:relative;
    z-index:2;
    transition:transform .5s ease;
    filter:drop-shadow(0 15px 30px rgba(0,0,0,0.1));
}

.product-main-image:hover img{
    transform:scale(1.05);
}

.product-thumbnails{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
}

.product-thumbnail{
    width:100%;
    aspect-ratio:1 / 1;
    border-radius:14px;
    overflow:hidden;
    display:grid;
    place-items:center;
    background:var(--surface);
    border:2px solid var(--line);
    padding:8px;
    cursor:pointer;
    transition:all .3s ease;
}

.product-thumbnail:hover,
.product-thumbnail.active{
    border-color:var(--accent);
    transform:translateY(-3px);
}

.product-thumbnail img{
    width:100%;
    height:100%;
    object-fit:contain;
}

/* ===== Product Info ===== */
.product-info-box h1{
    margin:0 0 12px;
    font-size:clamp(24px,3vw,36px);
    font-weight:900;
    line-height:1.4;
}

.product-info-meta{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.product-info-meta .category{
    display:inline-flex;
    align-items:center;
    padding:5px 14px;
    border-radius:999px;
    background:var(--accent-soft);
    color:var(--accent);
    font-size:12px;
    font-weight:900;
}

.product-info-meta .stock-status{
    display:inline-flex;
    align-items:center;
    padding:5px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
}

.product-info-meta .stock-status.in-stock{
    background:rgba(16,185,129,0.15);
    color:#10b981;
}

.product-info-meta .stock-status.out-stock{
    background:rgba(239,68,68,0.15);
    color:#ef4444;
}

.product-info-box .description{
    color:var(--muted);
    font-size:15px;
    line-height:2.1;
    margin-bottom:25px;
    text-align:justify;
}

/* ===== Weight Selector ===== */
.weight-selector-box{
    padding:22px;
    border-radius:22px;
    margin-bottom:20px;
}

.weight-selector-box > label{
    display:block;
    margin-bottom:12px;
    font-size:14px;
    font-weight:900;
    color:var(--text);
}

.weight-options{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
    gap:10px;
}

.weight-option{
    padding:14px;
    border-radius:16px;
    background:var(--surface-strong);
    border:2px solid var(--line);
    cursor:pointer;
    transition:all .3s ease;
    text-align:center;
}

.weight-option:hover{
    border-color:var(--accent);
    transform:translateY(-2px);
}

.weight-option.selected{
    border-color:var(--accent);
    background:var(--accent-soft);
    box-shadow:0 8px 20px var(--glow);
}

.weight-option .weight-label{
    font-size:14px;
    font-weight:900;
    color:var(--text);
    margin-bottom:4px;
}

.weight-option .weight-price{
    font-size:13px;
    font-weight:900;
    color:var(--accent);
}

.weight-option .weight-stock{
    font-size:11px;
    color:var(--muted);
    margin-top:4px;
}

.weight-option.disabled{
    opacity:.5;
    cursor:not-allowed;
}

/* ===== Price Box ===== */
.product-price-box{
    display:flex;
    align-items:baseline;
    gap:12px;
    padding:20px 24px;
    border-radius:22px;
    margin-bottom:20px;
    background:
        linear-gradient(
            135deg,
            var(--accent-soft),
            transparent
        );
    border:1px solid var(--line);
}

.product-price-box .final-price{
    font-size:30px;
    font-weight:900;
    color:var(--accent);
}

.product-price-box .old-price{
    font-size:16px;
    color:var(--muted);
    text-decoration:line-through;
}

.product-price-box .discount-badge{
    padding:5px 12px;
    border-radius:999px;
    background:#ef4444;
    color:white;
    font-size:12px;
    font-weight:900;
    margin-right:auto;
}

/* ===== Add to Cart ===== */
.add-to-cart-section{
    display:flex;
    gap:12px;
    margin-bottom:25px;
}

.add-to-cart-section .btn{
    flex:1;
    min-height:54px;
    font-size:15px;
}

.add-to-cart-section .qty-control{
    display:flex;
    align-items:center;
    gap:8px;
    padding:5px;
    border-radius:16px;
    background:var(--surface-strong);
    border:1px solid var(--line);
}

.qty-control button{
    width:42px;
    height:42px;
    border-radius:12px;
    border:none;
    background:var(--surface);
    color:var(--text);
    font-size:18px;
    font-weight:900;
    cursor:pointer;
    transition:all .25s ease;
}

.qty-control button:hover{
    background:var(--accent-soft);
    color:var(--accent);
}

.qty-control span{
    min-width:40px;
    text-align:center;
    font-size:16px;
    font-weight:900;
}

/* ===== Product Features ===== */
.product-features{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
    padding-top:25px;
    border-top:1px solid var(--line);
}

.product-feature{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:15px 10px;
    border-radius:16px;
    background:var(--surface);
    border:1px solid var(--line);
}

.product-feature .icon{
    font-size:22px;
    margin-bottom:6px;
}

.product-feature .label{
    font-size:11px;
    font-weight:700;
    color:var(--muted);
}

/* ===== Product Tabs ===== */
.product-tabs{
    margin-top:30px;
    border-radius:24px;
    overflow:hidden;
}

.product-tabs-header{
    display:flex;
    border-bottom:1px solid var(--line);
    background:var(--surface);
}

.product-tabs-header button{
    flex:1;
    padding:18px;
    background:none;
    border:none;
    color:var(--muted);
    font-size:14px;
    font-weight:900;
    cursor:pointer;
    transition:all .25s ease;
    position:relative;
}

.product-tabs-header button.active{
    color:var(--accent);
}

.product-tabs-header button.active::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:3px;
    background:var(--accent);
    border-radius:3px 3px 0 0;
}

.product-tabs-content{
    padding:30px;
}

.product-tab-panel{
    display:none;
    color:var(--muted);
    font-size:14px;
    line-height:2.2;
}

.product-tab-panel.active{
    display:block;
    animation:fadeUp .4s ease;
}

.product-tab-panel h3{
    margin:0 0 15px;
    color:var(--text);
    font-size:16px;
    font-weight:900;
}

.product-tab-panel ul{
    padding-right:20px;
    margin:0;
}

.product-tab-panel li{
    margin-bottom:8px;
}

/* ===== Product Responsive ===== */
@media(max-width:1000px){
    .product-detail-grid{
        grid-template-columns:1fr;
    }
    .product-gallery-box{
        position:static;
    }
    .product-thumbnails{
        grid-template-columns:repeat(5, 1fr);
    }
}

@media(max-width:650px){
    .product-info-box h1{
        font-size:24px;
    }
    .product-price-box{
        padding:16px 18px;
    }
    .product-price-box .final-price{
        font-size:24px;
    }
    .add-to-cart-section{
        flex-direction:column;
    }
    .product-features{
        grid-template-columns:1fr;
    }
    .weight-options{
        grid-template-columns:1fr 1fr;
    }
    .product-tabs-header button{
        font-size:12px;
        padding:14px 8px;
    }
    .product-tabs-content{
        padding:20px;
    }
    .product-thumbnails{
        grid-template-columns:repeat(4, 1fr);
    }
}


/* =========================
   ACADEMY PAGE V2
========================= */

/* ===== Academy Hero ===== */
.academy-hero{
    padding:60px 0 50px;
    position:relative;
    overflow:hidden;
}

.academy-hero::before{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    border-radius:50%;
    background:rgba(25,118,210,0.10);
    filter:blur(80px);
    top:-100px;
    left:-100px;
    z-index:-1;
}

.academy-hero::after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    background:rgba(25,118,210,0.08);
    filter:blur(60px);
    bottom:-80px;
    right:-80px;
    z-index:-1;
}

.academy-hero-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:50px;
    align-items:center;
}

.academy-hero-text .eyebrow{
    background:rgba(25,118,210,0.13);
    color:#1976d2;
}

.academy-hero-text h1{
    margin:18px 0 16px;
    font-size:clamp(32px,4.5vw,58px);
    font-weight:900;
    line-height:1.3;
    letter-spacing:-1.2px;
}

.academy-hero-text p{
    max-width:600px;
    margin:0 0 25px;
    color:var(--muted);
    font-size:16px;
    line-height:2;
}

.academy-hero-buttons{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.academy-hero-buttons .btn-primary{
    background:linear-gradient(135deg,#1976d2,#0d56a5);
    box-shadow:0 12px 30px rgba(25,118,210,0.25);
}

/* ===== Academy Hero Stats ===== */
.academy-hero-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:30px;
    max-width:500px;
}

.academy-stat-mini{
    padding:16px 20px;
    border-radius:18px;
    display:flex;
    align-items:center;
    gap:12px;
}

.academy-stat-mini .icon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:rgba(25,118,210,0.13);
    font-size:20px;
    flex-shrink:0;
}

.academy-stat-mini b{
    display:block;
    font-size:20px;
    font-weight:900;
    color:#1976d2;
    line-height:1.2;
}

.academy-stat-mini span{
    color:var(--muted);
    font-size:12px;
}

/* ===== Academy Hero Card ===== */
.academy-hero-card{
    padding:35px;
    border-radius:30px;
    display:grid;
    place-items:center;
    min-height:380px;
    position:relative;
    overflow:hidden;
    border-color:rgba(25,118,210,0.15);
}

.academy-hero-card::before{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    border-radius:50%;
    background:rgba(25,118,210,0.18);
    filter:blur(50px);
    top:-50px;
    right:-50px;
}

.academy-hero-card::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(25,118,210,0.10);
    filter:blur(40px);
    bottom:-50px;
    left:-50px;
}

.academy-hero-card img{
    width:min(320px,80%);
    height:auto;
    max-height:280px;
    object-fit:contain;
    position:relative;
    z-index:2;
    border-radius:24px;
    padding:20px;
    background:rgba(255,255,255,0.92);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.12),
        inset 0 0 0 1px rgba(255,255,255,0.5);
    animation:floatLogo 5s ease-in-out infinite;
}

html[data-theme="dark"] .academy-hero-card img{
    background:rgba(255,255,255,0.95);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.5),
        inset 0 0 0 1px rgba(255,255,255,0.3);
}

/* ===== Academy Categories ===== */
.academy-categories{
    margin-top:50px;
}

.academy-categories h2{
    text-align:center;
    margin:0 0 12px;
    font-size:clamp(22px,3vw,32px);
    font-weight:900;
}

.academy-categories > .container > p{
    text-align:center;
    color:var(--muted);
    font-size:15px;
    max-width:600px;
    margin:0 auto 35px;
    line-height:2;
}

.categories-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.category-card{
    padding:25px 18px;
    border-radius:22px;
    text-align:center;
    cursor:pointer;
    transition:all .35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.category-card:hover{
    transform:translateY(-6px);
    border-color:#1976d2;
    box-shadow:0 20px 50px rgba(25,118,210,0.15);
}

.category-card .icon{
    width:60px;
    height:60px;
    margin:0 auto 12px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:rgba(25,118,210,0.13);
    font-size:26px;
}

.category-card h3{
    margin:0 0 5px;
    font-size:15px;
    font-weight:900;
    color:var(--text);
}

.category-card p{
    margin:0;
    color:var(--muted);
    font-size:12px;
}

/* ===== Academy Courses ===== */
.academy-courses{
    margin-top:60px;
}

.academy-courses .section-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:20px;
    margin-bottom:25px;
    flex-wrap:wrap;
}

.academy-courses .section-head h2{
    margin:0;
    font-size:clamp(22px,3vw,32px);
    font-weight:900;
}

/* ===== Course Card ===== */
.course-card{
    display:flex;
    flex-direction:column;
    height:100%;
    overflow:hidden;
    border-radius:24px;
    transition:all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position:relative;
}

.course-card:hover{
    transform:translateY(-8px);
    box-shadow:0 30px 80px rgba(25,118,210,0.15);
    border-color:#1976d2;
}

.course-card .thumb{
    width:100%;
    aspect-ratio:16/10;
    border-radius:20px;
    overflow:hidden;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,var(--surface-strong),var(--surface));
    border:1px solid var(--line);
    padding:12px;
    position:relative;
}

.course-card .thumb::before{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    border-radius:50%;
    background:rgba(25,118,210,0.13);
    filter:blur(35px);
    z-index:0;
    opacity:.6;
    transition:opacity .4s ease;
}

.course-card:hover .thumb::before{
    opacity:1;
}

.course-card .thumb img{
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    object-position:center;
    position:relative;
    z-index:2;
    transition:transform .5s ease;
}

.course-card:hover .thumb img{
    transform:scale(1.05);
}

/* ===== Course Badges ===== */
.course-badge{
    position:absolute;
    top:12px;
    right:12px;
    z-index:5;
    padding:5px 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
}

.course-badge.online{
    background:rgba(25,118,210,0.15);
    color:#1976d2;
    border:1px solid rgba(25,118,210,0.3);
}

.course-badge.offline{
    background:rgba(245,158,11,0.15);
    color:#f59e0b;
    border:1px solid rgba(245,158,11,0.3);
}

.course-badge.coming-soon{
    background:linear-gradient(135deg,#8b5cf6,#7c3aed);
    color:white;
    box-shadow:0 6px 15px rgba(139,92,246,0.4);
}

/* ===== Course Body ===== */
.course-card .card-body{
    display:flex;
    flex-direction:column;
    flex:1;
    gap:10px;
    padding-top:18px;
}

.course-card .card-body h3{
    margin:0;
    font-size:16px;
    line-height:1.6;
    font-weight:900;
    color:var(--text);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.course-card .card-body > p{
    margin:0;
    font-size:13px;
    line-height:1.9;
    color:var(--muted);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* ===== Course Meta ===== */
.course-meta{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin:5px 0;
}

.course-meta-item{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:12px;
    color:var(--muted);
}

.course-meta-item span:first-child{
    font-size:14px;
}

/* ===== Course Instructor ===== */
.course-instructor{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-radius:12px;
    background:var(--surface);
    margin-top:5px;
}

.course-instructor .avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#1976d2,#0d56a5);
    color:white;
    font-size:13px;
    font-weight:900;
    flex-shrink:0;
}

.course-instructor span{
    font-size:12px;
    color:var(--muted);
}

.course-instructor b{
    color:var(--text);
    font-size:12px;
}

/* ===== Course Price ===== */
.course-card .price{
    color:#1976d2;
    font-size:19px;
    font-weight:900;
    margin-top:2px;
    display:flex;
    align-items:baseline;
    gap:6px;
}

.course-card .price small{
    font-size:11px;
    color:var(--muted);
    font-weight:500;
}

/* ===== Course Actions ===== */
.course-card .card-actions{
    display:flex;
    gap:9px;
    margin-top:auto;
    padding-top:14px;
    border-top:1px solid var(--line);
}

.course-card .card-actions .btn{
    flex:1;
    padding:10px 12px;
    font-size:13px;
    min-height:42px;
}

.course-card .card-actions .btn-primary{
    background:linear-gradient(135deg,#1976d2,#0d56a5);
    box-shadow:0 12px 30px rgba(25,118,210,0.2);
}

/* ===== Academy Why Us ===== */
.academy-why{
    margin-top:70px;
}

.academy-why h2{
    text-align:center;
    margin:0 0 12px;
    font-size:clamp(22px,3vw,32px);
    font-weight:900;
}

.academy-why > .container > p{
    text-align:center;
    color:var(--muted);
    font-size:15px;
    max-width:600px;
    margin:0 auto 40px;
    line-height:2;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.why-card{
    padding:30px 24px;
    border-radius:24px;
    text-align:center;
    transition:all .3s ease;
}

.why-card:hover{
    transform:translateY(-6px);
    border-color:#1976d2;
}

.why-icon{
    width:70px;
    height:70px;
    margin:0 auto 18px;
    display:grid;
    place-items:center;
    border-radius:20px;
    background:rgba(25,118,210,0.13);
    font-size:30px;
}

.why-card h3{
    margin:0 0 10px;
    font-size:17px;
    font-weight:900;
}

.why-card p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:2;
}

/* ===== Academy CTA ===== */
.academy-cta{
    margin-top:70px;
    padding:50px 40px;
    border-radius:30px;
    text-align:center;
    background:linear-gradient(135deg,rgba(25,118,210,0.13),transparent);
    border:1px solid rgba(25,118,210,0.2);
}

.academy-cta h2{
    margin:0 0 15px;
    font-size:clamp(24px,3vw,32px);
    font-weight:900;
}

.academy-cta p{
    margin:0 auto 25px;
    max-width:600px;
    color:var(--muted);
    font-size:15px;
    line-height:2;
}

.academy-cta-buttons{
    display:flex;
    gap:15px;
    justify-content:center;
    flex-wrap:wrap;
}

.academy-cta-buttons .btn-primary{
    background:linear-gradient(135deg,#1976d2,#0d56a5);
    box-shadow:0 12px 30px rgba(25,118,210,0.25);
}

/* ===== Academy Responsive ===== */
@media(max-width:1000px){
    .academy-hero-grid{
        grid-template-columns:1fr;
    }
    .categories-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .why-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:650px){
    .academy-hero-text h1{
        font-size:28px;
    }
    .academy-hero-stats{
        grid-template-columns:1fr;
    }
    .categories-grid{
        grid-template-columns:1fr 1fr;
    }
    .why-grid{
        grid-template-columns:1fr;
    }
    .academy-cta{
        padding:35px 20px;
    }
    .course-card .card-actions{
        flex-direction:column;
    }
}
/* =========================
   COURSE DETAIL PAGE
========================= */

.course-detail-wrapper{
    padding:40px 0 60px;
}

/* ===== Course Hero ===== */
.course-hero-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:40px;
    align-items:start;
    margin-bottom:50px;
}

.course-hero-main{
    padding:30px;
    border-radius:28px;
    background:linear-gradient(145deg,var(--surface-strong),var(--surface));
    border:1px solid rgba(25,118,210,0.15);
    position:relative;
    overflow:hidden;
}

.course-hero-main::before{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    border-radius:50%;
    background:rgba(25,118,210,0.13);
    filter:blur(50px);
    top:-80px;
    right:-80px;
}

.course-hero-main::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(25,118,210,0.08);
    filter:blur(40px);
    bottom:-60px;
    left:-60px;
}

.course-hero-main img{
    width:100%;
    max-height:380px;
    object-fit:contain;
    object-position:center;
    position:relative;
    z-index:2;
    filter:drop-shadow(0 20px 40px rgba(0,0,0,0.1));
}

/* ===== Course Info Sidebar ===== */
.course-info-sidebar{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.course-info-box{
    padding:28px;
    border-radius:24px;
    border-color:rgba(25,118,210,0.15);
}

.course-info-box h1{
    margin:0 0 15px;
    font-size:clamp(22px,2.5vw,30px);
    font-weight:900;
    line-height:1.5;
    color:var(--text);
}

.course-info-meta{
    display:flex;
    gap:10px;
    margin-bottom:15px;
    flex-wrap:wrap;
}

.course-info-meta span{
    display:inline-flex;
    align-items:center;
    padding:5px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
}

.course-info-meta .online{
    background:rgba(25,118,210,0.13);
    color:#1976d2;
    border:1px solid rgba(25,118,210,0.25);
}

.course-info-meta .offline{
    background:rgba(245,158,11,0.15);
    color:#f59e0b;
    border:1px solid rgba(245,158,11,0.25);
}

.course-info-meta .coming-soon{
    background:linear-gradient(135deg,#8b5cf6,#7c3aed);
    color:white;
}

.course-info-box .desc{
    color:var(--muted);
    font-size:14px;
    line-height:2;
    margin-bottom:20px;
}

/* ===== Course Stats Grid ===== */
.course-stats-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:20px;
}

.course-stat-item{
    padding:14px 16px;
    border-radius:16px;
    background:var(--surface);
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    gap:10px;
}

.course-stat-item .icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:rgba(25,118,210,0.13);
    font-size:18px;
    flex-shrink:0;
}

.course-stat-item b{
    display:block;
    font-size:15px;
    font-weight:900;
    color:#1976d2;
    line-height:1.3;
}

.course-stat-item span{
    color:var(--muted);
    font-size:11px;
}

/* ===== Course Price Box ===== */
.course-price-main{
    padding:20px 24px;
    border-radius:20px;
    background:linear-gradient(135deg,rgba(25,118,210,0.13),transparent);
    border:1px solid rgba(25,118,210,0.2);
    margin-bottom:18px;
    text-align:center;
}

.course-price-main .price-value{
    font-size:32px;
    font-weight:900;
    color:#1976d2;
    line-height:1.2;
}

.course-price-main .price-label{
    color:var(--muted);
    font-size:12px;
    margin-top:5px;
}

.course-price-main .free-badge{
    font-size:24px;
    font-weight:900;
    color:#10b981;
}

/* ===== Course Enroll Button ===== */
.course-enroll-btn{
    width:100%;
    min-height:54px;
    font-size:15px;
    background:linear-gradient(135deg,#1976d2,#0d56a5);
    box-shadow:0 12px 30px rgba(25,118,210,0.25);
}

.course-enroll-btn:disabled{
    background:var(--surface);
    color:var(--muted);
    box-shadow:none;
    cursor:not-allowed;
}

/* ===== Course Instructor Box ===== */
.course-instructor-box{
    padding:20px;
    border-radius:20px;
    display:flex;
    align-items:center;
    gap:15px;
    border-color:rgba(25,118,210,0.15);
}

.course-instructor-avatar{
    width:60px;
    height:60px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#1976d2,#0d56a5);
    color:white;
    font-size:24px;
    font-weight:900;
    flex-shrink:0;
    box-shadow:0 8px 20px rgba(25,118,210,0.3);
}

.course-instructor-info b{
    display:block;
    font-size:15px;
    font-weight:900;
    color:var(--text);
    margin-bottom:3px;
}

.course-instructor-info span{
    color:var(--muted);
    font-size:12px;
}

/* ===== Course Syllabus ===== */
.course-syllabus-section{
    margin-top:50px;
}

.course-syllabus-section h2{
    margin:0 0 12px;
    font-size:clamp(22px,3vw,30px);
    font-weight:900;
}

.course-syllabus-section > .container > p{
    color:var(--muted);
    font-size:15px;
    margin-bottom:30px;
    line-height:2;
}

.syllabus-grid{
    display:grid;
    gap:15px;
}

.syllabus-item{
    padding:24px 28px;
    border-radius:22px;
    display:flex;
    gap:20px;
    align-items:flex-start;
    transition:all .3s ease;
}

.syllabus-item:hover{
    border-color:#1976d2;
    transform:translateX(-5px);
}

.syllabus-number{
    width:48px;
    height:48px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#1976d2,#0d56a5);
    color:white;
    font-size:18px;
    font-weight:900;
    flex-shrink:0;
    box-shadow:0 8px 20px rgba(25,118,210,0.25);
}

.syllabus-content{
    flex:1;
}

.syllabus-content h3{
    margin:0 0 10px;
    font-size:16px;
    font-weight:900;
    color:var(--text);
}

.syllabus-content ul{
    padding-right:20px;
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:2;
}

.syllabus-content li{
    margin-bottom:6px;
}

/* ===== Course Features ===== */
.course-features-section{
    margin-top:60px;
}

.course-features-section h2{
    text-align:center;
    margin:0 0 12px;
    font-size:clamp(22px,3vw,30px);
    font-weight:900;
}

.course-features-section > .container > p{
    text-align:center;
    color:var(--muted);
    font-size:15px;
    max-width:600px;
    margin:0 auto 40px;
    line-height:2;
}

.course-features-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.course-feature-box{
    padding:25px 20px;
    border-radius:22px;
    text-align:center;
    transition:all .3s ease;
}

.course-feature-box:hover{
    transform:translateY(-5px);
    border-color:#1976d2;
}

.course-feature-icon{
    width:60px;
    height:60px;
    margin:0 auto 15px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:rgba(25,118,210,0.13);
    font-size:26px;
}

.course-feature-box h3{
    margin:0 0 8px;
    font-size:15px;
    font-weight:900;
}

.course-feature-box p{
    margin:0;
    color:var(--muted);
    font-size:12px;
    line-height:1.9;
}

/* ===== Course CTA ===== */
.course-cta{
    margin-top:60px;
    padding:45px 35px;
    border-radius:28px;
    text-align:center;
    background:linear-gradient(135deg,rgba(25,118,210,0.13),transparent);
    border:1px solid rgba(25,118,210,0.2);
}

.course-cta h2{
    margin:0 0 15px;
    font-size:clamp(22px,3vw,30px);
    font-weight:900;
}

.course-cta p{
    margin:0 auto 25px;
    max-width:600px;
    color:var(--muted);
    font-size:15px;
    line-height:2;
}

.course-cta .btn-primary{
    background:linear-gradient(135deg,#1976d2,#0d56a5);
    box-shadow:0 12px 30px rgba(25,118,210,0.25);
}

/* ===== Course Detail Responsive ===== */
@media(max-width:1000px){
    .course-hero-grid{
        grid-template-columns:1fr;
    }
    .course-features-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:650px){
    .course-info-box h1{
        font-size:22px;
    }
    .course-stats-grid{
        grid-template-columns:1fr;
    }
    .course-price-main .price-value{
        font-size:24px;
    }
    .course-features-grid{
        grid-template-columns:1fr;
    }
    .syllabus-item{
        flex-direction:column;
        gap:12px;
    }
    .course-cta{
        padding:30px 20px;
    }
}


/* =========================
   ENROLL PAGE
========================= */

.enroll-wrapper{
    padding:40px 0 60px;
}

.enroll-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:35px;
    align-items:start;
}

/* ===== Enroll Form ===== */
.enroll-form-box{
    padding:35px;
    border-radius:28px;
    border-color:rgba(25,118,210,0.15);
}

.enroll-form-box h1{
    margin:0 0 8px;
    font-size:clamp(22px,2.5vw,30px);
    font-weight:900;
    line-height:1.4;
}

.enroll-form-box .subtitle{
    color:var(--muted);
    font-size:14px;
    line-height:2;
    margin:0 0 25px;
}

.enroll-form{
    display:grid;
    gap:18px;
}

.enroll-form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.enroll-form .field{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.enroll-form .field label{
    font-size:13px;
    font-weight:900;
    color:var(--text);
}

.enroll-form .field input,
.enroll-form .field select,
.enroll-form .field textarea{
    width:100%;
    min-height:50px;
    padding:12px 15px;
    border-radius:15px;
    border:1px solid var(--line);
    background:var(--surface-strong);
    color:var(--text);
    outline:none;
    font-family:inherit;
    font-size:14px;
    transition:all .25s ease;
}

.enroll-form .field textarea{
    min-height:100px;
    resize:vertical;
}

.enroll-form .field input:focus,
.enroll-form .field select:focus,
.enroll-form .field textarea:focus{
    border-color:#1976d2;
    box-shadow:0 0 0 4px rgba(25,118,210,0.13);
}

/* ===== Payment Type Selector ===== */
.payment-type-selector{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:10px;
}

.payment-type-option{
    padding:18px;
    border-radius:18px;
    background:var(--surface);
    border:2px solid var(--line);
    cursor:pointer;
    transition:all .3s ease;
    text-align:center;
}

.payment-type-option:hover{
    border-color:#1976d2;
    transform:translateY(-2px);
}

.payment-type-option.selected{
    border-color:#1976d2;
    background:rgba(25,118,210,0.08);
    box-shadow:0 8px 20px rgba(25,118,210,0.15);
}

.payment-type-option .icon{
    font-size:28px;
    margin-bottom:8px;
}

.payment-type-option h4{
    margin:0 0 5px;
    font-size:14px;
    font-weight:900;
    color:var(--text);
}

.payment-type-option small{
    color:var(--muted);
    font-size:11px;
    line-height:1.6;
}

/* ===== Enroll Submit ===== */
.enroll-submit-btn{
    width:100%;
    min-height:54px;
    font-size:15px;
    background:linear-gradient(135deg,#1976d2,#0d56a5);
    box-shadow:0 12px 30px rgba(25,118,210,0.25);
    margin-top:10px;
}

/* ===== Enroll Summary ===== */
.enroll-summary{
    position:sticky;
    top:100px;
    padding:30px;
    border-radius:28px;
    border-color:rgba(25,118,210,0.15);
}

.enroll-summary h3{
    margin:0 0 20px;
    font-size:18px;
    font-weight:900;
    color:var(--text);
}

.summary-course{
    display:flex;
    gap:15px;
    padding-bottom:20px;
    border-bottom:1px solid var(--line);
    margin-bottom:20px;
}

.summary-course-image{
    width:80px;
    height:80px;
    border-radius:16px;
    background:var(--surface);
    border:1px solid var(--line);
    display:grid;
    place-items:center;
    padding:8px;
    flex-shrink:0;
}

.summary-course-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.summary-course-info h4{
    margin:0 0 5px;
    font-size:15px;
    font-weight:900;
    color:var(--text);
    line-height:1.5;
}

.summary-course-info span{
    color:var(--muted);
    font-size:12px;
    line-height:1.8;
}

.summary-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    font-size:13px;
    color:var(--muted);
    border-bottom:1px dashed var(--line);
}

.summary-row:last-of-type{
    border-bottom:none;
}

.summary-row span:last-child{
    font-weight:900;
    color:var(--text);
}

.summary-total{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0 0;
    margin-top:15px;
    border-top:2px solid rgba(25,118,210,0.2);
    font-size:15px;
    font-weight:900;
    color:var(--text);
}

.summary-total span:last-child{
    font-size:22px;
    color:#1976d2;
}

/* ===== Enroll Success ===== */
.enroll-success{
    display:none;
    text-align:center;
    padding:40px 25px;
}

.enroll-success.show{
    display:block;
    animation:fadeUp .5s ease;
}

.enroll-success .icon{
    width:90px;
    height:90px;
    margin:0 auto 20px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(16,185,129,0.15);
    font-size:42px;
    animation:pulseBadge 2s ease-in-out infinite;
}

.enroll-success h2{
    margin:0 0 12px;
    font-size:22px;
    font-weight:900;
    color:var(--text);
}

.enroll-success p{
    color:var(--muted);
    font-size:14px;
    line-height:2;
    margin:0 0 25px;
}

.enroll-success-actions{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
}

/* ===== Enroll Responsive ===== */
@media(max-width:1000px){
    .enroll-grid{
        grid-template-columns:1fr;
    }
    .enroll-summary{
        position:static;
        order:-1;
    }
}

@media(max-width:650px){
    .enroll-form-box{
        padding:22px;
    }
    .enroll-form-row{
        grid-template-columns:1fr;
    }
    .payment-type-selector{
        grid-template-columns:1fr;
    }
    .enroll-summary{
        padding:22px;
    }
    .summary-course{
        flex-direction:column;
        text-align:center;
        align-items:center;
    }
}
/* =========================
   EXAM / QUIZ PAGE
========================= */

.exam-wrapper{
    padding:40px 0 60px;
    display:grid;
    place-items:center;
    min-height:60vh;
}

.exam-container{
    width:min(750px,100%);
    margin:0 auto;
}

/* ===== Exam Intro ===== */
.exam-intro{
    padding:40px;
    border-radius:28px;
    text-align:center;
    border-color:rgba(25,118,210,0.15);
}

.exam-intro .icon{
    width:90px;
    height:90px;
    margin:0 auto 20px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:linear-gradient(135deg,#1976d2,#0d56a5);
    font-size:42px;
    box-shadow:0 15px 40px rgba(25,118,210,0.3);
}

.exam-intro h1{
    margin:0 0 12px;
    font-size:clamp(22px,3vw,32px);
    font-weight:900;
    color:var(--text);
}

.exam-intro p{
    color:var(--muted);
    font-size:15px;
    line-height:2;
    max-width:500px;
    margin:0 auto 30px;
}

.exam-intro-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-bottom:30px;
    max-width:450px;
    margin-inline:auto;
}

.exam-intro-stat{
    padding:15px;
    border-radius:16px;
    background:var(--surface);
    border:1px solid var(--line);
    text-align:center;
}

.exam-intro-stat b{
    display:block;
    font-size:20px;
    font-weight:900;
    color:#1976d2;
    margin-bottom:3px;
}

.exam-intro-stat span{
    color:var(--muted);
    font-size:11px;
}

/* ===== Exam Header ===== */
.exam-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 24px;
    border-radius:20px;
    margin-bottom:15px;
    background:var(--surface);
    border:1px solid var(--line);
}

.exam-header .progress-text{
    font-size:14px;
    font-weight:900;
    color:var(--text);
}

.exam-header .progress-text span{
    color:#1976d2;
    font-size:18px;
}

.exam-header .timer{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:12px;
    background:rgba(25,118,210,0.13);
    color:#1976d2;
    font-size:14px;
    font-weight:900;
}

.exam-header .timer.warning{
    background:rgba(239,68,68,0.15);
    color:#ef4444;
    animation:pulseBadge 1s ease-in-out infinite;
}

/* ===== Exam Progress Bar ===== */
.exam-progress-bar{
    width:100%;
    height:8px;
    border-radius:999px;
    background:var(--surface);
    overflow:hidden;
    margin-bottom:25px;
    border:1px solid var(--line);
}

.exam-progress-fill{
    height:100%;
    background:linear-gradient(90deg,#1976d2,#0d56a5);
    border-radius:999px;
    transition:width .4s ease;
    box-shadow:0 0 15px rgba(25,118,210,0.4);
}

/* ===== Exam Question ===== */
.exam-question-box{
    padding:35px;
    border-radius:28px;
    border-color:rgba(25,118,210,0.15);
    animation:fadeUp .4s ease;
}

.exam-question-box h2{
    margin:0 0 25px;
    font-size:clamp(16px,2vw,20px);
    font-weight:900;
    line-height:1.9;
    color:var(--text);
    text-align:right;
}

.exam-options{
    display:grid;
    gap:12px;
}

.exam-option{
    padding:18px 22px;
    border-radius:16px;
    background:var(--surface);
    border:2px solid var(--line);
    cursor:pointer;
    transition:all .25s ease;
    font-size:14px;
    font-weight:700;
    color:var(--text);
    display:flex;
    align-items:center;
    gap:12px;
    text-align:right;
}

.exam-option:hover{
    border-color:#1976d2;
    background:rgba(25,118,210,0.05);
    transform:translateX(-3px);
}

.exam-option.selected{
    border-color:#1976d2;
    background:rgba(25,118,210,0.13);
    box-shadow:0 8px 20px rgba(25,118,210,0.15);
}

.exam-option .option-number{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:var(--surface-strong);
    border:1px solid var(--line);
    font-size:13px;
    font-weight:900;
    color:var(--muted);
    flex-shrink:0;
}

.exam-option.selected .option-number{
    background:#1976d2;
    color:white;
    border-color:#1976d2;
}

/* ===== Exam Navigation ===== */
.exam-navigation{
    display:flex;
    gap:12px;
    margin-top:25px;
}

.exam-navigation .btn{
    flex:1;
    min-height:48px;
    font-size:14px;
}

/* ===== Exam Result ===== */
.exam-result{
    padding:45px 35px;
    border-radius:28px;
    text-align:center;
    border-color:rgba(25,118,210,0.15);
    animation:fadeUp .5s ease;
}

.exam-result .result-icon{
    font-size:70px;
    margin-bottom:20px;
    animation:floatLogo 3s ease-in-out infinite;
}

.exam-result h1{
    margin:0 0 10px;
    font-size:22px;
    font-weight:900;
    color:var(--text);
}

.exam-result .result-score{
    font-size:56px;
    font-weight:900;
    color:#1976d2;
    margin:20px 0;
    line-height:1;
}

.exam-result .result-detail{
    color:var(--muted);
    font-size:14px;
    line-height:2;
    margin-bottom:25px;
}

.exam-result-bar{
    width:100%;
    max-width:400px;
    height:12px;
    border-radius:999px;
    background:var(--surface);
    overflow:hidden;
    margin:20px auto 25px;
    border:1px solid var(--line);
}

.exam-result-fill{
    height:100%;
    border-radius:999px;
    transition:width 1s ease;
    background:linear-gradient(90deg,#10b981,#059669);
}

.exam-result-fill.medium{
    background:linear-gradient(90deg,#f59e0b,#d97706);
}

.exam-result-fill.low{
    background:linear-gradient(90deg,#ef4444,#dc2626);
}

.exam-result-actions{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
}

/* ===== Exam Responsive ===== */
@media(max-width:650px){
    .exam-intro{
        padding:28px 22px;
    }
    .exam-intro-stats{
        grid-template-columns:1fr;
    }
    .exam-question-box{
        padding:25px 20px;
    }
    .exam-result{
        padding:35px 22px;
    }
    .exam-result .result-score{
        font-size:44px;
    }
    .exam-navigation{
        flex-direction:column;
    }
}

/* =========================
   CONSULTING PAGE
========================= */

.consulting-hero{
    padding:70px 0 40px;
    text-align:center;
}

.consulting-hero h1{
    margin:15px 0;
    font-size:clamp(32px,4vw,52px);
    font-weight:900;
    letter-spacing:-1px;
}

.consulting-hero p{
    max-width:650px;
    margin:0 auto;
    color:var(--muted);
    font-size:16px;
    line-height:2.1;
}

/* ===== Consulting Benefits ===== */
.consulting-benefits{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:40px;
}

.consulting-benefit-card{
    padding:28px 22px;
    border-radius:22px;
    text-align:center;
    transition:all .3s ease;
}

.consulting-benefit-card:hover{
    transform:translateY(-6px);
    border-color:#1976d2;
}

.consulting-benefit-icon{
    width:65px;
    height:65px;
    margin:0 auto 15px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:linear-gradient(135deg,rgba(25,118,210,0.15),transparent);
    font-size:28px;
}

.consulting-benefit-card h3{
    margin:0 0 8px;
    font-size:16px;
    font-weight:900;
    color:var(--text);
}

.consulting-benefit-card p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.9;
}

/* ===== Consulting Form ===== */
.consulting-form-section{
    margin-top:60px;
}

.consulting-form-grid{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:35px;
    align-items:start;
}

/* ===== Consulting Info Side ===== */
.consulting-info-side{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.consulting-info-card{
    padding:22px;
    border-radius:22px;
    display:flex;
    align-items:flex-start;
    gap:15px;
    transition:all .3s ease;
}

.consulting-info-card:hover{
    border-color:#1976d2;
    transform:translateY(-3px);
}

.consulting-info-icon{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:rgba(25,118,210,0.13);
    color:#1976d2;
    font-size:22px;
    flex-shrink:0;
}

.consulting-info-content b{
    display:block;
    font-size:15px;
    font-weight:900;
    color:var(--text);
    margin-bottom:6px;
}

.consulting-info-content p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.9;
}

/* ===== Consulting Form Box ===== */
.consulting-form-box{
    padding:35px;
    border-radius:28px;
    border-color:rgba(25,118,210,0.15);
}

.consulting-form-box h2{
    margin:0 0 8px;
    font-size:24px;
    font-weight:900;
    color:var(--text);
}

.consulting-form-box .subtitle{
    color:var(--muted);
    font-size:14px;
    line-height:2;
    margin:0 0 25px;
}

.consulting-form{
    display:grid;
    gap:18px;
}

.consulting-form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.consulting-form .field{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.consulting-form .field label{
    font-size:13px;
    font-weight:900;
    color:var(--text);
}

.consulting-form .field input,
.consulting-form .field select,
.consulting-form .field textarea{
    width:100%;
    min-height:50px;
    padding:12px 15px;
    border-radius:15px;
    border:1px solid var(--line);
    background:var(--surface-strong);
    color:var(--text);
    outline:none;
    font-family:inherit;
    font-size:14px;
    transition:all .25s ease;
}

.consulting-form .field textarea{
    min-height:110px;
    resize:vertical;
}

.consulting-form .field input:focus,
.consulting-form .field select:focus,
.consulting-form .field textarea:focus{
    border-color:#1976d2;
    box-shadow:0 0 0 4px rgba(25,118,210,0.13);
}

/* ===== Consulting Time Slots ===== */
.time-slots{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.time-slot{
    padding:12px;
    border-radius:14px;
    background:var(--surface);
    border:2px solid var(--line);
    text-align:center;
    cursor:pointer;
    transition:all .25s ease;
    font-size:13px;
    font-weight:700;
    color:var(--text);
}

.time-slot:hover{
    border-color:#1976d2;
    transform:translateY(-2px);
}

.time-slot.selected{
    border-color:#1976d2;
    background:rgba(25,118,210,0.13);
    box-shadow:0 8px 20px rgba(25,118,210,0.15);
}

/* ===== Consulting Submit ===== */
.consulting-submit-btn{
    width:100%;
    min-height:54px;
    font-size:15px;
    background:linear-gradient(135deg,#1976d2,#0d56a5);
    box-shadow:0 12px 30px rgba(25,118,210,0.25);
    margin-top:10px;
}

/* ===== Consulting Success ===== */
.consulting-success{
    display:none;
    text-align:center;
    padding:50px 30px;
}

.consulting-success.show{
    display:block;
    animation:fadeUp .5s ease;
}

.consulting-success .icon{
    width:90px;
    height:90px;
    margin:0 auto 20px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(16,185,129,0.15);
    font-size:42px;
    animation:pulseBadge 2s ease-in-out infinite;
}

.consulting-success h2{
    margin:0 0 12px;
    font-size:24px;
    font-weight:900;
    color:var(--text);
}

.consulting-success p{
    color:var(--muted);
    font-size:14px;
    line-height:2;
    margin:0 0 25px;
}

/* ===== Consulting FAQ ===== */
.consulting-faq{
    margin-top:70px;
}

.consulting-faq h2{
    text-align:center;
    margin:0 0 12px;
    font-size:clamp(22px,3vw,30px);
    font-weight:900;
}

.consulting-faq > .container > p{
    text-align:center;
    color:var(--muted);
    font-size:15px;
    max-width:600px;
    margin:0 auto 35px;
    line-height:2;
}

/* ===== Consulting Responsive ===== */
@media(max-width:1000px){
    .consulting-benefits{
        grid-template-columns:1fr;
    }
    .consulting-form-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:650px){
    .consulting-hero h1{
        font-size:28px;
    }
    .consulting-form-box{
        padding:22px;
    }
    .consulting-form-row{
        grid-template-columns:1fr;
    }
    .time-slots{
        grid-template-columns:1fr 1fr;
    }
}
/* =========================
   VIDEOS PAGE
========================= */

.videos-hero{
    padding:70px 0 40px;
    text-align:center;
}

.videos-hero h1{
    margin:15px 0;
    font-size:clamp(32px,4vw,52px);
    font-weight:900;
    letter-spacing:-1px;
}

.videos-hero p{
    max-width:650px;
    margin:0 auto;
    color:var(--muted);
    font-size:16px;
    line-height:2.1;
}

/* ===== Video Player Section ===== */
.video-player-section{
    margin-top:40px;
}

.video-player-box{
    padding:25px;
    border-radius:28px;
    border-color:rgba(25,118,210,0.15);
    overflow:hidden;
}

.video-player-wrapper{
    width:100%;
    aspect-ratio:16 / 9;
    border-radius:20px;
    overflow:hidden;
    background:#000;
    position:relative;
    border:1px solid var(--line);
}

.video-player-wrapper video{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.video-info{
    margin-top:20px;
    display:flex;
    justify-content:space-between;
    align-items:start;
    gap:20px;
    flex-wrap:wrap;
}

.video-info-text h3{
    margin:0 0 5px;
    font-size:18px;
    font-weight:900;
    color:var(--text);
}

.video-info-text p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.9;
}

.video-info-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 14px;
    border-radius:999px;
    background:rgba(25,118,210,0.13);
    color:#1976d2;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
}

/* ===== Video Playlist ===== */
.video-playlist-section{
    margin-top:50px;
}

.video-playlist-section h2{
    margin:0 0 12px;
    font-size:clamp(22px,3vw,30px);
    font-weight:900;
}

.video-playlist-section > .container > p{
    color:var(--muted);
    font-size:15px;
    margin-bottom:30px;
    line-height:2;
}

.video-playlist{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.video-item{
    padding:18px;
    border-radius:20px;
    display:flex;
    gap:14px;
    cursor:pointer;
    transition:all .3s ease;
    position:relative;
    overflow:hidden;
}

.video-item:hover{
    border-color:#1976d2;
    transform:translateY(-3px);
}

.video-item.active{
    border-color:#1976d2;
    background:rgba(25,118,210,0.08);
    box-shadow:0 12px 30px rgba(25,118,210,0.15);
}

.video-item-number{
    width:48px;
    height:48px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#1976d2,#0d56a5);
    color:white;
    font-size:18px;
    font-weight:900;
    flex-shrink:0;
    box-shadow:0 8px 20px rgba(25,118,210,0.25);
}

.video-item.active .video-item-number{
    animation:pulseBadge 2s ease-in-out infinite;
}

.video-item-content{
    flex:1;
    min-width:0;
}

.video-item-content h4{
    margin:0 0 5px;
    font-size:14px;
    font-weight:900;
    color:var(--text);
    line-height:1.5;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.video-item-content p{
    margin:0;
    color:var(--muted);
    font-size:11px;
    line-height:1.7;
}

.video-item-duration{
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin-top:6px;
    color:#1976d2;
    font-size:11px;
    font-weight:900;
}

/* ===== Video Stats Bar ===== */
.video-stats-bar{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin-top:40px;
}

.video-stat-box{
    padding:20px;
    border-radius:20px;
    text-align:center;
    border-color:rgba(25,118,210,0.15);
}

.video-stat-box .icon{
    width:50px;
    height:50px;
    margin:0 auto 10px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:rgba(25,118,210,0.13);
    font-size:24px;
}

.video-stat-box b{
    display:block;
    font-size:22px;
    font-weight:900;
    color:#1976d2;
    line-height:1.2;
    margin-bottom:3px;
}

.video-stat-box span{
    color:var(--muted);
    font-size:12px;
}

/* ===== Video CTA ===== */
.video-cta{
    margin-top:70px;
    padding:45px 35px;
    border-radius:28px;
    text-align:center;
    background:linear-gradient(135deg,rgba(25,118,210,0.13),transparent);
    border:1px solid rgba(25,118,210,0.2);
}

.video-cta h2{
    margin:0 0 15px;
    font-size:clamp(22px,3vw,30px);
    font-weight:900;
}

.video-cta p{
    margin:0 auto 25px;
    max-width:600px;
    color:var(--muted);
    font-size:15px;
    line-height:2;
}

.video-cta .btn-primary{
    background:linear-gradient(135deg,#1976d2,#0d56a5);
    box-shadow:0 12px 30px rgba(25,118,210,0.25);
}

/* ===== Videos Responsive ===== */
@media(max-width:1000px){
    .video-playlist{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:650px){
    .videos-hero h1{
        font-size:28px;
    }
    .video-playlist{
        grid-template-columns:1fr;
    }
    .video-stats-bar{
        grid-template-columns:1fr;
    }
    .video-player-box{
        padding:15px;
    }
    .video-info{
        flex-direction:column;
        gap:12px;
    }
    .video-cta{
        padding:30px 20px;
    }
}
/* =========================
   DASHBOARD PAGE
========================= */

.dashboard-wrapper{
    padding:40px 0 60px;
}

/* ===== Dashboard Header ===== */
.dashboard-header{
    padding:28px 32px;
    border-radius:28px;
    margin-bottom:25px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    background:linear-gradient(135deg,var(--accent-soft),transparent);
    border:1px solid var(--line);
}

.dashboard-user{
    display:flex;
    align-items:center;
    gap:18px;
}

.dashboard-avatar{
    width:70px;
    height:70px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));
    color:white;
    font-size:28px;
    font-weight:900;
    box-shadow:0 12px 30px var(--glow);
    flex-shrink:0;
}

.dashboard-user-info h1{
    margin:0 0 5px;
    font-size:22px;
    font-weight:900;
    color:var(--text);
}

.dashboard-user-info p{
    margin:0;
    color:var(--muted);
    font-size:13px;
}

.dashboard-logout{
    padding:10px 20px;
    border-radius:14px;
    background:rgba(239,68,68,0.13);
    color:#ef4444;
    border:1px solid rgba(239,68,68,0.25);
    font-size:13px;
    font-weight:900;
    cursor:pointer;
    transition:all .25s ease;
    font-family:inherit;
}

.dashboard-logout:hover{
    background:rgba(239,68,68,0.2);
    transform:translateY(-2px);
}

/* ===== Dashboard Stats ===== */
.dashboard-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin-bottom:25px;
}

.dashboard-stat-card{
    padding:22px 20px;
    border-radius:22px;
    transition:all .3s ease;
    display:flex;
    align-items:center;
    gap:14px;
}

.dashboard-stat-card:hover{
    transform:translateY(-4px);
    border-color:var(--accent);
}

.dashboard-stat-icon{
    width:52px;
    height:52px;
    border-radius:16px;
    display:grid;
    place-items:center;
    background:var(--accent-soft);
    color:var(--accent);
    font-size:24px;
    flex-shrink:0;
}

.dashboard-stat-info b{
    display:block;
    font-size:22px;
    font-weight:900;
    color:var(--accent);
    line-height:1.2;
    margin-bottom:3px;
}

.dashboard-stat-info span{
    color:var(--muted);
    font-size:12px;
}

/* ===== Dashboard Tabs ===== */
.dashboard-tabs{
    display:flex;
    gap:5px;
    padding:6px;
    border-radius:18px;
    background:var(--surface);
    border:1px solid var(--line);
    margin-bottom:25px;
    overflow-x:auto;
}

.dashboard-tab{
    padding:12px 20px;
    border-radius:13px;
    background:none;
    border:none;
    color:var(--muted);
    font-size:13px;
    font-weight:900;
    cursor:pointer;
    transition:all .25s ease;
    font-family:inherit;
    white-space:nowrap;
    display:flex;
    align-items:center;
    gap:6px;
}

.dashboard-tab:hover{
    color:var(--text);
    background:var(--accent-soft);
}

.dashboard-tab.active{
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));
    color:white;
    box-shadow:0 8px 20px var(--glow);
}

/* ===== Dashboard Content ===== */
.dashboard-content{
    display:none;
}

.dashboard-content.active{
    display:block;
    animation:fadeUp .4s ease;
}

.dashboard-section{
    padding:28px;
    border-radius:24px;
    margin-bottom:20px;
}

.dashboard-section h2{
    margin:0 0 20px;
    font-size:18px;
    font-weight:900;
    color:var(--text);
    display:flex;
    align-items:center;
    gap:10px;
}

.dashboard-section h2 .icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--accent-soft);
    font-size:18px;
}

/* ===== Dashboard Order Item ===== */
.dashboard-order-item{
    display:flex;
    align-items:center;
    gap:15px;
    padding:16px;
    border-radius:18px;
    background:var(--surface);
    border:1px solid var(--line);
    margin-bottom:12px;
    transition:all .25s ease;
}

.dashboard-order-item:hover{
    border-color:var(--accent);
    transform:translateX(-3px);
}

.dashboard-order-icon{
    width:50px;
    height:50px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:var(--accent-soft);
    font-size:22px;
    flex-shrink:0;
}

.dashboard-order-info{
    flex:1;
    min-width:0;
}

.dashboard-order-info h4{
    margin:0 0 5px;
    font-size:14px;
    font-weight:900;
    color:var(--text);
}

.dashboard-order-info p{
    margin:0;
    color:var(--muted);
    font-size:12px;
    line-height:1.7;
}

.dashboard-order-status{
    padding:5px 14px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
}

.dashboard-order-status.pending{
    background:rgba(245,158,11,0.15);
    color:#f59e0b;
}

.dashboard-order-status.paid{
    background:rgba(16,185,129,0.15);
    color:#10b981;
}

.dashboard-order-status.processing{
    background:rgba(25,118,210,0.15);
    color:#1976d2;
}

.dashboard-order-status.cancelled{
    background:rgba(239,68,68,0.15);
    color:#ef4444;
}

/* ===== Dashboard Profile Form ===== */
.dashboard-profile-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.dashboard-profile-form .field{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.dashboard-profile-form .field.full{
    grid-column:1 / -1;
}

.dashboard-profile-form .field label{
    font-size:13px;
    font-weight:900;
    color:var(--text);
}

.dashboard-profile-form .field input,
.dashboard-profile-form .field textarea{
    width:100%;
    min-height:50px;
    padding:12px 15px;
    border-radius:15px;
    border:1px solid var(--line);
    background:var(--surface-strong);
    color:var(--text);
    outline:none;
    font-family:inherit;
    font-size:14px;
    transition:all .25s ease;
}

.dashboard-profile-form .field textarea{
    min-height:100px;
    resize:vertical;
}

.dashboard-profile-form .field input:focus,
.dashboard-profile-form .field textarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 4px var(--accent-soft);
}

.dashboard-profile-form .field input[readonly]{
    opacity:.7;
    cursor:not-allowed;
}

.dashboard-save-btn{
    grid-column:1 / -1;
    width:100%;
    min-height:52px;
    font-size:15px;
    margin-top:10px;
}

/* ===== Dashboard Empty ===== */
.dashboard-empty{
    text-align:center;
    padding:50px 25px;
    color:var(--muted);
    font-size:14px;
    line-height:2;
}

.dashboard-empty .icon{
    font-size:50px;
    margin-bottom:15px;
    opacity:.5;
}

.dashboard-empty a{
    color:var(--accent);
    font-weight:900;
    display:inline-block;
    margin-top:15px;
}

/* ===== Dashboard Responsive ===== */
@media(max-width:1000px){
    .dashboard-stats{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:650px){
    .dashboard-header{
        padding:22px;
        flex-direction:column;
        text-align:center;
    }
    .dashboard-user{
        flex-direction:column;
        text-align:center;
    }
    .dashboard-stats{
        grid-template-columns:1fr;
    }
    .dashboard-profile-form{
        grid-template-columns:1fr;
    }
    .dashboard-order-item{
        flex-direction:column;
        text-align:center;
    }
    .dashboard-tabs{
        padding:5px;
    }
    .dashboard-tab{
        padding:10px 14px;
        font-size:12px;
    }
}

/* =========================
   SHIPPING COST
========================= */

.shipping-cost-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    font-size:14px;
    color:var(--muted);
    border-bottom:1px dashed var(--line);
}

.shipping-cost-row span:last-child{
    font-weight:900;
    color:var(--text);
}

.shipping-cost-row.loading span:last-child{
    color:var(--muted);
    font-size:12px;
}

.shipping-cost-row.ready span:last-child{
    color:var(--accent);
    font-size:15px;
}
/* ============================================================
   RUMI HERO V3 - Dual Color Orb + Particles
   ============================================================ */

.rumi-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 20px 60px;
    overflow: hidden;
    background: radial-gradient(ellipse at center, #0a1628 0%, #05080f 60%, #000 100%);
    isolation: isolate;
}

/* ===== خطوط ضربان قلب بالای صفحه ===== */
.rumi-heartbeat {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    animation: heartbeatFadeIn 2s ease 0.5s forwards;
    z-index: 5;
}

.rumi-heartbeat svg {
    width: 100%;
    max-width: 900px;
    height: 60px;
}

.rumi-heartbeat path {
    fill: none;
    stroke: url(#heartbeatGradient);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: heartbeatDraw 4s ease-in-out infinite;
}

@keyframes heartbeatDraw {
    0% { stroke-dashoffset: 1000; opacity: 0.2; }
    50% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: -1000; opacity: 0.2; }
}

@keyframes heartbeatFadeIn {
    to { opacity: 1; }
}

/* ===== ذرات متحرک ===== */
.rumi-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.rumi-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    animation: particleFloat linear infinite;
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-100px) scale(1);
        opacity: 0;
    }
}

/* ===== کره اصلی ===== */
.rumi-orb-container {
    position: relative;
    width: 340px;
    height: 340px;
    margin: 40px auto 30px;
    z-index: 10;
    animation: orbEntrance 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
    transform: scale(0.5);
}

@keyframes orbEntrance {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.rumi-orb {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, 
        rgba(168, 85, 247, 0.15) 0%,
        rgba(25, 118, 210, 0.08) 30%,
        transparent 70%);
    box-shadow: 
        0 0 60px rgba(25, 118, 210, 0.4),
        0 0 120px rgba(22, 139, 99, 0.3),
        inset 0 0 60px rgba(168, 85, 247, 0.2);
    animation: orbPulse 4s ease-in-out infinite;
}

@keyframes orbPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 
            0 0 60px rgba(25, 118, 210, 0.4),
            0 0 120px rgba(22, 139, 99, 0.3),
            inset 0 0 60px rgba(168, 85, 247, 0.2);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 
            0 0 80px rgba(25, 118, 210, 0.6),
            0 0 160px rgba(22, 139, 99, 0.5),
            inset 0 0 80px rgba(168, 85, 247, 0.3);
    }
}

/* ===== حلقه دو رنگ ===== */
.rumi-ring {
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #1976d2 0deg,
        #1976d2 90deg,
        #a855f7 140deg,
        #168b63 220deg,
        #168b63 300deg,
        #1976d2 360deg
    );
    mask: radial-gradient(circle, transparent 60%, #000 62%, #000 72%, transparent 74%);
    -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%, #000 72%, transparent 74%);
    animation: ringRotate 8s linear infinite;
    filter: blur(0.5px);
}

.rumi-ring::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.8) 20deg,
        transparent 40deg,
        transparent 180deg,
        rgba(255, 255, 255, 0.8) 200deg,
        transparent 220deg,
        transparent 360deg
    );
    mask: radial-gradient(circle, transparent 60%, #000 62%, #000 72%, transparent 74%);
    -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%, #000 72%, transparent 74%);
    animation: ringRotate 8s linear infinite reverse;
}

@keyframes ringRotate {
    to { transform: rotate(360deg); }
}

/* ===== هاله بیرونی ===== */
.rumi-halo {
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    border: 1px solid rgba(168, 85, 247, 0.2);
    animation: haloPulse 3s ease-in-out infinite;
}

.rumi-halo:nth-child(2) {
    inset: -60px;
    border-color: rgba(25, 118, 210, 0.15);
    animation-delay: 0.5s;
}

.rumi-halo:nth-child(3) {
    inset: -90px;
    border-color: rgba(22, 139, 99, 0.1);
    animation-delay: 1s;
}

@keyframes haloPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 1; }
}

/* ===== خطوط تزئینی (مثل طرح) ===== */
.rumi-deco-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.4), transparent);
    height: 1px;
    width: 80px;
    top: 50%;
    opacity: 0;
    animation: decoLineFade 2s ease 1s forwards;
}

.rumi-deco-line.left {
    right: 100%;
    margin-right: 30px;
    transform-origin: right center;
}

.rumi-deco-line.right {
    left: 100%;
    margin-left: 30px;
    transform-origin: left center;
}

.rumi-deco-line.top {
    top: 20%;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
}

@keyframes decoLineFade {
    to { opacity: 1; }
}

/* ===== ذرات دور کره ===== */
.rumi-orb-particles {
    position: absolute;
    inset: -80px;
    border-radius: 50%;
    pointer-events: none;
}

.rumi-orb-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px currentColor;
    opacity: 0.8;
    animation: orbParticleOrbit linear infinite;
}

@keyframes orbParticleOrbit {
    0% {
        transform: rotate(0deg) translateX(200px) rotate(0deg) scale(0.5);
    }
    50% {
        transform: rotate(180deg) translateX(200px) rotate(-180deg) scale(1);
    }
    100% {
        transform: rotate(360deg) translateX(200px) rotate(-360deg) scale(0.5);
    }
}

/* ===== متن‌ها ===== */
.rumi-hero-title {
    position: relative;
    z-index: 10;
    margin: 0 0 15px;
    font-family: 'Vazirmatn', sans-serif;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 900;
    line-height: 1.5;
    background: linear-gradient(135deg, #ffffff 0%, #a855f7 50%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: titleGradient 6s ease infinite, titleFadeUp 1s ease 0.5s both;
    max-width: 700px;
}

@keyframes titleGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes titleFadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Rumi Loading ===== */
.rumi-loading-text {
    position: relative;
    z-index: 10;
    margin: 0 0 10px;
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
    font-weight: 400;
    color: #94a3b8;
    letter-spacing: 3px;
    text-transform: lowercase;
    animation: loadingFadeIn 1s ease 0.3s both;
    direction: ltr;
}

.rumi-loading-text .dots {
    display: inline-block;
}

.rumi-loading-text .dots span {
    display: inline-block;
    animation: dotPulse 1.4s infinite;
}

.rumi-loading-text .dots span:nth-child(1) { animation-delay: 0s; }
.rumi-loading-text .dots span:nth-child(2) { animation-delay: 0.2s; }
.rumi-loading-text .dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

@keyframes loadingFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== دکمه Play ===== */
.rumi-play-btn {
    position: relative;
    z-index: 10;
    margin-top: 25px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: playBtnPulse 2s ease-in-out infinite;
    color: #fff;
    font-size: 24px;
}

.rumi-play-btn::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid rgba(168, 85, 247, 0.2);
    animation: playBtnRing 2s ease-in-out infinite;
}

@keyframes playBtnPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); }
    50% { box-shadow: 0 0 40px rgba(168, 85, 247, 0.6), 0 0 60px rgba(25, 118, 210, 0.3); }
}

@keyframes playBtnRing {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

.rumi-play-btn:hover {
    transform: scale(1.1);
    background: rgba(168, 85, 247, 0.2);
    border-color: #a855f7;
}

.rumi-play-btn svg {
    width: 24px;
    height: 24px;
    margin-right: -3px;
    fill: currentColor;
}

/* ===== متن پایین ===== */
.rumi-hero-subtitle {
    position: relative;
    z-index: 10;
    margin: 30px 0 0;
    font-family: 'Vazirmatn', sans-serif;
    font-size: clamp(16px, 2vw, 22px);
    font-weight: 700;
    color: #cbd5e1;
    animation: subtitleFadeUp 1s ease 1s both;
    max-width: 600px;
}

@keyframes subtitleFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Glow اطراف ===== */
.rumi-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}

.rumi-glow.blue {
    top: 20%;
    left: 10%;
    background: #1976d2;
    animation: glowMove1 12s ease-in-out infinite;
}

.rumi-glow.green {
    bottom: 20%;
    right: 10%;
    background: #168b63;
    animation: glowMove2 12s ease-in-out infinite;
}

.rumi-glow.purple {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #a855f7;
    width: 400px;
    height: 400px;
    animation: glowPulse 6s ease-in-out infinite;
}

@keyframes glowMove1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(50px, -30px) scale(1.2); }
}

@keyframes glowMove2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-50px, 30px) scale(1.2); }
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.2; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.4; transform: translate(-50%, -50%) scale(1.3); }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .rumi-hero {
        padding: 90px 15px 40px;
    }

    .rumi-orb-container {
        width: 240px;
        height: 240px;
    }

    .rumi-hero-title {
        font-size: 24px;
    }

    .rumi-hero-subtitle {
        font-size: 15px;
    }

    .rumi-play-btn {
        width: 60px;
        height: 60px;
    }

    .rumi-heartbeat {
        top: 70px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .rumi-orb-container {
        width: 200px;
        height: 200px;
    }

    .rumi-hero-title {
        font-size: 20px;
    }

    .rumi-hero-subtitle {
        font-size: 14px;
    }

    .rumi-play-btn {
        width: 55px;
        height: 55px;
        font-size: 20px;
    }

    .rumi-loading-text {
        font-size: 12px;
        letter-spacing: 2px;
    }
}
/* ============================================================
   RUMI HERO V3 - Exact Dribbble Design
   ============================================================ */

.rumi-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px 40px;
    overflow: hidden;
    background: #000;
    isolation: isolate;
}

/* ===== Glow های اطراف ===== */
.rumi-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}

.rumi-glow.blue {
    top: 15%;
    left: 10%;
    width: 400px;
    height: 400px;
    background: #1976d2;
    animation: glowMove1 14s ease-in-out infinite;
}

.rumi-glow.green {
    bottom: 15%;
    right: 10%;
    width: 400px;
    height: 400px;
    background: #168b63;
    animation: glowMove2 14s ease-in-out infinite;
}

.rumi-glow.purple {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: #a855f7;
    opacity: 0.25;
    animation: glowPulse 8s ease-in-out infinite;
}

@keyframes glowMove1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, -40px) scale(1.3); }
}

@keyframes glowMove2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-60px, 40px) scale(1.3); }
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.35; transform: translate(-50%, -50%) scale(1.4); }
}

/* ===== ذرات پس‌زمینه ===== */
.rumi-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.rumi-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat linear infinite;
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% {
        transform: translateY(-100px) scale(1);
        opacity: 0;
    }
}

/* ===== متن Rumi Loading ===== */
.rumi-loading-text {
    position: relative;
    z-index: 10;
    margin: 0 0 20px;
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
    letter-spacing: 3px;
    text-transform: lowercase;
    direction: ltr;
    animation: loadingFadeIn 1s ease 0.2s both;
}

.rumi-loading-text .dots {
    display: inline-block;
    margin-left: 2px;
}

.rumi-loading-text .dots span {
    display: inline-block;
    animation: dotPulse 1.4s infinite;
}

.rumi-loading-text .dots span:nth-child(1) { animation-delay: 0s; }
.rumi-loading-text .dots span:nth-child(2) { animation-delay: 0.2s; }
.rumi-loading-text .dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

@keyframes loadingFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== دایره اصلی ===== */
.rumi-orb-container {
    position: relative;
    width: 320px;
    height: 320px;
    margin: 0 auto 30px;
    z-index: 10;
    animation: orbEntrance 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
    transform: scale(0.3);
}

@keyframes orbEntrance {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== هاله‌های بیرونی ===== */
.rumi-halo {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    border: 1px solid rgba(168, 85, 247, 0.15);
    animation: haloPulse 4s ease-in-out infinite;
}

.rumi-halo:nth-child(2) {
    inset: -45px;
    border-color: rgba(25, 118, 210, 0.12);
    animation-delay: 0.7s;
}

.rumi-halo:nth-child(3) {
    inset: -70px;
    border-color: rgba(22, 139, 99, 0.08);
    animation-delay: 1.4s;
}

@keyframes haloPulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.08); opacity: 0.9; }
}

/* ===== کره داخلی ===== */
.rumi-orb {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        rgba(168, 85, 247, 0.2) 0%,
        rgba(25, 118, 210, 0.1) 40%,
        transparent 70%);
    box-shadow:
        0 0 80px rgba(25, 118, 210, 0.4),
        0 0 160px rgba(168, 85, 247, 0.3),
        inset 0 0 80px rgba(168, 85, 247, 0.15);
    animation: orbPulse 4s ease-in-out infinite;
}

@keyframes orbPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

/* ===== حلقه دو رنگ چرخان ===== */
.rumi-ring {
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #1976d2 0deg,
        #1976d2 80deg,
        #a855f7 140deg,
        #168b63 220deg,
        #168b63 300deg,
        #1976d2 360deg
    );
    mask: radial-gradient(circle, transparent 55%, #000 58%, #000 68%, transparent 72%);
    -webkit-mask: radial-gradient(circle, transparent 55%, #000 58%, #000 68%, transparent 72%);
    animation: ringRotate 10s linear infinite;
    filter: blur(1px);
    opacity: 0.95;
}

/* ===== حلقه درخشان اضافی ===== */
.rumi-ring-glow {
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.9) 20deg,
        transparent 50deg,
        transparent 180deg,
        rgba(255, 255, 255, 0.9) 200deg,
        transparent 230deg,
        transparent 360deg
    );
    mask: radial-gradient(circle, transparent 55%, #000 58%, #000 68%, transparent 72%);
    -webkit-mask: radial-gradient(circle, transparent 55%, #000 58%, #000 68%, transparent 72%);
    animation: ringRotate 10s linear infinite;
    filter: blur(3px);
}

@keyframes ringRotate {
    to { transform: rotate(360deg); }
}

/* ===== ذرات دور کره ===== */
.rumi-orb-particles {
    position: absolute;
    inset: -60px;
    border-radius: 50%;
    pointer-events: none;
}

.rumi-orb-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    top: 50%;
    left: 50%;
    margin: -1.5px 0 0 -1.5px;
    animation: orbParticleOrbit linear infinite;
}

@keyframes orbParticleOrbit {
    0% {
        transform: rotate(0deg) translateX(180px) rotate(0deg) scale(0.4);
        opacity: 0;
    }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% {
        transform: rotate(360deg) translateX(180px) rotate(-360deg) scale(0.4);
        opacity: 0;
    }
}

/* ===== خطوط تزئینی ===== */
.rumi-deco-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.5), transparent);
    height: 1px;
    width: 60px;
    top: 50%;
    opacity: 0;
    animation: decoFade 2s ease 1.2s forwards;
}

.rumi-deco-line.left {
    right: 100%;
    margin-right: 40px;
}

.rumi-deco-line.right {
    left: 100%;
    margin-left: 40px;
}

@keyframes decoFade {
    to { opacity: 1; }
}

/* ===== متن شعار بزرگ ===== */
.rumi-hero-title {
    position: relative;
    z-index: 10;
    margin: 0 0 25px;
    font-family: 'Vazirmatn', sans-serif;
    font-size: clamp(26px, 4.5vw, 46px);
    font-weight: 900;
    line-height: 1.5;
    color: #4a9eff;
    text-shadow: 0 0 40px rgba(74, 158, 255, 0.4);
    animation: titleFadeUp 1.2s ease 0.8s both;
    max-width: 750px;
    padding: 0 20px;
}

@keyframes titleFadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== دکمه Play ===== */
.rumi-play-btn {
    position: relative;
    z-index: 10;
    margin-top: 15px;
    width: 55px;
    height: 55px;
    border-radius: 16px;
    background: rgba(25, 118, 210, 0.12);
    border: 1px solid rgba(25, 118, 210, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: #fff;
    animation: playBtnFade 1s ease 1.4s both;
}

@keyframes playBtnFade {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.rumi-play-btn:hover {
    transform: scale(1.1);
    background: rgba(25, 118, 210, 0.2);
    border-color: #1976d2;
    box-shadow: 0 0 30px rgba(25, 118, 210, 0.5);
}

.rumi-play-btn svg {
    width: 20px;
    height: 20px;
    margin-right: -2px;
    fill: currentColor;
}

/* ===== متن پایین ===== */
.rumi-hero-subtitle {
    position: relative;
    z-index: 10;
    margin: 35px 0 0;
    font-family: 'Vazirmatn', sans-serif;
    font-size: clamp(15px, 2vw, 20px);
    font-weight: 700;
    color: #94a3b8;
    animation: subtitleFadeUp 1s ease 1.8s both;
}

@keyframes subtitleFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .rumi-hero {
        padding: 70px 15px 30px;
    }

    .rumi-orb-container {
        width: 240px;
        height: 240px;
    }

    .rumi-hero-title {
        font-size: 22px;
    }

    .rumi-hero-subtitle {
        font-size: 14px;
        margin-top: 25px;
    }

    .rumi-play-btn {
        width: 50px;
        height: 50px;
    }

    .rumi-loading-text {
        font-size: 11px;
        letter-spacing: 2px;
    }
}

@media (max-width: 480px) {
    .rumi-orb-container {
        width: 200px;
        height: 200px;
    }

    .rumi-hero-title {
        font-size: 18px;
        line-height: 1.6;
    }

    .rumi-hero-subtitle {
        font-size: 13px;
    }

    .rumi-loading-text {
        font-size: 10px;
    }
}

/* =========================================================
   RUMILAND CINEMATIC EXPERIENCE — 2026
   ========================================================= */
:root{--cine-bg:#050914;--cine-panel:#0a1120;--cine-blue:#38a8ff;--cine-green:#36d6a0;--cine-purple:#9b7cff;--cine-text:#f4f8ff;--cine-muted:#91a1b8}
.cinematic-header{position:fixed!important;top:18px;left:0;right:0;z-index:1000;background:rgba(5,9,20,.58)!important;border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(22px);box-shadow:0 12px 45px rgba(0,0,0,.28);border-radius:20px;width:min(1240px,calc(100% - 32px));margin:auto}.cinematic-header .nav{min-height:76px}.brand-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(56,168,255,.18),rgba(54,214,160,.12));border:1px solid rgba(255,255,255,.1);overflow:hidden}.brand-mark img{max-width:80%;max-height:80%;object-fit:contain}.cinematic-header .brand-text span{color:#fff}.cinematic-header .brand-text small{color:#8393aa}.cinematic-header .navlinks a{color:#c7d2e3}.cinematic-header .navlinks a:hover{color:#fff}.account-btn{height:42px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#eaf3ff;border-radius:13px;padding:0 13px;display:flex;align-items:center;gap:7px;cursor:pointer}.account-btn b{font-size:12px}.cinematic-home{background:var(--cine-bg);color:var(--cine-text);overflow:hidden}.cinematic-home section{position:relative}.cinematic-hero{min-height:920px;height:100vh;max-height:1100px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 47%,rgba(28,84,132,.18),transparent 25%),#050914}.hero-grid-lines{position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:90px 90px;mask-image:linear-gradient(to bottom,black,transparent 90%)}.hero-noise{position:absolute;inset:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.cine-glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}.glow-a{width:380px;height:380px;background:rgba(30,143,255,.15);left:-100px;top:25%}.glow-b{width:320px;height:320px;background:rgba(54,214,160,.12);right:-90px;top:38%}.glow-c{width:260px;height:260px;background:rgba(155,124,255,.1);left:42%;bottom:-120px}.cine-particles{position:absolute;inset:0}.cine-particle{position:absolute;left:var(--x);bottom:-10px;width:var(--s);height:var(--s);border-radius:50%;background:#fff;box-shadow:0 0 12px rgba(100,190,255,.7);animation:particleFloat var(--d) linear infinite;animation-delay:var(--delay);opacity:.5}@keyframes particleFloat{to{transform:translate3d(20px,-110vh,0);opacity:0}}.hero-meta{position:absolute;top:125px;left:5%;right:5%;display:flex;justify-content:space-between;color:#63748b;font:600 10px/1 Arial;letter-spacing:2.5px}.orb-stage{position:absolute;width:560px;height:560px;top:43%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center}.cine-orb{width:230px;height:230px;border-radius:50%;position:relative;background:radial-gradient(circle at 35% 28%,#d8f5ff 0,#55baff 8%,#1462a5 32%,#071b35 68%,#020711 100%);box-shadow:0 0 45px rgba(50,170,255,.42),inset -25px -25px 55px rgba(0,0,0,.75);animation:orbFloat 6s ease-in-out infinite}.orb-core{position:absolute;width:70px;height:70px;border-radius:50%;top:30px;left:42px;background:rgba(255,255,255,.2);filter:blur(5px)}.orb-light{position:absolute;inset:18%;border-radius:50%;border:1px solid rgba(255,255,255,.22);animation:orbPulse 3s ease-in-out infinite}.orb-aura{position:absolute;border-radius:50%;border:1px solid rgba(56,168,255,.16)}.aura-1{inset:18%;animation:auraPulse 4s infinite}.aura-2{inset:9%;border-color:rgba(54,214,160,.13);animation:auraPulse 5s .5s infinite}.aura-3{inset:0;border-color:rgba(155,124,255,.1);animation:auraPulse 6s 1s infinite}.orb-ring{position:absolute;border-radius:50%;border:1px solid rgba(80,180,255,.32);width:360px;height:110px;transform:rotate(-22deg);animation:ringSpin 12s linear infinite}.ring-2{width:430px;height:140px;transform:rotate(55deg);border-color:rgba(54,214,160,.24);animation-duration:17s;animation-direction:reverse}.ring-3{width:510px;height:170px;transform:rotate(78deg);border-color:rgba(155,124,255,.15);animation-duration:22s}.orb-star{position:absolute;width:5px;height:5px;border-radius:50%;background:#bce8ff;box-shadow:0 0 15px #38a8ff;transform:rotate(var(--a)) translateX(285px);animation:starOrbit 5s linear infinite;animation-delay:var(--delay)}@keyframes orbFloat{50%{transform:translateY(-13px) scale(1.025)}}@keyframes orbPulse{50%{transform:scale(1.12);opacity:.55}}@keyframes auraPulse{50%{transform:scale(1.04);opacity:.45}}@keyframes ringSpin{to{transform:rotate(338deg)}}@keyframes starOrbit{to{transform:rotate(calc(var(--a) + 360deg)) translateX(285px)}}.hero-copy{position:absolute;z-index:5;text-align:center;top:57%;left:50%;width:min(680px,90%);transform:translate(-50%,-50%);text-shadow:0 4px 25px rgba(0,0,0,.4)}.hero-eyebrow,.eyebrow{font-size:11px;letter-spacing:3px;color:#7fc8ff}.hero-copy h1{font-size:clamp(44px,6vw,82px);line-height:1.08;margin:14px 0;color:#fff;font-weight:900}.hero-copy h1 em,.home-cta h2 em{font-style:normal;background:linear-gradient(90deg,#fff,#63c3ff,#5fe0b0);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy p{max-width:620px;margin:0 auto;color:#a7b6c9;line-height:2;font-size:15px}.hero-actions{display:flex;gap:12px;justify-content:center;margin-top:28px}.hero-btn{display:inline-flex;align-items:center;gap:15px;padding:13px 22px;border-radius:14px;text-decoration:none;font-weight:800;font-size:13px}.hero-btn.primary{color:#04101b;background:linear-gradient(110deg,#65c6ff,#54e0b3);box-shadow:0 0 30px rgba(61,193,255,.2)}.hero-btn.ghost{color:#e8f2ff;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.04)}.scroll-cue{position:absolute;bottom:28px;display:flex;align-items:center;gap:15px;color:#62738a;font-size:9px;letter-spacing:2px}.scroll-cue i{width:45px;height:1px;background:linear-gradient(90deg,#62738a,transparent)}.section-dark{background:#050914}.home-intro{padding:120px 0 90px;border-top:1px solid rgba(255,255,255,.05)}.split-section{display:grid;grid-template-columns:100px 1fr 1fr;gap:50px;align-items:start}.section-index,.section-number{color:#5e7088;font:11px Arial;letter-spacing:2px}.split-section h2,.section-head h2,.showcase h2{font-size:clamp(34px,4vw,60px);line-height:1.15;margin:12px 0}.split-section h2 span,.section-head h2 span,.showcase h2 span{color:#5dbfff}.split-section p,.showcase p{color:#91a1b8;line-height:2;font-size:15px;margin-top:44px}.home-cards{padding:70px 0 120px}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:35px}.experience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.experience-card{min-height:300px;border-radius:24px;padding:30px;text-decoration:none;color:#fff;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.015));transition:.45s transform,.45s border-color}.experience-card:hover{transform:translateY(-10px);border-color:rgba(110,190,255,.35)}.experience-card:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;filter:blur(60px);right:-60px;bottom:-60px;background:rgba(56,168,255,.16)}.card-green:after{background:rgba(54,214,160,.14)}.card-purple:after{background:rgba(155,124,255,.14)}.experience-card span{color:#71849c;font-size:11px}.experience-card strong{display:block;font-size:30px;margin-top:80px}.experience-card p{color:#93a3b9;line-height:1.9;font-size:13px}.experience-card b{font-size:11px;color:#8bd1ff}.home-showcase{padding:130px 0}.showcase{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px}.showcase-orb{height:430px;display:grid;place-items:center;position:relative}.showcase-orb:before,.showcase-orb:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(56,168,255,.15)}.showcase-orb:before{width:340px;height:340px}.showcase-orb:after{width:440px;height:180px;transform:rotate(35deg);border-color:rgba(54,214,160,.18);animation:ringSpin 15s linear infinite}.showcase-orb div{width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#b9e9ff,#278fd2 22%,#071b35 70%);box-shadow:0 0 80px rgba(42,163,255,.3);animation:orbFloat 5s infinite}.text-link{color:#72c8ff;text-decoration:none;font-weight:800}.home-stats{padding:70px 0;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.stats-row div{text-align:center;padding:25px;border-left:1px solid rgba(255,255,255,.06)}.stats-row strong{display:block;font-size:38px}.stats-row span{color:#718198;font-size:11px}.home-cta{padding:150px 0;text-align:center;background:radial-gradient(circle at center,rgba(40,110,165,.2),transparent 45%),#050914}.home-cta h2{font-size:clamp(40px,6vw,76px);line-height:1.1;margin:15px 0 35px}.cinematic-footer{position:relative;background:#030711!important;border-top:1px solid rgba(255,255,255,.07);overflow:hidden;padding:75px 0 20px}.cinematic-footer .footer-orb{position:absolute;width:500px;height:500px;border-radius:50%;background:rgba(32,120,180,.08);filter:blur(80px);left:45%;top:-300px}.footer-topline{display:flex;align-items:center;gap:15px;color:#62758e;font:9px Arial;letter-spacing:3px;margin-bottom:35px}.footer-line{height:1px;flex:1;background:linear-gradient(90deg,rgba(255,255,255,.1),transparent)}.cinematic-footer .footer-grid{position:relative;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:55px}.cinematic-footer .footer-brand h3{font-size:20px;margin:8px 0}.cinematic-footer .footer-brand img{width:52px;height:52px;object-fit:contain}.cinematic-footer .footer-brand p,.cinematic-footer .footer-col p{color:#78889d;line-height:1.9;font-size:12px}.cinematic-footer .footer-col b{color:#dce8f5}.cinematic-footer .footer-col a{color:#8292a7;transition:.2s}.cinematic-footer .footer-col a:hover{color:#64c5ff;transform:translateX(-3px)}.cinematic-footer .footer-social{display:flex;gap:9px;margin-top:20px}.cinematic-footer .footer-social a{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.09);border-radius:11px;color:#9edbff}.cinematic-footer .footer-enamad img{max-width:70px}.cinematic-footer .footer-copyright{border-top:1px solid rgba(255,255,255,.06);margin-top:45px;padding-top:18px;color:#56677e;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.5px}
@media(max-width:900px){.cinematic-header{top:10px;width:calc(100% - 20px)}.cinematic-header .navlinks{position:absolute;top:82px;right:0;left:0;background:rgba(5,9,20,.96);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:15px;display:none}.cinematic-header .navlinks.open{display:flex}.account-btn b{display:none}.cinematic-hero{min-height:820px}.orb-stage{width:430px;height:430px}.cine-orb{width:180px;height:180px}.orb-ring{width:290px;height:90px}.ring-2{width:350px}.ring-3{width:400px}.orb-star{transform:rotate(var(--a)) translateX(220px)}.split-section,.showcase{grid-template-columns:1fr;gap:25px}.split-section p{margin-top:0}.experience-grid{grid-template-columns:1fr}.stats-row{grid-template-columns:repeat(2,1fr)}.cinematic-footer .footer-grid{grid-template-columns:1fr 1fr}.cinematic-footer .footer-copyright{flex-direction:column;gap:8px}}
@media(max-width:560px){.cinematic-header .brand-text small{display:none}.cinematic-header .nav{min-height:64px}.hero-meta{top:95px;font-size:7px}.hero-meta span:nth-child(2){display:none}.cinematic-hero{min-height:760px}.orb-stage{top:39%;width:320px;height:320px}.cine-orb{width:135px;height:135px}.orb-ring{width:230px;height:70px}.ring-2{width:280px}.ring-3{width:330px}.orb-star{transform:rotate(var(--a)) translateX(165px);width:3px;height:3px}.hero-copy{top:61%;width:calc(100% - 30px)}.hero-copy h1{font-size:46px}.hero-copy p{font-size:12px;line-height:1.9}.hero-actions{flex-direction:column;align-items:stretch}.hero-btn{justify-content:center}.home-intro,.home-cards,.home-showcase{padding:80px 0}.split-section h2,.section-head h2,.showcase h2{font-size:35px}.showcase-orb{height:300px}.showcase-orb:before{width:240px;height:240px}.showcase-orb:after{width:290px}.showcase-orb div{width:125px;height:125px}.stats-row{grid-template-columns:1fr 1fr;gap:0}.stats-row div{padding:20px 5px}.stats-row strong{font-size:28px}.cinematic-footer .footer-grid{grid-template-columns:1fr}.cinematic-footer{padding-top:55px}.footer-topline{margin-bottom:25px}}


/* =========================================================
   RUMILAND CINEMATIC POLISH / GLOBAL UI FIXES — 2026
   Unified across Home / Academy / Shop / Blog / Account
   ========================================================= */
:root{
  --rumi-bg:#050914;
  --rumi-bg-2:#07101e;
  --rumi-panel:rgba(10,17,32,.78);
  --rumi-line:rgba(255,255,255,.10);
  --rumi-blue:#38a8ff;
  --rumi-green:#36d6a0;
  --rumi-purple:#9b7cff;
}
html,body{background:var(--rumi-bg)!important;min-height:100%;}
body{overflow-x:hidden;}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(circle at 15% 10%,rgba(56,168,255,.055),transparent 28%),radial-gradient(circle at 85% 25%,rgba(155,124,255,.045),transparent 25%),#050914;}
#app{min-height:100vh;background:transparent;}

/* One visual language for every area. The Academy/Shop headers keep their identity,
   but inherit the same cinematic glass treatment instead of switching to a separate palette. */
.cinematic-header,
body[data-area="academy"] .topbar,
body[data-area="shop"] .topbar{
  background:linear-gradient(135deg,rgba(7,16,30,.91),rgba(8,17,31,.72))!important;
  border:1px solid rgba(110,195,255,.16)!important;
  box-shadow:0 14px 50px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.025) inset!important;
}
.cinematic-header .nav{position:relative;z-index:2;}
.cinematic-header .navlinks a{position:relative;transition:color .25s ease,opacity .25s ease;}
.cinematic-header .navlinks a::after{content:"";position:absolute;left:50%;right:50%;bottom:-8px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--rumi-blue),var(--rumi-green));transition:left .25s ease,right .25s ease;opacity:0;}
.cinematic-header .navlinks a:hover::after{left:20%;right:20%;opacity:1;}
.cinematic-header .brand-mark{background:linear-gradient(145deg,rgba(56,168,255,.16),rgba(54,214,160,.10),rgba(155,124,255,.08));}
.cinematic-header .account-btn:hover{border-color:rgba(110,195,255,.3);background:rgba(56,168,255,.08);transform:translateY(-1px);}
.cinematic-header .iconbtn{color:#dbeeff;}
.menu-toggle{display:none!important;}

/* Prevent the fixed header from covering content on ordinary inner pages. */
body:not(:has(.cinematic-home)) #app{padding-top:106px;}
body:has(.cinematic-home) #app{padding-top:0;}
.auth-shell{padding-top:34px!important;padding-bottom:90px!important;min-height:calc(100vh - 106px);display:flex;align-items:flex-start;}
.auth-card{position:relative;z-index:3;margin-top:18px!important;background:linear-gradient(145deg,rgba(12,22,39,.94),rgba(7,14,27,.90))!important;border:1px solid rgba(110,195,255,.13)!important;box-shadow:0 30px 80px rgba(0,0,0,.35)!important;}
.auth-card h1{color:#f4f8ff;}
.auth-card .field input,.auth-card .field textarea,.auth-card .field select{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.10);color:#eef7ff;}
.auth-card .field input:focus,.auth-card .field textarea:focus,.auth-card .field select:focus{border-color:rgba(56,168,255,.55);box-shadow:0 0 0 3px rgba(56,168,255,.10);}

/* No accidental white seam between main content and footer. */
.cinematic-home,.cinematic-home>*{background-color:transparent;}
.home-cta,.home-stats,.home-showcase,.home-cards,.home-intro{background-color:#050914;}
.cinematic-footer{margin-top:0!important;background:#030711!important;position:relative;z-index:2;}
.cinematic-footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,transparent,rgba(56,168,255,.38),rgba(54,214,160,.24),transparent);opacity:.7;}

/* Desktop = normal navigation. Mobile/tablet = hamburger. */
@media (max-width:900px){
  .menu-toggle{display:grid!important;place-items:center;}
  .cinematic-header .navlinks{z-index:20;}
  body:not(:has(.cinematic-home)) #app{padding-top:88px;}
  .auth-shell{min-height:calc(100vh - 88px);padding-top:22px!important;}
}
@media (min-width:901px){
  .cinematic-header .navlinks{display:flex!important;position:static!important;background:transparent!important;border:0!important;padding:0!important;}
  .cinematic-header .menu-toggle{display:none!important;}
}
@media (max-width:560px){
  body:not(:has(.cinematic-home)) #app{padding-top:78px;}
  .auth-shell{padding-top:12px!important;padding-bottom:60px!important;}
  .auth-card{margin-top:8px!important;}
}

/* Keep the hero headline on one line where the viewport can support it. */
.hero-copy h1{white-space:nowrap;font-size:clamp(40px,5.4vw,76px);}
@media(max-width:560px){.hero-copy h1{font-size:clamp(31px,10vw,45px);white-space:nowrap;letter-spacing:-1px;}}


/* =========================================================
   RUMILAND V4 — LIGHT THEME + VISUAL HOME CARDS
   ========================================================= */
/* Home intentionally remains cinematic/dark in both themes.
   Inner pages follow the actual Light/Dark preference. */
html[data-theme="light"] body:not(:has(.cinematic-home)){
  background:var(--bg)!important;
  color:var(--text);
}
html[data-theme="light"] body:not(:has(.cinematic-home))::before{
  background:
    radial-gradient(circle at 12% 8%,rgba(56,168,255,.07),transparent 28%),
    radial-gradient(circle at 88% 22%,rgba(54,214,160,.055),transparent 25%),
    var(--bg);
}
html[data-theme="dark"] body:not(:has(.cinematic-home)){
  background:#050914!important;
  color:#eef7f2;
}
html[data-theme="dark"] body:not(:has(.cinematic-home))::before{
  background:
    radial-gradient(circle at 12% 8%,rgba(56,168,255,.055),transparent 28%),
    radial-gradient(circle at 88% 22%,rgba(155,124,255,.045),transparent 25%),
    #050914;
}
/* Shared header language, with a genuinely light glass version in Light mode. */
html[data-theme="light"] body:not(:has(.cinematic-home)) .cinematic-header{
  background:rgba(255,255,255,.84)!important;
  border-color:rgba(20,45,70,.10)!important;
  box-shadow:0 14px 45px rgba(25,55,80,.10),0 0 0 1px rgba(255,255,255,.7) inset!important;
}
html[data-theme="light"] body:not(:has(.cinematic-home)) .cinematic-header .brand-text span{color:#17231e}
html[data-theme="light"] body:not(:has(.cinematic-home)) .cinematic-header .brand-text small{color:#718079}
html[data-theme="light"] body:not(:has(.cinematic-home)) .cinematic-header .navlinks a{color:#33453f}
html[data-theme="light"] body:not(:has(.cinematic-home)) .cinematic-header .navlinks a:hover{color:#168b63}
html[data-theme="light"] body:not(:has(.cinematic-home)) .cinematic-header .iconbtn{color:#20332d}
html[data-theme="light"] body:not(:has(.cinematic-home)) .account-btn{
  color:#172b26;background:rgba(22,139,99,.06);border-color:rgba(22,139,99,.12)
}
html[data-theme="light"] body:not(:has(.cinematic-home)) .cinematic-footer{
  background:linear-gradient(180deg,#10201d,#0a1514)!important;
}
/* The cards become visual tiles rather than empty text boxes. */
.experience-card{
  padding:0!important;
  min-height:420px!important;
  display:flex;
  flex-direction:column;
  background:linear-gradient(145deg,rgba(14,24,42,.96),rgba(7,14,27,.96))!important;
}
.experience-media{
  position:relative;
  height:190px;
  overflow:hidden;
  flex:0 0 190px;
  background:#091321;
}
.experience-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(3,8,17,.02) 25%,rgba(3,8,17,.78) 100%);
  pointer-events:none;
}
.experience-media img{
  width:100%;height:100%;display:block;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .7s ease;
  filter:saturate(.88) contrast(1.03);
}
.experience-card:hover .experience-media img{transform:scale(1.06);filter:saturate(1) contrast(1.05)}
.experience-media span{
  position:absolute;z-index:2;top:18px;right:20px;color:#d6e8f7!important;font:11px/1 Arial!important;letter-spacing:2px;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.experience-body{padding:24px 28px 27px;display:flex;flex:1;flex-direction:column;position:relative;z-index:2}
.experience-body strong{display:block!important;margin:0 0 10px!important;font-size:27px!important;color:#f5f9ff}
.experience-body p{color:#91a1b8;margin:0 0 18px;line-height:1.9;font-size:13px}
.experience-body b{margin-top:auto;font-size:11px;color:#8bd1ff}
.experience-card:after{z-index:1;opacity:.7}
@media(max-width:900px){
  .experience-card{min-height:400px!important}
  .experience-media{height:180px;flex-basis:180px}
}
@media(max-width:560px){
  .experience-card{min-height:370px!important}
  .experience-media{height:165px;flex-basis:165px}
  .experience-body{padding:21px 22px 24px}
  .experience-body strong{font-size:24px!important}
}