/* LAYOUT: page sections (header, hero, filter bar, grid, footer). */

header{position:sticky;top:0;z-index:20;background:color-mix(in srgb, var(--surface) 90%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding-top:env(safe-area-inset-top,0px)}
.headbar{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;max-width:1120px;margin:0 auto;gap:12px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1.2rem;white-space:nowrap}
.brand img{width:30px;height:30px;border-radius:50%;flex:none;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.brand:hover img{transform:rotate(-12deg) scale(1.08)}
.navlink{color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:600;position:relative;padding:4px 0}
.navlink::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--red);transition:width .25s}
.navlink:hover{color:var(--ink)}
.navlink:hover::after{width:100%}
.navrow{display:flex;gap:22px;margin-left:8px}
@media(max-width:640px){.navrow{display:none}}
.authbox{display:flex;align-items:center;gap:10px}
.who{font-size:.84rem;color:var(--muted)}
.who b{color:var(--ink)}

.hero{position:relative;padding:64px 0 118px;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,var(--red-deep) 0%,var(--red-deep2) 45%,var(--rose) 100%);}
.hero-mark{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.5}
.hero .wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:auto;display:block;line-height:0;z-index:1}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(2.1rem,5vw,3.1rem);line-height:1.06;margin:0 0 16px;max-width:15ch;letter-spacing:-.015em;font-weight:600}
.hero p{color:rgba(255,255,255,.82);max-width:52ch;font-size:1.03rem;line-height:1.6;margin:0 0 26px}
.stats{display:flex;gap:0;flex-wrap:wrap;margin-top:8px;border-top:1px solid rgba(255,255,255,.22)}
.stat{padding:14px 28px 0 0;border-right:1px solid rgba(255,255,255,.22);margin-right:28px}
.stat:last-child{border-right:none}
.stat b{display:block;font-family:'Space Grotesk';font-size:1.7rem;font-weight:600;color:#fff}
.stat span{color:rgba(255,255,255,.72);font-size:.78rem}

#opps h2{font-size:1.7rem;letter-spacing:-.01em;margin:0 0 4px}
#opps>.wrap>p.sub{color:var(--muted);margin:0 0 6px;font-size:.92rem}
.controls{display:flex;gap:9px;flex-wrap:wrap;align-items:center;padding:16px 0}
.controls input[type=text],.controls select{border:1px solid var(--border);background:var(--surface);color:var(--ink);padding:9px 13px;border-radius:10px;font-size:.88rem;font-family:inherit}
.controls input[type=text]{flex:1;min-width:170px}
.spacer{flex:1}
.controls input[type=text]:focus,.controls select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:15px;padding:6px 0 60px}

footer{border-top:1px solid var(--border);text-align:center;color:var(--muted);font-size:.8rem;padding:30px 20px calc(30px + env(safe-area-inset-bottom,0px))}