/* =======================================================
   Mineral Guardians
   style.css
   Part 1
=======================================================*/

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#050608;

    color:#ffffff;

    overflow-x:hidden;

    line-height:1.7;

    position:relative;

}

/* =======================
   COLORS
======================= */

:root{

    --primary:#67E8F9;

    --secondary:#22D3EE;

    --accent:#38BDF8;

    --gold:#FFD166;

    --white:#ffffff;

    --gray:#BFC4D4;

    --dark:#050608;

    --card:#0F131B;

    --card2:#181E28;

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

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

    --radius:22px;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#050608;

}

::-webkit-scrollbar-thumb{

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

    border-radius:100px;

}

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

a{

    text-decoration:none;

    color:inherit;

}

img{

    max-width:100%;

    display:block;

}

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

.background-effects{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-5;

}

.gradient-one{

    position:absolute;

    width:600px;

    height:600px;

    background:#0ea5e950;

    border-radius:50%;

    filter:blur(140px);

    top:-150px;

    left:-180px;

    animation:floatOne 15s infinite alternate;

}

.gradient-two{

    position:absolute;

    width:500px;

    height:500px;

    background:#2563eb40;

    border-radius:50%;

    right:-150px;

    top:200px;

    filter:blur(150px);

    animation:floatTwo 18s infinite alternate;

}

.gradient-three{

    position:absolute;

    width:550px;

    height:550px;

    background:#06b6d430;

    bottom:-180px;

    left:40%;

    border-radius:50%;

    filter:blur(150px);

    animation:floatThree 20s infinite alternate;

}

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

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    padding:22px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    backdrop-filter:blur(25px);

    background:rgba(5,6,8,.45);

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

    z-index:999;

}

.logo h2{

    font-size:24px;

    font-weight:700;

}

.logo span{

    color:var(--primary);

    font-size:13px;

}

nav ul{

    display:flex;

    gap:40px;

    list-style:none;

}

nav a{

    color:#ddd;

    font-weight:500;

    transition:.35s;

}

nav a:hover{

    color:var(--primary);

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 8%;

    position:relative;

}

.hero-content{

    width:55%;

    z-index:10;

}

.hero-tag{

    display:inline-block;

    color:var(--primary);

    letter-spacing:4px;

    margin-bottom:18px;

    font-size:14px;

}

.hero h1{

    font-size:70px;

    line-height:1.08;

    margin-bottom:30px;

    font-weight:800;

}

.hero p{

    font-size:19px;

    color:var(--gray);

    max-width:650px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:45px;

}

.primary-btn{

    padding:16px 38px;

    border-radius:999px;

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

    color:#061015;

    font-weight:700;

    transition:.35s;

}

.primary-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 40px rgba(34,211,238,.35);

}

.secondary-btn{

    padding:16px 38px;

    border-radius:999px;

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

    color:white;

    transition:.35s;

}

.secondary-btn:hover{

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

}

.hero-model{

    width:38%;

    display:flex;

    justify-content:center;

    align-items:center;

}

#crystalViewer{

    width:420px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(
    circle,
    rgba(103,232,249,.18),
    transparent 70%
    );

}

/* =======================
   SCROLL TEXT
======================= */

.scroll-section{

    text-align:center;

    margin-top:-60px;

    padding-bottom:70px;

}

.scroll-section p{

    color:#9ca3af;

    letter-spacing:3px;

    text-transform:uppercase;

}

.scroll-section i{

    margin-top:15px;

    color:var(--primary);

    animation:bounce 2s infinite;

}
/* =======================================================
   STORY SECTION
=======================================================*/

.story{

    padding:140px 8%;

    position:relative;

}

.story-container{

    max-width:950px;

    margin:auto;

    text-align:center;

}

.story span{

    color:var(--primary);

    letter-spacing:3px;

    font-size:14px;

    font-weight:600;

}

.story h2{

    font-size:58px;

    line-height:1.15;

    margin:25px 0;

}

.story p{

    color:var(--gray);

    font-size:20px;

}

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

.transition{

    padding:120px 0;

    text-align:center;

}

.transition h2{

    color:var(--gray);

    font-size:26px;

}

.transition h1{

    font-size:120px;

    margin-top:20px;

    font-weight:800;

    background:linear-gradient(
    90deg,
    var(--primary),
    var(--gold)
    );

    -webkit-background-clip:text;

    color:transparent;

}

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

.section-header{

    text-align:center;

    margin-bottom:80px;

}

.section-header span{

    color:var(--primary);

    letter-spacing:3px;

    font-size:14px;

    font-weight:600;

}

.section-header h2{

    font-size:52px;

    margin-top:15px;

}

/* =======================================================
   TECHNOLOGY
=======================================================*/

.technology{

    padding:140px 8%;

}

.technology-grid{

    display:grid;

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

    gap:35px;

}

.tech-card{

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

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

    backdrop-filter:blur(25px);

    border-radius:var(--radius);

    padding:45px;

    transition:.4s;

    position:relative;

    overflow:hidden;

}

.tech-card::before{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    background:rgba(103,232,249,.08);

    border-radius:50%;

    top:-140px;

    right:-140px;

}

.tech-card:hover{

    transform:translateY(-12px);

    border-color:rgba(103,232,249,.35);

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

}

.tech-card i{

    font-size:42px;

    color:var(--primary);

    margin-bottom:30px;

}

.tech-card h3{

    font-size:28px;

    margin-bottom:18px;

}

.tech-card p{

    color:var(--gray);

}

/* =======================================================
   STORY TRANSITION
=======================================================*/

.story-transition{

    padding:180px 8%;

    text-align:center;

}

.story-text span{

    color:var(--primary);

    letter-spacing:4px;

}

.story-text h2{

    font-size:46px;

    margin:25px 0;

}

.story-text h1{

    font-size:82px;

    font-weight:800;

}

/* =======================================================
   CRITICAL MINERALS
=======================================================*/

.critical-minerals {
    padding: 120px 8%;
    display: grid;
    grid-template-columns: 0.85fr 1.4fr;
    gap: 50px;
    align-items: start;
}

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

.mineral-card {
    height: 260px;
    perspective: 1200px;
    cursor: pointer;
    width: 100%;
}

.mineral-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: 0.8s;
    transform-style: preserve-3d;
}

.mineral-card.active .mineral-inner {
    transform: rotateY(180deg);
}

.mineral-front,
.mineral-back {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    backface-visibility: hidden;
    overflow: hidden;
}

.mineral-front img {
    width: 90px;
    height: 90px;
    object-fit: contain;
}

.mineral-front h3 {
    margin-top: 12px;
    font-size: 18px;
}

.mineral-front small {
    color: var(--primary);
    margin-top: 4px;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.mineral-fallback {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #061015;
    background: linear-gradient(135deg, #67E8F9, #22D3EE);
}

.mineral-back h3 {
    color: var(--primary);
    margin-bottom: 12px;
    font-size: 16px;
}

.mineral-back p {
    color: var(--gray);
    line-height: 1.5;
    font-size: 13px;
    text-align: center;
}

@media (max-width: 1000px) {
    .critical-minerals {
        grid-template-columns: 1fr;
    }
    .mineral-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .mineral-grid {
        grid-template-columns: 1fr;
    }
    .mineral-card {
        height: 220px;
    }
}

/* =======================================================
   PHILIPPINES
=======================================================*/

.philippines{

    padding:150px 8%;

}

.philippines-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.philippines-image{

    display:flex;

    justify-content:center;

}

.philippines-content p{

    color:var(--gray);

    font-size:19px;

    margin-bottom:24px;

}

.philippines blockquote{

    margin-top:45px;

    border-left:4px solid var(--primary);

    padding-left:30px;

    font-size:26px;

    font-weight:600;

}


/* =======================================================
   CURRENT CONTEXT
=======================================================*/

.current-context{

    padding:150px 8%;

}

.context-container{

    display:grid;

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

    gap:35px;

}

.context-card{

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

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

    border-radius:var(--radius);

    padding:45px;

    transition:.35s;

}

.context-card:hover{

    transform:translateY(-10px);

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

}

.context-card span{

    display:inline-flex;

    width:60px;

    height:60px;

    border-radius:50%;

    justify-content:center;

    align-items:center;

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

    color:#071015;

    font-weight:700;

    margin-bottom:25px;

}

.context-card h3{

    font-size:28px;

    margin-bottom:18px;

}

.context-card p{

    color:var(--gray);

}

/* =======================================================
   DARK TRANSITION
=======================================================*/

.transition-dark{

    padding:180px 8%;

    text-align:center;

}

.transition-center span{

    color:var(--primary);

    letter-spacing:3px;

}

.transition-center h1{

    margin-top:30px;

    font-size:72px;

}
/* =======================================================
   INTERACTIVE MAP
=======================================================*/

.interactive-map{

    padding:150px 8%;

}

.map-wrapper{

    display:grid;

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

    gap:70px;

    align-items:center;

}

.map-left{

    display:flex;

    justify-content:center;

    align-items:center;

}

#mapCanvas{

    width:100%;

    max-width:700px;

    min-height:650px;

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

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

    border-radius:30px;

    backdrop-filter:blur(25px);

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.4s;

}

#mapCanvas:hover{

    border-color:var(--primary);

    box-shadow:0 0 60px rgba(103,232,249,.18);

}

.map-right{

    display:flex;

    flex-direction:column;

    gap:30px;

}

.province-panel,
.province-information{

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

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

    border-radius:24px;

    padding:35px;

    backdrop-filter:blur(20px);

}

.province-panel h3{

    font-size:30px;

    margin-bottom:20px;

}

.province-information ul{

    list-style:none;

}

.province-information li{

    margin-bottom:18px;

    color:var(--gray);

}

/* =======================================================
   SMARTPHONE
=======================================================*/

.smartphone{

    padding:170px 8%;

}

.phone-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.phone-image{

    display:flex;

    justify-content:center;

}

.phone-image img{

    width:340px;

    transition:.5s;

}

.phone-image img:hover{

    transform:rotate(-3deg) scale(1.04);

}

.phone-details{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.phone-card{

    padding:30px;

    border-radius:22px;

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

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

    transition:.35s;

}

.phone-card:hover{

    transform:translateX(10px);

    border-color:var(--primary);

}

.phone-card h3{

    margin-bottom:12px;

    font-size:26px;

}

.phone-card p{

    color:var(--gray);

}

/* =======================================================
   JOURNEY
=======================================================*/

.journey{

    padding:180px 8%;

}

.journey-timeline{

    display:grid;

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

    gap:35px;

}

.journey-step{

    position:relative;

    padding:40px;

    border-radius:26px;

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

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

    transition:.35s;

}

.journey-step:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

}

.journey-step span{

    position:absolute;

    top:-18px;

    left:30px;

    width:55px;

    height:55px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    color:#071015;

    font-weight:700;

}

.journey-step h3{

    margin-top:18px;

    margin-bottom:18px;

    font-size:28px;

}

.journey-step p{

    color:var(--gray);

}

/* =======================================================
   FINAL MESSAGE
=======================================================*/

.final-message{

    padding:170px 8%;

    text-align:center;

}

.final-container{

    max-width:900px;

    margin:auto;

}

.final-container span{

    color:var(--primary);

    letter-spacing:4px;

}

.final-container h2{

    margin:25px 0;

    font-size:54px;

}

.final-container p{

    color:var(--gray);

    font-size:20px;

}


/* =======================================================
   QUOTE
=======================================================*/

.closing-quote{

    padding:120px 8%;

    text-align:center;

}

.closing-quote blockquote{

    max-width:900px;

    margin:auto;

    font-size:34px;

    line-height:1.5;

    font-style:italic;

    color:#E5E7EB;

}

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

footer{

    margin-top:100px;

    padding:80px 8% 30px;

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

}

.footer-wrapper{

    display:grid;

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

    gap:60px;

}

.footer-wrapper h2{

    margin-bottom:20px;

}

.footer-wrapper h3{

    margin-bottom:20px;

}

.footer-wrapper p,
.footer-wrapper li{

    color:var(--gray);

    margin-bottom:12px;

}

.footer-wrapper ul{

    list-style:none;

}

.footer-wrapper a{

    transition:.3s;

}

.footer-wrapper a:hover{

    color:var(--primary);

}

.footer-bottom{

    text-align:center;

    margin-top:60px;

    padding-top:30px;

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

    color:var(--gray);

}
/* =======================================================
   FLOATING CRYSTALS
=======================================================*/

.floating-crystal{

    position:fixed;

    width:140px;

    height:140px;

    border-radius:30px;

    background:linear-gradient(
        135deg,
        rgba(103,232,249,.15),
        rgba(255,255,255,.03)
    );

    backdrop-filter:blur(18px);

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

    pointer-events:none;

    z-index:-2;

    animation:floatCrystal 10s ease-in-out infinite;

}

.crystal-1{

    top:15%;
    left:5%;

}

.crystal-2{

    top:65%;
    right:8%;

    animation-delay:2s;

}

.crystal-3{

    bottom:15%;
    left:18%;

    animation-delay:4s;

}

.crystal-4{

    top:30%;
    right:20%;

    animation-delay:6s;

}

/* =======================================================
   CURSOR GLOW
=======================================================*/

.cursor-glow{

    width:280px;

    height:280px;

    position:fixed;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(103,232,249,.18),
        transparent 70%);

    pointer-events:none;

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

    z-index:-1;

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

}

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

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--gold)
    );

    z-index:9999;

}

/* =======================================================
   SCROLL INDICATOR
=======================================================*/

.scroll-indicator{

    position:fixed;

    right:40px;

    bottom:40px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    color:var(--gray);

    opacity:.7;

}

.scroll-indicator i{

    font-size:24px;

    color:var(--primary);

}

/* =======================================================
   BACK TO TOP
=======================================================*/

#backToTop{

    position:fixed;

    bottom:40px;

    left:40px;

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

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

    color:#051015;

    font-size:20px;

    cursor:pointer;

    display:none;

    transition:.35s;

    z-index:999;

}

#backToTop:hover{

    transform:translateY(-6px);

}

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

.reveal{

    opacity:0;

    transform:translateY(70px);

    transition:1s;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* =======================================================
   KEYFRAMES
=======================================================*/

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

}

@keyframes floatOne{

    from{

        transform:translateY(0)
        translateX(0);

    }

    to{

        transform:translateY(90px)
        translateX(60px);

    }

}

@keyframes floatTwo{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-120px);

    }

}

@keyframes floatThree{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-120px);

    }

}

@keyframes floatCrystal{

    0%{

        transform:
        translateY(0)
        rotate(0deg);

    }

    50%{

        transform:
        translateY(-25px)
        rotate(10deg);

    }

    100%{

        transform:
        translateY(0)
        rotate(0deg);

    }

}

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

@media(max-width:1100px){

    .hero{

        flex-direction:column;

        justify-content:center;

        text-align:center;

        gap:70px;

    }

    .hero-content{

        width:100%;

    }

    .hero-model{

        width:100%;

    }

    .technology-grid{

        grid-template-columns:1fr;

    }

    .context-container{

        grid-template-columns:1fr;

    }

    .journey-timeline{

        grid-template-columns:1fr;

    }

    .phone-wrapper{

        grid-template-columns:1fr;

    }

    .map-wrapper{

        grid-template-columns:1fr;

    }

    .philippines-wrapper{

        grid-template-columns:1fr;

    }

    .footer-wrapper{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .navbar{

        padding:18px 25px;

    }

    nav{

        display:none;

    }

    .hero{

        padding:0 25px;

    }

    .hero h1{

        font-size:46px;

    }

    .story h2,
    .section-header h2,
    .final-container h2{

        font-size:34px;

    }

    .transition h1{

        font-size:70px;

    }

    .story-transition h1{

        font-size:48px;

    }

    .phone-image img{

        width:260px;

    }

    #philippinesMap{

        width:100%;

        height:400px;

    }

}

.map-container{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:40px;

    flex-wrap:wrap;

}

#philippinesMap{

    width:100%;

    max-width:600px;

    height:auto;

}

.province{

    fill:#374151;

    stroke:#67E8F9;

    stroke-width:5;

    cursor:pointer;

    transition:.3s;

}

.province:hover{

    fill:#22D3EE;

    filter:drop-shadow(0 0 12px #22D3EE);

    transform:scale(1.05);

}

.province.active{

    fill:#FFD166;

}

/* Floating Particles */

.particle{

    position:absolute;

    border-radius:50%;

    background:rgba(103,232,249,.18);

    animation:particleFloat linear infinite;

    pointer-events:none;

}

@keyframes particleFloat{

    from{

        transform:
        translateY(0)
        scale(1);

        opacity:.15;

    }

    50%{

        opacity:.55;

    }

    to{

        transform:
        translateY(-140px)
        scale(1.8);

        opacity:0;

    }

}

/* =========================================
   ONE FINAL QUESTION
========================================= */

.ending-transition{

    padding:220px 8%;

    text-align:center;

}

.transition-content{

    max-width:900px;

    margin:auto;

}

.transition-content span{

    color:var(--primary);

    font-size:14px;

    letter-spacing:4px;

    font-weight:600;

}

.transition-content h1{

    font-size:72px;

    line-height:1.1;

    margin:25px 0 18px;

}

.transition-content h2{

    color:var(--gray);

    font-size:34px;

    margin-bottom:90px;

}

.future-visual{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:60px;

    margin-bottom:80px;

}

.future-phone,
.future-mineral{

    width:260px;

}

.future-phone i,
.future-mineral i{

    font-size:72px;

    color:var(--primary);

    margin-bottom:25px;

}

.future-phone p,
.future-mineral p{

    color:var(--gray);

    margin-bottom:10px;

    font-size:15px;

}

.future-phone h3,
.future-mineral h3{

    font-size:38px;

    font-weight:700;

}

.future-line{

    width:120px;

    height:2px;

    background:linear-gradient(
        to right,
        rgba(103,232,249,.2),
        var(--primary),
        rgba(103,232,249,.2)
    );

}

.future-message{

    max-width:700px;

    margin:auto;

    color:var(--gray);

    font-size:22px;

    line-height:1.8;

}

/* ===========================================
   STUDENT ACTION
=========================================== */

.student-action{

    padding:150px 8%;

}

.action-grid{

    display:grid;

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

    gap:30px;

}

.action-card{

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

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

    border-radius:22px;

    padding:40px 30px;

    text-align:center;

    transition:.35s;

    cursor:pointer;

}

.action-card:hover{

    transform:translateY(-10px);

    border-color:#67E8F9;

}

.action-card i{

    font-size:50px;

    color:#67E8F9;

    margin-bottom:20px;

}

.action-card h3{

    margin-bottom:15px;

}

.action-card p{

    color:#bfc4d4;

}

@media(max-width:900px){

.action-grid{

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

}

}

@media(max-width:600px){

.action-grid{

grid-template-columns:1fr;

}

}

/* ===========================================
FEEDBACK
=========================================== */

.feedback-cards{

display:grid;

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

gap:30px;

margin-bottom:40px;

}

.feedback-card{

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

padding:35px;

border-radius:24px;

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

}

.feedback-card textarea{

margin-top:20px;

width:100%;

height:160px;

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

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

border-radius:18px;

padding:20px;

color:white;

resize:none;

}

.rating{

margin-top:30px;

display:flex;

justify-content:center;

gap:12px;

font-size:40px;

cursor:pointer;

}

.rating span{

transition:.3s;

}

.rating span:hover{

transform:scale(1.25);

}
/* ===========================================
AI SECTION
=========================================== */

.ai-section{

padding:170px 8%;

}

.ai-intro{

max-width:900px;

margin:auto;

text-align:center;

margin-bottom:80px;

}

.ai-intro span{

color:#67E8F9;

letter-spacing:4px;

font-size:14px;

font-weight:600;

}

.ai-intro h2{

font-size:58px;

margin:20px 0;

}

.ai-intro p{

color:#BFC4D4;

font-size:20px;

line-height:1.8;

}

.resource-grid{

display:grid;

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

gap:35px;

margin-bottom:40px;

}

.resource-card{

padding:40px;

border-radius:25px;

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

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

cursor:pointer;

transition:.35s;

text-align:center;

}

.resource-card:hover,

.resource-card.active{

border-color:#67E8F9;

transform:translateY(-8px);

}

.resource-card i{

font-size:60px;

color:#67E8F9;

margin-bottom:20px;

}

.resource-panel{

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

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

border-radius:25px;

padding:45px;

margin-top:20px;

}

.resource-content{

display:none;

}

.resource-content.show{

display:block;

}

.resource-content h3{

margin-bottom:20px;

font-size:32px;

}

.resource-content p{

color:#BFC4D4;

font-size:19px;

line-height:1.8;

}

.big-question{

margin-top:90px;

text-align:center;

}

.big-question h2{

font-size:52px;

margin-bottom:20px;

}

.big-question p{

max-width:800px;

margin:auto;

color:#BFC4D4;

font-size:20px;

}
/* ==========================
FEATURE LAYOUT
========================== */

.feature-layout{

display:grid;
grid-template-columns:1.3fr .8fr;
gap:40px;
margin-top:70px;

}

.feature-main{

padding:60px;
border-radius:30px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
position:relative;

}

.feature-number{

position:absolute;
top:40px;
right:40px;
font-size:70px;
font-weight:800;
color:rgba(103,232,249,.15);

}

.feature-main h3{

font-size:42px;
margin-bottom:25px;
max-width:500px;

}

.feature-main p{

font-size:20px;
line-height:1.9;
color:#bfc4d4;

}

.feature-side{

display:flex;
flex-direction:column;
gap:25px;

}

.mini-feature{

padding:35px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:22px;
transition:.35s;

}

.mini-feature:hover{

transform:translateX(10px);
border-color:#67E8F9;

}

.mini-feature span{

color:#67E8F9;
font-weight:700;

}

.mini-feature h4{

margin:12px 0;
font-size:24px;

}

.mini-feature p{

color:#bfc4d4;
line-height:1.7;

}

@media(max-width:1000px){

.feature-layout{

grid-template-columns:1fr;

}

}
/* ===========================
BIG QUESTION
=========================== */

.big-question{

max-width:1300px;
margin:auto;
padding:140px 30px;

}

.question-header{

text-align:center;
margin-bottom:80px;

}

.question-header span{

color:#67E8F9;
letter-spacing:6px;
font-size:.85rem;
font-weight:700;

}

.question-header h2{

font-size:clamp(3rem,6vw,5rem);
line-height:1;
margin:20px 0;

}

.question-header p{

max-width:850px;
margin:auto;
font-size:1.15rem;
line-height:1.8;
color:#BFC4D4;

}

.story-grid{

display:grid;
grid-template-columns:1fr auto 1fr;
gap:35px;
align-items:center;
margin:90px 0;

}

.story-card{

background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:28px;
padding:45px;

}

.story-card small{

display:block;
color:#67E8F9;
font-size:1rem;
margin-bottom:20px;

}

.story-card h3{

font-size:2rem;
margin-bottom:25px;

}

.story-card ul{

list-style:none;
padding:0;
margin:0;

}

.story-card li{

padding:14px 0;
border-bottom:1px solid rgba(255,255,255,.08);
color:#cfd5df;

}

.story-card li:last-child{

border-bottom:none;

}

.story-divider{

font-size:2.5rem;
font-weight:800;
color:#67E8F9;
opacity:.4;

}

.question-footer{

text-align:center;
margin-top:90px;

}

.question-footer h3{

font-size:2.5rem;
margin-bottom:20px;

}

.question-footer p{

font-size:1.2rem;
max-width:700px;
margin:auto;
line-height:1.8;
color:#BFC4D4;

}

@media(max-width:900px){

.story-grid{

grid-template-columns:1fr;

}

.story-divider{

padding:10px 0;

}

}
.philippines{

    padding:160px 8%;

}

.philippines-wrapper{

    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:90px;
    align-items:center;

}

.philippines-left{

    display:flex;
    flex-direction:column;
    justify-content:center;

}

.philippines-left h1{

    font-size:120px;
    margin-bottom:25px;

}

.philippines-left h3{

    font-size:42px;
    line-height:1.2;
    font-weight:700;

}

.philippines-right{

    display:flex;
    flex-direction:column;
    gap:35px;

}

.insights-track {
    display: flex;
    gap: 12px;
    width: max-content;
    min-width: 100%;
    justify-content: center;
    animation: insightsScroll 35s linear infinite;
}

.insight-bubble {
    flex-shrink: 0;
    width: 250px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(103, 232, 249, 0.14);
    color: #BFC4D4;
}

.insight-name {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #67E8F9;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.insight-learn {
    font-size: 12px;
    line-height: 1.4;
    color: #e5e7eb;
    margin: 0;
}

.insight-line {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 10px 0;
}

.insight-promise {
    font-size: 11px;
    line-height: 1.4;
    color: #9ca3af;
    margin: 0;
}

.insights-track.no-scroll {
    animation: none !important;
    margin: 0 auto;
    min-width: auto;
    justify-content: center;
    flex-wrap: wrap;
}

.insight:last-child{

    border-bottom:none;

}

.insight span{

    font-size:18px;
    color:#67E8F9;
    font-weight:700;
    min-width:40px;

}

.insight h4{

    font-size:24px;
    margin-bottom:10px;

}

.insight p{

    color:#BFC4D4;
    line-height:1.8;

}

@media(max-width:1000px){

    .philippines-wrapper{

        grid-template-columns:1fr;

    }

}
.petition-highlight{

    max-width:760px;
    margin:40px auto;
    text-align:center;

}

.petition-highlight span{

    color:#67E8F9;
    letter-spacing:4px;
    font-size:.85rem;
    font-weight:700;

}

.petition-highlight h3{

    margin:18px 0;
    font-size:42px;

}

.petition-highlight p{

    color:#BFC4D4;
    line-height:1.9;
    font-size:18px;

}

.petition-buttons{

    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
    margin-top:45px;

}

.secondary-btn{

    padding:16px 32px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:50px;
    color:#fff;
    text-decoration:none;
    transition:.3s;

}

.secondary-btn:hover{

    border-color:#67E8F9;
    transform:translateY(-4px);

}

/* ===== Compact reflection form ===== */

.reflection-container {
    max-width: 560px;
    margin: 0 auto;
}

.feedback-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.feedback-top .feedback-card {
    min-height: auto;
    padding: 14px 14px !important;
}

.feedback-card h3 {
    font-size: 13px !important;
    margin-bottom: 8px;
    line-height: 1.3;
}

.feedback-card textarea {
    height: 72px !important;
    font-size: 12px !important;
    padding: 10px 12px !important;
    line-height: 1.4;
}

.feedback-rating {
    width: 100%;
    margin: 0 0 22px 0;
    text-align: center;
    padding: 12px 16px !important;
}

.feedback-rating h3 {
    font-size: 13px;
    margin-bottom: 6px;
}

.feedback-rating .rating {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 22px;
}

.reflection-form input[type="text"] {
    font-size: 13px !important;
    padding: 12px 14px !important;
    margin-bottom: 14px !important;
}

.submit-btn {
    max-width: 560px;
    margin: 0 auto;
    display: block;
}

@media (max-width: 600px) {
    .feedback-top {
        grid-template-columns: 1fr;
    }
}
/* Submit button */
.reflection-form .submit-btn,
button.submit-btn {
    width: 100%;
    max-width: 560px;
    margin: 8px auto 0;
    display: block;
    padding: 14px 28px;
    border: none !important;
    border-radius: 999px;
    background: linear-gradient(90deg, #67E8F9, #22D3EE) !important;
    color: #061015 !important;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: 0.3s;
}

.reflection-form .submit-btn:hover,
button.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(34, 211, 238, 0.35);
}

/* Stars clickable */
#ratingStars {
    position: relative;
    z-index: 5;
    pointer-events: auto;
}

#ratingStars span {
    cursor: pointer;
    pointer-events: auto;
    display: inline-block;
    padding: 4px;
}
/* ===== Compact reflection form ===== */

.reflection-container {
    max-width: 480px;
    margin: 0 auto;
}

.feedback-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.feedback-top .feedback-card {
    min-height: auto;
    padding: 12px !important;
}

.feedback-card h3 {
    font-size: 12px !important;
    margin-bottom: 6px;
    line-height: 1.3;
}

.feedback-card textarea {
    height: 56px !important;
    font-size: 11px !important;
    padding: 8px 10px !important;
    line-height: 1.35;
}

.feedback-rating {
    width: 100%;
    margin: 0 0 14px 0;
    text-align: center;
    padding: 10px 12px !important;
}

.feedback-rating h3 {
    font-size: 12px;
    margin-bottom: 4px;
}

.feedback-rating .rating {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 18px;
}

.reflection-form input[type="text"] {
    font-size: 12px !important;
    padding: 10px 12px !important;
    margin-bottom: 10px !important;
}

.reflection .section-header h2 {
    font-size: 28px !important;
}

.reflection .section-header p {
    font-size: 13px !important;
    max-width: 480px;
    margin: 8px auto 0;
}

.reflection {
    padding: 80px 8% !important;
}
/* ===== Mobile nav ===== */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: 0.3s;
}

.nav-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    nav {
        display: block !important;
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        max-width: 280px;
        height: 100vh;
        background: rgba(5, 6, 8, 0.97);
        backdrop-filter: blur(20px);
        padding: 90px 28px 40px;
        transition: right 0.35s ease;
        z-index: 1000;
        border-left: 1px solid rgba(255,255,255,0.08);
    }

    nav.open {
        right: 0;
    }

    nav ul {
        flex-direction: column;
        gap: 22px;
    }

    nav a {
        font-size: 17px;
    }
}
.nav-admin {
    opacity: 0.4;
    font-size: 13px !important;
}

.nav-admin:hover {
    opacity: 1;
    color: #67E8F9 !important;
}
/* Mineral flip – required for back face */
.mineral-back {
    transform: rotateY(180deg);
}

.mineral-front img {
    width: 90px !important;
    height: 90px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative;
    z-index: 2;
}

/* Hide letter badges if image exists */
.mineral-front img + .mineral-fallback {
    display: none !important;
}
/* Mineral cards – size + hover motion */
.mineral-card {
    height: 300px !important;
}

.mineral-front img {
    width: 110px !important;
    height: 110px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto;
    transition: transform 0.35s ease !important;
}

.mineral-front:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 0 28px rgba(103, 232, 249, 0.25) !important;
}

.mineral-front:hover img {
    transform: scale(1.1) rotate(-5deg) !important;
}

.mineral-front h3 {
    margin-top: 14px !important;
    font-size: 20px !important;
}

.mineral-front small {
    margin-top: 6px !important;
    font-size: 12px !important;
}

.mineral-back {
    transform: rotateY(180deg);
}

.mineral-back h3 {
    font-size: 18px !important;
}

.mineral-back p {
    font-size: 14px !important;
    line-height: 1.55 !important;
}
/* Bigger mineral cards */
.mineral-card {
    height: 340px !important;
}

.mineral-front {
    padding: 20px !important;
}

.mineral-front img {
    width: 140px !important;
    height: 140px !important;
    object-fit: contain !important;
}

.mineral-front h3 {
    margin-top: 18px !important;
    font-size: 22px !important;
}

.mineral-front small {
    font-size: 12px !important;
}

.mineral-back {
    transform: rotateY(180deg);
    padding: 22px !important;
}

.mineral-back h3 {
    font-size: 18px !important;
    margin-bottom: 14px !important;
}

.mineral-back p {
    font-size: 14px !important;
    line-height: 1.55 !important;
}

/* Critical Minerals left text – readable again */
.critical-left h2 {
    font-size: 42px !important;
    line-height: 1.15 !important;
    margin-bottom: 18px !important;
}

.critical-left p {
    font-size: 17px !important;
    color: var(--gray) !important;
    line-height: 1.7 !important;
    max-width: 320px;
}

.critical-minerals {
    gap: 40px !important;
    align-items: center !important;
}

.mineral-grid {
    gap: 18px !important;
}
/* =========================================
   MOBILE / PHONE (host-ready)
========================================= */

@media (max-width: 768px) {

    /* Navbar */
    .navbar {
        padding: 14px 18px !important;
    }

    .logo h2 {
        font-size: 18px !important;
    }

    .logo span {
        font-size: 11px !important;
    }

    /* Hero */
    .hero {
        min-height: auto !important;
        padding: 110px 20px 60px !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 30px !important;
    }

    .hero-content {
        width: 100% !important;
    }

    .hero h1 {
        font-size: 32px !important;
        line-height: 1.15 !important;
        margin-bottom: 16px !important;
    }

    .hero p {
        font-size: 15px !important;
        max-width: 100% !important;
    }

    .hero-buttons {
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 28px !important;
        align-items: center !important;
    }

    .primary-btn,
    .secondary-btn {
        width: 100% !important;
        max-width: 280px !important;
        text-align: center !important;
        padding: 14px 24px !important;
        font-size: 14px !important;
    }

    .hero-model,
    #crystalViewer {
        width: 220px !important;
        height: 220px !important;
    }

    /* Story */
    .story {
        padding: 70px 20px !important;
    }

    .story h2 {
        font-size: 26px !important;
        line-height: 1.25 !important;
    }

    .story p {
        font-size: 15px !important;
    }

    /* Section headers */
    .section-header {
        margin-bottom: 40px !important;
        padding: 0 10px;
    }

    .section-header h2 {
        font-size: 28px !important;
    }

    .section-header span {
        font-size: 12px !important;
    }

    /* Critical minerals */
    .critical-minerals {
        padding: 70px 16px !important;
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .critical-left {
        text-align: center;
    }

    .critical-left h2 {
        font-size: 28px !important;
    }

    .critical-left p {
        font-size: 14px !important;
        max-width: 100% !important;
        margin: 0 auto;
    }

    .mineral-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .mineral-card {
        height: 210px !important;
    }

    .mineral-front img {
        width: 70px !important;
        height: 70px !important;
    }

    .mineral-front h3 {
        font-size: 14px !important;
        margin-top: 10px !important;
    }

    .mineral-front small {
        font-size: 10px !important;
    }

    .mineral-back h3 {
        font-size: 13px !important;
    }

    .mineral-back p {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    /* Technology */
    .technology {
        padding: 70px 16px !important;
    }

    .technology-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .tech-card {
        padding: 28px 22px !important;
    }

    .tech-card h3 {
        font-size: 20px !important;
    }

    .tech-card p {
        font-size: 14px !important;
    }

    /* Big question / case study */
    .big-question {
        padding: 70px 16px !important;
    }

    .question-header h2 {
        font-size: 28px !important;
    }

    .question-header p {
        font-size: 14px !important;
    }

    .story-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin: 40px 0 !important;
    }

    .story-card {
        padding: 28px 22px !important;
    }

    .story-card h3 {
        font-size: 20px !important;
    }

    .story-divider {
        text-align: center;
        padding: 4px 0 !important;
        font-size: 1.5rem !important;
    }

    .question-footer h3 {
        font-size: 22px !important;
    }

    .question-footer p {
        font-size: 14px !important;
    }

    /* Philippines */
    .philippines {
        padding: 70px 16px !important;
    }

    .philippines-wrapper {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .philippines-left h3 {
        font-size: 22px !important;
        text-align: center;
    }

    .insight h4 {
        font-size: 18px !important;
    }

    .insight p {
        font-size: 14px !important;
    }

    /* Smartphone */
    .smartphone {
        padding: 70px 16px !important;
    }

    .phone-wrapper {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .phone-image img {
        width: 180px !important;
        margin: 0 auto;
    }

    .phone-card {
        padding: 20px !important;
    }

    .phone-card h3 {
        font-size: 18px !important;
    }

    .phone-card p {
        font-size: 13px !important;
    }

    /* Petition */
    .petition-highlight {
        padding: 0 16px;
        margin: 40px auto !important;
    }

    .petition-highlight h3 {
        font-size: 26px !important;
    }

    .petition-highlight p {
        font-size: 14px !important;
    }

    .petition-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 0 16px;
    }

    .petition-buttons .primary-btn,
    .petition-buttons .secondary-btn {
        width: 100% !important;
        max-width: 300px !important;
        text-align: center !important;
        font-size: 13px !important;
        padding: 14px 20px !important;
    }

    /* Student actions */
    .student-action {
        padding: 70px 16px !important;
    }

    .action-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .action-card {
        padding: 28px 20px !important;
    }

    .action-card i {
        font-size: 36px !important;
    }

    .action-card h3 {
        font-size: 18px !important;
    }

    .action-card p {
        font-size: 13px !important;
    }

    /* Quote */
    .closing-quote {
        padding: 50px 20px !important;
    }

    .closing-quote blockquote {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    /* Reflection */
    .reflection {
        padding: 60px 16px !important;
    }

    .reflection .section-header h2 {
        font-size: 24px !important;
    }

    .reflection .section-header p {
        font-size: 13px !important;
    }

    .reflection-container {
        max-width: 100% !important;
    }

    .feedback-top {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .feedback-card {
        padding: 14px !important;
    }

    .feedback-card textarea {
        height: 70px !important;
        font-size: 13px !important;
    }

    .feedback-rating .rating {
        font-size: 22px !important;
        gap: 8px !important;
    }

    .submit-btn {
        max-width: 100% !important;
        font-size: 14px !important;
        padding: 14px 20px !important;
    }

    /* Community insights */
    .community-insights {
        padding: 50px 0 40px !important;
    }

    .community-insights .section-header h2 {
        font-size: 22px !important;
    }

    .insight-bubble {
        width: 200px !important;
        padding: 12px 14px !important;
    }

    /* Footer */
    footer {
        padding: 50px 20px 24px !important;
        margin-top: 40px !important;
    }

    .footer-wrapper {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        text-align: center;
    }

    .footer-wrapper ul {
        padding: 0;
    }

    /* Hide desktop-only decorations on phone */
    .floating-crystal,
    .scroll-indicator,
    .cursor-glow {
        display: none !important;
    }

    #backToTop {
        width: 48px !important;
        height: 48px !important;
        bottom: 20px !important;
        left: 16px !important;
        font-size: 16px !important;
    }
}

/* Very small phones */
@media (max-width: 380px) {
    .hero h1 {
        font-size: 28px !important;
    }

    .mineral-grid {
        grid-template-columns: 1fr !important;
    }

    .mineral-card {
        height: 240px !important;
    }
}
.footer-wrapper {
    grid-template-columns: 1.5fr 1fr !important;
}
@media (max-width: 768px) {
    footer {
        padding: 48px 20px 28px !important;
        margin-top: 40px !important;
        text-align: center !important;
    }

    .footer-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 36px !important;
        grid-template-columns: none !important;
        text-align: center !important;
    }

    .footer-left,
    .footer-right,
    .footer-center {
        width: 100% !important;
        max-width: 100% !important;
    }

    .footer-left h2 {
        font-size: 22px !important;
        margin-bottom: 12px !important;
    }

    .footer-left p,
    .footer-right p {
        font-size: 13px !important;
        line-height: 1.65 !important;
        color: #9ca3af !important