/* ═══════════════════════════════════════════════

   ITARUS — Premium Dark Theme with Copper Accents

   ═══════════════════════════════════════════════ */



/* ─── Reset & Base ─── */

*,

*::before,

*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



:root {

    --bg: #0c0c0e;

    --bg-2: #131318;

    --bg-3: #1a1a22;

    --copper: #c8783a;

    --copper-light: #e0965a;

    --gold: #e8a844;

    --gold-light: #f5c862;

    --text: #f0ece6;

    --text-muted: #9a938a;

    --border: rgba(200, 120, 58, 0.18);

    --shadow: 0 4px 40px rgba(0, 0, 0, 0.6);

    --radius: 16px;

    --radius-sm: 8px;

    --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

}



html {

    scroll-behavior: smooth;

    font-size: 16px;

}



body {

    font-family: 'Inter', sans-serif;

    background: var(--bg);

    color: var(--text);

    line-height: 1.7;

    overflow-x: hidden;

}



img {

    display: block;

    max-width: 100%;

}



a {

    text-decoration: none;

    color: inherit;

}



ul {

    list-style: none;

}



.container {

    max-width: 1180px;

    margin: 0 auto;

    padding: 0 24px;

}



/* ─── Typography ─── */

h1,

h2,

h3,

h4 {

    font-family: 'Cormorant Garamond', serif;

    line-height: 1.2;

    font-weight: 600;

    color: var(--text);

}



h1 {

    font-size: clamp(2.8rem, 6vw, 5.5rem);

}



h2 {

    font-size: clamp(2rem, 4vw, 3.2rem);

}



h3 {

    font-size: 1.6rem;

}



h4 {

    font-size: 1.15rem;

}



em {

    color: var(--gold);

    font-style: normal;

}



.section-eyebrow {

    display: inline-block;

    font-size: 0.78rem;

    font-weight: 600;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    color: var(--copper-light);

    margin-bottom: 14px;

}



.section-eyebrow.light {

    color: var(--gold-light);

}



.section-desc {

    color: var(--text-muted);

    max-width: 560px;

    margin: 14px auto 0;

}



.section-header {

    text-align: center;

    margin-bottom: 64px;

}



/* ─── Buttons ─── */

.btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 14px 30px;

    border-radius: 50px;

    font-family: 'Inter', sans-serif;

    font-size: 0.9rem;

    font-weight: 600;

    letter-spacing: 0.04em;

    transition: var(--transition);

    cursor: pointer;

    border: none;

}



.btn-primary {

    background: linear-gradient(135deg, var(--copper), var(--gold));

    color: #fff;

    box-shadow: 0 4px 20px rgba(200, 120, 58, 0.35);

}



.btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 32px rgba(200, 120, 58, 0.55);

}



.btn-ghost {

    background: transparent;

    color: var(--text);

    border: 1.5px solid rgba(240, 236, 230, 0.35);

}



.btn-ghost:hover {

    border-color: var(--gold);

    color: var(--gold);

    transform: translateY(-2px);

}



.btn-outline {

    background: transparent;

    color: var(--gold-light);

    border: 1.5px solid var(--gold-light);

}



.btn-outline:hover {

    background: var(--gold-light);

    color: var(--bg);

    transform: translateY(-2px);

}



.btn-sm {

    padding: 10px 22px;

    font-size: 0.82rem;

}



.btn-lg {

    padding: 18px 40px;

    font-size: 1rem;

}



/* ─── Reveal Animations ─── */

.reveal {

    opacity: 0;

    transform: translateY(32px);

    transition: opacity 0.8s ease, transform 0.8s ease;

}



.reveal.visible {

    opacity: 1;

    transform: translateY(0);

}



.reveal:nth-child(2) {

    transition-delay: 0.1s;

}



.reveal:nth-child(3) {

    transition-delay: 0.2s;

}



.reveal:nth-child(4) {

    transition-delay: 0.3s;

}



/* ═══════════════════════════════════════════

   NAVBAR

═══════════════════════════════════════════ */

#navbar {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

    padding: 20px 0;

    transition: background 0.4s ease, padding 0.4s ease, backdrop-filter 0.4s ease;

}



#navbar.scrolled {

    background: rgba(12, 12, 14, 0.85);

    backdrop-filter: blur(20px);

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

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

    padding: 12px 0;

}



.nav-inner {

    max-width: 1180px;

    margin: 0 auto;

    padding: 0 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 32px;

}



.nav-logo {

    font-family: 'Cormorant Garamond', serif;

    font-size: 1.7rem;

    font-weight: 700;

    letter-spacing: 0.04em;

    transition: opacity 0.3s;

}



.nav-logo:hover {

    opacity: 0.8;

}



.logo-i {

    color: var(--gold);

}



.logo-tarus {

    color: var(--text);

}



.nav-links {

    display: flex;

    gap: 36px;

    align-items: center;

}



.nav-links a {

    font-size: 0.88rem;

    font-weight: 500;

    color: var(--text-muted);

    letter-spacing: 0.06em;

    position: relative;

    transition: color 0.3s;

}



.nav-links a::after {

    content: '';

    position: absolute;

    bottom: -4px;

    left: 0;

    width: 0;

    height: 1.5px;

    background: var(--gold);

    transition: width 0.3s ease;

}



.nav-links a:hover {

    color: var(--text);

}



.nav-links a:hover::after {

    width: 100%;

}



.nav-right {

    display: flex;

    align-items: center;

    gap: 16px;

}



.lang-switcher {

    display: flex;

    gap: 4px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(200, 120, 58, 0.25);

    border-radius: 50px;

    padding: 4px 6px;

}



.lang-btn {

    background: transparent;

    border: none;

    cursor: pointer;

    font-size: 1.25rem;

    opacity: 0.72;

    transition: opacity 0.2s, transform 0.2s, background 0.2s;

    padding: 2px 6px;

    border-radius: 50px;

    line-height: 1;

}



.lang-btn:hover {

    opacity: 1;

    background: rgba(255, 255, 255, 0.08);

    transform: scale(1.1);

}



.lang-btn.active {

    opacity: 1;

    transform: scale(1.12);

    background: rgba(200, 120, 58, 0.22);

    box-shadow: 0 0 0 1.5px rgba(200, 120, 58, 0.55);

}



.hamburger {

    display: none;

    flex-direction: column;

    gap: 5px;

    background: none;

    border: none;

    cursor: pointer;

    padding: 4px;

}



.hamburger span {

    display: block;

    width: 24px;

    height: 2px;

    background: var(--text);

    border-radius: 2px;

    transition: var(--transition);

}



.hamburger.open span:nth-child(1) {

    transform: rotate(45deg) translate(5px, 5px);

}



.hamburger.open span:nth-child(2) {

    opacity: 0;

}



.hamburger.open span:nth-child(3) {

    transform: rotate(-45deg) translate(5px, -5px);

}



/* ═══════════════════════════════════════════

   HERO

═══════════════════════════════════════════ */

.hero {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}



.hero-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

}



.hero-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1.05);

    animation: heroZoom 20s ease infinite alternate;

}



@keyframes heroZoom {

    from {

        transform: scale(1.05);

    }



    to {

        transform: scale(1.12);

    }

}



.hero-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(160deg,

            rgba(12, 12, 14, 0.88) 0%,

            rgba(12, 12, 14, 0.72) 50%,

            rgba(12, 12, 14, 0.80) 100%);

}



.hero-particles {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

}



.hero-content {

    position: relative;

    z-index: 2;

    text-align: center;

    max-width: 820px;

    padding: 0 24px;

}



.hero-eyebrow {

    font-size: 0.78rem;

    font-weight: 600;

    letter-spacing: 0.2em;

    text-transform: uppercase;

    color: var(--copper-light);

    margin-bottom: 22px;

    display: inline-flex;

    align-items: center;

    gap: 12px;

}



.hero-eyebrow::before,

.hero-eyebrow::after {

    content: '';

    display: inline-block;

    width: 30px;

    height: 1px;

    background: var(--copper-light);

}



.hero-title {

    margin-bottom: 24px;

    color: var(--text);

}



.hero-subtitle {

    font-size: clamp(0.95rem, 1.8vw, 1.15rem);

    color: rgba(240, 236, 230, 0.75);

    max-width: 600px;

    margin: 0 auto 40px;

}



.hero-cta {

    display: flex;

    gap: 16px;

    justify-content: center;

    flex-wrap: wrap;

}



.hero-scroll-hint {

    position: absolute;

    bottom: 36px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 2;

}



.hero-scroll-hint span {

    display: block;

    width: 1.5px;

    height: 60px;

    background: linear-gradient(to bottom, transparent, var(--gold));

    animation: scrollPulse 2.2s ease-in-out infinite;

    margin: 0 auto;

}



@keyframes scrollPulse {



    0%,

    100% {

        opacity: 0.3;

        transform: scaleY(1);

    }



    50% {

        opacity: 1;

        transform: scaleY(1.15);

    }

}



/* ═══════════════════════════════════════════

   STATS STRIP

═══════════════════════════════════════════ */

.stats-strip {

    background: var(--bg-2);

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

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

    padding: 56px 0;

}



.stats-strip .container {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0;

    flex-wrap: wrap;

}



.stat-item {

    text-align: center;

    padding: 16px 48px;

    flex: 1;

    min-width: 160px;

}



.stat-number {

    font-family: 'Cormorant Garamond', serif;

    font-size: 3.5rem;

    font-weight: 700;

    background: linear-gradient(135deg, var(--copper), var(--gold));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    line-height: 1;

}



.stat-suffix {

    font-size: 2rem;

    color: var(--gold);

    font-weight: 700;

}



.stat-item p {

    font-size: 0.78rem;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: var(--text-muted);

    margin-top: 8px;

}



.stat-divider {

    width: 1px;

    height: 60px;

    background: var(--border);

}



/* ═══════════════════════════════════════════

   PRODUCTS

═══════════════════════════════════════════ */

.products {

    padding: 120px 0;

    background: var(--bg);

}



.products-grid {

    display: grid;

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

    gap: 28px;

}



.product-card {

    background: var(--bg-2);

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

    border-radius: var(--radius);

    overflow: hidden;

    position: relative;

    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;

}



.product-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(200, 120, 58, 0.4);

    border-color: rgba(200, 120, 58, 0.4);

}



.product-badge {

    position: absolute;

    top: 16px;

    left: 16px;

    z-index: 3;

    background: linear-gradient(135deg, var(--copper), var(--gold));

    color: #fff;

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    padding: 5px 12px;

    border-radius: 50px;

}



.product-img-wrap {

    position: relative;

    background: #fff;

    overflow: hidden;

    height: 260px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.product-img-wrap img {

    max-height: 230px;

    width: auto;

    max-width: 90%;

    object-fit: contain;

    transition: transform 0.5s ease;

}



.product-card:hover .product-img-wrap img {

    transform: scale(1.06);

}



.product-img-glow {

    position: absolute;

    inset: 0;

    pointer-events: none;

    background: radial-gradient(ellipse at 50% 100%, rgba(200, 120, 58, 0.08), transparent 65%);

    opacity: 0;

    transition: opacity 0.4s;

}



.product-card:hover .product-img-glow {

    opacity: 1;

}



.product-body {

    padding: 28px;

}



.product-tag {

    display: inline-block;

    font-size: 0.7rem;

    font-weight: 600;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: var(--copper-light);

    margin-bottom: 10px;

}



.product-body h3 {

    margin-bottom: 12px;

    font-size: 1.45rem;

}



.product-body h3 strong {

    color: var(--gold);

}



.product-body>p {

    font-size: 0.87rem;

    color: var(--text-muted);

    margin-bottom: 20px;

    line-height: 1.65;

}



.product-specs {

    margin-bottom: 24px;

    display: flex;

    flex-direction: column;

    gap: 7px;

}



.product-specs li {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 0.82rem;

    color: var(--text-muted);

    padding: 6px 10px;

    border-radius: var(--radius-sm);

    background: rgba(26, 26, 34, 0.7);

}



.product-specs li:hover {

    background: rgba(200, 120, 58, 0.08);

    color: var(--text);

}



.spec-icon {

    font-size: 1rem;

    flex-shrink: 0;

}



.products-cta {

    text-align: center;

    margin-top: 72px;

    padding: 48px;

    background: var(--bg-3);

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

    border-radius: var(--radius);

}



.products-cta p {

    color: var(--text-muted);

    margin-bottom: 28px;

    font-size: 1.05rem;

}



/* ═══════════════════════════════════════════

   ABOUT

═══════════════════════════════════════════ */

.about {

    padding: 120px 0;

    background: var(--bg-2);

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

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

}



.about-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: start;

}



.about-text p {

    color: var(--text-muted);

    margin-bottom: 20px;

    font-size: 1rem;

}



.about-text .btn {

    margin-top: 16px;

}



.about-values {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}



.value-card {

    background: var(--bg-3);

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

    border-radius: var(--radius);

    padding: 28px 24px;

    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;

}



.value-card:hover {

    border-color: rgba(200, 120, 58, 0.45);

    transform: translateY(-4px);

    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);

}



.value-icon {

    font-size: 2rem;

    margin-bottom: 14px;

}



.value-card h4 {

    font-size: 1rem;

    margin-bottom: 8px;

    color: var(--text);

}



.value-card p {

    font-size: 0.83rem;

    color: var(--text-muted);

    line-height: 1.6;

}



/* ═══════════════════════════════════════════

   HOW IT WORKS

═══════════════════════════════════════════ */

.howitworks {

    padding: 120px 0;

    background: var(--bg);

}



.steps-grid {

    display: flex;

    align-items: start;

    gap: 0;

    flex-wrap: nowrap;

    overflow: hidden;

}



.step {

    flex: 1;

    text-align: center;

    padding: 0 24px;

}



.step-num {

    font-family: 'Cormorant Garamond', serif;

    font-size: 4rem;

    font-weight: 700;

    line-height: 1;

    background: linear-gradient(135deg, var(--copper), var(--gold));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    margin-bottom: 20px;

}



.step h4 {

    margin-bottom: 10px;

}



.step p {

    font-size: 0.87rem;

    color: var(--text-muted);

    line-height: 1.65;

}



.step-arrow {

    flex-shrink: 0;

    font-size: 1.6rem;

    color: var(--copper);

    padding-top: 28px;

    opacity: 0.5;

}



/* ═══════════════════════════════════════════

   CONTACT

═══════════════════════════════════════════ */

.contact {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

}



.contact-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

}



.contact-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.contact-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(160deg, rgba(12, 12, 14, 0.93), rgba(12, 12, 14, 0.85));

}



.contact-content {

    position: relative;

    z-index: 1;

    text-align: center;

    max-width: 720px;

    margin: 0 auto;

}



.contact-content h2 {

    margin-bottom: 20px;

}



.contact-content>p {

    color: rgba(240, 236, 230, 0.7);

    margin-bottom: 48px;

}



.contact-methods {

    display: flex;

    justify-content: center;

    gap: 28px;

    flex-wrap: wrap;

    margin-bottom: 48px;

}



.contact-method {

    display: flex;

    align-items: center;

    gap: 16px;

    background: rgba(26, 26, 34, 0.7);

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

    border-radius: var(--radius);

    padding: 18px 28px;

    transition: border-color 0.3s, transform 0.3s, background 0.3s;

}



.contact-method:hover {

    border-color: rgba(200, 120, 58, 0.55);

    background: rgba(26, 26, 34, 0.95);

    transform: translateY(-3px);

}



.method-icon {

    font-size: 1.7rem;

}



.method-label {

    font-size: 0.72rem;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: var(--text-muted);

}



.method-value {

    font-size: 1rem;

    font-weight: 600;

    color: var(--text);

}



/* ═══════════════════════════════════════════

   FOOTER

═══════════════════════════════════════════ */

.footer {

    background: var(--bg-2);

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

    padding: 48px 0;

}



.footer-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 32px;

    flex-wrap: wrap;

}



.footer-brand {

    font-family: 'Cormorant Garamond', serif;

    font-size: 1.5rem;

    font-weight: 700;

}



.footer-brand p {

    font-family: 'Inter', sans-serif;

    font-size: 0.78rem;

    color: var(--text-muted);

    margin-top: 4px;

    font-weight: 400;

}



.footer-links {

    display: flex;

    gap: 28px;

    flex-wrap: wrap;

}



.footer-links a {

    font-size: 0.85rem;

    color: var(--text-muted);

    transition: color 0.25s;

}



.footer-links a:hover {

    color: var(--gold);

}



.footer-copy {

    text-align: right;

}



.footer-copy p {

    font-size: 0.8rem;

    color: var(--text-muted);

    line-height: 1.8;

}



.footer-copy a {

    color: var(--copper-light);

    transition: color 0.25s;

}



.footer-copy a:hover {

    color: var(--gold);

}



/* ═══════════════════════════════════════════

   PRODUCT DETAIL PAGES

═══════════════════════════════════════════ */

.product-detail {

    padding: 140px 0 80px;

    min-height: 100vh;

}



.detail-request {

    background: linear-gradient(135deg, var(--bg-2), var(--bg-3));

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

    border-radius: var(--radius);

    padding: 28px 36px;

    margin-bottom: 60px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    flex-wrap: wrap;

}



.detail-request p {

    font-size: 0.88rem;

    color: var(--text-muted);

}



.detail-request strong a {

    color: var(--gold);

}



.detail-main {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 64px;

    align-items: start;

    margin-bottom: 64px;

}



.detail-img-wrap {

    background: #fff;

    border-radius: var(--radius);

    overflow: hidden;

    padding: 32px;

}



.detail-img-wrap img {

    width: 100%;

    max-width: 420px;

    margin: 0 auto;

}



.detail-info h1 {

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

    margin-bottom: 12px;

}



.detail-info h1 span {

    color: var(--gold);

}



.detail-subtitle {

    font-size: 0.85rem;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: var(--copper-light);

    margin-bottom: 24px;

}



.detail-desc {

    font-size: 0.95rem;

    color: var(--text-muted);

    line-height: 1.75;

    margin-bottom: 36px;

}



.detail-specs {

    margin-bottom: 36px;

}



.detail-specs h4 {

    font-size: 0.78rem;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: var(--text-muted);

    margin-bottom: 16px;

}



.spec-table {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.spec-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 16px;

    background: var(--bg-3);

    border-radius: var(--radius-sm);

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

    font-size: 0.87rem;

}



.spec-row .label {

    color: var(--text-muted);

}



.spec-row .value {

    color: var(--text);

    font-weight: 600;

}



.detail-actions {

    display: flex;

    gap: 14px;

    flex-wrap: wrap;

}



.detail-back {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--text-muted);

    font-size: 0.85rem;

    margin-bottom: 40px;

    transition: color 0.25s;

}



.detail-back:hover {

    color: var(--gold);

}



.detail-back::before {

    content: '←';

}



/* ─── Lang label text ─── */

.lang-btn span {

    font-size: 0.65rem;

    font-weight: 700;

    letter-spacing: 0.06em;

    color: #fff;

    vertical-align: middle;

}



/* ─── YouTube Thumbnail ─── */

.detail-video {

    margin-bottom: 48px;

}



.yt-thumb {

    display: block;

    position: relative;

    border-radius: var(--radius);

    overflow: hidden;

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

    transition: transform 0.35s ease, box-shadow 0.35s ease;

    max-width: 780px;

    margin: 0 auto;

}



.yt-thumb:hover {

    transform: translateY(-4px);

    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);

}



.yt-thumb img {

    width: 100%;

    display: block;

    object-fit: cover;

    max-height: 440px;

    filter: brightness(0.75);

    transition: filter 0.35s ease;

}



.yt-thumb:hover img {

    filter: brightness(0.6);

}



.yt-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 16px;

}



.yt-play {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 72px;

    height: 72px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--copper), var(--gold));

    color: #fff;

    font-size: 1.6rem;

    box-shadow: 0 4px 24px rgba(200, 120, 58, 0.55);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.yt-thumb:hover .yt-play {

    transform: scale(1.12);

    box-shadow: 0 8px 36px rgba(200, 120, 58, 0.75);

}



.yt-label {

    font-size: 0.88rem;

    font-weight: 600;

    letter-spacing: 0.06em;

    color: rgba(255, 255, 255, 0.9);

    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);

}



/* ═══════════════════════════════════════════

   RESPONSIVE

═══════════════════════════════════════════ */

@media (max-width: 960px) {

    .products-grid {

        grid-template-columns: 1fr 1fr;

    }



    .about-grid {

        grid-template-columns: 1fr;

        gap: 48px;

    }



    .detail-main {

        grid-template-columns: 1fr;

    }



    .steps-grid {

        flex-direction: column;

        align-items: center;

    }



    .step-arrow {

        transform: rotate(90deg);

        padding-top: 0;

        padding: 8px 0;

    }

}



@media (max-width: 700px) {

    .nav-links {

        display: none;

        flex-direction: column;

        gap: 0;

        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

        background: rgba(12, 12, 14, 0.97);

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

    }



    .nav-links.open {

        display: flex;

    }



    .nav-links a {

        padding: 18px 24px;

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

        width: 100%;

        font-size: 1rem;

    }



    .hamburger {

        display: flex;

    }



    .products-grid {

        grid-template-columns: 1fr;

    }



    .about-values {

        grid-template-columns: 1fr;

    }



    .stat-divider {

        display: none;

    }



    .stat-item {

        padding: 16px 24px;

        min-width: 140px;

    }



    .footer-inner {

        flex-direction: column;

        text-align: center;

    }



    .footer-copy {

        text-align: center;

    }

}



/* ─── Scrollbar ─── */

::-webkit-scrollbar {

    width: 6px;

}



::-webkit-scrollbar-track {

    background: var(--bg);

}



::-webkit-scrollbar-thumb {

    background: var(--copper);

    border-radius: 3px;

}



::-webkit-scrollbar-thumb:hover {

    background: var(--gold);

}



/* ─── Selection ─── */

::selection {

    background: rgba(200, 120, 58, 0.35);

    color: var(--text);

}