/* V2 preview refinement pass: intentional nav landing + scene browser */
#scenes{scroll-margin-top:96px}
#pricing{scroll-margin-top:18vh}
#faq{scroll-margin-top:110px}

/* Scene browser: one real scene at a time, shown as an editorial crop instead
   of forcing five unlike scene documents into matching fake phone shells. */
.scene-browser-grid{
  min-height:690px;
  display:grid;
  grid-template-columns:minmax(520px,1.28fr) minmax(360px,.72fr);
}
.scene-browser-stage{
  min-width:0;
  padding:50px 42px 44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 48%,rgba(255,107,26,.13),transparent 42%),
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.025) 1px,transparent 1.3px) 0 0/5px 5px,
    #070809;
}
.scene-browser-bar,
.scene-browser-foot{
  width:min(430px,100%);
  min-height:38px;
  padding:0 12px;
  border:1px solid var(--line2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:#777b79;
  background:#0c0e0f;
  font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.scene-browser-bar{border-bottom:0}
.scene-browser-foot{border-top:0;color:#777}
.scene-browser-foot strong{color:#d9d6cf;font-size:9px}
.scene-browser-crop{
  position:relative;
  width:min(430px,100%);
  height:560px;
  overflow:hidden;
  border:1px solid var(--line2);
  background:#000;
  box-shadow:0 34px 100px rgba(0,0,0,.52);
}
.scene-browser-crop:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:76px;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.26));
}
.scene-browser-crop iframe{
  position:absolute;
  inset:0;
  width:430px;
  height:932px;
  border:0;
  background:#000;
  pointer-events:none;
}
.scene-browser-copy{padding-top:64px;padding-bottom:64px}
.scene-picker{
  margin-top:28px;
  border-top:1px solid var(--line);
}
.scene-picker-item{
  width:100%;
  min-height:58px;
  padding:10px 0;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:#8b8d89;
  display:grid;
  grid-template-columns:34px 1fr auto;
  align-items:center;
  gap:10px;
  text-align:left;
  cursor:pointer;
}
.scene-picker-item span{
  color:#5d605d;
  font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.09em;
}
.scene-picker-item strong{font-size:12px;color:#aaa9a4}
.scene-picker-item em{
  font-style:normal;
  color:#60635f;
  font:700 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.scene-picker-item:hover strong,.scene-picker-item.is-active strong{color:#f2efe8}
.scene-picker-item.is-active span{color:var(--orange)}
.scene-picker-item.is-active{background:linear-gradient(90deg,rgba(255,107,26,.07),transparent 72%)}

@media(max-width:1000px){
  .scene-browser-grid{grid-template-columns:1fr}
  .scene-browser-copy{border-left:0;border-top:1px solid var(--line)}
  .scene-browser-stage{padding:44px 24px}
}

@media(max-width:700px){
  #scenes,#pricing,#faq{scroll-margin-top:86px}
  .scene-browser-grid{min-height:0}
  .scene-browser-stage{padding:32px 12px}
  .scene-browser-bar,.scene-browser-foot,.scene-browser-crop{width:100%}
  .scene-browser-crop{height:480px}
  .scene-browser-crop iframe{width:390px;height:844px;left:50%;transform:translateX(-50%)}
  .scene-browser-copy{padding:44px 24px}
  .scene-picker-item{grid-template-columns:30px 1fr}
  .scene-picker-item em{display:none}
}

/* Crypto checkout refinement: cobalt plasma palette + larger SOL mark. */
.purchase-usdc{
  border:1px solid transparent!important;
  background:
    radial-gradient(ellipse 112% 96% at -12% 112%,rgba(38,89,255,.54) 0%,rgba(38,89,255,.28) 28%,rgba(38,89,255,.08) 52%,transparent 72%) padding-box,
    radial-gradient(ellipse 98% 88% at 112% -10%,rgba(255,55,194,.54) 0%,rgba(255,55,194,.28) 30%,rgba(255,55,194,.08) 54%,transparent 74%) padding-box,
    radial-gradient(ellipse 92% 82% at 108% 110%,rgba(128,72,255,.42) 0%,rgba(128,72,255,.19) 34%,transparent 69%) padding-box,
    radial-gradient(ellipse 72% 62% at 38% -16%,rgba(103,220,255,.22) 0%,rgba(103,220,255,.08) 40%,transparent 70%) padding-box,
    linear-gradient(138deg,#071021 0%,#090b1e 34%,#10091f 67%,#180719 100%) padding-box,
    linear-gradient(118deg,#67ddff 0%,#2f6bff 26%,#7356ff 52%,#ff3ac8 80%,#9d5cff 100%) border-box!important;
  box-shadow:
    0 18px 40px rgba(0,0,0,.36),
    0 0 32px rgba(47,107,255,.19),
    0 0 34px rgba(255,58,200,.16),
    0 0 30px rgba(128,72,255,.18),
    inset 0 0 36px rgba(119,180,255,.04)!important;
}
.purchase-usdc:before{
  inset:-24% -12%!important;
  background:
    radial-gradient(ellipse 46% 58% at 8% 86%,rgba(41,91,255,.48) 0%,rgba(41,91,255,.19) 34%,transparent 72%),
    radial-gradient(ellipse 48% 58% at 92% 13%,rgba(255,55,194,.48) 0%,rgba(255,55,194,.19) 34%,transparent 72%),
    radial-gradient(ellipse 44% 54% at 90% 86%,rgba(126,74,255,.38) 0%,rgba(126,74,255,.15) 36%,transparent 74%),
    linear-gradient(116deg,transparent 19%,rgba(108,221,255,.14) 36%,transparent 50%,rgba(117,83,255,.14) 65%,transparent 81%)!important;
  filter:blur(17px)!important;
  opacity:1!important;
  transform:rotate(-6deg)!important;
}
.purchase-usdc:after{
  background:linear-gradient(108deg,transparent 35%,rgba(225,236,255,.08) 49%,rgba(255,187,238,.035) 53%,transparent 63%)!important;
  opacity:.92!important;
}
.purchase-usdc .purchase-copy strong{
  color:#fff!important;
  text-shadow:0 0 17px rgba(255,255,255,.18),0 0 24px rgba(47,107,255,.13),0 0 25px rgba(255,58,200,.11);
}
.crypto-status-dot{
  background:#79dcff!important;
  box-shadow:0 0 14px rgba(103,221,255,.92),0 0 30px rgba(255,58,200,.36)!important;
}
.crypto-chip{
  border-color:rgba(97,255,225,.28)!important;
  background:linear-gradient(145deg,#303b45 0%,#171d25 48%,#0b0e15 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 8px 18px rgba(0,0,0,.34),0 0 18px rgba(34,211,238,.11),0 0 20px rgba(151,92,255,.10)!important;
}
.crypto-chip-sol{
  left:50%!important;
  top:50%!important;
  width:22px!important;
  height:19px!important;
  transform:translate(-50%,-50%) scale(1.5)!important;
  transform-origin:center!important;
  filter:brightness(1.18) saturate(1.2) drop-shadow(0 0 5px rgba(151,92,255,.50)) drop-shadow(0 0 4px rgba(45,255,205,.42))!important;
}
.purchase-usdc:hover{
  box-shadow:
    0 24px 54px rgba(0,0,0,.48),
    0 0 40px rgba(47,107,255,.27),
    0 0 42px rgba(255,58,200,.23),
    0 0 38px rgba(128,72,255,.24),
    inset 0 0 0 1px rgba(255,255,255,.11)!important;
}

/* FAQ refinement: stronger hierarchy, cleaner accordion cards, intentional motion. */
.faq{
  padding-top:110px!important;
  padding-bottom:120px!important;
  align-items:start!important;
}
.faq>div:first-child{
  padding-top:8px;
}
.faq h2{
  max-width:5.2ch;
  margin-top:12px!important;
  letter-spacing:-.065em!important;
}
.faqlist{
  display:grid!important;
  gap:12px!important;
  border-top:0!important;
}
.faqlist details{
  position:relative;
  margin:0!important;
  border:1px solid rgba(255,255,255,.085)!important;
  border-radius:16px;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,107,26,.035),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));
  overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease,background .22s ease,box-shadow .22s ease;
}
.faqlist details:hover{
  transform:translateX(4px);
  border-color:rgba(255,255,255,.15)!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,107,26,.055),transparent 36%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.014));
  box-shadow:0 18px 46px rgba(0,0,0,.2);
}
.faqlist details[open]{
  border-color:rgba(255,107,26,.38)!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,107,26,.11),transparent 38%),
    linear-gradient(180deg,rgba(255,107,26,.05),rgba(255,255,255,.018) 52%,rgba(255,255,255,.008));
  box-shadow:0 22px 54px rgba(0,0,0,.26),0 0 34px rgba(255,107,26,.05);
}
.faqlist summary{
  position:relative;
  min-height:76px;
  padding:24px 76px 24px 26px!important;
  border:0!important;
  list-style:none;
  cursor:pointer;
  display:flex!important;
  align-items:center;
  color:#f0ede7!important;
  font-size:clamp(18px,1.15vw,23px)!important;
  font-weight:760!important;
  line-height:1.15!important;
  letter-spacing:-.025em!important;
}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary::after{
  content:"+";
  position:absolute;
  right:20px;
  top:50%;
  width:36px;
  height:36px;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#d8d4cd;
  background:rgba(255,255,255,.02);
  font:400 22px/1 ui-sans-serif,system-ui,sans-serif;
  transition:transform .22s ease,border-color .22s ease,background .22s ease,color .22s ease;
}
.faqlist details:hover summary::after{
  border-color:rgba(255,255,255,.25);
  color:#fff;
}
.faqlist details[open] summary::after{
  content:"−";
  border-color:rgba(255,107,26,.45);
  background:rgba(255,107,26,.12);
  color:#fff;
}
.faqlist details p{
  margin:0!important;
  padding:0 76px 25px 26px!important;
  max-width:64ch;
  color:#9a9b97!important;
  font-size:14px!important;
  line-height:1.6!important;
}

@media(min-width:1001px){
  .faq{
    grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr)!important;
    gap:74px!important;
  }
  .faq>div:first-child{
    position:sticky;
    top:118px;
    align-self:start;
  }
}
@media(max-width:1000px){
  .faq>div:first-child{margin-bottom:28px}
  .faq h2{max-width:7ch}
}
@media(max-width:700px){
  .faq{padding-top:72px!important;padding-bottom:80px!important}
  .faqlist{gap:9px!important}
  .faqlist summary{min-height:68px;padding:20px 62px 20px 20px!important;font-size:18px!important}
  .faqlist summary::after{right:15px;width:32px;height:32px;font-size:19px}
  .faqlist details p{padding:0 20px 20px!important;font-size:13px!important}
}

/* Final background lift: slightly brighter, same dark editorial mood. */
:root{--bg:#070808}
body{
  background:
    radial-gradient(circle at 86% 8%,rgba(255,107,26,.12),transparent 23%),
    linear-gradient(180deg,#070808,#0a0b0b 58%,#060707)!important;
}
.hero-grid{
  background:
    radial-gradient(circle at 88% 48%,rgba(255,107,26,.11),transparent 29%),
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.026) 1px,transparent 1.4px) 0 0/5px 5px,
    #090a0b!important;
}
.showcase{background:linear-gradient(180deg,#090a0b,#0c0d0e)!important}
.scene-browser-stage{
  background:
    radial-gradient(circle at 50% 48%,rgba(255,107,26,.13),transparent 42%),
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.025) 1px,transparent 1.3px) 0 0/5px 5px,
    #090a0b!important;
}

/* Hue-scene motion: three slow color profiles, same card geometry and locked chip. */
@property --crypto-scene-a{syntax:"<color>";inherits:true;initial-value:#67ddff}
@property --crypto-scene-b{syntax:"<color>";inherits:true;initial-value:#2f6bff}
@property --crypto-scene-c{syntax:"<color>";inherits:true;initial-value:#ff3ac8}
@property --crypto-scene-d{syntax:"<color>";inherits:true;initial-value:#9d5cff}

.purchase-usdc{
  --crypto-scene-a:#67ddff;
  --crypto-scene-b:#2f6bff;
  --crypto-scene-c:#ff3ac8;
  --crypto-scene-d:#9d5cff;
  animation:srCryptoHueScene 24s cubic-bezier(.45,0,.55,1) infinite!important;
  background:
    radial-gradient(ellipse 112% 96% at -12% 112%,color-mix(in srgb,var(--crypto-scene-b) 54%,transparent) 0%,color-mix(in srgb,var(--crypto-scene-b) 28%,transparent) 28%,color-mix(in srgb,var(--crypto-scene-b) 8%,transparent) 52%,transparent 72%) padding-box,
    radial-gradient(ellipse 98% 88% at 112% -10%,color-mix(in srgb,var(--crypto-scene-c) 54%,transparent) 0%,color-mix(in srgb,var(--crypto-scene-c) 28%,transparent) 30%,color-mix(in srgb,var(--crypto-scene-c) 8%,transparent) 54%,transparent 74%) padding-box,
    radial-gradient(ellipse 92% 82% at 108% 110%,color-mix(in srgb,var(--crypto-scene-d) 42%,transparent) 0%,color-mix(in srgb,var(--crypto-scene-d) 19%,transparent) 34%,transparent 69%) padding-box,
    radial-gradient(ellipse 72% 62% at 38% -16%,color-mix(in srgb,var(--crypto-scene-a) 22%,transparent) 0%,color-mix(in srgb,var(--crypto-scene-a) 8%,transparent) 40%,transparent 70%) padding-box,
    linear-gradient(138deg,#071021 0%,#090b1e 34%,#10091f 67%,#180719 100%) padding-box,
    linear-gradient(118deg,var(--crypto-scene-a) 0%,var(--crypto-scene-b) 27%,var(--crypto-scene-d) 54%,var(--crypto-scene-c) 80%,var(--crypto-scene-a) 100%) border-box!important;
  box-shadow:
    0 18px 40px rgba(0,0,0,.36),
    0 0 34px color-mix(in srgb,var(--crypto-scene-b) 20%,transparent),
    0 0 35px color-mix(in srgb,var(--crypto-scene-c) 17%,transparent),
    0 0 31px color-mix(in srgb,var(--crypto-scene-d) 18%,transparent),
    inset 0 0 36px color-mix(in srgb,var(--crypto-scene-a) 4%,transparent)!important;
}
.purchase-usdc:before{
  background:
    radial-gradient(ellipse 46% 58% at 8% 86%,color-mix(in srgb,var(--crypto-scene-b) 48%,transparent) 0%,color-mix(in srgb,var(--crypto-scene-b) 19%,transparent) 34%,transparent 72%),
    radial-gradient(ellipse 48% 58% at 92% 13%,color-mix(in srgb,var(--crypto-scene-c) 48%,transparent) 0%,color-mix(in srgb,var(--crypto-scene-c) 19%,transparent) 34%,transparent 72%),
    radial-gradient(ellipse 44% 54% at 90% 86%,color-mix(in srgb,var(--crypto-scene-d) 38%,transparent) 0%,color-mix(in srgb,var(--crypto-scene-d) 15%,transparent) 36%,transparent 74%),
    linear-gradient(116deg,transparent 19%,color-mix(in srgb,var(--crypto-scene-a) 14%,transparent) 36%,transparent 50%,color-mix(in srgb,var(--crypto-scene-d) 14%,transparent) 65%,transparent 81%)!important;
}
.purchase-usdc .purchase-copy strong{
  text-shadow:0 0 17px rgba(255,255,255,.18),0 0 24px color-mix(in srgb,var(--crypto-scene-b) 13%,transparent),0 0 25px color-mix(in srgb,var(--crypto-scene-c) 11%,transparent)!important;
}
.crypto-status-dot{
  background:var(--crypto-scene-a)!important;
  box-shadow:0 0 14px color-mix(in srgb,var(--crypto-scene-a) 92%,transparent),0 0 30px color-mix(in srgb,var(--crypto-scene-c) 36%,transparent)!important;
}
.purchase-usdc:hover{
  box-shadow:
    0 24px 54px rgba(0,0,0,.48),
    0 0 42px color-mix(in srgb,var(--crypto-scene-b) 28%,transparent),
    0 0 43px color-mix(in srgb,var(--crypto-scene-c) 24%,transparent),
    0 0 39px color-mix(in srgb,var(--crypto-scene-d) 25%,transparent),
    inset 0 0 0 1px rgba(255,255,255,.11)!important;
}

@keyframes srCryptoHueScene{
  0%,100%{
    --crypto-scene-a:#67ddff;
    --crypto-scene-b:#2f6bff;
    --crypto-scene-c:#ff3ac8;
    --crypto-scene-d:#9d5cff;
  }
  33%{
    --crypto-scene-a:#ff87bd;
    --crypto-scene-b:#8b5dff;
    --crypto-scene-c:#ff825f;
    --crypto-scene-d:#4f78ff;
  }
  66%{
    --crypto-scene-a:#57ffd4;
    --crypto-scene-b:#24d7a2;
    --crypto-scene-c:#526cff;
    --crypto-scene-d:#b17aff;
  }
}

@media(prefers-reduced-motion:reduce){
  .purchase-usdc{animation:none!important}
}

/* SEO keyword subfooter */
.seo-keyword-subfooter{border-top:1px solid rgba(255,255,255,.08);background:#0b0b0b;padding:28px 0}
.seo-keyword-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:14px}
.seo-keyword-head span{font-weight:900;font-size:15px}
.seo-keyword-head small{font-size:11px;color:#777}
.seo-keyword-links{display:flex;gap:8px;flex-wrap:wrap}
.seo-keyword-links a{font-size:12px;text-decoration:none;color:#aaa;border:1px solid rgba(255,255,255,.09);background:#111;border-radius:999px;padding:8px 11px}
.seo-keyword-links a:hover{color:#fff;border-color:rgba(255,255,255,.22)}
@media(max-width:620px){.seo-keyword-head{display:block}.seo-keyword-head small{display:block;margin-top:4px}}