:root {
  --ink: #0A0908;
  --cream: #F8F6F1;
  --surface: #FFFFFF;
  --border: #E8E2D9;
  --ember: #E8612A;
  --ember-light: #F59E6B;
  --ember-bg: #FBE9DF;
  --ember-glow: rgba(232,97,42,0.18);
  --muted: #6B6258;
  --muted2: #A09890;
  --sand: #E0D8CE;
  --green: #16A34A;
  --green-bg: #DCFCE7;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: #fff;
  font-family: 'Bricolage Grotesque', sans-serif;
  overflow-x: hidden;
}

/* NAV */
nav {
  position: fixed; top:0; left:0; right:0; z-index:500;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 44px; height:60px;
  transition: background .4s, border-color .4s;
}
nav.bg { background:rgba(10,9,8,.9); backdrop-filter:blur(20px); border-bottom:1px solid rgba(255,255,255,.07); }
.nav-logo { text-decoration:none; font-size:19px; font-weight:800; color:#fff; letter-spacing:-.5px; }
.nav-logo em { color:var(--ember); font-style:normal; }
.nav-links { display:flex; gap:28px; }
.nav-link { font-size:13px; color:rgba(255,255,255,.4); font-weight:600; text-decoration:none; transition:color .2s; }
.nav-link:hover { color:#fff; }
.nav-ctas { display:flex; gap:8px; align-items:center; }
.n-ghost { font-size:12px; font-weight:700; color:rgba(255,255,255,.5); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); padding:7px 16px; border-radius:7px; font-family:'Bricolage Grotesque',sans-serif; transition:all .2s; }
.n-ghost:hover { color:#fff; border-color:rgba(255,255,255,.3); }
.n-main { font-size:12px; font-weight:800; color:#fff; background:var(--ember); border:none; padding:8px 18px; border-radius:7px; font-family:'Bricolage Grotesque',sans-serif; transition:background .2s; }
.n-main:hover { background:#d4531e; }

/* HERO */
.hero-section {
  background: var(--ink);
  padding: 140px 44px 100px;
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content:''; position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
  width: 800px; height: 500px;
  background: radial-gradient(ellipse, rgba(232,97,42,.12) 0%, transparent 65%);
  pointer-events: none;
}
.hero-inner { max-width: 900px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ember-light);
  background: rgba(232,97,42,.12);
  border: 1px solid rgba(232,97,42,.3);
  padding: 6px 16px 6px 6px;
  border-radius: 100px;
  margin-bottom: 32px;
}
.kicker-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--ember); display: flex; align-items: center; justify-content: center; }
.hero-h1 {
  font-size: clamp(44px, 6vw, 80px);
  font-weight: 900; line-height: 1.05; letter-spacing: -3px;
  margin-bottom: 24px;
}
.hero-h1 em { font-style: italic; font-family: 'Instrument Serif', serif; color: var(--ember); font-size: .95em; letter-spacing: -2px; }
.hero-sub {
  font-size: 18px; color: rgba(255,255,255,.48);
  max-width: 560px; line-height: 1.7;
  margin: 0 auto 40px;
}
.hero-sub strong { color: rgba(255,255,255,.7); font-weight: 600; }
.hero-cta {
  display: inline-flex;
  padding: 16px 36px;
  background: var(--ember);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  transition: all .2s;
  box-shadow: 0 0 40px rgba(232,97,42,.4);
}
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 4px 48px rgba(232,97,42,.6); }

/* DEMO SECTION - Portal Formats */
.demo-section {
  background: var(--ink);
  padding: 0 44px 100px;
}
.demo-inner { max-width: 1000px; margin: 0 auto; }
.portals-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.portal-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  transition: all .2s;
}
.portal-card:hover {
  border-color: var(--ember);
  background: rgba(232,97,42,.05);
}
.portal-logo {
  width: 56px; height: 56px;
  background: var(--surface);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  font-size: 20px; font-weight: 800;
  color: var(--ink);
}
.portal-logo img,
.portal-detail-icon img { width: 26px; height: 26px; }
.portal-logo img,
.portal-detail-icon img {
  filter: brightness(0) saturate(100%) invert(13%) sepia(3%) saturate(1231%) hue-rotate(356deg) brightness(98%) contrast(93%);
}
.portal-name {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}
.portal-specs {
  font-size: 12px;
  color: rgba(255,255,255,.4);
  line-height: 1.5;
}

/* FEATURES */
.features-section {
  background: var(--cream);
  padding: 100px 44px;
}
.features-inner { max-width: 1100px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 64px; }
.section-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ember);
  background: var(--ember-bg);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.section-h2 {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--ink);
  margin-bottom: 16px;
}
.section-h2 em { font-style: italic; font-family: 'Instrument Serif', serif; color: var(--ember); font-size: .95em; }
.section-sub {
  font-size: 18px;
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  transition: all .2s;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,.08);
}
.feature-icon {
  width: 48px; height: 48px;
  background: var(--ember-bg);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.feature-icon svg, .feature-icon img { width: 24px; height: 24px; color: var(--ember); }
.feature-icon img,
.benefit-check img {
  filter: brightness(0) saturate(100%) invert(47%) sepia(80%) saturate(1792%) hue-rotate(346deg) brightness(98%) contrast(85%);
}
.feature-h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}
.feature-p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

/* HOW IT WORKS */
.how-section {
  background: var(--ink);
  padding: 100px 44px;
}
.how-inner { max-width: 900px; margin: 0 auto; }
.how-header { text-align: center; margin-bottom: 64px; }
.how-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ember-light);
  background: rgba(232,97,42,.12);
  border: 1px solid rgba(232,97,42,.3);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.how-h2 {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -2px;
  margin-bottom: 16px;
}
.how-h2 em { font-style: italic; font-family: 'Instrument Serif', serif; color: var(--ember); font-size: .95em; }
.how-sub {
  font-size: 18px;
  color: rgba(255,255,255,.48);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  align-items: start;
}
.step-num {
  width: 64px; height: 64px;
  background: var(--ember);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800;
  color: #fff;
}
.step-content { padding-top: 8px; }
.step-h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}
.step-p {
  font-size: 15px;
  color: rgba(255,255,255,.5);
  line-height: 1.7;
}

/* BENEFITS */
.benefits-section {
  background: var(--cream);
  padding: 100px 44px;
}
.benefits-inner { max-width: 1100px; margin: 0 auto; }
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.benefit-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.benefit-check {
  width: 32px; height: 32px;
  background: var(--ember-bg);
  border: 1px solid rgba(232,97,42,.16);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.benefit-check svg, .benefit-check img { width: 18px; height: 18px; color: var(--ember); }
.benefit-h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.benefit-p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

/* SUPPORTED PORTALS */
.examples-section {
  background: var(--ink);
  padding: 100px 44px;
}
.examples-inner { max-width: 1100px; margin: 0 auto; }
.examples-header { text-align: center; margin-bottom: 64px; }
.examples-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ember-light);
  background: rgba(232,97,42,.12);
  border: 1px solid rgba(232,97,42,.3);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.examples-h2 {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -2px;
  margin-bottom: 16px;
}
.examples-h2 em { font-style: italic; font-family: 'Instrument Serif', serif; color: var(--ember); font-size: .95em; }
.examples-sub {
  font-size: 18px;
  color: rgba(255,255,255,.48);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

.portals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.portal-detail {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 20px;
}
.portal-detail-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.portal-detail-icon {
  width: 40px; height: 40px;
  background: var(--surface);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  color: var(--ink);
}
.portal-detail-name {
  font-size: 16px;
  font-weight: 700;
}
.portal-detail-specs {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  line-height: 1.6;
}
.portal-detail-specs strong {
  color: var(--ember-light);
  font-weight: 500;
}

/* PRICING */
.pricing-section {
  background: var(--cream);
  padding: 100px 44px;
}
.pricing-inner { max-width: 900px; margin: 0 auto; }
.pricing-header { text-align: center; margin-bottom: 48px; }
.pricing-h2 {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--ink);
  margin-bottom: 16px;
}
.pricing-h2 em { font-style: italic; font-family: 'Instrument Serif', serif; color: var(--ember); font-size: .95em; }
.pricing-sub {
  font-size: 18px;
  color: var(--muted);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
}
.pricing-card.featured {
  border-color: var(--ember);
  box-shadow: 0 0 0 1px var(--ember), 0 20px 60px rgba(232,97,42,.15);
}
.pricing-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.pricing-badge.free { background: var(--sand); color: var(--muted); }
.pricing-badge.pro { background: var(--ember-bg); color: var(--ember); }
.pricing-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.pricing-desc {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 20px;
}
.pricing-price {
  font-size: 42px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 24px;
}
.pricing-price span {
  font-size: 16px;
  font-weight: 500;
  color: var(--muted2);
}
.pricing-features {
  list-style: none;
  margin-bottom: 24px;
}
.pricing-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-features svg {
  width: 18px; height: 18px;
  color: var(--green);
  flex-shrink: 0;
}
.pricing-btn {
  display: block;
  width: 100%;
  padding: 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  transition: all .2s;
  font-family: 'Bricolage Grotesque', sans-serif;
  border: none;
  cursor: pointer;
}
.pricing-btn.primary {
  background: var(--ember);
  color: #fff;
}
.pricing-btn.primary:hover { background: #d4531e; }
.pricing-btn.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}
.pricing-btn.secondary:hover { background: var(--cream); }

/* FAQ */
.faq-section {
  background: var(--ink);
  padding: 100px 44px;
}
.faq-inner { max-width: 800px; margin: 0 auto; }
.faq-header { text-align: center; margin-bottom: 48px; }
.faq-h2 {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -2px;
  margin-bottom: 16px;
}
.faq-h2 em { font-style: italic; font-family: 'Instrument Serif', serif; color: var(--ember); font-size: .95em; }

.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  font-family: 'Bricolage Grotesque', sans-serif;
}
.faq-question svg {
  width: 20px; height: 20px;
  color: var(--muted2);
  transition: transform .2s;
}
.faq-item.open .faq-question svg { transform: rotate(180deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-item.open .faq-answer { max-height: 300px; }
.faq-answer p {
  padding: 0 24px 20px;
  font-size: 14px;
  color: rgba(255,255,255,.5);
  line-height: 1.7;
}

/* CTA */
.cta-section {
  background: var(--ember);
  padding: 100px 44px;
  text-align: center;
}
.cta-inner { max-width: 600px; margin: 0 auto; }
.cta-h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -2px;
  margin-bottom: 16px;
  color: #fff;
}
.cta-p {
  font-size: 18px;
  color: rgba(255,255,255,.8);
  margin-bottom: 32px;
  line-height: 1.6;
}
.cta-btn {
  display: inline-flex;
  padding: 16px 36px;
  background: #fff;
  color: var(--ember);
  text-decoration: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  transition: all .2s;
}
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(0,0,0,.2); }

/* FOOTER */
footer {
  background: var(--ink);
  padding: 60px 44px 40px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto 40px;
}
.f-logo { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:800; color:#fff; letter-spacing:-.5px; }
.f-tagline { font-size:13px; color:rgba(255,255,255,.35); line-height:1.6; margin-top:12px; max-width:260px; }
.f-col-title { font-size:12px; font-weight:700; color:rgba(255,255,255,.25); text-transform:uppercase; letter-spacing:1px; margin-bottom:16px; }
.f-link { display:block; font-size:14px; color:rgba(255,255,255,.5); text-decoration:none; margin:10px 0; transition:color .2s; }
.f-link:hover { color:#fff; }
.footer-bottom { max-width:1100px; margin:0 auto; padding-top:24px; border-top:1px solid rgba(255,255,255,.06); display:flex; justify-content:space-between; align-items:center; }
.f-copy { font-size:12px; color:rgba(255,255,255,.3); }

@media (max-width: 900px) {
  nav { padding: 0 20px; }
  .nav-links { display: none; }
  .hero-section { padding: 120px 20px 80px; }
  .demo-section, .features-section, .how-section, .benefits-section, .examples-section, .pricing-section, .faq-section, .cta-section { padding: 80px 20px; }
  .portals-showcase { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: 1fr; }
  .portals-grid, .benefits-grid, .pricing-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .step { grid-template-columns: 60px 1fr; gap: 20px; }
  .step-num { width: 52px; height: 52px; font-size: 22px; }
}
@media (max-width: 600px) {
  .portals-showcase { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; }
}