/* Home page only, on site.css's palette and type (its variables).
   Andy, 5 Oct 2026, chose two award winners as the bar: Sharplink (the look: a sky gradient that
   deepens to night, dotted guide lines with square corner marks, boxed controls, a floating hero
   object with callouts, text that fills in as you scroll, a list that lights up one line at a time)
   and Monolog (the layout: intro beside a huge headline, result cards on the hero, a founder
   statement, success stories with one real figure each, services as giant stacked words, FAQ beside
   the founder). Colours and fonts stay Chivvy's. */

.hm{--sky:#DCD9FF;--sky2:#ECEAFE;--night:#0E0C24;--deep:#1A1836;--glow:#4F46E5;--mid:#8C86FF;
    --dot:rgba(79,70,229,.16);--dotd:rgba(165,160,255,.14)}
.hm section{border:0;padding:0}

/* guide lines (Sharplink) */
.hm .guides{position:relative}
.hm .guides::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
   linear-gradient(90deg,transparent calc(25% - .5px),var(--dot) calc(25% - .5px),var(--dot) calc(25% + .5px),transparent calc(25% + .5px),
                         transparent calc(50% - .5px),var(--dot) calc(50% - .5px),var(--dot) calc(50% + .5px),transparent calc(50% + .5px),
                         transparent calc(75% - .5px),var(--dot) calc(75% - .5px),var(--dot) calc(75% + .5px),transparent calc(75% + .5px));
  -webkit-mask:repeating-linear-gradient(180deg,#000 0 3px,transparent 3px 7px);mask:repeating-linear-gradient(180deg,#000 0 3px,transparent 3px 7px)}
.hm .night.guides::before,.hm .prods.guides::before{background:
   linear-gradient(90deg,transparent calc(25% - .5px),var(--dotd) calc(25% - .5px),var(--dotd) calc(25% + .5px),transparent calc(25% + .5px),
                         transparent calc(50% - .5px),var(--dotd) calc(50% - .5px),var(--dotd) calc(50% + .5px),transparent calc(50% + .5px),
                         transparent calc(75% - .5px),var(--dotd) calc(75% - .5px),var(--dotd) calc(75% + .5px),transparent calc(75% + .5px))}
.hm .inner{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:0 32px}
.hm .mark{display:block;width:6px;height:6px;background:var(--glow);margin-bottom:18px}
.hm .night .mark,.hm .prods .mark{background:var(--mid)}
.hm .kick{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.hm .night .kick,.hm .prods .kick{color:#CFCBF2}
.hm .box{display:inline-flex;align-items:stretch;text-decoration:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);gap:3px}
.hm .box span{background:#fff;padding:13px 18px;display:flex;align-items:center;border:1px solid var(--line2)}
.hm .box i{font-style:normal;background:var(--glow);color:#fff;width:42px;display:flex;align-items:center;justify-content:center;font-size:15px}
.hm .box:hover span{border-color:var(--glow);color:var(--glow)}
.hm .box.ghost span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.hm .box.ghost i{background:rgba(255,255,255,.14)}

/* ---------- hero: intro beside a huge headline (Monolog), on the sky with a floating stack (Sharplink) ---------- */
.hm .hero2{background:radial-gradient(110% 120% at 70% -20%,var(--sky) 30%,var(--sky2) 55%,#FCFBFA 85%);overflow:hidden}
.hm .hero2 .inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 48px;padding-top:72px;align-items:center}
.hm .intro{padding:8px 0 72px}
.hm .intro p{font-size:clamp(24px,2.3vw,34px);line-height:1.24;letter-spacing:-.015em;color:var(--ink);max-width:20ch;margin-bottom:40px;font-weight:500}
.hm .intro .defn2{font-family:var(--mono);font-size:15px;letter-spacing:0;color:var(--fg2);line-height:1.6;margin:44px 0 0;max-width:34ch;font-weight:400}
.hm .box.lg{font-size:13px}
.hm .box.lg span{padding:20px 26px}
.hm .box.lg i{width:62px;font-size:19px}
.hm .intro .defn2 b{color:var(--glow);font-weight:500}
.hm .hero2 h1{grid-column:1/-1;margin-bottom:40px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(64px,9.4vw,148px);line-height:.86;
  letter-spacing:-.055em;color:var(--ink);max-width:none}
.hm .hero2 h1 span{color:var(--glow)}
.hm .stage{grid-column:2;position:relative;height:600px}
.hm .stack{position:absolute;left:50%;top:44%;width:640px;height:400px;transform:translate(-50%,-50%);perspective:2400px}
.hm .stack .lyr{position:absolute;inset:0;transform:rotateX(55deg) rotateZ(-32deg) translateZ(var(--z));border-radius:12px;overflow:hidden;
  box-shadow:0 50px 90px -30px rgba(26,24,54,.55),0 0 0 1px rgba(255,255,255,.75)}
.hm .stack .lyr img{width:100%;height:100%;object-fit:cover;object-position:top left}
.hm .stack .bob{position:absolute;inset:0;animation:bob 7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hm .news{position:absolute;right:0;bottom:40px;width:340px;background:rgba(26,24,54,.94);color:#fff;padding:16px 18px;text-decoration:none;display:block;z-index:3}
.hm .news .top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#A5A0FF;margin-bottom:10px}
.hm .news b{display:flex;justify-content:space-between;gap:16px;font-weight:500;font-size:14.5px;line-height:1.4}
.hm .news b i{font-style:normal;background:rgba(255,255,255,.12);width:28px;height:28px;flex:none;display:flex;align-items:center;justify-content:center}

/* ---------- the boring bits (kept copy), as Sharplink's panel row ---------- */
.hm .bits{background:linear-gradient(180deg,#FCFBFA 0%,#F2F1FA 100%)}
.hm .bits .inner{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;padding-top:120px;padding-bottom:120px;align-items:stretch}
.hm .bits .say{display:flex;flex-direction:column}
.hm .bits h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:clamp(34px,3.2vw,48px);line-height:1.02;letter-spacing:-.04em;color:var(--ink);max-width:none}
.hm .bits .say p{font-size:16px;line-height:1.58;color:var(--fg2);margin-top:20px}
.hm .bits .say p + p{margin-top:12px}
.hm .bits .say .box{margin-top:auto;padding-top:28px}
.hm .panel{grid-column:span 2;position:relative;background:linear-gradient(170deg,#2B2670 0%,#4F46E5 55%,#A5A0FF 100%);padding:22px 22px 0;
  display:flex;flex-direction:column;min-height:560px;overflow:hidden;text-decoration:none}
.hm .panel .ph{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#CFCBF2}
.hm .panel .ph b{color:#fff;font-weight:500}
.hm .panel .scr{margin-top:22px;flex:1;border-radius:8px 8px 0 0;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);position:relative}
.hm .panel .scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left}
.hm .panel .bar{position:absolute;left:22px;right:22px;bottom:22px;display:flex;gap:3px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.hm .panel .bar span{flex:1;background:rgba(26,24,54,.82);color:#fff;padding:12px 14px;text-align:center}
.hm .panel .bar i{font-style:normal;background:rgba(26,24,54,.82);color:#fff;width:40px;display:flex;align-items:center;justify-content:center}
.hm .tiles{display:flex;flex-direction:column;gap:12px}
.hm .tile{flex:1;background:rgba(255,255,255,.72);border:1px solid var(--line);padding:18px 18px 20px;position:relative;overflow:hidden}
.hm .tile .n{display:inline-block;font-family:var(--mono);font-size:10.5px;background:var(--ink);color:#fff;padding:3px 6px;margin-bottom:12px}
.hm .tile h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:19px;letter-spacing:-.02em;margin-bottom:8px;color:var(--ink);padding-right:44px}
.hm .tile p{font-size:13.5px;line-height:1.5;color:var(--fg2)}
.hm .tile svg{position:absolute;right:14px;top:16px;width:40px;height:40px;color:#C9C6E4}

/* ---------- founder statement, filling in as you scroll ---------- */
.hm .night{background:linear-gradient(180deg,var(--deep) 0%,var(--night) 100%);color:#fff}
.hm .stmt .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:0 32px;padding-top:140px;padding-bottom:150px}
.hm .stmt .inner > div{grid-column:2}
.hm .reveal{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:clamp(30px,3.5vw,52px);line-height:1.1;letter-spacing:-.035em;max-width:25ch}
.hm .reveal .w{opacity:.16;transition:opacity .3s}
.hm .reveal .w.on{opacity:1}
.hm .sig{display:flex;align-items:center;gap:14px;margin-top:44px}
.hm .sig img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.hm .sig b{display:block;font-weight:600;font-size:15px}
.hm .sig span{font-size:13.5px;color:#9C98C2}

/* ---------- products: the list lights up, the screen follows ---------- */
.hm .prods{background:linear-gradient(180deg,var(--night) 0%,#25216A 28%,#4F46E5 68%,#B9B5FF 100%);color:#fff}
.hm .prods .inner{padding-top:120px;padding-bottom:140px}
.hm .prods .head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:end;margin-bottom:64px}
.hm .prods h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:clamp(40px,5vw,76px);line-height:.95;letter-spacing:-.045em;color:#fff;max-width:none;margin-top:6px}
.hm .prods .head p{font-size:17px;color:#CFCBF2;max-width:44ch;justify-self:end}
.hm .pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:64px}
.hm .plist .pi{display:block;padding:30px 0;border-top:1px solid rgba(255,255,255,.18);opacity:.32;transition:opacity .35s;text-decoration:none;color:#fff;min-height:210px}
.hm .plist .pi.on{opacity:1}
.hm .plist .pi .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#CFCBF2;margin-bottom:12px}
.hm .plist .pi h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:34px;letter-spacing:-.035em;line-height:1.05;color:#fff;margin-bottom:12px}
.hm .plist .pi p{font-size:15px;line-height:1.55;color:#E3E1FB;max-width:46ch}
.hm .plist .pi .go{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)}
.hm .pview{position:sticky;top:120px;align-self:start;height:min(540px,68vh)}
.hm .pview .frame{position:absolute;inset:0;border-radius:12px;overflow:hidden;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .45s,transform .45s;
  box-shadow:0 50px 100px -30px rgba(10,8,40,.7),0 0 0 1px rgba(255,255,255,.25);background:#fff}
.hm .pview .frame.on{opacity:1;transform:none}
.hm .pview .frame img{width:100%;height:100%;object-fit:cover;object-position:top left}
.hm .pview .tag{position:absolute;left:16px;bottom:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;background:rgba(26,24,54,.88);color:#fff;padding:7px 10px}

/* ---------- success stories (Monolog) ---------- */
.hm .stories{background:#FCFBFA}
.hm .stories .inner{padding-top:130px;padding-bottom:110px}
.hm .shead2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:32px;margin-bottom:56px;align-items:end}
.hm .shead2 h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(48px,6.4vw,104px);line-height:.88;letter-spacing:-.055em;color:var(--ink);max-width:none}
.hm .story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);gap:32px;padding:34px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit;align-items:start}
.hm .story .num{font-family:var(--mono);font-size:11px;color:var(--fg3);letter-spacing:.08em}
.hm .story .num b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:15px;color:var(--ink);letter-spacing:-.01em;margin-top:8px;font-weight:600}
.hm .story .img{aspect-ratio:16/9.4;overflow:hidden;border-radius:6px;background:var(--bg2);border:1px solid var(--line)}
.hm .story .img img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .6s}
.hm .story:hover .img img{transform:scale(1.03)}
.hm .story h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:24px;letter-spacing:-.025em;color:var(--ink);margin-bottom:10px}
.hm .story p{font-size:15px;color:var(--fg2);line-height:1.55}
.hm .story .fig{margin-top:30px}
.hm .story .fig b{display:inline-block;background:var(--acc-wash);color:var(--glow);font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:22px;padding:4px 10px;letter-spacing:-.02em}
.hm .story .fig span{display:block;font-size:14px;color:var(--ink);margin-top:10px;font-weight:500;max-width:24ch}
.hm .allrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:32px;align-items:center;padding:26px 0 0;border-top:1px solid var(--ink);text-decoration:none;color:var(--ink)}
.hm .allrow b,.hm .allrow span{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:44px;letter-spacing:-.04em}
.hm .allrow span{display:flex;justify-content:space-between;align-items:center}
.hm .allrow:hover span{color:var(--glow)}

/* ---------- we plug into what you have: giant stacked words ---------- */
.hm .plug2 .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:32px;padding-top:140px;padding-bottom:140px}
.hm .plug2 .lead{align-self:start;position:sticky;top:120px}
.hm .plug2 .lead h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:26px;line-height:1.15;letter-spacing:-.025em;color:#fff;max-width:14ch}
.hm .plug2 .lead p{font-size:15px;color:#9C98C2;line-height:1.6;margin-top:16px;max-width:28ch}
.hm .words{list-style:none}
.hm .words li{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(40px,5.4vw,86px);line-height:1.04;letter-spacing:-.05em;
  color:rgba(255,255,255,.14);transition:color .3s}
.hm .words li.on{color:#fff}
.hm .words li.soft.on{color:#A5A0FF}

/* ---------- FAQ beside the founder ---------- */
.hm .faq2{background:linear-gradient(180deg,var(--night) 0%,var(--deep) 100%)}
.hm .faq2 .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:32px;padding-top:120px;padding-bottom:130px}
.hm .faq2 h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:clamp(34px,3.8vw,56px);line-height:1.02;letter-spacing:-.04em;color:#fff;max-width:18ch;margin-bottom:44px}
.hm .who{align-self:start;position:sticky;top:120px}
.hm .who img{width:128px;height:128px;object-fit:cover;object-position:68% 30%;margin-bottom:18px}
.hm .who p{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:21px;line-height:1.2;color:#CFCBF2;margin-bottom:20px;max-width:14ch}
.hm .qa{border-top:1px solid rgba(255,255,255,.14)}
.hm .qa details{border-bottom:1px solid rgba(255,255,255,.14)}
.hm .qa summary{list-style:none;display:grid;grid-template-columns:52px 1fr 32px;align-items:center;gap:12px;padding:20px 0;cursor:pointer;color:#fff;font-size:17px;font-weight:500}
.hm .qa summary::-webkit-details-marker{display:none}
.hm .qa summary small{font-family:var(--mono);font-size:10.5px;background:rgba(255,255,255,.1);color:#CFCBF2;padding:3px 6px;justify-self:start}
.hm .qa summary i{font-style:normal;width:30px;height:30px;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:18px;transition:transform .2s}
.hm .qa details[open] summary i{transform:rotate(45deg)}
.hm .qa details p{padding:0 44px 22px 64px;color:#B9B6D4;font-size:15.5px;line-height:1.6}

@media (prefers-reduced-motion:reduce){.hm .stack .bob{animation:none}.hm .reveal .w{opacity:1}}
@media(max-width:1080px){
  .hm .bits .inner{grid-template-columns:1fr 1fr}
  .hm .panel{grid-column:1/-1;order:3;min-height:440px;margin-top:32px}
  .hm .stack{width:560px;height:350px}
  }
@media(max-width:960px){
  .hm .inner{padding:0 20px}
  .hm .guides::before{display:none}
  .hm .hero2 .inner,.hm .stmt .inner,.hm .shead2,.hm .plug2 .inner,.hm .faq2 .inner,.hm .allrow{grid-template-columns:1fr}
  .hm .hero2 .inner{padding-top:40px}
  .hm .intro{order:2;padding:8px 0 24px}
  .hm .hero2 h1{font-size:clamp(54px,15vw,90px);margin-bottom:24px}
  .hm .stage{order:3;grid-column:1;height:400px;margin-top:110px}
  .hm .stack{width:330px;height:206px}
  .hm .news{display:none}
  .hm .bits .inner{grid-template-columns:1fr;padding-top:80px;padding-bottom:80px}
  .hm .tiles{margin-top:28px}
  .hm .stmt .inner{padding-top:90px;padding-bottom:90px}
  .hm .stmt .inner > div{grid-column:1}
    .hm .prods .head,.hm .pgrid{grid-template-columns:1fr}
  .hm .prods .head p{justify-self:start}
  .hm .pview{display:none}
  .hm .plist .pi{opacity:1;min-height:0}
  .hm .story{grid-template-columns:1fr;gap:14px}
  .hm .who,.hm .plug2 .lead{position:static}
  .hm .qa details p{padding:0 0 20px 0}
  .hm .plug2 .inner,.hm .faq2 .inner{padding-top:90px;padding-bottom:90px}
  .hm .allrow b,.hm .allrow span{font-size:30px}
}