:root {
  --ink: #181326;
  --ink-soft: #675d77;
  --paper: #fbfaff;
  --white: #ffffff;
  --violet: #8157ff;
  --violet-deep: #5c34d9;
  --pink: #ff69ad;
  --mint: #63e6be;
  --lime: #c6f36b;
  --line: rgba(35, 24, 54, .12);
  --shadow: 0 24px 70px rgba(70, 43, 129, .16);
  --radius-xl: 40px;
  --radius-lg: 28px;
  --radius-md: 20px;
  --max: 1180px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 3%, rgba(255, 105, 173, .15), transparent 24rem),
    radial-gradient(circle at 93% 12%, rgba(99, 230, 190, .16), transparent 28rem),
    var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .36;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(55, 38, 85, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 38, 85, .055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { display: block; max-width: 100%; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  color: #fff;
  background: var(--ink);
  border-radius: 12px;
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  padding: 16px 22px;
  transition: padding .25s ease;
}

.site-header.is-scrolled { padding-top: 9px; padding-bottom: 9px; }

.nav-shell {
  width: min(var(--max), 100%);
  min-height: 68px;
  margin: auto;
  padding: 10px 12px 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 22px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 12px 34px rgba(62, 39, 105, .1);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }

.brand-mark {
  position: relative;
  width: 38px;
  height: 38px;
  border: 2px solid var(--ink);
  border-radius: 13px;
  background: linear-gradient(145deg, var(--lime), var(--mint));
  box-shadow: 4px 4px 0 var(--ink);
}

.brand-mark::before {
  position: absolute;
  inset: 9px;
  content: "";
  background: var(--ink);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.brand-word { display: grid; line-height: 1; }
.brand-word strong { font-size: 17px; letter-spacing: .04em; }
.brand-word small { margin-top: 4px; color: var(--ink-soft); font-size: 8px; font-weight: 900; letter-spacing: .2em; }

.nav-links { display: flex; align-items: center; justify-content: center; gap: 6px; }
.nav-links a { padding: 11px 15px; border-radius: 13px; color: var(--ink-soft); font-size: 14px; font-weight: 750; transition: .2s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); background: #eee8ff; }

.nav-cta, .button {
  min-height: 46px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--pink));
  box-shadow: 0 7px 0 rgba(75, 43, 155, .18), 0 12px 26px rgba(129, 87, 255, .22);
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.nav-cta:hover, .button:hover { transform: translateY(-2px); box-shadow: 0 9px 0 rgba(75, 43, 155, .16), 0 16px 32px rgba(129, 87, 255, .27); }
.button-secondary { color: var(--ink); border: 1px solid var(--line); background: rgba(255,255,255,.8); box-shadow: 0 7px 0 rgba(38,23,60,.08); }
.button-dark { background: var(--ink); box-shadow: 0 7px 0 rgba(0,0,0,.22); }
.button-arrow { font-size: 18px; transition: transform .2s ease; }
.button:hover .button-arrow { transform: translateX(4px); }

.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; }
.menu-toggle span { display: block; width: 19px; height: 2px; margin: 4px auto; background: var(--ink); border-radius: 2px; }

.page-wrap { width: min(var(--max), calc(100% - 44px)); margin: auto; }

.hero {
  min-height: calc(100vh - 100px);
  padding: 74px 0 80px;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: 70px;
}

.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 23px; color: var(--violet-deep); font-size: 11px; font-weight: 950; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(99, 230, 190, .18); }

.display-title {
  max-width: 760px;
  margin: 0;
  font-size: clamp(58px, 7.2vw, 104px);
  line-height: .9;
  letter-spacing: -.075em;
  font-weight: 950;
}

.display-title .gradient {
  display: block;
  color: transparent;
  background: linear-gradient(100deg, var(--violet-deep), var(--pink) 55%, #25a981);
  background-clip: text;
  -webkit-background-clip: text;
}

.hero-copy > p { max-width: 620px; margin: 28px 0 0; color: var(--ink-soft); font-size: 18px; line-height: 1.8; }
.hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }

.micro-proof { margin-top: 36px; display: flex; gap: 26px; flex-wrap: wrap; }
.micro-proof div { display: grid; gap: 4px; }
.micro-proof strong { font-size: 22px; line-height: 1; }
.micro-proof span { color: var(--ink-soft); font-size: 11px; font-weight: 750; }

.hero-art { position: relative; min-height: 610px; display: grid; place-items: center; }
.hero-orbit { position: absolute; width: 510px; aspect-ratio: 1; border: 1px solid rgba(129,87,255,.22); border-radius: 50%; animation: spin 22s linear infinite; }
.hero-orbit::before, .hero-orbit::after { position: absolute; content: ""; width: 12px; height: 12px; border-radius: 50%; }
.hero-orbit::before { top: 9%; left: 18%; background: var(--mint); box-shadow: 0 0 24px var(--mint); }
.hero-orbit::after { right: 8%; bottom: 28%; background: var(--pink); box-shadow: 0 0 24px var(--pink); }

.hero-card {
  position: relative;
  z-index: 3;
  width: min(430px, 82vw);
  padding: 13px;
  border: 2px solid var(--ink);
  border-radius: 38px;
  background: #1a1130;
  box-shadow: 18px 20px 0 rgba(129,87,255,.16), var(--shadow);
  transform: rotate(2deg);
}

.hero-card::before { position: absolute; z-index: -1; inset: -28px; content: ""; background: radial-gradient(circle, rgba(129,87,255,.28), transparent 66%); filter: blur(20px); }
.hero-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 27px; }

.card-meta { padding: 14px 8px 5px; color: #fff; display: flex; justify-content: space-between; align-items: flex-end; }
.card-meta small { display: block; color: #bca9ed; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.card-meta strong { display: block; margin-top: 4px; font-size: 18px; }
.live-pill { padding: 8px 12px; color: var(--ink); background: var(--mint); border-radius: 999px; font-size: 9px; font-weight: 950; letter-spacing: .09em; }

.float-chip { position: absolute; z-index: 5; padding: 12px 16px; border: 1px solid rgba(255,255,255,.9); border-radius: 16px; background: rgba(255,255,255,.82); box-shadow: 0 12px 30px rgba(56,37,94,.15); backdrop-filter: blur(16px); font-size: 12px; font-weight: 850; }
.float-chip-one { top: 16%; left: -2%; transform: rotate(-5deg); }
.float-chip-two { right: -2%; bottom: 18%; transform: rotate(5deg); }
.float-chip b { color: var(--violet-deep); }

.signal-bar { overflow: hidden; border-block: 2px solid var(--ink); background: var(--lime); transform: rotate(-1deg); }
.signal-track { width: max-content; padding: 13px 0; display: flex; align-items: center; gap: 28px; animation: marquee 26s linear infinite; }
.signal-track span { font-size: 12px; font-weight: 950; letter-spacing: .12em; white-space: nowrap; }
.signal-track i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }

.section { padding: 116px 0; }
.section-tight { padding: 78px 0; }
.section-heading { max-width: 760px; margin-bottom: 48px; }
.section-heading.split { max-width: none; display: grid; grid-template-columns: 1fr .65fr; gap: 60px; align-items: end; }
.section-kicker { margin: 0 0 14px; color: var(--violet-deep); font-size: 11px; font-weight: 950; letter-spacing: .18em; text-transform: uppercase; }
.section-title { margin: 0; font-size: clamp(38px, 5.2vw, 68px); line-height: .98; letter-spacing: -.055em; }
.section-lead { margin: 18px 0 0; color: var(--ink-soft); font-size: 17px; line-height: 1.8; }
.section-heading.split .section-lead { margin: 0 0 5px; }

.loop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.loop-card { position: relative; min-height: 290px; padding: 25px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255,255,255,.82); box-shadow: 0 14px 40px rgba(62,39,105,.08); transition: transform .24s ease, box-shadow .24s ease; }
.loop-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
.loop-card:nth-child(2) { background: #eee8ff; }
.loop-card:nth-child(3) { background: #e5fff6; }
.loop-card:nth-child(4) { color: #fff; background: var(--ink); }
.loop-number { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 13px; font-size: 12px; font-weight: 900; }
.loop-icon { margin: 42px 0 22px; font-size: 32px; }
.loop-card h3 { margin: 0 0 10px; font-size: 22px; }
.loop-card p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.loop-card:nth-child(4) p { color: #bbb0ca; }

.collection-shell { padding: 34px; border-radius: var(--radius-xl); color: #fff; background: var(--ink); box-shadow: var(--shadow); overflow: hidden; }
.collection-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 30px; }
.collection-head h2 { margin: 0; max-width: 620px; font-size: clamp(36px,5vw,64px); line-height: .98; letter-spacing: -.05em; }
.collection-head p { max-width: 350px; margin: 0; color: #bdb3ca; font-size: 14px; line-height: 1.7; }
.dog-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.dog-card { padding: 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: rgba(255,255,255,.07); transition: transform .22s ease, background .22s ease; }
.dog-card:hover { transform: translateY(-6px) rotate(-1deg); background: rgba(255,255,255,.12); }
.dog-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; }
.dog-card-info { padding: 12px 7px 6px; display: flex; align-items: center; justify-content: space-between; }
.dog-card-info strong { font-size: 13px; }
.dog-card-info span { color: var(--mint); font-size: 9px; font-weight: 900; letter-spacing: .08em; }

.feature-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.feature-art { position: relative; min-height: 530px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-xl); background: linear-gradient(145deg,#fff2e8,#f2e7ff 55%,#defff4); overflow: hidden; }
.feature-art::before { position: absolute; inset: 9%; content: ""; border: 1px solid rgba(129,87,255,.24); border-radius: 50%; }
.feature-art img { position: relative; width: 76%; filter: drop-shadow(0 30px 28px rgba(77,44,133,.18)); animation: hover 5s ease-in-out infinite; }
.feature-copy h2 { margin: 0; font-size: clamp(42px,5vw,68px); line-height: .98; letter-spacing: -.055em; }
.feature-copy > p { margin: 24px 0 30px; color: var(--ink-soft); font-size: 16px; line-height: 1.8; }
.feature-list { display: grid; gap: 12px; }
.feature-item { padding: 17px 18px; display: flex; align-items: center; gap: 15px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.72); }
.feature-item > span { width: 35px; height: 35px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; background: #eee8ff; font-weight: 900; }
.feature-item strong { display: block; font-size: 14px; }
.feature-item small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 12px; }

.roadmap { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.roadmap::before { position: absolute; top: 24px; left: 5%; right: 5%; height: 2px; content: ""; background: linear-gradient(90deg,var(--violet),var(--pink),var(--mint)); }
.roadmap-card { position: relative; padding-top: 62px; }
.roadmap-dot { position: absolute; z-index: 2; top: 12px; left: 18px; width: 25px; height: 25px; border: 6px solid var(--paper); border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 2px var(--violet); }
.roadmap-card:nth-child(2) .roadmap-dot { background: var(--pink); box-shadow: 0 0 0 2px var(--pink); }
.roadmap-card:nth-child(3) .roadmap-dot { background: #30b78d; box-shadow: 0 0 0 2px #30b78d; }
.roadmap-card:nth-child(4) .roadmap-dot { background: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.roadmap-content { min-height: 220px; padding: 23px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.roadmap-content small { color: var(--violet-deep); font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.roadmap-content h3 { margin: 12px 0 10px; font-size: 20px; }
.roadmap-content p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }

.faq-list { display: grid; gap: 12px; max-width: 900px; margin: auto; }
.faq-list details { padding: 0 22px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.8); }
.faq-list summary { padding: 20px 36px 20px 0; list-style: none; cursor: pointer; position: relative; font-weight: 850; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; right: 0; top: 17px; width: 30px; height: 30px; display: grid; place-items: center; content: "+"; border-radius: 10px; background: #eee8ff; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { margin: 0; padding: 0 34px 21px 0; color: var(--ink-soft); font-size: 14px; line-height: 1.75; }

.contact-shell { padding: 16px; display: grid; grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr); gap: 14px; align-items: stretch; border: 1px solid rgba(63,40,105,.1); border-radius: 36px; background: rgba(255,255,255,.72); box-shadow: 0 24px 70px rgba(70,43,129,.12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.contact-intro { position: relative; min-height: 420px; padding: 30px; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; color: #fff; background: radial-gradient(circle at 92% 5%,rgba(99,230,190,.3),transparent 29%),radial-gradient(circle at 8% 100%,rgba(255,105,173,.16),transparent 35%),linear-gradient(145deg,#1c132c,#482878); }
.contact-intro::before { position: absolute; top: -94px; right: -82px; width: 230px; height: 230px; content: ""; border: 42px solid rgba(255,255,255,.055); border-radius: 50%; }
.contact-intro::after { position: absolute; right: 24px; bottom: 24px; width: 92px; height: 92px; content: ""; opacity: .18; background-image: radial-gradient(circle,#fff 1.4px,transparent 1.7px); background-size: 12px 12px; }
.contact-intro > * { position: relative; z-index: 2; }
.contact-verified { width: fit-content; padding: 8px 11px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(99,230,190,.2); border-radius: 999px; color: var(--mint); background: rgba(99,230,190,.08); font-size: 8px; font-weight: 950; letter-spacing: .14em; }
.contact-intro h3 { max-width: 360px; margin: 36px 0 14px; font-size: clamp(34px,3.5vw,48px); line-height: .98; letter-spacing: -.05em; }
.contact-intro > p { max-width: 390px; margin: 0; color: #d2c8dd; font-size: 12px; line-height: 1.78; }
.contact-safety { max-width: 410px; margin-top: auto; padding: 14px 15px; display: grid; gap: 4px; border: 1px solid rgba(255,255,255,.13); border-radius: 15px; background: rgba(255,255,255,.075); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.contact-safety strong { color: var(--mint); font-size: 10px; }
.contact-safety span { color: #c4b8d0; font-size: 9px; line-height: 1.55; }
.contact-channels { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.contact-channel-group { min-width: 0; display: grid; gap: 7px; }
.contact-channel-group-heading { display: flex; align-items: center; gap: 9px; color: #81758f; font-size: 8px; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.contact-channel-group-heading::after { height: 1px; flex: 1; content: ""; background: linear-gradient(90deg,rgba(72,45,113,.15),rgba(72,45,113,0)); }
.contact-channel-group--community .contact-channel-group-heading { color: var(--violet-deep); }
.contact-channel-group-grid { min-width: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: minmax(174px,auto); gap: 12px; }
.contact-channel-group-grid .contact-card:only-child { grid-column: 1 / -1; }
.contact-card { position: relative; min-width: 0; padding: 21px; display: grid; grid-template-columns: 46px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 14px; align-content: start; align-items: start; overflow: hidden; border: 1px solid rgba(49,31,78,.11); border-radius: 21px; background: linear-gradient(145deg,#fff 0%,#fdfcff 72%,#f6f2ff 100%); box-shadow: 0 10px 28px rgba(61,39,99,.065); transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.contact-card::before { position: absolute; top: 0; left: 21px; right: 21px; height: 3px; content: ""; border-radius: 0 0 3px 3px; background: linear-gradient(90deg,#20a8e2,rgba(32,168,226,0)); }
.contact-card--discord_account::before,.contact-card--discord_server::before { background: linear-gradient(90deg,#6875f5,rgba(104,117,245,0)); }
.contact-card:hover { z-index: 2; transform: translateY(-3px); border-color: rgba(129,87,255,.24); box-shadow: 0 16px 36px rgba(61,39,99,.12); }
.contact-card-icon { width: 46px; height: 46px; display: grid; place-items: center; color: #fff; border: 4px solid rgba(255,255,255,.75); border-radius: 16px; background: linear-gradient(145deg,#31b9ed,#168bc7); box-shadow: 0 8px 20px rgba(40,155,210,.2),0 0 0 1px rgba(31,164,219,.12); font-size: 10px; font-weight: 950; letter-spacing: .04em; }
.contact-card--discord_account .contact-card-icon,.contact-card--discord_server .contact-card-icon { background: linear-gradient(145deg,#7b87ff,#5865e8); box-shadow: 0 8px 20px rgba(88,101,242,.22),0 0 0 1px rgba(88,101,242,.12); }
.contact-card-copy { min-width: 0; padding-top: 2px; }
.contact-card-copy small { display: flex; align-items: center; gap: 6px; color: var(--violet-deep); font-size: 7px; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }
.contact-card-copy small::before { width: 5px; height: 5px; flex: 0 0 5px; content: ""; border-radius: 50%; background: #25a9df; box-shadow: 0 0 0 3px rgba(37,169,223,.1); }
.contact-card--discord_account .contact-card-copy small::before,.contact-card--discord_server .contact-card-copy small::before { background: #6875f5; box-shadow: 0 0 0 3px rgba(104,117,245,.1); }
.contact-card-copy strong { display: block; margin-top: 7px; font-size: 15px; line-height: 1.25; }
.contact-card-copy code { max-width: 100%; margin-top: 6px; display: block; overflow: hidden; color: #756a83; font: 650 10px/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; text-overflow: ellipsis; white-space: nowrap; }
.contact-card-action { grid-column: 2 / -1; width: fit-content; min-width: 138px; min-height: 35px; margin-top: 17px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(32,168,226,.1); border-radius: 11px; color: #087eaf; background: #e8f8ff; font-size: 9px; font-weight: 900; transition: color .18s ease,background .18s ease,transform .18s ease; }
.contact-card--discord_account .contact-card-action,.contact-card--discord_server .contact-card-action { color: #505bd6; border-color: rgba(88,101,242,.1); background: #eeefff; }
.contact-card-action:hover { color: #fff; background: #168fc8; transform: translateX(2px); }
.contact-card--discord_account .contact-card-action:hover,.contact-card--discord_server .contact-card-action:hover { background: #5865e8; }
.contact-card-action.is-static { color: var(--ink-soft); border-color: transparent; background: #f4f1f8; cursor: default; transform: none; }
.contact-loading,.contact-empty { width: 100%; min-height: 180px; padding: 28px; display: grid; place-items: center; border: 1px dashed rgba(129,87,255,.25); border-radius: 22px; color: var(--ink-soft); background: #faf8ff; text-align: center; font-size: 12px; line-height: 1.7; }
.contact-empty.is-error { color: #a4334c; border-color: rgba(225,73,105,.25); background: #fff5f7; }

.cta-panel { position: relative; padding: 72px; overflow: hidden; border-radius: var(--radius-xl); color: #fff; background: linear-gradient(130deg,var(--violet-deep),#3b226f 60%,#141022); box-shadow: var(--shadow); }
.cta-panel::after { position: absolute; right: -80px; bottom: -160px; width: 470px; height: 470px; content: ""; border: 80px solid rgba(99,230,190,.18); border-radius: 50%; }
.cta-panel > * { position: relative; z-index: 2; }
.cta-panel h2 { max-width: 730px; margin: 0; font-size: clamp(42px,6vw,72px); line-height: .98; letter-spacing: -.055em; }
.cta-panel p { max-width: 560px; margin: 22px 0 30px; color: #d6cce4; line-height: 1.7; }

.site-footer { margin-top: 110px; padding: 56px 22px 30px; color: #d2c9de; background: var(--ink); }
.footer-grid { width: min(var(--max),100%); margin: auto; display: grid; grid-template-columns: 1fr auto auto; gap: 70px; }
.footer-brand .brand-mark { border-color: #fff; box-shadow: 4px 4px 0 rgba(255,255,255,.25); }
.footer-brand .brand-word strong { color: #fff; }
.footer-brand .brand-word small { color: #9f93ad; }
.footer-brand p { max-width: 390px; margin: 20px 0 0; color: #998da8; font-size: 13px; line-height: 1.7; }
.footer-col { min-width: 130px; display: grid; align-content: start; gap: 11px; }
.footer-col strong { margin-bottom: 7px; color: #fff; font-size: 12px; letter-spacing: .1em; }
.footer-col a { color: #a99db8; font-size: 13px; }
.footer-col a:hover { color: var(--mint); }
.footer-bottom { width: min(var(--max),100%); margin: 42px auto 0; padding-top: 22px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255,255,255,.1); color: #7f748e; font-size: 11px; }

/* Inner pages */
.inner-hero { padding: 100px 0 70px; text-align: center; }
.inner-hero .eyebrow { justify-content: center; }
.inner-hero h1 { max-width: 980px; margin: 0 auto; font-size: clamp(52px,8vw,104px); line-height: .92; letter-spacing: -.07em; }
.inner-hero p { max-width: 680px; margin: 28px auto 0; color: var(--ink-soft); font-size: 17px; line-height: 1.8; }
.inner-meta { margin-top: 30px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.inner-meta span { padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.76); font-size: 10px; font-weight: 850; letter-spacing: .08em; }

.doc-layout { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 70px; align-items: start; }
.doc-aside { position: sticky; top: 110px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.8); }
.doc-aside strong { display: block; margin-bottom: 12px; font-size: 11px; letter-spacing: .12em; }
.doc-aside a { display: block; padding: 9px 10px; color: var(--ink-soft); border-radius: 10px; font-size: 13px; }
.doc-aside a:hover { color: var(--ink); background: #eee8ff; }
.doc-content { min-width: 0; }
.doc-section { padding: 0 0 80px; scroll-margin-top: 120px; }
.doc-index { margin-bottom: 18px; color: var(--violet-deep); font-size: 11px; font-weight: 950; letter-spacing: .15em; }
.doc-section h2 { margin: 0 0 22px; font-size: clamp(34px,4.4vw,56px); line-height: 1.02; letter-spacing: -.045em; }
.doc-section h3 { margin: 32px 0 12px; font-size: 21px; }
.doc-section p, .doc-section li { color: var(--ink-soft); font-size: 15px; line-height: 1.85; }
.doc-section ul { padding-left: 20px; }
.doc-callout { margin: 28px 0; padding: 23px; border: 1px solid rgba(129,87,255,.2); border-radius: 20px; background: #eee8ff; }
.doc-callout strong { display: block; margin-bottom: 7px; }
.doc-callout p { margin: 0; }
.principle-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 28px; }
.principle-card { padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.principle-card span { font-size: 25px; }
.principle-card h3 { margin: 16px 0 8px; font-size: 17px; }
.principle-card p { margin: 0; font-size: 13px; line-height: 1.7; }
.flow-line { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 28px; }
.flow-step { position: relative; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
.flow-step:not(:last-child)::after { position: absolute; z-index: 2; right: -20px; top: 50%; content: "→"; color: var(--violet); font-size: 18px; font-weight: 950; }
.flow-step b { display: block; margin-bottom: 5px; font-size: 13px; }
.flow-step span { color: var(--ink-soft); font-size: 11px; line-height: 1.6; }

/* Gameplay */
.game-hero { padding-bottom: 95px; }
.game-dashboard { margin: 54px auto 0; max-width: 980px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; text-align: left; }
.game-dashboard > div { padding: 28px; border: 1px solid var(--line); border-radius: 27px; background: rgba(255,255,255,.82); box-shadow: 0 15px 40px rgba(59,37,99,.08); }
.game-dashboard .main-stat { color: #fff; background: var(--ink); }
.main-stat small { color: var(--mint); font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.main-stat strong { display: block; margin: 12px 0 8px; font-size: 37px; }
.main-stat p { margin: 0; color: #bfb4cc; font-size: 13px; }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini-stat { padding: 18px; border-radius: 17px; background: #eee8ff; }
.mini-stat:nth-child(2) { background: #e1fff5; }
.mini-stat:nth-child(3) { background: #fff0f7; }
.mini-stat:nth-child(4) { background: #f4ffd9; }
.mini-stat strong { display: block; font-size: 23px; }
.mini-stat span { color: var(--ink-soft); font-size: 10px; }

.guide-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.guide-card { padding: 25px; border: 1px solid var(--line); border-radius: 25px; background: rgba(255,255,255,.82); }
.guide-card.wide { grid-column: span 2; }
.guide-card.dark { color: #fff; background: var(--ink); }
.guide-card .tag { display: inline-flex; padding: 7px 10px; border-radius: 999px; color: var(--violet-deep); background: #eee8ff; font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.guide-card.dark .tag { color: var(--ink); background: var(--mint); }
.guide-card h3 { margin: 22px 0 10px; font-size: 24px; }
.guide-card p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.75; }
.guide-card.dark p { color: #bcb1c9; }
.guide-card img { float: right; width: 120px; margin: -8px -6px 10px 12px; border-radius: 20px; }

.rarity-row { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.rarity { padding: 20px 15px; text-align: center; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.rarity::before { display: block; width: 30px; height: 30px; margin: 0 auto 13px; content: ""; border-radius: 50%; background: currentColor; box-shadow: inset 0 0 0 8px rgba(255,255,255,.7); }
.rarity:nth-child(1) { color: #8c819a; }
.rarity:nth-child(2) { color: #38b98e; }
.rarity:nth-child(3) { color: #7d59ff; }
.rarity:nth-child(4) { color: #ff69ad; }
.rarity:nth-child(5) { color: #d79518; }
.rarity strong { display: block; color: var(--ink); font-size: 14px; }
.rarity span { color: var(--ink-soft); font-size: 10px; }

/* Portal */
.portal-main { min-height: calc(100vh - 100px); padding: 60px 0 100px; display: grid; place-items: center; }
.portal-shell { width: min(1060px, 100%); display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 38px; background: rgba(255,255,255,.85); box-shadow: var(--shadow); }
.portal-art { position: relative; min-height: 620px; padding: 46px; color: #fff; background: radial-gradient(circle at 75% 20%,rgba(255,105,173,.35),transparent 32%), linear-gradient(145deg,#1b1230,#3b226f); overflow: hidden; }
.portal-art::after { position: absolute; left: -90px; bottom: -170px; width: 460px; height: 460px; content: ""; border: 75px solid rgba(99,230,190,.18); border-radius: 50%; }
.portal-art .eyebrow { color: var(--mint); }
.portal-art h1 { position: relative; z-index: 2; margin: 0; font-size: clamp(46px,6vw,72px); line-height: .95; letter-spacing: -.06em; }
.portal-art p { position: relative; z-index: 2; max-width: 440px; color: #c6bbd2; line-height: 1.75; }
.portal-dog { position: absolute; z-index: 2; width: 330px; right: -18px; bottom: -12px; filter: drop-shadow(0 20px 35px rgba(0,0,0,.28)); transform: rotate(-3deg); }
.portal-card { padding: 58px 52px; display: flex; flex-direction: column; justify-content: center; }
.portal-card .section-kicker { margin-bottom: 12px; }
.portal-card h2 { margin: 0; font-size: 38px; letter-spacing: -.04em; }
.portal-card > p { margin: 15px 0 28px; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.portal-points { margin-bottom: 28px; display: grid; gap: 10px; }
.portal-point { padding: 14px; display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.portal-point span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: #e6fff7; font-size: 12px; font-weight: 900; }
.portal-point p { margin: 0; font-size: 12px; font-weight: 750; }
.portal-card .button { width: 100%; }
.portal-note { margin-top: 16px !important; text-align: center; font-size: 11px !important; }

/* Player manual */
.manual-hero { padding-bottom: 54px; text-align: left; }
.manual-hero .eyebrow { justify-content: flex-start; }
.manual-hero h1 { max-width: 1000px; margin-left: 0; font-size: clamp(52px,7.4vw,92px); }
.manual-hero p { max-width: 760px; margin-left: 0; }
.manual-version { margin-top: 30px; display: flex; gap: 10px; flex-wrap: wrap; }
.manual-version span { padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.78); font-size: 10px; font-weight: 850; }
.manual-layout { display: grid; grid-template-columns: 290px minmax(0,1fr); gap: 58px; align-items: start; }
.manual-toc { position: sticky; top: 105px; max-height: calc(100vh - 125px); padding: 20px; overflow-y: auto; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.88); box-shadow: 0 14px 35px rgba(58,37,99,.08); }
.manual-toc-head { padding: 0 8px 13px; border-bottom: 1px solid var(--line); }
.manual-toc-head strong { display: block; font-size: 11px; letter-spacing: .13em; }
.manual-toc-head small { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 9px; }
.manual-toc nav { padding-top: 9px; }
.manual-toc a { display: flex; gap: 9px; padding: 8px 9px; color: var(--ink-soft); border-radius: 10px; font-size: 12px; line-height: 1.4; }
.manual-toc a span { flex: 0 0 22px; color: var(--violet-deep); font-size: 9px; font-weight: 950; }
.manual-toc a:hover { color: var(--ink); background: #eee8ff; }
.manual-content { min-width: 0; }
.manual-section { padding: 0 0 88px; scroll-margin-top: 115px; border-bottom: 1px solid var(--line); margin-bottom: 82px; }
.manual-section:last-child { border-bottom: 0; }
.chapter-label { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; color: var(--violet-deep); font-size: 10px; font-weight: 950; letter-spacing: .13em; }
.chapter-label span { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border-radius: 11px; background: var(--violet); letter-spacing: 0; }
.manual-section h2 { margin: 0 0 20px; font-size: clamp(35px,4.8vw,58px); line-height: 1; letter-spacing: -.05em; }
.manual-section h3 { margin: 36px 0 13px; font-size: 22px; letter-spacing: -.025em; }
.manual-section h4 { margin: 26px 0 10px; font-size: 16px; }
.manual-section > p, .manual-section li { color: var(--ink-soft); font-size: 14px; line-height: 1.85; }
.manual-section ul, .manual-section ol { padding-left: 22px; }
.manual-section li + li { margin-top: 7px; }
.manual-summary { margin: 28px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.manual-summary > div { padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
.manual-summary strong { display: block; margin-bottom: 5px; font-size: 18px; }
.manual-summary span { color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.notice { margin: 25px 0; padding: 20px 21px; border: 1px solid rgba(129,87,255,.2); border-radius: 19px; background: #eee8ff; }
.notice.warning { border-color: rgba(227,145,25,.25); background: #fff5db; }
.notice.danger { border-color: rgba(225,73,105,.22); background: #fff0f3; }
.notice.success { border-color: rgba(37,169,129,.22); background: #e8fff7; }
.notice strong { display: block; margin-bottom: 6px; font-size: 14px; }
.notice p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.75; }
.manual-table-wrap { margin: 22px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.manual-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 12px; }
.manual-table th { padding: 13px 15px; color: var(--ink-soft); background: #f4f0fb; text-align: left; font-size: 10px; letter-spacing: .04em; }
.manual-table td { padding: 13px 15px; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.55; }
.manual-table tbody tr:hover { background: #fbf9ff; }
.manual-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.manual-steps { margin: 25px 0; counter-reset: manual-step; display: grid; gap: 12px; }
.manual-step { position: relative; min-height: 84px; padding: 18px 18px 18px 66px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.manual-step::before { position: absolute; left: 17px; top: 17px; width: 35px; height: 35px; display: grid; place-items: center; counter-increment: manual-step; content: counter(manual-step); color: #fff; border-radius: 11px; background: linear-gradient(135deg,var(--violet),var(--pink)); font-size: 11px; font-weight: 950; }
.manual-step strong { display: block; margin-bottom: 5px; font-size: 14px; }
.manual-step p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.7; }
.formula { margin: 21px 0; padding: 18px 20px; color: #fff; border-radius: 17px; background: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; line-height: 1.7; }
.formula b { color: var(--mint); }
.rule-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin: 23px 0; }
.rule-card { padding: 20px; border: 1px solid var(--line); border-radius: 19px; background: #fff; }
.rule-card .rule-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #eee8ff; font-weight: 900; }
.rule-card h4 { margin: 16px 0 7px; }
.rule-card p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.7; }
.source-list { margin-top: 24px; display: grid; gap: 8px; }
.source-list a { padding: 12px 14px; display: flex; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: var(--violet-deep); font-size: 12px; font-weight: 800; }
.source-list a span { color: var(--ink-soft); font-weight: 500; }
.exchange-guides { display: grid; gap: 18px; margin: 24px 0 32px; }
.exchange-guide { padding: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.exchange-guide-head { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.exchange-guide-head > div { min-width: 0; flex: 1; }
.exchange-guide-head strong, .exchange-guide-head small { display: block; }
.exchange-guide-head strong { font-size: 17px; }
.exchange-guide-head small { margin-top: 3px; color: var(--ink-soft); font-size: 10px; }
.exchange-badge { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--ink); font-size: 11px; font-weight: 950; }
.exchange-binance .exchange-badge { color: #181a20; background: #f3ba2f; }
.exchange-coinbase .exchange-badge { background: #1652f0; }
.exchange-okx .exchange-badge { font-size: 9px; background: #111; }
.route-status { padding: 7px 9px; border-radius: 999px; font-size: 9px; font-weight: 900; white-space: nowrap; }
.route-status.recommended { color: #08775a; background: #e5fff6; }
.route-status.blocked { color: #a4334c; background: #fff0f3; }
.exchange-visual { padding: 14px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 8px; align-items: center; border-radius: 17px; background: #f4f0fb; }
.ui-shot { min-height: 93px; padding: 11px; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(91,67,133,.13); border-radius: 13px; background: #fff; box-shadow: 0 8px 20px rgba(42,28,71,.06); }
.ui-shot .ui-top { margin-bottom: 10px; color: var(--ink-soft); font-size: 8px; font-weight: 900; letter-spacing: .05em; }
.ui-shot b { font-size: 11px; line-height: 1.35; }
.ui-shot small { margin-top: 4px; color: var(--ink-soft); font-size: 8px; line-height: 1.4; }
.flow-arrow { color: var(--violet-deep); font-size: 15px; font-weight: 900; }
.exchange-guide ol { margin: 19px 0; padding-left: 22px; }
.exchange-guide li { color: var(--ink-soft); font-size: 12px; line-height: 1.75; }
.exchange-guide li + li { margin-top: 6px; }
.exchange-source { padding: 11px 13px; display: flex; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--violet-deep); background: #fbf9ff; font-size: 11px; font-weight: 850; }
.exchange-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.notice.compact { margin: 17px 0; padding: 15px 16px; }
.recharge-split { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 24px 0; }
.recharge-panel { padding: 20px; border: 1px solid var(--line); border-radius: 21px; background: #fff; }
.recharge-part { display: inline-flex; padding: 7px 9px; border-radius: 9px; color: var(--violet-deep); background: #eee8ff; font-size: 9px; font-weight: 950; letter-spacing: .06em; }
.recharge-panel h4 { margin: 14px 0 0; }
.recharge-panel .manual-steps { margin-bottom: 0; }
.recharge-panel .manual-step { padding-left: 59px; }
.recharge-panel .manual-step::before { left: 14px; }

@media (max-width: 980px) {
  .manual-layout { grid-template-columns: 1fr; gap: 35px; }
  .manual-toc { position: static; max-height: none; }
  .manual-toc nav { display: grid; grid-template-columns: repeat(3,1fr); }
  .recharge-split { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .manual-hero { padding-top: 60px; }
  .manual-summary { grid-template-columns: repeat(2,1fr); }
  .manual-toc nav { grid-template-columns: 1fr 1fr; }
  .manual-section { padding-bottom: 65px; margin-bottom: 60px; }
  .rule-grid { grid-template-columns: 1fr; }
  .exchange-guide { padding: 17px; }
  .exchange-visual { grid-template-columns: 1fr; }
  .flow-arrow { transform: rotate(90deg); text-align: center; }
  .exchange-links { grid-template-columns: 1fr; }
  .recharge-panel { padding: 16px; }
}

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view { opacity: 1; transform: none; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes hover { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-16px) rotate(2deg); } }

@media (max-width: 980px) {
  .nav-links { position: fixed; top: 92px; left: 22px; right: 22px; padding: 14px; display: none; flex-direction: column; align-items: stretch; border: 1px solid rgba(255,255,255,.9); border-radius: 22px; background: rgba(255,255,255,.95); box-shadow: var(--shadow); backdrop-filter: blur(20px); }
  .nav-links.open { display: flex; }
  .nav-links a { text-align: center; }
  .menu-toggle { display: block; }
  .nav-cta { display: none; }
  .hero { padding-top: 50px; grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .hero-copy > p { margin-inline: auto; }
  .hero-actions, .micro-proof { justify-content: center; }
  .hero-art { min-height: 560px; }
  .loop-grid { grid-template-columns: repeat(2,1fr); }
  .dog-grid { grid-template-columns: repeat(2,1fr); }
  .feature-split { grid-template-columns: 1fr; }
  .contact-shell { grid-template-columns: 1fr; }
  .contact-intro { min-height: 360px; }
  .feature-art { min-height: 460px; }
  .roadmap { grid-template-columns: repeat(2,1fr); }
  .roadmap::before { display: none; }
  .roadmap-dot { top: 13px; }
  .doc-layout { grid-template-columns: 1fr; }
  .doc-aside { position: static; display: flex; gap: 4px; overflow-x: auto; }
  .doc-aside strong { display: none; }
  .doc-aside a { white-space: nowrap; }
  .guide-grid { grid-template-columns: repeat(2,1fr); }
  .portal-shell { grid-template-columns: 1fr; }
  .portal-art { min-height: 430px; }
  .portal-dog { width: 270px; }
}

@media (max-width: 680px) {
  .site-header { padding: 10px 12px; }
  .nav-shell { min-height: 60px; border-radius: 18px; }
  .brand-mark { width: 34px; height: 34px; }
  .page-wrap { width: min(100% - 28px, var(--max)); }
  .hero { min-height: auto; padding: 56px 0 66px; }
  .display-title { font-size: clamp(51px,16vw,72px); }
  .hero-copy > p { font-size: 15px; line-height: 1.75; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .micro-proof { gap: 19px; }
  .micro-proof strong { font-size: 18px; }
  .hero-art { min-height: 445px; }
  .hero-card { width: min(335px,86vw); border-radius: 30px; }
  .hero-card img { border-radius: 21px; }
  .hero-orbit { width: 380px; }
  .float-chip { font-size: 10px; }
  .float-chip-one { top: 6%; left: 0; }
  .float-chip-two { right: 0; bottom: 8%; }
  .section { padding: 82px 0; }
  .section-tight { padding: 58px 0; }
  .section-heading.split { grid-template-columns: 1fr; gap: 16px; }
  .loop-grid, .dog-grid, .roadmap, .guide-grid, .game-dashboard, .principle-grid, .flow-line { grid-template-columns: 1fr; }
  .loop-card { min-height: auto; }
  .loop-icon { margin: 30px 0 16px; }
  .collection-shell { padding: 23px 15px; border-radius: 30px; }
  .collection-head { align-items: start; flex-direction: column; }
  .dog-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .feature-art { min-height: 360px; }
  .feature-art img { width: 88%; }
  .contact-shell { padding: 10px; border-radius: 25px; }
  .contact-intro { min-height: 0; padding: 27px 22px; border-radius: 20px; }
  .contact-intro h3 { margin-top: 30px; }
  .contact-safety { margin-top: 25px; }
  .contact-channel-group-grid { grid-template-columns: 1fr; }
  .contact-card { min-height: 0; padding: 20px 18px; }
  .contact-card-action { grid-column: 1 / -1; width: 100%; }
  .roadmap-card { padding-top: 52px; }
  .roadmap-content { min-height: 0; }
  .cta-panel { padding: 44px 25px; border-radius: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 38px 22px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
  .inner-hero { padding: 70px 0 50px; }
  .inner-hero h1 { font-size: clamp(48px,15vw,76px); }
  .doc-section { padding-bottom: 60px; }
  .flow-step:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -22px; transform: rotate(90deg); }
  .guide-card.wide { grid-column: auto; }
  .rarity-row { grid-template-columns: repeat(2,1fr); }
  .portal-main { padding: 30px 0 70px; }
  .portal-shell { border-radius: 28px; }
  .portal-art { min-height: 390px; padding: 32px 25px; }
  .portal-dog { width: 235px; right: -28px; }
  .portal-card { padding: 38px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}