:root{
  --orange:#F97316;
  --orange-2:#FB923C;
  --burnt:#9A3412;
  --burnt-deep:#7A2E0E;
  --cream:#FFF7ED;
  --hole:#FCE3BE;
  --hole-edge:#F6CD90;
  --blue:#2563EB;
  --blue-deep:#1D4ED8;
  --ink:#3A2410;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh;
  font-family:"DM Sans",system-ui,sans-serif;
  color:var(--ink);
  background:var(--cream);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:48px 22px 88px;
  overflow-x:hidden;
}

/* big soft swiss holes, pure decoration */
.holes{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.holes .h{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 36% 30%, var(--hole), var(--hole-edge));
  box-shadow:inset 0 4px 12px rgba(154,52,18,.14);
  animation:bob 11s ease-in-out infinite;
}
.h1{width:240px;height:240px;left:-60px;top:8%}
.h2{width:150px;height:150px;left:12%;top:70%;animation-delay:-3s}
.h3{width:320px;height:320px;right:-90px;top:4%;animation-delay:-5s}
.h4{width:110px;height:110px;right:14%;top:66%;animation-delay:-1.5s}
.h5{width:70px;height:70px;left:44%;top:2%;animation-delay:-7s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}

/* stage */
.stage{position:relative;z-index:1;width:100%;max-width:820px;text-align:center}

.ticker{
  font-family:"DM Mono",monospace;font-weight:500;
  font-size:clamp(12px,2.6vw,15px);letter-spacing:2px;
  color:var(--orange);margin:0 0 6px;text-transform:uppercase;
}
.ticker .chain{color:var(--burnt);opacity:.6}

/* exaggerated-minimalism wordmark: oversized, heavy, tight */
.wordmark{
  margin:0;line-height:.82;font-family:"Nunito",sans-serif;font-weight:900;
  letter-spacing:-.04em;text-transform:uppercase;
  color:var(--burnt);
}
.wordmark .l1,.wordmark .l2{display:block}
.wordmark .l1{font-size:clamp(52px,15vw,150px)}
.wordmark .l2{
  font-size:clamp(52px,15vw,150px);
  color:var(--orange);
  -webkit-text-stroke:0;
}

.hero{position:relative;margin:-2vw auto 0;width:min(56vw,360px);height:min(56vw,360px)}
.cat{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(154,52,18,.26));
  transform-origin:50% 88%;
  animation:wobble 3.6s ease-in-out infinite;
  cursor:pointer;user-select:none;-webkit-user-drag:none;
}
.shadow{
  position:absolute;left:50%;bottom:2%;transform:translateX(-50%);
  width:52%;height:22px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(154,52,18,.28), transparent);
  animation:shad 3.6s ease-in-out infinite;pointer-events:none;
}
.poke-hint{
  position:absolute;top:6%;right:-6px;transform:rotate(6deg);
  font-family:"DM Mono",monospace;font-size:12px;color:var(--orange);
  background:var(--cream);border:1.5px solid var(--hole-edge);
  padding:3px 9px;border-radius:20px;opacity:.9;
  animation:hintpop .5s .8s both;pointer-events:none;
}
@keyframes hintpop{from{opacity:0;transform:rotate(6deg) scale(.6)}to{opacity:.9;transform:rotate(6deg) scale(1)}}
@keyframes wobble{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes shad{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(.85)}}
.cat.poke{animation:squish .5s ease}
@keyframes squish{
  0%{transform:scale(1,1)}
  30%{transform:scale(1.13,.84)}
  60%{transform:scale(.93,1.09)}
  100%{transform:scale(1,1)}
}

.tagline{
  font-size:clamp(16px,3.4vw,20px);font-weight:700;color:var(--burnt);
  margin:14px auto 22px;max-width:440px;line-height:1.4;
}

/* minimal contract line */
.ca{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:2px solid var(--hole-edge);
  border-radius:999px;padding:6px 6px 6px 16px;margin:0 auto 18px;
  max-width:100%;
}
.ca code{
  font-family:"DM Mono",monospace;font-size:13px;font-weight:500;
  color:var(--burnt);letter-spacing:.3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:min(62vw,340px);
}
.ca code.is-live{color:var(--ink)}
.copy{
  flex:none;border:none;cursor:pointer;
  background:var(--burnt);color:var(--cream);
  font-family:"Nunito",sans-serif;font-weight:800;font-size:13px;
  padding:8px 16px;border-radius:999px;
  transition:transform .12s ease,background .12s ease;
}
.copy:hover{transform:translateY(-1px);background:var(--burnt-deep)}
.copy:active{transform:translateY(0)}

.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  text-decoration:none;font-family:"Nunito",sans-serif;font-weight:800;
  font-size:16px;padding:14px 26px;border-radius:14px;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.buy{background:var(--blue);color:#fff;box-shadow:0 4px 0 var(--blue-deep)}
.buy:hover{box-shadow:0 6px 0 var(--blue-deep)}
.buy.is-soft{background:var(--orange);box-shadow:0 4px 0 var(--burnt);opacity:.9}
.buy.is-soft:hover{box-shadow:0 6px 0 var(--burnt)}
.tw{background:var(--burnt);color:var(--cream);box-shadow:0 4px 0 var(--burnt-deep)}
.tw:hover{box-shadow:0 6px 0 var(--burnt-deep)}
.btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.copy:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

.pokes{
  margin:20px 0 0;font-family:"DM Mono",monospace;font-size:13px;color:var(--orange);
}
.pokes b{color:var(--burnt)}

.foot{
  position:fixed;left:0;right:0;bottom:0;z-index:1;
  text-align:center;padding:12px;font-size:12px;font-weight:500;
  color:var(--burnt);opacity:.65;
}

/* cheese crumb + toast */
.crumb{
  position:fixed;z-index:5;width:16px;height:14px;pointer-events:none;
  background:var(--orange-2);border-radius:4px 4px 6px 6px;
  box-shadow:inset -2px -2px 0 var(--orange);
}
.toast{
  position:fixed;left:50%;bottom:64px;transform:translate(-50%,14px);
  z-index:9999;background:var(--burnt);color:var(--cream);
  font-family:"Nunito",sans-serif;font-weight:800;font-size:14px;
  padding:11px 18px;border-radius:12px;opacity:0;pointer-events:none;
  transition:opacity .28s ease,transform .28s ease;
  box-shadow:0 10px 24px -8px rgba(122,46,14,.5);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* accessibility: calm everything for reduced-motion users, keep identity */
@media (prefers-reduced-motion: reduce){
  .holes .h,.cat,.shadow{animation:none}
  .poke-hint{animation:none;opacity:.9}
  .cat.poke{animation:none}
  .btn:hover,.copy:hover{transform:none}
}

@media (max-width:520px){
  body{padding:36px 18px 80px}
  .hero{margin-top:2vw}
}