/* File: public/css/app.css */

:root{
  --bg:#050608;
  --bg-2:#0a0c0f;
  --card:#0e1114;
  --card-2:#121519;
  --line:#1c2128;
  --line-2:#262c34;
  --txt:#eef2f6;
  --muted:#8b949e;
  --accent:#4ea6f7;
  --accent-2:#2f8ce0;
  --up:#2ebd85;
  --down:#f6465d;
}

[x-cloak]{display:none!important}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.font-display{font-family:'Poppins','Inter',sans-serif;letter-spacing:-.02em}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:#242a32;border-radius:8px}

a,button{outline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);border-radius:6px;
}

/* ---------- surfaces ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px}
.card-soft{
  background:linear-gradient(160deg,#101317 0%,#0b0e11 60%);
  border:1px solid var(--line);border-radius:18px;
}
.hairline{border-color:var(--line)}
.dotted-bg{
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:16px 16px;
}

.btn-accent{
  background:var(--accent);color:#04121f;font-weight:600;
  border-radius:10px;transition:background .18s ease,transform .18s ease;
}
.btn-accent:hover{background:#6fb8f9}
.btn-accent:active{transform:translateY(1px)}
.btn-ghost{border:1px solid var(--line-2);border-radius:10px;transition:border-color .18s,background .18s}
.btn-ghost:hover{border-color:#3a444f;background:#12161a}

.up{color:var(--up)}
.down{color:var(--down)}

/* ---------- hero glow ---------- */
.hero-glow{
  position:absolute;inset:auto;
  width:720px;height:720px;right:-160px;top:-220px;
  background:radial-gradient(circle,rgba(78,166,247,.16) 0%,rgba(78,166,247,0) 62%);
  pointer-events:none;filter:blur(10px);
}
.section-glow{
  position:absolute;width:520px;height:520px;
  background:radial-gradient(circle,rgba(78,166,247,.09) 0%,rgba(78,166,247,0) 65%);
  pointer-events:none;
}

/* ---------- price ticker ---------- */
.ticker{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.ticker-track{display:flex;gap:14px;width:max-content;animation:ticker 42s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.ticker-item{
  display:flex;align-items:center;gap:12px;
  min-width:212px;padding:14px 18px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
}

/* ---------- phone mockup ---------- */
.phone{
  width:266px;border-radius:38px;padding:9px;
  background:linear-gradient(160deg,#2b3138,#0d1013);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.05);
}
.phone-screen{
  background:linear-gradient(180deg,#0f1216,#0a0d10);
  border-radius:31px;overflow:hidden;position:relative;padding:16px 14px 18px;
}
.notch{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:86px;height:20px;background:#000;border-radius:12px;
}
.float-stat{
  position:absolute;background:rgba(20,24,29,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);border-radius:12px;
  padding:12px 18px;white-space:nowrap;
  animation:floaty 6s ease-in-out infinite;
}
.float-stat:nth-child(2){animation-delay:-2s}
.float-stat:nth-child(3){animation-delay:-4s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}

/* ---------- accordion ---------- */
.faq-item{border-bottom:1px solid var(--line)}
.faq-panel{overflow:hidden;transition:max-height .32s ease}

/* ---------- tables ---------- */
.mkt-row{transition:background .16s}
.mkt-row:hover{background:#12161b}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* End of file: public/css/app.css */