/* HawkView.co - Home page */

/* ---- hero ---- */
.hero{ position:relative; padding:72px 0 80px; overflow:hidden; }
.hero .glow.a{ width:620px; height:620px; top:-200px; left:-160px; opacity:.34; }
.hero .glow.b{ width:560px; height:560px; top:60px; right:-180px; opacity:.22; }
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; }
.hero h1{ font-size:clamp(42px,6vw,68px); line-height:1.04; margin-bottom:22px; }
.hero-sub{ font-size:18.5px; color:var(--muted); max-width:31em; margin-bottom:30px; }
.hero-cta{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.hero-meta{ font-size:13.5px; color:var(--muted); margin-top:18px; }
.hero-meta b{ color:var(--text); font-weight:600; }

.shot-wrap{ position:relative; }
.shot-wrap::before{ content:""; position:absolute; inset:-9% -7% -16% -7%; background:var(--grad); filter:blur(64px); opacity:.42; border-radius:30px; z-index:0; }
.shot{ position:relative; z-index:1; width:100%; border-radius:14px; border:1px solid var(--border); box-shadow:var(--shadow); }

/* ---- formats strip ---- */
.formats{ padding:36px 0 8px; }
.formats-label{ text-align:center; color:var(--dim); font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; margin-bottom:20px; }

/* ---- showcase carousel (ported from watermark.pro) ---- */
.showcase-viewport{ overflow:hidden; cursor:grab; -webkit-user-select:none; user-select:none; }
.showcase-viewport:active{ cursor:grabbing; }
.showcase-track{ display:flex; gap:24px; position:relative; will-change:transform; visibility:hidden; }
.showcase-slide{ flex:0 0 66%; min-width:0; transform:scale(.86); opacity:.4;
  transition:transform .5s cubic-bezier(.4,0,.2,1), opacity .5s cubic-bezier(.4,0,.2,1); will-change:transform,opacity; }
.showcase-slide.is-active{ transform:scale(1); opacity:1; }
.showcase-caption{ text-align:center; font-family:var(--display); font-size:18px; font-weight:600; margin:0 0 14px;
  color:var(--text); opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; }
.showcase-slide.is-active .showcase-caption{ opacity:1; transform:translateY(0); }
.showcase-track.no-transition, .showcase-track.no-transition *{ transition:none !important; }
.showcase-frame{ border-radius:var(--radius-lg); padding:8px; background:var(--grad); }
.showcase-slide.is-active .showcase-frame{ box-shadow:var(--shadow); }
.showcase-img{ aspect-ratio:16/9; border-radius:calc(var(--radius-lg) - 6px); overflow:hidden; background:var(--bg); position:relative; }
.showcase-img img{ width:100%; height:100%; object-fit:contain; display:block; }
.showcase-zoom{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8);
  width:54px; height:54px; border-radius:50%; border:none; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:rgba(14,14,20,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease, background .2s ease; }
.showcase-zoom svg{ width:24px; height:24px; }
.showcase-zoom:hover{ background:var(--primary); }
@media (hover:hover){ .showcase-img:hover .showcase-zoom{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); } }
@media (hover:none){ .showcase-slide.is-active .showcase-zoom{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); } }
.showcase-dots{ display:flex; justify-content:center; gap:10px; margin-top:28px; }
.showcase-dot{ width:10px; height:10px; border-radius:50%; border:none; background:var(--border-strong);
  cursor:pointer; padding:0; transition:background .3s ease, transform .3s ease; }
.showcase-dot.is-active{ background:var(--primary); transform:scale(1.3); }
@media (hover:hover){ .showcase-dot:hover{ background:var(--primary-bright); } }

/* ---- lightbox (enlarge a screenshot) ---- */
.lightbox{ position:fixed; inset:0; z-index:9999; padding:40px; background:rgba(8,8,12,.88);
  display:flex; align-items:center; justify-content:center; cursor:zoom-out;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:92vw; max-height:90vh; object-fit:contain; border-radius:var(--radius);
  border:1px solid var(--border-strong); box-shadow:0 30px 90px rgba(0,0,0,.6); }

/* ---- CTA band ---- */
.cta-band{ position:relative; overflow:hidden; text-align:center; padding:72px 28px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); }
.cta-band .glow{ width:520px; height:520px; top:-220px; left:50%; transform:translateX(-50%); opacity:.28; }
.cta-band h2{ position:relative; z-index:1; font-size:clamp(28px,4vw,40px); }
.cta-band p{ position:relative; z-index:1; color:var(--muted); font-size:17px; margin:14px auto 28px; max-width:34em; }
.cta-band .btn{ position:relative; z-index:1; }

@media (max-width:880px){
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .showcase-slide{ flex:0 0 84%; }
  .showcase-track{ gap:12px; }
  .showcase-caption{ font-size:16px; }
}