/* ============================================================
   MAIN STYLESHEET
============================================================ */

@import url("variables.dbb107aa9e76.css");
@import url("navbar.6136171ba330.css");
@import url("hero.8867eb9c5a7e.css");
@import url("button.efbdd44df62f.css");

/* ============================================================
   RESET & BASE
============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    font-family: "Inter", "Vazirmatn", sans-serif;
}

/* برای فارسی */
[dir="rtl"] {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .nav-links {
    /* منوی فارسی */
}

[dir="rtl"] .hero-buttons .btn span {
    transform: translateX(-6px); /* برعکس */
}

[dir="rtl"] .btn:hover span {
    transform: translateX(-6px);
}

a {
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

button {
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}

a:focus,
button:focus {
    outline: none;
}

/* ============================================================
   MAIN CONTENT — فاصله از هدر ✅
============================================================ */
#main-content {
    padding-top: 100px;  /* ← اضافه شد */
    min-height: 80vh;
    padding-bottom: 0px;
}

/* ============================================================
   BACKGROUND EFFECTS
============================================================ */
.background-effects {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.grid {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, .01) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .01) 1px, transparent 1px);
    background-size: 64px 64px;
}

.glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
}

.glow-cyan {
    width: 650px;
    height: 650px;
    left: -240px;
    bottom: -240px;
    background: rgba(54, 215, 255, .10);
}

.glow-purple {
    width: 550px;
    height: 550px;
    right: -200px;
    top: -200px;
    background: rgba(110, 91, 255, .10);
}

/* ============================================================
   CONTAINER
============================================================ */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   PAGE TITLE
============================================================ */
.page-title {
    padding: 40px 0 30px;
    text-align: center;
}

.page-title h1 {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -.02em;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================================
   STATS
============================================================ */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 24px 60px;
}

.stat-item {
    text-align: center;
    padding: 28px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: var(--transition);
}

.stat-item:hover {
    border-color: rgba(54, 215, 255, .2);
    transform: translateY(-4px);
}

.stat-number {
    font-size: 42px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.stat-label {
    font-size: 14px;
    color: var(--muted);
    display: block;
    margin-top: 6px;
}

/* ============================================================
   QUOTE
============================================================ */
.quote {
    max-width: 1280px;
    margin: 0 auto;
    /* padding: 40px 24px 60px; */
    padding: 0 40px;
    text-align: center;
}

.quote blockquote {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}

/* ============================================================
   ABOUT
============================================================ */
.about-box {
    max-width: 760px;
    margin: 0 auto;
    padding: 20px 24px 40px;
}

.about-box p {
    font-size: 22px;
    line-height: 1.9;
    color: var(--muted);
    margin-bottom: 20px;
}

/* ============================================================
   TIMELINE
============================================================ */
.timeline {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 24px 40px;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 120px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--primary), var(--secondary));
    opacity: .3;
}

.timeline-item {
    display: flex;
    gap: 30px;
    padding: 18px 0;
    align-items: center;
    position: relative;
}

.timeline-item .year {
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary);
    width: 100px;
    flex-shrink: 0;
    text-align: right;
}

.timeline-item .event {
    font-size: 16px;
    color: var(--muted);
    padding-left: 20px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 116px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--secondary);
    border: 2px solid var(--bg);
    box-shadow: 0 0 20px rgba(54, 215, 255, .3);
}

/* ============================================================
   SERVICES
============================================================ */
.services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 24px 40px;
}

.service-card {
    padding: 32px 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: var(--transition);
    text-align: center;
}

.service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(54, 215, 255, .2);
}

.service-icon {
    font-size: 42px;
    margin-bottom: 16px;
}

.service-card h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text);
}

.service-card p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
}

/* ============================================================
   PROJECTS
============================================================ */
.projects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 24px 40px;
}

.project-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
}

.project-card:hover {
    transform: translateY(-6px);
    border-color: rgba(54, 215, 255, .2);
}

.project-image {
    height: 220px;
    background: linear-gradient(135deg, rgba(110, 91, 255, .1), rgba(54, 215, 255, .1));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-info {
    padding: 24px;
}

.project-info h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

.project-info p {
    color: var(--muted);
    font-size: 15px;
    margin-bottom: 14px;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.project-tags span {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--muted);
}

/* ============================================================
   CONTACT
============================================================ */
.contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 24px 40px;
    align-items: start;
}

.contact-left h1 {
    font-size: 48px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.02em;
    margin-bottom: 16px;
}

.contact-left p {
    font-size: 18px;
    color: var(--muted);
    max-width: 400px;
    line-height: 1.8;
}

.contact-info {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-info a {
    font-size: 16px;
    color: var(--muted);
    transition: var(--transition);
}

.contact-info a:hover {
    color: var(--secondary);
}

.contact-right form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-right input,
.contact-right textarea {
    padding: 14px 18px;
    font-size: 15px;
    font-family: inherit;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    transition: var(--transition);
    outline: none;
}

.contact-right input:focus,
.contact-right textarea:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px rgba(54, 215, 255, .1);
}

.contact-right input::placeholder,
.contact-right textarea::placeholder {
    color: var(--dim);
}

.contact-right textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-right .btn {
    align-self: flex-start;
}

/* ============================================================
   FOOTER
============================================================ */
.footer {
    padding: 40px 0;
    border-top: 1px solid var(--border);
    max-width: 1280px;
    margin: 0 auto;
    margin-top: 0px;
}

.footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 24px;
}

.footer p {
    font-size: 14px;
    color: var(--dim);
}

.footer-tagline {
    font-size: 13px;
    color: var(--muted);
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
    .services {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 820px) {
    #main-content {
        padding-top: 80px;  /* ← کمتر برای موبایل */
    }

    .page-title h1 {
        font-size: 32px;
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
        padding: 20px 16px 40px;
    }

    .stat-number {
        font-size: 32px;
    }

    .quote {
        padding: 20px 16px 40px;
    }

    .quote blockquote {
        font-size: 24px;
    }

    .about-box {
        padding: 20px 16px 30px;
    }

    .about-box p {
        font-size: 18px;
    }

    .timeline {
        padding: 20px 16px 30px;
    }

    .timeline::before {
        left: 80px;
    }

    .timeline-item .year {
        width: 70px;
        font-size: 16px;
    }

    .timeline-item::before {
        left: 76px;
        width: 10px;
        height: 10px;
    }

    .services {
        grid-template-columns: 1fr 1fr;
        padding: 20px 16px;
    }

    .projects {
        grid-template-columns: 1fr;
        padding: 20px 16px;
    }

    .contact {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 20px 16px;
    }

    .contact-left {
        text-align: center;
    }

    .contact-left p {
        max-width: 100%;
    }

    .contact-info {
        align-items: center;
    }

    .contact-right .btn {
        align-self: center;
        width: 100%;
        justify-content: center;
    }

    .footer .container {
        flex-direction: column;
        text-align: center;
        padding: 0 16px;
    }
}

@media (max-width: 576px) {
    #main-content {
        padding-top: 70px;  /* ← کمتر برای موبایل کوچک */
    }

    .page-title h1 {
        font-size: 26px;
    }

    .stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 16px;
    }

    .stat-item {
        padding: 18px 12px;
    }

    .stat-number {
        font-size: 28px;
    }

    .quote blockquote {
        font-size: 20px;
    }

    .quote blockquote::before {
        font-size: 40px;
        top: -20px;
        left: -10px;
    }

    .about-box p {
        font-size: 16px;
    }

    .timeline-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 14px 0;
    }

    .timeline::before {
        display: none;
    }

    .timeline-item::before {
        display: none;
    }

    .timeline-item .year {
        width: auto;
        text-align: left;
        font-size: 14px;
    }

    .timeline-item .event {
        padding-left: 0;
        font-size: 14px;
    }

    .services {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 16px;
    }

    .service-card {
        padding: 24px 20px;
    }

    .projects {
        padding: 16px;
        gap: 20px;
    }

    .project-image {
        height: 160px;
    }

    .project-info h2 {
        font-size: 18px;
    }

    .contact {
        padding: 16px;
        gap: 30px;
    }

    .contact-left h1 {
        font-size: 32px;
    }

    .contact-left p {
        font-size: 16px;
    }

    .contact-right input,
    .contact-right textarea {
        font-size: 14px;
        padding: 12px 14px;
    }

    .footer {
        padding: 24px 0;
    }
}

header.header {
    display: none !important;
}

@media (max-width: 480px) {
    .stats-inner {
        gap: 0;
    }

    .stat {
        min-height: 80px;
        padding: 14px 10px;
        gap: 8px;
    }

    .stat-number {
        font-size: 22px;
    }

    .stat-label {
        font-size: 8px;
        max-width: 60px;
    }

    .stat-symbol {
        font-size: 20px;
    }

    .stat:first-child {
        border-left: none;
    }

    .stat {
        border-right: 1px solid rgba(255, 255, 255, 0.04);
    }

    .circuit {
        display: none;
    }

    .circuit-node {
        display: none;
    }
}

/* ============================================================
   PRINT
============================================================ */
@media print {
    body {
        background: #0F1118 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .background-effects,
    .header,
    .footer {
        display: none !important;
    }

    #main-content {
        padding-top: 20px !important;
    }

    .hero {
        min-height: auto !important;
        padding: 20px !important;
    }

    .orb {
        width: 150px !important;
        height: 150px !important;
    }

    .btn-primary {
        background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
        color: #fff !important;
    }

    .stat-number {
        -webkit-text-fill-color: var(--secondary) !important;
        color: var(--secondary) !important;
    }

    .page-title h1 {
        -webkit-text-fill-color: var(--secondary) !important;
        color: var(--secondary) !important;
    }

    .project-card,
    .service-card,
    .stat-item {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}
/* ==========================================================================
   1. کلیدی: رفع مشکل فشرده شدن در مانیتورهای بزرگ، All-in-One و UltraWide
   ========================================================================== */
.hero-content,
.home-intro,
.capabilities-section,
.home-cta,
.stats-container-fluid,
.capabilities-container {
    width: 100% !important;
    max-width: min(92vw, 1680px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(1.2rem, 3vw, 4rem) !important;
    padding-right: clamp(1.2rem, 3vw, 4rem) !important;
}
/* ============================================================
   CAPABILITIES — با خطوط شارپ و نئونی
============================================================ */
.capability-card {
    position: relative;
    min-height: 250px;
    display: grid;
    grid-template-columns: 48px 50px 1fr 30px;
    align-items: start;
    gap: 16px;
    padding: 34px 30px;
    overflow: hidden;
    text-decoration: none;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    isolation: isolate;
    transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    cursor: pointer;
}

/* ===== پس‌زمینه شیشه‌ای ===== */
.capability-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(99, 228, 212, 0.04), transparent 60%);
    opacity: 0.6;
    transition: opacity 0.6s ease;
    z-index: -1;
}

/* ===== خطوط شارپ و نئونی (4 خط) ===== */
.capability-card .tech-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 228, 212, 0.12), transparent);
    transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
}

.capability-card .tech-line::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(99, 228, 212, 0.15);
    box-shadow: 0 0 8px rgba(99, 228, 212, 0.05);
    transition: all 0.4s ease;
}

/* ===== خط 1: بالا سمت چپ ===== */
.capability-card .tech-line-1 {
    top: 12px;
    left: 12px;
    width: 40px;
    transform: rotate(0deg);
}

.capability-card .tech-line-1::after {
    right: -2px;
    top: -1.5px;
}

/* ===== خط 2: پایین سمت چپ (مورب) ===== */
.capability-card .tech-line-2 {
    bottom: 18px;
    left: 10px;
    width: 50px;
    transform: rotate(12deg);
}

.capability-card .tech-line-2::after {
    right: -2px;
    top: -1.5px;
}

/* ===== خط 3: بالا سمت راست (مورب معکوس) ===== */
.capability-card .tech-line-3 {
    top: 20px;
    right: 10px;
    width: 45px;
    transform: rotate(-8deg);
    background: linear-gradient(90deg, transparent, rgba(139, 133, 244, 0.10), transparent);
}

.capability-card .tech-line-3::after {
    left: -2px;
    top: -1.5px;
    background: rgba(139, 133, 244, 0.15);
}

/* ===== خط 4: پایین سمت راست ===== */
.capability-card .tech-line-4 {
    bottom: 12px;
    right: 12px;
    width: 35px;
    transform: rotate(0deg);
}

.capability-card .tech-line-4::after {
    right: -2px;
    top: -1.5px;
}

/* ===== نقطه‌های مدار (4 عدد) ===== */
.capability-card .tech-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(99, 228, 212, 0.06);
    border: 1px solid rgba(99, 228, 212, 0.06);
    box-shadow: 0 0 6px rgba(99, 228, 212, 0.02);
    transition: all 0.5s ease;
}

.capability-card .tech-dot-1 {
    top: 8px;
    right: 20%;
}

.capability-card .tech-dot-2 {
    bottom: 8px;
    left: 25%;
}

.capability-card .tech-dot-3 {
    top: 40%;
    left: 6%;
}

.capability-card .tech-dot-4 {
    top: 30%;
    right: 6%;
}

/* ===== گلو ===== */
.capability-card .cap-glow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(99, 228, 212, 0.10), transparent);
    opacity: 1;
    transform: scaleX(1);
    transition: all 0.6s ease;
}

/* ===== آیکون ===== */
.cap-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(99, 228, 212, 0.10);
    border-radius: 9px;
    color: rgba(99, 228, 212, 0.5);
    background: rgba(99, 228, 212, 0.03);
    font-size: 11px;
    font-weight: 800;
    transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ===== شماره ===== */
.cap-number {
    color: rgba(255, 255, 255, 0.12);
    font-size: 10px;
    font-weight: 700;
    padding-top: 5px;
    transition: color 0.4s ease;
}

/* ===== متن ===== */
.cap-kicker {
    display: block;
    margin-bottom: 9px;
    color: rgba(99, 228, 212, 0.35);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.14em;
    transition: color 0.4s ease;
}

.cap-main h3 {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 25px;
    letter-spacing: -0.035em;
    transition: all 0.4s ease;
}

.cap-main p {
    max-width: 390px;
    margin: 0;
    color: rgba(255, 255, 255, 0.2);
    font-size: 12px;
    line-height: 1.7;
    transition: color 0.4s ease;
}

.cap-arrow {
    color: rgba(255, 255, 255, 0.12);
    font-size: 20px;
    transition: all 0.4s ease;
}

/* ============================================================
   HOVER EFFECTS — خطوط شارپ‌تر و درخشان‌تر
============================================================ */
.capability-card:hover {
    z-index: 3;
    background: rgba(99, 228, 212, 0.04);
    border-color: rgba(99, 228, 212, 0.25);
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(99, 228, 212, 0.04);
}

.capability-card:hover::before {
    opacity: 1;
    background: radial-gradient(circle at 30% 30%, rgba(99, 228, 212, 0.10), transparent 60%);
}

/* ===== خطوط در هاور ===== */
.capability-card:hover .tech-line {
    background: linear-gradient(90deg, transparent, #63e4d4, transparent);
    box-shadow: 0 0 20px rgba(99, 228, 212, 0.08);
}

.capability-card:hover .tech-line::after {
    background: #63e4d4;
    box-shadow: 0 0 16px rgba(99, 228, 212, 0.3);
}

.capability-card:hover .tech-line-1 {
    width: 60px;
}

.capability-card:hover .tech-line-2 {
    width: 70px;
}

.capability-card:hover .tech-line-3 {
    width: 65px;
    background: linear-gradient(90deg, transparent, #8b85f4, transparent);
}

.capability-card:hover .tech-line-4 {
    width: 55px;
}

/* ===== نقطه‌ها در هاور ===== */
.capability-card:hover .tech-dot {
    background: rgba(99, 228, 212, 0.25);
    border-color: rgba(99, 228, 212, 0.4);
    box-shadow: 0 0 16px rgba(99, 228, 212, 0.15);
    transform: scale(1.3);
}

.capability-card:hover .tech-dot-1 {
    top: 6px;
    right: 22%;
}

.capability-card:hover .tech-dot-2 {
    bottom: 6px;
    left: 27%;
}

/* ===== گلو ===== */
.capability-card:hover .cap-glow {
    background: linear-gradient(90deg, transparent, #63e4d4, transparent);
    opacity: 1;
}

/* ===== آیکون ===== */
.capability-card:hover .cap-icon {
    transform: rotate(-6deg) scale(1.06);
    border-color: rgba(99, 228, 212, 0.4);
    color: #63e4d4;
    background: rgba(99, 228, 212, 0.08);
    box-shadow: 0 0 30px rgba(99, 228, 212, 0.09);
}

/* ===== شماره ===== */
.capability-card:hover .cap-number {
    color: rgba(99, 228, 212, 0.5);
}

/* ===== کیکر ===== */
.capability-card:hover .cap-kicker {
    color: rgba(99, 228, 212, 0.7);
}

/* ===== عنوان ===== */
.capability-card:hover .cap-main h3 {
    color: #fff;
    transform: translateX(3px);
}

/* ===== توضیحات ===== */
.capability-card:hover .cap-main p {
    color: rgba(255, 255, 255, 0.5);
}

/* ===== پیکان ===== */
.capability-card:hover .cap-arrow {
    transform: translate(4px, -4px);
    color: #63e4d4;
}
/* ==========================================================================
   1. حذف کامل فاصله اضافی و پرتی چهارخونه بالای هیرو
   ========================================================================== */
.home-hero {
    padding-top: clamp(100px, 8vw, 140px) !important; /* فاصله به حداقل طبیعی رسید */
    margin-top: 10 !important;
    min-height: auto !important;
}

/* ==========================================================================
   2. استایل دکمه منوی هوشمند نئونی (تبدیل به ضربدر تکی بیرون کادر)
   ========================================================================== */
.menu-pill.tech-pill {
    position: fixed;
    top: 40px;
    right: 40px;
    z-index: 10002;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: rgba(10, 16, 29, 0.75);
    border: 1px solid rgba(0, 242, 254, 0.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 100px;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 242, 254, 0.1);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-pill.tech-pill:hover {
    border-color: #00f2fe;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 242, 254, 0.35);
    transform: translateY(-2px);
}

.menu-pill-txt,
.menu-pill-close-txt {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #e2e8f0;
    transition: all 0.3s ease;
}

.menu-pill-close-txt {
    display: none;
    color: #00f2fe;
}

/* ساختار ۳ خط آیکون همبرگری */
.menu-pill-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 20px;
    height: 20px;
}

.menu-pill-icon .bar {
    width: 100%;
    height: 2px;
    background: #00f2fe;
    border-radius: 2px;
    transition: all 0.35s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

/* وقتی منو باز است: تغییر دکمه به حالت CLOSE با ضربدر نئونی */
body.menu-open .menu-pill.tech-pill {
    background: rgba(13, 20, 36, 0.95);
    border-color: #00f2fe;
    box-shadow: 0 0 30px rgba(0, 242, 254, 0.4);
}

body.menu-open .menu-pill-txt { display: none; }
body.menu-open .menu-pill-close-txt { display: inline-block; }

body.menu-open .menu-pill-icon .bar-1 {
    transform: translateY(7px) rotate(45deg);
    background: #00f2fe;
}
body.menu-open .menu-pill-icon .bar-2 {
    opacity: 0;
    transform: translateX(10px);
}
body.menu-open .menu-pill-icon .bar-3 {
    transform: translateY(-7px) rotate(-45deg);
    background: #00f2fe;
}

/* ==========================================================================
   3. پنل منوی فوق لوکس های‌تک (خلوت و بدون ضربدر داخلی)
   ========================================================================== */
.menu-panel.tech-hud-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(440px, 85vw);
    height: 100vh;
    background: rgba(7, 10, 19, 0.88);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-left: 1px solid rgba(0, 242, 254, 0.15);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.7);
    z-index: 10001;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    padding: 100px 40px 40px;
    box-sizing: border-box;
}

body.menu-open .menu-panel.tech-hud-panel {
    transform: translateX(0);
}

.panel-links {
    list-style: none;
    padding: 0;
    margin: auto 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.panel-links li a.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    font-weight: 700;
    color: #94a3b8;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 6px 0;
}

.panel-links li a.nav-item .nav-index {
    font-family: monospace;
    font-size: 0.85rem;
    color: rgba(0, 242, 254, 0.5);
    transition: all 0.3s ease;
}

.panel-links li a.nav-item:hover {
    color: #ffffff;
    transform: translateX(-8px);
}

.panel-links li a.nav-item:hover .nav-index {
    color: #00f2fe;
    text-shadow: 0 0 10px #00f2fe;
}

/* فوتر و استاتوس داخل پنل */
.panel-tech-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.panel-lang-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
}
.lang-title { color: #64748b; letter-spacing: 1px; }
.lang-tag {
    color: #94a3b8;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}
.lang-tag.active, .lang-tag:hover {
    color: #00f2fe;
    border-color: #00f2fe;
    background: rgba(0, 242, 254, 0.1);
}

.system-status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-family: monospace;
    color: #10b981;
    letter-spacing: 1px;
}
.pulse-beacon {
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
    animation: techPulse 1.8s infinite;
}

.panel-close-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    backdrop-filter: blur(10px);
}

.panel-close-btn:hover {
    background: rgba(0, 242, 254, 0.15);
    border-color: #00f2fe;
    color: #00f2fe;
    transform: rotate(90deg) scale(1.08);
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.4);
}

/* ==========================================================================
   2. استایل بخش آمار تکنولوژیک (Cyber-Tech Stats)
   ========================================================================== */
.home-stats-tech {
    position: relative;
    padding: clamp(60px, 8vw, 120px) 0;
    background: radial-gradient(circle at 50% 50%, #0d121f 0%, #060911 100%);
    overflow: hidden;
    border-top: 1px solid rgba(0, 242, 254, 0.12);
    border-bottom: 1px solid rgba(0, 242, 254, 0.12);
}

.tech-grid-overlay {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(0, 242, 254, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 242, 254, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

.tech-glow-orb {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    opacity: 0.25;
}
.tech-glow-orb.orb-left { top: -100px; left: -100px; background: #4facfe; }
.tech-glow-orb.orb-right { bottom: -100px; right: -100px; background: #00f2fe; }

.tech-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    background: rgba(0, 242, 254, 0.06);
    border: 1px solid rgba(0, 242, 254, 0.25);
    border-radius: 100px;
    margin-bottom: 40px;
    font-size: 0.8rem;
    letter-spacing: 2px;
    color: #00f2fe;
    text-transform: uppercase;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: #00f2fe;
    border-radius: 50%;
    box-shadow: 0 0 10px #00f2fe;
    animation: techPulse 2s infinite;
}

@keyframes techPulse {
    0% { transform: scale(0.9); opacity: 0.6; box-shadow: 0 0 4px #00f2fe; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 14px #00f2fe; }
    100% { transform: scale(0.9); opacity: 0.6; box-shadow: 0 0 4px #00f2fe; }
}

.stats-tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 2.5vw, 36px);
    position: relative;
    z-index: 2;
}

.tech-stat-card {
    position: relative;
    background: rgba(13, 19, 33, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: clamp(28px, 3vw, 42px) clamp(20px, 2vw, 30px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tech-stat-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 242, 254, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 242, 254, 0.15);
    background: rgba(18, 26, 45, 0.85);
}

.tech-stat-card.highlight {
    border-color: rgba(79, 172, 254, 0.35);
    background: linear-gradient(180deg, rgba(79, 172, 254, 0.1) 0%, rgba(13, 19, 33, 0.7) 100%);
}

.card-tech-corner {
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: #00f2fe;
    opacity: 0.6;
    pointer-events: none;
    transition: all 0.3s ease;
}
.card-tech-corner.tl { top: 10px; left: 10px; border-top: 2px solid; border-left: 2px solid; }
.card-tech-corner.br { bottom: 10px; right: 10px; border-bottom: 2px solid; border-right: 2px solid; }
.tech-stat-card:hover .card-tech-corner { opacity: 1; width: 14px; height: 14px; }

.stat-icon-wrapper {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(0, 242, 254, 0.08);
    border: 1px solid rgba(0, 242, 254, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00f2fe;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}
.tech-stat-card:hover .stat-icon-wrapper {
    background: #00f2fe;
    color: #060911;
    transform: scale(1.08) rotate(4deg);
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.6);
}

.stat-number-box {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: 'Space Grotesk', 'Vazirmatn', sans-serif;
    font-size: clamp(2.6rem, 4vw, 3.8rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 12px;
}

.stat-plus {
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    color: #00f2fe;
    font-weight: 700;
}

.stat-title {
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    color: #f1f5f9;
    font-weight: 700;
    margin-bottom: 10px;
}

.stat-desc {
    font-size: 0.92rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
}

.stat-bottom-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #4facfe, #00f2fe);
    transition: width 0.4s ease;
}
.tech-stat-card:hover .stat-bottom-line {
    width: 100%;
}

/* ==========================================================================
   3. مدیاکوئری‌های ریسپانسیو اختصاصی (از موبایل تا نمایشگرهای اولتراواید 4K)
   ========================================================================== */
@media (max-width: 1200px) {
    .stats-tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .stats-tech-grid {
        grid-template-columns: 1fr;
    }
    .tech-stat-card {
        padding: 24px 20px;
    }
}

/* مانیتورهای بسیار بزرگ و 2K / 4K (جلوگیری از جمع شدن محتوا در وسط) */
@media (min-width: 1920px) {
    .hero-content,
    .home-intro,
    .capabilities-section,
    .home-cta,
    .stats-container-fluid {
        max-width: 1850px !important;
    }
    
    .stats-tech-grid {
        gap: 40px;
    }
    
    .stat-number-box {
        font-size: 4.2rem;
    }
}
/* حذف کامل هدر منو و جلوگیری از اشغال فضا */
.panel-header,
.panel-label,
#menuClose {
    display: none !important;
}

/* بالانس کردن فاصله داخلی پنل بعد از حذف هدر */
.menu-panel {
    padding-top: 60px !important;
}

/* ============================================================
   CTA — با خطوط شارپ و نقطه‌های درخشان (واضح‌تر)
============================================================ */
.home-cta {
    position: relative;
    max-width: 1280px;
    min-height: 480px;
    margin: 0 auto 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: radial-gradient(circle at 50% 45%, rgba(99, 228, 212, 0.09), transparent 38%), #0b0e15;
}

/* ===== Grid پس‌زمینه (واضح‌تر) ===== */
.cta-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(99, 228, 212, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 228, 212, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.7;
    pointer-events: none;
}

/* ===== خطوط مدار (اضافه شده) ===== */
.cta-circuit {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.4;
}

.cta-circuit svg {
    width: 100%;
    height: 100%;
}

.cta-circuit path {
    stroke-dasharray: 8 8;
    animation: cta-circuit-flow 8s linear infinite;
}

@keyframes cta-circuit-flow {
    0% { stroke-dashoffset: 0; opacity: 0.2; }
    50% { opacity: 0.8; }
    100% { stroke-dashoffset: -100; opacity: 0.2; }
}

/* ===== نقطه‌های درخشان (بزرگ‌تر و واضح‌تر) ===== */
.cta-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.cta-dots span {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(99, 228, 212, 0.25);
    box-shadow: 0 0 12px rgba(99, 228, 212, 0.1);
    animation: cta-dot-float 12s ease-in-out infinite;
}

.cta-dots span:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; }
.cta-dots span:nth-child(2) { top: 25%; right: 15%; animation-delay: 1.5s; }
.cta-dots span:nth-child(3) { bottom: 30%; left: 20%; animation-delay: 3s; }
.cta-dots span:nth-child(4) { bottom: 20%; right: 10%; animation-delay: 0.8s; }
.cta-dots span:nth-child(5) { top: 50%; left: 5%; animation-delay: 2.2s; }
.cta-dots span:nth-child(6) { top: 40%; right: 5%; animation-delay: 4s; }
.cta-dots span:nth-child(7) { bottom: 10%; left: 45%; animation-delay: 1.8s; }
.cta-dots span:nth-child(8) { top: 10%; right: 40%; animation-delay: 3.5s; }
.cta-dots span:nth-child(9) { top: 60%; right: 25%; animation-delay: 2.8s; }
.cta-dots span:nth-child(10) { bottom: 45%; left: 8%; animation-delay: 4.5s; }

@keyframes cta-dot-float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.15;
    }
    25% {
        transform: translate(25px, -20px) scale(1.6);
        opacity: 0.6;
        box-shadow: 0 0 20px rgba(99, 228, 212, 0.2);
    }
    50% {
        transform: translate(-20px, 25px) scale(0.8);
        opacity: 0.3;
        box-shadow: 0 0 8px rgba(99, 228, 212, 0.05);
    }
    75% {
        transform: translate(30px, 15px) scale(1.3);
        opacity: 0.5;
        box-shadow: 0 0 16px rgba(99, 228, 212, 0.15);
    }
}

/* ===== حلقه نئونی (بزرگ‌تر و واضح‌تر) ===== */
.cta-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 1px solid rgba(99, 228, 212, 0.1);
    box-shadow:
        0 0 0 80px rgba(99, 228, 212, 0.02),
        0 0 0 160px rgba(139, 133, 244, 0.015);
    animation: cta-pulse 4s ease-in-out infinite;
}

@keyframes cta-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
        border-color: rgba(99, 228, 212, 0.08);
    }
    50% {
        transform: scale(1.06);
        opacity: 1;
        border-color: rgba(99, 228, 212, 0.15);
    }
}

/* ===== حلقه دوم (اضافه شده) ===== */
.cta-glow-2 {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    border: 1px dashed rgba(139, 133, 244, 0.06);
    animation: cta-pulse-2 6s ease-in-out infinite reverse;
}

@keyframes cta-pulse-2 {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.08) rotate(180deg);
        opacity: 0.6;
    }
}

/* ===== محتوا (واضح‌تر) ===== */
.cta-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 20px;
}

.cta-kicker {
    color: #63e4d4;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(99, 228, 212, 0.15);
}

.cta-inner h2 {
    max-width: 760px;
    margin: 20px auto 35px;
    color: #fff;
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: .95;
    letter-spacing: -.06em;
    text-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
}

.cta-inner h2 em {
    display: block;
    color: rgba(255, 255, 255, 0.25);
    font-style: normal;
    font-weight: 400;
    text-shadow: none;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 40px;
    padding: 15px 18px 15px 22px;
    border-radius: 7px;
    background: #fff;
    color: #020613;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: transform .35s, box-shadow .35s;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.02);
}

.cta-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 50px rgba(255, 255, 255, .15);
}

@keyframes home-pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50% { opacity: .55; transform: scale(.8); }
}

@keyframes backdrop-float {
    0%,100% { transform: scale(1) translateY(0); opacity: .8; }
    50% { transform: scale(1.08) translateY(-10px); opacity: 1; }
}

@keyframes orbit-spin {
    to { transform: rotate(342deg); }
}

@keyframes floating-card {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

@keyframes browser-entry {
    from { opacity: 0; transform: perspective(1400px) rotateY(-15deg) rotateX(8deg) translateY(30px); }
    to { opacity: 1; transform: perspective(1400px) rotateY(-7deg) rotateX(3deg) rotateZ(1deg); }
}


/* ============================================================
   HOME page — FUTURISTIC GLASS / DIGITAL SYSTEM
   Visual-only redesign — HTML, Django tags, text and JS intact.
   ============================================================ */

:root{
    --hz-bg:#07090d;
    --hz-panel:rgba(18,24,31,.46);
    --hz-panel-2:rgba(255,255,255,.055);
    --hz-line:rgba(205,231,236,.14);
    --hz-soft-line:rgba(205,231,236,.075);
    --hz-cyan:#8bd8d5;
    --hz-cyan-soft:rgba(139,216,213,.16);
    --hz-violet:#a19cf5;
    --hz-white:#eef4f6;
    --hz-muted:rgba(238,244,246,.52);
    --hz-ease:cubic-bezier(.22,.61,.36,1);
}

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

.home-hero{
    position:relative;
    min-height:100vh;
    max-width:1440px;
    margin:0 auto;
    padding:clamp(100px,12vw,140px) clamp(24px,5vw,72px) 60px;
    overflow:hidden;
    isolation:isolate;
    background:
        radial-gradient(circle at 68% 42%,rgba(139,216,213,.055),transparent 31%),
        radial-gradient(circle at 88% 70%,rgba(161,156,245,.045),transparent 28%),
        linear-gradient(135deg,#07090d 0%,#090c11 48%,#06080c 100%);
}

.home-hero::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.42;
    background-image:
        linear-gradient(rgba(190,220,225,.018) 1px,transparent 1px),
        linear-gradient(90deg,rgba(190,220,225,.018) 1px,transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(ellipse at 67% 45%,black 10%,transparent 72%);
    -webkit-mask-image:radial-gradient(ellipse at 67% 45%,black 10%,transparent 72%);
}

.home-hero::after{
    content:"";
    position:absolute;
    width:720px;
    height:720px;
    right:-210px;
    top:50%;
    transform:translateY(-50%);
    border:1px solid rgba(139,216,213,.035);
    border-radius:50%;
    box-shadow:
        0 0 0 80px rgba(139,216,213,.012),
        0 0 0 180px rgba(161,156,245,.008);
    pointer-events:none;
    z-index:-1;
}

.hero-noise{
    position:absolute;
    inset:0;
    z-index:0;
    opacity:.018;
    pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.hero-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(100px);
    pointer-events:none;
    z-index:-1;
}

.hero-orb-one{
    width:360px;
    height:360px;
    right:23%;
    top:25%;
    background:rgba(139,216,213,.045);
}

.hero-orb-two{
    width:300px;
    height:300px;
    right:3%;
    bottom:0;
    background:rgba(161,156,245,.035);
}

.home-hero-inner{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,.78fr) minmax(460px,1.22fr);
    align-items:center;
    gap:clamp(38px,5vw,78px);
    min-height:650px;
}

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

.hero-copy{
    max-width:670px;
    position:relative;
    z-index:5;
}

.eyebrow{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--hz-cyan);
    font-size:10px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.status-dot{
    width:7px;
    height:7px;
    flex:0 0 7px;
    border-radius:50%;
    background:var(--hz-cyan);
    box-shadow:0 0 0 4px rgba(139,216,213,.07),0 0 20px rgba(139,216,213,.5);
    animation:home-pulse 2.8s ease-in-out infinite;
}

@keyframes home-pulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.5;transform:scale(.78)}
}

.eyebrow-line{
    width:48px;
    height:1px;
    background:linear-gradient(90deg,var(--hz-cyan),transparent);
}

.hero-copy h1{
    margin:28px 0 26px;
    max-width:720px;
    font-size:clamp(3.8rem,7vw,7rem);
    line-height:.91;
    letter-spacing:-.065em;
    font-weight:800;
    color:#f3f7f8;
}

.headline-muted{
    display:block;
    color:rgba(243,247,248,.27);
    font-weight:400;
}

.headline-gradient{
    display:block;
    background:linear-gradient(110deg,#f4f8f9 4%,var(--hz-cyan) 48%,var(--hz-violet) 94%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-description{
    max-width:560px;
    margin:0;
    color:var(--hz-muted);
    font-size:clamp(15px,1.35vw,18px);
    line-height:1.8;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:11px;
    margin-top:36px;
}

.hero-btn{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-width:166px;
    padding:14px 18px 14px 21px;
    border-radius:10px;
    text-decoration:none;
    font-size:13px;
    font-weight:650;
    transition:all .4s var(--hz-ease);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.hero-btn:hover{transform:translateY(-3px)}

.hero-btn-primary{
    color:#071011;
    background:linear-gradient(135deg,rgba(219,245,243,.95),rgba(139,216,213,.9));
    border:1px solid rgba(230,255,253,.55);
    box-shadow:0 14px 40px rgba(139,216,213,.1);
}

.hero-btn-primary:hover{
    box-shadow:0 18px 50px rgba(139,216,213,.2);
}

.hero-btn-secondary{
    color:rgba(245,249,250,.8);
    background:rgba(255,255,255,.028);
    border:1px solid rgba(210,232,235,.11);
}

.hero-btn-secondary:hover{
    color:#fff;
    border-color:rgba(139,216,213,.32);
    background:rgba(139,216,213,.045);
}

.btn-arrow{font-size:18px;line-height:1}

.hero-proof{
    display:flex;
    align-items:center;
    gap:22px;
    margin-top:50px;
    padding:14px 18px;
    width:max-content;
    max-width:100%;
    border:1px solid rgba(205,231,236,.07);
    border-radius:13px;
    background:linear-gradient(135deg,rgba(255,255,255,.032),rgba(255,255,255,.012));
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.proof-item{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.proof-item strong{
    color:#eef4f6;
    font-size:20px;
    font-weight:750;
}

.proof-item span{
    color:rgba(238,244,246,.36);
    font-size:9px;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.proof-divider{
    width:1px;
    height:28px;
    background:rgba(205,231,236,.1);
}

/* ============================================================
   FUTURISTIC GLASS VISUAL
   ============================================================ */

.hero-visual{
    position:relative;
    min-height:650px;
    display:flex;
    align-items:center;
    justify-content:center;
    isolation:isolate;
    perspective:1800px;
}

.visual-backdrop{
    position:absolute;
    width:72%;
    height:72%;
    border-radius:50%;
    background:
        radial-gradient(circle,rgba(139,216,213,.11) 0%,rgba(161,156,245,.045) 36%,transparent 72%);
    filter:blur(32px);
    z-index:-3;
    animation:backdrop-float 8s ease-in-out infinite;
}

@keyframes backdrop-float{
    0%,100%{transform:scale(1) translateY(0);opacity:.62}
    50%{transform:scale(1.08) translateY(-12px);opacity:1}
}

.orbit{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.orbit-outer{
    width:96%;
    aspect-ratio:1;
    border:1px solid rgba(205,231,236,.035);
    transform:rotate(-14deg);
}

.orbit-middle{
    width:78%;
    aspect-ratio:1;
    border:1px dashed rgba(139,216,213,.055);
    transform:rotate(-14deg);
    animation:orbit-spin 42s linear infinite;
}

@keyframes orbit-spin{
    to{transform:rotate(346deg)}
}

.orbit-node{
    position:absolute;
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:12px;
    background:rgba(10,14,18,.6);
    border:1px solid rgba(205,231,236,.1);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    color:rgba(238,244,246,.65);
    font:700 10px/1 Inter,sans-serif;
    box-shadow:0 15px 35px rgba(0,0,0,.28);
}

.node-one{top:8%;left:14%;color:var(--hz-cyan)}
.node-two{right:6%;top:38%;color:var(--hz-violet)}
.node-three{bottom:7%;left:20%;color:#fff}

/* ============================================================
   MAIN GLASS DEVICE
   ============================================================ */

.browser-card{
    position:relative;
    z-index:4;
    width:min(100%,620px);
    min-height:455px;
    overflow:visible;
    border-radius:20px;
    background:
        linear-gradient(135deg,rgba(221,240,242,.12) 0%,rgba(53,67,76,.13) 28%,rgba(9,14,19,.5) 100%);
    border:1px solid rgba(201,226,231,.22);
    backdrop-filter:blur(28px) saturate(125%);
    -webkit-backdrop-filter:blur(28px) saturate(125%);
    box-shadow:
        0 55px 100px rgba(0,0,0,.58),
        0 22px 55px rgba(0,0,0,.38),
        0 0 70px rgba(139,216,213,.035),
        inset 1px 1px 0 rgba(255,255,255,.17),
        inset -1px -1px 0 rgba(255,255,255,.025);
    transform:perspective(1500px) rotateY(-10deg) rotateX(4deg) rotateZ(1deg);
    transform-style:preserve-3d;
    transition:transform .8s var(--hz-ease),box-shadow .8s,border-color .6s;
    animation:browser-entry 1.15s var(--hz-ease) both;
}

/* Rear glass slabs — visually inspired by the supplied reference */
.browser-card::before,
.browser-card::after{
    content:"";
    position:absolute;
    z-index:-2;
    border:1px solid rgba(190,220,226,.13);
    background:linear-gradient(145deg,rgba(146,178,187,.09),rgba(9,14,19,.24));
    border-radius:18px;
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,.08),
        0 25px 50px rgba(0,0,0,.24);
    pointer-events:none;
}

.browser-card::before{
    width:86%;
    height:82%;
    top:-28px;
    left:14%;
    transform:translateZ(-32px) rotate(-1.5deg);
}

.browser-card::after{
    width:92%;
    height:78%;
    bottom:-40px;
    left:6%;
    transform:translateZ(-54px) rotate(.8deg);
    opacity:.7;
}

.browser-card:hover{
    transform:perspective(1500px) rotateY(-2deg) rotateX(1deg) rotateZ(0) translateY(-8px);
    border-color:rgba(139,216,213,.25);
    box-shadow:
        0 70px 125px rgba(0,0,0,.65),
        0 25px 70px rgba(0,0,0,.38),
        0 0 110px rgba(139,216,213,.07),
        inset 1px 1px 0 rgba(255,255,255,.2);
}

@keyframes browser-entry{
    from{
        opacity:0;
        transform:perspective(1500px) rotateY(-22deg) rotateX(10deg) translateY(35px);
    }
    to{
        opacity:1;
        transform:perspective(1500px) rotateY(-10deg) rotateX(4deg) rotateZ(1deg);
    }
}

.browser-card-bg{
    position:absolute;
    inset:0;
    z-index:-2;
    border-radius:20px;
    overflow:hidden;
    background:
        radial-gradient(ellipse at 20% 15%,rgba(203,232,235,.09),transparent 38%),
        radial-gradient(ellipse at 82% 75%,rgba(139,216,213,.055),transparent 42%),
        linear-gradient(135deg,rgba(255,255,255,.055),transparent 45%);
}

.browser-card-bg::before{
    content:"";
    position:absolute;
    width:55%;
    height:140%;
    left:-18%;
    top:-25%;
    transform:rotate(20deg);
    background:linear-gradient(90deg,transparent,rgba(220,243,244,.055),transparent);
    filter:blur(10px);
}

.browser-card-glow-1{
    position:absolute;
    top:-25%;
    right:-18%;
    width:65%;
    height:65%;
    z-index:-1;
    border-radius:50%;
    background:radial-gradient(circle,rgba(139,216,213,.09),transparent 70%);
    filter:blur(55px);
    opacity:.7;
    transition:all 1s ease;
}

.browser-card-glow-2{
    position:absolute;
    bottom:-25%;
    left:-18%;
    width:65%;
    height:65%;
    z-index:-1;
    border-radius:50%;
    background:radial-gradient(circle,rgba(161,156,245,.06),transparent 70%);
    filter:blur(60px);
    opacity:.5;
    transition:all 1s ease;
}

.browser-card:hover .browser-card-glow-1{
    opacity:1;
    transform:scale(1.12);
}

.browser-card:hover .browser-card-glow-2{
    opacity:.8;
    transform:scale(1.1);
}

.browser-card-shine{
    position:absolute;
    inset:0;
    z-index:5;
    border-radius:20px;
    pointer-events:none;
    background:
        linear-gradient(118deg,rgba(255,255,255,.09) 0%,transparent 19%,transparent 62%,rgba(255,255,255,.025) 100%),
        linear-gradient(180deg,rgba(255,255,255,.025),transparent 18%);
    mix-blend-mode:screen;
}

.browser-card-border-glow{
    position:absolute;
    inset:-2px;
    z-index:-1;
    border-radius:22px;
    background:linear-gradient(135deg,rgba(221,246,247,.22),rgba(139,216,213,.08),rgba(161,156,245,.06),transparent 65%);
    filter:blur(9px);
    opacity:.42;
    transition:opacity .6s ease;
}

.browser-card:hover .browser-card-border-glow{opacity:.85}

/* ============================================================
   TOP EDGE — kept structurally, visually minimized
   ============================================================ */

.browser-topbar{
    position:relative;
    z-index:6;
    height:34px;
    display:grid;
    grid-template-columns:70px 1fr 70px;
    align-items:center;
    padding:0 12px;
    border-bottom:1px solid rgba(205,231,236,.065);
    background:rgba(255,255,255,.018);
}

.browser-dots{display:flex;gap:5px}

.browser-dots span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:rgba(221,239,242,.12);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}

.browser-dots span:nth-child(1){background:rgba(205,231,236,.2)}
.browser-dots span:nth-child(2){background:rgba(139,216,213,.22)}
.browser-dots span:nth-child(3){background:rgba(161,156,245,.22)}

.browser-address{
    justify-self:center;
    min-width:180px;
    padding:4px 14px;
    border-radius:7px;
    background:rgba(0,0,0,.13);
    color:rgba(238,244,246,.28);
    font-size:8px;
    text-align:center;
    letter-spacing:.04em;
    border:1px solid rgba(205,231,236,.055);
}

.address-lock{margin-right:6px;color:var(--hz-cyan)}

.browser-menu{
    justify-self:end;
    color:rgba(238,244,246,.15);
    font-size:9px;
    letter-spacing:3px;
}

/* ============================================================
   INNER DASHBOARD
   ============================================================ */

.browser-content{
    position:relative;
    z-index:2;
    min-height:420px;
    padding:26px 28px 24px;
    overflow:hidden;
    border-radius:0 0 20px 20px;
}

.browser-content-bg{
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        radial-gradient(ellipse at 25% 28%,rgba(139,216,213,.035),transparent 50%),
        radial-gradient(ellipse at 80% 65%,rgba(161,156,245,.025),transparent 55%);
}

.browser-content::before{
    content:"";
    position:absolute;
    inset:14px;
    border:1px solid rgba(205,231,236,.035);
    border-radius:13px;
    pointer-events:none;
}

.browser-content::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background-image:
        linear-gradient(rgba(220,240,242,.016) 1px,transparent 1px),
        linear-gradient(90deg,rgba(220,240,242,.016) 1px,transparent 1px);
    background-size:32px 32px;
    mask-image:radial-gradient(ellipse at center,black 30%,transparent 82%);
    -webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 82%);
    pointer-events:none;
}

.mini-nav{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.mini-brand{
    color:#eef5f6;
    font-size:16px;
    font-weight:800;
    letter-spacing:-.05em;
    text-shadow:0 0 35px rgba(139,216,213,.08);
}

.mini-brand span{
    color:var(--hz-cyan);
    text-shadow:0 0 25px rgba(139,216,213,.18);
}

.mini-nav-links{
    display:flex;
    gap:18px;
    color:rgba(238,244,246,.22);
    font-size:7px;
    letter-spacing:.08em;
}

.mini-hero{
    position:relative;
    z-index:3;
    padding:55px 10px 35px;
}

.mini-kicker{
    margin-bottom:14px;
    color:rgba(139,216,213,.8);
    font-size:8px;
    letter-spacing:.2em;
    text-shadow:0 0 24px rgba(139,216,213,.12);
}

.mini-title{
    color:#eef4f5;
    font-size:clamp(38px,4.5vw,60px);
    line-height:.86;
    letter-spacing:-.07em;
    font-weight:800;
    text-shadow:0 8px 50px rgba(0,0,0,.4);
}

.mini-title em{
    color:rgba(238,244,246,.16);
    font-weight:400;
    font-style:normal;
}

.mini-line{
    width:76px;
    height:1px;
    margin:20px 0 14px;
    background:linear-gradient(90deg,var(--hz-cyan),transparent);
    box-shadow:0 0 20px rgba(139,216,213,.16);
}

.mini-bottom{
    display:flex;
    justify-content:space-between;
    color:rgba(238,244,246,.22);
    font-size:7.5px;
    letter-spacing:.06em;
}

.mini-project-grid{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr;
    gap:8px;
    padding:0 10px;
}

.mini-project{
    position:relative;
    height:68px;
    border-radius:9px;
    border:1px solid rgba(205,231,236,.07);
    background:linear-gradient(135deg,rgba(218,239,241,.06),rgba(255,255,255,.012));
    box-shadow:inset 1px 1px 0 rgba(255,255,255,.045);
    transition:all .4s var(--hz-ease);
    overflow:hidden;
}

.mini-project::before{
    content:"";
    position:absolute;
    width:70%;
    height:140%;
    left:-20%;
    top:-35%;
    transform:rotate(22deg);
    background:linear-gradient(90deg,transparent,rgba(211,238,239,.06),transparent);
}

.mini-project:hover{
    transform:translateY(-3px);
    border-color:rgba(139,216,213,.18);
    box-shadow:0 12px 30px rgba(0,0,0,.24),inset 1px 1px 0 rgba(255,255,255,.07);
}

.mini-project-a{
    background:linear-gradient(135deg,rgba(139,216,213,.09),rgba(139,216,213,.018));
    border-color:rgba(139,216,213,.09);
}

.mini-project-b{
    background:linear-gradient(135deg,rgba(161,156,245,.065),rgba(161,156,245,.012));
    border-color:rgba(161,156,245,.065);
}

.mini-project-c{
    background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
}

.project-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,transparent 50%,rgba(0,0,0,.17) 100%),
        radial-gradient(circle at 75% 25%,rgba(255,255,255,.055),transparent 35%);
    pointer-events:none;
}

/* ============================================================
   FLOATING GLASS MODULES
   ============================================================ */

.floating-card{
    position:absolute;
    z-index:7;
    display:flex;
    align-items:center;
    gap:10px;
    min-width:130px;
    padding:10px 14px;
    border-radius:12px;
    background:linear-gradient(135deg,rgba(211,236,239,.085),rgba(255,255,255,.018));
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(205,231,236,.12);
    box-shadow:
        0 24px 45px rgba(0,0,0,.34),
        inset 1px 1px 0 rgba(255,255,255,.09);
    animation:floating-card 5.5s ease-in-out infinite;
}

.floating-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(120deg,rgba(255,255,255,.045),transparent 42%);
    pointer-events:none;
}

.floating-card-top{top:14%;right:-2%}
.floating-card-bottom{bottom:13%;left:-4%;animation-delay:-2.3s}

@keyframes floating-card{
    0%,100%{transform:translateY(0) rotate(0)}
    50%{transform:translateY(-9px) rotate(.5deg)}
}

.floating-icon{
    display:grid;
    place-items:center;
    width:27px;
    height:27px;
    border-radius:7px;
    background:rgba(139,216,213,.07);
    border:1px solid rgba(139,216,213,.1);
    color:var(--hz-cyan);
    font-size:8px;
    font-weight:700;
}

.floating-card strong{
    color:rgba(238,244,246,.86);
    font-size:10px;
    display:block;
}

.floating-card small{
    margin-top:2px;
    color:rgba(238,244,246,.3);
    font-size:7px;
    display:block;
}

.availability-card{
    position:absolute;
    right:3%;
    bottom:3%;
    z-index:8;
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    border-radius:100px;
    background:rgba(139,216,213,.035);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(139,216,213,.1);
    color:rgba(238,244,246,.46);
    font-size:8px;
}

.availability-pulse{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--hz-cyan);
    box-shadow:0 0 0 4px rgba(139,216,213,.055),0 0 18px rgba(139,216,213,.5);
    animation:home-pulse 2.5s ease-in-out infinite;
}

.hero-scroll{
    position:absolute;
    bottom:30px;
    left:clamp(24px,5vw,72px);
    z-index:4;
    display:flex;
    align-items:center;
    gap:12px;
    color:rgba(238,244,246,.2);
    font-size:9px;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.scroll-line{
    width:40px;
    height:1px;
    background:linear-gradient(90deg,rgba(205,231,236,.2),transparent);
}

/* ============================================================
   STATS
   ============================================================ */

.home-stats-tech{
    position:relative;
    padding:clamp(60px,8vw,120px) 0;
    background:
        radial-gradient(circle at 50% 45%,rgba(139,216,213,.035),transparent 42%),
        linear-gradient(180deg,#080b10,#06080c);
    overflow:hidden;
    border-top:1px solid rgba(139,216,213,.09);
    border-bottom:1px solid rgba(139,216,213,.09);
}

.tech-grid-overlay{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(139,216,213,.018) 1px,transparent 1px),
        linear-gradient(90deg,rgba(139,216,213,.018) 1px,transparent 1px);
    background-size:42px 42px;
    pointer-events:none;
    mask-image:radial-gradient(ellipse at center,black 35%,transparent 82%);
    -webkit-mask-image:radial-gradient(ellipse at center,black 35%,transparent 82%);
}

.tech-glow-orb{
    position:absolute;
    width:380px;
    height:380px;
    border-radius:50%;
    filter:blur(120px);
    pointer-events:none;
    opacity:.16;
}

.tech-glow-orb.orb-left{top:-120px;left:-100px;background:#6bbfca}
.tech-glow-orb.orb-right{bottom:-120px;right:-100px;background:#8b85f4}

.tech-status-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:6px 15px;
    background:rgba(139,216,213,.035);
    border:1px solid rgba(139,216,213,.15);
    border-radius:100px;
    margin-bottom:40px;
    font-size:.8rem;
    letter-spacing:2px;
    color:var(--hz-cyan);
    text-transform:uppercase;
    backdrop-filter:blur(15px);
}

.stats-container-fluid{
    width:100%!important;
    max-width:min(92vw,1680px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:clamp(1.2rem,3vw,4rem)!important;
    padding-right:clamp(1.2rem,3vw,4rem)!important;
}

.stats-tech-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:clamp(18px,2.5vw,32px);
    position:relative;
    z-index:2;
}

.tech-stat-card{
    position:relative;
    background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
    border:1px solid rgba(205,231,236,.09);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    border-radius:17px;
    padding:clamp(28px,3vw,42px) clamp(20px,2vw,30px);
    transition:all .45s var(--hz-ease);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow:inset 1px 1px 0 rgba(255,255,255,.045),0 20px 45px rgba(0,0,0,.12);
}

.tech-stat-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(125deg,rgba(255,255,255,.045),transparent 35%);
    pointer-events:none;
}

.tech-stat-card:hover{
    transform:translateY(-7px);
    border-color:rgba(139,216,213,.28);
    box-shadow:0 25px 55px rgba(0,0,0,.45),0 0 35px rgba(139,216,213,.06),inset 1px 1px 0 rgba(255,255,255,.08);
    background:linear-gradient(145deg,rgba(139,216,213,.065),rgba(255,255,255,.018));
}

.tech-stat-card.highlight{
    border-color:rgba(139,216,213,.17);
    background:linear-gradient(145deg,rgba(139,216,213,.065),rgba(255,255,255,.018));
}

.card-tech-corner{
    position:absolute;
    width:9px;
    height:9px;
    border-color:rgba(139,216,213,.6);
    opacity:.55;
    pointer-events:none;
}

.card-tech-corner.tl{top:9px;left:9px;border-top:1px solid;border-left:1px solid}
.card-tech-corner.br{bottom:9px;right:9px;border-bottom:1px solid;border-right:1px solid}
.tech-stat-card:hover .card-tech-corner{opacity:1;width:13px;height:13px}

.stat-icon-wrapper{
    width:52px;
    height:52px;
    border-radius:13px;
    background:rgba(139,216,213,.045);
    border:1px solid rgba(139,216,213,.14);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--hz-cyan);
    margin-bottom:24px;
    transition:all .35s ease;
}

.tech-stat-card:hover .stat-icon-wrapper{
    background:rgba(139,216,213,.12);
    transform:scale(1.06);
    box-shadow:0 0 25px rgba(139,216,213,.09);
}

.stat-number-box{
    display:flex;
    align-items:baseline;
    gap:4px;
    font-family:'Space Grotesk','Vazirmatn',sans-serif;
    font-size:clamp(2.6rem,4vw,3.8rem);
    font-weight:800;
    color:#f2f6f7;
    line-height:1;
    margin-bottom:12px;
}

.stat-plus{
    font-size:clamp(1.8rem,2.5vw,2.4rem);
    color:var(--hz-cyan);
    font-weight:700;
}

.stat-title{
    font-size:clamp(1.05rem,1.3vw,1.25rem);
    color:#edf3f4;
    font-weight:700;
    margin-bottom:10px;
}

.stat-desc{
    font-size:.92rem;
    color:#8e9aa4;
    line-height:1.6;
    margin:0;
}

.stat-bottom-line{
    position:absolute;
    bottom:0;
    left:0;
    width:0%;
    height:2px;
    background:linear-gradient(90deg,transparent,var(--hz-cyan),transparent);
    transition:width .45s ease;
}

.tech-stat-card:hover .stat-bottom-line{width:100%}

/* ============================================================
   INTRO / CAPABILITIES / CTA
   ============================================================ */

.home-intro{
    max-width:1280px;
    margin:0 auto;
    padding:clamp(100px,12vw,170px) 24px;
    display:grid;
    grid-template-columns:.7fr 1.8fr;
    gap:80px;
}

.intro-label,
.section-label{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--hz-cyan);
    font-size:10px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.intro-content h2{
    margin:0;
    max-width:850px;
    color:#edf3f4;
    font-size:clamp(2.3rem,5vw,5rem);
    line-height:1;
    letter-spacing:-.055em;
    font-weight:700;
}

.intro-content p{
    max-width:650px;
    margin:32px 0 28px;
    color:rgba(238,244,246,.43);
    font-size:16px;
    line-height:1.8;
}

.text-link{
    display:inline-flex;
    align-items:center;
    gap:15px;
    color:#edf3f4;
    text-decoration:none;
    font-size:12px;
    font-weight:650;
    border-bottom:1px solid rgba(205,231,236,.16);
    padding-bottom:8px;
    transition:gap .3s,color .3s,border-color .3s;
}

.text-link:hover{gap:22px;color:var(--hz-cyan);border-color:var(--hz-cyan)}

.capabilities-section{
    max-width:1280px;
    margin:0 auto;
    padding:0 24px clamp(110px,13vw,170px);
}

.capabilities-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:30px;
}

.capabilities-heading p{
    margin:0;
    color:rgba(238,244,246,.29);
    font-size:11px;
}

.capabilities-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    border-top:1px solid rgba(205,231,236,.08);
    border-left:1px solid rgba(205,231,236,.08);
}

.capability-card{
    position:relative;
    min-height:240px;
    display:grid;
    grid-template-columns:48px 50px 1fr 30px;
    align-items:start;
    gap:16px;
    padding:34px 30px;
    overflow:hidden;
    text-decoration:none;
    border-right:1px solid rgba(205,231,236,.075);
    border-bottom:1px solid rgba(205,231,236,.075);
    background:rgba(255,255,255,.014);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    isolation:isolate;
    transition:all .5s var(--hz-ease);
    cursor:pointer;
}

.capability-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 30% 30%,rgba(139,216,213,.045),transparent 60%);
    opacity:.5;
    transition:opacity .6s ease;
    z-index:-1;
}

.capability-card:hover{
    z-index:3;
    background:rgba(139,216,213,.035);
    border-color:rgba(139,216,213,.24);
    transform:translateY(-5px);
    box-shadow:0 16px 45px rgba(0,0,0,.24);
}

.cap-glow{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(139,216,213,.18),transparent);
}

.capability-card:hover .cap-glow{background:linear-gradient(90deg,transparent,var(--hz-cyan),transparent)}

.cap-number{
    color:rgba(238,244,246,.13);
    font-size:10px;
    font-weight:700;
    padding-top:5px;
}

.cap-icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border:1px solid rgba(139,216,213,.12);
    border-radius:10px;
    color:rgba(139,216,213,.62);
    background:rgba(139,216,213,.025);
    font-size:11px;
    font-weight:800;
    transition:all .45s var(--hz-ease);
}

.capability-card:hover .cap-icon{
    transform:rotate(-7deg) scale(1.07);
    border-color:rgba(139,216,213,.36);
    color:var(--hz-cyan);
    background:rgba(139,216,213,.07);
    box-shadow:0 0 28px rgba(139,216,213,.08);
}

.cap-kicker{
    display:block;
    margin-bottom:9px;
    color:rgba(139,216,213,.38);
    font-size:8px;
    font-weight:700;
    letter-spacing:.14em;
}

.cap-main h3{
    margin:0 0 12px;
    color:rgba(238,244,246,.65);
    font-size:25px;
    letter-spacing:-.035em;
    transition:all .4s ease;
}

.capability-card:hover .cap-main h3{color:#fff;transform:translateX(3px)}

.cap-main p{
    max-width:390px;
    margin:0;
    color:rgba(238,244,246,.2);
    font-size:12px;
    line-height:1.7;
    transition:color .4s ease;
}

.capability-card:hover .cap-main p{color:rgba(238,244,246,.48)}

.cap-arrow{
    color:rgba(238,244,246,.13);
    font-size:20px;
    transition:all .4s ease;
}

.capability-card:hover .cap-arrow{transform:translate(4px,-4px);color:var(--hz-cyan)}

.tech-trace{
    position:absolute;
    width:30px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(139,216,213,.1));
    opacity:.6;
    transform-origin:left center;
    transition:all .5s var(--hz-ease);
}

.tech-trace::before{
    content:"";
    position:absolute;
    left:0;
    top:-2px;
    width:4px;
    height:4px;
    border:1px solid rgba(139,216,213,.18);
    border-radius:50%;
    background:rgba(7,9,13,.7);
}

.trace-a{left:0;bottom:28px;transform:rotate(-12deg)}
.trace-b{right:-10px;top:34px;transform:rotate(145deg);background:linear-gradient(90deg,transparent,rgba(161,156,245,.1))}
.capability-card:hover .tech-trace{width:60px;opacity:1}

.cap-node{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:rgba(139,216,213,.08);
    box-shadow:0 0 8px rgba(139,216,213,.08);
    opacity:.5;
    transition:all .5s ease;
}

.node-left{left:7%;bottom:11%}
.node-right{right:9%;top:14%}
.capability-card:hover .cap-node{
    opacity:1;
    transform:scale(1.8);
    background:rgba(139,216,213,.4);
    box-shadow:0 0 16px rgba(139,216,213,.2);
}

/* ============================================================
   CTA
   ============================================================ */

.home-cta{
    position:relative;
    max-width:1280px;
    min-height:480px;
    margin:0 auto 80px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border:1px solid rgba(205,231,236,.08);
    border-radius:18px;
    background:
        radial-gradient(circle at 50% 45%,rgba(139,216,213,.075),transparent 38%),
        linear-gradient(145deg,#0b0e14,#080b10);
}

.cta-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(139,216,213,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(139,216,213,.025) 1px,transparent 1px);
    background-size:40px 40px;
    opacity:.7;
    pointer-events:none;
}

.cta-circuit{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.3;
    z-index:1;
}

.cta-circuit svg{width:100%;height:100%}
.cta-circuit path{stroke-dasharray:8 8;animation:cta-circuit-flow 8s linear infinite}
.cta-circuit path:nth-child(2){animation-delay:2s}
.cta-circuit path:nth-child(3){animation-delay:4s}

@keyframes cta-circuit-flow{
    0%{stroke-dashoffset:0;opacity:.15}
    50%{opacity:.65}
    100%{stroke-dashoffset:-100;opacity:.15}
}

.cta-dots span{
    position:absolute;
    width:5px;
    height:5px;
    border-radius:50%;
    background:rgba(139,216,213,.22);
    box-shadow:0 0 12px rgba(139,216,213,.08);
    animation:cta-dot-float 12s ease-in-out infinite;
}

.cta-dots span:nth-child(1){top:15%;left:10%;animation-delay:0s}
.cta-dots span:nth-child(2){top:25%;right:15%;animation-delay:1.5s}
.cta-dots span:nth-child(3){bottom:30%;left:20%;animation-delay:3s}
.cta-dots span:nth-child(4){bottom:20%;right:10%;animation-delay:.8s}
.cta-dots span:nth-child(5){top:50%;left:5%;animation-delay:2.2s}
.cta-dots span:nth-child(6){top:40%;right:5%;animation-delay:4s}
.cta-dots span:nth-child(7){bottom:10%;left:45%;animation-delay:1.8s}
.cta-dots span:nth-child(8){top:10%;right:40%;animation-delay:3.5s}
.cta-dots span:nth-child(9){top:60%;right:25%;animation-delay:2.8s}
.cta-dots span:nth-child(10){bottom:45%;left:8%;animation-delay:4.5s}

@keyframes cta-dot-float{
    0%,100%{transform:translate(0,0) scale(1);opacity:.12}
    25%{transform:translate(25px,-20px) scale(1.5);opacity:.5}
    50%{transform:translate(-20px,25px) scale(.8);opacity:.25}
    75%{transform:translate(30px,15px) scale(1.25);opacity:.45}
}

.cta-glow{
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    border:1px solid rgba(139,216,213,.07);
    box-shadow:0 0 0 70px rgba(139,216,213,.012),0 0 0 140px rgba(161,156,245,.008);
    animation:cta-pulse 4s ease-in-out infinite;
    z-index:0;
}

.cta-glow-2{
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    border:1px dashed rgba(161,156,245,.05);
    animation:cta-pulse-2 6s ease-in-out infinite reverse;
    z-index:0;
}

@keyframes cta-pulse{
    0%,100%{transform:scale(1);opacity:.55}
    50%{transform:scale(1.06);opacity:1}
}

@keyframes cta-pulse-2{
    0%,100%{transform:scale(1) rotate(0);opacity:.25}
    50%{transform:scale(1.08) rotate(180deg);opacity:.55}
}

.cta-inner{
    position:relative;
    z-index:2;
    text-align:center;
    padding:20px;
}

.cta-kicker{
    color:var(--hz-cyan);
    font-size:10px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.cta-inner h2{
    max-width:760px;
    margin:20px auto 35px;
    color:#f0f5f6;
    font-size:clamp(3rem,6vw,6rem);
    line-height:.95;
    letter-spacing:-.06em;
}

.cta-inner h2 em{
    display:block;
    color:rgba(238,244,246,.2);
    font-style:normal;
    font-weight:400;
}

.cta-button{
    display:inline-flex;
    align-items:center;
    gap:40px;
    padding:15px 18px 15px 22px;
    border-radius:8px;
    background:#eef4f5;
    color:#080b0f;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
    transition:transform .35s,box-shadow .35s;
}

.cta-button:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 50px rgba(220,240,240,.12);
}

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

@media (max-width:1100px){
    .home-hero-inner{grid-template-columns:1fr}
    .hero-copy{max-width:760px;margin:0 auto;text-align:center}
    .eyebrow,.hero-proof{justify-content:center}
    .hero-description{margin:0 auto}
    .hero-actions{justify-content:center}
    .hero-visual{min-height:570px;max-width:740px;width:100%;margin:0 auto}
    .hero-scroll{display:none}
    .home-intro{grid-template-columns:1fr;gap:30px}
    .hero-proof{flex-wrap:wrap}
}

@media (max-width:1024px){
    .stats-tech-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:800px){
    .home-hero{padding-top:20px}
    .home-hero-inner{min-height:auto;gap:40px}
    .hero-copy h1{font-size:clamp(3rem,12vw,4.8rem)}
    .hero-proof{margin-top:35px;padding:12px 18px;gap:12px}
    .proof-item strong{font-size:16px}
    .proof-item span{font-size:7px}
    .hero-visual{min-height:460px}
    .browser-card{width:90%}
    .browser-content{min-height:320px}
    .floating-card{transform:scale(.85)}
    .floating-card-top{right:-2%;top:13%}
    .floating-card-bottom{left:-2%;bottom:12%}
    .availability-card{right:0;bottom:1%}
    .capabilities-grid{grid-template-columns:1fr}
    .capabilities-heading{flex-direction:column;align-items:flex-start;gap:10px}
}

@media (max-width:640px){
    .stats-tech-grid{grid-template-columns:1fr}
    .tech-stat-card{padding:24px 20px}
}

@media (max-width:560px){
    .home-hero{padding:50px 16px 40px}
    .hero-copy h1{font-size:clamp(2.6rem,12vw,3.8rem)}
    .hero-description{font-size:14px}
    .hero-actions{flex-direction:column;width:100%}
    .hero-btn{width:100%;justify-content:center}
    .hero-proof{flex-wrap:wrap;gap:8px;padding:12px 14px;width:100%}
    .proof-divider{height:20px}
    .hero-visual{min-height:360px}
    .browser-card{
        width:96%;
        min-height:300px;
        border-radius:13px;
        transform:perspective(1000px) rotateY(-5deg) rotateX(2deg);
    }
    .browser-card::before{top:-18px;left:10%}
    .browser-card::after{bottom:-25px}
    .browser-topbar{height:28px;grid-template-columns:50px 1fr 30px}
    .browser-address{min-width:100px;padding:3px 8px;font-size:6px}
    .browser-content{min-height:235px;padding:14px;border-radius:0 0 13px 13px}
    .browser-content::before{inset:8px}
    .mini-nav-links{gap:8px}
    .mini-hero{padding:30px 4px 16px}
    .mini-title{font-size:30px}
    .mini-project-grid{padding:0 4px}
    .mini-project{height:38px}
    .orbit-outer{width:105%}
    .orbit-middle{width:82%}
    .orbit-node{width:28px;height:28px;font-size:6px;border-radius:8px}
    .floating-card{min-width:100px;padding:6px 10px;transform:scale(.7);transform-origin:center}
    .floating-card-top{top:5%;right:-8%}
    .floating-card-bottom{bottom:4%;left:-8%}
    .availability-card{font-size:6px;padding:4px 8px}
    .home-intro{padding:60px 16px}
    .intro-content h2{font-size:2rem}
    .capabilities-section{padding:0 16px 60px}
    .capability-card{grid-template-columns:35px 42px 1fr 22px;gap:10px;padding:25px 18px}
    .cap-main h3{font-size:21px}
    .home-cta{min-height:380px}
    .cta-inner h2{font-size:2.5rem}
}

@media (prefers-reduced-motion:reduce){
    .status-dot,.availability-pulse,.visual-backdrop,.orbit-middle,.floating-card,.browser-card{
        animation:none;
    }
    .browser-card{transform:none}
    .cta-circuit path,.cta-dots span,.cta-glow,.cta-glow-2{animation:none}
}

/* =========================================================
ABOUT page / PREMIUM FUTURISTIC SYSTEM
========================================================= */

:root {
    --hz-bg: #070910;
    --hz-bg-soft: #0b0e17;
    --hz-text: #f5f7ff;
    --hz-muted: rgba(245,247,255,.48);

    --hz-cyan: #63e4d4;
    --hz-purple: #8b85f4;

    --hz-line: rgba(255,255,255,.08);
    --hz-line-soft: rgba(255,255,255,.045);

    --hz-glass: rgba(255,255,255,.028);
}


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

.hz-about {
    position: relative;
    min-height: 100vh;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 8%,
            rgba(99,228,212,.075),
            transparent 27%
        ),
        radial-gradient(
            circle at 12% 28%,
            rgba(139,133,244,.055),
            transparent 30%
        ),
        var(--hz-bg);

    color: var(--hz-text);
}

.hz-about::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            transparent 72%
        );
}


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

.hz-hero {
    position: relative;

    max-width: 1380px;
    min-height: 760px;

    margin: 0 auto;
    padding: 100px 42px 100px;

    display: grid;
    grid-template-columns: 1.08fr .92fr;

    align-items: center;
    gap: 70px;
}


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

.hz-hero-copy {
    position: relative;
    z-index: 5;
}

.hz-system-label {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 26px;

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

    font-family: monospace;
    font-size: 9px;
    letter-spacing: .22em;

    text-transform: uppercase;
}

.hz-system-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--hz-cyan);

    box-shadow:
        0 0 0 4px rgba(99,228,212,.06),
        0 0 18px rgba(99,228,212,.8);

    animation: hzPulse 2.5s ease-in-out infinite;
}

@keyframes hzPulse {

    0%,
    100% {
        opacity: .45;
        transform: scale(.85);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}


/* =========================================================
   KICKER
========================================================= */

.hz-kicker {
    position: relative;

    display: inline-flex;
    align-items: center;

    padding: 7px 13px;

    border: 1px solid rgba(99,228,212,.17);

    background:
        linear-gradient(
            120deg,
            rgba(99,228,212,.07),
            rgba(139,133,244,.035)
        );

    color: var(--hz-cyan);

    font-family: monospace;
    font-size: 9px;
    letter-spacing: .2em;

    text-transform: uppercase;
}

.hz-kicker::before {
    content: "//";

    margin-right: 8px;

    opacity: .45;
}


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

.hz-hero h1 {
    margin: 21px 0 35px;

    max-width: 760px;

    font-size: clamp(3.8rem, 7.2vw, 7.4rem);

    line-height: 1.1; 

    letter-spacing: -.075em;

    font-weight: 800;
}

.hz-name {
    display: block;
}

.hz-gradient {
    display: block;

    background:
        linear-gradient(
            110deg,
            #ffffff 10%,
            #c7c4ff 42%,
            var(--hz-cyan) 88%
        );

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

    -webkit-text-fill-color: transparent;
    padding-bottom: 8px;  /* ← این رو اضافه کن */
}


/* =========================================================
   ROLE
========================================================= */

.hz-role {
    max-width: 650px;

    margin: 0 0 18px;

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

    font-size: clamp(1rem, 1.5vw, 1.28rem);

    line-height: 1.5;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.hz-description {
    max-width: 570px;

    margin: 0;

    color: var(--hz-muted);

    font-size: 14px;

    line-height: 1.9;
}


/* =========================================================
   DATA STRIP
========================================================= */

.hz-data-strip {
    display: flex;

    width: fit-content;

    margin-top: 38px;

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

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

    backdrop-filter: blur(10px);
}

.hz-stat {
    position: relative;

    min-width: 125px;

    padding: 17px 20px;

    background:
        rgba(7,9,16,.72);

    transition:
        background .35s ease,
        transform .35s ease;
}

.hz-stat + .hz-stat {
    border-left: 1px solid var(--hz-line);
}

.hz-stat::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 24px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--hz-cyan),
            transparent
        );
}

.hz-stat:hover {
    background: rgba(99,228,212,.035);
    transform: translateY(-3px);
}

.hz-stat-number {
    display: block;

    font-size: 27px;

    font-weight: 800;

    letter-spacing: -.04em;
}

.hz-stat-number span {
    color: var(--hz-cyan);
}

.hz-stat-label {
    display: block;

    margin-top: 4px;

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

    font-family: monospace;
    font-size: 8px;

    letter-spacing: .13em;

    text-transform: uppercase;
}


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

.hz-actions {
    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 30px;
}

.hz-btn {
    position: relative;

    display: inline-flex;

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

    gap: 9px;

    min-height: 45px;

    padding: 0 20px;

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

    color: white;

    text-decoration: none;

    font-family: monospace;
    font-size: 10px;

    letter-spacing: .08em;

    text-transform: uppercase;

    overflow: hidden;

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

.hz-btn::before {
    content: "";

    position: absolute;

    inset: 0;

    transform: translateX(-110%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.12),
            transparent
        );

    transition: transform .55s ease;
}

.hz-btn:hover::before {
    transform: translateX(110%);
}

.hz-btn-primary {
    border-color: rgba(99,228,212,.25);

    background:
        linear-gradient(
            110deg,
            rgba(99,228,212,.14),
            rgba(139,133,244,.13)
        );
}

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

    border-color: var(--hz-cyan);

    box-shadow:
        0 10px 35px rgba(99,228,212,.1);
}

.hz-btn-outline:hover {
    transform: translateY(-3px);

    border-color: rgba(139,133,244,.45);

    background:
        rgba(139,133,244,.04);
}


/* =========================================================
   VISUAL AREA
========================================================= */

.hz-visual {
    position: relative;

    min-height: 560px;

    display: flex;

    align-items: center;
    justify-content: center;
}


/* =========================================================
   PROFILE STAGE
========================================================= */

.hz-profile-stage {
    position: relative;

    width: 410px;
    height: 510px;

    display: flex;

    align-items: center;
    justify-content: center;
}


/* =========================================================
   BACKLIGHT
========================================================= */

.hz-profile-stage::before {
    content: "";

    position: absolute;

    width: 310px;
    height: 310px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(99,228,212,.17),
            rgba(139,133,244,.09) 38%,
            transparent 72%
        );

    filter: blur(35px);

    animation: hzAvatarGlow 6s ease-in-out infinite;
}

@keyframes hzAvatarGlow {

    0%,
    100% {
        transform: scale(.9);
        opacity: .55;
    }

    50% {
        transform: scale(1.08);
        opacity: .95;
    }
}


/* =========================================================
   PROFILE FRAME
========================================================= */

.hz-avatar-frame {
    position: relative;

    width: 285px;
    height: 385px;

    z-index: 5;

    padding: 8px;

    background:
        linear-gradient(
            145deg,
            rgba(99,228,212,.45),
            rgba(139,133,244,.2) 45%,
            rgba(255,255,255,.08)
        );

    clip-path:
        polygon(
            16px 0,
            calc(100% - 16px) 0,
            100% 16px,
            100% calc(100% - 16px),
            calc(100% - 16px) 100%,
            16px 100%,
            0 calc(100% - 16px),
            0 16px
        );

    box-shadow:
        0 30px 80px rgba(0,0,0,.45),
        0 0 80px rgba(99,228,212,.07);

    transition:
        transform .6s cubic-bezier(.2,.7,.2,1),
        box-shadow .6s ease;
}

.hz-avatar-frame:hover {
    transform:
        translateY(-8px)
        rotate(.5deg);

    box-shadow:
        0 40px 90px rgba(0,0,0,.5),
        0 0 90px rgba(99,228,212,.11);
}


/* =========================================================
   IMAGE CONTAINER
========================================================= */

.hz-avatar {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #111522,
            #080a11
        );

    clip-path:
        polygon(
            11px 0,
            calc(100% - 11px) 0,
            100% 11px,
            100% calc(100% - 11px),
            calc(100% - 11px) 100%,
            11px 100%,
            0 calc(100% - 11px),
            0 11px
        );
}

.hz-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    filter:
        saturate(.95)
        contrast(1.04);

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1),
        filter .6s ease;
}

.hz-avatar-frame:hover img {
    transform: scale(1.045);

    filter:
        saturate(1.02)
        contrast(1.06);
}


/* =========================================================
   IMAGE GRADIENT
========================================================= */

.hz-avatar::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(7,9,16,.42) 100%
        ),
        linear-gradient(
            135deg,
            rgba(99,228,212,.05),
            transparent 40%,
            rgba(139,133,244,.07)
        );
}


/* =========================================================
   FRAME CORNERS
========================================================= */

.hz-frame-corner {
    position: absolute;

    z-index: 8;

    width: 32px;
    height: 32px;

    border-color: var(--hz-cyan);

    pointer-events: none;

    transition:
        width .45s ease,
        height .45s ease,
        border-color .45s ease;
}

.hz-frame-corner.tl {
    top: -5px;
    left: -5px;

    border-top: 2px solid;
    border-left: 2px solid;
}

.hz-frame-corner.tr {
    top: -5px;
    right: -5px;

    border-top: 2px solid;
    border-right: 2px solid;
}

.hz-frame-corner.bl {
    bottom: -5px;
    left: -5px;

    border-bottom: 2px solid;
    border-left: 2px solid;
}

.hz-frame-corner.br {
    bottom: -5px;
    right: -5px;

    border-bottom: 2px solid;
    border-right: 2px solid;
}

.hz-avatar-frame:hover .hz-frame-corner {
    width: 44px;
    height: 44px;

    border-color: var(--hz-purple);
}


/* =========================================================
   VERTICAL IDENTITY LINE
========================================================= */

.hz-identity-line {
    position: absolute;

    right: -28px;
    top: 80px;
    bottom: 80px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(99,228,212,.55),
            rgba(139,133,244,.4),
            transparent
        );
}

.hz-identity-line::before {
    content: "";

    position: absolute;

    top: 30%;

    left: -3px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--hz-cyan);

    box-shadow:
        0 0 18px var(--hz-cyan);
}


/* =========================================================
   PROFILE META
========================================================= */

.hz-profile-meta {
    position: absolute;

    z-index: 9;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 8px 12px;

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

    background:
        rgba(7,9,16,.76);

    backdrop-filter: blur(16px);

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

    font-family: monospace;

    font-size: 8px;

    letter-spacing: .08em;

    white-space: nowrap;
}

.hz-profile-meta::before {
    content: "";

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--hz-cyan);

    box-shadow:
        0 0 10px var(--hz-cyan);
}

.hz-profile-meta.top {
    top: 55px;
    right: 5px;
}

.hz-profile-meta.bottom {
    bottom: 58px;
    left: 0;
}


/* =========================================================
   PROFILE INDEX
========================================================= */

.hz-profile-index {
    position: absolute;

    left: 20px;
    top: 85px;

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

    font-family: monospace;

    font-size: 10px;

    letter-spacing: .2em;

    writing-mode: vertical-rl;
}


/* =========================================================
   DECORATIVE LINE
========================================================= */

.hz-profile-line {
    position: absolute;

    left: 30px;
    bottom: 60px;

    width: 100px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--hz-purple),
            transparent
        );

    opacity: .6;
}


/* =========================================================
   FLOATING LABEL
========================================================= */

.hz-floating-label {
    position: absolute;

    z-index: 7;

    padding: 8px 12px;

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

    background:
        rgba(7,9,16,.6);

    backdrop-filter: blur(12px);

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

    font-family: monospace;

    font-size: 8px;

    letter-spacing: .08em;

    pointer-events: none;
}

.hz-label-1 {
    top: 12%;
    left: -5%;
}

.hz-label-2 {
    bottom: 12%;
    right: -7%;
}


/* =========================================================
   ORBIT RINGS — MUCH SUBTLER
========================================================= */

.hz-orbit {
    position: absolute;

    border: 1px solid rgba(99,228,212,.055);

    border-radius: 50%;

    pointer-events: none;
}

.hz-orbit-1 {
    width: 450px;
    height: 450px;

    transform:
        rotate(-25deg)
        scaleY(.45);

    animation:
        hzOrbitOne 24s linear infinite;
}

.hz-orbit-2 {
    width: 380px;
    height: 380px;

    border-color: rgba(139,133,244,.055);

    transform:
        rotate(35deg)
        scaleY(.5);

    animation:
        hzOrbitTwo 20s linear infinite;
}

.hz-orbit-3 {
    width: 330px;
    height: 330px;

    border-style: dashed;

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

    animation:
        hzOrbitThree 30s linear infinite;
}

@keyframes hzOrbitOne {

    from {
        transform:
            rotate(0deg)
            scaleY(.45);
    }

    to {
        transform:
            rotate(360deg)
            scaleY(.45);
    }
}

@keyframes hzOrbitTwo {

    from {
        transform:
            rotate(360deg)
            scaleY(.5);
    }

    to {
        transform:
            rotate(0deg)
            scaleY(.5);
    }
}

@keyframes hzOrbitThree {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   SECTION
========================================================= */

.hz-section {
    position: relative;

    max-width: 1380px;

    margin: 0 auto;

    padding:
        90px
        42px
        70px;
}

.hz-section-head {
    margin-bottom: 42px;
}

.hz-section-index {
    color: var(--hz-cyan);

    font-family: monospace;

    font-size: 9px;

    letter-spacing: .18em;
}

.hz-section-title {
    margin: 8px 0 0;

    font-size: clamp(2rem, 3.5vw, 2.8rem);

    line-height: 1;

    letter-spacing: -.05em;
}


/* =========================================================
   PHILOSOPHY
========================================================= */

.hz-philosophy-grid {
    display: grid;

    grid-template-columns:
        1fr
        1.2fr;

    gap: 60px;

    align-items: start;
}

.hz-philosophy-quote {
    position: relative;

    padding-left: 25px;

    border-left: 1px solid var(--hz-cyan);

    font-size: clamp(1.3rem, 2vw, 1.8rem);

    font-weight: 400;

    line-height: 1.5;

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

.hz-philosophy-quote::before {
    content: "“";

    position: absolute;

    top: -32px;
    left: 16px;

    color: rgba(99,228,212,.18);

    font-family: Georgia, serif;

    font-size: 80px;

    line-height: 1;
}

.hz-philosophy-quote strong {
    color: #fff;
}

.hz-philosophy-text {
    display: flex;

    flex-direction: column;

    gap: 20px;
}

.hz-philosophy-text p {
    margin: 0;

    color: var(--hz-muted);

    font-size: 14px;

    line-height: 1.85;
}


/* =========================================================
   TIMELINE
========================================================= */

.hz-timeline {
    display: grid;

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

    gap: 1px;

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

    background: var(--hz-line);
}

.hz-experience {
    position: relative;

    min-height: 225px;

    padding: 27px;

    background:
        rgba(7,9,16,.9);

    overflow: hidden;

    transition:
        transform .4s ease,
        background .4s ease;
}

.hz-experience::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--hz-cyan),
            var(--hz-purple)
        );

    transition: width .5s ease;
}

.hz-experience:hover {
    z-index: 2;

    transform: translateY(-4px);

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

.hz-experience:hover::after {
    width: 100%;
}

.hz-year {
    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--hz-cyan);

    font-family: monospace;

    font-size: 11px;

    letter-spacing: .08em;
}

.hz-year::before {
    content: "";

    width: 22px;
    height: 1px;

    background: var(--hz-cyan);
}

.hz-experience h3 {
    max-width: 280px;

    margin: 20px 0 10px;

    font-size: 17px;

    line-height: 1.2;

    letter-spacing: -.02em;
}

.hz-experience p {
    max-width: 310px;

    margin: 0;

    color: var(--hz-muted);

    font-size: 12px;

    line-height: 1.75;
}

.hz-experience-tag {
    position: absolute;

    right: 20px;
    bottom: 20px;

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

    font-family: monospace;

    font-size: 9px;
}

.hz-experience.current {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(99,228,212,.1),
            transparent 35%
        ),
        rgba(7,9,16,.95);
}

.hz-experience.current .hz-year {
    color: white;
}

.hz-experience.current .hz-year::before {
    box-shadow:
        0 0 12px var(--hz-cyan);
}


/* =========================================================
   SKILLS
========================================================= */

.hz-skills-layout {
    display: grid;

    grid-template-columns:
        .8fr
        1.2fr;

    gap: 70px;

    align-items: start;
}

.hz-skills-intro {
    position: sticky;

    top: 100px;
}

.hz-skills-intro h3 {
    margin: 20px 0 12px;

    font-size: 24px;

    line-height: 1.1;

    letter-spacing: -.04em;
}

.hz-skills-intro p {
    color: var(--hz-muted);

    font-size: 13px;

    line-height: 1.8;
}

.hz-stack {
    display: grid;

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

    gap: 10px;
}

.hz-skill {
    position: relative;

    min-height: 100px;

    padding: 18px 20px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.03),
            rgba(255,255,255,.012)
        );

    overflow: hidden;

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

.hz-skill::after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--hz-cyan),
            var(--hz-purple)
        );

    transition: width .4s ease;
}

.hz-skill:hover {
    transform: translateY(-4px);

    border-color:
        rgba(99,228,212,.2);

    background:
        rgba(99,228,212,.035);
}

.hz-skill:hover::after {
    width: 100%;
}

.hz-skill-number {
    display: block;

    margin-bottom: 10px;

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

    font-family: monospace;

    font-size: 9px;
}

.hz-skill-name {
    font-size: 15px;

    font-weight: 600;
}

.hz-skill-desc {
    display: block;

    margin-top: 4px;

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

    font-size: 10px;
}


/* =========================================================
   RESUME
========================================================= */

.hz-resume {
    max-width: 1380px;

    margin:
        30px auto
        100px;

    padding:
        0 42px;
}

.hz-final-quote {
    text-align: center;

    margin-bottom: 42px;
}

.hz-final-quote p {
    font-size:
        clamp(
            1.4rem,
            2.5vw,
            2.2rem
        );

    font-weight: 400;

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

    letter-spacing: -.02em;
}

.hz-final-quote strong {
    color: #fff;
}


/* =========================================================
   TERMINAL / RESUME
========================================================= */

.hz-terminal {
    position: relative;

    padding: 42px;

    border: 1px solid
        rgba(99,228,212,.14);

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(139,133,244,.09),
            transparent 28%
        ),
        rgba(255,255,255,.025);

    overflow: hidden;
}

.hz-terminal::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size:
        100% 7px;

    opacity: .3;
}

.hz-terminal-top {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 35px;
}

.hz-terminal-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

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

.hz-terminal-title {
    margin-left: 8px;

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

    font-family: monospace;

    font-size: 9px;

    letter-spacing: .1em;
}

.hz-resume-content {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}

.hz-resume-label {
    color: var(--hz-cyan);

    font-family: monospace;

    font-size: 9px;

    letter-spacing: .18em;
}

.hz-resume h2 {
    margin: 10px 0 8px;

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.5rem
        );

    letter-spacing: -.04em;
}

.hz-resume p {
    margin: 0;

    color: var(--hz-muted);

    font-size: 12px;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1050px) {

    .hz-hero {
        grid-template-columns: 1fr;

        text-align: center;

        gap: 45px;

        padding-top: 80px;
    }

    .hz-hero-copy {
        display: flex;

        flex-direction: column;

        align-items: center;
    }

    .hz-description,
    .hz-role {
        max-width: 650px;
    }

    .hz-data-strip {
        width: 100%;

        max-width: 430px;

        justify-content: center;
    }

    .hz-actions {
        justify-content: center;
    }

    .hz-visual {
        min-height: 530px;
    }

    .hz-profile-stage {
        transform: scale(.92);
    }

    .hz-philosophy-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .hz-philosophy-quote {
        border-left: none;

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

        padding:
            20px 0 0;

        text-align: center;
    }

    .hz-skills-layout {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .hz-skills-intro {
        position: static;

        text-align: center;

        max-width: 600px;

        margin: auto;
    }

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


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 700px) {

    .hz-hero,
    .hz-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hz-hero {
        min-height: auto;

        padding-top: 65px;

        padding-bottom: 70px;
    }

    .hz-hero h1 {
        margin: 21px 0 30px; 
        max-width: 760px;
        font-size: clamp(3.8rem, 7.2vw, 7.4rem);
        line-height: .86;
        letter-spacing: -.075em;
        font-weight: 800;
    }

    .hz-data-strip {
        width: 100%;

        max-width: 100%;
    }

    .hz-stat {
        min-width: 0;

        flex: 1;

        padding:
            14px 10px;
    }

    .hz-stat-number {
        font-size: 22px;
    }

    .hz-stat-label {
        font-size: 7px;
    }

    .hz-actions {
        width: 100%;
    }

    .hz-btn {
        flex: 1;

        min-width: 130px;
    }

    .hz-visual {
        min-height: 470px;
    }

    .hz-profile-stage {
        width: 330px;
        height: 430px;

        transform: scale(.9);
    }

    .hz-avatar-frame {
        width: 245px;
        height: 330px;
    }

    .hz-identity-line {
        right: -5px;

        top: 70px;
        bottom: 70px;
    }

    .hz-profile-index {
        left: 10px;
    }

    .hz-floating-label {
        display: none;
    }

    .hz-orbit-1 {
        width: 350px;
        height: 350px;
    }

    .hz-orbit-2 {
        width: 300px;
        height: 300px;
    }

    .hz-orbit-3 {
        width: 260px;
        height: 260px;
    }

    .hz-section {
        padding-top: 55px;

        padding-bottom: 45px;
    }

    .hz-timeline {
        grid-template-columns: 1fr;
    }

    .hz-stack {
        grid-template-columns: 1fr;
    }

    .hz-resume {
        padding:
            0 20px;

        margin-bottom: 70px;
    }

    .hz-terminal {
        padding:
            27px 22px;
    }

    .hz-resume-content {
        flex-direction: column;

        align-items: flex-start;
    }

    .hz-resume .hz-btn {
        width: 100%;
    }
}


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

@media (max-width: 430px) {

    .hz-data-strip {
        display: grid;

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

    .hz-stat {
        text-align: center;
    }

    .hz-stat + .hz-stat {
        border-left:
            1px solid
            var(--hz-line);
    }

    .hz-actions {
        flex-direction: column;
    }

    .hz-btn {
        width: 100%;
    }

    .hz-visual {
        min-height: 410px;
    }

    .hz-profile-stage {
        width: 280px;
        height: 370px;

        transform: scale(.86);
    }

    .hz-avatar-frame {
        width: 220px;
        height: 300px;
    }

    .hz-orbit-1 {
        width: 280px;
        height: 280px;
    }

    .hz-orbit-2 {
        width: 235px;
        height: 235px;
    }

    .hz-orbit-3 {
        width: 195px;
        height: 195px;
    }
}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hz-system-dot,
    .hz-profile-stage::before,
    .hz-orbit-1,
    .hz-orbit-2,
    .hz-orbit-3 {
        animation: none;
    }

    .hz-avatar-frame,
    .hz-avatar img,
    .hz-btn,
    .hz-skill,
    .hz-experience {
        transition: none;
    }
}

/* ============================================================
   HZ PORTFOLIO page — FINAL 
   ============================================================ */

.hz-portfolio {

    --hz-text: #f5f7ff;
    --hz-muted: rgba(245,247,255,.56);
    --hz-soft: rgba(245,247,255,.34);
    --hz-cyan: #63e4d4;
    --hz-purple: #8b85f4;
    --hz-pink: #ff6b9d;
    --hz-line: rgba(255,255,255,.09);
    --hz-line-strong: rgba(99,228,212,.25);
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow: hidden;
    color: var(--hz-text);
}

.hz-portfolio,
.hz-portfolio * { box-sizing: border-box; }



.hz-portfolio::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .18;
    background-image: radial-gradient(rgba(255,255,255,.28) .45px, transparent .55px);
    mix-blend-mode: soft-light;
}

.hz-portfolio a { color: inherit; }

/* ===== ambient cursor light ===== */
.hz-portfolio-cursor {
    position: fixed;
    z-index: 0;
    width: 360px;
    height: 360px;
    pointer-events: none;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(99,228,212,.055), transparent 68%);
    opacity: 0;
    transition: opacity .4s ease;
    mix-blend-mode: screen;
}

/* ===== HERO ===== */
.hz-portfolio-hero {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(72px, 9vw, 125px) 42px 54px;
    z-index: 2;
}

.hz-portfolio-hero-copy { max-width: 1020px; }

.hz-portfolio-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    color: rgba(255,255,255,.42);
    font: 500 9px/1.4 monospace;
    letter-spacing: .25em;
    text-transform: uppercase;
}

.hz-portfolio-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--hz-cyan);
    box-shadow: 0 0 0 5px rgba(99,228,212,.055), 0 0 20px rgba(99,228,212,.65);
    animation: hzPulse 2.8s ease-in-out infinite;
}

@keyframes hzPulse {
    0%,100% { opacity: .45; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.08); }
}

.hz-portfolio-kicker {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px 8px;
    border: 1px solid rgba(99,228,212,.18);
    background: linear-gradient(110deg, rgba(99,228,212,.07), rgba(139,133,244,.04));
    color: var(--hz-cyan);
    font: 500 9px/1.4 monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.hz-portfolio-kicker::before {
    content: "//";
    margin-inline-end: 8px;
    opacity: .45;
}

.hz-portfolio-hero h1 {
    max-width: 1000px;
    margin: 24px 0 22px;
    font-size: clamp(3.5rem, 7.2vw, 7.8rem);
    line-height: .98;
    letter-spacing: -.075em;
    font-weight: 800;
}

.hz-portfolio-gradient {
    display: inline-block;
    padding: .04em 0 .1em;
    background: linear-gradient(108deg, #fff 12%, #d5d2ff 45%, var(--hz-cyan) 88%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hz-portfolio-desc {
    max-width: 650px;
    margin: 0;
    color: var(--hz-muted);
    font-size: 15px;
    line-height: 1.9;
}

.hz-portfolio-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 30px;
}

.hz-portfolio-meta span {
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.075);
    background: rgba(255,255,255,.025);
    color: rgba(255,255,255,.48);
    font: 500 8px/1.2 monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

/* ===== PROJECT SECTION ===== */
.hz-portfolio-projects {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    padding: 30px 42px 110px;
    z-index: 2;
}

.hz-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 28px;
}

.hz-section-heading-left {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.hz-section-index {
    color: var(--hz-cyan);
    font: 500 8px/1 monospace;
    letter-spacing: .12em;
}

.hz-section-heading h2 {
    margin: 0;
    color: rgba(255,255,255,.9);
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.hz-section-note {
    margin: 0;
    color: rgba(255,255,255,.3);
    font: 500 8px/1.5 monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hz-projects-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}

.hz-project-card {
    position: relative;
    grid-column: span 4;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--hz-line);
    background: rgba(7,9,16,.82);
    transition:
        transform .55s cubic-bezier(.22,.61,.36,1),
        border-color .4s ease,
        box-shadow .55s ease,
        background .4s ease;
    opacity: 0;
    transform: translateY(28px);
    animation: hzCardReveal .7s cubic-bezier(.22,.61,.36,1) forwards;
}

.hz-project-card:nth-child(1) { grid-column: span 7; animation-delay: .04s; }
.hz-project-card:nth-child(2) { grid-column: span 5; animation-delay: .1s; }
.hz-project-card:nth-child(3) { grid-column: span 5; animation-delay: .16s; }
.hz-project-card:nth-child(4) { grid-column: span 7; animation-delay: .22s; }
.hz-project-card:nth-child(n+5) { animation-delay: .28s; }

@keyframes hzCardReveal {
    to { opacity: 1; transform: translateY(0); }
}

.hz-project-card:hover {
    transform: translateY(-7px);
    border-color: rgba(99,228,212,.25);
    background: rgba(12,17,29,.94);
    box-shadow: 0 24px 70px rgba(0,0,0,.38), 0 0 45px rgba(99,228,212,.045);
}

.hz-project-card a {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    text-decoration: none;
}

.hz-project-image {
    position: relative;
    height: 310px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(99,228,212,.06), rgba(139,133,244,.06));
}

.hz-project-card:nth-child(2) .hz-project-image,
.hz-project-card:nth-child(3) .hz-project-image { height: 270px; }

.hz-project-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7,9,16,.05) 20%, rgba(7,9,16,.72) 100%),
        linear-gradient(110deg, transparent 55%, rgba(99,228,212,.04));
    pointer-events: none;
    z-index: 1;
}

.hz-project-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.001);
    filter: saturate(.88) contrast(1.03);
    transition: transform .8s cubic-bezier(.22,.61,.36,1), filter .6s ease;
}

.hz-project-card:hover .hz-project-image img {
    transform: scale(1.055);
    filter: saturate(1) contrast(1.04);
}

.hz-project-number {
    position: absolute;
    top: 17px;
    inset-inline-start: 18px;
    z-index: 3;
    color: rgba(255,255,255,.48);
    font: 500 9px/1 monospace;
    letter-spacing: .1em;
}

.hz-project-number::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 1px;
    margin-inline-start: 8px;
    vertical-align: middle;
    background: rgba(255,255,255,.18);
}

.hz-project-featured {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    z-index: 3;
    padding: 6px 9px;
    border: 1px solid rgba(99,228,212,.2);
    background: rgba(7,9,16,.55);
    color: var(--hz-cyan);
    font: 500 7px/1 monospace;
    letter-spacing: .13em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.hz-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .4s ease;
}

.hz-project-card:hover .hz-image-overlay { opacity: 1; }

.hz-image-overlay span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(7,9,16,.52);
    color: rgba(255,255,255,.8);
    font: 500 8px/1 monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    transform: translateY(8px);
    transition: transform .4s ease;
}

.hz-project-card:hover .hz-image-overlay span { transform: translateY(0); }

.hz-project-info {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 23px 24px 24px;
}

.hz-project-tag {
    margin-bottom: 9px;
    color: rgba(99,228,212,.52);
    font: 500 7px/1.4 monospace;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hz-project-info h3 {
    margin: 0 0 10px;
    color: rgba(255,255,255,.94);
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    line-height: 1.15;
    letter-spacing: -.035em;
    transition: color .3s ease;
}

.hz-project-card:hover h3 { color: #fff; }

.hz-project-info p {
    display: -webkit-box;
    flex: 1;
    margin: 0 0 18px;
    overflow: hidden;
    color: var(--hz-muted);
    font-size: 12.5px;
    line-height: 1.75;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.hz-project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 19px;
}

.hz-project-tags span {
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    color: rgba(255,255,255,.38);
    font: 500 7px/1.2 monospace;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: border-color .3s ease, color .3s ease, background .3s ease;
}

.hz-project-card:hover .hz-project-tags span {
    border-color: rgba(99,228,212,.14);
    color: rgba(255,255,255,.58);
    background: rgba(99,228,212,.025);
}

.hz-project-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.06);
    color: var(--hz-cyan);
    font: 500 8px/1.2 monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.hz-project-link::after {
    content: "↗";
    font-size: 13px;
    transition: transform .35s ease;
}

.hz-project-card:hover .hz-project-link::after { transform: translate(4px,-3px); }

.hz-card-line {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    z-index: 5;
    background: linear-gradient(90deg, var(--hz-cyan), var(--hz-purple), transparent);
    transition: width .7s cubic-bezier(.22,.61,.36,1);
}

.hz-project-card:hover .hz-card-line { width: 72%; }

/* ===== empty ===== */
.hz-empty-state {
    grid-column: 1 / -1;
    padding: 90px 20px;
    border: 1px solid var(--hz-line);
    text-align: center;
}

.hz-empty-state-icon {
    display: block;
    margin-bottom: 18px;
    color: rgba(99,228,212,.4);
    font: 500 30px/1 monospace;
}

.hz-empty-state h3 {
    margin: 0 0 8px;
    color: rgba(255,255,255,.65);
    font-size: 20px;
}

.hz-empty-state p {
    margin: 0;
    color: var(--hz-muted);
    font-size: 13px;
}

/* ===== responsive ===== */
@media (max-width: 1000px) {
    .hz-project-card,
    .hz-project-card:nth-child(n) { grid-column: span 6; }
    .hz-project-image,
    .hz-project-card:nth-child(n) .hz-project-image { height: 260px; }
}

@media (max-width: 700px) {
    .hz-portfolio-hero { padding: 58px 20px 38px; }
    .hz-portfolio-projects { padding: 12px 20px 70px; }

    .hz-portfolio-hero h1 {
        font-size: clamp(2.8rem, 14vw, 4.5rem);
        line-height: 1;
    }

    .hz-portfolio-desc { font-size: 13px; }

    .hz-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .hz-projects-grid { grid-template-columns: 1fr; }
    .hz-project-card,
    .hz-project-card:nth-child(n) { grid-column: 1 / -1; }
    .hz-project-image,
    .hz-project-card:nth-child(n) .hz-project-image { height: 220px; }
}

@media (max-width: 430px) {
    .hz-portfolio-hero { padding-inline: 16px; }
    .hz-portfolio-projects { padding-inline: 16px; }

    .hz-portfolio-hero h1 { font-size: 2.55rem; }
    .hz-portfolio-kicker { font-size: 7px; }
    .hz-portfolio-meta span { font-size: 7px; }

    .hz-project-info { padding: 19px 18px 20px; }
    .hz-project-image,
    .hz-project-card:nth-child(n) .hz-project-image { height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
    .hz-portfolio *,
    .hz-portfolio *::before,
    .hz-portfolio *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .hz-portfolio-cursor { display: none; }
}

/* ============================================================
   PORTFOLIO DETAIL PAGE — SYSTEM / TECH STYLE v2
   ============================================================ */

.hz-detail {
    --hz-bg: #070910;
    --hz-text: #f5f7ff;
    --hz-muted: rgba(245,247,255,.58);
    --hz-cyan: #63e4d4;
    --hz-line: rgba(255,255,255,.09);
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow: hidden;
    color: var(--hz-text);
    background: var(--hz-bg);
}

.hz-detail,
.hz-detail * { box-sizing: border-box; }

/* ===== HERO ===== */
.hz-detail-hero {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(40px, 5vw, 70px) 42px 20px;
    z-index: 2;
}

.hz-detail-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: rgba(255,255,255,.4);
    font: 500 9px/1.4 monospace;
    letter-spacing: .25em;
    text-transform: uppercase;
}

.hz-detail-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--hz-cyan);
    box-shadow: 0 0 0 5px rgba(99,228,212,.055), 0 0 20px rgba(99,228,212,.65);
    animation: hzDetailPulse 2.8s ease-in-out infinite;
}

@keyframes hzDetailPulse {
    0%,100% { opacity: .45; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.08); }
}

.hz-detail-kicker {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px 7px;
    border: 1px solid rgba(99,228,212,.18);
    background: linear-gradient(110deg, rgba(99,228,212,.07), rgba(139,133,244,.04));
    color: var(--hz-cyan);
    font: 500 9px/1.4 monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.hz-detail-kicker::before {
    content: "//";
    margin-inline-end: 8px;
    opacity: .45;
}

/* ===== MAIN ===== */
.hz-detail-main {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    padding: 10px 42px 80px;
    z-index: 2;
}

/* ===== کادر تصویر ===== */
.hz-detail-visual {
    position: relative;
    width: 100%;
    min-height: clamp(280px, 40vh, 460px);
    overflow: hidden;
    border: 1px solid var(--hz-line);
    background: #090c14;
    isolation: isolate;
}

/* ===== تصویر با fixed ===== */
.hz-detail-visual-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;  /* ← بیشتر از کادر برای افکت اسکرول */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;  /* ← فیکس */
    transform: scale(1.02);
    filter: saturate(.85) contrast(1.04) blur(3px);
}


/* ===== لایه شیشه‌ای ===== */
.hz-detail-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(7,9,16,.05) 0%, rgba(7,9,16,.08) 30%, rgba(7,9,16,.8) 100%),
        linear-gradient(110deg, rgba(7,9,16,.35), transparent 55%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), inset 0 0 100px rgba(255,255,255,.03);
}

/* ===== لایه دوم شیشه‌ای ===== */
.hz-detail-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    mix-blend-mode: overlay;
}

/* ===== عنوان داخل کادر تصویر ===== */
.hz-detail-visual-title {
    position: absolute;
    z-index: 3;
    left: clamp(24px, 4vw, 60px);
    right: clamp(24px, 4vw, 60px);
    bottom: clamp(24px, 4vw, 50px);
    max-width: 900px;
}

.hz-detail-visual-title .hz-detail-label {
    display: inline-block;
    margin-bottom: 8px;
    font-size: .6rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--hz-cyan);
    text-shadow: 0 2px 20px rgba(0,0,0,.4);
}

.hz-detail-visual-title h1 {
    margin: 0;
    font-size: clamp(2rem, 4.5vw, 4rem);
    line-height: .95;
    letter-spacing: -.055em;
    color: #fff;
    text-shadow: 0 8px 40px rgba(0,0,0,.5);
}

/* ===== کپشن (در موبایل مخفی می‌شود) ===== */
.hz-detail-visual-caption {
    position: absolute;
    z-index: 4;
    inset-inline-start: 28px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,.46);
    font: 500 8px/1.4 monospace;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.hz-detail-visual-caption::before {
    content: "";
    width: 30px;
    height: 1px;
    background: var(--hz-cyan);
    box-shadow: 0 0 12px rgba(99,228,212,.5);
}

/* ===== CONTENT ===== */
.hz-detail-content {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(270px, .55fr);
    gap: 58px;
    padding: 50px 10px 0;
}

.hz-detail-overview { min-width: 0; }

.hz-detail-section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: var(--hz-cyan);
    font: 500 8px/1.2 monospace;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hz-detail-section-label::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
    box-shadow: 0 0 12px rgba(99,228,212,.25);
}

.hz-detail-description {
    max-width: 850px;
    color: rgba(255,255,255,.8);
    font-size: 16px;
    line-height: 1.95;
}

.hz-detail-description p { margin: 0 0 18px; }
.hz-detail-description p:last-child { margin-bottom: 0; }

.hz-detail-description h2,
.hz-detail-description h3,
.hz-detail-description h4 {
    margin: 32px 0 13px;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -.03em;
}

.hz-detail-description h2 { font-size: 25px; }
.hz-detail-description h3 { font-size: 20px; }
.hz-detail-description h4 { font-size: 17px; }

.hz-detail-description ul,
.hz-detail-description ol {
    margin: 0 0 20px;
    padding-inline-start: 22px;
}

.hz-detail-description li {
    margin-bottom: 7px;
    color: rgba(255,255,255,.75);
}

.hz-detail-description li::marker { color: var(--hz-cyan); }

.hz-detail-description a {
    color: var(--hz-cyan);
    text-decoration-color: rgba(99,228,212,.3);
    text-underline-offset: 3px;
}

/* ===== INFO PANEL ===== */
.hz-detail-info {
    align-self: start;
    border-top: 1px solid var(--hz-line);
    border-bottom: 1px solid var(--hz-line);
}

.hz-detail-info-item {
    padding: 17px 0;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.hz-detail-info-item:last-child { border-bottom: 0; }

.hz-detail-info-label {
    display: block;
    margin-bottom: 7px;
    color: rgba(255,255,255,.28);
    font: 500 7px/1.4 monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hz-detail-info-value {
    display: block;
    color: rgba(255,255,255,.8);
    font-size: 13px;
    line-height: 1.5;
}

.hz-detail-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--hz-cyan);
}

.hz-detail-live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hz-cyan);
    box-shadow: 0 0 11px rgba(99,228,212,.55);
}

.hz-detail-progress {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.5);
}

.hz-detail-progress::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
}

.hz-detail-info-value a {
    color: var(--hz-cyan);
    text-decoration: none;
    transition: color .3s ease;
}

.hz-detail-info-value a:hover { color: #fff; }

/* ===== TAGS ===== */
.hz-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 28px;
}

.hz-detail-tags span {
    padding: 6px 12px;
    border: 1px solid rgba(99,228,212,.13);
    border-radius: 999px;
    background: rgba(99,228,212,.035);
    color: rgba(255,255,255,.55);
    font: 500 8px/1.2 monospace;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: border-color .3s ease, color .3s ease, background .3s ease;
}

.hz-detail-tags span:hover {
    border-color: rgba(99,228,212,.35);
    color: var(--hz-cyan);
    background: rgba(99,228,212,.06);
}

/* ===== ACTIONS ===== */
.hz-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 35px;
}

.hz-detail-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 49px;
    padding: 7px 23px;
    overflow: hidden;
    border: 1px solid var(--hz-line);
    border-radius: 5px;
    text-decoration: none !important;
    font: 500 9px/1.3 monospace;
    letter-spacing: .09em;
    text-transform: uppercase;
    transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
}

.hz-detail-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    transition: transform .6s ease;
}

.hz-detail-btn:hover::before { transform: translateX(110%); }

.hz-detail-btn-primary {
    border-color: rgba(99,228,212,.24);
    background: linear-gradient(110deg, rgba(99,228,212,.13), rgba(139,133,244,.12));
    color: #fff;
}

.hz-detail-btn-primary:hover {
    transform: translateY(-3px);
    border-color: rgba(99,228,212,.6);
    box-shadow: 0 12px 35px rgba(99,228,212,.08);
}

.hz-detail-btn-secondary {
    background: rgba(255,255,255,.018);
    color: rgba(255,255,255,.65);
}

.hz-detail-btn-secondary:hover {
    transform: translateY(-3px);
    border-color: rgba(139,133,244,.4);
    color: #fff;
    background: rgba(139,133,244,.045);
}

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

/* ===== موبایل: کپشن مخفی ===== */
@media (max-width: 768px) {
    .hz-detail-visual-caption {
        display: none;  /* ← کپشن در موبایل مخفی */
    }

    .hz-detail-hero { padding: 35px 20px 16px; }
    .hz-detail-main { padding: 10px 20px 60px; }

    .hz-detail-visual {
        min-height: clamp(220px, 30vh, 300px);
    }

    .hz-detail-visual-title h1 {
        font-size: clamp(1.6rem, 6vw, 2.4rem);
    }

    .hz-detail-content {
        grid-template-columns: 1fr;
        padding: 35px 2px 0;
        gap: 32px;
    }

    .hz-detail-description {
        font-size: 14px;
        line-height: 1.9;
    }

    .hz-detail-info { display: block; }
    .hz-detail-info-item:nth-child(odd) { border-inline-end: 0; }

    .hz-detail-actions {
        flex-direction: column;
    }

    .hz-detail-btn {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .hz-detail-hero { padding-inline: 16px; }
    .hz-detail-main { padding-inline: 16px; }

    .hz-detail-kicker { font-size: 7px; }

    .hz-detail-visual {
        min-height: clamp(180px, 25vh, 240px);
    }

    .hz-detail-visual-title h1 { font-size: 1.2rem; }
    .hz-detail-visual-title .hz-detail-label { font-size: .5rem; }

    .hz-detail-content { padding-top: 28px; }
    .hz-detail-description { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .hz-detail *,
    .hz-detail *::before,
    .hz-detail *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* ===== اصلاح: وقتی تصویر نیست ===== */
.hz-detail-visual.no-image .hz-detail-visual-bg {
    display: none;
}

.hz-detail-visual.no-image::before {
    background:
        linear-gradient(180deg, rgba(7,9,16,.05) 0%, rgba(7,9,16,.08) 30%, rgba(7,9,16,.8) 100%),
        linear-gradient(110deg, rgba(7,9,16,.35), transparent 55%);
    backdrop-filter: none;
}


/* ============================================================
   SEVICES PAGE — HZ
   ============================================================ */
:root {
    --hz-bg: #070910;
    --hz-bg-soft: #0b0e17;
    --hz-text: #f5f7ff;
    --hz-muted: rgba(245,247,255,.48);
    --hz-cyan: #63e4d4;
    --hz-purple: #8b85f4;
    --hz-pink: #ff6b9d;
    --hz-line: rgba(255,255,255,.08);
    --hz-line-soft: rgba(255,255,255,.045);
    --hz-glass: rgba(255,255,255,.028);
}



.hz-services {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(99,228,212,.08), transparent 35%),
        radial-gradient(circle at 80% 80%, rgba(139,133,244,.07), transparent 35%),
        radial-gradient(circle at 50% 50%, rgba(255,107,157,.04), transparent 40%),
        radial-gradient(circle at 50% 100%, #05080f 0%, #0d1520 50%, transparent 0%);
    color: var(--hz-text);
}

@keyframes hzBgFloat {
    0%,100% { transform: translate(0,0) scale(1); }
    33% { transform: translate(-30px, 20px) scale(1.1); }
    66% { transform: translate(20px, -20px) scale(0.9); }
}

/* ============================================================
   HERO
   ============================================================ */
.hz-services-hero {
    position: relative;
    max-width: 1380px;
    min-height: 620px;
    margin: 0 auto;
    padding: 80px 42px 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
    z-index: 2;
}

.hz-services-hero::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: linear-gradient(to bottom, transparent, rgba(99,228,212,.15), rgba(139,133,244,.15), transparent);
}

.hz-services-hero-copy {
    position: relative;
    z-index: 5;
}

.hz-services-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
    color: rgba(255,255,255,.38);
    font-family: monospace;
    font-size: 9px;
    letter-spacing: .35em;
    text-transform: uppercase;
}

.hz-services-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hz-cyan);
    box-shadow: 0 0 0 4px rgba(99,228,212,.06), 0 0 18px rgba(99,228,212,.8);
    animation: hzPulse 2.5s ease-in-out infinite;
}

@keyframes hzPulse {
    0%,100% { opacity: .45; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.1); }
}

.hz-services-kicker {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border: 1px solid rgba(99,228,212,.17);
    background: linear-gradient(120deg, rgba(99,228,212,.07), rgba(139,133,244,.035));
    color: var(--hz-cyan);
    font-family: monospace;
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.hz-services-kicker::before {
    content: "//";
    margin-right: 8px;
    opacity: .45;
}

.hz-services-hero h1 {
    margin: 21px 0 35px;
    max-width: 700px;
    font-size: clamp(3.8rem, 7vw, 7rem);
    line-height: 1.15;  /* ← از 1.05 به 1.15 افزایش */
    letter-spacing: -.075em;
    font-weight: 800;
    padding: 4px 0;  /* ← اضافه شد */
}

.hz-services-gradient {
    background: linear-gradient(110deg, #ffffff 10%, #c7c4ff 42%, var(--hz-cyan) 88%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 4px 0 8px 0;  /* ← padding پایین اضافه شد */
    display: inline-block;
}

.hz-services-desc {
    max-width: 540px;
    margin: 0;
    color: var(--hz-muted);
    font-size: 15px;
    line-height: 1.9;
}

.hz-services-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.hz-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 45px;
    padding: 0 20px;
    border: 1px solid var(--hz-line);
    color: white;
    text-decoration: none;
    font-family: monospace;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    overflow: hidden;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
}

.hz-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    transition: transform .55s ease;
}

.hz-btn:hover::before {
    transform: translateX(110%);
}

.hz-btn-primary {
    border-color: rgba(99,228,212,.25);
    background: linear-gradient(110deg, rgba(99,228,212,.14), rgba(139,133,244,.13));
}

.hz-btn-primary:hover {
    transform: translateY(-3px);
    border-color: var(--hz-cyan);
    box-shadow: 0 10px 35px rgba(99,228,212,.1);
}

/* ============================================================
   VISUAL AREA — با گره‌های نزدیک‌تر
   ============================================================ */
.hz-services-visual {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hz-services-orbit-ring {
    position: absolute;
    border: 1px solid rgba(99, 228, 213, 0.192);
    border-radius: 50%;
    pointer-events: none;
}

.hz-services-orbit-1 {
    width: 420px;
    height: 420px;
    transform: rotate(-25deg) scaleY(.45);
    animation: hzOrbitOne 24s linear infinite;
}

.hz-services-orbit-2 {
    width: 350px;
    height: 350px;
    border-color: rgba(139, 133, 244, 0.171);
    transform: rotate(35deg) scaleY(.5);
    animation: hzOrbitTwo 20s linear infinite;
}

.hz-services-orbit-3 {
    width: 290px;
    height: 290px;
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.096);
    animation: hzOrbitThree 30s linear infinite;
}

@keyframes hzOrbitOne {
    from { transform: rotate(0deg) scaleY(.45); }
    to { transform: rotate(360deg) scaleY(.45); }
}

@keyframes hzOrbitTwo {
    from { transform: rotate(360deg) scaleY(.5); }
    to { transform: rotate(0deg) scaleY(.5); }
}

@keyframes hzOrbitThree {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* ===== مرکز بصری (هگزاگرام سرویس‌ها) ===== */
.hz-services-core {
    position: relative;
    z-index: 5;
    width: 240px;  
    height: 240px;
    display: grid;
    place-items: center;
}

.hz-services-core::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(99,228,212,.18), rgba(139,133,244,.1) 40%, transparent 70%); /* ← پررنگ‌تر */
    border-radius: 50%;
    filter: blur(20px);
    animation: hzCoreGlow 4s ease-in-out infinite;
}

.hz-services-core-icon {
    position: relative;
    z-index: 2;
    font-size: 80px; 
    font-weight: 300;
    opacity: .8;  
    color: var(--hz-cyan);
    text-shadow: 0 0 60px rgba(99, 228, 213, 0.301);  
    letter-spacing: -.06em;
}

.hz-services-core::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(99,228,212,.12), rgba(139,133,244,.06) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(20px);
    animation: hzCoreGlow 4s ease-in-out infinite;
}

@keyframes hzCoreGlow {
    0%,100% { transform: scale(.95); opacity: .5; }
    50% { transform: scale(1.1); opacity: 1; }
}

.hz-services-core-icon {
    position: relative;
    z-index: 2;
    font-size: 72px;
    font-weight: 300;
    opacity: .6;
    color: var(--hz-cyan);
    text-shadow: 0 0 40px rgba(99,228,212,.15);
    letter-spacing: -.06em;
}

.hz-services-core-label {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.15);
    font-family: monospace;
    font-size: 7px;
    letter-spacing: .3em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ===== گره‌های مدار (نزدیک‌تر به مرکز) ===== */
.hz-service-node {
    position: absolute;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;
    background: rgba(7,9,16,.7);
    backdrop-filter: blur(12px);
    transition: all .4s ease;
}

.hz-service-node:hover {
    border-color: rgba(99,228,212,.3);
    background: rgba(7,9,16,.85);
    transform: scale(1.08);
}

.hz-service-node .node-icon {
    font-size: 16px;
}

.hz-service-node .node-label {
    color: rgba(255,255,255,.4);
    font-family: monospace;
    font-size: 5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* نزدیک‌تر به مرکز */
.hz-node-1 { top: 12%; left: 18%; }
.hz-node-2 { top: 14%; right: 18%; }
.hz-node-3 { bottom: 24%; right: 14%; }
.hz-node-4 { bottom: 22%; left: 16%; }
.hz-node-5 { bottom: 45%; left: 6%; }

/* ============================================================
   SERVICES GRID — مدرن‌تر با خطوط دیجیتال و هاور جذاب
   ============================================================ */
.hz-services-grid-section {
    position: relative;
    max-width: 1380px;
    margin: 0 auto;
    padding: 40px 42px 90px;  
    z-index: 2;
}

.hz-section-head {
    margin-bottom: 42px;
}

.hz-section-index {
    color: var(--hz-cyan);
    font-family: monospace;
    font-size: 9px;
    letter-spacing: .18em;
}

.hz-section-title {
    margin: 8px 0 0;
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    line-height: 1;
    letter-spacing: -.05em;
}

.hz-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    border: 1px solid var(--hz-line);
    background: var(--hz-line);
}

.hz-service-card {
    position: relative;
    min-height: 280px;
    padding: 34px 28px;
    background: rgba(7,9,16,.9);
    overflow: hidden;
    transition: transform .4s ease, background .4s ease;
    display: flex;
    flex-direction: column;
    isolation: isolate;
}

/* ===== خطوط دیجیتال (4 خط) ===== */
.hz-service-card .digital-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99,228,212,.08), transparent);
    pointer-events: none;
    transition: all .5s ease;
}

.hz-service-card .digital-line-1 {
    top: 12px;
    left: 12px;
    width: 30px;
}

.hz-service-card .digital-line-2 {
    bottom: 12px;
    right: 12px;
    width: 30px;
    background: linear-gradient(90deg, transparent, rgba(139,133,244,.08), transparent);
}

.hz-service-card .digital-line-3 {
    top: 50%;
    left: 6px;
    width: 20px;
    transform: translateY(-50%) rotate(90deg);
}

.hz-service-card .digital-line-4 {
    top: 50%;
    right: 6px;
    width: 20px;
    transform: translateY(-50%) rotate(90deg);
    background: linear-gradient(90deg, transparent, rgba(255,107,157,.08), transparent);
}

/* ===== نقطه‌های دیجیتال ===== */
.hz-service-card .digital-dot {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(99,228,212,.06);
    transition: all .5s ease;
}

.hz-service-card .digital-dot-1 { top: 6px; right: 20%; }
.hz-service-card .digital-dot-2 { bottom: 6px; left: 25%; }
.hz-service-card .digital-dot-3 { top: 40%; left: 4%; }
.hz-service-card .digital-dot-4 { top: 30%; right: 4%; }

/* ===== گلو نئونی ===== */
.hz-service-card .card-glow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(99,228,212,.08), transparent);
    opacity: 1;
    transition: all .6s ease;
}

/* ===== هاور ===== */
.hz-service-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--hz-cyan), var(--hz-purple), var(--hz-pink));
    transition: width .5s ease;
    z-index: 1;
}

.hz-service-card:hover {
    z-index: 3;
    transform: translateY(-4px);
    background: rgba(255,255,255,.04);
}

.hz-service-card:hover::after {
    width: 100%;
}

/* خطوط در هاور */
.hz-service-card:hover .digital-line {
    background: linear-gradient(90deg, transparent, var(--hz-cyan), transparent);
    width: 50px;
}

.hz-service-card:hover .digital-line-2 {
    background: linear-gradient(90deg, transparent, var(--hz-purple), transparent);
    width: 50px;
}

.hz-service-card:hover .digital-line-3,
.hz-service-card:hover .digital-line-4 {
    width: 30px;
}

/* نقطه‌ها در هاور */
.hz-service-card:hover .digital-dot {
    background: rgba(99,228,212,.3);
    transform: scale(1.8);
    box-shadow: 0 0 12px rgba(99,228,212,.15);
}

/* گلو در هاور */
.hz-service-card:hover .card-glow {
    background: linear-gradient(90deg, transparent, rgba(99,228,212,.2), transparent);
}

/* ===== محتوای کارت ===== */
.hz-service-card .card-icon {
    font-size: 32px;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}

.hz-service-card .card-number {
    color: rgba(255,255,255,.12);
    font-family: monospace;
    font-size: 9px;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}

.hz-service-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
    letter-spacing: -.02em;
    position: relative;
    z-index: 2;
    transition: color .3s ease;
}

.hz-service-card:hover h3 {
    color: #fff;
}

.hz-service-card p {
    margin: 0;
    color: var(--hz-muted);
    font-size: 13px;
    line-height: 1.7;
    flex: 1;
    position: relative;
    z-index: 2;
}

.hz-service-card .card-tag {
    margin-top: 16px;
    color: rgba(99,228,212,.3);
    font-family: monospace;
    font-size: 7px;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-top: 1px solid rgba(255,255,255,.04);
    padding-top: 14px;
    position: relative;
    z-index: 2;
}

.hz-service-card.popular {
    background: radial-gradient(circle at 90% 10%, rgba(99,228,212,.08), transparent 35%), rgba(7,9,16,.95);
    border: 1px solid rgba(99,228,212,.12);
    margin: -1px;
}

.hz-service-card.popular .popular-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 12px;
    background: rgba(99,228,212,.12);
    border: 1px solid rgba(99,228,212,.2);
    border-radius: 100px;
    color: var(--hz-cyan);
    font-family: monospace;
    font-size: 7px;
    letter-spacing: .1em;
    z-index: 5;
}

/* ============================================================
   PROCESS (روش کار)
   ============================================================ */
.hz-process-section {
    position: relative;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 42px 60px;
    z-index: 2;
}
.hz-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    border: 1px solid var(--hz-line);
    background: var(--hz-line);
}

.hz-process-step {
    padding: 32px 24px;
    background: rgba(7,9,16,.9);
    transition: background .4s ease, transform .4s ease;
}

.hz-process-step:hover {
    background: rgba(255,255,255,.035);
    transform: translateY(-4px);
}

.hz-process-step .step-number {
    color: var(--hz-cyan);
    font-family: monospace;
    font-size: 28px;
    font-weight: 800;
    opacity: .2;
    display: block;
    margin-bottom: 12px;
    line-height: 1;
}

.hz-process-step h4 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 8px;
}

.hz-process-step p {
    margin: 0;
    color: var(--hz-muted);
    font-size: 12px;
    line-height: 1.7;
}

/* ============================================================
   GUARANTEE — با تصویر شیشه‌ای و متن آموزش
   ============================================================ */
.hz-guarantee-section {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 42px 35px; 
    z-index: 2;
    position: relative;
}

.hz-guarantee-box {
    position: relative;
    padding: 50px 60px;
    border: 1px solid rgba(99,228,212,.15);
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

/* تصویر پس‌زمینه شیشه‌ای */
.hz-guarantee-box .guarantee-bg-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .06;
    object-fit: cover;
    width: 100%;
    height: 100%;
    filter: blur(2px);
    pointer-events: none;
}

/* افکت شیشه‌ای بیشتر */
.hz-guarantee-box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: 
        radial-gradient(circle at 30% 20%, rgba(99,228,212,.05), transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(139,133,244,.05), transparent 50%);
    border-radius: 12px;
}

.hz-guarantee-box .guarantee-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}

.hz-guarantee-box h3 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #fff;
}

.hz-guarantee-box p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--hz-muted);
    font-size: 15px;
    line-height: 1.8;
}

.hz-guarantee-box .guarantee-features {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.hz-guarantee-box .guarantee-features span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.5);
    font-size: 13px;
}

.hz-guarantee-box .guarantee-features span::before {
    content: "✦";
    color: var(--hz-cyan);
    font-size: 12px;
}

.hz-guarantee-box small {
    display: block;
    margin-top: 16px;
    color: rgba(255,255,255,.2);
    font-size: 11px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .hz-services-hero {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
        padding-top: 60px;
    }
    .hz-services-hero::after { display: none; }
    .hz-services-hero-copy { display: flex; flex-direction: column; align-items: center; }
    .hz-services-desc { max-width: 600px; margin: 0 auto; }
    .hz-services-actions { justify-content: center; }
    .hz-services-visual { min-height: 420px; }
    .hz-node-1 { top: 4%; left: 12%; }
    .hz-node-2 { top: 6%; right: 12%; }
    .hz-node-3 { bottom: 20%; right: 6%; }
    .hz-node-4 { bottom: 18%; left: 8%; }
    .hz-node-5 { bottom: 40%; left: 2%; }
    .hz-services-grid { grid-template-columns: repeat(2, 1fr); }
    .hz-process-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .hz-services-hero { padding: 50px 20px 40px; }
    .hz-services-hero h1 { font-size: clamp(2.8rem, 12vw, 4.2rem); }
    .hz-services-grid { grid-template-columns: 1fr; }
    .hz-process-grid { grid-template-columns: 1fr; }
    .hz-guarantee-box { padding: 30px 20px; }
    .hz-guarantee-box h3 { font-size: 20px; }
    .hz-guarantee-box p { font-size: 14px; }
    .hz-guarantee-box .guarantee-features { flex-direction: column; gap: 10px; align-items: center; }
    .hz-services-grid-section { padding: 20px 20px 60px; }
    .hz-process-section { padding: 0 20px 60px; }
    .hz-guarantee-section { padding: 0 20px 60px; }
    .hz-services-visual { min-height: 350px; }
    .hz-services-core { width: 160px; height: 160px; }
    .hz-services-core-icon { font-size: 50px; }
    .hz-services-orbit-1 { width: 320px; height: 320px; }
    .hz-services-orbit-2 { width: 270px; height: 270px; }
    .hz-services-orbit-3 { width: 220px; height: 220px; }
    .hz-service-node { padding: 4px 8px; }
    .hz-service-node .node-icon { font-size: 13px; }
    .hz-service-node .node-label { font-size: 4px; }
    .hz-node-1 { top: 2%; left: 6%; }
    .hz-node-2 { top: 4%; right: 6%; }
    .hz-node-3 { bottom: 14%; right: 2%; }
    .hz-node-4 { bottom: 10%; left: 4%; }
    .hz-node-5 { display: none; }
}

@media (max-width: 430px) {
    .hz-services-hero { padding: 40px 16px 30px; }
    .hz-services-hero h1 { font-size: 2.2rem; }
    .hz-services-actions { flex-direction: column; width: 100%; }
    .hz-btn { width: 100%; }
    .hz-services-visual { min-height: 280px; }
    .hz-services-core { width: 130px; height: 130px; }
    .hz-services-core-icon { font-size: 38px; }
    .hz-services-orbit-1 { width: 260px; height: 260px; }
    .hz-services-orbit-2 { width: 210px; height: 210px; }
    .hz-services-orbit-3 { width: 170px; height: 170px; }
    .hz-service-node { display: none; }
    .hz-guarantee-box .guarantee-features span { font-size: 12px; }
    .hz-service-card .digital-line-3,
    .hz-service-card .digital-line-4 { display: none; }
}


/* ============================================================
   CONTACT PAGE — HZ
   ============================================================ */

:root {
    --hz-bg: #070910;
    --hz-bg-soft: #0b0e17;
    --hz-text: #f5f7ff;
    --hz-muted: rgba(245,247,255,.48);
    --hz-cyan: #63e4d4;
    --hz-purple: #8b85f4;
    --hz-pink: #ff6b9d;
    --hz-line: rgba(255,255,255,.08);
    --hz-glass: rgba(255,255,255,.028);
}


/* ============================================================
   HERO
   ============================================================ */
.hz-contact-hero {
    position: relative;
    max-width: 1380px;
    margin: 0 auto;
    padding: 80px 42px 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
    z-index: 2;
}

.hz-contact-hero-copy {
    position: relative;
    z-index: 5;
}

.hz-contact-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
    color: rgba(255,255,255,.38);
    font-family: monospace;
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.hz-contact-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hz-cyan);
    box-shadow: 0 0 0 4px rgba(99,228,212,.06), 0 0 18px rgba(99,228,212,.8);
    animation: hzPulse 2.5s ease-in-out infinite;
}

@keyframes hzPulse {
    0%,100% { opacity: .45; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.1); }
}

.hz-contact-kicker {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px 9px 13px;
    border: 1px solid rgba(99,228,212,.17);
    background: linear-gradient(120deg, rgba(99,228,212,.07), rgba(139,133,244,.035));
    color: var(--hz-cyan);
    font-family: monospace;
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1.4;
}

.hz-contact-kicker::before {
    content: "//";
    margin-right: 8px;
    opacity: .45;
}

.hz-contact-hero h1 {
    margin: 21px 0 20px;
    max-width: 700px;
    font-size: clamp(3.8rem, 7vw, 7rem);
    line-height: 1.15;
    letter-spacing: -.075em;
    font-weight: 800;
    padding: 4px 0;
}

.hz-contact-gradient {
    background: linear-gradient(110deg, #ffffff 10%, #c7c4ff 42%, var(--hz-cyan) 88%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 4px 0 8px 0;
    display: inline-block;
}

.hz-contact-desc {
    max-width: 540px;
    margin: 0 0 30px;
    color: var(--hz-muted);
    font-size: 15px;
    line-height: 1.9;
}

/* ===== INFO ===== */
.hz-contact-info-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hz-contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid var(--hz-line);
    background: rgba(255,255,255,.02);
    transition: all .35s ease;
    border-radius: 4px;
}

.hz-contact-item:hover {
    border-color: rgba(99,228,212,.2);
    background: rgba(99,228,212,.04);
    transform: translateX(4px);
}

.hz-contact-item .item-icon {
    font-size: 18px;
    opacity: .6;
}

.hz-contact-item .item-label {
    color: rgba(255,255,255,.25);
    font-family: monospace;
    font-size: 8px;
    letter-spacing: .12em;
    text-transform: uppercase;
    min-width: 60px;
}

.hz-contact-item .item-value {
    color: rgba(255,255,255,.7);
    font-size: 14px;
    text-decoration: none;
    transition: color .3s;
}

.hz-contact-item .item-value:hover {
    color: var(--hz-cyan);
}

/* ============================================================
   VISUAL AREA — با وکتور شارپ‌تر
   ============================================================ */
.hz-contact-visual {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hz-contact-orbit-ring {
    position: absolute;
    border: 1px solid rgba(99,228,212,.055);
    border-radius: 50%;
    pointer-events: none;
}

.hz-contact-orbit-1 {
    width: 420px;
    height: 420px;
    transform: rotate(-25deg) scaleY(.45);
    animation: hzOrbitOne 24s linear infinite;
}

.hz-contact-orbit-2 {
    width: 350px;
    height: 350px;
    border-color: rgba(139,133,244,.055);
    transform: rotate(35deg) scaleY(.5);
    animation: hzOrbitTwo 20s linear infinite;
}

.hz-contact-orbit-3 {
    width: 290px;
    height: 290px;
    border-style: dashed;
    border-color: rgba(255,255,255,.025);
    animation: hzOrbitThree 30s linear infinite;
}

@keyframes hzOrbitOne {
    from { transform: rotate(0deg) scaleY(.45); }
    to { transform: rotate(360deg) scaleY(.45); }
}

@keyframes hzOrbitTwo {
    from { transform: rotate(360deg) scaleY(.5); }
    to { transform: rotate(0deg) scaleY(.5); }
}

@keyframes hzOrbitThree {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== وکتور ===== */
.hz-contact-illustration {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 520px;  /* ← از 420px به 520px افزایش */
    animation: floatIllustration 6s ease-in-out infinite;
}

@keyframes floatIllustration {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
}

.hz-contact-illustration svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   FORM SECTION
   ============================================================ */
.hz-contact-form-section {
    max-width: 1380px;
    margin: 0 auto;
    padding: 20px 42px 40px;
    z-index: 2;
    position: relative;
}

.hz-form-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start;
}

.hz-form-left h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 10px;
}

.hz-form-left p {
    color: var(--hz-muted);
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 25px;
}

.hz-social-links {
    display: flex;
    gap: 10px;
}

.hz-social-link {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--hz-line);
    border-radius: 50%;
    color: rgba(255,255,255,.3);
    text-decoration: none;
    transition: all .35s ease;
    font-size: 14px;
}

.hz-social-link:hover {
    border-color: var(--hz-cyan);
    color: var(--hz-cyan);
    background: rgba(99,228,212,.06);
    transform: translateY(-4px);
}

/* ===== فرم ===== */
.hz-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.hz-form .form-group {
    position: relative;
}

.hz-form label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,.4);
    margin-bottom: 6px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hz-form input,
.hz-form textarea {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255,255,255,.025);
    border: 1px solid var(--hz-line);
    border-radius: 4px;
    color: var(--hz-text);
    font-size: 14px;
    font-family: inherit;
    transition: all .35s ease;
}

.hz-form input:focus,
.hz-form textarea:focus {
    outline: none;
    border-color: rgba(99,228,212,.3);
    background: rgba(255,255,255,.04);
    box-shadow: 0 0 0 4px rgba(99,228,212,.04);
}

.hz-form input::placeholder,
.hz-form textarea::placeholder {
    color: rgba(255,255,255,.15);
}

.hz-form textarea {
    resize: vertical;
    min-height: 130px;
}

.hz-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.hz-form .form-submit {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 30px;
    border: 1px solid rgba(99,228,212,.25);
    background: linear-gradient(110deg, rgba(99,228,212,.14), rgba(139,133,244,.13));
    color: white;
    font-family: monospace;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .35s ease;
    border-radius: 4px;
    align-self: flex-start;
    min-height: 48px;
    padding: 4px 30px 6px 30px;
    line-height: 1.4;
}

.hz-form .form-submit:hover {
    transform: translateY(-3px);
    border-color: var(--hz-cyan);
    box-shadow: 0 10px 35px rgba(99,228,212,.1);
}

.hz-form .form-note {
    color: rgba(255,255,255,.2);
    font-size: 11px;
    margin: 4px 0 0;
}

/* ===== reCAPTCHA ===== */
.hz-recaptcha-wrapper {
    display: flex;
    justify-content: center;
    margin: 4px 0 8px;
}

.hz-recaptcha-wrapper .g-recaptcha {
    transform: scale(0.92);
    transform-origin: center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .hz-contact-hero {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 30px;
        padding-top: 60px;
    }
    .hz-contact-hero-copy { display: flex; flex-direction: column; align-items: center; }
    .hz-contact-desc { max-width: 600px; margin: 0 auto 30px; }
    .hz-contact-info-grid { width: 100%; max-width: 500px; }
    .hz-contact-visual { min-height: 350px; }
    .hz-contact-illustration { max-width: 280px; }
    .hz-form-grid { grid-template-columns: 1fr; gap: 40px; }
    .hz-form .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .hz-contact-hero { padding: 40px 20px 30px; }
    .hz-contact-hero h1 { font-size: clamp(2.8rem, 12vw, 4.2rem); }
    .hz-contact-item { flex-wrap: wrap; gap: 4px; }
    .hz-contact-item .item-label { min-width: 100%; font-size: 7px; }
    .hz-contact-item .item-value { font-size: 13px; }
    .hz-contact-form-section { padding: 10px 20px 20px; }
    .hz-form .form-submit { width: 100%; justify-content: center; }
    .hz-contact-orbit-1 { width: 320px; height: 320px; }
    .hz-contact-orbit-2 { width: 270px; height: 270px; }
    .hz-contact-orbit-3 { width: 220px; height: 220px; }
    .hz-contact-visual { min-height: 280px; }
    .hz-contact-illustration { max-width: 200px; }
    .hz-recaptcha-wrapper .g-recaptcha { transform: scale(0.78); }
}

@media (max-width: 430px) {
    .hz-contact-hero { padding: 30px 16px 20px; }
    .hz-contact-hero h1 { font-size: 2.4rem; }
    .hz-contact-info-grid { gap: 8px; }
    .hz-contact-item { padding: 10px 12px; }
    .hz-contact-item .item-value { font-size: 12px; }
    .hz-social-links { justify-content: center; }
    .hz-contact-visual { min-height: 220px; }
    .hz-contact-illustration { max-width: 150px; }
    .hz-contact-orbit-1 { width: 260px; height: 260px; }
    .hz-contact-orbit-2 { width: 210px; height: 210px; }
    .hz-contact-orbit-3 { width: 170px; height: 170px; }
    .hz-recaptcha-wrapper .g-recaptcha { transform: scale(0.65); }
}


/* ============================================================
   ERROR PAGE 500 — SYSTEM / TECH STYLE
   ============================================================ */

:root {
    --hz-bg: #070910;
    --hz-bg-soft: #0b0e17;
    --hz-text: #f5f7ff;
    --hz-muted: rgba(245,247,255,.48);
    --hz-cyan: #63e4d4;
    --hz-purple: #8b85f4;
    --hz-pink: #ff6b9d;
    --hz-line: rgba(255,255,255,.08);
}

.hz-error {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background:
        radial-gradient(circle at 20% 20%, rgba(99,228,212,.075), transparent 25%),
        radial-gradient(circle at 80% 80%, rgba(139,133,244,.055), transparent 30%),
        radial-gradient(circle at 50% 50%, rgba(255,107,157,.04), transparent 40%),
        radial-gradient(circle at 50% 100%, #05080f 0%, #0d1520 40%, transparent 70%);
    color: var(--hz-text);
}

.hz-error::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 72%);
}

.hz-error::after {
    content: "";
    position: absolute;
    top: 10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99,228,212,.03), transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    animation: hzBgFloat 20s ease-in-out infinite;
}

@keyframes hzBgFloat {
    0%,100% { transform: translate(0,0) scale(1); }
    33% { transform: translate(-30px, 20px) scale(1.1); }
    66% { transform: translate(20px, -20px) scale(0.9); }
}

.hz-error-inner {
    position: relative;
    z-index: 5;
    text-align: center;
    max-width: 700px;
}

.hz-error-code {
    font-size: clamp(8rem, 20vw, 16rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.06em;
    background: linear-gradient(110deg, #ffffff 10%, #c7c4ff 42%, var(--hz-cyan) 88%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    padding: 4px 0 8px 0;
    display: inline-block;
}

.hz-error-label {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px 9px 13px;
    border: 1px solid rgba(99,228,212,.17);
    background: linear-gradient(120deg, rgba(99,228,212,.07), rgba(139,133,244,.035));
    color: var(--hz-cyan);
    font-family: monospace;
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1.4;
    margin-bottom: 20px;
}

.hz-error-label::before {
    content: "//";
    margin-right: 8px;
    opacity: .45;
}

.hz-error h1 {
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 700;
    margin: 0 0 16px;
    line-height: 1.2;
    letter-spacing: -.04em;
}

.hz-error p {
    max-width: 520px;
    margin: 0 auto 35px;
    color: var(--hz-muted);
    font-size: 16px;
    line-height: 1.8;
}

.hz-error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.hz-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 4px 24px 6px 24px;
    border: 1px solid var(--hz-line);
    color: white;
    text-decoration: none;
    font-family: monospace;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    overflow: visible;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
    line-height: 1.4;
}

.hz-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    transition: transform .55s ease;
}

.hz-btn:hover::before {
    transform: translateX(110%);
}

.hz-btn-primary {
    border-color: rgba(99,228,212,.25);
    background: linear-gradient(110deg, rgba(99,228,212,.14), rgba(139,133,244,.13));
}

.hz-btn-primary:hover {
    transform: translateY(-3px);
    border-color: var(--hz-cyan);
    box-shadow: 0 10px 35px rgba(99,228,212,.1);
}

.hz-btn-outline:hover {
    transform: translateY(-3px);
    border-color: rgba(139,133,244,.45);
    background: rgba(139,133,244,.04);
}

@media (max-width: 640px) {
    .hz-error {
        padding: 30px 16px;
    }
    .hz-error-code {
        font-size: clamp(6rem, 16vw, 10rem);
    }
    .hz-error h1 {
        font-size: 1.8rem;
    }
    .hz-error p {
        font-size: 14px;
    }
    .hz-error-actions {
        flex-direction: column;
        align-items: center;
    }
    .hz-btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}


/* ============================================================
   ERROR PAGE 401 — SYSTEM / TECH STYLE
   ============================================================ */
:root {
    --hz-bg: #070910;
    --hz-bg-soft: #0b0e17;
    --hz-text: #f5f7ff;
    --hz-muted: rgba(245,247,255,.48);
    --hz-cyan: #63e4d4;
    --hz-purple: #8b85f4;
    --hz-pink: #ff6b9d;
    --hz-line: rgba(255,255,255,.08);
}

.hz-error {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background:
        radial-gradient(circle at 20% 20%, rgba(99,228,212,.075), transparent 25%),
        radial-gradient(circle at 80% 80%, rgba(139,133,244,.055), transparent 30%),
        radial-gradient(circle at 50% 50%, rgba(255,107,157,.04), transparent 40%),
        radial-gradient(circle at 50% 100%, #05080f 0%, #0d1520 40%, transparent 70%);
    color: var(--hz-text);
}

.hz-error::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 72%);
}

.hz-error::after {
    content: "";
    position: absolute;
    top: 10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99,228,212,.03), transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    animation: hzBgFloat 20s ease-in-out infinite;
}

@keyframes hzBgFloat {
    0%,100% { transform: translate(0,0) scale(1); }
    33% { transform: translate(-30px, 20px) scale(1.1); }
    66% { transform: translate(20px, -20px) scale(0.9); }
}

.hz-error-inner {
    position: relative;
    z-index: 5;
    text-align: center;
    max-width: 700px;
}

.hz-error-code {
    font-size: clamp(8rem, 20vw, 16rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.06em;
    background: linear-gradient(110deg, #ffffff 10%, #c7c4ff 42%, var(--hz-cyan) 88%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    padding: 4px 0 8px 0;
    display: inline-block;
}

.hz-error-label {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px 9px 13px;
    border: 1px solid rgba(99,228,212,.17);
    background: linear-gradient(120deg, rgba(99,228,212,.07), rgba(139,133,244,.035));
    color: var(--hz-cyan);
    font-family: monospace;
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1.4;
    margin-bottom: 20px;
}

.hz-error-label::before {
    content: "//";
    margin-right: 8px;
    opacity: .45;
}

.hz-error h1 {
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 700;
    margin: 0 0 16px;
    line-height: 1.2;
    letter-spacing: -.04em;
}

.hz-error p {
    max-width: 520px;
    margin: 0 auto 35px;
    color: var(--hz-muted);
    font-size: 16px;
    line-height: 1.8;
}

.hz-error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.hz-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 4px 24px 6px 24px;
    border: 1px solid var(--hz-line);
    color: white;
    text-decoration: none;
    font-family: monospace;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    overflow: visible;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
    line-height: 1.4;
}

.hz-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    transition: transform .55s ease;
}

.hz-btn:hover::before {
    transform: translateX(110%);
}

.hz-btn-primary {
    border-color: rgba(99,228,212,.25);
    background: linear-gradient(110deg, rgba(99,228,212,.14), rgba(139,133,244,.13));
}

.hz-btn-primary:hover {
    transform: translateY(-3px);
    border-color: var(--hz-cyan);
    box-shadow: 0 10px 35px rgba(99,228,212,.1);
}

.hz-btn-outline:hover {
    transform: translateY(-3px);
    border-color: rgba(139,133,244,.45);
    background: rgba(139,133,244,.04);
}

@media (max-width: 640px) {
    .hz-error { padding: 30px 16px; }
    .hz-error-code { font-size: clamp(6rem, 16vw, 10rem); }
    .hz-error h1 { font-size: 1.8rem; }
    .hz-error p { font-size: 14px; }
    .hz-error-actions { flex-direction: column; align-items: center; }
    .hz-btn { width: 100%; max-width: 280px; justify-content: center; }
}

/* ============================================================
   ERROR PAGE 405 — SYSTEM / TECH STYLE
   ============================================================ */

:root {
    --hz-bg: #070910;
    --hz-bg-soft: #0b0e17;
    --hz-text: #f5f7ff;
    --hz-muted: rgba(245,247,255,.48);
    --hz-cyan: #63e4d4;
    --hz-purple: #8b85f4;
    --hz-pink: #ff6b9d;
    --hz-line: rgba(255,255,255,.08);
}

.hz-error {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background:
        radial-gradient(circle at 20% 20%, rgba(99,228,212,.075), transparent 25%),
        radial-gradient(circle at 80% 80%, rgba(139,133,244,.055), transparent 30%),
        radial-gradient(circle at 50% 50%, rgba(255,107,157,.04), transparent 40%),
        radial-gradient(circle at 50% 100%, #05080f 0%, #0d1520 40%, transparent 70%);
    color: var(--hz-text);
}

.hz-error::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 72%);
}

.hz-error::after {
    content: "";
    position: absolute;
    top: 10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99,228,212,.03), transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    animation: hzBgFloat 20s ease-in-out infinite;
}

@keyframes hzBgFloat {
    0%,100% { transform: translate(0,0) scale(1); }
    33% { transform: translate(-30px, 20px) scale(1.1); }
    66% { transform: translate(20px, -20px) scale(0.9); }
}

.hz-error-inner {
    position: relative;
    z-index: 5;
    text-align: center;
    max-width: 700px;
}

.hz-error-code {
    font-size: clamp(8rem, 20vw, 16rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.06em;
    background: linear-gradient(110deg, #ffffff 10%, #c7c4ff 42%, var(--hz-cyan) 88%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    padding: 4px 0 8px 0;
    display: inline-block;
}

.hz-error-label {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px 9px 13px;
    border: 1px solid rgba(99,228,212,.17);
    background: linear-gradient(120deg, rgba(99,228,212,.07), rgba(139,133,244,.035));
    color: var(--hz-cyan);
    font-family: monospace;
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1.4;
    margin-bottom: 20px;
}

.hz-error-label::before {
    content: "//";
    margin-right: 8px;
    opacity: .45;
}

.hz-error h1 {
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 700;
    margin: 0 0 16px;
    line-height: 1.2;
    letter-spacing: -.04em;
}

.hz-error p {
    max-width: 520px;
    margin: 0 auto 35px;
    color: var(--hz-muted);
    font-size: 16px;
    line-height: 1.8;
}

.hz-error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.hz-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 4px 24px 6px 24px;
    border: 1px solid var(--hz-line);
    color: white;
    text-decoration: none;
    font-family: monospace;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    overflow: visible;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
    line-height: 1.4;
}

.hz-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    transition: transform .55s ease;
}

.hz-btn:hover::before {
    transform: translateX(110%);
}

.hz-btn-primary {
    border-color: rgba(99,228,212,.25);
    background: linear-gradient(110deg, rgba(99,228,212,.14), rgba(139,133,244,.13));
}

.hz-btn-primary:hover {
    transform: translateY(-3px);
    border-color: var(--hz-cyan);
    box-shadow: 0 10px 35px rgba(99,228,212,.1);
}

.hz-btn-outline:hover {
    transform: translateY(-3px);
    border-color: rgba(139,133,244,.45);
    background: rgba(139,133,244,.04);
}

@media (max-width: 640px) {
    .hz-error { padding: 30px 16px; }
    .hz-error-code { font-size: clamp(6rem, 16vw, 10rem); }
    .hz-error h1 { font-size: 1.8rem; }
    .hz-error p { font-size: 14px; }
    .hz-error-actions { flex-direction: column; align-items: center; }
    .hz-btn { width: 100%; max-width: 280px; justify-content: center; }
}


/* ============================================================
   ERROR PAGE 404 — SYSTEM / TECH STYLE
   ============================================================ */

:root {
    --hz-bg: #070910;
    --hz-bg-soft: #0b0e17;
    --hz-text: #f5f7ff;
    --hz-muted: rgba(245,247,255,.48);
    --hz-cyan: #63e4d4;
    --hz-purple: #8b85f4;
    --hz-pink: #ff6b9d;
    --hz-line: rgba(255,255,255,.08);
}

.hz-error {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background:
        radial-gradient(circle at 20% 20%, rgba(99,228,212,.075), transparent 25%),
        radial-gradient(circle at 80% 80%, rgba(139,133,244,.055), transparent 30%),
        radial-gradient(circle at 50% 50%, rgba(255,107,157,.04), transparent 40%),
        radial-gradient(circle at 50% 100%, #05080f 0%, #0d1520 40%, transparent 70%);
    color: var(--hz-text);
}

.hz-error::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 72%);
}

.hz-error::after {
    content: "";
    position: absolute;
    top: 10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99,228,212,.03), transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    animation: hzBgFloat 20s ease-in-out infinite;
}

@keyframes hzBgFloat {
    0%,100% { transform: translate(0,0) scale(1); }
    33% { transform: translate(-30px, 20px) scale(1.1); }
    66% { transform: translate(20px, -20px) scale(0.9); }
}

.hz-error-inner {
    position: relative;
    z-index: 5;
    text-align: center;
    max-width: 700px;
}

.hz-error-code {
    font-size: clamp(8rem, 20vw, 16rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.06em;
    background: linear-gradient(110deg, #ffffff 10%, #c7c4ff 42%, var(--hz-cyan) 88%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    padding: 4px 0 8px 0;
    display: inline-block;
}

.hz-error-code span {
    display: inline-block;
    animation: hzErrorGlitch 3s ease-in-out infinite;
}

@keyframes hzErrorGlitch {
    0%, 90%, 100% { transform: translate(0); opacity: 1; }
    92% { transform: translate(-4px, 2px); opacity: .8; }
    94% { transform: translate(4px, -2px); opacity: .8; }
    96% { transform: translate(-2px, 4px); opacity: .9; }
    98% { transform: translate(2px, -4px); opacity: .9; }
}

.hz-error-label {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px 9px 13px;
    border: 1px solid rgba(99,228,212,.17);
    background: linear-gradient(120deg, rgba(99,228,212,.07), rgba(139,133,244,.035));
    color: var(--hz-cyan);
    font-family: monospace;
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1.4;
    margin-bottom: 20px;
}

.hz-error-label::before {
    content: "//";
    margin-right: 8px;
    opacity: .45;
}

.hz-error h1 {
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 700;
    margin: 0 0 16px;
    line-height: 1.2;
    letter-spacing: -.04em;
}

.hz-error p {
    max-width: 520px;
    margin: 0 auto 35px;
    color: var(--hz-muted);
    font-size: 16px;
    line-height: 1.8;
}

.hz-error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.hz-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 4px 24px 6px 24px;
    border: 1px solid var(--hz-line);
    color: white;
    text-decoration: none;
    font-family: monospace;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    overflow: visible;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
    line-height: 1.4;
}

.hz-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    transition: transform .55s ease;
}

.hz-btn:hover::before {
    transform: translateX(110%);
}

.hz-btn-primary {
    border-color: rgba(99,228,212,.25);
    background: linear-gradient(110deg, rgba(99,228,212,.14), rgba(139,133,244,.13));
}

.hz-btn-primary:hover {
    transform: translateY(-3px);
    border-color: var(--hz-cyan);
    box-shadow: 0 10px 35px rgba(99,228,212,.1);
}

.hz-btn-outline:hover {
    transform: translateY(-3px);
    border-color: rgba(139,133,244,.45);
    background: rgba(139,133,244,.04);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
    .hz-error {
        padding: 30px 16px;
    }
    .hz-error-code {
        font-size: clamp(6rem, 16vw, 10rem);
    }
    .hz-error h1 {
        font-size: 1.8rem;
    }
    .hz-error p {
        font-size: 14px;
    }
    .hz-error-actions {
        flex-direction: column;
        align-items: center;
    }
    .hz-btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}


/* ============================================================
   ERROR PAGE 403 — SYSTEM / TECH STYLE
   ============================================================ */

:root {
    --hz-bg: #070910;
    --hz-bg-soft: #0b0e17;
    --hz-text: #f5f7ff;
    --hz-muted: rgba(245,247,255,.48);
    --hz-cyan: #63e4d4;
    --hz-purple: #8b85f4;
    --hz-pink: #ff6b9d;
    --hz-line: rgba(255,255,255,.08);
}

.hz-error {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background:
        radial-gradient(circle at 20% 20%, rgba(99,228,212,.075), transparent 25%),
        radial-gradient(circle at 80% 80%, rgba(139,133,244,.055), transparent 30%),
        radial-gradient(circle at 50% 50%, rgba(255,107,157,.04), transparent 40%),
        radial-gradient(circle at 50% 100%, #05080f 0%, #0d1520 40%, transparent 70%);
    color: var(--hz-text);
}

.hz-error::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 72%);
}

.hz-error::after {
    content: "";
    position: absolute;
    top: 10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99,228,212,.03), transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    animation: hzBgFloat 20s ease-in-out infinite;
}

@keyframes hzBgFloat {
    0%,100% { transform: translate(0,0) scale(1); }
    33% { transform: translate(-30px, 20px) scale(1.1); }
    66% { transform: translate(20px, -20px) scale(0.9); }
}

.hz-error-inner {
    position: relative;
    z-index: 5;
    text-align: center;
    max-width: 700px;
}

.hz-error-code {
    font-size: clamp(8rem, 20vw, 16rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.06em;
    background: linear-gradient(110deg, #ffffff 10%, #c7c4ff 42%, var(--hz-cyan) 88%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    padding: 4px 0 8px 0;
    display: inline-block;
}

.hz-error-code span {
    display: inline-block;
    animation: hzErrorGlitch 3s ease-in-out infinite;
}

@keyframes hzErrorGlitch {
    0%, 90%, 100% { transform: translate(0); opacity: 1; }
    92% { transform: translate(-4px, 2px); opacity: .8; }
    94% { transform: translate(4px, -2px); opacity: .8; }
    96% { transform: translate(-2px, 4px); opacity: .9; }
    98% { transform: translate(2px, -4px); opacity: .9; }
}

.hz-error-label {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px 9px 13px;
    border: 1px solid rgba(99,228,212,.17);
    background: linear-gradient(120deg, rgba(99,228,212,.07), rgba(139,133,244,.035));
    color: var(--hz-cyan);
    font-family: monospace;
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1.4;
    margin-bottom: 20px;
}

.hz-error-label::before {
    content: "//";
    margin-right: 8px;
    opacity: .45;
}

.hz-error h1 {
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 700;
    margin: 0 0 16px;
    line-height: 1.2;
    letter-spacing: -.04em;
}

.hz-error p {
    max-width: 520px;
    margin: 0 auto 35px;
    color: var(--hz-muted);
    font-size: 16px;
    line-height: 1.8;
}

.hz-error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.hz-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 4px 24px 6px 24px;
    border: 1px solid var(--hz-line);
    color: white;
    text-decoration: none;
    font-family: monospace;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    overflow: visible;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
    line-height: 1.4;
}

.hz-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    transition: transform .55s ease;
}

.hz-btn:hover::before {
    transform: translateX(110%);
}

.hz-btn-primary {
    border-color: rgba(99,228,212,.25);
    background: linear-gradient(110deg, rgba(99,228,212,.14), rgba(139,133,244,.13));
}

.hz-btn-primary:hover {
    transform: translateY(-3px);
    border-color: var(--hz-cyan);
    box-shadow: 0 10px 35px rgba(99,228,212,.1);
}

.hz-btn-outline:hover {
    transform: translateY(-3px);
    border-color: rgba(139,133,244,.45);
    background: rgba(139,133,244,.04);
}

@media (max-width: 640px) {
    .hz-error {
        padding: 30px 16px;
    }
    .hz-error-code {
        font-size: clamp(6rem, 16vw, 10rem);
    }
    .hz-error h1 {
        font-size: 1.8rem;
    }
    .hz-error p {
        font-size: 14px;
    }
    .hz-error-actions {
        flex-direction: column;
        align-items: center;
    }
    .hz-btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}


/* ============================================================
   ERROR PAGE 400 — SYSTEM / TECH STYLE
   ============================================================ */

:root {
    --hz-bg: #070910;
    --hz-bg-soft: #0b0e17;
    --hz-text: #f5f7ff;
    --hz-muted: rgba(245,247,255,.48);
    --hz-cyan: #63e4d4;
    --hz-purple: #8b85f4;
    --hz-pink: #ff6b9d;
    --hz-line: rgba(255,255,255,.08);
}

.hz-error {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background:
        radial-gradient(circle at 20% 20%, rgba(99,228,212,.075), transparent 25%),
        radial-gradient(circle at 80% 80%, rgba(139,133,244,.055), transparent 30%),
        radial-gradient(circle at 50% 50%, rgba(255,107,157,.04), transparent 40%),
        radial-gradient(circle at 50% 100%, #05080f 0%, #0d1520 40%, transparent 70%);
    color: var(--hz-text);
}

.hz-error::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 72%);
}

.hz-error::after {
    content: "";
    position: absolute;
    top: 10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99,228,212,.03), transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    animation: hzBgFloat 20s ease-in-out infinite;
}

@keyframes hzBgFloat {
    0%,100% { transform: translate(0,0) scale(1); }
    33% { transform: translate(-30px, 20px) scale(1.1); }
    66% { transform: translate(20px, -20px) scale(0.9); }
}

.hz-error-inner {
    position: relative;
    z-index: 5;
    text-align: center;
    max-width: 700px;
}

.hz-error-code {
    font-size: clamp(8rem, 20vw, 16rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.06em;
    background: linear-gradient(110deg, #ffffff 10%, #c7c4ff 42%, var(--hz-cyan) 88%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    padding: 4px 0 8px 0;
    display: inline-block;
}

.hz-error-label {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px 9px 13px;
    border: 1px solid rgba(99,228,212,.17);
    background: linear-gradient(120deg, rgba(99,228,212,.07), rgba(139,133,244,.035));
    color: var(--hz-cyan);
    font-family: monospace;
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1.4;
    margin-bottom: 20px;
}

.hz-error-label::before {
    content: "//";
    margin-right: 8px;
    opacity: .45;
}

.hz-error h1 {
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 700;
    margin: 0 0 16px;
    line-height: 1.2;
    letter-spacing: -.04em;
}

.hz-error p {
    max-width: 520px;
    margin: 0 auto 35px;
    color: var(--hz-muted);
    font-size: 16px;
    line-height: 1.8;
}

.hz-error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.hz-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 4px 24px 6px 24px;
    border: 1px solid var(--hz-line);
    color: white;
    text-decoration: none;
    font-family: monospace;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    overflow: visible;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
    line-height: 1.4;
}

.hz-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    transition: transform .55s ease;
}

.hz-btn:hover::before {
    transform: translateX(110%);
}

.hz-btn-primary {
    border-color: rgba(99,228,212,.25);
    background: linear-gradient(110deg, rgba(99,228,212,.14), rgba(139,133,244,.13));
}

.hz-btn-primary:hover {
    transform: translateY(-3px);
    border-color: var(--hz-cyan);
    box-shadow: 0 10px 35px rgba(99,228,212,.1);
}

.hz-btn-outline:hover {
    transform: translateY(-3px);
    border-color: rgba(139,133,244,.45);
    background: rgba(139,133,244,.04);
}

@media (max-width: 640px) {
    .hz-error {
        padding: 30px 16px;
    }
    .hz-error-code {
        font-size: clamp(6rem, 16vw, 10rem);
    }
    .hz-error h1 {
        font-size: 1.8rem;
    }
    .hz-error p {
        font-size: 14px;
    }
    .hz-error-actions {
        flex-direction: column;
        align-items: center;
    }
    .hz-btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}