/* =========================================================
   FakeFoundation — site.css
   Shared additions on top of stylesindex.css:
   footer, news, CTA (community / official link),
   "soon" custom-node card, hero secondary button.
   Uses tokens from stylesindex.css (:root).
   ========================================================= */

/* ---------- Sticky footer layout + background canvas ---------- */
body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.topbar,
.wrap,
.siteFooter{
  flex:0 0 auto;
}

.wrap{
  flex:1 0 auto;
}

/* background canvas disabled for now (will redo later) */

/* ---------- HERO secondary button (ghost) ---------- */
.heroBtns .msgBtn1.heroGhost{
  background:#fff;
  color:#2563eb;
}

/* =========================================================
   NEWS
   ========================================================= */
.newsSection{
  width:100%;
  background:#fff;
  padding:160px 0;
}

.newsCard{
  width:100%;
  max-width:1372px;
  margin:0 auto;
  background:transparent;
  box-shadow:none;
  padding:0;
}

.newsHead{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  margin-bottom:32px;
}

.newsBlogBtn{
  flex:none;
  display:inline-block;
  padding:11px 20px;
  border:1px solid rgba(0,0,0,0.16);
  border-radius:12px;
  background:#fff;
  color:#1c1c1e;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  transition:border-color .15s ease, color .15s ease;
}
.newsBlogBtn:hover{
  border-color:#2563eb;
  color:#2563eb;
}

.newsTag{
  display:inline-block;
  padding:6px 14px;
  background:#eef4ff;
  color:#2563eb;
  border-radius:20px;
  font-size:13px;
  margin-bottom:14px;
}

.newsTitle{
  text-align:center;
  font-size:var(--h-xxl);
  font-weight:950;
  letter-spacing:-0.8px;
  line-height:1.0;
  margin:0;
  color:#1c1c1e;
}

.newsGrid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:20px;
  align-items:stretch;
}

.newsItem{
  background:#fff;
  border:1px solid rgba(0,0,0,0.10);
  border-radius:18px;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
  padding:18px 18px 22px;
  display:flex;
  flex-direction:column;
  height:100%;
}

.newsItemHead{
  display:flex;
  align-items:center;
  gap:12px;
  margin:4px 6px 12px;
}

.newsItemIcon{
  flex:none;
  width:40px;
  height:40px;
  border-radius:11px;
  background:#eef4ff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.newsItemIcon svg{ width:22px; height:22px; display:block; }

.newsList{
  list-style:none;
  margin:18px 6px 28px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.newsList li{
  position:relative;
  padding-left:20px;
  font-size:var(--t-md);
  line-height:1.45;
  color:#3a3a3c;
}
.newsList li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#2563eb;
}

.newsItemBtn{
  margin:26px 6px 6px;
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:40px;
  border-radius:12px;
  background:#2563eb;
  border:1px solid #2563eb;
  color:#fff;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  transition:background .16s ease, border-color .16s ease;
}
.newsItemBtn:hover{
  background:#174ea6;
  border-color:#174ea6;
}
.newsItemBtn svg{ width:16px; height:16px; display:block; }

.newsCat{
  align-self:flex-start;
  padding:4px 12px;
  border:1px solid rgba(0,0,0,0.14);
  border-radius:999px;
  background:#fff;
  color:#1c1c1e;
  font-size:13px;
  font-weight:600;
  margin-bottom:16px;
}

.newsMeta{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:14px;
}

.newsAvatar{
  flex:none;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#2563eb;
  color:#fff;
  font-size:13px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}

.newsMetaText{
  font-size:14px;
  color:#6b7280;
}
.newsMetaText b{
  color:#1c1c1e;
  font-weight:700;
}

.newsDate{
  display:inline-block;
  padding:5px 12px;
  border-radius:999px;
  background:#eef4ff;
  color:#2563eb;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  margin-bottom:12px;
}

.newsItemTitle{
  font-size:22px;
  font-weight:800;
  color:#1c1c1e;
  margin:0;
}

.newsItemText{
  font-size:var(--t-md);
  line-height:1.55;
  color:#3a3a3c;
  margin:0 6px;
  max-width:520px;
}

.newsThumb{
  margin-bottom:18px;
  width:100%;
  aspect-ratio:16 / 10;
  border-radius:13px;
  background:#ecebe8;
  border:1px solid rgba(0,0,0,0.06);
}

/* image placeholder in the "What is" right column */
.ethImage{
  flex:1 1 auto;
  width:100%;
  min-height:340px;
  border-radius:20px;
  background:#ecebe8;
  border:1px solid rgba(0,0,0,0.06);
}

@media (max-width:1000px){
  .ethImage{ min-height:240px; }
}

@media (max-width:900px){
  .newsGrid{ grid-template-columns:1fr; }
}

@media (max-width:768px){
  .newsSection{ padding:44px 0; }
  .newsHead{ flex-direction:column; align-items:center; gap:16px; }
  .newsTitle{ font-size:30px; }
}

/* =========================================================
   CTA (community / official link)
   ========================================================= */
.ctaSection{
  width:100%;
  background:#fff;
  padding:100px 0;
}

.ctaCard{
  width:100%;
  background:#fff;
  border-radius:26px;
  box-shadow:0 16px 40px rgba(0,0,0,0.10);
  padding:64px 40px;
  text-align:center;
  overflow:hidden;
}

.ctaTag{
  display:inline-block;
  padding:6px 14px;
  background:#eef4ff;
  color:#2563eb;
  border-radius:20px;
  font-size:13px;
  margin-bottom:14px;
}

.ctaTitle{
  font-size:var(--h-xxl);
  font-weight:950;
  letter-spacing:-0.8px;
  margin:0 0 18px;
  color:#1c1c1e;
}

.ctaText{
  font-size:var(--p-lg);
  line-height:1.6;
  color:#3a3a3c;
  max-width:660px;
  margin:0 auto 28px;
}

.ctaBtns{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
}

@media (max-width:768px){
  .ctaSection{ padding:44px 0; }
  .ctaCard{ padding:40px 20px; border-radius:22px; }
}

/* =========================================================
   CUSTOM NODE — "soon" locked card
   ========================================================= */
/* =========================================================
   EXPLORER — type switcher + embedded table frame
   ========================================================= */
.expHead{
  text-align:center;
  margin-bottom:34px;
}
.expTitle{
  font-size:var(--h-xxl);
  font-weight:950;
  letter-spacing:-0.8px;
  margin:0;
  color:#1c1c1e;
}
.expTabs{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:32px;
}
.expTab{
  appearance:none;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.04);
  color:#cdd6ea;
  font-family:inherit;
  font-size:15px;
  font-weight:650;
  letter-spacing:0.2px;
  padding:11px 26px;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
.expTab:hover{
  background:rgba(255,255,255,0.09);
  color:#fff;
}
.expTab:active{ transform:translateY(1px); }
.expTab.is-active{
  background:#fff;
  color:#11151f;
  border-color:#fff;
}
.expFrameWrap{
  width:100%;
  background:transparent;
}
/* match home content column width (1500 − 64px each side = 1372) */
body.shell .wrap > section.expSection{
  padding:160px 64px;
}
@media (max-width:768px){
  body.shell .wrap > section.expSection{ padding:64px 20px; }
}
.expFrame{
  display:block;
  width:100%;
  height:600px;
  border:0;
  background:transparent;
}
@media (max-width:768px){
  .expTab{ padding:10px 18px; font-size:14px; }
}

.customSection{
  width:100%;
  background:#fff;
  padding:100px 0;
}

.customCard{
  position:relative;
  width:100%;
  background:#fff;
  border:1.5px dashed rgba(37,99,235,0.30);
  border-radius:26px;
  box-shadow:0 16px 40px rgba(0,0,0,0.06);
  padding:40px;
  overflow:hidden;
}

.customInner{
  max-width:760px;
  opacity:.45;
  filter:grayscale(.2);
  pointer-events:none;
  user-select:none;
}

.customTag{
  display:inline-block;
  padding:6px 14px;
  background:#eef4ff;
  color:#2563eb;
  border-radius:20px;
  font-size:13px;
  margin-bottom:14px;
}

.customTitle{
  font-size:var(--h-xxl);
  font-weight:950;
  margin:0 0 18px;
  color:#1c1c1e;
}

.customText{
  font-size:var(--p-lg);
  line-height:1.6;
  color:#3a3a3c;
  margin:0;
}

.soonBadge{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(-6deg);
  padding:14px 34px;
  border-radius:16px;
  background:#2563eb;
  color:#fff;
  font-size:34px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:0 18px 50px rgba(37,99,235,0.35);
  z-index:2;
}

@media (max-width:768px){
  .customSection{ padding:44px 0; }
  .customCard{ padding:24px 20px; border-radius:22px; }
  .soonBadge{ font-size:24px; padding:10px 24px; }
}

/* =========================================================
   FOOTER (shared on all pages)
   ========================================================= */
.siteFooter{
  position:relative;
  z-index:1;
  width:100%;
  background:#fff;
  border-top:1.5px dashed rgba(0,0,0,0.18);
}

.footerInner{
  max-width:1200px;
  margin:0 auto;
  padding:30px 24px 30px;
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:48px;
  align-items:stretch;
}

.footerBrand{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:360px;
}

.footerBrandTop{
  display:flex;
  align-items:center;
  gap:10px;
}

.footerLogo{
  width:26px;
  height:26px;
  border-radius:8px;
  display:block;
}

.footerWordmark{
  font-weight:800;
  font-size:18px;
  letter-spacing:-0.2px;
  color:#1c1c1e;
}

.footerTagline{
  margin:0;
  font-size:var(--t-md);
  line-height:1.55;
  color:#3a3a3c;
}

.footerCopy{
  margin-top:auto;
  font-size:13px;
  letter-spacing:.02em;
  color:#8e8e93;
}

.footerCols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}

.footerCol{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footerColTitle{
  font-size:13px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#8e8e93;
  font-weight:700;
  margin-bottom:2px;
}

.footerLink{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  font-size:var(--t-md);
  color:#3a3a3c;
  text-decoration:none;
  transition:color .15s ease;
}

.footerLink:hover,
.footerLink:focus-visible{
  color:#2563eb;
  outline:none;
}

.footerSoon{
  padding:2px 8px;
  border-radius:999px;
  background:#eef4ff;
  color:#2563eb;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.footerBottom{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px 30px;
  border-top:none;
  font-size:13px;
  letter-spacing:.02em;
  color:#8e8e93;
}

@media (max-width:768px){
  .footerInner{
    grid-template-columns:1fr;
    gap:32px;
    padding:40px 20px 24px;
  }
  .footerBottom{
    padding:16px 20px 32px;
  }
}

/* =========================================================
   DARK SHELL PAGES
   Dark background + one big rounded white content card.
   The topbar (bar) and footer sit OUTSIDE the card on the
   dark background; the card fills the height between them.
   ========================================================= */
body.shell{
  background:#090d1a;
}

/* bar sits on the dark bg — small gap before the card */
body.shell .topbar{
  background:transparent;
  padding:18px 0 21px;
}

/* the big card: FULL width, rounded, fills available height */
body.shell .wrap{
  max-width:none;
  width:100%;
  margin:0 0 14px;
  padding:0;
  background:#fff;
  border-radius:28px;
  overflow:hidden;
}

/* footer on the dark bg, readable text */
body.shell .siteFooter{
  background:transparent;
  border-top:1.5px dashed rgba(255,255,255,0.14);
}

body.shell .footerWordmark{ color:#eaf0ff; }
body.shell .footerTagline{ color:#9aa7c7; }
body.shell .footerColTitle{ color:#7e8aa8; }
body.shell .footerLink{ color:#c3cbe0; }
body.shell .footerCopy{ color:#6b748f; }

body.shell .footerLink:hover,
body.shell .footerLink:focus-visible{ color:#2563eb; }

/* =========================================================
   INDEX HERO (welcome) — left-aligned block on the dark bg.
   The invisible block matches the content width (1200px),
   so the welcome lines up with the cards below.
   ========================================================= */
body.shell .heroSimple{
  padding:110px 0 160px;
  background:#090d1a;
}

body.shell .heroBlock{
  max-width:1500px;
  margin:0 auto;
  padding:0 64px;
  text-align:left;
}

@media (max-width:768px){
  body.shell .heroSimple{ padding:56px 0 48px; }
}

body.shell .heroBlock .heroTitle{
  color:#eaf0ff;
  text-align:left;
  margin:0 0 18px;
}

body.shell .heroBlock .heroSubtitle{
  color:#9aa7c7;
  text-align:left;
  max-width:680px;
  margin:0 0 30px;
}

body.shell .heroBlock .heroBtns{
  justify-content:flex-start;
  align-items:center;
  gap:10px;
  margin:0 0 30px;
}

/* primary download button — filled, in our colour.
   Horizontal padding equals the vertical padding so the
   gap from the edge to the icon matches the top gap. */
.heroDownload{
  display:inline-flex;
  align-items:center;
  gap:9px;
  height:40px;
  padding:0 11px;
  border-radius:12px;
  background:#2563eb;
  border:1px solid #2563eb;
  color:#fff;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  transition:background .16s ease, border-color .16s ease;
}

.heroDownload svg{ width:17px; height:17px; display:block; }

.heroDownload:hover,
.heroDownload:focus-visible{
  background:#174ea6;
  border-color:#174ea6;
  outline:none;
}

/* square mobile download — static icon-only buttons (no hover expand) */
.heroDownloadMobile{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  width:40px;
  padding:0;
  box-sizing:border-box;
  border-radius:12px;
  background:#0c1327;
  border:1px solid rgba(255,255,255,0.10);
  color:#eaf0ff;
  text-decoration:none;
  transition:background .2s ease, border-color .2s ease;
}

.heroDownloadMobile svg{ width:19px; height:19px; display:block; flex:none; }

.heroDownloadMobile .heroDLMText{ display:none; }

.heroDownloadMobile:hover,
.heroDownloadMobile:focus-visible{
  background:#111a33;
  border-color:rgba(255,255,255,0.18);
  outline:none;
}

/* learn-more row under the button */
.heroLearnRow{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.heroLearnText{
  font-size:15px;
  color:#9aa7c7;
}

.heroLearn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 13px;
  border-radius:10px;
  background:#0c1327;
  border:none;
  color:#eaf0ff;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:background .16s ease;
}

.heroLearn svg{ width:14px; height:14px; display:block; }

.heroLearn:hover,
.heroLearn:focus-visible{
  background:#111a33;
  outline:none;
}

/* =========================================================
   LANGUAGE IN THE NAV DROPDOWN (desktop)
   The language switch reuses the same slide-down dropdown
   as the nav items, so hide the old popover on desktop.
   ========================================================= */
@media (min-width:1151px){
  .langMenu{ display:none !important; }
}

/* highlight the currently active language in the dropdown */
.navDropdownLink.is-current{
  color:#2563eb;
  font-weight:700;
}

/* =========================================================
   NAV DROPDOWN on the dark shell
   - same colour as the page background (#090d1a)
   - sits IN FLOW so it pushes the content down instead of
     overlapping it
   ========================================================= */
body.shell .navDropdown{
  position:absolute;
  left:0;
  right:0;
  z-index:80;
}

body.shell .navDropdownPanel{
  background:#090d1a;
  box-shadow:0 18px 45px rgba(0,0,0,.18);
}

/* Content blocks: 1500px main column, centred, no side padding. */
body.shell .wrap > section{
  max-width:1500px;
  margin-left:auto;
  margin-right:auto;
  padding-left:0;
  padding-right:0;
}

body.shell .heroBlock{
  max-width:1500px;
}

/* Flatten the inner block boxes everywhere: no card bg, shadow, radius
   or padding — the info sits at the 1500px column just like welcome. */
body.shell .ethBlock,
body.shell .newsSection,
body.shell .ctaSection,
body.shell .customSection,
body.shell .fndOneSection,
body.shell .fndTwoSection{
  background:transparent;
}

body.shell .how{
  background:transparent;
}

body.shell .ethModule,
body.shell .howOuter,
body.shell .newsCard,
body.shell .ctaCard,
body.shell .customCard,
body.shell .fndOneCard,
body.shell .fndTwoCard,
body.shell .fndThreeCard,
body.shell .fndFourCard,
body.shell .dwlOuter,
body.shell .pkgCard{
  background:transparent;
  box-shadow:none;
  border-radius:0;
  padding:0;
}

/* Ecosystem content sits on the section's grey band. */
body.shell .howOuter{
  background:transparent;
  border:none;
  border-radius:32px;
  padding:0 64px;
}

/* "What is" block: same horizontal inset as the ecosystem/news blocks
   so all content lines up inside the 1500px column. */
body.shell .ethModule{
  padding:0 64px;
}

/* Section label tags live only in the nav now — hide them in content. */
body.shell .ethTag,
body.shell .howTag,
body.shell .newsTag,
body.shell .ctaTag,
body.shell .fndOneTag,
body.shell .fndTwoTag,
body.shell .fndThreeTag,
body.shell .fndFourTag,
body.shell .customTag,
body.shell .dwlTag,
body.shell .strTag{
  display:none;
}

/* No "soon" badge in the footer. */
.footerSoon{
  display:none;
}

/* FakeFoundation stats panel — vertical divider + two stats,
   in our type, mirroring the reference layout. */
body.shell .ethRight{
  min-height:0;
  align-self:stretch;
  padding:6px 0 6px 56px;
  border-left:1.5px solid rgba(0,0,0,0.10);
  justify-content:center;
  gap:44px;
}

body.shell .ethStat{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding:0;
}

body.shell .ethStatHead{
  display:flex;
  align-items:center;
  gap:14px;
}

body.shell .ethStatIcon{
  width:30px;
  height:30px;
  display:block;
  color:#1c1c1e;
  flex:0 0 auto;
}

body.shell .ethStatVal{
  font-size:34px;
  font-weight:900;
  line-height:1.05;
  letter-spacing:-0.5px;
  color:#1c1c1e;
}

body.shell .ethStatLabel{
  font-size:15px;
  line-height:1.4;
  color:#6b7280;
  padding-left:44px;
}

@media (max-width:1000px){
  body.shell .ethRight{
    border-left:none;
    border-top:1.5px solid rgba(0,0,0,0.10);
    padding:36px 0 0;
    gap:32px;
  }
}

/* =========================================================
   ECOSYSTEM FEATURES — icon + title + text grid on white.
   3 columns, dashed dividers, drawn colorful icons.
   ========================================================= */
.ecoLead{
  max-width:680px;
  margin:18px auto 0;
  text-align:center;
  font-size:var(--p-lg);
  line-height:1.55;
  color:#3a3a3c;
}

.ecoFeatures{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  row-gap:52px;
  margin-top:56px;
}

.ecoFeat{
  padding:0 40px;
}
.ecoFeat:nth-child(3n+1){ padding-left:0; }
.ecoFeat:nth-child(3n){ padding-right:0; }
.ecoFeat:not(:nth-child(3n)){
  border-right:1.5px dashed rgba(0,0,0,0.16);
}
.ecoFeat:last-child{ border-right:none; }

.ecoFeatIcon{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#eef4ff;
  border-radius:14px;
  margin-bottom:22px;
}
.ecoFeatIcon svg{
  width:28px;
  height:28px;
  display:block;
}

.ecoFeatTitle{
  font-size:24px;
  font-weight:800;
  letter-spacing:-0.4px;
  line-height:1.1;
  margin:0 0 10px;
  color:#1c1c1e;
}

.ecoFeatText{
  font-size:var(--t-md);
  line-height:1.55;
  color:#3a3a3c;
  margin:0;
}

/* image placeholder — bottom-right, under text */
.howFeatures .ecoFeat{
  display:flex;
  flex-direction:column;
  position:relative;
}
.howFeatures .ecoFeatTitle,
.howFeatures .ecoFeatText{
  position:relative;
  z-index:1;
}
.howImg{
  align-self:flex-end;
  margin-top:-36px;
  width:240px;
  height:200px;
  max-width:100%;
  border-radius:18px;
  background:#f1f1f3;
  position:relative;
  z-index:0;
}

@media (max-width:900px){
  .ecoFeatures{ grid-template-columns:1fr; row-gap:0; margin-top:40px; }
  .ecoFeat{
    padding:26px 0 !important;
    border-right:none !important;
    border-bottom:1.5px dashed rgba(0,0,0,0.16);
  }
  .ecoFeat:last-child{ border-bottom:none; }
}

@media (max-width:768px){
  body.shell .howOuter{ padding:40px 22px; border-radius:24px; }
}

/* =========================================================
   SHARED BLOCK BASE — so opstan / download can reuse the
   same intro (eth) + feature-grid (how/eco) blocks as home.
   Values mirror stylesindex.css; body.shell flattens bg.
   ========================================================= */
.ethBlock{ padding:160px 0; }
.ethWrap{
  width:100%;
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:80px;
  align-items:start;
}
.ethTitle{
  font-size:var(--h-xxl);
  font-weight:950;
  margin:0 0 24px;
  color:#1c1c1e;
}
.ethText{
  font-size:var(--p-lg);
  line-height:1.6;
  margin:0 0 18px;
  color:#3a3a3c;
}
.how{ padding:160px 0; }
.howOuter{ padding:40px; }

/* START MINING — text left, big image placeholder right */
.miningModule{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:64px;
  align-items:center;
}
.miningImg{
  width:100%;
  aspect-ratio:4/5;
  border-radius:24px;
  background:#f1f1f3;
}
@media (max-width:1000px){
  .miningModule{ grid-template-columns:1fr; gap:40px; }
  .miningImg{ aspect-ratio:16/10; }
}
.howTitle{
  text-align:center;
  font-size:var(--h-xxl);
  font-weight:950;
  letter-spacing:-0.8px;
  margin:0 0 24px;
  color:#1c1c1e;
}
@media (max-width:1000px){
  .ethWrap{ grid-template-columns:1fr; gap:40px; }
}

/* =========================================================
   JOIN THE COMMUNITY — outside the card, on the dark bg.
   Square social buttons that expand on hover (same behaviour
   as the hero mobile-download button).
   ========================================================= */
body.shell .joinSimple{
  padding:160px 24px 160px;
  background:transparent;
}

body.shell .joinBlock{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}

body.shell .joinTitle{
  font-size:var(--h-xxl);
  font-weight:950;
  letter-spacing:-0.8px;
  margin:0 0 18px;
  color:#eaf0ff;
}

body.shell .joinText{
  font-size:var(--p-lg);
  line-height:1.6;
  color:#9aa7c7;
  margin:0 auto 32px;
  max-width:620px;
}

body.shell .joinBtns{
  display:flex;
  gap:12px;
  justify-content:center;
}

.joinSocial{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  width:44px;
  box-sizing:border-box;
  border-radius:12px;
  background:#0c1327;
  border:1px solid rgba(255,255,255,0.10);
  color:#eaf0ff;
  text-decoration:none;
  transition:background .2s ease;
}

.joinSocialIcon{
  width:20px;
  height:20px;
  display:block;
  flex:0 0 auto;
}

.joinSocial img.joinSocialIcon{
  filter:grayscale(1) brightness(1.15) contrast(1.05);
}

.joinSocial:hover,
.joinSocial:focus-visible{
  background:#111a33;
  outline:none;
}

@media (max-width:768px){
  body.shell .joinSimple{ padding:64px 20px 72px; }
}

/* ABOUT — CONTACT US list (on the dark joinSimple band) */
.contactLead{ margin-bottom:28px; }
.contactList{
  display:flex;
  flex-direction:column;
  max-width:600px;
  margin:0 auto;
  text-align:left;
}
.contactItem{
  display:flex;
  align-items:center;
  gap:18px;
  padding:20px 6px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.contactItem:last-child{ border-bottom:none; }
.contactIcon{
  flex:0 0 auto;
  width:46px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:rgba(37,99,235,0.16);
  color:#e3938a;
}
.contactIcon svg{ width:22px; height:22px; display:block; }
.contactMain{ flex:1 1 auto; min-width:0; }
.contactName{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:#7f8db0;
  margin-bottom:7px;
}
.contactPlat{ color:#aab6d6; }
.contactSep{ margin:0 8px; opacity:0.5; }
.contactValue{
  display:block;
  font-size:16px;
  font-weight:600;
  line-height:1.45;
  color:#eef2fb;
  word-break:break-all;
}
.contactValue a{ color:#eef2fb; text-decoration:none; }
.contactValue a:hover{ color:#fff; text-decoration:underline; }
.contactMono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px;
  letter-spacing:0.2px;
  color:#dfe5f2;
}
.contactCopy{
  flex:0 0 auto;
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:transparent;
  border:none;
  color:#7f8db0;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.contactCopy:hover{ background:rgba(255,255,255,0.07); color:#eaf0ff; }
.contactCopy svg{ width:18px; height:18px; display:block; }
.contactCopy .ic-check{ display:none; }
.contactCopy.is-copied{ color:#7bd88f; }
.contactCopy.is-copied .ic-copy{ display:none; }
.contactCopy.is-copied .ic-check{ display:block; }
@media (max-width:560px){
  .contactItem{ padding:16px 2px; gap:13px; }
  .contactIcon{ width:42px; height:42px; border-radius:12px; }
  .contactIcon svg{ width:20px; height:20px; }
  .contactCopy{ width:38px; height:38px; }
}

/* =========================================================
   ABOUT — OUR PLANS roadmap (blockchain-style chain of blocks)
   ========================================================= */
.rmTrack{
  position:relative;
  margin-top:60px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
/* the chain line connecting the block-nodes */
.rmTrack::before{
  content:"";
  position:absolute;
  top:32px;
  left:12.5%;
  right:12.5%;
  border-top:1.5px dashed rgba(0,0,0,0.20);
  z-index:0;
}
.rmStep{
  position:relative;
  z-index:1;
  padding:0 22px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.rmNode{
  width:64px;
  height:64px;
  border-radius:18px;
  background:#eef4ff;
  border:1.5px dashed rgba(37,99,235,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
}
.rmNum{
  font-size:20px;
  font-weight:900;
  letter-spacing:-0.5px;
  color:#2563eb;
}
.rmTitle{
  font-size:22px;
  font-weight:800;
  letter-spacing:-0.3px;
  color:#1c1c1e;
  margin:0 0 10px;
}
.rmText{
  font-size:var(--t-md);
  line-height:1.55;
  color:#3a3a3c;
  margin:0;
}
@media (max-width:900px){
  .rmTrack{ grid-template-columns:1fr; margin-top:40px; }
  .rmTrack::before{
    top:0;
    bottom:0;
    left:31px;
    right:auto;
    border-top:none;
    border-left:1.5px dashed rgba(0,0,0,0.20);
  }
  .rmStep{
    flex-direction:row;
    align-items:flex-start;
    text-align:left;
    gap:20px;
    padding:0 0 34px;
  }
  .rmStep:last-child{ padding-bottom:0; }
  .rmNode{ flex:0 0 auto; margin-bottom:0; }
}

/* ABOUT — JOIN: wide block under the 3-up feature grid */
.joinWide{
  margin-top:40px;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:64px;
  align-items:center;
}
.joinWideText{ min-width:0; }
.joinWideImg{
  width:100%;
  height:100%;
  min-height:180px;
  border-radius:18px;
  background:#f1f1f3;
}
@media (max-width:900px){
  .joinWide{
    grid-template-columns:1fr;
    gap:24px;
    margin-top:0;
    padding-top:26px;
  }
  .joinWideImg{ min-height:160px; aspect-ratio:16/9; height:auto; }
}

/* =========================================================
   MOBILE DOWNLOAD MODAL
   ========================================================= */
.mDlOverlay{
  position:fixed;
  inset:0;
  z-index:4000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(9,13,26,0.72);
  backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  transition:opacity .26s ease, visibility .26s ease;
}

.mDlOverlay.is-open{
  opacity:1;
  visibility:visible;
}

.mDlCard{
  position:relative;
  width:100%;
  max-width:1200px;
  min-height:620px;
  background:#fff;
  border-radius:26px;
  box-shadow:0 30px 80px rgba(0,0,0,0.45);
  padding:40px;
  text-align:left;
  transform:scale(.94);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}

.mDlOverlay.is-open .mDlCard{
  transform:scale(1);
}

.mDlClose{
  position:absolute;
  top:18px;
  right:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:12px;
  border:none;
  background:#f3f3f5;
  color:#1c1c1e;
  cursor:pointer;
  transition:background .16s ease;
}

.mDlClose svg{ width:18px; height:18px; display:block; }

.mDlClose:hover,
.mDlClose:focus-visible{ background:#e7e7ea; outline:none; }

.mDlTag{
  display:inline-block;
  padding:6px 14px;
  background:#eef4ff;
  color:#2563eb;
  border-radius:20px;
  font-size:13px;
  margin-bottom:14px;
}

.mDlTitle{
  font-size:var(--h-xxl);
  font-weight:950;
  letter-spacing:-0.8px;
  margin:0;
  color:#1c1c1e;
}

@media (max-width:768px){
  .mDlCard{ padding:40px 20px; border-radius:22px; min-height:480px; }
}

/* =========================================================
   HELP — Quick start: alternate image side per card
   ========================================================= */
.hcCard:nth-child(even) .miningModule{ grid-template-columns:1fr 1.2fr; }
.hcCard:nth-child(even) .miningText{ order:2; }
.hcCard:nth-child(even) .miningImg{ order:1; }
@media (max-width:1000px){
  .hcCard:nth-child(even) .miningModule{ grid-template-columns:1fr; }
  .hcCard:nth-child(even) .miningText{ order:0; }
  .hcCard:nth-child(even) .miningImg{ order:0; }
}

/* =========================================================
   HELP — Mining instructions (pool / solo tabs + carousel)
   ========================================================= */
.mngCarousel.is-hidden{ display:none; }
.mngTabsWrap{
  display:flex;
  justify-content:center;
  margin:0 0 48px;
}
.mngTabs{
  display:flex;
  width:max-content;
  max-width:100%;
  gap:3px;
  padding:4px;
  background:#f3f2f2;
  border-radius:12px;
  flex-wrap:nowrap;
}
.mngTab{
  appearance:none;
  border:none;
  background:transparent;
  color:#86827f;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  letter-spacing:0;
  padding:9px 30px;
  border-radius:9px;
  cursor:pointer;
  transition:color .15s ease, background .15s ease, box-shadow .15s ease;
}
.mngTab:hover{ color:#1c1c1e; }
.mngTab.is-active{
  background:#fff;
  color:#1c1c1e;
  box-shadow:0 1px 3px rgba(0,0,0,0.10);
}
@media (max-width:560px){
  .mngTab{ padding:9px 20px; font-size:14px; }
}

/* =========================================================
   HELP — Pool instructions (content inside carousel cards)
   ========================================================= */
.pgText{
  font-size:var(--t-md);
  line-height:1.6;
  color:#3a3a3c;
  margin:0 0 12px;
}
.pgList{
  margin:0;
  padding-left:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pgList li{
  font-size:var(--t-md);
  line-height:1.55;
  color:#3a3a3c;
}
.pgList li::marker{ color:#2563eb; }
.pgLabel{ font-weight:700; color:#1c1c1e; }
.miningText a{
  color:#2563eb;
  text-decoration:none;
  font-weight:600;
  word-break:break-word;
}
.miningText a:hover{ text-decoration:underline; }
.miningText a.heroDownload{ color:#fff; text-decoration:none; }
.miningText a.heroDownload:hover{ text-decoration:none; }

/* =========================================================
   ECOSYSTEM — "Use Opstan anywhere"
   Dark intro (rule 160) + white card with heading + one button + gray image
   ========================================================= */
body.shell .ecoIntro{
  padding:100px 0;
}
body.shell .ecoIntroBlock{
  max-width:1500px;
  margin:0 auto;
  padding:0 64px;
}
body.shell .ecoIntro .ethTitle{ color:#eaf0ff; margin:0 0 18px; }
body.shell .ecoIntro .ethText{ color:#9aa7c7; max-width:680px; margin:0; }

.ecoHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin:0 0 40px;
}
.ecoHead .ethTitle{ margin:0; }
.ecoImg{
  width:100%;
  aspect-ratio:16/9;
  border-radius:24px;
  background:#f1f1f3;
}

/* desktop — vertical image carousel with edge ticks */
.ecoCar{ position:relative; overflow:hidden; }
.ecoCarViewport{ position:absolute; inset:0; overflow:hidden; }
.ecoCarTrack{
  display:flex;
  flex-direction:column;
  will-change:transform;
  transition:transform .7s cubic-bezier(.16,.84,.44,1);
}
.ecoCarSlide{
  flex:0 0 auto;
  width:100%;
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f1f1f3;
}
.ecoCarSlide:nth-child(2n){ background:#ececef; }
.ecoCarSlide::after{
  content:attr(data-n);
  font:800 clamp(48px,9vw,120px)/1 Inter, sans-serif;
  color:rgba(10,12,17,.10);
  letter-spacing:-.02em;
}
/* edge ticks */
.ecoTicks{
  position:absolute;
  top:50%;
  right:20px;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:4;
  cursor:ns-resize;
}
.ecoTick{
  width:20px;
  height:2px;
  padding:0;
  border:none;
  border-radius:2px;
  background:rgba(10,12,17,.28);
  cursor:pointer;
  transition:background .22s ease;
}
.ecoTick:hover{ background:rgba(10,12,17,.45); }
.ecoTick.is-active{ background:#174ea6; }

/* mobile — three images in a row */
.ecoImg3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.ecoImg3 .ecoImg{ aspect-ratio:9/16; }

/* browser — buttons below the text */
.ecoBrowserGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}
.ecoBrowserText{ min-width:0; }
.ecoBrowserGrid .ecoImg{ margin:0; }
@media (max-width:900px){
  .ecoBrowserGrid{ grid-template-columns:1fr; gap:36px; }
}
.ecoBtns{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:28px;
}
/* secondary square button — light, sits on the white card; icon forced monochrome */
.ecoSquareBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  flex:0 0 auto;
  border-radius:12px;
  background:#f1f1f3;
  border:1px solid #e6e6ea;
  text-decoration:none;
  transition:background .16s ease, border-color .16s ease;
}
.ecoSquareBtn img{
  width:20px; height:20px; display:block;
  filter:grayscale(1) contrast(1.05);
}
.ecoSquareBtn:hover,
.ecoSquareBtn:focus-visible{ background:#e9e9ee; border-color:#dcdce1; outline:none; }

@media (max-width:768px){
  body.shell .ecoIntro{ padding:64px 0; }
  body.shell .ecoIntroBlock{ padding:0 20px; }
  .ecoHead{ flex-wrap:wrap; margin-bottom:24px; }
}
@media (max-width:600px){
  .ecoImg3{ grid-template-columns:1fr; }
  .ecoImg3 .ecoImg{ aspect-ratio:16/10; }
}


/* Opstan dark navy color match from provided reference */
:root{
  --opstan-dark:#090d1a;
  --opstan-dark-2:#0a0f1e;
  --opstan-panel:#0c1327;
  --opstan-panel-hover:#111a33;
}


/* =========================================================
   INDEX IMAGES — inserted Opstan illustrations
   ========================================================= */
.howImg,
.miningImg,
.modeImg,
.newsThumb{
  background-color:#0c1326 !important;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  overflow:hidden;
  border:1px solid rgba(73,131,255,0.18) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02), 0 20px 60px rgba(0,0,0,0.22);
}

.howImg::after,
.miningImg::after,
.modeImg::after,
.newsThumb::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(6,12,28,0.00) 0%, rgba(6,12,28,0.10) 62%, rgba(6,12,28,0.18) 100%);
}

.howImgPublic{ background-image:url("index-art/how-public-channels.png"); }
.howImgPrivate{ background-image:url("index-art/how-private-messages.png"); }
.howImgSecurity{ background-image:url("index-art/how-security-mining-consensus.png"); }
.miningImgMain{ background-image:url("index-art/mining-main.png"); background-position:center center; }
.newsThumbFoundation{ background-image:url("index-art/news-foundation-launch.png"); }
.newsThumbNodes{ background-image:url("index-art/news-nodes-spreading.png"); }
.newsThumbReleases{ background-image:url("index-art/news-releases-coming-soon.png"); }

@media (min-width:561px){
  .modeImgPool{ background-image:url("index-art/mode-pool-mining.png"); background-position:center; }
  .modeImgSolo{ background-image:url("index-art/mode-solo-mining.png"); background-position:center; }
}
@media (max-width:560px){
  .modeImgPool{ background-image:url("index-art/mode-pool-mining.png"); background-position:center; height:180px; }
  .modeImgSolo{ background-image:url("index-art/mode-solo-mining.png"); background-position:center; height:180px; }
}

.howImg{ background-size:cover; }
.miningImg{ background-size:cover; min-height:420px; }
.newsThumb{ background-size:cover; }


/* =========================================================
   INDEX ILLUSTRATIONS — transparent vector override
   ========================================================= */
.howImg,
.miningImg,
.modeImg,
.newsThumb{
  background-color:transparent !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:contain !important;
  border:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.howImg::after,
.miningImg::after,
.modeImg::after,
.newsThumb::after{
  display:none !important;
  content:none !important;
}

.howImg{ 
  margin-top:-18px;
  width:250px;
  height:210px;
  filter:drop-shadow(0 10px 28px rgba(34,108,255,.14));
}
.howImgPublic{ background-image:url("index-art/how-public-channels.png") !important; background-position:center 56% !important; }
.howImgPrivate{ background-image:url("index-art/how-private-messages.png") !important; background-position:center 58% !important; }
.howImgSecurity{ background-image:url("index-art/how-security-mining-consensus.png") !important; background-position:center 54% !important; }

.miningImg{
  min-height:430px;
  filter:drop-shadow(0 20px 40px rgba(34,108,255,.16));
}
.miningImgMain{ background-image:url("index-art/mining-main.png") !important; background-position:center 56% !important; background-size:88% auto !important; }

.modeCard{ overflow:hidden; }
.modeBody{ position:relative; }
.modeImg{
  right:2px;
  width:230px;
  background-size:88% auto !important;
  filter:drop-shadow(0 12px 28px rgba(34,108,255,.12));
}
.modeImgPool{ background-image:url("index-art/mode-pool-mining.png") !important; background-position:center 58% !important; }
.modeImgSolo{ background-image:url("index-art/mode-solo-mining.png") !important; background-position:center 58% !important; }

.newsThumb{
  background-size:72% auto !important;
  background-position:center 54% !important;
  filter:drop-shadow(0 10px 24px rgba(34,108,255,.12));
}
.newsThumbFoundation{ background-image:url("index-art/news-foundation-launch.png") !important; }
.newsThumbNodes{ background-image:url("index-art/news-nodes-spreading.png") !important; background-size:74% auto !important; }
.newsThumbReleases{ background-image:url("index-art/news-releases-coming-soon.png") !important; }

@media (max-width:1000px){
  .miningImg{ min-height:340px; background-size:74% auto !important; }
}
@media (max-width:768px){
  .howImg{ width:210px; height:180px; margin-top:8px; }
  .miningImg{ min-height:280px; background-size:82% auto !important; }
  .newsThumb{ background-size:76% auto !important; }
}
@media (max-width:560px){
  .modeImg{
    position:static;
    width:100%;
    height:180px;
    margin-top:18px;
    background-size:70% auto !important;
    background-position:center center !important;
  }
  .newsThumb{ background-size:78% auto !important; }
}


/* =========================================================
   INDEX ILLUSTRATIONS — simple flat icons final tuning
   ========================================================= */
.howImg,
.miningImg,
.modeImg,
.newsThumb{
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  border: none !important;
  box-shadow: none !important;
}
.howImg::after,
.miningImg::after,
.modeImg::after,
.newsThumb::after{ display:none !important; content:none !important; }

.howImg{
  width: 230px;
  height: 190px;
  margin-top: 4px;
  filter: none !important;
}
.howImgPublic{ background-image:url("index-art/how-public-channels.png") !important; background-size: 96% auto !important; background-position:center 54% !important; }
.howImgPrivate{ background-image:url("index-art/how-private-messages.png") !important; background-size: 82% auto !important; background-position:center 52% !important; }
.howImgSecurity{ background-image:url("index-art/how-security-mining-consensus.png") !important; background-size: 88% auto !important; background-position:center 53% !important; }

.miningImg{ min-height: 360px; filter:none !important; }
.miningImgMain{ background-image:url("index-art/mining-main.png") !important; background-size: 68% auto !important; background-position:center 56% !important; }

.modeImg{ width: 210px; right: 8px; filter:none !important; }
.modeImgPool{ background-image:url("index-art/mode-pool-mining.png") !important; background-size: 80% auto !important; background-position:center 54% !important; }
.modeImgSolo{ background-image:url("index-art/mode-solo-mining.png") !important; background-size: 68% auto !important; background-position:center 56% !important; }

.newsThumb{ filter:none !important; }
.newsThumbFoundation{ background-image:url("index-art/news-foundation-launch.png") !important; background-size: 54% auto !important; background-position:center 56% !important; }
.newsThumbNodes{ background-image:url("index-art/news-nodes-spreading.png") !important; background-size: 60% auto !important; background-position:center 54% !important; }
.newsThumbReleases{ background-image:url("index-art/news-releases-coming-soon.png") !important; background-size: 54% auto !important; background-position:center 56% !important; }

@media (max-width:1000px){
  .miningImg{ min-height: 300px; }
  .miningImgMain{ background-size: 58% auto !important; }
}
@media (max-width:768px){
  .howImg{ width: 200px; height: 165px; }
  .miningImg{ min-height: 250px; }
  .miningImgMain{ background-size: 62% auto !important; }
  .newsThumbFoundation, .newsThumbReleases{ background-size: 50% auto !important; }
  .newsThumbNodes{ background-size: 58% auto !important; }
}
@media (max-width:560px){
  .modeImg{
    position: static;
    width: 100%;
    height: 165px;
    margin-top: 14px;
  }
  .modeImgPool{ background-size: 52% auto !important; }
  .modeImgSolo{ background-size: 48% auto !important; }
  .newsThumbFoundation, .newsThumbReleases{ background-size: 48% auto !important; }
  .newsThumbNodes{ background-size: 56% auto !important; }
}


/* =========================================================
   INDEX ILLUSTRATIONS — layout refinement v2
   ========================================================= */
.howFeatures .ecoFeat{
  min-height: 430px;
}
.howImg{
  align-self: center !important;
  margin-top: auto !important;
  margin-bottom: 4px;
  width: 250px !important;
  height: 200px !important;
}
.howImgPublic{
  width: 270px !important;
  height: 210px !important;
  background-size: 100% auto !important;
  background-position: center 56% !important;
}
.howImgPrivate{
  width: 205px !important;
  height: 180px !important;
  background-size: 92% auto !important;
  background-position: center 54% !important;
}
.howImgSecurity{
  width: 220px !important;
  height: 210px !important;
  background-size: 88% auto !important;
  background-position: center 55% !important;
}

.miningModule{
  align-items: center !important;
}
.miningImg{
  min-height: 390px !important;
}
.miningImgMain{
  background-size: 74% auto !important;
  background-position: center 56% !important;
}

.modeBody{
  min-height: 310px;
  padding-right: 210px;
}
.modeImg{
  top: auto !important;
  bottom: 8px;
  right: 8px !important;
  width: 190px !important;
  height: 180px !important;
}
.modeImgPool{
  background-size: 82% auto !important;
  background-position: center 58% !important;
}
.modeImgSolo{
  background-size: 72% auto !important;
  background-position: center 57% !important;
}

.newsThumb{
  aspect-ratio: 16 / 9 !important;
}
.newsThumbFoundation{
  background-size: 50% auto !important;
  background-position: center 58% !important;
}
.newsThumbNodes{
  background-size: 56% auto !important;
  background-position: center 56% !important;
}
.newsThumbReleases{
  background-size: 48% auto !important;
  background-position: center 57% !important;
}

@media (max-width: 1000px){
  .howFeatures .ecoFeat{ min-height: 390px; }
  .miningImg{ min-height: 320px !important; }
  .miningImgMain{ background-size: 66% auto !important; }
  .modeBody{
    min-height: 280px;
    padding-right: 170px;
  }
  .modeImg{
    width: 155px !important;
    height: 150px !important;
    right: 0 !important;
  }
}
@media (max-width: 900px){
  .howFeatures .ecoFeat{ min-height: unset; }
  .modeBody{
    min-height: unset;
    padding-right: 0;
  }
}
@media (max-width: 768px){
  .howImgPublic{
    width: 240px !important;
    height: 190px !important;
  }
  .howImgPrivate{
    width: 185px !important;
    height: 160px !important;
  }
  .howImgSecurity{
    width: 200px !important;
    height: 190px !important;
  }
  .newsThumbFoundation{ background-size: 46% auto !important; }
  .newsThumbNodes{ background-size: 54% auto !important; }
  .newsThumbReleases{ background-size: 45% auto !important; }
}
@media (max-width: 560px){
  .howImg{
    width: 100% !important;
    max-width: 240px !important;
    height: 170px !important;
    margin-top: 16px !important;
  }
  .modeImg{
    width: 100% !important;
    height: 165px !important;
    right: auto !important;
    bottom: auto !important;
  }
  .modeImgPool{ background-size: 48% auto !important; }
  .modeImgSolo{ background-size: 42% auto !important; }
}


/* =========================================================
   HOME PAGE FIX V3 — remove PM card, tighten spacing
   ========================================================= */
.howFeatures{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  margin-top:36px !important;
}
.howFeatures .ecoFeat{
  min-height:320px !important;
  padding:0 32px !important;
  display:flex;
  flex-direction:column;
}
.howFeatures .ecoFeat:nth-child(1){
  padding-left:0 !important;
  border-right:1.5px dashed rgba(0,0,0,0.16) !important;
}
.howFeatures .ecoFeat:nth-child(2){
  padding-right:0 !important;
  border-right:none !important;
}
.howFeatures .ecoFeatTitle{ margin-bottom:10px; }
.howFeatures .ecoFeatText{ max-width:520px; }
.howImg{
  align-self:center !important;
  margin-top:auto !important;
  margin-bottom:0 !important;
  height:185px !important;
}
.howImgPublic{
  width:240px !important;
  background-size:84% auto !important;
  background-position:center 58% !important;
}
.howImgSecurity{
  width:220px !important;
  background-size:80% auto !important;
  background-position:center 58% !important;
}
/* hide leftover private asset class if present somewhere */
.howImgPrivate{ display:none !important; }

.ethBlock#homeMining{ padding-top:120px !important; }
.miningModule{ gap:40px !important; }
.miningText .platBtns{ margin-top:24px !important; }
.miningImg{
  min-height:300px !important;
  align-self:center !important;
}
.miningImgMain{
  background-size:60% auto !important;
  background-position:center 58% !important;
}

/* tighten section spacing overall */
.fullDash{ margin:0 !important; }
.ethBlock{ padding:130px 0; }
.newsSection{ padding:120px 0 !important; }
.joinSimple{ padding:110px 0 130px !important; }

@media (max-width:900px){
  .howFeatures{ grid-template-columns:1fr; gap:0; }
  .howFeatures .ecoFeat{
    min-height:auto !important;
    padding:24px 0 !important;
    border-right:none !important;
    border-bottom:1.5px dashed rgba(0,0,0,0.16) !important;
  }
  .howFeatures .ecoFeat:last-child{ border-bottom:none !important; }
  .howImg{ width:100% !important; max-width:250px !important; margin-top:18px !important; }
  .miningImg{ min-height:260px !important; }
  .miningImgMain{ background-size:52% auto !important; }
}
@media (max-width:560px){
  .howImgPublic{ max-width:220px !important; height:170px !important; }
  .howImgSecurity{ max-width:200px !important; height:170px !important; }
  .miningImgMain{ background-size:60% auto !important; }
}


/* =========================================================
   IMAGE FIX V4 — no fly effect, no crop, clean SVG artwork
   ========================================================= */
.howImg,
.miningImg,
.modeImg,
.newsThumb{
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center center !important;
  border: none !important;
  box-shadow: none !important;
  will-change: auto !important;
  filter: none !important;
  clip-path: none !important;
}
.howImg::before,
.howImg::after,
.miningImg::before,
.miningImg::after,
.modeImg::before,
.modeImg::after,
.newsThumb::before,
.newsThumb::after{
  display:none !important;
  content:none !important;
}

.howFeatures{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin-top: 34px !important;
}
.howFeatures .ecoFeat{
  min-height: 300px !important;
  padding: 0 30px !important;
  overflow: visible !important;
}
.howFeatures .ecoFeat:nth-child(1){
  padding-left:0 !important;
  border-right:1.5px dashed rgba(0,0,0,0.16) !important;
}
.howFeatures .ecoFeat:nth-child(2){
  padding-right:0 !important;
  border-right:none !important;
}
.howImg{
  align-self:center !important;
  margin-top:auto !important;
  margin-bottom:0 !important;
  width: 300px !important;
  height: 190px !important;
  max-width: 100% !important;
}
.howImgPublic{
  background-image:url("index-art/how-public-channels.svg") !important;
  background-size: 100% auto !important;
}
.howImgSecurity{
  background-image:url("index-art/how-security-mining-consensus.svg") !important;
  background-size: 100% auto !important;
}
.howImgPrivate{ display:none !important; }

.ethBlock{ padding: 125px 0 !important; }
.ethBlock#homeEco{ padding-bottom: 110px !important; }
.ethBlock#homeMining{ padding-top: 110px !important; }
.miningModule{ gap: 38px !important; }
.miningImg{
  min-height: 300px !important;
  background-image:url("index-art/mining-main.svg") !important;
  background-size: 76% auto !important;
  background-position:center center !important;
}

.modeBody{
  min-height: 280px !important;
  padding-right: 200px !important;
  overflow: visible !important;
}
.modeImg{
  width: 190px !important;
  height: 170px !important;
  right: 8px !important;
  bottom: 4px !important;
  top: auto !important;
}
.modeImgPool{
  background-image:url("index-art/mode-pool-mining.svg") !important;
  background-size:100% auto !important;
}
.modeImgSolo{
  background-image:url("index-art/mode-solo-mining.svg") !important;
  background-size:94% auto !important;
}

.newsThumb{
  aspect-ratio:16 / 9 !important;
}
.newsThumbFoundation{
  background-image:url("index-art/news-foundation-launch.svg") !important;
  background-size:68% auto !important;
}
.newsThumbNodes{
  background-image:url("index-art/news-nodes-spreading.svg") !important;
  background-size:68% auto !important;
}
.newsThumbReleases{
  background-image:url("index-art/news-releases-coming-soon.svg") !important;
  background-size:60% auto !important;
}

@media (max-width: 900px){
  .howFeatures{
    grid-template-columns:1fr !important;
  }
  .howFeatures .ecoFeat{
    padding:24px 0 !important;
    min-height:auto !important;
    border-right:none !important;
    border-bottom:1.5px dashed rgba(0,0,0,0.16) !important;
  }
  .howFeatures .ecoFeat:last-child{ border-bottom:none !important; }
  .howImg{
    margin-top:18px !important;
    width:280px !important;
    height:175px !important;
  }
  .miningImg{
    min-height:260px !important;
    background-size:64% auto !important;
  }
  .modeBody{
    min-height:auto !important;
    padding-right:0 !important;
  }
  .modeImg{
    position:static !important;
    width:100% !important;
    height:160px !important;
    margin-top:16px !important;
  }
  .modeImgPool{ background-size:44% auto !important; }
  .modeImgSolo{ background-size:46% auto !important; }
}
@media (max-width:560px){
  .howImg{ width:240px !important; height:155px !important; }
  .miningImg{ min-height:220px !important; background-size:70% auto !important; }
  .modeImgPool{ background-size:58% auto !important; }
  .modeImgSolo{ background-size:56% auto !important; }
}


/* =========================================================
   FINAL HOME PAGE ART INSERTION
   ========================================================= */
/* clean placement for new index illustrations */
.howImg,
.miningImg,
.modeImg{
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  overflow: visible !important;
  box-shadow: none !important;
  filter: none !important;
}
.howImg::before,
.howImg::after,
.miningImg::before,
.miningImg::after,
.modeImg::before,
.modeImg::after{ display:none !important; content:none !important; }

.howFeatures{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:0 !important;
  margin-top:38px !important;
}
.howFeatures .ecoFeat{
  min-height:350px !important;
  padding:0 28px !important;
  display:flex !important;
  flex-direction:column !important;
}
.howFeatures .ecoFeat:nth-child(1){ padding-left:0 !important; }
.howFeatures .ecoFeat:nth-child(2){ padding-right:0 !important; }
.howImg{
  margin-top:auto !important;
  margin-bottom:0 !important;
  align-self:center !important;
  width:320px !important;
  height:200px !important;
  max-width:100% !important;
}
.howImgPublic{ background-size:92% auto !important; }
.howImgSecurity{ background-size:82% auto !important; }

.ethBlock#homeMining{ padding-top:110px !important; }
.miningModule{
  gap:42px !important;
  align-items:center !important;
}
.miningImg{
  min-height:360px !important;
  background-size:78% auto !important;
  background-position:center 52% !important;
}

.miningModes{ margin-top:32px !important; }
.modeBody{
  min-height:315px !important;
  padding-right:210px !important;
  overflow:visible !important;
}
.modeImg{
  top:auto !important;
  bottom:8px !important;
  right:8px !important;
  width:195px !important;
  height:190px !important;
}
.modeImgPool{ background-size:92% auto !important; background-position:center 55% !important; }
.modeImgSolo{ background-size:84% auto !important; background-position:center 55% !important; }

/* close spacing after removing news */
.joinSimple{ padding-top:115px !important; }

@media (max-width: 1000px){
  .howFeatures .ecoFeat{ min-height:320px !important; }
  .howImg{ width:280px !important; height:180px !important; }
  .miningImg{ min-height:300px !important; background-size:72% auto !important; }
  .modeBody{ min-height:280px !important; padding-right:180px !important; }
  .modeImg{ width:165px !important; height:165px !important; }
}
@media (max-width: 900px){
  .howFeatures{ grid-template-columns:1fr !important; }
  .howFeatures .ecoFeat{
    min-height:auto !important;
    padding:24px 0 !important;
    border-right:none !important;
    border-bottom:1.5px dashed rgba(0,0,0,0.16) !important;
  }
  .howFeatures .ecoFeat:last-child{ border-bottom:none !important; }
  .howImg{ margin-top:20px !important; }
}
@media (max-width: 700px){
  .miningImg{ min-height:250px !important; background-size:75% auto !important; }
  .modeBody{ min-height:auto !important; padding-right:0 !important; }
  .modeImg{
    position:static !important;
    width:100% !important;
    height:170px !important;
    margin-top:16px !important;
  }
  .modeImgPool{ background-size:44% auto !important; }
  .modeImgSolo{ background-size:40% auto !important; }
}
@media (max-width: 560px){
  .howImg{ width:240px !important; height:160px !important; }
  .howImgPublic{ background-size:88% auto !important; }
  .howImgSecurity{ background-size:76% auto !important; }
  .miningImg{ min-height:220px !important; background-size:78% auto !important; }
}


/* =========================================================
   EXACT UPLOADED IMAGES FINAL
   New images from user, replacing the old ones.
   ========================================================= */

.howImg,
.miningImg,
.modeImg,
.newsThumb{
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  clip-path: none !important;
}

.howImg::before,
.howImg::after,
.miningImg::before,
.miningImg::after,
.modeImg::before,
.modeImg::after,
.newsThumb::before,
.newsThumb::after{
  display: none !important;
  content: none !important;
}

/* Exact image paths */
.howImgPublic{
  background-image: url("index-art/how-public-channels.png") !important;
}

.howImgSecurity{
  background-image: url("index-art/how-security-mining-consensus.png") !important;
}

.miningImgMain{
  background-image: url("index-art/mining-main.png") !important;
}

.modeImgPool{
  background-image: url("index-art/mode-pool-mining.png") !important;
}

.modeImgSolo{
  background-image: url("index-art/mode-solo-mining.png") !important;
}

/* Since the private messages block was removed, keep it hidden if any old cache remains */
.howImgPrivate{
  display: none !important;
}

/* How it works: two clean columns */
.howFeatures{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-top: 34px !important;
}

.howFeatures .ecoFeat{
  min-height: 350px !important;
  padding: 0 34px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

.howFeatures .ecoFeat:nth-child(1){
  padding-left: 0 !important;
  border-right: 1.5px dashed rgba(0,0,0,.16) !important;
}

.howFeatures .ecoFeat:nth-child(2){
  padding-right: 0 !important;
  border-right: none !important;
}

.howImg{
  align-self: center !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  max-width: 100% !important;
}

.howImgPublic{
  width: 370px !important;
  height: 220px !important;
  background-size: 95% auto !important;
}

.howImgSecurity{
  width: 330px !important;
  height: 220px !important;
  background-size: 82% auto !important;
}

/* Mining main block */
.ethBlock#homeMining{
  padding-top: 110px !important;
}

.miningModule{
  gap: 42px !important;
  align-items: center !important;
}

.miningImg{
  min-height: 380px !important;
  background-size: 76% auto !important;
  background-position: center center !important;
}

/* Mining mode cards */
.modeBody{
  min-height: 330px !important;
  padding-right: 230px !important;
  overflow: visible !important;
}

.modeImg{
  top: auto !important;
  bottom: 0 !important;
  right: 4px !important;
  width: 220px !important;
  height: 210px !important;
  max-width: 100% !important;
}

.modeImgPool{
  background-size: 92% auto !important;
}

.modeImgSolo{
  background-size: 78% auto !important;
}

/* News section was removed, but leave these paths harmless if cached */
.newsThumbFoundation{
  background-image: url("index-art/news-foundation-launch.png") !important;
}

.newsThumbNodes{
  background-image: url("index-art/news-nodes-spreading.png") !important;
}

.newsThumbReleases{
  background-image: url("index-art/news-releases-coming-soon.png") !important;
}

/* Responsive */
@media (max-width: 1000px){
  .howFeatures .ecoFeat{
    min-height: 320px !important;
  }

  .howImgPublic{
    width: 320px !important;
    height: 205px !important;
  }

  .howImgSecurity{
    width: 300px !important;
    height: 205px !important;
  }

  .miningImg{
    min-height: 310px !important;
    background-size: 72% auto !important;
  }

  .modeBody{
    min-height: 290px !important;
    padding-right: 190px !important;
  }

  .modeImg{
    width: 180px !important;
    height: 180px !important;
  }
}

@media (max-width: 900px){
  .howFeatures{
    grid-template-columns: 1fr !important;
  }

  .howFeatures .ecoFeat{
    min-height: auto !important;
    padding: 24px 0 !important;
    border-right: none !important;
    border-bottom: 1.5px dashed rgba(0,0,0,.16) !important;
  }

  .howFeatures .ecoFeat:last-child{
    border-bottom: none !important;
  }

  .howImg{
    margin-top: 20px !important;
  }

  .modeBody{
    min-height: auto !important;
    padding-right: 0 !important;
  }

  .modeImg{
    position: static !important;
    width: 100% !important;
    height: 180px !important;
    margin-top: 16px !important;
  }

  .modeImgPool{
    background-size: 48% auto !important;
  }

  .modeImgSolo{
    background-size: 42% auto !important;
  }
}

@media (max-width: 560px){
  .howImgPublic{
    width: 250px !important;
    height: 165px !important;
  }

  .howImgSecurity{
    width: 230px !important;
    height: 165px !important;
  }

  .miningImg{
    min-height: 230px !important;
    background-size: 78% auto !important;
  }

  .modeImgPool{
    background-size: 60% auto !important;
  }

  .modeImgSolo{
    background-size: 55% auto !important;
  }
}


/* =========================================================
   FINAL BIG TRANSPARENT USER IMAGES
   User images are now transparent and larger.
   ========================================================= */

.howImg,
.miningImg,
.modeImg,
.newsThumb{
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  clip-path: none !important;
}

.howImg::before,
.howImg::after,
.miningImg::before,
.miningImg::after,
.modeImg::before,
.modeImg::after,
.newsThumb::before,
.newsThumb::after{
  display: none !important;
  content: none !important;
}

.howImgPublic{
  background-image: url("index-art/how-public-channels.png") !important;
}

.howImgSecurity{
  background-image: url("index-art/how-security-mining-consensus.png") !important;
}

.miningImgMain{
  background-image: url("index-art/mining-main.png") !important;
}

.modeImgPool{
  background-image: url("index-art/mode-pool-mining.png") !important;
}

.modeImgSolo{
  background-image: url("index-art/mode-solo-mining.png") !important;
}

.howImgPrivate{
  display: none !important;
}

/* Bigger two-column illustrations */
.howFeatures{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-top: 34px !important;
}

.howFeatures .ecoFeat{
  min-height: 390px !important;
  padding: 0 34px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

.howFeatures .ecoFeat:nth-child(1){
  padding-left: 0 !important;
  border-right: 1.5px dashed rgba(0,0,0,.16) !important;
}

.howFeatures .ecoFeat:nth-child(2){
  padding-right: 0 !important;
  border-right: none !important;
}

.howImg{
  align-self: center !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  max-width: 100% !important;
}

.howImgPublic{
  width: 430px !important;
  height: 275px !important;
  background-size: 100% auto !important;
}

.howImgSecurity{
  width: 390px !important;
  height: 275px !important;
  background-size: 96% auto !important;
}

/* Bigger mining main illustration */
.ethBlock#homeMining{
  padding-top: 105px !important;
}

.miningModule{
  gap: 38px !important;
  align-items: center !important;
}

.miningImg{
  min-height: 460px !important;
  background-size: 92% auto !important;
  background-position: center center !important;
}

/* Bigger mining mode illustrations */
.modeBody{
  min-height: 365px !important;
  padding-right: 285px !important;
  overflow: visible !important;
}

.modeImg{
  top: auto !important;
  bottom: -4px !important;
  right: -4px !important;
  width: 285px !important;
  height: 260px !important;
  max-width: 100% !important;
}

.modeImgPool{
  background-size: 100% auto !important;
}

.modeImgSolo{
  background-size: 95% auto !important;
}

/* Responsive */
@media (max-width: 1100px){
  .howImgPublic{
    width: 360px !important;
    height: 240px !important;
  }

  .howImgSecurity{
    width: 340px !important;
    height: 240px !important;
  }

  .miningImg{
    min-height: 380px !important;
    background-size: 86% auto !important;
  }

  .modeBody{
    min-height: 325px !important;
    padding-right: 235px !important;
  }

  .modeImg{
    width: 225px !important;
    height: 215px !important;
  }
}

@media (max-width: 900px){
  .howFeatures{
    grid-template-columns: 1fr !important;
  }

  .howFeatures .ecoFeat{
    min-height: auto !important;
    padding: 24px 0 !important;
    border-right: none !important;
    border-bottom: 1.5px dashed rgba(0,0,0,.16) !important;
  }

  .howFeatures .ecoFeat:last-child{
    border-bottom: none !important;
  }

  .howImg{
    margin-top: 20px !important;
  }

  .howImgPublic{
    width: 330px !important;
    height: 220px !important;
  }

  .howImgSecurity{
    width: 310px !important;
    height: 220px !important;
  }

  .miningImg{
    min-height: 330px !important;
    background-size: 78% auto !important;
  }

  .modeBody{
    min-height: auto !important;
    padding-right: 0 !important;
  }

  .modeImg{
    position: static !important;
    width: 100% !important;
    height: 230px !important;
    margin-top: 18px !important;
  }

  .modeImgPool{
    background-size: 62% auto !important;
  }

  .modeImgSolo{
    background-size: 58% auto !important;
  }
}

@media (max-width: 560px){
  .howImgPublic{
    width: 285px !important;
    height: 190px !important;
  }

  .howImgSecurity{
    width: 265px !important;
    height: 190px !important;
  }

  .miningImg{
    min-height: 260px !important;
    background-size: 86% auto !important;
  }

  .modeImgPool{
    background-size: 76% auto !important;
  }

  .modeImgSolo{
    background-size: 70% auto !important;
  }
}


/* =========================================================
   FINAL VISUAL FIT PATCH V2
   Small anti-crop refinements for cleaner placement
   ========================================================= */

.ecoFeatures.howFeatures,
.miningModes,
.modeBody,
.howImg,
.modeImg,
.miningImg{
  overflow: visible !important;
}

/* Top "How it works" icons: slightly smaller and with more room */
.howFeatures .ecoFeat{
  min-height: 410px !important;
}

.howImgPublic{
  width: 400px !important;
  height: 285px !important;
  background-size: 92% auto !important;
  background-position: center 58% !important;
}

.howImgSecurity{
  width: 365px !important;
  height: 285px !important;
  background-size: 88% auto !important;
  background-position: center 58% !important;
}

/* Main mining illustration: keep a bit more margin */
.miningImg{
  min-height: 470px !important;
}

.miningImgMain{
  background-size: 88% auto !important;
  background-position: center 56% !important;
}

/* Mining mode cards: reduce size slightly and move inward */
.modeBody{
  min-height: 390px !important;
  padding-right: 270px !important;
}

.modeImg{
  width: 250px !important;
  height: 235px !important;
  right: 12px !important;
  bottom: 10px !important;
}

.modeImgPool{
  background-size: 88% auto !important;
  background-position: center 58% !important;
}

.modeImgSolo{
  background-size: 82% auto !important;
  background-position: center 58% !important;
}

/* Tablet */
@media (max-width: 1100px){
  .howFeatures .ecoFeat{
    min-height: 360px !important;
  }

  .howImgPublic{
    width: 350px !important;
    height: 240px !important;
    background-size: 90% auto !important;
  }

  .howImgSecurity{
    width: 320px !important;
    height: 240px !important;
    background-size: 86% auto !important;
  }

  .miningImg{
    min-height: 390px !important;
  }

  .miningImgMain{
    background-size: 82% auto !important;
  }

  .modeBody{
    min-height: 340px !important;
    padding-right: 220px !important;
  }

  .modeImg{
    width: 205px !important;
    height: 195px !important;
    right: 8px !important;
    bottom: 6px !important;
  }

  .modeImgPool{
    background-size: 86% auto !important;
  }

  .modeImgSolo{
    background-size: 80% auto !important;
  }
}

/* Mobile / stacked mode cards */
@media (max-width: 900px){
  .howImgPublic{
    width: 320px !important;
    height: 220px !important;
    background-size: 88% auto !important;
  }

  .howImgSecurity{
    width: 290px !important;
    height: 220px !important;
    background-size: 84% auto !important;
  }

  .miningImg{
    min-height: 340px !important;
  }

  .miningImgMain{
    background-size: 76% auto !important;
  }

  .modeBody{
    min-height: auto !important;
    padding-right: 0 !important;
  }

  .modeImg{
    position: static !important;
    width: 100% !important;
    height: 220px !important;
    margin-top: 14px !important;
  }

  .modeImgPool{
    background-size: 58% auto !important;
    background-position: center center !important;
  }

  .modeImgSolo{
    background-size: 52% auto !important;
    background-position: center center !important;
  }
}

@media (max-width: 560px){
  .howImgPublic{
    width: 275px !important;
    height: 185px !important;
    background-size: 86% auto !important;
  }

  .howImgSecurity{
    width: 250px !important;
    height: 185px !important;
    background-size: 82% auto !important;
  }

  .miningImg{
    min-height: 270px !important;
  }

  .miningImgMain{
    background-size: 82% auto !important;
  }

  .modeImg{
    height: 195px !important;
  }

  .modeImgPool{
    background-size: 68% auto !important;
  }

  .modeImgSolo{
    background-size: 62% auto !important;
  }
}

/* =========================================================
   V3 public channels anti-crop patch
   ========================================================= */
.howImgPublic{
  background-position: center 54% !important;
}

@media (max-width: 900px){
  .howImgPublic{
    width: 320px !important;
    height: 250px !important;
    background-size: 84% auto !important;
    background-position: center 52% !important;
  }
}

@media (max-width: 560px){
  .howImgPublic{
    width: 285px !important;
    height: 220px !important;
    background-size: 82% auto !important;
    background-position: center 50% !important;
  }
}

/* =========================================================
   V4 public channels size reduction patch
   ========================================================= */
.howImgPublic{
  background-size: 88% auto !important;
  background-position: center 52% !important;
}

@media (max-width: 900px){
  .howImgPublic{
    width: 320px !important;
    height: 255px !important;
    background-size: 76% auto !important;
    background-position: center 50% !important;
  }
}

@media (max-width: 560px){
  .howImgPublic{
    width: 285px !important;
    height: 225px !important;
    background-size: 74% auto !important;
    background-position: center 48% !important;
  }
}


/* =========================================================
   HERO TEXT UPDATE
   ========================================================= */
.heroMemoryLine{
  max-width: 820px;
  margin: 22px auto 0;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
  text-align: center;
}
@media (max-width: 768px){
  .heroMemoryLine{
    font-size: 15px;
    line-height: 1.6;
    margin-top: 18px;
    padding: 0 4px;
  }
}


/* =========================================================
   HERO CLEAN FINAL — calmer, compact, professional
   ========================================================= */

.heroSimple{
  min-height: auto !important;
  padding: 116px 0 98px !important;
}

.heroBlock{
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 64px !important;
  text-align: left !important;
}

.heroTitle{
  max-width: 940px !important;
  font-size: clamp(48px, 6.2vw, 92px) !important;
  line-height: 0.98 !important;
  letter-spacing: -3.4px !important;
  margin: 0 0 28px !important;
}

.heroSubtitle{
  max-width: 760px !important;
  font-size: clamp(18px, 1.45vw, 25px) !important;
  line-height: 1.55 !important;
  color: rgba(190, 210, 255, .88) !important;
  margin: 0 0 30px !important;
}

.heroBtns{
  justify-content: flex-start !important;
  margin-top: 0 !important;
}

.heroMemoryLine{
  max-width: 760px !important;
  margin: 34px 0 0 !important;
  padding: 18px 22px !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: rgba(232,238,255,.82) !important;
  text-align: left !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(124,162,255,.12) !important;
  border-radius: 18px !important;
}

.heroLearnRow{
  justify-content: flex-start !important;
  margin-top: 18px !important;
}

.heroLearnText{
  color: rgba(190,210,255,.75) !important;
}

@media (max-width: 1000px){
  .heroSimple{
    padding: 104px 0 88px !important;
  }

  .heroBlock{
    padding: 0 38px !important;
  }

  .heroTitle{
    max-width: 820px !important;
    letter-spacing: -2.6px !important;
  }
}

@media (max-width: 768px){
  .heroSimple{
    padding: 88px 0 76px !important;
  }

  .heroBlock{
    padding: 0 24px !important;
  }

  .heroTitle{
    font-size: clamp(40px, 12vw, 62px) !important;
    line-height: 1.02 !important;
    letter-spacing: -1.8px !important;
    margin-bottom: 22px !important;
  }

  .heroSubtitle{
    font-size: 17px !important;
    line-height: 1.55 !important;
    margin-bottom: 26px !important;
  }

  .heroMemoryLine{
    font-size: 15px !important;
    line-height: 1.55 !important;
    padding: 16px 18px !important;
    margin-top: 28px !important;
  }

  .heroLearnRow{
    gap: 10px !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 520px){
  .heroTitle{
    font-size: 38px !important;
  }

  .heroSubtitle{
    font-size: 16px !important;
  }
}


/* =========================================================
   HERO FINAL V2 — smaller, lighter, cleaner
   ========================================================= */

.heroSimple{
  padding: 112px 0 96px !important;
}

.heroBlock{
  max-width: 1240px !important;
  padding: 0 64px !important;
}

.heroTitle{
  max-width: 820px !important;
  font-size: clamp(44px, 5.2vw, 74px) !important;
  line-height: 1.04 !important;
  font-weight: 780 !important;
  letter-spacing: -2.2px !important;
  margin-bottom: 26px !important;
}

.heroSubtitle{
  max-width: 760px !important;
  font-size: clamp(18px, 1.35vw, 23px) !important;
  line-height: 1.58 !important;
  font-weight: 450 !important;
  color: rgba(195, 214, 255, .88) !important;
  margin-bottom: 30px !important;
}

.heroMemoryLine{
  max-width: 790px !important;
  margin: 34px 0 0 !important;
  padding: 18px 22px !important;
  font-size: 16px !important;
  line-height: 1.62 !important;
  font-weight: 450 !important;
  color: rgba(238,243,255,.84) !important;
  background: rgba(255,255,255,.032) !important;
  border: 1px solid rgba(124,162,255,.12) !important;
  border-radius: 18px !important;
  text-align: left !important;
}

@media (max-width: 1000px){
  .heroTitle{
    max-width: 760px !important;
    font-size: clamp(42px, 8vw, 66px) !important;
    letter-spacing: -1.9px !important;
  }

  .heroBlock{
    padding: 0 38px !important;
  }
}

@media (max-width: 768px){
  .heroSimple{
    padding: 88px 0 74px !important;
  }

  .heroBlock{
    padding: 0 24px !important;
  }

  .heroTitle{
    font-size: clamp(36px, 10.5vw, 54px) !important;
    line-height: 1.06 !important;
    font-weight: 760 !important;
    letter-spacing: -1.3px !important;
    margin-bottom: 22px !important;
  }

  .heroSubtitle{
    font-size: 16.5px !important;
    line-height: 1.56 !important;
  }

  .heroMemoryLine{
    font-size: 15px !important;
    line-height: 1.56 !important;
    padding: 16px 18px !important;
    margin-top: 28px !important;
  }
}

@media (max-width: 520px){
  .heroTitle{
    font-size: 34px !important;
  }
}


/* =========================================================
   HERO NOTE FINAL V3
   ========================================================= */
.heroMemoryLine{
  max-width: 860px !important;
  font-size: 15.8px !important;
  line-height: 1.62 !important;
}
@media (max-width: 768px){
  .heroMemoryLine{
    font-size: 14.8px !important;
    line-height: 1.56 !important;
  }
}


/* =========================================================
   OPSTAN LOGO + PC ONLINE BUTTON FINAL
   ========================================================= */

/* logo in header instead of white square */
.opstanBrandLogo,
.brand img,
.logo img,
.navLogo img,
.siteLogo img{
  width: 34px !important;
  height: 34px !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 8px !important;
}

/* if the old white square was CSS-only */
.brandMark,
.logoMark,
.navMark,
.siteMark,
.headerLogoMark{
  background-image: url("opstan-logo.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
  border-radius: 8px !important;
}

/* make header logo area calm and not white */
.navBrand,
.brand,
.logo,
.navLogo,
.siteLogo{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  min-height: 34px !important;
}

/* PC icon for the temporary online browser version button */
.heroBtnIconPc svg,
.btnPcIcon svg{
  width: 20px;
  height: 20px;
}

/* Replace generic browser/chrome icon visual if button has this helper class later */
.heroOnlinePcIcon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* =========================================================
   LOGO FIX EVERYWHERE
   ========================================================= */
.brandLogo,
.footerLogo{
  display:block !important;
  object-fit:contain !important;
  background:transparent !important;
}

.brandLogo{
  width:34px !important;
  height:34px !important;
  border-radius:8px !important;
}

.footerLogo{
  width:28px !important;
  height:28px !important;
  border-radius:8px !important;
}

.brand{
  gap:10px !important;
  align-items:center !important;
}


/* online version full button */
.heroDownloadSecondary{
  background: rgba(255,255,255,0.04) !important;
  border:1px solid rgba(124,162,255,0.28) !important;
  color:#eaf0ff !important;
}
.heroDownloadSecondary:hover,
.heroDownloadSecondary:focus-visible{
  background: rgba(37,99,235,0.16) !important;
  border-color: rgba(124,162,255,0.50) !important;
}
.heroDownloadSecondary svg{
  width:17px;
  height:17px;
}

/* =========================================================
   ECOSYSTEM FINAL — clean PC / online layout
   Scoped to ecosystem.html classes only.
   ========================================================= */
body.shell .ecoPlatformSection{
  padding:96px 64px !important;
}

body.shell .ecoPlatformSection + .fullDash{
  max-width:calc(1500px - 128px);
  margin:0 auto;
  border-top:1px solid rgba(15,23,42,.08);
}

.ecosystemSplit{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(360px, 540px);
  gap:58px;
  align-items:center;
}

.ecosystemSplitReverse{
  grid-template-columns:minmax(360px, 540px) minmax(0, 1fr);
}

.ecosystemSplitReverse .ecosystemCopy{ order:2; }
.ecosystemSplitReverse .ecoVisualSlot{ order:1; }

.ecosystemCopy{ min-width:0; }

.ecoKicker{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 12px;
  margin:0 0 18px;
  border-radius:999px;
  background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.16);
  color:#2563eb;
  font-size:12px;
  line-height:1;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.ecosystemHeadClean{
  display:block !important;
  margin:0 0 20px !important;
}

.ecosystemHeadClean .ethTitle{
  max-width:760px;
  margin:0 0 14px !important;
  letter-spacing:-.035em;
}

.ecosystemHeadClean .howLead{
  max-width:820px;
  margin:0 !important;
  color:#56627a !important;
  font-size:18px;
  line-height:1.68;
}

.ecoActions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin:28px 0 32px;
}

.ecoTextLink{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:40px;
  padding:0 13px;
  border-radius:12px;
  color:#172033;
  background:#f5f7fb;
  border:1px solid #e8edf7;
  font-size:14px;
  font-weight:750;
  text-decoration:none;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}

.ecoTextLink svg{
  width:15px;
  height:15px;
  flex:none;
}

.ecoTextLink:hover,
.ecoTextLink:focus-visible{
  background:#eef3ff;
  border-color:#dbe6ff;
  outline:none;
  transform:translateY(-1px);
}

.ecoTextList{
  display:grid;
  gap:14px;
  margin:0;
}

.ecoTextItem{
  display:grid;
  grid-template-columns:18px minmax(0, 1fr);
  gap:14px;
  padding:18px 18px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:20px;
  background:#fbfcff;
}

.ecoDot{
  width:9px;
  height:9px;
  margin-top:8px;
  border-radius:50%;
  background:#2563eb;
  box-shadow:0 0 0 6px rgba(37,99,235,.10);
}

.ecoTextItem h3{
  margin:0 0 6px;
  color:#111827;
  font-size:17px;
  line-height:1.25;
  letter-spacing:-.015em;
}

.ecoTextItem p{
  margin:0;
  color:#667085;
  font-size:15px;
  line-height:1.58;
}

.ecoGithubBox{
  display:grid;
  grid-template-columns:44px minmax(0, 1fr) auto;
  align-items:center;
  gap:16px;
  margin-top:16px;
  padding:18px;
  border-radius:22px;
  background:linear-gradient(135deg, #0c1327 0%, #111b35 100%);
  border:1px solid rgba(124,162,255,.20);
  box-shadow:0 18px 50px rgba(9,13,26,.14);
}

.ecoGithubIcon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:15px;
  background:rgba(255,255,255,.08);
  color:#ffffff;
}

.ecoGithubIcon svg{
  width:22px;
  height:22px;
}

.ecoGithubBox h3{
  margin:0 0 4px;
  color:#f4f7ff;
  font-size:17px;
  line-height:1.25;
  letter-spacing:-.015em;
}

.ecoGithubBox p{
  margin:0;
  color:rgba(218,228,255,.72);
  font-size:14px;
  line-height:1.5;
}

.ecoGithubLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:40px;
  padding:0 14px;
  border-radius:12px;
  background:#ffffff;
  color:#0c1327;
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .16s ease, background .16s ease;
}

.ecoGithubLink svg{
  width:15px;
  height:15px;
}

.ecoGithubLink:hover,
.ecoGithubLink:focus-visible{
  background:#eef3ff;
  outline:none;
  transform:translateY(-1px);
}

.ecoVisualSlot{
  min-height:520px;
}

.ecoVisualInner{
  position:relative;
  min-height:520px;
  height:100%;
  border-radius:34px;
  border:1px dashed rgba(37,99,235,.25);
  background:
    radial-gradient(circle at 50% 22%, rgba(37,99,235,.16), transparent 30%),
    linear-gradient(180deg, #f8faff 0%, #eef3ff 100%);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.70), 0 24px 70px rgba(15,23,42,.08);
}

.ecoVisualInner::before{
  content:"";
  position:absolute;
  inset:32px;
  border-radius:26px;
  border:1px solid rgba(37,99,235,.10);
  background:rgba(255,255,255,.38);
}

.ecoVisualInner::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:52px;
  width:58%;
  height:10px;
  transform:translateX(-50%);
  border-radius:999px;
  background:rgba(37,99,235,.08);
}

.ecoVisualBadge{
  position:absolute;
  top:22px;
  left:22px;
  right:22px;
  z-index:2;
  display:inline-flex;
  justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(37,99,235,.14);
  color:#52617a;
  font-size:14px;
  font-weight:750;
  text-align:center;
  backdrop-filter:blur(12px);
}

.ecoVisualIcon{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:118px;
  height:118px;
  border-radius:32px;
  color:#2563eb;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(37,99,235,.12);
  box-shadow:0 18px 50px rgba(37,99,235,.12);
}

.ecoVisualIcon svg{
  width:58px;
  height:58px;
}

.ecoVisualDesktop .ecoVisualInner::before{
  inset:78px 38px 86px;
  border-radius:24px;
}

.ecoVisualOnline .ecoVisualInner{
  min-height:500px;
}

@media (max-width:1100px){
  body.shell .ecoPlatformSection{
    padding:78px 38px !important;
  }

  .ecosystemSplit,
  .ecosystemSplitReverse{
    grid-template-columns:1fr;
    gap:36px;
  }

  .ecosystemSplitReverse .ecosystemCopy,
  .ecosystemSplitReverse .ecoVisualSlot{
    order:initial;
  }

  .ecoVisualSlot,
  .ecoVisualInner,
  .ecoVisualOnline .ecoVisualInner{
    min-height:380px;
  }
}

@media (max-width:700px){
  body.shell .ecoPlatformSection{
    padding:58px 20px !important;
  }

  body.shell .ecoPlatformSection + .fullDash{
    max-width:calc(100% - 40px);
  }

  .ecosystemHeadClean .howLead{
    font-size:16px;
    line-height:1.6;
  }

  .ecoActions{
    align-items:stretch;
  }

  .ecoActions .heroDownload,
  .ecoTextLink{
    width:100%;
    justify-content:center;
  }

  .ecoTextItem{
    padding:16px;
    border-radius:18px;
  }

  .ecoGithubBox{
    grid-template-columns:1fr;
    text-align:left;
  }

  .ecoGithubLink{
    width:100%;
  }

  .ecoVisualSlot,
  .ecoVisualInner,
  .ecoVisualOnline .ecoVisualInner{
    min-height:320px;
  }

  .ecoVisualIcon{
    width:96px;
    height:96px;
    border-radius:26px;
  }

  .ecoVisualIcon svg{
    width:48px;
    height:48px;
  }
}

/* Ecosystem product images */
.ecoVisualImageFrame{
  min-height:520px;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
}

.ecoVisualImageFrame::before,
.ecoVisualImageFrame::after{
  display:none;
}

.ecoProductImage{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:0;
  filter:drop-shadow(0 24px 44px rgba(0,0,0,.36));
}

.ecoProductImageDesktop,
.ecoProductImageOnlinePc{
  max-height:480px;
}

.ecoProductImageDesktop{
  width:100%;
  max-width:720px;
}

.ecoProductImageOnlinePc{
  width:100%;
  max-width:700px;
}

.ecoOnlineShowcase{
  align-items:center;
  justify-content:center;
}

.ecoOnlineShowcase .ecoProductImageOnlinePc{
  width:100%;
  height:auto;
  margin-right:10%;
}

.ecoOnlineShowcase .ecoProductImageMobile{
  position:absolute;
  right:4%;
  bottom:4%;
  width:28%;
  height:auto;
  border-radius:0;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.58));
}

@media (max-width:1100px){
  .ecoVisualImageFrame,
  .ecoVisualOnline .ecoVisualImageFrame{
    min-height:380px;
    padding:0;
  }

  .ecoProductImageDesktop,
  .ecoProductImageOnlinePc{
    max-height:340px;
  }
}

@media (max-width:700px){
  .ecoVisualImageFrame,
  .ecoVisualOnline .ecoVisualImageFrame{
    min-height:300px;
    padding:0;
    border-radius:24px;
  }

  .ecoProductImage{
    border-radius:0;
  }

  .ecoOnlineShowcase .ecoProductImageOnlinePc{
    width:100%;
    margin-right:0;
  }

  .ecoOnlineShowcase .ecoProductImageMobile{
    right:8px;
    bottom:8px;
    width:35%;
    border-radius:0;
  }
}

/* =========================================================
   ECOSYSTEM IMAGE FINAL TUNE — pure white background
   ========================================================= */
.ecoVisualImageFrame{
  min-height:560px;
  padding:0 !important;
  border:none !important;
  background:#ffffff !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.ecoVisualImageFrame::before,
.ecoVisualImageFrame::after{
  display:none !important;
}

.ecoProductImage{
  border-radius:0 !important;
  object-fit:contain;
}

.ecoProductImageDesktop{
  width:122% !important;
  max-width:820px !important;
  transform:translateX(-1%);
}

.ecoProductImageOnlinePc{
  width:118% !important;
  max-width:800px !important;
}

.ecoOnlineShowcase .ecoProductImageOnlinePc{
  width:112% !important;
  max-width:800px !important;
  margin-right:12% !important;
}

.ecoOnlineShowcase .ecoProductImageMobile{
  width:34% !important;
  right:-1% !important;
  bottom:3% !important;
}

@media (max-width:1100px){
  .ecoVisualImageFrame,
  .ecoVisualOnline .ecoVisualImageFrame{
    min-height:430px;
    background:#ffffff !important;
  }

  .ecoProductImageDesktop{
    width:112% !important;
    max-width:720px !important;
  }

  .ecoProductImageOnlinePc{
    width:110% !important;
    max-width:700px !important;
  }
}

@media (max-width:700px){
  .ecoVisualImageFrame,
  .ecoVisualOnline .ecoVisualImageFrame{
    min-height:320px;
    background:#ffffff !important;
  }

  .ecoProductImageDesktop,
  .ecoProductImageOnlinePc{
    width:118% !important;
    max-width:none !important;
  }

  .ecoOnlineShowcase .ecoProductImageOnlinePc{
    width:112% !important;
    margin-right:7% !important;
  }

  .ecoOnlineShowcase .ecoProductImageMobile{
    width:36% !important;
    right:-2% !important;
    bottom:6% !important;
  }
}


/* =========================================================
   FINAL SITE PATCH — 2026-07-10
   Alignment + mobile polish + safer external platform layout
   ========================================================= */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

/* Main hero must use the same 1500px content column as the sections below. */
body.shell .heroBlock{
  width:100% !important;
  max-width:1500px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:64px !important;
  padding-right:64px !important;
  box-sizing:border-box !important;
  text-align:left !important;
}

body.shell .heroBlock .heroTitle,
body.shell .heroBlock .heroSubtitle,
body.shell .heroMemoryLine{
  text-align:left !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

body.shell .heroBlock .heroBtns,
body.shell .heroLearnRow{
  justify-content:flex-start !important;
}

/* Public-platform buttons: keep icons clean and clickable on desktop/mobile. */
.joinBtns{
  flex-wrap:wrap;
}
.joinSocial{
  flex:0 0 auto;
}

@media (max-width:1150px){
  body.shell .topbar{
    padding:12px 0 14px !important;
  }

  .topbarInner{
    padding-left:18px !important;
    padding-right:18px !important;
    box-sizing:border-box !important;
  }

  .brandLogo{
    width:30px !important;
    height:30px !important;
  }

  .burger{
    margin-left:0 !important;
  }

  .navDrawer{
    background:#090d1a !important;
    padding-top:74px !important;
  }

  .navDrawer .pill{
    color:#dbe6ff !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    padding:16px 24px !important;
  }

  .navDrawer .pill.is-active,
  .navDrawer .pill:hover,
  .navDrawer .pill:focus-visible{
    color:#62a6ff !important;
  }

  .navDrawerTags{
    padding-left:36px !important;
    padding-right:24px !important;
  }

  .navDrawerTag{
    color:rgba(219,230,255,.72) !important;
    padding:7px 0 !important;
  }
}

@media (max-width:900px){
  body.shell .heroSimple{
    padding:74px 0 60px !important;
  }

  body.shell .heroBlock,
  body.shell .ethModule,
  body.shell .howOuter,
  body.shell .newsCard,
  body.shell .ctaCard,
  body.shell .customCard,
  body.shell .dwlOuter,
  body.shell .pkgCard{
    padding-left:24px !important;
    padding-right:24px !important;
  }

  body.shell .wrap > section{
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  body.shell .ethBlock,
  body.shell .how,
  body.shell .newsSection,
  body.shell .customSection,
  body.shell .ctaSection{
    padding-top:72px !important;
    padding-bottom:72px !important;
  }

  .ethWrap,
  .miningModule,
  .ecosystemSplit,
  .ecosystemSplitReverse,
  .modeGrid,
  .ecoFeatures,
  .plRewardWrap{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  .heroTitle{
    max-width:100% !important;
    font-size:clamp(36px, 10.5vw, 54px) !important;
    line-height:1.08 !important;
    letter-spacing:-1.2px !important;
    margin-bottom:20px !important;
  }

  .heroSubtitle{
    max-width:100% !important;
    font-size:16.5px !important;
    line-height:1.58 !important;
    margin-bottom:24px !important;
  }

  .ethTitle,
  .howTitle,
  .joinTitle{
    font-size:clamp(30px, 8.4vw, 42px) !important;
    line-height:1.12 !important;
    letter-spacing:-.8px !important;
  }

  .ethText,
  .howLead,
  .joinText,
  .modeCardLead{
    font-size:16px !important;
    line-height:1.62 !important;
  }

  .heroBtns,
  .platBtns,
  .modeActions,
  .ecoActions{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    width:100% !important;
  }

  .heroDownload,
  .heroLearn.modeActionBtn,
  .ecoTextLink,
  .soloBtn,
  .plBtnPrimary{
    width:100% !important;
    min-height:44px !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }

  .heroLearnRow{
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
    gap:10px !important;
  }

  .heroLearnText{
    width:100% !important;
  }

  .heroLearn{
    justify-content:center !important;
    text-align:center !important;
  }

  .heroMemoryLine{
    max-width:100% !important;
    font-size:14.8px !important;
    line-height:1.58 !important;
    padding:15px 16px !important;
    border-radius:16px !important;
  }

  .modeCard,
  .ecoFeat,
  .ethCard,
  .foundationPoint,
  .ecoTextItem,
  .plStat{
    border-radius:18px !important;
  }

  .modeCard{
    padding:22px !important;
  }

  .modeBody{
    display:flex !important;
    flex-direction:column !important;
    min-height:auto !important;
    padding-right:0 !important;
  }

  .modeImg{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    width:100% !important;
    height:170px !important;
    margin-top:16px !important;
    transform:none !important;
  }

  .modeImgPool{ background-size:44% auto !important; }
  .modeImgSolo{ background-size:40% auto !important; }

  .modeNotice{
    font-size:14.5px !important;
    line-height:1.55 !important;
  }

  .fullDash{
    max-width:calc(100% - 48px) !important;
  }

  .siteFooter{
    padding-left:22px !important;
    padding-right:22px !important;
  }

  .footerInner,
  .footerCols{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:560px){
  body.shell .heroSimple{
    padding:58px 0 48px !important;
  }

  body.shell .heroBlock,
  body.shell .ethModule,
  body.shell .howOuter,
  body.shell .newsCard,
  body.shell .ctaCard,
  body.shell .customCard,
  body.shell .dwlOuter,
  body.shell .pkgCard{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .heroTitle{
    font-size:34px !important;
    line-height:1.1 !important;
    letter-spacing:-.9px !important;
  }

  .heroSubtitle{
    font-size:15.8px !important;
  }

  .ethTitle,
  .howTitle,
  .joinTitle{
    font-size:30px !important;
  }

  .modeCard{
    padding:18px !important;
  }

  .modeImg{
    height:150px !important;
  }

  .joinSocial{
    width:48px !important;
    height:48px !important;
    border-radius:14px !important;
  }
}