/* تنظیمات پایه */
:root {
    /* رنگ‌های ثابت طلایی */
    --primary-gold: #D4AF37;
    --dark-gold: #B8860B;
    --light-gold: #F5E8AA;
    
    /* رنگ‌های متغیر تم (حالت پیش‌فرض: سرمه‌ای تیره) */
    --bg-color: #0a1629;      /* سرمه‌ای خیلی تیره برای پس‌زمینه اصلی */
    --bg-secondary: #112240;  /* سرمه‌ای روشن‌تر برای سکشن‌های دوم */
    --text-color: #e6f1ff;    /* متن مایل به سفید */
    --card-bg: #1b2a4e;       /* پس‌زمینه کارت‌ها */
    --header-bg: #0a192f;     /* پس‌زمینه هدر */
    --border-color: rgba(212, 175, 55, 0.2);
    
    /* متغیرهای کمکی */
    --black: #000000;
    --dark-gray: #1A1A1A;
    --gray: #333333;
    --light-gray: #a8b2d1;
}

header, 
main, 
section, 
.hero-section, 
.features-section,
.results-section {
    background-color: transparent !important;
}

/* ۲. رنگ اصلی رو فقط به Body بده */
body {
    background-color: #0a1226; /* رنگ سورمه‌ای پایه */
}


/* ۴. مطمئن شو کارت‌ها هم لایه‌بندی درستی دارن */
.result-card, .feature, .stat-item {
    background: rgba(255, 255, 255, 0.03) !important; /* یکم شفافیت برای کارت‌ها */
    backdrop-filter: blur(10px); /* افکت شیشه‌ای لوکس */
    z-index: 1;
}




.dark-theme {
    --bg-color: #000000;
    --bg-secondary: #0a0a0a;
    --text-color: #f2f2f2;
    --card-bg: #111111;
    --header-bg: #000000;
    --border-color: rgba(255, 255, 255, 0.1);
}


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

body {
    font-family: 'Vazir', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color 0.4s ease, color 0.4s ease;

}



body:not(.dark-theme) .result-card,
body:not(.dark-theme) .verification-box,
body:not(.dark-theme) .feature,
body:not(.dark-theme) .stat-item {
    background: linear-gradient(145deg, #152447, #1c2f57);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 12px 30px rgba(0,0,0,0.45),
        0 0 0 1px rgba(255,255,255,0.05);
}

body:not(.dark-theme) .result-card:hover,
body:not(.dark-theme) .verification-box:hover,
body:not(.dark-theme) .feature:hover,
body:not(.dark-theme) .stat-item:hover {
    transform: translateY(-6px);
    border-color: rgba(255,255,255,0.2);
    box-shadow:
        0 22px 50px rgba(0,0,0,0.55),
        0 0 25px rgba(212,175,55,.20);
}

/* کارت‌ها در حالت مشکی */
.dark-theme .result-card,
.dark-theme .verification-box,
.dark-theme .feature,
.dark-theme .stat-item {
    background: linear-gradient(145deg, #0b0b0b, #131313);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow:
        0 10px 25px rgba(0,0,0,.6),
        0 0 0 1px rgba(255,255,255,0.05);
}

/* رگه طلایی ثابت روی کارت‌ها */
.result-card::before,
.feature::before,
.verification-box::before,
.stat-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(212,175,55,0.13) 0%,
        rgba(212,175,55,0.04) 40%,
        transparent 90%
    );
    pointer-events: none;
    z-index: 0;
}

/* محتوا از لایه طلایی بالاتر باشد */
.result-card > *,
.feature > *,
.verification-box > *,
.stat-item > * {
    position: relative;
    z-index: 1;
}

/* 1) خطوط سفید بک‌گراند (فقط در تم‌های تیره) */
.bg-lines{
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .18;
    background-image: repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.06) 0,
      rgba(255,255,255,.06) 1px,
      transparent 1px,
      transparent 20px
    );
  }
  
  /* 2) کارت‌ها: حتماً موقعیت بگیرن که ::before روی خودشون بشینه */
  .result-card,
  .feature,
  .verification-box,
  .stat-item{
    position: relative;
    overflow: hidden;
  }
  
  /* 3) رگه طلایی ثابت روی کارت‌ها (برای هر دو تم) */
  .result-card::before,
  .feature::before,
  .verification-box::before,
  .stat-item::before{
    content:"";
    position:absolute;
    inset:-1px;
    pointer-events:none;
    z-index: 0;
    background: linear-gradient(
      135deg,
      rgba(212,175,55,.16) 0%,
      rgba(212,175,55,.06) 45%,
      transparent 85%
    );
  }
  
  /* 4) محتوای داخل کارت روی رگه طلایی قرار بگیره */
  .result-card > *,
  .feature > *,
  .verification-box > *,
  .stat-item > *{
    position: relative;
    z-index: 1;
  }



.result-card > *,
.feature > *,
.verification-box > *,
.stat-item > * {
    position: relative;
    z-index: 1;
}



@font-face{
    font-family:"Vazir";
    src:url("../fonts/vazir.woff2") format("woff2");
    font-display:swap;
    }
    


/* HEADER LOGO */
.header-logo{
    height:50px;
    width:auto;
    object-fit:contain;
    margin-left:8px;
    }

    .loader-logo-img{
        height:60px;
        width:auto;
        object-fit:contain;
        margin-left:10px;
        }

        /* تنظیم ردیف لوگو */
.logo{
    display:flex;
    align-items:center;
    gap:8px;
    }
    
    .loader-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    }


    .theme-toggle {
        cursor: pointer;
        font-size: 20px;
        color: var(--text-color);
        margin-left: 20px;
    }
    
    .theme-toggle:hover {
        opacity: 0.7;
    }
    

/* ===================== */
/* GOLD PREMIUM LOADER */
/* ===================== */

#goldLoader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#0b0b0b;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:99999;
    transition:opacity .35s ease, visibility .35s;
    }
    
    #goldLoader.hide{
    opacity:0;
    visibility:hidden;
    }
    
    /* نوار لود */
    
    .loader-bar{
    width:180px;
    height:3px;
    background:rgba(255,255,255,0.08);
    border-radius:20px;
    overflow:hidden;
    position:relative;
    }
    
    /* نور طلایی */
    
    .loader-shine{
    position:absolute;
    top:0;
    left:-40%;
    width:40%;
    height:100%;
    background:linear-gradient(
    90deg,
    transparent,
    #d4af37,
    #f5e8aa,
    #d4af37,
    transparent
    );
    animation:goldLoaderMove .9s linear forwards;
    }
    
    @keyframes goldLoaderMove{
    0%{left:-40%}
    100%{left:100%}
    }

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* تایپوگرافی */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
}

.gold-text {
    color: var(--primary-gold);
}

/* دکمه‌ها */
.btn-primary, .btn-secondary, .btn-share {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-family: 'Vazir', sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-gold), var(--dark-gold));
    color: var(--black);
    font-weight: 700;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary-gold);
    border: 2px solid var(--primary-gold);
}

.btn-secondary:hover {
    background-color: var(--primary-gold);
    color: var(--black);
}

.btn-share {
    background-color: var(--gray);
    color: var(--white);
    padding: 8px 16px;
}

.btn-share:hover {
    background-color: var(--light-gray);
}

/* هدر */
.main-header {
    background: color-mix(in srgb, var(--header-bg) 85%, transparent);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-bottom:1px solid rgba(212,175,55,.2);
}

.main-header, .verification-box, .result-card, .stat-item, .feature {
    transition: all 0.4s ease;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 700;
}

.gold-icon {
    color: var(--primary-gold);
    font-size: 28px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-links a {
    color: var(--white);
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-links a:hover {
    color: var(--primary-gold);
}

.hamburger {
    display: none;
    font-size: 24px;
    cursor: pointer;
}

/* بخش Hero */
.hero {
    padding: 150px 0 100px;
    background: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-secondary) 100%);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%);
}

.hero::after{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    background:radial-gradient(circle,rgba(212,175,55,.15),transparent 70%);
    top:-200px;
    right:-200px;
    filter:blur(80px);
    pointer-events:none;
 }

.hero .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.hero-content {
    flex: 1;
}

.hero-title {
    font-size: 48px;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-description {
    font-size: 18px;
    color: var(--light-gray);
    margin-bottom: 40px;
    max-width: 600px;
}

.hero-stats {
    display: flex;
    gap: 30px;
    margin-top: 40px;
}

.stat-item{
    padding:25px;
    border-radius:16px;
    background:linear-gradient(145deg,#111,#000);
    border:1px solid rgba(212,175,55,0.2);
    transition:all .35s ease;
    position:relative;
    overflow:hidden;
    }
    
    .stat-item::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,transparent,rgba(212,175,55,0.15),transparent);
    opacity:0;
    transition:.4s;
    }
    
    .stat-item:hover{
    transform:translateY(-8px);
    border-color:var(--primary-gold);
    box-shadow:0 15px 40px rgba(212,175,55,.2);
    }
    
    .stat-item:hover::before{
    opacity:1;
    }
    
    .stat-item i{
    font-size:40px;
    margin-bottom:15px;
    }

.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.hero-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    transform: perspective(1000px) rotateY(-10deg);
    transition:transform .6s ease, box-shadow .6s ease;
}

.hero-image img:hover{
    transform:perspective(1000px) rotateY(0deg) scale(1.03);
    box-shadow:0 30px 60px rgba(0,0,0,.7);
    }

/* بخش استعلام */
.verification-section {
    padding: 100px 0;
    background-color: var(--bg-secondary); /* وصل شد به متغیر تم */
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-size: 36px;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary-gold), transparent);
}

.section-subtitle {
    color: var(--light-gray);
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto;
}

.verification-box{ 
    background: transparent !important;
   box-shadow: none !important;
   border: 1px solid rgba(212,175,55,0.2);
   padding: 20px;
    }
    

.verification-form {
    margin-bottom: 40px;
}

.input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    position: relative;
}

.input-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--light-gray);
    font-size: 20px;
}

#serialInput {
    flex: 1;
    padding: 18px 60px 18px 20px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--gray);
    border-radius: 12px;
    color: var(--white);
    font-family: 'Vazir', sans-serif;
    font-size: 17px;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}

#serialInput:focus {
    outline: none;
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

#serialInput::placeholder {
    color: var(--light-gray);
}

.form-help {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid var(--primary-gold);
    border-radius: 8px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-help i {
    color: var(--primary-gold);
    font-size: 20px;
}

/* نتیجه استعلام */
.result-card {
    background: linear-gradient(135deg, var(--dark-gray), var(--black));
    border-radius: 16px;
    border: 1px solid var(--gray);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    background: rgba(212, 175, 55, 0.1);
    border-bottom: 1px solid var(--gray);
}

.status-badge {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.result-body {
    padding: 30px;
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid var(--gray);
}

.result-label {
    color: var(--light-gray);
    font-size: 14px;
}

.result-value {
    font-weight: 700;
    font-size: 16px;
}

.verification-message {
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.result-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--gray);
}

.share-buttons {
    display: flex;
    gap: 10px;
}

/* اسکنر QR */
.qr-scanner-placeholder {
    text-align: center;
    position:relative;
    overflow:hidden;
    padding: 50px 20px;
    border: 2px dashed var(--gray);
    border-radius: 16px;
    margin-top: 40px;
    transition: all 0.3s ease;
}

.qr-scanner-placeholder:hover {
    border-color: var(--primary-gold);
    background: rgba(212, 175, 55, 0.05);
}

.qr-scanner-placeholder::after{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:2px;
    background:var(--primary-gold);
    animation:scan 3s infinite;
    }

    @keyframes scan{
        0%{left:-100%}
        100%{left:100%}
        }

.scanner-icon {
    font-size: 64px;
    color: var(--primary-gold);
    margin-bottom: 20px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0.7; transform: scale(1); }
}

/* بخش درباره ما */
.about-section {
    padding: 100px 0;
    background-color: var(--bg-color); /* وصل شد به متغیر تم */
}

.about-content {
    display: flex;
    align-items: center;
    gap: 60px;
}

.about-text {
    flex: 1;
}

.about-text h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.about-text p {
    font-size: 18px;
    color: var(--light-gray);
    margin-bottom: 40px;
    line-height: 1.8;
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.feature {
    text-align: center;
    padding: 30px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid var(--gray);
    transition: all 0.3s ease;
}

.feature:hover {
    border-color: var(--primary-gold);
    transform: translateY(-5px);
}

.feature i {
    font-size: 40px;
    color: var(--primary-gold);
    margin-bottom: 20px;
}

.feature h4 {
    font-size: 20px;
    margin-bottom: 10px;
}

.feature p {
    font-size: 14px;
    margin: 0;
}

.about-image {
    flex: 1;
}

.about-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* فوتر */
.main-footer {
    background-color: var(--bg-secondary); /* وصل شد به متغیر تم */
    padding: 80px 0 20px;
    border-top: 1px solid var(--border-color);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h4 {
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--primary-gold);
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: var(--light-gray);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: var(--primary-gold);
}

.contact-info li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.contact-info i {
    color: var(--primary-gold);
    width: 20px;
}

.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--gray);
    border-radius: 50%;
    color: var(--white);
    font-size: 18px;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background-color: var(--primary-gold);
    color: var(--black);
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid var(--gray);
    color: var(--light-gray);
    font-size: 14px;
}

/* ============================= */

/* بخش نحوه استعلام */

.how-section{

    padding:100px 0;
    
    background: var(--bg-secondary); /* اصلاح شد */
    
    }
    
    .how-section .hero-stats{
    
    justify-content:center;
    
    flex-wrap:wrap;
    
    }
    
    /* اسکرول نرم بین سکشن ها */
    
    html{
    
    scroll-behavior:smooth;
    
    }
    
    /* بهتر شدن کارت نتیجه */
    
    .result-card{
    
    transition:all .3s ease;
    
    }
    
    .result-card:hover{
    
        border-color: var(--primary-gold); /* اصلاح شد */
    
    }
    
    /* کمی زیباتر شدن input */
    
    #serialInput{
    
    letter-spacing:1px;
    
    }
    
    /* اسکرول بار طلایی */
    
    ::-webkit-scrollbar{
    
    width:8px;
    
    }
    
    ::-webkit-scrollbar-track{
    
        background: var(--bg-color); /* اصلاح شد */
    
    }
    
    ::-webkit-scrollbar-thumb{
    
        background: var(--primary-gold); /* اصلاح شد */
    
    border-radius:10px;
    
    }
    
    /* افکت طلایی برای لینک ها */
    
    a{
    
    transition:.3s;
    
    }
    
.qr-scanner-placeholder p{ color: var(--light-gray); }


    /* ============================= */
/* PREMIUM DESIGN UPGRADE PACK */
/* ============================= */

/* نور طلایی متحرک کل سایت */
    
    @keyframes goldGlowMove{
    0%{transform:translate(0,0)}
    50%{transform:translate(300px,200px)}
    100%{transform:translate(0,0)}
    }
    
    /* عمق بیشتر کارت ها */
    
    .feature,
    .result-card,
    .verification-box,
    .stat-item{
    box-shadow:
    0 10px 25px rgba(0,0,0,.5),
    0 0 0 1px rgba(212,175,55,.05);
    transition:all .35s ease;
    }
    
    .feature:hover,
    .result-card:hover,
    .verification-box:hover{
    transform:translateY(-6px);
    box-shadow:
    0 20px 50px rgba(0,0,0,.7),
    0 0 25px rgba(212,175,55,.15);
    }
    
    
    /* تایپوگرافی حرفه ای تر */
    
    .hero-title{
    font-size:52px;
    letter-spacing:.5px;
    }
    
    .section-title{
    font-size:38px;
    letter-spacing:.5px;
    }
    
    .section-subtitle{
    font-size:18px;
    opacity:.9;
    }
    
    .hero-description{
    font-size:19px;
    opacity:.9;
    }
    
    
    /* متن طلایی لوکس */
    
    .gold-text{
    background:linear-gradient(120deg,#f5e8aa,#d4af37,#b8860b);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    }
    
    
    /* دکمه پریمیوم */
    
    .btn-primary{
    box-shadow:0 8px 20px rgba(212,175,55,.25);
    }
    
    .btn-primary:hover{
    box-shadow:
    0 15px 35px rgba(212,175,55,.35),
    0 0 15px rgba(212,175,55,.2);
    }
    
    
    /* خط طلایی ظریف بین سکشن ها */
    
    section{
    position:relative;
    }
    
    section::after{
    content:"";
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:140px;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--primary-gold),transparent);
    opacity:.25;
    }
    
    
    /* تصویرها لوکس تر */
    
    .hero-image img,
    .about-image img{
    border:1px solid rgba(212,175,55,.15);
    }
    
    
    /* اسکرول نرم تر */
    
    html{
    scroll-behavior:smooth;
    }

    /* ----------------------------- */
/* افکت نهایی طلایی و خطوط پس‌زمینه */
/* ----------------------------- */

/* خطوط سفید پس‌زمینه */
.bg-lines{
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  
    background-image: repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.12) 0px,      /* پررنگ‌تر در حالت سورمه‌ای */
      rgba(255,255,255,0.12) 1px,
      transparent 1px,
      transparent 22px
    );
  
    opacity: 0.30; /* کمی پررنگ */
  }
  
  /* در تم روشن غیرفعال */
  body.light-theme .bg-lines {
    display: none;
  }

  body.dark-theme .bg-lines{
    background-image: repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.06) 0px,     /* نصف حالت معمول */
      rgba(255,255,255,0.06) 1px,
      transparent 1px,
      transparent 22px
    );
  
    opacity: 0.34; /* کمرنگ‌تر */
  }
  /* نور طلایی متحرک */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(212,175,55,.08), transparent 70%);
    filter: blur(120px);
    animation: goldGlowMove 18s linear infinite;
    pointer-events: none;
    z-index: -1; /* 👈 پایین بیار تا bg-lines دیده بشه */
  }
  @keyframes goldGlowMove {
    0% {transform: translate(0,0);}
    50% {transform: translate(300px,200px);}
    100% {transform: translate(0,0);}
  }
  
  /* کارت‌ها */
  .result-card,
  .feature,
  .verification-box,
  .stat-item {
    position: relative;
    overflow: hidden;
  }
  
  /* رگه طلایی دائمی روی کارت‌ها */
  .result-card::before,
  .feature::before,
  .verification-box::before,
  .stat-item::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
      135deg,
      rgba(212,175,55,.16) 0%,
      rgba(212,175,55,.06) 45%,
      transparent 85%
    );
  }
  .result-card > *,
  .feature > *,
  .verification-box > *,
  .stat-item > * {
    position: relative;
    z-index: 1;
  }
  
    
    /* ریسپانسیو بهتر stats */
    
    @media(max-width:768px){
    
    .hero-stats{
    
    gap:15px;
    
    }
    
    .stat-item{
    
    flex:1 1 45%;
    
    }

    .input-group {
        flex-direction: column; /* چیدمان زیر هم به جای کنار هم */
        background: transparent !important;
        border: none !important;
        gap: 12px;
    }

    #serialInput {
        width: 100%;
        border-radius: 12px !important; /* گرد کردن لبه‌ها */
        padding: 15px 45px 15px 15px !important;
        border: 1px solid var(--border-color) !important;
        background: var(--card-bg);
    }

    #verifyBtn {
        width: 100%;
        border-radius: 12px !important;
        padding: 15px !important;
        justify-content: center;
    }
    
    .input-icon {
        top: 25px; /* تنظیم جای آیکون با توجه به تغییر ارتفاع */
    }
    
    }

/* رسپانسیو */
@media (max-width: 992px) {
    .hero .container {
        flex-direction: column;
        text-align: center;
    }
    
    .hero-stats {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .about-content {
        flex-direction: column;
    }
    
    .nav-links {
        display: none;
        align-items: center;

    }
    
    .hamburger {
        display: block;
    }
    
    .result-grid {
        grid-template-columns: 1fr;
    }
    .theme-mobile-item {
        width: 100%;
        display: flex;
        justify-content: center;
        padding-top: 10px;
        border-top: 1px solid var(--border-color);
    }

    .theme-toggle {
        margin: 0 auto;
        background: var(--bg-color);
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid var(--primary-gold);
    }
}

@media (min-width: 993px) {
    .theme-mobile-item {
        margin-right: 20px;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 36px;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .verification-box {
        padding: 20px;
    }
    
    .input-group {
        flex-direction: column;
    }
    
    .result-footer {
        flex-direction: column;
        gap: 15px;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .contact-info li {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 28px;
    }
    
    .stat-item {
        min-width: 120px;
        padding: 15px;
    }
    
    .btn-primary, .btn-secondary {
        width: 100%;
    }
}