/* ==========================================================================
   $ROBIN — Robin Nakamoto
   Mobile-first. Base styles target a phone; min-width queries add the rest.

   The material is liquid glass: translucent lozenges that blur and saturate
   what's behind them, with a bright specular rim, a soft inner bounce and a
   slow-travelling highlight. Everything else stays quiet so the glass and the
   dog carry the page.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root{
  color-scheme:light;   /* deliberate single-theme: the lime ground IS the brand */

  /* brand lime, sampled from the $ROBIN banner */
  --lime-50:#f7fde9;
  --lime-100:#eafbc2;
  --lime-200:#dcf795;
  --lime-300:#c9f05e;
  --lime-400:#b6e733;
  --lime-500:#a8dc2b;   /* core brand */
  --lime-600:#8bc016;
  --lime-700:#6b950f;
  --lime-900:#33470a;

  /* the hat green, used for depth in the ground */
  --moss:#2e9440;
  --moss-dark:#1b6a2a;

  --ink:#080b05;
  --ink-2:#101609;
  --ink-3:#1a220e;
  --ink-line:rgba(255,255,255,.10);
  --ink-line-2:rgba(255,255,255,.055);

  --up:#3ddc84;
  --down:#ff5d5d;

  --text:#101705;
  --text-soft:rgba(16,23,5,.62);
  --text-mute:rgba(16,23,5,.45);
  --text-inv:#f4ffe3;
  --text-inv-soft:rgba(244,255,227,.60);
  --text-inv-mute:rgba(244,255,227,.38);

  /* glass on the lime ground */
  --g-fill:rgba(255,255,255,.30);
  --g-fill-hi:rgba(255,255,255,.46);
  --g-rim:rgba(255,255,255,.62);
  --g-rim-hi:rgba(255,255,255,.92);
  /* glass on the dark ground */
  --gd-fill:rgba(255,255,255,.055);
  --gd-fill-hi:rgba(255,255,255,.10);
  --gd-rim:rgba(255,255,255,.13);

  --r-xs:10px; --r-sm:14px; --r-md:18px; --r-lg:24px; --r-xl:30px; --r-2xl:38px;

  --pad:16px;
  --maxw:1180px;
  --nav-h:60px;

  --ease:cubic-bezier(.22,.9,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Archivo','Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 14px);
}

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:var(--lime-500);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* A drifting mesh of light behind everything — stops the lime reading flat. */
body::before{
  content:'';position:fixed;inset:-30%;z-index:-2;pointer-events:none;
  background:
    /* Fine grain on top of the mesh, so large flat areas have texture instead
       of banding. It rides on this layer rather than a second fixed one of its
       own: every glass panel has to composite its backdrop through whatever is
       back here, and one full-screen layer is meaningfully cheaper than two.
       It is a pre-rendered tile for the same reason — an inline feTurbulence
       has to be re-rasterized each time the layer is composited. */
    url("../img/grain.png") repeat 0 0 / 128px 128px,
    radial-gradient(38% 32% at 22% 16%, rgba(233,255,168,.95), transparent 62%),
    radial-gradient(34% 30% at 82% 26%, rgba(255,255,255,.62), transparent 60%),
    radial-gradient(44% 38% at 68% 78%, rgba(120,190,20,.55), transparent 64%),
    radial-gradient(36% 30% at 12% 84%, rgba(198,244,110,.7), transparent 62%);
  animation:drift 26s var(--ease) infinite alternate;
  will-change:transform,opacity;
}
/* Translate and fade only — no scale. This layer is 160% of the viewport in
   both directions and full of radial gradients; animating its scale makes the
   engine re-rasterize all of it, repeatedly, which is felt everywhere else on
   the page. Translation and opacity are pure compositor work, and the slow
   fade gives back the breathing that the scale used to. */
@keyframes drift{
  0%  {transform:translate3d(0,0,0);opacity:.9}
  50% {transform:translate3d(3.5%,-3%,0);opacity:1}
  100%{transform:translate3d(-3.5%,3%,0);opacity:.94}
}

img{max-width:100%;display:block}
/* An author `display` outranks the UA's [hidden] rule, so `img{display:block}`
   above would leave a hidden <img> occupying layout. State it once, globally,
   rather than per component. */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/*
   Android Chrome reports prefers-reduced-motion whenever battery saver is on,
   which is often — and a blanket kill here meant most phones saw a completely
   static page. So rather than switch everything off, switch off the two things
   that actually cause discomfort: page-wide smooth scrolling, and the large
   continuous drift behind the whole layout. The small local touches — the glass
   sweep, the specular sheen, the dog's float, entrance fades — keep running,
   because they are the design and they move a few pixels at a time.
*/
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body::before{animation:none}
}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ══════════════════════════════════════════════════ the liquid glass system */
/*
   .lg is the material. It works on either ground: .lg-d switches the tokens
   for dark sections. The look is four things layered —
     1. backdrop blur + saturation (what makes it read as glass, not paint)
     2. a translucent fill with a vertical gradient (thickness)
     3. a specular rim: bright at the top edge, a fainter bounce at the bottom
     4. a slow diagonal highlight that travels across the surface
*/
.lg{
  position:relative;
  background:linear-gradient(150deg,var(--g-fill-hi),var(--g-fill) 46%,rgba(255,255,255,.20));
  border:1px solid var(--g-rim);
  border-radius:var(--r-lg);
  backdrop-filter:blur(18px) saturate(180%) brightness(1.06);
  -webkit-backdrop-filter:blur(18px) saturate(180%) brightness(1.06);
  box-shadow:
    inset 0 1px 0 var(--g-rim-hi),
    inset 0 -1px 0 rgba(255,255,255,.30),
    inset 1px 0 0 rgba(255,255,255,.22),
    inset -1px 0 0 rgba(255,255,255,.22),
    0 1px 2px rgba(30,60,0,.10),
    0 12px 34px -14px rgba(28,56,0,.42);
  overflow:hidden;
  isolation:isolate;
}
/* Travelling specular — a narrow bar that slides across, once, as the panel
   arrives on screen.
   Two decisions here, both measured rather than guessed:
   1. A moving box, not an animated background-position. Same picture; only
      this one is a transform the compositor can run on its own.
   2. Once per panel, not a loop. These panels carry a backdrop-filter, and
      anything animating inside one forces the engine to re-blur everything
      behind it, every frame, on every panel at once. On a throttled phone
      that single loop accounted for roughly three quarters of the dropped
      frames on the page. Firing it as the panel appears looks better anyway:
      the glass catches the light when it arrives, then holds still. */
.lg::before{
  content:'';position:absolute;top:-25%;bottom:-25%;left:0;width:55%;
  z-index:0;pointer-events:none;
  background:linear-gradient(108deg,transparent,rgba(255,255,255,.55) 50%,transparent);
  transform:translate3d(-200%,0,0);
}
.lg.lit::before{animation:sweep-once 1.6s var(--ease-out) 1}
/* Top gloss, the bit that sells it as a curved surface.
   Full height with the gradient fading out by half way — a half-height box
   would inherit the radius on its bottom corners too and draw a visible seam
   across the middle of every panel. */
.lg::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 52%);
  border-radius:inherit;
}
.lg > *{position:relative;z-index:1}

/* Off-stage at both ends, so the start and the end are never seen. */
@keyframes sweep{0%,72%{transform:translate3d(-200%,0,0)}100%{transform:translate3d(320%,0,0)}}
@keyframes sweep-once{from{transform:translate3d(-200%,0,0)}to{transform:translate3d(320%,0,0)}}
/* The text-clipped variant, for the one place a moving box will not do:
   background-clip:text can only travel by moving its own background. */
@keyframes sweep-bg{0%,72%{background-position:210% 0}100%{background-position:-90% 0}}

.lg-d{
  background:linear-gradient(150deg,var(--gd-fill-hi),var(--gd-fill) 52%,rgba(255,255,255,.03));
  border-color:var(--gd-rim);
  color:var(--text-inv);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 18px 44px -22px rgba(0,0,0,.9);
}
.lg-d::before{background:linear-gradient(108deg,transparent,rgba(255,255,255,.16) 50%,transparent)}
.lg-d::after{background:linear-gradient(to bottom,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 52%)}

/* A flat variant for lists that shouldn't read as lifted objects. */
.lg-flat{box-shadow:inset 0 1px 0 rgba(255,255,255,.10);border-color:var(--ink-line-2)}

/* ───────────────────────────────────── the glass wordmark ($ROBIN) ─────── */
/*
   Built from three stacked copies of the same text:
     .wm-glow  a blurred lime bloom, the light bending through the letterform
     .wm-body  the glass itself — a vertical gradient with a hard "horizon"
               flip near the middle, which is what makes a surface read as
               polished rather than merely pale
     .wm-spec  a bright specular band that travels across on a loop
*/
.wordmark{
  position:relative;display:inline-block;
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(66px,20.5vw,150px);
  line-height:.9;letter-spacing:-.055em;
  isolation:isolate;
}
/* NB: `background-image`, never the `background` shorthand — the shorthand
   resets background-clip back to border-box and the text fills as a solid box. */
.wordmark span{display:block}
.wordmark::after{
  content:attr(data-text);position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-text-stroke:2.5px rgba(255,255,255,.5);
  color:transparent;-webkit-text-fill-color:transparent;
}
.wordmark .wm-glow{
  position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(#fff,#eaffb4);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:blur(13px) saturate(1.4);opacity:.5;
  transform:translateY(3px) scale(1.015);
}
.wordmark .wm-body{
  position:relative;z-index:1;
  background-image:linear-gradient(177deg,
    rgba(255,255,255,.99) 0%,
    rgba(255,255,255,.97) 24%,
    rgba(238,248,222,.94) 37%,
    rgba(150,181,118,.90) 45%,   /* horizon: the surface turns from the light */
    rgba(96,132,66,.94) 50%,   /* darkest band, thin */
    rgba(255,255,255,.99) 56%,   /* and flips straight back to it */
    rgba(255,255,255,.96) 76%,
    rgba(226,242,192,.94) 90%,
    rgba(196,224,152,.92) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.9))
         drop-shadow(0 10px 22px rgba(40,70,0,.36));
}
.wordmark .wm-spec{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:linear-gradient(102deg,
    transparent 32%,rgba(255,255,255,.5) 44%,#fff 50%,rgba(255,255,255,.5) 56%,transparent 68%);
  background-size:280% 100%;background-position:210% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  /* Its own layer, so the one unavoidable repaint on the page is confined to
     the six letters and never reaches the hero behind them. */
  transform:translateZ(0);
  animation:sweep-bg 7s var(--ease) infinite 1.2s;
}

/* ---------------------------------------------------------------- motion */
@keyframes rise{from{opacity:0;transform:translateY(18px)}40%{opacity:1}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.9)}50%{opacity:1}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-14px) rotate(1.2deg)}}
@keyframes halo{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.07)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes slidein{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(61,220,132,.6)}70%{box-shadow:0 0 0 8px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
@keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
@keyframes toastin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes toastout{to{opacity:0;transform:translateY(12px)}}
@keyframes orb{0%,70%,100%{transform:translateY(0) scale(.86);opacity:.5}35%{transform:translateY(-13px) scale(1);opacity:1}}

/* Hero entrance: runs on load, so the page settles visible on its own. */
.enter{animation:rise .62s var(--ease-out) both}
.enter-1{animation-delay:.04s}
.enter-2{animation-delay:.11s}
.enter-3{animation-delay:.18s}
.enter-4{animation-delay:.25s}
.enter-5{animation-delay:.32s}
.enter-6{animation-delay:.39s}

/* Declared after .enter so it wins the cascade: the entrance still happens,
   it just fades in place instead of travelling. */
@media (prefers-reduced-motion:reduce){
  .enter{animation-name:fade}
}

/* Below-fold reveal. Armed by JS only for what starts offscreen, so the first
   painted frame is always complete. */
.rv{transition:opacity .66s var(--ease-out),transform .66s var(--ease-out)}
.rv.armed{opacity:0;transform:translateY(22px)}
.rv.armed.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv.armed{opacity:1;transform:none}}

/* ---------------------------------------------------------------- layout */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
section{position:relative}
.sec{padding:58px 0}

h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.06;letter-spacing:-.032em;font-weight:800;text-wrap:balance}
h2.sec-title{font-size:clamp(31px,8vw,58px);margin:14px 0 12px}
.sec-sub{font-size:15px;color:var(--text-soft);max-width:62ch;margin:0}
.dark .sec-sub{color:var(--text-inv-soft)}
.sec-head{margin-bottom:30px}
.sec-head.center{text-align:center}
.sec-head.center .sec-sub{margin-inline:auto}

.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;color:var(--text);
  background:var(--g-fill-hi);border:1px solid var(--g-rim);
  backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);
  box-shadow:inset 0 1px 0 var(--g-rim-hi);
}
.dark .eyebrow{
  background:var(--gd-fill-hi);border-color:var(--gd-rim);color:var(--lime-300);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

/* --------------------------------------------------------------- buttons */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 22px;border-radius:999px;
  font-weight:700;font-size:15px;letter-spacing:-.012em;white-space:nowrap;
  overflow:hidden;isolation:isolate;
  /* transform / filter / opacity only. `background` and `box-shadow` were in
     here too, and transitioning either repaints the button on every frame of
     every hover — over a backdrop that is itself moving. */
  transition:transform .18s var(--ease),filter .18s var(--ease),opacity .18s var(--ease);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  user-select:none;-webkit-user-select:none;
}
.btn:active{transform:scale(.96)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn svg{width:17px;height:17px;flex:none}

/* A shine that crosses the primary button on an interval — again a sliding
   bar, not a moving background, so a button at rest costs nothing to animate. */
.btn-lime::after,.btn-dark::after{
  content:'';position:absolute;top:-40%;bottom:-40%;left:0;width:50%;z-index:-1;
  background:linear-gradient(104deg,transparent,rgba(255,255,255,.32) 50%,transparent);
  transform:translate3d(-200%,0,0);
  animation:sweep 11s var(--ease) infinite 3s;
}
.btn-dark{background:var(--ink);color:var(--lime-400);box-shadow:0 8px 22px -8px rgba(0,0,0,.72)}
.btn-lime{
  background:linear-gradient(178deg,var(--lime-300),var(--lime-500));
  color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 24px -8px rgba(120,190,0,.85);
}
.btn-glass{
  background:var(--g-fill-hi);border:1px solid var(--g-rim);color:var(--text);
  backdrop-filter:blur(14px) saturate(170%);-webkit-backdrop-filter:blur(14px) saturate(170%);
  box-shadow:inset 0 1px 0 var(--g-rim-hi),0 6px 18px -10px rgba(28,56,0,.5);
}
.btn-glass.on-dark,.dark .btn-glass{
  background:var(--gd-fill-hi);border-color:var(--gd-rim);color:var(--text-inv);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-lg{padding:17px 26px;font-size:16px}
.btn-block{display:flex;width:100%}

/* ------------------------------------------------------------------- nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);display:flex;align-items:center;transition:background .3s,box-shadow .3s}
.nav.stuck{
  background:rgba(168,220,43,.72);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 1px 0 rgba(255,255,255,.35),0 10px 30px -24px rgba(0,0,0,.7);
}
.nav .wrap{display:flex;align-items:center;gap:12px;width:100%}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.03em}
.brand img{width:34px;height:34px;border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.nav-cta{display:flex;gap:8px;align-items:center;margin-left:auto}
#navConnect{display:none}   /* phones connect from the swap panel or buy bar */

.burger{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--g-fill-hi);border:1px solid var(--g-rim);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 var(--g-rim-hi);
}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:.22s var(--ease)}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.22s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.nav.open .burger span{background:transparent}
.nav.open .burger span::before{top:0;transform:rotate(45deg)}
.nav.open .burger span::after{top:0;transform:rotate(-45deg)}

.nav-links{
  position:fixed;top:calc(var(--nav-h) + 6px);left:12px;right:12px;
  display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:var(--r-xl);
  background:rgba(255,255,255,.62);border:1px solid var(--g-rim-hi);
  backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  box-shadow:0 30px 70px -26px rgba(20,40,0,.6),inset 0 1px 0 #fff;
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.97);
  transition:.26s var(--ease);
}
.nav.open .nav-links{opacity:1;visibility:visible;transform:none}
.nav-links a{padding:13px 15px;border-radius:14px;font-size:16px;font-weight:600;transition:background .16s}
.nav-links a.active{background:var(--ink);color:var(--lime-400)}

/* ------------------------------------------------------------------ hero */
.hero{padding-top:calc(var(--nav-h) + 14px);padding-bottom:34px;overflow:hidden}
.hero-grid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}

/* the dog, in a glass ring with a lime halo behind it */
.hero-art{position:relative;width:min(176px,44vw);margin:0 auto 14px;order:-1}
.hero-art::before{
  content:'';position:absolute;inset:-14%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(255,255,255,.9),rgba(220,255,150,.5) 45%,transparent 70%);
  filter:blur(14px);animation:halo 6s var(--ease) infinite;
}
.hero-art .ring{
  position:relative;z-index:1;border-radius:30px;overflow:hidden;
  border:1px solid var(--g-rim-hi);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 0 0 1px rgba(60,100,10,.16),
    0 22px 50px -18px rgba(25,50,0,.72);
  animation:float 7s var(--ease) infinite;
}
.hero-art img{width:100%;height:auto}

.hero-copy{display:flex;flex-direction:column;align-items:center;gap:0;width:100%}
.hero-copy .tagline{
  font-family:var(--font-display);font-weight:800;font-size:19px;line-height:1.2;
  letter-spacing:-.03em;margin:6px 0 0;color:var(--text);
}
.hero-copy .motto{
  font-size:14.5px;font-weight:600;line-height:1.4;margin:7px 0 0;
  color:var(--text-soft);letter-spacing:-.005em;
}
.hero-copy p.lede{font-size:14.5px;line-height:1.55;color:var(--text-soft);margin:13px 0 0;max-width:36ch}
.lede-more{display:none}

.hero-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;width:100%}
.hero-actions .btn{flex:1 1 calc(50% - 5px);padding:16px 12px}

/* live price chip, right under the fold-line on a phone */
.pricechip{
  display:flex;align-items:center;gap:10px;margin-top:16px;padding:10px 16px;
  border-radius:999px;font-variant-numeric:tabular-nums;
}
.pricechip .pc-dot{width:7px;height:7px;border-radius:50%;background:var(--up);animation:ping 2.2s infinite;flex:none}
.pricechip .pc-v{font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:-.02em}
.pricechip .pc-d{font-size:13px;font-weight:700}
.pricechip .pc-d.up{color:#1c7a44}.pricechip .pc-d.down{color:#a82626}

/* contract */
.ca{display:flex;align-items:center;gap:9px;margin-top:14px;padding:8px 8px 8px 16px;border-radius:999px;width:100%;max-width:520px}
.ca-label{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute);flex:none;display:none}
.ca-val{font-family:var(--font-mono);font-size:12.5px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.ca-full{display:none}
.ca-copy{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--lime-400);transition:transform .18s var(--ease),background .18s}
.ca-copy:active{transform:scale(.9)}
.ca-copy.done{background:var(--up);color:#04210f}

/* ----------------------------------------------------------------- stats */
.stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:26px;
}
.stat{padding:14px 10px;text-align:center;border-radius:var(--r-md)}
.stat:last-child{grid-column:span 2}
.stat .k{font-size:9.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--text-mute)}
.stat .v{font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:-.03em;margin-top:3px;font-variant-numeric:tabular-nums}
.stat .v.up{color:#1c7a44}.stat .v.down{color:#a82626}
.stat.pulse .v{animation:pop .5s var(--ease)}

.skel{
  display:inline-block;min-width:56px;height:1em;border-radius:6px;vertical-align:middle;
  background:linear-gradient(90deg,rgba(0,0,0,.07) 25%,rgba(0,0,0,.14) 37%,rgba(0,0,0,.07) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;
}
.dark .skel{background-image:linear-gradient(90deg,rgba(255,255,255,.07) 25%,rgba(255,255,255,.16) 37%,rgba(255,255,255,.07) 63%)}

/* --------------------------------------------------------------- marquee */
.marquee{overflow:hidden;background:var(--ink);color:var(--lime-400);padding:12px 0;border-block:1px solid rgba(255,255,255,.09)}
.marquee-track{display:flex;gap:28px;width:max-content;animation:slide 30s linear infinite}
.marquee span{font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:-.02em;display:flex;align-items:center;gap:28px;white-space:nowrap}
.marquee span::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--lime-500)}

/* ---------------------------------------------------------- dark sections */
.dark{background:var(--ink);color:var(--text-inv)}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--text-inv)}
.dark::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 40% at 50% 0%,rgba(168,220,43,.15),transparent 68%);
}
.dark > *{position:relative}

/* ------------------------------------------------------------------ swap */
.swap-layout{display:flex;flex-direction:column;gap:22px}
.swap-layout .swap{order:1}
.swap-layout .steps{order:2}

.swap{padding:16px;border-radius:var(--r-2xl)}
.swap-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.swap-head h3{font-size:19px}
.swap-net{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:999px;background:var(--gd-fill-hi);border:1px solid var(--gd-rim)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--up);animation:ping 2.2s infinite;flex:none}
.dot.off{background:#7d7d7d;animation:none;box-shadow:none}

.leg{background:var(--gd-fill);border:1px solid var(--gd-rim);border-radius:var(--r-lg);padding:14px;transition:border-color .18s,background .18s}
.leg:focus-within{border-color:rgba(168,220,43,.55);background:var(--gd-fill-hi)}
.leg-top{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--text-inv-soft);margin-bottom:7px;font-weight:600}
.leg-bal{display:flex;align-items:center;gap:6px}
.leg-max{color:var(--lime-400);font-weight:800;padding:6px 10px;margin:-6px -6px -6px 0;border-radius:8px}
.leg-row{display:flex;align-items:center;gap:10px}
.leg-row input{
  flex:1;min-width:0;width:100%;background:none;border:0;outline:none;
  font-family:var(--font-display);font-size:27px;font-weight:800;letter-spacing:-.03em;color:var(--text-inv);
}
.leg-row input::placeholder{color:rgba(244,255,227,.24)}
.leg-row input::-webkit-outer-spin-button,.leg-row input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.leg-row input[type=number]{-moz-appearance:textfield}
.coin{display:flex;align-items:center;gap:8px;padding:7px 13px 7px 7px;border-radius:999px;flex:none;background:var(--gd-fill-hi);border:1px solid var(--gd-rim);font-weight:800;font-size:14px}
.coin img,.coin .ico{width:24px;height:24px;border-radius:50%;flex:none}
.leg-fiat{font-size:12px;color:var(--text-inv-mute);margin-top:6px;min-height:1.1em}

.flip{display:grid;place-items:center;margin:-10px 0;position:relative;z-index:2}
.flip button{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:var(--ink-3);border:3px solid var(--ink);color:var(--lime-400);
  transition:transform .3s var(--ease),background .18s;
}
.flip button:active{transform:rotate(180deg) scale(.92)}

.swap-meta{margin-top:14px;display:grid;gap:8px;font-size:12.5px}
.swap-meta .row{display:flex;justify-content:space-between;gap:12px;color:var(--text-inv-soft)}
.swap-meta .row b{color:var(--text-inv);font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.slip{display:flex;align-items:center;gap:5px}
.slip button{padding:8px 12px;border-radius:9px;font-size:12px;font-weight:700;background:var(--gd-fill);border:1px solid var(--gd-rim);color:var(--text-inv-soft);transition:.16s}
.slip button.on{background:var(--lime-400);border-color:var(--lime-400);color:var(--ink)}
.swap-cta{margin-top:16px}
.swap-note{
  margin-top:12px;font-size:12px;line-height:1.5;color:var(--text-inv-soft);
  display:flex;gap:8px;padding:11px 13px;border-radius:var(--r-sm);
  background:var(--gd-fill);border:1px solid var(--gd-rim);
}
.swap-note svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--lime-400)}
.swap-note.err{background:rgba(255,93,93,.10);border-color:rgba(255,93,93,.32);color:#ffc9c9}
.swap-note.err svg{color:var(--down)}
.swap-note.ok{background:rgba(61,220,132,.10);border-color:rgba(61,220,132,.32);color:#bdf5d8}
.swap-note.ok svg{color:var(--up)}

.presets{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.presets button{flex:1 1 calc(50% - 4px);padding:13px 6px;border-radius:12px;font-size:13px;font-weight:700;background:var(--gd-fill);border:1px solid var(--gd-rim);color:var(--text-inv);transition:.16s}
.presets button:active{background:var(--lime-400);border-color:var(--lime-400);color:var(--ink)}

.spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.28);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}

.steps{display:grid;gap:11px}
.step{display:flex;gap:13px;padding:17px;border-radius:var(--r-lg)}
.step .n,.step .n-ico{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center}
.step .n{background:var(--lime-400);color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.step .n-ico{background:var(--gd-fill-hi);border:1px solid var(--gd-rim);font-size:18px}
.step h4{font-size:16px;margin-bottom:4px}
.step p{margin:0;font-size:14px;color:var(--text-inv-soft)}
.step p a{color:var(--lime-400);font-weight:600;border-bottom:1px solid rgba(168,220,43,.4)}

/* ------------------------------------------------------------- buy feed */
.feed{border-radius:var(--r-2xl);padding:0}
.feed-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;border-bottom:1px solid var(--ink-line-2)}
.feed-head h3{font-size:16px;display:flex;align-items:center;gap:9px}
.feed-list{max-height:380px;overflow-y:auto;scrollbar-width:thin}
.feed-list::-webkit-scrollbar{width:5px}
.feed-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}
.buy{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--ink-line-2);animation:slidein .42s var(--ease)}
.buy .emo{font-size:19px;flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:rgba(61,220,132,.13)}
.buy.sell .emo{background:rgba(255,93,93,.13)}
.buy .info{flex:1;min-width:0}
.buy .amt{font-family:var(--font-display);font-weight:800;font-size:14.5px;color:var(--up)}
.buy.sell .amt{color:var(--down)}
.buy .sub{font-size:11px;color:var(--text-inv-mute);font-family:var(--font-mono);display:flex;gap:7px;flex-wrap:wrap}
.buy .when{font-size:11px;color:var(--text-inv-mute);flex:none;font-variant-numeric:tabular-nums}
.feed-empty{padding:38px 18px;text-align:center;color:var(--text-inv-soft);font-size:14px}

/* ------------------------------------------------------------ tokenomics */
.tok-grid{display:grid;gap:22px}
.tok-list{display:grid;gap:11px}
.tok-item{padding:17px;border-radius:var(--r-lg)}
.tok-item.accent{border-color:rgba(168,220,43,.42);background:rgba(168,220,43,.08)}
.tok-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tok-top .lbl{font-family:var(--font-display);font-weight:800;font-size:15.5px}
.tok-top .pct{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--lime-400);font-variant-numeric:tabular-nums}
.tok-item p{margin:3px 0 11px;font-size:13px;color:var(--text-inv-soft)}
.bar{height:6px;border-radius:4px;background:rgba(255,255,255,.09);overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--lime-600),var(--lime-300));width:0;transition:width 1.1s var(--ease-out)}

.billy{padding:26px 20px;border-radius:var(--r-2xl);text-align:center}
.billy .ring{
  width:88px;height:88px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 32% 26%,var(--lime-300),var(--lime-600));font-size:40px;
  box-shadow:0 16px 40px -14px rgba(168,220,43,.8),inset 0 2px 0 rgba(255,255,255,.5);
  animation:float 8s var(--ease) infinite;
}
.billy h3{font-size:24px;margin-bottom:9px}
.billy p{font-size:14.5px;color:var(--text-inv-soft);margin:0 auto;max-width:44ch}
.billy .quote{margin-top:18px;padding:15px 17px;border-radius:var(--r-md);font-size:14px;font-style:italic;background:var(--gd-fill);border-left:3px solid var(--lime-400);text-align:left}

/* ------------------------------------------------------------- meme band */
.band{display:grid;gap:22px;padding:20px;border-radius:var(--r-2xl);text-align:center}
.band-art{max-width:320px;margin-inline:auto;width:100%}
.doge-anim{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--lime-500);border:1px solid var(--g-rim);box-shadow:0 18px 44px -18px rgba(0,0,0,.7)}
.doge-anim img{width:100%;height:auto}
.doge-anim.loading::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.42) 50%,transparent 70%);
  background-size:220% 100%;animation:shimmer 1.2s linear infinite;
}
.doge-play{
  position:absolute;inset:auto 0 0 0;margin:0 auto 14px;width:max-content;
  display:flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;
  background:rgba(8,11,5,.8);color:var(--lime-400);font-weight:700;font-size:14px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);
}
.doge-play svg{width:15px;height:15px}
.band-copy h2{font-size:clamp(30px,8.4vw,52px);margin:14px 0 12px}
.band-copy p{font-size:15px;color:var(--text-inv-soft);margin:0 auto;max-width:46ch}
.band-words{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;justify-content:center}
.band-words span{padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--gd-fill);border:1px solid var(--gd-rim);color:var(--lime-300);font-family:var(--font-mono)}

/* -------------------------------------------------------------------- ai */
.ai-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;justify-content:center}
.ai-tab{padding:10px 16px;border-radius:999px;font-weight:700;font-size:13.5px;background:var(--gd-fill);border:1px solid var(--gd-rim);color:var(--text-inv-soft);transition:.16s}
.ai-tab.on{background:var(--lime-400);border-color:var(--lime-400);color:var(--ink)}
.ai-panel{border-radius:var(--r-2xl);padding:18px;display:flex;flex-direction:column}
.ai-pane{display:none;flex-direction:column;flex:1}
.ai-pane.on{display:flex}
.ai-log{flex:1;overflow-y:auto;max-height:300px;display:flex;flex-direction:column;gap:12px;padding-right:4px;margin-bottom:14px}
.ai-log::-webkit-scrollbar{width:5px}
.ai-log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}
.msg{display:flex;gap:10px;animation:slidein .3s var(--ease)}
.msg .av{width:30px;height:30px;border-radius:10px;flex:none;display:grid;place-items:center;font-size:15px;background:rgba(168,220,43,.16)}
.msg.me{flex-direction:row-reverse}
.msg.me .av{background:var(--gd-fill-hi)}
.msg .bub{padding:11px 14px;border-radius:15px;font-size:14px;line-height:1.6;max-width:86%;background:var(--gd-fill);border:1px solid var(--gd-rim)}
.msg.me .bub{background:var(--lime-400);color:var(--ink);border-color:transparent;font-weight:500}
.msg .bub p{margin:0 0 8px}.msg .bub p:last-child{margin:0}
.msg .bub strong{color:var(--lime-300)}
.msg.me .bub strong{color:var(--ink)}
.msg .bub ul{margin:5px 0;padding-left:18px}
.msg .bub code{font-family:var(--font-mono);font-size:12px;background:rgba(0,0,0,.35);padding:2px 5px;border-radius:5px}
.typing{display:flex;gap:4px;padding:5px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--lime-400);animation:blink 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}

.ai-form{display:flex;gap:8px}
.ai-form input{flex:1;min-width:0;padding:13px 16px;border-radius:999px;background:var(--gd-fill);border:1px solid var(--gd-rim);color:var(--text-inv);outline:none;font-size:16px}
.ai-form input:focus{border-color:rgba(168,220,43,.55)}
.ai-form input::placeholder{color:rgba(244,255,227,.32)}
.ai-form .btn{flex:none;padding:13px 18px}
.ai-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.ai-chips button{padding:9px 14px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--gd-fill);border:1px solid var(--gd-rim);color:var(--text-inv-soft);transition:.16s}
.ai-out{flex:1;padding:16px;border-radius:var(--r-md);background:var(--gd-fill);border:1px solid var(--gd-rim);font-size:14px;line-height:1.66;overflow-y:auto;max-height:300px}
.ai-out .ph{color:var(--text-inv-mute);text-align:center;padding:34px 0}
.meme{padding:15px 16px;border-radius:var(--r-md);background:var(--gd-fill);border:1px solid var(--gd-rim);margin-bottom:10px}
.meme p{margin:0 0 10px;font-size:14px;line-height:1.58;white-space:pre-wrap}
.meme .acts{display:flex;gap:7px;flex-wrap:wrap}
.meme .acts button,.meme .acts .btn{padding:9px 14px;border-radius:9px;font-size:12px;font-weight:700;background:var(--gd-fill-hi);border:1px solid var(--gd-rim);color:var(--text-inv-soft)}

/* -------------------------------------------------------------- community */
.social-grid{display:grid;gap:18px}
.tw-embed{border-radius:var(--r-2xl);overflow:hidden;min-height:300px;padding:5px}
.tw-fallback{padding:34px 20px;text-align:center;color:var(--text-inv-soft)}
.tw-fallback .btn{margin-top:16px}

/* ------------------------------------------------------------------- faq */
.faq{display:grid;gap:9px;max-width:820px;margin-inline:auto}
.q{border-radius:var(--r-lg);overflow:hidden;background:var(--gd-fill);border:1px solid var(--ink-line-2)}
.q[open]{background:var(--gd-fill-hi)}
.q summary{padding:17px;font-family:var(--font-display);font-weight:700;font-size:15.5px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;list-style:none}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:'+';font-size:23px;font-weight:400;color:var(--lime-400);transition:transform .24s var(--ease);flex:none}
.q[open] summary::after{transform:rotate(45deg)}
.q .a{padding:0 17px 17px;font-size:14px;color:var(--text-inv-soft);line-height:1.7}
.q .a a{color:var(--lime-400);border-bottom:1px solid rgba(168,220,43,.4)}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--ink);color:var(--text-inv);padding:44px 0 26px;border-top:1px solid var(--ink-line)}
.foot-grid{display:grid;gap:26px;margin-bottom:30px}
.foot h5{font-family:var(--font-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime-400);margin:0 0 13px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot ul a{font-size:14.5px;color:var(--text-inv-soft)}
.foot .about{font-size:14px;color:var(--text-inv-soft);max-width:42ch;margin:12px 0 0}
.foot-bot{padding-top:22px;border-top:1px solid var(--ink-line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--text-inv-mute)}
.disclaimer{margin-top:20px;padding:15px 16px;border-radius:var(--r-md);background:var(--gd-fill);border:1px solid var(--gd-rim);font-size:11.5px;line-height:1.62;color:var(--text-inv-soft)}

/* ------------------------------------------------------------- buy bar */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;gap:11px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(8,11,5,.86);border-top:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);
  transform:translateY(110%);transition:transform .32s var(--ease);
}
.buybar.up{transform:none}
.buybar .bb-price{display:flex;flex-direction:column;line-height:1.24;min-width:0}
.buybar .bb-k{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-inv-mute);font-weight:700}
.buybar .bb-v{font-family:var(--font-display);font-weight:800;font-size:16.5px;color:var(--text-inv);font-variant-numeric:tabular-nums}
.buybar .bb-v .d{font-size:12px;margin-left:5px;font-weight:700}
.buybar .bb-v .d.up{color:var(--up)}.buybar .bb-v .d.down{color:var(--down)}
.buybar .btn{margin-left:auto;flex:none;padding:13px 22px}
body.has-buybar .foot{padding-bottom:calc(26px + 70px + env(safe-area-inset-bottom))}

/* ---------------------------------------------------------------- toasts */
.toast-wrap{position:fixed;bottom:calc(78px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:200;display:grid;gap:8px;width:min(420px,calc(100vw - 28px))}
.toast{padding:13px 17px;border-radius:14px;background:var(--ink-3);color:var(--text-inv);border:1px solid var(--ink-line);box-shadow:0 24px 60px -22px rgba(0,0,0,.9);font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:10px;animation:toastin .32s var(--ease)}
.toast.ok{border-color:rgba(61,220,132,.5)}
.toast.err{border-color:rgba(255,93,93,.5)}
.toast a{color:var(--lime-400);border-bottom:1px solid rgba(168,220,43,.4);margin-left:auto;flex:none}
.toast.out{animation:toastout .3s forwards}

/* ══════════════════════════════════════════════════════ 480px and wider ══ */
@media (min-width:480px){
  :root{--pad:20px}
  .hero-actions .btn{flex:0 1 auto;padding:16px 24px}
  .ca-label{display:inline}
  .stat{padding:16px 12px}
  .stat .v{font-size:23px}
  .band{padding:26px}
}

/* ══════════════════════════════════════════════════════ 700px and wider ══ */
@media (min-width:700px){
  :root{--pad:24px;--nav-h:66px}
  .sec{padding:74px 0}
  .sec-sub{font-size:16.5px}
  .sec-head{margin-bottom:38px}

  .hero{padding-top:calc(var(--nav-h) + 26px);padding-bottom:48px}
  .hero-art{width:min(272px,38vw)}
  .hero-copy .tagline{font-size:26px;margin-top:10px}
  .hero-copy .motto{font-size:16px;margin-top:9px}
  .hero-copy p.lede{font-size:16px;max-width:52ch}
  #navConnect{display:inline-flex;padding:11px 18px;font-size:14px}
  .lede-more{display:inline}
  .pricechip{padding:11px 20px}
  .pricechip .pc-v{font-size:18px}

  .stats{grid-template-columns:repeat(5,1fr);gap:10px;margin-top:36px}
  .stat:last-child{grid-column:auto}
  .stat .v{font-size:25px}
  .stat .k{font-size:10.5px}

  .marquee{padding:15px 0}
  .marquee span{font-size:16px;gap:40px}
  .marquee-track{gap:40px}

  .swap{padding:20px}
  .leg{padding:16px 18px}
  .leg-row input{font-size:30px}
  .presets button{flex:1 1 0;min-width:64px}

  .tok-grid{grid-template-columns:1fr 1fr;gap:34px;align-items:center}
  .billy{padding:32px}
  .billy h3{font-size:29px}
  .billy .ring{width:104px;height:104px;font-size:48px}

  .band{grid-template-columns:320px 1fr;gap:34px;text-align:left;padding:32px;align-items:center}
  .band-art{margin:0}
  .band-copy p{margin:0}
  .band-words{justify-content:flex-start}

  .social-grid{grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  .tw-embed{min-height:420px}
  .foot-grid{grid-template-columns:1.6fr 1fr 1fr;gap:36px}
  .ai-panel{padding:24px}
  .ai-log{max-height:340px}
  .step{padding:20px}
  .q summary{padding:19px 22px;font-size:17px}
  .q .a{padding:0 22px 20px;font-size:14.5px}

  /* the sticky bar is a phone affordance */
  .buybar{display:none}
  body.has-buybar .foot{padding-bottom:26px}
  .toast-wrap{bottom:22px}
}

/* ══════════════════════════════════════════════════════ 940px and wider ══ */
@media (min-width:940px){
  .hero-grid{
    flex-direction:row-reverse;align-items:center;text-align:left;
    gap:52px;justify-content:space-between;
  }
  .hero-art{width:min(400px,38vw);margin:0;flex:none;order:0}
  .hero-copy{align-items:flex-start;flex:1}
  .hero-copy p.lede{max-width:50ch}
  .hero-actions{width:auto;margin-top:26px}
  .ca{margin-top:20px}
  .pricechip{margin-top:20px}

  .swap-layout{display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:start}
  .swap-layout .steps{order:0}
  .swap-layout .swap{order:0}

  .burger{display:none}
  .nav-links{
    position:static;flex-direction:row;gap:3px;padding:0;border:0;background:none;
    box-shadow:none;opacity:1;visibility:visible;transform:none;backdrop-filter:none;
    -webkit-backdrop-filter:none;margin-left:auto;
  }
  .nav-links a{padding:9px 14px;font-size:14.5px}
  .nav-links a:hover{background:var(--g-fill)}
  .nav-cta{margin-left:0}
}

/* ═══════════════════════════════════════════════════════════ pointer/hover */
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn-glass:hover,.btn-lime:hover,.btn-dark:hover{filter:brightness(1.07)}
  .ca-copy:hover{transform:scale(1.08)}
  .flip button:hover{background:#26311a;transform:rotate(180deg)}
  .slip button:hover,.presets button:hover,.ai-chips button:hover,.ai-tab:hover{
    background:var(--gd-fill-hi);color:var(--text-inv);
  }
  .presets button:hover{background:var(--lime-400);border-color:var(--lime-400);color:var(--ink)}
  .foot ul a:hover{color:var(--lime-400)}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .leg-max:hover{color:var(--lime-300);background:var(--gd-fill)}
  /* glass lifts very slightly toward the pointer */
  .step:hover,.tok-item:hover,.q:hover{transform:translateY(-2px);transition:transform .22s var(--ease)}
}

/* Landscape phones: don't let the hero eat the screen. */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding-top:calc(var(--nav-h) + 12px);padding-bottom:22px}
  .hero-grid{flex-direction:row-reverse;text-align:left;gap:24px;align-items:center}
  .hero-art{width:180px;margin:0}
  .hero-copy{align-items:flex-start}
  .wordmark{font-size:58px}
}

/* ═══════════════════════════════════════════════════════════ supply facts */
.tok-list{display:grid;gap:11px}
.fact{padding:18px;border-radius:var(--r-lg)}
.fact.accent{border-color:rgba(168,220,43,.45);background:rgba(168,220,43,.09)}
.fact-k{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--text-inv-mute)}
.fact.accent .fact-k{color:var(--lime-400)}
.fact-v{
  font-family:var(--font-display);font-weight:800;font-size:clamp(24px,6.6vw,32px);
  letter-spacing:-.035em;margin-top:4px;line-height:1.05;font-variant-numeric:tabular-nums;
}
.fact.accent .fact-v{color:var(--lime-300)}
.fact p{margin:7px 0 0;font-size:13px;line-height:1.55;color:var(--text-inv-soft)}

/* ═════════════════════════════════════════════════════════ Robin Scanner */
.scan{display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:var(--r-2xl)}

.scan-form{display:flex;flex-direction:column;gap:10px}
.scan-input{
  width:100%;padding:15px 16px;border-radius:14px;
  background:var(--gd-fill);border:1px solid var(--gd-rim);color:var(--text-inv);
  font-family:var(--font-mono);font-size:14px;letter-spacing:-.01em;
  transition:border-color .16s,background .16s;
}
.scan-input:focus{border-color:rgba(168,220,43,.55);background:var(--gd-fill-hi);outline:none}
.scan-input::placeholder{color:rgba(244,255,227,.30)}
.scan-form .btn{flex:none}

/* thinking */
.scan-load{text-align:center;padding:22px 10px}
.scan-load p{margin:16px 0 0;font-size:13.5px;color:var(--text-inv-soft);font-weight:600}
.scan-orb{display:flex;gap:9px;justify-content:center}
.scan-orb span{
  width:11px;height:11px;border-radius:50%;background:var(--lime-400);
  animation:orb 1.25s var(--ease) infinite;
}
.scan-orb span:nth-child(2){animation-delay:.16s}
.scan-orb span:nth-child(3){animation-delay:.32s}

/* the answer */
.scan-out{display:flex;flex-direction:column;gap:14px;animation:slidein .38s var(--ease-out)}

.scan-verdict{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:16px;
  background:var(--gd-fill);border:1px solid var(--gd-rim);
}
.sv-dot{
  flex:none;width:12px;height:12px;border-radius:50%;
  background:var(--text-inv-mute);box-shadow:0 0 0 4px rgba(255,255,255,.06);
}
.sv-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.sv-text b{font-family:var(--font-display);font-size:19px;letter-spacing:-.02em;line-height:1.15}
.sv-text small{font-size:12.5px;color:var(--text-inv-mute);font-weight:600}

/* Colour carries meaning here, so it is never the only signal: the wording of
   the verdict says the same thing, and each finding below is prefixed with a
   mark as well as a colour. */
.scan-verdict.v-ok     {border-color:rgba(61,220,132,.45);background:rgba(61,220,132,.09)}
.scan-verdict.v-ok      .sv-dot{background:var(--up);box-shadow:0 0 0 4px rgba(61,220,132,.18)}
.scan-verdict.v-ok      .sv-text b{color:var(--up)}
.scan-verdict.v-partial{border-color:rgba(168,220,43,.4);background:rgba(168,220,43,.08)}
.scan-verdict.v-partial .sv-dot{background:var(--lime-400);box-shadow:0 0 0 4px rgba(168,220,43,.18)}
.scan-verdict.v-partial .sv-text b{color:var(--lime-300)}
.scan-verdict.v-caution{border-color:rgba(255,212,71,.5);background:rgba(255,212,71,.08)}
.scan-verdict.v-caution .sv-dot{background:var(--gold);box-shadow:0 0 0 4px rgba(255,212,71,.18)}
.scan-verdict.v-caution .sv-text b{color:var(--gold)}
.scan-verdict.v-high   {border-color:rgba(255,107,107,.55);background:rgba(255,107,107,.10)}
.scan-verdict.v-high    .sv-dot{background:var(--down);box-shadow:0 0 0 4px rgba(255,107,107,.2)}
.scan-verdict.v-high    .sv-text b{color:#ff8f8f}
.scan-verdict.v-unknown .sv-text b{color:var(--text-inv-soft)}

.scan-summary{
  margin:0;padding:14px 16px;border-radius:14px;
  background:var(--gd-fill);border:1px solid var(--gd-rim);
  font-size:14px;line-height:1.62;color:var(--text-inv-soft);
}

.scan-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.scan-stats div{
  padding:11px 13px;border-radius:12px;
  background:var(--gd-fill);border:1px solid var(--gd-rim);
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
.scan-stats span{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-inv-mute)}
.scan-stats b{
  font-family:var(--font-display);font-size:16px;letter-spacing:-.02em;color:var(--text-inv);
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.scan-findings{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.scan-findings li{
  display:flex;gap:11px;align-items:flex-start;
  padding:12px 14px;border-radius:13px;
  background:var(--gd-fill);border:1px solid var(--gd-rim);
}
.f-icon{
  flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:800;margin-top:1px;
  background:rgba(255,255,255,.08);color:var(--text-inv-soft);
}
.scan-findings b{display:block;font-size:13.5px;font-weight:700;color:var(--text-inv);line-height:1.4}
.scan-findings i{display:block;font-style:normal;font-size:12.5px;line-height:1.55;color:var(--text-inv-mute);margin-top:3px}
.scan-findings .f-good   {border-color:rgba(61,220,132,.28)}
.scan-findings .f-good    .f-icon{background:rgba(61,220,132,.18);color:var(--up)}
.scan-findings .f-warn   {border-color:rgba(255,212,71,.3)}
.scan-findings .f-warn    .f-icon{background:rgba(255,212,71,.18);color:var(--gold)}
.scan-findings .f-bad    {border-color:rgba(255,107,107,.34)}
.scan-findings .f-bad     .f-icon{background:rgba(255,107,107,.18);color:#ff8f8f}
.scan-findings .f-unknown .f-icon{background:rgba(255,255,255,.08)}

.scan-holders{
  border-radius:13px;background:var(--gd-fill);border:1px solid var(--gd-rim);
  padding:12px 14px;
}
.scan-holders summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--text-inv-soft)}
.scan-holders ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.scan-holders li{display:flex;align-items:center;gap:9px;font-size:12.5px}
.scan-holders code{font-family:var(--font-mono);color:var(--text-inv-soft)}
.scan-holders em{font-style:normal;font-size:11px;color:var(--text-inv-mute)}
.scan-holders b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--text-inv)}

.scan-note{margin:2px 0 0;font-size:12px;line-height:1.55;color:var(--text-inv-mute)}
.scan-note.bad{color:#ffc9c9}

@media (min-width:560px){
  .scan-form{flex-direction:row;align-items:center}
  .scan-input{flex:1}
  .scan-stats{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:700px){
  .scan{padding:24px;gap:16px}
  .scan-stats{grid-template-columns:repeat(5,1fr)}
}

/* ══════════════════════════════════════════════════════════ X / Twitter */
.tw-embed{display:flex;flex-direction:column;gap:14px}
.tw-posts{display:grid;gap:10px;min-height:120px}
.tw-posts.loading{
  position:relative;
  background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.09) 37%,rgba(255,255,255,.04) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:var(--r-md);
}
.tw-posts.loading blockquote{opacity:0}
.tw-posts blockquote{margin:0;color:var(--text-inv-soft);font-size:14px}
.tw-posts.ready{background:none;animation:none;min-height:0}

.tw-follow{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:30px 22px;text-align:center;
  border-radius:var(--r-xl);background:var(--gd-fill);border:1px solid var(--gd-rim);
}
.tw-follow.compact{padding:18px;flex-direction:row;gap:14px;text-align:left;flex-wrap:wrap}
.tw-follow.compact p{display:none}
.tw-follow.compact .tw-x{font-size:24px}
.tw-follow.compact .btn{margin:0 0 0 auto}
.tw-x{font-size:36px;line-height:1;color:var(--text-inv);opacity:.9}
.tw-handle{
  font-family:var(--font-display);font-weight:800;font-size:19px;
  letter-spacing:-.02em;color:var(--text-inv);margin-top:6px;
}
.tw-follow.compact .tw-handle{margin:0;font-size:16px}
.tw-follow p{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--text-inv-soft);max-width:30ch}
.tw-follow .btn{margin-top:16px}

/* ═══════════════════════════════════════════════════════ wallet picker */
.wsheet{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-end;justify-content:center}
.wsheet[hidden]{display:none}
.wsheet-bg{
  position:absolute;inset:0;background:rgba(4,7,2,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .24s var(--ease);
}
.wsheet.open .wsheet-bg{opacity:1}
.wsheet-panel{
  position:relative;width:100%;max-width:440px;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  transform:translateY(14px);opacity:0;
  transition:transform .28s var(--ease-out),opacity .22s var(--ease-out);
}
.wsheet.open .wsheet-panel{transform:none;opacity:1}
.wsheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.wsheet-head h3{font-size:19px}
.wsheet-x{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--gd-fill);border:1px solid var(--gd-rim);color:var(--text-inv-soft);
}
.wlist{display:grid;gap:8px}
.wrow{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:13px 14px;border-radius:var(--r-md);
  background:var(--gd-fill);border:1px solid var(--gd-rim);color:var(--text-inv);
  transition:background .16s,border-color .16s,transform .12s var(--ease);
}
.wrow:active{transform:scale(.985)}
.wrow-ico{
  width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.07);color:var(--lime-400);overflow:hidden;
}
.wrow-ico img{width:100%;height:100%;object-fit:cover;border-radius:11px}
.wrow-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.wrow-txt b{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.wrow-txt i{font-style:normal;font-size:12px;color:var(--text-inv-mute)}
.wrow-go{flex:none;color:var(--text-inv-mute)}
.wsheet-note{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--text-inv-mute);text-align:center}

@media (hover:hover) and (pointer:fine){
  .wrow:hover{background:var(--gd-fill-hi);border-color:rgba(168,220,43,.4)}
  .wsheet-x:hover{color:var(--text-inv)}
}
@media (min-width:560px){
  .wsheet{align-items:center}
  .wsheet-panel{border-radius:var(--r-2xl);padding:24px;margin:20px}
}

/* picker section headings */
.wgroup{
  font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-inv-mute);padding:10px 4px 2px;
}
.wgroup:first-child{padding-top:0}
.wrow-sm{padding:11px 14px}
.wrow-sm .wrow-ico{width:32px;height:32px;border-radius:9px}
.wrow-sm .wrow-txt b{font-size:14.5px}

/* ══════════════════════════════════════════════════════ buy notifications */
.buypop-wrap{
  position:fixed;z-index:150;
  left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom));
  display:flex;justify-content:center;
  padding:0 12px;
  pointer-events:none;
  transition:transform .3s var(--ease);
}
/* lift clear of the sticky buy bar while it is showing.
   Transform rather than `bottom`, so the shift is a compositor job and does
   not relayout the card mid-animation. */
body.bar-up .buypop-wrap{transform:translate3d(0,-62px,0)}

.buypop{
  display:flex;align-items:center;gap:12px;
  max-width:340px;width:100%;
  padding:11px 14px;border-radius:16px;
  background:linear-gradient(150deg,rgba(26,34,14,.97),rgba(8,11,5,.97));
  border:1px solid rgba(168,220,43,.34);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.09);
  color:var(--text-inv);overflow:hidden;
  /* Only opacity and transform are animated — both run on the compositor, so
     the card cannot stutter no matter what else the page is doing. */
  opacity:0;transform:translate3d(0,26px,0) scale(.94);
  transition:opacity .3s var(--ease-out),transform .46s var(--ease-out);
}
.buypop.in {opacity:1;transform:translate3d(0,0,0) scale(1)}
.buypop.out{opacity:0;transform:translate3d(0,-14px,0) scale(.97);
            transition-duration:.26s,.38s}

/* a sheen crosses the card once as it arrives */
.buypop::after{
  content:'';position:absolute;top:-30%;bottom:-30%;left:0;width:55%;
  pointer-events:none;
  background:linear-gradient(104deg,transparent,rgba(168,220,43,.28) 50%,transparent);
  transform:translate3d(-200%,0,0);
}
.buypop.in::after{animation:sweep 1.5s var(--ease-out) .3s 1}

.bp-emo{
  flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  font-size:20px;background:rgba(61,220,132,.15);border:1px solid rgba(61,220,132,.22);
}
.bp-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.bp-top{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-inv-mute)}
.bp-amt{
  font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:-.02em;
  color:var(--up);font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bp-usd{
  flex:none;font-family:var(--font-display);font-weight:800;font-size:17px;
  letter-spacing:-.02em;color:var(--lime-300);font-variant-numeric:tabular-nums;
}

/* the bigger the bag, the louder the card */
.buypop.big{border-color:rgba(168,220,43,.55)}
.buypop.big .bp-emo{background:rgba(168,220,43,.18);border-color:rgba(168,220,43,.34)}
.buypop.whale{
  border-color:rgba(255,212,71,.6);
  box-shadow:0 18px 46px -16px rgba(0,0,0,.95),0 0 0 1px rgba(255,212,71,.2),
             inset 0 1px 0 rgba(255,255,255,.12);
}
.buypop.whale .bp-emo{background:rgba(255,212,71,.16);border-color:rgba(255,212,71,.34);font-size:22px}
.buypop.whale .bp-amt,
.buypop.whale .bp-usd{color:var(--gold)}

@media (min-width:700px){
  /* the buy bar is a phone affordance, so there is nothing to clear here */
  .buypop-wrap,
  body.bar-up .buypop-wrap{
    left:20px;right:auto;bottom:20px;padding:0;transform:none;justify-content:flex-start;
  }
  .buypop{width:320px}
}

/* ═══════════════════════════════════════════════ mobile: cheaper glass ══ */
/*
   backdrop-filter has to recompute whenever anything behind it changes, and
   the mesh behind this page is always drifting. The cost scales with the blur
   radius, so phones get a smaller one — at phone size the panels are small
   enough that nobody can tell the difference, and the frame budget is small
   enough that everybody can.
*/
@media (max-width:699px){
  .lg{backdrop-filter:blur(9px) saturate(175%) brightness(1.05);
      -webkit-backdrop-filter:blur(9px) saturate(175%) brightness(1.05)}
  .lg-d{backdrop-filter:blur(10px) saturate(140%);
        -webkit-backdrop-filter:blur(10px) saturate(140%)}
  .btn-glass{backdrop-filter:blur(8px) saturate(160%);
             -webkit-backdrop-filter:blur(8px) saturate(160%)}
  .nav.stuck{backdrop-filter:blur(11px) saturate(170%);
             -webkit-backdrop-filter:blur(11px) saturate(170%)}
  .buybar{backdrop-filter:blur(11px) saturate(160%);
          -webkit-backdrop-filter:blur(11px) saturate(160%)}
}

/* one-click failure report, for whoever runs the site */
.note-copy{
  display:inline-block;margin-top:8px;padding:7px 13px;border-radius:9px;
  font-size:11.5px;font-weight:700;
  background:var(--gd-fill-hi);border:1px solid var(--gd-rim);color:var(--text-inv-soft);
  transition:.16s;
}
.note-copy:hover{background:var(--lime-400);border-color:var(--lime-400);color:var(--ink)}