:root {
    --green: #0d3527;
    --green-deep: #082419;
    --green-line: #1f4a39;
    --paper: #e9ece0;
    --paper-line: #c9cdb8;
    --gold: #c9a24a;
    --gold-light: #e6cd8a;
    --ink: #1b2a24;
    --ink-soft: #4a5a52;
    --cream: #f3eedf;
    --display: "Cinzel", "Times New Roman", serif;
    --body: "EB Garamond", Georgia, serif;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--green); color: var(--cream); font: 400 1.18rem/1.6 var(--body); }
  img { max-width: 100%; display: block; }
  a { color: var(--gold-light); }
  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

  /* ---------- Header ---------- */
  header.site { position: sticky; top: 0; z-index: 10; background: rgba(8,36,25,.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--green-line); }
  header.site .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gold-light); font: 700 1.05rem var(--display); letter-spacing: .14em; white-space: nowrap; }
  .brand img { width: 34px; height: 34px; }
  nav.main { display: flex; gap: 20px; margin-left: auto; }
  nav.main a { color: var(--cream); text-decoration: none; font-size: 1.02rem; opacity: .85; }
  nav.main a:hover { opacity: 1; color: var(--gold-light); }
  .btn { display: inline-block; font: 600 .82rem var(--display); letter-spacing: .12em; text-decoration: none; padding: 12px 20px 11px; border-radius: 3px; border: 1px solid var(--gold); color: var(--green-deep); background: var(--gold); cursor: pointer; }
  .btn:hover { background: var(--gold-light); border-color: var(--gold-light); }
  .btn.ghost { background: transparent; color: var(--gold-light); }
  .btn.ghost:hover { background: rgba(201,162,74,.12); }
  .btn[disabled] { opacity: .5; cursor: default; }
  header.site .btn { padding: 9px 14px 8px; }
  header.site .wallet-btn { margin-left: 4px; }

  /* ---------- Hero ---------- */
  .hero { padding: 64px 0 0; text-align: center; position: relative; overflow: hidden; }
  .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(201,162,74,.18), transparent 55%); pointer-events: none; }
  .hero .wrap { position: relative; }

  /* --- The coin: 3D spin, edge glow, shine sweep --- */
  .coin-stage { --size: min(320px, 68vw); width: var(--size); height: var(--size); margin: 0 auto; position: relative; perspective: 1100px; }
  .coin-stage::before { /* soft halo behind the coin, breathes */
    content: ""; position: absolute; inset: -22%; border-radius: 50%;
    background: radial-gradient(circle, rgba(230,205,138,.40) 0%, rgba(201,162,74,.22) 38%, rgba(201,162,74,0) 68%);
    animation: halo 3.2s ease-in-out infinite; pointer-events: none; }
  .coin-stage::after { /* bright rim that lights the edge */
    content: ""; position: absolute; inset: -1.5%; border-radius: 50%;
    box-shadow: 0 0 18px 4px rgba(230,205,138,.55), 0 0 60px 10px rgba(201,162,74,.35), inset 0 0 22px rgba(255,236,180,.6);
    animation: rim 3.2s ease-in-out infinite; pointer-events: none; }
  .coin3d { position: absolute; inset: 0; transform-style: preserve-3d; animation: spin 11s linear infinite, mint 1.6s cubic-bezier(.2,.7,.2,1) both; }
  .coin-stage:hover .coin3d { animation-play-state: paused, running; }
  .face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  .face img { width: 100%; height: 100%; border-radius: 50%; }
  .face.front { transform: translateZ(7px); }
  .face.back { transform: rotateY(180deg) translateZ(7px); }
  .edge { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #b08a36 0 56%, #d8b85f 57% 80%, #8c6a1e 81% 100%); filter: brightness(.9); }
  .edge:nth-child(1) { transform: translateZ(6px); } .edge:nth-child(2) { transform: translateZ(4px); } .edge:nth-child(3) { transform: translateZ(2px); }
  .edge:nth-child(4) { transform: translateZ(0); } .edge:nth-child(5) { transform: translateZ(-2px); } .edge:nth-child(6) { transform: translateZ(-4px); } .edge:nth-child(7) { transform: translateZ(-6px); }
  .shine { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    -webkit-mask: url("logo.png") center / 100% 100% no-repeat; mask: url("logo.png") center / 100% 100% no-repeat;
    background: linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,250,230,.75) 47%, rgba(255,255,255,.95) 50%, rgba(255,250,230,.75) 53%, rgba(255,255,255,0) 62%);
    background-size: 260% 260%; animation: sweep 3.2s ease-in-out infinite; mix-blend-mode: screen; }
  .coin-stage .glow-ring { position: absolute; inset: -2px; border-radius: 50%; pointer-events: none; z-index: 2;
    background: conic-gradient(from 0deg, rgba(255,240,190,0) 0deg, rgba(255,240,190,.85) 40deg, rgba(255,240,190,0) 80deg, rgba(255,240,190,0) 180deg, rgba(255,240,190,.6) 220deg, rgba(255,240,190,0) 260deg);
    -webkit-mask: radial-gradient(circle, transparent 0 86%, #000 88% 100%); mask: radial-gradient(circle, transparent 0 86%, #000 88% 100%);
    animation: ring 4s linear infinite; }
  @keyframes spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
  @keyframes mint { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
  @keyframes sweep { 0% { background-position: 120% 120%; } 60%, 100% { background-position: -40% -40%; } }
  @keyframes halo { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
  @keyframes rim { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
  @keyframes ring { to { transform: rotate(360deg); } }

  .hero h1 { font: 700 clamp(2.4rem, 7vw, 4.4rem)/1.05 var(--display); letter-spacing: .14em; color: var(--gold-light); margin: 34px 0 10px; text-shadow: 0 0 24px rgba(201,162,74,.35); }
  .hero .tagline { font-style: italic; font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0 auto 18px; }
  .hero .lede { max-width: 58ch; margin: 0 auto 30px; color: #d9d4c4; }
  .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

  /* contract address plate */
  .ca { margin: 40px auto 0; max-width: 640px; border: 1px solid var(--gold); border-radius: 4px; padding: 6px; background: rgba(8,36,25,.5); }
  .ca-inner { border: 1px solid rgba(201,162,74,.45); border-radius: 2px; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; text-align: left; }
  .ca-label { grid-column: 1 / -1; font: 600 .78rem var(--display); letter-spacing: .14em; color: var(--gold); }
  .ca code { font: 500 .98rem ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--cream); word-break: break-all; }
  .copy { font: 600 .75rem var(--display); letter-spacing: .1em; background: transparent; color: var(--gold-light); border: 1px solid var(--gold); border-radius: 3px; padding: 9px 12px 8px; cursor: pointer; white-space: nowrap; }
  .copy:hover { background: rgba(201,162,74,.12); }

  /* --- Road with driving cars --- */
  .road-strip { position: relative; height: 170px; margin-top: 40px; overflow: hidden; background: linear-gradient(180deg, rgba(8,36,25,0) 0%, rgba(8,36,25,.6) 60%, var(--green-deep) 100%); }
  .road-strip .asphalt { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: #0a1f17; border-top: 1px solid rgba(201,162,74,.35); }
  .road-strip .lane { position: absolute; left: 0; right: 0; bottom: 22px; height: 2px; background: repeating-linear-gradient(90deg, var(--gold) 0 46px, transparent 46px 92px); opacity: .7; animation: lane 1.1s linear infinite; }
  @keyframes lane { to { background-position: -92px 0; } }
  .car { position: absolute; bottom: 24px; width: 230px; height: 90px; will-change: transform; }
  .car svg { width: 100%; height: 100%; overflow: visible; }
  .car.one { animation: drive 13s linear infinite; }
  .car.two { width: 180px; height: 70px; bottom: 26px; opacity: .85; animation: drive 19s linear infinite; animation-delay: -8s; }
  @keyframes drive { from { transform: translateX(-260px); } to { transform: translateX(calc(100vw + 60px)); } }
  .wheel { transform-box: fill-box; transform-origin: center; animation: roll .55s linear infinite; }
  .car.two .wheel { animation-duration: .7s; }
  .car.three { width: 200px; height: 78px; bottom: 25px; animation: drive 16s linear infinite; animation-delay: -12.5s; }
  .car.three .wheel { animation-duration: .62s; }
  @keyframes roll { to { transform: rotate(360deg); } }
  .beam { animation: beam 2.2s ease-in-out infinite; }
  @keyframes beam { 0%, 100% { opacity: .35; } 50% { opacity: .7; } }

  .rule { height: 40px; background: url("guilloche.svg") center / 1200px 40px repeat-x; opacity: .55; }

  /* ---------- Sections ---------- */
  section { padding: 80px 0; }
  section.paper { background: var(--paper); color: var(--ink); }
  section.paper a { color: #6e5320; }
  h2 { font: 700 clamp(1.7rem, 4vw, 2.4rem)/1.15 var(--display); letter-spacing: .08em; margin: 0 0 14px; }
  section.paper h2 { color: var(--green); }
  section:not(.paper) h2 { color: var(--gold-light); }
  .intro { max-width: 62ch; font-size: 1.25rem; margin: 0 0 40px; }
  section.paper .intro { color: var(--ink-soft); }
  h3 { font: 600 1.05rem var(--display); letter-spacing: .06em; margin: 0 0 8px; }
  section.paper h3 { color: var(--green); }
  section:not(.paper) h3 { color: var(--gold-light); }

  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border-top: 1px solid var(--paper-line); }
  .grid > div { padding: 24px 24px 26px 0; border-bottom: 1px solid var(--paper-line); }
  .grid p { margin: 0; color: var(--ink-soft); }

  .tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
  .tool { border: 1px solid var(--green-line); border-radius: 4px; padding: 26px; background: var(--green-deep); }
  .tool p { margin: 0 0 14px; color: #d9d4c4; }
  .status { font: 600 .72rem var(--display); letter-spacing: .12em; color: var(--gold); }

  /* ---------- Wallet ---------- */
  .wallet-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
  .card { border: 1px solid var(--gold); border-radius: 4px; padding: 6px; background: rgba(8,36,25,.55); }
  .card-inner { border: 1px solid rgba(201,162,74,.4); border-radius: 2px; padding: 24px; }
  .card h3 { margin-bottom: 14px; }
  .kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 14px 0; font-size: 1.05rem; }
  .kv dt { font: 600 .74rem var(--display); letter-spacing: .12em; color: var(--gold); padding-top: 5px; }
  .kv dd { margin: 0; word-break: break-all; }
  .kv dd.big { font: 700 1.6rem var(--display); color: var(--gold-light); word-break: normal; }
  .badge { display: inline-flex; align-items: center; gap: 8px; font: 600 .74rem var(--display); letter-spacing: .12em; border: 1px solid var(--gold); color: var(--gold-light); border-radius: 2px; padding: 6px 10px 5px; }
  .badge.ok { background: var(--gold); color: var(--green-deep); }
  .badge.ok::before { content: "\2713"; font-weight: 900; }
  .msg { font-size: 1rem; color: #d9d4c4; min-height: 1.4em; margin: 10px 0 0; }
  .msg.err { color: #f0b7a8; }
  .steps { list-style: none; padding: 0; margin: 0; counter-reset: s; }
  .steps li { counter-increment: s; position: relative; padding: 0 0 18px 48px; color: #d9d4c4; }
  .steps li::before { content: counter(s); position: absolute; left: 0; top: 2px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-light); display: grid; place-items: center; font: 700 .9rem var(--display); }
  .steps strong { color: var(--cream); }
  .wallet-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

  /* ---------- Buy ---------- */
  .tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--paper-line); margin-bottom: 24px; flex-wrap: wrap; }
  .tab { font: 600 .8rem var(--display); letter-spacing: .1em; background: none; border: 1px solid transparent; border-bottom: none; color: var(--ink-soft); padding: 12px 18px 10px; cursor: pointer; border-radius: 3px 3px 0 0; }
  .tab[aria-selected="true"] { color: var(--green); border-color: var(--paper-line); background: #fff; margin-bottom: -1px; }
  .panel { display: none; }
  .panel.on { display: block; }
  .buy-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: 36px; align-items: start; }
  .widget-frame { background: #fff; border: 1px solid var(--paper-line); border-radius: 6px; min-height: 560px; overflow: hidden; position: relative; }
  #jupiter-plugin { width: 100%; min-height: 560px; }
  #debridgeWidget { width: 100%; }
  #debridgeWidget iframe { width: 100% !important; max-width: 100%; }
  .widget-note { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; font-size: .95rem; background: rgba(13,53,39,.92); color: var(--cream); text-align: center; }
  .callout { border-left: 3px solid var(--gold); padding: 6px 0 6px 18px; margin: 20px 0; color: var(--ink-soft); font-size: 1.05rem; }
  .callout strong { color: var(--green); }
  .buy-list { padding-left: 18px; color: var(--ink-soft); }
  .buy-list li { margin-bottom: 8px; }

  /* token */
  .token { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  table { width: 100%; border-collapse: collapse; font-size: 1.08rem; }
  th, td { text-align: left; padding: 11px 12px 11px 0; border-bottom: 1px solid var(--paper-line); vertical-align: top; }
  th { font: 600 .82rem var(--display); letter-spacing: .08em; color: var(--green); width: 42%; }
  td.num { font-variant-numeric: tabular-nums; }
  .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9rem; word-break: break-all; }
  .uses { list-style: none; padding: 0; margin: 0; }
  .uses li { padding: 14px 0; border-bottom: 1px solid var(--paper-line); }
  .uses li strong { display: block; font: 600 .95rem var(--display); letter-spacing: .05em; color: var(--green); margin-bottom: 2px; }
  .uses li span { color: var(--ink-soft); }
  .alloc { margin-top: 56px; }
  .alloc table th { width: auto; }
  .alloc td.num { white-space: nowrap; }
  .bar { display: inline-block; vertical-align: middle; width: 90px; height: 8px; margin-right: 10px; background: var(--paper-line); border-radius: 4px; overflow: hidden; }
  .bar i { display: block; height: 100%; background: var(--green); }
  .table-scroll { overflow-x: auto; }
  .note { font-size: 1rem; color: var(--ink-soft); margin-top: 14px; }

  /* roadmap */
  .road { list-style: none; padding: 0; margin: 0; counter-reset: phase; position: relative; }
  .road::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 60px; border-left: 2px dashed rgba(201,162,74,.5); }
  .road li { counter-increment: phase; position: relative; padding: 0 0 34px 68px; }
  .road li::before { content: counter(phase); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gold); background: var(--green); color: var(--gold-light); display: grid; place-items: center; font: 700 1rem var(--display); }
  .road li.now::before { background: var(--gold); color: var(--green-deep); }
  .road h3 { margin-top: 8px; }
  .road .when { font-style: italic; color: var(--gold); }
  .road p { margin: 4px 0 0; color: #d9d4c4; max-width: 60ch; }
  .gate { display: inline-block; margin-top: 8px; font: 600 .72rem var(--display); letter-spacing: .1em; color: var(--gold-light); border: 1px solid rgba(201,162,74,.5); border-radius: 2px; padding: 4px 8px 3px; }

  /* safety */
  .rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0; border-top: 1px solid var(--paper-line); }
  .rules p { margin: 0; padding: 22px 22px 22px 0; border-bottom: 1px solid var(--paper-line); font-size: 1.12rem; }
  .rules strong { color: var(--green); }

  /* faq */
  details { border-bottom: 1px solid var(--green-line); }
  summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; position: relative; font: 600 1.05rem var(--display); letter-spacing: .04em; color: var(--gold-light); }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font: 400 1.6rem var(--body); color: var(--gold); }
  details[open] summary::after { content: "\2212"; }
  details p { margin: 0 0 20px; color: #d9d4c4; max-width: 70ch; }
  .faq { max-width: 820px; }

  /* join */
  .join { text-align: center; }
  .join .intro { margin-left: auto; margin-right: auto; }

  footer { background: var(--green-deep); padding: 40px 0 48px; font-size: 1rem; color: #b9b39f; border-top: 1px solid var(--green-line); }
  footer .wrap { display: grid; gap: 14px; }
  footer .links { display: flex; gap: 20px; flex-wrap: wrap; }
  footer p { margin: 0; max-width: 80ch; }


  /* =================== Lavish showroom theme =================== */
  :root {
    --onyx: #0a0a0d; --onyx-2: #15151b;
    --ruby: #b3263a; --ruby-deep: #3d0c14;
    --sapphire: #2f5fb3; --midnight: #0c1630;
    --emerald: #1f9a68; --racing: #0f3d2c;
    --ivory: #f7f2e6; --champagne: #efe3c4;
    --gold-metal: linear-gradient(120deg, #8c6a1e 0%, #e6cd8a 20%, #fff4d2 34%, #c9a24a 52%, #8c6a1e 72%, #e6cd8a 88%, #fff4d2 100%);
    --carbon: repeating-linear-gradient(45deg, rgba(255,255,255,.028) 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,.028) 0 2px, transparent 2px 6px);
  }
  body { background: var(--onyx); }

  /* header: black lacquer with a ruby-gold-sapphire light line */
  header.site { background: rgba(10,10,13,.9); border-bottom: 0; }
  header.site::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--ruby) 20%, var(--gold-light) 50%, var(--sapphire) 80%, transparent); }

  /* polished gold buttons */
  .btn { background: var(--gold-metal); background-size: 220% 220%; background-position: 0% 50%; border-color: #e6cd8a; color: #1a1206;
    box-shadow: 0 6px 18px rgba(201,162,74,.25), inset 0 1px 0 rgba(255,255,255,.5); transition: background-position .7s ease, box-shadow .3s; }
  .btn:hover { background: var(--gold-metal); background-size: 220% 220%; background-position: 100% 50%; box-shadow: 0 8px 26px rgba(230,205,138,.45), inset 0 1px 0 rgba(255,255,255,.6); }
  .btn.ghost { background: rgba(0,0,0,.15); color: var(--gold-light); box-shadow: none; }
  .btn.ghost:hover { background: rgba(201,162,74,.14); box-shadow: 0 0 18px rgba(201,162,74,.25); }

  /* hero: showroom spotlights in gold, sapphire and ruby */
  .hero { background:
      radial-gradient(ellipse 38% 55% at 6% 18%, rgba(47,95,179,.42), transparent 70%),
      radial-gradient(ellipse 38% 55% at 94% 22%, rgba(179,38,58,.42), transparent 70%),
      radial-gradient(ellipse 30% 40% at 50% 92%, rgba(31,154,104,.18), transparent 70%),
      linear-gradient(180deg, #0a0a0d 0%, #121019 60%, #0a0a0d 100%); }
  .hero::before { background: radial-gradient(circle at 50% 28%, rgba(230,205,138,.24), transparent 46%); }
  .hero h1 { background: var(--gold-metal); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: none; filter: drop-shadow(0 0 22px rgba(201,162,74,.35)); animation: foil 7s ease-in-out infinite; }
  @keyframes foil { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
  .hero .tagline { color: var(--champagne); }
  .ca { background: rgba(0,0,0,.4); box-shadow: 0 0 40px rgba(201,162,74,.12); }

  /* road: night street with reflections */
  .road-strip { background: linear-gradient(180deg, rgba(10,10,13,0) 0%, rgba(10,10,13,.7) 60%, #07070a 100%); }
  .road-strip .asphalt { background: linear-gradient(180deg, #17171d, #0b0b0e); border-top: 1px solid rgba(230,205,138,.4); box-shadow: 0 -1px 24px rgba(230,205,138,.12); }

  /* ivory sections with jewel accents */
  section.paper { background: linear-gradient(180deg, var(--ivory), var(--champagne)); }
  section.paper h2 { color: var(--ruby-deep); }
  section.paper h3, section.paper th, .uses li strong { color: var(--midnight); }
  section.paper a { color: #7a2030; }
  h2::after { content: ""; display: block; width: 72px; height: 3px; margin-top: 14px; border-radius: 2px; background: var(--gold-metal); }
  .join h2::after { margin-left: auto; margin-right: auto; }
  #club .grid > div::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; margin-bottom: 14px; }
  #club .grid > div:nth-child(1)::before { background: var(--ruby); }
  #club .grid > div:nth-child(2)::before { background: var(--sapphire); }
  #club .grid > div:nth-child(3)::before { background: var(--emerald); }
  #club .grid > div:nth-child(4)::before { background: var(--gold-metal); }
  .rules strong { color: var(--ruby); }
  .callout { border-left-color: var(--ruby); }
  .callout strong { color: var(--ruby-deep); }
  .tab[aria-selected="true"] { color: var(--ruby-deep); border-top: 3px solid var(--ruby); }
  .widget-frame { box-shadow: 0 20px 50px rgba(61,12,20,.18); border-color: #d8c79c; }
  .widget-note { background: rgba(12,22,48,.94); }
  .alloc tbody tr:nth-child(1) .bar i { background: var(--ruby); }
  .alloc tbody tr:nth-child(2) .bar i { background: var(--sapphire); }
  .alloc tbody tr:nth-child(3) .bar i { background: var(--emerald); }
  .alloc tbody tr:nth-child(4) .bar i { background: #c9a24a; }
  .alloc tbody tr:nth-child(5) .bar i { background: var(--midnight); }
  .alloc tbody tr:nth-child(6) .bar i { background: #e07a3a; }

  /* tools: midnight sapphire */
  section.midnight { background: radial-gradient(ellipse 60% 70% at 85% 0%, rgba(47,95,179,.45), transparent 70%), linear-gradient(180deg, var(--midnight), #070d1d); }
  .tool { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); border: 1px solid rgba(201,162,74,.28); border-top: 3px solid var(--ruby);
    box-shadow: 0 18px 40px rgba(0,0,0,.35); transition: transform .3s, box-shadow .3s; }
  .tool:nth-child(2) { border-top-color: var(--sapphire); } .tool:nth-child(3) { border-top-color: var(--emerald); }
  .tool:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0,0,0,.45), 0 0 24px rgba(201,162,74,.15); }

  /* wallet: oxblood leather with gold stitching */
  section.leather { background:
      radial-gradient(ellipse 55% 70% at 15% 0%, rgba(179,38,58,.45), transparent 70%),
      radial-gradient(rgba(0,0,0,.18) 1px, transparent 1.4px) 0 0 / 5px 5px,
      linear-gradient(180deg, #4a0f19, #22070c); }
  section.leather .card { background: rgba(0,0,0,.28); box-shadow: 0 20px 50px rgba(0,0,0,.4); }
  section.leather .card-inner { border: 1.5px dashed rgba(230,205,138,.55); }
  section.leather .steps li::before { background: rgba(0,0,0,.25); }

  /* roadmap: British racing green */
  section.racing { background: radial-gradient(ellipse 50% 60% at 90% 10%, rgba(31,154,104,.3), transparent 70%), linear-gradient(180deg, var(--racing), #061a12); }
  .road li::before { background: #0b2a1f; }
  .road li.now::before { background: var(--gold-metal); color: #1a1206; box-shadow: 0 0 18px rgba(230,205,138,.5); }

  /* FAQ and footer: carbon fibre */
  section.carbon { background-color: #0d0d11; background-image: var(--carbon); }
  section.carbon details { border-bottom-color: rgba(201,162,74,.22); }
  footer { background-color: #07070a; background-image: var(--carbon); border-top: 1px solid rgba(201,162,74,.3); }

  section.paper .btn.ghost { background: transparent; }
  section.paper .btn.ghost:hover { background: rgba(122,32,48,.08); }
  @media (prefers-reduced-motion: reduce) { .hero h1 { animation: none; } .tool { transition: none; } }


  /* =================== Fuel the scene =================== */
  .aud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .aud > div { background: #fffaf0; border: 1px solid #e2d4ad; border-top: 4px solid var(--ruby); border-radius: 4px; padding: 22px 20px 20px; box-shadow: 0 12px 30px rgba(61,12,20,.08); }
  .aud > div:nth-child(2) { border-top-color: var(--sapphire); }
  .aud > div:nth-child(3) { border-top-color: var(--emerald); }
  .aud > div:nth-child(4) { border-top-color: #c9a24a; }
  .aud .icon { width: 44px; height: 44px; margin-bottom: 12px; }
  .aud p { margin: 0 0 10px; color: var(--ink-soft); font-size: 1.05rem; }
  .aud .perk { font-size: .98rem; color: var(--ruby-deep); font-style: italic; margin: 0; }
  .fund-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; margin-top: 56px; align-items: start; }
  .flow { list-style: none; padding: 0; margin: 0; counter-reset: f; }
  .flow li { counter-increment: f; position: relative; padding: 0 0 20px 54px; color: var(--ink-soft); }
  .flow li::before { content: counter(f); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--gold-metal); color: #1a1206; display: grid; place-items: center; font: 700 .95rem var(--display); box-shadow: 0 4px 12px rgba(201,162,74,.35); }
  .flow strong { display: block; color: var(--midnight); font: 600 .98rem var(--display); letter-spacing: .04em; margin-bottom: 2px; }
  .fundbox { background: linear-gradient(160deg, #0c1630, #1a0a12); color: var(--cream); border-radius: 6px; padding: 28px; border: 1px solid rgba(201,162,74,.4); box-shadow: 0 20px 50px rgba(12,22,48,.25); }
  .fundbox h3 { color: var(--gold-light) !important; }
  .fundbox p { color: #d9d4c4; margin: 0 0 14px; }
  .projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 56px; }
  .proj { background: #fffaf0; border: 1px solid #e2d4ad; border-radius: 6px; overflow: hidden; box-shadow: 0 12px 30px rgba(61,12,20,.08); }
  .proj .art { height: 120px; display: grid; place-items: center; }
  .proj .art svg { width: 78%; height: 100%; }
  .proj .body { padding: 18px 20px 20px; }
  .proj .tag { font: 600 .68rem var(--display); letter-spacing: .14em; color: var(--ruby); }
  .proj h4 { font: 600 1.02rem var(--display); color: var(--midnight); margin: 6px 0 10px; letter-spacing: .03em; }
  .meter { height: 8px; border-radius: 4px; background: #e6dcc2; overflow: hidden; }
  .meter i { display: block; height: 100%; border-radius: 4px; }
  .proj .nums { display: flex; justify-content: space-between; font-size: .98rem; color: var(--ink-soft); margin: 8px 0 10px; font-variant-numeric: tabular-nums; }
  .proj .nums b { color: var(--ink); }
  .proj .perks { font-size: .95rem; color: var(--ink-soft); margin: 0; }
  .example { font: 600 .66rem var(--display); letter-spacing: .14em; color: #8a7a55; border: 1px solid #d8c79c; border-radius: 2px; padding: 2px 6px 1px; margin-left: 6px; vertical-align: 2px; }
  .promise { margin-top: 36px; padding: 18px 22px; border: 1px solid #d8c79c; border-radius: 4px; background: rgba(255,250,240,.7); color: var(--ink-soft); font-size: 1.05rem; }
  .promise strong { color: var(--ruby-deep); }
  section.paper .btn:not(.ghost) { color: #1a1206; }
  .fund-how h3 { margin-bottom: 16px; }
  .fund-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
  @media (max-width: 960px) { .aud { grid-template-columns: repeat(2, minmax(0, 1fr)); } .projects, .fund-how { grid-template-columns: 1fr; } }
  @media (max-width: 560px) { .aud { grid-template-columns: 1fr; } }

  @media (max-width: 960px) {
    nav.main { display: none; }
    header.site .btn { margin-left: auto; }
    header.site .wallet-btn { margin-left: 0; }
    .token, .wallet-grid, .buy-grid { grid-template-columns: 1fr; gap: 32px; }
    section { padding: 60px 0; }
  }
  @media (max-width: 520px) {
    .ca-inner { grid-template-columns: 1fr; }
    .copy { justify-self: start; }
    th { width: 48%; }
    .alloc td:nth-child(4), .alloc th:nth-child(4) { display: none; }
    .bar { width: 48px; margin-right: 6px; }
    header.site .btn.wp { display: none; }
    .car { width: 170px; height: 66px; } .car.two { width: 130px; height: 50px; } .car.three { width: 150px; height: 58px; }
    .road-strip { height: 120px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .coin3d, .shine, .coin-stage::before, .coin-stage::after, .glow-ring, .car, .wheel, .lane, .beam { animation: none !important; }
    .car.one { transform: translateX(12vw); } .car.two { transform: translateX(60vw); } .car.three { transform: translateX(36vw); }
  }

/* =================== Builder board pages =================== */
.page-head { padding: 56px 0 40px; background: radial-gradient(ellipse 40% 70% at 5% 10%, rgba(47,95,179,.4), transparent 70%), radial-gradient(ellipse 40% 70% at 95% 10%, rgba(179,38,58,.4), transparent 70%), linear-gradient(180deg, #0a0a0d, #121019); }
.page-head h1 { font: 700 clamp(2rem, 5vw, 3.2rem)/1.1 var(--display); letter-spacing: .1em; margin: 0 0 12px; background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-head p { max-width: 62ch; color: #d9d4c4; margin: 0; font-size: 1.2rem; }
.crumb { font: 600 .75rem var(--display); letter-spacing: .14em; color: var(--gold); text-decoration: none; display: inline-block; margin-bottom: 14px; }
.form { display: grid; gap: 22px; max-width: 760px; }
.form fieldset { border: 1px solid #e2d4ad; border-radius: 6px; padding: 22px 22px 6px; margin: 0; background: #fffaf0; }
.form legend { font: 700 .9rem var(--display); letter-spacing: .1em; color: var(--ruby-deep); padding: 0 8px; }
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label { font: 600 .82rem var(--display); letter-spacing: .06em; color: var(--midnight); }
.field .hint { font-size: .98rem; color: var(--ink-soft); margin: 0; }
.field input, .field select, .field textarea { font: 400 1.08rem var(--body); color: var(--ink); background: #fff; border: 1px solid #cdbf98; border-radius: 4px; padding: 11px 12px; width: 100%; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 1.05rem; color: var(--ink-soft); margin-bottom: 18px; }
.check input { margin-top: 6px; width: 18px; height: 18px; accent-color: #b3263a; }
.walletline { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.walletline code { font: 500 .92rem ui-monospace, Consolas, monospace; word-break: break-all; background: #fff; border: 1px solid #e2d4ad; border-radius: 4px; padding: 8px 10px; }
.status-msg { font-size: 1.05rem; min-height: 1.5em; margin: 0; }
.status-msg.err { color: #b3263a; } .status-msg.ok { color: #1f7a50; }
.done-card { display: none; border: 1px solid #b9dcc6; background: #effaf3; border-radius: 6px; padding: 22px; }
.done-card.on { display: block; }
.rulesbox { font-size: 1.02rem; color: var(--ink-soft); }
.rulesbox li { margin-bottom: 6px; }

.pj { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 40px; align-items: start; }
.pj-cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; background: linear-gradient(135deg, #3d0c14, #0c1630); box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.pj-story { white-space: pre-line; color: var(--ink); }
.pj-side { position: sticky; top: 84px; display: grid; gap: 18px; }
.panelbox { background: #fffaf0; border: 1px solid #e2d4ad; border-radius: 6px; padding: 22px; box-shadow: 0 12px 30px rgba(61,12,20,.08); }
.panelbox h3 { margin-bottom: 10px; }
.big-num { font: 700 1.9rem var(--display); color: var(--ruby-deep); }
.stat-row { display: flex; gap: 22px; flex-wrap: wrap; margin: 10px 0 0; color: var(--ink-soft); }
.stat-row b { display: block; font: 700 1.2rem var(--display); color: var(--midnight); }
.phase { display: inline-block; font: 600 .7rem var(--display); letter-spacing: .12em; padding: 5px 9px 4px; border-radius: 2px; background: #e6dcc2; color: var(--ink); }
.phase.funding { background: #dbe6fb; color: #0c1630; } .phase.funded { background: #cdeedd; color: #0f3d2c; } .phase.ended, .phase.closed { background: #eadfe1; color: #3d0c14; }
.amount-in { display: flex; gap: 8px; align-items: stretch; }
.amount-in input { flex: 1; }
.amount-in span { display: grid; place-items: center; padding: 0 12px; border: 1px solid #cdbf98; border-radius: 4px; background: #f3ead2; font: 600 .82rem var(--display); }
.backers { list-style: none; padding: 0; margin: 0; }
.backers li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e2d4ad; font-size: 1rem; }
.backers li small { display: block; color: var(--ink-soft); font-style: italic; }
.backers .w { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }
.paid-tag { font: 600 .62rem var(--display); letter-spacing: .1em; color: #1f7a50; margin-left: 6px; }
.proj a.cover-link { display: block; color: inherit; text-decoration: none; }
.proj .art img { width: 100%; height: 100%; object-fit: cover; }
.proj h4 a { color: inherit; text-decoration: none; }
.board-empty { color: var(--ink-soft); font-style: italic; }
@media (max-width: 960px) { .pj { grid-template-columns: 1fr; } .pj-side { position: static; } }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
[hidden] { display: none !important; }
section.paper .btn.ghost { color: #7a2030; border-color: #7a2030; }

/* =================== Accounts =================== */
.acct-link { display: inline-flex; align-items: center; gap: 8px; color: var(--cream); text-decoration: none; font-size: 1.02rem; white-space: nowrap; }
.acct-link:hover { color: var(--gold-light); }
.mini-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gold); display: inline-block; }
.mini-avatar.initial { display: inline-grid; place-items: center; background: var(--gold-metal); color: #1a1206; font: 700 .85rem var(--display); }
.auth-wrap { max-width: 460px; margin: 0 auto; }
.auth-card { background: #fffaf0; border: 1px solid #e2d4ad; border-radius: 8px; padding: 28px; box-shadow: 0 20px 50px rgba(61,12,20,.1); }
.social { display: grid; gap: 10px; margin-bottom: 18px; }
.social a { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: 4px; text-decoration: none; font: 600 .95rem var(--body); border: 1px solid #cdbf98; background: #fff; color: #1b1b22; }
.social a:hover { border-color: #8c6a1e; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.social a.apple { background: #000; color: #fff; border-color: #000; }
.social a.amazon { background: #ffd814; border-color: #fcd200; color: #0f1111; }
.social svg { width: 20px; height: 20px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-size: .95rem; margin: 6px 0 16px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: #e2d4ad; }
.linkbtn { background: none; border: 0; padding: 0; color: #7a2030; text-decoration: underline; cursor: pointer; font: inherit; }
.acct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.profile-row { display: flex; gap: 18px; align-items: center; margin-bottom: 16px; }
.avatar-lg { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 2px solid #c9a24a; background: #efe3c4; display: grid; place-items: center; font: 700 2rem var(--display); color: #7a2030; flex: none; }
.member-card { position: relative; border-radius: 14px; padding: 24px; color: var(--cream); overflow: hidden; min-height: 210px;
  background: radial-gradient(ellipse 70% 90% at 100% 0%, rgba(179,38,58,.55), transparent 60%), radial-gradient(ellipse 60% 80% at 0% 100%, rgba(47,95,179,.5), transparent 60%), linear-gradient(135deg, #0a0a0d, #1a1420);
  box-shadow: 0 24px 50px rgba(0,0,0,.35), inset 0 0 0 1px rgba(230,205,138,.45); }
.member-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,240,200,.18) 50%, transparent 60%); background-size: 250% 250%; animation: sweep 5s ease-in-out infinite; pointer-events: none; }
.member-card .mc-top { display: flex; justify-content: space-between; align-items: center; }
.member-card .mc-brand { display: flex; align-items: center; gap: 10px; font: 700 .9rem var(--display); letter-spacing: .16em; color: var(--gold-light); }
.member-card .mc-brand img { width: 34px; height: 34px; }
.member-card .mc-tier { font: 700 1.5rem var(--display); letter-spacing: .12em; margin: 22px 0 4px; background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.member-card .mc-name { font-size: 1.15rem; }
.member-card .mc-code { font: 600 .95rem ui-monospace, Consolas, monospace; letter-spacing: .2em; color: var(--gold-light); margin-top: 14px; }
.member-card .mc-qr { position: absolute; right: 20px; bottom: 20px; background: #fff; padding: 6px; border-radius: 6px; }
.member-card .mc-qr img, .member-card .mc-qr canvas { display: block; width: 84px !important; height: 84px !important; }
.wlist { list-style: none; padding: 0; margin: 0 0 12px; }
.wlist li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #e2d4ad; font-size: 1rem; }
.wlist code { font-size: .88rem; }
.notice { border-radius: 6px; padding: 12px 16px; margin-bottom: 18px; font-size: 1.02rem; }
.notice.warn { background: #fff4d6; border: 1px solid #f0d58a; }
.notice.good { background: #e9f7ef; border: 1px solid #b9dcc6; }
.notice.bad { background: #fbe9ec; border: 1px solid #efb9c2; }
.backer-row { display: flex; align-items: center; gap: 12px; }
.backer-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid #d8c79c; background: #efe3c4; display: grid; place-items: center; font: 700 1rem var(--display); color: #7a2030; }
.backer-av.anon { background: #2a2a33; color: #e6cd8a; }
.tier-chip { font: 600 .6rem var(--display); letter-spacing: .12em; color: #8c6a1e; border: 1px solid #d8c79c; border-radius: 2px; padding: 1px 5px; margin-left: 6px; vertical-align: 2px; }
.backer-head { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
.backer-head small { color: var(--ink-soft); }
@media (max-width: 860px) { .acct-grid { grid-template-columns: 1fr; } .acct-name { display: none; } }
nav.main a { white-space: nowrap; }

/* =================== Community =================== */
.cm-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.cm-side { position: sticky; top: 84px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.cm-box { background: #fffaf0; border: 1px solid #e2d4ad; border-radius: 10px; padding: 18px; box-shadow: 0 10px 26px rgba(61,12,20,.06); }
.cm-box h3 { font-size: .95rem; margin: 0 0 10px; }
.cm-nav a, .cm-nav button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; border-radius: 6px; color: var(--ink); text-decoration: none; font: 500 1.02rem var(--body); background: none; border: 0; cursor: pointer; text-align: left; }
.cm-nav a:hover, .cm-nav button:hover { background: #f3ead2; }
.cm-nav .on { background: #efe3c4; color: var(--ruby-deep); font-weight: 600; }
.count-pill { font: 600 .7rem var(--display); background: var(--ruby); color: #fff; border-radius: 10px; padding: 2px 7px 1px; }
.composer textarea { width: 100%; min-height: 96px; border: 1px solid #cdbf98; border-radius: 8px; padding: 12px; font: 400 1.1rem var(--body); resize: vertical; background: #fff; }
.composer textarea:focus { outline: 2px solid var(--gold); }
.composer .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.kind-pills { display: inline-flex; gap: 4px; background: #f3ead2; border-radius: 20px; padding: 3px; }
.kind-pills button { border: 0; background: none; padding: 6px 12px; border-radius: 16px; font: 600 .78rem var(--display); letter-spacing: .05em; color: var(--ink-soft); cursor: pointer; }
.kind-pills button.on { background: #fff; color: var(--ruby-deep); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.file-btn { font-size: .98rem; color: #7a2030; cursor: pointer; }
.file-btn input { display: none; }
.composer select { font: inherit; border: 1px solid #cdbf98; border-radius: 6px; padding: 6px 8px; background: #fff; max-width: 220px; }
.feed-tabs { display: flex; gap: 4px; border-bottom: 1px solid #e2d4ad; margin: 18px 0 0; overflow-x: auto; }
.feed-tabs button { background: none; border: 0; padding: 12px 16px; font: 600 .8rem var(--display); letter-spacing: .08em; color: var(--ink-soft); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; }
.feed-tabs button.on { color: var(--ruby-deep); border-bottom-color: var(--ruby); }
.post { background: #fffaf0; border: 1px solid #e2d4ad; border-radius: 10px; padding: 18px 18px 10px; margin-top: 14px; }
.post-head { display: flex; gap: 12px; align-items: flex-start; }
.av { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; background: #efe3c4; display: grid; place-items: center; font: 700 1.1rem var(--display); color: #7a2030; border: 1px solid #d8c79c; text-decoration: none; }
.av.lg { width: 112px; height: 112px; font-size: 2.6rem; border: 4px solid #fffaf0; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.av.sm { width: 34px; height: 34px; font-size: .9rem; }
.post-who { flex: 1; min-width: 0; }
.post-who a.nm { font-weight: 600; color: var(--ink); text-decoration: none; }
.post-who a.nm:hover { text-decoration: underline; }
.post-who .hd { color: var(--ink-soft); font-size: .98rem; }
.kind-badge { font: 600 .62rem var(--display); letter-spacing: .12em; padding: 2px 7px 1px; border-radius: 2px; margin-left: 6px; vertical-align: 2px; }
.kind-badge.mission { background: #e7eefb; color: #0c1630; }
.kind-badge.showcase { background: #f6e7ea; color: #7a2030; }
.role-badge { font: 600 .6rem var(--display); letter-spacing: .12em; padding: 2px 6px 1px; border-radius: 2px; background: #0c1630; color: #e6cd8a; margin-left: 6px; vertical-align: 2px; }
.post-body { margin: 10px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.12rem; line-height: 1.55; }
.post-body a { color: #2f5fb3; }
.post-img { margin-top: 12px; border-radius: 10px; max-height: 520px; width: 100%; object-fit: cover; border: 1px solid #e2d4ad; }
.post-proj { display: inline-flex; gap: 8px; align-items: center; margin-top: 12px; padding: 8px 12px; border: 1px solid #d8c79c; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 1rem; background: #fff; }
.post-proj b { font: 600 .66rem var(--display); letter-spacing: .1em; color: var(--ruby); }
.post-actions { display: flex; gap: 6px; margin-top: 10px; border-top: 1px solid #efe3c4; padding-top: 6px; }
.post-actions button { background: none; border: 0; padding: 6px 10px; border-radius: 6px; font: 500 .98rem var(--body); color: var(--ink-soft); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.post-actions button:hover { background: #f3ead2; color: var(--ink); }
.post-actions button.liked { color: var(--ruby); }
.post-actions svg { width: 18px; height: 18px; }
.post-actions .grow { flex: 1; }
.held-note { margin-top: 10px; font-size: .95rem; background: #fff4d6; border: 1px solid #f0d58a; border-radius: 6px; padding: 6px 10px; }
.comments { margin: 6px 0 4px; padding-left: 4px; }
.cmt { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid #efe3c4; }
.cmt .b { flex: 1; font-size: 1.02rem; white-space: pre-wrap; word-wrap: break-word; }
.cmt .b small { color: var(--ink-soft); }
.cmt-form { display: flex; gap: 8px; padding: 10px 0 6px; }
.cmt-form input { flex: 1; font: inherit; border: 1px solid #cdbf98; border-radius: 20px; padding: 8px 14px; background: #fff; }
.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: 34px; background: #fff; border: 1px solid #e2d4ad; border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.14); z-index: 5; min-width: 180px; padding: 6px; }
.menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 4px; font: inherit; cursor: pointer; color: var(--ink); }
.menu button:hover { background: #f3ead2; }
.menu button.danger { color: #b3263a; }
.who-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; }
.who-row .t { flex: 1; min-width: 0; font-size: .98rem; }
.who-row .t a { font-weight: 600; color: var(--ink); text-decoration: none; }
.who-row .t small { display: block; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-btn { font: 600 .7rem var(--display); letter-spacing: .08em; border: 1px solid #7a2030; color: #7a2030; background: none; border-radius: 14px; padding: 6px 10px 5px; cursor: pointer; white-space: nowrap; }
.mini-btn.on { background: #7a2030; color: #fff; }
.rules-list { padding-left: 18px; margin: 0; font-size: .98rem; color: var(--ink-soft); }
.rules-list li { margin-bottom: 6px; }
.loadmore { display: block; margin: 18px auto 0; }
.modal-bg { position: fixed; inset: 0; background: rgba(10,10,13,.55); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: #fffaf0; border-radius: 12px; padding: 24px; width: min(460px, 100%); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.modal h3 { margin-top: 0; }
.modal label.opt { display: flex; gap: 10px; padding: 6px 0; font-size: 1.02rem; cursor: pointer; }
.modal textarea { width: 100%; font: inherit; border: 1px solid #cdbf98; border-radius: 6px; padding: 8px; min-height: 70px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #0c1630; color: #f3eedf; padding: 12px 18px; border-radius: 8px; z-index: 60; box-shadow: 0 10px 30px rgba(0,0,0,.3); font-size: 1rem; }

/* profile */
.pf-banner { height: 190px; background: radial-gradient(ellipse 50% 80% at 10% 20%, rgba(47,95,179,.55), transparent 70%), radial-gradient(ellipse 50% 80% at 90% 30%, rgba(179,38,58,.55), transparent 70%), linear-gradient(135deg, #0a0a0d, #1a1420); }
.pf-head { display: flex; gap: 20px; align-items: flex-end; margin-top: -56px; flex-wrap: wrap; }
.pf-head .info { flex: 1; min-width: 220px; padding-bottom: 6px; }
.pf-head h1 { font: 700 1.8rem var(--display); letter-spacing: .04em; margin: 0; color: var(--ink); }
.pf-head .hd { color: var(--ink-soft); }
.pf-actions { display: flex; gap: 8px; padding-bottom: 10px; flex-wrap: wrap; }
.pf-meta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--ink-soft); font-size: 1rem; margin: 12px 0; }
.pf-meta b { color: var(--ink); }
.mission-card { border-left: 4px solid var(--ruby); background: #fff; border-radius: 6px; padding: 14px 18px; margin: 16px 0; }
.mission-card b { font: 600 .7rem var(--display); letter-spacing: .14em; color: var(--ruby); display: block; margin-bottom: 4px; }
.pf-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }

/* messages */
.dm { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: calc(100vh - 180px); min-height: 520px; background: #fffaf0; border: 1px solid #e2d4ad; border-radius: 10px; overflow: hidden; }
.dm-list { border-right: 1px solid #e2d4ad; overflow-y: auto; }
.dm-item { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #efe3c4; cursor: pointer; text-decoration: none; color: var(--ink); }
.dm-item:hover, .dm-item.on { background: #f3ead2; }
.dm-item .t { flex: 1; min-width: 0; }
.dm-item .t small { display: block; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-thread { display: flex; flex-direction: column; min-width: 0; }
.dm-top { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid #e2d4ad; }
.dm-top .t { flex: 1; }
.dm-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 72%; padding: 9px 13px; border-radius: 16px; font-size: 1.04rem; white-space: pre-wrap; word-wrap: break-word; position: relative; }
.bubble.them { background: #fff; border: 1px solid #e2d4ad; align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.me { background: #0c1630; color: #f3eedf; align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble small { display: block; font-size: .78rem; opacity: .7; margin-top: 3px; }
.bubble .rep { position: absolute; right: -26px; top: 6px; background: none; border: 0; color: var(--ink-soft); cursor: pointer; opacity: 0; font-size: .9rem; }
.bubble:hover .rep { opacity: 1; }
.dm-form { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid #e2d4ad; }
.dm-form textarea { flex: 1; font: inherit; border: 1px solid #cdbf98; border-radius: 18px; padding: 9px 14px; resize: none; height: 44px; }
.dm-safety { font-size: .92rem; color: var(--ink-soft); padding: 8px 16px; background: #fff4d6; border-bottom: 1px solid #f0d58a; }

/* support */
.sp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.ticket-item { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e2d4ad; text-decoration: none; color: var(--ink); }
.ticket-item small { color: var(--ink-soft); display: block; }
.status-chip { font: 600 .62rem var(--display); letter-spacing: .1em; padding: 3px 8px 2px; border-radius: 2px; white-space: nowrap; align-self: center; }
.status-chip.open { background: #fff4d6; color: #6b4f12; } .status-chip.pending { background: #dbe6fb; color: #0c1630; }
.status-chip.resolved, .status-chip.closed { background: #e9f7ef; color: #0f3d2c; }
.thread-msg { border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; white-space: pre-wrap; }
.thread-msg.member { background: #fff; border: 1px solid #e2d4ad; }
.thread-msg.staff { background: #0c1630; color: #f3eedf; }
.thread-msg.system { background: none; color: var(--ink-soft); font-style: italic; padding: 4px 0; }
.thread-msg small { display: block; font-size: .82rem; opacity: .75; margin-bottom: 6px; font-style: normal; }
.hp { position: absolute; left: -9999px; }
@media (max-width: 1100px) { .cm-wrap { grid-template-columns: minmax(0, 1fr) 280px; } .cm-left { display: none; } }
@media (max-width: 860px) { .cm-wrap, .sp-grid { grid-template-columns: minmax(0, 1fr); } .cm-side { position: static; } .dm { grid-template-columns: 1fr; height: auto; } .dm.has-thread .dm-list { display: none; } .dm:not(.has-thread) .dm-thread { display: none; } .dm-msgs { min-height: 50vh; } }
.faq-light details { border-bottom: 1px solid #e2d4ad; }
.faq-light summary { cursor: pointer; padding: 14px 30px 14px 0; font: 600 1rem var(--display); letter-spacing: .03em; color: var(--midnight); list-style: none; position: relative; }
.faq-light summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font: 400 1.4rem var(--body); color: #8c6a1e; }
.faq-light details[open] summary::after { content: "\2212"; }
.faq-light p { margin: 0 0 14px; color: var(--ink-soft); }
.field select { font: 400 1.08rem var(--body); }

/* =================== Coin car scroll animation =================== */
.hero { position: relative; }
.coin-car { position: absolute; left: 0; top: 0; z-index: 4; width: 240px; height: 160px; transform-origin: 50% 100%; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.coin-car svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.coin-car .cc-beams { opacity: 0; transition: opacity .4s; }
.coin-car.moving .cc-beams { opacity: 1; }
.coin-car .cc-lamps { opacity: .55; }
.coin-car.moving .cc-lamps { opacity: 1; }
.coin-car .cc-brake { opacity: 0; }
.coin-car.moving { animation: cc-rumble .35s ease-in-out infinite; }
@keyframes cc-rumble { 0%, 100% { margin-top: 0; } 50% { margin-top: -1.5px; } }
/* when it reaches the street: brake lights, a small settle on the suspension, headlights blink twice */
.coin-car.parked .cc-brake { animation: cc-brake 1.2s ease-out 1 both; }
.coin-car.parked svg { animation: cc-settle .6s cubic-bezier(.3,1.6,.5,1) 1; transform-origin: 50% 100%; }
.coin-car.parked .cc-lamps { animation: cc-blink 1.4s ease-in-out .3s 1 both; }
@keyframes cc-brake { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cc-settle { 0% { transform: scaleY(.94); } 60% { transform: scaleY(1.03); } 100% { transform: scaleY(1); } }
@keyframes cc-blink { 0%, 40%, 80% { opacity: 1; } 20%, 60% { opacity: .25; } 100% { opacity: .9; } }
.road-strip .car { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .coin-car, .coin-car svg, .coin-car * { animation: none !important; } .coin-car { opacity: 1; } }