:root{
    --bg:#2c2c2c;
    --panel:#2b2b2b;
    --card:#1f1f1f;
    --text:#f5f5f5;
    --muted:#aaa;
    --orange:#ff9438;
    --line:#333
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    font-family:Inter,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden
}
a{
    text-decoration:none;
    color:inherit
}
img{
    display:block;
    max-width:100%
}
.page-shell{
    width:min(1180px,calc(100% - 64px));
    margin:0 auto
}
.site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:50;
    height:64px;
    background:rgba(35,35,35,.88);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,.06)
}
.nav-wrap{
    height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.logo img{
    width:142px
}
.main-nav{
    display:flex;
    gap: 54px;
    height: 50px;
    margin-top: -21px;
}
.main-nav a{
    font-size:13px;
    color:#bcbcbc;
    padding:25px 0 22px;
    position:relative
}
.main-nav a.active{
    color:#fff
}
.main-nav a.active:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    background:var(--orange)
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    height:56px;
    padding:0 30px;
    border-radius:11px;
    background:linear-gradient(180deg,#ff922e,#ffa34b);
    color:#fff;
    font-size:15px;
    font-weight:700;
    border:0
}
.btn-small{
    height:42px;
    padding:0 22px;
    font-size:13px
}
.btn.outline{
    background:rgba(20,20,20,.35);
    border:1px solid rgba(255,255,255,.7);
    font-weight:500
}
.menu-toggle{
    display:none;
    background:none;
    border:0;
    flex-direction:column;
    gap:5px
}
.menu-toggle span{
    width:24px;
    height:2px;
    background:#fff
}
.panel{
    position:relative;
    background:radial-gradient(circle at center,rgba(255,255,255,.045),transparent 48%),var(--panel)
}
.hero{
    height:100vh;
    min-height:760px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding-top:64px;
    overflow:hidden
}
.hero-glow{
    position:absolute;
    top:-230px;
    left:50%;
    width:780px;
    height:780px;
    transform:translateX(-50%);
    border-radius:50%;
    background:#ff8f2d;
    filter:blur(165px);
    opacity:.13
}
.hero-content{
    position:relative;
    z-index:2;
    margin-top:35px
}
.eyebrow{
    display:inline-flex;
    padding:7px 16px;
    border-radius:22px;
    background:rgba(25,25,25,.62);
    border:1px solid rgba(255,255,255,.05);
    color:#969696;
    text-transform:uppercase;
    letter-spacing:.9px;
    font-size:11px
}
.eyebrow.left{
    justify-content:flex-start
}
.hero h1{
    margin:43px 0 24px;
    font-size:92px;
    line-height:.95;
    letter-spacing:-4px;
    font-weight:900
}
.hero p{
    margin:0 0 38px;
    color:#bbb;
    font-size:20px;
    line-height:1.55
}
.hero-actions{
    display:flex;
    justify-content:center;
    gap:16px
}
.scroll-indicator{
    position:absolute;
    bottom:26px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    color:#858585;
    font-size:10px;
    letter-spacing:2px;
    z-index:3
}
.scroll-indicator i{
    width:12px;
    height:12px;
    border-right:2px solid #aaa;
    border-bottom:2px solid #aaa;
    transform:rotate(45deg);
    margin-top:12px;
    animation:bounce 1.5s infinite
}
@keyframes bounce{
    0%,100%{
        transform:rotate(45deg) translate(0,0)
    }
    50%{
        transform:rotate(45deg) translate(6px,6px)
    }
}
.short-panel{
    min-height:360px;
    display:flex;
    align-items:center;
    justify-content:center
}
.intro-section{
    padding-top:64px
}
.section-title{
    text-align:center
}
.section-title h2{
    font-size:44px;
    line-height:1.1;
    margin:26px 0 0;
    font-weight:900;
    letter-spacing:-1.3px
}
.mineral-screen{
    height:100vh;
    min-height:780px;
    display:flex;
    align-items:center;
    padding:80px 0
}
.mineral-wrap{
    width:min(1210px,calc(100% - 100px));
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(420px,520px) minmax(520px,600px);
    align-items:center;
    gap:85px
}
.mineral-img{
    display:flex;
    align-items:center;
    justify-content:center
}
.mineral-img img{
    width:100%;
    height:285px;
    object-fit:cover
}
.mineral-img.smaller img{
    width:330px;
    height:285px;
    object-fit:cover
}
.mineral-info{
    --accent:#ff9438
}
.info-grid{
    display:grid;
    gap:16px
}
.top-grid{
    grid-template-columns:1fr 1fr;
    margin-bottom:25px
}
.two-grid{
    grid-template-columns:1fr 1fr;
    margin-bottom:25px
}
.info-card{
    min-height:78px;
    border-radius:15px;
    background:linear-gradient(145deg,#202020,#1b1b1b);
    border:1px solid rgba(255,255,255,.025);
    box-shadow:0 18px 45px rgba(0,0,0,.22);
    padding:17px 20px;
    display:flex;
    flex-direction:column;
    justify-content:center
}
.info-card small{
    display:block;
    color:#777;
    text-transform:uppercase;
    letter-spacing:.7px;
    font-size:10.5px;
    margin-bottom:7px
}
.info-card small:first-child{
    color:var(--accent);
    font-size:17px;
    line-height:1
}
.info-card small span{
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--accent);
    margin-right:8px;
    vertical-align:middle
}
.info-card strong{
    font-weight:500;
    color:#fff;
    font-size:15px;
    line-height:1.25
}
.info-card em{
    font-style:normal;
    color:#969696;
    font-size:12px
}
.facts-card{
    min-height:155px;
    margin-bottom:32px;
    align-items:flex-start
}
.facts-card small{
    font-size:10.5px!important;
    color:#777!important
}
.facts-card ul{
    list-style:none;
    margin:0;
    padding:0
}
.facts-card li{
    color:#b8b8b8;
    font-size:14px;
    line-height:2.05
}
.facts-card li:before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--accent);
    display:inline-block;
    margin-right:14px;
    vertical-align:middle
}
.mineral-progress{
    display:grid;
    grid-template-columns:44px 1fr 38px;
    gap:18px;
    align-items:start
}
.mineral-progress b{
    font-size:32px;
    line-height:1;
    color:#ededed
}
.mineral-progress div{
    height:1px;
    background:#242424;
    margin-top:16px
}
.mineral-progress span{
    display:block;
    width:46%;
    height:2px;
    background:var(--accent);
    margin-top:-.5px
}
.mineral-progress small{
    font-size:12px;
    color:#8f8f8f;
    line-height:1.35
}
.process{
    min-height:100vh;
    padding:140px 0 95px
}
.process-shell{
    width:min(1220px,calc(100% - 72px));
    margin:0 auto
}
.process-head{
    display:grid;
    grid-template-columns:1fr 180px;
    gap:80px;
    margin-bottom:72px
}
.process-copy h2{
    font-size:70px;
    line-height:.95;
    letter-spacing:-3px;
    margin:35px 0 25px
}
.orange-line{
    width:92px;
    height:3px;
    background:linear-gradient(90deg,#ff922e,#ffa34b);
    margin-bottom:28px
}
.orange-line.center{
    margin:24px auto 30px
}
.process-copy p{
    max-width:570px;
    margin:0;
    color:#b2b2b2;
    font-size:17px;
    line-height:1.7
}
.mini-stats{
    display:flex;
    flex-direction:column;
    gap:20px;
    align-items:flex-end
}
.mini-stats div{
    width:170px;
    height:130px;
    background:#1f1f1f;
    border-radius:17px;
    border:1px solid #2b2b2b;
    padding:26px
}
.mini-stats b{
    display:block;
    font-size:38px
}
.mini-stats span{
    display:block;
    margin-top:13px;
    color:#8e8e8e;
    font-size:13px
}
.steps{
    display:flex;
    flex-direction:column
}
.step{
    height:148px;
    border-radius:20px;
    background:linear-gradient(145deg,#222,#1d1d1d);
    border:1px solid rgba(255,255,255,.035);
    display:grid;
    grid-template-columns:100px 80px 1fr 24px;
    align-items:center;
    gap:25px;
    padding:0 45px
}
.step>b{
    font-size:54px;
    letter-spacing:-2px;
    color:#eee
}
.circle{
    width:78px;
    height:78px;
    border-radius:50%;
    border:1px solid #363636;
    display:flex;
    align-items:center;
    justify-content:center
}
.circle img{
    width:36px;
    height:36px;
    object-fit:contain
}
.step h4{
    font-size:29px;
    line-height:1;
    margin:0 0 12px
}
.step p{
    font-size:14px;
    color:#aaa;
    margin:0
}
.step i{
    font-style:normal;
    color:#333;
    font-size:34px
}
.connector{
    width:2px;
    height:44px;
    background:linear-gradient(#ff922e,#ffa34b);
    align-self:center;
    margin:16px 0
}
.aspirations{
    padding:112px 0 120px
}
.asp-shell{
    width:min(1130px,calc(100% - 72px));
    margin:0 auto
}
.compact p{
    width:min(820px,100%);
    margin:0 auto;
    color:#b6b6b6;
    font-size:15px;
    line-height:1.65
}
.asp-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:70px
}
.asp-card{
    min-height:315px;
    background:#1f1f1f;
    border:1px solid #2b2b2b;
    border-radius:27px;
    padding:42px 34px
}
.asp-card img{
    width:36px;
    height:36px;
    object-fit:contain;
    margin-bottom:46px
}
.asp-card b{
    display:block;
    color:#ff9b42;
    font-size:39px;
    line-height:1;
    font-weight:900;
    margin-bottom:10px
}
.asp-card h3{
    font-size:21px;
    font-weight:500;
    margin:0 0 24px
}
.asp-card p{
    color:#9c9c9c;
    font-size:15px;
    line-height:1.45;
    margin:0
}
.cta-panel{
    min-height:820px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:radial-gradient(circle at 20% 44%,rgba(255,143,45,.45),transparent 24%),linear-gradient(90deg,#583316 0%,#322c27 57%,#2d2d2d 100%)
}
.cta-card{
    width:min(980px,calc(100% - 70px));
    min-height:560px;
    border-radius:24px;
    background:rgba(29,29,29,.94);
    border:1px solid rgba(255,146,47,.16);
    box-shadow:0 34px 80px rgba(0,0,0,.24);
    text-align:center;
    padding:86px 70px 58px
}
.cta-icon{
    width:58px;
    height:58px;
    border-radius:50%;
    background:linear-gradient(180deg,#ff922e,#ffa34b);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 36px;
    font-size:24px;
    font-weight:800;
    box-shadow:0 0 30px rgba(255,146,47,.35)
}
.cta-card h2{
    margin:0 0 38px;
    font-size:62px;
    line-height:1.08;
    letter-spacing:-3px;
    font-weight:900
}
.cta-card h2 span{
    color:#ff9b42
}
.cta-card p{
    margin:0 0 38px;
    color:#c2c2c2;
    font-size:19px;
    line-height:1.65
}
.cta-card .btn{
    height:56px;
    padding:0 34px
}
.cta-stats{
    display:flex;
    justify-content:center;
    gap:62px;
    margin-top:47px
}
.cta-stats span{
    font-size:15px;
    color:#b8b8b8;
    line-height:1.25
}
.cta-stats b{
    display:block;
    color:#fff;
    font-size:24px;
    font-weight:900
}
.footer{
    background:#272727;
    border-top:1px solid rgba(255,255,255,.04);
    padding:58px 0 28px
}
.footer-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr 1.15fr 1fr;
    gap:65px
}
.footer-logo{
    width:125px;
    margin-bottom:18px
}
.footer h4{
    font-size:14px;
    margin:0 0 18px
}
.footer p,.footer a{
    display:block;
    color:#9d9d9d;
    font-size:13px;
    line-height:1.8;
    margin:0 0 8px
}
.footer p img{
    width:14px;
    height:14px;
    display:inline-block;
    vertical-align:middle;
    margin-right:8px
}
.copy{
    border-top:1px solid rgba(255,255,255,.05);
    margin-top:45px;
    padding-top:25px;
    color:#8d8d8d;
    font-size:12px
}
.desktop-only{
    display:block
}
@media(max-width:1100px){
    .main-nav{
        gap:18px
    }
    .hero h1{
        font-size:68px
    }
    .mineral-screen{
        height:auto;
        min-height:auto;
        padding:110px 0
    }
    .mineral-wrap{
        width:calc(100% - 44px);
        grid-template-columns:1fr;
        gap:45px
    }
    .mineral-img img,.mineral-img.smaller img{
        width:100%;
        max-width:560px;
        height:auto
    }
    .mineral-info{
        max-width:620px;
        margin:0 auto
    }
    .process-head{
        grid-template-columns:1fr
    }
    .mini-stats{
        flex-direction:row;
        align-items:flex-start
    }
    .asp-grid{
        grid-template-columns:1fr
    }
    .footer-grid{
        grid-template-columns:1fr 1fr
    }
    .cta-card h2{
        font-size:52px
    }
}
@media(max-width:768px){
    .page-shell{
        width:calc(100% - 32px)
    }
    .site-header{
        height:60px
    }
    .nav-wrap{
        height:60px
    }
    .logo img{
        width:120px
    }
    .main-nav,.nav-wrap>.btn{
        display:none
    }
    .menu-toggle{
        display:flex
    }
    .main-nav.open{
        display:flex;
        position:absolute;
        left:0;
        right:0;
        top:60px;
        background:#2b2b2b;
        flex-direction:column;
        gap:0;
        padding:12px 22px
    }
  .main-nav.open a{
    padding:13px 0;
    background:#2b2b2b!important;
}
    .hero{
        min-height:100vh;
        height:auto;
        padding:110px 18px 90px
    }
    .hero h1{
        font-size:48px;
        letter-spacing:-2px;
        margin:34px 0 18px
    }
    .hero p{
                font-size: 20px;
    }
    .hero-actions{
        flex-direction:column
    }
    .section-title h2{
        font-size:32px
    }
    .intro-section{
        min-height:260px
    }
    .top-grid,.two-grid{
        grid-template-columns:1fr;
        margin-bottom:16px
    }
    .process{
        padding:80px 0
    }
    .process-shell,.asp-shell{
        width:calc(100% - 32px)
    }
    .process-copy h2{
        font-size:46px;
        letter-spacing:-1px
    }
    .process-head{
        gap:30px;
        margin-bottom:50px
    }
    .mini-stats{
        gap:12px
    }
    .mini-stats div{
        width:50%;
        height:auto;
        padding:20px
    }
    .step{
        height:auto;
        grid-template-columns:54px 60px 1fr;
        padding:22px 16px;
        gap:12px
    }
    .step>b{
        font-size:32px
    }
    .circle{
        width:56px;
        height:56px
    }
    .circle img{
        width:28px;
        height:28px
    }
    .step h4{
        font-size:20px
    }
    .step p{
        font-size:12px
    }
    .step i{
        display:none
    }
    .connector{
        height:34px
    }
    .asp-card{
        min-height:auto
    }
    .cta-panel{
        min-height:auto;
        padding:80px 0
    }
    .cta-card{
        width:calc(100% - 32px);
        min-height:auto;
        padding:48px 20px
    }
    .cta-card h2{
        font-size:36px;
        letter-spacing:-1px
    }
    .cta-card p{
        font-size:15px
    }
    .cta-stats{
        gap:22px;
        flex-wrap:wrap
    }
    .footer-grid{
        grid-template-columns:1fr;
        gap:30px
    }
    .desktop-only{
        display:none
    }
}
/* CTA + Footer Figma matching fixes */
 .cta-panel{
     min-height:720px !important;
     padding:70px 0 68px !important;
     background:radial-gradient(circle at 18% 45%,rgba(255,143,45,.50),transparent 25%),linear-gradient(90deg,#553112 0%,#322c27 55%,#2d2d2d 100%) !important;
}
 .cta-card{
     width:min(780px,calc(100% - 70px)) !important;
     min-height:455px !important;
     padding:62px 64px 42px !important;
     border-radius:22px !important;
}
 .cta-icon{
    margin-bottom:28px !important
}
 .cta-card h2{
    font-size:48px !important;
    line-height:1.08 !important;
    letter-spacing:-2px !important;
    margin-bottom:24px !important
}
 .cta-card p{
    font-size:14px !important;
    line-height:1.65 !important;
    margin-bottom:28px !important
}
 .cta-card .btn{
    height:46px !important;
    padding:0 28px !important;
    font-size:13px !important
}
 .cta-stats{
    gap:58px !important;
    margin-top:34px !important
}
 .cta-stats span{
    font-size:13px !important
}
 .cta-stats b{
    font-size:21px !important
}
 .footer{
     background:radial-gradient(circle at 50% -20%,rgba(255,143,45,.10),transparent 32%),#272727 !important;
     position:relative;
     z-index:2;
}
 .social-links{
    display:flex;
    gap:10px;
    margin-top:20px
}
.social-links a{
    width:28px;
    height:28px;
    border-radius:50%;
    background:#1e1e1e;
    border:1px solid rgba(255,255,255,.08);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#9d9d9d;
    font-size:12px;
    font-weight:700;
    line-height:1;
    margin:0
}
.footer-bottom{
    display:flex;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid rgba(255,255,255,.05);
    margin-top:45px;
    padding-top:25px;
    color:#8d8d8d;
    font-size:12px
}
.footer-policy{
    display:flex;
    gap:32px
}
.footer-policy a{
    font-size:12px;
    margin:0;
    color:#8d8d8d
}
 @media(max-width:768px){
    .cta-panel{
        padding:70px 0 !important
    }
    .cta-card{
        width:calc(100% - 32px) !important;
        min-height:auto !important;
        padding:48px 20px !important
    }
    .cta-card h2{
        font-size:36px !important;
        letter-spacing:-1px !important
    }
    .footer-bottom{
        flex-direction:column
    }
    .footer-policy{
        gap:18px
    }
}
/* Footer exact Figma match updates */
 .footer{
     position:relative !important;
     overflow:hidden !important;
     background: radial-gradient(circle at 48% 0%, rgba(255,143,45,.18), transparent 35%), linear-gradient(90deg,#232323 0%,#2b2723 47%,#232323 100%) !important;
     padding:70px 0 58px !important;
}
 .footer-grid{
    align-items:flex-start !important;
    gap:90px !important;
}
 .footer-brand p{
    max-width:310px !important;
}
 .social-links{
    display:flex !important;
    gap:12px !important;
    margin-top:22px !important;
}
 .social-links a{
     width:31px !important;
    height:31px !important;
    border-radius:50% !important;
     background:#1d1d1d !important;
    border:1px solid rgba(255,255,255,.08) !important;
     display:flex !important;
    align-items:center !important;
    justify-content:center !important;
     color:#a9a9a9 !important;
    margin:0 !important;
    transition:.25s ease !important;
}
 .social-links a:hover{
    background:#262626 !important;
    color:#ff9438 !important;
    border-color:rgba(255,148,56,.25) !important;
}
 .social-links svg{
    width:15px !important;
    height:15px !important;
    fill:currentColor !important;
    display:block !important;
}
 .footer h4{
    color:#fff !important;
    font-size:14px !important;
    font-weight:800 !important;
    margin-bottom:20px !important;
}
 .footer a,.footer p{
    color:#a7a7a7 !important;
    font-size:14px !important;
    line-height:1.85 !important;
}
 .footer a:hover{
    color:#ff9438 !important;
}
 .footer p img{
    filter:none !important;
    opacity:.9 !important;
}
 .footer-bottom{
     display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
     border-top:1px solid rgba(255,255,255,.07) !important;
    margin-top:54px !important;
    padding-top:28px !important;
     color:#8d8d8d !important;
    font-size:12px !important;
}
 .footer-policy{
    display:flex !important;
    gap:34px !important;
    align-items:center !important;
}
 .footer-policy a{
    font-size:12px !important;
    color:#8d8d8d !important;
    margin:0 !important;
}
 .copy{
    display:none !important;
}
 @media(max-width:768px){
     .footer{
        padding:48px 0 34px !important;
    }
     .footer-grid{
        gap:28px !important;
    }
     .footer-bottom{
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:16px !important;
    }
     .footer-policy{
        gap:20px !important;
    }
}
/* Final CTA card match with Figma */
 .cta-panel{
    min-height:860px!important;
    padding:95px 0 92px!important;
    align-items:center!important;
    background:radial-gradient(circle at 17% 43%,rgba(255,143,45,.44) 0%,rgba(255,143,45,.24) 18%,transparent 38%),linear-gradient(90deg,#5c3418 0%,#3b2e25 42%,#2b2b2b 100%)!important
}
.cta-card{
    width:min(1010px,calc(100% - 72px))!important;
    min-height:650px!important;
    border-radius:24px!important;
    background:rgba(27,27,27,.92)!important;
    border:1px solid rgba(255,147,48,.16)!important;
    padding:78px 70px 58px!important;
    box-shadow:0 35px 90px rgba(0,0,0,.28)!important
}
.cta-icon{
    width:58px!important;
    height:58px!important;
    margin-bottom:34px!important;
    font-size:25px!important;
    background:linear-gradient(180deg,#ff902c,#ff9e43)!important;
    box-shadow:0 0 34px rgba(255,144,44,.42)!important
}
.cta-card h2{
    font-size:55px!important;
    line-height:1.08!important;
    letter-spacing:-1.8px!important;
    margin:0 0 28px!important;
    font-weight:900!important
}
.cta-card p{
    max-width:650px!important;
    margin:0 auto 32px!important;
    font-size:16px!important;
    line-height:1.72!important;
    color:#b8b8b8!important
}
.cta-card .btn{
    height:56px!important;
    min-width:190px!important;
    border-radius:12px!important;
    font-size:14px!important;
    font-weight:800!important
}
.cta-divider{
    height:1px!important;
    width:86%!important;
    margin:46px auto 30px!important;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)!important
}
.cta-stats{
    margin-top:0!important;
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:35px!important;
    width:82%!important;
    margin-left:auto!important;
    margin-right:auto!important
}
.cta-stats span{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    color:#777!important;
    text-transform:uppercase!important;
    font-size:10px!important;
    letter-spacing:.6px!important
}
.cta-stats .stat-icon{
    width:38px!important;
    height:38px!important;
    border-radius:50%!important;
    border:1px solid rgba(255,255,255,.075)!important;
    background:#202020!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#b47611!important;
    font-style:normal!important;
    font-size:18px!important;
    margin-bottom:22px!important
}
.cta-stats b{
    color:#fff!important;
    font-size:30px!important;
    line-height:1!important;
    font-weight:900!important;
    margin-bottom:11px!important;
    text-shadow:0 2px 0 rgba(40,120,180,.28)!important
}
.cta-stats small{
    color:#777!important;
    text-transform:uppercase!important;
    font-size:10px!important;
    letter-spacing:.7px!important
}
.cta-note{
    margin-top:36px!important;
    color:#777!important;
    font-size:11px!important;
    line-height:1.4!important
}
@media(max-width:768px){
    .cta-panel{
        padding:70px 0!important;
        min-height:auto!important
    }
    .cta-card{
        width:calc(100% - 30px)!important;
        min-height:auto!important;
        padding:44px 20px 38px!important
    }
    .cta-card h2{
        font-size:35px!important;
        letter-spacing:-1px!important
    }
    .cta-card p{
        font-size:14px!important
    }
    .cta-divider{
        width:100%!important;
        margin:34px 0 25px!important
    }
    .cta-stats{
        width:100%!important;
        gap:12px!important
    }
    .cta-stats b{
        font-size:22px!important
    }
    .cta-stats .stat-icon{
        width:32px!important;
        height:32px!important;
        margin-bottom:15px!important
    }
    .cta-note{
        font-size:10px!important
    }
}
 
 @media(max-width:768px){

  #home .hero-content{
    margin-top:-20px!important;
    padding:0 18px!important;
  }

  #home .hero-actions{
    margin-top:36px!important;
    transform:translateY(25px);
  }

  #home .hero-actions.is-shown{
    transform:translateY(0)!important;
    transition:opacity .8s ease, transform .8s ease!important;
  }

}

/* ===== Ark Metals scroll-video/custom overrides moved from index.html ===== */
/* ===== Ark Metals V6 merged scroll-video layer ===== */
    :root{--ark-orange:#f49a43;--ark-dark:#151515;}
    html{scroll-behavior:smooth;}
    body{background:#1f1f1f;overflow-x:hidden;}
    .site-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(17,17,17,.88);backdrop-filter:blur(14px);}
    .ark-scroll-video-wrap{position:fixed;inset:0;width:100%;height:100vh;z-index:3;pointer-events:none;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .45s ease;background:transparent;}
    .ark-scroll-video-wrap.is-visible{opacity:1;}
    .ark-scroll-video-wrap video{width:100%;height:100%;object-fit:contain;display:block;transform:translateZ(0);will-change:transform;backface-visibility:hidden;}
    main,footer{position:relative;z-index:2;} .site-header{z-index:1000!important;} .hero-content,.mineral-info,.section-title,.process,.aspirations,.cta-panel,.footer{position:relative;z-index:5;}
    .hero{min-height:100vh;position:relative;z-index:3;}
    #resources,.mineral-screen{position:relative;z-index:4;background:transparent!important;}
   
    .video-scroll-zone{position:relative;}
    .video-scroll-zone:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(255,136,46,.08),transparent 42%),linear-gradient(180deg,#272727 0%,#202020 100%);z-index:0;}
    .video-scroll-zone>section{position:relative;z-index:2;}
    .panel{min-height:100vh;}

#resources{
  padding-top:0!important;
  min-height:auto!important;
  height:auto!important;
  padding-bottom:0!important;
}


#resources.short-panel,
.short-panel{
  min-height:auto!important;
}

#resources{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}

#resources .section-title{
  width:100%!important;
  max-width:100%!important;
  margin:0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:0 20px!important;
}

#resources .section-title h2{
  width:100%!important;
  text-align:center!important;
  margin:0 auto!important;
}

#resources .eyebrow{
  margin:0 auto 14px!important;
}

    .cta-panel{z-index:5;}
    .cta-card{position:relative;z-index:3;}
    .footer{position:relative;z-index:6;}
    @media(max-width:768px){.ark-scroll-video-wrap video{width:150%;max-width:none}.short-panel{min-height:45vh}}


    /* ===== Step 1 hero staged reveal over video ===== */
    body.hero-stage-active{overflow:hidden;}
    #home.hero{min-height:100vh;overflow:hidden;background:#252525;}
    #home .hero-glow{display:none!important;}
    #home .scroll-indicator{display:none!important;}
    #home .hero-content{opacity:1!important;transform:none!important;z-index:20;}
    #home .hero-content .eyebrow,
    #home .hero-content h1,
    #home .hero-content p,
    #home .hero-content .hero-actions{opacity:0;will-change:opacity,transform;}
    #home .hero-content .eyebrow{transform:translateY(-42px);}
    #home .hero-content h1{transform:scale(.96);}
    #home .hero-content p{transform:translateY(12px);}
    #home .hero-content .hero-actions{transform:translateY(46px);}
    #home .hero-content .is-shown{opacity:1!important;transform:none!important;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1);}
    #home .hero-content .hero-actions.is-shown{transition-delay:.08s;}
    .ark-scroll-video-wrap{opacity:1!important;z-index:4;background:#252525;}
    .ark-scroll-video-wrap video{object-fit:cover;}
@media(max-width:768px){

  .ark-scroll-video-wrap video{
    width:100vw!important;
    height:100vh!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:scale(1.02);
    will-change:transform;
    backface-visibility:hidden;
  }

  .hero-content h1{
    font-size:46px!important;
    line-height:1.05!important;
  }

}


    /* ===== FIX: keep transparent scroll video visible behind full website till footer ===== */
    html, body{min-height:100%;background:#252525!important;}
    .ark-scroll-video-wrap{
      position:fixed!important;
      inset:0!important;
      width:100%!important;
      height:100vh!important;
      opacity:1!important;
      visibility:visible!important;
      z-index:0!important;
      pointer-events:none!important;
      background:#252525!important;
    }
    .ark-scroll-video-wrap.is-visible{opacity:1!important;visibility:visible!important;}
    .ark-scroll-video-wrap video{
      width:100%!important;
      height:100%!important;
      object-fit:contain!important;
      display:block!important;
      opacity:1!important;
    }
    .site-header{z-index:1000!important;}
    main, footer{position:relative!important;z-index:5!important;}
    #home.hero, .video-scroll-zone, #resources, .mineral-screen, .process, .aspirations, .cta-panel, .footer{
      background:transparent!important;
    }
    .video-scroll-zone:before{background:transparent!important;}
    #home .hero-content{position:relative!important;z-index:20!important;}
    #home .scroll-indicator{display:block!important;opacity:.75!important;z-index:30!important;}
    .process, .aspirations{background:rgba(37,37,37,.70)!important;}
    .cta-panel{background:linear-gradient(90deg,rgba(143,78,25,.82),rgba(37,37,37,.70))!important;}
    .footer{background:rgba(20,20,20,.88)!important;}
html{
  scroll-behavior:auto!important;
}

#home .scroll-indicator{
  display:flex!important;
  flex-direction:column;
  align-items:center;
  gap:0px;
  text-decoration:none;
}

#home .scroll-indicator span{
    font-size: 9px;
    letter-spacing: 3px;
    color: #bfc1c4;
    font-weight: 500;
}

#home .scroll-indicator i{
    width: 15px;
    height: 15px;
  border-right:3px solid #bfc1c4;
  border-bottom:3px solid #bfc1c4;
  transform:rotate(45deg);
  animation:arrowDance 1.1s ease-in-out infinite;
}

@keyframes arrowDance{
  0%,100%{
    transform:translateY(0) rotate(45deg);
  }
  50%{
    transform:translateY(12px) rotate(45deg);
  }
}

body:not(.hero-stage-active) #home .scroll-indicator{
  display:none!important;
}

#resources{
  opacity:0;
  transform:translateY(25px);
  transition:opacity .28s ease, transform .28s ease;
  will-change:opacity, transform;
}

#resources.is-visible{
  opacity:1;
  transform:translateY(0);
}
  
/* ===== Mineral cards reveal with video scroll ===== */
.video-scroll-zone{
  /* About section will start after scrollY 14800.
     Zone starts after hero (100vh), so height = 14800px - 100vh. */
  height:calc(100000px - 100vh)!important;
  min-height:9000px!important;
  position:relative!important;
  z-index:6!important;
}

#resources{
  position:fixed!important;
  left:0!important;
  right:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:100%!important;
  pointer-events:none!important;
}

.mineral-screen{
  min-height:0!important;
  height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
  position:static!important;
}

.mineral-screen .mineral-wrap{
  position:fixed!important;
  top:50%!important;
  left:50%!important;
  transform:translate(-50%,-50%)!important;
  width:min(1050px,92vw)!important;
  min-height:420px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  pointer-events:none!important;
  opacity:0!important;
  visibility:hidden!important;
  z-index:30!important;
}

@media(max-width:768px){

  .mineral-screen .mineral-wrap {
    top: 63% !important;
  }

}

.mineral-screen .mineral-img{
  display:none!important;
}

.mineral-screen .mineral-info{
  width:min(520px,90vw)!important;
  opacity:0!important;
  transform:translateX(90px) scale(.98)!important;
  transition:opacity .42s ease, transform .42s cubic-bezier(.22,.9,.24,1)!important;
  will-change:opacity,transform!important;
}

.mineral-screen.is-active .mineral-wrap{
  opacity:1!important;
  visibility:visible!important;
}

.mineral-screen.is-active .mineral-info{
  opacity:1!important;
  transform:translateX(0) scale(1)!important;
  pointer-events:auto!important;
}

.mineral-screen.is-leaving .mineral-info{
  opacity:0!important;
  transform:translateX(-120px) scale(.96)!important;
}

/* optional debug box */
.scroll-debug-box{
  position:fixed;
  right:1654px;
  bottom:14px;
  z-index:99999;
  background:rgba(0,0,0,.75);
  color:#fff;
  font:12px/1.5 monospace;
  padding:10px 12px;
  border-radius:8px;
  /*display:none;*/
}

/* ===== About should start after video journey, no overlap ===== */
#about,
.aspirations,
#invest{
  position:relative!important;
  z-index:50!important;
}
body.after-video-zone .ark-scroll-video-wrap{
  opacity:0!important;
  visibility:hidden!important;
}
body.after-video-zone #resources,
body.after-video-zone .mineral-screen .mineral-wrap{
  opacity:0!important;
  visibility:hidden!important;
}
.scroll-animate{
  opacity:0;
  transform:translateY(70px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.22,.9,.24,1);
}

.scroll-animate.is-visible{
  opacity:1;
  transform:translateY(0);
}

.scroll-animate.from-left{
  transform:translateX(-90px);
}

.scroll-animate.from-right{
  transform:translateX(90px);
}

.scroll-animate.from-left.is-visible,
.scroll-animate.from-right.is-visible{
  transform:translateX(0);
}

.step.scroll-animate,
.asp-card.scroll-animate{
  transition-delay:var(--delay,0s);
}

/* ===== INVEST CINEMATIC ANIMATION ===== */

#invest .cta-card{
  opacity:0;
  transform:translateY(120px) scale(.95);
  transition:all 1s cubic-bezier(.22,.9,.24,1);
}

#invest.is-visible .cta-card{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Heading reveal */
#invest h2{
  opacity:0;
  transform:translateY(40px);
  transition:all .9s ease;
  transition-delay:.2s;
}

#invest.is-visible h2{
  opacity:1;
  transform:translateY(0);
}

/* Paragraph */
#invest p{
  opacity:0;
  transform:translateY(30px);
  transition:all .9s ease;
  transition-delay:.35s;
}

#invest.is-visible p{
  opacity:1;
  transform:translateY(0);
}

/* Button */
#invest .btn{
  opacity:0;
  transform:translateY(30px);
  transition:all .9s ease;
  transition-delay:.5s;
}

#invest.is-visible .btn{
  opacity:1;
  transform:translateY(0);
}

/* Stats stagger */
#invest .cta-stats span{
  opacity:0;
  transform:translateY(40px);
  transition:all .7s ease;
}

#invest.is-visible .cta-stats span:nth-child(1){
  transition-delay:.6s;
  opacity:1;
  transform:translateY(0);
}

#invest.is-visible .cta-stats span:nth-child(2){
  transition-delay:.75s;
  opacity:1;
  transform:translateY(0);
}

#invest.is-visible .cta-stats span:nth-child(3){
  transition-delay:.9s;
  opacity:1;
  transform:translateY(0);
}

/* Bottom note */
#invest .cta-note{
  opacity:0;
  transform:translateY(20px);
  transition:all .8s ease;
  transition-delay:1s;
}

#invest.is-visible .cta-note{
  opacity:1;
  transform:translateY(0);
}

#backToTop{
  position:fixed;
  right:25px;
  bottom:25px;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:#fff;
  background:#f49a43;
  border-radius:50%;
  text-decoration:none;
  z-index:9999;
  opacity:0;
  transform:translateY(30px);
  transition:all .4s ease;
  box-shadow:0 10px 25px rgba(0,0,0,.3);
}

/* show */
#backToTop.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* hover */
#backToTop:hover{
  transform:translateY(-5px) scale(1.05);
  background:#ff8c2a;
}

/* arrow animation */
#backToTop::after{
  content:"";
  width:10px;
  height:10px;
  border-left:2px solid #fff;
  border-top:2px solid #fff;
  transform:rotate(45deg);
  position:absolute;
  top:18px;
}

/* optional pulse */
#backToTop.is-visible{
  animation:floatUp 2s ease-in-out infinite;
}

@keyframes floatUp{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}
body.show-scroll-debug .scroll-debug-box{display:block!important;}



/* ===== Professional Website Preloader ===== */
#sitePreloader{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 35%, rgba(244,154,67,.16), transparent 36%),
    linear-gradient(135deg,#111 0%,#1f1f1f 48%,#2a211a 100%);
  color:#fff;
  overflow:hidden;
  transition:opacity .8s ease, visibility .8s ease;
}
#sitePreloader::before{
  content:"";
  position:absolute;
  width:620px;
  height:620px;
  border-radius:50%;
  border:1px solid rgba(244,154,67,.16);
  animation:preloaderPulse 2.4s ease-in-out infinite;
}
#sitePreloader::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:70%;
  height:100%;

  background:linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,255,255,.045) 50%,
    transparent 100%
  );

  transform:none!important;

  animation:preloaderShine 2.8s linear infinite;

  pointer-events:none;
}

#sitePreloader.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.preloader-box{
  position:relative;
  z-index:2;
  width:min(420px,86vw);
  text-align:center;
  padding:34px 28px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(18,18,18,.54);
  backdrop-filter:blur(18px);
  border-radius:28px;
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}
.preloader-logo{
  width:120px;
  max-width:45vw;
  height:auto;
  margin:0 auto 22px;
  display:block;
  filter:drop-shadow(0 10px 24px rgba(244,154,67,.2));
}
.preloader-title{
  font-size:14px;
  letter-spacing:5px;
  text-transform:uppercase;
  color:#f49a43;
  font-weight:800;
  margin-bottom:10px;
}
.preloader-subtitle{
  margin:0 0 24px;
  color:rgba(255,255,255,.72);
  font-size:14px;
  line-height:1.6;
}
.preloader-progress-line{
  width:100%;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.preloader-progress-fill{
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#b96825,#f49a43,#ffbf78);
  box-shadow:0 0 22px rgba(244,154,67,.58);
  transition:width .28s ease;
}
.preloader-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:14px;
  font-size:12px;
  color:rgba(255,255,255,.62);
  letter-spacing:.8px;
}
.preloader-percent{
  color:#fff;
  font-weight:800;
  letter-spacing:1px;
}
.preloader-dots span{
  display:inline-block;
  width:5px;
  height:5px;
  margin-left:5px;
  border-radius:50%;
  background:#f49a43;
  animation:preloaderDots 1s ease-in-out infinite;
}
.preloader-dots span:nth-child(2){animation-delay:.15s;}
.preloader-dots span:nth-child(3){animation-delay:.3s;}
body.is-loading{
  overflow:hidden!important;
}
@keyframes preloaderPulse{
  0%,100%{transform:scale(.86);opacity:.35;}
  50%{transform:scale(1.08);opacity:.08;}
}
@keyframes preloaderShine{
  0%{
    left:-120%;
  }

  100%{
    left:120%;
  }
}

html,
body{
  overflow-x:hidden!important;
}

@keyframes preloaderDots{
  0%,100%{transform:translateY(0);opacity:.35;}
  50%{transform:translateY(-6px);opacity:1;}
}
@media(max-width:575px){
  .preloader-box{padding:28px 22px;border-radius:22px;}
  .preloader-title{font-size:12px;letter-spacing:3px;}
  .preloader-subtitle{font-size:13px;}
}


@media(max-width:768px){

  #resources{
    left:50%!important;
    transform:translate(-50%,-50%)!important;
    width:100vw!important;
  }

  #resources .section-title h2{
    font-size:42px!important;
    line-height:1.05!important;
  }

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

  #resources{
    position:fixed!important;
    left:0!important;
    right:auto!important;
    top:50%!important;
    width:100vw!important;
    transform:translateY(-50%)!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    text-align:center!important;
    overflow:hidden!important;
  }

  #resources .section-title{
    width:100%!important;
    max-width:360px!important;
    margin:0 auto!important;
    padding:0 18px!important;
    text-align:center!important;
  }

  #resources .section-title h2{
    width:100%!important;
    max-width:100%!important;
    font-size:30px!important;
    line-height:1.12!important;
    text-align:center!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    margin:0 auto!important;
  }

  #resources .eyebrow{
    display:inline-block!important;
    margin:0 auto 12px!important;
    text-align:center!important;
  }

}





@media(max-width:768px){

  .mineral-screen .mineral-wrap{
    width:100vw!important;
    min-height:100vh!important;
    top:0!important;
    left:0!important;
    transform:none!important;
    padding:115px 14px 28px!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    z-index:80!important;
  }

  .mineral-screen .mineral-info{
    width:100%!important;
    max-width:315px!important;
    margin:0 auto!important;
    transform:translateY(30px)!important;
  }

  .mineral-screen.is-active .mineral-info{
    opacity:1!important;
    transform:translateY(0)!important;
  }

  .top-grid,
  .two-grid{
    grid-template-columns:1fr!important;
    gap:4px!important;
    margin-bottom:4px!important;
  }

  .info-card{
    min-height:auto!important;
    padding:10px 14px!important;
    border-radius:12px!important;
  }

  .info-card small{
    font-size:8px!important;
    line-height:1.2!important;
    margin-bottom:3px!important;
    letter-spacing:.5px!important;
  }

  .info-card small:first-child{
    font-size:11px!important;
  }

  .info-card strong{
    font-size:11px!important;
    line-height:1.35!important;
    font-weight:600!important;
  }

  .info-card em{
    font-size:10px!important;
  }

  .facts-card{
    min-height:auto!important;
    margin-bottom:10px!important;
    padding-top:12px!important;
    padding-bottom:12px!important;
  }

  .facts-card li{
    font-size:11px!important;
    line-height:1.75!important;
  }

  .facts-card li:before{
    width:5px!important;
    height:5px!important;
    margin-right:10px!important;
  }

  .mineral-progress{
    grid-template-columns:38px 1fr 22px!important;
    gap:10px!important;
    align-items:center!important;
  }

  .mineral-progress b{
    font-size:24px!important;
  }

  .mineral-progress small{
    font-size:9px!important;
  }

  .mineral-progress div{
    margin-top:0!important;
  }

  .mineral-screen .mineral-wrap {
    top: 22% !important;


}

@media (max-width: 768px) {
    #resources {
        margin-top: -20px !important;
    }
}