/* ==========================================================
   HERO
   Top banner with headline, buttons and the animated ribbon graphic.
   ========================================================== */

.hero-wrap{padding-block:clamp(20px,3vw,36px) clamp(48px,6vw,88px);}
.hero{position:relative;overflow:hidden;border-radius:var(--r-l);background:radial-gradient(900px 520px at 78% 30%,#12408F 0%,rgba(18,64,143,0) 62%),#071433;color:#F2F7FF;min-height:clamp(520px,64vh,640px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);}
.hero-copy{position:relative;z-index:2;padding:clamp(36px,6vw,80px);display:flex;flex-direction:column;justify-content:center;gap:24px;}
.hero h1{font-size:clamp(36px,5.2vw,64px);font-weight:700;letter-spacing:-0.03em;max-width:15ch;}
.hero .lede{font-size:clamp(18px,1.6vw,20px);color:rgba(226,236,255,.82);max-width:46ch;}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;}
.hero .btn-primary{background:#57A6FF;color:#04122E;}
.hero .btn-outline{border-color:rgba(226,236,255,.35);color:#F2F7FF;}
.hero .btn-outline:hover{border-color:#8CC4FF;}
.hero-art{position:relative;min-height:320px;}
.hero-art svg{position:absolute;inset:0;width:100%;height:100%;}
.strand{fill:none;stroke:url(#ribGrad);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.1s cubic-bezier(.25,.7,.2,1) calc(var(--i) * 70ms + 150ms) forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
.chip{position:absolute;display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;background:rgba(10,27,68,.62);border:1px solid rgba(140,196,255,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:500 14px/1 var(--font-display);color:#EAF3FF;opacity:0;animation:pop .6s ease-out forwards;}
.chip i{width:8px;height:8px;border-radius:50%;background:#3DD3FF;box-shadow:0 0 10px #3DD3FF;}
.chip.c1{left:34%;top:20%;animation-delay:1.5s;}
.chip.c2{right:8%;top:50%;animation-delay:1.8s;}
.chip.c3{left:22%;bottom:16%;animation-delay:2.1s;}
@keyframes pop{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;}
  .hero-copy{padding-bottom:12px;}
  .hero-art{min-height:300px;}
  .chip.c1{left:12%;top:14%;}
  .chip.c2{right:6%;top:46%;}
  .chip.c3{left:10%;bottom:12%;}
}
@media (prefers-reduced-motion: reduce){
  .strand{animation:none;stroke-dashoffset:0;}
  .chip{animation:none;opacity:1;}
}