/* src/styles/ztbee-portfolio-3d.css */

:root { --zt-accent: #8bd450; --zt-bg: #070a08; }
html { scroll-behavior: smooth; }
body { background: #070a08; font-family: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif; }
.zt-page { background: #070a08; }
.zt-header { position: sticky; top: 0; z-index: 20; min-height: 70px; background: rgba(7,10,8,.78); backdrop-filter: blur(18px); }
.zt-hero { min-height: calc(100dvh - 70px); align-items: center; background: #070a08; isolation: isolate; }
.zt-hero-img { inset: 0 0 0 auto; width: 68%; height: 100%; object-fit: cover; object-position: right center; filter: saturate(.9) contrast(1.04) brightness(.9); opacity: .94; animation: zt-keyboard-float 7s ease-in-out infinite; }
.zt-hero-shade { z-index: 0; background: linear-gradient(90deg, #070a08 0%, rgba(7,10,8,.98) 32%, rgba(7,10,8,.66) 52%, rgba(7,10,8,.08) 78%); }
.zt-hero-content { width: min(100%, 1440px); margin: 0 auto; padding: 72px var(--zt-gutter); }
.zt-hero-statement { max-width: 760px; font-size: clamp(52px, 6.2vw, 96px); line-height: .94; letter-spacing: -.045em; }
.zt-hero-sub { max-width: 510px; color: #c8cec8; }
.zt-status { top: 36px; color: #a9d57a; }
.zt-btn { transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease; }
.zt-btn:hover { transform: translateY(-2px); }
.zt-btn:active { transform: translateY(1px); }
.zt-section { scroll-margin-top: 72px; }
@keyframes zt-keyboard-float { 0%,100% { transform: translate3d(0,0,0) scale(1.01); } 50% { transform: translate3d(0,-12px,0) scale(1.02); } }
@media (max-width: 980px) {
  .zt-header { min-height: 64px; }
  .zt-hero { min-height: calc(100dvh - 64px); }
  .zt-hero-img { width: 100%; opacity: .5; object-position: 64% center; }
  .zt-hero-shade { background: linear-gradient(90deg, rgba(7,10,8,.98), rgba(7,10,8,.66)), linear-gradient(0deg, #070a08 0%, transparent 58%); }
  .zt-hero-content { padding-top: 96px; padding-bottom: 56px; }
}
@media (max-width: 640px) {
  .zt-nav { gap: 14px; }
  .zt-nav-link { font-size: 8px; letter-spacing: .12em; }
  .zt-hero-content { padding: 88px 20px 44px; }
  .zt-hero-statement { font-size: clamp(42px, 14vw, 62px); }
  .zt-hero-actions { flex-wrap: wrap; }
  .zt-btn { min-height: 50px; padding-inline: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zt-hero-img { animation: none; }
  .zt-btn { transition: none; }
}