:root {
  --bg: #020711;
  --bg-soft: #06101f;
  --panel: rgba(8, 20, 36, .72);
  --panel-strong: #071626;
  --line: rgba(117, 194, 255, .16);
  --line-strong: rgba(108, 204, 255, .38);
  --text: #f5fbff;
  --muted: #8ca8bd;
  --cyan: #50efff;
  --blue: #168bff;
  --violet: #6556ff;
  --green: #3ef0a8;
  --shadow: 0 25px 80px rgba(0,0,0,.42);
  --radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  position: relative;
  color: var(--text);
  background:
    radial-gradient(circle at 52% -10%, rgba(25, 115, 255, .15), transparent 34%),
    radial-gradient(circle at 0% 25%, rgba(49, 223, 255, .07), transparent 26%),
    linear-gradient(180deg, #020711 0%, #030a15 46%, #020711 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

#loky-space {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -4;
  opacity: .56;
}

.ambient {
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: -3;
  opacity: .12;
}
.ambient-a { background: #1399ff; top: 16vh; right: -260px; animation:ambientDriftA 16s ease-in-out infinite alternate; }
.ambient-b { background: #4d3bff; bottom: 6vh; left: -300px; animation:ambientDriftB 19s ease-in-out infinite alternate; }
@keyframes ambientDriftA { to { transform:translate3d(-90px,80px,0) scale(1.16); opacity:.18; } }
@keyframes ambientDriftB { to { transform:translate3d(110px,-70px,0) scale(1.12); opacity:.17; } }

body::before {
  content:""; position:fixed; inset:-30%; pointer-events:none; z-index:-2; opacity:.22;
  background:conic-gradient(from 160deg at 50% 50%, transparent 0 24%, rgba(33,183,255,.08) 31%, transparent 38% 63%, rgba(103,82,255,.07) 70%, transparent 78%);
  filter:blur(90px); animation:skyRotate 34s linear infinite;
}
@keyframes skyRotate { to { transform:rotate(360deg) scale(1.04); } }

.cursor-aura {
  position:fixed; left:0; top:0; width:320px; height:320px; border-radius:50%; pointer-events:none; z-index:1;
  transform:translate3d(-999px,-999px,0); opacity:0; transition:opacity .22s ease;
  background:radial-gradient(circle,rgba(62,219,255,.11) 0%,rgba(28,132,255,.045) 38%,transparent 70%);
  filter:blur(8px); mix-blend-mode:screen;
}
.cursor-aura.active{opacity:1;}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 74px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 14px clamp(20px, 4vw, 72px);
  border-bottom: 1px solid rgba(105, 183, 255, .11);
  background: linear-gradient(180deg, rgba(2,7,17,.90), rgba(2,7,17,.66));
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; }
.brand-paw { width: 40px; height: 40px; filter: drop-shadow(0 0 16px rgba(40,191,255,.38)); animation:brandBreath 4.8s ease-in-out infinite; }
@keyframes brandBreath{50%{filter:drop-shadow(0 0 24px rgba(52,216,255,.72));transform:translateY(-1px) scale(1.035)}}
.mini-paw svg { width: 100%; height: 100%; display: block; }
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy strong { letter-spacing: .19em; font-size: 16px; }
.brand-copy small { color: var(--muted); font-size: 11px; margin-top: 4px; }

.main-nav { display: flex; align-items: center; gap: 30px; color: #a8becf; font-size: 14px; }
.main-nav a { position: relative; transition: color .2s ease; }
.main-nav a::after { content:""; position:absolute; left:50%; right:50%; bottom:-9px; height:1px; background:linear-gradient(90deg,var(--cyan),var(--blue)); transition: left .25s ease, right .25s ease; }
.main-nav a:hover { color:#fff; }
.main-nav a:hover::after { left:0; right:0; }

.nav-actions { justify-self: end; display:flex; gap:10px; }
.primary-button, .secondary-button, .ghost-button, .tiny-button {
  border: 0;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.primary-button {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 13px 20px;
  background: linear-gradient(135deg, #3ceeff 0%, #148cff 47%, #5c57ff 100%);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 34px rgba(17, 130, 255, .25), inset 0 1px rgba(255,255,255,.28);
}
.primary-button::before { content:""; position:absolute; width:80px; height:180%; top:-40%; left:-120px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.33), transparent); transform:rotate(18deg); transition:left .6s ease; }
.primary-button:hover::before { left: calc(100% + 70px); }
.primary-button:hover { transform: translateY(-2px); box-shadow:0 16px 44px rgba(17,130,255,.37); }
.primary-button.compact { padding: 11px 16px; font-size: 13px; }
.primary-button.large, .secondary-button.large { padding: 15px 22px; min-height: 52px; }
.primary-button.large span { opacity:.8; margin-left:8px; font-weight:700; }
.secondary-button, .ghost-button {
  border: 1px solid rgba(130, 203, 255, .18);
  border-radius: 14px;
  background: rgba(8,23,41,.5);
  color: #d9ecf9;
  padding: 13px 20px;
  backdrop-filter: blur(12px);
}
.secondary-button:hover, .ghost-button:hover { border-color: rgba(80,239,255,.48); background: rgba(12,35,60,.74); transform:translateY(-2px); }

.section-shell { width: min(1220px, calc(100% - 40px)); margin-inline: auto; }
.section-space { padding: 112px 0; }

.hero {
  min-height: calc(100vh - 74px);
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: clamp(30px, 6vw, 88px);
  padding-top: 62px;
  padding-bottom: 72px;
}
.eyebrow { color:#79cde9; text-transform:uppercase; letter-spacing:.17em; font-size:12px; font-weight:800; }
.pulse-dot { width:7px; height:7px; display:inline-block; border-radius:50%; background:var(--green); margin-right:8px; box-shadow:0 0 0 0 rgba(62,240,168,.4); animation:pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 10px rgba(62,240,168,0); } 100% { box-shadow:0 0 0 0 rgba(62,240,168,0); } }

.hero h1 { font-size: clamp(54px, 6.5vw, 96px); letter-spacing:-.055em; line-height:.95; margin:20px 0 24px; max-width:850px; }
.text-glow { background:linear-gradient(90deg,#73f6ff 0%,#26b7ff 50%,#8c7cff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 30px rgba(37,150,255,.12)); }
.hero-lead { max-width:680px; color:#a1b7c9; font-size:clamp(18px,2vw,22px); line-height:1.6; margin:0; }
.hero-actions { display:flex; gap:12px; margin-top:36px; flex-wrap:wrap; }
.trust-row { display:flex; flex-wrap:wrap; gap:18px; margin-top:28px; color:#819bb0; font-size:12px; }
.trust-row span { display:inline-flex; align-items:center; gap:7px; }
.trust-row i { width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }

.hero-stage { position:relative; min-height:590px; display:grid; place-items:center; perspective:1100px; isolation:isolate; }
.hero-stage::before { content:""; position:absolute; width:70%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(26,155,255,.18), rgba(39,79,255,.05) 40%, transparent 70%); filter:blur(10px); }
.hero-paw-wrap { position:relative; width:250px; height:250px; display:grid; place-items:center; transform-style:preserve-3d; animation:levitate 4.4s ease-in-out infinite; transition:transform .22s ease-out; z-index:5; }
.hero-paw { width:190px; height:190px; filter:drop-shadow(0 12px 25px rgba(0,0,0,.35)) drop-shadow(0 0 28px rgba(25,169,255,.62)); transform:translateZ(60px) rotateX(-3deg); }
.paw-aura { position:absolute; inset:38px; border-radius:50%; background:radial-gradient(circle,rgba(72,220,255,.23),rgba(27,109,255,.12) 35%,transparent 68%); filter:blur(18px); animation:aura 3.4s ease-in-out infinite; }
.paw-shadow { position:absolute; width:155px; height:38px; left:50%; bottom:-48px; transform:translateX(-50%) rotateX(70deg); border-radius:50%; background:radial-gradient(ellipse, rgba(32,133,255,.35), rgba(0,0,0,0) 72%); filter:blur(8px); animation:shadowPulse 4.4s ease-in-out infinite; }
@keyframes levitate { 0%,100%{ transform:translateY(7px) rotateY(-5deg) rotateX(3deg);} 50%{transform:translateY(-22px) rotateY(6deg) rotateX(-3deg);} }
@keyframes shadowPulse { 0%,100%{ transform:translateX(-50%) scaleX(.92); opacity:.35;} 50%{transform:translateX(-50%) scaleX(.7); opacity:.18;} }
@keyframes aura { 0%,100%{opacity:.62; transform:scale(.94);} 50%{opacity:1; transform:scale(1.08);} }

.orbit { position:absolute; border-radius:50%; border:1px solid rgba(97,206,255,.20); box-shadow:inset 0 0 30px rgba(41,130,255,.03); transform-style:preserve-3d; }
.orbit::after { content:""; position:absolute; width:8px; height:8px; border-radius:50%; top:12%; left:18%; background:var(--cyan); box-shadow:0 0 18px var(--cyan); }
.orbit-1 { width:410px; height:410px; transform:rotateX(70deg) rotateZ(16deg); animation:orbitSpin 17s linear infinite; }
.orbit-2 { width:510px; height:510px; border-color:rgba(109,92,255,.18); transform:rotateY(68deg) rotateZ(-18deg); animation:orbitSpinRev 24s linear infinite; }
.orbit-3 { width:350px; height:350px; border-style:dashed; border-color:rgba(72,188,255,.12); transform:rotateX(55deg) rotateY(35deg); animation:orbitSpin 30s linear infinite; }
@keyframes orbitSpin { to { transform:rotateX(70deg) rotateZ(376deg);} }
@keyframes orbitSpinRev { to { transform:rotateY(68deg) rotateZ(-378deg);} }

.glass-card { background:linear-gradient(180deg,rgba(12,30,50,.72),rgba(5,15,28,.78)); border:1px solid rgba(117,194,255,.17); box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.04); backdrop-filter:blur(18px); }
.stage-caption { position:absolute; right:3%; bottom:10%; width:220px; padding:18px; border-radius:20px; display:grid; gap:5px; z-index:7; transform:rotateY(-8deg) translateZ(30px); animation:captionFloat 5.6s ease-in-out infinite; }
@keyframes captionFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
.stage-caption strong { font-size:14px; }
.stage-caption small { color:var(--muted); }
.live-pill { font-size:10px; color:#79f8c4; letter-spacing:.1em; text-transform:uppercase; display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.live-pill i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }

.marquee-strip { overflow:hidden; border-block:1px solid rgba(114,190,255,.10); background:rgba(5,15,28,.55); padding:14px 0; }
.marquee-track { width:max-content; display:flex; align-items:center; gap:22px; color:#62849f; font-size:11px; font-weight:800; letter-spacing:.18em; animation:marquee 34s linear infinite; }
.marquee-track b { color:#2ccfff; font-size:9px; }
@keyframes marquee { to{ transform:translateX(-50%);} }

.section-heading { max-width:900px; margin-bottom:48px; }
.section-heading h2, .experience-copy h2, .security-copy h2, .owner-copy h2, .pilot-copy h2, .final-cta h2 { font-size:clamp(38px,5vw,64px); line-height:1.03; letter-spacing:-.045em; margin:16px 0 20px; }
.section-heading p, .experience-copy p, .security-copy p, .owner-copy p, .pilot-copy p { color:#91aabe; font-size:17px; line-height:1.65; max-width:760px; }

.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.gradient-border { --mx:50%; --my:50%; position:relative; isolation:isolate; transition:box-shadow .28s ease, filter .28s ease; }
.gradient-border::before { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.25px; background:radial-gradient(310px circle at var(--mx) var(--my), rgba(232,252,255,1) 0%, rgba(75,235,255,.98) 9%, rgba(34,151,255,.62) 31%, rgba(108,75,255,.30) 52%, rgba(112,188,255,.11) 72%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:4; opacity:.62; transition:opacity .24s ease, filter .24s ease; }
.gradient-border:hover::before, .gradient-border:focus-within::before, .gradient-border.is-focus::before { opacity:1; filter:drop-shadow(0 0 7px rgba(73,229,255,.95)) drop-shadow(0 0 20px rgba(30,132,255,.55)); }
.gradient-border:hover, .gradient-border:focus-within, .gradient-border.is-focus { box-shadow:0 30px 78px rgba(0,0,0,.34), 0 0 26px rgba(54,211,255,.13), 0 0 62px rgba(36,107,255,.10); }
.feature-card { min-height:390px; border-radius:26px; padding:28px; overflow:hidden; background:linear-gradient(145deg,rgba(9,25,43,.87),rgba(5,15,27,.91)); border:1px solid rgba(112,188,255,.08); box-shadow:0 24px 60px rgba(0,0,0,.22); transform-style:preserve-3d; transition:transform .2s ease, box-shadow .25s ease; }
.feature-card::after { content:""; position:absolute; width:210px; height:210px; border-radius:50%; top:-120px; right:-80px; background:radial-gradient(circle,rgba(47,176,255,.15),transparent 68%); }
.feature-card:hover { box-shadow:0 34px 82px rgba(0,0,0,.38),0 0 34px rgba(62,221,255,.15),0 0 72px rgba(18,129,255,.11); }
.card-kicker { color:#6e8ba2; font-size:10px; letter-spacing:.16em; font-weight:800; }
.feature-icon { font-size:38px; margin:38px 0 54px; color:#80eeff; text-shadow:0 0 25px rgba(71,218,255,.45); }
.feature-card h3 { font-size:25px; margin:0 0 12px; }
.feature-icon{transition:transform .34s cubic-bezier(.2,.8,.2,1),filter .34s ease;}
.feature-card:hover .feature-icon{transform:translateY(-7px) scale(1.07) rotate(-2deg);filter:drop-shadow(0 0 18px rgba(74,224,255,.58));}
.feature-card p { color:#89a3b8; line-height:1.6; margin:0; }
.micro-wave { display:flex; align-items:center; gap:5px; height:42px; margin-top:26px; }
.micro-wave i { width:4px; border-radius:10px; background:linear-gradient(180deg,var(--cyan),var(--blue)); animation:wave 1.2s ease-in-out infinite; }
.micro-wave i:nth-child(1),.micro-wave i:nth-child(7){height:10px}.micro-wave i:nth-child(2),.micro-wave i:nth-child(6){height:24px}.micro-wave i:nth-child(3),.micro-wave i:nth-child(5){height:35px}.micro-wave i:nth-child(4){height:18px}.micro-wave i:nth-child(2n){animation-delay:-.35s}.micro-wave i:nth-child(3n){animation-delay:-.7s}
@keyframes wave { 50%{ transform:scaleY(.45); opacity:.55;} }
.mini-flow { margin-top:30px; display:flex; gap:9px; align-items:center; flex-wrap:wrap; color:#6f91ab; font-size:11px; }
.mini-flow span { padding:7px 9px; border-radius:9px; border:1px solid rgba(99,189,255,.14); background:rgba(11,34,56,.5); }
.mini-flow b { color:#3ddcff; }
.mini-metrics { display:flex; gap:10px; margin-top:24px; }
.mini-metrics span { display:grid; gap:2px; min-width:62px; padding:10px 12px; border-radius:12px; background:rgba(8,29,48,.65); border:1px solid rgba(107,190,255,.12); }
.mini-metrics b { color:#8defff; font-size:16px; }.mini-metrics small{color:#64819a;font-size:9px;text-transform:uppercase;}

.experience-section { position:relative; overflow:hidden; background:linear-gradient(180deg,transparent,rgba(8,22,38,.38),transparent); border-block:1px solid rgba(99,179,255,.07); }
.experience-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; }
.check-list { list-style:none; padding:0; margin:28px 0 0; display:grid; gap:12px; color:#b5c8d7; }
.check-list li::before { content:"✦"; color:var(--cyan); margin-right:10px; }
.interactive-stack { min-height:600px; position:relative; perspective:1200px; transform-style:preserve-3d; }
.stack-card { position:absolute; width:76%; min-height:205px; border-radius:28px; padding:28px; display:flex; flex-direction:column; justify-content:flex-end; cursor:pointer; outline:none; background:linear-gradient(145deg,rgba(10,29,49,.97),rgba(4,13,25,.98)); border:1px solid rgba(111,192,255,.12); box-shadow:0 28px 70px rgba(0,0,0,.34); transform-style:preserve-3d; transition:transform .34s cubic-bezier(.2,.8,.2,1), opacity .28s ease, box-shadow .28s ease; }
.stack-card::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg,rgba(255,255,255,.05),transparent 32%,rgba(50,190,255,.035) 70%,transparent); pointer-events:none; opacity:.65; transition:opacity .25s ease; }
.stack-card span { font-size:10px; color:#66dfff; letter-spacing:.18em; font-weight:800; }
.stack-card strong { font-size:25px; margin-top:10px; }.stack-card small{color:#728fa7;margin-top:5px;}
.stack-back { top:16px; left:18%; transform:rotateZ(4deg) rotateY(-7deg) translateZ(-55px); opacity:.68; z-index:1; }
.stack-mid { top:188px; left:7%; transform:rotateZ(-3deg) rotateY(6deg) translateZ(-8px); opacity:.86; z-index:2; }
.stack-front { top:360px; left:20%; transform:rotateZ(1.2deg) rotateY(-2deg) translateZ(42px); opacity:1; z-index:3; }
.stack-back:hover,.stack-back:focus,.stack-back.is-focus{transform:rotateZ(2deg) rotateY(-3deg) translate3d(0,-10px,35px) scale(1.025);opacity:1;z-index:8;box-shadow:0 32px 76px rgba(0,0,0,.46),0 0 24px rgba(79,232,255,.30),0 0 62px rgba(25,126,255,.18),inset 0 0 24px rgba(69,220,255,.035);}
.stack-mid:hover,.stack-mid:focus,.stack-mid.is-focus{transform:rotateZ(-1deg) rotateY(2deg) translate3d(0,-10px,48px) scale(1.025);opacity:1;z-index:8;box-shadow:0 32px 76px rgba(0,0,0,.46),0 0 24px rgba(79,232,255,.30),0 0 62px rgba(25,126,255,.18),inset 0 0 24px rgba(69,220,255,.035);}
.stack-front:hover,.stack-front:focus,.stack-front.is-focus{transform:rotateZ(0deg) rotateY(0deg) translate3d(0,-10px,60px) scale(1.025);opacity:1;z-index:8;box-shadow:0 32px 76px rgba(0,0,0,.46),0 0 24px rgba(79,232,255,.30),0 0 62px rgba(25,126,255,.18),inset 0 0 24px rgba(69,220,255,.035);}
.stack-card:hover::after,.stack-card:focus::after,.stack-card.is-focus::after{opacity:1;}

.security-panel { border-radius:32px; min-height:470px; display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:30px; padding:48px; background:linear-gradient(145deg,rgba(7,23,40,.92),rgba(4,12,23,.95)); border:1px solid rgba(104,190,255,.08); overflow:hidden; }
.security-visual { position:relative; min-height:350px; display:grid; place-items:center; perspective:1000px; }
.shield-ring { position:absolute; border-radius:50%; border:1px solid rgba(76,208,255,.18); }
.ring-a{width:280px;height:280px;animation:secureSpin 16s linear infinite}.ring-b{width:210px;height:210px;border-style:dashed;animation:secureSpinRev 10s linear infinite}.ring-c{width:145px;height:145px;border-color:rgba(107,81,255,.32);animation:securePulse 3s ease-in-out infinite}
.lock-core { width:90px;height:90px;border-radius:26px;display:grid;place-items:center;font-size:42px;color:#73efff;background:linear-gradient(145deg,#0b2943,#071524);border:1px solid rgba(80,224,255,.35);box-shadow:0 0 50px rgba(29,148,255,.2),inset 0 0 30px rgba(51,190,255,.07);transform:translateZ(50px);}
@keyframes secureSpin{to{transform:rotate(360deg)}}@keyframes secureSpinRev{to{transform:rotate(-360deg)}}@keyframes securePulse{50%{transform:scale(1.08);opacity:.55}}
.security-points { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.security-points span { border:1px solid rgba(104,190,255,.12); background:rgba(8,29,48,.45); border-radius:999px; padding:9px 12px; color:#9ab5c8; font-size:12px; }

.owner-section { background:radial-gradient(circle at 80% 50%,rgba(31,99,255,.08),transparent 35%); }
.owner-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:60px; }
.owner-login-demo { position:relative; min-height:520px; display:grid; place-items:center; perspective:1000px; }
.login-orbit { position:absolute; width:380px; height:270px; border:2px solid transparent; border-radius:50%; filter:drop-shadow(0 0 14px currentColor); opacity:.65; }
.orbit-login-1 { color:#30dfff; border-color:rgba(48,223,255,.56); transform:rotate(18deg); animation:loginRing1 9s linear infinite; }
.orbit-login-2 { color:#346dff; border-color:rgba(52,109,255,.55); transform:rotate(-28deg); animation:loginRing2 11s linear infinite; }
.orbit-login-3 { color:#765cff; border-color:rgba(118,92,255,.45); transform:rotate(65deg); animation:loginRing3 13s linear infinite; }
@keyframes loginRing1{50%{transform:rotate(198deg) scaleX(.94);}}@keyframes loginRing2{50%{transform:rotate(-208deg) scaleY(.93);}}@keyframes loginRing3{50%{transform:rotate(245deg) scaleX(.9);}}
.owner-console { position:relative; z-index:3; width:min(340px,80%); border-radius:26px; padding:28px; display:grid; gap:12px; box-shadow:0 30px 90px rgba(0,0,0,.5),0 0 60px rgba(28,123,255,.08); }
.owner-console strong { font-size:25px; margin:8px 0 4px; }
.owner-badge, .pilot-tag { width:max-content; font-size:9px; letter-spacing:.16em; font-weight:900; color:#72e9ff; background:rgba(31,165,255,.10); border:1px solid rgba(72,218,255,.16); border-radius:999px; padding:7px 9px; }
.fake-field { border:1px solid rgba(108,187,255,.13); background:rgba(4,14,26,.55); border-radius:11px; padding:12px 13px; color:#8ea7bb; font-size:12px; }.fake-field.muted{letter-spacing:.12em;color:#637f96}.fake-login{margin-top:4px;}

.pilot-card { border-radius:34px; padding:48px; display:grid; grid-template-columns:1fr 320px; gap:50px; align-items:center; background:linear-gradient(135deg,rgba(10,31,52,.94),rgba(6,16,30,.96)); border:1px solid rgba(113,197,255,.08); box-shadow:0 30px 90px rgba(0,0,0,.32); overflow:hidden; transform-style:preserve-3d; }
.pilot-card::after { content:""; position:absolute; width:520px;height:520px;border-radius:50%;right:-260px;top:-290px;background:radial-gradient(circle,rgba(60,210,255,.15),rgba(56,88,255,.06) 40%,transparent 70%);pointer-events:none; }
.pilot-meta { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin-top:28px; color:#9db4c6; font-size:12px; }
.pilot-meta span::first-letter { color:var(--green); }
.pilot-price { position:relative; z-index:2; min-height:300px; border-radius:26px; padding:30px; overflow:visible; background:linear-gradient(145deg,#081d32,#061220); border:1px solid rgba(93,196,255,.18); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow:inset 0 1px rgba(255,255,255,.05),0 0 0 rgba(48,214,255,0); animation:priceBreath 5s ease-in-out infinite; }
.pilot-price::before{content:"";position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,rgba(57,217,255,.12),rgba(40,104,255,.04) 45%,transparent 72%);filter:blur(18px);pointer-events:none;animation:priceAura 4.5s ease-in-out infinite;}
.pilot-price small { position:relative;z-index:1;color:#86a7be; letter-spacing:.18em; font-weight:900; }
.price-number{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:center;gap:7px;min-width:150px;margin:10px 0 4px;overflow:visible;}
.price-number strong{display:block;font-size:92px;line-height:1;font-weight:900;letter-spacing:0;background:linear-gradient(180deg,#ffffff 10%,#8ae7ff 88%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(84,219,255,.18));padding:0 .04em .04em;}
.price-number sup{position:relative;top:10px;font-size:30px;line-height:1;color:#e9fbff;font-weight:800;margin:0;}
.pilot-price span{position:relative;z-index:1;font-size:11px;color:#758ea3;margin-bottom:24px;}
.pilot-price .primary-button{position:relative;z-index:1;}
@keyframes priceBreath{50%{box-shadow:inset 0 1px rgba(255,255,255,.07),0 0 34px rgba(53,210,255,.10),0 0 70px rgba(63,75,255,.06)}}
@keyframes priceAura{50%{transform:scale(1.14);opacity:.78}}

.final-cta { padding-top:60px; }
.final-cta-inner { min-height:260px; border-top:1px solid rgba(107,191,255,.12); display:grid; grid-template-columns:auto 1fr auto; gap:30px; align-items:center; }
.final-paw { width:88px;height:88px;filter:drop-shadow(0 0 24px rgba(36,165,255,.35));animation:levitate 5s ease-in-out infinite; }.final-paw svg{width:100%;height:100%}.final-cta-inner>div:nth-child(2)>span{color:#67bfe5;font-size:10px;letter-spacing:.18em;font-weight:900}.final-cta h2{font-size:clamp(32px,4vw,52px);margin:8px 0 0;}

.site-footer { width:min(1220px,calc(100% - 40px)); margin:0 auto; min-height:110px; border-top:1px solid rgba(107,191,255,.09); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; color:#607c92; font-size:11px; }
.footer-brand{display:flex;align-items:baseline;gap:8px}.footer-brand strong{color:#dcecf7;letter-spacing:.18em}.site-footer nav{justify-self:end;display:flex;gap:18px}.site-footer a:hover{color:#dcecf7}

.modal { width:min(760px,calc(100% - 28px)); padding:0; border:0; border-radius:30px; color:var(--text); background:transparent; overflow:visible; }
.modal::backdrop { background:rgba(0,5,12,.78); backdrop-filter:blur(13px); }
.modal-shell { position:relative; border-radius:30px; padding:38px; background:linear-gradient(145deg,rgba(9,29,49,.98),rgba(4,13,25,.99)); border:1px solid rgba(102,199,255,.22); box-shadow:0 35px 110px rgba(0,0,0,.62),0 0 70px rgba(15,122,255,.10); }
.modal-shell h2 { font-size:38px; margin:16px 0 10px; letter-spacing:-.04em; }.modal-shell>p{color:#91aabe;line-height:1.55;}
.modal-close { position:absolute; right:18px; top:16px; width:36px;height:36px;border:1px solid rgba(122,197,255,.13);border-radius:50%;background:rgba(6,17,30,.6);color:#a9c0d2;font-size:25px;cursor:pointer; }
.modal-paw { width:70px;height:70px;margin-bottom:12px;filter:drop-shadow(0 0 20px rgba(44,182,255,.32));animation:levitate 4.5s ease-in-out infinite; }
.preview-form { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:24px; }
.preview-form label { display:grid;gap:7px;color:#7894a9;font-size:11px; }.preview-form label:nth-child(3){grid-column:1/-1}.preview-form button{grid-column:1/-1;margin-top:4px;}
.preview-form input { width:100%; border:1px solid rgba(109,190,255,.14); border-radius:12px; padding:13px 14px; color:#eaf7ff; background:rgba(3,12,23,.65); outline:none; }.preview-form input:focus{border-color:rgba(65,224,255,.5);box-shadow:0 0 0 3px rgba(33,161,255,.08)}
.modal-note { margin-top:18px; color:#5e7c93; font-size:10px; }
.owner-modal-shell{width:100%}.owner-preview-table{display:grid;margin-top:24px;border:1px solid rgba(102,190,255,.12);border-radius:16px;overflow:hidden}.owner-preview-row{display:grid;grid-template-columns:1.2fr 1fr .8fr .7fr;gap:12px;align-items:center;padding:13px 14px;border-top:1px solid rgba(102,190,255,.08);font-size:11px;color:#9fb6c8}.owner-preview-row.header{border-top:0;background:rgba(11,35,57,.55);color:#6d8ca5;font-size:9px;letter-spacing:.1em;text-transform:uppercase}.status-active{color:#5ef0b0}.status-paused{color:#f4b05f}.tiny-button{padding:7px 9px;border-radius:9px;border:1px solid rgba(100,190,255,.16);background:rgba(7,25,42,.7);font-size:10px}.tiny-button:hover{border-color:#53dcff}

.toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); padding:12px 16px; border-radius:13px; background:#092039; border:1px solid rgba(85,213,255,.22); color:#dff8ff; font-size:12px; box-shadow:0 20px 50px rgba(0,0,0,.35); opacity:0; pointer-events:none; z-index:99; transition:opacity .25s ease, transform .25s ease; }.toast.show{opacity:1;transform:translate(-50%,0)}

.reveal { opacity:0; transform:translateY(24px); transition:opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1); }.reveal.visible{opacity:1;transform:translateY(0)}

@media (max-width: 960px) {
  .site-header{grid-template-columns:1fr auto}.main-nav{display:none}.nav-actions .ghost-button{display:none}
  .hero{grid-template-columns:1fr; min-height:auto; text-align:center; padding-top:75px}.hero-copy{display:flex;flex-direction:column;align-items:center}.hero-stage{min-height:500px}.stage-caption{right:6%;bottom:5%}
  .feature-grid{grid-template-columns:1fr}.feature-card{min-height:330px}.feature-icon{margin:26px 0 36px}
  .experience-grid,.owner-grid{grid-template-columns:1fr;gap:40px}.interactive-stack{min-height:590px}.security-panel{grid-template-columns:1fr;padding:34px}.security-visual{min-height:300px}.pilot-card{grid-template-columns:1fr}.pilot-price{min-height:260px}.final-cta-inner{grid-template-columns:auto 1fr}.final-cta-inner>.primary-button{grid-column:1/-1;width:100%}.site-footer{grid-template-columns:1fr auto}.site-footer p{display:none}
}

@media (max-width: 640px) {
  .site-header{padding:12px 16px}.brand-copy small{display:none}.nav-actions{display:none}.section-shell{width:min(100% - 28px,1220px)}.section-space{padding:82px 0}
  .hero{padding-top:52px}.hero h1{font-size:52px}.hero-lead{font-size:17px}.hero-actions{width:100%;display:grid}.hero-actions button{width:100%}.trust-row{justify-content:center}
  .hero-stage{min-height:430px}.hero-paw-wrap{width:190px;height:190px}.hero-paw{width:150px;height:150px}.orbit-1{width:310px;height:310px}.orbit-2{width:390px;height:390px}.orbit-3{width:270px;height:270px}.stage-caption{width:190px;padding:14px;right:1%}
  .section-heading h2,.experience-copy h2,.security-copy h2,.owner-copy h2,.pilot-copy h2{font-size:40px}.feature-card{padding:23px}.experience-grid{gap:20px}.interactive-stack{min-height:500px}.stack-card{width:86%;min-height:165px;padding:22px}.stack-back{top:0;left:8%}.stack-mid{top:158px;left:5%}.stack-front{left:8%;top:316px}.security-panel{padding:24px}.security-visual{min-height:250px}.ring-a{width:230px;height:230px}.ring-b{width:175px;height:175px}
  .owner-login-demo{min-height:430px}.login-orbit{width:310px;height:230px}.pilot-card{padding:26px;gap:30px}.pilot-meta{grid-template-columns:1fr}.final-cta-inner{grid-template-columns:1fr;text-align:center;justify-items:center;padding:40px 0}.site-footer{grid-template-columns:1fr;text-align:center;padding:25px 0}.site-footer nav{justify-self:center}.preview-form{grid-template-columns:1fr}.preview-form label:nth-child(3),.preview-form button{grid-column:auto}.modal-shell{padding:28px 22px}.owner-preview-row{grid-template-columns:1fr 1fr}.owner-preview-row span:nth-child(2){display:none}.owner-preview-row.header span:nth-child(2){display:none}
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
  .reveal{opacity:1;transform:none}
}


/* Preview V2 polish: livelier light without changing product semantics. */
.glass-card,.pilot-card,.security-panel,.owner-console{position:relative;}
.glass-card::after,.owner-console::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 0 36%,rgba(114,237,255,.045) 48%,transparent 60%);background-size:220% 100%;animation:glassSheen 8s ease-in-out infinite;}
@keyframes glassSheen{0%,65%,100%{background-position:200% 0}82%{background-position:-80% 0}}
.primary-button,.secondary-button,.ghost-button{will-change:transform;}
.primary-button:active,.secondary-button:active,.ghost-button:active{transform:translateY(0) scale(.985);}
.section-heading .eyebrow,.experience-copy .eyebrow,.owner-copy .eyebrow,.security-copy .eyebrow{filter:drop-shadow(0 0 10px rgba(72,220,255,.16));}
.hero-stage::after{content:"";position:absolute;width:78%;height:1px;bottom:13%;left:11%;background:linear-gradient(90deg,transparent,rgba(69,221,255,.35),rgba(73,107,255,.22),transparent);box-shadow:0 0 16px rgba(58,194,255,.16);animation:energyLine 5.6s ease-in-out infinite;}
@keyframes energyLine{0%,100%{opacity:.24;transform:scaleX(.76)}50%{opacity:.72;transform:scaleX(1)}}

.feature-card:hover{background:linear-gradient(145deg,rgba(10,31,52,.96),rgba(5,16,30,.96));}
.stack-card:hover,.stack-card:focus,.stack-card.is-focus{border-color:rgba(101,224,255,.30);}

/* ============================================================
   PREVIEW V3 — holographic LOKY paw + independent 3-card motion
   Visual-only layer. No application/runtime integration.
   ============================================================ */

/* Keep the hero visual geometrically centered even while the inner art tilts. */
.hero-stage{position:relative;overflow:visible;}
.hero-paw-anchor{
  position:absolute;
  left:50%;
  top:46%;
  width:min(560px,86%);
  aspect-ratio:1.2/1;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index:4;
}
.hero-paw-wrap{
  position:relative;
  width:min(470px,92%);
  height:auto;
  aspect-ratio:1.27/1;
  display:grid;
  place-items:center;
  transform-style:preserve-3d;
  animation:holoLevitate 5.2s cubic-bezier(.45,.05,.55,.95) infinite;
  transition:transform .22s ease-out;
  z-index:5;
  pointer-events:auto;
}
.hero-paw-hologram{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  mix-blend-mode:screen;
  filter:
    saturate(1.12)
    brightness(1.08)
    drop-shadow(0 18px 34px rgba(0,0,0,.42))
    drop-shadow(0 0 16px rgba(79,235,255,.45))
    drop-shadow(0 0 42px rgba(29,126,255,.30));
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 48%,#000 58%,rgba(0,0,0,.92) 69%,rgba(0,0,0,.35) 83%,transparent 98%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 48%,#000 58%,rgba(0,0,0,.92) 69%,rgba(0,0,0,.35) 83%,transparent 98%);
  transform:translateZ(58px) scale(1.04);
  animation:holoBreath 4.2s ease-in-out infinite;
}
.hero-paw-wrap::before{
  content:"";
  position:absolute;
  width:66%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(91,244,255,.18),rgba(26,132,255,.10) 38%,transparent 70%);
  filter:blur(10px);
  animation:holoCorePulse 3.2s ease-in-out infinite;
  transform:translateZ(10px);
}
.hero-paw-wrap::after{
  content:"";
  position:absolute;
  width:78%;
  height:22%;
  bottom:5%;
  border-radius:50%;
  border:1px solid rgba(77,231,255,.34);
  box-shadow:0 0 22px rgba(74,226,255,.24),inset 0 0 24px rgba(45,149,255,.12);
  transform:rotateX(73deg) translateZ(-12px);
  animation:holoPlatform 4s ease-in-out infinite;
}
.paw-aura{
  position:absolute;
  inset:9% 13%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(65,221,255,.12),rgba(41,123,255,.08) 40%,transparent 72%);
  filter:blur(9px);
  animation:holoAura 4.8s ease-in-out infinite;
}
.paw-shadow{
  position:absolute;
  width:54%;
  height:11%;
  left:50%;
  bottom:5%;
  transform:translateX(-50%) rotateX(70deg);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(58,204,255,.43),rgba(22,105,255,.12) 44%,rgba(0,0,0,0) 74%);
  filter:blur(9px);
  animation:holoShadow 5.2s ease-in-out infinite;
}
.paw-scanline{
  position:absolute;
  left:17%;right:17%;height:2px;top:18%;
  background:linear-gradient(90deg,transparent,rgba(167,252,255,.28),#82f6ff,rgba(69,156,255,.3),transparent);
  box-shadow:0 0 14px rgba(88,235,255,.42);
  opacity:.0;
  animation:holoScan 5.8s ease-in-out infinite;
  z-index:8;
}
.holo-particle{position:absolute;width:5px;height:5px;border-radius:50%;background:#8ff8ff;box-shadow:0 0 14px #4de5ff,0 0 28px rgba(45,127,255,.8);opacity:.65;}
.hp-a{left:12%;top:28%;animation:holoParticleA 5.4s ease-in-out infinite;}
.hp-b{right:10%;top:33%;animation:holoParticleB 6.2s ease-in-out infinite .7s;}
.hp-c{left:21%;bottom:20%;animation:holoParticleB 5.7s ease-in-out infinite 1.2s;}
.hp-d{right:18%;bottom:18%;animation:holoParticleA 6.4s ease-in-out infinite .3s;}

@keyframes holoLevitate{0%,100%{translate:0 7px;}50%{translate:0 -10px;}}
@keyframes holoBreath{0%,100%{scale:1;opacity:.96;}50%{scale:1.018;opacity:1;}}
@keyframes holoCorePulse{0%,100%{opacity:.48;scale:.94;}50%{opacity:.9;scale:1.08;}}
@keyframes holoAura{0%,100%{opacity:.48;scale:.95;}50%{opacity:.92;scale:1.08;}}
@keyframes holoPlatform{0%,100%{opacity:.45;scale:.94;}50%{opacity:.9;scale:1.06;}}
@keyframes holoShadow{0%,100%{opacity:.62;scale:1.05;}50%{opacity:.28;scale:.78;}}
@keyframes holoScan{0%,15%,100%{top:18%;opacity:0;}25%{opacity:.85;}64%{top:77%;opacity:.46;}75%{opacity:0;}}
@keyframes holoParticleA{0%,100%{translate:0 8px;opacity:.2;}50%{translate:13px -18px;opacity:.9;}}
@keyframes holoParticleB{0%,100%{translate:0 -6px;opacity:.25;}50%{translate:-15px 18px;opacity:.85;}}

/* Caption now shares the visual center line instead of pulling the paw sideways. */
.hero-stage .stage-caption{left:50%;right:auto;bottom:4%;transform:translateX(-50%);width:min(250px,72%);}

/* Three cards are clearly separated, keep their own depth, and float independently. */
.interactive-stack{min-height:650px;}
.stack-card{
  width:70%;
  min-height:168px;
  padding:26px 28px;
  translate:0 0;
  transition:transform .34s cubic-bezier(.2,.8,.2,1),translate .28s ease,opacity .28s ease,box-shadow .28s ease,border-color .28s ease;
  will-change:translate,filter;
}
.stack-back{top:0;left:22%;transform:rotateZ(3deg) rotateY(-5deg) translateZ(-42px);opacity:.78;z-index:1;animation:stackFloatA 5.8s ease-in-out infinite;}
.stack-mid{top:212px;left:6%;transform:rotateZ(-2deg) rotateY(4deg) translateZ(4px);opacity:.92;z-index:2;animation:stackFloatB 5.1s ease-in-out infinite .5s;}
.stack-front{top:424px;left:20%;transform:rotateZ(1deg) rotateY(-2deg) translateZ(38px);opacity:1;z-index:3;animation:stackFloatC 5.5s ease-in-out infinite 1s;}
.stack-card:hover,.stack-card:focus,.stack-card.is-focus{
  animation-play-state:paused;
  translate:0 -9px;
  opacity:1;
  border-color:rgba(101,224,255,.42);
  box-shadow:0 32px 76px rgba(0,0,0,.46),0 0 30px rgba(79,232,255,.34),0 0 72px rgba(25,126,255,.20),inset 0 0 28px rgba(69,220,255,.045);
}
.stack-back:hover,.stack-back:focus,.stack-back.is-focus{transform:rotateZ(2deg) rotateY(-2deg) translateZ(-18px) scale(1.018);z-index:1;}
.stack-mid:hover,.stack-mid:focus,.stack-mid.is-focus{transform:rotateZ(-1deg) rotateY(1deg) translateZ(18px) scale(1.018);z-index:2;}
.stack-front:hover,.stack-front:focus,.stack-front.is-focus{transform:rotateZ(.2deg) rotateY(0deg) translateZ(48px) scale(1.018);z-index:3;}
@keyframes stackFloatA{0%,100%{translate:0 0;}50%{translate:5px -8px;}}
@keyframes stackFloatB{0%,100%{translate:0 0;}50%{translate:-5px 9px;}}
@keyframes stackFloatC{0%,100%{translate:0 0;}50%{translate:7px -10px;}}

@media (max-width:900px){
  .hero-paw-anchor{top:45%;width:min(520px,92%)}
  .hero-paw-wrap{width:min(430px,96%)}
  .hero-stage .stage-caption{bottom:2%}
  .interactive-stack{min-height:580px}
  .stack-card{width:86%;min-height:150px;padding:21px}
  .stack-back{top:0;left:8%}
  .stack-mid{top:190px;left:3%}
  .stack-front{top:380px;left:9%}
}
@media (max-width:560px){
  .hero-stage{min-height:480px}
  .hero-paw-anchor{top:43%;width:108%}
  .hero-paw-wrap{width:100%}
  .hero-stage .stage-caption{bottom:0}
  .interactive-stack{min-height:535px}
  .stack-card{width:92%;min-height:132px;border-radius:22px;padding:18px}
  .stack-card strong{font-size:20px}
  .stack-back{top:0;left:4%}
  .stack-mid{top:172px;left:1%}
  .stack-front{top:344px;left:5%}
}
@media (prefers-reduced-motion:reduce){
  .hero-paw-wrap,.hero-paw-hologram,.hero-paw-wrap::before,.hero-paw-wrap::after,.paw-aura,.paw-shadow,.paw-scanline,.holo-particle,.stack-card{animation:none!important;}
}

/* ============================================================
   PREVIEW V4 — frameless hologram, no atom/orbit rings
   Visual-only. Keeps the approved application baseline untouched.
   ============================================================ */
.hero-stage > .orbit{display:none!important;}
.hero-stage::before{
  width:74%;
  background:radial-gradient(circle,rgba(35,183,255,.18),rgba(29,91,255,.055) 43%,transparent 72%);
  animation:heroFieldBreath 5.6s ease-in-out infinite;
}
.hero-paw-anchor{
  top:44%;
  width:min(590px,90%);
  aspect-ratio:1.16/1;
  overflow:visible;
}
.hero-paw-wrap{
  width:min(470px,88%);
  aspect-ratio:1.27/1;
  overflow:visible;
  background:transparent!important;
}
.hero-paw-hologram{
  width:100%;height:100%;object-fit:contain;
  mix-blend-mode:normal;
  opacity:1;
  -webkit-mask-image:radial-gradient(ellipse 72% 78% at 50% 49%,#000 0 70%,rgba(0,0,0,.84) 80%,rgba(0,0,0,.18) 94%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 78% at 50% 49%,#000 0 70%,rgba(0,0,0,.84) 80%,rgba(0,0,0,.18) 94%,transparent 100%);
  filter:saturate(1.2) brightness(1.12) contrast(1.04)
    drop-shadow(0 16px 34px rgba(0,0,0,.34))
    drop-shadow(0 0 18px rgba(91,243,255,.50))
    drop-shadow(0 0 48px rgba(19,136,255,.30));
  animation:holoBreathV4 4.4s ease-in-out infinite;
}
.paw-ambient-layer{
  position:absolute;
  inset:-2% -3% -2% -3%;
  display:grid;place-items:center;
  pointer-events:none;
  z-index:3;
  animation:ambientHover 7.8s ease-in-out infinite;
}
.hero-paw-ambient{
  width:100%;height:100%;object-fit:contain;
  opacity:.72;
  filter:saturate(1.28) brightness(1.14) blur(.15px)
    drop-shadow(0 0 18px rgba(79,232,255,.34))
    drop-shadow(0 0 52px rgba(25,113,255,.20));
  -webkit-mask-image:radial-gradient(ellipse 63% 72% at 50% 48%,transparent 0 52%,rgba(0,0,0,.20) 59%,#000 72% 88%,transparent 100%);
  mask-image:radial-gradient(ellipse 63% 72% at 50% 48%,transparent 0 52%,rgba(0,0,0,.20) 59%,#000 72% 88%,transparent 100%);
  animation:ambientTech 9.5s ease-in-out infinite;
}
/* No atomic rings: only the original HUD detail, light and particles remain alive. */
.hero-paw-wrap::before{
  width:72%;
  background:radial-gradient(circle,rgba(82,238,255,.16),rgba(27,132,255,.07) 43%,transparent 72%);
  animation:holoCorePulseV4 3.8s ease-in-out infinite;
}
.hero-paw-wrap::after{
  width:70%;height:16%;bottom:1%;
  border:1px solid rgba(91,238,255,.30);
  box-shadow:0 0 20px rgba(91,235,255,.20),inset 0 0 20px rgba(48,148,255,.10);
  animation:holoPlatformV4 4.6s ease-in-out infinite;
}
.paw-aura{inset:10% 10%;filter:blur(18px);opacity:.65;animation:holoAuraV4 4.8s ease-in-out infinite;}
.paw-scanline{left:24%;right:24%;animation:holoScanV4 6.4s ease-in-out infinite;}
.holo-particle{z-index:7;width:4px;height:4px;box-shadow:0 0 12px #5eeeff,0 0 28px rgba(52,130,255,.72);}
.hp-a{left:9%;top:31%;}.hp-b{right:8%;top:38%;}.hp-c{left:18%;bottom:18%;}.hp-d{right:16%;bottom:21%;}
.hp-e{left:48%;top:5%;animation:holoParticleC 6.7s ease-in-out infinite .4s;}
.hp-f{right:31%;bottom:7%;animation:holoParticleC 7.2s ease-in-out infinite 1.1s;}
.hero-stage .stage-caption{
  left:50%;right:auto;bottom:-1%;
  transform:translateX(-50%);
  width:min(250px,72%);
  animation:captionFloatCentered 5.8s ease-in-out infinite;
  z-index:9;
}
@keyframes heroFieldBreath{0%,100%{opacity:.6;transform:scale(.96)}50%{opacity:1;transform:scale(1.05)}}
@keyframes holoBreathV4{0%,100%{transform:translateZ(58px) scale(1.01);filter:saturate(1.16) brightness(1.08) drop-shadow(0 0 17px rgba(91,243,255,.42)) drop-shadow(0 0 42px rgba(19,136,255,.25));}50%{transform:translateZ(62px) scale(1.035);filter:saturate(1.25) brightness(1.17) drop-shadow(0 0 26px rgba(103,249,255,.62)) drop-shadow(0 0 58px rgba(22,139,255,.34));}}
@keyframes ambientHover{0%,100%{transform:translate3d(0,3px,0) scale(.995)}50%{transform:translate3d(0,-6px,0) scale(1.018)}}
@keyframes ambientTech{0%,100%{transform:rotate(-.8deg) scale(.99);opacity:.54}35%{transform:rotate(.55deg) scale(1.025);opacity:.83}70%{transform:rotate(-.25deg) scale(1.01);opacity:.68}}
@keyframes holoCorePulseV4{0%,100%{opacity:.38;transform:translateZ(10px) scale(.94)}50%{opacity:.78;transform:translateZ(10px) scale(1.08)}}
@keyframes holoAuraV4{0%,100%{opacity:.38;transform:scale(.94)}50%{opacity:.78;transform:scale(1.09)}}
@keyframes holoPlatformV4{0%,100%{opacity:.32;transform:rotateX(73deg) translateZ(-12px) scale(.94)}50%{opacity:.76;transform:rotateX(73deg) translateZ(-12px) scale(1.05)}}
@keyframes holoScanV4{0%,18%,100%{top:21%;opacity:0}27%{opacity:.68}65%{top:75%;opacity:.34}76%{opacity:0}}
@keyframes holoParticleC{0%,100%{transform:translate3d(0,8px,0) scale(.7);opacity:.12}45%{transform:translate3d(8px,-18px,0) scale(1.2);opacity:.88}70%{transform:translate3d(-5px,-7px,0) scale(.9);opacity:.4}}
@keyframes captionFloatCentered{0%,100%{transform:translateX(-50%) translateY(2px)}50%{transform:translateX(-50%) translateY(-5px)}}
@media (max-width:900px){.hero-paw-anchor{top:43%;width:min(560px,94%)}.hero-stage .stage-caption{bottom:-2%}}
@media (max-width:560px){.hero-paw-anchor{top:42%;width:112%}.hero-stage .stage-caption{bottom:-1%}}
@media (prefers-reduced-motion:reduce){.paw-ambient-layer,.hero-paw-ambient{animation:none!important;}}

/* ============================================================
   PREVIEW V5 — native frameless hologram (SVG, no photo layer)
   The hero paw is now vector-native: transparent by construction.
   ============================================================ */
.hero-paw-anchor{top:45%;width:min(610px,96%);aspect-ratio:1/1;}
.hero-paw-wrap{
  width:min(540px,94%);aspect-ratio:1/1;
  display:grid;place-items:center;overflow:visible;background:transparent!important;
  animation:v5Levitate 5.2s ease-in-out infinite;
  cursor:crosshair;
}
.loky-holo-paw{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 24px 34px rgba(0,0,0,.36));}
.paw-shape{fill:url(#pawFillV5);stroke:url(#pawEdgeV5);stroke-width:7;vector-effect:non-scaling-stroke;transition:filter .25s ease,stroke-width .25s ease,fill .25s ease;}
.toe{stroke-width:6.4;}
.paw-body{transform-origin:300px 305px;animation:v5PawBreath 4.2s ease-in-out infinite;}
.inner-circuits{opacity:.74;transition:opacity .2s ease;}
.circuit-path{fill:none;stroke:url(#circuitV5);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10 7;animation:v5CircuitTravel 7s linear infinite;transition:stroke-width .2s ease,opacity .2s ease,filter .2s ease;}
.brain-a{stroke-width:4.2;stroke-dasharray:16 8;animation-duration:8.5s}.brain-b{stroke-width:2.8;stroke-dasharray:8 9;animation-direction:reverse;}
.circuit-nodes circle{fill:#c7ffff;stroke:#5feeff;stroke-width:2;filter:drop-shadow(0 0 7px #7ef7ff);animation:v5NodePulse 2.4s ease-in-out infinite;transform-origin:center;}
.circuit-nodes circle:nth-child(2n){animation-delay:.55s}.circuit-nodes circle:nth-child(3n){animation-delay:1.05s}
.paw-pointer-glow{opacity:0;mix-blend-mode:screen;pointer-events:none;transition:opacity .18s ease;}
.hero-paw-wrap:hover .paw-pointer-glow{opacity:.95;}
.hero-paw-wrap:hover .inner-circuits{opacity:1;}
.hero-paw-wrap:hover .circuit-path{stroke-width:4.35;filter:drop-shadow(0 0 6px #b7ffff) drop-shadow(0 0 16px #49cfff);}
.hero-paw-wrap:hover .paw-shape{stroke-width:8;filter:drop-shadow(0 0 7px #bdfcff) drop-shadow(0 0 20px #2abaff) drop-shadow(0 0 42px rgba(62,108,255,.7));}
.hero-paw-wrap:hover .paw-body{animation-duration:2.8s;}

.hud{transform-origin:300px 305px;pointer-events:none;}
.hud-ring,.hud-arc{fill:none;stroke:#55dfff;stroke-opacity:.28;stroke-width:1.45;vector-effect:non-scaling-stroke;}
.hud-ring-a{stroke-dasharray:4 16;animation:v5HudSpin 18s linear infinite;transform-origin:300px 305px;}
.hud-ring-b{stroke-dasharray:38 8 3 12;stroke-opacity:.19;animation:v5HudSpinReverse 24s linear infinite;transform-origin:300px 305px;}
.hud-ring-c{stroke-dasharray:1 13;stroke-opacity:.16;animation:v5HudSpin 30s linear infinite;transform-origin:300px 305px;}
.hud-arc{stroke-width:2.1;stroke-dasharray:70 18 9 34;stroke-opacity:.36;filter:drop-shadow(0 0 5px rgba(65,225,255,.6));}
.hud-arc-a{animation:v5ArcPulse 4.8s ease-in-out infinite}.hud-arc-b{animation:v5ArcPulse 4.8s ease-in-out infinite 1.6s}
.orbit-node-wrap{transform-origin:300px 305px;}
.orbit-node-one{animation:v5NodeOrbit 8s linear infinite}.orbit-node-two{animation:v5NodeOrbitReverse 11s linear infinite}.orbit-node-three{animation:v5NodeOrbit 14s linear infinite reverse}
.orbit-node{fill:#a9ffff;stroke:#36d7ff;stroke-width:2;filter:drop-shadow(0 0 7px #61edff) drop-shadow(0 0 16px #258fff);animation:v5OrbBreathe 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
.orbit-node-alt{fill:#74a7ff;stroke:#66e9ff;}
.tick-cloud circle{fill:#65eaff;opacity:.64;filter:drop-shadow(0 0 5px #4feaff);animation:v5TickBlink 3s ease-in-out infinite;}
.tick-cloud circle:nth-child(2n){animation-delay:.8s}.tick-cloud circle:nth-child(3n){animation-delay:1.4s}
.foreground-sparks .spark{fill:#c8ffff;filter:drop-shadow(0 0 7px #5eefff);animation:v5Spark 4.8s ease-in-out infinite;transform-origin:center;}
.s2{animation-delay:.8s!important}.s3{animation-delay:1.6s!important}.s4{animation-delay:2.2s!important}.s5{animation-delay:3.1s!important}
.holo-platform-fill{opacity:.88;filter:blur(1px);animation:v5PlatformGlow 3.8s ease-in-out infinite;}
.holo-platform-line{fill:none;stroke:#65ecff;stroke-width:2;stroke-opacity:.44;filter:drop-shadow(0 0 7px #42dfff);transform-origin:300px 526px;}
.platform-line-one{stroke-dasharray:28 12 3 14;animation:v5PlatformSpin 12s linear infinite}.platform-line-two{stroke-dasharray:16 9;animation:v5PlatformSpinReverse 9s linear infinite}
.hero-stage .stage-caption{left:auto!important;right:0!important;bottom:17%!important;transform:none!important;width:min(240px,48%);animation:v5CaptionFloat 5.8s ease-in-out infinite;}

@keyframes v5Levitate{0%,100%{transform:translateY(7px)}50%{transform:translateY(-12px)}}
@keyframes v5PawBreath{0%,100%{transform:scale(.99);opacity:.95}50%{transform:scale(1.018);opacity:1}}
@keyframes v5CircuitTravel{to{stroke-dashoffset:-170}}
@keyframes v5NodePulse{0%,100%{transform:scale(.78);opacity:.64}50%{transform:scale(1.26);opacity:1}}
@keyframes v5HudSpin{to{transform:rotate(360deg)}}
@keyframes v5HudSpinReverse{to{transform:rotate(-360deg)}}
@keyframes v5ArcPulse{0%,100%{stroke-opacity:.16}50%{stroke-opacity:.58}}
@keyframes v5NodeOrbit{to{transform:rotate(360deg)}}
@keyframes v5NodeOrbitReverse{to{transform:rotate(-360deg)}}
@keyframes v5OrbBreathe{0%,100%{transform:scale(.82);opacity:.66}50%{transform:scale(1.32);opacity:1}}
@keyframes v5TickBlink{0%,100%{opacity:.18}50%{opacity:.9}}
@keyframes v5Spark{0%,100%{transform:translate(0,7px) scale(.68);opacity:.18}45%{transform:translate(8px,-14px) scale(1.25);opacity:1}70%{transform:translate(-4px,-5px) scale(.9);opacity:.44}}
@keyframes v5PlatformGlow{0%,100%{opacity:.42;transform:scaleX(.93)}50%{opacity:.96;transform:scaleX(1.05)}}
@keyframes v5PlatformSpin{to{transform:rotate(360deg)}}
@keyframes v5PlatformSpinReverse{to{transform:rotate(-360deg)}}
@keyframes v5CaptionFloat{0%,100%{transform:translateY(2px)}50%{transform:translateY(-7px)}}

/* Neutralize the old bitmap hero layers from V3/V4. */
.hero-paw-hologram,.paw-ambient-layer,.hero-paw-ambient,.paw-shadow,.paw-aura,.paw-scanline,.holo-particle{display:none!important;}
.hero-paw-wrap::before,.hero-paw-wrap::after{content:none!important;display:none!important;}

@media (max-width:900px){
  .hero-paw-anchor{top:43%;width:min(570px,98%)}
  .hero-stage .stage-caption{right:2%!important;bottom:10%!important;width:210px}
}
@media (max-width:560px){
  .hero-stage{min-height:500px}
  .hero-paw-anchor{top:42%;width:116%}
  .hero-stage .stage-caption{right:4%!important;bottom:2%!important;width:190px;padding:13px}
}
@media (prefers-reduced-motion:reduce){
  .hero-paw-wrap,.paw-body,.circuit-path,.circuit-nodes circle,.hud-ring,.hud-arc,.orbit-node-wrap,.orbit-node,.tick-cloud circle,.foreground-sparks .spark,.holo-platform-fill,.holo-platform-line,.hero-stage .stage-caption{animation:none!important;}
}


/* ============================================================
   PREVIEW V6 — approved-reference hero art, frameless blend
   Uses the exact approved visual reference for the paw rather than
   approximating its geometry in SVG. Outer edges are feathered in
   the asset and the page adds only motion/light overlays.
   ============================================================ */
.hero-reference-stage{min-height:650px;display:grid;place-items:center;overflow:visible;}
.approved-hero-art{
  --hx:50%;--hy:50%;
  position:relative;
  width:min(760px,112%);
  aspect-ratio:948/775;
  display:grid;place-items:center;
  transform-origin:50% 54%;
  animation:v6ReferenceLevitate 5.4s ease-in-out infinite;
  will-change:transform,filter;
  isolation:isolate;
}
.approved-hero-image{
  width:100%;height:100%;object-fit:contain;display:block;
  user-select:none;pointer-events:none;
  filter:saturate(1.03) brightness(1.02) drop-shadow(0 30px 36px rgba(0,0,0,.20));
  transition:filter .25s ease, transform .25s ease;
}
.approved-hover-light{
  position:absolute;inset:8% 8% 10%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle 120px at var(--hx) var(--hy),rgba(255,255,255,.38),rgba(83,235,255,.20) 18%,rgba(43,137,255,.10) 35%,transparent 62%);
  mix-blend-mode:screen;opacity:0;transition:opacity .2s ease;z-index:3;
}
.approved-hero-art:hover .approved-hover-light{opacity:1;}
.approved-hero-art:hover .approved-hero-image{
  filter:saturate(1.10) brightness(1.08) drop-shadow(0 0 16px rgba(111,248,255,.22)) drop-shadow(0 28px 38px rgba(0,0,0,.22));
}
.live-orb,.live-spark{position:absolute;display:block;border-radius:50%;pointer-events:none;z-index:4;}
.live-orb{width:9px;height:9px;background:#9dffff;box-shadow:0 0 8px #8bffff,0 0 22px #29cfff,0 0 44px rgba(31,109,255,.75);}
.orb-a{left:22%;top:30%;animation:v6OrbA 6.8s ease-in-out infinite;}
.orb-b{right:20%;top:36%;width:7px;height:7px;animation:v6OrbB 7.6s ease-in-out infinite .8s;}
.orb-c{left:31%;bottom:21%;width:6px;height:6px;animation:v6OrbC 6.2s ease-in-out infinite 1.4s;}
.orb-d{right:29%;bottom:18%;width:11px;height:11px;background:#70b9ff;animation:v6OrbD 8.1s ease-in-out infinite .3s;}
.live-spark{width:3px;height:3px;background:#d8ffff;box-shadow:0 0 9px #62eeff;opacity:.45;}
.spark-a{left:17%;top:47%;animation:v6Spark 4.8s ease-in-out infinite;}
.spark-b{right:13%;top:52%;animation:v6Spark 5.6s ease-in-out infinite 1.2s;}
.spark-c{left:47%;bottom:10%;animation:v6Spark 5.1s ease-in-out infinite 2.1s;}
@keyframes v6ReferenceLevitate{0%,100%{transform:translate3d(0,8px,0) scale(.995)}50%{transform:translate3d(0,-12px,0) scale(1.008)}}
@keyframes v6OrbA{0%,100%{transform:translate(0,7px) scale(.7);opacity:.35}50%{transform:translate(28px,-22px) scale(1.25);opacity:1}}
@keyframes v6OrbB{0%,100%{transform:translate(0,-5px) scale(.85);opacity:.25}50%{transform:translate(-25px,18px) scale(1.35);opacity:.95}}
@keyframes v6OrbC{0%,100%{transform:translate(-5px,0) scale(.8);opacity:.22}50%{transform:translate(17px,-31px) scale(1.2);opacity:1}}
@keyframes v6OrbD{0%,100%{transform:translate(0,4px) scale(.68);opacity:.3}45%{transform:translate(-19px,-26px) scale(1.15);opacity:1}75%{transform:translate(8px,-11px) scale(.88);opacity:.55}}
@keyframes v6Spark{0%,100%{transform:translateY(8px);opacity:.12}45%{transform:translate(10px,-18px);opacity:1}72%{transform:translate(-4px,-8px);opacity:.35}}

/* Disable every previous hero-art implementation; only approved V6 art remains. */
.hero-reference-stage .hero-paw-anchor,.hero-reference-stage .stage-caption,.hero-reference-stage .loky-holo-paw{display:none!important;}

@media (max-width:900px){.hero-reference-stage{min-height:560px}.approved-hero-art{width:min(680px,115%)}}
@media (max-width:560px){.hero-reference-stage{min-height:470px}.approved-hero-art{width:126%}}
@media (prefers-reduced-motion:reduce){.approved-hero-art,.live-orb,.live-spark{animation:none!important;}}

/* ============================================================
   PREVIEW V7 — TRUE FRAMELESS PAW
   The hero asset is an actual transparent PNG extracted from the
   approved hologram. There is no rectangular photo background.
   ============================================================ */
.hero-reference-stage{min-height:650px;overflow:visible;}
.approved-hero-art{
  width:min(710px,108%);
  aspect-ratio:1360/1080;
  animation:v7Float 5.2s cubic-bezier(.42,.04,.58,.96) infinite;
  filter:none;
}
.approved-hero-image{
  width:100%;height:100%;object-fit:contain;
  mix-blend-mode:screen;
  filter:saturate(1.08) brightness(1.06)
         drop-shadow(0 0 15px rgba(90,240,255,.22))
         drop-shadow(0 24px 34px rgba(0,0,0,.22));
  transform:translateZ(0);
  transition:filter .22s ease, transform .22s ease;
}
.approved-hover-light{
  inset:5%;border-radius:50%;
  background:radial-gradient(circle 105px at var(--hx) var(--hy),
    rgba(255,255,255,.62) 0%,rgba(119,250,255,.34) 17%,
    rgba(36,150,255,.16) 34%,transparent 62%);
  mix-blend-mode:screen;
  opacity:0;
  filter:blur(1px);
}
.approved-hero-art:hover .approved-hover-light{opacity:1;}
.approved-hero-art:hover .approved-hero-image{
  filter:saturate(1.15) brightness(1.11)
         drop-shadow(0 0 20px rgba(116,248,255,.38))
         drop-shadow(0 0 46px rgba(31,145,255,.22))
         drop-shadow(0 26px 36px rgba(0,0,0,.20));
  transform:scale(1.012);
}
.live-orb{z-index:5;}
.orb-e{left:13%;top:37%;width:13px;height:13px;background:#78eaff;animation:v7OrbE 8.4s ease-in-out infinite .4s;}
.orb-f{right:12%;bottom:28%;width:8px;height:8px;background:#b2ffff;animation:v7OrbF 7.1s ease-in-out infinite 1.1s;}
@keyframes v7Float{0%,100%{transform:translate3d(0,9px,0) scale(.995)}50%{transform:translate3d(0,-14px,0) scale(1.006)}}
@keyframes v7OrbE{0%,100%{transform:translate(0,8px) scale(.72);opacity:.28}40%{transform:translate(42px,-24px) scale(1.22);opacity:1}72%{transform:translate(19px,9px) scale(.86);opacity:.5}}
@keyframes v7OrbF{0%,100%{transform:translate(0,-8px) scale(.78);opacity:.25}50%{transform:translate(-38px,-28px) scale(1.28);opacity:1}}
@media (max-width:900px){.approved-hero-art{width:min(650px,112%)}.hero-reference-stage{min-height:560px}}
@media (max-width:560px){.approved-hero-art{width:122%}.hero-reference-stage{min-height:470px}}
@media (prefers-reduced-motion:reduce){.approved-hero-art,.live-orb,.live-spark{animation:none!important}}

/* ============================================================
   PREVIEW V8 — native frameless hologram integration
   The paw asset has REAL alpha transparency. No photo rectangle,
   no background panel. All moving orbits/spheres live in the web.
   ============================================================ */
.hero-reference-stage{
  min-height:660px;
  overflow:visible;
  isolation:isolate;
}
.hero-reference-stage::before{
  width:82%;
  background:radial-gradient(circle at 52% 48%,rgba(44,200,255,.13),rgba(37,104,255,.055) 42%,transparent 72%)!important;
  filter:blur(24px)!important;
}
.v8-frameless-paw{
  --hx:50%; --hy:50%;
  position:relative;
  width:min(690px,108%);
  aspect-ratio:1056/950;
  display:grid;
  place-items:center;
  isolation:isolate;
  transform-origin:50% 58%;
  animation:v8Levitate 5.4s cubic-bezier(.42,.02,.58,.98) infinite;
  filter:none!important;
}
.v8-frameless-paw::before{
  content:"";
  position:absolute;
  left:18%; right:18%; bottom:8%; height:10%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(63,231,255,.30),rgba(35,133,255,.10) 42%,transparent 72%);
  filter:blur(16px);
  opacity:.9;
  animation:v8ShadowPulse 5.4s ease-in-out infinite;
  z-index:0;
}
.v8-frameless-paw .approved-hero-image{
  position:relative;
  z-index:4;
  width:100%; height:100%;
  display:block;
  object-fit:contain;
  mix-blend-mode:normal!important;
  opacity:1;
  filter:saturate(1.18) contrast(1.06) brightness(1.08)
         drop-shadow(0 0 10px rgba(95,247,255,.32))
         drop-shadow(0 0 28px rgba(32,157,255,.20))
         drop-shadow(0 24px 38px rgba(0,0,0,.24))!important;
  transition:filter .24s ease,transform .24s ease;
  pointer-events:none;
  user-select:none;
}
.v8-frameless-paw:hover .approved-hero-image{
  filter:saturate(1.30) contrast(1.08) brightness(1.16)
         drop-shadow(0 0 16px rgba(150,255,255,.52))
         drop-shadow(0 0 42px rgba(31,157,255,.34))
         drop-shadow(0 25px 38px rgba(0,0,0,.20))!important;
  transform:scale(1.012);
}
/* Cursor light is clipped by the PNG's alpha, so it only illuminates the paw/hologram. */
.v8-paw-cursor-glow{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle 120px at var(--hx) var(--hy),
      rgba(255,255,255,.92) 0%,
      rgba(120,252,255,.52) 14%,
      rgba(40,174,255,.23) 31%,
      transparent 60%);
  -webkit-mask-image:url('assets/loky-paw-clean-alpha-v9.png');
  mask-image:url('assets/loky-paw-clean-alpha-v9.png');
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-size:contain;
  mix-blend-mode:screen;
  filter:blur(.2px);
  transition:opacity .18s ease;
}
.v8-frameless-paw:hover .v8-paw-cursor-glow{opacity:1;}

/* Orbits and spheres are DOM/CSS, not baked into the image. */
.v8-orbit{
  position:absolute;
  left:50%; top:48%;
  width:74%; height:44%;
  margin-left:-37%; margin-top:-22%;
  border:1px solid rgba(67,204,255,.27);
  border-radius:50%;
  z-index:1;
  pointer-events:none;
  filter:drop-shadow(0 0 7px rgba(50,174,255,.18));
  transform-style:preserve-3d;
}
.v8-orbit::after{
  content:"";
  position:absolute;
  inset:7%;
  border-radius:50%;
  border:1px dashed rgba(95,169,255,.10);
}
.v8-orbit i,.v8-orbit b{
  position:absolute;
  display:block;
  width:13px;height:13px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#eaffff 0 8%,#72edff 28%,#167dff 68%,#5f4fff 100%);
  box-shadow:0 0 10px #76f1ff,0 0 25px rgba(32,153,255,.9),0 0 48px rgba(61,86,255,.48);
}
.v8-orbit i{left:7%;top:42%;}
.v8-orbit b{right:8%;bottom:37%;width:9px;height:9px;}
.v8-orbit-one{transform:rotate(-13deg);animation:v8OrbitOne 13s linear infinite;}
.v8-orbit-two{width:61%;height:76%;margin-left:-30.5%;margin-top:-38%;transform:rotate(72deg);border-color:rgba(96,128,255,.22);animation:v8OrbitTwo 17s linear infinite reverse;}
.v8-orbit-three{width:78%;height:57%;margin-left:-39%;margin-top:-28.5%;transform:rotate(24deg);border-color:rgba(76,232,255,.16);animation:v8OrbitThree 21s linear infinite;}
.v8-orbit-two i{width:10px;height:10px;left:18%;top:8%;}
.v8-orbit-two b{width:15px;height:15px;right:10%;bottom:18%;}
.v8-orbit-three i{width:8px;height:8px;left:46%;top:-5px;}
.v8-orbit-three b{width:11px;height:11px;right:22%;bottom:-6px;}
.v8-free-orb,.v8-spark{position:absolute;z-index:6;pointer-events:none;border-radius:50%;}
.v8-free-orb{width:8px;height:8px;background:#9effff;box-shadow:0 0 10px #75f5ff,0 0 25px #188eff;}
.free-a{left:17%;top:29%;animation:v8FreeA 7.4s ease-in-out infinite;}
.free-b{right:14%;top:36%;width:12px;height:12px;animation:v8FreeB 9s ease-in-out infinite .7s;}
.free-c{left:24%;bottom:18%;width:6px;height:6px;animation:v8FreeC 6.7s ease-in-out infinite 1.4s;}
.free-d{right:25%;bottom:14%;width:9px;height:9px;background:#75a7ff;animation:v8FreeD 8.2s ease-in-out infinite .2s;}
.v8-spark{width:3px;height:3px;background:#e6ffff;box-shadow:0 0 9px #72ecff;opacity:.5;}
.v8-spark.spark-a{left:12%;top:50%;animation:v8Spark 5s ease-in-out infinite;}
.v8-spark.spark-b{right:11%;top:54%;animation:v8Spark 5.8s ease-in-out infinite 1.3s;}
.v8-spark.spark-c{left:48%;bottom:8%;animation:v8Spark 5.4s ease-in-out infinite 2.2s;}

@keyframes v8Levitate{0%,100%{transform:translate3d(0,10px,0) rotateZ(-.18deg)}50%{transform:translate3d(0,-17px,0) rotateZ(.18deg)}}
@keyframes v8ShadowPulse{0%,100%{transform:scale(.88);opacity:.52}50%{transform:scale(1.08);opacity:.92}}
@keyframes v8OrbitOne{to{transform:rotate(347deg)}}
@keyframes v8OrbitTwo{to{transform:rotate(-288deg)}}
@keyframes v8OrbitThree{to{transform:rotate(384deg)}}
@keyframes v8FreeA{0%,100%{transform:translate(0,8px) scale(.72);opacity:.30}50%{transform:translate(34px,-26px) scale(1.25);opacity:1}}
@keyframes v8FreeB{0%,100%{transform:translate(0,-7px) scale(.75);opacity:.25}50%{transform:translate(-36px,21px) scale(1.18);opacity:1}}
@keyframes v8FreeC{0%,100%{transform:translate(-5px,0);opacity:.2}50%{transform:translate(20px,-34px) scale(1.35);opacity:.95}}
@keyframes v8FreeD{0%,100%{transform:translate(0,5px) scale(.7);opacity:.28}48%{transform:translate(-22px,-25px) scale(1.22);opacity:1}}
@keyframes v8Spark{0%,100%{transform:translateY(7px);opacity:.10}45%{transform:translate(9px,-18px);opacity:1}73%{transform:translate(-4px,-7px);opacity:.36}}

/* Turn off V6/V7 baked hover/orb layers that could look duplicated. */
.v8-frameless-paw .approved-hover-light,
.v8-frameless-paw .live-orb,
.v8-frameless-paw .live-spark{display:none!important;}

@media(max-width:900px){.hero-reference-stage{min-height:560px}.v8-frameless-paw{width:min(650px,112%)}}
@media(max-width:560px){.hero-reference-stage{min-height:470px}.v8-frameless-paw{width:120%}}
@media(prefers-reduced-motion:reduce){.v8-frameless-paw,.v8-orbit,.v8-free-orb,.v8-spark{animation:none!important}}


/* ============================================================
   PREVIEW V9 — REAL CLEAN ALPHA PAW
   Only the paw artwork remains in the PNG. No baked photo background,
   no HUD rectangle, no fog panel. Platform/orbits/particles are native web layers.
   ============================================================ */
.hero-reference-stage::before{
  display:none!important;
  content:none!important;
  background:none!important;
  filter:none!important;
}
.v9-clean-paw{
  width:min(650px,104%);
  aspect-ratio:768/753;
  overflow:visible;
  filter:none!important;
  isolation:isolate;
  animation:v9Levitate 5.6s cubic-bezier(.42,.02,.58,.98) infinite;
}
.v9-clean-paw::before{
  display:none!important;
  content:none!important;
}
.v9-clean-paw .approved-hero-image{
  z-index:5;
  width:82%;
  height:82%;
  object-fit:contain;
  transform:translateY(-2%);
  opacity:1!important;
  filter:
    saturate(1.16)
    contrast(1.09)
    brightness(1.08)
    drop-shadow(0 0 8px rgba(90,244,255,.32))
    drop-shadow(0 0 22px rgba(26,144,255,.20))!important;
  transition:filter .22s ease,transform .22s ease;
}
.v9-clean-paw:hover .approved-hero-image{
  transform:translateY(-2%) scale(1.018);
  filter:
    saturate(1.28)
    contrast(1.12)
    brightness(1.16)
    drop-shadow(0 0 12px rgba(150,255,255,.52))
    drop-shadow(0 0 30px rgba(35,151,255,.30))!important;
}
.v9-clean-paw .v8-paw-cursor-glow{
  inset:9%;
  z-index:6;
  background:radial-gradient(circle 110px at var(--hx) var(--hy),
      rgba(255,255,255,.95) 0%,
      rgba(120,252,255,.58) 13%,
      rgba(39,170,255,.24) 31%,
      transparent 59%);
  -webkit-mask-image:url('assets/loky-paw-clean-alpha-v9.png');
  mask-image:url('assets/loky-paw-clean-alpha-v9.png');
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-position:center;
  mask-position:center;
  opacity:0;
}
.v9-clean-paw:hover .v8-paw-cursor-glow{opacity:1;}

/* Native holographic platform: no raster background. */
.v9-holo-platform{
  position:absolute;
  left:50%;
  bottom:6.5%;
  width:71%;
  height:22%;
  transform:translateX(-50%);
  z-index:2;
  pointer-events:none;
  perspective:700px;
}
.v9-ring{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%) rotateX(70deg);
  border-radius:50%;
  border:1px solid rgba(72,226,255,.72);
  box-shadow:0 0 8px rgba(61,226,255,.34),inset 0 0 8px rgba(49,134,255,.22);
}
.v9-ring.ring-outer{width:100%;height:78%;animation:v9RingPulse 3.8s ease-in-out infinite;}
.v9-ring.ring-mid{width:78%;height:60%;border-style:dashed;border-color:rgba(88,143,255,.58);animation:v9RingSpin 12s linear infinite;}
.v9-ring.ring-inner{width:52%;height:42%;border-color:rgba(160,255,255,.84);box-shadow:0 0 14px rgba(55,215,255,.55);animation:v9RingPulse 2.9s ease-in-out infinite reverse;}
.v9-beam{
  position:absolute;
  bottom:48%; width:1px;
  height:115%;
  background:linear-gradient(to top,rgba(92,245,255,.88),rgba(52,148,255,.28) 48%,transparent);
  filter:drop-shadow(0 0 5px rgba(80,224,255,.8));
  opacity:.5;
  animation:v9Beam 3.4s ease-in-out infinite;
}
.v9-beam.beam-a{left:25%;}
.v9-beam.beam-b{left:50%;animation-delay:.8s;}
.v9-beam.beam-c{left:75%;animation-delay:1.6s;}

/* Keep the ambient orbits crisp and sparse. */
.v9-clean-paw .v8-orbit{z-index:1;opacity:.78;filter:none;}
.v9-clean-paw .v8-orbit::after{opacity:.55;}
.v9-clean-paw .v8-free-orb{z-index:7;}
.v9-clean-paw .v8-spark{z-index:7;}

@keyframes v9Levitate{
  0%,100%{transform:translate3d(0,8px,0)}
  50%{transform:translate3d(0,-16px,0)}
}
@keyframes v9RingPulse{
  0%,100%{opacity:.42;filter:brightness(.92)}
  50%{opacity:1;filter:brightness(1.28)}
}
@keyframes v9RingSpin{
  from{transform:translate(-50%,-50%) rotateX(70deg) rotateZ(0deg)}
  to{transform:translate(-50%,-50%) rotateX(70deg) rotateZ(360deg)}
}
@keyframes v9Beam{
  0%,100%{opacity:.18;transform:scaleY(.72)}
  50%{opacity:.65;transform:scaleY(1.02)}
}
@media(max-width:900px){.v9-clean-paw{width:min(610px,108%)}.v9-clean-paw .approved-hero-image{width:86%;height:86%}}
@media(max-width:560px){.v9-clean-paw{width:116%}.v9-clean-paw .approved-hero-image{width:90%;height:90%}}
@media(prefers-reduced-motion:reduce){.v9-clean-paw,.v9-ring,.v9-beam{animation:none!important}}

/* ============================================================
   PREVIEW V10 — HERO POLISH ONLY
   Approved V9 composition preserved. This layer adds subtle life:
   gentler levitation, internal-only energy sweep, deeper platform
   motion and six restrained light motes. No redesign, no extra panel.
   ============================================================ */
.v10-hero-polish{
  animation:v10Levitate 6.8s cubic-bezier(.45,.03,.55,.97) infinite!important;
}

/* Keep the approved paw clean. The breathing effect is intentionally tiny. */
.v10-hero-polish .approved-hero-image{
  transform:translateY(-1.6%);
  animation:v10PawBreath 5.8s ease-in-out infinite;
  transition:filter .22s ease, transform .22s ease;
}
.v10-hero-polish:hover .approved-hero-image{
  transform:translateY(-1.6%) scale(1.012);
}

/* A thin moving energy reflection clipped INSIDE the transparent paw only. */
.v10-energy-sheen{
  position:absolute;
  inset:9%;
  z-index:5;
  pointer-events:none;
  opacity:.38;
  background:
    linear-gradient(108deg,
      transparent 0 32%,
      rgba(122,248,255,.04) 36%,
      rgba(232,255,255,.33) 43%,
      rgba(94,217,255,.12) 49%,
      transparent 55% 100%);
  background-size:240% 100%;
  background-position:125% 0;
  -webkit-mask-image:url('assets/loky-paw-clean-alpha-v9.png');
  mask-image:url('assets/loky-paw-clean-alpha-v9.png');
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  mix-blend-mode:screen;
  animation:v10CircuitSweep 7.6s ease-in-out infinite;
}
.v10-hero-polish:hover .v10-energy-sheen{
  opacity:.66;
  animation-duration:4.6s;
}

/* Refine the cursor light: compact and internal, never a broad external halo. */
.v10-hero-polish .v8-paw-cursor-glow{
  inset:9%;
  background:radial-gradient(circle 92px at var(--hx) var(--hy),
    rgba(255,255,255,.84) 0%,
    rgba(133,249,255,.50) 15%,
    rgba(55,169,255,.22) 33%,
    transparent 60%);
  opacity:0;
}
.v10-hero-polish:hover .v8-paw-cursor-glow{opacity:.82;}

/* More depth under the paw, without making a fog cloud. */
.v10-hero-polish .v9-holo-platform{
  bottom:5.7%;
  width:73%;
  height:23%;
  opacity:.94;
}
.v10-hero-polish .v9-ring.ring-outer{
  border-color:rgba(72,226,255,.62);
  animation:v10OuterRing 8.8s linear infinite;
}
.v10-hero-polish .v9-ring.ring-mid{
  border-color:rgba(96,154,255,.48);
  animation:v10MidRing 16s linear infinite reverse;
}
.v10-hero-polish .v9-ring.ring-inner{
  border-color:rgba(174,255,255,.78);
  box-shadow:0 0 12px rgba(55,215,255,.42);
  animation:v10InnerPulse 4.4s ease-in-out infinite;
}
.v10-hero-polish .v9-beam{
  opacity:.34;
  animation-duration:4.8s;
}

/* Existing orbital lines remain, but become calmer and more premium. */
.v10-hero-polish .v8-orbit{opacity:.46;}
.v10-hero-polish .v8-orbit::after{opacity:.32;}
.v10-hero-polish .v8-orbit-one{animation-duration:19s;}
.v10-hero-polish .v8-orbit-two{animation-duration:24s;}
.v10-hero-polish .v8-orbit-three{animation-duration:31s;}
.v10-hero-polish .v8-orbit i,
.v10-hero-polish .v8-orbit b{
  transform:scale(.78);
  box-shadow:0 0 8px #76f1ff,0 0 18px rgba(32,153,255,.72);
}

/* Six small independent light motes near the hero. */
.v10-dust{
  position:absolute;
  inset:4%;
  z-index:7;
  pointer-events:none;
}
.v10-dust i{
  position:absolute;
  width:3px;height:3px;
  border-radius:50%;
  background:#c8ffff;
  box-shadow:0 0 7px rgba(94,237,255,.95),0 0 16px rgba(40,130,255,.62);
  opacity:.25;
}
.v10-dust i:nth-child(1){left:19%;top:35%;animation:v10MoteA 8.4s ease-in-out infinite;}
.v10-dust i:nth-child(2){left:31%;top:18%;width:4px;height:4px;animation:v10MoteB 10.2s ease-in-out infinite 1.1s;}
.v10-dust i:nth-child(3){right:22%;top:27%;animation:v10MoteC 9.6s ease-in-out infinite .7s;}
.v10-dust i:nth-child(4){right:16%;top:54%;width:4px;height:4px;animation:v10MoteA 11.4s ease-in-out infinite 1.8s;}
.v10-dust i:nth-child(5){left:23%;bottom:22%;animation:v10MoteC 10.8s ease-in-out infinite 2.2s;}
.v10-dust i:nth-child(6){right:31%;bottom:17%;animation:v10MoteB 9.1s ease-in-out infinite 2.8s;}

@keyframes v10Levitate{
  0%,100%{transform:translate3d(0,4px,0) rotateZ(-.08deg)}
  50%{transform:translate3d(0,-5px,0) rotateZ(.08deg)}
}
@keyframes v10PawBreath{
  0%,100%{filter:saturate(1.16) contrast(1.09) brightness(1.07) drop-shadow(0 0 8px rgba(90,244,255,.28)) drop-shadow(0 0 20px rgba(26,144,255,.18))}
  50%{filter:saturate(1.20) contrast(1.10) brightness(1.105) drop-shadow(0 0 10px rgba(105,248,255,.34)) drop-shadow(0 0 24px rgba(35,151,255,.22))}
}
@keyframes v10CircuitSweep{
  0%,14%{background-position:135% 0;opacity:.18}
  42%{opacity:.42}
  66%{background-position:-35% 0;opacity:.34}
  100%{background-position:-35% 0;opacity:.18}
}
@keyframes v10OuterRing{
  from{transform:translate(-50%,-50%) rotateX(70deg) rotateZ(0deg);opacity:.46}
  50%{opacity:.78}
  to{transform:translate(-50%,-50%) rotateX(70deg) rotateZ(360deg);opacity:.46}
}
@keyframes v10MidRing{
  from{transform:translate(-50%,-50%) rotateX(70deg) rotateZ(0deg)}
  to{transform:translate(-50%,-50%) rotateX(70deg) rotateZ(-360deg)}
}
@keyframes v10InnerPulse{
  0%,100%{opacity:.48;filter:brightness(.94);transform:translate(-50%,-50%) rotateX(70deg) scale(.97)}
  50%{opacity:.92;filter:brightness(1.17);transform:translate(-50%,-50%) rotateX(70deg) scale(1.025)}
}
@keyframes v10MoteA{
  0%,100%{transform:translate3d(0,8px,0) scale(.72);opacity:.16}
  45%{transform:translate3d(16px,-17px,0) scale(1.25);opacity:.9}
  72%{transform:translate3d(7px,-5px,0) scale(.9);opacity:.38}
}
@keyframes v10MoteB{
  0%,100%{transform:translate3d(0,-4px,0) scale(.78);opacity:.14}
  52%{transform:translate3d(-14px,15px,0) scale(1.2);opacity:.82}
}
@keyframes v10MoteC{
  0%,100%{transform:translate3d(-4px,5px,0) scale(.68);opacity:.14}
  48%{transform:translate3d(13px,-20px,0) scale(1.16);opacity:.88}
}

@media (prefers-reduced-motion:reduce){
  .v10-hero-polish,.v10-hero-polish .approved-hero-image,.v10-energy-sheen,
  .v10-hero-polish .v9-ring,.v10-hero-polish .v9-beam,.v10-dust i{
    animation:none!important;
  }
}

/* V12 Pilot email verification — functional-only modal additions. */
.otp-form[hidden]{display:none!important}.otp-form{margin-top:14px}.otp-form .otp-label{grid-column:1/-1}.otp-form input{letter-spacing:.28em;text-align:center;font-weight:700}.modal-note.is-ok{color:#77e7c1}.modal-note.is-error{color:#ff9caa}.primary-button[disabled]{opacity:.55;cursor:wait;transform:none!important}


/* V13 Pilot Owner Control - additive web-only layer */
.pilot-account-panel{margin-top:16px;padding:16px;border:1px solid rgba(92,201,255,.15);border-radius:14px;background:rgba(4,17,31,.55)}
.pilot-account-title{font-size:9px;letter-spacing:.16em;color:#63dfff;font-weight:800}.pilot-account-state{margin-top:8px;color:#a9c4d7;font-size:11px;line-height:1.55}.pilot-account-state strong{color:#eefaff}.pilot-account-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:13px}.pilot-account-actions button{font-size:10px}
.owner-auth-panel{margin-top:18px;padding:16px;border:1px solid rgba(92,201,255,.12);border-radius:16px;background:rgba(4,17,31,.4)}.owner-auth-form{margin-top:0;grid-template-columns:1fr}.owner-auth-form label,.owner-auth-form button{grid-column:auto!important}.owner-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:20px 0 12px;color:#8fb2c9;font-size:10px}.owner-toolbar>div{display:flex;gap:8px;flex-wrap:wrap}.owner-refresh,.owner-signout{padding:8px 10px;font-size:9px}.owner-empty{padding:18px;color:#67869d;font-size:10px}.owner-client{display:grid;gap:3px}.owner-client strong{font-size:11px;color:#dff5ff}.owner-client small{font-size:8px;color:#65869d;overflow:hidden;text-overflow:ellipsis}.owner-actions{display:flex;gap:5px;flex-wrap:wrap}.owner-actions .tiny-button{white-space:nowrap}.status-pending{color:#7bc9ff}.status-rejected{color:#ffba70}.status-revoked{color:#ff8e9c}.owner-preview-row[data-row]{grid-template-columns:1.35fr .9fr .7fr 1.3fr}.owner-license{display:grid;gap:2px}.owner-license small{color:#59778e;font-size:8px}.owner-note{width:100%;margin-top:10px;border:1px solid rgba(109,190,255,.14);border-radius:10px;padding:10px 11px;color:#dff5ff;background:rgba(3,12,23,.65);outline:none;font-size:10px}.owner-note:focus{border-color:rgba(65,224,255,.45)}
@media(max-width:760px){.owner-toolbar{align-items:flex-start;flex-direction:column}.owner-preview-row[data-row]{grid-template-columns:1fr 1fr}.owner-preview-row[data-row]>span:nth-child(2){display:none}.owner-actions{grid-column:1/-1}.pilot-account-actions{display:grid}.pilot-account-actions button{width:100%}}