/* ═══════════════════════════════════════════════════════
           INTERACTIVE PAGE BACKGROUND (octagon grid + cursor reveal)
        ═══════════════════════════════════════════════════════ */
        .pg-bg {
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
            background: radial-gradient(120% 80% at 82% -12%, rgba(5, 212, 220, .10), transparent 55%),
            radial-gradient(120% 90% at 8% 112%, rgba(139, 111, 232, .12), transparent 55%),
            var(--bg);
        }

        .pg-grid {
            position: absolute;
            inset: -2px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpolygon points='70.7,100 100,70.7 100,29.3 70.7,0 29.3,0 0,29.3 0,70.7 29.3,100' fill='none' stroke='rgba(5,212,220,0.05)' stroke-width='1'/%3E%3C/svg%3E");
            background-size: 96px 96px;
            mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 0%, transparent 92%);
            -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 0%, transparent 92%);
        }

        .pg-grid-hot {
            position: absolute;
            inset: -2px;
            --mx: 50%;
            --my: 30%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpolygon points='70.7,100 100,70.7 100,29.3 70.7,0 29.3,0 0,29.3 0,70.7 29.3,100' fill='none' stroke='rgba(5,212,220,0.55)' stroke-width='1.1'/%3E%3C/svg%3E");
            background-size: 96px 96px;
            opacity: 0;
            transition: opacity .5s ease;
            mask-image: radial-gradient(circle 220px at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .35) 45%, transparent 72%);
            -webkit-mask-image: radial-gradient(circle 220px at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .35) 45%, transparent 72%);
        }

        .pg-bg.is-hover .pg-grid-hot {
            opacity: 1
        }

        .sec-bg {
            background: rgba(6, 20, 34, .48)
        }

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

        .pg-glow-1 {
            width: 680px;
            height: 680px;
            top: -18%;
            right: -10%;
            background: radial-gradient(circle, rgba(5, 212, 220, .10), transparent 68%);
            animation: pg-float-a 36s ease-in-out infinite;
        }

        .pg-glow-2 {
            width: 600px;
            height: 600px;
            bottom: -16%;
            left: -8%;
            background: radial-gradient(circle, rgba(139, 111, 232, .12), transparent 68%);
            animation: pg-float-b 44s ease-in-out infinite;
        }

        .pg-vignette {
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 120% 100% at 50% 40%, transparent 55%, rgba(2, 8, 15, .6) 100%);
        }

        @keyframes pg-float-a {
            0%, 100% {
                transform: translate(0, 0) scale(1)
            }
            50% {
                transform: translate(-50px, 50px) scale(1.08)
            }
        }

        @keyframes pg-float-b {
            0%, 100% {
                transform: translate(0, 0) scale(1)
            }
            50% {
                transform: translate(60px, -40px) scale(1.06)
            }
        }

        /* Section reveal variants — richer, varied scroll motion */
        .fi.rv-zoom {
            transform: translateY(30px) scale(.96)
        }

        .fi.rv-zoom.on {
            transform: translateY(0) scale(1)
        }

        .fi.rv-right {
            transform: translateX(54px)
        }

        .fi.rv-right.on {
            transform: translateX(0)
        }

        .fi.rv-left {
            transform: translateX(-54px)
        }

        .fi.rv-left.on {
            transform: translateX(0)
        }

        .fi.rv-zoom, .fi.rv-left, .fi.rv-right {
            transition: opacity .8s var(--ease), transform .8s var(--ease)
        }

        @media (prefers-reduced-motion: reduce) {
            .pg-grid, .pg-glow {
                animation: none
            }

            .fi.rv-zoom, .fi.rv-left, .fi.rv-right {
                transition: none;
                transform: none
            }
        }

        /* Mobile — octagon grid (visible, slightly sparser than desktop) */
        @media (max-width: 768px) {
            .pg-grid {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpolygon points='70.7,100 100,70.7 100,29.3 70.7,0 29.3,0 0,29.3 0,70.7 29.3,100' fill='none' stroke='rgba(5,212,220,0.09)' stroke-width='1.15'/%3E%3C/svg%3E");
                background-size: 108px 108px;
                opacity: .92;
                mask-image: radial-gradient(ellipse 96% 92% at 50% 35%, #000 0%, transparent 99%);
                -webkit-mask-image: radial-gradient(ellipse 96% 92% at 50% 35%, #000 0%, transparent 99%);
            }

            .pg-grid-hot {
                display: none
            }

            .pg-glow-1 {
                width: 520px;
                height: 520px;
                opacity: .62;
                filter: blur(52px)
            }

            .pg-glow-2 {
                width: 460px;
                height: 460px;
                opacity: .62;
                filter: blur(52px)
            }

            .pg-vignette {
                background: radial-gradient(ellipse 120% 100% at 50% 40%, transparent 72%, rgba(2, 8, 15, .38) 100%);
            }

            .pg-bg {
                background: radial-gradient(120% 80% at 82% -12%, rgba(5, 212, 220, .09), transparent 55%),
                radial-gradient(120% 90% at 8% 112%, rgba(139, 111, 232, .10), transparent 55%),
                var(--bg);
            }

            #services, #products, .cat-hero, .page-tabs, .prod-body, .sec, footer {
                position: relative;
                z-index: 1
            }
        }

        /* ═══════════════════════════════════════════════════════
           HERO
        ═══════════════════════════════════════════════════════ */
        .cat-hero {
            padding: 140px 0 64px;
            text-align: center;
            position: relative;
            overflow: hidden;
            min-height: 44vh;
            display: flex;
            align-items: center;
        }

        .aurora-wrap {
            position: absolute;
            inset: 0;
            overflow: hidden;
            filter: blur(72px) saturate(110%);
            pointer-events: none;
            z-index: 0;
        }

        .blob {
            position: absolute;
            border-radius: 50%
        }

        .blob-1 {
            width: 520px;
            height: 340px;
            background: rgba(5, 212, 220, .18);
            top: -8%;
            left: 8%;
            animation: drift1 20s ease-in-out infinite
        }

        .blob-2 {
            width: 420px;
            height: 420px;
            background: rgba(139, 111, 232, .16);
            top: 15%;
            right: -6%;
            animation: drift2 26s ease-in-out infinite
        }

        .blob-3 {
            width: 380px;
            height: 500px;
            background: rgba(5, 212, 220, .12);
            bottom: -18%;
            left: 28%;
            animation: drift3 18s ease-in-out infinite
        }

        .blob-4 {
            width: 300px;
            height: 300px;
            background: rgba(139, 111, 232, .13);
            top: 8%;
            right: 22%;
            animation: drift4 23s ease-in-out infinite
        }

        .blob-5 {
            width: 460px;
            height: 280px;
            background: rgba(5, 212, 220, .10);
            bottom: 8%;
            right: 8%;
            animation: drift5 28s ease-in-out infinite
        }

        @keyframes drift1 {

            0%,
            100% {
                transform: translate(0, 0)
            }

            25% {
                transform: translate(55px, 35px)
            }

            55% {
                transform: translate(25px, -48px)
            }

            80% {
                transform: translate(-38px, 18px)
            }
        }

        @keyframes drift2 {

            0%,
            100% {
                transform: translate(0, 0)
            }

            35% {
                transform: translate(-48px, 28px)
            }

            70% {
                transform: translate(36px, -42px)
            }
        }

        @keyframes drift3 {

            0%,
            100% {
                transform: translate(0, 0)
            }

            40% {
                transform: translate(-52px, -28px)
            }

            75% {
                transform: translate(44px, 22px)
            }
        }

        @keyframes drift4 {

            0%,
            100% {
                transform: translate(0, 0)
            }

            50% {
                transform: translate(-28px, 46px)
            }
        }

        @keyframes drift5 {

            0%,
            100% {
                transform: translate(0, 0)
            }

            30% {
                transform: translate(38px, -36px)
            }

            65% {
                transform: translate(-44px, 28px)
            }
        }

        .cat-hero-overlay {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, rgba(2, 8, 15, .55) 100%),
            linear-gradient(180deg, rgba(2, 8, 15, .3) 0%, transparent 30%, transparent 70%, rgba(2, 8, 15, .4) 100%);
        }

        .cat-hero-in {
            position: relative;
            z-index: 2
        }

        .cat-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 18px;
            border-radius: 100px;
            background: var(--vlo);
            border: 1px solid rgba(139, 111, 232, .28);
            font-size: 13px;
            color: var(--violet);
            font-weight: 700;
            margin-bottom: 26px;
            letter-spacing: .5px;
        }

        .cat-h1 {
            font-size: clamp(32px, 5vw, 58px);
            font-weight: 900;
            line-height: 1.2;
            letter-spacing: -1px;
            margin-bottom: 20px
        }

        .cat-lead {
            font-size: 17px;
            color: var(--g1);
            max-width: 560px;
            margin: 0 auto;
            line-height: 1.9
        }

        /* ═══════════════════════════════════════════════════════
           STICKY PAGE TABS
        ═══════════════════════════════════════════════════════ */
        .page-tabs {
            position: sticky;
            top: 62px;
            z-index: 800;
            background: rgba(2, 8, 15, .92);
            backdrop-filter: blur(24px) saturate(180%);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            border-bottom: 1px solid var(--border);
        }

        .page-tabs-inner {
            display: flex;
            align-items: center;
            overflow-x: auto;
            scrollbar-width: none;
            direction: rtl;
        }

        .page-tabs-inner::-webkit-scrollbar {
            display: none
        }

        .tab-section {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 24px;
            height: 52px;
            color: var(--g1);
            text-decoration: none;
            font-size: 12.5px;
            font-weight: 800;
            letter-spacing: .8px;
            text-transform: uppercase;
            border-bottom: 2px solid transparent;
            white-space: nowrap;
            flex-shrink: 0;
            transition: all .25s;
        }

        .tab-section.ts-svc:hover,
        .tab-section.ts-svc.active {
            color: var(--teal);
            border-bottom-color: var(--teal)
        }

        .tab-section.ts-prod:hover,
        .tab-section.ts-prod.active {
            color: var(--violet);
            border-bottom-color: var(--violet)
        }

        .tab-sep {
            width: 1px;
            height: 20px;
            background: var(--border);
            flex-shrink: 0;
            margin: 0 2px
        }

        .tab-item {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 0 16px;
            height: 52px;
            color: var(--g2);
            text-decoration: none;
            font-size: 12px;
            font-weight: 600;
            border-bottom: 2px solid transparent;
            white-space: nowrap;
            flex-shrink: 0;
            transition: all .22s;
        }

        .tab-item:hover {
            color: var(--g1);
            border-bottom-color: rgba(5, 212, 220, .2)
        }

        .tab-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            flex-shrink: 0
        }

        .tab-bigdiv {
            width: 1px;
            height: 28px;
            background: rgba(255, 255, 255, .08);
            flex-shrink: 0;
            margin: 0 8px
        }

        /* ═══════════════════════════════════════════════════════
           CHAPTER HEADER (shared)
        ═══════════════════════════════════════════════════════ */
        .chapter {
            padding: 80px 0 52px
        }

        .catalog-intro {
            max-width: 920px;
            margin: -10px auto 0;
            padding: 24px 0 34px;
            display: grid;
            grid-template-columns: 4px minmax(0, 1fr);
            gap: 18px;
            align-items: start;
        }

        .catalog-intro::before {
            content: "";
            width: 4px;
            height: 62px;
            border-radius: 999px;
            background: linear-gradient(180deg, var(--ch-color, var(--teal)), rgba(255, 255, 255, .18));
        }

        .chapter-eyebrow {
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--ch-color, var(--teal));
            opacity: .65;
            margin-bottom: 12px;
            display: block;
        }

        .chapter-title {
            scroll-margin-top: 130px;
            font-size: clamp(28px, 4vw, 44px);
            font-weight: 900;
            color: var(--white);
            line-height: 1.18;
            margin-bottom: 14px;
        }

        .chapter-desc {
            font-size: 15.5px;
            color: var(--g1);
            line-height: 1.9;
            max-width: 80%
        }

        .catalog-intro .chapter-desc {
            max-width: none;
            margin: 0;
            color: #b8c8d6;
            font-size: 16px;
            line-height: 2;
            text-align: right;
        }

        .chapter-divider {
            height: 1px;
            background: var(--border);
            margin-top: 52px;
        }

        .catalog-intro .chapter-divider {
            grid-column: 1 / -1;
            margin-top: 24px;
        }

        /* ═══════════════════════════════════════════════════════
           SECTION 1 — SERVICE CARDS
        ═══════════════════════════════════════════════════════ */
        .svc-wrap {
            padding: 28px 0 88px
        }

        .svc-section-bg .wrap {
            position: relative;
            z-index: 1
        }

        .svc-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px
        }

        .svc-card {
            background: var(--glass-bg);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--glass-border);
            border-top-color: var(--glass-top);
            border-radius: var(--rl);
            padding: 0;
            position: relative;
            overflow: hidden;
            transition: all .28s var(--ease);
            display: flex;
            flex-direction: column;
            isolation: isolate;
        }

        .svc-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--svc-line, linear-gradient(90deg, #05D4DC, #8B6FE8));
        }

        .svc-card:hover {
            border-color: rgba(5, 212, 220, .26);
            transform: translateY(-4px);
            box-shadow: 0 18px 52px rgba(0, 0, 0, .34);
        }

        .svc-anim {
            width: 100%;
            height: 180px;
            display: block;
            flex-shrink: 0;
            position: relative;
            z-index: 1;
            transform: translateZ(0);
            overflow: hidden;
            background: radial-gradient(120% 120% at 70% 0%, rgba(139, 111, 232, .08), transparent 60%);
        }

        .svc-body {
            padding: 26px 30px 30px;
            flex: 1;
        }

        .svc-eyebrow {
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: 1.2px;
            margin-bottom: 7px;
            opacity: .65
        }

        .svc-name {
            font-size: 19px;
            font-weight: 800;
            color: var(--white);
            line-height: 1.3;
            margin-bottom: 14px
        }

        .svc-desc {
            font-size: 14px;
            color: var(--g1);
            line-height: 1.9;
            margin-bottom: 20px;
            text-align: justify;
            text-align-last: right;
            text-justify: inter-word;
        }

        .svc-use-label {
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .8px;
            color: var(--g2);
            text-transform: uppercase;
            margin-bottom: 10px
        }

        .svc-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px
        }

        /* ═══════════════════════════════════════════════════════
           SECTION 2 — PRODUCT SECTIONS
        ═══════════════════════════════════════════════════════ */
        .prod-sec {
            padding: 72px 0
        }

        .prod-body .prod-sec:first-child {
            padding-top: 44px
        }

        .prod-body.sec-bg .wrap {
            position: relative;
            z-index: 1
        }

        .prod-body .prod-sec + .prod-sec {
            border-top: 1px solid var(--border)
        }

        .prod-hcard {
            background: var(--glass-bg);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--glass-border);
            border-top-color: var(--glass-top);
            border-radius: var(--rl);
            padding: 0;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, .3), inset 0 1px 0 var(--glass-top);
            margin-bottom: 28px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;
            align-items: stretch;
            isolation: isolate;
        }

        .prod-hcard::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--prod-accent);
        }

        .prod-hcard.a1 {
            --prod-accent: linear-gradient(90deg, #05D4DC, #8B6FE8)
        }

        .prod-hcard.a2 {
            --prod-accent: linear-gradient(90deg, #8B6FE8, #E8A93A)
        }

        .prod-visual {
            order: 2;
            position: relative;
            height: clamp(280px, 32vw, 400px);
            overflow: hidden;
            z-index: 1;
            transform: translateZ(0);
            background: radial-gradient(100% 100% at 50% 0%, rgba(5, 212, 220, .07), transparent 60%);
        }

        .prod-hcard.a2 .prod-visual {
            background: radial-gradient(100% 100% at 50% 0%, rgba(232, 169, 58, .06), transparent 60%);
        }

        .prod-anim {
            width: 100%;
            height: 100%;
            display: block;
        }

        /* Mobile / iOS: canvas does not paint inside backdrop-filter ancestors */
        @media (max-width: 768px) {

            .svc-card,
            .prod-hcard {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                background: rgba(8, 26, 44, .94);
            }
        }

        @supports (-webkit-touch-callout: none) {

            .svc-card,
            .prod-hcard {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                background: rgba(8, 26, 44, .94);
            }
        }

        .prod-content {
            order: 1;
            padding: clamp(28px, 3vw, 40px);
        }

        .prod-idx {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1.5px;
            margin-bottom: 5px;
            opacity: .6
        }

        .prod-en {
            font-size: 13px;
            color: var(--g2);
            font-weight: 500;
            margin: -4px 0 16px;
            direction: ltr;
            text-align: right;
        }

        .prod-fa {
            font-size: clamp(20px, 2.8vw, 28px);
            font-weight: 800;
            color: var(--white);
            line-height: 1.25;
            margin-bottom: 10px
        }

        .prod-desc {
            font-size: 15px;
            color: var(--g1);
            line-height: 1.9;
            max-width: 720px;
            text-align: justify;
            text-align-last: right;
            text-justify: inter-word;
        }

        .prod-feats {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 20px
        }

        .pfeat {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 5px 14px;
            border-radius: 100px;
            font-size: 13px;
            font-weight: 500
        }

        .pfeat::before {
            content: '✓';
            font-size: 11px;
            font-weight: 900
        }

        .pfeat.t {
            background: rgba(5, 212, 220, .05);
            border: 1px solid rgba(5, 212, 220, .16);
            color: var(--teal)
        }

        .pfeat.v {
            background: var(--vlo);
            border: 1px solid rgba(139, 111, 232, .25);
            color: var(--violet)
        }

        .pfeat.g {
            background: var(--glo);
            border: 1px solid rgba(232, 169, 58, .25);
            color: var(--gold)
        }

        .sub-label {
            font-size: 13px;
            font-weight: 700;
            color: var(--g2);
            letter-spacing: .5px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .sub-label::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border)
        }

        .sub-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px
        }

        .sub-grid.c2 {
            grid-template-columns: repeat(2, 1fr)
        }

        .scard {
            background: rgba(8, 26, 44, .48);
            border: 1px solid rgba(5, 212, 220, .10);
            border-radius: var(--r);
            padding: 22px;
            position: relative;
            overflow: hidden;
            transition: all .28s var(--ease);
        }

        .scard:hover {
            border-color: rgba(5, 212, 220, .24);
            background: rgba(8, 26, 44, .72);
            transform: translateY(-3px);
            box-shadow: 0 10px 32px rgba(0, 0, 0, .28);
        }

        .scard::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(5, 212, 220, .3), transparent);
            opacity: 0;
            transition: opacity .28s;
        }

        .scard:hover::after {
            opacity: 1
        }

        .scard-en {
            font-size: 11px;
            color: var(--teal);
            font-weight: 700;
            letter-spacing: 1px;
            margin-bottom: 12px;
            opacity: .65
        }

        .scard-name {
            font-size: 15px;
            font-weight: 700;
            color: var(--white);
            line-height: 1.35;
            margin-bottom: 6px
        }

        .scard-desc {
            font-size: 13.5px;
            color: var(--g1);
            line-height: 1.8;
            text-align: justify;
            text-align-last: right;
            text-justify: inter-word;
        }

        .stag {
            display: inline-block;
            margin-top: 14px;
            padding: 3px 11px;
            border-radius: 100px;
            font-size: 12px;
            font-weight: 600
        }

        .stag.t {
            background: var(--tlo);
            color: var(--teal);
            border: 1px solid var(--b2)
        }

        .stag.v {
            background: var(--vlo);
            color: var(--violet);
            border: 1px solid rgba(139, 111, 232, .2)
        }

        .stag.g {
            background: var(--glo);
            color: var(--gold);
            border: 1px solid rgba(232, 169, 58, .2)
        }

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

            .sub-grid {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        @media (max-width: 640px) {

            .svc-grid,
            .sub-grid,
            .sub-grid.c2 {
                grid-template-columns: 1fr
            }

            .svc-anim {
                height: 160px
            }

            .svc-body {
                padding: 22px 20px 24px
            }

            .prod-hcard {
                grid-template-columns: 1fr;
                padding: 0
            }

            .prod-visual {
                order: 1;
                height: 220px
            }

            .prod-content {
                order: 2;
                padding: 24px 20px
            }

            .cat-hero {
                padding: 120px 0 60px
            }

            .cat-hero-in {
                text-align: center
            }

            .page-tabs-inner {
                justify-content: center;
                overflow-x: visible
            }

            .tab-section {
                flex: 1;
                justify-content: center;
                padding: 0 12px;
                text-align: center
            }

            .tab-bigdiv {
                margin: 0 4px
            }

            .chapter {
                padding: 60px 0 40px
            }

            .catalog-intro {
                margin-top: -6px;
                padding: 18px 0 28px;
                grid-template-columns: 1fr;
                gap: 14px;
                text-align: center;
            }

            .catalog-intro::before {
                width: 64px;
                height: 3px;
                margin: 0 auto;
                background: linear-gradient(90deg, transparent, var(--ch-color, var(--teal)), transparent);
            }

            .catalog-intro .chapter-desc {
                text-align: center;
                font-size: 14.5px;
                line-height: 1.9;
            }
        }

        /* ═══════════════════════════════════════════════════════
           CTA (product page)
        ═══════════════════════════════════════════════════════ */
        #contact .cta-in {
            justify-content: center;
        }

        #contact .cta-text {
            width: 100%;
            max-width: 900px;
            text-align: center;
            transform: translateY(36px);
        }

        #contact .cta-in.visible .cta-text {
            transform: translateY(0);
        }

        #contact .cta-h {
            white-space: nowrap;
        }

        #contact .cta-sub {
            margin-left: auto;
            margin-right: auto;
        }

        @media (max-width: 640px) {
            #contact .cta-h {
                white-space: normal;
                font-size: clamp(18px, 5vw, 24px);
            }
        }

        /* ═══════════════════════════════════════════════════════
           PRINT
        ═══════════════════════════════════════════════════════ */
        @media print {

            *,
            *::before,
            *::after {
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
                box-shadow: none !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                animation: none !important;
                transition: none !important;
            }

            @page {
                size: A4;
                margin: 14mm 18mm
            }

            :root {
                --bg: #fff;
                --white: #111827;
                --g1: #374151;
                --g2: #6b7280;
                --border: rgba(0, 0, 0, .10);
                --glass-border: rgba(0, 0, 0, .10);
                --glass-bg: #f7f8fc;
            }

            body {
                background: #fff;
                color: #111827
            }

            #nav,
            .page-tabs,
            .fi,
            section#contact,
            footer {
                display: none !important
            }

            .fi {
                opacity: 1 !important;
                transform: none !important
            }

            .cat-hero {
                padding: 60px 0 50px;
                min-height: 0;
                page-break-after: always;
                break-after: page;
                border-bottom: 3px solid #05D4DC;
                background: #fff !important
            }

            .cat-h1 {
                font-size: 40px;
                color: #111827
            }

            .cat-lead {
                color: #374151;
                font-size: 14.5px
            }

            .cat-hero-in::before {
                content: '';
                display: block;
                width: 56px;
                height: 56px;
                background: url('assets/image/logo.svg') center/contain no-repeat;
                margin: 0 auto 24px
            }

            .cat-hero-in::after {
                content: 'octagon.ir  ·  linkedin.com/company/octagon-ai';
                display: block;
                margin-top: 36px;
                font-size: 12px;
                color: #6b7280;
                letter-spacing: .5px;
                direction: ltr
            }

            .chapter {
                padding: 32px 0 24px;
                page-break-before: always;
                break-before: page
            }

            .chapter-title {
                font-size: 28px;
                color: #111827
            }

            .chapter-desc {
                font-size: 13px;
                color: #374151
            }

            .chapter-divider {
                display: none
            }

            .svc-wrap {
                padding: 20px 0 32px
            }

            .svc-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px
            }

            .svc-card {
                background: #f9fafb !important;
                border: 1px solid #e5e7eb !important;
                padding: 0;
                page-break-inside: avoid
            }

            .svc-anim {
                display: none !important
            }

            .svc-body {
                padding: 16px
            }

            .svc-name {
                font-size: 15px;
                color: #111827
            }

            .svc-desc {
                font-size: 12px;
                color: #374151
            }

            .prod-sec {
                padding: 28px 0;
                page-break-before: always;
                break-before: page;
                border-top: none
            }

            .prod-hcard {
                background: #f7f8fc !important;
                border: 1.5px solid #d1d5db !important;
                padding: 0;
                margin-bottom: 16px;
                grid-template-columns: 1fr;
                gap: 0;
                page-break-inside: avoid
            }

            .prod-anim {
                display: none !important
            }

            .prod-content {
                padding: 20px 24px
            }

            .prod-hcard::before {
                height: 3px !important
            }

            .prod-fa {
                color: #111827;
                font-size: 20px
            }

            .prod-desc {
                color: #374151;
                font-size: 13px
            }

            .pfeat {
                font-size: 11.5px;
                padding: 3px 10px
            }

            .pfeat.t {
                background: #e0fafa;
                border-color: #a5f3f5;
                color: #0e7490
            }

            .pfeat.v {
                background: #ede9ff;
                border-color: #c4b5fd;
                color: #6d28d9
            }

            .pfeat.g {
                background: #fef3c7;
                border-color: #fcd34d;
                color: #b45309
            }

            .sub-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 10px
            }

            .scard {
                background: #f9fafb !important;
                border: 1px solid #e5e7eb !important;
                padding: 14px;
                page-break-inside: avoid
            }

            .scard-name {
                color: #111827;
                font-size: 13px
            }

            .scard-desc {
                color: #374151;
                font-size: 12px
            }

            .stag.t {
                background: #e0fafa;
                color: #0e7490;
                border-color: #a5f3f5
            }

            .stag.v {
                background: #ede9ff;
                color: #6d28d9;
                border-color: #c4b5fd
            }

            .stag.g {
                background: #fef3c7;
                color: #b45309;
                border-color: #fcd34d
            }

            .grad {
                background: none !important;
                -webkit-text-fill-color: #05D4DC !important;
                color: #05D4DC !important
            }
        }

        .catalog-footer {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            position: relative !important;
            z-index: 5 !important;
            clear: both;
            background: var(--bg2);
            border-top: 1px solid var(--border);
            padding: 44px 0 24px;
        }