/* =========================================
   Crypto Vault Landing v1.0
   Premium Bitcoin Wallet Design
========================================= */


:root {

    --bg:
    #07090d;

    --card:
    rgba(255,255,255,0.06);

    --card-border:
    rgba(255,255,255,0.12);

    --text:
    #f5f7fa;

    --muted:
    #9aa4b2;

    --bitcoin:
    #f7931a;

    --green:
    #6ee7b7;

    --danger:
    #ff7b7b;

}



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


* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

    font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

    background:
    radial-gradient(
        circle at top,
        #171b25 0%,
        var(--bg) 45%
    );

    color:var(--text);

    line-height:1.6;

}




a {

    text-decoration:none;

    color:inherit;

}



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


.navbar {

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:
    30px 8%;

}



.logo {

    font-size:22px;

    font-weight:700;

    display:flex;

    align-items:center;

    gap:12px;

}



.logo-icon {

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    border-radius:12px;

    background:
    linear-gradient(
        135deg,
        #f7931a,
        #ffb347
    );

    color:#111;

    font-weight:900;

}



nav {

    display:flex;

    gap:35px;

    color:var(--muted);

}



nav a:hover {

    color:white;

}



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


.hero {

    min-height:90vh;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:
    40px 8%;

    gap:60px;

}



.hero-content {

    max-width:650px;

}



.badge {

    display:inline-block;

    padding:
    8px 18px;

    border-radius:50px;

    background:
    rgba(247,147,26,.12);

    border:
    1px solid rgba(247,147,26,.3);

    color:
    #ffb15c;

    margin-bottom:30px;

}



h1 {

    font-size:
    clamp(45px,6vw,78px);

    line-height:1.05;

    letter-spacing:-3px;

}



h1 span {

    background:
    linear-gradient(
        90deg,
        #f7931a,
        #ffd27d
    );

    -webkit-background-clip:text;

    color:transparent;

}



.hero p {

    margin-top:30px;

    color:var(--muted);

    font-size:20px;

    max-width:550px;

}



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


.buttons {

    display:flex;

    gap:20px;

    margin-top:40px;

}



.btn {

    padding:
    15px 28px;

    border-radius:14px;

    font-weight:600;

    transition:.3s;

}



.primary {

    background:
    var(--bitcoin);

    color:#111;

}



.secondary {

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

}



.btn:hover {

    transform:
    translateY(-3px);

}



/* =========================
 SECURITY TAGS
========================= */


.security-tags {

    display:flex;

    gap:15px;

    margin-top:40px;

    flex-wrap:wrap;

}



.security-tags div {

    background:
    var(--card);

    border:
    1px solid var(--card-border);

    backdrop-filter:
    blur(20px);

    padding:
    10px 16px;

    border-radius:50px;

    color:#dce3ea;

}




/* =========================
 PHONE MOCKUP
========================= */


/* =========================
   PHONE MOCKUP
========================= */

.phone {
    position: relative;

    width: min(430px, 32vw);

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

    flex-shrink: 0;

    perspective: 1200px;

    filter:
        drop-shadow(0 35px 55px rgba(0, 0, 0, .50))
        drop-shadow(0 0 55px rgba(247, 147, 26, .10));
}


/* Корпус телефона */

.phone-mockup {
    position: relative;

    width: 82%;

    padding: 8px;

    border-radius: 42px;

    background:
        linear-gradient(
            145deg,
            #4b4d52 0%,
            #17191d 18%,
            #07080a 55%,
            #292b30 100%
        );

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

    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, .9),
        inset 0 1px 1px rgba(255, 255, 255, .22),
        0 30px 80px rgba(0, 0, 0, .55),
        0 0 60px rgba(247, 147, 26, .06);

    transform:
        rotateY(-5deg)
        rotateX(1deg)
        rotateZ(1deg);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


/* Лёгкий premium hover */

.phone-mockup:hover {
    transform:
        rotateY(-1deg)
        rotateX(0deg)
        rotateZ(0deg)
        translateY(-6px);

    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, .9),
        inset 0 1px 1px rgba(255, 255, 255, .22),
        0 40px 90px rgba(0, 0, 0, .6),
        0 0 70px rgba(247, 147, 26, .10);
}


/* Экран */

.phone-screen {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 34px;

    background: #000;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .05);
}


/* Скриншот приложения */

.phone-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;

    user-select: none;
    -webkit-user-drag: none;

    pointer-events: none;
}


/* Динамик / камера сверху */

.phone-speaker {
    position: absolute;

    top: 10px;
    left: 50%;

    transform: translateX(-50%);

    width: 72px;
    height: 20px;

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            #050506,
            #101114
        );

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

    box-shadow:
        0 1px 4px rgba(0, 0, 0, .8);
}


/* Маленькая камера */

.phone-speaker::after {
    content: "";

    position: absolute;

    top: 50%;
    right: 8px;

    width: 6px;
    height: 6px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: #101820;

    box-shadow:
        inset 0 0 2px rgba(80, 130, 180, .7);
}


/* =========================
   SIDE BUTTONS
========================= */

.phone-button {
    position: absolute;

    display: block;

    background:
        linear-gradient(
            180deg,
            #36383d,
            #111216
        );

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

    z-index: -1;
}


/* Volume + */

.phone-button-volume-up {
    left: -4px;
    top: 105px;

    width: 4px;
    height: 48px;

    border-radius: 4px 0 0 4px;
}


/* Volume - */

.phone-button-volume-down {
    left: -4px;
    top: 165px;

    width: 4px;
    height: 48px;

    border-radius: 4px 0 0 4px;
}


/* Power */

.phone-button-power {
    right: -4px;
    top: 135px;

    width: 4px;
    height: 75px;

    border-radius: 0 4px 4px 0;
}


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

@media (max-width: 900px) {

    .phone {
        width: min(390px, 82vw);
        margin-top: 25px;
    }

    .phone-mockup {
        width: 82%;

        transform: none;
    }

    .phone-mockup:hover {
        transform: translateY(-4px);
    }

}


@media (max-width: 600px) {

    .phone {
        width: min(350px, 88vw);
    }

    .phone-mockup {
        width: 84%;

        padding: 7px;

        border-radius: 37px;
    }

    .phone-screen {
        border-radius: 30px;
    }

    .phone-speaker {
        width: 62px;
        height: 18px;
        top: 9px;
    }

}



.phone-header {

    color:
    var(--muted);

    margin-bottom:50px;

}



.balance {

    font-size:42px;

    font-weight:700;

}



.balance span {

    display:block;

    color:
    var(--bitcoin);

    font-size:28px;

}



.usd {

    color:
    var(--muted);

    margin-top:10px;

}



.wallet-actions {

    display:flex;

    gap:15px;

    margin-top:60px;

}



.wallet-actions button {

    flex:1;

    padding:14px;

    border:none;

    border-radius:15px;

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

    color:white;

}



.network {

    margin-top:50px;

    color:
    var(--green);

}



/* =========================
 SECTIONS
========================= */


.section {

    padding:
    100px 8%;

}



.section h2 {

    text-align:center;

    font-size:42px;

    margin-bottom:60px;

}




.cards {

    display:grid;

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

    gap:25px;

}



.card {

    background:
    var(--card);

    border:
    1px solid var(--card-border);

    border-radius:25px;

    padding:35px;

    backdrop-filter:
    blur(20px);

}



.card h3 {

    margin-bottom:15px;

}



.card p {

    color:
    var(--muted);

}




/* =========================
 STEPS
========================= */


.steps {

    display:grid;

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

    gap:30px;

}



.step {

    text-align:center;

}



.step span {

    color:
    var(--bitcoin);

    font-size:45px;

    font-weight:800;

}



.step p {

    color:
    var(--muted);

}



/* =========================
 SECURITY
========================= */


.security-grid {

    display:grid;

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

    gap:30px;

}



.security-box {

    background:
    var(--card);

    border:
    1px solid var(--card-border);

    border-radius:30px;

    padding:40px;

}



.security-box li {

    list-style:none;

    margin:15px 0;

}



.danger li {

    color:
    #ffb0b0;

}



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


.faq {

    max-width:800px;

    margin:auto;

}



.faq h3 {

    margin-top:30px;

}



.faq p {

    color:
    var(--muted);

}



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


.warning {

    margin:
    50px 8%;

    padding:40px;

    border-radius:30px;

    background:

    rgba(247,147,26,.08);


    border:
    1px solid rgba(247,147,26,.2);

    text-align:center;

}



.warning p {

    color:
    var(--muted);

}



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


footer {

    padding:
    60px 8%;

    text-align:center;

    color:
    var(--muted);

}



footer h2 {

    color:white;

}



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


@media(max-width:900px){


.navbar {

    padding:
    25px;

}




.hero {

    flex-direction:column;

    text-align:center;

}


.hero-content {

    max-width:100%;

}


.buttons {

    justify-content:center;

}


.cards {

    grid-template-columns:
    1fr;

}


.steps {

    grid-template-columns:
    1fr;

}


.security-grid {

    grid-template-columns:
    1fr;

}


.phone {
    width: min(420px, 80vw);
    height: auto;
    margin-top: 20px;
}


}



/* =========================
   JS Animations
========================= */


.hidden {

    opacity:0;

    transform:
    translateY(40px);

    transition:
    all .8s ease;

}



.visible {

    opacity:1;

    transform:
    translateY(0);

}



.phone {

    transition:
    transform .2s ease;

}

/* =========================
   Screenshots
========================= */


.section-subtitle {

    text-align:center;

    color:
    var(--muted);

    margin-top:-35px;

    margin-bottom:60px;

}



.screenshots-grid {

    display:grid;

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

    gap:25px;

}



.screenshot-card {


    background:
    var(--card);


    border:
    1px solid var(--card-border);


    border-radius:30px;


    padding:25px;


    backdrop-filter:
    blur(20px);


    transition:
    transform .3s ease,
    border .3s ease;


}



.screenshot-card:hover {


    transform:
    translateY(-10px);


    border:
    1px solid rgba(247,147,26,.5);


}



.screenshot-card img {




    height:430px;


    object-fit:cover;


    border-radius:22px;


    background:#000;


}



.screenshot-card h3 {


    margin-top:25px;


}



.screenshot-card p {


    color:
    var(--muted);


    margin-top:10px;


}





@media(max-width:1100px){


.screenshots-grid {

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

}


}




@media(max-width:600px){


.screenshots-grid {

    grid-template-columns:
    1fr;

}


.screenshot-card img {

    height:500px;

}


}

/* =========================
   Support Development
========================= */


.support {

    padding-top:80px;

}



.support-card {


    display:flex;


    align-items:center;


    gap:50px;


    padding:50px;


    border-radius:35px;


    background:

    linear-gradient(
        135deg,
        rgba(247,147,26,.15),
        rgba(255,255,255,.05)
    );


    border:

    1px solid rgba(247,147,26,.25);


    backdrop-filter:
    blur(25px);


}



.support-logo img {


    width:160px;


    height:160px;


    border-radius:35px;


    object-fit:cover;


    box-shadow:

    0 0 50px rgba(247,147,26,.25);


}



.support-content {


    max-width:650px;


}



.support-content h2 {


    text-align:left;


    margin-bottom:20px;


}



.support-content p {


    color:
    var(--muted);


    font-size:18px;


}



.support-buttons {


    margin-top:30px;


}





@media(max-width:800px){


.support-card {


    flex-direction:column;


    text-align:center;


}



.support-content h2 {


    text-align:center;


}



}


/* =========================
   Technology Section
========================= */


.tech-grid {


display:grid;


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


gap:25px;


}



.tech-card {


background:
var(--card);


border:
1px solid var(--card-border);


border-radius:30px;


padding:35px;


backdrop-filter:
blur(20px);


}



.tech-card h3 {


margin-bottom:20px;


}



.tech-card p {


color:
var(--muted);


}



.code-box {


margin-top:25px;


padding:20px;


border-radius:20px;


background:

rgba(0,0,0,.35);


color:

#ffb15c;


font-family:

monospace;


line-height:2;


}



.address {


margin:25px 0;


padding:15px;


border-radius:15px;


background:

rgba(247,147,26,.12);


color:

#ffb15c;


font-family:

monospace;


font-size:22px;


}



.tech-card ul {


margin-top:20px;


}



.tech-card li {


list-style:none;


margin:12px 0;


color:#dbe4ef;


}




@media(max-width:1100px){


.tech-grid {


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


}


}



@media(max-width:600px){


.tech-grid {


grid-template-columns:
1fr;


}


}

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


.security-hero-grid {


display:grid;


grid-template-columns:
1fr 1fr;


align-items:center;


gap:80px;


}





.security-logo-card {


position:relative;


height:520px;


display:flex;


flex-direction:column;


justify-content:center;


align-items:center;



background:

rgba(255,255,255,0.04);



border:

1px solid rgba(255,255,255,.12);



border-radius:40px;



backdrop-filter:

blur(25px);



overflow:hidden;


}



.logo-glow {


position:absolute;


width:250px;

height:250px;



background:

radial-gradient(

circle,

rgba(247,147,26,.35),

transparent 70%

);



filter:blur(40px);


}




.security-logo {


position:relative;


width:180px;


height:180px;


object-fit:contain;



z-index:2;


}



.security-logo-card h3 {


font-size:32px;


margin-top:25px;


z-index:2;


}



.security-tags {


display:flex;


flex-wrap:wrap;


justify-content:center;


gap:12px;


margin-top:20px;


z-index:2;


}



.security-tags span {


padding:

10px 18px;



border-radius:30px;



background:

rgba(247,147,26,.12);



border:

1px solid rgba(247,147,26,.3);



color:#ffb13b;


}



@media(max-width:900px){


.security-hero-grid {


grid-template-columns:1fr;


}






}

/* =========================
   Contact Section
========================= */

.contact-section {
    position: relative;
}

.contact-header {
    max-width: 720px;
    margin: 0 auto 50px;
    text-align: center;
}

.contact-header .badge {
    display: inline-flex;
    margin-bottom: 24px;
}

.contact-subtitle {
    margin: 18px auto 0;
}


.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}


.contact-card {
    display: flex;
    align-items: center;
    gap: 22px;

    min-height: 150px;
    padding: 30px;

    background: var(--card);

    border:
        1px solid var(--card-border);

    border-radius: 28px;

    color: inherit;
    text-decoration: none;

    backdrop-filter: blur(20px);

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


.contact-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(247, 147, 26, .45);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .25);
}


.contact-icon {
    flex-shrink: 0;

    width: 64px;
    height: 64px;

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

    border-radius: 20px;

    background:
        rgba(247, 147, 26, .12);

    border:
        1px solid rgba(247, 147, 26, .25);

    color: #ff9f1a;

    font-size: 26px;
}


.contact-info {
    display: flex;
    flex-direction: column;
    gap: 6px;

    min-width: 0;
}


.contact-label {
    color: var(--muted);
    font-size: 14px;
}


.contact-info strong {
    color: #fff;

    font-size: 19px;
    font-weight: 600;

    overflow-wrap: anywhere;
}


.contact-action {
    margin-top: 5px;

    color: #ff9f1a;

    font-size: 14px;
}


.contact-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    max-width: 760px;

    margin: 28px auto 0;
    padding: 17px 22px;

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

    border-radius: 18px;

    background:
        rgba(255, 255, 255, .025);
}


.contact-security-note p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.6;
}


@media (max-width: 760px) {

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

    .contact-card {
        min-height: 130px;
        padding: 24px;
    }

    .contact-security-note {
        align-items: flex-start;
    }

}

/* =========================================
   Crypto Vault Screenshot Lightbox
========================================= */

.screenshot-card img {
    cursor: zoom-in;

    transition:
        transform .3s ease,
        filter .3s ease;
}


.screenshot-card img:hover {
    transform: scale(1.015);
}


/* Overlay */

.screenshot-lightbox {
    position: fixed;
    inset: 0;

    z-index: 2000;

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

    padding: 32px;

    background:
        rgba(5, 7, 10, .92);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.screenshot-lightbox.active {
    opacity: 1;
    visibility: visible;
}


/* Screenshot container */

.screenshot-lightbox-content {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    max-width: 95vw;
    max-height: 92vh;

    transform: scale(.94);

    transition:
        transform .3s ease;
}


.screenshot-lightbox.active
.screenshot-lightbox-content {
    transform: scale(1);
}


/* Enlarged screenshot */

.screenshot-lightbox-content img {
    display: block;

    width: auto;
    height: auto;

    max-width: 92vw;
    max-height: 82vh;

    object-fit: contain;

    border-radius: 24px;

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

    box-shadow:
        0 30px 100px rgba(0, 0, 0, .65);
}


/* Caption */

.screenshot-lightbox-content p {
    margin-top: 18px;

    color: rgba(255, 255, 255, .72);

    font-size: 15px;
    text-align: center;
}


/* Close button */

.screenshot-lightbox-close {
    position: fixed;

    top: 24px;
    right: 28px;

    z-index: 2001;

    width: 46px;
    height: 46px;

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

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

    border-radius: 50%;

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

    color: #fff;

    font-size: 30px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

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


.screenshot-lightbox-close:hover {
    background:
        rgba(247, 147, 26, .16);

    border-color:
        rgba(247, 147, 26, .45);

    transform: rotate(90deg);
}


/* Mobile */

@media (max-width: 600px) {

    .screenshot-lightbox {
        padding: 18px;
    }

    .screenshot-lightbox-content img {
        max-width: 94vw;
        max-height: 78vh;

        border-radius: 18px;
    }

    .screenshot-lightbox-close {
        top: 16px;
        right: 16px;
    }
	
	.phone {
        width: min(360px, 88vw);
        height: auto;
        margin-top: 10px;
    }

}

/* =========================================
   Supported Bitcoin Address Formats
========================================= */

.address-format-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;

    margin-top: 42px;
}


.address-format-card {
    position: relative;

    padding: 30px;

    border-radius: 26px;

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

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

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


.address-format-card.supported:hover {
    transform: translateY(-4px);

    border-color:
        rgba(247, 147, 26, .35);

    background:
        rgba(247, 147, 26, .035);
}


.address-format-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 24px;
}


.address-format-icon {
    width: 50px;
    height: 50px;

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

    border-radius: 16px;

    background:
        rgba(247, 147, 26, .13);

    border:
        1px solid rgba(247, 147, 26, .25);

    color: #f7931a;

    font-size: 24px;
    font-weight: 700;
}


.address-format-icon.muted {
    background:
        rgba(255, 255, 255, .04);

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

    color:
        rgba(255, 255, 255, .35);
}


.address-status {
    padding: 7px 12px;

    border-radius: 100px;

    background:
        rgba(70, 220, 150, .09);

    border:
        1px solid rgba(70, 220, 150, .18);

    color: #63dda5;

    font-size: 12px;
    font-weight: 600;
}


.unavailable-status {
    background:
        rgba(255, 255, 255, .04);

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

    color:
        rgba(255, 255, 255, .42);
}


.address-format-card h3 {
    margin: 0;

    color: #fff;

    font-size: 23px;
}


.address-standard {
    margin: 6px 0 20px;

    color:
        rgba(255, 255, 255, .45);

    font-size: 14px;
}


.address-example {
    display: inline-flex;

    margin-bottom: 20px;
    padding: 10px 16px;

    border-radius: 12px;

    background:
        rgba(247, 147, 26, .09);

    color: #ff9f1a;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 17px;
    font-weight: 600;
}


.muted-example {
    background:
        rgba(255, 255, 255, .035);

    color:
        rgba(255, 255, 255, .4);
}


.address-format-card > p:last-child {
    margin-bottom: 0;

    color:
        rgba(255, 255, 255, .58);

    line-height: 1.65;
}


.address-format-card.unavailable {
    opacity: .68;
}


.address-format-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    margin-top: 24px;
    padding: 18px 20px;

    border-radius: 18px;

    background:
        rgba(247, 147, 26, .045);

    border:
        1px solid rgba(247, 147, 26, .13);
}


.address-format-note > span {
    color: #f7931a;
    font-weight: 700;
}


.address-format-note p {
    margin: 0;

    color:
        rgba(255, 255, 255, .58);

    font-size: 14px;
    line-height: 1.65;
}


.address-format-note strong {
    color: #fff;
}


@media (max-width: 760px) {

    .address-format-grid {
        grid-template-columns: 1fr;
    }

    .address-format-card {
        padding: 24px;
    }

}

/* =========================================
   Custom Scrollbar
========================================= */

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #f7931a #0d1016;
}

/* Chrome / Edge / Safari */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #0d1016;
}

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

    border-radius: 10px;

    border: 2px solid #0d1016;
}

::-webkit-scrollbar-thumb:hover {
    background: #ffad42;
}

/* =========================================
   Support Button — Responsive
========================================= */

.support-buttons {
    width: 100%;
}

.support-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    max-width: 100%;
    min-width: 0;

    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}


/* Mobile */
@media (max-width: 600px) {

    .support-buttons {
        width: 100%;
    }

    .support-buttons .btn {
        width: 100%;

        padding: 14px 16px;

        font-size: 14px;
        line-height: 1.35;

        border-radius: 12px;
    }

}

@media (max-width: 380px) {

    .support-buttons .btn {
        padding: 13px 12px;
        font-size: 13px;
    }

}

/* =========================================
   Mobile responsive headings
========================================= */

.section h2,
.warning h2 {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

@media (max-width: 600px) {

    .section {
        padding-left: 24px;
        padding-right: 24px;
    }

    .section h2,
    .warning h2 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(28px, 8vw, 34px);
        line-height: 1.05;
        letter-spacing: -0.5px;

        overflow-wrap: break-word;
        word-break: normal;
        hyphens: auto;
    }
}

@media (max-width: 600px) {

    h1 {
        font-size: clamp(36px, 10vw, 45px);
        line-height: 1.05;
        letter-spacing: -1.5px;

        max-width: 100%;
        overflow-wrap: break-word;
    }

}

/* =========================================
   Sticky Navbar + Mobile Burger
========================================= */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: rgba(7, 9, 13, 0.88);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

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


/* Burger hidden on desktop */

.menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;

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

    cursor: pointer;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;
}

.menu-toggle span {
    width: 20px;
    height: 2px;

    background: #fff;

    border-radius: 10px;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


/* =========================
   Mobile
========================= */

@media (max-width: 900px) {

    .navbar {
        position: sticky;
        top: 0;

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

        padding: 14px 18px;
    }

    .logo {
        margin: 0;
    }

    .menu-toggle {
        display: flex;
    }

    nav {
        position: absolute;

        top: calc(100% + 8px);
        left: 16px;
        right: 16px;

        display: flex;
        flex-direction: column;

        gap: 8px;

        padding: 12px;

        background: rgba(18, 22, 30, 0.96);

        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);

        border: 1px solid rgba(255,255,255,.10);
        border-radius: 18px;

        box-shadow:
            0 18px 50px rgba(0,0,0,.45);

        opacity: 0;
        visibility: hidden;

        transform: translateY(-8px);

        transition:
            opacity .22s ease,
            visibility .22s ease,
            transform .22s ease;
    }

    nav.active {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);
    }

    nav a {
        width: 100%;

        padding: 12px 14px;

        border-radius: 12px;

        color: var(--muted);

        background: transparent;

        transition:
            background .2s ease,
            color .2s ease;
    }

    nav a:hover {
        color: #fff;

        background:
            rgba(247,147,26,.08);
    }


    /* Burger -> X */

    .menu-toggle.active span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }
}


/* =========================================
   Unified Crypto Vault Icons
========================================= */

.ui-icon {
    width: 17px;
    height: 17px;

    flex: 0 0 auto;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* HERO security tags */

.security-tags div {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.security-tags .ui-icon {
    color: #aeb8c5;
}


/* Bitcoin icon in HERO */

.bitcoin-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 17px;
    height: 17px;

    color: #f7931a;

    font-size: 17px;
    font-weight: 800;
    line-height: 1;
}


/* Feature card titles */

.feature-title {
    display: flex;
    align-items: center;

    gap: 10px;
}


/* Icons inside feature cards */

.feature-icon {
    width: 20px;
    height: 20px;

    color: #f7931a;
}


/* No accounts */

.danger-title .feature-icon {
    color: #ff7b7b;
}


/* Bitcoin feature icon */

.bitcoin-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    color: #f7931a;

    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}


/* =========================================
   Technology section icons
========================================= */

.tech-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tech-icon {
    width: 20px;
    height: 20px;

    color: #f7931a;
}


.address-note-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 30px;
    height: 30px;

    color: #f7931a;

    border: 1px solid rgba(247, 147, 26, .22);
    border-radius: 9px;

    background: rgba(247, 147, 26, .08);
}

.address-note-icon .ui-icon {
    width: 17px;
    height: 17px;
}


.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.badge-icon {
    width: 16px;
    height: 16px;
    color: #f7931a;
}


.contact-security-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 30px;
    height: 30px;

    color: #f7931a;

    background: rgba(247, 147, 26, .08);
    border: 1px solid rgba(247, 147, 26, .22);
    border-radius: 9px;
}

.contact-security-icon .ui-icon {
    width: 17px;
    height: 17px;
}