:root{--bg:#05070d;--panel:#0b1220;--panel2:#101b2b;--blue:#00bfff;--cyan:#76e5ff;--text:#f5f8ff;--muted:#aab9cc;--line:rgba(0,191,255,.22);--radius:20px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}img{max-width:100%;height:auto;display:block}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.container{width:min(1120px,calc(100% - 32px));margin:auto}.site-header{position:sticky;top:0;background:rgba(5,7,13,.93);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);z-index:20}.nav-wrap{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:15px}.brand{display:flex;align-items:center;gap:10px;font-weight:950;letter-spacing:.15em}.brand-mark{display:grid;place-items:center;width:39px;height:39px;border:1px solid var(--blue);border-radius:12px;color:var(--blue);font-size:1.4rem;box-shadow:0 0 22px #00bfff22}.nav-links{display:flex;gap:18px;flex-wrap:wrap}.nav-links a{color:var(--muted);font-size:.91rem}.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--cyan)}.menu-toggle{display:none;background:#0c1625;border:1px solid var(--line);color:var(--text);padding:9px 12px;border-radius:10px}.hero{padding:clamp(52px,8vw,92px) 0;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 88% 8%,#00bfff24,transparent 43%),radial-gradient(ellipse at 4% 95%,#1541a61a,transparent 38%)}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:38px;align-items:center}.eyebrow{color:var(--cyan);font-size:.75rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase}h1,h2,h3{line-height:1.13;letter-spacing:-.035em;margin:0 0 15px}h1{font-size:clamp(2.55rem,6vw,5rem)}h2{font-size:clamp(1.9rem,4vw,3rem)}h3{font-size:1.22rem}.blue{color:var(--blue)}.lead{color:var(--muted);font-size:clamp(1rem,2vw,1.12rem);max-width:650px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--blue);border-radius:12px;padding:12px 17px;font-weight:850;transition:transform .2s,box-shadow .2s;cursor:pointer}.button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #00bfff20}.button.primary{background:linear-gradient(120deg,var(--blue),var(--cyan));color:#001018;border-color:transparent}.button.secondary{background:#00bfff0b}.hero-art{min-height:315px;display:grid;place-items:center;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:26px;background:linear-gradient(140deg,#00bfff18,transparent 50%),linear-gradient(35deg,#070b13,#0d1c31,#060912);box-shadow:0 20px 65px #0007}.hero-art:before,.hero-art:after{content:"";position:absolute;width:150%;height:1px;background:#00bfff55;transform:rotate(-25deg)}.hero-art:before{top:34%}.hero-art:after{top:68%}.monogram{font-size:clamp(9rem,20vw,14rem);font-weight:1000;color:transparent;-webkit-text-stroke:2px var(--blue);text-shadow:0 0 35px #00bfff44;transform:skew(-8deg)}.art-caption{position:absolute;bottom:16px;left:18px;right:18px;display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}.section{padding:clamp(48px,7vw,76px) 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:26px}.section-head p{max-width:510px;color:var(--muted)}.grid{display:grid;gap:17px}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.card{padding:23px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,#0e1a2c,#080d16);min-width:0;box-shadow:0 12px 34px #0002}.card p{color:var(--muted)}.icon{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);border-radius:14px;color:var(--cyan);background:#00bfff0c;font-size:1.3rem;margin-bottom:17px}.text-link{display:inline-block;color:var(--cyan);font-weight:850;margin-top:10px}.project-visual{min-height:165px;display:grid;place-items:center;text-align:center;border:1px solid var(--line);border-radius:14px;margin-bottom:17px;background:radial-gradient(circle at 70% 20%,#00bfff2b,transparent 45%),linear-gradient(135deg,#101b2a,#070a10)}.project-visual strong{font-size:clamp(1.3rem,4vw,1.8rem);letter-spacing:.12em}.label{color:var(--cyan);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase}.callout{padding:clamp(22px,4vw,34px);border:1px solid var(--line);border-radius:22px;background:linear-gradient(120deg,#00bfff1c,#0b1220 60%);display:flex;align-items:center;justify-content:space-between;gap:20px}.page-hero{padding:clamp(44px,7vw,68px) 0 40px;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 85% 0,#00bfff1e,transparent 50%)}.breadcrumb,.muted{color:var(--muted);font-size:.87rem}.prose{max-width:800px}.prose h2{font-size:1.8rem;margin-top:34px}.prose p,.prose li{color:var(--muted)}.prose li{margin:8px 0}.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:35px}.sidebar{position:sticky;top:95px}.sidebar a{display:block;padding:10px 0;color:var(--muted);border-bottom:1px solid var(--line)}.site-footer{border-top:1px solid var(--line);padding:34px 0 22px;background:#04060b}.footer-top,.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer-links{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.9rem}.footer-bottom{border-top:1px solid #a9b8cc20;padding-top:18px;margin-top:24px;color:var(--muted);font-size:.84rem}.notice{border:1px solid #ffbf0055;padding:14px;border-radius:13px;color:#e8d7a0;background:#ffbf0009}.notice a{text-decoration:underline}label{display:block;margin:10px 0 5px;font-weight:750}input,textarea,select{width:100%;padding:12px;border:1px solid #314054;border-radius:11px;background:#080d16;color:var(--text);font:inherit}textarea{min-height:130px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.full{grid-column:1/-1}.contact-list{display:grid;gap:12px}.contact-item{padding:15px;border:1px solid var(--line);border-radius:14px;background:#0b1220}.contact-item small{display:block;color:var(--muted)}.faq details{border-bottom:1px solid var(--line);padding:16px 0}.faq summary{font-weight:800;cursor:pointer}.faq details p{color:var(--muted);margin-bottom:0}.tag{display:inline-block;padding:5px 9px;border:1px solid var(--line);border-radius:999px;color:var(--cyan);font-size:.75rem}.floating-contact{position:fixed;right:14px;bottom:14px;z-index:15;box-shadow:0 8px 30px #0008}.skip-link:focus{position:fixed!important;left:12px!important;top:12px!important;background:#fff;color:#000;padding:10px;z-index:100}
@media(max-width:850px){.menu-toggle{display:block}.nav-links{display:none;position:absolute;left:12px;right:12px;top:64px;padding:12px;background:#070b13;border:1px solid var(--line);border-radius:14px;flex-direction:column;gap:0;box-shadow:0 20px 50px #0009}.nav-links.open{display:flex}.nav-links a{padding:12px}.hero-grid,.content-layout{grid-template-columns:1fr}.hero-art{min-height:245px}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar{position:static}.section-head{align-items:start;flex-direction:column}}
@media(max-width:560px){body{font-size:15px}.container{width:calc(100% - 28px)}.grid-3,.grid-2,.form-grid{grid-template-columns:1fr}.section{padding:46px 0}.hero{padding:48px 0}.hero-art{min-height:205px}.callout{align-items:stretch;flex-direction:column}.callout .button{width:100%}.actions .button{flex:1 1 100%}.card{padding:19px}.section-head{gap:8px}.footer-top{flex-direction:column}.art-caption{font-size:.58rem}.floating-contact{right:10px;bottom:10px}}
/* ZISOR visual refresh: softer colors, compact grids, calm motion */
:root{--bg:#0b1020;--panel:#131b30;--panel2:#1a2540;--blue:#8b9cff;--cyan:#8ce6d8;--text:#f6f7ff;--muted:#bdc6dc;--line:rgba(153,173,255,.22);--radius:18px}
body{background:radial-gradient(ellipse at 12% 0%,rgba(104,119,255,.10),transparent 35%),radial-gradient(ellipse at 92% 42%,rgba(80,218,197,.07),transparent 32%),var(--bg)}
.site-header{background:rgba(11,16,32,.88);border-bottom-color:rgba(153,173,255,.18)}
.brand-mark{border-color:var(--blue);color:var(--blue);box-shadow:0 0 20px rgba(139,156,255,.16)}
.hero{background:radial-gradient(ellipse at 88% 8%,rgba(139,156,255,.16),transparent 43%),radial-gradient(ellipse at 4% 95%,rgba(140,230,216,.09),transparent 38%)}
.eyebrow,.label{color:var(--cyan)}.blue{color:var(--blue)}
.button{border-color:rgba(140,230,216,.65)}.button.primary{background:linear-gradient(120deg,#a7b2ff,#8ce6d8);color:#10162a;box-shadow:0 7px 24px rgba(140,230,216,.12)}.button.secondary{background:rgba(139,156,255,.08)}
.card{background:linear-gradient(145deg,rgba(25,35,62,.96),rgba(15,22,42,.96));border-color:rgba(153,173,255,.2);box-shadow:0 12px 30px rgba(0,0,0,.14);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}
.card:hover{transform:translateY(-5px);border-color:rgba(140,230,216,.55);box-shadow:0 16px 34px rgba(0,0,0,.24),0 0 22px rgba(139,156,255,.08)}
.icon{color:var(--cyan);background:rgba(140,230,216,.07);border-color:rgba(140,230,216,.22)}.text-link,.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--cyan)}
.hero-art{background-image:linear-gradient(115deg,rgba(10,15,32,.30),rgba(10,15,32,.72)),url('visual-hero.png');background-size:cover;background-position:center;border-color:rgba(153,173,255,.26);animation:softGlow 8s ease-in-out infinite alternate}
.hero-art:before,.hero-art:after{background:rgba(140,230,216,.30)}.monogram{color:rgba(255,255,255,.10);-webkit-text-stroke:1.5px rgba(192,202,255,.85);text-shadow:0 0 32px rgba(139,156,255,.32)}
.project-visual{background-size:cover;background-position:center;position:relative;overflow:hidden}.project-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(11,16,32,.35),rgba(11,16,32,.82));transition:opacity .25s ease}.project-visual>div{position:relative;z-index:1;text-shadow:0 2px 18px #000}
.card:nth-child(3n+1) .project-visual{background-image:url('visual-projects.png')}.card:nth-child(3n+2) .project-visual{background-image:url('visual-services.png')}.card:nth-child(3n) .project-visual{background-image:url('visual-hero.png')}
.callout{background:linear-gradient(120deg,rgba(139,156,255,.14),rgba(19,27,48,.9) 60%);border-color:rgba(153,173,255,.24)}.site-footer{background:#080d1a;border-top-color:rgba(153,173,255,.18)}
/* Five across on laptop; three across on phones. */
.grid.grid-3{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.grid.grid-2.portfolio-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.grid.grid-3 .card,.grid.grid-2.portfolio-grid .card{padding:17px}.grid.grid-3 .icon{width:40px;height:40px;margin-bottom:12px}.grid.grid-3 .card h3,.grid.grid-2.portfolio-grid .card h3{font-size:1.03rem}
@keyframes softGlow{from{box-shadow:0 18px 55px rgba(0,0,0,.28),0 0 18px rgba(139,156,255,.06)}to{box-shadow:0 18px 55px rgba(0,0,0,.28),0 0 28px rgba(140,230,216,.12)}}
@media(max-width:1050px){.grid.grid-3,.grid.grid-2.portfolio-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:850px){.grid.grid-3,.grid.grid-2.portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.grid.grid-3,.grid.grid-2,.grid.grid-2.portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.grid.grid-3 .card,.grid.grid-2.portfolio-grid .card,.card{padding:11px;border-radius:13px}.grid.grid-3 .icon{width:32px;height:32px;font-size:1rem;margin-bottom:8px}.grid.grid-3 .card h3,.grid.grid-2.portfolio-grid .card h3{font-size:.88rem;letter-spacing:-.02em;margin-bottom:8px}.grid.grid-3 .card p,.grid.grid-2.portfolio-grid .card p{font-size:.78rem;line-height:1.4}.grid.grid-3 .text-link,.grid.grid-2.portfolio-grid .text-link{font-size:.78rem}.project-visual{min-height:92px;margin-bottom:10px}.project-visual strong{font-size:.95rem}.label{font-size:.58rem}.hero-art{background-position:center;min-height:205px}}
@media(max-width:370px){.grid.grid-3,.grid.grid-2,.grid.grid-2.portfolio-grid{gap:6px}.grid.grid-3 .card,.grid.grid-2.portfolio-grid .card,.card{padding:9px}.grid.grid-3 .card p,.grid.grid-2.portfolio-grid .card p{font-size:.73rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}


/* ZISOR final logo + site background overrides */
body {
  background-image:
  linear-gradient(rgba(5, 7, 13, 0.72), rgba(5, 7, 13, 0.82)),
  url("background.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
.hero-art {
  background-image: linear-gradient(115deg, rgba(10,15,32,.28), rgba(10,15,32,.66)), url("background.png");
  background-size: cover;
  background-position: center;
}
.monogram { display: none !important; }
.hero-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: min(78%, 700px);
  max-height: 500px;
  object-fit: contain;
  margin: auto;
  filter: drop-shadow(0 8px 26px rgba(100, 155, 255, .26));
  animation: zisorLogoFloat 4.5s ease-in-out infinite;
}

/* ===== ZISOR: CINEMATIC ENERGY CORE ===== */

.hero-art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 360px;
  display: grid;
  place-items: center;
  perspective: 900px;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(44, 111, 255, .24), transparent 48%),
    radial-gradient(ellipse at 50% 100%, rgba(104, 67, 255, .15), transparent 55%),
    #080d1a;
  border: 1px solid rgba(112, 171, 255, .24);
  border-radius: 26px;
  box-shadow: inset 0 0 50px rgba(47, 110, 255, .09);
}

.hero-art::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -1;
  background: conic-gradient(
    from 0deg,
    transparent 0 20%,
    rgba(65, 154, 255, .22) 26%,
    transparent 33% 53%,
    rgba(160, 92, 255, .2) 61%,
    transparent 70% 100%
  );
  animation: cosmic-rotation 12s linear infinite;
}

.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    transparent 48%,
    rgba(88, 176, 255, .09) 50%,
    transparent 52%
  );
  background-size: 100% 9px;
  opacity: .32;
  animation: scan-move 5s linear infinite;
}

.hero-logo {
  position: relative;
  z-index: 3;
  display: block;
  width: min(270px, 67%);
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 12px rgba(53, 151, 255, .8))
    drop-shadow(0 0 35px rgba(70, 96, 255, .5));
  transform-origin: center;
  animation:
    logo-hover 4s ease-in-out infinite,
    logo-glow 3.5s ease-in-out infinite;
}

/* Rotating energy rings */
.hero-art .energy-ring {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 47%;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(82, 185, 255, .65);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 18px rgba(46, 147, 255, .2);
}

.energy-ring.ring-one {
  animation: ring-spin 5s linear infinite;
}

.energy-ring.ring-two {
  width: 225px;
  height: 225px;
  border-style: dashed;
  border-color: rgba(166, 105, 255, .65);
  animation: ring-spin-reverse 8s linear infinite;
}

.energy-ring.ring-three {
  width: 270px;
  height: 105px;
  border-color: rgba(96, 224, 255, .65);
  animation: ring-spin 6s linear infinite;
}

/* JavaScript-created particles */
.energy-particle {
  position: absolute;
  z-index: 4;
  width: var(--particle-size, 4px);
  height: var(--particle-size, 4px);
  left: var(--start-x);
  top: var(--start-y);
  border-radius: 50%;
  background: var(--particle-color, #65dcff);
  box-shadow: 0 0 10px currentColor, 0 0 22px currentColor;
  pointer-events: none;
  animation: particle-flight var(--duration, 2s) ease-out forwards;
}

.energy-wave {
  position: absolute;
  z-index: 2;
  left: var(--wave-x, 50%);
  top: var(--wave-y, 47%);
  width: 35px;
  height: 35px;
  border: 2px solid var(--wave-color, #5bdcff);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.2);
  pointer-events: none;
  animation: shockwave 1.1s ease-out forwards;
}

.hero-art.teleport-flash .hero-logo {
  animation: teleport-glitch .65s steps(2, end);
}

.hero-art.teleport-flash::before {
  filter: brightness(1.8);
}

.art-caption {
  position: absolute;
  z-index: 5;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #d8e8ff;
  font-size: .78rem;
  letter-spacing: .08em;
}

@keyframes cosmic-rotation {
  to { transform: rotate(360deg); }
}

@keyframes scan-move {
  to { background-position-y: 90px; }
}

@keyframes logo-hover {
  0%, 100% { transform: translateY(0) rotateY(-5deg) scale(1); }
  50% { transform: translateY(-8px) rotateY(5deg) scale(1.025); }
}

@keyframes logo-glow {
  0%, 100% {
    filter: drop-shadow(0 0 10px #329bff)
            drop-shadow(0 0 25px rgba(70, 96, 255, .35));
  }
  50% {
    filter: drop-shadow(0 0 20px #68eaff)
            drop-shadow(0 0 48px rgba(100, 90, 255, .7));
  }
}

@keyframes ring-spin {
  from { transform: translate(-50%, -50%) rotateX(65deg) rotateZ(0); }
  to { transform: translate(-50%, -50%) rotateX(65deg) rotateZ(360deg); }
}

@keyframes ring-spin-reverse {
  from { transform: translate(-50%, -50%) rotateY(65deg) rotateZ(360deg); }
  to { transform: translate(-50%, -50%) rotateY(65deg) rotateZ(0); }
}

@keyframes particle-flight {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(.3);
  }
  15% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(var(--travel-x), var(--travel-y)) scale(0);
  }
}

@keyframes shockwave {
  0% { opacity: .9; transform: translate(-50%, -50%) scale(.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(8); }
}

@keyframes teleport-glitch {
  0%, 100% { opacity: 1; transform: translateX(0); filter: hue-rotate(0); }
  20% { opacity: .4; transform: translateX(-5px) skewX(-8deg); }
  40% { opacity: 1; transform: translateX(5px) skewX(8deg); filter: hue-rotate(70deg); }
  60% { opacity: .65; transform: translateX(-3px); }
  80% { opacity: 1; transform: translateX(2px); filter: hue-rotate(-40deg); }
}

@media (max-width: 600px) {
  .hero-art { min-height: 290px; }
  .energy-ring.ring-one { width: 145px; height: 145px; }
  .energy-ring.ring-two { width: 180px; height: 180px; }
  .energy-ring.ring-three { width: 215px; height: 85px; }
  .art-caption { font-size: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art::before,
  .hero-art::after,
  .hero-logo,
  .energy-ring {
    animation: none !important;
  }
}
/* ===== ZISOR INTERACTIVE Z ANIMATION ===== */

.hero-art {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero-logo {
  position: relative;
  z-index: 5;
  display: block;
  width: min(70%, 360px);
  height: auto;
  margin: auto;
  cursor: pointer;
  transform-origin: center;
  will-change: transform, filter, opacity;
  -webkit-tap-highlight-color: transparent;
}

/* Main flight sequence */
.hero-logo.z-animating {
  animation: z-flight-sequence 4.8s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes z-flight-sequence {
  0% {
    transform: translate(0, 0) scale(.65) rotate(-12deg);
    opacity: 0;
    filter: blur(12px) brightness(2);
  }

  10% {
    transform: translate(-90px, -55px) scale(.8) rotate(-18deg);
    opacity: 1;
    filter: blur(0) brightness(1.8);
  }

  22% {
    transform: translate(100px, -85px) scale(.9) rotate(16deg);
    filter: hue-rotate(90deg);
  }

  33% {
    transform: translate(-80px, 60px) scale(.8) rotate(-10deg);
  }

  44% {
    transform: translate(75px, 35px) scale(1.05) rotate(12deg);
    filter: blur(1px) hue-rotate(180deg);
  }

  54% {
    transform: translate(-30px, -25px) scale(.9) skewX(12deg);
    filter: blur(5px) brightness(2);
  }

  63% {
    transform: translate(0, 0) scale(1.2) skewX(-15deg);
    opacity: .4;
    filter: blur(8px);
  }

  76% {
    transform: translate(0, 0) scale(1.5);
    opacity: 1;
    filter: blur(0) brightness(2.5);
  }

  83% {
    transform: translate(0, 0) scale(.82);
    filter: brightness(1.8);
  }

  91% {
    transform: translate(0, 0) scale(1.08);
    filter: brightness(1.5);
  }

  100% {
    transform: translate(0, 0) scale(1) rotate(0);
    opacity: 1;
    filter: none;
  }
}

/* Glitch slices */
.hero-logo.z-glitch {
  animation: z-glitch .24s steps(2, end) infinite;
}

@keyframes z-glitch {
  0% {
    transform: translate(-5px, 0);
    filter: drop-shadow(5px 0 #4df4ff);
  }
  50% {
    transform: translate(6px, -2px);
    filter: drop-shadow(-5px 0 #a65cff);
  }
  100% {
    transform: translate(-2px, 3px);
    filter: drop-shadow(3px 0 #fff);
  }
}

/* Blast flash */
.z-blast-flash {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: white;
  box-shadow: 0 0 35px 15px #66eaff, 0 0 100px 40px #586dff;
  transform: translate(-50%, -50%) scale(0);
  animation: z-blast .7s ease-out forwards;
}

@keyframes z-blast {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(8);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(13);
  }
}

/* Expanding energy rings */
.z-energy-ring {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 90px;
  aspect-ratio: 1;
  border: 2px solid #62eaff;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 18px #438cff, inset 0 0 15px #438cff;
  transform: translate(-50%, -50%) scale(.2);
}

.z-energy-ring.active {
  animation: z-ring-spin 2.4s ease-out forwards;
}

.z-energy-ring.ring-two {
  border-color: #a875ff;
  width: 130px;
}

.z-energy-ring.ring-three {
  border-color: #fff;
  width: 170px;
}

@keyframes z-ring-spin {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2) rotate(0);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.7) rotate(540deg);
  }
}

/* Settle glow */
.hero-logo.z-settled {
  animation: z-settle-glow 2.5s ease-in-out infinite alternate;
}

@keyframes z-settle-glow {
  from {
    filter: drop-shadow(0 0 7px #438cff);
  }
  to {
    filter: drop-shadow(0 0 22px #63eaff);
  }
}

@media (max-width: 600px) {
  @keyframes z-flight-sequence {
    0% { transform: translateY(80px) scale(.6); opacity: 0; filter: blur(8px); }
    12% { transform: translate(-35px, -35px) scale(.8); opacity: 1; }
    25% { transform: translate(38px, -48px) scale(.9) rotate(12deg); }
    38% { transform: translate(-30px, 30px) scale(.8) rotate(-10deg); }
    52% { transform: translate(25px, 15px) scale(1.05); filter: hue-rotate(150deg); }
    64% { transform: translateY(0) scale(.8) skewX(12deg); opacity: .5; filter: blur(5px); }
    76% { transform: translateY(0) scale(1.35); opacity: 1; filter: brightness(2); }
    84% { transform: translateY(0) scale(.85); }
    92% { transform: translateY(0) scale(1.08); }
    100% { transform: translateY(0) scale(1); filter: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo.z-settled {
    animation: none;
  }
}


/* ===== ZISOR cinematic animation effects (main.js companion) ===== */
.hero-art {
  overflow: visible;
  isolation: isolate;
  contain: layout;
}
.hero-logo-btn {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: min(72%, 360px);
  padding: 0;
  margin: 0;
  border: 0;
  outline-offset: 7px;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transform-origin: center;
  will-change: transform, filter, opacity;
  -webkit-tap-highlight-color: transparent;
}
.hero-logo-btn:focus-visible {
  outline: 2px solid #7df9ff;
  border-radius: 16px;
}
.hero-logo-btn[aria-disabled="true"] { cursor: progress; }
.hero-logo-btn .hero-logo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 250px;
  object-fit: contain;
  margin: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 0 12px #00bfff55);
}
.zfx-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.zfx-back { z-index: 2; }
.zfx-front { z-index: 7; }
.zfx {
  position: absolute;
  display: block;
  pointer-events: none;
  will-change: transform, opacity, filter;
}
.zfx-ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 0 9px #00d9ff);
  pointer-events: none;
  will-change: transform, opacity;
}
.zfx-ghost--1 { filter: hue-rotate(28deg) drop-shadow(0 0 10px #a78bfa); }
.zfx-ghost--2 { filter: hue-rotate(-18deg) drop-shadow(0 0 10px #7df9ff); }
.zfx-streak {
  left: var(--x); top: var(--y);
  width: var(--len); height: 3px;
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--a)) scaleX(.05);
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, #7df9ff 28%, #fff 54%, #448aff 76%, transparent);
  box-shadow: 0 0 9px #31dfff, 0 0 22px #276dff;
  animation: zfx-streak 430ms cubic-bezier(.15,.8,.2,1) var(--delay) both;
}
@keyframes zfx-streak {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--a)) scaleX(.02); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--a)) scaleX(1); }
}
.zfx-portal {
  left: var(--x); top: var(--y);
  width: 20px; height: 20px;
  border: 2px solid #a7f3ff;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 12px #00d9ff, inset 0 0 10px #4d7cff;
  transform: translate(-50%,-50%) scale(.2);
  animation: zfx-portal 520ms ease-out var(--delay) both;
}
@keyframes zfx-portal {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.15); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(5.5); }
}
.zfx-charge {
  left: 50%; top: 50%; width: var(--sz); height: var(--sz);
  border-radius: 50%;
  background: radial-gradient(circle, #dffcff33 0, #28bfff1c 24%, #6c4dff10 48%, transparent 70%);
  filter: blur(3px);
  opacity: 0;
  transform: translate(-50%,-50%) scale(.15);
  animation: zfx-charge var(--t) ease-in-out var(--delay) both;
}
@keyframes zfx-charge {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.15); }
  35% { opacity: .75; }
  100% { opacity: .08; transform: translate(-50%,-50%) scale(1.25); }
}
.zfx-spark {
  left: 50%; top: 50%;
  width: var(--len); height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--c), #fff);
  box-shadow: 0 0 7px var(--c), 0 0 15px var(--c);
  opacity: 0;
  transform: translate(-50%,-50%) rotate(var(--a)) translateX(0) scaleX(.3);
  animation: zfx-spark var(--t) cubic-bezier(.12,.72,.2,1) var(--delay) both;
}
.zfx-spark--in {
  animation-name: zfx-spark-in;
}
@keyframes zfx-spark {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--a)) translateX(0) scaleX(.2); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) scaleX(.05); }
}
@keyframes zfx-spark-in {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) scaleX(.2); }
  22% { opacity: .9; }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--a)) translateX(0) scaleX(.05); }
}
.zfx-whiteout, .zfx-flash {
  left: 50%; top: 50%; width: 16px; height: 16px; border-radius: 50%;
  opacity: 0; transform: translate(-50%,-50%) scale(.1);
}
.zfx-whiteout {
  background: #fff;
  box-shadow: 0 0 30px 18px #d9ffff, 0 0 100px 52px #00bfff, 0 0 180px 90px #6655ff;
  animation: zfx-whiteout 520ms ease-out var(--delay) both;
}
.zfx-flash {
  border: 2px solid #fff;
  box-shadow: 0 0 22px 8px #7df9ff;
  animation: zfx-flash 680ms ease-out var(--delay) both;
}
@keyframes zfx-whiteout {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.1); }
  12% { opacity: 1; }
  38% { opacity: .88; transform: translate(-50%,-50%) scale(7); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(18); }
}
@keyframes zfx-flash {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.1); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(15); }
}
.zfx-shock, .zfx-warp, .zfx-ring {
  left: 50%; top: 50%;
  width: var(--sz); height: var(--sz);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.12) rotate(var(--r0,0deg));
}
.zfx-shock {
  border: 2px solid #9af7ff;
  box-shadow: 0 0 15px #00bfff, inset 0 0 14px #00bfff33;
  animation: zfx-shock 1100ms cubic-bezier(.1,.7,.2,1) var(--delay) both;
}
.zfx-warp {
  border: 1px solid #fff;
  box-shadow: 0 0 22px #7df9ff, inset 0 0 18px #a78bfa66;
  animation: zfx-warp 900ms ease-out var(--delay) both;
}
@keyframes zfx-shock {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.12); }
  15% { opacity: .9; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.15); }
}
@keyframes zfx-warp {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(0); }
  18% { opacity: .9; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.1) rotate(180deg); }
}
.zfx-ring {
  border: 2px solid var(--c1);
  border-top-color: var(--c2);
  border-right-color: var(--c3);
  box-shadow: 0 0 12px var(--c1), inset 0 0 12px color-mix(in srgb, var(--c2) 25%, transparent);
  animation: zfx-ring var(--life) cubic-bezier(.12,.65,.2,1) var(--delay) both;
}
.zfx-ring--dash { border-style: dashed; border-width: 3px; }
@keyframes zfx-ring {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.25) rotate(var(--r0)); }
  18% { opacity: .95; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(2.2) rotate(calc(var(--r0) + var(--spin))); }
}
.zfx-cloud {
  left: 50%; top: 50%; width: var(--sz); height: var(--sz);
  border-radius: 50%;
  background: radial-gradient(circle, #c7faff22, #267dff12 45%, transparent 72%);
  filter: blur(7px);
  opacity: 0;
  animation: zfx-cloud var(--t) ease-out var(--delay) both;
}
@keyframes zfx-cloud {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
  35% { opacity: .9; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.5); }
}
.zfx-slice {
  left: -5%; top: var(--y); width: 110%; height: var(--h);
  background: linear-gradient(90deg, transparent, #7df9ffb8, #fff, #a78bfa99, transparent);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(0);
  animation: zfx-slice var(--t) steps(2,end) var(--delay) both;
}
@keyframes zfx-slice {
  0%,100% { opacity: 0; transform: translateX(0); }
  25%,60% { opacity: .85; transform: translateX(var(--sx)); }
}
.hero-art.is-playing .energy-ring { opacity: .35; }
.hero-art.is-settled .hero-logo-btn .hero-logo {
  animation: z-settle-glow 2.4s ease-in-out infinite alternate;
}
@media (max-width: 600px) {
  .hero-art { min-height: 260px; }
  .hero-logo-btn { width: min(74%, 280px); }
  .hero-logo-btn .hero-logo { max-height: 190px; }
  .zfx-spark { height: 1.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art.is-settled .hero-logo-btn .hero-logo { animation: none; }
  .zfx { animation-duration: .01ms !important; }
}


/* ===== ZISOR exported Flow video integration ===== */
.hero-art {
  cursor: pointer;
  isolation: isolate;
}
.hero-animation-video {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  pointer-events: none;
  background: #05070d;
  transition: opacity 220ms ease;
}
.hero-art.is-video-playing .hero-animation-video {
  opacity: 1;
}
.hero-art.is-video-playing .hero-logo,
.hero-art.is-video-playing .energy-ring,
.hero-art.is-video-playing .art-caption {
  opacity: 0;
  visibility: hidden;
}
.hero-art.is-video-playing::before,
.hero-art.is-video-playing::after {
  opacity: 0;
}
.hero-art .hero-logo,
.hero-art .energy-ring,
.hero-art .art-caption {
  transition: opacity 220ms ease;
}
.hero-art.is-video-ready:not(.is-video-playing) .hero-animation-video {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .hero-animation-video { display: none; }
}