/*
 * Animation palette — existing site tokens only
 * --navy / --ink / --teal-deep / --night  #061C3E
 * --sky / --teal                           #5C90D7
 * --orange / --coral                       #ffa800
 * --orange-deep / --coral-deep             #c98600
 * --grey / --night-2                       #191919
 * --sand / --color-light                   #f3f6fb
 * --cream / --white                        #ffffff
 * --muted                                  #4a5c75
 * --line                                   #d5deea
 * --teal-soft                              #e7eef9
 * --coral-soft                             #fff4d6
 * --mist                                   #e8eef6
 * --frost                                  #d7e4f6
 * Opacity and gradients between these hues only.
 */

.svg-fx {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    pointer-events: none;
}
.svg-fx__pulse {
    fill: none;
    stroke: var(--orange);
    stroke-width: 2;
    opacity: 0;
    transform-origin: 60px 62px;
    animation: fx-pulse 3.2s var(--ease) infinite;
}
.svg-fx__pulse--2 { animation-delay: 1.1s; }
.svg-fx__fill { fill: var(--navy); }
.svg-fx__check {
    stroke: var(--orange);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: fx-draw 3.2s var(--ease) infinite;
}

.svg-fx--network { width: 100%; height: 100%; }
.svg-fx__lines path {
    stroke: var(--sky);
    stroke-width: 1.4;
    opacity: 0.55;
    stroke-dasharray: 280;
    animation: fx-draw-line 8s linear infinite;
}
.svg-fx__node { fill: var(--white); opacity: 0.7; }
.svg-fx__node--ping { fill: var(--orange); animation: fx-ping 3.4s ease-out infinite; }
.svg-fx__node--d2 { animation-delay: .7s; }
.svg-fx__node--d3 { animation-delay: 1.4s; }
.svg-fx__node--d4 { animation-delay: 2.1s; }

.svg-fx__win {
    fill: rgba(6, 28, 62, 0.88);
    stroke: var(--sky);
    stroke-width: 1.5;
}
.svg-fx__type {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px;
    fill: var(--frost);
}
.svg-fx__type--1 {
    clip-path: inset(0 100% 0 0);
    animation: fx-type 8s steps(28, end) infinite;
}
.svg-fx__type--2 {
    clip-path: inset(0 100% 0 0);
    animation: fx-type 8s steps(24, end) 2.6s infinite;
}
.svg-fx__caret {
    fill: var(--orange);
    animation: fx-blink 1s steps(2, end) infinite;
}

.svg-fx__shackle {
    stroke: var(--sky);
    stroke-width: 6;
    stroke-linecap: round;
    transform-origin: 60px 40px;
    animation: fx-shackle 4s var(--ease) infinite;
}
.svg-fx__body { fill: var(--navy); stroke: var(--orange); stroke-width: 2; }
.svg-fx__keyhole { fill: var(--orange); }
.svg-fx__scan {
    fill: var(--sky);
    opacity: 0.85;
    animation: fx-scan 4s var(--ease) infinite;
}

.svg-fx__bracket {
    font-family: var(--font-display), sans-serif;
    font-size: 42px;
    font-weight: 800;
    fill: var(--sky);
    opacity: 0.55;
}
.svg-fx__bar { fill: var(--orange); opacity: 0.45; }
.svg-fx__drift--a { animation: fx-float 7s ease-in-out infinite; }
.svg-fx__drift--b { animation: fx-float 9s ease-in-out infinite reverse; }
.svg-fx__drift--c { animation: fx-float 6s ease-in-out .4s infinite; }
.svg-fx__drift--d { animation: fx-float 8s ease-in-out 1s infinite reverse; }

.svg-fx__trace {
    stroke: var(--sky);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 900;
    animation: fx-draw-line 10s linear infinite;
}
.svg-fx__trace--b {
    stroke: var(--orange);
    opacity: 0.55;
    animation-duration: 13s;
    animation-direction: reverse;
}
.svg-fx__dot { fill: var(--white); opacity: 0.7; }
.svg-fx__pulse-dot {
    fill: var(--orange);
    offset-path: path("M0 80H180V40H340V120H520V80H760V30H940V110H1200");
    animation: fx-travel 8s linear infinite;
}

.svg-fx__ring { stroke: var(--sky); stroke-width: 1.5; opacity: 0.55; }
.svg-fx__sweep {
    transform-origin: 70px 70px;
    fill: var(--orange);
    opacity: 0.28;
    animation: fx-spin 4s linear infinite;
}
.svg-fx__blip { fill: var(--orange); opacity: 0; }
.svg-fx__blip--1 { animation: fx-blip 4s ease-out .3s infinite; }
.svg-fx__blip--2 { animation: fx-blip 4s ease-out 1.6s infinite; }
.svg-fx__blip--3 { animation: fx-blip 4s ease-out 2.7s infinite; }

.svg-fx__cross {
    stroke: var(--sky);
    stroke-width: 2;
    animation: fx-cross 5s var(--ease) infinite;
}
.svg-fx__bug {
    stroke: var(--frost);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    transform-origin: 60px 62px;
    animation: fx-bug 5s var(--ease) infinite;
}
.svg-fx__ok {
    stroke: var(--orange);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke-dasharray: 70;
    animation: fx-ok 5s var(--ease) infinite;
}

.svg-fx__awning { fill: var(--orange); }
.svg-fx__awning-cut { stroke: var(--navy); stroke-width: 3; opacity: 0.35; }
.svg-fx__shop { fill: var(--navy); stroke: var(--sky); stroke-width: 2; }
.svg-fx__door { fill: var(--sky); opacity: 0.75; }
.svg-fx__bag { fill: var(--navy); stroke: var(--orange); stroke-width: 2; }
.svg-fx__bag-handle { fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linecap: round; }

.svg-fx__palette { fill: var(--navy); stroke: var(--sky); stroke-width: 2; }
.svg-fx__swatch--a { fill: var(--orange); }
.svg-fx__swatch--b { fill: var(--sky); }
.svg-fx__swatch--c { fill: var(--frost); }
.svg-fx__nib { fill: var(--orange); }
.svg-fx__pen { fill: var(--sky); }

.svg-fx__rank { fill: var(--orange); transform-box: fill-box; transform-origin: 50% 100%; }
.svg-fx__rank--1 { animation: fx-bar-rise 3.2s ease-in-out infinite; }
.svg-fx__rank--2 { animation: fx-bar-rise 3.2s 0.25s ease-in-out infinite; opacity: 0.8; }
.svg-fx__rank--3 { animation: fx-bar-rise 3.2s 0.5s ease-in-out infinite; fill: var(--sky); }
.svg-fx__glass { fill: none; stroke: var(--sky); stroke-width: 4; }
.svg-fx__handle { fill: none; stroke: var(--orange); stroke-width: 5; stroke-linecap: round; }
.svg-fx__arrow { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.svg-fx__band { fill: none; stroke: var(--sky); stroke-width: 5; stroke-linecap: round; }
.svg-fx__cup { fill: var(--navy); stroke: var(--orange); stroke-width: 2; }
.svg-fx__mic { fill: none; stroke: var(--frost); stroke-width: 3; stroke-linecap: round; }
.svg-fx__bubble { fill: var(--sky); opacity: 0.55; }

.about-art__panel { fill: rgba(255, 255, 255, 0.05); }
.about-art__grid path { stroke: var(--sky); stroke-width: 1; }
.about-art__building { fill: #1a4d8c; stroke: var(--frost); stroke-width: 2.2; }
.about-art__roof { fill: none; stroke: var(--orange); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.about-art__win { fill: var(--frost); opacity: 0.92; }
.about-art__door { fill: var(--orange); }
.about-art__shield { fill: #1458a0; stroke: var(--orange); stroke-width: 3; }
.about-art__screen { fill: #0a234d; stroke: var(--frost); stroke-width: 2.2; }
.about-art__code { fill: none; stroke: var(--orange); stroke-width: 3.2; stroke-linecap: round; }
.about-art__head--navy,
.about-art__body--navy { fill: var(--sky); }
.about-art__head--gold,
.about-art__body--gold { fill: var(--orange); }
.about-art__head--sky,
.about-art__body--sky { fill: var(--frost); }
.about-art__table { fill: #1a4d8c; stroke: var(--frost); stroke-width: 2; }
.about-art__laptop { fill: #0a234d; stroke: var(--orange); stroke-width: 2; }
.about-art__lid { fill: none; stroke: var(--frost); stroke-width: 2; }
.about-art__year {
    fill: var(--frost);
    font: 700 16px Outfit, Manrope, Arial, sans-serif;
    letter-spacing: 0.14em;
}

.fx-layer,
.parallax-stage,
.hero__fx,
.card__fx,
.stats__fx,
.testimonial-fx,
.fx-divider,
.footer__fx {
    pointer-events: none;
}
.parallax-stage,
.fx-divider,
.stats__fx,
.testimonial-fx,
.footer__fx,
.hero__fx {
    position: absolute;
    overflow: hidden;
    contain: paint;
}
.parallax-stage { inset: 0; z-index: 0; }
.hero__fx { inset: 0; }
.hero__fx--net {
    opacity: 0.25;
    left: 36%;
    right: -4%;
    width: auto;
}
.hero__copy { position: relative; z-index: 1; }
.card { position: relative; }
.card:has(.card__fx) { padding-right: 5.4rem; }
.card__fx {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 72px;
    opacity: 0.9;
}
.section--stats { position: relative; overflow: hidden; }
.stats__fx {
    inset: 0;
    opacity: 0.28;
    z-index: 0;
}
.section--stats .container { position: relative; z-index: 1; }
.section--testimonials { position: relative; overflow: hidden; }
.testimonial-fx {
    width: 220px;
    top: 8%;
    right: 4%;
    opacity: 0.14;
    z-index: 0;
}
.section--testimonials .container { position: relative; z-index: 1; }
.fx-divider {
    position: relative;
    height: 72px;
    overflow: hidden;
    background: transparent;
}
.fx-divider .fx-layer,
.fx-divider .svg-fx { height: 72px; }
.footer { position: relative; overflow: hidden; }
.footer__fx {
    inset: 0;
    z-index: 0;
    opacity: 1;
}
.footer .container { position: relative; z-index: 1; }
.footer__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    pointer-events: none;
}
.footer__orb--sky {
    width: min(320px, 42vw);
    height: min(320px, 42vw);
    top: -110px;
    left: -70px;
    background: rgba(92, 144, 215, 0.22);
    animation: footer-breathe 12s ease-in-out infinite;
}
.footer__orb--gold {
    width: min(260px, 36vw);
    height: min(260px, 36vw);
    right: -80px;
    bottom: -90px;
    background: rgba(255, 168, 0, 0.14);
    animation: footer-breathe 14s 1.2s ease-in-out infinite reverse;
}
.footer__orb--soft {
    width: 160px;
    height: 160px;
    right: 18%;
    top: -40px;
    background: rgba(92, 144, 215, 0.1);
    animation: footer-breathe 16s 0.6s ease-in-out infinite;
}
.footer__spark {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 10px rgba(255, 168, 0, 0.45);
    opacity: 0.45;
    animation: footer-spark 5.5s ease-in-out infinite;
}
.footer__spark--1 { top: 1.4rem; left: 8%; }
.footer__spark--2 { top: 38%; right: 6%; animation-delay: 1.6s; }
.footer__spark--3 { bottom: 4.2rem; left: 42%; animation-delay: 3s; }
@keyframes footer-breathe {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.08); opacity: 1; }
}
@keyframes footer-spark {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 0.55; transform: scale(1); }
}

[data-reveal] { opacity: 1; transform: none; }
html.js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
html.js [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

@keyframes fx-pulse {
    0% { transform: scale(.7); opacity: .55; }
    100% { transform: scale(1.35); opacity: 0; }
}
@keyframes fx-draw {
    0%, 12% { stroke-dashoffset: 60; }
    40%, 78% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 60; }
}
@keyframes fx-draw-line {
    to { stroke-dashoffset: -560; }
}
@keyframes fx-ping {
    0%, 70% { transform: scale(1); opacity: .9; }
    85% { transform: scale(1.8); opacity: 0; }
    100% { transform: scale(1); opacity: .9; }
}
@keyframes fx-type {
    0%, 8% { clip-path: inset(0 100% 0 0); }
    40%, 72% { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 100% 0 0); }
}
@keyframes fx-blink { 50% { opacity: 0; } }
@keyframes fx-scan {
    0% { transform: translateY(0); opacity: .2; }
    45% { transform: translateY(78px); opacity: .9; }
    100% { transform: translateY(0); opacity: .2; }
}
@keyframes fx-shackle {
    0%, 40% { transform: rotate(-18deg); }
    55%, 90% { transform: rotate(0deg); }
    100% { transform: rotate(-18deg); }
}
@keyframes fx-float {
    50% { transform: translate3d(0, -12px, 0); }
}
@keyframes fx-travel { to { offset-distance: 100%; } }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-blip {
    0%, 55% { opacity: 0; transform: scale(.4); }
    62% { opacity: 1; transform: scale(1); }
    80%, 100% { opacity: 0; }
}
@keyframes fx-cross {
    0%, 30% { opacity: .35; transform: scale(.85); }
    45%, 70% { opacity: 1; transform: scale(1); }
    100% { opacity: .35; transform: scale(.85); }
}
@keyframes fx-bug {
    0%, 35% { opacity: 1; transform: scale(1); }
    50% { opacity: 0; transform: scale(.4); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes fx-ok {
    0%, 40% { stroke-dashoffset: 70; opacity: 0; }
    55%, 78% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 70; opacity: 0; }
}
@keyframes fx-bar-rise {
    0%, 100% { transform: scaleY(0.55); }
    50% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    .svg-fx, .svg-fx *, .hero__fx, .fx-divider, .stats__fx, .testimonial-fx,
    .footer__orb, .footer__spark {
        animation: none !important;
    }
    html.js [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
html.is-static-motion .svg-fx,
html.is-static-motion .svg-fx *,
html.is-static-motion .footer__orb,
html.is-static-motion .footer__spark {
    animation: none !important;
}
html.is-static-motion [data-parallax],
html.is-static-motion [data-mouse-parallax] {
    transform: none !important;
}
html.is-static-motion .svg-fx__type {
    clip-path: none;
}
html.is-static-motion .svg-fx__ok,
html.is-static-motion .svg-fx__check {
    stroke-dashoffset: 0;
}
html.is-static-motion .svg-fx__bug { opacity: 0; }
html.is-static-motion .svg-fx__ok { opacity: 1; }
html.is-static-motion .svg-fx__blip { opacity: .8; }

html.js .hero--type:not(.is-ready):not(.is-static) .hero__word-inner {
    transform: translateY(110%);
}
html.js .hero--type.is-ready .hero__word-inner {
    transform: none;
    transition: transform .7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
}
html.js .hero--type:not(.is-ready):not(.is-static) .hero__lede,
html.js .hero--type:not(.is-ready):not(.is-static) .hero__actions,
html.js .hero--type:not(.is-ready):not(.is-static) .hero__proof {
    opacity: 0;
    transform: translateY(14px);
}
html.js .hero--type.is-ready .hero__lede,
html.js .hero--type.is-ready .hero__actions,
html.js .hero--type.is-ready .hero__proof {
    opacity: 1;
    transform: none;
}
html.js .hero--type.is-ready .hero__lede {
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: 1.8s;
}
html.js .hero--type.is-ready .hero__actions {
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: 1.95s;
}
html.js .hero--type.is-ready .hero__proof {
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: 2.1s;
}
.hero__rotate-word {
    transition: transform .6s var(--ease), opacity .6s var(--ease);
}
.hero__underline path {
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
}
.hero__underline.is-draw path,
html:not(.js) .hero__underline path,
html.is-static-motion .hero__underline path {
    animation: hero-underline .7s var(--ease) forwards;
}
html:not(.js) .hero__underline path,
html.is-static-motion .hero__underline path {
    stroke-dashoffset: 0;
    animation: none;
}
@keyframes hero-underline {
    to { stroke-dashoffset: 0; }
}
@keyframes hero-cue-float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
}
.hero__cue { animation: hero-cue-float 2s ease-in-out infinite; }
.hero__cue.is-gone { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .hero__pulse, .hero__cue, .hero__underline path { animation: none !important; }
    .hero__rotate-word, .hero__word-inner, .hero__lede, .hero__actions, .hero__proof {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .hero__underline path { stroke-dashoffset: 0; }
}

@media (max-width: 767px) {
    .card__fx { width: 56px; }
    .testimonial-fx { width: 140px; opacity: .1; }
}