/* 65eighty.com's front page. The platform's look (site.css) does the rest. */
.front .site-main { max-width: none; padding: 0 0 48px; }
.wrap { max-width: var(--brand-max); margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.front [id] { scroll-margin-top: 84px; }
html { scroll-behavior: smooth; }
.lede { color: var(--brand-muted); font-size: 1.12rem; max-width: 34rem; }

/* hero */
.front-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding-top: 80px; padding-bottom: 88px; }
.front-hero h1 { font-size: clamp(2.8rem, 6.2vw, 5rem); line-height: .96; margin-bottom: 24px; }
.front-hero .glow { display: inline-block; }
.ticks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 8px; color: var(--brand-muted); }
.ticks li { display: flex; gap: 10px; align-items: center; }
.ticks li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%;
  background: linear-gradient(100deg, var(--brand-accent), var(--brand-accent-2));
  -webkit-mask: radial-gradient(circle, #000 0 3px, transparent 3.5px); mask: radial-gradient(circle, #000 0 3px, transparent 3.5px); }

/* three shops, three looks */
.windows { position: relative; height: 470px; }
.window { position: absolute; width: 74%; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.75); background: #17130f; }
.window .bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #1f1a14; font: .95rem var(--brand-label); letter-spacing: 1px; color: var(--brand-muted); }
.window .bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a322a; }
.window .bar span { margin-left: 8px; }
.w1 { left: 0; top: 0; transform: rotate(-3deg); }
.w2 { right: 0; top: 112px; transform: rotate(2.5deg); }
.w3 { left: 12%; top: 214px; z-index: 2; border-color: rgba(255,138,30,.35); }
.page { padding: 18px 18px 20px; display: grid; gap: 10px; min-height: 180px; }
.page b { font: 400 1.5rem/1 var(--brand-display); text-transform: uppercase; }
.page em { font-style: normal; font-size: .9rem; opacity: .7; }
.page.light { background: #f6f3ef; color: #1a1714; }
.page.light b { font-family: system-ui, sans-serif; font-weight: 800; letter-spacing: -.01em; }
.page.dark { background: #0c0b0a; color: #f1e9dc; }
.page.dark b { font-family: ui-monospace, Menlo, monospace; font-weight: 700; }
.page.ember { background: radial-gradient(400px 200px at 90% 0, rgba(232,57,31,.25), transparent 70%), #0c0b0a; color: #f1e9dc; }
.rows { display: grid; gap: 7px; }
.rows span { height: 9px; border-radius: 5px; background: currentColor; opacity: .13; }
.rows span:nth-child(2) { width: 80%; } .rows span:nth-child(3) { width: 60%; }
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.products span { aspect-ratio: 1; border-radius: 8px; background: linear-gradient(135deg, #2a221b, #1f1a14); border: 1px solid rgba(255,255,255,.06); }
.pill { justify-self: start; padding: 6px 14px; border-radius: 6px; font: 700 .78rem var(--brand-font); text-transform: uppercase; letter-spacing: .5px; }
.pill.green { background: #0b6e4f; color: #fff; border-radius: 999px; }
.pill.blue { background: #3fa9f5; color: #0b1520; border-radius: 2px; }
.pill.ember { background: linear-gradient(100deg, #e8391f, #ff8a1e); color: #0c0b0a; }

/* sections */
.front-section { padding-top: 88px; padding-bottom: 88px; }
.front-section.mine { padding-top: 0; padding-bottom: 56px; }
.front-section h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.point { padding: 26px 24px; transition: transform .25s ease, border-color .25s ease; }
.point:hover { transform: translateY(-4px); border-color: rgba(232,57,31,.4); }
.point h3 { font-size: 1.3rem; margin-bottom: 8px; }
.point p { margin: 0; color: var(--brand-muted); font-size: .95rem; }
.tag { display: inline-block; margin-bottom: 12px; padding: 2px 9px; border-radius: 3px; font: .95rem var(--brand-label); letter-spacing: 2px; text-transform: uppercase; color: var(--brand-bg); background: var(--brand-accent-2); }
.tile.add { border-style: dashed; }

/* stack */
.stack-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 48px 40px; border-radius: 18px;
  background: linear-gradient(135deg, var(--brand-surface), var(--brand-surface-2)); border: 1px solid rgba(255,138,30,.15); }
.stack-panel .lede { max-width: none; }
.term { border-radius: 12px; overflow: hidden; background: #080706; border: 1px solid rgba(255,255,255,.08); }
.term .bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #17130f; font: .95rem var(--brand-label); color: var(--brand-muted); }
.term .bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a322a; }
.term .bar span { margin-left: 8px; }
.term pre { margin: 0; padding: 18px 20px 22px; font: 1.2rem/1.5 var(--brand-label); color: var(--brand-text); white-space: pre-wrap; }
.term .dim { color: var(--brand-muted); } .term .ok { color: var(--brand-accent-2); }
.blocks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 20px; }
.blocks div { padding: 16px; border: 1px solid var(--brand-line); border-radius: 10px; display: grid; gap: 2px; }
.blocks b { font-weight: 600; }
.blocks span { font: 1rem var(--brand-label); letter-spacing: 1px; color: var(--brand-accent-2); }

/* closing */
.cta-band { text-align: center; padding: 64px 24px; border-radius: 18px; border: 1px solid rgba(255,138,30,.15);
  background: radial-gradient(600px 240px at 50% 0, rgba(232,57,31,.16), transparent 70%), var(--brand-surface); }
.cta-band h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.cta-band .lede { margin: 0 auto 24px; }

@media (max-width: 991px) {
  .front-hero, .split, .stack-panel { grid-template-columns: 1fr; }
  .front-hero { padding-top: 48px; gap: 40px; }
  .windows { height: 400px; max-width: 520px; width: 100%; margin: 0 auto; }
  .blocks { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; }
  .blocks { grid-template-columns: repeat(2, 1fr); }
  .windows { height: 360px; }
  .window { width: 86%; }
  .stack-panel { padding: 28px 20px; }
  .front-section { padding-top: 64px; padding-bottom: 64px; }
}

/* custom builds */
.how { list-style: none; counter-reset: how; margin: 0; padding: 0; display: grid; gap: 14px; }
.how li { counter-increment: how; display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; padding: 16px 18px; border: 1px solid var(--brand-line); border-radius: var(--brand-radius); background: var(--brand-surface); }
.how li::before { content: "0" counter(how); grid-row: span 2; font: 1.6rem var(--brand-label); color: var(--brand-accent-2); }
.how b { font-weight: 700; } .how span { color: var(--brand-muted); }