/* ==========================
   SIMPLIFAI MEDIA
   Version 1.0
========================== */

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#0B1120;

    color:#F8FAFC;

    overflow-x:hidden;

}

/* ==========================
        Navigation
========================== */

header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:1000;

    backdrop-filter:blur(18px);

    background:rgba(11,17,32,.55);

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

}
header.scrolled{

    background:rgba(11,17,32,.88);

    backdrop-filter:blur(28px);

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

    transition:all .35s ease;

}

.navbar{

    max-width:1500px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 50px;

}
.menu-toggle{

    display:none;

    background:none;

    border:none;

    color:#F8FAFC;

    font-size:28px;

    cursor:pointer;

    z-index:1100;

}
.logo{

    display:flex;

    align-items:center;

    gap:12px;

}

.logo img{

    width:42px;

    height:42px;

}

.logo-text{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.logo-title{

    display:block;

    font-size:1.25rem;

    font-weight:700;

    color:#F8FAFC;

    line-height:1.1;

}

.logo-tagline{

    display:block;

    margin-top:1px;

    font-size:.58rem;

    font-weight:600;

    letter-spacing:2.5px;

    color:#06B6D4;

    text-transform:uppercase;

    line-height:1;

}
.navbar ul{

    display:flex;

    gap:48px;

    list-style:none;

    align-items:center;

}

.navbar a{

    position:relative;

    color:white;

    text-decoration:none;

    font-weight:500;

    transition:color .3s ease;

}
.navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#06B6D4;

    transition:width .3s ease;

}

.navbar a:hover::after{

    width:100%;

}

.navbar a:hover{

    color:#06B6D4;

}


/* ==========================
          Hero
========================== */

.hero{

    min-height:78vh;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    text-align:center;
   gap:80px;

   padding:110px 30px 30px;

    overflow:hidden;
   

}

.hero-content{

    position:relative;

    z-index:5;

    max-width:700px;

    margin:0;

    text-align:left;

}

.eyebrow{

    color:#06B6D4;

    letter-spacing:4px;

    font-size:1.1rem;

    margin-bottom:24px;

    font-weight:600;

}

h1{

    font-size:72px;

    line-height:1.05;

    font-weight:800;

    letter-spacing:-2px;

    margin-bottom:28px;
   text-shadow:0 0 30px rgba(37,99,235,.18);

}

.subtitle{

    color:#CBD5E1;

    font-size:22px;

    line-height:1.8;

    max-width:620px;

    margin:0;

    opacity:.92;

}
.buttons{

    margin-top:45px;

    display:flex;

    justify-content:flex-start;

    gap:22px;

    flex-wrap:wrap;

}

/* ==========================
        Buttons
========================== */

.primary-btn{

    background:linear-gradient(135deg,#2563EB,#3B82F6);

    color:white;

    padding:18px 34px;

    border-radius:999px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.primary-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 25px 60px rgba(37,99,235,.45);

}

.secondary-btn{

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

    color:white;

    text-decoration:none;

    padding:18px 34px;

    border-radius:999px;

    transition:.35s;

}

.secondary-btn:hover{

    background:white;

    color:#0B1120;

}

/* ==========================
 Animated Background
========================== */

.hero-bg{

    position:absolute;

    width:1400px;

    height:1400px;

    border-radius:50%;

    background:
        radial-gradient(circle at 30% 30%, rgba(37,99,235,.45), transparent 35%),
        radial-gradient(circle at 70% 35%, rgba(139,92,246,.35), transparent 30%),
        radial-gradient(circle at 50% 80%, rgba(6,182,212,.35), transparent 35%);

    filter:blur(90px);

    opacity:.25;

    animation:heroFloat 18s ease-in-out infinite alternate;

}

@keyframes heroFloat{

    0%{

        transform:
            translate(-60px,-40px)
            scale(1);

    }

    100%{

        transform:
            translate(60px,40px)
            scale(1.08);

    }

}

/* ==========================
 Responsive
========================== */

@media(max-width:900px){

h1{

    font-size:52px;

}

.subtitle{

    font-size:18px;

}

.navbar{

    padding:18px 22px;

}

.menu-toggle{

    display:block;

}

.navbar ul{

    display:none;

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:#0B1120;

    flex-direction:column;

    gap:0;

    padding:20px 0;

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

}

.navbar ul.active{

    display:flex;

}

.navbar ul li{

    width:100%;

    text-align:center;

}

.navbar ul li a{

    display:block;

    padding:18px;

}

}
@media(max-width:600px){

h1{

font-size:42px;

}

.buttons{

flex-direction:column;

}

.primary-btn,.secondary-btn{

width:100%;

text-align:center;

}

}
/* =====================================
   Explore What Matters
===================================== */

.topics{

    padding:80px 8%;

}
.section-header{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

}

.section-label{

    color:#06B6D4;

    font-size:1.1rem;

    font-weight:700;

    letter-spacing:3px;

    margin-bottom:20px;

}

.section-header h2{

    font-size:48px;

    font-weight:800;

    margin-bottom:24px;

    line-height:1.15;

}

.section-description{

    max-width:720px;

    margin:0 auto;

    color:#94A3B8;

    font-size:20px;

    line-height:1.8;

}

.topics-grid{

    max-width:1400px;

    margin:auto;

    display:grid;

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

    gap:30px;

}

.topic-card{

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

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

    border-radius:28px;

    padding:36px;

    transition:.4s ease;

    backdrop-filter:blur(18px);

}

.topic-card:hover{

    transform:translateY(-8px) scale(1.015);

    border-color:#3B82F6;

    box-shadow:0 30px 80px rgba(59,130,246,.25);

}
.topic-card:hover .icon{

    background:#2563EB;

}

.topic-card:hover .icon svg{

    stroke:white;

}
.icon{

    width:64px;
    height:64px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:18px;

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

    margin-bottom:28px;

    transition:.35s ease;

}
.icon svg{

    width:30px;

    height:30px;

    stroke:#60A5FA;

    stroke-width:2;

}
.topic-card h3{

    font-size:26px;

    margin-bottom:16px;

}

.topic-card p{

    color:#94A3B8;

    line-height:1.7;

    font-size:16px;

}

/* Mobile */

@media(max-width:900px){

.topics-grid{

grid-template-columns:1fr;

}

.section-header h2{

font-size:42px;

}

}

section{

    scroll-margin-top:100px;

}
/* =====================================
   RESOURCES
===================================== */

.resources{

    padding:90px 8%;

}

.resources-grid{

    max-width:1400px;

    margin:80px auto 0;

    display:grid;

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

    gap:30px;

}

.resource-card{

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

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

    border-radius:24px;

    padding:40px;

    transition:.35s ease;

}

.resource-card:hover{

    transform:translateY(-8px);

    border-color:#2563EB;

    box-shadow:0 25px 70px rgba(37,99,235,.18);

}

.resource-tag{

    display:inline-block;

    margin-bottom:20px;

    padding:8px 14px;

    border-radius:999px;

    background:rgba(37,99,235,.15);

    color:#60A5FA;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

}

.resource-card h3{

    font-size:28px;

    margin-bottom:18px;

}

.resource-card p{

    color:#94A3B8;

    line-height:1.8;

    margin-bottom:24px;

}

.resource-card a{

    color:#60A5FA;

    text-decoration:none;

    font-weight:600;

}

@media(max-width:900px){

.resources-grid{

grid-template-columns:1fr;

}

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

.contact{

    padding:90px 8%;

}

.contact-grid{

    max-width:1300px;

    margin:80px auto 0;

    display:grid;

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

    gap:30px;

}

.contact-card{

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

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

    border-radius:24px;

    padding:42px;

    text-decoration:none;

    color:white;

    transition:.35s ease;

}

.contact-card:hover{

    transform:translateY(-10px);

    border-color:#2563EB;

    box-shadow:0 20px 60px rgba(37,99,235,.20);

}

.contact-icon{

    width:70px;

    height:70px;

    border-radius:20px;

    background:#2563EB;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

}

.contact-icon svg,
.contact-icon i{

    font-size:34px;

}

/* Replace the deleted YouTube/Instagram color rules with this */

.contact-icon i{

    color:#FFFFFF;

}

.contact-icon svg{

    width:34px;

    height:34px;

    stroke:#FFFFFF;

}


/* Official brand colors */



.contact-card h3{

    font-size:30px;

    margin-bottom:18px;

}

.contact-card p{

    color:#94A3B8;

    line-height:1.8;

    font-size:17px;

}

@media(max-width:900px){

.contact-grid{

grid-template-columns:1fr;

}

}
/* =====================================
   HERO ILLUSTRATION
   (code-generated: globe + orbiting icons + particles)
===================================== */

.hero-image{

    flex:1;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    z-index:5;

    margin-top:20px;

}

.hero-illustration{

    position:relative;

    width:640px;

    max-width:100%;

    aspect-ratio:1/1;

    display:flex;

    align-items:center;

    justify-content:center;

    will-change:transform;

}

/* ---------- Particles ---------- */

.hero-particles{

    position:absolute;

    inset:-10%;

    z-index:1;

    pointer-events:none;

}

.hero-particle{

    position:absolute;

    border-radius:50%;

    background:#7DD3FC;

    box-shadow:0 0 6px 1px rgba(125,211,252,.8);

    opacity:0;

    animation:particleDrift linear infinite;
}

@keyframes particleDrift{

    0%{

        transform:translate(0,0);

        opacity:0;

    }

    10%{

        opacity:.8;

    }

    90%{

        opacity:.6;

    }

    100%{

        transform:translate(var(--dx),var(--dy));

        opacity:0;

    }

}

/* ---------- Globe ---------- */

.globe-wrap{

    position:relative;

    width:clamp(260px,32vw,380px);

    height:clamp(260px,32vw,380px);

    perspective:1200px;

    z-index:3;

    will-change:transform;

}

.globe-float{

    position:absolute;

    inset:0;

    transform-style:preserve-3d;

    animation:globeFloat 9s ease-in-out infinite;

}

@keyframes globeFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-16px);

    }

}

.globe-3d{

    position:absolute;

    inset:0;

    border-radius:50%;

    transform-style:preserve-3d;

    animation:globeSpin 34s linear infinite;

}

@keyframes globeSpin{

    from{

        transform:rotateY(0deg) rotateX(8deg);

    }

    to{

        transform:rotateY(360deg) rotateX(8deg);

    }

}

.globe-core{

    position:absolute;

    inset:0;

    border-radius:50%;

    background:

        radial-gradient(circle at 32% 28%, rgba(147,197,253,.55), transparent 45%),

        radial-gradient(circle at 70% 75%, rgba(139,92,246,.30), transparent 55%),

        radial-gradient(circle at 50% 50%, rgba(37,99,235,.22), rgba(11,17,32,.05) 70%);

    border:1px solid rgba(125,211,252,.25);

    box-shadow:

        inset 0 0 40px rgba(59,130,246,.35),

        inset 0 0 90px rgba(139,92,246,.15);

    backdrop-filter:blur(1px);

}

.lat-ring,
.long-ring{

    position:absolute;

    inset:0;

    border-radius:50%;

    border:1px solid rgba(96,165,250,.35);

    transform-style:preserve-3d;

}

.lat-ring.r1{ transform:rotateX(75deg); }
.lat-ring.r2{ transform:rotateX(50deg) scale(.98); border-color:rgba(96,165,250,.28); }
.lat-ring.r3{ transform:rotateX(25deg) scale(.94); border-color:rgba(96,165,250,.22); }

.long-ring.r1{ transform:rotateY(0deg); }
.long-ring.r2{ transform:rotateY(45deg); border-color:rgba(125,211,252,.3); }
.long-ring.r3{ transform:rotateY(90deg); border-color:rgba(147,197,253,.35); }
.long-ring.r4{ transform:rotateY(135deg); border-color:rgba(125,211,252,.3); }

.node{

    position:absolute;

    width:7px;

    height:7px;

    border-radius:50%;

    background:#7DD3FC;

    box-shadow:0 0 10px 3px rgba(125,211,252,.85);

    transform-style:preserve-3d;

    animation:nodePulse 3.4s ease-in-out infinite;

}

.node.n1{ top:22%; left:52%; transform:translateZ(70px); animation-delay:.2s; }
.node.n2{ top:60%; left:28%; transform:translateZ(50px) rotateY(60deg); animation-delay:.9s; }
.node.n3{ top:40%; left:72%; transform:translateZ(60px) rotateY(-40deg); animation-delay:1.6s; background:#C4B5FD; box-shadow:0 0 10px 3px rgba(196,181,253,.85); }
.node.n4{ top:75%; left:58%; transform:translateZ(45px) rotateX(-30deg); animation-delay:.5s; }
.node.n5{ top:14%; left:30%; transform:translateZ(55px) rotateX(20deg); animation-delay:1.2s; background:#C4B5FD; box-shadow:0 0 10px 3px rgba(196,181,253,.85); }

@keyframes nodePulse{

    0%,100%{

        opacity:.55;

        transform:scale(1) translateZ(var(--z,55px));

    }

    50%{

        opacity:1;

        transform:scale(1.4) translateZ(var(--z,55px));

    }

}

.globe-glow{

    position:absolute;

    inset:-25%;

    z-index:-1;

    border-radius:50%;

    background:radial-gradient(circle, rgba(37,99,235,.35), rgba(139,92,246,.18) 45%, transparent 72%);

    filter:blur(38px);

    animation:glowBreathe 6s ease-in-out infinite;

}

@keyframes glowBreathe{

    0%,100%{ opacity:.7; transform:scale(1); }

    50%{ opacity:1; transform:scale(1.08); }

}

/* ---------- Floating holographic icons ---------- */

.hero-icons{

    position:absolute;

    inset:0;

    z-index:4;

    pointer-events:none;

}

.orbit-icon{

    position:absolute;

    display:flex;

    align-items:center;

    justify-content:center;

}

.orbit-icon i{

    width:26px;

    height:26px;

    stroke:#BFDBFE;

    stroke-width:1.6;

    filter:drop-shadow(0 0 8px rgba(96,165,250,.85)) drop-shadow(0 0 18px rgba(139,92,246,.35));

    opacity:.92;

}

.icon-glow{

    position:absolute;

    width:46px;

    height:14px;

    left:50%;

    top:68%;

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

    background:radial-gradient(ellipse, rgba(96,165,250,.45), transparent 70%);

    filter:blur(6px);

    z-index:-1;

}

.icon-1{ top:6%;  left:48%; animation:orbitFloat1 13s ease-in-out infinite; }
.icon-2{ top:24%; left:88%; animation:orbitFloat2 16s ease-in-out infinite; }
.icon-3{ top:70%; left:90%; animation:orbitFloat3 15s ease-in-out infinite; }
.icon-4{ top:90%; left:46%; animation:orbitFloat4 18s ease-in-out infinite; }
.icon-5{ top:72%; left:4%;  animation:orbitFloat5 14.5s ease-in-out infinite; }
.icon-6{ top:22%; left:2%;  animation:orbitFloat6 17s ease-in-out infinite; }

@keyframes orbitFloat1{

    0%,100%{ transform:translate(0,0) rotate(0deg) scale(1); }

    25%{ transform:translate(14px,-10px) rotate(4deg) scale(1.06); }

    50%{ transform:translate(0,-18px) rotate(0deg) scale(1); }

    75%{ transform:translate(-14px,-8px) rotate(-4deg) scale(.96); }

}

@keyframes orbitFloat2{

    0%,100%{ transform:translate(0,0) rotate(0deg) scale(1); }

    30%{ transform:translate(-16px,12px) rotate(-5deg) scale(.95); }

    60%{ transform:translate(-6px,22px) rotate(3deg) scale(1.05); }

    85%{ transform:translate(10px,6px) rotate(2deg) scale(1); }

}

@keyframes orbitFloat3{

    0%,100%{ transform:translate(0,0) rotate(0deg) scale(1); }

    20%{ transform:translate(-14px,-14px) rotate(3deg) scale(1.05); }

    55%{ transform:translate(-20px,4px) rotate(-4deg) scale(.94); }

    80%{ transform:translate(-4px,14px) rotate(2deg) scale(1); }

}

@keyframes orbitFloat4{

    0%,100%{ transform:translate(0,0) rotate(0deg) scale(1); }

    35%{ transform:translate(16px,-14px) rotate(5deg) scale(1.06); }

    65%{ transform:translate(6px,-24px) rotate(-2deg) scale(.96); }

    88%{ transform:translate(-10px,-8px) rotate(-3deg) scale(1); }

}

@keyframes orbitFloat5{

    0%,100%{ transform:translate(0,0) rotate(0deg) scale(1); }

    28%{ transform:translate(14px,10px) rotate(-4deg) scale(.95); }

    58%{ transform:translate(20px,-6px) rotate(3deg) scale(1.05); }

    82%{ transform:translate(6px,-16px) rotate(2deg) scale(1); }

}

@keyframes orbitFloat6{

    0%,100%{ transform:translate(0,0) rotate(0deg) scale(1); }

    22%{ transform:translate(16px,14px) rotate(4deg) scale(1.04); }

    52%{ transform:translate(22px,-2px) rotate(-3deg) scale(.95); }

    78%{ transform:translate(8px,-14px) rotate(-2deg) scale(1); }

}

/* ---------- Responsive ---------- */

@media(max-width:900px){

    .hero-illustration{

        width:420px;

    }

    .globe-wrap{

        width:clamp(200px,50vw,260px);

        height:clamp(200px,50vw,260px);

    }

    .orbit-icon i{

        width:20px;

        height:20px;

    }

}

@media(max-width:600px){

    .hero{

        flex-direction:column;

        gap:60px;

    }

    .hero-image{

        justify-content:center;

        margin-top:0;

    }

    .hero-illustration{

        width:320px;

    }

}

/* ---------- Reduced motion ---------- */

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

    .globe-wrap,
    .globe-3d,
    .globe-glow,
    .node,
    .orbit-icon,
    .hero-particle{

        animation:none !important;

    }

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

.footer{

    background:#0B1120;

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

    padding:60px 8% 30px;

}

.footer-container{

    max-width:1300px;

    margin:auto;

    display:grid;

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

    gap:60px;

}

.footer-brand img{

    width:70px;

    margin-bottom:14px;

}

.footer-brand h3{
    margin-bottom:12px;
}

.footer-brand > p:first-of-type{
    margin-bottom:0;
}

.footer-brand > p:first-of-type{

    color:#06B6D4;

    font-size:20px;

    font-weight:700;

    margin-bottom:14px;

}



.footer-links h4{

    color:white;

    margin-bottom:24px;

    font-size:18px;

}

.footer-links{

    display:flex;

    flex-direction:column;

}

.footer-links a{

    color:#94A3B8;

    text-decoration:none;

    margin-bottom:14px;

    transition:.3s;

}

.footer-links a:hover{

    color:#06B6D4;

    transform:translateX(4px);

}

.footer-bottom{

    max-width:1300px;

    margin:70px auto 0;

    padding-top:30px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:#64748B;

    font-size:15px;

}