:root {
  --ink: #0f172a;
  --ink-soft: #334155;
  --muted: #64748b;
  --line: rgba(148, 163, 184, 0.24);
  --paper: #ffffff;
  --paper-soft: #f8fafc;
  --brand: #2563eb;
  --brand-2: #14b8a6;
  --brand-3: #7c3aed;
  --dark: #020617;
  --radius: 24px;
  --radius-sm: 16px;
  --shadow: 0 22px 60px rgba(15, 23, 42, 0.12);
  --shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; }

.container {
  width: min(1140px, calc(100% - 36px));
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 10px;
  background: var(--ink);
  color: white;
  padding: 10px 14px;
  border-radius: 999px;
  z-index: 50;
}
.skip-link:focus { left: 16px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid rgba(226, 232, 240, 0.76);
  backdrop-filter: blur(16px);
}
.site-header.compact { position: relative; }
.nav-wrap {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}
.brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, var(--dark), #1e3a8a 58%, var(--brand-2));
  color: white;
  font-weight: 900;
  letter-spacing: -0.06em;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.22);
  font-size: 14px;
  flex: 0 0 auto;
}
.brand-mark span { color: #99f6e4; margin: 0 1px; }
.brand-text { display: grid; gap: 1px; }
.brand-text strong { font-size: 15px; letter-spacing: -0.02em; }
.brand-text small { color: var(--muted); font-size: 12px; }
.nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav a {
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 999px;
}
.nav a:hover { background: #eef2ff; color: #1d4ed8; }
.nav-admin { border: 1px solid var(--line); background: white; }
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span { width: 18px; height: 2px; background: var(--ink); border-radius: 999px; }

.section-pad { padding: 96px 0; }
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 10%, rgba(20, 184, 166, 0.18), transparent 32%),
    radial-gradient(circle at 88% 5%, rgba(37, 99, 235, 0.16), transparent 34%),
    linear-gradient(180deg, #ffffff, #f8fafc 70%, #ffffff);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15,23,42,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.045) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.74fr);
  gap: 54px;
  align-items: center;
}
.eyebrow {
  margin: 0 0 12px;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
h1, h2, h3 { margin: 0; letter-spacing: -0.045em; line-height: 1.02; }
h1 { font-size: clamp(42px, 7vw, 78px); max-width: 850px; }
h2 { font-size: clamp(32px, 5vw, 52px); }
h3 { font-size: 23px; }
.hero-lede {
  max-width: 700px;
  color: var(--ink-soft);
  font-size: clamp(18px, 2.2vw, 22px);
  margin: 26px 0 0;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 900;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--brand), #1d4ed8 55%, var(--brand-3));
  color: white;
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.28);
}
.btn-secondary {
  background: white;
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  background: rgba(255,255,255,.82);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  font-size: 13px;
}
.trust-row span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brand-2);
  box-shadow: 0 0 0 4px rgba(20,184,166,.14);
}
.hero-panel {
  background: rgba(15, 23, 42, 0.94);
  color: white;
  border-radius: 34px;
  padding: 20px;
  box-shadow: 0 34px 80px rgba(15, 23, 42, 0.34);
  border: 1px solid rgba(255,255,255,.12);
}
.panel-top {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #cbd5e1;
  margin-bottom: 16px;
}
.panel-top strong { margin-left: auto; font-size: 13px; }
.dot { width: 10px; height: 10px; border-radius: 999px; background: #64748b; }
.dot:first-child { background: #22c55e; }
.dot:nth-child(2) { background: #f59e0b; }
.dot:nth-child(3) { background: #ef4444; }
.metric-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  padding: 18px;
  display: grid;
  gap: 4px;
}
.metric-card.primary {
  background: linear-gradient(135deg, rgba(37,99,235,.96), rgba(124,58,237,.82));
  min-height: 150px;
  align-content: end;
}
.metric-card span, .metric-card small { color: #cbd5e1; }
.metric-card strong { font-size: 28px; letter-spacing: -0.04em; }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.flow-card {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr;
  gap: 8px;
  align-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  padding: 14px;
}
.flow-card div { display: grid; gap: 2px; }
.flow-card span { color: #cbd5e1; font-size: 12px; }
.flow-card i { height: 2px; background: linear-gradient(90deg, var(--brand-2), transparent); display: block; }

.light-section { background: var(--paper-soft); }
.section-heading { max-width: 760px; margin-bottom: 34px; }
.section-heading p:not(.eyebrow), .split-section p, .beta-card p, .contact-grid p, .legal-page p { color: var(--ink-soft); font-size: 17px; }
.solution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.solution-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-soft);
  min-height: 250px;
  display: grid;
  align-content: start;
  gap: 14px;
}
.solution-card p { color: var(--muted); margin: 0; }
.icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e0f2fe, #eef2ff);
  color: #1d4ed8;
  font-weight: 900;
}
.split-section {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: 50px;
  align-items: start;
}
.check-list {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 26px 0 0;
  list-style: none;
}
.check-list li {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--ink-soft);
  font-weight: 750;
}
.check-list li::before {
  content: "✓";
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-weight: 900;
}
.system-stack { display: grid; gap: 14px; }
.stack-row {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 4px 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  background: white;
}
.stack-row span {
  grid-row: span 2;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: white;
  font-weight: 900;
}
.stack-row small { color: var(--muted); }
.beta-band {
  background: linear-gradient(135deg, var(--dark), #0f172a 50%, #1e3a8a);
  color: white;
}
.beta-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 36px;
  border-radius: 30px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.beta-card p { color: #cbd5e1; max-width: 720px; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 28px;
  align-items: center;
}
.contact-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 8px;
}
.contact-card span, .contact-card small { color: var(--muted); }
.contact-card a { color: #1d4ed8; font-size: clamp(21px, 3vw, 32px); font-weight: 900; letter-spacing: -0.04em; word-break: break-word; }
.contact-form{display:grid;gap:16px}.contact-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-form label{display:grid;gap:7px}.contact-form label span{font-size:13px;font-weight:850;color:#dce8f2}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid #28506a;border-radius:6px;background:#03101a;color:#fff;font:inherit;padding:12px 13px;outline:none}.contact-form input,.contact-form select{min-height:46px}.contact-form textarea{resize:vertical;min-height:140px}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:#4bb3fd;box-shadow:0 0 0 3px rgba(75,179,253,.16)}.contact-form .btn{justify-self:start}.contact-form .form-status{margin:0;font-size:14px}.contact-form small{line-height:1.5}
.footer {
  padding: 30px 0;
  background: var(--dark);
  color: white;
}
.footer p { color: #94a3b8; margin: 8px 0 0; }
.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
}
.footer nav { display: flex; gap: 14px; flex-wrap: wrap; }
.footer a { color: #cbd5e1; }
.footer a:hover { color: white; }

.form-page {
  background:
    radial-gradient(circle at 12% 12%, rgba(20,184,166,.16), transparent 34%),
    radial-gradient(circle at 90% 8%, rgba(37,99,235,.14), transparent 34%),
    var(--paper-soft);
  min-height: 80vh;
}
.beta-form-shell {
  padding: 72px 0;
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: 34px;
  align-items: start;
}
.form-intro { position: sticky; top: 96px; }
.form-intro h1 { font-size: clamp(36px, 5vw, 58px); }
.form-intro p { color: var(--ink-soft); font-size: 18px; }
.form-note {
  margin-top: 24px;
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: white;
  box-shadow: var(--shadow-soft);
}
.form-note span { color: var(--muted); }
.beta-form {
  background: white;
  border: 1px solid var(--line);
  border-radius: 30px;
  box-shadow: var(--shadow);
  padding: 28px;
  display: grid;
  gap: 18px;
}
.field-grid { display: grid; gap: 14px; }
.field-grid.two { grid-template-columns: 1fr 1fr; }
.field-grid.three { grid-template-columns: 1fr 1fr 1fr; }
label { display: grid; gap: 8px; }
label span { color: var(--ink-soft); font-weight: 850; font-size: 14px; }
input, select, textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  padding: 13px 14px;
  color: var(--ink);
  background: white;
  outline: none;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper-soft);
}
.checkbox-row input { width: auto; margin-top: 4px; }
.checkbox-row span { font-weight: 750; color: var(--ink-soft); }
.form-submit { width: 100%; border: 0; cursor: pointer; }
.form-status {
  border-radius: 16px;
  padding: 14px 16px;
  font-weight: 800;
}
.form-status.success { background: #dcfce7; color: #166534; }
.form-status.error { background: #fee2e2; color: #991b1b; }
.form-status.info { background: #dbeafe; color: #1e40af; }
.legal-page, .not-found {
  padding: 80px 0;
  max-width: 820px;
}
.legal-page h1, .not-found h1 { font-size: clamp(38px, 6vw, 64px); }
.legal-page h2 { margin-top: 30px; font-size: 28px; }
.legal-page a { color: #1d4ed8; font-weight: 800; }
.not-found { min-height: 80vh; display: grid; align-content: center; justify-items: start; gap: 14px; }
.not-found p { color: var(--ink-soft); font-size: 18px; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 90ms; }
.delay-2 { transition-delay: 180ms; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav:not(.always-show) {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 74px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: white;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 10px;
    box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 14px; }
  .hero-grid, .solution-grid, .split-section, .contact-grid, .beta-form-shell { grid-template-columns: 1fr; }
  .contact-form-grid { grid-template-columns: 1fr; }
  .form-intro { position: static; }
  .solution-card { min-height: auto; }
  .section-pad { padding: 72px 0; }
}

@media (max-width: 640px) {
  .container { width: min(100% - 28px, 1140px); }
  .brand { min-width: unset; }
  .brand-text small { display: none; }
  .nav.always-show { gap: 4px; }
  .nav.always-show a { padding: 8px; font-size: 13px; }
  .field-grid.two, .field-grid.three, .mini-grid { grid-template-columns: 1fr; }
  .flow-card { grid-template-columns: 1fr; }
  .flow-card i { height: 1px; }
  .beta-card, .footer-grid { flex-direction: column; align-items: flex-start; }
  .beta-form { padding: 20px; border-radius: 22px; }
  h1 { font-size: clamp(38px, 12vw, 56px); }
}


/* App launchpad */
.app-link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.app-link-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-soft);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.app-link-card::after {
  content: "";
  position: absolute;
  inset: auto -40px -70px auto;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  pointer-events: none;
}
.app-link-card.live::after { background: rgba(20, 184, 166, 0.12); }
.app-link-card.private::after { background: rgba(124, 58, 237, 0.12); }
.app-link-card.beta::after { background: rgba(245, 158, 11, 0.12); }
.app-link-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 7px 10px;
  background: #eef2ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.app-link-card.live .status-pill { background: #ccfbf1; color: #0f766e; }
.app-link-card.private .status-pill { background: #f3e8ff; color: #7e22ce; }
.app-link-card.beta .status-pill { background: #fef3c7; color: #b45309; }
.app-link-card.soon .status-pill { background: #f1f5f9; color: #64748b; }
.app-link-card h3 { margin-top: 2px; }
.app-link-card p { color: var(--muted); margin: 0; }
.app-link-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: white;
  font-weight: 900;
  width: fit-content;
  position: relative;
  z-index: 1;
}
.app-link-btn:hover { transform: translateY(-1px); background: #1d4ed8; }
.app-link-btn.disabled {
  background: #e2e8f0;
  color: #64748b;
  cursor: not-allowed;
}
.app-link-btn.disabled:hover { transform: none; background: #e2e8f0; }

@media (max-width: 980px) {
  .app-link-grid { grid-template-columns: 1fr; }
  .app-link-card { min-height: auto; }
}


/* Project demo graphics v6 */
.project-demo {
  height: 152px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.25);
  background: linear-gradient(145deg,#0f172a,#172554);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 24px rgba(15,23,42,.08);
  position: relative;
  z-index: 1;
  color: white;
}
.demo-browser {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  background: rgba(2,6,23,.58);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.demo-browser > span { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; }
.demo-browser > span:first-child { background:#fb7185; }
.demo-browser > span:nth-child(2) { background:#fbbf24; }
.demo-browser > span:nth-child(3) { background:#34d399; }
.demo-browser b { margin-left: auto; font-size: 9px; letter-spacing: .04em; color:#cbd5e1; }
.demo-stage { height: 124px; position: relative; padding: 12px; overflow: hidden; }
.app-link-card { min-height: 438px; }
.preview-note { margin-top: 9px !important; font-size: 14px !important; font-weight: 750; color:#1d4ed8 !important; }

/* VUI */
.demo-vui { background:linear-gradient(145deg,#06101e,#0f2b4a); }
.demo-vui .demo-stage { display:flex; gap:10px; }
.demo-sidebar { width:28px; padding:8px 5px; border-radius:8px; background:rgba(255,255,255,.08); display:grid; gap:7px; align-content:start; }
.demo-sidebar i { height:7px; border-radius:4px; background:#38bdf8; opacity:.85; }
.demo-main { flex:1; display:grid; gap:9px; }
.demo-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.demo-kpis em { font-style:normal; font-size:10px; font-weight:900; text-align:center; padding:7px 3px; border-radius:7px; background:rgba(255,255,255,.1); }
.demo-bars { display:flex; gap:6px; align-items:end; height:50px; padding:8px; border-radius:9px; background:rgba(255,255,255,.06); }
.demo-bars i { flex:1; border-radius:4px 4px 1px 1px; background:linear-gradient(#2dd4bf,#2563eb); }
.demo-bars i:nth-child(1){height:38%}.demo-bars i:nth-child(2){height:75%}.demo-bars i:nth-child(3){height:52%}.demo-bars i:nth-child(4){height:90%}

/* Academy */
.demo-academy { background:linear-gradient(145deg,#111827,#312e81); }
.demo-academy .demo-stage { display:grid; grid-template-columns:1.45fr .65fr; gap:9px; }
.demo-video { border-radius:10px; background:linear-gradient(135deg,#4338ca,#7c3aed); display:grid; place-items:center; font-size:26px; }
.demo-video span { width:45px;height:45px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);padding-left:3px; }
.demo-lessons { display:grid; gap:5px; }
.demo-lessons i { font-style:normal;border-radius:6px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:9px;font-weight:900; }

/* Plate Metrics */
.demo-plate { background:linear-gradient(145deg,#052e2b,#134e4a); }
.demo-plate .demo-stage { display:grid;grid-template-columns:95px 1fr;gap:12px;align-items:center; }
.demo-plate-ring { width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#5eead4 0 68%,rgba(255,255,255,.12) 68%);position:relative; }
.demo-plate-ring:after { content:"";position:absolute;width:62px;height:62px;border-radius:50%;background:#0f3c39; }
.demo-plate-ring span { position:relative;z-index:2;font-size:15px;font-weight:950;text-align:center; }
.demo-plate-ring small { display:block;font-size:8px;color:#99f6e4; }
.demo-nutrition { display:grid;gap:8px; }
.demo-nutrition i { height:7px;border-radius:99px;background:linear-gradient(90deg,#2dd4bf 60%,rgba(255,255,255,.12) 60%); }
.demo-nutrition i:nth-child(2){background:linear-gradient(90deg,#60a5fa 42%,rgba(255,255,255,.12) 42%)}
.demo-nutrition i:nth-child(3){background:linear-gradient(90deg,#fbbf24 78%,rgba(255,255,255,.12) 78%)}
.demo-nutrition b { font-size:9px;color:#ccfbf1; }

/* Grocery */
.demo-grocery { background:linear-gradient(145deg,#064e3b,#065f46); }
.demo-grocery .demo-stage { display:grid;grid-template-columns:1fr 76px;gap:9px; }
.demo-list { display:grid;gap:5px;align-content:center; }
.demo-list i { font-style:normal;font-size:9px;padding:5px 7px;border-radius:6px;background:rgba(255,255,255,.09); }
.demo-price { border-radius:10px;background:#ecfdf5;color:#065f46;display:grid;place-items:center;align-content:center;text-align:center; }
.demo-price b { font-size:14px }.demo-price small{font-size:7px}

/* Map */
.demo-map { background:linear-gradient(145deg,#173f35,#1e5c4d); }
.demo-map .demo-stage { background-image:linear-gradient(35deg,transparent 44%,rgba(255,255,255,.09) 45%,transparent 47%),linear-gradient(-35deg,transparent 55%,rgba(255,255,255,.06) 56%,transparent 58%);background-size:45px 45px; }
.demo-map-lines { position:absolute;inset:18px 35px 32px 25px;border:3px dashed rgba(253,224,71,.72);border-radius:50% 22% 50% 35%;transform:rotate(-8deg); }
.map-pin { position:absolute;color:#fbbf24;font-size:18px;text-shadow:0 3px 8px rgba(0,0,0,.3)}
.map-pin.p1{left:32px;top:26px}.map-pin.p2{right:42px;top:46px}.map-pin.p3{left:47%;bottom:28px}
.demo-map-card { position:absolute;left:12px;right:12px;bottom:8px;background:rgba(2,6,23,.68);border-radius:7px;padding:5px;text-align:center;font-size:8px;font-weight:800; }

/* Family */
.demo-family { background:linear-gradient(145deg,#3b1f16,#70452f); }
.demo-family .demo-stage { position:relative; }
.tree-node { position:absolute;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fef3c7;color:#78350f;font-size:9px;font-weight:950;border:2px solid rgba(255,255,255,.7); }
.tree-node.root{left:calc(50% - 14px);top:8px}.tree-node.n1{left:18px;bottom:10px}.tree-node.n2{left:calc(50% - 14px);bottom:10px}.tree-node.n3{right:18px;bottom:10px}
.tree-line { position:absolute;height:2px;background:#fde68a;transform-origin:left center;top:47px;left:50%;width:58px; }
.tree-line.l1{transform:rotate(145deg)}.tree-line.l2{transform:rotate(35deg)}
.demo-family .demo-stage:after{content:"";position:absolute;width:2px;height:43px;background:#fde68a;left:50%;top:32px}

/* Film */
.demo-film { background:linear-gradient(145deg,#1f2937,#4c1d95); }
.demo-story { display:grid;grid-template-columns:repeat(3,1fr);gap:7px;height:65px; }
.demo-story i { border-radius:8px;background:linear-gradient(135deg,#334155,#7c3aed);border:1px solid rgba(255,255,255,.12) }
.demo-story i:nth-child(2){background:linear-gradient(135deg,#581c87,#be185d)}.demo-story i:nth-child(3){background:linear-gradient(135deg,#1e3a8a,#0f766e)}
.demo-timeline { display:flex;gap:3px;margin-top:10px;height:15px;padding:3px;border-radius:5px;background:rgba(0,0,0,.24); }
.demo-timeline span { flex:1;border-radius:3px;background:#38bdf8}.demo-timeline span:nth-child(2){background:#a78bfa}.demo-timeline span:nth-child(3){background:#fb7185}.demo-timeline span:nth-child(4){background:#34d399}

/* Guide */
.demo-guide { background:linear-gradient(145deg,#0f172a,#1e3a8a); }
.demo-guide .demo-stage{display:grid;grid-template-columns:78px 1fr;gap:8px}.demo-guide-menu{display:grid;gap:5px;align-content:start}.demo-guide-menu i{font-style:normal;font-size:7px;background:rgba(255,255,255,.09);padding:5px;border-radius:5px}.demo-guide-page{background:white;color:#1e293b;border-radius:8px;padding:8px;display:grid;gap:6px}.demo-guide-page b{font-size:9px}.demo-guide-page span{height:5px;background:#e2e8f0;border-radius:4px}.demo-guide-page button{border:0;border-radius:6px;background:#2563eb;color:white;font-size:7px;padding:4px}

/* Pet */
.demo-pet { background:linear-gradient(145deg,#3f1d42,#831843); }.demo-pet .demo-stage{display:grid;grid-template-columns:75px 1fr;gap:10px;align-items:center}.demo-pet-avatar{width:68px;height:68px;border-radius:20px;background:#fce7f3;display:grid;place-items:center;font-size:30px}.demo-pet-info{display:grid;gap:4px}.demo-pet-info b{font-size:16px}.demo-pet-info span{font-size:8px;color:#fbcfe8}.demo-qr{margin-top:5px;width:32px;height:32px;background:white;color:#831843;display:grid;place-items:center;border-radius:5px;font-size:24px}

/* Home */
.demo-home { background:linear-gradient(145deg,#172554,#3730a3); }.demo-home .demo-stage{display:grid;grid-template-columns:72px 1fr;gap:10px}.demo-calendar{background:white;color:#1e3a8a;border-radius:11px;display:grid;place-items:center;align-content:center}.demo-calendar b{font-size:9px}.demo-calendar span{font-size:28px;font-weight:950;line-height:1}.demo-home-list{display:grid;gap:6px;align-content:center}.demo-home-list i{font-style:normal;font-size:8px;padding:6px;border-radius:6px;background:rgba(255,255,255,.1)}

/* Interactive demo */
.demo-interactive { background:linear-gradient(145deg,#0c4a6e,#0369a1); }.demo-webpage{height:70px;border-radius:8px;background:white;padding:9px;display:grid;gap:6px;position:relative}.demo-webpage span{height:7px;border-radius:5px;background:#dbeafe}.demo-webpage span:nth-child(2){width:70%}.demo-webpage span:nth-child(3){width:85%}.demo-webpage b{position:absolute;right:20px;top:31px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#f97316;box-shadow:0 0 0 5px rgba(249,115,22,.3);font-size:10px}.demo-callout{position:absolute;right:10px;bottom:8px;padding:5px 7px;border-radius:6px;background:#f97316;font-size:7px;font-weight:900}

/* 3D */
.demo-3d { background:linear-gradient(145deg,#111827,#334155); }.demo-3d .demo-stage{display:grid;grid-template-columns:1fr 72px;gap:10px;align-items:center}.demo-cube{width:67px;height:67px;margin:auto;border:2px solid #22d3ee;transform:rotate(30deg) skew(-5deg);position:relative;box-shadow:inset 0 0 25px rgba(34,211,238,.18)}.demo-cube:before,.demo-cube:after{content:"";position:absolute;inset:10px;border:1px solid rgba(34,211,238,.65)}.demo-cube:after{inset:20px}.demo-layers{display:grid;gap:7px}.demo-layers span{font-size:8px;padding:6px;border-radius:5px;background:rgba(255,255,255,.08);border-left:3px solid #22d3ee}

/* Browser AI */
.demo-browser-ai { background:linear-gradient(145deg,#172554,#1e40af); }.demo-tabs{display:flex;gap:4px}.demo-tabs i{height:8px;width:35px;border-radius:5px 5px 0 0;background:rgba(255,255,255,.14)}.demo-searchbar{margin-top:8px;border-radius:99px;background:white;color:#64748b;padding:7px 10px;font-size:8px}.demo-results{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.demo-results span{height:44px;border-radius:8px;background:rgba(255,255,255,.1)}

/* Consultant */
.demo-consultant { background:linear-gradient(145deg,#1e1b4b,#5b21b6); }.demo-consultant .demo-stage{display:grid;grid-template-columns:1fr 72px;gap:10px}.demo-client{display:grid;gap:6px;background:rgba(255,255,255,.08);border-radius:8px;padding:9px}.demo-client b{font-size:9px}.demo-client span{height:6px;border-radius:4px;background:rgba(255,255,255,.2)}.demo-client span:nth-of-type(2){width:75%}.demo-client span:nth-of-type(3){width:50%}.demo-score{border-radius:50%;width:68px;height:68px;margin:auto;background:conic-gradient(#c4b5fd 0 82%,rgba(255,255,255,.1) 82%);display:grid;place-items:center;align-content:center;color:#fff;box-shadow:inset 0 0 0 10px #4c1d95}.demo-score strong{font-size:16px}.demo-score small{font-size:6px}

/* ASL */
.demo-asl { background:linear-gradient(145deg,#115e59,#0f766e); }.demo-asl .demo-stage{display:grid;grid-template-columns:82px 1fr;gap:12px;align-items:center}.demo-asl-sign{height:78px;border-radius:15px;background:#ccfbf1;display:grid;place-items:center;font-size:40px}.demo-asl-copy{display:grid;gap:5px}.demo-asl-copy b{font-size:18px}.demo-asl-copy span{font-size:8px;color:#99f6e4}.demo-progress{height:7px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}.demo-progress i{display:block;width:64%;height:100%;background:#5eead4}

/* Dose */
.demo-dose { background:linear-gradient(145deg,#3f1d2e,#881337); }.demo-dose .demo-stage{display:grid;grid-template-columns:70px 1fr;gap:10px;align-items:center}.demo-dose-time{width:67px;height:67px;border-radius:50%;background:#fff1f2;color:#9f1239;display:grid;place-items:center;align-content:center;font-size:17px;font-weight:950}.demo-dose-time small{font-size:7px}.demo-dose-list{display:grid;gap:6px}.demo-dose-list i{font-style:normal;font-size:8px;padding:6px;border-radius:6px;background:rgba(255,255,255,.1)}

/* Smart home */
.demo-smart-home { background:linear-gradient(145deg,#0f172a,#164e63); }.demo-smart-home .demo-stage{display:grid;grid-template-columns:1fr 1fr;gap:9px}.demo-room{border-radius:10px;padding:10px;background:linear-gradient(135deg,#0e7490,#0891b2);display:grid;align-content:center}.demo-room span{font-size:8px}.demo-room b{font-size:21px}.demo-device-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.demo-device-grid i{font-style:normal;border-radius:8px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:16px}

/* Garden */
.demo-garden { background:linear-gradient(145deg,#14532d,#166534); }.demo-garden-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.demo-garden-grid i{font-style:normal;height:32px;border-radius:7px;background:#dcfce7;display:grid;place-items:center;font-size:17px}.demo-grow-bar{margin-top:8px;height:13px;background:rgba(255,255,255,.1);border-radius:99px;position:relative;overflow:hidden}.demo-grow-bar span{display:block;width:72%;height:100%;background:#86efac}.demo-grow-bar b{position:absolute;inset:0;display:grid;place-items:center;font-size:6px;color:#052e16}

/* Admin */
.demo-admin { background:linear-gradient(145deg,#2e1065,#581c87); }.demo-admin .demo-stage{display:grid;grid-template-columns:1fr 62px;gap:10px}.demo-admin-list{display:grid;gap:7px;align-content:center}.demo-admin-list i{font-style:normal;font-size:8px;padding:6px;border-radius:6px;background:rgba(255,255,255,.1)}.demo-admin-lock{height:62px;border-radius:15px;background:#f3e8ff;display:grid;place-items:center;font-size:28px;margin:auto;width:62px}

@media (max-width:980px){.app-link-card{min-height:auto}.project-demo{height:160px}}

/* ===== RJ & SD Ventures Premium Projects Homepage v7 ===== */
.premium-home {
  --p-bg:#020b13;
  --p-bg-2:#061421;
  --p-panel:#071a29;
  --p-panel-2:#0a2032;
  --p-line:#16405d;
  --p-line-soft:rgba(86,177,231,.22);
  --p-text:#f5f9fc;
  --p-muted:#9bb0c3;
  --p-blue:#31aef3;
  --p-cyan:#64d7ff;
  --p-green:#69e37e;
  --p-yellow:#ffd65a;
  background:var(--p-bg);
  color:var(--p-text);
}
.premium-home .site-header{background:rgba(1,10,18,.88);border-bottom:1px solid rgba(90,183,237,.18);backdrop-filter:blur(18px)}
.premium-home .brand-text strong,.premium-home .nav a{color:#eef7fd}
.premium-home .brand-text small{color:#8ba5ba}
.premium-home .nav a:hover{background:rgba(49,174,243,.12);color:#6fd3ff}
.premium-home .nav-admin{border-color:#1976a7;background:rgba(17,75,108,.28);box-shadow:0 0 28px rgba(35,167,235,.12)}
.premium-home .nav-toggle{background:#071a29;border-color:#1c4a68}.premium-home .nav-toggle span{background:#e9f6ff}

.premium-project-hero{position:relative;min-height:520px;padding:0!important;display:flex;align-items:center;overflow:hidden;background:#03101b}
.hero-mountain-bg{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(1,10,18,.98) 0%,rgba(1,10,18,.90) 34%,rgba(1,10,18,.38) 58%,rgba(1,10,18,.08) 100%),linear-gradient(0deg,rgba(2,11,19,.74) 0%,rgba(2,11,19,.05) 45%),url('/assets/projects-hero-mountains.20260920d.webp');background-size:cover;background-position:center right;filter:saturate(.92) contrast(1.05)}
.premium-project-hero:after{content:"";position:absolute;inset:auto 0 0;height:120px;background:linear-gradient(transparent,var(--p-bg));pointer-events:none}
.premium-hero-inner{position:relative;z-index:2;width:100%;padding-top:88px;padding-bottom:80px}
.premium-hero-copy{max-width:690px}
.premium-home .premium-project-hero .eyebrow{color:#6ed6ff;margin-bottom:10px}
.premium-home .premium-project-hero h1{font-size:clamp(54px,8vw,92px);line-height:.92;color:white;text-shadow:0 8px 34px rgba(0,0,0,.4)}
.premium-home .premium-project-hero h2{margin-top:12px;font-size:clamp(26px,4vw,42px);color:#f4f8fb;letter-spacing:-.035em}
.premium-home .premium-project-hero .hero-lede{max-width:630px;color:#c8d8e4;font-size:18px;line-height:1.6;margin-top:18px}
.portfolio-stats{display:flex;flex-wrap:wrap;gap:0;margin:30px 0 0}
.portfolio-stats>div{padding:0 24px;border-left:1px solid rgba(111,206,255,.36);min-width:130px}.portfolio-stats>div:first-child{padding-left:0;border-left:0}
.portfolio-stats strong{font-size:30px;display:block;color:#9fddff;line-height:1}.portfolio-stats span{display:block;margin-top:7px;font-size:11px;font-weight:800;color:#d3e2ec;text-transform:uppercase;letter-spacing:.05em}
.premium-home .premium-project-hero .btn-secondary{background:rgba(7,28,44,.72);color:white;border-color:#22638b;box-shadow:none}

.premium-projects{background:radial-gradient(circle at 0 15%,rgba(15,105,153,.14),transparent 28%),var(--p-bg);padding-top:54px}
.projects-intro{display:grid;grid-template-columns:1fr minmax(260px,340px);align-items:end;gap:30px}
.premium-home .projects-intro h2{color:white}.premium-home .projects-intro p:not(.eyebrow){color:#a9bdcc;max-width:760px;font-size:16px}
.project-search-wrap{display:flex;align-items:center;gap:8px;border:1px solid #19557a;background:#061927;border-radius:999px;padding:0 14px;height:44px;color:#80a8c2}
.project-search-wrap input{width:100%;background:transparent;border:0;outline:0;color:white;font:inherit}.project-search-wrap input::placeholder{color:#7893a8}
.project-filters{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 34px}
.project-filter{border:1px solid #123952;background:#071827;color:#b9cbd8;border-radius:999px;padding:9px 14px;font-size:12px;font-weight:800;cursor:pointer;transition:.2s}.project-filter:hover,.project-filter.active{background:#89d1ff;color:#00111d;border-color:#89d1ff}.project-filter b{font-size:10px;margin-left:4px}
.project-group{margin-top:32px}.project-group[hidden]{display:none}
.project-group-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px;padding:0 3px}.project-group-head h3{font-size:24px;color:#f4f8fb;letter-spacing:-.02em}.project-group-head span{color:#9db2c2;font-size:14px}.live-projects .project-group-head h3{color:#f2fff5}.live-projects .project-group-head h3::first-letter{color:var(--p-green)}.dev-projects .project-group-head h3{color:#fff8da}.private-projects .project-group-head h3{color:#d7ecfb}

.premium-home .app-link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.premium-home .dev-projects-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.premium-home .private-projects-grid{grid-template-columns:minmax(280px,420px)}
.premium-home .app-link-card{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:0 0 14px;background:linear-gradient(180deg,#071b2a,#04131f);border:1px solid #145071;border-radius:14px;box-shadow:0 18px 46px rgba(0,0,0,.26);min-height:100%;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.premium-home .app-link-card:hover{transform:translateY(-3px);border-color:#2d98d1;box-shadow:0 24px 55px rgba(0,0,0,.36),0 0 30px rgba(42,171,235,.08)}
.premium-home .app-link-card.featured{border-color:#39bdf8;box-shadow:0 20px 52px rgba(0,0,0,.34),0 0 0 2px rgba(57,189,248,.18)}
.project-visual{position:relative;aspect-ratio:2/1;overflow:hidden;background:#091827;border-bottom:1px solid rgba(74,179,231,.18)}
.project-visual:after{content:"";position:absolute;inset:auto 0 0;height:36%;background:linear-gradient(transparent,rgba(4,19,31,.36));pointer-events:none}
.project-visual img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .25s ease}.app-link-card:hover .project-visual img{transform:scale(1.018)}
.project-status{position:absolute;left:10px;top:10px;z-index:2;padding:6px 10px;border-radius:999px;font-size:10px;font-weight:900;box-shadow:0 5px 18px rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.18)}
.project-status.live{background:#78ea82;color:#06210d}.project-status.dev{background:#ffd968;color:#241a00}.project-status.private{background:#8bd6ff;color:#041725}
.premium-home .app-link-card h3{padding:14px 14px 0;font-size:20px;color:white;letter-spacing:-.025em}
.project-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 14px 0;color:#8fc5e5;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.project-meta span:last-child{color:#648095}
.premium-home .app-link-card>p{padding:0 14px;margin:9px 0 16px;color:#b4c7d5;font-size:13px;line-height:1.5;flex:1}
.premium-home .app-link-btn{margin:0 14px;min-height:38px;display:flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid #1887c5;background:linear-gradient(180deg,#0e679a,#074c74);color:white;font-size:12px;font-weight:900;text-decoration:none;box-shadow:inset 0 1px rgba(255,255,255,.12),0 8px 22px rgba(0,118,190,.15)}
.premium-home .app-link-btn:hover{background:linear-gradient(180deg,#1683bf,#075b86)}
.premium-home .app-link-card.soon .app-link-btn,.premium-home .app-link-card.soon span.app-link-btn{background:#0a2030;border-color:#31546a;color:#9fb5c5;box-shadow:none}
.premium-home .app-link-card.private .app-link-btn{background:linear-gradient(180deg,#1a648c,#0a3f5b)}
.project-empty{display:none!important}

/* Other homepage sections inherit the premium visual language without changing beta/privacy pages */
.premium-home .light-section,.premium-home #systems,.premium-home .beta-band,.premium-home #contact{background:#04111c!important;color:white}
.premium-home #solutions{background:#061522!important}
.premium-home .section-heading h2,.premium-home .split-section h2,.premium-home .beta-card h2,.premium-home .contact-grid h2{color:white}
.premium-home .section-heading p:not(.eyebrow),.premium-home .split-section p,.premium-home .beta-card p,.premium-home .contact-grid p{color:#9fb3c3}
.premium-home .solution-card,.premium-home .system-card,.premium-home .beta-card,.premium-home .contact-card{background:#071a29;border-color:#173f59;color:white;box-shadow:0 15px 42px rgba(0,0,0,.18)}
.premium-home .solution-card p{color:#9fb3c3}.premium-home .icon{background:#0e3048;color:#78d6ff}
.premium-home .check-list li{color:#a9bdcc}.premium-home .check-list li::before{background:#10362d;color:#78e8af}
.premium-home footer{background:#020a11;color:#829bad;border-top:1px solid #123149}.premium-home footer a{color:#b6cedd}
.portfolio-cta{background:#03101a;padding:42px 0;border-top:1px solid #16415d}.portfolio-cta-inner{min-height:180px;border:1px solid #1a5575;border-radius:18px;padding:34px 36px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(90deg,rgba(4,20,31,.96),rgba(4,20,31,.72)),url('/assets/projects-hero-mountains.20260920d.webp') center/cover no-repeat;box-shadow:0 22px 55px rgba(0,0,0,.28)}.portfolio-cta h2{font-size:34px;color:white}.portfolio-cta p{color:#c0d2de;margin:9px 0 0}

@media(max-width:980px){.projects-intro{grid-template-columns:1fr}.premium-home .app-link-grid,.premium-home .dev-projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.premium-project-hero{min-height:560px}.hero-mountain-bg{background-position:65% center}.premium-hero-copy{max-width:600px}}
@media(max-width:640px){.premium-project-hero{min-height:650px;align-items:flex-end}.hero-mountain-bg{background-image:linear-gradient(0deg,rgba(1,10,18,.99) 0%,rgba(1,10,18,.88) 55%,rgba(1,10,18,.2) 100%),url('/assets/projects-hero-mountains.20260920d.webp');background-position:center top}.premium-hero-inner{padding-top:250px;padding-bottom:56px}.portfolio-stats{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:18px 0}.portfolio-stats>div:nth-child(3){padding-left:0;border-left:0}.premium-home .app-link-grid,.premium-home .dev-projects-grid,.premium-home .private-projects-grid{grid-template-columns:1fr}.project-group-head{align-items:flex-start;flex-direction:column;gap:5px}.project-filters{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px}.project-filter{white-space:nowrap}.portfolio-cta-inner{align-items:flex-start;flex-direction:column}.portfolio-cta h2{font-size:28px}}


/* Proper RJ & SD Ventures business logo */
.site-header .brand{
  min-width:0;
  gap:0;
}
.site-header .business-logo-full{
  display:block;
  width:118px;
  height:auto;
  max-height:72px;
  object-fit:contain;
  border-radius:10px;
}
.premium-home .site-header .business-logo-full{
  box-shadow:0 8px 24px rgba(0,0,0,.24);
}
@media(max-width:640px){
  .site-header .business-logo-full{
    width:104px;
    max-height:68px;
  }
}


/* Mobile navigation hardening — compact dark menu on premium RJSD homepage */
@media (max-width:900px){
  .premium-home .nav:not(.always-show){
    top:80px;
    left:14px;
    right:14px;
    height:auto !important;
    min-height:0 !important;
    max-height:min(460px,calc(100vh - 104px));
    overflow-y:auto;
    justify-content:flex-start !important;
    align-content:stretch;
    gap:4px;
    padding:10px;
    background:#061421;
    border:1px solid #1c4a68;
    border-radius:18px;
    box-shadow:0 18px 50px rgba(0,0,0,.42);
    z-index:1000;
  }
  .premium-home .nav:not(.always-show) a{
    display:block;
    flex:0 0 auto !important;
    height:auto !important;
    min-height:0 !important;
    margin:0;
    padding:12px 14px;
    line-height:1.25;
    color:#eef7fd !important;
    border-radius:11px;
  }
  .premium-home .nav:not(.always-show) a:hover,
  .premium-home .nav:not(.always-show) a:focus{
    background:#0b2a40;
    color:#79d8ff !important;
  }
  .premium-home .nav:not(.always-show) .nav-admin{
    margin-top:4px;
    background:#0d2b40;
    border:1px solid #2d7da8;
    color:#fff !important;
    box-shadow:none;
  }
}