/* =========================================================
   ARBWALLET PREMIUM STYLE
   Theme: Gold + Orange + Dark Navy
========================================================= */


/* =========================================================
   GLOBAL RESET
========================================================= */

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


html{
    scroll-behavior:smooth;
    scroll-padding-top:85px;
}


body{
    margin:0;
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        #f7f8fa;

    color:#263344;

    line-height:1.7;

    overflow-x:hidden;
}


img{
    max-width:100%;
}


a{
    transition:
        color .25s ease,
        background .25s ease,
        border .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


button{
    font-family:inherit;
}


/* =========================================================
   TEXT SELECTION
========================================================= */

::selection{
    background:#f5a400;
    color:#111827;
}


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

::-webkit-scrollbar{
    width:10px;
}


::-webkit-scrollbar-track{
    background:#edf0f4;
}


::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            180deg,
            #ffd21a,
            #f28a00
        );

    border-radius:20px;
}


::-webkit-scrollbar-thumb:hover{
    background:
        linear-gradient(
            180deg,
            #ffcf00,
            #df7100
        );
}


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

.header{
    position:sticky;
    top:0;
    z-index:9999;

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

    border-bottom:
        1px solid #e7e9ed;

    box-shadow:
        0 3px 18px rgba(15,23,42,.07);

    backdrop-filter:
        blur(12px);
}


.header-inner{
    max-width:1250px;

    height:76px;

    margin:auto;

    padding:
        0 20px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}


/* =========================================================
   LOGO
========================================================= */

.logo{
    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    font-size:25px;

    font-weight:900;

    letter-spacing:.2px;

    color:#111827;
}


.logo img{
    width:48px;
    height:48px;

    object-fit:contain;

    border-radius:12px;

    box-shadow:
        0 4px 12px rgba(238,143,0,.18);
}


.logo span{
    background:
        linear-gradient(
            90deg,
            #151515,
            #9a5900
        );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

nav{
    display:flex;

    align-items:center;

    gap:25px;
}


nav a{
    position:relative;

    text-decoration:none;

    color:#344054;

    font-size:15px;

    font-weight:700;

    padding:
        8px 0;
}


nav a::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:0;
    height:2px;

    background:
        linear-gradient(
            90deg,
            #ffd21a,
            #ef8c00
        );

    transition:
        width .25s ease;
}


nav a:hover{
    color:#c87500;
}


nav a:hover::after{
    width:100%;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-btn{
    display:none;

    width:44px;
    height:44px;

    border:1px solid #e4e7ec;

    border-radius:10px;

    background:#fff;

    color:#111827;

    font-size:25px;

    cursor:pointer;

    box-shadow:
        0 3px 10px rgba(15,23,42,.06);
}


.menu-btn:hover{
    border-color:#f0a000;

    color:#d47a00;

    background:#fffaf0;
}


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

.hero{
    position:relative;

    padding:
        78px 20px
        88px;

    text-align:center;

    color:white;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 50% 20%,
            rgba(255,194,0,.20),
            transparent 28%
        ),

        radial-gradient(
            circle at 85% 80%,
            rgba(241,137,0,.13),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #15191f 0%,
            #090d12 45%,
            #030507 100%
        );

    border-bottom:
        4px solid #f2a000;
}


/* Hero light effect */

.hero::before{
    content:"";

    position:absolute;

    width:450px;
    height:450px;

    top:-250px;
    left:-200px;

    background:
        radial-gradient(
            circle,
            rgba(255,203,27,.16),
            transparent 65%
        );

    pointer-events:none;
}


.hero::after{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-220px;
    bottom:-250px;

    background:
        radial-gradient(
            circle,
            rgba(255,153,0,.12),
            transparent 65%
        );

    pointer-events:none;
}


.hero-content{
    position:relative;

    z-index:2;

    max-width:950px;

    margin:auto;
}


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

.hero-logo{
    width:120px;
    height:120px;

    object-fit:contain;

    border-radius:27px;

    margin-bottom:22px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.40),

        0 0 0 4px
        rgba(255,194,0,.18);
}


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

.eyebrow{
    display:inline-block;

    margin:
        0 0
        13px;

    padding:
        6px 14px;

    border:
        1px solid rgba(255,202,40,.35);

    border-radius:30px;

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

    color:#ffd84d;

    font-size:12px !important;

    font-weight:800;

    letter-spacing:2px;
}


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

.hero h1{
    font-size:48px;

    line-height:1.18;

    margin:
        8px 0
        22px;

    font-weight:900;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #fff2b0 45%,
            #ffb300 100%
        );

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;
}


.hero p{
    font-size:18px;

    max-width:820px;

    margin:
        0 auto
        32px;

    color:#d9dee6;
}


.hero p strong{
    color:#ffd45c;
}


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

.hero-buttons{
    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;
}


.primary-btn,
.secondary-btn{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:52px;

    padding:
        14px 27px;

    border-radius:11px;

    text-decoration:none;

    font-weight:800;

    font-size:15px;
}


/* Main gold button */

.primary-btn{
    color:#18120a;

    background:
        linear-gradient(
            135deg,
            #ffe15a,
            #ffb000 55%,
            #ef8500
        );

    border:
        1px solid #ffc400;

    box-shadow:
        0 10px 25px
        rgba(245,158,11,.24);
}


.primary-btn:hover{
    transform:translateY(-2px);

    box-shadow:
        0 14px 30px
        rgba(245,158,11,.35);
}


/* Secondary button */

.secondary-btn{
    color:#fff4c4;

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

    border:
        1px solid
        rgba(255,191,0,.55);
}


.secondary-btn:hover{
    background:
        rgba(255,184,0,.10);

    border-color:#ffc400;

    transform:translateY(-2px);
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.container{
    max-width:1250px;

    margin:auto;

    padding:
        40px 18px;
}


/* =========================================================
   CARD
========================================================= */

.card{
    position:relative;

    background:#ffffff;

    border:
        1px solid #e3e7ec;

    border-radius:18px;

    padding:32px;

    margin-bottom:28px;

    box-shadow:
        0 5px 22px
        rgba(15,23,42,.055);

    overflow:hidden;
}


.card::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:4px;
    height:100%;

    background:
        linear-gradient(
            180deg,
            #ffd21a,
            #ee8900
        );

    opacity:.85;
}


.card h2{
    font-size:30px;

    color:#17202c;

    margin:
        0 0
        22px;

    padding-bottom:13px;

    border-bottom:
        2px solid #f0f1f3;

    line-height:1.3;
}


.card h2::first-letter{
    color:#e28a00;
}


.card h3{
    color:#a76100;
}


.card p,
.card li{
    font-size:17px;

    color:#405164;
}


.card p{
    margin-bottom:15px;
}


.card ol,
.card ul{
    padding-left:25px;
}


.card li{
    margin-bottom:8px;
}


/* =========================================================
   TABLE OF CONTENTS
========================================================= */

.toc{
    display:grid;

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

    gap:
        4px 25px;
}


.toc a{
    position:relative;

    text-decoration:none;

    color:#425466;

    font-size:16px;

    font-weight:600;

    padding:
        7px 0
        7px 20px;

    border-bottom:
        1px solid #f0f2f4;
}


.toc a::before{
    content:"›";

    position:absolute;

    left:2px;

    color:#e18a00;

    font-weight:900;

    font-size:20px;
}


.toc a:hover{
    color:#c16c00;

    padding-left:24px;
}


/* =========================================================
   REFER / INVITE CODE
========================================================= */

.invite-box{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:
        21px 25px;

    border:
        1px dashed #e5a200;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #fffdf4,
            #fff7df
        );

    box-shadow:
        inset 0 0 20px
        rgba(245,158,11,.06);
}


.invite-box span{
    display:block;

    font-size:12px;

    color:#8a7550;

    font-weight:800;

    letter-spacing:1px;
}


.invite-box strong{
    display:block;

    margin-top:3px;

    font-size:28px;

    letter-spacing:3px;

    color:#d77a00;
}


.invite-box button{
    border:0;

    background:
        linear-gradient(
            135deg,
            #ffc928,
            #ec8800
        );

    color:#17120a;

    padding:
        12px 22px;

    border-radius:9px;

    font-weight:900;

    cursor:pointer;

    box-shadow:
        0 6px 15px
        rgba(239,142,0,.20);
}


.invite-box button:hover{
    transform:translateY(-2px);

    box-shadow:
        0 9px 20px
        rgba(239,142,0,.30);
}


.small-note{
    font-size:14px !important;

    color:#748294 !important;
}


/* =========================================================
   DOWNLOAD BUTTON
========================================================= */

.download-btn{
    display:block;

    max-width:420px;

    margin:
        27px auto;

    padding:
        16px;

    text-align:center;

    text-decoration:none;

    color:#17120a;

    font-weight:900;

    font-size:18px;

    border-radius:12px;

    background:
        linear-gradient(
            100deg,
            #ffd83d,
            #f5a000,
            #e87900
        );

    border:
        1px solid #efa000;

    box-shadow:
        0 10px 25px
        rgba(226,132,0,.22);
}


.download-btn:hover{
    transform:translateY(-2px);

    box-shadow:
        0 14px 30px
        rgba(226,132,0,.32);
}


/* =========================================================
   APP INFO
========================================================= */

.app-info{
    display:grid;

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

    gap:15px;

    margin-top:25px;
}


.app-info div{
    padding:18px;

    background:
        linear-gradient(
            135deg,
            #fffdf8,
            #f9fafb
        );

    border:
        1px solid #e4e7eb;

    border-radius:12px;

    text-align:center;
}


.app-info div:hover{
    border-color:#efbd46;

    box-shadow:
        0 5px 15px
        rgba(222,142,0,.08);

    transform:translateY(-2px);
}


.app-info span{
    display:block;

    font-size:11px;

    color:#7b8795;

    font-weight:700;

    letter-spacing:.5px;
}


.app-info strong{
    display:block;

    margin-top:3px;

    font-size:16px;

    color:#243142;
}


/* =========================================================
   FEATURES
   Matches HTML: .feature-grid / .feature-box
========================================================= */

.feature-grid{
    display:grid;

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

    gap:20px;
}


.feature-box{
    position:relative;

    padding:25px;

    border:
        1px solid #e0e5ea;

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fffdf8
        );

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.feature-box::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:4px;
    height:100%;

    border-radius:
        15px 0 0 15px;

    background:
        linear-gradient(
            180deg,
            #ffd21a,
            #ed8500
        );
}


.feature-box:hover{
    transform:translateY(-4px);

    border-color:#efc75d;

    box-shadow:
        0 10px 25px
        rgba(160,100,0,.10);
}


.feature-box h3{
    margin:
        5px 0 9px;

    color:#b76b00;

    font-size:20px;
}


.feature-box p{
    margin-bottom:0;
}


/* =========================================================
   OLD FEATURE CLASS SUPPORT
========================================================= */

.features{
    display:grid;

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

    gap:20px;
}


.feature{
    padding:25px;

    border:
        1px solid #dfe5ea;

    border-radius:15px;

    background:#fff;
}


.feature-icon{
    font-size:30px;
}


.feature h3{
    color:#b96b00;

    margin:
        8px 0;
}


/* =========================================================
   TABLE
========================================================= */

table{
    width:100%;

    border-collapse:collapse;

    overflow:hidden;

    border-radius:10px;
}


th,
td{
    border:
        1px solid #e0e5ea;

    padding:15px;

    text-align:left;
}


th{
    background:
        linear-gradient(
            90deg,
            #fff8df,
            #fffdf5
        );

    color:#704800;

    font-weight:800;
}


td{
    color:#455465;

    background:#fff;
}


tr:hover td{
    background:#fffdf7;
}


/* =========================================================
   SCREENSHOTS
========================================================= */

.screenshots{
    display:grid;

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

    gap:20px;
}


.screenshots div{
    border:
        1px solid #dce3e9;

    border-radius:14px;

    overflow:hidden;

    text-align:center;

    background:#fff;
}


.screenshots img{
    width:100%;

    height:400px;

    object-fit:contain;

    background:#0a0c10;

    display:block;
}


.screenshots p{
    font-weight:800;

    font-size:15px;

    color:#344054;

    padding:
        9px 10px;
}


/* =========================================================
   NOTICE
========================================================= */

.notice{
    padding:20px;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #fffdf7
        );

    border-left:
        5px solid #efa000;
}


.notice strong{
    color:#a45f00;
}


.notice p{
    margin-top:7px;
}


/* =========================================================
   WARNING
========================================================= */

.warning{
    padding:20px;

    border-radius:12px;

    background:#fff8ed;

    border-left:
        5px solid #f09a28;
}


.warning strong{
    color:#a85e00;
}


/* =========================================================
   FAQ
========================================================= */

.faq-item{
    border:
        1px solid #e1e5ea;

    border-radius:12px;

    margin:
        12px 0;

    padding:
        18px 20px;

    background:#fff;
}


.faq-item:hover{
    border-color:#e9bc4a;

    background:#fffdf8;
}


.faq-item h3{
    margin:
        0 0 8px;

    color:#9c5b00;

    font-size:19px;
}


.faq-item p{
    margin-bottom:0;
}


/* =========================================================
   DETAILS / SUMMARY
========================================================= */

details{
    border:
        1px solid #dce3e9;

    border-radius:12px;

    margin:
        12px 0;

    padding:
        0 18px;

    background:#fff;
}


summary{
    cursor:pointer;

    font-weight:800;

    padding:
        17px 0;

    color:#374151;
}


details[open]{
    border-color:#e5b63d;

    background:#fffdf8;
}


details p{
    padding-bottom:12px;
}


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

.text-link{
    display:inline-block;

    margin-top:10px;

    color:#b56700;

    font-weight:800;

    text-decoration:none;
}


.text-link:hover{
    color:#e18100;

    text-decoration:underline;
}


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

.footer{
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(240,158,0,.08),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #080b0f,
            #030507
        );

    color:#9eacb9;

    padding:
        55px 20px
        25px;

    border-top:
        3px solid #c97b00;
}


.footer-inner{
    max-width:1100px;

    margin:auto;

    display:grid;

    grid-template-columns:
        1.5fr 1fr;

    gap:60px;
}


.footer-brand h2{
    margin:
        0 0 12px;

    color:#ffd34a;

    font-size:28px;
}


.footer-brand p{
    max-width:550px;

    color:#94a3b3;

    margin:0;
}


.footer-links h3{
    color:#fff;

    margin:
        0 0 15px;
}


.footer-links a{
    display:block;

    color:#9eacb9;

    text-decoration:none;

    margin:
        7px 0;
}


.footer-links a:hover{
    color:#ffc72c;

    padding-left:4px;
}


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

.footer-bottom{
    max-width:1100px;

    margin:
        35px auto 0;

    padding-top:22px;

    border-top:
        1px solid #252b32;

    text-align:center;

    color:#778493;

    font-size:14px;
}


/* =========================================================
   OLD COPYRIGHT CLASS SUPPORT
========================================================= */

.copyright{
    max-width:1000px;

    margin:
        35px auto 0;

    padding-top:22px;

    border-top:
        1px solid #26333e;

    text-align:center;
}


/* =========================================================
   FOCUS ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible,
summary:focus-visible{
    outline:
        3px solid
        rgba(245,158,11,.45);

    outline-offset:3px;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:992px){

    .header-inner{
        height:72px;
    }


    nav{
        gap:16px;
    }


    nav a{
        font-size:14px;
    }


    .hero h1{
        font-size:42px;
    }


    .app-info{
        grid-template-columns:
            repeat(2,1fr);
    }


    .screenshots{
        grid-template-columns:
            repeat(2,1fr);
    }


    .footer-inner{
        grid-template-columns:
            1fr 1fr;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:760px){

    html{
        scroll-padding-top:70px;
    }


    body{
        line-height:1.65;
    }


    /* HEADER */

    .header-inner{
        height:65px;

        padding:
            0 14px;
    }


    .logo{
        font-size:21px;

        gap:9px;
    }


    .logo img{
        width:40px;
        height:40px;

        border-radius:10px;
    }


    .menu-btn{
        display:flex;

        align-items:center;

        justify-content:center;
    }


    nav{
        display:none;

        position:absolute;

        left:10px;
        right:10px;

        top:70px;

        background:#ffffff;

        padding:
            10px 18px;

        flex-direction:column;

        gap:0;

        border:
            1px solid #e2e6ea;

        border-radius:13px;

        box-shadow:
            0 12px 35px
            rgba(15,23,42,.15);
    }


    nav.active{
        display:flex;
    }


    nav a{
        padding:
            12px 0;

        border-bottom:
            1px solid #f0f1f3;
    }


    nav a:last-child{
        border-bottom:0;
    }


    nav a::after{
        display:none;
    }


    /* HERO */

    .hero{
        padding:
            48px 16px
            58px;
    }


    .hero-logo{
        width:92px;
        height:92px;

        border-radius:22px;
    }


    .hero h1{
        font-size:34px;

        line-height:1.22;
    }


    .hero p{
        font-size:16px;

        line-height:1.7;
    }


    .eyebrow{
        font-size:10px !important;

        letter-spacing:1.4px;
    }


    .hero-buttons{
        flex-direction:column;

        width:100%;
    }


    .primary-btn,
    .secondary-btn{
        width:100%;

        max-width:390px;
    }


    /* CONTENT */

    .container{
        padding:
            25px 13px;
    }


    .card{
        padding:
            24px 17px;

        border-radius:15px;

        margin-bottom:20px;
    }


    .card h2{
        font-size:25px;

        margin-bottom:17px;
    }


    .card p,
    .card li{
        font-size:16px;
    }


    /* TOC */

    .toc{
        grid-template-columns:1fr;

        gap:0;
    }


    /* REFER BOX */

    .invite-box{
        align-items:
            flex-start;

        flex-direction:column;

        padding:
            18px;
    }


    .invite-box strong{
        font-size:24px;

        word-break:break-word;
    }


    .invite-box button{
        width:100%;

        min-height:46px;
    }


    /* APP INFO */

    .app-info{
        grid-template-columns:1fr;

        gap:10px;
    }


    /* FEATURES */

    .feature-grid,
    .features{
        grid-template-columns:1fr;
    }


    .feature-box{
        padding:22px;
    }


    /* SCREENSHOTS */

    .screenshots{
        grid-template-columns:1fr;
    }


    .screenshots img{
        height:450px;
    }


    /* TABLE */

    table{
        display:block;

        overflow-x:auto;

        white-space:nowrap;
    }


    /* FOOTER */

    .footer{
        padding:
            42px 18px
            22px;
    }


    .footer-inner{
        grid-template-columns:1fr;

        gap:30px;
    }


    .footer-brand h2{
        font-size:25px;
    }


    .footer-bottom{
        margin-top:28px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:420px){

    .hero h1{
        font-size:29px;
    }


    .hero-logo{
        width:82px;
        height:82px;
    }


    .card{
        padding:
            21px 15px;
    }


    .card h2{
        font-size:23px;
    }


    .invite-box strong{
        font-size:21px;

        letter-spacing:2px;
    }


    .download-btn{
        font-size:16px;
    }

}