@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

.dp-home {
  --void: #080b17; --panel: #101629; --panel2: #161c32; --ice: #dcebf3;
  --dim: #a2afc2; --line: rgba(153,205,225,.2); --cyan: #78e9de;
  --orange: #ff975e; --violet: #b59df4;
  background: var(--void); color: var(--ice); font-family: 'DM Sans', sans-serif;
  line-height: 1.5; overflow: hidden; isolation: isolate;
}
.dp-home *, .dp-home *::before, .dp-home *::after { box-sizing: border-box; }
.dp-home h1, .dp-home h2, .dp-home h3, .dp-home p, .dp-home figure { margin: 0; }
.dp-home img { display: block; max-width: 100%; }
.dp-home a { color: inherit; text-decoration: none; }
.dp-home button { font: inherit; }
.dp-home :is(a,button):focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.dp-shell { width: min(1380px, calc(100% - 80px)); margin-inline: auto; }
.dp-kicker { font: 700 11px/1.3 'Space Mono', monospace; letter-spacing: .19em; text-transform: uppercase; color: var(--cyan); }
.dp-heading { font: 800 clamp(48px,7.2vw,108px)/.88 'Barlow Condensed',sans-serif; letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance; }
.dp-heading em { color: var(--orange); font-style: normal; }
.dp-body { max-width: 540px; color: var(--dim); font-size: clamp(15px,1.2vw,18px); line-height: 1.7; }
.dp-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 54px; padding: 14px 22px; border: 1px solid var(--cyan); background: var(--cyan); color: #08131d !important; font: 700 12px/1.2 'Space Mono',monospace !important; letter-spacing: .045em; text-transform: uppercase; cursor: pointer; transition: transform .2s,background .2s,color .2s; white-space: normal; text-align: left; }
.dp-btn:hover { transform: translateY(-3px); background: #aff7ec; }
.dp-btn--outline { background: rgba(8,11,23,.6); color: var(--ice) !important; border-color: rgba(220,235,243,.5); }
.dp-btn--outline:hover { background: var(--ice); color: var(--void) !important; }
.dp-btn--small { min-height: 45px; padding: 11px 16px; font-size: 10px !important; gap: 10px; }
.dp-btn span:last-child { font-size: 18px; line-height: .8; }
.dp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.dp-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 4; padding: 24px 0; }
.dp-topbar .dp-shell { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dp-logo { display: flex; align-items: center; gap: 9px; font: 800 23px/1 'Barlow Condensed',sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.dp-logo img { width: 38px; height: 38px; object-fit: contain; }
.dp-top-link { font: 700 10px/1.2 'Space Mono',monospace; letter-spacing: .13em; border-bottom: 1px solid currentColor; padding-bottom: 5px; text-transform: uppercase; }
.dp-hero { min-height: min(850px, 100dvh); min-height: clamp(640px, 100dvh, 900px); position: relative; display: flex; align-items: center; padding: 110px 0 80px; background: #0b1224; }
.dp-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: .78; }
.dp-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg,rgba(6,10,23,.95) 0%,rgba(6,10,23,.83) 32%,rgba(6,10,23,.18) 75%),linear-gradient(0deg,#080b17 0%,transparent 28%,rgba(6,10,23,.3) 100%); }
.dp-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; opacity: .15; pointer-events: none; background-image: linear-gradient(rgba(120,233,222,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(120,233,222,.25) 1px,transparent 1px); background-size: 84px 84px; mask-image: linear-gradient(0deg,#000,transparent 68%); }
.dp-hero-content { position: relative; z-index: 2; }
.dp-hero-content > * { animation: dp-rise .75s both; }
.dp-hero-content > :nth-child(2) { animation-delay: .09s; }.dp-hero-content > :nth-child(3) { animation-delay: .16s; }.dp-hero-content > :nth-child(4) { animation-delay: .22s; }.dp-hero-content > :nth-child(5) { animation-delay: .3s; }
@keyframes dp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.dp-hero h1 { margin-top: 18px; max-width: 840px; font: 800 clamp(76px,11vw,166px)/.78 'Barlow Condensed',sans-serif; letter-spacing: -.032em; text-transform: uppercase; }
.dp-hero h1 span { display: block; color: var(--cyan); }
.dp-hero .dp-sub { max-width: 690px; margin-top: 25px; font: 700 clamp(26px,3vw,45px)/.98 'Barlow Condensed',sans-serif; text-transform: uppercase; letter-spacing: .01em; }
.dp-hero .dp-body { margin-top: 20px; color: #e0e6ec; max-width: 545px; }
.dp-hero-note { margin-top: 26px; display: flex; align-items: center; gap: 10px; color: var(--cyan); font: 700 10px/1.3 'Space Mono',monospace; letter-spacing: .12em; text-transform: uppercase; }
.dp-hero-note::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.dp-hero-index { position: absolute; bottom: 33px; right: 40px; z-index: 2; color: rgba(220,235,243,.72); font: 11px 'Space Mono',monospace; letter-spacing: .1em; text-transform: uppercase; }
.dp-section { padding: clamp(80px,10vw,150px) 0; position: relative; }
.dp-section-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 36px; }
.dp-section-head .dp-body { max-width: 390px; }
.dp-section-head .dp-heading { margin-top: 16px; }
.dp-explore { background: #080b17; }
.dp-experience-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 12px; }
.dp-exp { grid-column: span 3; min-height: 330px; background: var(--panel); border: 1px solid var(--line); position: relative; padding: 24px; display: flex; flex-direction: column; justify-content: end; overflow: hidden; }
.dp-exp:nth-child(1), .dp-exp:nth-child(2) { grid-column: span 6; min-height: 425px; }
.dp-exp::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(8,11,23,.99) 0%,rgba(8,11,23,.65) 35%,transparent 85%); pointer-events: none; }
.dp-exp-img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: center 32%; opacity: .85; transition: transform .5s; }
.dp-exp:hover .dp-exp-img { transform: scale(1.045); }
.dp-exp:nth-child(3) .dp-exp-img { object-position: center 29%; }
.dp-exp:nth-child(5) .dp-exp-img { object-position: center 25%; }
.dp-exp-content { position: relative; z-index: 1; }
.dp-exp .dp-kicker { color: var(--orange); }
.dp-exp h3 { font: 800 clamp(34px,3.5vw,57px)/.9 'Barlow Condensed',sans-serif; text-transform: uppercase; margin: 10px 0; }
.dp-exp p { color: #bfcbd8; font-size: 14px; line-height: 1.5; max-width: 390px; }
.dp-text-link { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; margin-top: 18px; color: var(--cyan) !important; font: 700 10px/1.3 'Space Mono',monospace !important; letter-spacing: .07em; text-transform: uppercase; background: none; border: 0; padding: 8px 0; cursor: pointer; text-align: left; }
.dp-text-link:hover { color: #e5fff9 !important; }
.dp-card-links { display: flex; flex-direction: column; align-items: flex-start; margin-top: 18px; }
.dp-card-links .dp-text-link { margin-top: 0; }
.dp-colony { background: linear-gradient(145deg,#111b2e 0%,#08131e 64%,#10122a 100%); border-block: 1px solid var(--line); }
.dp-colony-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0,1.15fr); gap: clamp(35px,6vw,95px); align-items: center; }
.dp-colony .dp-heading { margin: 16px 0 20px; }
.dp-colony-lead { font: 700 clamp(24px,2.4vw,35px)/1 'Barlow Condensed',sans-serif; text-transform: uppercase; color: var(--orange); margin-bottom: 16px !important; }
.dp-loop { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 18px; }
.dp-loop span { display: inline-flex; align-items: center; gap: 8px; font: 700 10px/1.3 'Space Mono',monospace; color: var(--cyan); text-transform: uppercase; border: 1px solid var(--line); background: #111d2b; padding: 9px 10px; }
.dp-loop span:not(:last-child)::after { content: '→'; color: var(--orange); }
.dp-fine { color: var(--dim); font-size: 13px; line-height: 1.6; max-width: 540px; }
.dp-colony-scene { position: relative; min-height: 580px; background: radial-gradient(circle at 55% 58%,rgba(65,140,134,.26),transparent 55%),linear-gradient(155deg,#121e2b,#080e19); border: 1px solid var(--line); overflow: hidden; }
.dp-colony-scene::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(30deg,transparent 47%,rgba(100,225,206,.10) 48%,rgba(100,225,206,.10) 50%,transparent 51%),linear-gradient(-30deg,transparent 47%,rgba(100,225,206,.1) 48%,rgba(100,225,206,.1) 50%,transparent 51%); background-size: 92px 53px; opacity: .55; transform: scale(1.4); }
.dp-scene-item { position: absolute; object-fit: contain; filter: drop-shadow(0 16px 24px rgba(0,0,0,.45)); }
.dp-scene-forest { width: 49%; left: -4%; bottom: -5%; }.dp-scene-crystal { width: 48%; right: -2%; bottom: -8%; }.dp-scene-house { width: 36%; left: 11%; top: 17%; }.dp-scene-gate { width: 37%; right: 8%; top: 7%; }.dp-scene-core { width: 31%; right: 32%; bottom: 16%; }
.dp-scene-label { position: absolute; z-index: 1; left: 20px; bottom: 20px; padding: 10px 12px; background: rgba(8,11,23,.8); border: 1px solid var(--line); font: 10px 'Space Mono',monospace; color: var(--cyan); text-transform: uppercase; }
.dp-nft { background: #100e20; }
.dp-nft-layout { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(40px,6vw,90px); }
.dp-nft .dp-heading { margin: 16px 0 26px; }
.dp-nft-gallery { display: grid; grid-template-columns: repeat(3,1fr); align-items: center; gap: 10px; }
.dp-nft-gallery figure { overflow: hidden; border: 1px solid rgba(181,157,244,.28); background: #202038; transform: translateY(var(--offset,0px)); }
.dp-nft-gallery figure:nth-child(2) { --offset: -35px; }.dp-nft-gallery figure:nth-child(3) { --offset: 18px; }
.dp-nft-gallery img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.dp-nft-gallery figcaption { padding: 12px; font: 700 10px/1.4 'Space Mono',monospace; color: var(--violet); text-transform: uppercase; letter-spacing: .07em; }
.dp-connect { background: #0c1323; }
.dp-connect .dp-heading { margin: 16px 0 20px; }
.dp-connect-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; position: relative; margin-top: 48px; padding-top: 70px; }
.dp-connect-grid::before { content: 'DOGEVERSE'; position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 12px 24px; border: 1px solid var(--cyan); background: #10192c; color: var(--cyan); font: 700 14px 'Space Mono',monospace; }
.dp-connect-grid::after { content: ''; position: absolute; top: 46px; left: 12.5%; width: 75%; height: 16px; border-bottom: 1px solid var(--cyan); background: linear-gradient(var(--cyan),var(--cyan)) center / 1px 100% no-repeat; }
.dp-node { border: 1px solid var(--line); }
.dp-node::before { content: ''; position: absolute; bottom: 100%; height: 9px; width: 1px; left: 50%; background: var(--cyan); }
.dp-node { padding: 30px 24px; min-height: 185px; background: #10192c; position: relative; }
.dp-node::after { content: '↗'; position: absolute; right: 20px; top: 20px; color: var(--cyan); font: 22px 'Space Mono',monospace; }
.dp-node b { display: block; color: var(--orange); font: 700 10px 'Space Mono',monospace; margin-bottom: 22px; }
.dp-node h3 { font: 800 27px/1 'Barlow Condensed',sans-serif; text-transform: uppercase; }
.dp-node p { margin-top: 9px; color: var(--dim); font-size: 13px; line-height: 1.5; }
.dp-connect-note { margin-top: 18px; color: var(--cyan); font: 11px/1.6 'Space Mono',monospace; }
.dp-story { min-height: 560px; position: relative; display: flex; align-items: center; background: #11182a; overflow: hidden; }
.dp-story > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: .63; }
.dp-story::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg,#080b17 0%,rgba(8,11,23,.82) 38%,transparent 100%); }
.dp-story .dp-shell { position: relative; z-index: 2; padding-block: 100px; }
.dp-story .dp-heading { margin: 16px 0 24px; max-width: 650px; }
.dp-play { background: #0e1021; }
.dp-play .dp-heading { margin: 16px 0 36px; }
.dp-play-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }
.dp-play-card { padding: 30px; min-height: 280px; border: 1px solid var(--line); background: #171c30; display: flex; flex-direction: column; align-items: start; }
.dp-play-card:first-child { background: linear-gradient(0deg,rgba(13,16,31,.91),rgba(13,16,31,.35)),url('/static/home-art/shiba.webp') center/cover; }
.dp-play-card .dp-kicker { color: var(--orange); }.dp-play-card h3 { font: 800 46px/.95 'Barlow Condensed',sans-serif; text-transform: uppercase; margin: auto 0 13px; }.dp-play-card p { color: #c5cedb; font-size: 14px; max-width: 290px; }
.dp-utility { background: #0d1425; }
.dp-utility .dp-heading { margin: 16px 0 25px; }
.dp-utility-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 40px 0 30px; }
.dp-utility-card { border-top: 2px solid var(--cyan); background: #151e30; padding: 24px; min-height: 204px; }
.dp-utility-card:nth-child(2) { border-color: var(--orange); }.dp-utility-card:nth-child(3) { border-color: var(--violet); }.dp-utility-card:nth-child(4) { border-color: #f7ce80; }
.dp-utility-card small { display: block; color: var(--cyan); font: 700 11px 'Space Mono',monospace; margin-bottom: 28px; }.dp-utility-card h3 { font: 800 30px/1 'Barlow Condensed',sans-serif; text-transform: uppercase; margin-bottom: 10px; }.dp-utility-card p { color: var(--dim); font-size: 13px; line-height: 1.6; }
.dp-tech { background: #0a0c18; border-top: 1px solid var(--line); }
.dp-tech .dp-heading { margin: 16px 0 24px; }
.dp-tech-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.dp-tech-links { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.dp-tech-links :is(a,button) { width: 100%; display: flex; justify-content: space-between; align-items: center; background: #131a2a; border: 0; color: var(--ice); padding: 16px 18px; text-align: left; cursor: pointer; font: 700 12px 'Space Mono',monospace; text-decoration: none; }
.dp-tech-links :is(a,button):hover { background: #202b3e; }.dp-tech-links span { color: var(--cyan); }
.dp-footer { border-top: 1px solid var(--line); padding: 36px 0; background: #080b17; }
.dp-footer p { font-size: 11px; color: var(--dim); line-height: 1.8; max-width: 1000px; }
.dp-footer-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; }
.dp-footer-links a { color: var(--cyan); font: 10px 'Space Mono',monospace; text-decoration: underline; text-underline-offset: 4px; }
.dp-home--app .dp-hero { min-height: 680px; }
.dp-home--app .dp-hero h1 { font-size: clamp(68px,10vw,146px); }
@media (max-width: 980px) {
  .dp-shell { width: min(100% - 48px, 750px); }
  .dp-exp:nth-child(n) { grid-column: span 6; min-height: 360px; }
  .dp-exp:last-child { grid-column: span 12; min-height: 310px; }
  .dp-colony-layout, .dp-nft-layout, .dp-tech-layout { grid-template-columns: 1fr; }
  .dp-colony-scene { min-height: 540px; }
  .dp-nft-gallery { margin-top: 30px; }
  .dp-connect-grid, .dp-utility-grid { grid-template-columns: repeat(2,1fr); }
  .dp-connect-grid::after { left: 25%; width: 50%; }
  .dp-node:nth-child(n+3)::before { height: 25px; }
  .dp-play-grid { grid-template-columns: 1fr 1fr; }.dp-play-card:first-child { grid-column: span 2; }
}
@media (max-width: 600px) {
  .dp-shell { width: calc(100% - 36px); }
  .dp-section { padding: 72px 0; }
  .dp-section-head { display: block; }.dp-section-head .dp-body { margin-top: 20px; }
  .dp-hero { min-height: 760px; min-height: 100dvh; padding: 100px 0 68px; align-items: end; }
  .dp-hero-image { object-position: 52% center; opacity: .8; }
  .dp-hero::before { background: linear-gradient(0deg,#080b17 0%,rgba(8,11,23,.95) 10%,rgba(8,11,23,.82) 42%,rgba(8,11,23,.2) 100%); }
  .dp-hero h1, .dp-home--app .dp-hero h1 { font-size: clamp(68px,19vw,110px); }
  .dp-hero .dp-sub { font-size: clamp(25px,7vw,38px); margin-top: 18px; }
  .dp-hero .dp-body { margin-top: 14px; font-size: 14px; line-height: 1.55; }
  .dp-hero-index { display: none; }.dp-hero-note { font-size: 9px; margin-top: 17px; }
  .dp-actions { margin-top: 20px; }.dp-hero .dp-btn { flex: 1 1 180px; }
  .dp-exp:nth-child(n) { grid-column: span 12; min-height: 300px; }
  .dp-exp:nth-child(1),.dp-exp:nth-child(2) { min-height: 330px; }
  .dp-colony-scene { min-height: 380px; }
  .dp-scene-label { font-size: 8px; left: 10px; bottom: 10px; }
  .dp-nft-gallery { gap: 5px; }.dp-nft-gallery figure:nth-child(2) { --offset: -15px; }.dp-nft-gallery figure:nth-child(3) { --offset: 10px; }.dp-nft-gallery figcaption { font-size: 8px; padding: 8px 5px; }
  .dp-node { min-height: 170px; padding: 20px 13px; }.dp-node h3 { font-size: 23px; }.dp-node p { font-size: 12px; }
  .dp-utility-grid { gap: 8px; }.dp-utility-card { padding: 18px 13px; min-height: 220px; }.dp-utility-card h3 { font-size: 25px; }.dp-utility-card p { font-size: 12px; }
  .dp-play-grid { grid-template-columns: 1fr; }.dp-play-card:first-child { grid-column: span 1; }.dp-play-card { min-height: 220px; }
  .dp-story { min-height: 550px; }.dp-story::before { background: linear-gradient(0deg,#080b17 0%,rgba(8,11,23,.9) 34%,rgba(8,11,23,.25) 100%); }.dp-story .dp-shell { align-self: end; padding-block: 80px; }
}
@media (max-width: 390px) {
  .dp-hero h1,.dp-home--app .dp-hero h1 { font-size: 18vw; }
  .dp-hero .dp-btn { flex-basis: 100%; min-height: 46px; }
  .dp-hero { min-height: 820px; }
  .dp-heading { font-size: 50px; }
  .dp-connect-grid { grid-template-columns: 1fr 1fr; }.dp-node h3 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-home *, .dp-home *::before, .dp-home *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}