:root{
  --bg:#0a0a0f;
  --bg-2:#12121a;
  --card:#181821;
  --orange:#ff6a00;
  --orange-2:#ff8c1a;
  --green:#26d07c;
  --red:#ff4d4d;
  --text:#f3f3f7;
  --muted:#a9adc2;
  --accent:#ffd166;
}

/* Reset / base --------------------------------------------------------------*/
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html,body{overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
button,a{touch-action:manipulation}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 70% -10%, #391a00 0%, var(--bg) 50%),
    linear-gradient(180deg, #0b0b12 0%, var(--bg) 50%);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Global container with safe mobile padding --------------------------------*/
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding-inline: max(clamp(16px, 4vw, 28px), env(safe-area-inset-left));
}

/* Header -------------------------------------------------------------------*/
.site-header{
  position:sticky;top:0;z-index:10;
  background:rgba(10,10,15,.85);
  backdrop-filter: blur(6px);
  border-bottom:1px solid #1f1f2a;
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:10px;gap:12px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand .logo{width:44px;height:44px;border-radius:8px;object-fit:cover;border:2px solid var(--orange)}
.brand h1{
  font-family:Creepster, system-ui;
  letter-spacing:1px;margin:0;
  font-size:clamp(22px, 4vw, 32px);
}
.brand .ghost{color:var(--text)}
.brand .slime{color:var(--orange)}
.nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
a.btn{
  text-decoration:none;background:var(--card);
  padding:10px 14px;border-radius:10px;border:1px solid #28283a;color:var(--text);
  font-weight:600;transition:.2s;display:inline-block
}
a.btn:hover{transform:translateY(-1px)}
a.btn.buy{background:linear-gradient(180deg, var(--orange), var(--orange-2)); color:#160a00}
a.btn.outline{background:transparent;border-color:var(--orange);color:var(--orange)}
a.btn.xl{font-size:22px;padding:16px 22px}

/* Hero ---------------------------------------------------------------------*/
.hero{position:relative;min-height:60vh;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.25;filter:saturate(1.2) contrast(1.1)}
.hero .overlay{position:absolute;inset:0;background:radial-gradient(circle at 70% 10%, rgba(255,106,0,.25), transparent 35%)}
/* IMPORTANT: only set top/bottom so we KEEP wrap side padding */
.hero .hero-content{position:relative;padding-block:72px 40px}
.tagline{font-family:Creepster, system-ui;font-size:clamp(28px, 6vw, 48px);margin:.2em 0 .1em}
.sub{max-width:700px;color:var(--muted);margin-bottom:16px;font-size:clamp(14px, 2.8vw, 18px)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}

/* Sections -----------------------------------------------------------------*/
.section{padding-block:56px}
.section.dark{background:linear-gradient(180deg, #0c0c12, #0a0a0f)}
.section.center{text-align:center}

/* Grids --------------------------------------------------------------------*/
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* Tiles --------------------------------------------------------------------*/
.tile{
  background:var(--card);border:1px solid #24243a;border-radius:14px;padding:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.25)
}
.tile .tile-title{font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);font-size:12px;margin-bottom:6px}
.tile .big{font-size:clamp(22px, 4.8vw, 28px);font-weight:800}
.tile .smallmono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;word-break:break-all}
.tile.live{
  display:grid;
  grid-template-columns:1.2fr auto 1fr auto 1fr;
  align-items:center;gap:12px;margin-top:12px
}
.tile.live .price{font-size:clamp(26px, 6vw, 40px);font-weight:800}
.tile.live .sep{width:1px;height:48px;background:#2a2a3e}
.tile.live .metric{display:flex;justify-content:space-between;gap:12px}
.tile.live .metric span{color:var(--muted)}
.tile.live .updated{grid-column:1/-1;color:var(--muted);font-size:12px;margin-top:4px}

/* Image stack --------------------------------------------------------------*/
.image-stack{position:relative}
.image-stack .stack{width:100%;border-radius:14px;border:2px solid #2a2a3a}
.image-stack .top{position:relative;z-index:2;transform:rotate(-1.2deg)}
.image-stack .bottom{position:absolute;left:18px;top:18px;z-index:1;filter:brightness(.9);transform:rotate(2deg)}

/* Lists: keep markers inside the padding (fix iOS left clip) ---------------*/
.bullets,
.steps{
  list-style-position: inside;
  padding-left: 0;
  margin-left: 0;
}
.bullets li{margin:.4em 0}
.steps{max-width:700px;margin:0 auto}
.steps li{margin:.5em 0}

.fine{color:var(--muted);font-size:13px;margin-top:10px}

/* Footer -------------------------------------------------------------------*/
.site-footer{border-top:1px solid #1f1f2a;background:#0a0a10}
.site-footer .foot{display:flex;justify-content:space-between;gap:10px;padding-block:20px}
.site-footer a{color:var(--orange);text-decoration:none}

.accent{color:var(--accent)}
.muted{color:var(--muted)}
.small{font-size:12px}
.links a{margin-right:10px;color:var(--orange);text-decoration:none}

/* ---------------------- Responsive tweaks ---------------------------------*/
@media (max-width: 900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .image-stack .bottom{position:relative;left:0;top:0;margin-top:12px}
  .section{padding-block:44px}
}

/* Phone-first refinements */
@media (max-width: 600px){
  .site-header .wrap{padding-block:8px}
  .nav a.btn{flex:1 1 calc(50% - 6px)}
  .cta-row a.btn{flex:1 1 160px}

  .tile.live{
    grid-template-columns:1fr;
    text-align:left;
  }
  .tile.live .sep{display:none}
  .tile.live .metric{justify-content:flex-start}
  .tile.live .price{line-height:1.1}

  /* Chart iframe: keep 16:9 with CSS aspect-ratio */
  #dsWidget{width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:12px;display:block}
}

/* Extra-small */
@media (max-width: 380px){
  .brand .logo{width:36px;height:36px}
  .brand h1{letter-spacing:.5px}
}