/* Polish pass: readable type, steadier cards, and a SlaySpace call to action worth clicking. Loaded last. */

/* ---------- type: nothing important should be smaller than you can read ---------- */
.nav-links{font-size:14.5px;gap:32px}
.hero-label{font-size:14.5px}
.hero-description{font-size:18.5px;line-height:1.65;max-width:500px;color:#474b55}
.app-domain-link{font-size:13.5px;margin:18px 0 30px}
.spark-control{font-size:13px;padding:11px 16px}.motion-control{font-size:12.5px}.play-hint{font-size:12.5px}
.hero-bottom{font-size:11.5px}.scroll-hint{font-size:12.5px}
.post-top strong{font-size:12.5px}.post-top small{font-size:10.5px}.art-tag{font-size:11.5px}.remix-art,.post-bottom,.like-button{font-size:11.5px}
.card-caption{font-size:11.5px}.float-card strong{font-size:16.5px}.ticket-label{font-size:9.5px}.mini-ticket>span:last-child{font-size:9.5px}.canvas-note{font-size:10.5px}
.about-copy>p{font-size:18px;line-height:1.7;max-width:640px;color:#555a64}
.about-note{font-size:13.5px}
.text-link{font-size:15px;gap:22px}.text-link span{font-size:12.5px}
.section-intro>p{font-size:18px;line-height:1.65}
.feature-label{font-size:11.5px;letter-spacing:.14em;color:#5d6270}
.feature-content>p{font-size:16.5px;line-height:1.65;max-width:400px;color:#4d525d}
.how-step p{font-size:16.5px;line-height:1.65;max-width:none}.how-footnote{font-size:12.5px}
.token-copy>p{font-size:17.5px;line-height:1.65}.token-facts>div{font-size:15px;padding:15px 0}
.contract-box>span{font-size:12px}.contract-box code{font-size:12.5px}.copy-label{font-size:11.5px;padding:8px 12px}
.token-links{font-size:14px}
.chain-chip{font-size:10.5px}
.faq-title p{font-size:18px}.faq-list summary{font-size:20px;padding:27px 0}.faq-answer p{font-size:16.5px;line-height:1.7}
.footer-top>p{font-size:15px}.footer-top nav{font-size:14.5px;gap:12px}.footer-email{font-size:15px}.footer-bottom{font-size:12.5px}
.preview-photo span{font-size:23px}.comment-bubble{font-size:12px;width:310px}
.nft-frame>div{font-size:9.5px}.event-ticket>span{font-size:10.5px}.event-ticket small{font-size:9px}

/* ---------- about: the mark gets presence ---------- */
.about-grid{grid-template-columns:.8fr 1.2fr;gap:90px}
.sun-ring{width:260px;height:260px;position:relative}
.sun-ring img{width:140px;height:140px}
.sun-ring::before,.sun-ring::after{content:"";position:absolute;inset:-46px;border-radius:50%;border:1px dashed #d9c268;opacity:.55;animation:ringTurn 60s linear infinite}
.sun-ring::after{inset:-78px;border-style:solid;border-color:#ece2b8;opacity:.6;animation-duration:90s;animation-direction:reverse;
  background:radial-gradient(circle at 50% 0,#e7c53f 0 5px,transparent 6px)}
@keyframes ringTurn{to{transform:rotate(360deg)}}
.about-copy h2{font-size:clamp(36px,4vw,56px)}

/* ---------- ecosystem: cards that hold their shape ---------- */
.ecosystem-grid{gap:26px}
.feature{border:1px solid #ffffffb0;box-shadow:0 1px 0 #fff inset,0 18px 50px #3f43600d}
.social-feature,.nft-feature{min-height:0;display:flex;flex-direction:column}
.social-feature{background:linear-gradient(160deg,#e6edf8,#d7e1f2)}
.nft-feature{background:linear-gradient(160deg,#e9e3f5,#d9d0ee)}
.events-feature{background:linear-gradient(120deg,#f7efd2,#f0e3b4)}
.feature-content{padding:46px 46px 30px}
.feature-content h3{font-size:clamp(34px,3.2vw,44px)}
.social-preview{margin:auto 46px 54px;width:auto;max-width:420px;padding:16px;border-radius:22px}
.preview-photo{height:270px;border-radius:13px}
.comment-bubble{right:-40px;bottom:-26px}
.nft-preview{max-width:330px;margin:auto auto 54px}
.nft-frame{padding:15px;border-radius:20px}
/* the image carried a fixed height from its attributes, which stretched the whole card */
.nft-frame img{height:auto;aspect-ratio:1.05;border-radius:11px}
.nft-stamp{width:92px;height:92px;font-size:32px;right:-34px;bottom:-8px}.nft-stamp small{font-size:11px}
.event-ticket{width:320px;padding:30px 34px}.event-ticket strong{font-size:50px}
.events-feature{min-height:440px}

/* ---------- how: three steps you can follow ---------- */
.how-grid{gap:22px;position:relative}
.how-step{position:relative;background:#f6f6f9;border:1px solid #e7e8ee;border-radius:24px;padding:34px 32px 38px;overflow:hidden;transition:transform .5s var(--ease),background .4s,box-shadow .5s,border-color .4s}
.how-step::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.how-step:hover{transform:translateY(-8px);background:#fff;border-color:#eadb9a;box-shadow:0 26px 60px #3f436016}
.how-step:hover::after{transform:scaleX(1)}
.step-number{font-size:64px;font-weight:600;letter-spacing:-.05em;line-height:1;border:0;padding:0;margin-bottom:34px;color:transparent;-webkit-text-stroke:1.5px #c9a51e;transition:color .4s}
.step-number::after{display:none}
.how-step:hover .step-number{color:var(--gold)}
.how-step h3{font-size:28px;margin-bottom:14px}

/* ---------- token ---------- */
.token-copy h2{font-size:clamp(38px,4.2vw,58px)}
.token-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.token-facts>div{flex-direction:column;gap:6px;border:1px solid #ffffff14;border-radius:16px;padding:16px 18px;background:#ffffff08}
.token-facts dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase}.token-facts dd{font-family:var(--display);font-size:19px;letter-spacing:-.02em}
.contract-box{border-radius:16px;padding:18px 20px;transition:border-color .3s,background .3s}
.contract-box:hover{border-color:#e6c84a66;background:#2d3139}
.copy-label{transition:background .25s,color .25s}.contract-box button:hover .copy-label{background:var(--gold);color:var(--ink)}
.token-links a{transition:color .2s,border-color .2s}.token-links a:hover{border-color:var(--gold)}

/* ---------- faq ---------- */
.faq-list summary{transition:color .25s,padding-left .35s var(--ease)}
.faq-list summary:hover{padding-left:10px;color:#7a5d00}
.faq-plus{flex-basis:34px;width:34px;height:34px;transition:background .25s,transform .35s var(--ease)}
.faq-plus::before,.faq-plus::after{width:12px;height:1.5px;top:16px;left:11px}
.faq-list summary:hover .faq-plus,.faq-list details[open] .faq-plus{background:var(--gold)}
.faq-list details[open] .faq-plus{transform:rotate(180deg)}
.faq-answer{padding-right:70px}

/* ---------- the SlaySpace button: gold, with an arrow that leaves and comes back ---------- */
.button-slay{position:relative;overflow:hidden;isolation:isolate;gap:16px;padding:9px 9px 9px 28px;font-size:16px;font-weight:700;color:var(--ink);
  background:linear-gradient(135deg,#ffe680,#f2cd3e 45%,#e5b520);border:1px solid #ffffff90;box-shadow:0 1px 0 #fff8 inset,0 12px 30px #c9a01e52,0 2px 6px #8a6a0030;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),translate .5s var(--ease)}
.button-slay::before{content:"";position:absolute;z-index:-1;top:-50%;bottom:-50%;left:-40%;width:34%;background:linear-gradient(90deg,transparent,#fffd,transparent);transform:skewX(-22deg);animation:slayShine 4.2s ease-in-out infinite}
@keyframes slayShine{0%,62%{left:-40%}100%{left:130%}}
.button-slay:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 1px 0 #fff8 inset,0 20px 46px #c9a01e73,0 4px 10px #8a6a0038;background:linear-gradient(135deg,#ffe680,#f2cd3e 45%,#e5b520)}
.button-slay.mag{transition:transform .45s var(--ease),box-shadow .45s var(--ease),translate .12s linear}
.cta-arrow{position:relative;flex:none;width:44px;height:44px;border-radius:50%;background:var(--ink);overflow:hidden;display:block}
.cta-arrow svg{position:absolute;inset:0;margin:auto;width:17px;height:17px;fill:none;stroke:var(--gold);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.button-slay:hover .cta-arrow svg{animation:arrowFly .6s var(--ease)}
@keyframes arrowFly{0%{transform:translate(0,0)}45%{transform:translate(26px,-26px)}46%{transform:translate(-26px,26px)}100%{transform:translate(0,0)}}
.hero-actions{gap:14px;align-items:center}
.hero-actions .button-light{padding:20px 28px;font-size:15.5px;background:#ffffffd9;border-color:#d4d6de}
.nav-cta{position:relative;overflow:hidden}
@media(min-width:1101px){.nav-cta{font-size:14px;padding:17px 20px}.new-pill{font-size:10px;padding:5px 7px}}
.nav-cta::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(90deg,transparent,#ffffff30,transparent);transform:skewX(-22deg);transition:left .7s var(--ease)}
.nav-cta:hover::after{left:130%}

/* ---------- the SlaySpace section: a dark stage inside the page ---------- */
.new-app-section.slay-cta{background:transparent;padding:40px 0 110px;overflow:visible}
.new-app-section.slay-cta::before{display:none}
.slay-panel{position:relative;overflow:hidden;isolation:isolate;border-radius:44px;color:#fff;padding:84px 76px 0;
  background:radial-gradient(60% 90% at var(--sx,22%) var(--sy,30%),#f2cd3e30,transparent 62%),radial-gradient(70% 80% at 100% 100%,#6d5bd626,transparent 60%),linear-gradient(150deg,#1d2026,#121418 60%,#0d0e11);
  box-shadow:0 50px 110px #17191c40,0 0 0 1px #ffffff14 inset}
.slay-ring{position:absolute;z-index:-1;width:920px;height:920px;left:-250px;top:-330px;border-radius:50%;border:1px solid #f2cd3e22;
  background:repeating-conic-gradient(from 0deg,transparent 0deg 7deg,#f2cd3e14 7.1deg 7.6deg,transparent 7.700deg 14deg);
  -webkit-mask-image:radial-gradient(transparent 46%,#000 47%,#000 66%,transparent 67%);mask-image:radial-gradient(transparent 46%,#000 47%,#000 66%,transparent 67%);animation:ringTurn 80s linear infinite}
.slay-glow{position:absolute;z-index:-1;right:-120px;bottom:-200px;width:560px;height:560px;border-radius:50%;background:radial-gradient(closest-side,#f2cd3e2e,transparent);filter:blur(10px);animation:glowBreath 6s ease-in-out infinite}
@keyframes glowBreath{50%{transform:scale(1.14);opacity:.75}}
.slay-cta .new-app-inner{grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.slay-cta .announcement-tag{display:inline-flex;align-items:center;gap:11px;font-size:11.5px;letter-spacing:.16em;color:#f5e3a0;border-color:#f2cd3e55;background:#f2cd3e12;padding:11px 18px;margin-bottom:22px}
.slay-cta .slay-word{font-size:clamp(96px,14.5vw,214px);line-height:.9;width:fit-content;padding-right:.42em;
  background:linear-gradient(175deg,#fff3b8 8%,#f2cd3e 46%,#b98b0c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 18px 40px #f2cd3e30)}
.slay-cta .slay-word>span{color:#fff;-webkit-text-fill-color:#fff;font-size:.42em;top:-.08em;right:0;transform:none;animation:starTurn 9s linear infinite;transition:none}
.new-app-section.slay-cta:hover .slay-word>span{transform:none}
@keyframes starTurn{to{transform:rotate(360deg)}}
.slay-cta .slay-space-label{font-size:12.5px;letter-spacing:.34em;color:#b9bdc7;margin:26px 0 0 6px}
.slay-cta .new-app-copy h2{font-size:clamp(34px,3.7vw,54px);color:#fff}
.slay-cta .new-app-copy p{font-size:18.5px;line-height:1.6;color:#b9bdc7;margin:22px 0 34px}
.slay-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.button-slay-xl{font-size:19px;padding:11px 11px 11px 36px;gap:22px}
.button-slay-xl .cta-arrow{width:58px;height:58px}.button-slay-xl .cta-arrow svg{width:22px;height:22px}
.button-slay-xl::after{content:"";position:absolute;inset:-1px;border-radius:99px;box-shadow:0 0 0 0 #f2cd3e80;animation:slayPulse 2.8s ease-out infinite;pointer-events:none}
@keyframes slayPulse{0%{box-shadow:0 0 0 0 #f2cd3e70}70%,100%{box-shadow:0 0 0 22px #f2cd3e00}}
.slay-cta .button-slay-xl{overflow:visible}
.slay-cta .button-slay-xl::before{display:none}
.slay-domain{display:inline-flex;align-items:center;gap:10px;border-bottom:1px solid #ffffff40;padding:6px 0;transition:border-color .25s}
.slay-domain:hover{border-color:var(--gold)}
.slay-cta .cta-domain{margin:0;font-size:17px;color:#fff;font-weight:600;transition:color .25s}.slay-domain:hover .cta-domain{color:var(--gold)}
.slay-strip{margin:74px -76px 0;padding:20px 0;border-top:1px solid #ffffff14;overflow:hidden;background:#ffffff05}
.slay-strip>div{display:flex;width:max-content;align-items:center;gap:34px;animation:marquee 36s linear infinite}
.slay-strip span{font-family:var(--display);font-size:19px;letter-spacing:-.02em;color:#d9dce4}
.slay-strip i{font-style:normal;font-size:20px;color:var(--gold)}
.motion-paused .slay-ring,.motion-paused .slay-glow,.motion-paused .slay-strip>div,.motion-paused .slay-word>span,.motion-paused .button-slay::before,.motion-paused .button-slay-xl::after,.motion-paused .sun-ring::before,.motion-paused .sun-ring::after{animation-play-state:paused}

/* ---------- footer ---------- */
.footer-top a{transition:color .2s}

@media(max-width:1100px){
  .hero-description{font-size:16.5px;max-width:400px}
  .slay-panel{padding:64px 48px 0;border-radius:36px}.slay-strip{margin:60px -48px 0}
  .slay-cta .new-app-inner{gap:44px}
  .about-grid{gap:60px}.sun-ring{width:220px;height:220px}.sun-ring img{width:118px;height:118px}
  .social-preview{margin:auto 32px 48px}.comment-bubble{right:-18px}
  .token-facts{grid-template-columns:1fr}
}
@media(max-width:800px){
  .hero-description{font-size:17px}.hero-actions{flex-wrap:wrap}
  .about-copy>p,.section-intro>p{font-size:16.5px}.feature-content>p{font-size:15.5px}
  .about-grid{grid-template-columns:1fr}
  .sun-ring{width:170px;height:170px}.sun-ring img{width:96px;height:96px}.sun-ring::before{inset:-28px}.sun-ring::after{inset:-50px}.about-grid{gap:84px}
  .feature-content{padding:32px 30px 24px}
  .preview-photo{height:200px}.social-preview{max-width:300px;margin:auto 26px 46px}.comment-bubble{width:250px;font-size:11px;right:-14px}
  .nft-preview{max-width:230px}.nft-stamp{width:70px;height:70px;font-size:25px;right:-22px}
  .event-ticket{width:230px;padding:22px 24px}.event-ticket strong{font-size:38px}
  .how-grid{grid-template-columns:1fr;gap:16px}.how-step{padding:28px 26px 30px}.step-number{font-size:50px;margin-bottom:22px}.how-step h3{font-size:24px}.how-step p{font-size:15.5px}
  .token-copy>p{font-size:16px}.token-facts{grid-template-columns:repeat(3,1fr)}.token-facts dd{font-size:16px}.contract-box code{font-size:11px}
  .faq-list summary{font-size:17.5px}.faq-answer p{font-size:15.5px}.faq-answer{padding-right:20px}.faq-title p{font-size:16px}
  .new-app-section.slay-cta{padding:20px 0 70px}
  .slay-panel{padding:52px 34px 0;border-radius:30px}.slay-strip{margin:48px -34px 0;padding:16px 0}
  .slay-cta .new-app-inner{grid-template-columns:1fr;gap:38px}
  .slay-cta .slay-word{font-size:clamp(96px,26vw,170px)}
  .slay-cta .new-app-copy p{font-size:17px}
  .footer-top>p,.footer-email{font-size:13.5px}.footer-top nav{font-size:13.5px}.footer-bottom{font-size:11.5px}
}
@media(max-width:560px){
  .nav-links{font-size:16px}
  .faq-title h2 br,.faq-title p br{display:inline}.faq-title p{display:block}
  .hero-description{font-size:15.5px;max-width:340px}.hero-label{font-size:12.5px}
  .button-slay{font-size:14.5px;padding:7px 7px 7px 22px;gap:12px}.cta-arrow{width:38px;height:38px}
  .hero-actions .button-light{padding:17px 22px;font-size:14px}
  .app-domain-link{font-size:12px}.spark-control{font-size:12px}.motion-control,.play-hint{font-size:11.5px}
  .post-top strong{font-size:11px}.post-top small{font-size:9.5px}.art-tag{font-size:10px}.card-caption{font-size:10.5px}.float-card strong{font-size:13.5px}
  .about-copy>p,.section-intro>p{font-size:15.5px}.text-link{font-size:14px}
  .feature-content h3{font-size:32px}.social-preview{margin:auto 22px 44px}.comment-bubble{width:230px;right:-10px}
  .token-facts{grid-template-columns:1fr}.token-facts>div{flex-direction:row;justify-content:space-between;align-items:center}
  .contract-box code{font-size:10.5px}.token-links{font-size:13px}
  .slay-panel{padding:44px 24px 0;border-radius:26px}.slay-strip{margin:42px -24px 0}.slay-strip span{font-size:16px}
  .slay-cta .slay-word{font-size:27vw}.slay-cta .slay-space-label{font-size:10.5px;letter-spacing:.26em;margin-top:18px}
  .slay-cta .new-app-copy h2{font-size:33px}.slay-cta .new-app-copy p{font-size:16px;margin:16px 0 26px}
  .button-slay-xl{font-size:16.5px;padding:8px 8px 8px 26px;gap:16px}.button-slay-xl .cta-arrow{width:48px;height:48px}
  .slay-actions{gap:18px}.slay-cta .cta-domain{font-size:15px}
  .footer-top>p,.footer-email,.footer-top nav{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .slay-ring,.slay-glow,.slay-strip>div,.slay-word>span,.button-slay::before,.button-slay-xl::after,.sun-ring::before,.sun-ring::after{animation:none!important}
}