/* =========================================
RENDERWORLD
Premium Landing Page Design
========================================= */

:root{

    --bg:#030712;
    --bg-light:#0f172a;
    
    --text:#f8fafc;
    --muted:#cbd5e1;
    
    --gold:#d4af37;
    --gold-light:#f4d76f;
    
    --blue:#60a5fa;
    --blue-light:#93c5fd;
    
    --glass:rgba(255,255,255,.05);
    --border:rgba(255,255,255,.08);
    
    --radius:24px;
    
    --transition:.4s ease;
    
    }
    
    /* ======================
    RESET
    ====================== */
    
    *{
    margin:0;
    padding:0;
    box-sizing:border-box;
    }
    
    html{
    scroll-behavior:smooth;
    }
    
    body{
    
    font-family:'Inter',sans-serif;
    
    background:
    linear-gradient(
    180deg,
    var(--bg),
    var(--bg-light)
    );
    
    color:var(--text);
    
    overflow-x:hidden;
    
    }
    
    /* ======================
    STARS
    ====================== */
    
    .stars{
    
    position:fixed;
    
    inset:0;
    
    z-index:-3;
    
    background-image:
    
    radial-gradient(
    circle at 20% 20%,
    rgba(255,255,255,.9) 1px,
    transparent 1px
    ),
    
    radial-gradient(
    circle at 80% 10%,
    rgba(255,255,255,.7) 1px,
    transparent 1px
    ),
    
    radial-gradient(
    circle at 50% 50%,
    rgba(255,255,255,.7) 1px,
    transparent 1px
    ),
    
    radial-gradient(
    circle at 10% 90%,
    rgba(255,255,255,.8) 1px,
    transparent 1px
    );
    
    background-size:
    220px 220px;
    
    opacity:.35;
    
    animation:
    starsMove 120s linear infinite;
    
    }
    
    @keyframes starsMove{
    
    from{
    transform:translateY(0);
    }
    
    to{
    transform:translateY(-500px);
    }
    
    }
    
    /* ======================
    GRADIENT BG
    ====================== */
    
    .gradient-bg{
    
    position:fixed;
    
    top:-300px;
    left:50%;
    
    transform:translateX(-50%);
    
    width:900px;
    height:900px;
    
    border-radius:50%;
    
    background:
    
    radial-gradient(
    circle,
    rgba(96,165,250,.15),
    transparent 70%
    );
    
    filter:blur(80px);
    
    z-index:-2;
    
    }
    
    /* ======================
    NAVBAR
    ====================== */
    
    .navbar{
    
    position:fixed;
    
    top:0;
    
    width:100%;
    
    padding:20px 7%;
    
    display:flex;
    
    align-items:center;
    justify-content:space-between;
    
    backdrop-filter:blur(12px);
    
    background:
    rgba(3,7,18,.4);
    
    border-bottom:
    1px solid rgba(255,255,255,.05);
    
    z-index:999;
    
    }
    
    .logo{
    
    font-family:'Cinzel',serif;
    
    font-size:1.4rem;
    
    letter-spacing:.15em;
    
    font-weight:700;
    
    color:var(--gold);
    
    }
    
    .nav-links{
    
    display:flex;
    
    list-style:none;
    
    gap:40px;
    
    }
    
    .nav-links a{
    
    color:white;
    
    text-decoration:none;
    
    font-weight:500;
    
    transition:var(--transition);
    
    }
    
    .nav-links a:hover{
    
    color:var(--gold);
    
    }
    
    .nav-button{
    
    padding:12px 24px;
    
    border-radius:999px;
    
    text-decoration:none;
    
    color:white;
    
    border:
    1px solid var(--gold);
    
    transition:var(--transition);
    
    }
    
    .nav-button:hover{
    
    background:var(--gold);
    
    color:black;
    
    }
    
    /* ======================
    HERO
    ====================== */
    
    .hero{
    
    min-height:100vh;
    
    display:flex;
    
    flex-direction:column;
    
    justify-content:center;
    
    align-items:center;
    
    text-align:center;
    
    padding:120px 20px;
    
    position:relative;
    
    }
    
    .hero-globe{
    
    position:relative;
    
    width:420px;
    height:420px;
    
    margin-bottom:50px;
    
    }
    
    /* Earth */
    
    .earth{
    
    position:absolute;
    
    inset:70px;
    
    border-radius:50%;
    
    background:
    
    radial-gradient(
    circle at 30% 30%,
    #9fd4ff,
    #2563eb 65%,
    #0f172a
    );
    
    box-shadow:
    
    0 0 60px rgba(96,165,250,.6),
    
    0 0 140px rgba(96,165,250,.3);
    
    animation:
    rotateEarth 20s linear infinite;
    
    }
    
    @keyframes rotateEarth{
    
    from{
    transform:rotate(0deg);
    }
    
    to{
    transform:rotate(360deg);
    }
    
    }
    
    /* Orbits */
    
    .orbit{
    
    position:absolute;
    
    border-radius:50%;
    
    border:
    1px solid rgba(255,255,255,.08);
    
    }
    
    .orbit-1{
    
    inset:20px;
    
    animation:
    spin 20s linear infinite;
    
    }
    
    .orbit-2{
    
    inset:0;
    
    animation:
    spinReverse 30s linear infinite;
    
    }
    
    .orbit-3{
    
    inset:-30px;
    
    animation:
    spin 50s linear infinite;
    
    }
    
    @keyframes spin{
    
    from{
    transform:rotate(0deg);
    }
    
    to{
    transform:rotate(360deg);
    }
    
    }
    
    @keyframes spinReverse{
    
    from{
    transform:rotate(360deg);
    }
    
    to{
    transform:rotate(0deg);
    }
    
    }
    
    /* Hero Content */
    
    .hero-tag{
    
    display:inline-block;
    
    color:var(--gold);
    
    letter-spacing:.3em;
    
    margin-bottom:20px;
    
    font-size:.9rem;
    
    }
    
    .hero h1{
    
    font-family:'Cinzel',serif;
    
    font-size:
    clamp(4rem,9vw,8rem);
    
    line-height:1.05;
    
    max-width:1000px;
    
    }
    
    .hero p{
    
    max-width:750px;
    
    margin:30px auto;
    
    font-size:1.2rem;
    
    line-height:1.9;
    
    color:var(--muted);
    
    }
    
    .hero-buttons{
    
    display:flex;
    
    gap:20px;
    
    justify-content:center;
    
    flex-wrap:wrap;
    
    }
    
    /* Buttons */
    
    .primary-btn{
    
    display:inline-block;
    
    padding:16px 34px;
    
    background:
    linear-gradient(
    135deg,
    var(--gold),
    var(--gold-light)
    );
    
    border-radius:999px;
    
    text-decoration:none;
    
    color:black;
    
    font-weight:700;
    
    transition:var(--transition);
    
    }
    
    .primary-btn:hover{
    
    transform:
    translateY(-4px);
    
    }
    
    .secondary-btn{
    
    display:inline-block;
    
    padding:16px 34px;
    
    border-radius:999px;
    
    text-decoration:none;
    
    color:white;
    
    border:
    1px solid rgba(255,255,255,.15);
    
    }
    
    /* Scroll */
    
    .scroll-indicator{
    
    position:absolute;
    
    bottom:40px;
    
    display:flex;
    
    flex-direction:column;
    
    align-items:center;
    
    gap:10px;
    
    }
    
    .scroll-line{
    
    width:1px;
    height:60px;
    
    background:
    linear-gradient(
    transparent,
    white
    );
    
    }
    
    /* ======================
    SECTIONS
    ====================== */
    
    .section{
    
    padding:140px 8%;
    
    }
    
    .section-header{
    
    text-align:center;
    
    margin-bottom:60px;
    
    }
    
    .section-header span{
    
    color:var(--gold);
    
    letter-spacing:.25em;
    
    font-size:.85rem;
    
    }
    
    .section-header h2{
    
    font-family:'Cinzel',serif;
    
    font-size:
    clamp(2.5rem,5vw,4rem);
    
    margin-top:15px;
    
    }
    
    .large-text{
    
    max-width:900px;
    
    margin:auto;
    
    text-align:center;
    
    font-size:1.3rem;
    
    line-height:2;
    
    color:var(--muted);
    
    }
    
    /* ======================
    POEM
    ====================== */
    
    .poetry-section{
    
    padding:140px 10%;
    
    }
    
    .poem{
    
    max-width:900px;
    
    margin:auto;
    
    text-align:center;
    
    }
    
    .poem p{
    
    font-family:'Cinzel',serif;
    
    font-size:
    clamp(1.8rem,4vw,3rem);
    
    line-height:2;
    
    margin-bottom:20px;
    
    }
    
    .gold{
    
    color:var(--gold);
    
    }
    
    /* ======================
    CARDS
    ====================== */
    
    .cards{
    
    display:grid;
    
    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));
    
    gap:30px;
    
    }
    
    .card{
    
    background:var(--glass);
    
    border:
    1px solid var(--border);
    
    backdrop-filter:blur(12px);
    
    border-radius:var(--radius);
    
    padding:40px;
    
    transition:var(--transition);
    
    }
    
    .card:hover{
    
    transform:
    translateY(-10px);
    
    border-color:
    rgba(212,175,55,.4);
    
    }
    
    .card-icon{
    
    font-size:3rem;
    
    margin-bottom:20px;
    
    }
    
    .card h3{
    
    font-size:1.8rem;
    
    margin-bottom:15px;
    
    }
    
    .card p{
    
    line-height:1.8;
    
    color:var(--muted);
    
    }
    
    /* ======================
    KNOWLEDGE
    ====================== */
    
    .knowledge-grid{
    
    display:grid;
    
    grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));
    
    gap:30px;
    
    }
    
    .knowledge-node{
    
    height:180px;
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    border-radius:50%;
    
    background:
    rgba(96,165,250,.08);
    
    border:
    1px solid rgba(96,165,250,.4);
    
    transition:var(--transition);
    
    font-weight:600;
    
    }
    
    .knowledge-node:hover{
    
    transform:scale(1.08);
    
    box-shadow:
    0 0 30px rgba(96,165,250,.3);
    
    }
    
    /* ======================
    QUOTE
    ====================== */
    
    .quote-section{
    
    padding:180px 10%;
    
    text-align:center;
    
    }
    
    .quote-section h2{
    
    font-family:'Cinzel',serif;
    
    font-size:
    clamp(2rem,5vw,5rem);
    
    line-height:1.6;
    
    }
    
    /* ======================
    CTA
    ====================== */
    
    .cta{
    
    padding:180px 10%;
    
    text-align:center;
    
    }
    
    .cta h2{
    
    font-family:'Cinzel',serif;
    
    font-size:
    clamp(2.5rem,6vw,5rem);
    
    margin-bottom:30px;
    
    }
    
    .cta p{
    
    max-width:800px;
    
    margin:auto;
    
    line-height:2;
    
    font-size:1.2rem;
    
    color:var(--muted);
    
    margin-bottom:40px;
    
    }
    
    /* ======================
    FOOTER
    ====================== */
    
    footer{
    
    padding:80px 20px;
    
    text-align:center;
    
    border-top:
    1px solid rgba(255,255,255,.05);
    
    }
    
    .footer-logo{
    
    font-family:'Cinzel',serif;
    
    font-size:2rem;
    
    color:var(--gold);
    
    margin-bottom:15px;
    
    }
    
    /* ======================
    REVEAL
    ====================== */
    
    .reveal{
    
    opacity:0;
    
    transform:
    translateY(50px);
    
    transition:
    all .9s ease;
    
    }
    
    .reveal.active{
    
    opacity:1;
    
    transform:
    translateY(0);
    
    }
    
    /* ======================
    MOBILE
    ====================== */
    
    @media(max-width:900px){
    
    .nav-links{
    display:none;
    }
    
    .hero-globe{
    
    width:280px;
    height:280px;
    
    }
    
    .earth{
    
    inset:40px;
    
    }
    
    .hero h1{
    
    font-size:3rem;
    
    }
    
    .cards{
    
    grid-template-columns:1fr;
    
    }
    
    }