/* ==========================================
   CHARAN AI PORTFOLIO
   PART 1A - RESET + VARIABLES + BASE
========================================== */

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

:root{

    --bg:#050816;
    --bg2:#0b1228;

    --card:#11192f;
    --card2:#172340;

    --primary:#63e6ff;
    --secondary:#8b5cf6;

    --white:#ffffff;

    --text:#d9e7ff;
    --muted:#8da3c4;

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

    --radius:22px;

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

    --transition:.35s ease;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Outfit",sans-serif;

    background:var(--bg);

    color:var(--white);

    overflow-x:hidden;

    line-height:1.7;

    position:relative;

}

/* Scrollbar */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#08101f;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:100px;

}

/* Selection */

::selection{

    background:var(--primary);

    color:#000;

}

img{

    display:block;

    max-width:100%;

}

a{

    color:inherit;

    text-decoration:none;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}

.container{

    width:min(1200px,92%);

    margin:auto;

}

section{

    padding:110px 0;

}

p{

    color:var(--text);

}

.section-kicker{

    color:var(--primary);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:13px;

    margin-bottom:16px;

}

.section-heading h2{

    font-size:clamp(42px,5vw,62px);

    line-height:1.1;

    margin:16px 0;

}

.section-heading em{

    color:var(--primary);

    font-style:normal;

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

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(circle at top left,
    rgba(99,230,255,.15),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(139,92,246,.15),
    transparent 35%);

    z-index:-2;

}

.space{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-3;

}

.stars{

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(#ffffff66 1px,transparent 1px);

    background-size:34px 34px;

    opacity:.35;

}

.orb{

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    filter:blur(90px);

    opacity:.15;

}

.orb.one{

    top:-180px;

    left:-150px;

    background:#3b82f6;

}

.orb.two{

    right:-150px;

    bottom:-200px;

    background:#8b5cf6;

}
/* ==========================================
   LOADER
========================================== */

.loader{
    position:fixed;
    inset:0;
    background:#050816;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:18px;
    z-index:9999;
    transition:.6s;
}

.loader.hide{
    opacity:0;
    visibility:hidden;
}

.loader-mark{
    width:90px;
    height:90px;
    border-radius:22px;
    border:2px solid var(--primary);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    font-weight:800;
    color:var(--primary);
    box-shadow:0 0 40px rgba(99,230,255,.35);
}

.loader p{
    letter-spacing:4px;
    font-size:13px;
    color:var(--muted);
}

.loader i{
    width:180px;
    height:5px;
    background:rgba(255,255,255,.08);
    border-radius:50px;
    overflow:hidden;
}

.loader i b{
    display:block;
    width:40%;
    height:100%;
    background:var(--primary);
    animation:loading 1.2s linear infinite;
}

@keyframes loading{

    from{
        transform:translateX(-100%);
    }

    to{
        transform:translateX(300%);
    }

}

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

.nav-wrap{

    position:fixed;

    top:18px;

    left:50%;

    transform:translateX(-50%);

    width:100%;

    z-index:1000;

}

.nav{

    width:min(1200px,92%);

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 24px;

    background:rgba(10,15,30,.75);

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

    backdrop-filter:blur(18px);

    border-radius:18px;

    box-shadow:var(--shadow);

}

.brand{

    display:flex;

    align-items:center;

    gap:14px;

    font-size:24px;

    font-weight:700;

}

.brand span{

    width:42px;

    height:42px;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:2px solid var(--primary);

    color:var(--primary);

    font-size:15px;

}

.brand em{

    color:var(--primary);

    font-style:normal;

}

.nav-links{

    display:flex;

    gap:34px;

}

.nav-links a{

    color:var(--text);

    transition:var(--transition);

    font-weight:500;

    position:relative;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.3s;

}

.nav-links a:hover::after,
.nav-links a.active::after{

    width:100%;

}

.nav-links a:hover,
.nav-links a.active{

    color:var(--primary);

}

.menu-toggle{

    display:none;

    flex-direction:column;

    gap:6px;

}

.menu-toggle i{

    width:26px;

    height:2px;

    background:#fff;

}

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

.hero{

    min-height:100vh;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:80px;

    padding-top:140px;

}

.hero-copy{

    max-width:650px;

}

.eyebrow{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--muted);

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:13px;

}

.eyebrow span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--primary);

    box-shadow:0 0 18px var(--primary);

}

.hero-copy h1{

    margin:30px 0;

    font-size:clamp(60px,7vw,92px);

    line-height:.95;

    font-weight:800;

}

.hero-copy h1 em{

    color:var(--primary);

    font-style:normal;

}

.hero-text{

    font-size:20px;

    max-width:620px;

    margin-bottom:35px;

}

.type-line{

    margin-top:20px;

    font-size:18px;

    color:var(--muted);

}

.type-line span{

    color:var(--primary);

}

.actions{

    display:flex;

    gap:18px;

    margin:40px 0;

}

.button{

    padding:15px 28px;

    border-radius:14px;

    transition:.3s;

    font-weight:700;

}

.button.primary{

    background:var(--primary);

    color:#071019;

}

.button.primary:hover{

    transform:translateY(-5px);

}

.button.ghost{

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

}

.button.ghost:hover{

    border-color:var(--primary);

    color:var(--primary);

}

.hero-meta{

    display:flex;

    gap:30px;

    flex-wrap:wrap;

    margin-top:20px;

}

.hero-meta span{

    color:var(--muted);

    font-size:13px;

}

.hero-meta b{

    color:var(--primary);

}
/* ==========================================
   AI CORE
========================================== */

.core-wrap{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:20px;

}

.core-wrap small{

    letter-spacing:3px;

    color:var(--muted);

}

.ai-core{

    width:340px;

    height:340px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    background:

    radial-gradient(circle,#63e6ff,#355bff,#19154f);

    box-shadow:

    0 0 80px rgba(99,230,255,.35);

    animation:float 5s ease-in-out infinite;

}

.ai-core div{

    font-size:64px;

    font-weight:800;

    text-align:center;

}

.ai-core small{

    display:block;

    font-size:14px;

    margin-top:10px;

    letter-spacing:5px;

}

.ai-core i{

    position:absolute;

    border-radius:50%;

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

}

.ai-core i:nth-child(1){

    inset:-20px;

    animation:spin 14s linear infinite;

}

.ai-core i:nth-child(2){

    inset:-45px;

    animation:spin 20s linear reverse infinite;

}

.ai-core i:nth-child(3){

    inset:-70px;

    animation:spin 28s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}
/* ==========================================
   ABOUT
========================================== */

.about-section{

    padding-top:120px;

}

.about-layout{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

.about-copy h2{

    font-size:clamp(44px,5vw,62px);

    margin:20px 0;

    line-height:1.1;

}

.about-copy h2 em{

    color:var(--primary);

    font-style:normal;

}

.about-copy p{

    font-size:18px;

    color:var(--text);

    margin-bottom:24px;

    max-width:650px;

}

.section-label{

    color:var(--primary);

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:13px;

}
/* ==========================================
   ABOUT CARDS
========================================== */

.about-cards{

    display:grid;

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

    gap:22px;

    margin-top:40px;

}

.about-card{

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

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

    border-radius:22px;

    padding:28px;

    transition:.35s;

    backdrop-filter:blur(16px);

}

.about-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:0 20px 40px rgba(99,230,255,.12);

}

.about-card span{

    color:var(--primary);

    font-size:14px;

    font-weight:700;

}

.about-card b{

    display:block;

    font-size:36px;

    margin:18px 0;

}

.about-card h3{

    font-size:24px;

    margin-bottom:12px;

}

.about-card p{

    color:var(--muted);

    margin-bottom:20px;

}

.about-card i{

    color:var(--primary);

    font-style:normal;

    font-size:13px;

    letter-spacing:2px;

}
/* ==========================================
   SKILLS
========================================== */

.skills-section{

    padding-top:120px;

}

.skills-heading{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:50px;

    margin-bottom:50px;

}

.skills-summary{

    max-width:500px;

    color:var(--muted);

    font-size:18px;

}
.skills-console{

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

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

    border-radius:24px;

    padding:35px;

    backdrop-filter:blur(18px);

    margin-bottom:40px;

}

.console-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.console-top p{

    letter-spacing:2px;

    color:var(--muted);

}

.live-dot{

    width:10px;

    height:10px;

    background:#32ff87;

    border-radius:50%;

    box-shadow:0 0 15px #32ff87;

}

.skill-grid{

    display:grid;

    gap:30px;

}

.skill-grid article{

    display:grid;

    grid-template-columns:80px 1fr;

    gap:20px;

    align-items:center;

}

.skill-grid b{

    font-size:32px;

    color:var(--primary);

}
.skill-grid header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

}

.skill-grid h3{

    font-size:24px;

}

.skill-grid p{

    color:var(--muted);

    margin-bottom:15px;

}

.skill-grid i{

    display:block;

    height:10px;

    border-radius:100px;

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

    overflow:hidden;

}

.skill-fill{

    display:block;

    width:0;

    height:100%;

    background:linear-gradient(
    90deg,
    var(--primary),
    #6ee7ff);

    transition:1.4s;

}
.skill-labs{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

}

.lab-card,
.learning-card{

    padding:35px;

    border-radius:22px;

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

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

}

.lab-card div{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:25px;

}

.lab-card span{

    padding:10px 18px;

    border-radius:50px;

    background:#16203b;

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

}

.learning-card ul{

    margin-top:25px;

    display:grid;

    gap:18px;

}

.learning-card li{

    list-style:none;

}

.learning-card span{

    color:var(--primary);

    font-weight:700;

    margin-right:12px;

}
/* ==========================================
   PROJECTS
========================================== */

.projects-section{

    padding-top:120px;

}

.projects-head{

    display:flex;

    justify-content:space-between;

    align-items:end;

    gap:60px;

    margin-bottom:50px;

}

.projects-side{

    max-width:420px;

}

.text-link{

    display:inline-block;

    margin-top:20px;

    color:var(--primary);

    font-weight:600;

}
.project-controls{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin-bottom:40px;

}

.project-filter{

    padding:12px 22px;

    border-radius:100px;

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

    background:#131c34;

    color:white;

    transition:.3s;

}

.project-filter span{

    color:var(--primary);

    margin-left:8px;

}

.project-filter.active,
.project-filter:hover{

    background:var(--primary);

    color:#000;

}
.project-showcase{

    display:grid;

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

    gap:30px;

}

.project-card{

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

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

    border-radius:24px;

    overflow:hidden;

    transition:.35s;

}

.project-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:0 25px 50px rgba(99,230,255,.12);

}

.project-card.hidden{

    display:none;

}
.project-screen{

    height:230px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:25px;

    background:linear-gradient(
    135deg,
    #162447,
    #0d1426);

}

.project-screen header{

    display:flex;

    justify-content:space-between;

    color:#c9d8ef;

    font-size:13px;

}

.jarvis-orb{

    width:120px;

    height:120px;

    border-radius:50%;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    background:radial-gradient(circle,
    var(--primary),
    #2344ff);

    font-size:42px;

    font-weight:700;

    box-shadow:0 0 50px rgba(99,230,255,.4);

}
.project-body{

    padding:30px;

}

.project-body header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:16px 0;

}

.project-body h3{

    font-size:28px;

}

.project-body footer{

    margin-top:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.project-body footer div{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}

.project-body footer span{

    padding:8px 16px;

    border-radius:50px;

    background:#16203b;

    font-size:13px;

}

.project-body footer a{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary);

    color:#000;

    font-weight:700;

}
/* ==========================================
   SERVICES
========================================== */

.services{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:start;

}

.service-list{

    display:grid;

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

    gap:22px;

}

.service-list article{

    padding:28px;

    border-radius:22px;

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

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

    transition:.35s;

}

.service-list article:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

}

.service-list span{

    color:var(--primary);

    font-weight:700;

}

.service-list h3{

    margin:18px 0 12px;

}

.service-list b{

    display:inline-block;

    margin-top:20px;

    color:var(--primary);

}
/* ==========================================
   CERTIFICATES
========================================== */

.certs{

    display:grid;

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

    gap:24px;

    margin-top:45px;

}

.certs article{

    padding:30px;

    border-radius:22px;

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

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

    transition:.35s;

}

.certs article:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

}

.certs p{

    color:var(--primary);

    font-size:13px;

    letter-spacing:2px;

}

.certs strong{

    display:block;

    font-size:24px;

    margin:16px 0;

}
/* ==========================================
   CONTACT
========================================== */

.contact{

    padding:120px 0;

}

.contact-panel{

    text-align:center;

    padding:70px;

    border-radius:30px;

    background:linear-gradient(
    135deg,
    rgba(99,230,255,.12),
    rgba(139,92,246,.12));

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

}

.contact-panel h2{

    font-size:clamp(48px,5vw,72px);

    margin:20px 0;

}

.contact-panel em{

    color:var(--primary);

    font-style:normal;

}

.contact .actions{

    justify-content:center;

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

.footer{

    padding:60px 0;

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:40px;

    align-items:center;

}

.footer-left p{

    margin-top:18px;

    max-width:420px;

}

.footer-links{

    display:flex;

    justify-content:flex-end;

    gap:30px;

}

.footer-links a{

    color:var(--text);

    transition:.3s;

}

.footer-links a:hover{

    color:var(--primary);

}

.copyright{

    grid-column:1/-1;

    text-align:center;

    margin-top:25px;

    color:var(--muted);

}

#toTop{

    position:fixed;

    right:35px;

    bottom:35px;

    width:55px;

    height:55px;

    border-radius:50%;

    background:var(--primary);

    color:#000;

    font-size:22px;

    font-weight:700;

    box-shadow:0 0 30px rgba(99,230,255,.35);

    cursor:pointer;

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

@media (max-width:1100px){

.hero,
.about-layout,
.services,
.footer{

grid-template-columns:1fr;

}

.skills-heading,
.projects-head{

flex-direction:column;

align-items:flex-start;

}

.project-showcase{

grid-template-columns:1fr;

}

.skill-labs{

grid-template-columns:1fr;

}

.certs{

grid-template-columns:1fr;

}

.service-list{

grid-template-columns:1fr 1fr;

}

.core-wrap{

margin-top:60px;

}

}

@media (max-width:768px){

.nav-links{

display:none;

}

.nav-links.open{

display:flex;

position:absolute;

top:90px;

left:0;

right:0;

flex-direction:column;

padding:30px;

border-radius:20px;

background:#0b1228;

}

.menu-toggle{

display:flex;

}

.hero{

padding-top:140px;

}

.hero-copy h1{

font-size:54px;

}

.about-cards{

grid-template-columns:1fr;

}

.service-list{

grid-template-columns:1fr;

}

.contact-panel{

padding:40px 25px;

}

.footer{

text-align:center;

}

.footer-links{

justify-content:center;

}

}

@media (max-width:500px){

.hero-copy h1{

font-size:42px;

}

.section-heading h2{

font-size:38px;

}

.ai-core{

width:250px;

height:250px;

}

.project-body h3{

font-size:24px;

}

.button{

width:100%;

}

.actions{

flex-direction:column;

}

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

.reveal{

opacity:0;

transform:translateY(60px);

transition:1s ease;

}

.reveal.visible{

opacity:1;

transform:none;

}

.delay-1{

transition-delay:.15s;

}

.delay-2{

transition-delay:.3s;

}

.project-card,
.about-card,
.service-list article,
.certs article{

transition:.35s ease;

}

.project-card:hover,
.about-card:hover,
.service-list article:hover,
.certs article:hover{

transform:translateY(-12px);

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

html{

scroll-padding-top:120px;

}

section{

position:relative;

}

.project-note{

text-align:center;

margin-top:40px;

color:var(--muted);

}

small{

color:var(--muted);

}

strong{

color:white;

}

::selection{

background:var(--primary);

color:#08111e;

}

body{

animation:fadeBody 1s ease;

}

@keyframes fadeBody{

from{

opacity:0;

}

to{

opacity:1;

}

}
/* ===========================
   PREMIUM GLOW
=========================== */

.about-card,
.project-card,
.service-list article,
.certs article,
.lab-card,
.learning-card{

    position:relative;
    overflow:hidden;

}

.about-card::before,
.project-card::before,
.service-list article::before,
.certs article::before,
.lab-card::before,
.learning-card::before{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    background:radial-gradient(
        circle,
        rgba(99,230,255,.18),
        transparent 70%
    );

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

    transition:.5s;

}

.about-card:hover::before,
.project-card:hover::before,
.service-list article:hover::before,
.certs article:hover::before,
.lab-card:hover::before,
.learning-card:hover::before{

    top:-40px;
    left:-40px;

}
.button{

    position:relative;

    overflow:hidden;

}

.button::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform:translateX(-120%);

}

.button:hover::after{

    animation:shine .8s linear;

}

@keyframes shine{

    to{

        transform:translateX(120%);

    }

}
.hero-copy h1{

    letter-spacing:-2px;

    text-shadow:

        0 0 40px rgba(99,230,255,.12);

}
html{

    scroll-behavior:smooth;

}

body{

    scroll-behavior:smooth;

}
.project-card:hover,
.about-card:hover,
.service-list article:hover,
.certs article:hover{

    box-shadow:

    0 25px 70px rgba(99,230,255,.12);

}
/* ==========================================
   SCROLL PROGRESS
========================================== */

.scroll-progress{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:transparent;

    z-index:99999;

}

.scroll-bar{

    width:0;

    height:100%;

    background:linear-gradient(
        90deg,
        #63e6ff,
        #8b5cf6);

    box-shadow:0 0 15px #63e6ff;

}
.cursor-glow{

    position:fixed;

    width:220px;
    height:220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(99,230,255,.15),
        transparent 70%
    );

    pointer-events:none;

    transform:translate(-50%,-50%);

    z-index:-1;

    transition:
        left .08s linear,
        top .08s linear;

}
.hero-copy{

    animation:slideLeft 1s ease;

}

.core-wrap{

    animation:slideRight 1s ease;

}

@keyframes slideLeft{

from{

opacity:0;

transform:translateX(-60px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes slideRight{

from{

opacity:0;

transform:translateX(60px);

}

to{

opacity:1;

transform:none;

}

}
.ai-core{

    animation:

        float 5s ease-in-out infinite,

        pulseGlow 3s infinite;

}

@keyframes pulseGlow{

0%,100%{

box-shadow:

0 0 50px rgba(99,230,255,.35);

}

50%{

box-shadow:

0 0 90px rgba(99,230,255,.6);

}

}
section::after{

    content:"";

    display:block;

    width:120px;

    height:2px;

    margin:100px auto 0;

    background:linear-gradient(
        90deg,
        transparent,
        #63e6ff,
        transparent);

    opacity:.35;

}
.project-card:hover{

    transform:

        translateY(-12px)

        scale(1.02);

}

.about-card:hover{

    transform:

        translateY(-10px)

        scale(1.03);

}

/* NEXA / FORGE / GUARDIAN / BOOKS POLISH */
.nexa-os,.nexa-ai,.forge,.guardian{position:relative;overflow:hidden}.nexa-os{background:radial-gradient(circle at 70% 45%,rgba(99,230,255,.22),transparent 28%),linear-gradient(135deg,#101d39,#070b18)}.nexa-ai{background:radial-gradient(circle at 50% 48%,rgba(99,230,255,.25),transparent 25%),linear-gradient(135deg,#101d39,#080b18)}.forge{background:radial-gradient(circle at 50% 50%,rgba(139,92,246,.22),transparent 28%),linear-gradient(135deg,#1a1638,#090b17)}.guardian{background:radial-gradient(circle at 50% 50%,rgba(50,255,135,.16),transparent 28%),linear-gradient(135deg,#10261f,#080d16)}.nexa-mark,.nexa-ai-orb,.forge-core,.guardian-core{margin:auto;display:flex;align-items:center;justify-content:center;font-weight:800;position:relative}.nexa-mark{width:125px;height:125px;border:1px solid rgba(99,230,255,.5);border-radius:32px;font-size:50px;color:var(--primary);box-shadow:0 0 55px rgba(99,230,255,.18);transform:rotate(-8deg)}.nexa-mark span{opacity:.55}.nexa-ai-orb{width:120px;height:120px;border-radius:50%;color:#071019;background:radial-gradient(circle at 35% 30%,#fff,var(--primary) 32%,#3154ff 75%);font-size:48px;box-shadow:0 0 65px rgba(99,230,255,.35);animation:pulseGlow 3s ease-in-out infinite}.forge-core{width:120px;height:120px;border-radius:28px;border:1px solid rgba(139,92,246,.55);color:#fff;font-size:55px;background:linear-gradient(145deg,#2b215d,#101024);box-shadow:0 0 60px rgba(139,92,246,.25);transform:rotate(6deg)}.guardian-core{width:120px;height:120px;border-radius:50%;color:#071019;background:radial-gradient(circle,#b7ffd2,#32ff87 45%,#0a6840);font-size:50px;box-shadow:0 0 60px rgba(50,255,135,.22)}.books-section{padding-top:120px}.books-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:50px}.books-summary{max-width:500px;color:var(--muted);font-size:18px}.books-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}.book-card{display:grid;grid-template-columns:210px 1fr;min-height:310px;overflow:hidden;border-radius:24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:.35s ease}.book-card:hover{transform:translateY(-10px);border-color:var(--primary);box-shadow:0 25px 70px rgba(99,230,255,.12)}.book-cover{min-height:310px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.book-cover::after{content:"";position:absolute;width:160px;height:160px;right:-70px;bottom:-70px;border-radius:50%;border:1px solid rgba(255,255,255,.2);box-shadow:0 0 60px rgba(99,230,255,.15)}.book-cover-dark{background:linear-gradient(145deg,#101d39,#050814)}.book-cover-mystery{background:linear-gradient(145deg,#261b46,#080914)}.book-cover span,.book-cover small{position:relative;z-index:1;color:var(--primary);letter-spacing:2px;font-size:11px}.book-cover strong{position:relative;z-index:1;font-size:27px;line-height:1.05;letter-spacing:-1px}.book-info{padding:32px;display:flex;flex-direction:column;justify-content:center}.book-info>p:first-child{color:var(--primary);font-size:12px;letter-spacing:2px}.book-info h3{font-size:30px;margin:14px 0}.book-info p{color:var(--muted)}.book-status{width:max-content;margin-top:22px;padding:7px 12px;border:1px solid rgba(99,230,255,.18);border-radius:50px;color:var(--primary);font-size:11px;letter-spacing:1.5px}.project-screen>p{color:var(--muted);font-size:12px;letter-spacing:2px}@media (max-width:900px){.books-grid{grid-template-columns:1fr}}@media (max-width:600px){.book-card{grid-template-columns:1fr}.book-cover{min-height:260px}}

.book-status.published{
    border-color:rgba(50,255,135,.25);
    color:#32ff87;
    box-shadow:0 0 20px rgba(50,255,135,.08);
}

@media (min-width:1050px){
    .books-grid{
        grid-template-columns:repeat(2,1fr);
    }
}