/* ============================================================
   Pipnotic — Landing Page (home.css)
   Inter font · Dark · Neon-inspired
   ============================================================ */

/* ── Layout primitives ──────────────────────────────────────── */
.lp-container        { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
.lp-container--sm    { max-width: 740px; }

/* ── Buttons ────────────────────────────────────────────────── */
.lp-btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  background: #00e5c0; color: #000; font-weight: 700;
  border: none; border-radius: 8px; cursor: pointer;
  text-decoration: none; transition: background .18s, transform .18s;
  white-space: nowrap;
}
.lp-btn-primary:hover { background: #00ffcf; color: #000; transform: translateY(-1px); }
.lp-btn-ghost {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.05); color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  cursor: pointer; text-decoration: none; font-weight: 500;
  transition: background .18s, color .18s, border-color .18s;
  white-space: nowrap;
}
.lp-btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.25); }
.lp-btn-lg   { font-size: 15px; padding: 14px 28px; }
.lp-btn-full { width: 100%; justify-content: center; padding: 13px 20px; font-size: 14.5px; }

/* ── Section scaffolding ────────────────────────────────────── */
.lp-section          { padding: 96px 0; }
.lp-section--surface { background: rgba(255,255,255,.02); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.lp-section__head    { text-align: center; margin-bottom: 64px; }
.lp-section__h2      { font-size: clamp(28px,4vw,46px); font-weight: 900; letter-spacing: -1.5px; color: #fff; margin-bottom: 16px; line-height: 1.08; }
.lp-section__sub     { font-size: 16.5px; color: rgba(255,255,255,.45); max-width: 52ch; margin: 0 auto; line-height: 1.65; }
.lp-eyebrow          { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #00e5c0; margin-bottom: 14px; }
.lp-eyebrow::before,.lp-eyebrow::after { content: ''; flex: 1; height: 1px; background: rgba(0,229,192,.2); }
.lp-section__head .lp-eyebrow { justify-content: center; }
.lp-link             { color: #00e5c0; text-decoration: none; font-weight: 600; }
.lp-link:hover       { text-decoration: underline; }

/* ── Reveal animation ───────────────────────────────────────── */
.lp-reveal            { opacity: 0; transform: translateY(20px); transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); }
.lp-reveal--in        { opacity: 1; transform: none; }

/* ── Accent helpers ─────────────────────────────────────────── */
.lp-acc { color: #00e5c0; }
.lp-dim { color: rgba(255,255,255,.28); }

/* ── HERO ───────────────────────────────────────────────────── */
.lp-hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden; padding: 120px 0 0;
}
.lp-hero__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(0,229,192,.045) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(0,229,192,.045) 1px,transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 35%,black 20%,transparent 100%);
  pointer-events: none;
}
.lp-hero__glow {
  position: absolute; width: 700px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,192,.1) 0%, transparent 65%);
  top: -60px; left: 50%; transform: translateX(-50%); pointer-events: none;
}
.lp-hero__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; width: 100%; padding-bottom: 0;
}

/* Badge */
.lp-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,229,192,.07); border: 1px solid rgba(0,229,192,.18);
  color: #00e5c0; font-size: 12px; font-weight: 600;
  padding: 7px 16px; border-radius: 100px; margin-bottom: 28px;
}
.lp-badge__dot {
  width: 6px; height: 6px; border-radius: 50%; background: #00e5c0; flex-shrink: 0;
  animation: lp-pulse 2s infinite;
}
@keyframes lp-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.5)} }

/* Headline */
.lp-hero__h1 {
  font-size: clamp(48px,8vw,90px); font-weight: 900;
  line-height: 1.03; letter-spacing: -4px; color: #fff;
  max-width: 880px; margin-bottom: 22px;
}
.lp-hero__sub {
  font-size: 17px; color: rgba(255,255,255,.45);
  max-width: 500px; line-height: 1.65; margin-bottom: 36px;
}
.lp-hero__btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 56px; }

/* Signals row */
.lp-sigs        { width: 100%; max-width: 940px; margin-bottom: 0; }
.lp-sigs__label {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 12px;
  justify-content: center;
}
.lp-sigs__dot { width: 5px; height: 5px; border-radius: 50%; background: #00e5c0; animation: lp-pulse 2s infinite; }
.lp-sigs__row {
  display: grid; grid-template-columns: repeat(6,1fr); gap: 8px;
}
.lp-sig {
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; padding: 13px 14px;
  display: flex; flex-direction: column; gap: 3px;
  transition: background .2s, border-color .2s;
}
.lp-sig--long  { border-left: 2px solid #00e5c0; }
.lp-sig--short { border-left: 2px solid #fb7185; }
.lp-sig__sym   { font-size: 13px; font-weight: 800; color: #fff; letter-spacing: .02em; }
.lp-sig__meta  { font-size: 10px; color: rgba(255,255,255,.3); }
.lp-sig__dir   { font-size: 10px; font-weight: 700; letter-spacing: .07em; margin-top: 4px; }
.lp-sig--long  .lp-sig__dir { color: #00e5c0; }
.lp-sig--short .lp-sig__dir { color: #fb7185; }
.lp-sig__dist  { font-size: 10px; color: rgba(255,255,255,.28); }
.lp-sig-empty  {
  grid-column: 1/-1; text-align: center; padding: 20px;
  color: rgba(255,255,255,.22); font-size: 13px;
  border: 1px dashed rgba(255,255,255,.07); border-radius: 10px;
}

/* COT strip */
.lp-cot {
  width: 100%; background: rgba(0,0,0,.22);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 14px 32px; margin-top: 28px;
  display: flex; align-items: center; gap: 0; overflow-x: auto;
  scrollbar-width: none;
}
.lp-cot::-webkit-scrollbar { display: none; }
.lp-cot__label {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.2); margin-right: 24px; flex-shrink: 0; white-space: nowrap;
}
.lp-cot__item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0 20px; flex-shrink: 0; position: relative;
}
.lp-cot__item+.lp-cot__item::before {
  content: ''; position: absolute; left: 0; top: 15%; height: 70%;
  width: 1px; background: rgba(255,255,255,.06);
}
.lp-cot__mkt  { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.45); letter-spacing: .04em; }
.lp-cot__bar  { width: 56px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; }
.lp-cot__fill { height: 100%; border-radius: 2px; transition: width .5s; }
.lp-cot__bias { font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.lp-cot__item--strong_bullish .lp-cot__fill { background: #00e5c0; }
.lp-cot__item--strong_bullish .lp-cot__bias { color: #00e5c0; }
.lp-cot__item--bullish        .lp-cot__fill { background: #5eead4; }
.lp-cot__item--bullish        .lp-cot__bias { color: #5eead4; }
.lp-cot__item--neutral        .lp-cot__fill { background: rgba(255,255,255,.2); }
.lp-cot__item--neutral        .lp-cot__bias { color: rgba(255,255,255,.3); }
.lp-cot__item--bearish        .lp-cot__fill { background: #fb923c; }
.lp-cot__item--bearish        .lp-cot__bias { color: #fb923c; }
.lp-cot__item--strong_bearish .lp-cot__fill { background: #fb7185; }
.lp-cot__item--strong_bearish .lp-cot__bias { color: #fb7185; }

/* ── STATS BAND ─────────────────────────────────────────────── */
.lp-stats-band {
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  padding: 28px 0;
}
.lp-stats-band__inner {
  display: flex; align-items: center; justify-content: center;
  gap: 0; flex-wrap: wrap;
}
.lp-stat          { text-align: center; padding: 8px 40px; }
.lp-stat__val     { display: block; font-size: 28px; font-weight: 900; color: #fff; letter-spacing: -1px; }
.lp-stat__lbl     { display: block; font-size: 11.5px; color: rgba(255,255,255,.35); margin-top: 4px; letter-spacing: .02em; }
.lp-stat-div      { width: 1px; height: 40px; background: rgba(255,255,255,.08); flex-shrink: 0; }

/* ── FEATURES ───────────────────────────────────────────────── */
.lp-features {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 12px;
}
.lp-feat-card {
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; padding: 28px; position: relative;
  transition: border-color .2s, background .2s;
}
.lp-feat-card:hover { border-color: rgba(0,229,192,.2); background: rgba(0,229,192,.03); }
.lp-feat-card__icon  { font-size: 18px; color: #00e5c0; margin-bottom: 16px; display: block; }
.lp-feat-card__title { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 10px; letter-spacing: -.3px; }
.lp-feat-card__body  { font-size: 14px; color: rgba(255,255,255,.45); line-height: 1.65; }
.lp-feat-card__tag   {
  position: absolute; top: 16px; right: 16px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 100px;
  background: rgba(0,229,192,.12); color: #00e5c0;
}

/* ── HOW IT WORKS ───────────────────────────────────────────── */
.lp-steps {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 48px;
}
.lp-step__num   { font-size: 48px; font-weight: 900; color: rgba(255,255,255,.08); letter-spacing: -2px; line-height: 1; margin-bottom: 16px; }
.lp-step__title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 10px; letter-spacing: -.3px; }
.lp-step__body  { font-size: 14.5px; color: rgba(255,255,255,.45); line-height: 1.7; }

/* ── INSIDER TABLE ──────────────────────────────────────────── */
.lp-insider-wrap        { width: 100%; }
.lp-insider-table       { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; }
.lp-insider-table__head {
  display: grid; grid-template-columns: 1.2fr 1.5fr 1fr .8fr;
  padding: 12px 20px; background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.3);
}
.lp-insider-table__row {
  display: grid; grid-template-columns: 1.2fr 1.5fr 1fr .8fr;
  padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.05);
  align-items: center; transition: background .15s;
}
.lp-insider-table__row:hover { background: rgba(255,255,255,.025); }
.lp-insider-table__row:last-of-type { border-bottom: none; }
.lp-insider-table__name { font-size: 14px; font-weight: 600; color: #fff; }
.lp-insider-table__co   { font-size: 13px; color: rgba(255,255,255,.55); }
.lp-insider-table__val  { font-size: 15px; font-weight: 800; color: #22c55e; }
.lp-insider-table__date { font-size: 12px; color: rgba(255,255,255,.3); }
.lp-insider-table__foot {
  padding: 14px 20px; text-align: center; font-size: 13px;
  color: rgba(255,255,255,.3); background: rgba(255,255,255,.03);
  border-top: 1px solid rgba(255,255,255,.07);
}
.lp-ticker { font-size: 11px; color: #00e5c0; background: rgba(0,229,192,.1); padding: 1px 6px; border-radius: 4px; margin-left: 6px; font-family: monospace; }

/* ── TESTIMONIALS ───────────────────────────────────────────── */
.lp-testi-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 16px;
}
.lp-testi {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding: 28px;
  display: flex; flex-direction: column; gap: 20px;
}
.lp-testi__stars  { font-size: 13px; color: #f59e0b; letter-spacing: 2px; }
.lp-testi__quote  { font-size: 14.5px; color: rgba(255,255,255,.55); line-height: 1.7; flex: 1; font-style: italic; }
.lp-testi__author { display: flex; align-items: center; gap: 12px; }
.lp-testi__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: rgba(0,229,192,.15); border: 1px solid rgba(0,229,192,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #00e5c0; overflow: hidden;
}
.lp-testi__avatar img { width: 100%; height: 100%; object-fit: cover; }
.lp-testi__name  { display: block; font-size: 13.5px; font-weight: 600; color: #fff; }
.lp-testi__role  { display: block; font-size: 12px; color: rgba(255,255,255,.35); margin-top: 2px; }

/* ── PRICING ────────────────────────────────────────────────── */
.lp-pricing {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 16px; align-items: start;
}
.lp-plan {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 32px 28px;
  display: flex; flex-direction: column; gap: 20px;
}
.lp-plan--featured {
  border-color: rgba(0,229,192,.3);
  background: linear-gradient(150deg,rgba(0,229,192,.05) 0%,rgba(0,0,0,0) 60%);
  box-shadow: 0 0 60px rgba(0,229,192,.07);
}
.lp-plan__tag {
  display: inline-block; align-self: flex-start;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.5);
}
.lp-plan__tag--value { background: rgba(245,158,11,.1); color: #f59e0b; }
.lp-plan--featured .lp-plan__tag { background: rgba(0,229,192,.12); color: #00e5c0; }
.lp-plan__name    { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.5px; }
.lp-plan__desc    { font-size: 13.5px; color: rgba(255,255,255,.4); margin-top: -12px; }
.lp-plan__price   { display: flex; align-items: baseline; gap: 6px; padding-top: 4px; }
.lp-plan__amt     { font-size: 44px; font-weight: 900; color: #fff; letter-spacing: -2px; line-height: 1; }
.lp-plan__per     { font-size: 14px; color: rgba(255,255,255,.35); }
.lp-plan__billing { font-size: 12px; color: rgba(255,255,255,.3); margin-top: -12px; }
.lp-plan__save    { color: #22c55e; font-weight: 600; }
.lp-plan__feats   { list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.lp-plan__feats li { font-size: 13.5px; padding-left: 20px; position: relative; }
.lp-plan__feats li.on  { color: rgba(255,255,255,.65); }
.lp-plan__feats li.off { color: rgba(255,255,255,.2); text-decoration: line-through; }
.lp-plan__feats li.bonus { color: #22c55e; }
.lp-plan__feats li.on::before  { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: #00e5c0; opacity: .7; }
.lp-plan__feats li.off::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.15); }
.lp-plan__feats li.bonus::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.lp-plan__note    { font-size: 12px; color: rgba(255,255,255,.3); text-align: center; }

/* ── FAQ ────────────────────────────────────────────────────── */
.lp-faq        { border-top: 1px solid rgba(255,255,255,.08); }
.lp-faq__item  { border-bottom: 1px solid rgba(255,255,255,.08); }
.lp-faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: 20px; padding: 20px 0; background: none; border: none; text-align: left;
  font-size: 15px; font-weight: 500; color: rgba(255,255,255,.8); cursor: pointer;
  transition: color .18s;
}
.lp-faq__q:hover { color: #fff; }
.lp-faq__q[aria-expanded="true"] { color: #00e5c0; }
.lp-faq__icon { font-size: 20px; color: rgba(255,255,255,.3); flex-shrink: 0; line-height: 1; transition: color .18s; }
.lp-faq__q[aria-expanded="true"] .lp-faq__icon { color: #00e5c0; }
.lp-faq__a    { padding-bottom: 20px; }
.lp-faq__a p  { font-size: 14.5px; color: rgba(255,255,255,.45); line-height: 1.75; }

/* ── READY BANNER ───────────────────────────────────────────── */
.lp-ready {
  position: relative; overflow: hidden;
  padding: 120px 0; text-align: center;
  border-top: 1px solid rgba(255,255,255,.06);
}
.lp-ready__glow {
  position: absolute; width: 600px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle,rgba(0,229,192,.12) 0%,transparent 65%);
  top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none;
}
.lp-ready__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(0,229,192,.03) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(0,229,192,.03) 1px,transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%,black 0%,transparent 100%);
  pointer-events: none;
}
.lp-ready__inner { position: relative; z-index: 1; }
.lp-ready__h2 {
  font-size: clamp(32px,5vw,60px); font-weight: 900; letter-spacing: -2.5px;
  color: #fff; margin-bottom: 20px; line-height: 1.05;
}
.lp-ready__sub { font-size: 17px; color: rgba(255,255,255,.45); max-width: 48ch; margin: 0 auto 40px; line-height: 1.65; }
.lp-ready__disclaimer { font-size: 12.5px; color: rgba(255,255,255,.25); margin-top: 20px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .lp-sigs__row { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px) {
  .lp-features, .lp-pricing, .lp-testi-grid { grid-template-columns: repeat(2,1fr); }
  .lp-steps { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .lp-features, .lp-pricing, .lp-testi-grid { grid-template-columns: 1fr; }
  .lp-sigs__row { grid-template-columns: repeat(2,1fr); }
  .lp-stat { padding: 8px 20px; }
  .lp-stat-div { display: none; }
  .lp-hero__h1 { letter-spacing: -2px; }
  .lp-insider-table__head,
  .lp-insider-table__row { grid-template-columns: 1fr 1fr; }
  .lp-insider-table__head span:nth-child(n+3),
  .lp-insider-table__row span:nth-child(n+3) { display: none; }
}