*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Vazirmatn,Tahoma,sans-serif;background:#070b12;color:#f4f7fb;line-height:1.8}a{color:inherit;text-decoration:none}.header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;position:sticky;top:0;z-index:10;background:rgba(7,11,18,.88);backdrop-filter:blur(16px);border-bottom:1px solid #172130}.logo{font-size:22px;font-weight:900;display:flex;align-items:center;gap:9px}.logo span{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#0d2746;border:1px solid #24507b;color:#58aaff}nav{display:flex;gap:30px;color:#aab6c7;font-size:14px}nav a:hover{color:#fff}.header-btn,.btn{border-radius:12px;padding:10px 18px;font-weight:700;font-size:14px}.header-btn{background:#102d4e;border:1px solid #1f4e7f}.hero{min-height:calc(100vh - 78px);display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center;padding:7% 8%;background:radial-gradient(circle at 20% 20%,#102c4b 0,transparent 35%),radial-gradient(circle at 85% 70%,#101d31 0,transparent 35%)}.eyebrow{color:#55a8ff;font-size:12px;letter-spacing:3px;font-weight:800;margin-bottom:10px}.hero h1{font-size:clamp(42px,5vw,74px);line-height:1.2;font-weight:800}.hero h1 strong{color:#4ea4ff}.hero-text{color:#aab6c7;max-width:540px;margin:22px 0;font-size:17px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-block;padding:13px 22px}.primary{background:#1976d2;box-shadow:0 12px 35px #1976d233}.ghost{border:1px solid #29445f;background:#0c1420}.hero-card{height:510px;border-radius:28px;padding:14px;background:linear-gradient(145deg,#142d49,#080d15);border:1px solid #1e3955;box-shadow:0 30px 80px #0008}.photo-placeholder,.product-photo{height:100%;border-radius:20px;background:repeating-linear-gradient(135deg,#0d1622,#0d1622 12px,#101c2a 12px,#101c2a 24px);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#7190ad;font-weight:700}.photo-placeholder small{font-size:11px;font-weight:400;margin-top:6px;color:#526c87}.section{padding:100px 8%;background:#090f18}.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:35px}.section-title h2,.about h2,.contact h2{font-size:38px;line-height:1.3}.section-title>p{color:#708198;font-size:13px}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.product{background:#0d1520;border:1px solid #1b2939;border-radius:20px;padding:12px;transition:.25s}.product:hover{transform:translateY(-6px);border-color:#2c5680}.product-photo{height:260px;border-radius:14px}.product h3{font-size:17px;margin:14px 8px 0}.product p{font-size:12px;color:#718197;margin:2px 8px 10px}.about{padding:110px 8%;display:grid;grid-template-columns:1.1fr .9fr;gap:8%;background:#060a10}.about>div:first-child>p:last-child{color:#91a0b3;max-width:650px;margin-top:18px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-self:center}.stats div{padding:22px 10px;border:1px solid #1b2939;border-radius:18px;background:#0b121c;text-align:center}.stats b{display:block;color:#4fa8ff;font-size:26px}.stats span{font-size:11px;color:#8291a5}.contact{padding:100px 8%;background:#0a111b}.contact-head{text-align:center;margin-bottom:40px}.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.contact-card{display:flex;align-items:center;gap:16px;background:#0d1723;border:1px solid #1d2c3d;border-radius:18px;padding:22px;min-height:100px}.contact-card:hover{border-color:#3978ad}.icon{width:45px;height:45px;border-radius:13px;background:#102b48;color:#59adff;display:grid;place-items:center;font-size:23px;flex:none}.contact-card small{display:block;color:#718196;font-size:11px}.contact-card strong{font-size:14px;line-height:1.7}footer{display:flex;justify-content:space-between;align-items:center;padding:28px 8%;background:#05080d;border-top:1px solid #15202d;color:#66768a;font-size:11px}footer .logo{color:#fff;font-size:18px}footer .logo span{width:30px;height:30px;font-size:15px}@media(max-width:850px){.header{padding:0 5%}.header nav{display:none}.header-btn{padding:8px 12px}.hero{grid-template-columns:1fr;padding:55px 6%;text-align:center}.hero-text{margin:18px auto}.hero-actions{justify-content:center}.hero-card{height:360px}.section,.about,.contact{padding:70px 6%}.section-title{display:block}.section-title>p{margin-top:8px}.products{grid-template-columns:repeat(2,1fr)}.product-photo{height:220px}.about{grid-template-columns:1fr}.stats{margin-top:25px}.contact-grid{grid-template-columns:1fr}footer{display:block;text-align:center}footer p{margin-top:10px}}@media(max-width:480px){.hero h1{font-size:39px}.products{grid-template-columns:1fr}.product-photo{height:270px}.stats{grid-template-columns:1fr}.hero-card{height:300px}}
.products .product-photo {
  height: 260px;
  overflow: hidden;
  position: relative;
}

.products .product-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* =========================
   Authentication Pages
   ========================= */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;

    background:
        radial-gradient(circle at 20% 20%, #102c4b 0, transparent 35%),
        radial-gradient(circle at 80% 80%, #101d31 0, transparent 35%),
        #070b12;
}

.auth-box {
    width: 100%;
    max-width: 440px;

    background: rgba(13, 21, 32, 0.95);
    border: 1px solid #1b334b;
    border-radius: 24px;

    padding: 38px;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.45);

    backdrop-filter: blur(15px);
}

.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    font-size: 25px;
    font-weight: 900;

    margin-bottom: 28px;
}

.auth-logo span {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: 12px;

    background: #0d2746;
    border: 1px solid #24507b;

    color: #58aaff;
}

.auth-box h1 {
    text-align: center;
    font-size: 27px;
    margin-bottom: 8px;
}

.auth-subtitle {
    text-align: center;
    color: #718197;
    font-size: 13px;

    margin-bottom: 28px;
}

.auth-box form {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.auth-box label {
    color: #b8c5d5;
    font-size: 13px;
    font-weight: 600;

    margin-top: 7px;
}

.auth-box input {
    width: 100%;

    padding: 14px 15px;

    border-radius: 12px;

    border: 1px solid #203449;

    background: #09111b;

    color: white;

    font-family: inherit;
    font-size: 14px;

    outline: none;

    transition: 0.2s;
}

.auth-box input::placeholder {
    color: #53667b;
}

.auth-box input:focus {
    border-color: #3d8ed1;

    box-shadow:
        0 0 0 3px rgba(61, 142, 209, 0.12);
}

.auth-box button {
    width: 100%;

    margin-top: 15px;

    padding: 14px;

    border: none;
    border-radius: 12px;

    background: #1976d2;

    color: white;

    font-family: inherit;
    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition: 0.2s;

    box-shadow:
        0 12px 35px rgba(25, 118, 210, 0.2);
}

.auth-box button:hover {
    background: #2088e5;

    transform: translateY(-1px);
}

.auth-error {
    padding: 12px 14px;

    margin-bottom: 18px;

    border-radius: 12px;

    background: #28131a;
    border: 1px solid #5a2630;

    color: #ff9aaa;

    font-size: 13px;

    text-align: center;
}

.auth-footer {
    text-align: center;

    margin-top: 24px;

    color: #718197;

    font-size: 13px;
}

.auth-footer a {
    color: #55a8ff;

    font-weight: 700;

    transition: 0.2s;
}

.auth-footer a:hover {
    color: #8ac7ff;
}

@media (max-width: 500px) {

    .auth-page {
        padding: 20px 15px;
    }

    .auth-box {
        padding: 28px 22px;
        border-radius: 20px;
    }

    .auth-box h1 {
        font-size: 24px;
    }

}
/* =========================
   Header User Buttons
   ========================= */

.header-user {
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-header-btn,
.register-header-btn,
.account-header-btn {
    padding: 9px 15px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    transition: .2s;
    white-space: nowrap;
}

/* دکمه ورود */
.login-header-btn {
    color: #aab6c7;
    border: 1px solid #263b50;
    background: #0c1420;
}

.login-header-btn:hover {
    color: white;
    border-color: #3d6b91;
    background: #101d2c;
}

/* دکمه ثبت نام و حساب من */
.register-header-btn,
.account-header-btn {
    background: #1976d2;
    border: 1px solid #1976d2;
    color: white;
    box-shadow: 0 8px 25px rgba(25, 118, 210, .18);
}

.register-header-btn:hover,
.account-header-btn:hover {
    background: #2088e5;
    border-color: #2088e5;
    transform: translateY(-1px);
}

/* موبایل */
@media(max-width:850px) {

    .header-user {
        gap: 5px;
    }

    .login-header-btn,
    .register-header-btn,
    .account-header-btn,
    .header-user .header-btn {
        padding: 7px 10px;
        font-size: 11px;
    }

}
.header-user {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 0;
    margin-left: 0;
}