:root {
  --bg: #050712;
  --bg-soft: #0b1020;
  --panel: rgba(255, 255, 255, 0.06);
  --panel-strong: rgba(255, 255, 255, 0.09);
  --text: #f7f7fb;
  --muted: #a9b0c3;
  --line: rgba(255, 255, 255, 0.12);
  --accent: #8b5cf6;
  --accent-2: #22d3ee;
  --purple: #8b5cf6;
  --blue: #22d3ee;
  --shadow: 0 24px 90px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at top left, rgba(139, 92, 246, 0.24), transparent 32rem),
              radial-gradient(circle at top right, rgba(34, 211, 238, 0.16), transparent 28rem),
              var(--bg);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }

.grid-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 75%);
}
.orb {
  position: fixed;
  width: 28rem;
  height: 28rem;
  border-radius: 999px;
  filter: blur(80px);
  opacity: .35;
  pointer-events: none;
}
.orb-one { left: -8rem; top: 8rem; background: var(--accent); }
.orb-two { right: -8rem; top: 26rem; background: var(--accent-2); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: .9rem 1.25rem;
  backdrop-filter: blur(18px);
}
.brand, .nav, .language-links { display: flex; align-items: center; }
.brand { gap: .7rem; font-weight: 800; letter-spacing: -.02em; }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.nav { gap: 1rem; color: var(--muted); font-size: .95rem; }
.nav a:hover, .language-links a:hover { color: var(--text); }
.language-links { gap: .5rem; color: var(--muted); font-size: .82rem; }
.language-links a { padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); }

.section { position: relative; max-width: 1120px; margin: 0 auto; padding: 3.6rem 1.25rem; }
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .8fr); gap: 3rem; align-items: center; min-height: 68vh; padding-top: 4.2rem; }
.eyebrow { margin: 0 0 .8rem; color: var(--accent-2); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 800; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2.55rem, 6.5vw, 5.5rem); line-height: .92; letter-spacing: -.07em; margin-bottom: 1.1rem; }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.045em; margin-bottom: 1rem; }
h3 { margin-bottom: .45rem; }
p { color: var(--muted); line-height: 1.7; }
.hero-text { font-size: 1.16rem; max-width: 660px; }
.actions { display: flex; flex-wrap: wrap; gap: .85rem; margin: 1.45rem 0 .85rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .85rem 1.15rem; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; font-weight: 800; transition: transform .2s ease, border-color .2s ease, opacity .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: white; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; box-shadow: 0 18px 45px rgba(34, 211, 238, .18); }
.btn-secondary { background: rgba(255,255,255,.05); color: var(--text); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.note { font-size: .94rem; }

.hero-card, .panel, .video-card, details {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
  box-shadow: var(--shadow);
  border-radius: 32px;
}
.hero-card { padding: 1.6rem; min-height: 390px; display: flex; flex-direction: column; justify-content: center; gap: 1.4rem; overflow: hidden; }
.logo-stage { display: grid; place-items: center; min-height: 235px; border-radius: 28px; background: radial-gradient(circle, rgba(139,92,246,.18), rgba(34,211,238,.08), transparent 68%); }
.logo-stage img { width: min(72%, 270px); height: auto; filter: drop-shadow(0 25px 55px rgba(139, 92, 246, .28)); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.steps span { padding: .7rem .75rem; border-radius: 18px; background: rgba(255,255,255,.06); color: var(--muted); text-align: center; font-size: .88rem; }
.panel { padding: 2rem; }
.split-panel, .support-grid { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.section-head { max-width: 780px; margin-bottom: 2rem; }
.video-list { display: grid; gap: 1rem; }
.video-card { display: grid; grid-template-columns: 220px 1fr; gap: 1.25rem; align-items: center; padding: 1rem; }
.video-placeholder { min-height: 130px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(34,211,238,.14)); border: 1px solid var(--line); }
.video-placeholder span { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.12); }
.support-grid { grid-template-columns: .9fr 1.1fr; }
.support-form { display: grid; gap: .85rem; }
.support-form input, .support-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 18px; background: rgba(5, 7, 18, .54); color: var(--text); padding: 1rem; outline: none; }
.support-form input:focus, .support-form textarea:focus { border-color: rgba(34, 211, 238, .55); }
.form-status { display: none; margin: 0; font-size: .92rem; color: var(--accent-2); }
.form-status.is-visible { display: block; }
.form-status.error { color: #f97316; }
.api-status { display: block; margin-top: .45rem; color: var(--muted); font-size: .86rem; }
.auth-status { display: block; margin-top: .2rem; color: var(--muted); font-size: .82rem; }
.faq { display: grid; gap: .9rem; }
details { padding: 1.15rem 1.25rem; }
summary { cursor: pointer; font-weight: 800; }
details p { margin: .8rem 0 0; }
.footer { max-width: 1120px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); border-top: 1px solid var(--line); }
.footer div { display: flex; gap: 1rem; }

.redirect-page { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 1rem; padding: 2rem; text-align: center; }
.redirect-logo { width: 96px; height: auto; }

.legal-page { max-width: 880px; margin: 0 auto; padding: 5rem 1.25rem; }
.legal-page h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.legal-page section { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 1.5rem; }
.legal-page a { color: var(--accent-2); }

@media (max-width: 820px) {
  .site-header { flex-wrap: wrap; }
  .nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: .25rem; }
  .hero, .split-panel, .support-grid, .video-card { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-top: 3rem; }
  .hero-card { min-height: auto; }
  .steps { grid-template-columns: 1fr; }
  .footer { flex-direction: column; }
}

/* Admin placeholder */
.admin-page {
  min-height: 100vh;
}
.admin-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 96px 24px;
}
.admin-card {
  text-align: center;
}
.admin-logo {
  width: 84px;
  height: auto;
  margin-bottom: 18px;
}


/* SaaS app/admin mockups v9 */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; }
.app-sidebar { border-right: 1px solid var(--line); background: rgba(255,255,255,.035); padding: 1.1rem; position: sticky; top:0; height:100vh; }
.app-main { padding: 1.25rem; }
.app-topbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.25rem; }
.app-brand { display:flex; align-items:center; gap:.75rem; font-weight:900; margin-bottom:1.5rem; }
.app-brand img { width:38px; height:38px; object-fit:contain; }
.app-nav { display:grid; gap:.45rem; }
.app-nav a { color:var(--muted); padding:.75rem .85rem; border-radius:16px; border:1px solid transparent; }
.app-nav a:hover, .app-nav a.active { color:var(--text); background:rgba(255,255,255,.065); border-color:var(--line); }
.app-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap:1rem; }
.metric-card, .data-card, .login-card { border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.04)); border-radius:28px; box-shadow:var(--shadow); padding:1.25rem; }
.metric-card { grid-column: span 3; }
.data-card { grid-column: span 12; }
.data-card.half { grid-column: span 6; }
.metric-value { font-size:2rem; font-weight:900; letter-spacing:-.04em; margin:.3rem 0 .15rem; color:var(--text); }
.table { width:100%; border-collapse: collapse; overflow:hidden; }
.table th, .table td { text-align:left; padding:.9rem .7rem; border-bottom:1px solid var(--line); color:var(--muted); }
.table th { color:var(--text); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; }
.status-pill { display:inline-flex; padding:.32rem .6rem; border-radius:999px; font-weight:800; font-size:.78rem; border:1px solid var(--line); color:var(--text); background:rgba(255,255,255,.06); }
.status-open { background:rgba(34,211,238,.13); border-color:rgba(34,211,238,.32); }
.status-ok { background:rgba(74,222,128,.13); border-color:rgba(74,222,128,.28); }
.status-warn { background:rgba(251,191,36,.13); border-color:rgba(251,191,36,.28); }
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:2rem; }
.login-card { width:min(460px,100%); }
.login-card img { width:60px; height:60px; object-fit:contain; margin-bottom:1rem; }
.form-stack { display:grid; gap:.8rem; margin-top:1.2rem; }
.form-stack input, .form-stack textarea, .form-stack select { width:100%; border:1px solid var(--line); border-radius:16px; background:rgba(5,7,18,.56); color:var(--text); padding:.95rem; outline:none; }
.placeholder-notice { border:1px dashed rgba(34,211,238,.38); background:rgba(34,211,238,.06); color:var(--muted); padding:1rem; border-radius:20px; margin-top:1rem; }
.ticket-thread { display:grid; gap:.8rem; }
.message-bubble { padding:1rem; border-radius:20px; background:rgba(255,255,255,.055); border:1px solid var(--line); }
.message-bubble.support { background:rgba(139,92,246,.12); }
@media (max-width: 900px){ .app-shell{grid-template-columns:1fr}.app-sidebar{position:relative;height:auto}.metric-card,.data-card.half{grid-column:span 12}.app-grid{grid-template-columns:1fr}.app-topbar{align-items:flex-start; flex-direction:column}.table{font-size:.9rem} }

/* v11 visible SaaS prototype refinements */
.app-top-actions{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.mock-note{border:1px solid rgba(139,92,246,.22);background:rgba(139,92,246,.08);border-radius:18px;padding:.9rem 1rem;color:var(--muted);margin-top:1rem}
.timeline{display:grid;gap:.8rem;margin-top:1rem}.timeline-item{display:flex;gap:.8rem;align-items:flex-start;padding:.85rem;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.035)}
.dot{width:10px;height:10px;border-radius:99px;background:linear-gradient(135deg,var(--purple),var(--blue));margin-top:.45rem;box-shadow:0 0 22px rgba(139,92,246,.65)}
.progress{height:10px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.08)}.progress span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--purple),var(--blue))}
.chart-bars{height:160px;display:flex;align-items:end;gap:.7rem;padding-top:1rem}.chart-bars span{flex:1;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,rgba(106,92,255,.95),rgba(0,212,255,.45));min-height:22px}
.action-list{display:grid;gap:.7rem}.action-row{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.85rem;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.035)}
@media(max-width:700px){.action-row{align-items:flex-start;flex-direction:column}.chart-bars{height:120px}}


/* v12 navigable SaaS prototype */
.app-kicker { color: var(--accent-2); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 900; margin: 0 0 .45rem; }
.page-title { font-size: clamp(2rem, 4vw, 3.9rem); line-height: .95; letter-spacing: -.055em; margin: 0 0 .6rem; }
.app-description { max-width: 720px; }
.card-title-row { display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-bottom:1rem; }
.card-title-row h3 { margin:0; }
.toolbar { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin: 0 0 1rem; }
.searchbox { flex: 1; min-width: 220px; border:1px solid var(--line); border-radius:999px; padding:.8rem 1rem; background:rgba(5,7,18,.54); color:var(--text); outline:none; }
.kpi-sub { font-size:.88rem; color:var(--muted); margin:0; }
.plan-card { border:1px solid var(--line); background:rgba(255,255,255,.045); border-radius:24px; padding:1rem; }
.plan-card strong { display:block; margin-bottom:.25rem; }
.reads-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
.read-rule { border:1px solid var(--line); border-radius:22px; padding:1rem; background:rgba(255,255,255,.04); }
.read-rule .metric-value { font-size:1.7rem; }
.side-panel { grid-column: span 4; }
.main-panel { grid-column: span 8; }
.user-avatar { width:34px; height:34px; border-radius:999px; display:inline-grid; place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:white; font-weight:900; margin-right:.5rem; }
.sidebar-footer { margin-top: 1.5rem; padding-top:1rem; border-top:1px solid var(--line); color:var(--muted); font-size:.86rem; }
@media(max-width: 900px){ .side-panel,.main-panel{grid-column:span 12}.reads-grid{grid-template-columns:1fr}.card-title-row{align-items:flex-start;flex-direction:column}.toolbar{align-items:stretch}.searchbox{width:100%} }