/* ==========================================================================
   Gopinath Infotech — inner page hero art (hero-art.css)
   Page-specific pure-CSS 3D compositions rendered by resources/views/partials/hero-art/*.blade.php
   inside .page-hero-art (partials/page-hero.blade.php). Prefix: .ha-
   - Everything is sized from --u (1% of the art box) so each piece scales as one object.
   - Real 3D: preserve-3d scenes, translateZ layers, stacked extrusions; the root carries data-tilt
     (mouse tilt from app.js) and some layers carry data-depth (mouse / scroll parallax).
   - Motion = transform / opacity only; paused off-screen (.ha-off) and static with reduced motion.
   --------------------------------------------------------------------------
   00 Host & base · 01 Shared bits (glow, floor, chip, bubble, extruded icon, sparks)
   02 About · 03 Solutions · 04 Detail · 05 Features · 06 Industries · 07 Integrations
   08 Blog · 09 Contact · 10 Demo · 11 FAQ · 12 Privacy · 13 Terms · 14 Default
   15 Responsive · 16 Keyframes · 17 Motion preferences
   ========================================================================== */

/* 00 Host & base ----------------------------------------------------------- */
.page-hero-art.ha-host {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    pointer-events: none;
}

.ha {
    --s: clamp(300px, 31vw, 450px);
    --u: calc(var(--s) / 100);
    --c1: #2f80ff;
    --c2: #22c7e6;
    --c3: #8bd346;
    --ink-2: #071022;
    --edge: rgba(255, 255, 255, .14);
    position: relative;
    display: block;
    flex: none;
    width: var(--s);
    height: var(--s);
    transform-style: preserve-3d;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    color: var(--text);
    font-family: var(--font-head);
    line-height: 1.2;
}

:where(.ha) :where(span, i, b, small) { display: block; font-style: normal; }
.ha svg.lucide { display: block; }
.ha img { display: block; max-width: none; }


/* The fixed cursor glow (app.js) uses mix-blend-mode: screen; blending it over many 3D-composited
   layers makes Chrome paint a bright strip at the viewport edge. Its glow is ~10% alpha, so plain
   compositing looks the same — only on pages that render a hero art. */
body:has(.ha) .cursor-glow { mix-blend-mode: normal; }

/* small desktops: the art column is narrow — keep the composition clear of the viewport edge */
@media (min-width: 961px) and (max-width: 1279px) {
    .ha { --s: clamp(280px, 29vw, 450px); translate: -5% 0; }
}

/* Detail pages: colour theme per record (stable seed) */
.ha--detail.ha--t1 { --c1: #13b6d6; --c2: #8bd346; --c3: #2f80ff; }
.ha--detail.ha--t2 { --c1: #5fb52f; --c2: #22c7e6; --c3: #2f80ff; }
.ha--detail.ha--t3 { --c1: #4b6bff; --c2: #34d3f0; --c3: #8bd346; }

/* 01 Shared bits ----------------------------------------------------------- */
.ha-glow {
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--c1) 42%, transparent), color-mix(in srgb, var(--c2) 14%, transparent) 55%, transparent 76%);
    transform: translateZ(calc(var(--u) * -30));
    animation: ha-glow 8s ease-in-out infinite;
    pointer-events: none;
}

.ha-floor {
    position: absolute;
    left: 50%;
    top: 84%;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    /* fading concentric rings without a mask (masks are costly inside 3D contexts) */
    background:
        radial-gradient(closest-side, color-mix(in srgb, var(--c2) 24%, transparent), transparent 62%),
        radial-gradient(closest-side,
            transparent 0 11%, rgba(170, 205, 255, .2) 11.4%, transparent 12.2% 22%,
            rgba(170, 205, 255, .17) 22.4%, transparent 23.2% 33%,
            rgba(170, 205, 255, .14) 33.4%, transparent 34.2% 44%,
            rgba(170, 205, 255, .11) 44.4%, transparent 45.2% 55%,
            rgba(170, 205, 255, .08) 55.4%, transparent 56.2% 66%,
            rgba(170, 205, 255, .05) 66.4%, transparent 67.2% 77%,
            rgba(170, 205, 255, .03) 77.4%, transparent 78.2%);
    transform: translate(-50%, -50%) rotateX(78deg);
    pointer-events: none;
}

/* glass chip (icon + label) */
.ha-chip {
    --z: calc(var(--u) * 12);
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 1.6);
    max-width: calc(var(--u) * 46);
    padding: calc(var(--u) * 1.1) calc(var(--u) * 2.8) calc(var(--u) * 1.1) calc(var(--u) * 1.1);
    border-radius: 999px;
    font: 600 max(11px, calc(var(--u) * 2.85))/1.15 var(--font);
    letter-spacing: -.005em;
    white-space: nowrap;
    color: #eef4ff;
    background: linear-gradient(160deg, rgba(36, 56, 98, .94), rgba(11, 20, 42, .9));
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        0 calc(var(--u) * 4) calc(var(--u) * 8) calc(var(--u) * -3) rgba(0, 0, 0, .8),
        0 0 calc(var(--u) * 5) calc(var(--u) * -2) color-mix(in srgb, var(--c1) 50%, transparent);
}

.ha-chip__ic {
    display: grid;
    place-items: center;
    flex: none;
    width: max(20px, calc(var(--u) * 5.6));
    height: max(20px, calc(var(--u) * 5.6));
    border-radius: 50%;
    color: #04101f;
    background: linear-gradient(135deg, var(--c1), var(--c2) 55%, var(--c3));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}

.ha-chip__ic svg { width: 56%; height: 56%; stroke-width: 2.5; }
.ha-chip__tx { overflow: hidden; overflow: clip; text-overflow: ellipsis; min-width: 0; }

.ha-chip--float {
    transform: translateZ(var(--z));
    animation: ha-bob 7s ease-in-out infinite;
}

/* glass bubble (icon only) */
.ha-bubble {
    --tone: var(--c1);
    position: absolute;
    display: grid;
    place-items: center;
    width: calc(var(--u) * 11);
    height: calc(var(--u) * 11);
    border-radius: 50%;
    color: #fff;
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .42), rgba(255, 255, 255, .05) 42%, transparent 60%),
        linear-gradient(160deg, color-mix(in srgb, var(--tone) 70%, #0b1630), color-mix(in srgb, var(--tone) 25%, #060d1f));
    border: 1px solid color-mix(in srgb, var(--tone) 60%, rgba(255, 255, 255, .25));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .35),
        inset 0 calc(var(--u) * -1) calc(var(--u) * 2) rgba(0, 0, 0, .35),
        0 0 calc(var(--u) * 4) color-mix(in srgb, var(--tone) 45%, transparent),
        0 calc(var(--u) * 3) calc(var(--u) * 6) calc(var(--u) * -2) rgba(0, 0, 0, .7);
}

.ha-bubble svg { width: 46%; height: 46%; stroke-width: 2; }
.ha-bubble--wa { --tone: #25d366; }
.ha-bubble--fb { --tone: #1877f2; }
.ha-bubble--c1 { --tone: var(--c1); }
.ha-bubble--c2 { --tone: var(--c2); }
.ha-bubble--c3 { --tone: var(--c3); }

/* extruded Lucide icon: stacked copies receding in Z, bright front copy */
.ha-ext {
    --step: calc(var(--u) * .55);
    --ext: var(--c1);
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.ha-ext > span { position: absolute; inset: 0; display: grid; place-items: center; }
.ha-ext svg { width: 100%; height: 100%; stroke-width: 1.9; overflow: visible; }
.ha-ext__l {
    transform: translateZ(calc(var(--i) * var(--step) * -1));
    color: color-mix(in srgb, var(--ext) calc(100% - var(--i) * 7%), #030a1c);
}
.ha-ext__f {
    color: #fff;
    filter: drop-shadow(0 0 calc(var(--u) * 1.4) color-mix(in srgb, var(--c2) 85%, transparent));
}

/* tiny glowing sparks */
.ha-spark {
    position: absolute;
    width: calc(var(--u) * 1.6);
    height: calc(var(--u) * 1.6);
    border-radius: 50%;
    background: radial-gradient(circle, #fff, var(--c2) 45%, transparent 72%);
    box-shadow: 0 0 calc(var(--u) * 2.4) var(--c2);
    transform: translateZ(calc(var(--u) * 20));
    animation: ha-twinkle 4.8s ease-in-out infinite;
}

.ha-spark--1 { left: 10%; top: 18%; }
.ha-spark--2 { right: 8%; top: 64%; animation-delay: -1.8s; background: radial-gradient(circle, #fff, var(--c3) 45%, transparent 72%); box-shadow: 0 0 calc(var(--u) * 2.4) var(--c3); }
.ha-spark--3 { left: 22%; bottom: 10%; animation-delay: -3.1s; }

/* 02 About — medallion, plinth, orbiting values, year badge ---------------- */
.ha--about .ha-floor { top: 80%; }

.ha-plinth { position: absolute; left: 22%; width: 56%; top: 60%; height: calc(var(--u) * 24); }

.ha-plinth__side {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--u) * 7);
    height: calc(var(--u) * 15);
    border-radius: 0 0 50% 50% / 0 0 calc(var(--u) * 7) calc(var(--u) * 7);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 40%),
        linear-gradient(90deg, #08122b 0%, #17346b 20%, #3a73cc 42%, #2457a8 56%, #10275a 78%, #060e24 100%);
    box-shadow:
        inset 0 calc(var(--u) * -.7) 0 color-mix(in srgb, var(--c3) 60%, transparent),
        0 calc(var(--u) * 4) calc(var(--u) * 7) rgba(0, 0, 0, .55);
}

.ha-plinth__top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(var(--u) * 14);
    border-radius: 50%;
    background:
        radial-gradient(60% 70% at 50% 45%, rgba(130, 190, 255, .38), rgba(14, 30, 64, .2) 70%),
        linear-gradient(180deg, #1c3a72, #0b1a3a);
    border: 1px solid rgba(170, 210, 255, .45);
    box-shadow: inset 0 0 calc(var(--u) * 3) rgba(34, 199, 230, .35), 0 0 calc(var(--u) * 6) rgba(47, 128, 255, .3);
}

.ha-plinth__top i {
    position: absolute;
    inset: 20% 16%;
    border-radius: 50%;
    border: 1px solid rgba(34, 199, 230, .75);
    box-shadow: 0 0 calc(var(--u) * 2) rgba(34, 199, 230, .6), inset 0 0 calc(var(--u) * 2) rgba(34, 199, 230, .45);
    animation: ha-pulse 3.6s ease-in-out infinite;
}

.ha-about__beam {
    position: absolute;
    left: 28%;
    width: 44%;
    top: 30%;
    height: 38%;
    background: radial-gradient(50% 62% at 50% 100%, rgba(34, 199, 230, .45), rgba(47, 128, 255, .12) 55%, transparent 74%);
    transform: translateZ(calc(var(--u) * -8));
    pointer-events: none;
}

.ha-medal {
    position: absolute;
    left: 27%;
    top: 14%;
    width: 46%;
    height: 46%;
    transform-style: preserve-3d;
    transform: rotateY(-18deg) rotateX(4deg);
    animation: ha-medal 12s ease-in-out infinite;
}

.ha-medal__edge {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(90deg, #0b2152, #2c6fd6 34%, #6fd8f0 52%, #2a63c4 68%, #0a1c46);
    transform: translateZ(calc(var(--i) * var(--u) * -1));
}

.ha-medal__face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    overflow: clip;
    border-radius: 50%;
    background: conic-gradient(from 200deg, #a9d0ff, #2f80ff 16%, #0e2b6b 30%, #22c7e6 48%, #c7f590 60%, #2f80ff 74%, #0f2c6e 88%, #a9d0ff);
    box-shadow: 0 0 calc(var(--u) * 10) color-mix(in srgb, var(--c1) 45%, transparent);
    transform: translateZ(1px);
}

.ha-medal__face::before {
    content: '';
    position: absolute;
    inset: 6.5%;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 26%, #24478a, #0b1734 72%);
    box-shadow: inset 0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(255, 255, 255, .18), inset 0 calc(var(--u) * -1.5) calc(var(--u) * 3) rgba(0, 0, 0, .6);
}

.ha-medal__inlay {
    position: absolute;
    inset: 15%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 28%, #fff, #eef4ff 55%, #cddcf6);
    box-shadow:
        0 0 0 calc(var(--u) * .7) rgba(255, 255, 255, .22),
        0 calc(var(--u) * 1.2) calc(var(--u) * 3) rgba(0, 0, 0, .55),
        inset 0 calc(var(--u) * -1.2) calc(var(--u) * 2.4) rgba(30, 80, 160, .28);
}

.ha-medal__inlay img { width: 74%; height: auto; mix-blend-mode: multiply; }

.ha-medal__shine {
    position: absolute;
    inset: -30%;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .5) 48%, rgba(255, 255, 255, .1) 53%, transparent 60%);
    transform: translateX(-70%);
    animation: ha-shine 7s ease-in-out infinite;
}

.ha-orbit {
    position: absolute;
    left: 50%;
    top: 41%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transform: rotateZ(-9deg) rotateX(76deg);
}

.ha-orbit__ring {
    position: absolute;
    left: calc(var(--u) * -42);
    top: calc(var(--u) * -42);
    width: calc(var(--u) * 84);
    height: calc(var(--u) * 84);
    border-radius: 50%;
    border: 1px solid rgba(150, 200, 255, .4);
    box-shadow: 0 0 calc(var(--u) * 2) rgba(34, 199, 230, .3), inset 0 0 calc(var(--u) * 2) rgba(34, 199, 230, .2);
}

.ha-orbit__ring::after {
    content: '';
    position: absolute;
    inset: calc(var(--u) * -5);
    border-radius: 50%;
    border: 1px dashed rgba(139, 211, 70, .3);
}

.ha-orbit__node {
    position: absolute;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
    transform: rotateZ(var(--a)) translateX(calc(var(--u) * 42)) rotateZ(calc(var(--a) * -1)) rotateX(-76deg) rotateZ(9deg);
    animation: ha-orbit 34s linear infinite;
}

.ha-chip--orbit { left: 0; top: 0; translate: -50% -50%; }

.ha-year {
    position: absolute;
    right: 1%;
    top: 2%;
    z-index: 3;
    transform-style: preserve-3d;
    transform: translateZ(calc(var(--u) * 16)) rotateY(-18deg) rotateX(8deg);
}

.ha-year__body { position: relative; transform-style: preserve-3d; animation: ha-float 8s ease-in-out infinite; }

.ha-year__slab {
    position: absolute;
    inset: 0;
    border-radius: calc(var(--u) * 3.4);
    background: linear-gradient(90deg, #0f2a62, #2f80ff 50%, #22c7e6 70%, #0d2352);
    transform: translateZ(calc(var(--i) * var(--u) * -.9));
}

.ha-year__face {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 1.6);
    padding: calc(var(--u) * 1.8) calc(var(--u) * 3.2) calc(var(--u) * 2.2);
    border-radius: calc(var(--u) * 3.4);
    background: linear-gradient(155deg, rgba(46, 74, 128, .98), rgba(12, 22, 46, .98));
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 calc(var(--u) * 5) calc(var(--u) * 10) calc(var(--u) * -4) rgba(0, 0, 0, .85);
}

.ha-year__num {
    font: 700 calc(var(--u) * 6.4)/1 var(--font-head);
    letter-spacing: -.02em;
    color: #fff;
    text-shadow:
        0 calc(var(--u) * .25) 0 #a8ccff,
        0 calc(var(--u) * .5) 0 #6aa2f5,
        0 calc(var(--u) * .75) 0 #3f7ddc,
        0 calc(var(--u) * 1) 0 #2a64c2,
        0 calc(var(--u) * 1.25) 0 #1d4f9f,
        0 calc(var(--u) * 1.5) calc(var(--u) * 2.4) rgba(0, 0, 0, .55);
}

.ha-year__arrow { color: var(--c2); }
.ha-year__arrow svg { width: calc(var(--u) * 5); height: calc(var(--u) * 5); stroke-width: 2.2; }

.ha-year__now {
    font: italic 400 calc(var(--u) * 5.2)/1 var(--font-serif);
    padding-right: .08em;
    background: var(--hl-grad, linear-gradient(100deg, #74b3ff, #22c7e6 45%, #b8ee7e));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 03 Solutions — exploded module stack ------------------------------------ */
.ha--solutions .ha-floor { left: 37%; top: 84%; }
.ha--solutions .ha-glow { inset: 0 10% 8% 0; }

.ha-stack {
    --gap: calc(var(--u) * 11.5);
    position: absolute;
    left: 37%;
    top: 68%;
    width: calc(var(--u) * 38);
    height: calc(var(--u) * 38);
    margin: calc(var(--u) * -19) 0 0 calc(var(--u) * -19);
    transform-style: preserve-3d;
    transform: rotateX(58deg) rotateZ(45deg);
}

.ha-stack__shadow {
    position: absolute;
    inset: -14%;
    border-radius: 30%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent);
    transform: translateZ(calc(var(--u) * -3));
}

.ha-slab {
    --tint: var(--c1);
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: translateZ(calc(var(--i) * var(--gap)));
    animation: ha-sep 7s ease-in-out infinite;
}

.ha-slab--1 { --tint: #8bd346; }
.ha-slab--2 { --tint: #22c7e6; }
.ha-slab--3 { --tint: #2f80ff; }
.ha-slab--4 { --tint: #22c7e6; }
.ha-slab--5 { --tint: #4d8dff; }

.ha-slab__face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    overflow: clip;
    border-radius: 18%;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 42%),
        linear-gradient(135deg, color-mix(in srgb, var(--tint) 46%, rgba(10, 20, 44, .7)), color-mix(in srgb, var(--tint) 14%, rgba(6, 12, 30, .86)));
    border: 1px solid color-mix(in srgb, var(--tint) 55%, rgba(255, 255, 255, .25));
    box-shadow:
        calc(var(--u) * .45) calc(var(--u) * .45) 0 color-mix(in srgb, var(--tint) 46%, #04091a),
        calc(var(--u) * .9) calc(var(--u) * .9) 0 color-mix(in srgb, var(--tint) 40%, #04091a),
        calc(var(--u) * 1.35) calc(var(--u) * 1.35) 0 color-mix(in srgb, var(--tint) 34%, #04091a),
        calc(var(--u) * 1.8) calc(var(--u) * 1.8) 0 color-mix(in srgb, var(--tint) 28%, #04091a),
        calc(var(--u) * 2.2) calc(var(--u) * 2.2) 0 color-mix(in srgb, var(--tint) 60%, #04091a),
        calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 6) rgba(0, 0, 0, .45),
        0 0 calc(var(--u) * 6) color-mix(in srgb, var(--tint) 35%, transparent);
}

.ha-slab__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--tint) 30%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--tint) 30%, transparent) 1px, transparent 1px);
    background-size: 12.5% 12.5%;
    opacity: .45;
}

.ha-slab__icon { display: none; }
.ha-slab.is-top .ha-slab__icon {
    position: absolute;
    inset: 26%;
    display: grid;
    place-items: center;
    border-radius: 26%;
    color: #fff;
    background: linear-gradient(135deg, #3d8dff, #22c7e6 55%, #8bd346);
    box-shadow: 0 0 calc(var(--u) * 5) rgba(47, 128, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.ha-slab.is-top .ha-slab__icon svg { width: 54%; height: 54%; stroke-width: 2; transform: rotate(-45deg); }

.ha-slab__led {
    position: absolute;
    right: 12%;
    bottom: 9%;
    width: 7%;
    height: 7%;
    border-radius: 50%;
    background: var(--tint);
    box-shadow: 0 0 calc(var(--u) * 1.6) var(--tint), calc(var(--u) * -2.6) 0 0 color-mix(in srgb, var(--tint) 50%, transparent), calc(var(--u) * -5.2) 0 0 color-mix(in srgb, var(--tint) 30%, transparent);
    animation: ha-blink 2.4s ease-in-out infinite;
    animation-delay: calc(var(--i) * -.45s);
}

.ha-slab__tag {
    position: absolute;
    left: 100%;
    top: 0;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transform: rotateZ(-45deg) rotateX(-58deg);
}

.ha-chip--tag {
    left: calc(var(--u) * 3);
    top: 0;
    translate: 0 -50%;
}

.ha-chip--tag::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    width: calc(var(--u) * 3);
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tint) 80%, #fff));
}

.ha-chip--tag .ha-chip__ic { background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 85%, #fff), var(--tint)); }

/* 04 Detail — extruded record icon on a pedestal -------------------------- */
.ha--detail .ha-floor { top: 87%; }

.ha-halo {
    position: absolute;
    left: 50%;
    top: 37%;
    width: calc(var(--u) * 72);
    height: calc(var(--u) * 72);
    margin: calc(var(--u) * -36) 0 0 calc(var(--u) * -36);
    transform: translateZ(calc(var(--u) * -14));
    pointer-events: none;
}

.ha-halo::before,
.ha-halo i {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.ha-halo::before {
    border: calc(var(--u) * .7) solid;
    border-color: var(--c2) transparent var(--c1) color-mix(in srgb, var(--c3) 70%, transparent);
    filter: drop-shadow(0 0 calc(var(--u) * 1.2) color-mix(in srgb, var(--c2) 70%, transparent));
    animation: ha-spin 18s linear infinite;
}

.ha-halo i {
    inset: 9%;
    border: 1px solid color-mix(in srgb, var(--c1) 35%, transparent);
    box-shadow: inset 0 0 calc(var(--u) * 8) color-mix(in srgb, var(--c1) 25%, transparent);
}

.ha-ped { position: absolute; left: 21%; width: 58%; top: 66%; height: calc(var(--u) * 24); }

.ha-ped__side {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--u) * 7.5);
    height: calc(var(--u) * 14);
    border-radius: 0 0 50% 50% / 0 0 calc(var(--u) * 7.5) calc(var(--u) * 7.5);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 45%),
        linear-gradient(90deg,
            color-mix(in srgb, var(--c1) 12%, #050c20) 0%,
            color-mix(in srgb, var(--c1) 40%, #0b1834) 22%,
            color-mix(in srgb, var(--c1) 70%, #1a3360) 45%,
            color-mix(in srgb, var(--c1) 45%, #0d1c3c) 62%,
            color-mix(in srgb, var(--c1) 14%, #050c20) 100%);
    box-shadow:
        inset 0 calc(var(--u) * -.7) 0 color-mix(in srgb, var(--c2) 70%, transparent),
        0 calc(var(--u) * 4) calc(var(--u) * 7) rgba(0, 0, 0, .55);
}

.ha-ped__top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(var(--u) * 15);
    border-radius: 50%;
    background:
        radial-gradient(55% 60% at 50% 48%, color-mix(in srgb, var(--c2) 45%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--c1) 30%, #13254a), #0a1734);
    border: 1px solid color-mix(in srgb, var(--c2) 55%, rgba(255, 255, 255, .25));
    box-shadow: inset 0 0 calc(var(--u) * 3) color-mix(in srgb, var(--c2) 40%, transparent), 0 0 calc(var(--u) * 7) color-mix(in srgb, var(--c1) 35%, transparent);
}

.ha-ped__top i,
.ha-ped__top b {
    position: absolute;
    border-radius: 50%;
}

.ha-ped__top i {
    inset: 16% 12%;
    border: 1px solid color-mix(in srgb, var(--c2) 70%, transparent);
    box-shadow: 0 0 calc(var(--u) * 2) color-mix(in srgb, var(--c2) 55%, transparent);
    animation: ha-pulse 3.2s ease-in-out infinite;
}

.ha-ped__top b {
    inset: 34% 32%;
    background: radial-gradient(closest-side, #fff, color-mix(in srgb, var(--c2) 80%, transparent) 40%, transparent);
    opacity: .7;
}

/* hexagonal variant (industries) */
.ha--hex .ha-ped__top {
    border: 0;
    border-radius: 0;
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    background:
        radial-gradient(50% 60% at 50% 50%, color-mix(in srgb, var(--c2) 50%, transparent), transparent 75%),
        linear-gradient(180deg, color-mix(in srgb, var(--c1) 55%, #1a3566), color-mix(in srgb, var(--c1) 20%, #0a1734));
    box-shadow: none;
}

.ha--hex .ha-ped__top i {
    inset: 18%;
    border: 0;
    border-radius: 0;
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    background: color-mix(in srgb, var(--c2) 22%, transparent);
    box-shadow: none;
}

.ha--hex .ha-ped__side {
    --hh: calc(var(--u) * 7.5);
    --t: calc(var(--u) * 8);
    top: calc(var(--u) * 7.5);
    height: calc(var(--hh) + var(--t));
    border-radius: 0;
    clip-path: polygon(0 0, 25% var(--hh), 75% var(--hh), 100% 0, 100% var(--t), 75% calc(var(--hh) + var(--t)), 25% calc(var(--hh) + var(--t)), 0 var(--t));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 60%),
        linear-gradient(90deg,
            color-mix(in srgb, var(--c1) 55%, #12254c) 0 25%,
            color-mix(in srgb, var(--c1) 32%, #0b1834) 25% 75%,
            color-mix(in srgb, var(--c1) 14%, #050c20) 75%);
    box-shadow: none;
}

.ha-rise {
    position: absolute;
    left: 31%;
    width: 38%;
    top: 63%;
    height: calc(var(--u) * 10);
    pointer-events: none;
}

.ha-rise i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--c2) 80%, #fff);
    box-shadow: 0 0 calc(var(--u) * 2) color-mix(in srgb, var(--c2) 60%, transparent);
    opacity: 0;
    animation: ha-rise 3.6s ease-out infinite;
}

.ha-rise i:nth-child(2) { animation-delay: -1.2s; }
.ha-rise i:nth-child(3) { animation-delay: -2.4s; }

.ha-ico {
    position: absolute;
    left: 50%;
    top: 37%;
    width: calc(var(--u) * 34);
    height: calc(var(--u) * 34);
    margin: calc(var(--u) * -17) 0 0 calc(var(--u) * -17);
    transform-style: preserve-3d;
    transform: rotateY(-20deg) rotateX(6deg);
    animation: ha-ico 9s ease-in-out infinite;
}

.ha-ico .ha-ext { --ext: var(--c1); --step: calc(var(--u) * .72); }
.ha-ico .ha-ext svg { stroke-width: 1.7; }

.ha--detail .ha-chip { max-width: calc(var(--u) * 52); }
.ha--detail .ha-chip__ic { background: linear-gradient(135deg, var(--c1), var(--c2)); }
.ha--detail .ha-chip--p1 { left: -8%; top: 8%; --z: calc(var(--u) * 14); }
.ha--detail .ha-chip--p2 { right: 3%; top: 54%; --z: calc(var(--u) * 18); animation-delay: -2.4s; }
.ha--detail .ha-chip--p3 { left: -8%; top: 64%; --z: calc(var(--u) * 10); animation-delay: -4.6s; }
.ha--hex .ha-ped { filter: drop-shadow(0 0 1px color-mix(in srgb, var(--c2) 80%, #fff)) drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 4) color-mix(in srgb, var(--c1) 35%, transparent)); }

/* 05 Features — floating UI widgets --------------------------------------- */
.ha--features .ha-floor { top: 92%; }

.ha-ui {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateY(-20deg) rotateX(9deg);
    animation: ha-ui 14s ease-in-out infinite;
}

.ha-pane {
    position: absolute;
    transform-style: preserve-3d;
    border-radius: calc(var(--u) * 3.6);
    background:
        linear-gradient(120deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 38%),
        linear-gradient(155deg, rgba(38, 60, 108, .97), rgba(10, 19, 40, .97));
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 calc(var(--u) * 6) calc(var(--u) * 12) calc(var(--u) * -5) rgba(0, 0, 0, .85);
    font-family: var(--font);
}

.ha-pane::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #102a62, #2f80ff 50%, #22c7e6 70%, #0c2150);
    transform: translateZ(calc(var(--u) * -1.4));
}

.ha-pane__ic {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: calc(var(--u) * 6.4);
    height: calc(var(--u) * 6.4);
    border-radius: 30%;
    color: #04101f;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 calc(var(--u) * 3) color-mix(in srgb, var(--c1) 50%, transparent);
}

.ha-pane__ic svg { width: 55%; height: 55%; stroke-width: 2.3; }

.ha-pane__txt { display: flex; flex-direction: column; gap: calc(var(--u) * .7); min-width: 0; }
.ha-pane__txt b { font-weight: 700; font-size: max(10px, calc(var(--u) * 2.9)); color: #fff; white-space: nowrap; }
.ha-pane__txt small { font-size: max(9px, calc(var(--u) * 2.3)); color: var(--muted); white-space: nowrap; }

.ha-pane--chart {
    left: 6%;
    top: 17%;
    width: 64%;
    height: 47%;
    display: flex;
    flex-direction: column;
    padding: calc(var(--u) * 3);
    transform: translateZ(calc(var(--u) * -8));
}

.ha-pane__head { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.ha-pane__head .ha-pane__ic { width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); }
.ha-pane__title { flex: 1; min-width: 0; font-weight: 700; font-size: max(10px, calc(var(--u) * 2.9)); color: #fff; white-space: nowrap; overflow: hidden; overflow: clip; text-overflow: ellipsis; }
.ha-pane__pill {
    padding: calc(var(--u) * .6) calc(var(--u) * 1.6);
    border-radius: 999px;
    font-weight: 700;
    font-size: max(9px, calc(var(--u) * 2.4));
    color: #0b1d05;
    background: var(--c3);
    box-shadow: 0 0 calc(var(--u) * 3) color-mix(in srgb, var(--c3) 55%, transparent);
}

.ha-bars {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 5%;
    flex: 1;
    margin-top: calc(var(--u) * 3);
    padding-inline: calc(var(--u) * .6);
}

.ha-bars i {
    flex: 1;
    height: var(--h);
    border-radius: calc(var(--u) * 1) calc(var(--u) * 1) calc(var(--u) * .3) calc(var(--u) * .3);
    background: linear-gradient(180deg, var(--c2), color-mix(in srgb, var(--c1) 80%, #0a1a3a));
    box-shadow: 0 0 calc(var(--u) * 2.4) color-mix(in srgb, var(--c1) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5);
    transform-origin: 50% 100%;
    animation: ha-bar 3.4s ease-in-out infinite;
    animation-delay: calc(var(--k) * -.42s);
}

.ha-bars i:nth-child(6) { background: linear-gradient(180deg, #c6f58f, var(--c3) 50%, #3f8f1e); box-shadow: 0 0 calc(var(--u) * 3) color-mix(in srgb, var(--c3) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5); }

.ha-pane__axis {
    position: absolute;
    left: calc(var(--u) * 3);
    right: calc(var(--u) * 3);
    top: 36%;
    bottom: calc(var(--u) * 3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ha-pane__axis i { height: 1px; background: rgba(255, 255, 255, .07); }

.ha-gear {
    position: absolute;
    right: 8%;
    top: 5%;
    width: calc(var(--u) * 21);
    height: calc(var(--u) * 21);
    transform-style: preserve-3d;
    transform: translateZ(calc(var(--u) * 20)) rotateY(-10deg);
}

.ha-ext--gear { --ext: var(--c3); --step: calc(var(--u) * .6); animation: ha-spin 16s linear infinite; }
.ha-ext--gear svg { stroke-width: 2.1; }
.ha-ext--gear .ha-ext__f { color: #f3ffe6; filter: drop-shadow(0 0 calc(var(--u) * 1.4) color-mix(in srgb, var(--c3) 85%, transparent)); }

.ha-pane--toggle {
    left: 0;
    top: 68%;
    width: 52%;
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 2);
    padding: calc(var(--u) * 2.4);
    transform: translateZ(calc(var(--u) * 24));
}

.ha-pane--toggle .ha-pane__ic { background: linear-gradient(135deg, #b9f27a, var(--c3)); }
.ha-pane--toggle .ha-pane__txt { flex: 1; }

.ha-switch {
    position: relative;
    flex: none;
    width: calc(var(--u) * 10);
    height: calc(var(--u) * 5.6);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}

.ha-switch::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #6fbf35, var(--c3));
    box-shadow: 0 0 calc(var(--u) * 2.6) color-mix(in srgb, var(--c3) 60%, transparent);
    animation: ha-switch-bg 6s ease-in-out infinite;
}

.ha-switch i {
    position: absolute;
    left: calc(var(--u) * .6);
    top: calc(var(--u) * .6);
    width: calc(var(--u) * 4.4);
    height: calc(var(--u) * 4.4);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #dfe8f7);
    box-shadow: 0 calc(var(--u) * .4) calc(var(--u) * 1) rgba(0, 0, 0, .45);
    transform: translateX(calc(var(--u) * 4.4));
    animation: ha-switch 6s ease-in-out infinite;
}

.ha-pane--note {
    right: 0;
    top: 47%;
    width: 52%;
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 2);
    padding: calc(var(--u) * 2.4);
    transform: translateZ(calc(var(--u) * 44));
    animation: ha-note 7s ease-in-out infinite;
}

.ha-pane__ic--bell { background: linear-gradient(135deg, #5aa6ff, var(--c1)); color: #fff; }
.ha-pane__ic--bell svg { animation: ha-ring-bell 3.5s ease-in-out infinite; transform-origin: 50% 10%; }
.ha-pane__ic--bell i {
    position: absolute;
    right: -12%;
    top: -12%;
    width: 34%;
    height: 34%;
    border-radius: 50%;
    background: #ff6b7a;
    border: 2px solid #142546;
    box-shadow: 0 0 calc(var(--u) * 2) rgba(255, 107, 122, .8);
    animation: ha-pulse 2s ease-in-out infinite;
}

/* 06 Industries — isometric city of blocks -------------------------------- */
.ha--industries .ha-glow { inset: 10% 6% 0; }

.ha-city {
    --cell: calc(var(--u) * 18);
    position: absolute;
    left: 50%;
    top: 61%;
    width: calc(var(--u) * 54);
    height: calc(var(--u) * 54);
    margin: calc(var(--u) * -27) 0 0 calc(var(--u) * -27);
    transform-style: preserve-3d;
    transform: rotateX(58deg) rotateZ(45deg);
}

.ha-city__tile {
    position: absolute;
    inset: calc(var(--u) * -4.5);
    overflow: hidden;
    overflow: clip;
    border-radius: calc(var(--u) * 4);
    background:
        radial-gradient(60% 60% at 50% 50%, rgba(47, 128, 255, .26), transparent 75%),
        linear-gradient(135deg, #142a54, #081227 75%);
    border: 1px solid rgba(150, 200, 255, .32);
    box-shadow:
        calc(var(--u) * .5) calc(var(--u) * .5) 0 #0d1f45,
        calc(var(--u) * 1) calc(var(--u) * 1) 0 #0c1c3f,
        calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0 #0b1939,
        calc(var(--u) * 2) calc(var(--u) * 2) 0 #0a1733,
        calc(var(--u) * 2.4) calc(var(--u) * 2.4) 0 color-mix(in srgb, var(--c2) 55%, #0a1733),
        calc(var(--u) * 7) calc(var(--u) * 7) calc(var(--u) * 9) rgba(0, 0, 0, .55),
        0 0 calc(var(--u) * 10) rgba(47, 128, 255, .25);
}

.ha-city__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(150, 200, 255, .14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150, 200, 255, .14) 1px, transparent 1px);
    background-size: calc(var(--u) * 4.5) calc(var(--u) * 4.5);
    background-position: calc(var(--u) * 4.5) calc(var(--u) * 4.5);
}

.ha-city__road {
    position: absolute;
    overflow: hidden;
    overflow: clip;
    background: rgba(4, 10, 24, .7);
    box-shadow: 0 0 calc(var(--u) * 1.4) rgba(34, 199, 230, .35);
}

.ha-city__road::before {
    content: '';
    position: absolute;
    background: repeating-linear-gradient(90deg, rgba(34, 199, 230, .8) 0 calc(var(--u) * 1.4), transparent calc(var(--u) * 1.4) calc(var(--u) * 2.8));
}

.ha-city__road--x { left: 0; right: 0; top: calc(var(--u) * (4.5 + 36) - var(--u) * 1.2); height: calc(var(--u) * 2.4); }
.ha-city__road--x::before { left: 0; right: 0; top: 50%; height: 1px; }
.ha-city__road--y { top: 0; bottom: 0; left: calc(var(--u) * (4.5 + 36) - var(--u) * 1.2); width: calc(var(--u) * 2.4); }
.ha-city__road--y::before { top: 0; bottom: 0; left: 50%; width: 1px; background: repeating-linear-gradient(180deg, rgba(139, 211, 70, .8) 0 calc(var(--u) * 1.4), transparent calc(var(--u) * 1.4) calc(var(--u) * 2.8)); }

.ha-city__road i {
    position: absolute;
    width: calc(var(--u) * 3);
    height: calc(var(--u) * 2.4);
    border-radius: 999px;
    background: radial-gradient(closest-side, #fff, var(--c2) 50%, transparent);
    box-shadow: 0 0 calc(var(--u) * 2) var(--c2);
}

.ha-city__road--x i { left: 0; top: 0; animation: ha-run-x 5s linear infinite; }
.ha-city__road--y i { left: 0; top: 0; width: calc(var(--u) * 2.4); height: calc(var(--u) * 3); background: radial-gradient(closest-side, #fff, var(--c3) 50%, transparent); box-shadow: 0 0 calc(var(--u) * 2) var(--c3); animation: ha-run-y 6.5s linear infinite; animation-delay: -2s; }

.ha-blk {
    --tint: var(--c1);
    --hz: calc(var(--h) * var(--u));
    position: absolute;
    left: calc(var(--c) * var(--cell) + var(--u) * 2.5);
    top: calc(var(--r) * var(--cell) + var(--u) * 2.5);
    width: calc(var(--u) * 13);
    height: calc(var(--u) * 13);
    transform-style: preserve-3d;
}

.ha-blk:nth-child(3n + 2) { --tint: var(--c2); }
.ha-blk:nth-child(3n + 3) { --tint: #4a7dff; }
.ha-blk:nth-child(4) { --tint: var(--c3); }
.ha-blk--low { --tint: #5b7fb8; }

.ha-blk__shadow {
    position: absolute;
    inset: -12%;
    border-radius: 20%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent);
    transform: translate(calc(var(--u) * 2), calc(var(--u) * 2));
}

.ha-blk__body {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: ha-blk 6s ease-in-out infinite;
    animation-delay: calc(var(--k) * -.75s);
}

.ha-blk__top,
.ha-blk__sx,
.ha-blk__sy { position: absolute; }

.ha-blk__top {
    inset: 0;
    border-radius: calc(var(--u) * 1);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%),
        linear-gradient(135deg, color-mix(in srgb, var(--tint) 85%, #fff), color-mix(in srgb, var(--tint) 70%, #0a1836));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 0 calc(var(--u) * 4) color-mix(in srgb, var(--tint) 50%, transparent);
    transform: translateZ(var(--hz));
}

.ha-blk__sx {
    left: 100%;
    top: 0;
    width: var(--hz);
    height: 100%;
    transform-origin: 0 0;
    transform: translateZ(var(--hz)) rotateY(90deg);
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px calc(var(--u) * 3)),
        linear-gradient(90deg, color-mix(in srgb, var(--tint) 32%, #081430), color-mix(in srgb, var(--tint) 16%, #050c20));
}

.ha-blk__sy {
    left: 0;
    top: 100%;
    width: 100%;
    height: var(--hz);
    transform-origin: 0 0;
    transform: translateZ(var(--hz)) rotateX(-90deg);
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px calc(var(--u) * 3)),
        linear-gradient(180deg, color-mix(in srgb, var(--tint) 55%, #0c1d42), color-mix(in srgb, var(--tint) 26%, #071230));
}

.ha-blk__holo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transform: translateZ(calc(var(--hz) + var(--u) * 7)) rotateZ(-45deg) rotateX(-58deg);
}

.ha-blk__holo::before {
    content: '';
    position: absolute;
    left: -.5px;
    top: calc(var(--u) * 4);
    width: 1px;
    height: calc(var(--u) * 5.5);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 90%, #fff), transparent);
}

.ha-blk__badge {
    position: absolute;
    left: calc(var(--u) * -5);
    top: calc(var(--u) * -5);
    display: grid;
    place-items: center;
    width: calc(var(--u) * 10);
    height: calc(var(--u) * 10);
    border-radius: 32%;
    color: #fff;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .45), transparent 50%),
        linear-gradient(160deg, color-mix(in srgb, var(--tint) 75%, #10224a), color-mix(in srgb, var(--tint) 30%, #071028));
    border: 1px solid color-mix(in srgb, var(--tint) 60%, rgba(255, 255, 255, .3));
    box-shadow: 0 0 calc(var(--u) * 4) color-mix(in srgb, var(--tint) 55%, transparent), 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0, 0, 0, .55);
    animation: ha-badge 5s ease-in-out infinite;
    animation-delay: calc(var(--k) * -.6s);
}

.ha-blk__badge svg { width: 54%; height: 54%; stroke-width: 2; }

/* 07 Integrations — gyroscope hub ---------------------------------------- */
.ha--integrations .ha-floor { top: 90%; }

.ha-gyro {
    position: absolute;
    left: 50%;
    top: 47%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transform: rotateY(-14deg);
    animation: ha-gyro 16s ease-in-out infinite;
}

.ha-ring {
    --r: calc(var(--u) * 40);
    --t: 26s;
    position: absolute;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
    transform: rotateZ(var(--th)) rotateX(72deg);
}

.ha-ring--2 { --t: 32s; --r: calc(var(--u) * 37); }
.ha-ring--3 { --t: 38s; --r: calc(var(--u) * 43); }

.ha-ring__line {
    position: absolute;
    left: calc(var(--r) * -1);
    top: calc(var(--r) * -1);
    width: calc(var(--r) * 2);
    height: calc(var(--r) * 2);
    border-radius: 50%;
    border: 1px solid rgba(150, 200, 255, .38);
    box-shadow: 0 0 calc(var(--u) * 2) rgba(34, 199, 230, .28), inset 0 0 calc(var(--u) * 2) rgba(34, 199, 230, .2);
}

.ha-ring--2 .ha-ring__line { border-color: rgba(139, 211, 70, .38); box-shadow: 0 0 calc(var(--u) * 2) rgba(139, 211, 70, .25), inset 0 0 calc(var(--u) * 2) rgba(139, 211, 70, .15); }
.ha-ring--3 .ha-ring__line { border-style: dashed; border-color: rgba(150, 200, 255, .3); }

.ha-ring__spoke {
    position: absolute;
    left: 0;
    top: -1px;
    width: var(--r);
    height: 2px;
    transform-origin: 0 50%;
    transform: rotateZ(var(--a));
    background: linear-gradient(90deg, transparent 18%, rgba(34, 199, 230, .55) 40%, rgba(139, 211, 70, .5));
    animation: ha-spoke var(--t) linear infinite;
}

.ha-ring__spoke i {
    position: absolute;
    left: 0;
    top: -2px;
    width: calc(var(--u) * 2.6);
    height: 6px;
    border-radius: 999px;
    background: radial-gradient(closest-side, #fff, var(--c2) 55%, transparent);
    box-shadow: 0 0 calc(var(--u) * 1.6) var(--c2);
    animation: ha-run-spoke 2.6s linear infinite;
}

.ha-ring--2 .ha-ring__spoke i { animation-duration: 3.2s; animation-delay: -1s; }
.ha-ring--3 .ha-ring__spoke i { animation-duration: 2.9s; animation-delay: -2s; }

.ha-ring__node {
    position: absolute;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
    transform: rotateZ(var(--a)) translateX(var(--r)) rotateZ(calc(var(--a) * -1)) rotateX(-72deg) rotateZ(calc(var(--th) * -1));
    animation: ha-node var(--t) linear infinite;
}

.ha-ring__node .ha-bubble { left: calc(var(--u) * -5.5); top: calc(var(--u) * -5.5); }

.ha-core {
    position: absolute;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
}

.ha-core__glow {
    position: absolute;
    left: calc(var(--u) * -13);
    top: calc(var(--u) * -13);
    width: calc(var(--u) * 26);
    height: calc(var(--u) * 26);
    border-radius: 50%;
    background: radial-gradient(circle at 40% 36%, #fff 0 4%, color-mix(in srgb, var(--c2) 85%, transparent) 16%, color-mix(in srgb, var(--c1) 50%, transparent) 38%, transparent 70%);
    animation: ha-pulse 3.4s ease-in-out infinite;
}

.ha-cube {
    --h: calc(var(--u) * 11);
    position: absolute;
    left: calc(var(--h) * -1);
    top: calc(var(--h) * -1);
    width: calc(var(--h) * 2);
    height: calc(var(--h) * 2);
    transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(30deg);
    animation: ha-cube 18s linear infinite;
}

.ha-cube__f {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: calc(var(--u) * 2.2);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 45%),
        linear-gradient(155deg, color-mix(in srgb, var(--c1) 62%, transparent), rgba(8, 20, 48, .72));
    border: 1px solid rgba(170, 215, 255, .6);
    box-shadow: inset 0 0 calc(var(--u) * 4) color-mix(in srgb, var(--c2) 45%, transparent), 0 0 calc(var(--u) * 3) color-mix(in srgb, var(--c1) 40%, transparent);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.ha-cube__f b {
    font: 700 calc(var(--u) * 5.4)/1 var(--font-head);
    letter-spacing: .02em;
    color: #fff;
    text-shadow: 0 0 calc(var(--u) * 2) color-mix(in srgb, var(--c2) 90%, transparent);
}

.ha-cube__f--front { transform: translateZ(var(--h)); }
.ha-cube__f--back { transform: rotateY(180deg) translateZ(var(--h)); }
.ha-cube__f--right { transform: rotateY(90deg) translateZ(var(--h)); }
.ha-cube__f--left { transform: rotateY(-90deg) translateZ(var(--h)); }
.ha-cube__f--top { transform: rotateX(90deg) translateZ(var(--h)); background: linear-gradient(135deg, rgba(255, 255, 255, .35), color-mix(in srgb, var(--c2) 45%, rgba(8, 20, 48, .7))); }
.ha-cube__f--bottom { transform: rotateX(-90deg) translateZ(var(--h)); }
.ha-cube__heart { display: none; }

/* 08 Blog — fanned article cards ----------------------------------------- */
.ha--blog .ha-floor { top: 88%; }

.ha-fan {
    position: absolute;
    left: 48%;
    top: 50%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transform: rotateY(-16deg) rotateX(10deg);
}

.ha-card {
    --tz: 0px;
    --tx: 0px;
    --rz: 0deg;
    --rz2: 0deg;
    position: absolute;
    left: calc(var(--u) * -22);
    top: calc(var(--u) * -31);
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 2);
    width: calc(var(--u) * 44);
    height: calc(var(--u) * 58);
    padding: calc(var(--u) * 2.4);
    border-radius: calc(var(--u) * 3.4);
    background:
        linear-gradient(125deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 35%),
        linear-gradient(160deg, rgba(36, 56, 100, .98), rgba(11, 20, 42, .98));
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 calc(var(--u) * 6) calc(var(--u) * 12) calc(var(--u) * -4) rgba(0, 0, 0, .85);
    transform-origin: 50% 115%;
    transform: translateZ(var(--tz)) translateX(var(--tx)) rotateZ(var(--rz));
    animation: ha-fan 9s ease-in-out infinite;
    font-family: var(--font);
}

.ha-card--1 { --tz: calc(var(--u) * -18); --tx: calc(var(--u) * -4); --rz: -17deg; --rz2: -21deg; }
.ha-card--2 { --tz: calc(var(--u) * -8); --tx: calc(var(--u) * 5); --rz: 13deg; --rz2: 17deg; }
.ha-card--3 { --tz: calc(var(--u) * 4); --tx: 0px; --rz: -2deg; --rz2: -3.5deg; border-color: rgba(150, 200, 255, .3); }

.ha-card__media {
    position: relative;
    overflow: hidden;
    overflow: clip;
    flex: none;
    height: calc(var(--u) * 22);
    border-radius: calc(var(--u) * 2.2);
    background: linear-gradient(135deg, #2f80ff, #22c7e6);
}

.ha-card__media--b { background: linear-gradient(135deg, #1f9fbf, #8bd346); }
.ha-card__media--c { background: linear-gradient(135deg, #3b5bff, #2f80ff 45%, #22c7e6); }

.ha-card__media i {
    position: absolute;
    right: 14%;
    top: 16%;
    width: 24%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, rgba(255, 255, 255, .55) 60%, rgba(255, 255, 255, .2));
}

.ha-card__media b {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -40%;
    height: 80%;
    border-radius: 50% 50% 0 0;
    background: linear-gradient(180deg, rgba(6, 16, 40, .55), rgba(6, 16, 40, .85));
}

.ha-card__media b::before {
    content: '';
    position: absolute;
    left: 40%;
    right: -20%;
    top: -26%;
    height: 90%;
    border-radius: 50% 50% 0 0;
    background: rgba(6, 16, 40, .4);
}

.ha-card__tag {
    align-self: flex-start;
    padding: calc(var(--u) * .5) calc(var(--u) * 1.6);
    border-radius: 999px;
    font-weight: 700;
    font-size: max(9px, calc(var(--u) * 2.1));
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c2);
    background: color-mix(in srgb, var(--c2) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--c2) 35%, transparent);
}

.ha-card__lines { display: flex; flex-direction: column; gap: calc(var(--u) * 1.3); }
.ha-card__lines i { height: calc(var(--u) * 2); border-radius: 999px; background: rgba(255, 255, 255, .8); }
.ha-card__lines i:nth-child(2) { width: 82%; }
.ha-card__lines i:nth-child(3) { width: 56%; height: calc(var(--u) * 1.3); background: rgba(255, 255, 255, .25); }

.ha-card__meta { display: flex; align-items: center; gap: calc(var(--u) * 1.4); margin-top: auto; }
.ha-card__meta i { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c3)); }
.ha-card__meta span { width: 40%; height: calc(var(--u) * 1.3); border-radius: 999px; background: rgba(255, 255, 255, .22); }

.ha-pen {
    position: absolute;
    right: 8%;
    top: 9%;
    width: calc(var(--u) * 21);
    height: calc(var(--u) * 21);
    transform-style: preserve-3d;
    transform: translateZ(calc(var(--u) * 26)) rotateY(-18deg);
}

.ha-ext--pen { --ext: var(--c2); --step: calc(var(--u) * .6); animation: ha-pen 7s ease-in-out infinite; }
.ha-ext--pen svg { stroke-width: 1.8; }

.ha--blog .ha-chip--read { left: -2%; top: 68%; --z: calc(var(--u) * 20); }
.ha--blog .ha-chip--cat { right: 2%; top: 52%; --z: calc(var(--u) * 32); animation-delay: -3s; }

/* 09 Contact — map tile, radar, pin -------------------------------------- */
.ha--contact .ha-glow { inset: 8% 4% 0; }

.ha-map {
    position: absolute;
    left: 50%;
    top: 63%;
    width: calc(var(--u) * 58);
    height: calc(var(--u) * 58);
    margin: calc(var(--u) * -29) 0 0 calc(var(--u) * -29);
    transform-style: preserve-3d;
    transform: rotateX(60deg) rotateZ(-32deg);
}

.ha-map__tile {
    position: absolute;
    inset: 0;
    overflow: hidden;
    overflow: clip;
    border-radius: calc(var(--u) * 5);
    background:
        radial-gradient(40% 40% at 60% 40%, rgba(139, 211, 70, .2), transparent 70%),
        linear-gradient(140deg, #13284f, #0a1530 70%);
    border: 1px solid rgba(150, 200, 255, .35);
    box-shadow:
        calc(var(--u) * -.27) calc(var(--u) * .42) 0 #0e2045,
        calc(var(--u) * -.53) calc(var(--u) * .85) 0 #0d1d40,
        calc(var(--u) * -.8) calc(var(--u) * 1.27) 0 #0c1b3b,
        calc(var(--u) * -1.06) calc(var(--u) * 1.7) 0 #0b1936,
        calc(var(--u) * -1.33) calc(var(--u) * 2.12) 0 #0a1731,
        calc(var(--u) * -1.6) calc(var(--u) * 2.54) 0 color-mix(in srgb, var(--c3) 45%, #0a1731),
        calc(var(--u) * -4) calc(var(--u) * 7) calc(var(--u) * 9) rgba(0, 0, 0, .55),
        0 0 calc(var(--u) * 10) rgba(47, 128, 255, .25);
}

.ha-map__blocks {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(150, 200, 255, .1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150, 200, 255, .1) 1px, transparent 1px),
        radial-gradient(circle at 22% 24%, rgba(139, 211, 70, .26) 0 9%, transparent 9.5%),
        radial-gradient(circle at 80% 78%, rgba(139, 211, 70, .2) 0 7%, transparent 7.5%);
    background-size: calc(var(--u) * 6.4) calc(var(--u) * 6.4), calc(var(--u) * 6.4) calc(var(--u) * 6.4), 100% 100%, 100% 100%;
}

.ha-map__river {
    position: absolute;
    left: -60%;
    top: 44%;
    width: 110%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: calc(var(--u) * 3) solid rgba(34, 199, 230, .32);
    box-shadow: 0 0 calc(var(--u) * 3) rgba(34, 199, 230, .35), inset 0 0 calc(var(--u) * 2) rgba(34, 199, 230, .3);
}

.ha-map__road { position: absolute; background: rgba(190, 215, 255, .2); box-shadow: 0 0 calc(var(--u) * 1.2) rgba(47, 128, 255, .45); }
.ha-map__road--a { left: 0; right: 0; top: calc(42% - var(--u) * 1.2); height: calc(var(--u) * 2.4); }
.ha-map__road--b { top: 0; bottom: 0; left: calc(58% - var(--u) * 1.2); width: calc(var(--u) * 2.4); }

.ha-map__route {
    position: absolute;
    left: 14%;
    top: 42%;
    width: 44%;
    height: 42%;
    border-top: calc(var(--u) * .7) dashed var(--c3);
    border-right: calc(var(--u) * .7) dashed var(--c3);
    border-radius: 0 calc(var(--u) * 3) 0 0;
    transform: translate(0, calc(var(--u) * -.35));
    filter: drop-shadow(0 0 calc(var(--u) * 1) var(--c3));
    animation: ha-route 2.4s ease-in-out infinite;
}

.ha-map__pulse,
.ha-map__spot,
.ha-map__pinpos {
    position: absolute;
    left: 58%;
    top: 42%;
    width: 0;
    height: 0;
}

.ha-map__pulse i {
    position: absolute;
    left: calc(var(--u) * -18);
    top: calc(var(--u) * -18);
    width: calc(var(--u) * 36);
    height: calc(var(--u) * 36);
    border-radius: 50%;
    border: 2px solid var(--c3);
    box-shadow: 0 0 calc(var(--u) * 3) color-mix(in srgb, var(--c3) 60%, transparent), inset 0 0 calc(var(--u) * 3) color-mix(in srgb, var(--c3) 40%, transparent);
    opacity: 0;
    transform: translateZ(1px) scale(.15);
    animation: ha-radar 3.6s ease-out infinite;
}

.ha-map__pulse i:nth-child(2) { animation-delay: -1.2s; }
.ha-map__pulse i:nth-child(3) { animation-delay: -2.4s; }

.ha-map__spot::before {
    content: '';
    position: absolute;
    left: calc(var(--u) * -6);
    top: calc(var(--u) * -6);
    width: calc(var(--u) * 12);
    height: calc(var(--u) * 12);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .65), rgba(139, 211, 70, .25) 60%, transparent);
    transform: translateZ(1px);
    animation: ha-spot 4s ease-in-out infinite;
}

.ha-map__pinpos { transform-style: preserve-3d; transform: rotateZ(32deg) rotateX(-60deg); }

.ha-pin {
    position: absolute;
    left: calc(var(--u) * -13);
    top: calc(var(--u) * -31.5);
    width: calc(var(--u) * 26);
    height: calc(var(--u) * 31.5);
    transform-style: preserve-3d;
    transform-origin: 50% 100%;
    animation: ha-pin 4s ease-in-out infinite;
}

.ha-pin__shadow { display: none; }

.ha-pin__body {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--u) * 26);
    height: calc(var(--u) * 26);
    transform-style: preserve-3d;
    animation: ha-pin-turn 8s ease-in-out infinite;
}

.ha-pin__l,
.ha-pin__f {
    position: absolute;
    inset: 0;
    border-radius: 50% 50% 50% 0;
}

.ha-pin__l {
    transform: translateZ(calc(var(--i) * var(--u) * -.8)) rotate(-45deg);
    background: linear-gradient(90deg, #2f6f17, #6fbf35 45%, #3a861c);
}

.ha-pin__f {
    transform: rotate(-45deg);
    background:
        radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 32%),
        radial-gradient(circle at 50% 50%, #b9f27a, #8bd346 45%, #4d9a24 80%);
    box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) calc(var(--u) * 3) rgba(20, 60, 10, .5), 0 0 calc(var(--u) * 6) rgba(139, 211, 70, .55);
}

.ha-pin__dot {
    position: absolute;
    inset: 22%;
    overflow: hidden;
    overflow: clip;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 calc(var(--u) * .8) calc(var(--u) * 1.6) rgba(0, 0, 0, .25), 0 0 0 calc(var(--u) * .8) rgba(255, 255, 255, .35);
    transform: rotate(45deg);
}

.ha-pin__dot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }

.ha--contact .ha-bubble--float { width: calc(var(--u) * 12.5); height: calc(var(--u) * 12.5); transform: translateZ(var(--z, 0px)); animation: ha-bob 7s ease-in-out infinite; }
.ha-bubble--phone { --tone: var(--c1); --z: calc(var(--u) * 18); left: 4%; top: 38%; }
.ha-bubble--mail { --tone: var(--c2); --z: calc(var(--u) * 30); right: 5%; top: 32%; animation-delay: -2.2s !important; }
.ha-bubble--chat { --tone: #25d366; --z: calc(var(--u) * 12); left: 18%; top: 6%; animation-delay: -4.4s !important; }
.ha--contact .ha-chip--place { right: 6%; top: 6%; --z: calc(var(--u) * 22); animation-delay: -1.2s; }
.ha--contact .ha-chip--place .ha-chip__ic { background: linear-gradient(135deg, #b9f27a, var(--c3)); }

/* 10 Demo — laptop, play button, calendar -------------------------------- */
.ha--demo .ha-floor { top: 88%; }

.ha-laptop {
    position: absolute;
    left: 45%;
    top: 62%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(-24deg);
    animation: ha-laptop 14s ease-in-out infinite;
}

.ha-laptop__screen {
    position: absolute;
    left: calc(var(--u) * -36);
    top: calc(var(--u) * -46);
    width: calc(var(--u) * 72);
    height: calc(var(--u) * 46);
    transform-style: preserve-3d;
    transform-origin: 50% 100%;
    transform: rotateX(14deg);
}

.ha-laptop__back {
    position: absolute;
    inset: 0;
    border-radius: calc(var(--u) * 2.6);
    background: linear-gradient(90deg, #1c2d4f, #4a5f86 45%, #22355a);
    transform: translateZ(calc(var(--u) * -1.2));
}

.ha-laptop__display {
    position: absolute;
    inset: 0;
    overflow: hidden;
    overflow: clip;
    padding: calc(var(--u) * 1.8);
    border-radius: calc(var(--u) * 2.6);
    background: #050b18;
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: inset 0 0 0 calc(var(--u) * .5) #0c1528, 0 0 calc(var(--u) * 9) rgba(47, 128, 255, .35);
}

.ha-dash {
    display: flex;
    gap: calc(var(--u) * 1.6);
    height: 100%;
    padding: calc(var(--u) * 1.6);
    border-radius: calc(var(--u) * 1.4);
    background: radial-gradient(80% 80% at 70% 20%, rgba(47, 128, 255, .22), transparent 70%), #0a1428;
}

.ha-dash__side { display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); width: 12%; padding-top: calc(var(--u) * .4); }
.ha-dash__side i { height: calc(var(--u) * 1.4); border-radius: 999px; background: rgba(255, 255, 255, .14); }
.ha-dash__side i:first-child { height: calc(var(--u) * 3.2); width: calc(var(--u) * 3.2); border-radius: 30%; background: var(--grad, linear-gradient(120deg, #2f80ff, #22c7e6, #8bd346)); margin-bottom: calc(var(--u) * .6); }
.ha-dash__side i:nth-child(2) { background: rgba(34, 199, 230, .6); }

.ha-dash__main { display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); flex: 1; min-width: 0; }
.ha-dash__top { display: flex; gap: calc(var(--u) * 1); }
.ha-dash__top i { height: calc(var(--u) * 1.6); width: 30%; border-radius: 999px; background: rgba(255, 255, 255, .22); }
.ha-dash__top i:nth-child(2) { width: 14%; margin-left: auto; background: rgba(255, 255, 255, .1); }
.ha-dash__top i:nth-child(3) { width: calc(var(--u) * 1.6); background: var(--c3); }

.ha-dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1); }
.ha-dash__kpis i {
    position: relative;
    height: calc(var(--u) * 6);
    border-radius: calc(var(--u) * 1);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .07);
}

.ha-dash__kpis i::before,
.ha-dash__kpis i::after {
    content: '';
    position: absolute;
    left: 14%;
    border-radius: 999px;
}

.ha-dash__kpis i::before { top: 22%; width: 40%; height: 16%; background: rgba(255, 255, 255, .2); }
.ha-dash__kpis i::after { top: 52%; width: 62%; height: 24%; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.ha-dash__kpis i:nth-child(2)::after { background: linear-gradient(90deg, var(--c2), var(--c3)); width: 50%; }
.ha-dash__kpis i:nth-child(3)::after { background: var(--c3); width: 38%; }

.ha-dash__chart { flex: 1; min-height: 0; border-radius: calc(var(--u) * 1); background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); overflow: hidden; overflow: clip; }
.ha-dash__chart svg { display: block; width: 100%; height: 100%; }
.ha-dash__rows { display: flex; flex-direction: column; gap: calc(var(--u) * .8); }
.ha-dash__rows i { height: calc(var(--u) * 1.2); border-radius: 999px; background: rgba(255, 255, 255, .1); }
.ha-dash__rows i:nth-child(2) { width: 70%; }

.ha-laptop__glare {
    position: absolute;
    inset: 0;
    background: linear-gradient(118deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 32%, transparent 70%, rgba(255, 255, 255, .04));
    pointer-events: none;
}

.ha-play {
    position: absolute;
    left: 50%;
    top: 52%;
    width: calc(var(--u) * 15);
    height: calc(var(--u) * 15);
    margin: calc(var(--u) * -7.5) 0 0 calc(var(--u) * -7.5);
    transform: translateZ(calc(var(--u) * 12));
}

.ha-play i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--c2) 85%, #fff);
    opacity: 0;
    animation: ha-ping 2.6s ease-out infinite;
}

.ha-play i:nth-child(2) { animation-delay: -1.3s; }

.ha-play__btn {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%),
        linear-gradient(135deg, var(--c1), var(--c2) 60%, var(--c3));
    box-shadow: 0 0 calc(var(--u) * 6) color-mix(in srgb, var(--c2) 75%, transparent), 0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .6);
    animation: ha-beat 2.6s ease-in-out infinite;
}

.ha-play__btn svg { width: 44%; height: 44%; margin-left: 9%; fill: #fff; stroke-width: 1.5; }

.ha-laptop__deck {
    position: absolute;
    left: calc(var(--u) * -39);
    top: 0;
    width: calc(var(--u) * 78);
    height: calc(var(--u) * 46);
    transform-style: preserve-3d;
    transform-origin: 50% 0;
    transform: rotateX(90deg);
    border-radius: calc(var(--u) * 1) calc(var(--u) * 1) calc(var(--u) * 3) calc(var(--u) * 3);
    background: linear-gradient(180deg, #33476d, #1c2a48 60%, #16223c);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: inset 0 calc(var(--u) * .6) 0 rgba(255, 255, 255, .12);
}

.ha-laptop__keys {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 9%;
    height: 44%;
    border-radius: calc(var(--u) * 1);
    background:
        repeating-linear-gradient(90deg, transparent 0 calc(var(--u) * 3.8), rgba(4, 10, 24, .65) calc(var(--u) * 3.8) calc(var(--u) * 4.4)),
        repeating-linear-gradient(180deg, transparent 0 calc(var(--u) * 3.8), rgba(4, 10, 24, .65) calc(var(--u) * 3.8) calc(var(--u) * 4.4)),
        #0d1729;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 calc(var(--u) * 3) rgba(47, 128, 255, .15);
}

.ha-laptop__pad {
    position: absolute;
    left: 34%;
    right: 34%;
    top: 60%;
    height: 28%;
    border-radius: calc(var(--u) * 1.2);
    background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
    border: 1px solid rgba(255, 255, 255, .1);
}

.ha-laptop__lip {
    position: absolute;
    left: 2%;
    right: 2%;
    top: 100%;
    height: calc(var(--u) * 1.8);
    transform-origin: 50% 0;
    transform: rotateX(-90deg);
    border-radius: 0 0 calc(var(--u) * 1) calc(var(--u) * 1);
    background: linear-gradient(180deg, #4a5f86, #121c33);
}

.ha-cal {
    position: absolute;
    right: 7%;
    top: 30%;
    transform-style: preserve-3d;
    transform: translateZ(calc(var(--u) * 34)) rotateY(-14deg) rotateX(6deg);
}

.ha-cal__body { position: relative; transform-style: preserve-3d; animation: ha-float 7s ease-in-out infinite; animation-delay: -2s; }

.ha-cal__slab {
    position: absolute;
    inset: 0;
    border-radius: calc(var(--u) * 3.2);
    background: linear-gradient(90deg, #0f2a62, #2f80ff 55%, #0d2352);
    transform: translateZ(calc(var(--u) * -1.6));
}

.ha-cal__face {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(var(--u) * 28);
    padding-bottom: calc(var(--u) * 2.4);
    overflow: hidden;
    overflow: clip;
    border-radius: calc(var(--u) * 3.2);
    background: linear-gradient(170deg, #f5f9ff, #d9e6fb);
    box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 12) calc(var(--u) * -4) rgba(0, 0, 0, .85), inset 0 -1px 0 rgba(0, 0, 0, .1);
    font-family: var(--font);
    color: #0b1730;
}

.ha-cal__head {
    position: relative;
    align-self: stretch;
    padding: calc(var(--u) * 2.2) calc(var(--u) * 1) calc(var(--u) * 1.6);
    font-weight: 700;
    font-size: max(9px, calc(var(--u) * 2.3));
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    background: linear-gradient(120deg, var(--c1), var(--c2) 60%, var(--c3));
}

.ha-cal__head i {
    position: absolute;
    top: calc(var(--u) * .7);
    width: calc(var(--u) * 1.6);
    height: calc(var(--u) * 1.6);
    border-radius: 50%;
    background: #0b1730;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}

.ha-cal__head i:first-child { left: 26%; }
.ha-cal__head i:nth-child(2) { right: 26%; }

.ha-cal__day { margin-top: calc(var(--u) * 1.4); font: 700 calc(var(--u) * 10)/1 var(--font-head); letter-spacing: -.03em; color: #0b1730; }
.ha-cal__month { margin-top: calc(var(--u) * .4); font-weight: 600; font-size: max(9px, calc(var(--u) * 2.4)); color: #4a5a78; }

.ha-cal__slot {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * .8);
    margin-top: calc(var(--u) * 1.6);
    padding: calc(var(--u) * .7) calc(var(--u) * 1.6);
    border-radius: 999px;
    font-weight: 700;
    font-size: max(9px, calc(var(--u) * 2.2));
    color: #2b6a10;
    background: rgba(139, 211, 70, .22);
    white-space: nowrap;
}

.ha-cal__slot svg { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); stroke-width: 2.4; }

/* 11 FAQ — extruded speech bubbles --------------------------------------- */
.ha--faq .ha-floor { top: 88%; }

.ha-talk {
    --tone-a: #6cb2ff;
    --tone-b: #2a63d6;
    --tone-edge: #163f93;
    position: absolute;
    transform-style: preserve-3d;
}

.ha-talk__body { position: absolute; inset: 0; transform-style: preserve-3d; animation: ha-talk 8s ease-in-out infinite; }

.ha-talk__l,
.ha-talk__f {
    position: absolute;
    inset: 0;
    border-radius: 34% / 42%;
}

.ha-talk__l::after,
.ha-talk__f::after {
    content: '';
    position: absolute;
    left: 16%;
    top: 84%;
    width: 22%;
    height: 32%;
    clip-path: polygon(0 0, 100% 0, 6% 100%);
    background: inherit;
}

.ha-talk__l {
    transform: translateZ(calc(var(--i) * var(--u) * -.9));
    background: linear-gradient(90deg, color-mix(in srgb, var(--tone-edge) 70%, #000), var(--tone-edge) 45%, color-mix(in srgb, var(--tone-b) 70%, #fff) 60%, var(--tone-edge));
}

.ha-talk__f {
    display: grid;
    place-items: center;
    background: radial-gradient(130% 120% at 26% 14%, var(--tone-a), var(--tone-b) 62%, color-mix(in srgb, var(--tone-b) 70%, #0a1a40));
    box-shadow:
        inset 0 calc(var(--u) * 1.2) calc(var(--u) * 2) rgba(255, 255, 255, .45),
        inset 0 calc(var(--u) * -1.6) calc(var(--u) * 3) rgba(0, 0, 0, .25),
        0 0 calc(var(--u) * 8) color-mix(in srgb, var(--tone-b) 45%, transparent);
}

.ha-talk__f::after { background: color-mix(in srgb, var(--tone-b) 80%, #0a1a40); }

.ha-talk--q {
    left: 5%;
    top: 11%;
    width: 52%;
    height: 41%;
    transform: rotateY(20deg) rotateZ(-5deg);
}

.ha-talk__glyph {
    font: 700 calc(var(--u) * 27)/1 var(--font-head);
    color: #fff;
    text-shadow: 0 calc(var(--u) * .5) 0 rgba(20, 60, 150, .45), 0 0 calc(var(--u) * 5) rgba(255, 255, 255, .45);
    transform: translateY(4%);
}

.ha-talk--a {
    --tone-a: #c8f79a;
    --tone-b: #6fbf35;
    --tone-edge: #3c7f1a;
    right: 7%;
    top: 41%;
    width: 38%;
    height: 30%;
    transform: translateZ(calc(var(--u) * 18)) rotateY(-22deg) rotateZ(5deg);
}

.ha-talk--a .ha-talk__body { animation-delay: -2.6s; }
.ha-talk--a .ha-talk__l::after,
.ha-talk--a .ha-talk__f::after { left: auto; right: 16%; clip-path: polygon(0 0, 100% 0, 94% 100%); }

.ha-talk__check { display: grid; place-items: center; width: 48%; aspect-ratio: 1; color: #fff; filter: drop-shadow(0 calc(var(--u) * .4) 0 rgba(30, 80, 10, .4)); }
.ha-talk__check svg { width: 100%; height: 100%; stroke-width: 3.4; }

.ha-talk--t {
    --tone-a: #6fe6fa;
    --tone-b: #17a9cc;
    --tone-edge: #0f6f8a;
    left: 18%;
    top: 64%;
    width: 27%;
    height: 15%;
    transform: translateZ(calc(var(--u) * 34)) rotateY(12deg) rotateZ(-3deg);
}

.ha-talk--t .ha-talk__body { animation-delay: -5s; }

.ha-talk__dots { display: flex; gap: calc(var(--u) * 1.6); }
.ha-talk__dots i { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); border-radius: 50%; background: #fff; animation: ha-dot 1.4s ease-in-out infinite; }
.ha-talk__dots i:nth-child(2) { animation-delay: .18s; }
.ha-talk__dots i:nth-child(3) { animation-delay: .36s; }

/* 12 Privacy — extruded shield + lock ------------------------------------ */
.ha--privacy .ha-floor { top: 84%; }

.ha-shield {
    --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' preserveAspectRatio='none'%3E%3Cpath d='M50 1 L96 16 V54 C96 86 76 106 50 119 C24 106 4 86 4 54 V16 Z'/%3E%3C/svg%3E");
    position: absolute;
    left: 50%;
    top: 45%;
    width: calc(var(--u) * 46);
    height: calc(var(--u) * 56);
    margin: calc(var(--u) * -28) 0 0 calc(var(--u) * -23);
    transform-style: preserve-3d;
}

.ha-shield__body { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-18deg); animation: ha-shield 10s ease-in-out infinite; }

.ha-shield__l,
.ha-shield__f,
.ha-shield__inner,
.ha-shield__scan {
    position: absolute;
    -webkit-mask: var(--mask) center / 100% 100% no-repeat;
    mask: var(--mask) center / 100% 100% no-repeat;
}

.ha-shield__l {
    inset: 0;
    transform: translateZ(calc(var(--i) * var(--u) * -1.05));
    background: linear-gradient(90deg, #0c2457, #2a6fe0 40%, #7ad8f5 55%, #1d4fae 70%, #0b1f4c);
}

.ha-shield__f {
    inset: 0;
    background: linear-gradient(160deg, #b8dcff, #4a95ff 28%, #1a4fb8 62%, #0d2c72);
}

.ha-shield__inner {
    inset: 6% 7%;
    background:
        radial-gradient(110% 80% at 30% 12%, rgba(130, 195, 255, .55), rgba(20, 50, 110, 0) 55%),
        linear-gradient(170deg, #173f8f, #0b1d48 70%);
}

.ha-shield__scan { inset: 6% 7%; overflow: hidden; overflow: clip; }
.ha-shield__scan i {
    position: absolute;
    left: 0;
    right: 0;
    top: -20%;
    height: 22%;
    background: linear-gradient(180deg, transparent, rgba(139, 211, 70, .45) 55%, rgba(185, 242, 122, .7) 60%, transparent 62%);
    animation: ha-scan 4.6s ease-in-out infinite;
}

.ha-shield__lock {
    position: absolute;
    left: 50%;
    top: 46%;
    width: calc(var(--u) * 22);
    height: calc(var(--u) * 22);
    margin: calc(var(--u) * -11) 0 0 calc(var(--u) * -11);
    transform-style: preserve-3d;
    transform: translateZ(calc(var(--u) * 5));
}

.ha-ext--lock { --ext: #9fd0ff; --step: calc(var(--u) * .7); }
.ha-ext--lock svg { stroke-width: 2.1; }

.ha-shield__ring {
    position: absolute;
    left: 50%;
    top: 52%;
    width: calc(var(--u) * 82);
    height: calc(var(--u) * 82);
    margin: calc(var(--u) * -41) 0 0 calc(var(--u) * -41);
    border-radius: 50%;
    border: 1px solid rgba(150, 200, 255, .35);
    box-shadow: 0 0 calc(var(--u) * 2) rgba(34, 199, 230, .3);
    transform-style: preserve-3d;
    transform: rotateX(76deg);
}

.ha-shield__ring i { position: absolute; inset: 0; border-radius: 50%; animation: ha-spin 9s linear infinite; }
.ha-shield__ring i::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(var(--u) * -1.4);
    width: calc(var(--u) * 2.8);
    height: calc(var(--u) * 2.8);
    margin-left: calc(var(--u) * -1.4);
    border-radius: 50%;
    background: radial-gradient(circle, #fff, var(--c3) 50%, transparent 72%);
    box-shadow: 0 0 calc(var(--u) * 2.6) var(--c3);
}

.ha--privacy .ha-chip__ic { background: linear-gradient(135deg, #b9f27a, var(--c3)); }
.ha--privacy .ha-chip--p1 { left: 0; top: 13%; --z: calc(var(--u) * 16); }
.ha--privacy .ha-chip--p2 { right: 3%; top: 41%; --z: calc(var(--u) * 26); animation-delay: -2.4s; }
.ha--privacy .ha-chip--p3 { left: 0; top: 66%; --z: calc(var(--u) * 12); animation-delay: -4.6s; }

/* 13 Terms — clipboard, sheets, seal, pen -------------------------------- */
.ha--terms .ha-floor { top: 85%; }

.ha-board {
    position: absolute;
    left: 46%;
    top: 47%;
    width: calc(var(--u) * 50);
    height: calc(var(--u) * 64);
    margin: calc(var(--u) * -32) 0 0 calc(var(--u) * -25);
    transform-style: preserve-3d;
    transform: rotateX(14deg) rotateY(-20deg) rotateZ(4deg);
    animation: ha-board 12s ease-in-out infinite;
}

.ha-board__l,
.ha-board__f { position: absolute; inset: 0; border-radius: calc(var(--u) * 4); }
.ha-board__l { transform: translateZ(calc(var(--i) * var(--u) * -.8)); background: linear-gradient(90deg, #0d2252, #2d66c4 50%, #0c1f4a); }
.ha-board__f {
    background:
        linear-gradient(125deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 35%),
        linear-gradient(165deg, #24488a, #0e2050);
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 calc(var(--u) * 10) rgba(47, 128, 255, .3);
}

.ha-sheet {
    position: absolute;
    left: calc(var(--u) * 4);
    right: calc(var(--u) * 4);
    top: calc(var(--u) * 7);
    bottom: calc(var(--u) * 4);
    border-radius: calc(var(--u) * 2);
    background: linear-gradient(172deg, #f6f9ff, #dbe6f8);
    box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(4, 12, 32, .35);
}

.ha-sheet--3 { transform: translateZ(calc(var(--u) * 1)) rotateZ(-6deg) translate(calc(var(--u) * -2), calc(var(--u) * 1)); background: linear-gradient(172deg, #b9cae6, #93a8cd); }
.ha-sheet--2 { transform: translateZ(calc(var(--u) * 2)) rotateZ(3.5deg) translate(calc(var(--u) * 1.6), 0); background: linear-gradient(172deg, #d6e2f6, #b4c6e4); }

.ha-sheet--1 {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 3);
    padding: calc(var(--u) * 6) calc(var(--u) * 4) calc(var(--u) * 3.6);
    transform: translateZ(calc(var(--u) * 3));
}

.ha-sheet__title { display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); }
.ha-sheet__title i { height: calc(var(--u) * 2.2); width: 70%; border-radius: 999px; background: #17305e; }
.ha-sheet__title i:nth-child(2) { height: calc(var(--u) * 1.2); width: 46%; background: #9fb2d3; }

.ha-sheet__list { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.ha-sheet__row { display: flex; align-items: center; gap: calc(var(--u) * 1.8); }
.ha-sheet__row > i { flex: 1; height: calc(var(--u) * 1.3); border-radius: 999px; background: #b6c5df; }
.ha-sheet__row:nth-child(2) > i { flex: .7; }

.ha-sheet__box {
    display: grid;
    place-items: center;
    flex: none;
    width: calc(var(--u) * 4.4);
    height: calc(var(--u) * 4.4);
    border-radius: calc(var(--u) * 1.1);
    color: #fff;
    background: linear-gradient(135deg, #8bd346, #4f9e25);
    box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1.4) rgba(79, 158, 37, .45);
}

.ha-sheet__box svg { width: 74%; height: 74%; stroke-width: 3.4; transform-origin: 50% 50%; animation: ha-tick 6s ease-in-out infinite; animation-delay: calc(var(--k) * .5s); }

.ha-sheet__sign { position: relative; margin-top: auto; color: #2457c5; }
.ha-sheet__sign svg { display: block; width: 72%; height: auto; }
.ha-sheet__sign i { margin-top: calc(var(--u) * .4); height: 1px; width: 84%; background: #9fb2d3; }

.ha-board__clip {
    position: absolute;
    left: 50%;
    top: calc(var(--u) * -3);
    width: calc(var(--u) * 22);
    height: calc(var(--u) * 8.5);
    margin-left: calc(var(--u) * -11);
    border-radius: calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 3) calc(var(--u) * 3);
    background: linear-gradient(180deg, #e6efff, #9db4dc 55%, #6f88b6);
    box-shadow: inset 0 1px 0 #fff, 0 calc(var(--u) * 1.4) calc(var(--u) * 2.4) rgba(0, 0, 0, .45);
    transform: translateZ(calc(var(--u) * 5));
}

.ha-board__clip i {
    position: absolute;
    left: 50%;
    top: 26%;
    width: calc(var(--u) * 6);
    height: calc(var(--u) * 2.2);
    margin-left: calc(var(--u) * -3);
    border-radius: 999px;
    background: #213a6a;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
}

.ha-seal {
    position: absolute;
    right: 9%;
    top: 56%;
    width: calc(var(--u) * 21);
    height: calc(var(--u) * 21);
    transform-style: preserve-3d;
    transform: translateZ(calc(var(--u) * 26)) rotateY(-16deg);
}

.ha-seal__body { position: absolute; inset: 0; transform-style: preserve-3d; animation: ha-seal 9s ease-in-out infinite; }
.ha-seal__l,
.ha-seal__f { position: absolute; inset: 0; border-radius: 50%; }
.ha-seal__l { transform: translateZ(calc(var(--i) * var(--u) * -.9)); background: linear-gradient(90deg, #2f6f17, #8bd346 50%, #3a861c); }

.ha-seal__f {
    display: grid;
    place-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 38%),
        conic-gradient(from 0deg, #b9f27a, #6fbf35, #b9f27a, #4f9e25, #b9f27a);
    box-shadow: inset 0 0 0 calc(var(--u) * 1.4) rgba(255, 255, 255, .25), 0 0 calc(var(--u) * 6) rgba(139, 211, 70, .5);
}

.ha-seal__f svg { width: 58%; height: 58%; stroke-width: 2.1; filter: drop-shadow(0 calc(var(--u) * .4) 0 rgba(30, 80, 10, .4)); }

.ha-pen--sign { left: 54%; right: auto; top: 54%; width: calc(var(--u) * 19); height: calc(var(--u) * 19); transform: translateZ(calc(var(--u) * 16)) rotateY(-14deg); }
.ha-pen--sign .ha-ext--pen { --ext: var(--c1); }

/* 14 Default — glass monoliths -------------------------------------------- */
.ha-mono {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateY(-26deg) rotateX(8deg);
    animation: ha-mono 16s ease-in-out infinite;
}

.ha-mono__pane {
    position: absolute;
    top: 14%;
    width: 30%;
    height: 64%;
    border-radius: calc(var(--u) * 15);
    background:
        linear-gradient(120deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .02) 40%, rgba(255, 255, 255, .06) 70%, rgba(255, 255, 255, .14)),
        linear-gradient(180deg, color-mix(in srgb, var(--tint, var(--c1)) 34%, transparent), color-mix(in srgb, var(--tint, var(--c1)) 8%, transparent));
    border: 1px solid color-mix(in srgb, var(--tint, var(--c1)) 50%, rgba(255, 255, 255, .25));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 calc(var(--u) * 6) color-mix(in srgb, var(--tint, var(--c1)) 25%, transparent), 0 0 calc(var(--u) * 8) color-mix(in srgb, var(--tint, var(--c1)) 25%, transparent);
}

.ha-mono__pane--1 { --tint: var(--c1); left: 12%; transform: translateZ(calc(var(--u) * -22)); }
.ha-mono__pane--2 { --tint: var(--c2); left: 35%; transform: translateZ(0); }
.ha-mono__pane--3 { --tint: var(--c3); left: 58%; transform: translateZ(calc(var(--u) * 22)); }

.ha-mono__ball {
    position: absolute;
    left: 50%;
    top: 40%;
    width: calc(var(--u) * 22);
    height: calc(var(--u) * 22);
    margin: calc(var(--u) * -11) 0 0 calc(var(--u) * -11);
    border-radius: 50%;
    background:
        radial-gradient(circle at 31% 25%, rgba(255, 255, 255, .95) 0 3%, rgba(255, 255, 255, .35) 9%, transparent 24%),
        radial-gradient(circle at 72% 80%, rgba(139, 211, 70, .65), transparent 46%),
        radial-gradient(circle at 42% 40%, #5aa6ff 0%, #2f80ff 32%, #1b3f9a 64%, #0a1533 90%);
    box-shadow: inset calc(var(--u) * -3) calc(var(--u) * -4) calc(var(--u) * 7) rgba(3, 8, 20, .75), 0 0 calc(var(--u) * 10) rgba(47, 128, 255, .5);
    transform: translateZ(calc(var(--u) * 10));
    animation: ha-ball 10s ease-in-out infinite;
}

.ha-mono__ring {
    position: absolute;
    left: 50%;
    top: 46%;
    width: calc(var(--u) * 84);
    height: calc(var(--u) * 84);
    margin: calc(var(--u) * -42) 0 0 calc(var(--u) * -42);
    border-radius: 50%;
    border: 1.5px solid rgba(150, 200, 255, .45);
    box-shadow: 0 0 calc(var(--u) * 2) rgba(34, 199, 230, .3), inset 0 0 calc(var(--u) * 2) rgba(34, 199, 230, .2);
    transform-style: preserve-3d;
    transform: rotateX(74deg) rotateY(-8deg);
}

.ha-mono__ring i { position: absolute; inset: 0; border-radius: 50%; animation: ha-spin 12s linear infinite; }
.ha-mono__ring i::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(var(--u) * -1.3);
    width: calc(var(--u) * 2.6);
    height: calc(var(--u) * 2.6);
    margin-left: calc(var(--u) * -1.3);
    border-radius: 50%;
    background: radial-gradient(circle, #fff, var(--c2) 50%, transparent 72%);
    box-shadow: 0 0 calc(var(--u) * 2.6) var(--c2);
}

/* 15 Responsive ------------------------------------------------------------ */
@media (max-width: 960px) {
    .page-hero-inner .page-hero-art.ha-host {
        position: relative;
        inset: auto;
        z-index: 0;
        order: 0;
        justify-self: center;
        width: 100%;
        display: grid;
        place-items: center;
    }

    .page-hero-inner .page-hero-art.ha-host.is-in,
    .no-js .page-hero-inner .page-hero-art.ha-host { opacity: 1; }

    .ha { --s: min(360px, calc(100vw - 2 * var(--gutter) - 40px)); }
}

@media (min-width: 601px) and (max-width: 960px) {
    .ha-chip { font-size: 12.5px; }
}

@media (max-width: 600px) {
    .ha { --s: min(272px, calc(100vw - 48px)); }

    .ha-chip { gap: 6px; padding: 4px 10px 4px 4px; }
    .ha-chip--orbit { padding: 4px; }
    .ha-chip--orbit .ha-chip__tx { display: none; }
    .ha--detail .ha-chip--p3,
    .ha--privacy .ha-chip--p3 { display: none; }
    .ha--detail .ha-chip { max-width: min(168px, 62%); }
    .ha--detail .ha-chip--p1 { left: -4%; top: 3%; }
    .ha--detail .ha-chip--p2 { right: -4%; top: 53%; }
    .ha-chip--tag { padding: 4px; }
    .ha-chip--tag .ha-chip__tx { display: none; }
    .ha-pane__txt small { display: none; }
    .ha-pane--toggle { width: 64%; gap: 6px; padding: 7px 8px; }
    .ha-pane--note { width: 62%; gap: 6px; padding: 7px 8px; }
    .ha-pane--chart { left: 10%; width: 66%; }
    .ha--blog .ha-chip--cat { display: none; }
    .ha--contact .ha-chip--place { display: none; }
    .ha-laptop { left: 50%; }
    .ha-cal { right: 0; }
    .ha-cal__face { width: auto; min-width: calc(var(--u) * 28); padding-inline: 4px; }
    .ha-spark--3 { display: none; }
}

/* 16 Keyframes ------------------------------------------------------------- */
@keyframes ha-glow { 0%, 100% { opacity: .85; transform: translateZ(calc(var(--u) * -30)) scale(1); } 50% { opacity: 1; transform: translateZ(calc(var(--u) * -30)) scale(1.06); } }
@keyframes ha-bob { 0%, 100% { transform: translate3d(0, 0, var(--z)); } 50% { transform: translate3d(0, calc(var(--u) * -2.2), var(--z)); } }
@keyframes ha-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, calc(var(--u) * -1.8), 0); } }
@keyframes ha-twinkle { 0%, 100% { opacity: .35; transform: translateZ(calc(var(--u) * 20)) scale(.7); } 50% { opacity: 1; transform: translateZ(calc(var(--u) * 20)) translateY(calc(var(--u) * -3)) scale(1.1); } }
@keyframes ha-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes ha-spin { to { transform: rotate(360deg); } }
@keyframes ha-blink { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

@keyframes ha-medal { 0%, 100% { transform: translateY(0) rotateY(-18deg) rotateX(4deg); } 50% { transform: translateY(calc(var(--u) * -2)) rotateY(16deg) rotateX(-2deg); } }
@keyframes ha-shine { 0%, 55% { transform: translateX(-70%); } 85%, 100% { transform: translateX(70%); } }
@keyframes ha-orbit {
    from { transform: rotateZ(var(--a)) translateX(calc(var(--u) * 42)) rotateZ(calc(var(--a) * -1)) rotateX(-76deg) rotateZ(9deg); }
    to { transform: rotateZ(calc(var(--a) + 360deg)) translateX(calc(var(--u) * 42)) rotateZ(calc(var(--a) * -1 - 360deg)) rotateX(-76deg) rotateZ(9deg); }
}

@keyframes ha-sep { 0%, 100% { transform: translateZ(calc(var(--i) * var(--gap))); } 50% { transform: translateZ(calc(var(--i) * (var(--gap) + var(--u) * 2.4))); } }

@keyframes ha-ico { 0%, 100% { transform: translateY(0) rotateY(-20deg) rotateX(6deg); } 50% { transform: translateY(calc(var(--u) * -2.4)) rotateY(22deg) rotateX(2deg); } }
@keyframes ha-rise { 0% { opacity: 0; transform: translateY(0) scale(1); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(calc(var(--u) * -22)) scale(.55); } }

@keyframes ha-ui { 0%, 100% { transform: rotateY(-20deg) rotateX(9deg); } 50% { transform: rotateY(-11deg) rotateX(5deg); } }
@keyframes ha-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.72); } }
@keyframes ha-switch { 0%, 42% { transform: translateX(calc(var(--u) * 4.4)); } 50%, 92% { transform: translateX(0); } 100% { transform: translateX(calc(var(--u) * 4.4)); } }
@keyframes ha-switch-bg { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ha-note { 0%, 100% { transform: translateZ(calc(var(--u) * 44)) translateY(0); } 50% { transform: translateZ(calc(var(--u) * 44)) translateY(calc(var(--u) * -2)); } }
@keyframes ha-ring-bell { 0%, 60%, 100% { transform: rotate(0); } 66% { transform: rotate(14deg); } 74% { transform: rotate(-12deg); } 82% { transform: rotate(8deg); } 90% { transform: rotate(-4deg); } }

@keyframes ha-blk { 0%, 100% { transform: translateZ(0); } 50% { transform: translateZ(calc(var(--u) * 2.2)); } }
@keyframes ha-badge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u) * -1.4)); } }
@keyframes ha-run-x { from { transform: translateX(calc(var(--u) * -4)); } to { transform: translateX(calc(var(--u) * 66)); } }
@keyframes ha-run-y { from { transform: translateY(calc(var(--u) * -4)); } to { transform: translateY(calc(var(--u) * 66)); } }

@keyframes ha-gyro { 0%, 100% { transform: rotateY(-14deg) rotateX(0deg); } 50% { transform: rotateY(12deg) rotateX(6deg); } }
@keyframes ha-spoke { from { transform: rotateZ(var(--a)); } to { transform: rotateZ(calc(var(--a) + 360deg)); } }
@keyframes ha-node {
    from { transform: rotateZ(var(--a)) translateX(var(--r)) rotateZ(calc(var(--a) * -1)) rotateX(-72deg) rotateZ(calc(var(--th) * -1)); }
    to { transform: rotateZ(calc(var(--a) + 360deg)) translateX(var(--r)) rotateZ(calc(var(--a) * -1 - 360deg)) rotateX(-72deg) rotateZ(calc(var(--th) * -1)); }
}
@keyframes ha-run-spoke { 0% { transform: translateX(calc(var(--r) * .9)); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(calc(var(--r) * .2)); opacity: 0; } }
@keyframes ha-cube { from { transform: rotateX(-22deg) rotateY(30deg); } to { transform: rotateX(-22deg) rotateY(390deg); } }

@keyframes ha-fan { 0%, 100% { transform: translateZ(var(--tz)) translateX(var(--tx)) rotateZ(var(--rz)); } 50% { transform: translateZ(var(--tz)) translateX(var(--tx)) rotateZ(var(--rz2)); } }
@keyframes ha-pen { 0%, 100% { transform: translate3d(0, 0, 0) rotateZ(0deg); } 50% { transform: translate3d(calc(var(--u) * -1.4), calc(var(--u) * 1.6), 0) rotateZ(-8deg); } }

@keyframes ha-radar { 0% { opacity: 0; transform: translateZ(1px) scale(.15); } 12% { opacity: 1; } 100% { opacity: 0; transform: translateZ(1px) scale(1); } }
@keyframes ha-spot { 0%, 100% { transform: translateZ(1px) scale(1); opacity: 1; } 50% { transform: translateZ(1px) scale(.75); opacity: .7; } }
@keyframes ha-pin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u) * -3)); } }
@keyframes ha-pin-turn { 0%, 100% { transform: rotateY(-24deg); } 50% { transform: rotateY(24deg); } }
@keyframes ha-route { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

@keyframes ha-laptop { 0%, 100% { transform: rotateX(-20deg) rotateY(-24deg); } 50% { transform: rotateX(-17deg) rotateY(-14deg); } }
@keyframes ha-ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes ha-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

@keyframes ha-talk { 0%, 100% { transform: translate3d(0, 0, 0) rotateY(0deg); } 50% { transform: translate3d(0, calc(var(--u) * -2.2), calc(var(--u) * 4)) rotateY(-10deg); } }
@keyframes ha-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .6; } 30% { transform: translateY(-45%); opacity: 1; } }

@keyframes ha-shield { 0%, 100% { transform: translateY(0) rotateY(-20deg); } 50% { transform: translateY(calc(var(--u) * -1.8)) rotateY(16deg); } }
@keyframes ha-scan { 0% { transform: translateY(0); } 60%, 100% { transform: translateY(560%); } }

@keyframes ha-board { 0%, 100% { transform: rotateX(14deg) rotateY(-20deg) rotateZ(4deg); } 50% { transform: rotateX(10deg) rotateY(-10deg) rotateZ(2deg) translateY(calc(var(--u) * -1.5)); } }
@keyframes ha-tick { 0%, 6% { transform: scale(0); } 12% { transform: scale(1.25); } 18%, 88% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@keyframes ha-seal { 0%, 100% { transform: rotateY(-14deg) translateY(0); } 50% { transform: rotateY(18deg) translateY(calc(var(--u) * -1.6)); } }

@keyframes ha-mono { 0%, 100% { transform: rotateY(-26deg) rotateX(8deg); } 50% { transform: rotateY(-12deg) rotateX(4deg); } }
@keyframes ha-ball { 0%, 100% { transform: translate3d(0, 0, calc(var(--u) * 10)); } 33% { transform: translate3d(calc(var(--u) * -14), calc(var(--u) * 6), calc(var(--u) * -14)); } 66% { transform: translate3d(calc(var(--u) * 12), calc(var(--u) * -4), calc(var(--u) * 26)); } }

/* 17 Motion preferences ----------------------------------------------------- */
.ha-off,
.ha-off *,
.ha-off *::before,
.ha-off *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
    .ha,
    .ha *,
    .ha *::before,
    .ha *::after { animation: none !important; }

    .ha-rise i, .ha-play i { opacity: 0 !important; }
    .ha-map__pulse i { opacity: .5 !important; transform: translateZ(1px) scale(.6) !important; }
    .ha-map__pulse i:nth-child(n + 2) { display: none !important; }
    .ha-ring__spoke i { opacity: 0 !important; }
}