:root{
    --paper:#cfa96a; --ink:#191815; --ink-2:#2b2823; --orange:#f08a07; --shadow:rgba(0,0,0,.18);
    /* 🔧 point these at your actual files (can be the same file for all three) */
    --bg-desktop: url("../img/../img/../img/dm-business2.png");
    --bg-tablet:  url("../img/../img/../img/dm-business2.png");
    --bg-mobile:  url("../img/../img/../img/dm-business2.png");
    /* footer */
    --footer-h: 64px;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; font:16px/1.45 ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;
    color:var(--ink); background:var(--paper);
    /* give room so sticky footer doesn’t overlap content */
    padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom,0px));
    background-image:
      radial-gradient(1px 1px at 20px 30px, rgba(0,0,0,.07) 0 1px, transparent 2px),
      radial-gradient(1px 1px at 70px 80px, rgba(0,0,0,.05) 0 1px, transparent 2px);
    background-size:180px 180px,220px 220px;
  }

  /* ===== HERO ===== */
  .hero{
    position:relative;
    min-height: calc(100svh - var(--footer-h)); /* footer always visible */
    overflow:hidden; display:grid; gap:32px; align-items:center;
    grid-template-columns: 1.05fr .95fr;
    padding: clamp(18px,5vw,48px);
    isolation:isolate; /* keeps bg/vignette behind content */
  }
  @media (max-width:980px){ .hero{ grid-template-columns:1fr; gap:20px; text-align:center; padding:20px } }

  /* === Docked at viewport center (left edge of PNG on the center line) === */
  .bg{ position:absolute; inset:0; z-index:-2; pointer-events:none; }
  :root{ --dmW: clamp(420px, 42vw, 820px); --dockOffset: 0px; } /* tweak --dockOffset to nudge left/right */

  .bg::before{
    content:"";
    position:absolute; top:0;
    left: calc(50vw + var(--dockOffset));
    height: 100%;
    width: var(--dmW);
    background-image: var(--bg-desktop);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    filter: saturate(.95) contrast(.98);
  }
  @media (max-width:1024px){
    .bg::before{
      background-image: var(--bg-tablet);
      width: min(60vw, 640px);
      left: auto; right: clamp(8px, 3vw, 28px);
      background-position: right center;
      transform:none;
    }
  }
  @media (max-width:640px){
    .bg::before{
      background-image: var(--bg-mobile);
      width: min(92vw, 560px);
      left: 50%; right:auto; transform: translateX(-50%);
      background-position: center 60%;
    }
  }

  .vignette{
    position:absolute; inset:-20%; z-index:-1; pointer-events:none;
    background:
      radial-gradient(120% 80% at 20% 40%, rgba(0,0,0,.28), transparent 55%),
      radial-gradient(120% 80% at 80% 60%, rgba(0,0,0,.22), transparent 55%),
      linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.02) 40%, transparent 65%);
    mix-blend-multiply;
  }

  .brand{ display:flex; align-items:center; gap:12px; font-weight:700 }
  .mark{ width:44px; height:44px; border-radius:10px; background:var(--ink); position:relative; box-shadow:0 6px 18px var(--shadow) }
  .mark:before{ content:""; position:absolute; inset:10px; background:linear-gradient(#fff 0 0) left/70% 45% no-repeat;
    -webkit-mask:
      radial-gradient(8px 8px at 32% 45%, #000 98%, transparent),
      radial-gradient(8px 8px at 68% 45%, #000 98%, transparent),
      radial-gradient(22px 12px at 50% 65%, #000 98%, transparent); mask:inherit; }

  h1{ margin:10px 0 6px; font-size:clamp(32px,6.2vw,70px); line-height:1.03; text-shadow:0 3px 0 rgba(0,0,0,.08) }
  .subtitle{ color:var(--ink-2); font-size:clamp(16px,2.2vw,20px); max-width:44ch; opacity:.95 }
  @media (max-width:980px){ .subtitle{margin-inline:auto} }

  .cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:22px }
  @media (max-width:980px){ .cta{ justify-content:center } }

  .dm-btn{
    --bg: var(--orange);
    display:inline-flex; align-items:center; justify-content:center;
    padding:14px 22px; min-width:140px; border-radius:14px;
    background:linear-gradient(180deg,#ffb24a,var(--bg));
    border:2px solid var(--ink); color:#1a1205; font-weight:900; text-transform:uppercase; letter-spacing:.5px;
    box-shadow:0 6px 0 #7a4a02, 0 10px 24px var(--shadow);
    transform:translateY(0); transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
  }
  .dm-btn:hover{ transform:translateY(-2px); filter:brightness(1.03); box-shadow:0 8px 0 #6b4002, 0 14px 28px var(--shadow) }
  .dm-btn:active{ transform:translateY(2px); box-shadow:0 2px 0 #6b4002, 0 6px 14px var(--shadow) }
  .ghost{ background:linear-gradient(180deg,#f7e2b6,#e0c189) }

  .row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px; color:var(--ink-2) }
  .row input{ border:2px solid var(--ink); border-radius:8px; padding:.5rem .6rem; background:#ead2a6; color:#1a1205; font-weight:600; min-width:280px }
  .copy{ cursor:pointer; border-radius:10px; padding:.5rem .75rem; border:2px solid var(--ink); background:#e6c794; font-weight:800 }
  .copied{ background:#c5e6a7 !important }

  .blurb{ background:rgba(255,248,235,.88); border:2px solid var(--ink); border-radius:12px; padding:12px 14px; max-width:46ch }

  /* ===== STICKY FOOTER ===== */
  footer{
    position:fixed; left:0; right:0; bottom:0; height:var(--footer-h);
    display:flex; align-items:center; justify-content:center; gap:.6rem;
    padding:0 16px calc(env(safe-area-inset-bottom,0px));
    background:rgba(0,0,0,.10); backdrop-filter:blur(2px);
    border-top:2px solid var(--ink); color:var(--ink-2); font-weight:600;
  }

/* Modal look + balanced layout */
#howDialog{ border:2px solid var(--ink); border-radius:16px; padding:16px 18px; background:#fff5e1; width:min(980px,94vw); box-shadow:0 30px 60px rgba(0,0,0,.3); }
#howDialog::backdrop{ background: rgba(0,0,0,.45); }
.how-wallets{ display:flex; justify-content:center; gap:12px; margin:8px 0 12px; flex-wrap:wrap; }
.how-grid{ display:grid; grid-template-columns: minmax(0,1.2fr) 360px; gap:24px; align-items:start; }
@media (max-width:900px){ .how-grid{ grid-template-columns:1fr; } }
.how-steps ol{ margin:.3rem 0 1rem 1.2rem; line-height:1.45; }
.how-side .card{ background:#fffaf0; border:2px solid var(--ink); border-radius:14px; padding:14px; box-shadow:0 10px 24px rgba(0,0,0,.18); }
.how-side .stack{ display:grid; gap:10px; }
.how-side .dm-btn{ width:100%; justify-content:center }
.mini-row{ display:flex; gap:8px; align-items:center; }
.mini-row input{ flex:1; border:2px solid var(--ink); border-radius:8px; padding:.5rem .6rem; background:#ead2a6; color:#1a1205; font-weight:600; }
.tip{ font-size:.92rem; color:var(--ink-2); opacity:.9; margin:.3rem 0 0; }

/* Logo style*/
.brand .logo{
  width:44px; height:44px; border-radius:10px;
  box-shadow:0 6px 18px var(--shadow); object-fit:contain;
}
/* Ensure brand logo <img> displays correctly */
.brand .logo{
  width:44px; height:44px; border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  object-fit:contain; display:block;
}

/* Social links under CA row */
.socials{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  margin-top:10px;
}
@media (max-width:980px){ .socials{ justify-content:center } }
.soc{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--ink); border-radius:10px; background:#e6c794;
  box-shadow: 0 6px 0 #7a4a02, 0 10px 24px var(--shadow);
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  color: var(--ink);
}
.soc:hover{ transform:translateY(-2px); box-shadow:0 8px 0 #6b4002, 0 14px 28px var(--shadow); filter:brightness(1.03) }
.soc:active{ transform:translateY(2px); box-shadow:0 2px 0 #6b4002, 0 6px 14px var(--shadow) }
.soc svg{ width:22px; height:22px; }
.soc-youtube polygon{ paint-order: stroke; stroke: var(--ink); stroke-width:.5 }


/* Auto-added by helper */
footer .legal{ margin-left:.6rem; font-size:.9rem; opacity:.85 } @media (max-width:480px){ footer .legal{ display:none } }



/* Solscan button variant */
.copy.view{
  background: linear-gradient(#f7e2b6, #e0c189);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 10px 14px;
  height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 0 #7a4a02, 0 10px 24px var(--shadow);
  margin-left: 10px;
}
.copy.view:hover{ transform: translateY(-2px); box-shadow: 0 8px 0 #6b4002, 0 14px 28px var(--shadow); }
.copy.view:active{ transform: translateY(2px); box-shadow: 0 2px 0 #6b4002, 0 6px 14px var(--shadow); }


/* Keep hero content aligned to the top (even with fixed elements) */
.hero{ display:grid; align-content:start; min-height:calc(100vh - var(--footer-h,64px)); }
main{ min-height:calc(100vh - var(--footer-h,64px)); }

/* Header socials: top-right desktop, top stack on mobile */
.socials-header{
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 10px;
  z-index: 60;
}
@media (max-width:980px){
  .socials-header{
    position: static;
    justify-content: center;
    margin-top: 10px;
  }
}

/* Follow & Subscribe pinned bottom-left on desktop (free up space) */
.social-cta{
  position: fixed;
  left: clamp(16px, 6vw, 64px);
  bottom: calc(var(--footer-h,64px) + 20px);
  max-width: 52ch;
  color: var(--ink-2);
  z-index: 40;
}
.social-cta .cta{
  display: flex;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
@media (max-width:980px){
  .social-cta{ position: static; margin: 14px auto 0; text-align: center; }
  .social-cta .cta{ justify-content: center; }
}

/* Footer text link for Solscan */
footer .foot-link{
  margin-left: .75rem;
  color: var(--ink);
  text-decoration: underline;
}
footer .foot-link:hover{ filter: brightness(1.1); }

/* If you previously had a styled Solscan button, neutralize it */
.copy.view{ all: unset; }
.copy.view{ cursor:pointer; } /* optional */