/* ═════════════════════════════════════════════════════════════
   ZookaGit website
   ═════════════════════════════════════════════════════════════ */
:root {
  --zg-bg: #05060d; --zg-bg-2: #0a0d1c; --zg-panel: #0e1220; --zg-raised: #151a2c; --zg-border: #1f2640; --zg-border-2: #2c3557;
  --zg-text: #e8ebf5; --zg-dim: #94a0bd; --zg-faint: #5d6888;
  --zg-accent: #8b5cf6; --zg-blue: #38bdf8; --zg-cyan: #22d3ee; --zg-green: #34d399; --zg-orange: #fb923c; --zg-pink: #f472b6;
  --zg-grad: linear-gradient(100deg, #38bdf8 0%, #8b5cf6 45%, #f472b6 70%, #fb923c 100%);
  --zg-ease: cubic-bezier(.16, 1, .3, 1);
  --zg-radius: 18px;
  --bs-body-bg: var(--zg-bg); --bs-body-color: var(--zg-text); --bs-border-color: var(--zg-border);
  --bs-link-color: #93c5fd; --bs-link-hover-color: #bfdbfe; --bs-body-font-family: Inter, "Segoe UI", system-ui, sans-serif;
}
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  background: radial-gradient(1200px 700px at 50% -10%, #142257 0%, transparent 60%), var(--zg-bg);
  font-family: Inter, "Segoe UI", system-ui, sans-serif; min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
main { flex: 1; }
::selection { background: rgba(139, 92, 246, .45); color: #fff; }
.text-orange { color: var(--zg-orange); }
.text-dim { color: var(--zg-dim) !important; }
code { color: #f0abfc; }
.zg-page { padding-top: 110px; padding-bottom: 3rem; }
.zg-skip { position: fixed; top: .5rem; left: .5rem; z-index: 2000; background: #fff; color: #000; padding: .5rem 1rem; border-radius: 8px; }

/* scroll progress */
.zg-scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1100; background: var(--zg-grad); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); box-shadow: 0 0 12px rgba(139, 92, 246, .8); }

/* ── nav ── */
.zg-nav { padding: 1rem 0; transition: padding .4s var(--zg-ease), background .4s, border-color .4s, box-shadow .4s; border-bottom: 1px solid transparent; }
.zg-nav.scrolled, .zg-nav:has(.show) { padding: .5rem 0; background: rgba(6, 8, 18, .72); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-color: rgba(255, 255, 255, .06); box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
body:not(.zg-landing) .zg-nav { background: rgba(6, 8, 18, .72); backdrop-filter: blur(18px); border-color: rgba(255, 255, 255, .06); }
.zg-brand { font-weight: 800; letter-spacing: -.02em; color: #fff; }
.zg-brand-img { border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 20px rgba(56, 189, 248, .25); }
.zg-nav .nav-link { color: #c7cee0; font-weight: 500; position: relative; padding-inline: .85rem !important; }
.zg-nav .nav-link:hover, .zg-nav .nav-link:focus { color: #fff; }
.zg-nav-links .nav-link::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .2rem; height: 2px; border-radius: 2px; background: var(--zg-grad); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--zg-ease); }
.zg-nav-links .nav-link:hover::after { transform: scaleX(1); }
.zg-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .8rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--zg-accent), var(--zg-blue)); }
.dropdown-menu { background: #0e1220; border: 1px solid var(--zg-border-2); border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }

/* ── buttons ── */
.btn-primary, .zg-btn-primary { background: linear-gradient(135deg, #7c5cff, #4f8bff); border: 0; color: #fff; font-weight: 600; border-radius: 12px; }
.btn-primary:hover, .zg-btn-primary:hover { color: #fff; filter: brightness(1.12); }
.zg-btn-primary { display: inline-flex; align-items: center; gap: .55rem; }
.zg-btn-glow { position: relative; isolation: isolate; box-shadow: 0 10px 30px -8px rgba(124, 92, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .3s var(--zg-ease), box-shadow .3s, filter .3s; }
.zg-btn-glow::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: conic-gradient(from var(--ang, 0deg), #38bdf8, #8b5cf6, #f472b6, #fb923c, #38bdf8); filter: blur(10px); opacity: .55; animation: zg-spin 4s linear infinite; }
.zg-btn-glow:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(124, 92, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .3); }
.zg-btn-ghost { color: #e8ebf5; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .03); backdrop-filter: blur(8px); border-radius: 12px; font-weight: 600; transition: background .3s, border-color .3s, transform .3s var(--zg-ease); }
.zg-btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); transform: translateY(-2px); }
.btn-outline-light { border-color: #2c3557; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes zg-spin { to { --ang: 360deg; } }

/* ── app pages (dashboard, forms) ── */
.card, .zg-card { background: var(--zg-panel); border: 1px solid var(--zg-border); border-radius: 14px; }
.zg-card { padding: 1.5rem; }
.form-control, .form-select { background: #0a0d18; border-color: #2a3150; color: var(--zg-text); border-radius: 10px; }
.form-control:focus, .form-select:focus { background: #0a0d18; color: var(--zg-text); border-color: var(--zg-accent); box-shadow: 0 0 0 .2rem rgba(139, 92, 246, .25); }
.table { --bs-table-bg: transparent; }
.badge-plan { background: rgba(139, 92, 246, .18); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, .4); }
.zg-gradient { background: var(--zg-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zg-feature { height: 100%; }
.zg-price { position: relative; height: 100%; }
.zg-price.featured { border-color: var(--zg-accent); box-shadow: 0 0 0 1px var(--zg-accent), 0 20px 60px rgba(139, 92, 246, .25); }
.zg-price .amount { font-size: 2.6rem; font-weight: 800; }
.zg-price ul { list-style: none; padding: 0; }
.zg-price li { padding: .3rem 0; color: #c9cfdb; }
.zg-price li::before { content: "✓"; color: var(--zg-green); margin-right: .5rem; }

/* ═════════════════ reveal-on-scroll ═════════════════ */
.js .reveal { opacity: 0; transform: translateY(34px) scale(.985); filter: blur(6px); transition: opacity .9s var(--zg-ease), transform 1s var(--zg-ease), filter .9s var(--zg-ease); transition-delay: var(--d, 0s); }
.js .reveal.from-left { transform: translateX(-60px) rotate(-1.5deg); }
.js .reveal.from-right { transform: translateX(60px) rotate(1.5deg); }
.js .reveal.in { opacity: 1; transform: none; filter: none; }

/* ═════════════════ shared section typography ═════════════════ */
.zg-section { padding: 6rem 0; position: relative; }
.zg-section-head { text-align: center; max-width: 860px; margin: 0 auto 3.5rem; }
.zg-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent, #a5b4fc); margin-bottom: 1rem; }
.zg-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.zg-h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; margin-bottom: 1.25rem; background: linear-gradient(180deg, #fff 30%, #aab4d4); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }
.zg-h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; margin-bottom: 1.2rem; color: #fff; text-wrap: balance; }
.zg-lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--zg-dim); line-height: 1.75; max-width: 760px; margin-inline: auto; }
.zg-copy { color: #aeb8d3; font-size: 1.05rem; line-height: 1.8; }
.zg-narrow { max-width: 880px; }
.zg-checks { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem 1.5rem; }
.zg-checks li { position: relative; padding-left: 1.9rem; color: #d3d9ea; font-weight: 500; }
.zg-checks li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: color-mix(in srgb, var(--accent, #8b5cf6) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #8b5cf6) 60%, transparent); }
.zg-checks li::after { content: ""; position: absolute; left: .42rem; top: .43rem; width: .35rem; height: .62rem; border: solid var(--accent, #c4b5fd); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ═════════════════ HERO ═════════════════ */
.zg-hero { position: relative; min-height: 100vh; padding: 140px 0 110px; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.zg-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .8; }
.zg-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 600px at 22% 50%, rgba(5, 6, 13, .78), transparent 70%), linear-gradient(to bottom, transparent 70%, var(--zg-bg)); }
.zg-aurora { position: absolute; inset: -20%; z-index: -2; filter: blur(80px) saturate(140%); pointer-events: none; }
.zg-aurora span { position: absolute; border-radius: 50%; opacity: .55; mix-blend-mode: screen; animation: zg-drift 22s ease-in-out infinite alternate; }
.zg-aurora span:nth-child(1) { width: 52vw; height: 52vw; left: 0; top: 5%; background: radial-gradient(circle, #3b82f6, transparent 65%); }
.zg-aurora span:nth-child(2) { width: 46vw; height: 46vw; right: 2%; top: 0; background: radial-gradient(circle, #8b5cf6, transparent 65%); animation-duration: 28s; animation-delay: -6s; }
.zg-aurora span:nth-child(3) { width: 40vw; height: 40vw; left: 35%; bottom: -5%; background: radial-gradient(circle, #ec4899, transparent 65%); opacity: .35; animation-duration: 32s; animation-delay: -12s; }
@keyframes zg-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vw, 4vh) scale(1.12); } 100% { transform: translate(-4vw, -3vh) scale(.95); } }
.zg-grid-floor { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 55%; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(139, 92, 246, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, .18) 1px, transparent 1px);
  background-size: 60px 60px; transform: perspective(600px) rotateX(62deg); transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000 0%, transparent 85%); -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%); animation: zg-floor 6s linear infinite; }
@keyframes zg-floor { to { background-position: 0 60px, 0 0; } }

.zg-pill { display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .95rem .45rem .7rem; border-radius: 999px; font-size: .88rem; font-weight: 500; color: #dbe3ff; text-decoration: none;
  background: rgba(139, 92, 246, .12); border: 1px solid rgba(139, 92, 246, .35); backdrop-filter: blur(8px); margin-bottom: 1.6rem; transition: background .3s, transform .3s var(--zg-ease); }
.zg-pill:hover { background: rgba(139, 92, 246, .22); color: #fff; transform: translateY(-1px); }
.zg-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--zg-green); box-shadow: 0 0 0 0 rgba(52, 211, 153, .7); animation: zg-ping 1.8s infinite; }
@keyframes zg-ping { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .7); } 80%, 100% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); } }

.zg-hero-title { font-size: clamp(2.4rem, 5.4vw, 4.5rem); font-weight: 900; letter-spacing: -.045em; line-height: 1.02; margin-bottom: 1.5rem; color: #fff; text-wrap: balance; }
.zg-rotator { display: inline-block; position: relative; }
.zg-gradient-anim { display: inline-block; background: linear-gradient(100deg, #38bdf8, #8b5cf6, #f472b6, #fb923c, #38bdf8); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: zg-shift 6s linear infinite; padding-right: .06em; }
.zg-gradient-anim.out { animation: zg-shift 6s linear infinite, zg-word-out .45s var(--zg-ease) forwards; }
.zg-gradient-anim.in { animation: zg-shift 6s linear infinite, zg-word-in .6s var(--zg-ease) forwards; }
@keyframes zg-shift { to { background-position: -300% 0; } }
@keyframes zg-word-out { to { opacity: 0; transform: translateY(-.35em) rotateX(70deg); filter: blur(8px); } }
@keyframes zg-word-in { from { opacity: 0; transform: translateY(.45em) rotateX(-70deg); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.zg-hero-lead { font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: #aab4d0; line-height: 1.75; max-width: 620px; margin-inline: auto; }
@media (min-width: 992px) { .zg-hero-lead { margin-inline: 0; } }
.zg-hero-lead strong { color: #fff; }
.zg-hero-meta { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: center; color: var(--zg-faint); font-size: .9rem; }
@media (min-width: 992px) { .zg-hero-meta { justify-content: flex-start; } }
.zg-hero-meta li::before { content: "●"; color: var(--zg-green); font-size: .6rem; margin-right: .5rem; vertical-align: middle; }

.zg-hero-visual { position: relative; }
.zg-tilt { position: relative; transform-style: preserve-3d; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--zg-ease); will-change: transform; }
.zg-glow-frame { position: relative; border-radius: var(--zg-radius); padding: 2px; isolation: isolate;
  background: conic-gradient(from var(--ang, 0deg), rgba(56, 189, 248, .9), rgba(139, 92, 246, .2), rgba(244, 114, 182, .9), rgba(251, 146, 60, .2), rgba(56, 189, 248, .9));
  animation: zg-spin 7s linear infinite; box-shadow: 0 30px 80px -20px rgba(56, 120, 255, .55), 0 0 0 1px rgba(255, 255, 255, .04); }
.zg-glow-frame::after { content: ""; position: absolute; inset: -18px; z-index: -1; border-radius: 30px; background: inherit; filter: blur(30px); opacity: .45; }
.zg-glow-frame img { display: block; width: 100%; height: auto; border-radius: calc(var(--zg-radius) - 2px); background: #070a18; }
.zg-glow-frame::before { content: ""; position: absolute; inset: 2px; z-index: 2; border-radius: calc(var(--zg-radius) - 2px); pointer-events: none;
  background: radial-gradient(500px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .16), transparent 45%); mix-blend-mode: overlay; }

.zg-float-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .85rem; border-radius: 12px; font-size: .85rem; font-weight: 600; color: #e8ebf5; white-space: nowrap;
  background: rgba(12, 16, 32, .78); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(12px); box-shadow: 0 14px 40px rgba(0, 0, 0, .45); transform: translateZ(60px); animation: zg-float 6s ease-in-out infinite; }
.zg-float-chip code { font-family: "JetBrains Mono", monospace; font-size: .8rem; color: #a5f3fc; }
.zg-float-chip .ok { color: var(--zg-green); font-weight: 900; }
.zg-float-chip .dot { width: 9px; height: 9px; border-radius: 50%; }
.zg-float-chip .dot.purple { background: #a78bfa; box-shadow: 0 0 10px #a78bfa; }
.zg-float-chip .dot.orange { background: #fb923c; box-shadow: 0 0 10px #fb923c; }
.zg-chip-1 { top: -26px; right: 6%; }
.zg-chip-2 { bottom: -22px; left: -4%; animation-delay: -2s; }
.zg-chip-3 { bottom: 26%; right: -6%; animation-delay: -4s; }
@keyframes zg-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@media (max-width: 575px) { .zg-chip-3 { display: none; } .zg-chip-2 { left: 0; } }

.zg-terminal { margin: 3.2rem auto 0; max-width: 470px; border-radius: 14px; overflow: hidden; background: rgba(8, 11, 24, .85); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 25px 60px rgba(0, 0, 0, .5); backdrop-filter: blur(10px); transform: perspective(900px) rotateX(8deg); }
.zg-terminal-bar { display: flex; align-items: center; gap: 6px; padding: .55rem .8rem; background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.zg-terminal-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.zg-terminal-bar i:nth-child(2) { background: #febc2e; } .zg-terminal-bar i:nth-child(3) { background: #28c840; }
.zg-terminal-bar span { margin-left: .6rem; font: 500 .75rem "JetBrains Mono", monospace; color: var(--zg-faint); }
.zg-typed { margin: 0; padding: .9rem 1rem 1rem; min-height: 7.4rem; font: 500 .85rem/1.7 "JetBrains Mono", monospace; color: #c7d2fe; white-space: pre-wrap; }
.zg-typed .cmd { color: #7dd3fc; } .zg-typed .ok { color: #6ee7b7; }
.zg-typed::after { content: "▋"; color: #a78bfa; animation: zg-blink 1s steps(1) infinite; }
@keyframes zg-blink { 50% { opacity: 0; } }

.zg-scroll-cue { position: absolute; left: 50%; bottom: 28px; translate: -50% 0; width: 26px; height: 42px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .25); }
.zg-scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: zg-cue 1.8s var(--zg-ease) infinite; }
@keyframes zg-cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ═════════════════ MARQUEE ═════════════════ */
.zg-marquee-wrap { padding: 2.2rem 0 1rem; border-block: 1px solid rgba(255, 255, 255, .05); background: linear-gradient(180deg, rgba(255, 255, 255, .015), transparent); }
.zg-marquee-title { text-align: center; color: var(--zg-faint); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-bottom: 1.2rem; }
.zg-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.zg-marquee-track { display: flex; gap: 3.5rem; width: max-content; animation: zg-marquee 38s linear infinite; padding-bottom: 1rem; }
.zg-marquee:hover .zg-marquee-track { animation-play-state: paused; }
.zg-marquee-item { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: #6f7ba0; white-space: nowrap; transition: color .3s; }
.zg-marquee-item:hover { color: #fff; }
@keyframes zg-marquee { to { transform: translateX(-50%); } }

/* ═════════════════ STATS ═════════════════ */
.zg-stat { position: relative; padding: 2rem 1rem; border-radius: var(--zg-radius); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)); border: 1px solid rgba(255, 255, 255, .06); overflow: hidden; }
.zg-stat-num { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 900; letter-spacing: -.04em; background: var(--zg-grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; font-variant-numeric: tabular-nums; }
.zg-stat-label { color: var(--zg-dim); margin-top: .7rem; font-weight: 500; }

/* spotlight hover on cards */
.zg-spot { position: relative; isolation: isolate; }
.zg-spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(139, 92, 246, .18), transparent 60%); }
.zg-spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; opacity: 0; transition: opacity .4s; pointer-events: none;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(167, 139, 250, .9), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.zg-spot:hover::before, .zg-spot:hover::after { opacity: 1; }

/* ═════════════════ FEATURE SHOWCASES ═════════════════ */
.zg-features { padding: 2rem 0 4rem; }
.zg-showcase { padding: 4.5rem 0; position: relative; }
.zg-showcase + .zg-showcase::before { content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09), transparent); }
.zg-showcase-media { position: relative; }
.zg-showcase .zg-glow-frame { background: conic-gradient(from var(--ang, 0deg), var(--accent), rgba(139, 92, 246, .15), var(--accent), rgba(255, 255, 255, .05), var(--accent)); box-shadow: 0 30px 80px -25px color-mix(in srgb, var(--accent) 70%, transparent); }
.zg-media-orb { position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; left: 15%; top: 50%; translate: 0 -50%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 65%); filter: blur(40px); opacity: .7; animation: zg-breathe 7s ease-in-out infinite; }
@keyframes zg-breathe { 50% { transform: scale(1.18); opacity: .4; } }

/* ═════════════════ LIVE GRAPH ═════════════════ */
.zg-graph-card { position: relative; padding: 1.5rem; border-radius: 24px; background: linear-gradient(180deg, rgba(20, 26, 50, .8), rgba(9, 12, 26, .9)); border: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 40px 100px -30px rgba(56, 120, 255, .45); overflow: hidden; }
.zg-graph-card::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
.zg-graph { width: 100%; height: auto; position: relative; overflow: visible; }
.zg-graph .g-line { stroke: var(--c); stroke-dasharray: 1; stroke-dashoffset: 1; }
.zg-graph circle { fill: #0b0f20; stroke: var(--c); stroke-width: 4; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.zg-graph .g-labels g { opacity: 0; transform: translateY(6px); }
.zg-graph .g-labels rect { fill: rgba(139, 92, 246, .18); stroke: rgba(167, 139, 250, .6); }
.zg-graph .g-labels text { fill: #e0e7ff; }
.zg-graph-card.in .g-line { animation: zg-draw 1.6s var(--zg-ease) forwards; animation-delay: var(--t); }
.zg-graph-card.in circle { animation: zg-pop .6s cubic-bezier(.34, 1.56, .64, 1) forwards, zg-node-glow 3s ease-in-out infinite; animation-delay: var(--t), calc(var(--t) + 1s); }
.zg-graph-card.in .g-labels g { animation: zg-label .6s var(--zg-ease) forwards; animation-delay: var(--t); }
@keyframes zg-draw { to { stroke-dashoffset: 0; } }
@keyframes zg-pop { to { transform: scale(1); } }
@keyframes zg-node-glow { 0%, 100% { filter: drop-shadow(0 0 0 var(--c)); } 50% { filter: drop-shadow(0 0 8px var(--c)); } }
@keyframes zg-label { to { opacity: 1; transform: none; } }
.zg-graph-legend { position: relative; display: flex; gap: 1.4rem; justify-content: center; margin-top: 1rem; color: var(--zg-dim); font-size: .88rem; }
.zg-graph-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); margin-right: .45rem; }

/* ═════════════════ BENTO ═════════════════ */
.zg-bento { display: grid; gap: 1.1rem; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(190px, auto); grid-auto-flow: dense; }
.zg-bento-card { padding: 1.7rem; border-radius: var(--zg-radius); background: linear-gradient(160deg, rgba(25, 31, 58, .75), rgba(11, 14, 30, .85)); border: 1px solid rgba(255, 255, 255, .06); transition: transform .5s var(--zg-ease), border-color .4s; overflow: hidden; }
.zg-bento-card:hover { transform: translateY(-6px); border-color: rgba(167, 139, 250, .25); }
.zg-bento-card.wide { grid-column: span 2; }
.zg-bento-card.tall { grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, .25), transparent 60%), linear-gradient(160deg, rgba(25, 31, 58, .75), rgba(11, 14, 30, .85)); }
.zg-bento-card.tall .zg-bento-icon { font-size: 2.6rem; width: 76px; height: 76px; margin-bottom: auto; }
.zg-bento-icon { width: 52px; height: 52px; display: grid; place-items: center; font-size: 1.55rem; border-radius: 14px; margin-bottom: 1.1rem; background: linear-gradient(135deg, rgba(139, 92, 246, .3), rgba(56, 189, 248, .18)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 30px rgba(139, 92, 246, .2); transition: transform .5s var(--zg-ease); }
.zg-bento-card:hover .zg-bento-icon { transform: rotate(-8deg) scale(1.12); }
.zg-bento-card h3 { font-size: 1.15rem; font-weight: 700; color: #fff; margin-bottom: .5rem; }
.zg-bento-card p { color: var(--zg-dim); margin: 0; line-height: 1.65; }
@media (max-width: 991px) { .zg-bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .zg-bento { grid-template-columns: 1fr; } .zg-bento-card.wide, .zg-bento-card.tall { grid-column: auto; grid-row: auto; } }

/* ═════════════════ STEPS ═════════════════ */
.zg-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; position: relative; counter-reset: s; }
.zg-steps::before { content: ""; position: absolute; top: 34px; left: 16%; right: 16%; height: 2px; background: linear-gradient(90deg, #38bdf8, #8b5cf6, #f472b6); opacity: .35; }
.zg-steps li { text-align: center; padding: 0 1rem; position: relative; }
.zg-step-num { width: 68px; height: 68px; margin: 0 auto 1.4rem; display: grid; place-items: center; border-radius: 50%; font-size: 1.6rem; font-weight: 900; color: #fff; position: relative;
  background: radial-gradient(circle at 30% 30%, #8b5cf6, #1e1b4b); box-shadow: 0 0 0 6px var(--zg-bg), 0 0 0 7px rgba(167, 139, 250, .4), 0 15px 40px rgba(139, 92, 246, .5); }
.zg-steps h3 { font-size: 1.3rem; font-weight: 700; color: #fff; }
.zg-steps p { color: var(--zg-dim); line-height: 1.7; }
@media (max-width: 767px) { .zg-steps { grid-template-columns: 1fr; } .zg-steps::before { display: none; } }

/* ═════════════════ ORBIT ═════════════════ */
.zg-orbit { position: relative; width: min(460px, 90vw); aspect-ratio: 1; margin: 0 auto; }
.zg-orbit-core { position: absolute; inset: 0; margin: auto; width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(139, 92, 246, .35), rgba(10, 13, 28, .9) 70%); box-shadow: 0 0 0 1px rgba(167, 139, 250, .4), 0 0 80px rgba(139, 92, 246, .55); animation: zg-core 4s ease-in-out infinite; }
.zg-orbit-core img { border-radius: 22px; }
@keyframes zg-core { 50% { box-shadow: 0 0 0 1px rgba(167, 139, 250, .6), 0 0 120px rgba(56, 189, 248, .6); } }
.zg-orbit-ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px dashed rgba(167, 139, 250, .28); animation: zg-rotate 40s linear infinite; }
.zg-orbit-ring.r1 { width: 64%; height: 64%; }
.zg-orbit-ring.r2 { width: 100%; height: 100%; animation-duration: 60s; animation-direction: reverse; border-color: rgba(56, 189, 248, .22); }
.zg-orbit-ring span { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); }
.zg-orbit-ring b { position: absolute; left: 0; top: 0; translate: -50% -50%; display: block; padding: .5rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 700; white-space: nowrap; color: #e8ebf5;
  background: rgba(14, 18, 36, .9); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.zg-orbit-ring.r1 span { --r: calc(min(460px, 90vw) * .32); }
.zg-orbit-ring.r2 span { --r: calc(min(460px, 90vw) * .5); }
.zg-orbit-ring.r1 b { animation: zg-counter 40s linear infinite; }
.zg-orbit-ring.r2 b { animation: zg-counter-r 60s linear infinite; }
@keyframes zg-rotate { to { transform: rotate(360deg); } }
@keyframes zg-counter { to { rotate: -360deg; } }
@keyframes zg-counter-r { to { rotate: 360deg; } }

/* ═════════════════ TEAMS ═════════════════ */
.zg-teams-card { position: relative; padding: clamp(2rem, 5vw, 4rem); border-radius: 32px; overflow: hidden; --accent: #f472b6;
  background: radial-gradient(800px 400px at 0% 0%, rgba(139, 92, 246, .25), transparent 60%), radial-gradient(700px 400px at 100% 100%, rgba(56, 189, 248, .2), transparent 60%), linear-gradient(160deg, #12173a, #090c1d);
  border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 50px 120px -40px rgba(139, 92, 246, .55); }

/* ═════════════════ SECURITY ═════════════════ */
.zg-sec-card { height: 100%; padding: 2rem 1.6rem; border-radius: var(--zg-radius); background: linear-gradient(180deg, rgba(22, 28, 52, .7), rgba(10, 13, 28, .8)); border: 1px solid rgba(255, 255, 255, .06); transition: transform .5s var(--zg-ease); }
.zg-sec-card:hover { transform: translateY(-6px); }
.zg-sec-icon { font-size: 2rem; margin-bottom: 1rem; filter: drop-shadow(0 6px 18px rgba(56, 189, 248, .45)); }
.zg-sec-card h3 { font-size: 1.15rem; font-weight: 700; color: #fff; }
.zg-sec-card p { color: var(--zg-dim); line-height: 1.7; margin: 0; }

/* ═════════════════ CANADA ═════════════════ */
.zg-canada { --accent: #f87171; }
.zg-canada-badge { position: relative; display: inline-block; width: min(420px, 82vw); }
.zg-canada-badge img { width: 100%; height: auto; border-radius: 28px; position: relative; animation: zg-badge 7s ease-in-out infinite; box-shadow: 0 40px 90px -30px rgba(239, 68, 68, .7); }
.zg-canada-halo { position: absolute; inset: -12%; border-radius: 50%; background: conic-gradient(from var(--ang, 0deg), #ef4444, transparent 30%, #3b82f6, transparent 60%, #ef4444); filter: blur(50px); opacity: .55; animation: zg-spin 9s linear infinite; }
@keyframes zg-badge { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-16px) rotate(2deg); } }

/* ═════════════════ PLANS ═════════════════ */
.zg-plan { display: block; height: 100%; padding: 2rem; border-radius: var(--zg-radius); text-decoration: none; background: linear-gradient(180deg, rgba(22, 28, 52, .7), rgba(10, 13, 28, .85)); border: 1px solid rgba(255, 255, 255, .07); transition: transform .5s var(--zg-ease), border-color .4s; }
.zg-plan:hover { transform: translateY(-8px); border-color: rgba(167, 139, 250, .35); }
.zg-plan.featured { border-color: rgba(167, 139, 250, .55); box-shadow: 0 0 0 1px rgba(139, 92, 246, .4), 0 30px 80px -20px rgba(139, 92, 246, .6); }
.zg-plan h3 { font-size: 1.6rem; font-weight: 800; color: #fff; }
.zg-plan p { color: var(--zg-dim); line-height: 1.7; }
.zg-plan-link { font-weight: 600; color: #c4b5fd; }
.zg-plan-tag { position: absolute; top: 1.2rem; right: 1.2rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .3rem .65rem; border-radius: 999px; color: #fff; background: var(--zg-grad); }

/* ═════════════════ FAQ ═════════════════ */
.zg-faq { display: grid; gap: .9rem; }
.zg-faq details { border-radius: 16px; background: rgba(16, 20, 40, .7); border: 1px solid rgba(255, 255, 255, .07); transition: border-color .3s, background .3s; }
.zg-faq details[open] { border-color: rgba(167, 139, 250, .4); background: rgba(22, 26, 52, .85); }
.zg-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; }
.zg-faq summary::-webkit-details-marker { display: none; }
.zg-faq summary h3 { margin: 0; font-size: 1.08rem; font-weight: 650; color: #fff; }
.zg-faq-icon { flex: 0 0 28px; height: 28px; border-radius: 50%; position: relative; background: rgba(139, 92, 246, .18); transition: transform .4s var(--zg-ease), background .3s; }
.zg-faq-icon::before, .zg-faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: #c4b5fd; transition: transform .4s var(--zg-ease); }
.zg-faq-icon::after { transform: rotate(90deg); }
.zg-faq details[open] .zg-faq-icon { transform: rotate(180deg); background: rgba(139, 92, 246, .35); }
.zg-faq details[open] .zg-faq-icon::after { transform: rotate(0); }
.zg-faq-body { padding: 0 1.5rem 1.3rem; color: #aeb8d3; line-height: 1.75; }
.zg-faq-body p { margin: 0; }
.zg-faq details[open] .zg-faq-body { animation: zg-faq-open .5s var(--zg-ease); }
@keyframes zg-faq-open { from { opacity: 0; transform: translateY(-8px); } }

/* ═════════════════ CTA ═════════════════ */
.zg-cta { position: relative; border-radius: 36px; padding: 2px; overflow: hidden; isolation: isolate; }
.zg-cta::before { content: ""; position: absolute; inset: -60%; z-index: -1; background: conic-gradient(from var(--ang, 0deg), #38bdf8, #8b5cf6, #f472b6, #fb923c, #38bdf8); animation: zg-spin 6s linear infinite; }
.zg-cta-inner { border-radius: 34px; padding: clamp(3rem, 7vw, 5.5rem) 1.5rem; text-align: center; background: radial-gradient(700px 300px at 50% 0%, rgba(139, 92, 246, .35), transparent 70%), #080b1a; }
.zg-cta-mascot { border-radius: 22px; margin-bottom: 1.5rem; animation: zg-float 5s ease-in-out infinite; box-shadow: 0 20px 50px rgba(139, 92, 246, .55); }

/* ═════════════════ FOOTER ═════════════════ */
.zg-footer { position: relative; margin-top: 4rem; border-top: 1px solid rgba(255, 255, 255, .06); color: var(--zg-dim); background: linear-gradient(180deg, rgba(10, 13, 28, .4), #04050b); overflow: hidden; }
.zg-footer-glow { position: absolute; left: 50%; top: -220px; width: 900px; height: 400px; translate: -50% 0; background: radial-gradient(ellipse, rgba(139, 92, 246, .22), transparent 70%); pointer-events: none; }
.zg-footer-h { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.zg-footer-links li { margin-bottom: .55rem; }
.zg-footer-links a, .zg-footer a { color: var(--zg-dim); text-decoration: none; transition: color .25s; }
.zg-footer-links a:hover { color: #fff; }
.zg-footer-badge { border-radius: 14px; box-shadow: 0 10px 30px rgba(239, 68, 68, .35); }
.zg-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .06); font-size: .85rem; color: var(--zg-faint); }

/* ═════════════════ accessibility: reduced motion ═════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; filter: none; }
  .zg-graph .g-line { stroke-dashoffset: 0; } .zg-graph circle { transform: none; } .zg-graph .g-labels g { opacity: 1; transform: none; }
  .zg-hero-canvas { display: none; }
}

/* ═════════════════ team page: workspaces & activity ═════════════════ */
.zg-workspace { padding: 1rem 0; border-top: 1px solid var(--zg-border); }
.zg-workspace:first-of-type { border-top: 0; }
.zg-repo-icon { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 8px; background: rgba(139, 92, 246, .18); color: #c4b5fd; font-size: .85rem; }
.zg-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--zg-green); box-shadow: 0 0 0 0 rgba(52, 211, 153, .7); animation: zg-ping 1.8s infinite; }

/* ═════════════════ APP TOUR: 3D window with live screenshots ═════════════════ */
.zg-tour { padding: 7rem 0 5rem; position: relative; overflow: hidden; }
.zg-stage { position: relative; margin: 1rem auto 0; max-width: 1180px; perspective: 1800px; perspective-origin: 50% 0%; }
.zg-stage-glow { position: absolute; inset: 8% 6% -6%; border-radius: 40px; filter: blur(70px); opacity: .75; z-index: -1;
  background: conic-gradient(from var(--ang, 0deg), rgba(56, 189, 248, .55), rgba(139, 92, 246, .6), rgba(244, 114, 182, .5), rgba(251, 146, 60, .35), rgba(56, 189, 248, .55));
  animation: zg-spin 14s linear infinite; }
.zg-stage-beams { position: absolute; inset: -6% 4% auto; height: 45%; opacity: .7; z-index: -1; pointer-events: none; mask-image: linear-gradient(to bottom, #000, transparent); -webkit-mask-image: linear-gradient(to bottom, #000, transparent); }
.zg-stage-beams span { position: absolute; top: 0; width: 2px; height: 100%; background: linear-gradient(to bottom, transparent, rgba(167, 139, 250, .7), transparent); animation: zg-beam 5s ease-in-out infinite; opacity: 0; }
.zg-stage-beams span:nth-child(1) { left: 22%; } .zg-stage-beams span:nth-child(2) { left: 50%; animation-delay: -1.7s; } .zg-stage-beams span:nth-child(3) { left: 78%; animation-delay: -3.4s; }
@keyframes zg-beam { 0% { transform: translateY(-40%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(40%); opacity: 0; } }

.zg-window { position: relative; transform-style: preserve-3d; transform-origin: 50% 0%;
  transform: rotateX(var(--tilt, 26deg)) rotateY(var(--ry, 0deg)) scale(var(--scale, .9)) translateY(var(--lift, 40px)); transition: transform .25s ease-out; will-change: transform; }
.zg-window-frame { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #0B0D12;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 2px 0 rgba(255, 255, 255, .08) inset, 0 50px 120px -30px rgba(0, 0, 0, .9), 0 30px 90px -20px rgba(99, 102, 241, .55); }
.zg-window-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, .10) 0%, transparent 28%, transparent 70%, rgba(255, 255, 255, .05) 100%); }

.zg-screen { position: absolute; inset: 0; margin: 0; opacity: 0; clip-path: inset(0 100% 0 0); transform: scale(1.04); filter: saturate(1.15);
  transition: clip-path 1.1s var(--zg-ease), opacity .6s ease, transform 6s ease-out; z-index: 1; }
.zg-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zg-screen.is-active { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); z-index: 2; }
.zg-screen.is-leaving { opacity: 1; clip-path: inset(0 0 0 0); z-index: 1; transform: scale(.98); filter: brightness(.6) blur(1px); transition: transform 1.1s var(--zg-ease), filter 1.1s; }

/* light sweep when a screen changes */
.zg-scan { position: absolute; top: 0; bottom: 0; width: 18%; left: -20%; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .25) 40%, rgba(255, 255, 255, .55) 50%, rgba(56, 189, 248, .25) 60%, transparent);
  mix-blend-mode: screen; }
.zg-scan.run { animation: zg-scan 1.1s var(--zg-ease); }
@keyframes zg-scan { 0% { left: -20%; opacity: 1; } 100% { left: 102%; opacity: 0; } }

/* hotspots */
.zg-hot { position: absolute; left: var(--x); top: var(--y); z-index: 5; width: 0; height: 0; opacity: 0; transform: scale(.4); transition: opacity .5s, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.zg-screen.is-active .zg-hot { opacity: 1; transform: scale(1); transition-delay: calc(.9s + var(--i) * .35s); }
.zg-hot i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(139, 92, 246, .55), 0 0 22px rgba(167, 139, 250, .9); }
.zg-hot i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(196, 181, 253, .9); animation: zg-hot-ring 2.2s ease-out infinite; }
@keyframes zg-hot-ring { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.8); opacity: 0; } }
.zg-hot b { position: absolute; left: 18px; top: -15px; white-space: nowrap; font-size: clamp(.62rem, 1.05vw, .86rem); font-weight: 600; color: #fff; padding: .35rem .7rem; border-radius: 999px;
  background: rgba(14, 17, 34, .86); border: 1px solid rgba(167, 139, 250, .5); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.zg-hot.left b { left: auto; right: 18px; }
.zg-hot.above b { top: -46px; left: -20px; }
.zg-hot.above.left b { left: auto; right: -20px; }
@media (max-width: 767px) { .zg-hot b { display: none; } }

/* floating cards in front of the window */
.zg-orbit-card { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: .55rem; padding: .6rem .9rem; border-radius: 14px; font-size: .86rem; font-weight: 600; color: #e8ebf5; white-space: nowrap;
  background: rgba(12, 15, 32, .82); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(14px); box-shadow: 0 20px 50px rgba(0, 0, 0, .55); animation: zg-float 7s ease-in-out infinite; }
.zg-orbit-card em { font-style: normal; color: var(--zg-green); }
.zg-orbit-card code { color: #fdba74; font-size: .8rem; }
.zg-orbit-card .ok { color: var(--zg-green); font-weight: 900; }
.zg-orbit-card .av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .65rem; background: #b45309; color: #fff; }
.zg-orbit-card .plus { color: #4ade80; font-family: "JetBrains Mono", monospace; } .zg-orbit-card .minus { color: #fb7185; font-family: "JetBrains Mono", monospace; }
.zg-orbit-card.c1 { left: -3%; top: 28%; }
.zg-orbit-card.c2 { right: -4%; top: 52%; animation-delay: -2.5s; }
.zg-orbit-card.c3 { left: 6%; bottom: -4%; animation-delay: -5s; }
@media (max-width: 991px) { .zg-orbit-card { display: none; } }

/* tabs */
.zg-tour-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-top: 3.2rem; }
.zg-tour-tab { position: relative; display: flex; gap: .8rem; align-items: flex-start; text-align: left; padding: 1rem 1.1rem 1.2rem; border-radius: 16px; overflow: hidden; cursor: pointer;
  background: rgba(16, 20, 40, .65); border: 1px solid rgba(255, 255, 255, .07); color: var(--zg-dim); transition: background .3s, border-color .3s, transform .4s var(--zg-ease); }
.zg-tour-tab:hover { transform: translateY(-3px); border-color: rgba(167, 139, 250, .3); }
.zg-tour-tab.is-active { background: rgba(28, 26, 64, .85); border-color: rgba(167, 139, 250, .55); color: #c7cee0; box-shadow: 0 20px 50px -20px rgba(139, 92, 246, .7); }
.zg-tour-num { font: 700 .8rem "JetBrains Mono", monospace; color: #8b5cf6; padding-top: .15rem; }
.zg-tour-text { display: flex; flex-direction: column; gap: .2rem; font-size: .88rem; line-height: 1.45; }
.zg-tour-text strong { color: #fff; font-size: 1rem; }
.zg-tour-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--zg-grad); transform-origin: 0 50%; transform: scaleX(0); }
.zg-tour-tab.is-active .zg-tour-progress { animation: zg-progress var(--tour-ms, 6500ms) linear forwards; }
.zg-tour.paused .zg-tour-tab.is-active .zg-tour-progress { animation-play-state: paused; }
@keyframes zg-progress { to { transform: scaleX(1); } }
@media (max-width: 991px) { .zg-tour-tabs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .zg-tour-tabs { grid-template-columns: 1fr; } .zg-tour-text span { display: none; } }

/* ═════════════════ WALL OF SCREENS (tilted, endlessly scrolling) ═════════════════ */
.zg-wall { position: relative; height: clamp(560px, 80vh, 820px); overflow: hidden; isolation: isolate; margin: 2rem 0;
  border-block: 1px solid rgba(255, 255, 255, .05); }
.zg-wall-tilt { position: absolute; left: 50%; top: 50%; width: 2400px; height: 1900px; display: flex; gap: 22px; z-index: -1;
  transform: translate(-50%, -50%) perspective(1600px) rotateX(38deg) rotateZ(-14deg) scale(.9); }
.zg-wall-col { flex: 1; display: flex; flex-direction: column; gap: 22px; animation: zg-wall-up var(--speed, 40s) linear infinite; }
.zg-wall-col.down { animation-name: zg-wall-down; }
.zg-wall-col img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 50px rgba(0, 0, 0, .6); opacity: .9; }
@keyframes zg-wall-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes zg-wall-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.zg-wall::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 60% at 50% 50%, rgba(5, 6, 13, .92) 0%, rgba(5, 6, 13, .7) 45%, rgba(5, 6, 13, .15) 100%),
              linear-gradient(to bottom, var(--zg-bg), transparent 18%, transparent 82%, var(--zg-bg)); }
.zg-wall-overlay { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; }
.zg-wall-title { font-size: clamp(2.2rem, 5vw, 4rem); }

@media (prefers-reduced-motion: reduce) {
  .zg-window { transform: none !important; }
  .zg-screen { transition: none; }
}

/* ── "Continue with …" buttons on the Identity sign-in, register and external-logins pages ───────────────────────── */
#external-account p, #link-login-form p { display: grid; gap: .6rem; margin: 0; }
#external-account button[name=provider], #link-login-form button[name=provider] {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px;
  padding: .6rem 1rem .6rem 3rem; border-radius: 12px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04); color: #e8ecf6; font-weight: 600; letter-spacing: .01em;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#external-account button[name=provider]:hover, #link-login-form button[name=provider]:hover {
  transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.26); box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
}
#external-account button[name=provider]::before { content: "Continue with\00a0"; font-weight: 500; opacity: .75; }
#external-account button[name=provider]::after, #link-login-form button[name=provider]::after {
  content: attr(value); position: absolute; left: .55rem; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; overflow: hidden;
  font-size: 0; background: #2a3142;
}
/* letter marks keyed by provider (drop official brand assets in later if you prefer) */
#external-account button[value=Google]::after, #link-login-form button[value=Google]::after { content: "G"; font-size: 15px; font-weight: 800; background: #fff; color: #4285F4; }
#external-account button[value=Microsoft]::after, #link-login-form button[value=Microsoft]::after { content: "M"; font-size: 15px; font-weight: 800; background: linear-gradient(135deg,#F25022 0 50%,#7FBA00 50%); color: #fff; }
#external-account button[value=Apple]::after, #link-login-form button[value=Apple]::after { content: "A"; font-size: 15px; font-weight: 800; background: #000; color: #fff; border: 1px solid rgba(255,255,255,.25); }
#external-account button[value=Facebook]::after, #link-login-form button[value=Facebook]::after { content: "f"; font-size: 18px; font-weight: 800; background: #1877F2; color: #fff; }
#external-account button[value=GitHub]::after, #link-login-form button[value=GitHub]::after { content: "GH"; font-size: 11px; font-weight: 800; background: #24292f; color: #fff; }
#external-account button[value=Apple] { background: #000; border-color: rgba(255,255,255,.22); }
#external-account button[value=Facebook] { background: rgba(24,119,242,.16); border-color: rgba(24,119,242,.45); }
/* No provider keys set yet: hide the Identity UI's "no external authentication services configured" block entirely */
section:has(a[href*="LinkID=532715"]), div.col-md-6:has(a[href*="LinkID=532715"]) { display: none; }

/* ═════════════════ download page ═════════════════ */
.zg-dl-hero { position: relative; padding: 2rem 0 3rem; isolation: isolate; }
.zg-dl-glow { position: absolute; left: 50%; top: 0; width: min(900px, 100%); height: 420px; translate: -50% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(124, 92, 255, .35), transparent), radial-gradient(closest-side at 70% 60%, rgba(56, 189, 248, .25), transparent); filter: blur(30px); }
.zg-dl-mascot { border-radius: 28px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 20px 60px -10px rgba(124, 92, 255, .7); animation: zg-dl-float 6s ease-in-out infinite; }
@keyframes zg-dl-float { 50% { transform: translateY(-10px) rotate(-2deg); } }
.zg-dl-title { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 900; letter-spacing: -.04em; margin: .4rem 0 1rem; }
.zg-dl-soon { display: inline-flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.4rem 2rem; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.zg-dl-soon span { color: var(--zg-dim); }
.zg-dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; margin-bottom: 4rem; }
.zg-dl-card { position: relative; display: flex; flex-direction: column; padding: 1.5rem; border-radius: 20px; background: linear-gradient(160deg, rgba(25, 31, 58, .75), rgba(11, 14, 30, .85)); border: 1px solid rgba(255, 255, 255, .07); transition: transform .4s var(--zg-ease), border-color .3s; }
.zg-dl-card:hover { transform: translateY(-4px); border-color: rgba(139, 92, 246, .45); }
.zg-dl-card.is-yours { border-color: rgba(56, 189, 248, .55); box-shadow: 0 20px 60px -25px rgba(56, 189, 248, .7); }
.zg-dl-card.is-soon { opacity: .65; }
.zg-dl-os { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, rgba(139, 92, 246, .45), rgba(56, 189, 248, .3)); }
.zg-dl-yours { display: none; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7dd3fc; padding: .2rem .55rem; border-radius: 999px; background: rgba(56, 189, 248, .12); }
.zg-dl-card.is-yours .zg-dl-yours { display: inline-block; }
.zg-dl-meta { margin: 1.2rem 0; display: grid; gap: .35rem; font-size: .88rem; }
.zg-dl-meta div { display: flex; justify-content: space-between; gap: 1rem; }
.zg-dl-meta dt { color: var(--zg-dim); font-weight: 500; }
.zg-dl-meta dd { margin: 0; color: #e8ebf5; text-align: right; word-break: break-all; }
.zg-dl-sha { margin-top: .7rem; border: 0; background: none; color: var(--zg-dim); font-size: .78rem; text-align: center; cursor: pointer; }
.zg-dl-sha:hover { color: #e8ebf5; }
.zg-dl-sha code { color: #a5b4fc; }
.zg-dl-install { padding-bottom: 3rem; }
.zg-dl-step { height: 100%; padding: 1.5rem; border-radius: 20px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); }
.zg-dl-step.is-yours { border-color: rgba(56, 189, 248, .45); }
.zg-dl-step h3 { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.zg-dl-step ol { padding-left: 1.1rem; margin: 1rem 0 0; color: #c3cbe2; line-height: 1.7; }
.zg-dl-step li + li { margin-top: .5rem; }
.zg-dl-step pre { margin: .6rem 0 0; padding: .8rem 1rem; border-radius: 12px; background: #070a16; border: 1px solid rgba(255, 255, 255, .07); font-size: .82rem; white-space: pre-wrap; }
.zg-dl-step code, .zg-dl-notes code { color: #c4b5fd; }
.zg-dl-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 2rem; color: var(--zg-dim); font-size: .92rem; line-height: 1.6; }
.zg-dl-notes b { color: #e8ebf5; }