.cards-page{padding-top:66px;padding-bottom:70px}
.cards-page .wrap{max-width:1460px}
.cards-page h1,.cards-page h2,.cards-page h3,.cards-page h4{font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.03em}
.cards-page figure{margin:0}
.cards-page img,.cards-page video{display:block}
.sec{padding:26px 0}
.center{display:flex;justify-content:center;margin-top:26px}

.shead{margin:34px 0 24px}
.shead h2{font-weight:800;text-transform:uppercase;font-size:clamp(1.3rem,2.2vw,1.8rem);letter-spacing:-.015em;
  background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content;max-width:100%}
.shead p{color:var(--grey);font-size:14px;margin-top:8px}

.btn-brand{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:700;background:var(--spectrum);color:#000;
  padding:13px 24px;border-radius:12px;display:inline-flex;align-items:center;gap:9px;width:max-content;transition:.22s;
  box-shadow:0 0 0 0 rgba(161,235,26,0)}
.btn-brand:hover{transform:translateY(-2px);box-shadow:0 10px 34px -8px rgba(161,235,26,.55);filter:brightness(1.05)}
.btn-white{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:700;background:#fff;color:#000;
  padding:13px 24px;border-radius:12px;display:inline-flex;width:max-content;transition:.22s}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(255,255,255,.4)}
.pill-ghost{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:700;color:var(--accent2,#A1EB1A);
  background:rgba(161,235,26,.1);border:1px solid rgba(161,235,26,.28);padding:12px 22px;border-radius:12px;
  display:inline-flex;align-items:center;gap:8px;width:max-content;transition:.22s;backdrop-filter:blur(6px)}
.pill-ghost:hover{background:#A1EB1A;color:#000}
.pill-float{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:700;color:#A1EB1A;
  background:rgba(19,29,4,.75);border:1px solid rgba(161,235,26,.3);padding:12px 22px;border-radius:12px;
  display:inline-flex;align-items:center;gap:8px;backdrop-filter:blur(10px);transition:.22s;white-space:nowrap}
.pill-float:hover{background:#A1EB1A;color:#000}

.chip-live{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;color:#A1EB1A;
  background:rgba(19,29,4,.7);border:1px solid rgba(161,235,26,.35);padding:7px 13px;border-radius:100px;
  display:inline-flex;align-items:center;gap:8px;backdrop-filter:blur(6px)}
.chip-live i{width:7px;height:7px;border-radius:50%;background:#A1EB1A;box-shadow:0 0 9px #A1EB1A;animation:chip-pulse 1.6s ease infinite}
@keyframes chip-pulse{50%{opacity:.3}}
.chip-dark{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;color:#ddd;
  background:rgba(18,18,20,.72);border:1px solid rgba(255,255,255,.14);padding:7px 13px;border-radius:100px;
  display:inline-flex;align-items:center;gap:7px;backdrop-filter:blur(6px);white-space:nowrap}

.hrow-shell{position:relative}
.hrow{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.hrow::-webkit-scrollbar{display:none}
.hcard{flex:0 0 clamp(300px,26.5vw,480px);scroll-snap-align:start;display:block}
.hcard figure{position:relative;aspect-ratio:16/9.4;border-radius:14px;overflow:hidden;background:var(--surface,#131315);
  border:1px solid var(--border,rgba(255,255,255,.08))}
.hcard figure img,.hcard figure video{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.hcard:hover figure img,.hcard:hover figure video{transform:scale(1.04)}
.hcard figure::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,8,9,.35),rgba(8,8,9,0) 45%)}
.hcard-mark{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:#fff;letter-spacing:.02em;
  text-shadow:0 2px 26px rgba(0,0,0,.65);font-size:clamp(1.3rem,1.9vw,2rem);line-height:1}
.hcard-mark b{font-size:clamp(1rem,1.4vw,1.45rem);background:#7F95F8;color:#fff;padding:3px 12px;border-radius:8px;
  transform:skew(-6deg);letter-spacing:.04em}
.hcard-mark em{font-style:normal;font-family:'JetBrains Mono',monospace;font-weight:400;font-size:9.5px;
  letter-spacing:.3em;margin-top:10px;opacity:.9}
.hcard-mark.gold b{background:linear-gradient(115deg,#517a0a,#c9f168,#517a0a);color:#101803}
.hcap{padding:13px 4px 0}
.hcap h1,.hcap h2,.hcap h3{font-weight:800;font-size:16.5px;text-transform:uppercase;letter-spacing:-.01em;line-height:1.2}
.hcap p{color:var(--grey);font-size:13px;margin-top:5px;line-height:1.45}

.edge-arrow{position:absolute;top:calc(50% - 30px);transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(10,10,11,.72);backdrop-filter:blur(10px);color:#fff;
  font-size:15px;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;opacity:0}
.hrow-shell:hover .edge-arrow{opacity:1}
.edge-arrow:hover{background:#A1EB1A;color:#000;border-color:#A1EB1A}
.edge-arrow.prev{left:-12px}
.edge-arrow.next{right:-12px}

.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:14px}
.mini{position:relative;background:var(--surface,#131315);border:1px solid var(--border,rgba(255,255,255,.08));border-radius:14px;
  padding:20px 19px;display:flex;flex-direction:column;gap:8px;transition:.25s;overflow:hidden;min-height:186px}
.mini:hover{border-color:rgba(255,255,255,.25);transform:translateY(-3px)}
.mini .mic{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;color:#A1EB1A;font-size:15px;margin-bottom:auto}
.mini h3{font-weight:700;font-size:15.5px;letter-spacing:-.02em}
.mini p{color:var(--grey);font-size:12px;line-height:1.45;font-family:'Inter',sans-serif}
.mini.feat-blue{background:radial-gradient(90% 90% at 20% 0%,rgba(127,149,248,.32),rgba(127,149,248,.07) 55%,transparent 80%) #0A0C1A;
  border-color:rgba(127,149,248,.35)}
.mini.feat-blue .mic{color:#C7D1FC;background:rgba(127,149,248,.14)}
.mini-flag{position:absolute;top:0;right:0;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(90deg,#78C7EF,#A1EB1A);color:#000;
  padding:6px 12px;border-radius:0 12px 0 12px}
.mini-chip{position:absolute;top:14px;right:14px;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:700;
  color:#ddd;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);padding:4px 10px;border-radius:100px}
.mini-chip.brand{background:#A1EB1A;color:#000;border-color:transparent}

.banner{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--border,rgba(255,255,255,.08));
  background:var(--surface,#131315)}
.banner>figure{position:absolute;inset:0}
.banner>figure img,.banner>figure video{width:100%;height:100%;object-fit:cover}
.banner .scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,8,9,.95) 25%,rgba(8,8,9,.55) 55%,rgba(8,8,9,.12))}
.banner .scrim.flip{background:linear-gradient(280deg,rgba(8,8,9,.95) 25%,rgba(8,8,9,.55) 55%,rgba(8,8,9,.12))}
.banner .scrim.up{background:linear-gradient(0deg,rgba(8,8,9,.92) 10%,rgba(8,8,9,.35) 45%,rgba(8,8,9,.1))}
.banner-body{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:15px;
  padding:clamp(28px,4vw,56px);max-width:600px}
.banner-body h1,.banner-body h2{font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.02;letter-spacing:-.02em}
.banner-body p{color:#c9c9c9;font-size:14px;line-height:1.55}
.banner-center{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:14px;padding:clamp(44px,6vw,84px) clamp(24px,4vw,52px)}
.banner-center h1,.banner-center h2{font-weight:800;font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:.98;letter-spacing:-.02em}
.banner-center p{font-size:15px;color:#d9d9d9}
.banner-kick{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.85}
.banner-grid::before{content:"";position:absolute;inset:0;opacity:.1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.45) 1px,transparent 1px);
  background-size:64px 64px;transform:perspective(600px) rotateX(30deg) scale(1.4);transform-origin:50% 100%}

.glow-green{background:radial-gradient(75% 95% at 50% 115%,rgba(161,235,26,.30),rgba(161,235,26,.06) 45%,transparent 72%) #0C0F06;
  border-color:rgba(161,235,26,.22);box-shadow:0 0 70px -30px rgba(161,235,26,.25)}
.glow-green .banner-center h1,.glow-green .banner-center h2{color:#A1EB1A;text-shadow:0 0 50px rgba(161,235,26,.4)}
.glow-green .banner-center p{color:#dcecc4}
.glow-sky{background:radial-gradient(75% 95% at 50% 115%,rgba(120,199,239,.28),rgba(120,199,239,.06) 45%,transparent 72%) #080E13;
  border-color:rgba(120,199,239,.22);box-shadow:0 0 70px -30px rgba(120,199,239,.25)}
.glow-sky .banner-center h1,.glow-sky .banner-center h2{color:#9BD5F4;text-shadow:0 0 50px rgba(120,199,239,.4)}
.glow-sky .banner-center p{color:#cfe6f4}
.glow-violet{background:radial-gradient(75% 95% at 50% 115%,rgba(127,149,248,.28),rgba(127,149,248,.06) 45%,transparent 72%) #0A0C1A;
  border-color:rgba(127,149,248,.24);box-shadow:0 0 70px -30px rgba(127,149,248,.25)}
.glow-violet .banner-center h1,.glow-violet .banner-center h2{color:#C7D1FC;text-shadow:0 0 50px rgba(127,149,248,.4)}
.glow-violet .banner-center p{color:#d9dffb}
.glow-lilac{background:radial-gradient(75% 95% at 50% 115%,rgba(218,204,250,.24),rgba(218,204,250,.05) 45%,transparent 72%) #100C18;
  border-color:rgba(218,204,250,.22);box-shadow:0 0 70px -30px rgba(218,204,250,.22)}
.glow-lilac .banner-center h1,.glow-lilac .banner-center h2{color:#E5DAFC;text-shadow:0 0 50px rgba(218,204,250,.4)}
.glow-lilac .banner-center p{color:#e4dcf6}

.lit-sky{background:radial-gradient(70% 60% at 50% -8%,rgba(120,199,239,.30),rgba(120,199,239,.05) 50%,transparent 75%) #080E13;
  border-color:rgba(120,199,239,.22)}
.lit-violet{background:radial-gradient(70% 60% at 50% -8%,rgba(127,149,248,.30),rgba(127,149,248,.05) 50%,transparent 75%) #0A0C1A;
  border-color:rgba(127,149,248,.24)}
.lit-green{background:radial-gradient(70% 60% at 50% -8%,rgba(161,235,26,.28),rgba(161,235,26,.05) 50%,transparent 75%) #0C0F06;
  border-color:rgba(161,235,26,.22)}

.avatar{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:11.5px;color:#000}
.av1{background:var(--g1)}.av2{background:var(--g2)}.av3{background:var(--g3)}.av4{background:var(--g4)}.av5{background:var(--g1)}

.proj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.proj{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border,rgba(255,255,255,.08));
  background:var(--surface,#131315);display:block;transition:.25s}
.proj:hover{border-color:rgba(255,255,255,.26);transform:translateY(-3px)}
.proj figure{aspect-ratio:16/10;overflow:hidden}
.proj img,.proj video{width:100%;height:100%;object-fit:cover;transition:.5s}
.proj:hover img,.proj:hover video{transform:scale(1.05)}
.prow{display:flex;align-items:center;gap:10px;padding:11px 12px}
.prow h4{font-weight:700;font-size:13.5px;letter-spacing:-.01em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow h4 span{color:var(--faint);font-weight:500;font-family:'Inter',sans-serif;font-size:12px}
.prow .chip-dark{font-size:10.5px;padding:5px 10px}

.mas-shell{position:relative}
.masonry{columns:4 260px;column-gap:13px}
.tile{position:relative;display:block;border-radius:13px;overflow:hidden;margin-bottom:13px;break-inside:avoid;
  border:1px solid var(--border,rgba(255,255,255,.08));background:var(--surface,#131315)}
.tile img,.tile video{width:100%;object-fit:cover;transition:.5s;display:block}
.t-tall img,.t-tall video{aspect-ratio:3/4.4}
.t-sq img,.t-sq video{aspect-ratio:1/1}
.t-wide img,.t-wide video{aspect-ratio:16/9.6}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,8,9,.75),rgba(8,8,9,0) 40%);pointer-events:none}
.tile:hover img,.tile:hover video{transform:scale(1.06)}
.tbar{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 13px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.tbar h4{font-weight:700;font-size:14px;letter-spacing:-.01em}
.gen{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:700;background:#A1EB1A;color:#000;
  padding:7px 14px;border-radius:100px;opacity:0;transform:translateY(6px);transition:.25s;white-space:nowrap}
.tile:hover .gen{opacity:1;transform:none}
.mas-fade{position:absolute;left:0;right:0;bottom:0;height:150px;z-index:4;pointer-events:none;
  background:linear-gradient(0deg,var(--black) 8%,transparent)}

@media(max-width:1150px){
  .mini-grid{grid-template-columns:repeat(3,1fr)}
  .proj-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .cards-page{padding-top:46px}
  .hcard{flex-basis:82vw}
  .mini-grid{grid-template-columns:repeat(2,1fr)}
  .proj-grid{grid-template-columns:1fr}
  .masonry{columns:2 150px}
  .edge-arrow{display:none}
}