:root {
  --bg: #07131d;
  --panel: rgba(16, 35, 53, 0.88);
  --panel-strong: rgba(10, 22, 32, 0.96);
  --primary: #1ee0b6;
  --primary-strong: #0cb49c;
  --text: #ecfaff;
  --muted: #a6b9c8;
  --border: rgba(134, 169, 255, 0.22);
  --shadow: rgba(7, 16, 23, 0.7);
  --nav-glow: rgba(30, 224, 182, 0.22);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Arial, Helvetica, sans-serif; background: radial-gradient(circle at top, #12273c 0%, #081722 38%, #07131d 100%); color: var(--text); }
body { padding: 26px; }
.app-shell { max-width: 1450px; margin: 0 auto; }
.topbar {
  position:absolute; top:18px; left:18px; right:18px; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:18px 24px;
  background: linear-gradient(120deg, rgba(9,19,31,0.72), rgba(12,32,44,0.42));
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 40px rgba(0,0,0,0.26), 0 0 24px rgba(30,224,182,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-image 0.5s ease;
}
.brand-box { display:flex; align-items:center; gap:12px; }
.brand-box h1 { margin:0; font-size:1.8rem; letter-spacing:-0.04em; }
.brand-box small { color: rgba(236,250,255,0.8); }
.brand-logo { width:58px; height:58px; border-radius:16px; object-fit:cover; box-shadow: 0 8px 18px rgba(0,0,0,0.2), 0 0 18px rgba(30,224,182,0.18); }
.topnav {
  display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:10px;
  padding:7px 10px; border-radius:999px; background: rgba(8,18,28,0.28); border:1px solid rgba(255,255,255,0.08); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.nav-link {
  color: var(--text); text-decoration:none; padding:10px 14px; border-radius:10px; font-weight:600; transition: all 0.2s ease;
  border:1px solid transparent;
}
.nav-link:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.08); box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 8px 18px rgba(30,224,182,0.08); }
.lang-select, .logout-btn {
  border:1px solid rgba(255,255,255,0.1); background: rgba(9,18,28,0.62); color: var(--text); border-radius:10px; padding:9px 12px; outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.logout-btn { cursor:pointer; }
.primary-btn, .secondary-btn { display:inline-flex; align-items:center; justify-content:center; border-radius:12px; padding:12px 18px; text-decoration:none; font-weight:700; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.primary-btn { background: linear-gradient(135deg, var(--primary), var(--primary-strong)); color:#032b2a; box-shadow: 0 12px 30px rgba(30, 224, 182, 0.25); }
.secondary-btn { background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); color:var(--text); }
.primary-btn:hover, .secondary-btn:hover { transform: translateY(-1px); }
.plan-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:14px; margin-bottom:18px; }
.panel-section { background: var(--panel); border-radius:18px; padding:20px; }

/* Premium landing page */
.features { padding-top: 10px; }
.media-row {
  display:block; margin:18px 0 26px;
}
.live-market-strip {
  display:flex; align-items:center; gap:12px; padding:10px 18px; margin-bottom:12px;
  background: rgba(8,16,24,0.9); border:1px solid rgba(255,255,255,0.08); border-radius:16px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}
.market-strip-label {
  white-space:nowrap; font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--primary); padding:6px 10px; border-radius:999px; background: rgba(30,224,182,0.12);
}
.market-ticker {
  display:flex; flex:1; min-height:24px; align-items:center; overflow:hidden; position:relative;
}
.market-ticker-track {
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap; min-width:100%;
  animation: marketTickerScroll 28s linear infinite;
}
.market-ticker:hover .market-ticker-track { animation-play-state: paused; }
.ticker-item {
  display:inline-flex; align-items:center; gap:6px; font-size:12px; color: var(--text); background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.05); padding:6px 10px; border-radius:999px; flex-shrink:0;
}
.ticker-item .ticker-change.up { color: #2ee6a2; }
.ticker-item .ticker-change.down { color: #ff7d7d; }
@keyframes marketTickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.hero-banner {
  position:relative; min-height:480px; margin-bottom:18px; overflow:hidden; border-radius:26px; border:1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.hero-video-row {
  display:grid; grid-template-columns: 1.2fr 0.9fr; gap:18px; align-items:stretch;
}
.slideshow-panel,
.video-panel,
.hero-inline {
  position:relative; border-radius:26px; overflow:hidden; border:1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.slideshow-panel {
  position:absolute; inset:0; display:block; overflow:hidden; background:#0b1823; 
}
.slideshow-track {
  display:flex; width:600%; height:100%; animation: slideshow-track 18s infinite ease-in-out;
}
.slideshow-slide {
  flex: 0 0 16.6667%; width:16.6667%; height:100%; position:relative;
}
.slideshow-slide img {
  display:block; width:100%; height:100%; object-fit:cover; object-position:center; filter: saturate(1.1) contrast(1.1) brightness(0.8);
}
.slideshow-slide::after {
  content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(6,11,15,0.55), rgba(6,11,15,0.05));
}

@keyframes slideshow-track {
  0%, 15% { transform: translateX(0%); }
  20%, 35% { transform: translateX(-16.6667%); }
  40%, 55% { transform: translateX(-33.3334%); }
  60%, 75% { transform: translateX(-50.0001%); }
  80%, 92% { transform: translateX(-66.6668%); }
  100% { transform: translateX(-83.3335%); }
}

.hero-inline {
  display:flex; flex-direction:column; justify-content:center; background: rgba(10,20,29,0.8); padding:32px 26px; min-height:310px;
}
.hero-inline h2 {
  font-size: clamp(2rem, 3vw, 3rem); line-height:1.08; margin:0 0 14px 0; letter-spacing:-0.04em;
}
.hero-inline p { color:var(--muted); margin:0 0 18px 0; }
.hero-inline .hero-ctas { margin-bottom:18px; }

.video-panel {
  background: rgba(0,0,0,0.2); min-height:310px;
}
.showcase-video {
  display:block; width:100%; height:100%; object-fit:cover; filter: saturate(1.1) contrast(1.12) brightness(0.7);
}
.eyebrow { display:inline-block; margin-bottom:16px; padding:7px 12px; border-radius:999px; background: rgba(30,224,182,0.12); border:1px solid rgba(30,224,182,0.2); color: var(--primary); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; font-weight:700; }
.hero-copy { flex:1.1; }
.hero-copy h2 { font-size: clamp(2.5rem, 5vw, 4.2rem); line-height:1.06; margin:0 0 14px 0; letter-spacing:-0.04em; max-width:680px; }
.hero-copy p { color:var(--muted); margin:0 0 20px 0; font-size:1.08rem; max-width:640px; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.hero-visual { flex:0 0 420px; display:flex; justify-content:center; }
.glass-panel { width:100%; max-width:390px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.08); border-radius:24px; padding:24px; box-shadow: 0 28px 50px rgba(2, 12, 16, 0.45); }
.panel-head { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:13px; }
.pill { display:inline-flex; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.pill.positive { background: rgba(30,224,182,0.12); color: var(--primary); }
.panel-amount { font-size: clamp(2rem, 4vw, 3.2rem); font-weight:800; margin:18px 0 22px; letter-spacing:-0.05em; }
.mini-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
.mini-grid div { padding:12px 14px; border-radius:12px; background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.04); }
.mini-grid label { display:block; color:var(--muted); font-size:12px; margin-bottom:6px; }
.mini-grid strong { font-size:1.08rem; }
.trust-row { display:flex; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:13px; }
.trust-row span { padding:8px 10px; border-radius:999px; background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.04); }

.market-section {
  margin: 12px 0 26px;
  background: rgba(10, 20, 29, 0.72);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 22px 20px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.24);
}
.market-header-row {
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:18px;
}
.market-header-row h3 {
  margin: 10px 0 0; font-size: clamp(1.5rem, 3vw, 2.2rem);
}
.market-grid {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:16px;
}
.market-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 18px;
}
.market-card .coin-head {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;
}
.market-card .symbol {
  display:flex; align-items:center; gap:10px; font-weight:700;
}
.market-card .logo {
  width: 30px; height: 30px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(30,224,182,0.12); color: var(--primary); font-size: 0.74rem; font-weight:700;
}
.market-card .price {
  margin: 10px 0 8px; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.04em;
}
.market-card .delta.up { color: #2ee6a2; }
.market-card .delta.down { color: #ff7979; }
.market-card .muted { color: var(--muted); }

.landing-overview-panel {
  margin: 12px 0 24px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(10, 20, 29, 0.72);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 40px rgba(0,0,0,0.2);
}

.utility-overview-header {
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.utility-timeline-summary {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:8px;
  margin: 0 0 14px;
}

.utility-timeline-step {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:10px;
  background: rgba(255,255,255,0.02);
  border:1px solid rgba(148,163,184,0.12);
  color: var(--muted);
  font-size:12px;
  text-align:left;
  cursor:pointer;
  transition: all 0.18s ease;
}

.utility-timeline-step span {
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background: rgba(148,163,184,0.12);
  color: var(--text);
  font-weight:700;
}

.utility-timeline-step.is-current {
  background: rgba(30,224,182,0.08);
  border-color: rgba(30,224,182,0.28);
  color: var(--text);
}

.utility-timeline-step.is-current span {
  background: linear-gradient(135deg, var(--primary), #60a5fa);
  color: #04151d;
}

.utility-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 12px 0 10px;
}

.utility-tab {
  border:1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border-radius:10px;
  padding: 9px 14px;
  font-weight:700;
  cursor:pointer;
  transition: all 0.18s ease;
}

.utility-tab.is-active {
  background: linear-gradient(135deg, rgba(30,224,182,0.18), rgba(78,148,255,0.18));
  border-color: rgba(30,224,182,0.38);
  box-shadow: 0 8px 16px rgba(30,224,182,0.12);
}

.utility-tab-panels {
  display:block;
}

.utility-panel {
  display:none;
}

.utility-panel.is-active {
  display:block;
}

.landing-overview-card {
  padding: 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(148,163,184,0.12);
}

.landing-overview-card h4 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}

.landing-overview-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.quick-links { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin-top:26px; }
.feature-card { display:block; padding:18px; border-radius:14px; background: rgba(255,255,255,0.03); text-decoration:none; color:var(--text); border:1px solid rgba(255,255,255,0.04); transition: transform .15s ease, box-shadow .15s ease; }
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.feature-card h5 { margin:0 0 6px 0; font-size:1.05rem; }
.feature-card p { margin:0; color:var(--muted); font-size:13px; }

/* Responsive tweaks */
@media (max-width:800px) {
  .topbar { flex-direction:column; align-items:flex-start; }
  .topnav { justify-content:flex-start; border-radius:18px; }
  .landing-hero { flex-direction:column; padding:26px 18px; }
  .hero-visual { width:100%; flex-basis:auto; }
  .video-frame, .showcase-video { height:260px; }
}

/* Testimonials widget shared styles (for Home/About/Dashboard) */
.testimonials-section { border: 3px solid rgba(30,224,182,0.12); border-radius:16px; padding:18px; margin-top:18px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }
.testimonials-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px; align-items:start; }
.testimony-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); border-radius:12px; padding:14px; box-shadow: 0 6px 18px rgba(2,8,20,0.18); display:flex; flex-direction:column; }
.testimony-meta { display:flex; gap:12px; align-items:center; margin-bottom:8px; }
.testimony-avatar img { width:56px; height:56px; border-radius:8px; object-fit:cover; }
.avatar-placeholder { width:56px; height:56px; border-radius:8px; background: rgba(148,163,184,0.06); display:grid; place-items:center; color:var(--muted); font-weight:700; }
.testimony-info strong { display:block; }
.testimony-prof { color: var(--muted); font-size:0.9rem; }
.testimony-location { color: var(--muted); font-size:0.82rem; margin-top:4px; }
.testimony-comment { margin-top:8px; white-space:pre-wrap; color:var(--text); flex:1 1 auto; }
.testimony-footer { margin-top:10px; color:var(--muted); font-size:0.9rem; }
/* Slight spacing for the eyebrow label inside testimonials section */
.testimonials-section .eyebrow { margin-top: 10px; }

/* Scrolling slider for testimonials */
.testimonials-slider { overflow: hidden; position: relative; }
.testimonials-track { display:flex; gap:16px; align-items:stretch; width:max-content; will-change: transform; animation-name: testimonials-scroll; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: var(--scroll-duration, 24s); }
.testimonials-track .testimony-card { flex: 0 0 320px; }
@keyframes testimonials-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 900px) {
  .testimonials-slider { overflow-x: auto; }
  .testimonials-track { animation: none; }
  .testimonials-track .testimony-card { flex: 0 0 calc(100% - 40px); }
}