.brand{display:inline-flex;align-items:center;gap:10px;font-family:'Century Gothic','Bahnschrift SemiBold','Segoe UI Variable Display','Segoe UI',sans-serif;font-size:23px;font-weight:900;letter-spacing:-.08em;line-height:1;color:#fff;white-space:nowrap}
.brand>span:last-child{font-family:inherit;font-weight:900;letter-spacing:-.08em;color:#fff}
.brand-accent-letter{color:var(--yellow)}
.brand-mark{position:relative;display:inline-block;width:19px;height:19px;border:2px solid #c9c8ff;border-radius:6px 6px 6px 2px;transform:rotate(-45deg);box-shadow:3px 3px 0 #c9c8ff;flex:none}
.brand-mark::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#c9c8ff}
.brand:hover .brand-mark{transform:rotate(-45deg) translate(-1px,-1px);box-shadow:4px 4px 0 #c9c8ff}
.footer-brand{font-size:22px}
.landing-hero{overflow:hidden}
.landing-hero .hero{display:flex;flex-direction:column;align-items:center;gap:48px;min-height:0;padding:92px 0 82px}
.landing-hero .hero-copy{text-align:center;width:100%}
.landing-hero .hero h1{font-size:clamp(54px,6.2vw,86px);line-height:.99}
.landing-hero .hero-copy>p{max-width:610px;margin:22px auto 0;font-size:17px}
.landing-hero .actions{justify-content:center;margin-top:27px}
.post-window{width:100%;overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.post-track{display:flex;width:max-content;animation:posts-right 55s linear infinite}
.post-group{display:grid;grid-auto-flow:column;grid-template-rows:260px;grid-auto-columns:245px;gap:16px;padding:10px 16px 16px 10px}
.social-post{position:relative;overflow:hidden;border:2px solid #111827;border-radius:17px;background:#31283e;box-shadow:5px 5px 0 #f4f0e8,8px 8px 0 #111827;transform:rotate(-1deg);transition:transform .2s,box-shadow .2s}
.social-post:nth-child(2n){transform:rotate(1.2deg)}
.social-post:nth-child(3n){transform:rotate(-.4deg)}
.social-post:hover{transform:translateY(-5px) rotate(0);box-shadow:5px 5px 0 #a5f32b,8px 8px 0 #111827}
.social-post img{width:100%;height:100%;display:block;object-fit:cover}
.social-post figcaption{position:absolute;right:0;bottom:0;left:0;padding:40px 14px 14px;background:linear-gradient(transparent,#111827f2 72%);color:#fff;font-size:13px;font-weight:700;line-height:1.2;letter-spacing:.01em}
.social-post figcaption strong{display:block;font-family:Georgia,serif;font-size:18px;font-weight:400;letter-spacing:-.03em}
.social-post figcaption small{display:block;margin-top:6px;color:#c8ff4a;font-family:Bahnschrift,'Segoe UI',Arial,sans-serif;font-size:10px;font-weight:800;letter-spacing:.02em}
.social-post img{object-position:center 42%}
@keyframes posts-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.final .wrap{display:flex;align-items:center;justify-content:center;text-align:center}
.final-copy{max-width:560px}
.final .btn{margin-top:24px}
@media(max-width:720px){
  .brand{gap:8px;font-size:20px}
  .brand-mark{width:16px;height:16px;border-radius:5px 5px 5px 2px;box-shadow:2px 2px 0 #c9c8ff}
  .brand-mark::after{inset:4px}
  .footer-brand{font-size:21px}
  .landing-hero .hero{gap:34px;padding:66px 0 62px}
  .landing-hero .hero h1{font-size:clamp(46px,11vw,66px)}
  .landing-hero .hero-copy>p{font-size:15px}
  .post-window{width:calc(100% + 40px);max-width:none;mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
  .post-group{grid-template-rows:220px;grid-auto-columns:190px;gap:10px;padding:8px 10px 12px 8px}
  .social-post figcaption{font-size:11px;padding:34px 10px 10px}
  .social-post figcaption strong{font-size:15px}
  .social-post figcaption small{font-size:9px;margin-top:4px}
  .final .wrap{text-align:center}
  .final h2{font-size:clamp(42px,11vw,54px)}
}
@media(prefers-reduced-motion:reduce){.post-track{animation:none;transform:translateX(-25%)}}