/* Template visual: Tech Showcase */
/* Digital hub hero visual */
.hero-tech-showcase {
	min-height: 540px;
	background:
		linear-gradient(145deg, rgba(8, 14, 25, 0.96), rgba(18, 33, 54, 0.94)),
		radial-gradient(circle at 78% 18%, rgba(var(--site-primary-rgb), 0.34), transparent 36%);
	border-color: rgba(var(--site-highlight-rgb), 0.34);
	box-shadow: 0 26px 70px rgba(15, 23, 42, 0.22);
}

.hero-tech-showcase .visual-glow {
	width: 360px;
	height: 360px;
	top: 28px;
	right: -70px;
	background: radial-gradient(circle, rgba(var(--site-primary-rgb), 0.42), rgba(59, 130, 246, 0));
}

@media (max-width: 900px) {
	.hero-tech-showcase {
		min-height: 460px;
	}
}

@media (max-width: 560px) {
	.hero-tech-showcase {
		min-height: 370px;
		border-radius: 24px;
	}
}

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


/* Template visual: Legacy homepage theme */
/* Migrated from template/index.html */
.home-main {
            background:
                radial-gradient(circle at 8% 0%, rgba(var(--site-primary-rgb), 0.18), transparent 30%),
                radial-gradient(circle at 90% 6%, rgba(var(--site-secondary-rgb), 0.12), transparent 28%),
                linear-gradient(180deg, rgba(224, 242, 254, 0.75), rgba(245, 245, 244, 0.6));
        }

        .hero-section {
            padding: 42px 0 48px;
        }

        .hero-layout {
            grid-template-columns: minmax(380px, 0.9fr) minmax(420px, 1.1fr);
            align-items: stretch;
        }

        .hero-copy {
            background:
                radial-gradient(circle at 0% 0%, rgba(var(--site-primary-rgb), 0.18), transparent 36%),
                linear-gradient(150deg, rgba(248, 251, 255, 0.98), rgba(245, 245, 244, 0.94));
            border-color: rgba(var(--site-highlight-rgb), 0.9);
            min-height: clamp(460px, 42vw, 620px);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .hero-kicker,
        .section-kicker,
        .promo-tag {
            color: var(--site-primary-hover);
        }

        .hero-copy h1,
        .section-head h2,
        .promo-banner h3,
        .why-card h3 {
            color: var(--site-secondary);
        }

        .hero-copy .hero-cta-btn {
            align-self: center;
            width: min(100%, 360px);
            border-radius: 999px;
            overflow: hidden;
            display: inline-flex;
            text-align: center;
        }

        .hero-product-showcase {
            position: relative;
            min-height: clamp(460px, 42vw, 620px);
            background:
                radial-gradient(circle at 84% 16%, rgba(var(--site-primary-rgb), 0.26), transparent 32%),
                radial-gradient(circle at 12% 82%, rgba(var(--site-secondary-rgb), 0.16), transparent 30%),
                linear-gradient(145deg, rgba(255, 251, 245, 0.98), rgba(245, 245, 244, 0.82));
            border: 1px solid rgba(var(--site-highlight-rgb), 0.72);
            padding: clamp(18px, 3vw, 34px);
            display: grid;
            grid-template-rows: 1fr auto;
            gap: clamp(18px, 2.4vw, 28px);
            isolation: isolate;
        }

        .hero-product-showcase::before {
            content: "";
            position: absolute;
            inset: clamp(18px, 3vw, 34px);
            z-index: 0;
            border-radius: 34px;
            /* background:
                linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(147, 197, 253, 0.18)),
                radial-gradient(circle at 78% 35%, rgba(var(--site-secondary-rgb), 0.12), transparent 38%);
            border: 1px solid rgba(191, 219, 254, 0.64); */
        }

        .hero-product-showcase::after {
            content: "";
            position: absolute;
            right: 8%;
            top: 15%;
            z-index: 0;
            width: min(46%, 320px);
            aspect-ratio: 1;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(var(--site-primary-rgb), 0.32), rgba(var(--site-secondary-rgb), 0));
        }

        .hero-product-showcase .visual-glow {
            left: 12%;
            right: auto;
            top: auto;
            bottom: 14%;
            z-index: 0;
            opacity: 0.72;
        }

        .hero-product-shell {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-rows: minmax(250px, 1fr) minmax(128px, 0.48fr);
            gap: clamp(14px, 2vw, 22px);
            width: 100%;
            height: clamp(360px, 33vw, 488px);
            max-width: 680px;
            margin: 0 auto;
        }

        .hero-product-main,
        .hero-product-tile {
            background: #fff;
            border: 1px solid rgba(254, 215, 170, 0.9);
            box-shadow: 0 22px 48px rgba(var(--site-primary-rgb), 0.13);
            overflow: hidden;
            display: grid;
            place-items: center;
        }

        .hero-product-main {
            position: relative;
            border-radius: 32px;
            /* padding: clamp(18px, 3vw, 34px); */
            z-index: 2;
        }

        .hero-product-main img,
        .hero-product-tile img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            will-change: transform;
        }

        .hero-product-stack {
            position: relative;
            z-index: 3;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(14px, 2vw, 22px);
            min-height: 0;
        }

        .hero-product-tile {
            border-radius: 24px;
            aspect-ratio: 1 / 1;
            /* padding: clamp(12px, 2vw, 20px); */
        }

        .hero-product-tile:first-child {
            transform: none;
        }

        .hero-product-tile:last-child {
            transform: none;
        }

        .hero-product-badge {
            position: relative;
            z-index: 4;
            justify-self: center;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: min(100%, 390px);
            min-height: 54px;
            padding: 0 22px;
            border-radius: 999px;
            background: linear-gradient(120deg, var(--site-primary) 0%, var(--site-secondary) 70%, #050505 100%);
            color: #fff;
            box-shadow: 0 16px 34px rgba(var(--site-primary-rgb), 0.22);
            font-weight: 800;
            letter-spacing: 0.02em;
            text-align: center;
            text-decoration: none;
            overflow: hidden;
            transform: translateZ(0);
            gap: 5px;
        }

        .hero-product-badge:hover {
            background: var(--white);
            border-color: var(--site-highlight);
            color: var(--site-primary-hover);
            box-shadow: 0 10px 22px rgba(var(--site-secondary-rgb), 0.16);
            transform: none;
        }

        .hero-product-badge span {
            color: var(--site-primary-soft);
        }

        .hero-product-badge:hover span {
            color: var(--site-secondary);
        }

        .promo-banner {
            background:
                linear-gradient(135deg, rgba(var(--site-secondary-rgb), 0.96), rgba(5, 5, 5, 0.86)),
                radial-gradient(circle at 90% 10%, rgba(var(--site-highlight-rgb), 0.42), transparent 30%);
        }

        .promo-banner,
        .promo-banner h3,
        .promo-banner p {
            color: var(--site-accent);
        }

        .category-grid-home {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 18px;
        }

        .category-tile-home {
            border: 1px solid rgba(var(--site-highlight-rgb), 0.48);
            border-radius: 24px;
            padding: 22px;
            background: rgba(255, 255, 255, 0.84);
            box-shadow: 0 16px 36px rgba(var(--site-primary-rgb), 0.1);
            will-change: transform;
        }

        .category-tile-home i {
            color: var(--site-primary-hover);
            font-size: 1.7rem;
        }

        .category-tile-home h3 {
            margin-top: 12px;
            color: var(--site-secondary);
            font-size: 1.05rem;
        }

        .product-card:hover,
        .service-card:hover,
        .advantage-card:hover,
        .testimonial-card:hover,
        .category-tile-home:hover {
            border-color: rgba(var(--site-primary-rgb), 0.5);
            box-shadow: 0 20px 48px rgba(var(--site-primary-rgb), 0.16);
        }

        .home-main .product-card,
        .service-card,
        .advantage-card,
        .testimonial-card {
            will-change: transform;
        }

        .home-main .product-img-wrap img {
            will-change: transform;
            transform-origin: center;
        }

        .hero-section {
            padding: clamp(34px, 5vw, 72px) 0 clamp(42px, 6vw, 86px);
        }

        .hero-layout {
            position: relative;
            display: grid;
            grid-template-columns: minmax(260px, 0.76fr) minmax(360px, 1.24fr);
            gap: clamp(22px, 4vw, 54px);
            align-items: stretch;
        }

        .hero-layout::before {
            content: "Modaspree / 59";
            position: absolute;
            left: -72px;
            top: 10px;
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            color: rgba(18, 58, 104, 0.42);
            font-size: 0.74rem;
            font-weight: 800;
            letter-spacing: 0.22em;
            text-transform: uppercase;
        }

        .hero-copy {
            min-height: clamp(560px, 56vw, 760px);
            padding: clamp(26px, 4vw, 54px);
            border-radius: 0;
            border: 1px solid rgba(18, 58, 104, 0.18);
            background:
                linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(255, 255, 255, 0.92)),
                radial-gradient(circle at 16% 12%, rgba(var(--site-primary-rgb), 0.2), transparent 34%);
            box-shadow: none;
            justify-content: space-between;
            overflow: hidden;
            position: relative;
        }

        .hero-copy::after {
            content: "";
            position: absolute;
            right: -1px;
            top: 0;
            width: 1px;
            height: 100%;
            background: linear-gradient(180deg, var(--site-primary), var(--site-secondary));
            opacity: 0.82;
        }

        .hero-issue-row,
        .hero-editorial-actions,
        .hero-index-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            position: relative;
            z-index: 1;
        }

        .hero-issue-row {
            padding-bottom: 22px;
            border-bottom: 1px solid rgba(18, 58, 104, 0.16);
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--site-secondary);
        }

        .hero-issue-row span:last-child {
            color: var(--site-primary-hover);
        }

        .hero-copy-main {
            position: relative;
            z-index: 1;
            display: grid;
            gap: 24px;
            align-content: center;
            flex: 1;
            padding: clamp(26px, 4vw, 48px) 0;
        }

        .hero-kicker {
            letter-spacing: 0.24em;
            color: var(--site-primary-hover);
            margin-bottom: 0;
        }

        .hero-copy h1 {
            max-width: 9.6ch;
            font-size: clamp(3.1rem, 7.2vw, 7.6rem);
            line-height: 0.9;
            letter-spacing: 0;
            color: var(--site-secondary);
            text-transform: uppercase;
        }

        .hero-copy p:not(.hero-kicker) {
            max-width: 34ch;
            color: #34516f;
            font-size: clamp(0.95rem, 1.2vw, 1.08rem);
            line-height: 1.85;
            margin-top: 0;
        }

        .hero-editorial-actions {
            justify-content: flex-start;
        }

        .hero-copy .hero-cta-btn {
            width: auto;
            min-width: 188px;
            align-self: auto;
            border-radius: 0;
            min-height: 48px;
            padding: 0 26px;
        }

        .hero-read-link {
            min-height: 48px;
            display: inline-flex;
            align-items: center;
            border-bottom: 1px solid var(--site-secondary);
            color: var(--site-secondary);
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            font-size: 0.78rem;
        }

        .hero-index-row {
            padding-top: 22px;
            border-top: 1px solid rgba(18, 58, 104, 0.16);
            color: var(--site-secondary);
            font-size: 0.82rem;
            font-weight: 700;
        }

        .hero-index-row strong {
            font-size: 1.35rem;
            color: var(--site-primary-hover);
        }

        .hero-product-showcase {
            min-height: clamp(560px, 56vw, 760px);
            border-radius: 0;
            padding: 0;
            border: none;
            background: transparent;
            display: grid;
            grid-template-columns: 1fr minmax(148px, 0.34fr);
            grid-template-rows: minmax(0, 1fr) auto;
            gap: clamp(14px, 2vw, 22px);
            overflow: visible;
        }

        .hero-product-showcase::before,
        .hero-product-showcase::after,
        .hero-product-showcase .visual-glow {
            display: none;
        }

        .hero-product-shell {
            grid-column: 1 / 2;
            grid-row: 1 / 3;
            height: auto;
            max-width: none;
            display: grid;
            grid-template-rows: minmax(0, 1fr);
            width: 100%;
            margin: 0;
        }

        .hero-product-main {
            border-radius: 0;
            border: none;
            box-shadow: none;
            min-height: 100%;
            background: #f7efe7;
            position: relative;
        }

        .hero-product-main::before {
            content: "THE DEVICE ISSUE";
            position: absolute;
            left: 22px;
            top: 20px;
            z-index: 2;
            color: #fffaf5;
            mix-blend-mode: difference;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.18em;
        }

        .hero-product-main img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            filter: saturate(1.05) contrast(0.98);
        }

        .hero-product-stack {
            grid-column: 2 / 3;
            grid-row: 1 / 2;
            display: grid;
            grid-template-columns: 1fr;
            gap: clamp(14px, 2vw, 22px);
            min-height: 0;
        }

        .hero-product-tile {
            border-radius: 0;
            border: 1px solid rgba(18, 58, 104, 0.18);
            box-shadow: none;
            background:
                linear-gradient(160deg, rgba(248, 251, 255, 0.96), rgba(245, 245, 244, 0.9));
            aspect-ratio: auto;
            min-height: 0;
            padding: 18px;
            place-items: stretch;
        }

        .hero-product-tile img {
            display: none;
        }

        .hero-product-tile::before {
            color: var(--site-secondary);
            font-size: clamp(1.45rem, 2.8vw, 2.25rem);
            font-weight: 800;
            line-height: 0.95;
            letter-spacing: 0;
            text-transform: uppercase;
            align-self: end;
        }

        .hero-product-tile:first-child::before {
            content: "Mobile\\A Work";
            white-space: pre-line;
        }

        .hero-product-tile:last-child::before {
            content: "Photo\\A Lab";
            white-space: pre-line;
        }

        .hero-product-tile::after {
            content: "";
            width: 42px;
            height: 2px;
            background: linear-gradient(90deg, var(--site-primary), var(--site-secondary));
            align-self: start;
            justify-self: start;
        }

        .hero-product-badge {
            grid-column: 2 / 3;
            grid-row: 2 / 3;
            width: 100%;
            min-height: 0;
            border-radius: 0;
            padding: 20px;
            display: grid;
            place-items: start;
            background: var(--site-secondary);
            color: var(--site-accent);
            box-shadow: none;
            text-align: left;
            font-size: 0.86rem;
            line-height: 1.55;
        }

        .hero-product-badge span {
            display: block;
            color: var(--site-highlight);
            width: 100%;
            font-size: 1.4rem;
            line-height: 1;
            margin-bottom: 8px;
        }

        .hero-story-strip {
            grid-column: 1 / 3;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            border-top: 1px solid rgba(18, 58, 104, 0.18);
            border-bottom: 1px solid rgba(18, 58, 104, 0.18);
        }

        .hero-story-item {
            display: grid;
            gap: 8px;
            padding: 18px 20px;
            min-height: 104px;
            border-right: 1px solid rgba(18, 58, 104, 0.18);
            background: rgba(248, 251, 255, 0.72);
        }

        .hero-story-item:last-child {
            border-right: none;
        }

        .hero-story-item span {
            color: var(--site-primary-hover);
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.14em;
        }

        .hero-story-item strong {
            color: var(--site-secondary);
            font-size: 0.95rem;
            line-height: 1.25;
        }

        .hero-section {
            padding: clamp(36px, 5vw, 68px) 0 clamp(44px, 6vw, 78px);
        }

        .hero-layout {
            grid-template-columns: minmax(320px, 0.92fr) minmax(420px, 1.08fr);
            gap: clamp(22px, 3vw, 40px);
            max-width: 1280px;
        }

        .hero-layout::before {
            left: -46px;
            top: 4px;
        }

        .hero-copy {
            min-height: auto;
            padding: clamp(30px, 4vw, 52px);
            overflow: visible;
            background:
                linear-gradient(180deg, rgba(255, 252, 248, 0.98), rgba(255, 255, 255, 0.94)),
                radial-gradient(circle at 0% 0%, rgba(var(--site-primary-rgb), 0.18), transparent 32%);
        }

        .hero-copy-main {
            gap: clamp(16px, 2vw, 24px);
            padding: clamp(30px, 5vw, 58px) 0;
        }

        .hero-copy h1 {
            max-width: 12ch;
            font-size: clamp(3rem, 5.2vw, 5.8rem);
            line-height: 0.98;
            text-wrap: balance;
            overflow-wrap: normal;
        }

        .hero-copy p:not(.hero-kicker) {
            max-width: 42ch;
            font-size: clamp(0.96rem, 1vw, 1.04rem);
        }

        .hero-product-showcase {
            min-height: auto;
            padding: clamp(18px, 2.4vw, 30px);
            border: 1px solid rgba(18, 58, 104, 0.16);
            background:
                radial-gradient(circle at 100% 0%, rgba(var(--site-secondary-rgb), 0.13), transparent 34%),
                radial-gradient(circle at 0% 100%, rgba(var(--site-primary-rgb), 0.16), transparent 32%),
                linear-gradient(145deg, rgba(248, 251, 255, 0.96), rgba(239, 246, 255, 0.94));
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto;
            gap: clamp(14px, 1.8vw, 20px);
            overflow: hidden;
        }

        .hero-product-shell {
            grid-column: 1;
            grid-row: 1;
            height: auto;
        }

        .hero-product-main {
            min-height: 0;
            aspect-ratio: 16 / 11;
            background:
                linear-gradient(145deg, rgba(11, 37, 69, 0.96), rgba(20, 61, 112, 0.88)),
                radial-gradient(circle at 72% 28%, rgba(var(--site-primary-rgb), 0.28), transparent 32%);
        }

        .hero-product-main img {
            object-fit: contain;
            padding: clamp(18px, 3vw, 34px);
            filter: saturate(1.08) contrast(1.02);
        }

        .hero-product-stack {
            grid-column: 1;
            grid-row: 2;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        .hero-product-tile {
            min-height: 116px;
            padding: 18px;
            background:
                linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(245, 245, 244, 0.9));
        }

        .hero-product-tile::before {
            font-size: clamp(1.4rem, 2vw, 1.9rem);
        }

        .hero-product-badge {
            grid-column: 1;
            grid-row: 3;
            width: 100%;
            padding: 18px 20px;
            min-height: auto;
            background: linear-gradient(120deg, var(--site-secondary), var(--site-secondary));
        }

        .hero-story-strip {
            grid-column: 1;
            grid-row: 4;
            background: rgba(255, 255, 255, 0.66);
        }

        .hero-story-item {
            min-height: 92px;
            padding: 16px 18px;
        }

        @media (max-width: 960px) {
            .hero-layout,
            .promo-layout {
                grid-template-columns: 1fr;
            }

            .hero-layout::before {
                display: none;
            }

            .hero-copy,
            .hero-product-showcase {
                min-height: auto;
            }

            .hero-copy {
                padding: 26px;
            }

            .hero-copy h1 {
                max-width: 12ch;
                font-size: clamp(2.8rem, 11vw, 4.8rem);
            }

            .hero-product-showcase {
                grid-template-columns: 1fr;
                grid-template-rows: auto;
                gap: 14px;
            }

            .hero-product-shell {
                grid-column: auto;
                grid-row: auto;
                height: auto;
            }

            .hero-product-main {
                width: 100%;
                min-height: 280px;
            }

            .hero-product-stack {
                grid-column: auto;
                grid-row: auto;
                width: 100%;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                align-items: stretch;
            }

            .hero-product-tile {
                min-height: 150px;
                aspect-ratio: auto;
            }

            .hero-product-badge {
                grid-column: auto;
                grid-row: auto;
                width: 100%;
            }

            .hero-story-strip {
                grid-column: auto;
            }

            .category-grid-home {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 560px) {
            .hero-product-showcase {
                padding: 14px;
            }

            .hero-product-showcase::before {
                inset: 14px;
                border-radius: 24px;
            }

            .hero-product-shell {
                height: auto;
                display: grid;
                gap: 14px;
            }

            .hero-product-main {
                position: static;
                width: 100%;
                height: auto;
                aspect-ratio: 4 / 3;
                border-radius: 0;
                transform: none;
            }

            .hero-product-stack {
                position: static;
                width: 100%;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto;
                display: grid;
                gap: 14px;
                pointer-events: auto;
            }

            .hero-product-tile:first-child,
            .hero-product-tile:last-child {
                transform: none;
            }

            .hero-product-badge {
                position: static;
                max-width: none;
                margin-top: 0;
                border-radius: 0;
                text-align: center;
            }

            .hero-editorial-actions,
            .hero-issue-row,
            .hero-index-row {
                align-items: flex-start;
                flex-direction: column;
            }

            .hero-story-strip {
                grid-template-columns: 1fr;
            }

            .hero-story-item {
                border-right: none;
                border-bottom: 1px solid rgba(18, 58, 104, 0.18);
            }

            .hero-story-item:last-child {
                border-bottom: none;
            }

            .category-grid-home {
                grid-template-columns: 1fr;
            }
        }

        .hero-section {
            padding: clamp(32px, 4.8vw, 66px) 0 clamp(44px, 6vw, 82px);
        }

        .hero-layout {
            --hero-blue: var(--site-secondary);
            --hero-accent: var(--site-primary);
            position: relative;
            max-width: 1320px;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: minmax(520px, auto) auto;
            gap: clamp(18px, 2.4vw, 28px);
            align-items: stretch;
            padding: clamp(22px, 3.8vw, 48px);
            border: 1px solid rgba(18, 58, 104, 0.16);
            background:
                radial-gradient(circle at 0% 0%, rgba(var(--site-primary-rgb), 0.2), transparent 26%),
                radial-gradient(circle at 100% 0%, rgba(var(--site-secondary-rgb), 0.14), transparent 30%),
                linear-gradient(135deg, rgba(255, 252, 248, 0.97), rgba(239, 246, 255, 0.94));
            box-shadow: 0 34px 90px rgba(11, 37, 69, 0.12);
            overflow: hidden;
            isolation: isolate;
        }

        .hero-layout::after {
            content: "";
            position: absolute;
            right: clamp(18px, 4vw, 60px);
            bottom: clamp(18px, 4vw, 58px);
            width: min(36vw, 460px);
            aspect-ratio: 1;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(var(--site-secondary-rgb), 0.14), transparent 66%);
            z-index: -1;
            pointer-events: none;
        }

        .hero-copy,
        .hero-product-showcase {
            min-height: auto;
            padding: 0;
            border: 0;
            background: transparent;
            box-shadow: none;
            overflow: visible;
        }

        .hero-copy::after,
        .hero-product-showcase::before,
        .hero-product-showcase::after,
        .hero-product-showcase .visual-glow {
            display: none;
        }

        .hero-copy {
            display: grid;
            grid-template-rows: auto 1fr auto;
            gap: clamp(26px, 4vw, 54px);
            position: relative;
            grid-column: 1;
            grid-row: 1;
            width: min(54%, 620px);
            min-height: clamp(540px, 55vw, 720px);
            z-index: 2;
        }

        .hero-issue-row {
            padding-bottom: 18px;
            border-bottom: 1px solid rgba(18, 58, 104, 0.16);
        }

        .hero-copy-main {
            padding: 0;
            align-content: center;
        }

        .hero-copy h1 {
            max-width: 10.8ch;
            font-size: clamp(3.4rem, 5vw, 6.2rem);
            line-height: 0.95;
            letter-spacing: 0;
        }

        .hero-copy p:not(.hero-kicker) {
            max-width: 44ch;
        }

        .hero-editorial-actions {
            flex-wrap: wrap;
        }

        .hero-product-showcase {
            display: grid;
            grid-column: 1;
            grid-row: 1 / 3;
            grid-template-columns: minmax(0, 1fr) minmax(260px, 42%);
            grid-template-rows: minmax(0, 1fr) auto auto;
            gap: clamp(14px, 2vw, 22px);
            transform-style: preserve-3d;
            min-height: clamp(540px, 55vw, 720px);
            padding-left: min(58%, 680px);
            pointer-events: none;
        }

        .hero-product-shell {
            grid-column: 1 / 3;
            grid-row: 1;
            height: auto;
            transform-style: preserve-3d;
            align-self: start;
        }

        .hero-product-main {
            aspect-ratio: 16 / 8.2;
            border: 0;
            background:
                linear-gradient(150deg, rgba(11, 37, 69, 0.96), rgba(24, 75, 132, 0.92)),
                radial-gradient(circle at 80% 12%, rgba(var(--site-primary-rgb), 0.3), transparent 34%);
            box-shadow: 0 24px 56px rgba(11, 37, 69, 0.18);
            overflow: hidden;
        }

        .hero-product-main::before {
            color: var(--site-accent-strong);
            mix-blend-mode: normal;
        }

        .hero-product-main img {
            width: 100%;
            height: 100%;
            padding: clamp(18px, 3.2vw, 42px);
            object-fit: contain;
            object-position: center;
        }

        .hero-product-stack {
            grid-column: 1 / 2;
            grid-row: 2;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(12px, 1.8vw, 18px);
            pointer-events: auto;
        }

        .hero-product-tile {
            min-height: clamp(104px, 9vw, 136px);
            padding: 18px;
            border: 1px solid rgba(18, 58, 104, 0.14);
            background: rgba(255, 255, 255, 0.66);
            box-shadow: none;
            backdrop-filter: blur(12px);
        }

        .hero-product-tile::before {
            font-size: clamp(1.45rem, 2.2vw, 2.05rem);
            line-height: 0.96;
        }

        .hero-product-badge {
            grid-column: 2 / 3;
            grid-row: 2;
            width: 100%;
            min-height: auto;
            padding: clamp(18px, 2.6vw, 28px);
            background: linear-gradient(120deg, var(--hero-blue), #2454d8);
            box-shadow: 0 18px 42px rgba(var(--site-secondary-rgb), 0.16);
            pointer-events: auto;
        }

        .hero-story-strip {
            grid-column: 1 / -1;
            grid-row: 3;
            margin-top: clamp(18px, 3vw, 36px);
            border: 1px solid rgba(18, 58, 104, 0.14);
            background: rgba(255, 255, 255, 0.58);
            backdrop-filter: blur(14px);
            position: relative;
            z-index: 3;
        }

        .hero-story-item {
            background: transparent;
            min-height: 96px;
        }

        @media (max-width: 1080px) {
            .hero-layout {
                grid-template-rows: auto;
            }

            .hero-layout::before {
                display: none;
            }

            .hero-copy {
                gap: 28px;
                width: 100%;
                min-height: auto;
                grid-row: 1;
            }

            .hero-copy h1 {
                max-width: 13ch;
                font-size: clamp(3rem, 10vw, 5rem);
            }

            .hero-product-main {
                aspect-ratio: 16 / 9.8;
            }

            .hero-product-showcase {
                grid-row: 2;
                grid-template-columns: 1fr;
                grid-template-rows: auto auto auto;
                min-height: auto;
                padding-left: 0;
                pointer-events: auto;
            }

            .hero-product-shell,
            .hero-product-stack,
            .hero-product-badge {
                grid-column: 1;
                grid-row: auto;
            }

            .hero-story-strip {
                grid-row: 3;
            }
        }

        @media (max-width: 620px) {
            .hero-layout {
                padding: 18px;
            }

            .hero-copy h1 {
                font-size: clamp(2.6rem, 13vw, 4.2rem);
            }

            .hero-product-stack,
            .hero-story-strip {
                grid-template-columns: 1fr;
            }

            .hero-story-item {
                border-right: 0;
                border-bottom: 1px solid rgba(18, 58, 104, 0.14);
            }

            .hero-story-item:last-child {
                border-bottom: 0;
            }
        }

        .hero-section {
            padding: clamp(30px, 4.6vw, 64px) 0 clamp(42px, 5.6vw, 74px);
        }

        .hero-layout {
            --hero-blue: #050505;
            --hero-blue-2: #1554c0;
            --hero-accent: var(--site-primary);
            max-width: 1240px;
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            grid-template-rows: auto auto;
            gap: clamp(18px, 2vw, 26px);
            padding: clamp(22px, 3vw, 38px);
            border: 1px solid rgba(21, 84, 192, 0.18);
            background:
                linear-gradient(110deg, rgba(224, 242, 254, 0.94) 0%, rgba(255, 255, 255, 0.96) 44%, rgba(245, 245, 244, 0.94) 100%),
                radial-gradient(circle at 9% 14%, rgba(var(--site-primary-rgb), 0.18), transparent 28%),
                radial-gradient(circle at 91% 17%, rgba(var(--site-secondary-rgb), 0.16), transparent 30%);
            box-shadow: 0 28px 80px rgba(8, 33, 63, 0.12);
            overflow: hidden;
            isolation: isolate;
        }

        .hero-layout::before {
            content: "Modaspree / 59";
            left: 14px;
            top: 18px;
            color: rgba(8, 33, 63, 0.34);
        }

        .hero-layout::after {
            content: "";
            position: absolute;
            inset: auto -8% -28% auto;
            width: min(42vw, 520px);
            aspect-ratio: 1;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(var(--site-secondary-rgb), 0.18), transparent 67%);
            z-index: -1;
            pointer-events: none;
        }

        .hero-copy {
            grid-column: 1 / 7;
            grid-row: 1;
            width: auto;
            min-height: auto;
            display: grid;
            grid-template-rows: auto 1fr auto;
            gap: clamp(20px, 2.8vw, 34px);
            padding: clamp(8px, 1vw, 12px) 0 clamp(6px, 1vw, 10px);
            background: transparent;
            border: 0;
            box-shadow: none;
            overflow: visible;
        }

        .hero-copy::after,
        .hero-product-showcase::before,
        .hero-product-showcase::after,
        .hero-product-showcase .visual-glow {
            display: none;
        }

        .hero-issue-row {
            padding-bottom: 16px;
            border-bottom: 1px solid rgba(8, 33, 63, 0.16);
            font-size: 0.76rem;
        }

        .hero-copy-main {
            padding: 0;
            gap: clamp(14px, 1.8vw, 22px);
            align-content: center;
        }

        .hero-kicker {
            font-size: clamp(0.84rem, 1vw, 0.98rem);
            letter-spacing: 0.22em;
        }

        .hero-copy h1 {
            max-width: 11.5ch;
            font-size: clamp(2.8rem, 4.8vw, 5.2rem);
            line-height: 0.98;
            color: var(--hero-blue);
        }

        .hero-copy p:not(.hero-kicker) {
            max-width: 39rem;
            font-size: clamp(0.95rem, 1vw, 1.05rem);
            line-height: 1.75;
            color: #42607f;
        }

        .hero-editorial-actions {
            justify-content: flex-start;
            gap: 16px;
        }

        .hero-copy .hero-cta-btn {
            min-width: 176px;
            border-radius: 6px;
            background: linear-gradient(120deg, var(--hero-accent), var(--hero-blue-2));
            box-shadow: 0 14px 28px rgba(var(--site-primary-rgb), 0.18);
        }

        .hero-read-link {
            border-bottom-color: rgba(8, 33, 63, 0.5);
        }

        .hero-index-row {
            padding-top: 16px;
            border-top: 1px solid rgba(8, 33, 63, 0.16);
        }

        .hero-product-showcase {
            grid-column: 7 / 13;
            grid-row: 1;
            display: grid;
            grid-template-columns: 1fr 0.72fr;
            grid-template-rows: auto auto;
            gap: clamp(14px, 1.8vw, 20px);
            min-height: auto;
            padding: 0;
            background: transparent;
            border: 0;
            box-shadow: none;
            transform-style: preserve-3d;
            pointer-events: auto;
        }

        .hero-product-shell {
            grid-column: 1 / 3;
            grid-row: 1;
            height: auto;
            margin: 0;
        }

        .hero-product-main {
            position: relative;
            aspect-ratio: 16 / 9.6;
            min-height: 0;
            border: 0;
            border-radius: 8px;
            background:
                linear-gradient(135deg, rgba(8, 33, 63, 0.98), rgba(22, 74, 135, 0.95)),
                radial-gradient(circle at 78% 22%, rgba(var(--site-primary-rgb), 0.36), transparent 30%);
            box-shadow: 0 24px 52px rgba(8, 33, 63, 0.2);
            overflow: hidden;
        }

        .hero-product-main::before {
            content: "THE DEVICE ISSUE";
            position: absolute;
            left: 22px;
            top: 20px;
            z-index: 3;
            color: var(--site-accent-strong);
            font-size: 0.74rem;
            font-weight: 800;
            letter-spacing: 0.18em;
        }

        .hero-product-main::after {
            content: "";
            position: absolute;
            right: 9%;
            bottom: 12%;
            width: 64%;
            height: 58%;
            border-radius: 8px;
            background:
                linear-gradient(#eaf2ff, #ffffff) 76% 2% / 18% 72% no-repeat,
                linear-gradient(var(--site-primary), var(--site-primary)) 11% 82% / 58% 5px no-repeat,
                linear-gradient(135deg, var(--site-accent), #d6d3d1) 0 0 / 72% 72% no-repeat,
                linear-gradient(135deg, var(--site-secondary), #050505) 84% 62% / 22% 30% no-repeat;
            box-shadow:
                -32px 28px 0 rgba(var(--site-primary-rgb), 0.2),
                0 18px 34px rgba(0, 0, 0, 0.2);
        }

        .hero-product-main img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.1;
            filter: grayscale(1) contrast(1.1);
            padding: 0;
        }

        .hero-product-stack {
            grid-column: 1;
            grid-row: 2;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
        }

        .hero-product-tile {
            min-height: 124px;
            border-radius: 8px;
            border: 1px solid rgba(8, 33, 63, 0.14);
            background: rgba(255, 255, 255, 0.72);
            padding: 18px;
            box-shadow: none;
            backdrop-filter: blur(12px);
        }

        .hero-product-tile::before {
            font-size: clamp(1.5rem, 2vw, 1.95rem);
            line-height: 0.96;
            color: var(--hero-blue);
        }

        .hero-product-badge {
            grid-column: 2;
            grid-row: 2;
            width: 100%;
            min-height: 124px;
            border-radius: 8px;
            padding: 22px;
            background: linear-gradient(135deg, var(--hero-blue), var(--hero-blue-2));
            box-shadow: 0 18px 38px rgba(var(--site-secondary-rgb), 0.18);
        }

        .hero-product-badge span {
            color: var(--site-highlight);
        }

        .hero-story-strip {
            grid-column: 1 / 13;
            grid-row: 2;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            margin: 0;
            border: 1px solid rgba(8, 33, 63, 0.14);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.64);
            overflow: hidden;
            backdrop-filter: blur(14px);
        }

        .hero-story-item {
            min-height: 94px;
            padding: 18px 20px;
            background: transparent;
        }

        @media (max-width: 1080px) {
            .hero-layout {
                grid-template-columns: 1fr;
            }

            .hero-copy,
            .hero-product-showcase,
            .hero-story-strip {
                grid-column: 1;
                grid-row: auto;
            }

            .hero-copy h1 {
                max-width: 12ch;
                font-size: clamp(2.7rem, 9vw, 4.8rem);
            }
        }

        @media (max-width: 680px) {
            .hero-layout {
                padding: 18px;
            }

            .hero-product-showcase,
            .hero-product-stack,
            .hero-story-strip {
                grid-template-columns: 1fr;
            }

            .hero-product-shell,
            .hero-product-stack,
            .hero-product-badge {
                grid-column: 1;
                grid-row: auto;
            }

            .hero-copy h1 {
                font-size: clamp(2.35rem, 12vw, 3.9rem);
            }

            .hero-story-item {
                border-right: 0;
                border-bottom: 1px solid rgba(8, 33, 63, 0.14);
            }

            .hero-story-item:last-child {
                border-bottom: 0;
            }
        }

        .hero-section {
            padding: clamp(28px, 4vw, 52px) 0 clamp(40px, 5vw, 70px);
        }

        .hero-layout {
            max-width: 1240px;
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            grid-template-rows: 74px minmax(310px, auto) minmax(210px, auto) auto;
            column-gap: clamp(20px, 2.4vw, 34px);
            row-gap: clamp(18px, 2vw, 24px);
            padding: clamp(24px, 3vw, 38px);
            border: 1px solid rgba(21, 84, 192, 0.18);
            background:
                linear-gradient(112deg, rgba(224, 242, 254, 0.96) 0%, rgba(255, 255, 255, 0.98) 46%, rgba(245, 245, 244, 0.95) 100%),
                radial-gradient(circle at 9% 12%, rgba(var(--site-primary-rgb), 0.16), transparent 27%),
                radial-gradient(circle at 88% 18%, rgba(var(--site-secondary-rgb), 0.16), transparent 31%);
            box-shadow: 0 26px 76px rgba(8, 33, 63, 0.12);
            overflow: hidden;
        }

        .hero-layout::before {
            left: 13px;
            top: 18px;
        }

        .hero-copy {
            grid-column: 1 / 7;
            grid-row: 1 / 4;
            display: grid;
            grid-template-rows: 74px minmax(310px, auto) minmax(160px, auto) 44px;
            gap: 18px;
            padding: 0;
            width: auto;
            min-height: 0;
        }

        .hero-issue-row {
            grid-row: 1;
            align-self: start;
            padding: 0 0 18px;
            min-height: 58px;
            border-bottom: 1px solid rgba(8, 33, 63, 0.16);
        }

        .hero-copy-main {
            grid-row: 2;
            display: grid;
            align-content: start;
            gap: 20px;
            padding-top: clamp(22px, 3.4vw, 44px);
        }

        .hero-kicker {
            margin: 0;
            font-size: clamp(0.82rem, 0.95vw, 0.98rem);
            line-height: 1.35;
        }

        .hero-copy h1 {
            max-width: 11.2ch;
            margin: 0;
            font-size: clamp(3rem, 5.45vw, 5.9rem);
            line-height: 0.94;
            text-wrap: balance;
        }

        .hero-copy-detail {
            grid-row: 3;
            align-self: end;
            display: grid;
            gap: 24px;
            max-width: 520px;
            padding-bottom: 10px;
        }

        .hero-copy-detail p {
            margin: 0;
            color: #42607f;
            font-size: clamp(0.96rem, 1vw, 1.06rem);
            line-height: 1.8;
        }

        .hero-editorial-actions {
            justify-content: flex-end;
            align-items: center;
            gap: 16px;
        }

        .hero-copy .hero-cta-btn {
            min-width: 170px;
            border-radius: 6px;
        }

        .hero-index-row {
            grid-row: 4;
            align-self: end;
            padding-top: 14px;
            border-top: 1px solid rgba(8, 33, 63, 0.16);
        }

        .hero-product-showcase {
            grid-column: 7 / 13;
            grid-row: 1 / 4;
            display: grid;
            grid-template-columns: 1fr 1fr minmax(170px, 0.9fr);
            grid-template-rows: minmax(300px, auto) minmax(210px, auto);
            gap: clamp(14px, 1.6vw, 20px);
            padding: 0;
            min-height: 0;
        }

        .hero-product-shell {
            grid-column: 1 / 4;
            grid-row: 1;
            height: 100%;
        }

        .hero-product-main {
            height: 100%;
            min-height: 300px;
            aspect-ratio: auto;
            border-radius: 8px;
        }

        .hero-product-main::after {
            right: 13%;
            bottom: 14%;
            width: 55%;
            height: 52%;
        }

        .hero-product-stack {
            grid-column: 1 / 3;
            grid-row: 2;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(14px, 1.6vw, 20px);
        }

        .hero-product-tile {
            min-height: 210px;
            display: grid;
            align-content: center;
        }

        .hero-product-badge {
            grid-column: 3 / 4;
            grid-row: 2;
            min-height: 210px;
            display: grid;
            align-content: start;
            gap: 42px;
        }

        .hero-story-strip {
            grid-column: 1 / 13;
            grid-row: 4;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            margin: 0;
            border-radius: 8px;
        }

        .hero-story-item {
            min-height: 82px;
            padding: 16px 20px;
            align-content: center;
        }

        @media (max-width: 1120px) {
            .hero-layout {
                grid-template-columns: 1fr;
                grid-template-rows: auto;
            }

            .hero-copy,
            .hero-product-showcase,
            .hero-story-strip {
                grid-column: 1;
                grid-row: auto;
            }

            .hero-copy {
                grid-template-rows: auto auto auto auto;
            }

            .hero-copy-main {
                padding-top: 18px;
            }

            .hero-copy h1 {
                max-width: 12ch;
                font-size: clamp(2.8rem, 9vw, 5rem);
            }

            .hero-product-showcase {
                grid-template-columns: 1fr 1fr minmax(170px, 0.9fr);
                grid-template-rows: auto auto;
            }
        }

        @media (max-width: 720px) {
            .hero-layout {
                padding: 18px;
            }

            .hero-product-showcase,
            .hero-product-stack,
            .hero-story-strip {
                grid-template-columns: 1fr;
            }

            .hero-product-shell,
            .hero-product-stack,
            .hero-product-badge {
                grid-column: 1;
                grid-row: auto;
            }

            .hero-copy h1 {
                font-size: clamp(2.35rem, 12vw, 4rem);
            }

            .hero-editorial-actions,
            .hero-issue-row,
            .hero-index-row {
                align-items: flex-start;
                justify-content: flex-start;
            }
        }

        .hero-section {
            padding: clamp(34px, 5vw, 72px) 0 clamp(44px, 6vw, 84px);
        }

        .hero-layout {
            --hero-blue: #050505;
            --hero-accent: var(--site-primary);
            max-width: 1120px;
            display: grid;
            grid-template-columns: 1fr;
            gap: clamp(26px, 4vw, 46px);
            padding: clamp(28px, 4vw, 56px);
            border: 1px solid rgba(21, 84, 192, 0.14);
            border-radius: 8px;
            background:
                radial-gradient(circle at 0% 0%, rgba(var(--site-primary-rgb), 0.14), transparent 28%),
                radial-gradient(circle at 100% 0%, rgba(var(--site-secondary-rgb), 0.14), transparent 30%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.72));
            box-shadow: 0 26px 76px rgba(8, 33, 63, 0.1);
            overflow: hidden;
            text-align: center;
        }

        .hero-layout::before,
        .hero-layout::after,
        .hero-copy::after,
        .hero-product-showcase::before,
        .hero-product-showcase::after,
        .hero-product-showcase .visual-glow {
            display: none;
        }

        .hero-copy {
            grid-column: 1;
            grid-row: auto;
            display: block;
            width: min(100%, 820px);
            min-height: 0;
            margin: 0 auto;
            padding: 0;
            background: transparent;
            border: 0;
            box-shadow: none;
        }

        .hero-copy-main {
            display: grid;
            justify-items: center;
            gap: clamp(14px, 2vw, 24px);
            padding: 0;
        }

        .hero-kicker {
            margin: 0;
            color: var(--site-primary-hover);
            font-size: clamp(0.76rem, 1vw, 0.92rem);
            line-height: 1.4;
            letter-spacing: 0.22em;
            text-transform: uppercase;
        }

        .hero-copy h1 {
            max-width: 13ch;
            margin: 0 auto;
            color: var(--hero-blue);
            font-size: clamp(2.8rem, 6.2vw, 6.6rem);
            line-height: 0.95;
            letter-spacing: 0;
            text-wrap: balance;
        }

        .hero-copy-main p:not(.hero-kicker) {
            max-width: 620px;
            margin: 0 auto;
            color: #42607f;
            font-size: clamp(0.98rem, 1.15vw, 1.12rem);
            line-height: 1.8;
        }

        .hero-editorial-actions {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: clamp(4px, 1vw, 10px);
        }

        .hero-copy .hero-cta-btn {
            width: auto;
            min-width: 190px;
            min-height: 50px;
            border-radius: 6px;
            background: linear-gradient(120deg, var(--hero-accent), #1554c0);
            box-shadow: 0 14px 30px rgba(var(--site-primary-rgb), 0.18);
        }

        .hero-product-showcase {
            grid-column: 1;
            grid-row: auto;
            display: block;
            width: min(100%, 760px);
            margin: 0 auto;
            padding: 0;
            background: transparent;
            border: 0;
            box-shadow: none;
            transform-style: preserve-3d;
        }

        .hero-product-shell {
            display: block;
            width: 100%;
            height: auto;
            margin: 0;
        }

        .hero-product-main {
            position: relative;
            width: 100%;
            min-height: 0;
            aspect-ratio: 16 / 8.8;
            border: 0;
            border-radius: 8px;
            background:
                linear-gradient(135deg, rgba(8, 33, 63, 0.98), rgba(21, 84, 192, 0.9)),
                radial-gradient(circle at 75% 18%, rgba(var(--site-primary-rgb), 0.34), transparent 32%);
            box-shadow: 0 24px 54px rgba(8, 33, 63, 0.18);
            overflow: hidden;
        }

        .hero-product-main::before {
            content: "";
            position: absolute;
            inset: 15%;
            z-index: 2;
            border-radius: 8px;
            background:
                linear-gradient(#eaf2ff, #ffffff) 76% 0 / 18% 74% no-repeat,
                linear-gradient(var(--site-primary), var(--site-primary)) 18% 82% / 54% 5px no-repeat,
                linear-gradient(135deg, var(--site-accent), #cfe3ff) 0 0 / 72% 72% no-repeat,
                linear-gradient(135deg, var(--site-secondary), #050505) 84% 62% / 22% 30% no-repeat;
            box-shadow:
                -26px 24px 0 rgba(var(--site-primary-rgb), 0.18),
                0 18px 34px rgba(0, 0, 0, 0.18);
        }

        .hero-product-main img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.08;
            filter: grayscale(1) contrast(1.12);
            padding: 0;
        }

        @media (max-width: 720px) {
            .hero-layout {
                padding: 22px 18px;
            }

            .hero-copy h1 {
                font-size: clamp(2.35rem, 12vw, 4.2rem);
            }

            .hero-product-main {
                aspect-ratio: 4 / 3;
            }
        }

        .hero-section {
            padding: clamp(36px, 6vw, 86px) 0 clamp(52px, 8vw, 110px);
        }

        .hero-layout {
            max-width: 1180px;
            min-height: min(760px, calc(100vh - 150px));
            display: grid;
            grid-template-columns: 1fr;
            align-content: center;
            justify-items: center;
            gap: clamp(24px, 4vw, 52px);
            padding: clamp(36px, 6vw, 76px) clamp(22px, 5vw, 64px);
            border: 0;
            border-radius: 0;
            background:
                radial-gradient(circle at 50% 100%, rgba(var(--site-secondary-rgb), 0.11), transparent 36%),
                radial-gradient(circle at 12% 8%, rgba(var(--site-primary-rgb), 0.12), transparent 28%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.84));
            box-shadow: none;
            overflow: visible;
            text-align: center;
        }

        .hero-copy {
            width: min(100%, 760px);
        }

        .hero-copy-main {
            gap: clamp(12px, 1.8vw, 20px);
        }

        .hero-kicker {
            color: #6b7f99;
            font-size: clamp(0.78rem, 0.95vw, 0.92rem);
            font-weight: 800;
            letter-spacing: 0.24em;
        }

        .hero-copy h1 {
            max-width: 11ch;
            font-size: clamp(3.4rem, 7vw, 6.8rem);
            line-height: 0.92;
            color: #061f3f;
            letter-spacing: 0;
        }

        .hero-copy-main p:not(.hero-kicker) {
            max-width: 590px;
            color: #536b86;
            font-size: clamp(1.05rem, 1.3vw, 1.22rem);
            line-height: 1.55;
        }

        .hero-copy .hero-cta-btn {
            min-width: 178px;
            min-height: 46px;
            border-radius: 999px;
            background: #0a66cc;
            box-shadow: 0 10px 24px rgba(10, 102, 204, 0.18);
        }

        .hero-product-showcase {
            width: min(100%, 920px);
        }

        .hero-product-main {
            aspect-ratio: 16 / 7.8;
            border-radius: 28px;
            background:
                radial-gradient(circle at 50% 72%, rgba(var(--site-primary-rgb), 0.22), transparent 24%),
                linear-gradient(180deg, rgba(245, 245, 244, 0.96), rgba(255, 255, 255, 0.9));
            box-shadow: none;
            overflow: visible;
        }

        .hero-product-main::before {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 7%;
            width: min(68%, 640px);
            height: 62%;
            transform: translateX(-50%);
            border-radius: 20px;
            background:
                linear-gradient(180deg, #102f58, var(--site-secondary)) padding-box,
                linear-gradient(135deg, var(--site-primary), var(--site-secondary)) border-box;
            border: 8px solid transparent;
            box-shadow: 0 28px 70px rgba(8, 33, 63, 0.18);
        }

        .hero-product-main::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 5%;
            width: min(78%, 740px);
            height: 62%;
            transform: translateX(-50%);
            background:
                linear-gradient(var(--site-primary), var(--site-primary)) 50% 72% / 40% 5px no-repeat,
                linear-gradient(180deg, #ffffff, var(--site-accent-strong)) 41% 40% / 23% 48% no-repeat,
                linear-gradient(180deg, #eff6ff, #ffffff) 60% 38% / 17% 44% no-repeat,
                linear-gradient(180deg, var(--site-secondary), #050505) 73% 58% / 13% 28% no-repeat,
                linear-gradient(180deg, #0f3769, #1554c0) 25% 56% / 20% 34% no-repeat;
            border-radius: 18px;
            filter: drop-shadow(0 18px 28px rgba(8, 33, 63, 0.14));
        }

        .hero-product-main img {
            opacity: 0;
        }

        @media (max-width: 720px) {
            .hero-layout {
                min-height: auto;
                padding: 34px 18px 42px;
                gap: 30px;
            }

            .hero-copy h1 {
                font-size: clamp(3rem, 14vw, 4.8rem);
            }

            .hero-product-main {
                aspect-ratio: 4 / 3.1;
                border-radius: 20px;
            }

            .hero-product-main::before {
                width: 78%;
                height: 54%;
            }

            .hero-product-main::after {
                width: 88%;
                height: 58%;
            }
        }

        .hero-layout {
            min-height: auto;
            align-content: start;
            gap: clamp(34px, 5vw, 64px);
        }

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

        .hero-copy h1 {
            max-width: 10.5ch;
            font-size: clamp(2.8rem, 5.4vw, 5.4rem);
            line-height: 0.98;
        }

        .hero-product-showcase {
            position: relative;
            z-index: 1;
            margin-top: 0;
        }

        .hero-product-main {
            aspect-ratio: 16 / 7.2;
            overflow: hidden;
        }

        .hero-product-main::before {
            bottom: 12%;
            width: min(62%, 570px);
            height: 48%;
        }

        .hero-product-main::after {
            bottom: 10%;
            width: min(70%, 660px);
            height: 48%;
        }

        @media (max-width: 720px) {
            .hero-layout {
                gap: 32px;
            }

            .hero-copy h1 {
                font-size: clamp(2.45rem, 11vw, 3.8rem);
            }

            .hero-product-main {
                aspect-ratio: 4 / 2.8;
            }
        }

        .hero-layout {
            max-width: 1080px;
            gap: clamp(30px, 4vw, 48px);
            padding-top: clamp(44px, 6vw, 72px);
            padding-bottom: clamp(42px, 6vw, 68px);
            background:
                radial-gradient(circle at 50% 100%, rgba(var(--site-secondary-rgb), 0.09), transparent 34%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.9));
        }

        .hero-copy {
            width: min(100%, 860px);
        }

        .hero-copy h1 {
            max-width: 16ch;
            font-size: clamp(2.8rem, 5vw, 5.1rem);
            line-height: 0.96;
        }

        .hero-copy-main p:not(.hero-kicker) {
            max-width: 560px;
            color: #5a718c;
        }

        .hero-product-showcase {
            width: min(100%, 760px);
        }

        .hero-product-main {
            aspect-ratio: 16 / 5.6;
            border-radius: 28px;
            background:
                linear-gradient(180deg, rgba(239, 246, 255, 0.9), rgba(255, 255, 255, 0.96));
            box-shadow: inset 0 0 0 1px rgba(21, 84, 192, 0.08);
            overflow: hidden;
        }

        .hero-product-main::before {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 18%;
            width: min(74%, 560px);
            height: 56%;
            transform: translateX(-50%);
            border-radius: 22px;
            background:
                linear-gradient(180deg, #ffffff, var(--site-accent-strong)) 8% 42% / 16% 56% no-repeat,
                linear-gradient(180deg, var(--site-accent), #cfe3ff) 33% 28% / 22% 70% no-repeat,
                linear-gradient(180deg, #ffffff, #eaf2ff) 58% 35% / 18% 62% no-repeat,
                linear-gradient(180deg, #1554c0, #050505) 83% 48% / 15% 50% no-repeat;
            filter: drop-shadow(0 24px 34px rgba(8, 33, 63, 0.14));
        }

        .hero-product-main::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 15%;
            width: min(48%, 380px);
            height: 4px;
            transform: translateX(-50%);
            border-radius: 999px;
            background: linear-gradient(90deg, var(--site-primary), var(--site-secondary));
        }

        @media (max-width: 720px) {
            .hero-copy h1 {
                max-width: 12ch;
                font-size: clamp(2.4rem, 11vw, 3.7rem);
            }

            .hero-product-main {
                aspect-ratio: 4 / 2.5;
            }
        }

        .hero-section {
            padding: clamp(36px, 5vw, 72px) 0 clamp(48px, 7vw, 96px);
        }

        .hero-layout {
            display: flex !important;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            max-width: 1080px;
            min-height: auto !important;
            gap: clamp(36px, 5vw, 62px);
            padding: clamp(44px, 6vw, 76px) clamp(20px, 5vw, 64px);
            text-align: center;
            overflow: hidden;
        }

        .hero-copy,
        .hero-product-showcase {
            position: relative;
            grid-column: auto !important;
            grid-row: auto !important;
            width: min(100%, 820px);
            min-height: 0 !important;
            height: auto !important;
            margin: 0 auto;
            padding: 0;
            z-index: auto;
        }

        .hero-copy {
            flex: 0 0 auto;
        }

        .hero-copy-main {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: clamp(12px, 1.8vw, 20px);
            height: auto !important;
            min-height: 0 !important;
            padding: 0;
        }

        .hero-copy h1 {
            max-width: 14ch;
            font-size: clamp(2.7rem, 4.8vw, 4.9rem);
            line-height: 1;
            margin: 0;
        }

        .hero-copy-main p:not(.hero-kicker) {
            max-width: 560px;
            margin: 0;
        }

        .hero-product-showcase {
            flex: 0 0 auto;
            width: min(100%, 760px);
        }

        .hero-product-shell {
            height: auto !important;
            min-height: 0 !important;
        }

        .hero-product-main {
            height: auto !important;
            min-height: 0 !important;
            aspect-ratio: 16 / 5.8;
        }

        @media (max-width: 720px) {
            .hero-layout {
                gap: 30px;
                padding: 34px 18px 44px;
            }

            .hero-copy h1 {
                max-width: 12ch;
                font-size: clamp(2.35rem, 10.5vw, 3.6rem);
            }

            .hero-product-main {
                aspect-ratio: 4 / 2.7;
            }
        }

        .hero-product-showcase {
            width: min(100%, 860px);
        }

        .hero-product-main,
        .hero-product-main::before,
        .hero-product-main::after {
            content: none;
        }

        .hero-swiper {
            width: 100%;
            min-height: clamp(280px, 28vw, 390px);
            border-radius: 28px;
            overflow: hidden;
            background:
                radial-gradient(circle at 18% 8%, rgba(var(--site-primary-rgb), 0.18), transparent 32%),
                radial-gradient(circle at 86% 18%, rgba(var(--site-secondary-rgb), 0.08), transparent 28%),
                linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(255, 255, 255, 0.98));
            box-shadow:
                inset 0 0 0 1px rgba(var(--site-primary-rgb), 0.14),
                0 24px 58px rgba(var(--site-secondary-rgb), 0.08);
        }

        .hero-swiper .swiper-wrapper,
        .hero-swiper .swiper-slide {
            min-height: clamp(280px, 28vw, 390px);
        }

        .hero-slide {
            position: relative;
            display: grid;
            grid-template-columns: minmax(220px, 0.82fr) minmax(280px, 1.18fr);
            align-items: center;
            gap: clamp(20px, 3vw, 44px);
            padding: clamp(28px, 4vw, 52px);
            overflow: hidden;
        }

        .hero-slide::before {
            content: "";
            position: absolute;
            inset: 10%;
            border-radius: 32px;
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.66), rgba(224, 242, 254, 0.58));
            border: 1px solid rgba(var(--site-primary-rgb), 0.1);
            filter: blur(0);
            z-index: 0;
        }

        .hero-slide-copy,
        .hero-device-scene {
            position: relative;
            z-index: 1;
        }

        .hero-slide-copy {
            display: grid;
            gap: 12px;
            text-align: left;
        }

        .hero-slide-copy span {
            color: var(--site-primary);
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }

        .hero-slide-copy strong {
            max-width: 11ch;
            color: #050505;
            font-size: clamp(2rem, 3.6vw, 3.6rem);
            line-height: 0.98;
            letter-spacing: 0;
        }

        .hero-device-scene {
            min-height: clamp(180px, 18vw, 250px);
        }

        .hero-slide-serve .hero-device-scene {
            min-height: clamp(205px, 19vw, 260px);
        }

        .hero-swiper-pagination {
            bottom: 18px !important;
        }

        .hero-swiper-pagination .swiper-pagination-bullet {
            width: 28px;
            height: 4px;
            border-radius: 999px;
            background: rgba(8, 33, 63, 0.24);
            opacity: 1;
        }

        .hero-swiper-pagination .swiper-pagination-bullet-active {
            background: linear-gradient(90deg, var(--site-primary), var(--site-secondary));
        }

        @media (max-width: 720px) {
            .hero-swiper,
            .hero-swiper .swiper-wrapper,
            .hero-swiper .swiper-slide {
                min-height: 420px;
            }

            .hero-slide {
                grid-template-columns: 1fr;
                align-content: center;
                padding: 28px;
            }

            .hero-slide-copy {
                text-align: center;
                justify-items: center;
            }

            .hero-slide-copy strong {
                max-width: 12ch;
            }

            .hero-device-scene {
                min-height: 190px;
            }
        }

        .hero-editorial-actions {
            display: flex !important;
            justify-content: center;
            align-items: center;
            width: 100%;
            min-height: 52px;
            margin-top: clamp(6px, 1.2vw, 14px);
            opacity: 1 !important;
            visibility: visible !important;
            position: relative;
            z-index: 5;
        }

        .hero-copy .hero-cta-btn {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            min-width: 190px;
            min-height: 48px;
            padding: 0 28px;
            border-radius: 999px;
            color: #fff !important;
            background: var(--site-primary) !important;
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto;
        }

        /* Homepage black-light-blue refinement */
        body {
            background:
                radial-gradient(circle at 9% 7%, rgba(var(--site-primary-rgb), 0.18), transparent 30%),
                radial-gradient(circle at 90% 10%, rgba(var(--site-secondary-rgb), 0.12), transparent 32%),
                linear-gradient(180deg, var(--site-accent) 0%, #fffaf5 38%, #f7f2eb 100%) !important;
        }

        .home-main {
            background:
                radial-gradient(circle at 0% 0%, rgba(var(--site-primary-rgb), 0.16), transparent 32%),
                radial-gradient(circle at 100% 12%, rgba(var(--site-secondary-rgb), 0.08), transparent 34%),
                linear-gradient(180deg, rgba(248, 251, 255, 0.94), rgba(255, 255, 255, 0.72) 42%, rgba(224, 242, 254, 0.72)) !important;
        }

        .hero-section {
            padding-top: clamp(34px, 5vw, 60px);
            padding-bottom: clamp(34px, 5vw, 60px);
        }

        .hero-layout {
            max-width: 1280px !important;
            gap: clamp(20px, 3vw, 32px) !important;
            padding: 0 clamp(10px, 2vw, 18px) !important;
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
        }

        .hero-copy,
        .hero-visual,
        .hero-product-showcase {
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
        }

        .hero-copy {
            width: min(100%, 1100px) !important;
            max-width: 1100px !important;
            padding: 0 clamp(18px, 3vw, 28px) !important;
        }

        .hero-copy-main {
            gap: clamp(10px, 1.4vw, 16px) !important;
            padding-top: 0 !important;
            margin-top: 0 !important;
        }

        .hero-product-showcase {
            width: min(100%, 1080px) !important;
            max-width: 1080px !important;
        }

        .hero-copy h1 {
            color: var(--site-secondary) !important;
            max-width: 12ch !important;
            font-size: clamp(4rem, 8vw, 6.4rem) !important;
            line-height: 0.94 !important;
        }

        .hero-copy p:not(.hero-kicker),
        .hero-slide-copy strong {
            color: #374151 !important;
        }

        .hero-copy p:not(.hero-kicker) {
            max-width: 760px !important;
            font-size: clamp(1.12rem, 1.8vw, 1.5rem) !important;
        }

        .hero-kicker,
        .section-kicker,
        .hero-slide-copy span,
        .promo-tag {
            color: var(--site-primary-hover) !important;
        }

        .hero-swiper {
            min-height: clamp(360px, 38vw, 520px) !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            background:
                radial-gradient(circle at 18% 8%, rgba(var(--site-primary-rgb), 0.12), transparent 30%),
                linear-gradient(180deg, rgba(248, 251, 255, 0.9), rgba(255, 255, 255, 0.94)) !important;
        }

        .hero-swiper .swiper-wrapper,
        .hero-swiper .swiper-slide {
            min-height: clamp(360px, 38vw, 520px) !important;
        }

        .hero-slide {
            padding: clamp(38px, 5vw, 60px) !important;
            grid-template-columns: minmax(260px, 0.95fr) minmax(360px, 1.05fr) !important;
        }

        .hero-slide::before {
            inset: 0 !important;
            border-radius: 0 !important;
            border: 1px solid rgba(var(--site-primary-rgb), 0.18) !important;
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(224, 242, 254, 0.62)) !important;
        }

        .hero-slide-copy strong {
            max-width: 10ch !important;
            font-size: clamp(3rem, 5.4vw, 4.8rem) !important;
            line-height: 0.96 !important;
        }

        .hero-slide-copy {
            gap: 16px !important;
            padding-left: clamp(10px, 1.4vw, 22px) !important;
        }

        .hero-device-scene,
        .hero-slide-serve .hero-device-scene {
            min-height: clamp(240px, 24vw, 320px) !important;
        }

        .hero-slide-phone .hero-device-scene,
        .hero-slide-computer .hero-device-scene {
            display: flex;
            align-items: center;
            justify-content: center;
            padding-right: clamp(24px, 4vw, 52px);
        }

        .hero-swiper-pagination {
            bottom: 12px !important;
        }

        @media (max-width: 720px) {
            .hero-copy {
                padding: 0 8px 14px !important;
            }

            .hero-copy h1 {
                font-size: clamp(2.7rem, 13vw, 4.1rem) !important;
            }

            .hero-copy p:not(.hero-kicker) {
                font-size: 1rem !important;
            }

            .hero-slide {
                padding: 28px 18px 40px !important;
                grid-template-columns: 1fr !important;
            }

            .hero-swiper,
            .hero-swiper .swiper-wrapper,
            .hero-swiper .swiper-slide {
                min-height: 460px !important;
            }
        }

        .btn,
        .hero-copy .hero-cta-btn,
        .promo-cta-btn,
        .oc-msgbox-btn,
        .cart-checkout-btn,
        .size-select-confirm,
        .buy-now-btn {
            background: var(--site-primary) !important;
            border-color: var(--site-primary) !important;
            color: #fff !important;
            box-shadow: 0 12px 24px rgba(var(--site-primary-rgb), 0.22) !important;
        }

        .btn:hover,
        .hero-copy .hero-cta-btn:hover,
        .promo-cta-btn:hover,
        .oc-msgbox-btn:hover,
        .cart-checkout-btn:hover,
        .size-select-confirm:hover,
        .buy-now-btn:hover {
            background: var(--site-secondary) !important;
            border-color: var(--site-secondary) !important;
            color: #fff !important;
            box-shadow: 0 14px 28px rgba(var(--site-secondary-rgb), 0.2) !important;
        }

        .btn-outline,
        .shop-filter-toggle,
        .size-chart-btn,
        .product-desc-trigger,
        .product-specs-trigger {
            background: #fffaf5 !important;
            border-color: rgba(var(--site-secondary-rgb), 0.22) !important;
            color: var(--site-secondary) !important;
            box-shadow: none !important;
        }

        .btn-outline:hover,
        .shop-filter-toggle:hover,
        .size-chart-btn:hover,
        .product-desc-trigger:hover,
        .product-specs-trigger:hover {
            background: var(--site-secondary) !important;
            border-color: var(--site-secondary) !important;
            color: #fff !important;
        }

        .product-card .btn,
        .add-to-cart-btn {
            background: var(--site-secondary) !important;
            border-color: var(--site-secondary) !important;
            color: #fff !important;
            border-radius: 10px !important;
            box-shadow: none !important;
        }

        .product-card .btn:hover,
        .add-to-cart-btn:hover {
            background: var(--site-primary) !important;
            border-color: var(--site-primary) !important;
            color: #fff !important;
        }

        .service-card,
        .home-main .product-card,
        .category-tile-home,
        .advantage-card,
        .testimonial-card,
        .promo-banner,
        .why-card {
            background: rgba(255, 255, 255, 0.9) !important;
            border-color: rgba(var(--site-primary-rgb), 0.22) !important;
            box-shadow: 0 14px 34px rgba(var(--site-secondary-rgb), 0.07) !important;
        }

        .service-icon,
        .category-tile-home i,
        .review-avatar {
            background: var(--site-accent) !important;
            border-color: rgba(var(--site-primary-rgb), 0.28) !important;
            color: var(--site-primary) !important;
        }

        .hero-slide {
            background: linear-gradient(145deg, #fffaf5, #ffffff) !important;
            border-color: rgba(var(--site-primary-rgb), 0.22) !important;
        }

        .hero-swiper-pagination .swiper-pagination-bullet,
        .promo-swiper-pagination .swiper-pagination-bullet {
            background: rgba(var(--site-secondary-rgb), 0.22) !important;
        }

        .hero-swiper-pagination .swiper-pagination-bullet-active,
        .promo-swiper-pagination .swiper-pagination-bullet-active {
            background: var(--site-primary) !important;
        }

        .avatar.tone-a,
        .avatar.tone-b,
        .avatar.tone-c {
            background: linear-gradient(140deg, var(--site-primary), var(--site-secondary)) !important;
        }


/* Migrated from home-templates/digital-products-green/index.html */
body.theme-digital-green {
            --primary-color: var(--site-primary);
            --primary-hover: var(--site-primary-hover);
            --accent-color: var(--site-accent);
            --primary-soft: var(--site-primary-soft);
            --surface-color: #ffffff;
            --page-bg: #fbfffc;
            --border-color: rgba(var(--site-primary-rgb), 0.22);
        }

        body.theme-digital-green {
            background:
                linear-gradient(90deg, rgba(240, 253, 244, 0.92) 0 1px, transparent 1px 100%),
                linear-gradient(0deg, rgba(240, 253, 244, 0.92) 0 1px, transparent 1px 100%),
                linear-gradient(135deg, #ffffff 0%, #f7fff9 48%, #eefcf3 100%);
            background-size: 44px 44px, 44px 44px, auto;
            color: #07111f;
        }

        body.theme-digital-green .page-aura {
            display: none;
        }

        .site-footer {
            background: #07111f;
        }

        .shop-content {
            background: linear-gradient(180deg, #f7fff9 0%, #ffffff 100%);
        }

        .hero-layout {
            grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.8fr);
            gap: clamp(32px, 5vw, 72px);
            align-items: center;
        }

        .hero-copy {
            background: transparent;
            border: 0;
            box-shadow: none;
            padding-left: 0;
        }

        .hero-kicker {
            color: var(--site-primary);
        }

        .hero-copy h1 {
            max-width: 620px;
            color: #07111f;
        }

        .hero-copy p {
            max-width: 690px;
        }

        .hero-tech-showcase {
            width: min(100%, 560px);
            min-height: 430px;
            justify-self: end;
            background:
                radial-gradient(circle at 82% 18%, rgba(134, 239, 172, 0.45), transparent 30%),
                linear-gradient(145deg, #ffffff 0%, #f3fff6 100%);
            border-color: rgba(var(--site-primary-rgb), 0.25);
            box-shadow: 0 30px 80px rgba(7, 17, 31, 0.12);
        }

        .product-card,
        .service-card,
        .advantage-card,
        .promo-banner,
        .why-card {
            background: #ffffff;
            border-color: rgba(var(--site-primary-rgb), 0.24);
            box-shadow: 0 18px 48px rgba(7, 17, 31, 0.08);
        }

        body.theme-digital-green .home-main .product-card {
            border-color: rgba(var(--site-primary-rgb), 0.24);
            background: #ffffff;
            box-shadow: 0 18px 48px rgba(7, 17, 31, 0.08);
        }

        body.theme-digital-green .home-main .product-card:hover,
        body.theme-digital-green .home-main .product-card:focus-within {
            border-color: rgba(var(--site-primary-rgb), 0.52);
            background: linear-gradient(180deg, #ffffff 0%, #f8fff9 100%);
            box-shadow: 0 22px 54px rgba(var(--site-primary-rgb), 0.13);
            transform: translateY(-2px);
        }

        body.theme-digital-green .home-main .product-media,
        body.theme-digital-green .home-main .product-img-wrap {
            border-color: rgba(var(--site-primary-rgb), 0.18);
            background: #ffffff;
        }

        body.theme-digital-green .home-main .wishlist-btn-home:hover,
        body.theme-digital-green .home-main .wishlist-btn-home.active {
            background: #ecfdf3;
            border-color: rgba(var(--site-primary-rgb), 0.42);
            color: var(--site-primary);
            box-shadow: 0 12px 24px rgba(var(--site-primary-rgb), 0.12);
        }

        .btn,
        .hero-cta-btn,
        .add-to-cart-btn {
            background: var(--site-primary);
            border-color: var(--site-primary);
            color: #ffffff;
        }

        .btn:hover,
        .hero-cta-btn:hover,
        .add-to-cart-btn:hover {
            background: var(--site-primary-hover);
            border-color: var(--site-primary-hover);
            color: #ffffff;
        }

        @media (max-width: 1240px) and (min-width: 1024px) {
            .hero-layout {
                grid-template-columns: minmax(0, 1fr) minmax(390px, 0.78fr);
            }

            .hero-tech-showcase {
                width: min(100%, 500px);
                min-height: 400px;
            }
        }

        @media (max-width: 1023px) {
            .hero-layout {
                grid-template-columns: 1fr;
                gap: 34px;
            }

            .hero-copy {
                padding: 0;
            }

            .hero-tech-showcase {
                width: 100%;
                min-height: 400px;
                justify-self: stretch;
            }
        }

/* Real hero visual asset */
.hero-visual-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.hero-device-scene .hero-visual-image {
	object-fit: contain;
}

/* Modaspree smarttech hero */
body.theme-digital-green.page-home .hero-layout {
	display: grid !important;
	min-height: 520px;
	grid-template-columns: minmax(0, 0.92fr) minmax(480px, 1.08fr);
	grid-template-rows: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(28px, 4vw, 68px);
	padding-inline: clamp(22px, 4vw, 56px);
}

body.theme-digital-green.page-home .hero-copy {
	width: 100% !important;
	max-width: none !important;
	grid-column: 1 !important;
	grid-row: 1 !important;
	padding: 0;
	align-items: flex-start;
	text-align: left;
}

body.theme-digital-green.page-home .hero-kicker {
	margin: 0 0 18px;
	font-size: clamp(0.72rem, 1vw, 0.86rem);
	font-weight: 800;
	letter-spacing: 0.12em;
	color: #087f46;
}

body.theme-digital-green.page-home .hero-copy h1 {
	display: flex;
	flex-direction: column;
	max-width: none !important;
	margin: 0;
	font-size: clamp(3.35rem, 4vw, 4rem) !important;
	line-height: 1 !important;
	letter-spacing: 0;
}

body.theme-digital-green.page-home .hero-copy h1 span:first-child {
	color: #080c0a;
}

body.theme-digital-green.page-home .hero-copy h1 span:last-child {
	color: var(--site-primary);
}

body.theme-digital-green.page-home .hero-copy .hero-description {
	max-width: 620px;
	margin: 24px 0 0;
	font-size: clamp(1rem, 1.2vw, 1.12rem) !important;
	line-height: 1.65;
	color: #46534c;
}

body.theme-digital-green.page-home .hero-copy .hero-cta-btn {
	align-self: flex-start;
	width: auto;
	min-width: 184px;
	margin-top: 28px;
	gap: 12px;
}

body.theme-digital-green.page-home .hero-tech-showcase {
	position: relative;
	width: 100% !important;
	max-width: none !important;
	grid-column: 2 !important;
	grid-row: 1 !important;
	min-height: 430px;
	justify-self: stretch;
	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 24px;
	overflow: hidden;
}

body.theme-digital-green.page-home .hero-showcase-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

body.theme-digital-green.page-home .hero-benefits {
	grid-column: 1 / -1;
	grid-row: 2;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	width: min(100%, 920px);
	margin-top: 2px;
}

body.theme-digital-green.page-home .hero-benefit {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

body.theme-digital-green.page-home .hero-benefit i {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 12px;
	background: rgba(var(--site-primary-rgb), 0.12);
	color: var(--site-primary);
	font-size: 1.2rem;
}

body.theme-digital-green.page-home .hero-benefit span {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

body.theme-digital-green.page-home .hero-benefit strong {
	font-size: 0.92rem;
	color: #101713;
}

body.theme-digital-green.page-home .hero-benefit small {
	font-size: 0.78rem;
	color: #68766e;
}

@media (max-width: 1023px) {
	body.theme-digital-green.page-home .hero-layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		min-height: 0;
		gap: 34px;
	}

	body.theme-digital-green.page-home .hero-copy {
		align-items: center;
		text-align: center;
	}

	body.theme-digital-green.page-home .hero-copy h1,
	body.theme-digital-green.page-home .hero-copy .hero-description {
		margin-inline: auto;
	}

	body.theme-digital-green.page-home .hero-copy .hero-cta-btn {
		align-self: center;
	}

	body.theme-digital-green.page-home .hero-tech-showcase {
		width: min(100%, 720px);
		grid-column: 1 !important;
		grid-row: 2 !important;
		justify-self: center;
	}

	body.theme-digital-green.page-home .hero-benefits {
		grid-row: 3;
		justify-self: center;
	}
}

@media (max-width: 640px) {
	body.theme-digital-green.page-home .hero-section {
		padding: 34px 0 24px;
	}

	body.theme-digital-green.page-home .hero-layout {
		padding-inline: 14px;
		gap: 28px;
	}

	body.theme-digital-green.page-home .hero-copy h1 {
		font-size: clamp(2.7rem, 13vw, 4rem);
	}

	body.theme-digital-green.page-home .hero-tech-showcase {
		min-height: 0;
		height: 330px;
	}

	body.theme-digital-green.page-home .hero-benefits {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	body.theme-digital-green.page-home .hero-benefit {
		justify-content: center;
	}
}

/* Modaspree category navigation */
body.theme-digital-green.page-home .home-category-section {
	padding: 26px 0 42px;
}

body.theme-digital-green.page-home .home-category-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
}

body.theme-digital-green.page-home .home-category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	min-width: 0;
	min-height: 224px;
	padding: 14px 14px 18px;
	border: 1px solid rgba(var(--site-primary-rgb), 0.2);
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 0 14px 34px rgba(7, 41, 24, 0.07);
	color: #101713;
	text-align: center;
	text-decoration: none;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body.theme-digital-green.page-home .home-category-card:hover,
body.theme-digital-green.page-home .home-category-card:focus-visible {
	transform: translateY(-3px);
	border-color: rgba(var(--site-primary-rgb), 0.52);
	box-shadow: 0 18px 38px rgba(7, 41, 24, 0.12);
}

body.theme-digital-green.page-home .home-category-media {
	display: grid;
	place-items: center;
	width: 100%;
	height: 158px;
	overflow: hidden;
	border-radius: 12px;
	background: #ffffff;
}

body.theme-digital-green.page-home .home-category-media img {
	display: block;
	width: auto;
	height: auto;
	max-width: 88%;
	max-height: 88%;
	object-fit: contain;
}

body.theme-digital-green.page-home .home-category-card strong {
	font-size: 0.95rem;
	line-height: 1.3;
}

@media (max-width: 900px) {
	body.theme-digital-green.page-home .home-category-grid {
		grid-template-columns: repeat(5, minmax(160px, 1fr));
		overflow-x: auto;
		scroll-snap-type: x proximity;
		padding-bottom: 10px;
	}

	body.theme-digital-green.page-home .home-category-card {
		scroll-snap-align: start;
		min-height: 202px;
	}

	body.theme-digital-green.page-home .home-category-media {
		height: 136px;
	}
}

@media (max-width: 640px) {
	body.theme-digital-green.page-home .home-category-section {
		padding: 20px 0 32px;
	}

	body.theme-digital-green.page-home .home-category-grid {
		grid-template-columns: repeat(5, 142px);
		gap: 12px;
	}
}

/* Modaspree welcome credit dialog */
body.theme-digital-green.page-home .oc-msgbox {
	padding: 32px 30px 30px;
}

body.theme-digital-green.page-home .oc-msgbox-icon {
	width: 68px;
	height: 68px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: #e1f8ea;
	box-shadow: 0 12px 28px rgba(16, 151, 77, 0.16);
	color: #0b7a3e;
}

body.theme-digital-green.page-home .oc-msgbox-title {
	margin-bottom: 10px;
	color: #14241b;
}

body.theme-digital-green.page-home .oc-msgbox-text {
	color: #52645a;
	line-height: 1.65;
}

body.theme-digital-green.page-home .oc-msgbox-btn {
	margin-top: 24px;
}

@media (max-width: 560px) {
	body.theme-digital-green.page-home .oc-msgbox {
		padding: 28px 22px 24px;
	}
}