/* ═══════════════════════════════════════════════════════════════
   MOESCIENCE.COM — DESIGN SYSTEM v3.0
   Identity: national-fabric ecosystem — forest green, flag gold,
   deep ink. Shared display face with the Store for brand coherence.
   Fonts: Fraunces (display) + Inter (body)
═══════════════════════════════════════════════════════════════ */

/* ── CSS VARIABLES ─────────────────────────────────────────── */
:root {
  --bg:        #0B1B16;
  --bg-2:      #0F241D;
  --bg-3:      #142E25;
  --card:      rgba(255,255,255,.036);
  --card-hov:  rgba(255,255,255,.064);
  --bd:        rgba(255,255,255,.08);
  --bd-2:      rgba(255,255,255,.16);
  --text:      #EAF1EC;
  --text-2:    #94AC9E;
  --text-3:    #54695E;
  --teal:      #1B5E4A;
  --teal-2:    #2F8868;
  --teal-3:    #4FAE89;
  --cyan:      #2F6B8F;
  --cyan-2:    #5C93B5;
  --gold:      #C99A3E;
  --r:         8px;
  --r-lg:      14px;
  --r-xl:      22px;
  --shadow:    0 4px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 16px 56px rgba(0,0,0,.55);
  --gap:       clamp(1rem,3vw,2rem);
}
[data-theme="light"] {
  --bg:        #F7F4EA;
  --bg-2:      #FFFEF9;
  --bg-3:      #EFE9D6;
  --card:      rgba(11,31,22,.026);
  --card-hov:  rgba(11,31,22,.05);
  --bd:        rgba(11,31,22,.08);
  --bd-2:      rgba(11,31,22,.15);
  --text:      #16261E;
  --text-2:    #54695E;
  --text-3:    #94AC9E;
  --shadow:    0 4px 24px rgba(22,38,30,.1);
  --shadow-lg: 0 16px 56px rgba(22,38,30,.14);
}

/* ── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .3s,color .3s;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; }
button,input,select,textarea { font-family:inherit; }

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
.display {
  font-family:'Fraunces',serif;
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.045em;
}
h1.display { font-size:clamp(2.6rem,7vw,6.4rem); }
h2.display { font-size:clamp(1.9rem,4vw,3.6rem); }
.heading {
  font-family:'Fraunces',serif;
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.025em;
  color:var(--text);
}
.section-label {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--teal-3);
  margin-bottom:1rem;
}
.section-label::before {
  content:'';
  display:inline-block;
  width:22px;
  height:6px;
  background:linear-gradient(90deg,var(--teal-2) 0 33%,var(--gold) 33% 66%,var(--cyan) 66% 100%);
  border-radius:1px;
}
.grad {
  background:linear-gradient(105deg,var(--teal-3) 0%,var(--gold) 50%,var(--cyan-2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container {
  max-width:1200px;
  margin:0 auto;
  padding:0 clamp(1rem,4vw,2.5rem);
  width:100%;
}
.section { padding:clamp(5rem,10vw,10rem) 0; }
.section-alt { background:var(--bg-2); }
.section-dark { background:var(--bg-3); }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.72rem 1.5rem;
  border-radius:var(--r);
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  border:none;
  font-size:.88rem;
  font-weight:600;
  color:#fff;
  cursor:pointer;
  transition:.25s;
  box-shadow:0 0 0 1px rgba(27,94,74,.4),0 4px 16px rgba(27,94,74,.3);
  white-space:nowrap;
}
.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(27,94,74,.5),0 8px 28px rgba(27,94,74,.4);
}
.btn-secondary {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.72rem 1.5rem;
  border-radius:var(--r);
  background:var(--card);
  border:1px solid var(--bd-2);
  font-size:.88rem;
  font-weight:600;
  color:var(--text);
  cursor:pointer;
  transition:.25s;
  white-space:nowrap;
}
.btn-secondary:hover {
  background:var(--card-hov);
  border-color:rgba(47,107,143,.3);
  color:var(--cyan);
  transform:translateY(-2px);
}

/* ── LIVE PANEL ─────────────────────────────────────────────── */
.live-panel {
  position:fixed;
  left:0; top:20px;
  transform:none;
  z-index:400;
  width:300px;
  background:var(--bg-2);
  border:1px solid var(--bd);
  border-left:none;
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  box-shadow:var(--shadow-lg);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.live-panel.collapsed { transform:translateX(-272px); }
.live-tab {
  position:absolute;
  right:-34px; top:50%;
  transform:none;
  width:34px;
  background:var(--teal);
  border:none;
  border-radius:0 var(--r) var(--r) 0;
  padding:.85rem 0;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.3rem;
  box-shadow:3px 0 12px rgba(27,94,74,.35);
  animation:tab-breathe 3s ease-in-out infinite;
}
.live-tab-text {
  font-size:.52rem;
  font-weight:700;
  color:#fff;
  letter-spacing:.12em;
  text-transform:uppercase;
  writing-mode:vertical-rl;
  text-orientation:mixed;
}
.live-dot {
  width:6px; height:6px;
  border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 8px #4ade80;
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes tab-breathe { 0%,100%{box-shadow:3px 0 12px rgba(27,94,74,.35)} 50%{box-shadow:3px 0 20px rgba(27,94,74,.7),0 0 8px rgba(74,222,128,.2)} }
.live-body { padding:1rem 1.1rem 1.1rem; }
.live-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.85rem;
  border-bottom:1px solid var(--bd);
  padding-bottom:.65rem;
}
.live-title {
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:.8rem;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:.4rem;
}
.live-close {
  width:22px; height:22px;
  border-radius:50%;
  background:none;
  border:1px solid var(--bd);
  color:var(--text-2);
  font-size:.6rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.live-items { display:flex; flex-direction:column; gap:.55rem; max-height:280px; overflow-y:auto; }
.live-item {
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:var(--r);
  padding:.6rem .75rem;
}
.live-item-badge {
  display:inline-block;
  padding:1px 7px;
  border-radius:4px;
  font-size:.58rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:.3rem;
}
.badge-info    { background:rgba(47,107,143,.12); color:var(--cyan); }
.badge-success { background:rgba(74,222,128,.12); color:#4ade80; }
.badge-warning { background:rgba(251,191,36,.12);  color:#D9AE56; }
.badge-urgent  { background:rgba(239,68,68,.12);   color:#f87171; }
.badge-new     { background:rgba(167,139,250,.12); color:#a78bfa; }
.live-item-title { font-size:.8rem; font-weight:600; color:var(--text); line-height:1.35; }
.live-item-time  { font-size:.65rem; color:var(--text-3); margin-top:.2rem; }

/* ── VISITOR BAR ────────────────────────────────────────────── */
.visitor-bar {
  position:fixed;
  bottom:1.2rem;
  left:1.2rem;
  z-index:390;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.42rem .85rem;
  background:var(--bg-2);
  border:1px solid var(--bd);
  border-radius:999px;
  font-size:.7rem;
  color:var(--text-2);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
}
.v-dot { width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 6px #4ade80; }
.v-num { font-family:'Fraunces',serif;font-weight:700;color:var(--teal-3); }

/* ── NAV ────────────────────────────────────────────────────── */


.site-nav {
  position:sticky;
  top:32px;
  z-index:300;
  background:transparent;
  backdrop-filter:none;
  border-bottom:1px solid transparent;
  padding:0;
  transition:background .35s ease,backdrop-filter .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.site-nav.scrolled {
  background:rgba(6,12,22,.92);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bd);
  box-shadow:0 2px 20px rgba(0,0,0,.4);
}
.nav-inner {
  max-width:1200px;
  margin:0 auto;
  padding:0 clamp(1rem,4vw,2.5rem);
  height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.nav-logo {
  display:flex;
  align-items:center;
  gap:.55rem;
  font-family:'Fraunces',serif;
  font-weight:800;
  font-size:1.08rem;
  letter-spacing:-.03em;
  color:var(--text);
  flex-shrink:0;
}
.nav-logo-icon {
  width:32px; height:32px;
  border-radius:9px;
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.75rem;
  color:#fff;
  flex-shrink:0;
  box-shadow:0 0 14px rgba(27,94,74,.4);
}
.nav-logo span { color:var(--cyan); }
.nav-links {
  display:flex;
  align-items:center;
  gap:.2rem;
  list-style:none;
}
.nav-links a {
  padding:.42rem .75rem;
  border-radius:8px;
  font-size:.84rem;
  font-weight:500;
  color:var(--text-2);
  transition:.18s;
  white-space:nowrap;
}
.nav-links a:hover { color:var(--text); background:var(--card); }
.nav-actions { display:flex;align-items:center;gap:.5rem;flex-shrink:0; }
.lang-btn {
  padding:.32rem .65rem;
  border-radius:6px;
  border:1px solid var(--bd);
  background:none;
  font-size:.72rem;
  font-weight:700;
  color:var(--text-2);
  cursor:pointer;
  letter-spacing:.05em;
  transition:.18s;
}
.lang-btn.active,.lang-btn:hover { background:var(--card);color:var(--text); }
.theme-btn {
  width:34px; height:34px;
  border-radius:9px;
  border:1px solid var(--bd);
  background:none;
  color:var(--text-2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  cursor:pointer;
  transition:.18s;
}
.theme-btn:hover { color:var(--text);background:var(--card); }
.nav-cta {
  padding:.44rem 1rem;
  border-radius:8px;
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  border:none;
  font-size:.8rem;
  font-weight:600;
  color:#fff;
  cursor:pointer;
  transition:.22s;
  white-space:nowrap;
}
.nav-cta:hover { transform:translateY(-1px);box-shadow:0 4px 14px rgba(27,94,74,.4); }
.hamburger {
  display:none;
  width:36px; height:36px;
  border-radius:9px;
  border:1px solid var(--bd);
  background:none;
  color:var(--text-2);
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  cursor:pointer;
}

/* ── MOBILE NAV ─────────────────────────────────────────────── */
.mob-nav {
  position:fixed;
  inset:0;
  z-index:500;
  background:var(--bg);
  padding:1.5rem;
  display:none;
  flex-direction:column;
  gap:1rem;
  animation:slideInLeft .28s cubic-bezier(.4,0,.2,1);
}
@keyframes slideInLeft { from{opacity:0;transform:translateX(-100%)} to{opacity:1;transform:none} }
.mob-nav.open { display:flex; }
.mob-close {
  align-self:flex-end;
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid var(--bd);
  background:none;
  color:var(--text-2);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.mob-nav a {
  font-size:1.1rem;
  font-weight:600;
  color:var(--text-2);
  padding:.75rem 0;
  border-bottom:1px solid var(--bd);
  display:block;
}
.mob-nav a:hover { color:var(--teal-3); }

/* ── HERO ───────────────────────────────────────────────────── */
.hero {
  position:relative;
  min-height:calc(100svh - 32px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:5rem 0 4rem;
}
.hero-bg {
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(27,94,74,.22) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 90% 85%,  rgba(47,107,143,.1)  0%, transparent 55%),
    radial-gradient(ellipse 45% 60% at 0%  70%,  rgba(27,94,74,.12) 0%, transparent 52%);
}
[data-theme="light"] .hero-bg {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(27,94,74,.12) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 90% 85%,  rgba(47,107,143,.07) 0%, transparent 55%);
}
.grid-pattern {
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 85% 75% at 50% 50%,black 20%,transparent 80%);
  pointer-events:none;
}
[data-theme="light"] .grid-pattern {
  background-image:
    linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);
}
.hero-content {
  position:relative;
  z-index:2;
  text-align:center;
  width:100%;
  max-width:100%;
  padding:0 clamp(1rem,4vw,2.5rem);
}
.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.3rem 1rem;
  border-radius:999px;
  background:rgba(47,107,143,.07);
  border:1px solid rgba(47,107,143,.2);
  font-size:.68rem;
  font-weight:700;
  color:var(--cyan);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:2rem;
}
.hero-title {
  color:var(--text);
  margin-bottom:1.5rem;
}
[data-theme="dark"] .hero-title { color:#fff; }
.hero-brand-name {
  display:block;
  font-family:'Fraunces',serif;
  font-weight:800;
  font-size:clamp(2.2rem, 5.8vw, 4.8rem);
  letter-spacing:0.1em;
  line-height:1.1;
  margin-bottom:.9rem;
  text-transform:none; /* keep normal capitalization, not ALL CAPS */
  overflow-wrap:break-word;
  word-break:break-word;
}
.hero-line1,
.hero-line2,
.hero-line3 { display:block; }
.hero-title .grad {
  background:linear-gradient(105deg,var(--teal-3) 0%,var(--cyan) 55%,var(--cyan-2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:block;
}
.hero-sub {
  font-size:clamp(.95rem,1.9vw,1.14rem);
  color:var(--text-2);
  max-width:720px;
  margin:0 auto 2.5rem;
  line-height:1.8;
  font-weight:300;
}
.hero-actions {
  display:flex;
  gap:.9rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:3.5rem;
}
.hero-stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--bd);
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--bd);
  max-width:700px;
  margin:0 auto;
}
.hero-stat {
  background:rgba(255,255,255,.025);
  padding:.75rem .5rem;
  text-align:center;
  backdrop-filter:blur(12px);
}
[data-theme="light"] .hero-stat { background:rgba(255,255,255,.7); }
.hero-stat-num {
  font-family:'Fraunces',serif;
  font-weight:800;
  font-size:clamp(1rem,1.8vw,1.4rem);
  background:linear-gradient(135deg,var(--text),var(--cyan));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
[data-theme="dark"] .hero-stat-num {
  background:linear-gradient(135deg,#fff,var(--cyan));
  -webkit-background-clip:text;
  background-clip:text;
}
.hero-stat-label { font-size:.68rem;color:var(--text-2);margin-top:.25rem;font-weight:400; }

/* ── PLATFORM CARDS ─────────────────────────────────────────── */
.platforms-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  margin-top:2.5rem;
}
.pcard {
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:var(--r-lg);
  padding:1.1rem 1rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  transition:.28s;
  position:relative;
  overflow:hidden;
  font-size:.85rem;
}
.pcard h3 { font-size:.92rem; }
.pcard p  { font-size:.78rem; line-height:1.5; }
.pcard ul { font-size:.74rem; }
.pcard .icon-wrap, .pcard .pcard-icon { width:34px; height:34px; font-size:.92rem; }
.pcard::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  opacity:0;
  transition:opacity .28s;
}
.pcard:hover { background:var(--card-hov);transform:translateY(-4px);box-shadow:var(--shadow-lg); }
.pcard:hover::before { opacity:1; }
.p-store::before  { background:linear-gradient(90deg,var(--teal),var(--teal-3)); }
.p-moras::before  { background:linear-gradient(90deg,#6366f1,#818cf8); }
.p-lms::before    { background:linear-gradient(90deg,#C99A3E,#DCC07A); }
.p-ai::before     { background:linear-gradient(90deg,var(--cyan),#7FB6D6); }
.p-shop::before   { background:linear-gradient(90deg,#10b981,#34d399); }
.p-accounts::before { background:linear-gradient(90deg,#f43f5e,#fb7185); }
.pcard-icon {
  width:46px; height:46px;
  border-radius:var(--r);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  flex-shrink:0;
}
.p-store  .pcard-icon { background:rgba(27,94,74,.15);  color:var(--teal-3); }
.p-moras  .pcard-icon { background:rgba(99,102,241,.15);  color:#818cf8; }
.p-lms    .pcard-icon { background:rgba(201,154,62,.15);  color:#D9AE56; }
.p-ai     .pcard-icon { background:rgba(47,107,143,.12);  color:var(--cyan); }
.p-shop   .pcard-icon { background:rgba(16,185,129,.12);  color:#34d399; }
.p-accounts .pcard-icon { background:rgba(244,63,94,.12); color:#fb7185; }
.pcard-status {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:.64rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.status-dot {
  width:6px; height:6px;
  border-radius:50%;
  flex-shrink:0;
}
.status-live .status-dot   { background:#4ade80;box-shadow:0 0 6px #4ade80; animation:pulse-dot 2s ease-in-out infinite; }
.status-dev .status-dot    { background:#D9AE56;box-shadow:0 0 6px #D9AE56; animation:pulse-dot 2.5s ease-in-out infinite; }
.status-planned .status-dot{ background:var(--text-3); }
.status-live    { color:#4ade80; }
.status-dev     { color:#D9AE56; }
.status-planned { color:var(--text-3); }
.pcard h3 {
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:1.08rem;
  color:var(--text);
}
[data-theme="dark"] .pcard h3 { color:#fff; }
.pcard p { font-size:.85rem;color:var(--text-2);line-height:1.7;flex:1; }
.pcard-features {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.32rem;
  margin-top:auto;
}
.pcard-features li {
  font-size:.78rem;
  color:var(--text-2);
  display:flex;
  align-items:flex-start;
  gap:.5rem;
}
.pcard-features li::before {
  content:'→';
  color:var(--teal-3);
  font-size:.72rem;
  margin-top:.05rem;
  flex-shrink:0;
}
.pcard-link {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.8rem;
  font-weight:600;
  color:var(--teal-3);
  margin-top:.5rem;
  transition:.18s;
}
.pcard-link:hover { color:var(--cyan);gap:.6rem; }

/* ── SOLUTIONS ──────────────────────────────────────────────── */
.solutions-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.2rem;
  margin-top:2.5rem;
}
.sol-card {
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:var(--r-lg);
  padding:1.5rem 1.4rem;
  transition:.25s;
}
.sol-card:hover { background:var(--card-hov);transform:translateY(-3px); }
.sol-icon {
  width:44px; height:44px;
  border-radius:var(--r);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  margin-bottom:1rem;
}
.sol-card h4 {
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:.95rem;
  color:var(--text);
  margin-bottom:.45rem;
}
.sol-card p { font-size:.83rem;color:var(--text-2);line-height:1.65; }

/* ── FEATURES GRID ──────────────────────────────────────────── */
.features-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;
  margin-top:2.5rem;
}
.feat-item {
  padding:1.4rem 1.3rem;
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:var(--r-lg);
  transition:.2s;
}
.feat-item:hover { background:var(--card-hov); }
.feat-icon { font-size:1.3rem;margin-bottom:.85rem; }
.feat-item h4 {
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:.88rem;
  color:var(--text);
  margin-bottom:.38rem;
}
.feat-item p { font-size:.78rem;color:var(--text-2);line-height:1.6; }

/* ── TESTIMONIALS ───────────────────────────────────────────── */
.testi-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.2rem;
  margin-top:2.5rem;
}
.testi-card {
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:var(--r-xl);
  padding:1.5rem 1.4rem;
  display:flex;
  flex-direction:column;
  gap:.9rem;
  transition:.25s;
}
.testi-card:hover { background:var(--card-hov);transform:translateY(-3px); }
.testi-stars { color:#C99A3E;font-size:.85rem;letter-spacing:.1em; }
.testi-text {
  font-size:.86rem;
  color:var(--text-2);
  line-height:1.75;
  font-style:italic;
  flex:1;
}
.testi-author { display:flex;align-items:center;gap:.75rem;margin-top:auto; }
.testi-avatar {
  width:38px; height:38px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--cyan));
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:.76rem;
  color:#fff;
  flex-shrink:0;
}
.testi-name { font-weight:600;font-size:.84rem;color:var(--text); }
.testi-role { font-size:.72rem;color:var(--text-3); }

/* ── BLOG ───────────────────────────────────────────────────── */
.blog-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.4rem;
  margin-top:2.5rem;
}
.blog-card {
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:var(--r-xl);
  overflow:hidden;
  transition:.28s;
  display:flex;
  flex-direction:column;
}
.blog-card:hover { background:var(--card-hov);transform:translateY(-4px);box-shadow:var(--shadow-lg); }
.blog-img {
  height:200px;
  background:linear-gradient(135deg,var(--bg-3),var(--bg-2));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}
.blog-img img { width:100%;height:100%;object-fit:cover;object-position:top center; }
.blog-img-placeholder {
  font-size:2.5rem;
  opacity:.2;
}
.blog-body { padding:1.4rem 1.4rem 1.2rem;flex:1;display:flex;flex-direction:column;gap:.6rem; }
.blog-cat {
  display:inline-block;
  padding:2px 9px;
  border-radius:5px;
  font-size:.62rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.blog-title {
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:.96rem;
  color:var(--text);
  line-height:1.4;
}
.blog-excerpt { font-size:.8rem;color:var(--text-2);line-height:1.65;flex:1; }
.blog-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.7rem;
  color:var(--text-3);
  margin-top:auto;
  padding-top:.75rem;
  border-top:1px solid var(--bd);
}
.blog-read-more {
  font-size:.78rem;
  font-weight:600;
  color:var(--teal-3);
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  transition:.18s;
}
.blog-read-more:hover { color:var(--cyan);gap:.5rem; }

/* ── ROADMAP ────────────────────────────────────────────────── */
.roadmap-grid { display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2.5rem; }
.rm-col {
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:var(--r-xl);
  padding:1.5rem;
}
.rm-col h3 {
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:.9rem;
  color:var(--text);
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.rm-items { display:flex;flex-direction:column;gap:.7rem; }
.rm-item {
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.6rem .75rem;
  background:var(--bg);
  border-radius:var(--r);
  font-size:.82rem;
  color:var(--text-2);
}
[data-theme="light"] .rm-item { background:var(--bg-3); }
.rm-item small { margin-left:auto;font-size:.68rem;color:var(--text-3); }
.rm-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.rm-dot.done     { background:#4ade80;box-shadow:0 0 6px #4ade80; }
.rm-dot.progress { background:#D9AE56;box-shadow:0 0 6px #D9AE56;animation:pulse-dot 2s infinite; }
.rm-dot.soon     { background:#818cf8;box-shadow:0 0 6px #818cf8; }
.rm-dot.plan     { background:var(--text-3); }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-list { display:flex;flex-direction:column;gap:.7rem;margin-top:2rem;max-width:780px;margin-left:auto;margin-right:auto; }
.faq-item {
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:border-color .2s;
}
.faq-item.open { border-color:rgba(47,107,143,.25); }
.faq-q {
  width:100%;
  padding:1.1rem 1.25rem;
  background:none;
  border:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  font-size:.9rem;
  font-weight:600;
  color:var(--text);
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  transition:.18s;
}
.faq-q:hover { color:var(--teal-3); }
.faq-q i { font-size:.7rem;color:var(--text-3);transition:transform .25s;flex-shrink:0; }
.faq-item.open .faq-q i { transform:rotate(180deg);color:var(--cyan); }
.faq-a { display:none; }
.faq-item.open .faq-a { display:block; }
.faq-a-inner { padding:.05rem 1.25rem 1.1rem;font-size:.85rem;color:var(--text-2);line-height:1.75; }

/* ── NEWSLETTER ─────────────────────────────────────────────── */
.nl-section {
  background:linear-gradient(135deg,rgba(27,94,74,.1),rgba(47,107,143,.06));
  border:1px solid rgba(47,107,143,.15);
  border-radius:var(--r-xl);
  padding:clamp(2rem,5vw,3.5rem);
  text-align:center;
  margin:0 auto;
  max-width:640px;
}
.nl-form { display:flex;gap:.6rem;max-width:420px;margin:1.5rem auto 0;flex-wrap:wrap;justify-content:center; }
.nl-input {
  flex:1;
  min-width:200px;
  padding:.7rem 1rem;
  border-radius:var(--r);
  background:rgba(255,255,255,.06);
  border:1px solid var(--bd-2);
  color:var(--text);
  font-size:.88rem;
  font-family:inherit;
  transition:.18s;
}
[data-theme="light"] .nl-input { background:rgba(0,0,0,.04); }
.nl-input:focus { outline:none;border-color:rgba(47,107,143,.35); }
.nl-input::placeholder { color:var(--text-3); }
.nl-btn {
  padding:.7rem 1.3rem;
  border-radius:var(--r);
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  border:none;
  font-size:.86rem;
  font-weight:600;
  color:#fff;
  cursor:pointer;
  transition:.22s;
}
.nl-btn:hover { transform:translateY(-1px);box-shadow:0 4px 14px rgba(27,94,74,.4); }

/* ── CONTACT ────────────────────────────────────────────────── */
.contact-grid { display:grid;grid-template-columns:1fr 1.6fr;gap:2.5rem;align-items:start;margin-top:2.5rem; }
.contact-info { display:flex;flex-direction:column;gap:1rem; }
.contact-item {
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:.86rem;
  color:var(--text-2);
}
.contact-item i { width:18px;color:var(--teal-3);font-size:.9rem; }
.contact-form { display:flex;flex-direction:column;gap:.9rem; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:.9rem; }
.form-group { display:flex;flex-direction:column;gap:.3rem; }
.form-label { font-size:.74rem;font-weight:600;color:var(--text-2);letter-spacing:.02em; }
.form-input,.form-select,.form-textarea {
  padding:.68rem .95rem;
  border-radius:var(--r);
  background:var(--card-hov);
  border:1px solid var(--bd);
  color:var(--text);
  font-family:inherit;
  font-size:.86rem;
  transition:.18s;
}
.form-textarea { resize:vertical;min-height:110px; }
.form-input:focus,.form-select:focus,.form-textarea:focus { outline:none;border-color:rgba(47,107,143,.3); }
.form-input::placeholder,.form-textarea::placeholder { color:var(--text-3); }
.form-submit {
  padding:.74rem 1.4rem;
  border-radius:var(--r);
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  border:none;
  font-size:.9rem;
  font-weight:600;
  color:#fff;
  cursor:pointer;
  transition:.25s;
  display:flex;
  align-items:center;
  gap:.5rem;
  align-self:flex-start;
}
.form-submit:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(27,94,74,.4); }

/* ── FOOTER ─────────────────────────────────────────────────── */
footer {
  background:var(--bg-3);
  border-top:1px solid var(--bd);
  padding:clamp(3rem,6vw,5rem) 0 2rem;
}
.footer-grid {
  display:grid;
  grid-template-columns:1.8fr repeat(3,1fr);
  gap:2rem;
  margin-bottom:2.5rem;
}
.footer-brand .nav-logo { margin-bottom:1rem; }
.footer-brand p { font-size:.82rem;color:var(--text-2);line-height:1.7;max-width:260px;margin-bottom:1.2rem; }
.footer-social { display:flex;gap:.5rem; }
.footer-social a {
  width:34px; height:34px;
  border-radius:8px;
  background:var(--card);
  border:1px solid var(--bd);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.78rem;
  color:var(--text-2);
  transition:.18s;
}
.footer-social a:hover { color:var(--teal-3);background:var(--card-hov); }
.footer-col h5 {
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:.78rem;
  color:var(--text);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:.9rem;
}
.footer-col ul { list-style:none;display:flex;flex-direction:column;gap:.5rem; }
.footer-col ul li a { font-size:.82rem;color:var(--text-2);transition:.15s; }
.footer-col ul li a:hover { color:var(--teal-3); }
.footer-bottom {
  padding-top:1.5rem;
  border-top:1px solid var(--bd);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.75rem;
  font-size:.76rem;
  color:var(--text-3);
}

/* ── AUTH MODAL ─────────────────────────────────────────────── */
.modal-overlay {
  position:fixed;
  inset:0;
  z-index:600;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  opacity:0;
  pointer-events:none;
  transition:.3s;
}
.modal-overlay.open { opacity:1;pointer-events:auto; }
.modal-box {
  background:var(--bg-2);
  border:1px solid var(--bd-2);
  border-radius:var(--r-xl);
  max-width:520px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  transform:scale(.96);
  transition:.3s;
}
.modal-overlay.open .modal-box { transform:scale(1); }
.modal-hd {
  padding:1.5rem 1.6rem 1rem;
  border-bottom:1px solid var(--bd);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.modal-hd h3 {
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:1.1rem;
  color:var(--text);
}
.modal-close {
  width:30px; height:30px;
  border-radius:50%;
  border:1px solid var(--bd);
  background:none;
  color:var(--text-2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.75rem;
  cursor:pointer;
}
.modal-body { padding:1.4rem 1.6rem; }
.modal-footer { padding:.9rem 1.6rem 1.4rem;border-top:1px solid var(--bd); }
.account-types {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.6rem;
  margin-bottom:1.4rem;
}
.acc-type {
  padding:.75rem .6rem;
  border-radius:var(--r);
  border:1px solid var(--bd);
  background:var(--card);
  text-align:center;
  cursor:pointer;
  transition:.18s;
}
.acc-type:hover,.acc-type.active { border-color:rgba(47,107,143,.35);background:rgba(47,107,143,.06); }
.acc-type i { font-size:1.1rem;color:var(--text-3);display:block;margin-bottom:.4rem;transition:.18s; }
.acc-type:hover i,.acc-type.active i { color:var(--teal-3); }
.acc-type span { font-size:.72rem;font-weight:600;color:var(--text-2); }
.auth-btn {
  width:100%;
  padding:.8rem;
  border-radius:var(--r);
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  border:none;
  font-size:.9rem;
  font-weight:600;
  color:#fff;
  cursor:pointer;
  transition:.25s;
  margin-top:.9rem;
}
.auth-btn:hover { transform:translateY(-1px);box-shadow:0 6px 20px rgba(27,94,74,.4); }

/* ── FLOATING BUTTONS ───────────────────────────────────────── */
.float-btns {
  position:fixed;
  bottom:1.5rem;
  right:1.5rem;
  z-index:390;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.float-btn {
  width:46px; height:46px;
  border-radius:50%;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:.25s;
  text-decoration:none;
}
.float-btn:hover { transform:scale(1.1);box-shadow:var(--shadow-lg); }
.float-wa  { background:#25d366;color:#fff; }
.float-ai  { background:linear-gradient(135deg,var(--teal),var(--cyan));color:#fff; }
.scroll-top {
  position:fixed;
  bottom:5.2rem;
  right:1.5rem;
  z-index:390;
  width:40px; height:40px;
  border-radius:50%;
  background:var(--card);
  border:1px solid var(--bd-2);
  color:var(--text-2);
  display:none;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  cursor:pointer;
  transition:.25s;
  box-shadow:var(--shadow);
}
.scroll-top:hover { background:var(--card-hov);color:var(--text);transform:translateY(-2px); }

/* ── ANIMATIONS ─────────────────────────────────────────────── */
.animate { opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease; }
.animate.visible { opacity:1;transform:none; }
.d1 { transition-delay:.1s; }
.d2 { transition-delay:.2s; }
.d3 { transition-delay:.3s; }
.d4 { transition-delay:.4s; }
.d5 { transition-delay:.5s; }


/* ── HERO SLIDER ─────────────────────────────────────────────── */
.hero-shimmer{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.hero-shimmer::before{content:"";position:absolute;top:-100%;left:-100%;width:60%;height:300%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%);animation:shimmerMove 7s ease-in-out infinite;animation-delay:2s}
@keyframes shimmerMove{0%{transform:translateX(-100%)}100%{transform:translateX(500%)}}
.hero-slides-bg {
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.hero-slides-bg::after {
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.65) 60%,rgba(0,0,0,.82) 100%);
  z-index:1;
  pointer-events:none;
}
.hero-slide-bg {
  position:absolute;
  inset:0;
  opacity:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transition:opacity 1.6s ease-in-out;
  transform:scale(1);
  will-change:opacity, transform;
}
.hero-slide-bg.active {
  opacity:1;
  animation:heroKenBurns 9s ease-out forwards;
}
@keyframes heroKenBurns {
  from { transform:scale(1.0); }
  to   { transform:scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide-bg.active { animation:none; }
}
/* Force legible white text over the hero image, regardless of light/dark theme */
.hero .hero-title,
.hero .hero-badge,
.hero .hero-sub {
  color:#fff;
  position:relative;
  z-index:2;
}
.hero .hero-title {
  text-shadow:0 2px 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.7);
}
.hero .hero-sub {
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.hero .hero-title .grad {
  background:linear-gradient(90deg,#4FAE89 0%,#C99A3E 50%,#7FB6D6 100%);
  background-size:100% 100%;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
  display:block;
  font-size:clamp(1.6rem, 4.2vw, 3.6rem);
  line-height:1.15;
}
.hero .hero-badge {
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.25);
  color:#fff;
}
.hero .hero-sub { color:rgba(255,255,255,.85); }
.hero .btn-secondary {
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.4);
  color:#fff;
}
.hero .btn-secondary:hover {
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.6);
}
/* Slide dots indicator */
.hero-dots {
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:.5rem;
  z-index:5;
}
.hero-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.3);
  border:none;
  cursor:pointer;
  transition:.3s;
  padding:0;
}
.hero-dot.active {
  width:22px;
  border-radius:3px;
  background:var(--teal-3);
}

/* ── HERO PARTICLES ─────────────────────────────────────────── */
.hero-particles {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.particle {
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--s);
  height:var(--s);
  border-radius:50%;
  background:var(--teal-3);
  opacity:0;
  animation:float-particle var(--d) ease-in-out var(--delay) infinite;
}
@keyframes float-particle {
  0%,100% { opacity:0; transform:translateY(0) scale(1); }
  20%      { opacity:.5; }
  50%      { opacity:.25; transform:translateY(-30px) scale(1.3); }
  80%      { opacity:.4; }
}
/* Every other particle is cyan */
.particle:nth-child(even) { background:var(--cyan); }
.particle:nth-child(3n)   { background:rgba(255,255,255,.4); }

/* ── HERO SLIDE-IN CONTENT ANIMATION ────────────────────────── */
.hero-content {
  animation:heroContentIn 1s cubic-bezier(.4,0,.2,1) both;
}
@keyframes heroContentIn {
  from { opacity:0; transform:translateY(32px); }
  to   { opacity:1; transform:none; }
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .live-panel { width:260px; }
  .live-panel.collapsed { transform:translateX(-234px); }
  .platforms-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .nav-links,.nav-cta { display:none; }
  .hamburger { display:flex; }
  .hero-stats { grid-template-columns:1fr 1fr; }
  .roadmap-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .account-types { grid-template-columns:repeat(3,1fr); }
  .live-panel { width:240px; max-width:78vw; }
  .live-panel.collapsed { transform:translateX(calc(-1 * min(240px,78vw) + 34px)); }
  .platforms-grid { grid-template-columns:repeat(2,1fr); gap:.85rem; }
  .pcard { padding:1rem .9rem; font-size:.82rem; }
  .pcard h3 { font-size:.9rem; }
  .pcard p { font-size:.75rem; }
  .pcard ul { font-size:.7rem; }
  .pcard .icon-wrap, .pcard .pcard-icon { width:32px; height:32px; font-size:.88rem; }
}
@media (max-width:480px) {
  .hero-stats { grid-template-columns:1fr 1fr; }
  .platforms-grid { grid-template-columns:repeat(2,1fr); gap:.7rem; }
  .pcard { padding:.9rem .8rem; font-size:.78rem; }
  .pcard h3 { font-size:.85rem; }
  .pcard p { font-size:.72rem; }
  .pcard ul { font-size:.68rem; }
  .pcard .icon-wrap, .pcard .pcard-icon { width:30px; height:30px; font-size:.84rem; }
  .account-types { grid-template-columns:repeat(2,1fr); }
  .hero-actions { flex-direction:column;align-items:center; }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary { width:100%;justify-content:center;max-width:300px; }
  .live-panel {
    width:220px; max-width:82vw;
    top:auto; bottom:5rem;
    transform:none;
  }
  .live-panel.collapsed { transform:translateX(calc(-1 * min(220px,82vw) + 30px)); }
}

/* ── LIVE TOP BAR ─────────────────────────────────────────── */
.live-topbar{position:fixed;top:0;left:0;right:0;z-index:500;height:32px;background:rgba(0,0,0,.7);backdrop-filter:blur(16px);border-bottom:1px solid rgba(74,222,128,.15);display:flex;align-items:center}
.ltb-inner{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 1rem;gap:1rem;overflow:hidden}
.ltb-left{display:flex;align-items:center;gap:.65rem;flex:1;overflow:hidden;min-width:0}
.ltb-live-badge{display:inline-flex;align-items:center;gap:.35rem;background:rgba(27,94,74,.4);border:1px solid rgba(74,222,128,.25);border-radius:999px;padding:.18rem .6rem;font-size:.6rem;font-weight:700;color:#4ade80;letter-spacing:.1em;text-transform:uppercase;flex-shrink:0}
.ltb-dot{width:5px;height:5px;border-radius:50%;background:#4ade80;box-shadow:0 0 6px #4ade80;animation:pulse-dot 2s ease-in-out infinite;display:inline-block}
.ltb-ticker-wrap{overflow:hidden;flex:1;min-width:0}
.ltb-ticker{display:flex;gap:3rem;animation:ltb-scroll 30s linear infinite;white-space:nowrap}
.ltb-ticker:hover{animation-play-state:paused}
.ltb-tick-item{font-size:.7rem;color:rgba(223,230,239,.7);white-space:nowrap;flex-shrink:0}
.ltb-tick-item::before{content:'·';margin-right:.5rem;color:rgba(74,222,128,.5)}
@keyframes ltb-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ltb-right{display:flex;align-items:center;gap:.75rem;flex-shrink:0}
.ltb-visitors{font-size:.68rem;color:rgba(223,230,239,.6);display:flex;align-items:center;gap:.35rem;white-space:nowrap}
.ltb-close{background:none;border:none;color:rgba(223,230,239,.4);cursor:pointer;font-size:.65rem;padding:.2rem;line-height:1;transition:.2s}
.ltb-close:hover{color:rgba(223,230,239,.9)}
body{padding-top:32px}

@media(max-width:480px){.ltb-visitors span:not(#ltbVisitors){display:none}.live-topbar{height:28px}.site-nav{top:28px}body{padding-top:28px}}