/*
Theme Name: Ziov Tech
Theme URI: https://ziovtech.com
Author: Ziov Tech
Author URI: https://ziovtech.com
Description: A flashy, dark, product-led theme for Ziov Tech — the software house behind Ziovs 3D Player, Ziovs 2Dto3D, Cara and Ziovs Irish Dictionary. Ships with four advertising landing pages, a buy box with price, sale badge and store, an animated hero, a self-hosted font stack and a logo built into the header and footer. Every home page link points at ziovtech.com, and the two desktop products are sold through itch.io. The theme checks the site against its own dataset and repairs anything that is missing, so a product added later is never left without a page.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ziovtech
Tags: business, portfolio, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, one-column, two-columns, right-sidebar, full-width-template
*/

/*
    The stylesheet file is split for readability:
      1. Tokens & reset
      2. Typography
      3. Layout primitives
      4. Buttons & badges
      5. Header & navigation
      6. Hero
      7. Sections
      8. Cards (products, features, pricing)
      9. Product landing page
     10. Forms
     11. Footer
     12. WordPress core classes
     13. Motion & responsive
*/

/* ========================================================================
   1. TOKENS & RESET
   ===================================================================== */

:root {
    /* Brand */
    --zt-cyan: #22d3ee;
    --zt-cyan-soft: #67e8f9;
    --zt-violet: #a855f7;
    --zt-magenta: #e879f9;
    --zt-blue: #3b82f6;
    --zt-green: #34d399;

    /* Surfaces */
    --zt-bg: #05070f;
    --zt-bg-2: #080c1c;
    --zt-bg-3: #0c1230;
    --zt-surface: rgba(255, 255, 255, 0.035);
    --zt-surface-2: rgba(255, 255, 255, 0.06);
    --zt-line: rgba(148, 180, 255, 0.14);
    --zt-line-strong: rgba(148, 180, 255, 0.28);

    /* Ink */
    --zt-text: #e8eeff;
    --zt-text-dim: #9fb2d8;
    --zt-text-faint: #6c7ea6;

    /* Gradients */
    --zt-grad-brand: linear-gradient(100deg, var(--zt-cyan) 0%, var(--zt-blue) 42%, var(--zt-violet) 78%, var(--zt-magenta) 100%);
    --zt-grad-text: linear-gradient(96deg, #ffffff 8%, var(--zt-cyan-soft) 46%, #c9a6ff 88%);
    --zt-grad-panel: linear-gradient(158deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.015) 46%, rgba(255, 255, 255, 0) 100%);

    /* Glow */
    --zt-glow-cyan: 0 0 0 1px rgba(34, 211, 238, 0.28), 0 18px 60px -18px rgba(34, 211, 238, 0.45);
    --zt-glow-violet: 0 0 0 1px rgba(168, 85, 247, 0.28), 0 18px 60px -18px rgba(168, 85, 247, 0.45);

    /* Type */
    --zt-font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
    --zt-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --zt-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

    /* Space */
    --zt-wrap: 1240px;
    --zt-wrap-wide: 1440px;
    --zt-wrap-narrow: 780px;
    --zt-gap: clamp(1.25rem, 2.4vw, 2.25rem);
    --zt-section-y: clamp(4rem, 9vw, 8.5rem);
    --zt-radius: 20px;
    --zt-radius-sm: 12px;
    --zt-radius-lg: 30px;

    /* Motion */
    --zt-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --zt-fast: 0.18s var(--zt-ease);
    --zt-slow: 0.55s var(--zt-ease);

    --zt-header-h: 78px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--zt-header-h) + 20px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--zt-bg);
    color: var(--zt-text);
    font-family: var(--zt-font-body);
    font-size: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
    line-height: 1.7;
    font-weight: 400;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* The whole page sits on a deep gradient with two slow aurora blooms. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(1100px 780px at 8% -6%, rgba(34, 211, 238, 0.16), transparent 62%),
        radial-gradient(1000px 760px at 96% 8%, rgba(168, 85, 247, 0.15), transparent 62%),
        radial-gradient(900px 700px at 50% 108%, rgba(59, 130, 246, 0.12), transparent 64%),
        linear-gradient(180deg, var(--zt-bg) 0%, var(--zt-bg-2) 44%, var(--zt-bg) 100%);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.4;
    background-image:
        linear-gradient(rgba(148, 180, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 180, 255, 0.045) 1px, transparent 1px);
    background-size: 68px 68px;
    -webkit-mask-image: radial-gradient(circle at 50% 22%, #000 0%, transparent 78%);
    mask-image: radial-gradient(circle at 50% 22%, #000 0%, transparent 78%);
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--zt-cyan);
    text-decoration: none;
    transition: color var(--zt-fast);
}

a:hover {
    color: var(--zt-cyan-soft);
}

ul,
ol {
    padding-left: 1.15rem;
}

hr {
    border: 0;
    border-top: 1px solid var(--zt-line);
    margin: 2.5rem 0;
}

::selection {
    background: rgba(34, 211, 238, 0.3);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--zt-cyan);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ========================================================================
   2. TYPOGRAPHY
   ===================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--zt-font-display);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
    margin: 0 0 0.6em;
    color: #fff;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.6rem, 1.7rem + 4.4vw, 5rem);
}

h2 {
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3.35rem);
}

h3 {
    font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem);
}

h4 {
    font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
}

h5,
h6 {
    font-size: 1rem;
}

p {
    margin: 0 0 1.15em;
    color: var(--zt-text-dim);
    text-wrap: pretty;
}

strong,
b {
    color: var(--zt-text);
    font-weight: 600;
}

code,
kbd,
pre {
    font-family: var(--zt-font-mono);
    font-size: 0.9em;
}

code {
    background: rgba(34, 211, 238, 0.1);
    color: var(--zt-cyan-soft);
    padding: 0.15em 0.45em;
    border-radius: 6px;
}

pre {
    background: rgba(4, 8, 20, 0.75);
    border: 1px solid var(--zt-line);
    border-radius: var(--zt-radius-sm);
    padding: 1.15rem 1.3rem;
    overflow-x: auto;
    color: #cfe0ff;
}

pre code {
    background: none;
    padding: 0;
    color: inherit;
}

blockquote {
    margin: 1.75rem 0;
    padding: 0.2rem 0 0.2rem 1.4rem;
    border-left: 3px solid var(--zt-cyan);
    color: var(--zt-text);
    font-style: italic;
}

blockquote p:last-child {
    margin-bottom: 0;
}

mark {
    background: rgba(34, 211, 238, 0.22);
    color: #fff;
    padding: 0.05em 0.3em;
    border-radius: 4px;
}

/* Gradient headline text */
.zt-gradient-text {
    background: var(--zt-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Monospace eyebrow label */
.zt-eyebrow {
    font-family: var(--zt-font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--zt-cyan);
    margin: 0 0 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.zt-eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--zt-grad-brand);
}

.zt-lead {
    font-size: clamp(1.06rem, 1rem + 0.4vw, 1.28rem);
    color: var(--zt-text-dim);
    line-height: 1.65;
}

.zt-mono {
    font-family: var(--zt-font-mono);
    font-size: 0.86rem;
    letter-spacing: 0.02em;
}

/* ========================================================================
   3. LAYOUT PRIMITIVES
   ===================================================================== */

.zt-wrap {
    width: min(100% - 2.5rem, var(--zt-wrap));
    margin-inline: auto;
}

.zt-wrap--wide {
    width: min(100% - 2.5rem, var(--zt-wrap-wide));
}

.zt-wrap--narrow {
    width: min(100% - 2.5rem, var(--zt-wrap-narrow));
}

.zt-section {
    padding-block: var(--zt-section-y);
    position: relative;
}

.zt-section--tight {
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.zt-section__head {
    max-width: 760px;
    margin-bottom: clamp(2.25rem, 4vw, 3.75rem);
}

.zt-section__head--center {
    margin-inline: auto;
    text-align: center;
}

.zt-section__head--center .zt-eyebrow {
    justify-content: center;
}

.zt-section__head p {
    font-size: 1.08rem;
    margin-bottom: 0;
}

.zt-grid {
    display: grid;
    gap: var(--zt-gap);
}

.zt-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.zt-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
}

.zt-grid--4 {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* Split: text beside media */
.zt-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
}

.zt-split--reverse > :first-child {
    order: 2;
}

@media (max-width: 900px) {
    .zt-split {
        grid-template-columns: 1fr;
    }

    .zt-split--reverse > :first-child {
        order: 0;
    }
}

/* Glass panel */
.zt-glass {
    position: relative;
    background: var(--zt-grad-panel);
    border: 1px solid var(--zt-line);
    border-radius: var(--zt-radius);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* ========================================================================
   4. BUTTONS & BADGES
   ===================================================================== */

.zt-btn {
    --btn-bg: transparent;
    --btn-fg: var(--zt-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    border: 1px solid var(--zt-line-strong);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--zt-font-display);
    font-size: 0.96rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--zt-fast), box-shadow var(--zt-fast),
        border-color var(--zt-fast), color var(--zt-fast);
    -webkit-tap-highlight-color: transparent;
}

.zt-btn:hover {
    transform: translateY(-2px);
    color: var(--btn-fg);
}

.zt-btn:active {
    transform: translateY(0);
}

/* Primary: gradient fill with a sheen that sweeps on hover. */
.zt-btn--primary {
    border-color: transparent;
    color: #04121a;
    background: var(--zt-grad-brand);
    box-shadow: 0 14px 40px -16px rgba(34, 211, 238, 0.65);
}

.zt-btn--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: transform 0.75s var(--zt-ease);
}

.zt-btn--primary:hover {
    box-shadow: 0 18px 52px -14px rgba(34, 211, 238, 0.85);
}

.zt-btn--primary:hover::after {
    transform: translateX(120%);
}

/* Ghost: transparent with a gradient border on hover. */
.zt-btn--ghost {
    border-color: var(--zt-line-strong);
    color: var(--zt-text);
}

.zt-btn--ghost::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: var(--zt-grad-brand);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--zt-fast);
}

.zt-btn--ghost:hover {
    border-color: transparent;
}

.zt-btn--ghost:hover::before {
    opacity: 1;
}

/* Pending: a button for a product that has no link yet. It is a button in
   look, but it does not go anywhere, so it never lies about the destination. */
.zt-btn--pending {
    border-style: dashed;
    border-color: var(--zt-line-strong);
    color: var(--zt-text-dim);
    background: rgba(255, 255, 255, 0.03);
    cursor: default;
}

.zt-btn--pending:hover {
    transform: none;
    color: var(--zt-text-dim);
}

.zt-btn--lg {
    padding: 1.05rem 2.1rem;
    font-size: 1.04rem;
}

.zt-btn--sm {
    padding: 0.6rem 1.1rem;
    font-size: 0.88rem;
}

.zt-btn__arrow {
    transition: transform var(--zt-fast);
}

.zt-btn:hover .zt-btn__arrow {
    transform: translateX(4px);
}

/* Badge / pill */
.zt-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--zt-line-strong);
    background: rgba(255, 255, 255, 0.04);
    font-family: var(--zt-font-mono);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--zt-text-dim);
}

.zt-badge__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--zt-green);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
    animation: zt-pulse 2.4s infinite;
}

@keyframes zt-pulse {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
    70% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* ========================================================================
   5. HEADER & NAVIGATION
   ===================================================================== */

.zt-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 900;
    height: var(--zt-header-h);
    display: flex;
    align-items: center;
    transition: background var(--zt-slow), border-color var(--zt-slow),
        backdrop-filter var(--zt-slow);
    border-bottom: 1px solid transparent;
}

.zt-header.is-stuck {
    background: rgba(5, 7, 15, 0.78);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom-color: var(--zt-line);
}

.zt-header__inner {
    width: min(100% - 2.5rem, var(--zt-wrap-wide));
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

/* Logo */
.zt-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--zt-font-display);
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: #fff;
    flex-shrink: 0;
}

.zt-brand:hover {
    color: #fff;
}

.zt-brand__mark {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    flex-shrink: 0;
    transition: transform var(--zt-fast), box-shadow var(--zt-fast);
}

.zt-brand:hover .zt-brand__mark {
    transform: rotate(-6deg) scale(1.05);
    box-shadow: 0 8px 26px -8px rgba(34, 211, 238, 0.7);
}

.zt-brand__text {
    display: inline-flex;
    align-items: baseline;
    gap: 0.32rem;
}

.zt-brand__text span {
    background: var(--zt-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Nav */
.zt-nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.zt-nav > li {
    list-style: none;
}

.zt-nav a {
    position: relative;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    color: var(--zt-text-dim);
    font-size: 0.95rem;
    font-weight: 500;
}

.zt-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--zt-grad-brand);
    transform: translateX(-50%);
    transition: width var(--zt-fast);
}

.zt-nav a:hover,
.zt-nav .current-menu-item > a,
.zt-nav .current_page_item > a {
    color: #fff;
}

.zt-nav a:hover::after,
.zt-nav .current-menu-item > a::after,
.zt-nav .current_page_item > a::after {
    width: 22px;
}

.zt-nav .zt-btn {
    margin-left: 0.6rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
}

/* Dropdown */
.zt-nav li {
    position: relative;
}

.zt-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 10px);
    min-width: 260px;
    background: rgba(8, 12, 28, 0.97);
    border: 1px solid var(--zt-line);
    border-radius: var(--zt-radius-sm);
    padding: 0.5rem;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--zt-fast), transform var(--zt-fast), visibility var(--zt-fast);
    backdrop-filter: blur(18px);
}

.zt-nav li:hover > ul,
.zt-nav li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.zt-nav ul a {
    display: block;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
}

.zt-nav ul a::after {
    display: none;
}

.zt-nav ul a:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Mobile toggle */
.zt-nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--zt-line-strong);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    cursor: pointer;
    padding: 0;
}

.zt-nav-toggle span {
    display: block;
    width: 19px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    position: relative;
    transition: background var(--zt-fast);
}

.zt-nav-toggle span::before,
.zt-nav-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 19px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--zt-fast), top var(--zt-fast);
}

.zt-nav-toggle span::before { top: -6px; }
.zt-nav-toggle span::after { top: 6px; }

.zt-nav-toggle[aria-expanded="true"] span { background: transparent; }
.zt-nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.zt-nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 960px) {
    .zt-nav-toggle {
        display: inline-flex;
    }

    .zt-nav {
        position: fixed;
        inset: var(--zt-header-h) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 1.25rem 1.4rem 2rem;
        background: rgba(5, 7, 15, 0.98);
        border-bottom: 1px solid var(--zt-line);
        backdrop-filter: blur(22px);
        transform: translateY(-130%);
        transition: transform var(--zt-slow);
        max-height: calc(100vh - var(--zt-header-h));
        overflow-y: auto;
    }

    .zt-nav.is-open {
        transform: translateY(0);
    }

    .zt-nav a {
        padding: 0.85rem 0.4rem;
        border-bottom: 1px solid rgba(148, 180, 255, 0.08);
        border-radius: 0;
        font-size: 1.05rem;
    }

    .zt-nav a::after {
        display: none;
    }

    .zt-nav ul {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        min-width: 0;
        background: none;
        border: 0;
        box-shadow: none;
        padding: 0 0 0 1rem;
        display: none;
    }

    .zt-nav li:hover > ul,
    .zt-nav li:focus-within > ul {
        display: block;
    }

    .zt-nav .zt-btn {
        margin: 1rem 0 0;
        width: 100%;
    }
}

/* ========================================================================
   6. HERO
   ===================================================================== */

.zt-hero {
    position: relative;
    padding-top: calc(var(--zt-header-h) + clamp(3rem, 7vw, 6rem));
    padding-bottom: clamp(3.5rem, 8vw, 7rem);
    overflow: hidden;
}

.zt-hero__grid {
    display: grid;
    grid-template-columns: 1.16fr 0.84fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

@media (max-width: 980px) {
    .zt-hero__grid {
        grid-template-columns: 1fr;
    }
}

.zt-hero h1 {
    /* Sized against the viewport, because the headline sits in a column
       that narrows with the page. A fixed size wraps it in two at 1200px. */
    font-size: clamp(2rem, 5.5vw, 5rem);
    margin-bottom: 1.15rem;
}

/* A controlled line in the hero headline. Each line is its own block, so
   the break stays where it was designed to be at every width. */
.zt-line {
    display: block;
}

.zt-hero__lead {
    font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.3rem);
    max-width: 60ch;
    margin-bottom: 2rem;
}

.zt-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 2.75rem;
}

.zt-hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem 2.6rem;
    padding-top: 1.9rem;
    border-top: 1px solid var(--zt-line);
}

.zt-stat__value {
    font-family: var(--zt-font-display);
    font-size: clamp(1.7rem, 1.4rem + 1.1vw, 2.35rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    background: var(--zt-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: block;
    margin-bottom: 0.35rem;
}

.zt-stat__label {
    font-size: 0.85rem;
    color: var(--zt-text-faint);
    letter-spacing: 0.02em;
}

/* Orbiting 3D visual */
.zt-hero__visual {
    position: relative;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
}

.zt-hero__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(148, 180, 255, 0.13);
}

.zt-hero__ring--2 {
    inset: 11%;
    border-style: dashed;
    border-color: rgba(148, 180, 255, 0.17);
    animation: zt-spin 44s linear infinite;
}

.zt-hero__ring--3 {
    inset: 22%;
    border-color: rgba(34, 211, 238, 0.18);
    animation: zt-spin 32s linear infinite reverse;
}

@keyframes zt-spin {
    to { transform: rotate(360deg); }
}

.zt-hero__logo {
    position: relative;
    width: 56%;
    border-radius: 26%;
    filter: drop-shadow(0 30px 70px rgba(34, 211, 238, 0.35));
    animation: zt-float 7s ease-in-out infinite;
}

@keyframes zt-float {
    0%, 100% { transform: translateY(-8px) rotate(-1.5deg); }
    50% { transform: translateY(10px) rotate(1.5deg); }
}

/* Floating feature chips around the logo */
.zt-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--zt-line-strong);
    background: rgba(8, 12, 28, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-family: var(--zt-font-mono);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--zt-text);
    white-space: nowrap;
    box-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.9);
}

.zt-chip--1 { top: 8%;  left: -2%; animation: zt-float 6s ease-in-out infinite; }
.zt-chip--2 { top: 38%; right: -3%; animation: zt-float 7.5s ease-in-out infinite 0.6s; }
.zt-chip--3 { bottom: 12%; left: 4%; animation: zt-float 8.5s ease-in-out infinite 1.2s; }

.zt-chip__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--zt-cyan);
    box-shadow: 0 0 10px var(--zt-cyan);
}

.zt-chip--2 .zt-chip__dot { background: var(--zt-magenta); box-shadow: 0 0 10px var(--zt-magenta); }
.zt-chip--3 .zt-chip__dot { background: var(--zt-green); box-shadow: 0 0 10px var(--zt-green); }

/* ========================================================================
   7. SECTIONS
   ===================================================================== */

/* Logo / capability strip */
.zt-marquee {
    overflow: hidden;
    border-block: 1px solid var(--zt-line);
    padding-block: 1.15rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.zt-marquee__track {
    display: flex;
    gap: 3.25rem;
    width: max-content;
    animation: zt-scroll 34s linear infinite;
}

.zt-marquee:hover .zt-marquee__track {
    animation-play-state: paused;
}

@keyframes zt-scroll {
    to { transform: translateX(-50%); }
}

.zt-marquee__item {
    font-family: var(--zt-font-mono);
    font-size: 0.84rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--zt-text-faint);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3.25rem;
}

.zt-marquee__item::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--zt-cyan);
    opacity: 0.65;
}

/* Numbered feature rows */
.zt-feature {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.15rem;
    align-items: start;
}

.zt-feature__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.26);
    color: var(--zt-cyan);
    flex-shrink: 0;
}

.zt-feature__icon svg {
    width: 22px;
    height: 22px;
}

.zt-feature h4 {
    margin-bottom: 0.35rem;
}

.zt-feature p {
    margin-bottom: 0;
    font-size: 0.97rem;
}

/* Checklist */
.zt-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: grid;
    gap: 0.85rem;
}

/* The tick is positioned rather than placed in a grid column, so the item
   can hold any mix of text and inline elements without the content
   collapsing into the tick's column. */
.zt-checklist li {
    position: relative;
    padding-left: 2.05rem;
    color: var(--zt-text-dim);
    font-size: 0.98rem;
}

.zt-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(52, 211, 153, 0.14);
    border: 1px solid rgba(52, 211, 153, 0.45);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 13px;
    background-position: center;
    background-repeat: no-repeat;
}

.zt-checklist strong {
    color: var(--zt-text);
}

/* Numbered steps */
.zt-steps {
    counter-reset: zt-step;
    display: grid;
    gap: 1.15rem;
}

.zt-step {
    counter-increment: zt-step;
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 1.35rem;
    align-items: start;
    padding: 1.4rem 1.5rem;
    border-radius: var(--zt-radius);
    border: 1px solid var(--zt-line);
    background: var(--zt-grad-panel);
    transition: border-color var(--zt-fast), transform var(--zt-fast);
}

.zt-step:hover {
    border-color: var(--zt-line-strong);
    transform: translateX(4px);
}

.zt-step::before {
    content: counter(zt-step, decimal-leading-zero);
    font-family: var(--zt-font-mono);
    font-size: 1.35rem;
    font-weight: 600;
    background: var(--zt-grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
}

.zt-step h4 {
    margin-bottom: 0.3rem;
}

.zt-step p {
    margin-bottom: 0;
    font-size: 0.97rem;
}

/* Call to action band */
.zt-cta-band {
    position: relative;
    border-radius: var(--zt-radius-lg);
    padding: clamp(2.25rem, 5vw, 4rem);
    overflow: hidden;
    border: 1px solid var(--zt-line-strong);
    background:
        radial-gradient(700px 340px at 12% 0%, rgba(34, 211, 238, 0.22), transparent 65%),
        radial-gradient(700px 340px at 88% 100%, rgba(168, 85, 247, 0.22), transparent 65%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
    text-align: center;
}

.zt-cta-band h2 {
    max-width: 20ch;
    margin-inline: auto;
}

.zt-cta-band p {
    max-width: 58ch;
    margin-inline: auto;
    margin-bottom: 2rem;
}

.zt-cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
}

/* ========================================================================
   8. CARDS
   ===================================================================== */

/* Product card */
.zt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--zt-radius);
    border: 1px solid var(--zt-line);
    background: var(--zt-grad-panel);
    overflow: hidden;
    transition: transform var(--zt-slow), border-color var(--zt-slow),
        box-shadow var(--zt-slow);
    isolation: isolate;
}

.zt-card:hover {
    transform: translateY(-6px);
    border-color: var(--zt-line-strong);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.95);
}

/* The pointer-tracked spotlight. --mx/--my are set by the JS. */
.zt-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(
        420px circle at var(--mx, 50%) var(--my, 0%),
        rgba(34, 211, 238, 0.16),
        transparent 62%
    );
    opacity: 0;
    transition: opacity var(--zt-slow);
}

.zt-card:hover::before {
    opacity: 1;
}

.zt-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(150deg, rgba(34, 211, 238, 0.12), rgba(168, 85, 247, 0.12));
    border-bottom: 1px solid var(--zt-line);
}

.zt-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--zt-ease);
}

.zt-card:hover .zt-card__media img {
    transform: scale(1.06);
}

.zt-card__tag {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    z-index: 2;
    background: rgba(5, 7, 15, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.zt-card__body {
    padding: 1.6rem 1.65rem 1.85rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.zt-card__body h3 {
    margin-bottom: 0.55rem;
}

.zt-card__body p {
    font-size: 0.97rem;
    margin-bottom: 1.25rem;
}

.zt-card__foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--zt-line);
}

.zt-card__meta {
    font-family: var(--zt-font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--zt-text-faint);
}

.zt-card__link {
    font-family: var(--zt-font-display);
    font-weight: 600;
    font-size: 0.94rem;
    color: var(--zt-cyan);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.zt-card__link svg {
    width: 15px;
    height: 15px;
    transition: transform var(--zt-fast);
}

.zt-card:hover .zt-card__link svg {
    transform: translateX(4px);
}

/* Feature tile */
.zt-tile {
    padding: 1.75rem 1.6rem;
    border-radius: var(--zt-radius);
    border: 1px solid var(--zt-line);
    background: var(--zt-grad-panel);
    transition: transform var(--zt-slow), border-color var(--zt-slow);
}

.zt-tile:hover {
    transform: translateY(-4px);
    border-color: var(--zt-line-strong);
}

.zt-tile h3 {
    font-size: 1.16rem;
    margin-bottom: 0.5rem;
}

.zt-tile p {
    margin-bottom: 0;
    font-size: 0.94rem;
}

/* Spec table */
.zt-specs {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
    border-radius: var(--zt-radius);
    overflow: hidden;
    border: 1px solid var(--zt-line);
}

.zt-specs caption {
    text-align: left;
    padding: 1.1rem 1.3rem;
    font-family: var(--zt-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--zt-line);
}

.zt-specs th,
.zt-specs td {
    padding: 0.85rem 1.3rem;
    text-align: left;
    border-bottom: 1px solid rgba(148, 180, 255, 0.08);
}

.zt-specs th {
    width: 34%;
    font-weight: 600;
    color: var(--zt-text);
    background: rgba(255, 255, 255, 0.022);
}

.zt-specs td {
    color: var(--zt-text-dim);
    font-family: var(--zt-font-mono);
    font-size: 0.86rem;
}

.zt-specs tr:last-child th,
.zt-specs tr:last-child td {
    border-bottom: 0;
}

/* ========================================================================
   9. PRODUCT LANDING PAGE
   ===================================================================== */

.zt-product-hero {
    position: relative;
    padding-top: calc(var(--zt-header-h) + clamp(2.5rem, 6vw, 5rem));
    padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
    overflow: hidden;
}

.zt-product-hero__inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

@media (max-width: 980px) {
    .zt-product-hero__inner {
        grid-template-columns: 1fr;
    }
}

.zt-product-hero h1 {
    margin-bottom: 1rem;
}

.zt-product-hero__lead {
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.24rem);
    max-width: 58ch;
    margin-bottom: 2rem;
}

.zt-product-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 1.75rem;
}

.zt-product-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    font-family: var(--zt-font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--zt-text-faint);
    text-transform: uppercase;
}

.zt-product-hero__price {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--zt-text);
}

.zt-product-hero__shot {
    position: relative;
    border-radius: var(--zt-radius);
    overflow: hidden;
    border: 1px solid var(--zt-line-strong);
    background: linear-gradient(150deg, rgba(34, 211, 238, 0.1), rgba(168, 85, 247, 0.12));
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95);
}

.zt-product-hero__shot img {
    width: 100%;
    display: block;
}

.zt-product-hero__shot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(5, 7, 15, 0.55));
    pointer-events: none;
}

/* Screenshot gallery */
.zt-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--zt-gap);
}

.zt-gallery figure {
    margin: 0;
    border-radius: var(--zt-radius);
    overflow: hidden;
    border: 1px solid var(--zt-line);
    background: rgba(255, 255, 255, 0.02);
    transition: transform var(--zt-slow), border-color var(--zt-slow);
}

.zt-gallery figure:hover {
    transform: translateY(-5px);
    border-color: var(--zt-line-strong);
}

.zt-gallery img {
    width: 100%;
    display: block;
}

.zt-gallery figcaption {
    padding: 0.95rem 1.2rem;
    font-family: var(--zt-font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--zt-text-faint);
    border-top: 1px solid var(--zt-line);
}

/* Price / buy box */
.zt-buybox {
    padding: 1.9rem;
    border-radius: var(--zt-radius);
    border: 1px solid var(--zt-line-strong);
    background:
        radial-gradient(520px 260px at 100% 0%, rgba(34, 211, 238, 0.16), transparent 68%),
        var(--zt-grad-panel);
}

.zt-buybox__note {
    font-size: 0.88rem;
    color: var(--zt-text-faint);
    margin-bottom: 1.5rem;
}

.zt-buybox .zt-btn {
    width: 100%;
    margin-bottom: 0.7rem;
}

/* Price */
.zt-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.65rem;
    margin-bottom: 0.45rem;
}

.zt-price__was {
    font-family: var(--zt-font-mono);
    font-size: 0.92rem;
    color: var(--zt-text-faint);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(248, 113, 113, 0.7);
}

.zt-price__now {
    font-family: var(--zt-font-display);
    font-size: 2.35rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: #fff;
    line-height: 1;
}

.zt-price--buybox {
    margin-bottom: 0.55rem;
}

/* Sale badge */
.zt-badge--sale {
    border-color: rgba(248, 113, 113, 0.42);
    background: rgba(248, 113, 113, 0.14);
    color: #fca5a5;
}

.zt-card__sale {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 2;
}

/* Store row */
.zt-store {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 0.9rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--zt-radius-sm);
    border: 1px solid var(--zt-line);
    background: rgba(255, 255, 255, 0.025);
}

.zt-store__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--zt-line-strong);
    background: var(--zt-surface);
    color: var(--zt-cyan);
}

.zt-store__text {
    flex: 1;
    min-width: 0;
}

.zt-store__name {
    display: block;
    font-family: var(--zt-font-display);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--zt-text);
}

.zt-store__seller {
    display: block;
    font-family: var(--zt-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--zt-text-faint);
}

.zt-store__more {
    font-family: var(--zt-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--zt-cyan);
    white-space: nowrap;
}

.zt-store__more:hover {
    color: var(--zt-cyan-soft);
}

/* Key facts */
.zt-facts {
    margin: 1.25rem 0 0;
    display: grid;
    gap: 0.6rem;
    font-size: 0.86rem;
}

.zt-facts__row {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 0.85rem;
    align-items: baseline;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--zt-line);
}

.zt-facts__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.zt-facts dt {
    font-family: var(--zt-font-mono);
    font-size: 0.67rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--zt-text-faint);
}

.zt-facts dd {
    margin: 0;
    color: var(--zt-text-dim);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* The file name under the buy button */
.zt-buybox__file {
    margin: 0;
    font-family: var(--zt-font-mono);
    font-size: 0.74rem;
    line-height: 1.65;
    letter-spacing: 0.01em;
    color: var(--zt-text-faint);
    text-align: center;
}

/* FAQ */
.zt-faq details {
    border-bottom: 1px solid var(--zt-line);
    padding: 1.15rem 0;
}

.zt-faq summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--zt-font-display);
    font-weight: 600;
    font-size: 1.03rem;
    color: var(--zt-text);
}

.zt-faq summary::-webkit-details-marker {
    display: none;
}

.zt-faq summary::after {
    content: "+";
    font-family: var(--zt-font-mono);
    font-size: 1.4rem;
    color: var(--zt-cyan);
    transition: transform var(--zt-fast);
    line-height: 1;
}

.zt-faq details[open] summary::after {
    transform: rotate(45deg);
}

.zt-faq details p {
    margin: 0.85rem 0 0;
    font-size: 0.97rem;
}

/* ========================================================================
   10. FORMS
   ===================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 0.85rem 1.05rem;
    border-radius: var(--zt-radius-sm);
    border: 1px solid var(--zt-line-strong);
    background: rgba(4, 8, 20, 0.6);
    color: var(--zt-text);
    font-family: var(--zt-font-body);
    font-size: 1rem;
    transition: border-color var(--zt-fast), box-shadow var(--zt-fast);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--zt-cyan);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16);
}

textarea {
    min-height: 150px;
    resize: vertical;
}

label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--zt-text);
    margin-bottom: 0.45rem;
}

.zt-field {
    margin-bottom: 1.15rem;
}

/* ========================================================================
   11. FOOTER
   ===================================================================== */

/* ---------------------------------------------------------------------
   Prose - the long form content of a page or a post
   --------------------------------------------------------------------- */
.zt-prose {
    font-size: 1.06rem;
}

/* The landing page template runs the content edge to edge. */
.zt-landing-content {
    font-size: 1.06rem;
}

.zt-landing-content > * {
    margin-inline: auto;
    max-width: var(--zt-wrap);
    padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.zt-landing-content > .alignwide {
    max-width: var(--zt-wrap-wide);
}

.zt-landing-content > .alignfull {
    max-width: none;
}

.zt-landing-content > *:first-child {
    margin-top: 0;
}

.zt-prose > *:first-child {
    margin-top: 0;
}

.zt-prose > *:last-child {
    margin-bottom: 0;
}

.zt-prose h2 {
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.15rem);
}

.zt-prose h3 {
    margin-top: 2rem;
    margin-bottom: 0.6rem;
    font-size: 1.35rem;
}

.zt-prose h4 {
    margin-top: 1.6rem;
    margin-bottom: 0.5rem;
}

.zt-prose p,
.zt-prose li {
    color: var(--zt-text-dim);
}

.zt-prose strong {
    color: var(--zt-text);
}

.zt-prose ul:not(.zt-checklist),
.zt-prose ol {
    margin: 0 0 1.4rem;
    padding-left: 1.4rem;
}

.zt-prose ul:not(.zt-checklist) li {
    margin-bottom: 0.6rem;
}

.zt-prose ul:not(.zt-checklist) li::marker {
    color: var(--zt-cyan);
}

.zt-prose .zt-checklist {
    margin-bottom: 2rem;
}

.zt-prose img {
    border-radius: var(--zt-radius);
    border: 1px solid var(--zt-line);
    margin-block: 1.75rem;
}

.zt-prose table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.75rem;
    font-size: 0.96rem;
}

.zt-prose th,
.zt-prose td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--zt-line);
}

.zt-prose th {
    color: var(--zt-text);
    font-weight: 600;
}

.zt-prose a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: rgba(34, 211, 238, 0.45);
}
.zt-footer {
    position: relative;
    margin-top: clamp(3rem, 7vw, 6rem);
    border-top: 1px solid var(--zt-line);
    background: linear-gradient(180deg, rgba(8, 12, 28, 0.5), rgba(4, 6, 14, 0.9));
    padding-top: clamp(3rem, 6vw, 5rem);
}

.zt-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: 3rem;
}

@media (max-width: 900px) {
    .zt-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .zt-footer__grid {
        grid-template-columns: 1fr;
    }
}

.zt-footer__about p {
    font-size: 0.93rem;
    max-width: 38ch;
    margin-top: 1.1rem;
}

.zt-footer h4 {
    font-family: var(--zt-font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--zt-text-faint);
    margin-bottom: 1.15rem;
}

.zt-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.7rem;
}

.zt-footer ul li {
    font-size: 0.94rem;
    color: var(--zt-text-dim);
}

.zt-footer ul a {
    color: var(--zt-text-dim);
    font-size: 0.94rem;
}

.zt-footer ul a:hover {
    color: var(--zt-cyan);
}

.zt-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.6rem 0 2.2rem;
    border-top: 1px solid var(--zt-line);
    font-size: 0.86rem;
    color: var(--zt-text-faint);
}

.zt-social {
    display: flex;
    gap: 0.6rem;
}

.zt-social a {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    border: 1px solid var(--zt-line);
    color: var(--zt-text-dim);
    transition: color var(--zt-fast), border-color var(--zt-fast),
        transform var(--zt-fast), background var(--zt-fast);
}

.zt-social a:hover {
    color: #fff;
    border-color: var(--zt-cyan);
    background: rgba(34, 211, 238, 0.1);
    transform: translateY(-2px);
}

.zt-social svg {
    width: 17px;
    height: 17px;
}

/* ========================================================================
   12. WORDPRESS CORE CLASSES
   ===================================================================== */

.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    padding: 0;
    margin: -1px;
    position: absolute !important;
    word-wrap: normal !important;
    clip: rect(1px, 1px, 1px, 1px);
    border: 0;
}

.screen-reader-text:focus {
    background: var(--zt-bg-3);
    color: #fff;
    clip-path: none;
    clip: auto;
    height: auto;
    width: auto;
    position: static !important;
    padding: 0.85rem 1.25rem;
    border-radius: 8px;
    z-index: 100000;
}

.alignleft {
    float: left;
    margin: 0.35rem 1.6rem 1.2rem 0;
}

.alignright {
    float: right;
    margin: 0.35rem 0 1.2rem 1.6rem;
}

.aligncenter {
    margin-inline: auto;
}

.alignwide {
    width: min(100% - 2.5rem, var(--zt-wrap-wide));
    margin-inline: auto;
}

.alignfull {
    width: 100%;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    font-size: 0.86rem;
    color: var(--zt-text-faint);
    margin-top: 0.6rem;
}

.sticky .zt-card {
    border-color: var(--zt-line-strong);
}

.gallery {
    display: grid;
    gap: 0.75rem;
}

.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }

.gallery-item {
    margin: 0;
}

/* Comments */
.comment-list {
    list-style: none;
    padding: 0;
}

.comment-body {
    padding: 1.35rem 1.5rem;
    border-radius: var(--zt-radius);
    border: 1px solid var(--zt-line);
    background: var(--zt-grad-panel);
    margin-bottom: 1rem;
}

.comment-author .fn {
    font-family: var(--zt-font-display);
    font-weight: 600;
    color: #fff;
}

.comment-meta {
    font-size: 0.82rem;
    color: var(--zt-text-faint);
    margin-bottom: 0.75rem;
}

/* Pagination */
.zt-pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.zt-pagination .page-numbers {
    min-width: 42px;
    height: 42px;
    padding: 0 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--zt-line);
    color: var(--zt-text-dim);
    font-family: var(--zt-font-mono);
    font-size: 0.88rem;
}

.zt-pagination .page-numbers:hover,
.zt-pagination .page-numbers.current {
    border-color: var(--zt-cyan);
    color: #fff;
    background: rgba(34, 211, 238, 0.1);
}

/* ========================================================================
   13. MOTION & RESPONSIVE
   ===================================================================== */

/* Scroll reveal - the JS adds .is-in when the element enters the viewport. */
.zt-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.85s var(--zt-ease), transform 0.85s var(--zt-ease);
}

.zt-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Staggered children. */
.zt-reveal[data-delay="1"] { transition-delay: 0.09s; }
.zt-reveal[data-delay="2"] { transition-delay: 0.18s; }
.zt-reveal[data-delay="3"] { transition-delay: 0.27s; }
.zt-reveal[data-delay="4"] { transition-delay: 0.36s; }
.zt-reveal[data-delay="5"] { transition-delay: 0.45s; }

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

    .zt-reveal {
        opacity: 1;
        transform: none;
    }

    .zt-marquee__track {
        animation: none;
    }
}

@media (max-width: 640px) {
    :root {
        --zt-header-h: 68px;
    }

    .zt-chip {
        font-size: 0.68rem;
        padding: 0.42rem 0.75rem;
    }

    .zt-chip--1 { left: -4%; }
    .zt-chip--2 { right: -6%; }

    .zt-hero__actions .zt-btn,
    .zt-cta-band__actions .zt-btn {
        width: 100%;
    }

    .zt-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Print - keep it readable. */
@media print {
    body::before,
    body::after {
        display: none;
    }

    .zt-header,
    .zt-footer,
    .zt-marquee {
        display: none;
    }

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