/* ===========================================================
   Stoper v0.3 — hero only
   Restores the ORIGINAL site's simple, clean opening:
     · full-bleed background video
     · blue gradient overlay  rgba(0,80,149,.45) → rgba(0,40,75,.55)
     · centred white type, restrained scale (44px semibold)
     · frosted-glass dashed upload area (#FormArea pattern)
   Values taken from stopersolutions.com's own stylesheet/markup.
   Everything BELOW the hero remains v0.2 (v02.css).
   =========================================================== */

.hero-v3{
  position:relative;
  /* own stacking context: the video/overlay/content z-indexes stay local */
  z-index:0;isolation:isolate;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  min-height:calc(100svh - var(--chrome-h,68px) + var(--sticky-h,68px));
  /* painted immediately so the section never flashes empty while the video loads */
  background:linear-gradient(135deg,#005095 0%,#00284b 100%);
  color:#fff;
}
.hero-v3-video{
  position:absolute;top:50%;left:50%;
  min-width:100%;min-height:100%;width:auto;height:auto;
  transform:translate(-50%,-50%);
  object-fit:cover;z-index:0;pointer-events:none;
}
.hero-v3-overlay{
  position:absolute;inset:0;z-index:1;
  /* original blue kept, with depth added so it isn't a flat wash */
  background:
    radial-gradient(115% 85% at 50% 18%,rgba(0,80,149,.25) 0%,rgba(0,30,58,.70) 100%),
    linear-gradient(135deg,rgba(0,80,149,.45) 0%,rgba(0,40,75,.55) 100%);
}
/* blueprint grid — the same device the body's dark sections use */
.hero-v3-overlay::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(120% 95% at 50% 12%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 95% at 50% 12%,#000 0%,transparent 78%);
}
/* hero melts into the near-black statement band that follows */
.hero-v3::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:30%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(11,16,23,.55) 55%,var(--deep,#0b1017) 100%);
}
.hero-v3-inner{
  position:relative;z-index:2;
  width:100%;max-width:820px;margin:0 auto;
  padding:clamp(40px,6vw,72px) clamp(18px,4vw,40px);
  text-align:center;
}

/* category line demoted to an eyebrow, flanked by the body's hairline rule */
.hero-eyebrow{
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin:0 0 22px;
}
.hero-eyebrow::before,.hero-eyebrow::after{
  content:"";height:1px;width:clamp(26px,5vw,54px);background:rgba(255,255,255,.42);
}
.hero-v3 h1{
  font-size:clamp(34px,5.6vw,64px);
  font-weight:700;
  line-height:1.02;letter-spacing:-.035em;   /* display tracking, like the body */
  margin:0 0 18px;color:#fff;text-wrap:balance;
}
.hero-v3 h1 em{font-style:normal;display:block}
/* outline word as inline SVG: HTML text-stroke has no join control and
   Inter's overlapping paths produced crossing miter spikes; SVG gets
   stroke-linejoin:round for a single clean contour */
.hero-v3 h1 em svg{
  display:block;margin:4px auto 0;height:.82em;width:auto;
  overflow:visible;font-family:Inter,system-ui,sans-serif;
}
.hero-v3 .lead-1{
  font-size:clamp(17px,1.7vw,20px);
  color:#fff;margin:0 auto 8px;max-width:640px;line-height:1.5;
}
.hero-v3 .lead-2{
  font-size:14px;color:rgba(255,255,255,.86);
  margin:0 auto 30px;max-width:640px;line-height:1.55;
}

/* frosted-glass drop area — the original #FormArea treatment */
.form-area{
  position:relative;
  /* hairline dashed keeps the drop affordance; corner ticks add the
     technical-drawing language the body sections use */
  border:1px dashed rgba(255,255,255,.36);
  border-radius:12px;
  padding:clamp(28px,3.8vw,40px) clamp(24px,3.4vw,34px);
  background-color:rgba(255,255,255,.05);
  transition:border-color .3s ease-in-out,background-color .3s ease-in-out;
  text-align:center;
}
/* crop-mark corners, drawn as four L pairs — no extra markup needed */
.form-area::after{
  content:"";position:absolute;inset:9px;pointer-events:none;
  --t:rgba(255,255,255,.9);
  background:
    linear-gradient(var(--t),var(--t)) left top/16px 2px no-repeat,
    linear-gradient(var(--t),var(--t)) left top/2px 16px no-repeat,
    linear-gradient(var(--t),var(--t)) right top/16px 2px no-repeat,
    linear-gradient(var(--t),var(--t)) right top/2px 16px no-repeat,
    linear-gradient(var(--t),var(--t)) left bottom/16px 2px no-repeat,
    linear-gradient(var(--t),var(--t)) left bottom/2px 16px no-repeat,
    linear-gradient(var(--t),var(--t)) right bottom/16px 2px no-repeat,
    linear-gradient(var(--t),var(--t)) right bottom/2px 16px no-repeat;
  transition:inset .25s var(--ease),opacity .25s var(--ease);
}
/* on hover the marks pull outward, like a viewport locking on */
.form-area:hover::after,.form-area.drag::after{inset:5px}
/* blur lives on ::before, never on the box itself — the original notes that a
   backdrop-filter on the container re-anchors any fixed children inside it */
.form-area::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  z-index:-1;
}
.form-area:hover,.form-area.drag{
  border-color:rgba(255,255,255,.72);background-color:rgba(255,255,255,.11);
}
.fa-label{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.66);margin-bottom:16px;
}
.upload-cta{
  display:inline-block;border:2px solid #fff;border-radius:10px;
  padding:14px 32px;font-size:17px;font-weight:700;color:#fff;text-decoration:none;
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.upload-cta:hover{background:#fff;color:var(--blue-dark);text-decoration:none}
.form-area .drag-hint{font-size:14px;color:#fff;margin-top:12px}
.form-area .formats{
  font-size:12px;color:rgba(255,255,255,.66);margin-top:16px;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
}

/* three product truths, kept quiet so the hero stays clean */
.hero-facts{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:24px;
}
.hero-facts span{
  border:1px solid rgba(255,255,255,.3);border-radius:999px;
  padding:8px 18px;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:rgba(255,255,255,.94);background:transparent;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.hero-facts span:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.08)}

@media(max-width:560px){
  .hero-facts span{font-size:12.5px;padding:7px 14px}
  .upload-cta{width:100%;padding:14px 20px}
}
@media(prefers-reduced-motion:reduce){
  .hero-v3-video{display:none}   /* gradient background carries it */
}