/* Hawkaye NEXT-GEN skin (CSS-only; JS adds micro-interactions) */

/* Tokens */
:root{
  --hv-bg:#070a0f; --hv-text:#eaf2ff; --hv-muted:#a4b3d1; --hv-line:rgba(255,255,255,.14);
  --hv-blue:#2b7cff; --hv-cyan:#00e1ff; --hv-white:#fff;
}

/* Base scopes */
.hv-hero, .hv-section, .hv-cta, .hv-features, .hv-videos, .hv-shop, .hv-pricing, .hv-contact, .hv-faq{
  position:relative; isolation:isolate; color:var(--hv-text); background:var(--hv-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
}
.hv-container{ max-width:1200px; margin:0 auto; padding:72px 24px; text-align:center }
.hv-section{ padding:64px 24px }
.mt-0{margin-top:0}.mt-16{margin-top:16px}.mt-8{margin-top:8px}

/* Headings */
.hv-section h2{ font-size: clamp(26px, 3.6vw, 36px); margin:0 0 10px }
.hv-section p{ font-size:18px; line-height:1.75; color:var(--hv-muted); max-width:920px; margin:0 auto }

/* Buttons */
.btn, .hv-btn{ position:relative; display:inline-block; padding:14px 22px; border-radius:14px; font-weight:700;
  color:#051018; background: linear-gradient(180deg, #f6fbff, #dbe9ff); border:1px solid rgba(255,255,255,.4);
  box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .18s ease, box-shadow .3s ease, background .3s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0,0,0,.35), 0 0 20px rgba(43,124,255,.35) }
.btn.outline{ background:transparent; color:var(--hv-text); border-color: rgba(255,255,255,.4) }

/* Hero w/ animated mesh */
.hv-hero-neo{ padding:120px 0 96px; overflow:hidden }
.hv-hero-neo .hv-hero-bg{ position:absolute; inset:-10% -10% -10% -10%; z-index:-2 }
.hv-hero-neo .hv-planet{
  position:absolute; left:50%; top:20%; width:52vmax; height:52vmax; transform:translate(-50%,-50%);
  background: radial-gradient(circle at 30% 35%, rgba(43,124,255,.55), transparent 55%),
              radial-gradient(circle at 70% 65%, rgba(0,225,255,.35), transparent 60%),
              radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,0) 70%);
  filter: blur(24px) saturate(130%); animation: hv-mesh 24s linear infinite alternate;
}
.hv-hero-neo .hv-orb{
  position:absolute; left:calc(50% + 28vmin); top:18%; width:18vmin; height:18vmin; border-radius:50%;
  background: radial-gradient(circle at 40% 40%, #7af3ff, #2b7cff 70%);
  box-shadow: 0 0 60px rgba(0,225,255,.35), 0 0 120px rgba(43,124,255,.25); animation: hv-orbit 14s ease-in-out infinite;
}
@keyframes hv-orbit{ 0%{ transform: translate(-10px, -10px) } 50%{ transform: translate(10px, 10px) } 100%{ transform: translate(-10px, -10px) } }
.hv-hero-neo .hv-shard{ position:absolute; width:45vmin; height:45vmin; border-radius:24px; background: linear-gradient(120deg, rgba(255,255,255,.14), rgba(255,255,255,0)); filter: blur(12px); opacity:.35 }
.hv-hero-neo .hv-shard.s1{ left:5%; top:10% } .hv-hero-neo .hv-shard.s2{ right:6%; top:22%; transform:rotate(-8deg) } .hv-hero-neo .hv-shard.s3{ left:12%; bottom:8%; transform:rotate(18deg) }
.hv-hero-neo .hv-split{ font-size: clamp(40px, 6.2vw, 74px); line-height:1.03; margin:0 0 12px; text-wrap:balance }
.hv-hero-neo .hv-split span{ background: linear-gradient(135deg, var(--hv-blue), var(--hv-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent }
.hv-cta-row{ display:flex; gap:14px; justify-content:center; margin-top:18px }
.hv-marquee{ position:relative; overflow:hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent) }
.hv-marquee .track{ display:inline-flex; gap:28px; white-space:nowrap; padding:16px 0; animation: hv-marquee 20s linear infinite; color:#8fb2ff; text-transform:uppercase; letter-spacing:.14em; font-weight:700 }
.hv-marquee .track.clone{ animation-delay:-10s }
.hv-marquee span{ padding:10px 16px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(255,255,255,.04); backdrop-filter: blur(6px) }
@keyframes hv-marquee{ 0%{ transform: translateX(0) } 100%{ transform: translateX(-50%) } }

/* Features */
.hv-grid-3{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:24px; padding:56px 24px 24px }
@media (max-width: 900px){ .hv-grid-3{ grid-template-columns:1fr 1fr } } @media (max-width: 640px){ .hv-grid-3{ grid-template-columns:1fr } }
.feature{ position:relative; background: rgba(255,255,255,.06); border:1px solid var(--hv-line); border-radius:20px; padding:22px; backdrop-filter: blur(14px) saturate(120%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.25); transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease }
.feature:hover{ transform: translateY(-6px); border-color: rgba(0,225,255,.35); box-shadow: 0 14px 40px rgba(0,0,0,.35), 0 0 34px rgba(43,124,255,.18) }
.feature h3{ font-size:20px; margin:0 0 8px } .feature p{ color:var(--hv-muted); margin:0 }

/* Reels masonry-ish */
.hv-reels .reels-grid{ display:grid; gap:18px; padding-top:28px; grid-template-columns: repeat(12, 1fr) }
.hv-reels .reel{ grid-column: span 4; background:#fff; border:1px solid #e6eefc; border-radius:18px; overflow:hidden; display:block; color:#0b1020; text-decoration:none; transition: transform .22s ease, box-shadow .3s ease, border-color .3s ease; box-shadow: 0 10px 24px rgba(6,22,44,.08) }
.hv-reels .reel.wide{ grid-column: span 8 } .hv-reels .reel.tall{ grid-row: span 2 }
.hv-reels .reel img{ width:100%; display:block; height:auto } .hv-reels .reel span{ display:block; padding:12px 14px; font-weight:700 }
.hv-reels .reel:hover{ transform:translateY(-6px); border-color:#bcd6ff; box-shadow: 0 16px 40px rgba(6,22,44,.12), 0 0 0 6px rgba(43,124,255,.08) }
@media (max-width:1100px){ .hv-reels .reel{ grid-column: span 6 } .hv-reels .reel.wide{ grid-column: span 12 } } @media (max-width:700px){ .hv-reels .reel, .hv-reels .reel.wide{ grid-column: 1 / -1 } }

/* Pricing */
.hv-pricing{ padding:20px 24px 60px }
.hv-pricing .plan{ position:relative; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:22px; backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.22); transform-style: preserve-3d; perspective: 1000px; transition: transform .25s ease, box-shadow .3s ease }
.hv-pricing .plan:hover{ transform: translateY(-6px) rotateX(2deg) rotateY(-2deg) }
.hv-pricing .plan.featured{ outline: 2px solid rgba(0,225,255,.7); box-shadow: 0 0 0 6px rgba(0,225,255,.12), 0 0 50px rgba(0,225,255,.18) }
.hv-pricing .price{ font-size:38px; margin:14px 0 } .hv-pricing .tag{ color: var(--hv-cyan); font-weight:700 }

/* CTA */
.hv-cta{ text-align:center; border-top:1px solid var(--hv-line); border-bottom:1px solid var(--hv-line); padding:80px 24px }
.hv-cta h2{ font-size: clamp(28px, 3.8vw, 40px); margin:0 0 10px; background: linear-gradient(135deg, var(--hv-blue), var(--hv-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent }

/* Contact */
.hv-contact .row{ display:flex; gap:12px; margin-bottom:12px } @media (max-width: 760px){ .hv-contact .row{ flex-direction:column } }
.hv-contact input, .hv-contact textarea{ width:100%; padding:12px; border-radius:12px; background:#fff; color:#06121c; border:1px solid #d8e6ff }

/* Build teaser */
.hv-build-teaser{ margin-top:28px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:20px; padding:22px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap }
.hv-build-teaser h3{ margin:0; font-size:22px }

/* Configurator */
.hv-config .config-grid{ display:grid; gap:22px; margin-top:28px; grid-template-columns: repeat(12, 1fr) }
.hv-config .card{ grid-column: span 4; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:20px; padding:20px; backdrop-filter: blur(12px); transition: transform .2s ease, box-shadow .3s ease }
.hv-config .card:hover{ transform: translateY(-4px); box-shadow: 0 16px 44px rgba(0,0,0,.28) }
.hv-config .card.total{ grid-column: span 12 }
.hv-config h3{ margin:0 0 10px; font-size:20px } .hv-config .hint{ color:var(--hv-muted); font-size:14px; margin-top:8px }
.hv-config .control{ padding:8px 0 } .hv-config input[type=range]{ width:100% } .hv-config .range-meta{ display:flex; justify-content:space-between; font-weight:700; margin-top:8px }
.hv-config .seg{ display:flex; flex-wrap:wrap; gap:8px }
.hv-config .seg label{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); border-radius:14px; cursor:pointer }
.hv-config .seg input{ accent-color: var(--hv-blue) }
.hv-config .select{ width:100%; padding:12px; border-radius:12px; background:#fff; color:#06121c; border:1px solid #d8e6ff }
.hv-config .summary{ list-style:none; padding:0; margin:0 0 12px } .hv-config .summary li{ margin:6px 0 }
.hv-config .price-wrap{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:16px; margin-top:12px }
.hv-config .price-wrap .row{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed rgba(255,255,255,.12) }
.hv-config .price-wrap .row:last-child{ border-bottom:0 } .hv-config .price-wrap .row.grand strong{ font-size:24px } .hv-config .price-wrap .row.saving strong{ color:#7af3ff }
.hv-config .price-wrap .note{ color:var(--hv-muted); font-size:12px; margin-top:8px }
.hv-config .actions{ display:flex; gap:12px; margin-top:14px; flex-wrap:wrap }
@media (max-width:1100px){ .hv-config .card{ grid-column: span 6 } .hv-config .card.total{ grid-column: span 12 } }
@media (max-width:700px){ .hv-config .card{ grid-column: span 12 } }

/* Motion safety */
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }