/*
FreeFlow Cloud - Baota PHP Deploy Styles
设计原则：深色底、冰蓝青高亮、半透明科技面板、切角结构、云网络控制台质感。
保持本地 CSS 独立，便于在宝塔面板中直接部署和维护。
*/
@font-face {
    font-family: "FreeFlow Sans";
    src: url("./fonts/NotoSansCJKsc-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "FreeFlow Sans";
    src: url("./fonts/NotoSansCJKsc-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "FreeFlow Sans";
    src: url("./fonts/NotoSansCJKsc-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "FreeFlow Display";
    src: url("./fonts/LiberationSansNarrow-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #050b16;
    --bg-2: #08101f;
    --panel: rgba(10, 18, 36, 0.84);
    --panel-strong: rgba(7, 13, 28, 0.94);
    --line: rgba(125, 211, 252, 0.16);
    --line-strong: rgba(125, 211, 252, 0.28);
    --text: #e7eefc;
    --muted: #98a9c4;
    --cyan: #79efff;
    --cyan-2: #35d7ff;
    --cyan-3: #a3f4ff;
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
    --shadow-soft: 0 16px 48px rgba(5, 16, 36, 0.5);
    --max: 1280px;
    --font-sans: "FreeFlow Sans", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Segoe UI", sans-serif;
    --font-display: "FreeFlow Display", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    min-height: 100%;
    background-color: var(--bg);
    overflow-x: hidden;
}

body {
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
    font-family: var(--font-sans);
    color: var(--text);
    background-color: var(--bg);
    background:
        radial-gradient(circle at 12% 10%, rgba(34, 211, 238, 0.14), transparent 24%),
        radial-gradient(circle at 86% 8%, rgba(56, 189, 248, 0.1), transparent 22%),
        linear-gradient(180deg, #07101f 0%, #050b16 52%, #040912 100%);
    line-height: 1.7;
    overscroll-behavior-y: auto;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroDrift {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes imageFloat {
    0%,
    100% {
        transform: scale(1.08) translate3d(0, 0, 0);
    }
    50% {
        transform: scale(1.12) translate3d(0, -8px, 0);
    }
}

@keyframes pulseGlow {
    0%,
    100% {
        box-shadow: 0 0 0 rgba(34, 211, 238, 0), 0 0 24px rgba(34, 211, 238, 0.08);
    }
    50% {
        box-shadow: 0 0 0 rgba(34, 211, 238, 0), 0 0 36px rgba(34, 211, 238, 0.16);
    }
}

@keyframes ambientPulse {
    0%,
    100% {
        opacity: 0.46;
        transform: scale(1) translate3d(0, 0, 0);
    }
    50% {
        opacity: 0.66;
        transform: scale(1.04) translate3d(0, -10px, 0);
    }
}

@keyframes gridDrift {
    0% {
        background-position: 0 0, 0 0;
        opacity: 0.46;
    }
    50% {
        background-position: -12px 8px, -12px 8px;
        opacity: 0.54;
    }
    100% {
        background-position: -24px 16px, -24px 16px;
        opacity: 0.46;
    }
}

@keyframes scanSweep {
    0% {
        background-position: -160% 0;
        opacity: 0.06;
    }
    35% {
        opacity: 0.18;
    }
    50% {
        opacity: 0.24;
    }
    100% {
        background-position: 160% 0;
        opacity: 0.06;
    }
}

@keyframes techLinesFlow {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }
    100% {
        background-position: 320px 140px, -240px 0, 180px 0;
    }
}

@keyframes linePulse {
    0%,
    100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.48;
    }
}

@keyframes lineStream {
    0% {
        background-position: 0 0, 0 0, 0 0;
        transform: translate3d(0, 0, 0);
    }
    50% {
        background-position: 138px 6px, -96px 0, 72px 0;
        transform: translate3d(-2px, 1px, 0);
    }
    100% {
        background-position: 276px 12px, -192px 0, 144px 0;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes lineDriftAlt {
    0% {
        background-position: 0 0, 0 0, 0 0;
        transform: translate3d(0, 0, 0);
    }
    50% {
        background-position: -118px 0, 78px 6px, -48px 0;
        transform: translate3d(2px, -1px, 0);
    }
    100% {
        background-position: -236px 0, 156px 10px, -96px 0;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes lineFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(2px, -2px, 0) scale(1.004);
    }
}

@keyframes lineWarp {
    0%,
    100% {
        transform: translate3d(0, 0, 0) skewX(0deg) skewY(0deg);
        opacity: 0.16;
    }
    50% {
        transform: translate3d(2px, -2px, 0) skewX(0.4deg) skewY(-0.2deg);
        opacity: 0.24;
    }
}

@keyframes lineTiltDrift {
    0% {
        background-position: 0 0, 0 0;
    }
    21% {
        background-position: 44px -8px, -28px 0;
    }
    53% {
        background-position: 112px 10px, -86px 0;
    }
    79% {
        background-position: 164px -6px, -132px 0;
    }
    100% {
        background-position: 218px 4px, -176px 0;
    }
}

@keyframes lineScatter {
    0% {
        background-position: 0 0, 0 0;
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    50% {
        background-position: 128px 4px, -92px 0;
        transform: translate3d(2px, -1px, 0) rotate(0.06deg);
    }
    100% {
        background-position: 256px 0, -184px 0;
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

@keyframes nodeBlink {
    0%,
    100% {
        opacity: 0.12;
    }
    13% {
        opacity: 0.26;
    }
    37% {
        opacity: 0.08;
    }
    66% {
        opacity: 0.22;
    }
    81% {
        opacity: 0.16;
    }
}

@keyframes heroLineFlux {
    0% {
        background-position: 0 0, 0 0;
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.18;
    }
    50% {
        background-position: 132px 6px, -96px 0;
        transform: translate3d(2px, -1px, 0) scale(1.003);
        opacity: 0.26;
    }
    100% {
        background-position: 264px 10px, -192px 0;
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.18;
    }
}

@keyframes heroNodePulse {
    0%,
    100% {
        opacity: 0.1;
        transform: translate3d(0, 0, 0);
    }
    19% {
        opacity: 0.24;
        transform: translate3d(3px, -2px, 0);
    }
    48% {
        opacity: 0.08;
        transform: translate3d(-2px, 2px, 0);
    }
    71% {
        opacity: 0.2;
        transform: translate3d(2px, 1px, 0);
    }
}

@keyframes traceTravel {
    0% {
        transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)) scaleX(0.92);
        opacity: 0.16;
    }
    18% {
        opacity: 0.34;
    }
    46% {
        transform: translate3d(18px, -8px, 0) rotate(calc(var(--rot, 0deg) + 1.2deg)) scaleX(1);
        opacity: 0.24;
    }
    74% {
        transform: translate3d(-12px, 6px, 0) rotate(calc(var(--rot, 0deg) - 0.9deg)) scaleX(1.05);
        opacity: 0.3;
    }
    100% {
        transform: translate3d(8px, -4px, 0) rotate(var(--rot, 0deg)) scaleX(0.96);
        opacity: 0.16;
    }
}

@keyframes traceBlink {
    0%,
    100% {
        filter: drop-shadow(0 0 8px rgba(121, 239, 255, 0.26));
    }
    29% {
        filter: drop-shadow(0 0 12px rgba(121, 239, 255, 0.5));
    }
    63% {
        filter: drop-shadow(0 0 18px rgba(121, 239, 255, 0.64));
    }
}

@keyframes traceNodeDrift {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(0.9);
        opacity: 0.16;
    }
    24% {
        transform: translate3d(3px, -4px, 0) scale(1.15);
        opacity: 0.34;
    }
    57% {
        transform: translate3d(-4px, 3px, 0) scale(0.82);
        opacity: 0.14;
    }
    81% {
        transform: translate3d(2px, -2px, 0) scale(1.02);
        opacity: 0.26;
    }
}

@keyframes panelVeinFlow {
    0% {
        transform: translate3d(-4%, 0, 0) rotate(var(--vein-rot, 0deg)) scaleX(0.98);
        opacity: 0.16;
    }
    50% {
        transform: translate3d(3%, -1%, 0) rotate(calc(var(--vein-rot, 0deg) + 0.5deg)) scaleX(1.01);
        opacity: 0.34;
    }
    100% {
        transform: translate3d(2%, 0, 0) rotate(var(--vein-rot, 0deg)) scaleX(0.99);
        opacity: 0.16;
    }
}

@keyframes panelVeinSweep {
    0% {
        transform: translate3d(-10%, 0, 0) rotate(var(--sweep-rot, 0deg));
        opacity: 0;
    }
    35% {
        opacity: 0.14;
    }
    60% {
        opacity: 0.26;
    }
    100% {
        transform: translate3d(12%, 0, 0) rotate(var(--sweep-rot, 0deg));
        opacity: 0;
    }
}

@keyframes panelNetworkDrift {
    0% {
        background-position: 0% 0%, 100% 62%;
    }
    50% {
        background-position: 4% -2%, 96% 58%;
    }
    100% {
        background-position: 8% 1%, 92% 64%;
    }
}

@keyframes panelNetworkGlow {
    0%,
    100% {
        opacity: 0.46;
    }
    34% {
        opacity: 0.66;
    }
    68% {
        opacity: 0.54;
    }
}

@keyframes glowOrbit {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(10px, -16px, 0) scale(1.06);
    }
}

@keyframes fieldBreath {
    0%,
    100% {
        opacity: 0.18;
    }
    50% {
        opacity: 0.28;
    }
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

.page-shell {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(180deg, #07101f 0%, #050b16 52%, #040912 100%);
    isolation: isolate;
}

.page-shell::before,
.page-shell::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.page-shell::before {
    background:
        radial-gradient(circle at 18% 22%, rgba(121, 239, 255, 0.08), transparent 18%),
        radial-gradient(circle at 82% 18%, rgba(0, 174, 255, 0.08), transparent 16%),
        radial-gradient(circle at 72% 72%, rgba(24, 144, 255, 0.06), transparent 18%);
    animation: glowOrbit 48s ease-in-out infinite;
}

.page-shell::after {
    inset: -10% -8%;
    background:
        linear-gradient(110deg, transparent 18%, rgba(121, 239, 255, 0.045) 48%, transparent 78%),
        linear-gradient(90deg, transparent 0%, rgba(121, 239, 255, 0.035) 50%, transparent 100%);
    background-size: 180% 100%, 220% 100%;
    mix-blend-mode: screen;
    opacity: 0.16;
    animation: scanSweep 30s linear infinite;
}

.ambient,
.grid-overlay,
.line-overlay,
.noise-overlay {
    pointer-events: none;
    position: fixed;
    inset: 0;
}

.ambient-a {
    background: radial-gradient(circle at 15% 25%, rgba(34, 211, 238, 0.12), transparent 22%);
    animation: ambientPulse 28s ease-in-out infinite;
}

.ambient-b {
    background: radial-gradient(circle at 78% 20%, rgba(14, 165, 233, 0.1), transparent 20%);
    animation: ambientPulse 32s ease-in-out infinite reverse;
}

.grid-overlay {
    background-image:
        linear-gradient(rgba(125, 211, 252, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, 0.09) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.72) 72%, transparent 98%);
    opacity: 0.84;
    animation: gridDrift 32s linear infinite;
}

.grid-overlay::before,
.grid-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.grid-overlay::before {
    background:
        repeating-linear-gradient(118deg, rgba(121, 239, 255, 0) 0 16px, rgba(121, 239, 255, 0.16) 16px 18px, rgba(121, 239, 255, 0) 18px 48px),
        repeating-linear-gradient(90deg, rgba(121, 239, 255, 0) 0 68px, rgba(121, 239, 255, 0.1) 68px 70px, rgba(121, 239, 255, 0) 70px 126px),
        repeating-linear-gradient(0deg, rgba(56, 189, 248, 0) 0 52px, rgba(56, 189, 248, 0.08) 52px 54px, rgba(56, 189, 248, 0) 54px 108px);
    opacity: 0.46;
    mix-blend-mode: screen;
    animation: techLinesFlow 34s linear infinite, linePulse 14s ease-in-out infinite;
}

.grid-overlay::after {
    background:
        linear-gradient(90deg, transparent 0%, rgba(121, 239, 255, 0.04) 24%, rgba(121, 239, 255, 0.34) 50%, rgba(121, 239, 255, 0.04) 76%, transparent 100%),
        linear-gradient(118deg, transparent 0%, rgba(14, 165, 233, 0.18) 48%, transparent 64%);
    background-size: 180% 100%, 220% 100%;
    opacity: 0.38;
    mix-blend-mode: screen;
    animation: scanSweep 24s linear infinite;
}

.line-overlay {
    z-index: 0;
    mix-blend-mode: screen;
    will-change: transform, opacity, background-position;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.line-overlay::before,
.line-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.line-overlay-a {
    background:
        repeating-linear-gradient(116deg, rgba(121, 239, 255, 0) 0 18px, rgba(121, 239, 255, 0.14) 18px 20px, rgba(121, 239, 255, 0) 20px 54px),
        repeating-linear-gradient(84deg, rgba(56, 189, 248, 0) 0 74px, rgba(56, 189, 248, 0.08) 74px 76px, rgba(56, 189, 248, 0) 76px 138px),
        linear-gradient(90deg, transparent 0%, rgba(121, 239, 255, 0.05) 24%, rgba(121, 239, 255, 0.24) 50%, rgba(121, 239, 255, 0.05) 76%, transparent 100%);
    background-size: 158% 100%, 136% 100%, 220% 100%;
    opacity: 0.28;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.52) 76%, transparent 100%);
    animation: lineStream 24s linear infinite, scanSweep 20s linear infinite, lineFloat 28s ease-in-out infinite;
}

.line-overlay-a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 420' fill='none'%3E%3Cg stroke='%2379efff' stroke-opacity='.28' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M-24 86L82 44L166 92L282 34L396 82L482 26L606 96L722 38L842 90L962 30L1088 84L1236 42'/%3E%3Cpath d='M28 194L144 142L236 182L318 128L434 174L548 116L662 170L780 132L892 180L1020 120L1188 170'/%3E%3Cpath d='M-12 306L124 248L242 300L352 226L470 284L596 214L716 272L846 232L986 290L1132 238L1232 276'/%3E%3C/g%3E%3Cg fill='%2379efff' fill-opacity='.22'%3E%3Ccircle cx='82' cy='44' r='2.2'/%3E%3Ccircle cx='282' cy='34' r='1.9'/%3E%3Ccircle cx='606' cy='96' r='2.1'/%3E%3Ccircle cx='962' cy='30' r='1.8'/%3E%3Ccircle cx='236' cy='182' r='1.7'/%3E%3Ccircle cx='662' cy='170' r='2'/%3E%3Ccircle cx='986' cy='290' r='1.9'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 126% 100%;
    opacity: 0.24;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.44) 70%, transparent 100%);
    animation: lineTiltDrift 28s linear infinite, lineWarp 18s ease-in-out infinite;
}

.line-overlay-a::after {
    background: linear-gradient(102deg, transparent 0%, rgba(125, 211, 252, 0.02) 34%, rgba(125, 211, 252, 0.16) 49%, rgba(125, 211, 252, 0.02) 63%, transparent 100%);
    background-size: 210% 100%;
    opacity: 0.16;
    animation: scanSweep 22s linear infinite reverse, lineWarp 15s ease-in-out infinite reverse;
}

.line-overlay-b {
    background:
        repeating-linear-gradient(92deg, rgba(56, 189, 248, 0) 0 88px, rgba(56, 189, 248, 0.11) 88px 90px, rgba(56, 189, 248, 0) 90px 162px),
        repeating-linear-gradient(126deg, rgba(14, 165, 233, 0) 0 30px, rgba(14, 165, 233, 0.12) 30px 32px, rgba(14, 165, 233, 0) 32px 78px),
        linear-gradient(118deg, transparent 0%, rgba(14, 165, 233, 0.08) 42%, rgba(34, 211, 238, 0.2) 52%, rgba(14, 165, 233, 0.08) 62%, transparent 100%);
    background-size: 124% 100%, 144% 100%, 220% 100%;
    opacity: 0.21;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.42) 68%, transparent 100%);
    animation: lineDriftAlt 30s linear infinite, scanSweep 24s linear infinite reverse, lineFloat 32s ease-in-out infinite reverse;
}

.line-overlay-b::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 420' fill='none'%3E%3Cg stroke='%2338bdf8' stroke-opacity='.22' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M-10 58L114 102L206 64L328 118L438 76L552 132L666 84L792 144L904 92L1028 148L1218 98'/%3E%3Cpath d='M26 254L118 208L244 262L352 214L482 276L612 224L736 288L862 236L994 294L1138 242L1230 282'/%3E%3Cpath d='M84 8L146 86L214 40L286 122L378 54L454 140L538 66L628 154L720 78L812 164L914 84L1002 178L1106 96'/%3E%3C/g%3E%3Cg fill='%2338bdf8' fill-opacity='.18'%3E%3Ccircle cx='206' cy='64' r='1.7'/%3E%3Ccircle cx='438' cy='76' r='1.8'/%3E%3Ccircle cx='792' cy='144' r='1.6'/%3E%3Ccircle cx='352' cy='214' r='1.7'/%3E%3Ccircle cx='736' cy='288' r='1.9'/%3E%3Ccircle cx='1002' cy='178' r='1.7'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 138% 100%;
    opacity: 0.2;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.36) 66%, transparent 100%);
    animation: lineStream 34s linear infinite reverse, lineWarp 20s ease-in-out infinite;
}

.line-overlay-b::after {
    background: linear-gradient(118deg, transparent 0%, rgba(14, 165, 233, 0.02) 36%, rgba(34, 211, 238, 0.14) 50%, rgba(14, 165, 233, 0.02) 66%, transparent 100%);
    background-size: 240% 100%;
    opacity: 0.14;
    animation: scanSweep 28s linear infinite, lineWarp 16s ease-in-out infinite reverse;
}

.line-overlay-c {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 520' fill='none'%3E%3Cg stroke='%2390f7ff' stroke-opacity='.18' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M-40 132C54 82 128 208 232 158C318 118 392 52 486 104C564 148 636 228 740 186C844 144 904 70 994 110C1080 148 1168 214 1264 164C1328 130 1372 96 1440 120'/%3E%3Cpath d='M-16 318C102 274 164 382 278 338C386 296 438 208 540 250C632 288 710 392 826 354C930 320 988 226 1088 264C1190 300 1280 388 1416 334'/%3E%3C/g%3E%3Cg fill='%2390f7ff' fill-opacity='.22'%3E%3Ccircle cx='232' cy='158' r='2.1'/%3E%3Ccircle cx='486' cy='104' r='1.8'/%3E%3Ccircle cx='740' cy='186' r='2.2'/%3E%3Ccircle cx='994' cy='110' r='1.8'/%3E%3Ccircle cx='278' cy='338' r='1.9'/%3E%3Ccircle cx='540' cy='250' r='1.7'/%3E%3Ccircle cx='826' cy='354' r='2'/%3E%3Ccircle cx='1088' cy='264' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 132% 100%;
    opacity: 0.16;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.34) 66%, transparent 100%);
    animation: lineScatter 36s linear infinite, lineWarp 22s ease-in-out infinite reverse;
}

.line-overlay-c::before {
    background:
        radial-gradient(circle at 18% 32%, rgba(144, 247, 255, 0.22) 0 2px, transparent 3px),
        radial-gradient(circle at 42% 18%, rgba(144, 247, 255, 0.18) 0 1.8px, transparent 3px),
        radial-gradient(circle at 68% 38%, rgba(144, 247, 255, 0.2) 0 2px, transparent 3px),
        radial-gradient(circle at 84% 24%, rgba(144, 247, 255, 0.16) 0 1.8px, transparent 3px);
    opacity: 0.14;
    animation: nodeBlink 12s ease-in-out infinite, lineFloat 24s ease-in-out infinite;
}

.line-overlay-c::after {
    background: linear-gradient(108deg, transparent 0%, rgba(144, 247, 255, 0.02) 34%, rgba(144, 247, 255, 0.12) 52%, rgba(144, 247, 255, 0.02) 70%, transparent 100%);
    background-size: 250% 100%;
    opacity: 0.1;
    animation: scanSweep 30s linear infinite reverse;
}

.noise-overlay {
    opacity: 0.22;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    animation: fieldBreath 18s ease-in-out infinite;
}

.container {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
    z-index: 2;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(3, 8, 20, 0.72);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.brand-mark {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #c9fdff;
    background:
        radial-gradient(circle at 50% 32%, rgba(186, 251, 255, 0.22), rgba(53, 215, 255, 0.12) 48%, rgba(6, 182, 212, 0.08) 64%, transparent 68%),
        linear-gradient(180deg, rgba(24, 38, 67, 0.9), rgba(5, 12, 28, 0.96));
    border: 1px solid rgba(125, 211, 252, 0.34);
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.2), inset 0 0 18px rgba(121, 239, 255, 0.08);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.brand-mark .inline-icon {
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 0 10px rgba(121, 239, 255, 0.22));
}

.brand-mark .inline-icon path:first-child {
    fill: rgba(163, 244, 255, 0.12);
    stroke: rgba(163, 244, 255, 0.95);
    stroke-width: 1.9;
}

.brand-copy {
    display: flex;
    flex-direction: column;
}

.brand-copy strong,
.site-footer strong {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: #ffffff;
}

.brand-copy em {
    font-style: normal;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #91a5c5;
    margin-top: 3px;
}

.site-nav {
    display: inline-flex;
    align-items: center;
    gap: 28px;
}

.site-nav a,
.footer-links a {
    color: #c6d2e7;
    font-size: 0.95rem;
}

.site-nav a:hover,
.footer-links a:hover {
    color: var(--cyan);
}

.nav-cta,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    font-weight: 600;
    transition: all 220ms ease;
}

.nav-cta,
.btn-primary {
    border: 1px solid rgba(121, 239, 255, 0.3);
    background: linear-gradient(180deg, rgba(121, 239, 255, 0.92), rgba(53, 215, 255, 0.88));
    color: #04111f;
    box-shadow: 0 0 32px rgba(34, 211, 238, 0.16);
}

.nav-cta:hover,
.btn-primary:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, rgba(163, 244, 255, 0.95), rgba(103, 232, 249, 0.9));
}

.btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.hero-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-top: 44px;
    padding-bottom: 36px;
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 18px 0 auto;
    height: 280px;
    pointer-events: none;
    background:
        radial-gradient(circle at 28% 50%, rgba(121, 239, 255, 0.08), transparent 26%),
        linear-gradient(90deg, transparent, rgba(121, 239, 255, 0.08), transparent);
    filter: blur(16px);
    opacity: 0.82;
    animation: scanSweep 14s linear infinite;
}

.hero-random-lines {
    position: absolute;
    inset: 10px 0 auto;
    height: 460px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.hero-random-lines .trace,
.hero-random-lines .trace-node {
    position: absolute;
    display: block;
}

.hero-random-lines .trace {
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0%, rgba(121, 239, 255, 0.08) 12%, rgba(121, 239, 255, 0.78) 46%, rgba(163, 244, 255, 1) 52%, rgba(121, 239, 255, 0.36) 72%, transparent 100%);
    mix-blend-mode: screen;
    opacity: 0.24;
    filter: drop-shadow(0 0 8px rgba(121, 239, 255, 0.32));
    transform-origin: left center;
    animation: traceTravel 18s linear infinite, traceBlink 7.2s ease-in-out infinite;
}

.hero-random-lines .trace-1 { width: 26%; top: 84px; left: -2%; --rot: 11deg; animation-duration: 17.2s, 6.4s; }
.hero-random-lines .trace-2 { width: 18%; top: 126px; left: 14%; --rot: -7deg; animation-duration: 21.4s, 7.8s; animation-delay: -6s, -2s; }
.hero-random-lines .trace-3 { width: 24%; top: 162px; right: 8%; --rot: -15deg; animation-duration: 19.8s, 8.1s; animation-delay: -11s, -3.5s; }
.hero-random-lines .trace-4 { width: 16%; top: 214px; left: 36%; --rot: 18deg; animation-duration: 14.6s, 5.8s; animation-delay: -4.5s, -1.4s; }
.hero-random-lines .trace-5 { width: 22%; top: 248px; right: -2%; --rot: -10deg; animation-duration: 23.6s, 9.2s; animation-delay: -12.2s, -4.6s; }
.hero-random-lines .trace-6 { width: 14%; top: 292px; left: 4%; --rot: 8deg; animation-duration: 16.3s, 6.9s; animation-delay: -2.8s, -1s; }
.hero-random-lines .trace-7 { width: 20%; top: 334px; left: 46%; --rot: -13deg; animation-duration: 20.7s, 8.6s; animation-delay: -9.6s, -3.8s; }
.hero-random-lines .trace-8 { width: 28%; top: 378px; right: 14%; --rot: 6deg; animation-duration: 18.8s, 7.4s; animation-delay: -7.1s, -2.7s; }

.hero-random-lines .trace-node {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(163, 244, 255, 0.92);
    box-shadow: 0 0 0 1px rgba(121, 239, 255, 0.18), 0 0 16px rgba(121, 239, 255, 0.55);
    mix-blend-mode: screen;
    animation: traceNodeDrift 8.4s ease-in-out infinite, nodeBlink 6.8s ease-in-out infinite;
}

.hero-random-lines .node-1 { top: 102px; left: 18%; animation-duration: 8.6s, 6.2s; }
.hero-random-lines .node-2 { top: 144px; left: 58%; animation-duration: 10.4s, 7.8s; animation-delay: -2.4s, -1.1s; }
.hero-random-lines .node-3 { top: 206px; left: 72%; animation-duration: 7.8s, 5.9s; animation-delay: -4.1s, -2.4s; }
.hero-random-lines .node-4 { top: 264px; left: 42%; animation-duration: 9.7s, 7.2s; animation-delay: -5.2s, -3.6s; }
.hero-random-lines .node-5 { top: 312px; left: 12%; animation-duration: 8.1s, 6.5s; animation-delay: -1.7s, -0.8s; }
.hero-random-lines .node-6 { top: 362px; left: 82%; animation-duration: 11.2s, 8.6s; animation-delay: -6.8s, -2.9s; }

.panel-random-lines {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 560' fill='none'%3E%3Cg stroke='%2397f9ff' stroke-opacity='.4' stroke-width='1.55' stroke-linecap='round'%3E%3Cpath d='M-40 118C84 168 132 34 250 78C370 122 430 206 556 170C662 140 732 52 994 102'/%3E%3Cpath d='M42 322C166 278 246 384 370 346C488 310 556 220 664 256C780 294 854 400 984 366'/%3E%3Cpath d='M118 18L202 104L298 66L386 150L486 98L592 188L714 126L832 232L958 176'/%3E%3C/g%3E%3Cg fill='%23d7ffff' fill-opacity='.42'%3E%3Ccircle cx='250' cy='78' r='2.6'/%3E%3Ccircle cx='556' cy='170' r='2.2'/%3E%3Ccircle cx='664' cy='256' r='2.4'/%3E%3Ccircle cx='832' cy='232' r='2.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 132% 118% no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 560' fill='none'%3E%3Cg stroke='%2379efff' stroke-opacity='.28' stroke-width='1.15' stroke-linecap='round'%3E%3Cpath d='M-60 212C54 188 114 282 236 244C350 208 410 120 514 156C622 194 714 292 832 250C912 222 978 166 1040 186'/%3E%3Cpath d='M64 458C178 422 248 508 352 482C462 454 522 376 626 406C732 438 816 516 946 486'/%3E%3C/g%3E%3Cg fill='%238cf7ff' fill-opacity='.32'%3E%3Ccircle cx='236' cy='244' r='2.2'/%3E%3Ccircle cx='514' cy='156' r='2'/%3E%3Ccircle cx='832' cy='250' r='2.2'/%3E%3Ccircle cx='626' cy='406' r='2.1'/%3E%3C/g%3E%3C/svg%3E") 100% 62% / 144% 126% no-repeat;
    animation: panelNetworkDrift 24s linear infinite alternate, panelNetworkGlow 9.2s ease-in-out infinite;
}

.panel-random-lines::before,
.panel-random-lines::after {
    content: "";
    position: absolute;
    inset: auto -10% auto -10%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0%, rgba(121, 239, 255, 0) 8%, rgba(121, 239, 255, 0.18) 24%, rgba(171, 246, 255, 0.72) 50%, rgba(121, 239, 255, 0.16) 76%, rgba(121, 239, 255, 0) 100%);
    filter: drop-shadow(0 0 10px rgba(121, 239, 255, 0.22));
    opacity: 0.28;
}

.panel-random-lines::before {
    top: 28%;
    --sweep-rot: 12deg;
    animation: panelVeinSweep 11.8s linear infinite;
}

.panel-random-lines::after {
    top: 66%;
    --sweep-rot: -9deg;
    animation: panelVeinSweep 15.2s linear infinite reverse;
}

.panel-random-lines .trace,
.panel-random-lines .trace-node {
    position: absolute;
    display: block;
}

.panel-random-lines .trace {
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0%, rgba(121, 239, 255, 0.04) 8%, rgba(121, 239, 255, 0.18) 26%, rgba(121, 239, 255, 0.72) 48%, rgba(173, 247, 255, 0.76) 52%, rgba(121, 239, 255, 0.24) 76%, transparent 100%);
    opacity: 0.48;
    filter: drop-shadow(0 0 8px rgba(121, 239, 255, 0.26));
    transform-origin: left center;
    animation: panelVeinFlow 17.5s linear infinite, traceBlink 6.8s ease-in-out infinite;
}

.panel-random-lines .trace-node {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(196, 250, 255, 0.92);
    box-shadow: 0 0 0 1px rgba(121, 239, 255, 0.14), 0 0 10px rgba(121, 239, 255, 0.26);
    animation: traceNodeDrift 8.6s ease-in-out infinite, nodeBlink 7.2s ease-in-out infinite;
}

.panel-random-lines-left .trace-a { width: 46%; top: 96px; left: -2%; --vein-rot: 10deg; animation-duration: 13.8s, 5.2s; }
.panel-random-lines-left .trace-b { width: 32%; top: 182px; left: 28%; --vein-rot: -13deg; animation-duration: 16.7s, 6.6s; animation-delay: -4.2s, -1.2s; }
.panel-random-lines-left .trace-c { width: 38%; top: 274px; left: 6%; --vein-rot: 16deg; animation-duration: 12.9s, 5.8s; animation-delay: -6.1s, -2.7s; }
.panel-random-lines-left .trace-d { width: 28%; top: 350px; right: 4%; --vein-rot: -11deg; animation-duration: 17.4s, 7.1s; animation-delay: -9.3s, -3.1s; }
.panel-random-lines-left .node-a { top: 124px; left: 36%; animation-delay: -1.4s, -0.7s; }
.panel-random-lines-left .node-b { top: 228px; left: 70%; animation-delay: -3.2s, -2.2s; }
.panel-random-lines-left .node-c { top: 334px; left: 20%; animation-delay: -5.4s, -1.6s; }

.panel-random-lines-right .trace-a { width: 54%; top: 128px; right: -6%; --vein-rot: -14deg; animation-duration: 15.6s, 5.6s; }
.panel-random-lines-right .trace-b { width: 40%; top: 216px; left: 2%; --vein-rot: 11deg; animation-duration: 13.2s, 5.1s; animation-delay: -3.8s, -1.4s; }
.panel-random-lines-right .trace-c { width: 34%; top: 300px; right: 12%; --vein-rot: -7deg; animation-duration: 17.8s, 6.8s; animation-delay: -8.4s, -2.8s; }
.panel-random-lines-right .trace-d { width: 30%; top: 378px; left: 14%; --vein-rot: 17deg; animation-duration: 12.8s, 5.4s; animation-delay: -6.7s, -3.4s; }
.panel-random-lines-right .node-a { top: 160px; left: 24%; animation-delay: -2.4s, -1.1s; }
.panel-random-lines-right .node-b { top: 268px; left: 74%; animation-delay: -4.7s, -2.6s; }
.panel-random-lines-right .node-c { top: 358px; left: 42%; animation-delay: -6.3s, -3.8s; }

.hero-grid,
.split-grid {
    display: grid;
    gap: 32px;
}

.hero-grid {
    position: relative;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: stretch;
    z-index: 1;
}

.hero-grid::before,
.hero-grid::after {
    content: "";
    position: absolute;
    inset: -34px -28px -18px;
    pointer-events: none;
}

.hero-grid::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 760' fill='none'%3E%3Cg stroke='%2379efff' stroke-opacity='.28' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M-40 168C58 118 136 244 242 196C336 154 406 88 506 136C590 176 664 272 780 226C888 186 958 104 1058 146C1156 188 1244 264 1358 214C1458 170 1512 136 1648 156'/%3E%3Cpath d='M-8 418C118 370 182 488 304 438C420 392 476 298 586 344C684 386 772 500 894 456C1004 416 1068 318 1178 360C1290 402 1384 494 1536 442'/%3E%3Cpath d='M82 56L154 138L236 92L316 174L408 116L496 206L590 132L684 222L780 150L884 244L996 168L1104 260L1218 186L1330 280L1444 204'/%3E%3C/g%3E%3Cg fill='%2379efff' fill-opacity='.26'%3E%3Ccircle cx='242' cy='196' r='2.2'/%3E%3Ccircle cx='506' cy='136' r='1.9'/%3E%3Ccircle cx='780' cy='226' r='2.1'/%3E%3Ccircle cx='1058' cy='146' r='1.9'/%3E%3Ccircle cx='304' cy='438' r='2'/%3E%3Ccircle cx='586' cy='344' r='1.8'/%3E%3Ccircle cx='894' cy='456' r='2.2'/%3E%3Ccircle cx='1178' cy='360' r='1.9'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 118% 100%;
    mix-blend-mode: screen;
    opacity: 0.3;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.72) 46%, rgba(0, 0, 0, 0.28) 78%, transparent 100%);
    animation: heroLineFlux 20.5s linear infinite, lineWarp 12.6s ease-in-out infinite;
}

.hero-grid::after {
    background:
        radial-gradient(circle at 16% 18%, rgba(121, 239, 255, 0.24) 0 2px, transparent 3px),
        radial-gradient(circle at 38% 10%, rgba(121, 239, 255, 0.18) 0 1.8px, transparent 3px),
        radial-gradient(circle at 56% 28%, rgba(121, 239, 255, 0.2) 0 2px, transparent 3px),
        radial-gradient(circle at 74% 14%, rgba(121, 239, 255, 0.2) 0 2px, transparent 3px),
        radial-gradient(circle at 88% 24%, rgba(121, 239, 255, 0.18) 0 1.8px, transparent 3px),
        linear-gradient(104deg, transparent 0%, rgba(121, 239, 255, 0.03) 36%, rgba(121, 239, 255, 0.14) 52%, rgba(121, 239, 255, 0.03) 68%, transparent 100%);
    mix-blend-mode: screen;
    opacity: 0.14;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.56) 42%, rgba(0, 0, 0, 0.18) 76%, transparent 100%);
    animation: heroNodePulse 9.2s ease-in-out infinite, scanSweep 18s linear infinite reverse;
}

.split-grid {
    grid-template-columns: 0.96fr 1.04fr;
    align-items: start;
}

.split-grid.reverse {
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.hero-panel,
.tech-card,
.media-caption,
.cta-shell {
    position: relative;
    overflow: hidden;
}

.hero-panel,
.cta-shell,
.media-caption {
    border: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(8, 16, 33, 0.84), rgba(5, 11, 24, 0.94)),
        linear-gradient(135deg, rgba(34, 211, 238, 0.05), transparent 46%);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow);
    isolation: isolate;
}

.hero-panel::after,
.tech-card::after,
.cta-shell::after,
.media-caption::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(121, 239, 255, 0.08), transparent 22%, transparent 80%, rgba(121, 239, 255, 0.04));
}

.panel-cut {
    clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 38px 100%, 0 calc(100% - 38px));
}

.hero-panel {
    padding: 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    animation: fadeUp 0.75s ease both;
}

.hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 980 760' fill='none'%3E%3Cg stroke='%239cfbff' stroke-opacity='.34' stroke-width='1.28' stroke-linecap='round'%3E%3Cpath d='M-44 116C78 194 130 24 250 82C376 142 426 240 560 188C692 136 744 36 1020 108'/%3E%3Cpath d='M-18 332C122 282 176 404 324 356C456 312 520 204 646 246C778 290 858 402 1012 352'/%3E%3Cpath d='M92 40L190 118L280 70L382 154L498 92L612 196L742 132L882 246L1022 174'/%3E%3C/g%3E%3Cg fill='%23d9ffff' fill-opacity='.34'%3E%3Ccircle cx='250' cy='82' r='2.4'/%3E%3Ccircle cx='560' cy='188' r='2.1'/%3E%3Ccircle cx='324' cy='356' r='2'/%3E%3Ccircle cx='742' cy='132' r='2.2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 142% 114% no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 980 760' fill='none'%3E%3Cg stroke='%2379efff' stroke-opacity='.2' stroke-width='1.02' stroke-linecap='round'%3E%3Cpath d='M12 520C136 462 220 566 336 528C470 484 530 382 638 418C746 454 830 552 968 512'/%3E%3Cpath d='M168 208L266 290L366 236L478 324L598 262L722 352L862 290'/%3E%3C/g%3E%3Cg fill='%238ef7ff' fill-opacity='.26'%3E%3Ccircle cx='336' cy='528' r='2.2'/%3E%3Ccircle cx='638' cy='418' r='2'/%3E%3Ccircle cx='722' cy='352' r='1.8'/%3E%3C/g%3E%3C/svg%3E") 100% 100% / 138% 112% no-repeat,
        linear-gradient(104deg, transparent 0%, rgba(121, 239, 255, 0.04) 30%, rgba(121, 239, 255, 0.12) 50%, rgba(121, 239, 255, 0.04) 72%, transparent 100%);
    mix-blend-mode: screen;
    opacity: 0.24;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.8) 58%, rgba(0, 0, 0, 0.44) 84%, transparent 100%);
    animation: heroLineFlux 28s linear infinite, lineWarp 15.8s ease-in-out infinite;
}

.hero-panel > * {
    position: relative;
    z-index: 2;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    padding: 9px 15px;
    border: 1px solid rgba(121, 239, 255, 0.16);
    background: linear-gradient(90deg, rgba(8, 47, 73, 0.68), rgba(12, 74, 110, 0.12));
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--cyan-3);
}

.section-tag::before {
    content: "";
    width: 18px;
    height: 1px;
    background: linear-gradient(90deg, rgba(165, 243, 252, 0.22), rgba(103, 232, 249, 0.92));
}

.hero-panel h1,
.section-heading h2,
.cta-shell h2,
.tech-card h3,
.service-card h3,
.product-copy strong,
.media-caption strong,
.visual-badge strong,
.floating-card strong {
    font-family: var(--font-display);
    letter-spacing: 0.08em;
}

.hero-panel h1 {
    margin: 20px 0 18px;
    font-size: clamp(3.2rem, 7vw, 5.9rem);
    line-height: 0.95;
    text-transform: uppercase;
}

.hero-panel h1 span,
.cta-shell h2 span {
    color: var(--cyan);
    display: block;
}

.hero-lead,
.section-heading p,
.tech-card p,
.product-copy p,
.media-caption p,
.service-card p,
.site-footer p,
.copyright,
.visual-badge span,
.visual-badge strong,
.floating-card span,
.floating-card strong {
    color: var(--muted);
}

.hero-lead {
    max-width: 760px;
    font-size: 1.03rem;
    line-height: 2;
    margin: 0;
}

.metrics {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.metric-box {
    min-height: 144px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(14, 23, 44, 0.62));
    backdrop-filter: blur(14px);
}

.metric-label,
.card-top em,
.visual-badge span,
.media-caption span,
.floating-card span {
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cyan);
}

.metric-box strong {
    display: block;
    margin-top: 8px;
    font-family: var(--font-display);
    font-size: 2.55rem;
    color: #ffffff;
}

.metric-box p {
    margin: 6px 0 0;
    color: #c1d0e4;
}

.hero-actions {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hero-visual,
.media-panel {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    border: 1px solid rgba(121, 239, 255, 0.12);
    background: rgba(3, 8, 20, 0.7);
    box-shadow: var(--shadow-soft);
}

.hero-visual {
    animation: fadeUp 0.85s ease both, heroDrift 10s ease-in-out infinite 0.85s;
}

.media-panel {
    animation: fadeUp 0.85s ease both;
}

.hero-visual img,
.media-panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    filter: saturate(1.02) contrast(1.03);
}

.hero-visual img {
    animation: imageFloat 12s ease-in-out infinite;
}

.hero-visual img {
    object-position: center 58%;
}

.media-panel img {
    object-position: center center;
}

.support-panel img {
    object-position: center right;
    transform: scale(1.03);
}

.hero-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 820' fill='none'%3E%3Cg stroke='%23b2fcff' stroke-opacity='.34' stroke-width='1.38' stroke-linecap='round'%3E%3Cpath d='M-36 174C98 116 156 252 292 214C438 174 500 76 630 118C770 162 860 294 1018 248C1120 220 1204 148 1288 172'/%3E%3Cpath d='M48 482C186 430 266 560 402 522C544 482 606 378 722 414C844 452 930 588 1088 548C1174 526 1242 470 1308 488'/%3E%3Cpath d='M92 86L182 162L276 108L374 194L478 132L590 224L712 160L836 258L970 194L1110 310L1248 234'/%3E%3C/g%3E%3Cg fill='%23e2ffff' fill-opacity='.34'%3E%3Ccircle cx='292' cy='214' r='2.8'/%3E%3Ccircle cx='630' cy='118' r='2.5'/%3E%3Ccircle cx='1018' cy='248' r='2.8'/%3E%3Ccircle cx='402' cy='522' r='2.4'/%3E%3Ccircle cx='722' cy='414' r='2.3'/%3E%3Ccircle cx='1110' cy='310' r='2.6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 148% 112% no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 820' fill='none'%3E%3Cg stroke='%2379efff' stroke-opacity='.24' stroke-width='1.02' stroke-linecap='round'%3E%3Cpath d='M44 346C170 302 246 398 372 362C510 322 584 222 700 260C824 300 910 420 1058 380C1142 358 1214 316 1292 334'/%3E%3Cpath d='M144 614C248 578 332 662 446 634C570 604 638 524 744 558C858 594 950 682 1084 646'/%3E%3C/g%3E%3Cg fill='%2397f7ff' fill-opacity='.24'%3E%3Ccircle cx='372' cy='362' r='2'/%3E%3Ccircle cx='700' cy='260' r='1.9'/%3E%3Ccircle cx='1058' cy='380' r='2'/%3E%3Ccircle cx='744' cy='558' r='1.9'/%3E%3C/g%3E%3C/svg%3E") 100% 80% / 142% 118% no-repeat,
        linear-gradient(180deg, rgba(2, 6, 23, 0.82) 0%, rgba(2, 6, 23, 0.56) 16%, rgba(2, 6, 23, 0.1) 38%, rgba(2, 6, 23, 0.14) 100%),
        linear-gradient(90deg, rgba(2, 6, 23, 0.1), rgba(2, 6, 23, 0.44) 40%, rgba(2, 6, 23, 0.12)),
        linear-gradient(112deg, transparent 0%, rgba(121, 239, 255, 0.04) 34%, rgba(121, 239, 255, 0.12) 52%, rgba(121, 239, 255, 0.04) 66%, transparent 100%),
        radial-gradient(circle at 72% 36%, rgba(79, 236, 255, 0.14), transparent 18%),
        radial-gradient(circle at 62% 62%, rgba(23, 184, 255, 0.12), transparent 20%);
    mix-blend-mode: screen;
    opacity: 0.78;
    z-index: 1;
    animation: heroLineFlux 28s linear infinite, lineWarp 15s ease-in-out infinite;
}

.hero-visual::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 88px;
    background: linear-gradient(180deg, rgba(4, 10, 22, 0.98), rgba(4, 10, 22, 0.85) 55%, rgba(4, 10, 22, 0));
    z-index: 2;
    pointer-events: none;
}

.visual-badge {
    position: absolute;
    top: 28px;
    left: 28px;
    z-index: 3;
    padding: 14px 16px;
    border: 1px solid rgba(121, 239, 255, 0.14);
    background: rgba(5, 11, 25, 0.86);
    backdrop-filter: blur(12px);
    box-shadow: 0 0 28px rgba(34, 211, 238, 0.12);
    animation: fadeUp 0.9s ease both;
}

.visual-badge strong,
.floating-card strong,
.media-caption strong,
.product-copy strong,
.service-card h3,
.tech-card h3,
.cta-shell h2,
.section-heading h2 {
    color: #ffffff;
}

.visual-badge strong {
    display: block;
    margin-top: 4px;
    font-size: 1rem;
}

.visual-cards {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    z-index: 3;
    display: grid;
    gap: 14px;
}

.floating-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid rgba(121, 239, 255, 0.12);
    background: linear-gradient(180deg, rgba(8, 16, 33, 0.86), rgba(5, 12, 28, 0.94));
    backdrop-filter: blur(16px);
}

.floating-card:hover,
.tech-card:hover,
.product-card:hover {
    transform: translateY(-6px);
}

.floating-card strong {
    display: block;
    margin-top: 4px;
    font-size: 1.08rem;
}

.floating-card b,
.product-link b,
.card-link b {
    font-size: 1rem;
    color: var(--cyan);
}

.section-block {
    padding: 100px 0 0;
}

.section-heading {
    max-width: 880px;
    margin-bottom: 42px;
}

.inline-heading {
    margin-bottom: 0;
}

.section-heading h2,
.cta-shell h2 {
    margin: 18px 0 16px;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.18;
}

.section-heading p,
.cta-shell p {
    margin: 0;
    max-width: 760px;
    line-height: 2;
}

.card-grid {
    display: grid;
    gap: 18px;
}

.three-col {
    grid-template-columns: repeat(3, 1fr);
}

.tech-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(10, 18, 36, 0.84), rgba(6, 12, 28, 0.96)),
        linear-gradient(135deg, rgba(34, 211, 238, 0.05), transparent 46%);
    padding: 24px;
    box-shadow: var(--shadow-soft);
}

.card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.inline-icon {
    width: 22px;
    height: 22px;
}

.inline-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-frame {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(121, 239, 255, 0.24);
    background:
        linear-gradient(180deg, rgba(34, 211, 238, 0.12), rgba(15, 23, 42, 0.74)),
        radial-gradient(circle at 50% 35%, rgba(163, 244, 255, 0.4), rgba(34, 211, 238, 0.08) 52%, transparent 54%);
    box-shadow: inset 0 0 24px rgba(34, 211, 238, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #c7fbff;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.icon-frame .inline-icon {
    filter: drop-shadow(0 0 8px rgba(121, 239, 255, 0.18));
}

.icon-frame.small .inline-icon {
    width: 19px;
    height: 19px;
}

.icon-frame.telegram {
    color: #7fefff;
    border-color: rgba(121, 239, 255, 0.34);
    background:
        linear-gradient(180deg, rgba(24, 95, 140, 0.34), rgba(8, 21, 40, 0.84)),
        radial-gradient(circle at 50% 35%, rgba(145, 240, 255, 0.42), rgba(34, 211, 238, 0.08) 52%, transparent 56%);
}

.icon-frame.telegram .inline-icon path:first-child {
    fill: currentColor;
    stroke: none;
}

.icon-frame.link {
    color: #b8f8ff;
}

.icon-frame.cloud {
    color: #c6fcff;
}

.icon-frame.cloud .inline-icon path:first-child {
    fill: rgba(163, 244, 255, 0.1);
    stroke: currentColor;
    stroke-width: 1.75;
}

.icon-frame.small {
    width: 42px;
    height: 42px;
}

.tech-card h3 {
    margin: 28px 0 10px;
    font-size: 1.7rem;
}

.tech-card p {
    margin: 0;
}

.card-link {
    margin-top: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--cyan);
    font-size: 0.95rem;
}

.products-section {
    padding-top: 92px;
}

.products-heading {
    max-width: 960px;
}

.products-heading code {
    padding: 2px 8px;
    border: 1px solid rgba(121, 239, 255, 0.18);
    background: rgba(5, 11, 25, 0.7);
    color: var(--cyan-3);
    font-family: var(--font-display);
    font-size: 0.95em;
}

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

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 280px;
    padding: 26px 24px;
    border: 1px solid rgba(121, 239, 255, 0.14);
    background:
        linear-gradient(180deg, rgba(10, 18, 36, 0.86), rgba(6, 12, 28, 0.96)),
        linear-gradient(135deg, rgba(34, 211, 238, 0.06), transparent 48%);
    box-shadow: var(--shadow-soft);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
    animation: fadeUp 0.7s ease both;
}

.product-card:nth-child(2) {
    animation-delay: 0.08s;
}

.product-card:nth-child(3) {
    animation-delay: 0.16s;
}

.product-card:nth-child(4) {
    animation-delay: 0.24s;
}

.product-card:hover {
    border-color: rgba(121, 239, 255, 0.28);
    box-shadow: 0 18px 52px rgba(5, 16, 36, 0.56);
}

.product-tag {
    display: inline-flex;
    width: fit-content;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cyan);
}

.product-copy {
    display: block;
}

.product-copy strong {
    display: block;
    font-size: 1.5rem;
}

.product-copy p {
    margin: 10px 0 0;
    max-width: 30ch;
}

.product-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cyan);
    font-weight: 600;
}

.product-copy p {
    margin: 6px 0 0;
}

.media-panel {
    min-height: 560px;
}

.media-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(2, 6, 23, 0.18), rgba(2, 6, 23, 0.44), rgba(2, 6, 23, 0.88)),
        radial-gradient(circle at 20% 18%, rgba(34, 211, 238, 0.16), transparent 26%),
        radial-gradient(circle at 80% 70%, rgba(0, 162, 255, 0.14), transparent 22%);
}

.support-panel::before {
    background: linear-gradient(90deg, rgba(2, 6, 23, 0.82), rgba(2, 6, 23, 0.38) 58%, rgba(2, 6, 23, 0.18));
}

.support-visual {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background:
        radial-gradient(circle at 26% 30%, rgba(93, 246, 255, 0.18), transparent 18%),
        radial-gradient(circle at 72% 26%, rgba(43, 143, 255, 0.16), transparent 24%),
        radial-gradient(circle at 72% 76%, rgba(10, 100, 214, 0.14), transparent 22%),
        linear-gradient(135deg, rgba(6, 18, 38, 0.82), rgba(3, 8, 18, 0.96));
}

.support-visual::before,
.support-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.support-visual::before {
    background:
        linear-gradient(90deg, rgba(121, 239, 255, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(121, 239, 255, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.32;
    animation: gridDrift 18s linear infinite;
}

.support-visual::after {
    background:
        radial-gradient(circle at 40% 38%, rgba(163, 244, 255, 0.14), transparent 20%),
        linear-gradient(116deg, transparent 0%, rgba(121, 239, 255, 0.1) 44%, transparent 70%);
    mix-blend-mode: screen;
    opacity: 0.72;
    animation: scanSweep 16s linear infinite;
}

.support-grid-line,
.support-beam {
    position: absolute;
    display: block;
    border-radius: 999px;
    pointer-events: none;
}

.support-grid-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(146, 248, 255, 0.95), rgba(56, 189, 248, 0.7), transparent);
    box-shadow: 0 0 16px rgba(121, 239, 255, 0.24);
}

.grid-line-a {
    top: 32%;
    left: -8%;
    width: 72%;
    transform: rotate(16deg);
    animation: heroLineFlux 18s linear infinite alternate;
}

.grid-line-b {
    top: 54%;
    right: -12%;
    width: 68%;
    transform: rotate(-18deg);
    animation: heroLineFlux 16s linear infinite reverse;
}

.support-ring {
    position: absolute;
    border: 1px solid rgba(133, 244, 255, 0.24);
    border-radius: 50%;
    box-shadow: inset 0 0 26px rgba(133, 244, 255, 0.08), 0 0 24px rgba(25, 145, 255, 0.12);
    animation: heroDrift 10s ease-in-out infinite;
}

.ring-a {
    width: 260px;
    height: 260px;
    top: 96px;
    left: 112px;
}

.ring-b {
    width: 420px;
    height: 420px;
    top: 24px;
    right: -38px;
    opacity: 0.56;
    animation-duration: 13s;
}

.support-node {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d8ffff;
    box-shadow: 0 0 18px rgba(121, 239, 255, 0.44);
    animation: ambientPulse 7.6s ease-in-out infinite;
}

.node-a { top: 128px; left: 176px; }
.node-b { top: 214px; left: 312px; animation-delay: -1.1s; }
.node-c { top: 186px; right: 168px; animation-delay: -2.3s; }
.node-d { top: 312px; left: 126px; animation-delay: -3.4s; }
.node-e { bottom: 168px; right: 196px; animation-delay: -1.8s; }
.node-f { bottom: 108px; left: 286px; animation-delay: -4.2s; }

.support-beam {
    background: linear-gradient(180deg, transparent, rgba(121, 239, 255, 0.32), transparent);
    filter: blur(0.2px);
    opacity: 0.88;
    animation: panelNetworkGlow 8.8s ease-in-out infinite;
}

.beam-a {
    top: 84px;
    left: 224px;
    width: 2px;
    height: 280px;
}

.beam-b {
    top: 138px;
    right: 208px;
    width: 2px;
    height: 224px;
    animation-delay: -2.4s;
}

.beam-c {
    left: 108px;
    right: 128px;
    bottom: 154px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(121, 239, 255, 0.36), transparent);
    animation-delay: -4.1s;
}

.support-cloud-mark {
    position: absolute;
    top: 142px;
    left: 154px;
    width: 168px;
    height: 168px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #dbffff;
    border: 1px solid rgba(129, 242, 255, 0.24);
    border-radius: 38px;
    background:
        radial-gradient(circle at 50% 50%, rgba(163, 244, 255, 0.18), rgba(53, 215, 255, 0.08) 42%, rgba(4, 12, 25, 0.72) 68%),
        linear-gradient(180deg, rgba(12, 29, 54, 0.86), rgba(4, 10, 22, 0.96));
    box-shadow: 0 0 40px rgba(34, 211, 238, 0.16), inset 0 0 24px rgba(163, 244, 255, 0.08);
    backdrop-filter: blur(10px);
    transform: rotate(-10deg);
}

.support-cloud-mark .inline-icon {
    width: 96px;
    height: 96px;
    filter: drop-shadow(0 0 12px rgba(146, 248, 255, 0.28));
}

.support-cloud-mark .inline-icon path:first-child {
    fill: rgba(163, 244, 255, 0.14);
    stroke: rgba(219, 255, 255, 0.96);
    stroke-width: 1.7;
}

.support-status-panel {
    position: absolute;
    min-width: 220px;
    max-width: 260px;
    padding: 16px 18px;
    border: 1px solid rgba(121, 239, 255, 0.16);
    background: linear-gradient(180deg, rgba(7, 16, 34, 0.84), rgba(4, 10, 24, 0.94));
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(14px);
}

.support-status-panel em {
    display: block;
    font-style: normal;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cyan);
}

.support-status-panel strong {
    display: block;
    margin-top: 10px;
    color: #ffffff;
    font-family: var(--font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.support-status-panel span {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    line-height: 1.8;
}

.panel-a {
    top: 108px;
    right: 56px;
}

.panel-b {
    right: 92px;
    bottom: 142px;
}

.support-panel .media-caption {
    z-index: 3;
}

.media-caption {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    max-width: 560px;
    padding: 22px;
}

.left-caption {
    left: 28px;
    right: auto;
    max-width: 500px;
}

.media-caption strong {
    display: block;
    margin-top: 8px;
    font-size: 1.8rem;
}

.media-caption p {
    margin: 10px 0 0;
}

.service-copy {
    display: grid;
    gap: 22px;
}

.service-list {
    display: grid;
    gap: 14px;
}

.service-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.service-card h3 {
    margin: 0;
    font-size: 1.35rem;
}

.service-card p {
    margin: 8px 0 0;
}

.contact-section {
    padding-bottom: 96px;
}

.cta-shell {
    padding: 34px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: end;
}

.cta-actions {
    display: grid;
    gap: 14px;
    min-width: 260px;
}

.site-footer {
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(3, 8, 20, 0.82);
    backdrop-filter: blur(16px);
}

.footer-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 20px;
}

.site-footer p {
    margin: 8px 0 0;
    max-width: 760px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.copyright {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 16px;
    font-size: 0.9rem;
}

@media (max-width: 1180px) {
    .hero-grid,
    .split-grid,
    .split-grid.reverse,
    .cta-shell,
    .footer-wrap {
        grid-template-columns: 1fr;
    }

    .cta-actions {
        min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .three-col,
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-nav {
        display: none;
    }
}

@media (max-width: 767px) {
    .page-shell::after,
    .hero-section::before,
    .grid-overlay::before,
    .grid-overlay::after,
    .line-overlay-a,
    .line-overlay-b,
    .line-overlay-c,
    .hero-grid::before,
    .hero-grid::after,
    .hero-random-lines .trace,
    .hero-random-lines .trace-node,
    .panel-random-lines .trace,
    .panel-random-lines .trace-node {
        opacity: 0.2;
    }

    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .hero-section {
        padding-top: 24px;
    }

    .hero-panel,
    .cta-shell,
    .product-card {
        padding: 24px 18px;
    }

    .panel-cut {
        clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
    }

    .metrics,
    .three-col,
    .cta-actions,
    .product-grid {
        grid-template-columns: 1fr;
    }

    .visual-cards,
    .visual-badge,
    .media-caption,
    .left-caption {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

    .visual-badge {
        top: 16px;
    }

    .hero-panel h1 {
        font-size: 3rem;
    }

    .section-heading h2,
    .cta-shell h2 {
        font-size: 2rem;
    }

    .brand-copy strong,
    .site-footer strong {
        font-size: 1rem;
        letter-spacing: 0.14em;
    }

    .nav-wrap {
        flex-wrap: wrap;
    }

    .nav-cta {
        width: 100%;
    }

    .section-block {
        padding-top: 76px;
    }

    .contact-section {
        padding-bottom: 76px;
    }
}