/* ============================================================
   HERO — Hero section, dashboard card, portals ticker
   ============================================================ */

/* ─── HERO LAYOUT ────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 100px clamp(1.5rem, 6vw, 6rem) 0;
  position: relative; overflow: hidden;
}

/* ─── HERO BACKGROUND ────────────────────────────────────── */
.hero-bg {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.hero-blob {
  position: absolute; border-radius: 50%;
  filter: blur(70px); pointer-events: none;
}
.blob-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(37,99,235,0.12), transparent 70%);
  top: -100px; right: -100px;
  animation: drift 12s ease-in-out infinite;
}
.blob-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(14,165,233,0.10), transparent 70%);
  bottom: 100px; left: -80px;
  animation: drift 16s ease-in-out infinite reverse;
}
.blob-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(16,185,129,0.08), transparent 70%);
  top: 40%; right: 15%;
  animation: drift 10s ease-in-out infinite 2s;
}

/* Grid lines */
.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(37,99,235,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

/* ─── HERO CONTENT ───────────────────────────────────────── */
.hero-content {
  max-width: 1100px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
  position: relative; z-index: 1;
}

/* Pill badge */
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--white); border: 1px solid var(--border-strong);
  border-radius: 100px; padding: .3rem .9rem .3rem .5rem;
  font-size: .78rem; font-weight: 600; color: var(--ink-soft);
  margin-bottom: 1.4rem; box-shadow: var(--shadow-xs);
  animation: fadeUp .5s ease both;
}
.badge-dot {
  width: 20px; height: 20px; background: var(--blue); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; color: #fff; font-weight: 800;
}
.badge-pulse {
  width: 8px; height: 8px; background: var(--emerald); border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(16,185,129,0.4);
  animation: pulse-ring 2s infinite;
}

.hero-left { animation: fadeUp .6s ease .1s both; }
.hero-right { animation: fadeUp .6s ease .25s both; }

h1 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  font-weight: 800; line-height: 1.06; letter-spacing: -0.04em;
  color: var(--ink); margin-bottom: 1.4rem;
}
h1 .word-blue   {
  color: var(--blue);
  animation: textPulse 4s ease-in-out infinite;
}
h1 .word-stroke { -webkit-text-stroke: 2px var(--ink); color: transparent; }

.hero-desc {
  font-size: 1.05rem; color: var(--ink-soft); line-height: 1.75;
  max-width: 440px; margin-bottom: 2rem;
}

.hero-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

.free-trial-note {
  display: inline-flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border: 1px solid #a7f3d0; border-radius: 100px;
  padding: .35rem .9rem; font-size: .78rem; font-weight: 600;
  color: #065f46; margin-top: 1rem;
}
.free-trial-note::before { content: '🎁'; font-size: .85rem; }

.hero-social-proof {
  display: flex; align-items: center; gap: .9rem; margin-top: 1.8rem;
}
.proof-faces { display: flex; }
.proof-faces span {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--white);
  background: var(--blue-light);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800; color: var(--blue);
  margin-left: -8px; font-family: 'Bricolage Grotesque', sans-serif;
}
.proof-faces span:first-child { margin-left: 0; }
.proof-text { font-size: .82rem; color: var(--ink-soft); line-height: 1.4; }
.proof-text strong { color: var(--ink); font-weight: 700; }

/* ─── DASHBOARD CARD ─────────────────────────────────────── */
.dashboard-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}
.dashboard-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--cyan), var(--emerald));
}

.dc-topbar {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.dc-dots { display: flex; gap: .4rem; }
.dc-dots span { width: 10px; height: 10px; border-radius: 50%; }
.dc-red    { background: #FF5F57; }
.dc-yellow { background: #FFBD2E; }
.dc-green  { background: #28CA41; }
.dc-title  { font-size: .78rem; font-weight: 600; color: var(--ink-mute); }
.dc-badge  {
  font-size: .7rem; background: #ecfdf5; color: #065f46;
  font-weight: 700; padding: .2rem .6rem; border-radius: 100px;
  border: 1px solid #a7f3d0;
}

.dc-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .8rem;
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--border);
}
.dc-stat { text-align: center; }
.dc-stat .n {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.8rem; font-weight: 800; color: var(--ink);
  line-height: 1; letter-spacing: -0.04em;
}
.dc-stat .l { font-size: .72rem; color: var(--ink-mute); margin-top: .2rem; font-weight: 500; }
.dc-stat .n.blue  { color: var(--blue); }
.dc-stat .n.green { color: var(--emerald); }

.dc-list          { padding: .8rem 1.2rem 1.2rem; }
.dc-list-title    {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: .6rem;
}
.dc-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .7rem; border-radius: var(--radius-sm);
  margin-bottom: .25rem; transition: background .15s;
}
.dc-row:hover { background: var(--paper); }

/* ─── DASHBOARD ROWS WRAPPER ─────────────────────────────── */
.dc-rows-wrap {
  overflow: hidden;
  position: relative;
}

/* New row entrance — slides in from left (no vertical layout shift) */
.dc-row-new {
  opacity: 0; transform: translateX(-16px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.dc-row-new--visible {
  opacity: 1; transform: translateX(0);
}

/* Brief highlight on new row */
@keyframes rowAccent {
  0%   { background: rgba(37,99,235,0.10); box-shadow: inset 3px 0 0 var(--blue); }
  100% { background: transparent;          box-shadow: none; }
}
.dc-row-new--visible {
  animation: rowAccent 1.8s ease .25s forwards;
}

/* Applied count flash green when it increments */
.dc-count-flash { color: var(--emerald) !important; transition: color 0.5s ease; }
.dc-row-left { display: flex; align-items: center; gap: .7rem; }
.co-logo {
  width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--paper); display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 800; color: var(--blue);
  font-family: 'Bricolage Grotesque', sans-serif;
}
.co-info .co-name { font-size: .82rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.co-info .co-role { font-size: .72rem; color: var(--ink-mute); }

/* Floating notification */
.float-notif {
  position: absolute; bottom: -16px; left: -16px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 14px; padding: .8rem 1rem;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: .7rem;
  animation: floatUp 3s ease-in-out infinite;
}
.notif-icon { font-size: 1.3rem; }
.notif-text .t1 { font-size: .78rem; font-weight: 700; color: var(--ink); }
.notif-text .t2 { font-size: .7rem; color: var(--ink-mute); }

/* ─── PORTALS TICKER ─────────────────────────────────────── */
.portals-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--white);
  padding: .9rem 0;
  overflow: hidden;
  position: relative; z-index: 1;
}
.portals-bar::before, .portals-bar::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2;
  pointer-events: none;
}
.portals-bar::before { left: 0; background: linear-gradient(90deg, var(--white), transparent); }
.portals-bar::after  { right: 0; background: linear-gradient(-90deg, var(--white), transparent); }
.portals-track {
  display: flex; gap: 2rem; width: max-content;
  animation: scroll-left 20s linear infinite;
}
.portal-item {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap; padding: .2rem .8rem;
  border: 1px solid var(--border); border-radius: 100px;
  background: var(--paper);
}
.portal-item .tick { color: var(--blue); font-size: .75rem; }
.portal-item.nope  { color: #991b1b; background: #fef2f2; border-color: #fecaca; text-decoration: line-through; }

/* ─── HERO RESPONSIVE ────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-content { grid-template-columns: 1fr; }
  .hero-right   { display: none; }
}

@media (max-width: 600px) {
  .hero {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    padding-bottom: 2rem;
  }
  h1 { font-size: clamp(2.2rem, 9vw, 3rem); margin-bottom: 1rem; }
  .hero-desc { font-size: .95rem; margin-bottom: 1.5rem; }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
  }
  .hero-actions .btn-black,
  .hero-actions .btn-line {
    width: 100%; justify-content: center;
  }
  .hero-badge { font-size: .72rem; }
  .hero-social-proof { margin-top: 1.4rem; }
  .free-trial-note { font-size: .72rem; }

  /* Stats strip — 2-column grid on small screens */
  .stats-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    justify-items: center;
  }
  .stat-divider { display: none; }
}