/* Brand palette (Graphic Designer, Oct 2026): charcoal + gold. */
:root{
  --bg:#1C1C1C; --card:#272727; --card-2:#333333; --track:#333333;
  --heading:#FFFFFF; --text:#EDEDED; --muted:#A6A6A6; --muted-2:#8A8A8A;
  --gold:#FFD700; --gold-2:#B39A1E; --on-gold:#1A1A1A; --error:#FF6B6B;
  --line:rgba(255,255,255,.08); --radius:6px;
  --font-display:"Bowlby One SC",Impact,"Arial Black",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-weight:400;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
h1,h2,h3,h4{color:var(--heading)}
.display{font-family:var(--font-display);font-weight:400;letter-spacing:.5px;line-height:1.1}
.ic{width:16px;height:16px;flex:none;vertical-align:middle}

/* Banner: full 7:3 photo at natural aspect ratio (never cropped/stretched), fading into charcoal at the bottom. */
.banner{position:absolute;top:0;left:0;right:0;z-index:0;aspect-ratio:7/3;overflow:hidden;pointer-events:none}
.banner img{display:block;width:100%;height:auto;aspect-ratio:7/3}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(28,28,28,0) 0%,rgba(28,28,28,0) 40%,rgba(28,28,28,.45) 72%,rgba(28,28,28,.85) 90%,#1C1C1C 100%)}
/* Header block starts below Lucio's face/chin (~44% of the banner's height = 19vw); face sits ~46% across, ~20% down. */
.wrap{position:relative;z-index:1;max-width:1140px;margin:0 auto;padding:clamp(72px,19vw,440px) 24px 80px}
.hero-right h1,.loc{text-shadow:0 1px 14px rgba(0,0,0,.7)}
.hero{display:grid;grid-template-columns:340px 1fr;gap:64px;align-items:start}
/* Any square JPG/PNG works (1080, 2048, …): it's scaled + center-cropped to the box. */
.photo{width:340px;height:340px;aspect-ratio:1/1;object-fit:cover;object-position:center;border-radius:var(--radius);display:block;background:var(--card);box-shadow:0 0 0 1px rgba(255,255,255,.10),0 14px 36px rgba(0,0,0,.5)}
.collab h2{font-size:22px;font-weight:700;margin:26px 0 10px}
.collab p{font-size:15px;line-height:1.55;margin:0 0 18px}
.btn-yellow{display:block;text-align:center;background:var(--gold);color:var(--on-gold);text-decoration:none;font:700 15px var(--font-body);padding:18px;border-radius:999px;transition:filter .15s}
.btn-yellow:hover{filter:brightness(1.06)}
button.btn-yellow{width:100%;border:0;cursor:pointer}
.hero-right h1{font-family:var(--font-display);font-weight:400;font-size:clamp(24px,4.2vw,46px);line-height:1.05;margin:0 0 10px;letter-spacing:.5px;overflow-wrap:anywhere}
.loc{display:flex;align-items:center;gap:8px;font-size:20px;margin:0 0 14px;color:var(--heading)}
.loc .ic{color:var(--gold)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.tag{border:1px solid var(--gold-2);color:var(--text);background:rgba(28,28,28,.45);border-radius:999px;padding:7px 14px;font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.6px}
.eyebrow{font-size:12px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}
.total-num{font-size:42px;font-weight:700;color:var(--heading);margin:4px 0 14px;letter-spacing:-.5px}
.pcounts{display:flex;flex-wrap:wrap;gap:22px;font-size:15px;font-weight:500}
.pcounts a{display:flex;align-items:center;gap:8px;text-decoration:none}
.pcounts a:hover{color:var(--gold)}
.pcounts .ic{width:20px;height:20px}
.about{margin-top:56px}
.about .eyebrow{font-family:var(--font-display);font-weight:400;font-size:clamp(20px,2.4vw,26px);color:var(--heading);text-transform:none;letter-spacing:.5px}
.about p{font-size:20px;line-height:1.55;margin:14px 0 0;max-width:1140px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:96px 0 48px}
.tab{display:flex;align-items:center;gap:10px;background:transparent;border:1px solid transparent;color:var(--muted);font:500 15px var(--font-body);padding:12px 18px;border-radius:var(--radius);cursor:pointer}
.tab:hover{color:var(--heading);background:var(--card)}
.tab .ic{width:20px;height:20px}
.tab[aria-selected="true"]{background:var(--gold);color:var(--on-gold);font-weight:700}
.tab .plus{font-size:12px;font-weight:700;background:var(--card-2);color:var(--gold);border-radius:999px;padding:1px 7px}
.tab[aria-selected="true"] .plus{background:var(--on-gold);color:var(--gold)}
.ph{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.ph h2{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,3.4vw,40px);line-height:1.05;margin:0;letter-spacing:.5px}
.ph .sub{font-size:13px;color:var(--muted);text-transform:uppercase;margin-top:10px;letter-spacing:.6px}
.ph .sub a{text-decoration:none}
.ph .sub a:hover{color:var(--gold)}
.ph-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.synced{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:6px 10px;font-size:13px;font-weight:500;color:var(--text)}
.synced .ic{color:var(--gold)}
.window{font-size:14px;color:var(--muted)}
.switcher{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0}
.chip{background:transparent;border:1px solid rgba(255,255,255,.28);color:var(--text);border-radius:999px;padding:8px 16px;font:500 14px var(--font-body);cursor:pointer}
.chip:hover{border-color:var(--gold-2)}
.chip[aria-pressed="true"]{background:var(--gold);color:var(--on-gold);border-color:var(--gold);font-weight:700}
.sec-title{font-family:var(--font-display);font-weight:400;font-size:clamp(18px,2vw,22px);letter-spacing:.5px;margin:48px 0 16px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px 18px;position:relative;min-height:126px}
.card.wide{grid-column:1/-1}
.card .lbl{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;padding-right:28px}
.card .lbl .ic{width:18px;height:18px;color:var(--gold)}
.card .val{font-size:40px;font-weight:700;color:var(--heading);margin-top:12px;line-height:1;letter-spacing:-.5px}
.card .note{font-size:13px;color:var(--muted);margin-top:14px}
.shield{position:absolute;top:16px;right:16px;width:18px;height:18px;color:var(--muted-2)}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.demo{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px;position:relative}
.demo h4{margin:0 0 18px;font-size:12px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.pie-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.pie{width:180px;height:180px;border-radius:50%}
.legend{display:grid;grid-template-columns:auto auto;column-gap:46px;row-gap:4px;font-size:16px;font-weight:500;color:var(--heading)}
.legend .dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px}
.bars .row{margin-bottom:12px}
.bars .top{display:flex;justify-content:space-between;font-size:13px;font-weight:500;margin-bottom:6px}
.bars .track{height:8px;background:var(--track);border-radius:2px;overflow:hidden}
.bars .fill{height:100%;background:var(--gold)}
.seg{display:flex;gap:6px;margin-bottom:16px}
.seg button{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:6px 12px;font:500 12px var(--font-body);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--gold);color:var(--on-gold);border-color:var(--gold);font-weight:700}
.posts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:border-color .15s}
.post:hover{border-color:var(--gold-2)}
.post .thumb{aspect-ratio:1/1;background:linear-gradient(135deg,var(--card-2) 0%,var(--card) 70%) center/cover;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px}
.post:hover .thumb{background-color:var(--card-2)}
.post .pstats{display:flex;gap:14px;padding:10px 12px;font-size:13px;font-weight:500;flex-wrap:wrap}
.plink{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--heading);font-weight:500;font-size:15px}
.plink small{color:var(--muted);font-weight:400;font-size:12px}
.pl-ic{width:38px;height:38px;color:var(--gold)}
.breakdown{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);overflow:hidden;font-size:15px}
.breakdown th,.breakdown td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.breakdown th{font-size:12px;font-weight:500;text-transform:uppercase;color:var(--muted);letter-spacing:.6px}
.breakdown tr:last-child td{border-bottom:0}
.breakdown td a{text-decoration:none;font-weight:500;color:var(--heading)}
.breakdown td a:hover{color:var(--gold)}
.breakdown .tot td{font-weight:700;color:var(--heading);background:var(--card-2)}
.scroll-x{overflow-x:auto}
.combined-note{font-size:12.5px;color:var(--muted-2);margin-top:10px}
.pending{background:var(--card);border-radius:var(--radius);padding:18px;color:var(--muted);font-size:15px;margin-top:16px}
.foot{margin-top:56px;font-size:13px;color:var(--muted-2)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--gold);color:var(--on-gold);padding:12px 18px;border-radius:8px;font-weight:700;font-size:14px;z-index:9}

/* Contact modal */
.modal{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.modal-card{position:relative;background:var(--bg);border:1px solid rgba(255,255,255,.1);border-top:3px solid var(--gold);border-radius:12px;width:100%;max-width:560px;max-height:calc(100vh - 32px);overflow:auto;padding:28px 24px 24px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal-card h2{margin:0 0 6px;font-size:24px;font-weight:700}
.modal-x{position:absolute;top:10px;right:14px;background:none;border:0;color:var(--muted);font-size:30px;cursor:pointer;line-height:1}
.modal-x:hover{color:var(--heading)}
.cf-intro{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 18px}
#contact-form label{display:block;font-size:12px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:14px}
#contact-form .opt{text-transform:none;font-weight:400;color:var(--muted-2)}
#contact-form input,#contact-form textarea{display:block;width:100%;margin-top:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);color:var(--heading);font:400 15px var(--font-body);padding:12px}
#contact-form input::placeholder{color:var(--muted-2)}
#contact-form input:focus,#contact-form textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,215,0,.25)}
#contact-form .invalid{border-color:var(--error)}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-msg{background:var(--card);border-left:3px solid var(--gold);padding:12px 14px;border-radius:4px;font-size:14px;line-height:1.5;margin:0 0 14px}
.cf-msg.err{border-left-color:var(--error)}
.cf-alt{font-size:13px;color:var(--muted);text-align:center;margin:12px 0 0}
.cf-alt a{color:var(--gold)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:28px}
  .hero-left{display:contents}
  .photo{width:160px;height:160px;order:1}
  .hero-right{order:2}
  .collab{order:3}
  .loc{font-size:17px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .posts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .wrap{padding:max(72px,34vw) 16px 60px}
  .hero-right h1{font-size:clamp(22px,7.2vw,32px)}
  .about p{font-size:16.5px}
  .tabs{margin:56px 0 32px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tab{white-space:nowrap;padding:11px 14px}
  .ph-right{align-items:flex-start;text-align:left}
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .card{min-height:104px;padding:14px 12px}
  .grid>.card.wide{grid-column:auto}
  .grid>.card:last-child:nth-child(odd){grid-column:1/-1}
  .card .lbl{font-size:10.5px;letter-spacing:.4px}
  .card .val{font-size:30px}
  .demo-grid{grid-template-columns:1fr}
  .total-num{font-size:36px}
  .pcounts{gap:16px}
  .cf-row{grid-template-columns:1fr;gap:0}
}

/* ===== Graffiti accents v2 (street-art texture; CSS + inline SVG only) ===== */
:root{--spk-br:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%221.00%22 cy=%221.00%22 r=%22.7%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFD700%22 stop-opacity=%22.10%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23FFD700%22 stop-opacity=%22.03%22/%3E%3Cstop offset=%221%22 stop-color=%22%23FFD700%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width=%22120%22 height=%22120%22 fill=%22url(%23g)%22/%3E%3Cg fill=%22%23FFD700%22%3E%3Ccircle cx=%22107.7%22 cy=%22116.5%22 r=%221%22 fill-opacity=%220.33%22/%3E%3Ccircle cx=%2281.6%22 cy=%2290.0%22 r=%222.1%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2286.4%22 cy=%22108.9%22 r=%220.9%22 fill-opacity=%220.26%22/%3E%3Ccircle cx=%22117.7%22 cy=%2278.4%22 r=%221.6%22 fill-opacity=%220.24%22/%3E%3Ccircle cx=%22107.3%22 cy=%22111.4%22 r=%221.1%22 fill-opacity=%220.32%22/%3E%3Ccircle cx=%22100.3%22 cy=%22108.4%22 r=%221.3%22 fill-opacity=%220.30%22/%3E%3Ccircle cx=%22107.2%22 cy=%22110.0%22 r=%221.6%22 fill-opacity=%220.32%22/%3E%3Ccircle cx=%22109.4%22 cy=%2274.0%22 r=%220.9%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2296.3%22 cy=%2291.8%22 r=%221.1%22 fill-opacity=%220.25%22/%3E%3Ccircle cx=%2285.9%22 cy=%22115.7%22 r=%221.6%22 fill-opacity=%220.26%22/%3E%3Ccircle cx=%2282.7%22 cy=%2239.4%22 r=%220.7%22 fill-opacity=%220.11%22/%3E%3Ccircle cx=%2280.5%22 cy=%22107.6%22 r=%220.7%22 fill-opacity=%220.24%22/%3E%3Ccircle cx=%2288.1%22 cy=%2299.9%22 r=%221.6%22 fill-opacity=%220.25%22/%3E%3Ccircle cx=%2297.9%22 cy=%2288.0%22 r=%221%22 fill-opacity=%220.25%22/%3E%3C/g%3E%3C/svg%3E");--spk-brd:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%221.00%22 cy=%221.00%22 r=%22.7%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFD700%22 stop-opacity=%22.10%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23FFD700%22 stop-opacity=%22.03%22/%3E%3Cstop offset=%221%22 stop-color=%22%23FFD700%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width=%22120%22 height=%22120%22 fill=%22url(%23g)%22/%3E%3Cg fill=%22%23FFD700%22%3E%3Ccircle cx=%22117.2%22 cy=%2266.0%22 r=%222.1%22 fill-opacity=%220.20%22/%3E%3Ccircle cx=%2263.1%22 cy=%22109.1%22 r=%222.1%22 fill-opacity=%220.19%22/%3E%3Ccircle cx=%22107.0%22 cy=%22116.3%22 r=%221.3%22 fill-opacity=%220.33%22/%3E%3Ccircle cx=%22118.4%22 cy=%22106.4%22 r=%221.1%22 fill-opacity=%220.33%22/%3E%3Ccircle cx=%22100.9%22 cy=%2280.8%22 r=%220.9%22 fill-opacity=%220.23%22/%3E%3Ccircle cx=%2250.3%22 cy=%2278.1%22 r=%221.3%22 fill-opacity=%220.13%22/%3E%3Ccircle cx=%22109.7%22 cy=%2284.8%22 r=%220.7%22 fill-opacity=%220.25%22/%3E%3Ccircle cx=%2293.1%22 cy=%22111.4%22 r=%221.1%22 fill-opacity=%220.28%22/%3E%3Ccircle cx=%2298.5%22 cy=%22108.5%22 r=%220.7%22 fill-opacity=%220.29%22/%3E%3Ccircle cx=%22111.2%22 cy=%2287.7%22 r=%221.3%22 fill-opacity=%220.26%22/%3E%3Ccircle cx=%2297.0%22 cy=%22116.4%22 r=%222.1%22 fill-opacity=%220.30%22/%3E%3Ccircle cx=%2290.7%22 cy=%22101.5%22 r=%222.1%22 fill-opacity=%220.26%22/%3E%3Ccircle cx=%2214.6%22 cy=%2297.5%22 r=%221.1%22 fill-opacity=%220.07%22/%3E%3Ccircle cx=%2251.2%22 cy=%2238.6%22 r=%222.1%22 fill-opacity=%220.07%22/%3E%3Ccircle cx=%2250.5%22 cy=%2245.6%22 r=%222.1%22 fill-opacity=%220.08%22/%3E%3Ccircle cx=%2249.2%22 cy=%2253.2%22 r=%220.9%22 fill-opacity=%220.09%22/%3E%3Ccircle cx=%22115.2%22 cy=%2282.8%22 r=%221.1%22 fill-opacity=%220.25%22/%3E%3Ccircle cx=%2239.6%22 cy=%22103.8%22 r=%220.9%22 fill-opacity=%220.13%22/%3E%3Ccircle cx=%2287.2%22 cy=%2265.4%22 r=%222.1%22 fill-opacity=%220.18%22/%3E%3Cpath d=%22M107.2 86.0v16.7%22 stroke=%22%23FFD700%22 stroke-opacity=%22.32%22 stroke-width=%221.6%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%22107.2%22 cy=%22104.3%22 r=%221.7%22 fill-opacity=%22.38%22/%3E%3Cpath d=%22M88.0 86.0v20.0%22 stroke=%22%23FFD700%22 stroke-opacity=%22.32%22 stroke-width=%221.6%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%2288.0%22 cy=%22107.6%22 r=%221.7%22 fill-opacity=%22.38%22/%3E%3C/g%3E%3C/svg%3E");--spk-tr:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%221.00%22 cy=%220.00%22 r=%22.7%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFD700%22 stop-opacity=%22.10%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23FFD700%22 stop-opacity=%22.03%22/%3E%3Cstop offset=%221%22 stop-color=%22%23FFD700%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width=%22120%22 height=%22120%22 fill=%22url(%23g)%22/%3E%3Cg fill=%22%23FFD700%22%3E%3Ccircle cx=%2291.3%22 cy=%2232.2%22 r=%220.7%22 fill-opacity=%220.24%22/%3E%3Ccircle cx=%22117.6%22 cy=%221.4%22 r=%220.9%22 fill-opacity=%220.36%22/%3E%3Ccircle cx=%22117.3%22 cy=%221.4%22 r=%222.1%22 fill-opacity=%220.36%22/%3E%3Ccircle cx=%2246.4%22 cy=%2216.2%22 r=%221.1%22 fill-opacity=%220.14%22/%3E%3Ccircle cx=%2298.8%22 cy=%2231.9%22 r=%221.1%22 fill-opacity=%220.25%22/%3E%3Ccircle cx=%22116.1%22 cy=%222.2%22 r=%222.1%22 fill-opacity=%220.36%22/%3E%3Ccircle cx=%22107.2%22 cy=%2217.6%22 r=%221.1%22 fill-opacity=%220.30%22/%3E%3Ccircle cx=%2273.3%22 cy=%2213.2%22 r=%222.1%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2294.8%22 cy=%2264.0%22 r=%221.3%22 fill-opacity=%220.16%22/%3E%3Ccircle cx=%22107.4%22 cy=%2211.0%22 r=%221.6%22 fill-opacity=%220.32%22/%3E%3Ccircle cx=%22115.1%22 cy=%2227.6%22 r=%220.9%22 fill-opacity=%220.28%22/%3E%3Ccircle cx=%22106.1%22 cy=%228.2%22 r=%221%22 fill-opacity=%220.32%22/%3E%3Ccircle cx=%2274.6%22 cy=%2242.4%22 r=%220.9%22 fill-opacity=%220.18%22/%3E%3Ccircle cx=%2299.7%22 cy=%2221.8%22 r=%221.3%22 fill-opacity=%220.28%22/%3E%3Ccircle cx=%2283.1%22 cy=%2227.5%22 r=%221.1%22 fill-opacity=%220.23%22/%3E%3Ccircle cx=%22117.7%22 cy=%222.7%22 r=%220.7%22 fill-opacity=%220.36%22/%3E%3Ccircle cx=%22106.1%22 cy=%2233.9%22 r=%220.9%22 fill-opacity=%220.25%22/%3E%3Ccircle cx=%22118.0%22 cy=%223.0%22 r=%221%22 fill-opacity=%220.36%22/%3E%3C/g%3E%3C/svg%3E");--spk-tr2:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%221.00%22 cy=%220.00%22 r=%22.7%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFD700%22 stop-opacity=%22.10%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23FFD700%22 stop-opacity=%22.03%22/%3E%3Cstop offset=%221%22 stop-color=%22%23FFD700%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width=%22120%22 height=%22120%22 fill=%22url(%23g)%22/%3E%3Cg fill=%22%23FFD700%22%3E%3Ccircle cx=%22104.0%22 cy=%227.3%22 r=%222.1%22 fill-opacity=%220.31%22/%3E%3Ccircle cx=%22112.8%22 cy=%2291.8%22 r=%221.1%22 fill-opacity=%220.10%22/%3E%3Ccircle cx=%22116.7%22 cy=%2277.7%22 r=%222.1%22 fill-opacity=%220.14%22/%3E%3Ccircle cx=%22115.5%22 cy=%2255.3%22 r=%221.1%22 fill-opacity=%220.20%22/%3E%3Ccircle cx=%22106.4%22 cy=%223.5%22 r=%221.3%22 fill-opacity=%220.32%22/%3E%3Ccircle cx=%2259.6%22 cy=%2221.7%22 r=%221%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%22114.0%22 cy=%223.6%22 r=%222.1%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%22113.2%22 cy=%223.2%22 r=%221.3%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%22118.5%22 cy=%224.4%22 r=%221%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%22110.2%22 cy=%225.0%22 r=%220.9%22 fill-opacity=%220.33%22/%3E%3Ccircle cx=%22110.9%22 cy=%221.1%22 r=%221.3%22 fill-opacity=%220.34%22/%3E%3C/g%3E%3C/svg%3E");--g-under:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%2222%22 viewBox=%220 0 100 22%22%3E%3Cg fill=%22none%22 stroke=%22%23FFD700%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M2.5 6.6C15 4.2 29 7.4 44 5.8S73 4 86 5.6c4 .5 7.5.2 11.5-.9%22 stroke-width=%224.2%22/%3E%3Cpath d=%22M7 8.6c15-1.2 32 .4 49-.7s23-.9 31 .2%22 stroke-width=%221.5%22 stroke-opacity=%22.5%22/%3E%3Cpath d=%22M62.5 7.5v8.2%22 stroke-width=%222.2%22/%3E%3Cpath d=%22M27 7.6v3.6%22 stroke-width=%221.6%22 stroke-opacity=%22.8%22/%3E%3C/g%3E%3Ccircle cx=%2262.5%22 cy=%2217.6%22 r=%222.3%22 fill=%22%23FFD700%22/%3E%3Ccircle cx=%2227%22 cy=%2212.6%22 r=%221.3%22 fill=%22%23FFD700%22 fill-opacity=%22.8%22/%3E%3Cg fill=%22%23FFD700%22 fill-opacity=%22.6%22%3E%3Ccircle cx=%2293%22 cy=%2210.5%22 r=%221%22/%3E%3Ccircle cx=%2297.5%22 cy=%222.6%22 r=%22.8%22/%3E%3Ccircle cx=%221.6%22 cy=%2210.4%22 r=%22.8%22/%3E%3Ccircle cx=%2280%22 cy=%2211.5%22 r=%22.6%22/%3E%3C/g%3E%3C/svg%3E");--g-star:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2230%22 viewBox=%220 0 28 30%22%3E%3Cpath d=%22M5.5 25.5 13.8 2.8 21.6 24.6 2.4 10.6l23.4.4L6.2 25.2%22 fill=%22none%22 stroke=%22%23FFD700%22 stroke-width=%222.3%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M21.4 25.2v2.6%22 stroke=%22%23FFD700%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%2221.4%22 cy=%2228.6%22 r=%221.2%22 fill=%22%23FFD700%22/%3E%3Ccircle cx=%2225.6%22 cy=%224.5%22 r=%22.9%22 fill=%22%23FFD700%22 fill-opacity=%22.7%22/%3E%3C/svg%3E");--g-bracket:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2244%22 height=%2244%22 viewBox=%220 0 44 44%22%3E%3Cg fill=%22none%22 stroke=%22%23FFD700%22 stroke-linecap=%22round%22 stroke-opacity=%22.75%22%3E%3Cpath d=%22M5.5 38C5 28 5.2 16 5.8 5.6 16 5 26 5.2 38.5 5.8%22 stroke-width=%222.6%22/%3E%3Cpath d=%22M8 30c-.3-7 0-14 .4-21.6 7-.4 13-.3 20 .2%22 stroke-width=%221%22 stroke-opacity=%22.4%22/%3E%3C/g%3E%3Cg fill=%22%23FFD700%22 fill-opacity=%22.45%22%3E%3Ccircle cx=%2241%22 cy=%228.5%22 r=%22.9%22/%3E%3Ccircle cx=%223%22 cy=%2241%22 r=%22.8%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%22.6%22/%3E%3C/g%3E%3C/svg%3E");--g-paisley:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22 viewBox=%220 0 180 180%22%3E%3Cdefs%3E%3Cg id=%22p%22%3E%3Cpath d=%22M0 0C-16 0-22-20-10-31 1-41 18-38 20-56 30-36 26-10 10-2 7 0 4 0 0 0Z%22/%3E%3Cpath d=%22M-1-8C-9-8-12-19-5-25 2-30 10-30 12-40 16-28 13-14 5-9 3-8 1-8-1-8Z%22/%3E%3Ccircle cx=%22-2%22 cy=%22-18%22 r=%222.5%22/%3E%3Cpath d=%22M-20 4c8 6 26 6 36-2%22 stroke-dasharray=%221 5%22/%3E%3C/g%3E%3C/defs%3E%3Cg fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%221.4%22 stroke-linecap=%22round%22%3E%3Cuse href=%22%23p%22 transform=%22translate(48 70)%22/%3E%3Cuse href=%22%23p%22 transform=%22translate(132 150) rotate(180) translate(0 30)%22/%3E%3Cpath d=%22M128 28l5 5-5 5-5-5z M30 140l5 5-5 5-5-5z%22/%3E%3C/g%3E%3Cg fill=%22%23FFFFFF%22%3E%3Ccircle cx=%2292%22 cy=%2294%22 r=%221.6%22/%3E%3Ccircle cx=%22168%22 cy=%2284%22 r=%221.4%22/%3E%3Ccircle cx=%228%22 cy=%2218%22 r=%221.4%22/%3E%3C/g%3E%3C/svg%3E");--g-drip:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2214%22 viewBox=%220 0 40 14%22%3E%3Cg fill=%22%23FFD700%22%3E%3Cpath d=%22M6 0h4v6.5a2 2 0 0 1-4 0z%22/%3E%3Ccircle cx=%228%22 cy=%2211.5%22 r=%221.6%22/%3E%3Cpath d=%22M27 0h3v3.8a1.5 1.5 0 0 1-3 0z%22/%3E%3C/g%3E%3C/svg%3E")}
html,body{overflow-x:clip}
/* Section headings: hand-sprayed underline with drips */
.sec-title::after,.about .eyebrow::after{content:"";display:block;width:100px;height:22px;margin-top:6px;background:var(--g-under) no-repeat left top/100px 22px}
.sec-title{margin-bottom:10px}
/* Hand-drawn star doodles echoing the banner star */
.about .eyebrow,.ph h2{position:relative;display:inline-block}
.about .eyebrow::before{content:"";position:absolute;right:-36px;top:-13px;width:28px;height:30px;background:var(--g-star) no-repeat center/contain;transform:rotate(12deg)}
.ph h2::after{content:"";position:absolute;right:-28px;top:-9px;width:21px;height:22px;background:var(--g-star) no-repeat center/contain;transform:rotate(-14deg);opacity:.9}
.sec-title:has(+ .scroll-x){position:relative;display:inline-block}
.sec-title:has(+ .scroll-x)::before{content:"";position:absolute;right:-24px;top:-8px;width:17px;height:18px;background:var(--g-star) no-repeat center/contain;transform:rotate(18deg);opacity:.85}
.sec-title:has(+ .scroll-x)+.scroll-x{clear:both}
/* Stat cards: visible gold overspray in a right-hand corner (never behind the numbers), varied */
.card,.demo{background-repeat:no-repeat}
.grid>.card:nth-child(4n+1){background-image:var(--spk-br);background-position:right bottom;background-size:120px 120px}
.grid>.card:nth-child(4n+2){background-image:var(--spk-tr);background-position:right top;background-size:120px 120px}
.grid>.card:nth-child(4n+3){background-image:var(--spk-brd);background-position:right bottom;background-size:104px 104px}
.grid>.card:nth-child(4n){background-image:var(--spk-tr2);background-position:right top;background-size:96px 96px}
/* Larger cards: sprayed gold corner bracket top-left + overspray in a right corner */
.demo-grid>.demo:nth-child(odd){background-image:var(--g-bracket),var(--spk-tr);background-position:2px 2px,right top;background-size:36px 36px,150px 150px}
.demo-grid>.demo:nth-child(even){background-image:var(--g-bracket),var(--spk-brd);background-position:2px 2px,right bottom;background-size:36px 36px,150px 150px}
.breakdown{background:var(--g-bracket) no-repeat 2px 2px/30px 30px,var(--spk-br) no-repeat right bottom/130px 130px,var(--card)}
/* Bandana paisley behind the stats area, just noticeable */
.platform{position:relative}
.platform::before{content:"";position:absolute;top:-40px;bottom:-40px;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--g-paisley) repeat 0 0/180px 180px;opacity:.05;pointer-events:none;z-index:-1;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 160px,#000 calc(100% - 160px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 160px,#000 calc(100% - 160px),transparent)}
/* Work with me: clean gold pill; spray halo + tiny drip on hover */
.btn-yellow{position:relative;transition:filter .15s,box-shadow .2s}
.btn-yellow:hover{box-shadow:0 0 0 5px rgba(255,215,0,.10),0 0 26px 2px rgba(255,215,0,.28)}
.btn-yellow::after{content:"";position:absolute;left:62%;top:100%;width:40px;height:14px;margin-top:-1px;background:var(--g-drip) no-repeat;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .25s;pointer-events:none}
.btn-yellow:hover::after{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.btn-yellow,.btn-yellow::after{transition:none}}
@media (max-width:600px){
  .about .eyebrow::before{right:-32px;top:-11px;width:24px;height:26px}
  .ph h2::after{right:-24px;width:18px;height:19px}
  .sec-title::after,.about .eyebrow::after{width:84px;height:18px;background-size:84px 18px}
  .grid>.card:nth-child(n){background-size:84px 84px}
  .demo-grid>.demo:nth-child(n){background-size:32px 32px,120px 120px}
}