/* DESIGN.md is the only token source. Colors/type/spacing/radii use tokens.css.
   Percentages, aspect ratios and transforms describe responsive/media geometry.
   Zero resets defaults; z-index values express stacking, not design dimensions. */
*{box-sizing:border-box}html{scroll-behavior:smooth}body,h1,h2,h3,p,figure{margin:0}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}img,svg,video{display:block;max-width:100%}[hidden]{display:none!important}
body{font-family:var(--font-aeonik-pro);font-size:var(--text-body-lg);font-weight:var(--font-weight-medium);line-height:var(--leading-body-lg);letter-spacing:var(--tracking-body-lg);color:var(--color-carbon);background:var(--color-paper-white)}/* body-lg15/500/1.39, Carbon/Paper. */
.page-width{width:100%;max-width:var(--page-max-width);margin-inline:auto;padding-inline:var(--spacing-40)}/* DON'T 6: page max1440; spacing40. */
.symbol-library{position:absolute;width:0;height:0;overflow:hidden}.no-fill{fill:none}.paint-carbon{fill:var(--color-carbon)}.paint-white{fill:var(--color-paper-white)}.paint-blue{fill:var(--color-electric-blue)}.paint-mint{fill:var(--color-mint-pop)}.paint-lavender{fill:var(--color-lavender)}.paint-yellow{fill:var(--color-sunburst)}.paint-violet{fill:var(--color-voltage-violet)}.paint-ember{fill:var(--color-ember)}/* DO 2: six-color sticker palette. */
.line-black{stroke:var(--color-carbon);stroke-width:var(--border-width);vector-effect:non-scaling-stroke}.check-stroke{fill:none;stroke:var(--color-carbon);stroke-width:var(--spacing-12);stroke-linecap:round;stroke-linejoin:round}/* DO 3: Carbon1; decorative glyph stroke spacing12. */
.pill-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-8);padding:var(--spacing-12) var(--spacing-20);border:var(--border-standard);border-radius:var(--radius-buttons);background:var(--color-paper-white);color:var(--color-carbon);font-family:var(--font-aeonik-pro);font-size:var(--text-button);font-weight:var(--font-weight-bold);line-height:var(--leading-body-lg);letter-spacing:var(--tracking-button);white-space:nowrap;transition:background-color 160ms ease,color 160ms ease}/* DO 3/4/6: Carbon1, radius1600, Aeonik14/700/.030; spacing8/12/20. */
.pill-button:hover{background:var(--color-soft-mist)}.button-primary{background:var(--color-carbon);color:var(--color-paper-white)}.button-primary:hover{background:var(--color-paper-white);color:var(--color-carbon)}/* DON'T 3: black/white CTAs. */
:focus-visible{outline:var(--border-width) solid var(--color-carbon);outline-offset:var(--spacing-4)}/* Carbon1 + spacing4. */
.eyebrow,.text-link{font-size:var(--text-caption);font-weight:var(--font-weight-bold);letter-spacing:var(--tracking-label);line-height:var(--leading-caption)}.text-link{display:inline-block;margin-top:var(--spacing-16);text-decoration:underline;text-underline-offset:var(--spacing-4)}/* DO 6: Aeonik12/700/.032; spacing16/4. */
.skip-link{position:fixed;left:var(--spacing-16);top:var(--spacing-16);z-index:100;transform:translateY(-200%)}.skip-link:focus{transform:none}/* spacing16; accessibility positioning. */
.logo,.plus-button,.round-action{width:var(--spacing-48);height:var(--spacing-48);padding:0;flex-shrink:0}.brand-symbol{width:var(--spacing-24);height:var(--spacing-24)}.plus-button,.round-action{font-size:var(--text-subheading)}/* Logo/Plus: spacing48/24, subheading24; DO 3/4/6 inherited. */
.site-header{position:fixed;z-index:20;left:var(--spacing-32);right:var(--spacing-32);top:var(--spacing-48);display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}.site-header a,.site-header button{pointer-events:auto}.header-cluster{display:flex;flex-direction:column;align-items:flex-end;gap:var(--spacing-4)}.header-actions{display:flex;gap:var(--spacing-4)}.header-actions .pill-button{font-size:var(--text-caption)}.desktop-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-4)}.desktop-nav .pill-button{font-size:var(--text-caption);padding:var(--spacing-8) var(--spacing-16);letter-spacing:var(--tracking-label)}/* DO 6: Aeonik12/700/.032; fixed nav spacing32/48/4/8/16. */
.marquee{display:block;overflow:hidden;background:var(--color-carbon);color:var(--color-paper-white);font-size:var(--text-caption);font-weight:var(--font-weight-bold);letter-spacing:var(--tracking-label);line-height:var(--leading-caption)}.marquee-track{display:flex;width:max-content;animation:marquee-slide 96s linear infinite}.marquee-track span{flex-shrink:0}.marquee:hover .marquee-track{animation-play-state:paused}@keyframes marquee-slide{to{transform:translateX(-50%)}}/* User request: each 3-phrase unit now passes in 32s instead of 48s (1.5× faster). Three units per group give a seamless 96s loop. Motion timing only; DO 6 typography unchanged. */
.poster{position:relative;isolation:isolate;overflow:hidden}.hero{background:var(--surface-sky-wash)}.hero-intro{position:relative;padding-top:var(--spacing-180)}.hero-wordmark{position:relative;z-index:2;width:80%;padding-top:var(--spacing-24)}/* DO 7: Sky; spacing180/24, responsive wordmark geometry80%. */
.display-fit{position:relative;font-family:var(--font-lateral);font-size:var(--text-display-lg);font-weight:var(--font-weight-extrabold);line-height:var(--leading-display-lg);letter-spacing:normal;font-synthesis:none}.display-word{display:inline-block;white-space:nowrap;transform-origin:top left;transform:scale(var(--fit-scale,1))}.section-display{font-size:var(--text-display);line-height:var(--leading-display)}/* DO 1 / DON'T 2: Lateral640/800/.75 and200/.8; fit is responsive geometry. */
.ribbon{position:absolute;width:100%;pointer-events:none;object-fit:contain;z-index:-1}.hero-ribbon{width:135%;max-width:none;left:-17.5%;top:var(--spacing-224);height:auto}/* DO 5: original static 3D ribbon; spacing224. Intrinsic image ratio and percentage collage placement preserve the ribbon shape. No CSS gradient. */
.sticker-art{position:relative;pointer-events:none;flex-shrink:0;width:var(--spacing-128);height:var(--spacing-128)}.sticker-art>svg,.lottie-host{width:100%;height:100%}.sticker-art[data-art-ready]>svg{display:none}.lottie-host{position:absolute;inset:0}.hero-intro>.sticker-art{position:absolute;z-index:3}.hero-rocket{left:12%;top:var(--spacing-180);transform:rotate(-15deg)}.hero-coin{right:24%;top:var(--spacing-224);transform:rotate(12deg)}.hero-wallet{right:12%;bottom:var(--spacing-180);transform:rotate(12deg)}.hero-check{left:10%;bottom:var(--spacing-180);transform:rotate(-18deg)}/* DO 2/5: sticker128; spacing180/224; collage geometry. */
.hero-copy{position:relative;z-index:4;text-align:center;padding:var(--spacing-24) var(--spacing-24) var(--spacing-48)}.tagline{font-size:var(--text-heading);line-height:var(--leading-heading);font-weight:var(--font-weight-medium)}.button-row{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--spacing-8);margin-top:var(--spacing-32)}.chrome-icon{width:var(--spacing-24);height:var(--spacing-24)}/* spacing24/48/8/32; heading64/1/500; chrome24. */
.device-showcase{position:relative;z-index:2;padding-top:var(--spacing-48);padding-bottom:var(--spacing-80)}.device-stage{overflow:hidden}.phone-video{display:block;width:140%;max-width:none;height:auto;aspect-ratio:16/9;margin-left:-20%;object-fit:contain}.device-caption{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-24);margin-top:var(--spacing-24)}.video-message{margin-top:var(--spacing-12)}/* User-requested video; spacing48/80/24/12; intrinsic16:9, source crop140%/-20%. */
.qr-collage{position:relative;z-index:2;padding-block:var(--spacing-80) var(--spacing-128)}.qr-line{position:relative;width:90%;margin-inline:auto}.qr-middle{display:flex;align-items:center;justify-content:center;gap:var(--spacing-24);margin-block:var(--spacing-12)}.qr-middle h2{width:35%;flex-shrink:0}.qr-card{display:flex;align-items:center;gap:var(--spacing-24);background:var(--color-voltage-violet);color:var(--color-paper-white);padding:var(--spacing-12) var(--spacing-24) var(--spacing-12) var(--spacing-12);border:var(--border-standard);border-radius:var(--radius-cards);font-size:var(--text-caption);font-weight:var(--font-weight-bold);letter-spacing:var(--tracking-label)}.qr-card img{width:var(--spacing-128);height:var(--spacing-128);border:var(--border-standard);border-radius:var(--radius-wallet-icon)}.qr-coin{position:absolute;right:10%;top:calc(-1 * var(--spacing-60));transform:rotate(12deg)}.qr-wallet{position:absolute;right:0;bottom:calc(-1 * var(--spacing-32));transform:rotate(12deg)}/* QR component explicitly Violet/Paper, Carbon1, card20, inner16; spacing80/128/24/12/60/32. DO 3/4/5/6. */
.section-pad{overflow:hidden;padding-block:var(--spacing-80)}.section-heading{text-align:center;margin-bottom:var(--spacing-80)}.support-heading{font-size:var(--text-heading);font-weight:var(--font-weight-medium);line-height:var(--leading-heading);margin-top:var(--spacing-24)}/* spacing80/24; Aeonik64/500/1. */
.defi-section{background:var(--surface-paper-white)}.defi-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--spacing-48);align-items:center}.defi-row+.defi-row{margin-top:var(--spacing-128)}.defi-row:nth-of-type(even) .defi-art{order:2}.defi-art{width:100%;border:var(--border-standard);border-radius:var(--radius-cards-elevated)}.defi-copy{position:relative;min-width:0;padding-top:var(--spacing-32)}.defi-copy h3{margin-top:var(--spacing-48)}.defi-copy p{margin-top:var(--spacing-24)}.defi-copy .pill-button{margin-top:var(--spacing-24)}.defi-sticker{position:absolute;right:0;top:calc(-1 * var(--spacing-40));transform:rotate(12deg)}/* DO 5/7: White, original illustrations and sticker clusters. Carbon1/card40; spacing48/128/32/24/40. */
.features-section{background:var(--surface-concrete-gray)}.feature-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:var(--spacing-24)}.feature-track::-webkit-scrollbar{display:none}.feature-card{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--spacing-24);align-items:center;padding:var(--spacing-48);border:var(--border-standard);border-radius:var(--radius-cards-elevated)}.feature-art{grid-row:1/4;width:100%;height:var(--spacing-224)}.feature-card h3{font-size:var(--text-heading-sm);line-height:var(--leading-heading-sm)}.feature-paper{background:var(--color-paper-white)}.feature-lavender{background:var(--color-lavender)}.feature-sky{background:var(--color-sky-wash)}.slider-controls{display:flex;align-items:center;justify-content:center;gap:var(--spacing-24);margin-top:var(--spacing-24)}.slider-dots{display:flex;gap:var(--spacing-8)}.slider-dot{width:var(--spacing-16);height:var(--spacing-16);padding:0}.slider-dot[aria-current=true]{background:var(--color-carbon)}/* DO 3/4/6/7: Gray; card40/Carbon1, pill1600, heading30; spacing24/48/224/8/16. */
.download-band{overflow:hidden;background:var(--color-paper-white);padding-block:var(--spacing-48)}.download-band>div{display:flex;align-items:center;gap:var(--spacing-48);width:max-content;transform:rotate(-4deg)}.download-word{border:var(--border-standard);border-radius:var(--radius-pills);padding:var(--spacing-16) var(--spacing-32);font-family:var(--font-lateral);font-size:var(--text-display);font-weight:var(--font-weight-extrabold);line-height:var(--leading-display);white-space:nowrap}.band-sticker{width:var(--spacing-180);height:var(--spacing-128)}/* DO 3/4: Carbon1/pill1600, spacing16/32; DO 1/5: Lateral200/800/.8 paired with wallet180×128; spacing48; flat Paper. */
.platforms{background:var(--surface-sky-wash)}.platform-tabs{display:flex;justify-content:center;gap:var(--spacing-8);margin-bottom:var(--spacing-48)}.platform-tab[aria-selected=true]{background:var(--color-carbon);color:var(--color-paper-white)}.platform-panel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:var(--spacing-80)}.platform-media img{width:100%;max-height:var(--text-display-lg);object-fit:contain}.platform-copy h3{font-size:var(--text-heading-sm);font-weight:var(--font-weight-bold);line-height:var(--leading-heading-sm)}.platform-copy p{margin-block:var(--spacing-24)}/* DO 7 Sky; DO 3/4/6 inherited tabs, Carbon/Paper selected; spacing8/48/80/24; heading30, media cap640. */
@media(max-width:1280px){
.hero-intro>.sticker-art{width:var(--spacing-80);height:var(--spacing-80)}.tagline,.support-heading{font-size:var(--text-heading-sm);line-height:var(--leading-heading-sm)}.defi-row{gap:var(--spacing-32)}.defi-sticker{width:var(--spacing-80);height:var(--spacing-80)}.platform-panel{gap:var(--spacing-40)}/* source breakpoint1280; spacing80/32/40; heading30/1.1. */
}
@media(max-width:640px){
.page-width{padding-inline:var(--spacing-20)}.site-header{top:var(--spacing-40);left:var(--spacing-20);right:var(--spacing-20)}.header-actions .pill-button{padding-inline:var(--spacing-12)}.hero-intro{padding-top:var(--spacing-180)}.hero-wordmark{width:100%;padding-top:var(--spacing-40)}.hero-intro>.sticker-art{width:var(--spacing-60);height:var(--spacing-60)}.hero-rocket{left:var(--spacing-20);top:var(--spacing-180)}.hero-coin{right:var(--spacing-20);top:var(--spacing-180)}.hero-wallet{right:var(--spacing-12);bottom:var(--spacing-180)}.hero-check{left:var(--spacing-12);bottom:var(--spacing-180)}.hero-copy{padding-inline:var(--spacing-20);padding-top:var(--spacing-40)}.button-row{gap:var(--spacing-8);margin-top:var(--spacing-24)}.button-row .pill-button{font-size:var(--text-caption);padding-inline:var(--spacing-12)}.chrome-icon{width:var(--spacing-20);height:var(--spacing-20)}/* spacing20/40/12/180/60/8/24, caption12; source breakpoint640. */
.hero-ribbon{width:180%;left:-40%;top:var(--spacing-224)}.device-showcase{padding-top:var(--spacing-24);padding-bottom:var(--spacing-48)}.phone-video{width:180%;margin-left:-40%}.device-caption{flex-wrap:wrap;gap:var(--spacing-12)}.device-caption .pill-button{font-size:var(--text-caption)}/* source crop180%/-40%; spacing224/24/48/12; caption12. */
.qr-collage{padding-block:var(--spacing-48) var(--spacing-80)}.qr-line{width:100%}.qr-middle{gap:var(--spacing-12)}.qr-check{width:var(--spacing-48);height:var(--spacing-60)}.qr-middle h2{width:30%}.qr-card{gap:var(--spacing-8);padding:var(--spacing-8);flex-direction:column}.qr-card img{width:var(--spacing-80);height:var(--spacing-80)}.qr-card span{font-size:var(--text-caption)}.qr-coin,.qr-wallet{width:var(--spacing-60);height:var(--spacing-60)}.qr-coin{top:calc(-1 * var(--spacing-32))}/* spacing48/80/12/60/8/32, caption12; card20/pill1600 inherited. */
.section-pad{overflow:hidden;padding-block:var(--spacing-48)}.section-heading{margin-bottom:var(--spacing-48)}.defi-row{grid-template-columns:1fr;gap:var(--spacing-24)}.defi-row:nth-of-type(even) .defi-art{order:0}.defi-row+.defi-row{margin-top:var(--spacing-80)}.defi-copy{padding-top:var(--spacing-24)}.defi-copy h3{margin-top:var(--spacing-32)}.defi-sticker{top:var(--spacing-20)}.feature-card{display:flex;flex-direction:column;align-items:flex-start;padding:var(--spacing-24);gap:var(--spacing-16)}.feature-art{height:var(--spacing-180)}.download-band{padding-block:var(--spacing-24)}.platform-tabs{flex-wrap:wrap;margin-bottom:var(--spacing-32)}.platform-tabs .pill-button{font-size:var(--text-caption);padding-inline:var(--spacing-12)}.platform-panel{grid-template-columns:1fr;gap:var(--spacing-32)}/* spacing48/24/80/32/20/16/180/12; caption12. */
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee-track{animation:none}.pill-button{transition:none}}/* Animation Philosophy; phone video honors reduced motion in app.js. */