/* ===========================================================
   DMA MIDDLE EAST
   style.css
   =========================================================== */

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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Inter","Cairo",sans-serif;
    background:#0B0C10;
    color:#fff;
    overflow-x:hidden;
    line-height:1.6;
    position:relative;
}

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

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:40px 40px;

    pointer-events:none;

    z-index:-18;

}

body::after{

    content:"";

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle at center,

    rgba(229,169,18,.04),

    transparent 70%);

    pointer-events:none;

    z-index:-2;

}

/* ===========================
   VARIABLES
=========================== */

:root{

--bg:#0B0C10;

--card:#12141C;

--gold:#E5A912;

--gold-hover:#C8920B;

--muted:#A0A5B5;

--border:#1F2330;

--glow:rgba(229,169,18,.40);

}

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

#cursorGlow{

position:fixed;

width:180px;

height:180px;

border-radius:50%;

background:radial-gradient(circle,

rgba(229,169,18,.25),

transparent 70%);

pointer-events:none;

z-index:9999;

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

transition:

width .25s,

height .25s,

opacity .3s;

mix-blend-mode:screen;

filter:blur(20px);

}

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

header{

position:sticky;

top:0;

z-index:500;

padding:18px 5%;

backdrop-filter:blur(14px);

background:rgba(10,12,16,.72);

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

}

nav{

display:flex;

align-items:center;

justify-content:space-between;

gap:40px;

}

.logo{

display:flex;

align-items:center;

gap:15px;

}

.logo-img{

    height:75px;
    width: auto;
    object-fit: contain;
}

/* Nav Actions Container */
.nav-actions {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* Social links container */
.social-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Social icon buttons - High Visibility */
/* Base Social Icon Buttons */
.social-btn {
    color: #ffffff; /* Bright white by default */
    background: rgba(255, 255, 255, 0.08); /* Semi-transparent container */
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* Common Hover State */
.social-btn:hover {
    color: #ffffff;
    transform: translateY(-2px);
}

/* Facebook - Official Blue */
.social-btn[aria-label="Facebook"]:hover {
    background: #1877F2;
    border-color: #1877F2;
    box-shadow: 0 0 15px rgba(24, 119, 242, 0.5);
}

/* Instagram - Brand Gradient */
.social-btn[aria-label="Instagram"]:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-color: #e6683c;
    box-shadow: 0 0 15px rgba(220, 39, 67, 0.5);
}

/* TikTok - Vibrant Cyan/Pink Dual Glow Effect */
.social-btn[aria-label="TikTok"]:hover {
    background: #000000;
    border-color: #25F4EE;
    color: #25F4EE;
    box-shadow: 0 0 15px rgba(37, 244, 238, 0.5), 0 0 10px rgba(254, 44, 85, 0.5);
}

/* Discord - Official Blurple */
.social-btn[aria-label="Discord"]:hover {
    background: #5865F2;
    border-color: #5865F2;
    box-shadow: 0 0 15px rgba(88, 101, 242, 0.5);
}

/* Hover state with glowing gold accent */
.social-btn:hover {
    color: #111111; /* Dark icon fill on hover */
    background: var(--gold); /* Switches background to brand gold */
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(229, 169, 18, 0.45); /* Glowing effect */
}

.logo-text{

font-size:23px;

font-weight:800;

letter-spacing:1px;

}

.logo-text span{

display:block;

font-size:12px;

color:var(--gold);

letter-spacing:4px;

text-shadow:0 0 10px var(--glow);

}

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

.nav-links{

display:flex;

list-style:none;

gap:34px;

}

.nav-links a{

color:#fff;

text-decoration:none;

font-weight:500;

transition:.3s;

position:relative;

}

.nav-links a:hover{

color:var(--gold);

}

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-7px;

width:0;

height:2px;

background:var(--gold);

transition:.35s;

}

.nav-links a:hover::after{

width:100%;

}

/* ===========================
   NAV ACTIONS
=========================== */

.nav-actions{

display:flex;

gap:15px;

align-items:center;

}

#languageToggle{

background:transparent;

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

color:var(--gold);

padding:11px 20px;

cursor:pointer;

border-radius:10px;

font-weight:700;

transition:.3s;

}

#languageToggle:hover{

background:var(--gold);

color:#111;

box-shadow:0 0 20px var(--glow);

}

.gold-btn,
.outline-btn,
.buy-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 28px;

border-radius:12px;

font-weight:700;

text-decoration:none;

cursor:pointer;

transition:.35s;

}

.gold-btn{

background:var(--gold);

color:#111;

border:none;

box-shadow:0 0 25px rgba(229,169,18,.35);

}

.gold-btn:hover{

background:var(--gold-hover);

transform:translateY(-3px);

box-shadow:0 0 35px rgba(229,169,18,.55);

}

.outline-btn{

background:transparent;

border:2px solid var(--gold);

color:var(--gold);

}

.outline-btn:hover{

background:var(--gold);

color:#111;

}

.buy-btn{

width:100%;

margin-top:20px;

background:transparent;

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

color:var(--gold);

}

.buy-btn:hover{

background:var(--gold);

color:#111;

}

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

.hero{

min-height:100vh;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

padding:100px 7%;

gap:70px;

}

.badge{

display:inline-block;

padding:10px 18px;

border:1px solid rgba(229,169,18,.45);

background:rgba(229,169,18,.08);

border-radius:999px;

color:var(--gold);

font-weight:700;

margin-bottom:25px;

}

.hero h1{

font-size:68px;

font-weight:900;

line-height:1.05;

margin-bottom:25px;

}
.hero strong{
    background: linear-gradient(90deg, #FFFFFF, #E5A912);

    /* Standard property */
    background-clip: text;

    /* WebKit support */
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;
}


.hero p{

font-size:18px;

max-width:640px;

color:var(--muted);

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}


/* ===========================
   HERO HARDWARE (LARGE HERO SCALE)
=========================== */

.hero-right {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1; /* Allows right hero column to expand dynamically */
}

.hardware-card {
    position: relative;
    width: 550px;               /* Expanded container width */
    height: 480px;              /* Expanded container height */
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: visible;          /* Prevents larger scale from clipping */
    
    animation: floatCard 5s ease-in-out infinite;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform .18s linear;
}

/* Scaled-up Floating Photo with Aura */
.hero-card-img {
    width: 100%;
    max-width: 600px;           /* Significantly larger max-width */
    height: auto;
    max-height: 480px;
    object-fit: contain;
    z-index: 5;
    
    /* Increased scale factor to 1.85 */
    transform: translateZ(35px) scale(1.85); 
    
    /* Integrated attached glow effect */
    filter: 
        drop-shadow(0 0 35px rgba(229, 169, 18, 0.60)) 
        drop-shadow(0 0 70px rgba(229, 169, 18, 0.35)) 
        drop-shadow(0 25px 35px rgba(0, 0, 0, 0.90));
}


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

.products{

padding:90px 7%;

}

.section-title{

margin-bottom:45px;

padding-left:20px;

border-left:5px solid var(--gold);

}

.section-title h2{

font-size:42px;

}

.product-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(350px,1fr));

gap:35px;

}

.product-card{

position:relative;

background:var(--card);

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

border-radius:22px;

padding:25px;

overflow:hidden;

transition:.35s;

}

.product-card::before{

content:"";

position:absolute;

top:-120%;

left:-100%;

width:200%;

height:70px;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.12),

transparent

);

transform:rotate(30deg);

transition:.6s;

}

.product-card:hover::before{

top:120%;

left:100%;

}

.product-card:hover{

transform:translateY(-12px);

border-color:var(--gold);

box-shadow:0 0 35px rgba(229,169,18,.18);

}





.image-box img {
    /* Maximized image display scale inside the container */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 16px;
    margin-bottom: 20px;
    object-fit: contain;
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    /* Subtle pop shadow for hardware depth */
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.6));
    transition: transform 0.35s ease, filter 0.35s ease;
}

/* Subtle Hover Zoom Effect on Image */
.product-card:hover .image-box img {
    transform: scale(1.06) !important;
    filter: drop-shadow(0 12px 20px rgba(229, 169, 18, 0.25));
}
.product-card h3{

font-size:24px;

margin-bottom:15px;

}

.product-card p{

color:var(--muted);

min-height:80px;

}

.price{

font-size:30px;

font-weight:800;

color:var(--gold);

margin-top:20px;

}

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

footer{

background:#090A0E;

margin-top:100px;

padding:80px 7% 30px;

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

}

.footer-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:50px;

}

.footer-column h3{

margin-bottom:25px;

font-size:28px;

color:var(--gold);

}

.footer-column p,
.footer-column li,
.footer-column a{

color:var(--muted);

text-decoration:none;

margin-bottom:14px;

display:block;

}

.footer-column a:hover{

color:var(--gold);

}

.payment-list{

display:flex;

flex-wrap:wrap;

gap:10px;

}

.payment-list span{

padding:12px 18px;

border-radius:999px;

background:#12141C;

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

}

.contact-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.contact-list {
    flex-direction: column;
    align-items: flex-start;
}

.contact-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.contact-pill {
    width: auto;
    margin-bottom: 0 !important;
}

/* Ensure the hover transform applies strictly to the whole pill container */
.payment-pill:hover span,
.contact-pill:hover span {
    transform: none !important;
}
/* Ensure the hover transform applies strictly to the whole pill container */
.payment-pill:hover span,
.contact-pill:hover span {
    transform: none !important;
}

/* Strip all background colors, borders, and shadows from inner text spans */
.payment-pill span,
.payment-pill span:hover,
.payment-pill:hover span,
.contact-pill span,
.contact-pill span:hover,
.contact-pill:hover span {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- PAYMENT METHODS HOVER STATES --- */

/* Single pill layout */
.payment-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;                  /* Space between icon and text */
    padding: 10px 20px;         /* Inner padding */
    width: auto;                /* Allows button to grow with text */
    white-space: nowrap;        /* Prevents text from wrapping */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    color: #ffffff;
    font-size: 14px;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}
/* Remove any extra background/padding if spans inside payment-pill were styled */
.payment-pill > span {
    background: transparent;
    padding: 0;
    border: none;
}

.payment-pill:hover {
    transform: translateY(-2px);
    color: #ffffff;
}


.how-to-buy-container {
    max-width: 420px;
}

.how-to-buy-container h3 {
    color: #ffb703;
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
    font-weight: 700;
}

.htb-desc {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.45;
    margin-bottom: 1.2rem;
}

.htb-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.htb-step {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.6rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.htb-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    background: rgba(255, 183, 3, 0.15);
    color: #ffb703;
    font-weight: bold;
    font-size: 0.85rem;
    border: 1px solid rgba(255, 183, 3, 0.3);
}

.htb-step-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.htb-step-title {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
}

.htb-step-sub {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    line-height: 1.35;
}

.htb-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.htb-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
    font-size: 0.75rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

a.htb-pill:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

.htb-badge {
    cursor: default;
}


/* ========================================== */
/* PAYMENT METHOD HOVER EFFECTS */
/* ========================================== */

/* USDT (Teal/Green) */
.payment-pill[data-method="usdt"]:hover {
    background: #26A17B;
    border-color: #26A17B;
    box-shadow: 0 0 15px rgba(38, 161, 123, 0.45);
}

/* Credit Card (Blue) */
.payment-pill[data-method="card"]:hover {
    background: #1A1F71;
    border-color: #0066B2;
    box-shadow: 0 0 15px rgba(0, 102, 178, 0.45);
}

/* Zain Cash (Red/Dark Pink) */
.payment-pill[data-method="zain"]:hover {
    background: #E21A22;
    border-color: #E21A22;
    box-shadow: 0 0 15px rgba(226, 26, 34, 0.45);
}

/* Al-Rafidain (Gold/Amber) */
.payment-pill[data-method="rafidain"]:hover {
    background: #D4AF37;
    border-color: #D4AF37;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.45);
}

/* Bank Wire (Navy Blue) */
.payment-pill[data-method="bank"]:hover {
    background: #0F4C81;
    border-color: #0F4C81;
    box-shadow: 0 0 15px rgba(15, 76, 129, 0.45);
}

/* ========================================== */
/* CONTACT HOVER EFFECTS */
/* ========================================== */

/* Discord (Blurple) */
.contact-pill[data-contact="discord"]:hover {
    background: #5865F2;
    border-color: #5865F2;
    box-shadow: 0 0 15px rgba(88, 101, 242, 0.45);
}

/* TikTok Pill */
.contact-pill[data-contact="tiktok"]:hover {
    background-color: #000000;
    color: #ffffff;
    border-color: #000000;
}

.contact-pill[data-contact="tiktok"]:hover svg {
    fill: #ffffff;
}


/* Telegram (Cyan Blue) */
.contact-pill[data-contact="telegram"]:hover {
    background: #229ED9;
    border-color: #229ED9;
    box-shadow: 0 0 15px rgba(34, 158, 217, 0.45);
}

/* WhatsApp (Green) */
.contact-pill[data-contact="whatsapp"]:hover {
    background: #25D366;
    border-color: #25D366;
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.45);
}

/* Instagram (Gradient) */
.contact-pill[data-contact="instagram"]:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-color: #dc2743;
    box-shadow: 0 0 15px rgba(220, 39, 67, 0.45);
}

/* Facebook (Blue) */
.contact-pill[data-contact="facebook"]:hover {
    background: #1877F2;
    border-color: #1877F2;
    box-shadow: 0 0 15px rgba(24, 119, 242, 0.45);
}

/* Email (Red/Coral) */
.contact-pill[data-contact="email"]:hover {
    background: #EA4335;
    border-color: #EA4335;
    box-shadow: 0 0 15px rgba(234, 67, 53, 0.45);
}
/* Container for Contact Buttons */
.contact-social-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* WhatsApp Brand Hover */
.social-btn[aria-label="WhatsApp"]:hover {
    background: #25D366;
    border-color: #25D366;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.5);
}

/* Email Brand Hover */
.social-btn[aria-label="Email"]:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #111111;
    box-shadow: 0 0 15px rgba(229, 169, 18, 0.5);
}


/* ===========================
   COPYRIGHT
=========================== */

.copyright{

margin-top:50px;

padding-top:30px;

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

text-align:center;

color:var(--muted);

}

/* ===========================
   LOGIN MODAL
=========================== */

.modal{

position:fixed;

inset:0;

background:rgba(0,0,0,.7);

display:none;

justify-content:center;

align-items:center;

z-index:1000;

backdrop-filter:blur(10px);

}

.modal.active{

display:flex;

}

.modal-box{

width:min(460px,90vw);

background:#141720;

padding:35px;

border-radius:24px;

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

position:relative;

}

.modal-box h2{

margin-bottom:25px;

}

.modal-box label{

display:block;

margin:18px 0 8px;

}

.modal-box input{

width:100%;

padding:14px;

background:#0D1017;

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

color:#fff;

border-radius:10px;

outline:none;

}

.modal-box input:focus{

border-color:var(--gold);

box-shadow:0 0 20px rgba(229,169,18,.15);

}

.close-modal{

position:absolute;

top:18px;

right:18px;

width:42px;

height:42px;

border:none;

background:#20242F;

color:#fff;

font-size:22px;

cursor:pointer;

border-radius:50%;

}

.close-modal:hover{

background:var(--gold);

color:#111;

}

/* ===========================
   RTL
=========================== */

html[dir="rtl"] body{

font-family:"Cairo",sans-serif;

}

html[dir="rtl"] nav{

flex-direction:row-reverse;

}

html[dir="rtl"] .nav-links{

flex-direction:row-reverse;

}

html[dir="rtl"] .hero{

direction:rtl;

}

html[dir="rtl"] .section-title{

border-left:none;

border-right:5px solid var(--gold);

padding-left:0;

padding-right:20px;

}

html[dir="rtl"] .footer-column{

text-align:right;

}

/* ===========================
   ANIMATIONS
=========================== */

@keyframes floatCard{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

@keyframes shine{

0%{

left:-150%;

}

100%{

left:150%;

}

}

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

@media(max-width:1100px){

.hero{

grid-template-columns:1fr;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.nav-links{

display:none;

}

}

@media(max-width:768px){

.hero h1{

font-size:48px;

}

.hardware-card{

width:290px;

height:360px;

}

.section-title h2{

font-size:34px;

}

.product-grid{

grid-template-columns:1fr;

}

nav{

flex-wrap:wrap;

justify-content:center;

gap:20px;

}

}
/* ==========================================================
   APP.JS SUPPORT CLASSES
   ========================================================== */

/* ---------- Scroll Reveal ---------- */

.hidden{

    opacity:0;

    transform:translateY(50px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}

/* ---------- Active Navigation ---------- */

.nav-links a.active{

    color:var(--gold);

}

.nav-links a.active::after{

    width:100%;

}

/* ---------- Ripple Effect ---------- */

.gold-btn,
.outline-btn,
.buy-btn{

    position:relative;

    overflow:hidden;

}

.ripple{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

    animation:rippleAnimation .6s linear;

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

    pointer-events:none;

}

@keyframes rippleAnimation{

    to{

        transform:scale(4);

        opacity:0;

    }

}

/* ---------- Loading Animation ---------- */

body{

    opacity:0;

    transition:opacity .5s ease;

}

body.loaded{

    opacity:1;

}

/* ---------- Product Card Mouse Glow ---------- */

.product-card{

    background:#12141C;

    background-repeat:no-repeat;

    transition:

        transform .35s,

        border-color .35s,

        box-shadow .35s,

        background .2s;

}

/* ---------- Better Buttons ---------- */

.gold-btn:hover,
.outline-btn:hover,
.buy-btn:hover{

    box-shadow:

        0 0 12px rgba(229,169,18,.35),

        0 0 35px rgba(229,169,18,.20);

}

/* ---------- Modal Animation ---------- */

.modal{

    opacity:0;

    visibility:hidden;

    transition:

        opacity .3s ease,

        visibility .3s ease;

}

.modal.active{

    opacity:1;

    visibility:visible;

}

.modal-box{

    transform:translateY(25px) scale(.96);

    transition:

        transform .35s ease;

}

.modal.active .modal-box{

    transform:translateY(0) scale(1);

}

/* ---------- Image Animation ---------- */

.image-box img{

    opacity:0;

    transform:scale(.95);

    transition:

        opacity .5s ease,

        transform .5s ease;

}

/* ---------- Navigation Hover ---------- */

.nav-links a{

    transition:

        color .3s,

        text-shadow .3s;

}

.nav-links a:hover{

    text-shadow:

        0 0 10px rgba(229,169,18,.55);

}

/* ---------- Hardware Card Enhancement ---------- */

.hardware-card{

    transform-style:preserve-3d;

    will-change:transform;

    transition:transform .18s linear;

}

.hardware-card h2,
.hardware-card h3,
.hardware-card p{

    transform:translateZ(40px);

}

/* ---------- Payment Pills ---------- */

.payment-list span{

    transition:

        background .3s,

        border-color .3s,

        transform .3s;

}

.payment-list span:hover{

    transform:translateY(-4px);

    border-color:var(--gold);

    background:#1A1D27;

}

/* ---------- Footer Links ---------- */

.footer-column a{

    transition:

        color .3s,

        transform .3s;

}

.footer-column a:hover{

    transform:translateX(6px);

}

html[dir="rtl"] .footer-column a:hover{

    transform:translateX(-6px);

}

/* ---------- Selection Color ---------- */

::selection{

    background:var(--gold);

    color:#111;

}

/* ---------- Scrollbar ---------- */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#0B0C10;

}

::-webkit-scrollbar-thumb{

    background:#2D2F38;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--gold);

}

/* ---------- Focus Accessibility ---------- */

button:focus-visible,
a:focus-visible,
input:focus-visible{

    outline:2px solid var(--gold);

    outline-offset:3px;

}
/* ==========================================================
   VIDEO BACKGROUND
========================================================== */

.video-background{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    overflow:hidden;

    z-index:-10;

}

.video-background video{

    width:100%;

    height:100%;

    object-fit:cover;

    filter:

        brightness(.40)

        contrast(1.2)

        saturate(0.8);

}

.video-overlay{

    position:fixed;

    inset:0;

    z-index:-19;

    background:

        linear-gradient(
            rgba(11,12,16,.75),
            rgba(11,12,16,.88)
        ),

        radial-gradient(
            circle at center,
            rgba(229,169,18,.08),
            transparent 70%
        );

    pointer-events:none;

}
.video-background video{

    animation:backgroundZoom 25s ease-in-out infinite alternate;

}

@keyframes backgroundZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}


/* ==========================================================
   END OF STYLESHEET
   ========================================================== */