@font-face { font-family:'Fredoka'; src:url('assets/fonts/Fredoka.ttf') format('truetype'); font-weight:300 700; font-stretch:75% 125%; font-style:normal; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('assets/fonts/SpaceGrotesk.ttf') format('truetype'); font-weight:300 700; font-style:normal; font-display:swap; }
:root { color-scheme:light; --bg:#eee4f8; --ink:#39254e; --muted:#705887; --lilac:#d5b8ed; --ease:cubic-bezier(.2,.7,.25,1); }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--bg); scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font-family:'Space Grotesk',Arial,sans-serif; -webkit-font-smoothing:antialiased; background:radial-gradient(ellipse at 50% 8%,#faf7ff,transparent 70%); }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
a:focus-visible,button:focus-visible { outline:2px solid #5c367e; outline-offset:5px; }
::selection { background:#75509b; color:white; }
.page { width:min(1440px,100%); margin-inline:auto; padding:24px clamp(20px,4vw,64px); }
.header { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:66px; padding:8px 11px 8px 9px; margin-bottom:19px; border:1px solid #fff; border-radius:999px; background:#ffffff75; box-shadow:0 5px 22px #66418004; }
.brand { display:inline-flex; align-items:center; gap:10px; font-family:'Fredoka',sans-serif; font-size:21px; font-weight:500; letter-spacing:-.02em; }
.brand img { display:block; width:42px; height:42px; border-radius:50%; }
.header-right { display:flex; align-items:center; gap:24px; }
.chain { color:#735d86; font-size:11px; }
.ticker { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:10px 18px; border-radius:999px; background:#e8dbf5; font-size:12px; color:#664784; font-weight:500; letter-spacing:.01em; }
.hero { position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:center; min-height:680px; padding:35px 40px 24px; border:1px solid #ffffffa1; border-radius:44px; background:radial-gradient(ellipse at 50% 33%,#e5d0f5 0%,#d5b8ed 70%,#ceb0e6 100%); box-shadow:0 20px 65px #6040760c,inset 0 1px 0 #fff6; }
.stage { position:relative; display:grid; grid-template-columns:28% 44% 28%; align-items:center; width:100%; margin-inline:auto; }
.display-word { position:relative; z-index:2; font-family:'Fredoka',Arial,sans-serif; font-size:clamp(68px,8.5vw,126px); font-weight:600; line-height:1; letter-spacing:-.045em; color:#513469; text-shadow:0 3px 0 #baa0d0,0 10px 18px #6139860d; overflow-wrap:anywhere; }
.word-first { grid-column:1; grid-row:1; justify-self:end; transform:rotate(-5deg) translateY(-20px); }
.word-last { grid-column:3; grid-row:1; justify-self:start; transform:rotate(5deg) translateY(2px); }
.mascot { position:relative; z-index:1; grid-column:2; grid-row:1; justify-self:center; margin:0 -20px; width:min(calc(100% + 40px),540px,60vh); aspect-ratio:1; }
.mascot-image { display:block; width:100%; height:auto; -webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 94%,transparent); mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 94%,transparent); -webkit-mask-composite:source-in; mask-composite:intersect; }
.actions { position:relative; z-index:3; width:min(445px,100%); margin:-9px auto 0; text-align:center; }
.tagline { margin:0 0 21px; font-family:'Fredoka',sans-serif; font-size:21px; font-weight:400; color:#604275; letter-spacing:.003em; }
.platforms { display:grid; grid-template-columns:1.38fr 1fr 60px; gap:10px; }
.platform { min-height:60px; padding:17px 22px; display:inline-flex; align-items:center; justify-content:center; gap:19px; border:1px solid transparent; border-radius:21px; font-family:'Fredoka',sans-serif; font-size:18px; font-weight:500; letter-spacing:.01em; cursor:pointer; transition:transform .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease); }
.platform svg { flex:0 0 auto; }
.primary { color:#fbf7ff; background:#5b397b; border-color:#6a4788; box-shadow:0 5px 0 #46265f,0 10px 22px #50237715; }
.secondary,.social { color:#5c3d76; background:#f2e7fc; border-color:#f9f2ff; box-shadow:0 5px 0 #bd9cdb; }
.social { padding-inline:17px; }
.platform[aria-disabled='true'] { cursor:default; }
.platform[aria-disabled='true'] > svg { opacity:.6; }
.platform[aria-busy='true'] > svg { animation:breathe 1.8s ease-in-out infinite alternate; }
.contract { display:flex; align-items:center; gap:12px; min-height:43px; padding-left:13px; padding-right:3px; margin-top:23px; border:1px solid #80609826; border-radius:14px; background:#f3e6ff26; }
.contract-label { color:#654477; font-size:10px; font-weight:500; letter-spacing:.08em; }
.contract-value { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; font-size:11px; color:#604275; user-select:all; }
.copy { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:0; border-radius:10px; background:transparent; color:#604275; min-height:37px; min-width:76px; padding:8px; font-size:9px; font-weight:500; letter-spacing:.035em; cursor:pointer; transition:background .3s ease,color .3s ease; }
.copy:disabled { opacity:.5; cursor:default; }
.hero-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:32px; color:#604275; font-size:10px; line-height:1.5; }
.hero-footer span:first-child { letter-spacing:.06em; }
.status { position:fixed; z-index:10; bottom:24px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 40px); padding:13px 19px; border:1px solid #fff3; border-radius:16px; color:#fbf4ff; background:#5b397bf5; box-shadow:0 8px 30px #633e842c; font-size:13px; pointer-events:none; transition:opacity .25s ease; }
.status:empty { opacity:0; }
.skip-link { position:fixed; z-index:20; top:12px; left:12px; padding:13px 20px; border-radius:14px; background:#543470; color:#fff; transform:translateY(-170%); }
.skip-link:focus { transform:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (prefers-reduced-motion:no-preference) {
  .stage { animation:arrive 1.1s var(--ease) both; }
  .actions { animation:arrive 1.1s .12s var(--ease) both; }
  .mascot-image { animation:settle 1.8s .05s var(--ease) both; }
}
@media (hover:hover) {
  .primary:not([aria-disabled='true']):hover { transform:translateY(-3px); background:#6b478a; box-shadow:0 8px 0 #46265f,0 13px 28px #50237721; }
  .secondary:not([aria-disabled='true']):hover,.social:not([aria-disabled='true']):hover { transform:translateY(-3px); background:#faf4ff; box-shadow:0 8px 0 #bd9cdb; }
  .copy:not(:disabled):hover { background:#fff3; color:#4c2d65; }
}
.platform:not([aria-disabled='true']):active { transform:translateY(3px); box-shadow:0 2px 0 #8b6da2; }
@keyframes arrive { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes settle { 0% { transform:translateY(8px) rotate(-1deg); } 70% { transform:translateY(-2px) rotate(.25deg); } 100% { transform:translateY(0) rotate(0); } }
@keyframes breathe { from { opacity:.4; } to { opacity:.9; } }
@media (min-width:1500px) { .hero { padding-top:28px; } }
@media (max-width:1000px) {
  .hero { padding:35px 28px 23px; min-height:630px; }
  .mascot { margin-inline:-18px; width:calc(100% + 36px); }
  .display-word { font-size:8.8vw; }
  .actions { margin-top:10px; }
  .hero-footer { padding-top:35px; }
}
@media (max-width:700px) {
  .page { padding:15px 17px 20px; }
  .header { min-height:59px; padding:6px 8px 6px 7px; margin-bottom:13px; }
  .brand { font-size:18px; gap:8px; }
  .brand img { width:37px; height:37px; }
  .header-right { gap:10px; }
  .chain { display:none; }
  .ticker { min-height:35px; font-size:10px; padding:9px 13px; }
  .hero { border-radius:31px; min-height:0; padding:28px 22px 20px; }
  .stage { grid-template-columns:1fr 1fr; grid-template-rows:auto auto; }
  .display-word { font-size:clamp(58px,13.5vw,84px); }
  .word-first { grid-column:1; grid-row:1; justify-self:end; transform:rotate(-3deg); padding-right:9px; }
  .word-last { grid-column:2; grid-row:1; justify-self:start; transform:rotate(3deg); padding-left:9px; }
  .mascot { grid-column:1 / 3; grid-row:2; justify-self:center; width:min(405px,calc(100% + 30px)); margin:-1px -15px -4px; }
  .actions { margin-top:1px; }
  .tagline { font-size:18px; margin-bottom:20px; }
  .platforms { grid-template-columns:1.35fr 1fr 53px; gap:9px; }
  .platform { min-height:55px; padding:15px 14px; font-size:16px; gap:12px; border-radius:18px; }
  .social { padding-inline:15px; }
  .contract { margin-top:22px; padding-left:11px; gap:9px; }
  .contract-value { font-size:10px; }
  .copy { min-width:69px; padding-inline:7px; }
  .hero-footer { padding-top:26px; font-size:9px; }
}
@media (max-width:370px) {
  .page { padding-inline:12px; }
  .hero { padding-inline:17px; }
  .brand { font-size:17px; }
  .ticker { padding-inline:11px; }
  .display-word { font-size:52px; }
  .word-first { padding-right:7px; }
  .word-last { padding-left:7px; }
  .platforms { grid-template-columns:1.32fr 1fr 48px; gap:8px; }
  .platform { font-size:15px; gap:9px; padding-inline:11px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }