/* ─── THEMES ─── */
[data-theme="dark"] {
  --bg-page: #080d1a;
  --bg-mid: #0d1526;
  --bg-card: rgba(13, 21, 38, 0.78);
  --bg-navbar: rgba(8, 13, 26, 0.88);
  --border-card: rgba(10, 240, 200, 0.12);
  --border-ui: rgba(255, 255, 255, 0.08);
  --text-h: #ffffff;
  --text-p: #e8f0f5;
  --text-s: #7a90ae;
  --accent: #0af0c8;
  --accent-dim: rgba(10, 240, 200, 0.12);
  --accent-glow: rgba(10, 240, 200, 0.25);
  --accent-fg: #080d1a;
  --gold: #ff9a38;
  --gold-dim: rgba(255, 154, 56, 0.12);
  --shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
  --g1: rgba(10, 240, 200, 0.09);
  --g2: rgba(255, 92, 71, 0.08);
  --grid: rgba(255, 255, 255, 0.018);
}
[data-theme="light"] {
  --bg-page: #edf2f7;
  --bg-mid: #e2eaf2;
  --bg-card: rgba(255, 255, 255, 0.94);
  --bg-navbar: rgba(255, 255, 255, 0.94);
  --border-card: rgba(26, 95, 122, 0.14);
  --border-ui: rgba(0, 0, 0, 0.09);
  --text-h: #0d1526;
  --text-p: #1e3050;
  --text-s: #5a708a;
  --accent: #0a8e78;
  --accent-dim: rgba(10, 142, 120, 0.1);
  --accent-glow: rgba(10, 142, 120, 0.22);
  --accent-fg: #ffffff;
  --gold: #c4841f;
  --gold-dim: rgba(196, 132, 31, 0.1);
  --shadow: 0 12px 48px rgba(0, 0, 0, 0.11);
  --g1: rgba(10, 142, 120, 0.07);
  --g2: rgba(220, 70, 50, 0.05);
  --grid: rgba(0, 0, 0, 0.04);
}
[data-theme="nature"] {
  --bg-page: #f5f7f5;
  --bg-mid: #eaeee9;
  --bg-card: rgba(255, 255, 255, 0.92);
  --bg-navbar: rgba(255, 255, 255, 0.92);
  --border-card: rgba(11, 122, 99, 0.14);
  --border-ui: rgba(20, 35, 30, 0.1);
  --text-h: #12211b;
  --text-p: #1e332b;
  --text-s: #5c6f66;
  --accent: #0b7a63;
  --accent-dim: rgba(11, 122, 99, 0.1);
  --accent-glow: rgba(11, 122, 99, 0.22);
  --accent-fg: #ffffff;
  --gold: #a8792f;
  --gold-dim: rgba(168, 121, 47, 0.1);
  --shadow: 0 20px 60px rgba(20, 35, 30, 0.1);
  --g1: rgba(11, 122, 99, 0.08);
  --g2: rgba(168, 121, 47, 0.07);
  --grid: rgba(20, 35, 30, 0.035);
}
[data-theme="sunset"] {
  --bg-page: #140a08;
  --bg-mid: #1d0e0b;
  --bg-card: rgba(28, 14, 11, 0.82);
  --bg-navbar: rgba(20, 10, 8, 0.9);
  --border-card: rgba(255, 150, 50, 0.18);
  --border-ui: rgba(255, 255, 255, 0.07);
  --text-h: #fff5e8;
  --text-p: #f0dcc8;
  --text-s: #b07860;
  --accent: #ff9a38;
  --accent-dim: rgba(255, 154, 56, 0.12);
  --accent-glow: rgba(255, 154, 56, 0.25);
  --accent-fg: #140a08;
  --gold: #ff9a38;
  --gold-dim: rgba(255, 154, 56, 0.12);
  --shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  --g1: rgba(255, 154, 56, 0.09);
  --g2: rgba(255, 92, 71, 0.08);
  --grid: rgba(255, 255, 255, 0.02);
}
[data-theme="arctic"] {
  --bg-page: #091424;
  --bg-mid: #0e1c33;
  --bg-card: rgba(14, 28, 51, 0.78);
  --bg-navbar: rgba(9, 20, 36, 0.9);
  --border-card: rgba(92, 184, 255, 0.15);
  --border-ui: rgba(255, 255, 255, 0.07);
  --text-h: #e8f4ff;
  --text-p: #cce4f8;
  --text-s: #6a8fb5;
  --accent: #5cb8ff;
  --accent-dim: rgba(92, 184, 255, 0.12);
  --accent-glow: rgba(92, 184, 255, 0.25);
  --accent-fg: #091424;
  --gold: #ffb347;
  --gold-dim: rgba(255, 179, 71, 0.12);
  --shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
  --g1: rgba(92, 184, 255, 0.09);
  --g2: rgba(255, 179, 71, 0.06);
  --grid: rgba(255, 255, 255, 0.02);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'DM Sans',sans-serif;background-color:var(--bg-page);color:var(--text-p);
  min-height:100vh;-webkit-font-smoothing:antialiased;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 0%, var(--g1) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 10%, var(--g2) 0%, transparent 55%);
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px),linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:48px 48px;
}
.wrap{position:relative;z-index:1;}

/* ---------- navbar ---------- */
.navbar{
  position:sticky;top:0;z-index:200;height:88px;display:flex;align-items:center;justify-content:center;
  padding:0 5%;background:var(--bg-navbar);backdrop-filter:blur(24px);border-bottom:1px solid var(--border-ui);
}
.logo{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:clamp(20px, 4vw, 26px);
  letter-spacing:0.02em;
  color:var(--text-h);
  position:absolute;
  left:5%;
}

.logo-main {
  display: block;
}

.logo-accent {
  color: var(--accent);
  font-style: normal;
}

.logo-subtext {
    font-size: clamp(10px, 2vw, 13px);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #5c6f66;
    margin-top: 2px;
}
.nb-links{display:flex;gap:32px;font-size:clamp(14px, 2vw, 16px);color:var(--text-s);font-weight:500;margin:0 auto;}
.nb-links a{
  color:var(--text-s);
  text-decoration:none;
  transition:color .15s;
  font-size:inherit;
  font-weight:inherit;
  line-height:1;
  padding: 8px 0; /* Better touch target area */
}
.nb-links a:hover { color: var(--accent); }
.nb-links a.active {
  color: var(--text-h);
  font-weight: 700;
}
.nb-links a:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nb-right{display:flex;align-items:center;gap:12px;position:absolute;right:5%;}

/* ─── THEME BUTTON ─── */
.theme-wrap{position:relative;}
.theme-btn{
  display:flex;align-items:center;gap:6px;padding:7px 13px;background:var(--bg-card);
  border:1px solid var(--border-ui);border-radius:9px;color:var(--text-s);
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s;
}
.theme-btn:hover{color:var(--text-p);border-color:var(--accent);}
.theme-btn svg{width:14px;height:14px;fill:currentColor;}
.dropdown{
  position:absolute;top:calc(100% + 10px);right:0;background:var(--bg-card);
  border:1px solid var(--border-card);border-radius:16px;padding:6px;
  box-shadow:var(--shadow);z-index:400;opacity:0;pointer-events:none;
  transform:translateY(-8px) scale(0.97);transition:opacity 0.2s,transform 0.2s;min-width:190px;
}
.dropdown.open{opacity:1;pointer-events:all;transform:translateY(0) scale(1);}
.theme-option{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;border:none;
  background:none;width:100%;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  color:var(--text-s);cursor:pointer;transition:background 0.15s,color 0.15s;text-align:left;
}
.theme-option:hover{background:var(--bg-card);color:var(--text-p);}
.theme-option.active{color:var(--accent);font-weight:600;}
.swatch{width:16px;height:16px;border-radius:50%;flex-shrink:0;}
.btn-ghost-sm{
  border:1px solid var(--border-ui);border-radius:10px;padding:9px 16px;font-size:13px;color:var(--text-p);
  background:transparent;font-weight:500;text-decoration:none;
}
.btn-primary-sm{
  background:var(--accent);color:var(--accent-fg);border:none;border-radius:10px;padding:9px 18px;
  font-size:13px;font-weight:700;text-decoration:none;box-shadow:0 8px 20px var(--accent-glow);
}

/* ---------- generic layout ---------- */
.hero{max-width:920px;margin:0 auto;padding:100px 24px 40px;text-align:center;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:22px;
}
.eyebrow::before,.eyebrow::after{content:'';width:22px;height:1px;background:var(--accent);opacity:0.5;}
h1{
  font-family:'Playfair Display',serif;font-weight:600;font-size:clamp(36px, 5vw, 58px);line-height:1.08;color:var(--text-h);
  letter-spacing:-0.01em;margin-bottom:22px;
}
h1 em{color:var(--accent);font-style:italic;}
.sub{font-size:18px;color:var(--text-s);max-width:560px;margin:0 auto 40px;line-height:1.65;}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:20px;}
.btn-primary{
  background:var(--accent);color:var(--accent-fg);border:none;border-radius:12px;padding:16px 28px;
  font-size:15px;font-weight:700;box-shadow:0 14px 32px var(--accent-glow);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
}
.btn-primary:hover { color: var(--accent-fg); text-decoration: none; opacity: 0.9; }
.btn-primary:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn-secondary{
  background:var(--bg-card);color:var(--text-p);border:1px solid var(--border-card);border-radius:12px;
  padding:16px 26px;font-size:15px;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:8px;
}
.btn-secondary:hover { color: var(--text-p); text-decoration: none; opacity: 0.9; }
.btn-secondary:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.staging{font-size:13px;color:var(--text-s);}
.staging code{
  font-family:monospace;background:var(--accent-dim);color:var(--accent);padding:2px 8px;border-radius:6px;
}

section{max-width:1140px;margin:0 auto;padding:70px 24px;}
.section-head{text-align:center;max-width:640px;margin:0 auto 48px;}
h2.section-title{
  font-family:'Playfair Display',serif;font-weight:600;font-size:clamp(28px, 4vw, 34px);color:var(--text-h);margin-bottom:12px;
}
.section-sub{font-size:15px;color:var(--text-s);line-height:1.6;}

/* ---------- features ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.feature{
  background:var(--bg-card);border:1px solid var(--border-card);border-radius:16px;padding:26px 22px;
}
.feature .icon{
  width:38px;height:38px;border-radius:10px;background:var(--accent-dim);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:16px;
}
.feature h3{font-size:15px;font-weight:700;color:var(--text-h);margin-bottom:8px;}
.feature p{font-size:13px;color:var(--text-s);line-height:1.6;}

/* ---------- audience split ---------- */
.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.audience-card{
  background:var(--bg-card);border:1px solid var(--border-card);border-radius:18px;padding:32px 28px;
  display:flex;flex-direction:column;
}
.audience-card.highlight{border:2px solid var(--accent);position:relative;}
.audience-card h3{font-family:'Playfair Display',serif;font-size:clamp(20px, 3vw, 23px);color:var(--text-h);margin:6px 0 10px;}
.audience-card p{font-size:14px;color:var(--text-s);line-height:1.65;margin-bottom:18px;}
.audience-card ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:22px;}
.audience-card li{font-size:13.5px;color:var(--text-p);display:flex;align-items:flex-start;gap:9px;}
.audience-card li::before{content:'✓';color:var(--accent);font-weight:700;flex-shrink:0;}
.audience-card .btn-primary,.audience-card .btn-secondary{align-self:flex-start;margin-top:auto;}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.faq-item{background:var(--bg-card);border:1px solid var(--border-card);border-radius:14px;padding:22px 24px;}
.faq-item h4{font-size:14.5px;font-weight:700;color:var(--text-h);margin-bottom:8px;}
.faq-item p{font-size:13.5px;color:var(--text-s);line-height:1.6;}

/* ---------- showcase ---------- */
.showcase{background:var(--bg-mid);border-radius:24px;}
.showcase-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;margin-bottom:56px;}
.showcase-grid.reverse{grid-template-columns:1fr 1.1fr;}
.showcase-grid.reverse .shot{order:1;}
.showcase-grid.reverse .copy{order:2;}
.shot{
  border-radius:16px;overflow:hidden;border:1px solid var(--border-card);box-shadow:var(--shadow);
  background:var(--bg-card);
}
.shot img{display:block;width:100%;height:auto;loading:lazy;}
.tag{
  display:inline-flex;font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-dim);padding:5px 12px;border-radius:999px;margin-bottom:14px;
}
.copy h3{font-family:'Playfair Display',serif;font-size:clamp(22px, 3vw, 26px);font-weight:600;color:var(--text-h);margin-bottom:12px;}
.copy p{font-size:14.5px;color:var(--text-s);line-height:1.7;}

/* ---------- response shape ---------- */
.response-shape{
  background:var(--text-h);border-radius:16px;padding:28px 30px;color:#eaf5f1;font-family:monospace;
  font-size:13px;line-height:1.7;box-shadow:var(--shadow);overflow-x:auto;
}
.response-shape .k{color:#9fd8c7;}
.response-shape .s{color:#e8c98a;}

/* ---------- tiers ---------- */
.tier-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;}
.tier{
  background:var(--bg-card);border:1px solid var(--border-card);border-radius:18px;padding:32px 30px;
}
.tier.full{border:2px solid var(--accent);position:relative;}
.tier .badge{
  position:absolute;top:-13px;left:30px;background:var(--accent);color:var(--accent-fg);
  font-size:11px;font-weight:700;padding:5px 12px;border-radius:999px;letter-spacing:0.04em;
}
.tier h3{font-family:'Playfair Display',serif;font-size:clamp(20px, 3vw, 22px);color:var(--text-h);margin-bottom:8px;}
.tier .desc{font-size:13.5px;color:var(--text-s);margin-bottom:22px;line-height:1.6;}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:11px;}
.tier li{font-size:13.5px;color:var(--text-p);display:flex;align-items:flex-start;gap:9px;}
.tier li::before{content:'✓';color:var(--accent);font-weight:700;flex-shrink:0;}
.tier li.no::before{content:'—';color:var(--text-s);}
.tier li.no{color:var(--text-s);}

/* ---------- cta band ---------- */
.cta-band{
  max-width:100%;margin:0;padding:80px 24px;text-align:center;background:var(--text-h);color:#eaf5f1;
}
.cta-band h2{font-family:'Playfair Display',serif;font-size:clamp(28px, 4vw, 36px);font-weight:600;margin-bottom:14px;}
.cta-band p{font-size:15px;color:#9db3ab;margin-bottom:34px;}
.cta-band .hero-ctas{margin-bottom:0;}
.cta-band .btn-secondary{background:transparent;border-color:rgba(234,245,241,0.25);color:#eaf5f1;}

/* ---------- pricing comparison table ---------- */
.cmp-table{
  width:100%;border-collapse:collapse;background:var(--bg-card);border:1px solid var(--border-card);
  border-radius:16px;overflow:hidden;font-size:14px;
}
.cmp-table th,.cmp-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--border-ui);}
.cmp-table thead th{background:var(--bg-mid);color:var(--text-h);font-weight:700;}
.cmp-table thead th.plan-full{color:var(--accent);}
.cmp-table tbody tr:last-child td{border-bottom:none;}
.cmp-table td.feat{color:var(--text-p);font-weight:500;}
.cmp-table td.center{text-align:center;font-size:18px;}
.cmp-table .yes{color:var(--accent);font-weight:700;}
.cmp-table .no{color:var(--text-s);}
.cmp-note{margin-top:18px;font-size:13px;color:var(--text-s);text-align:center;}

/* ---------- portal grid ---------- */
.portal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;}
.portal-card{
  background:var(--bg-card);border:1px solid var(--border-card);border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.portal-card .shot{border-radius:0;border:none;box-shadow:none;}
.portal-card .shot img{display:block;width:100%;height:auto;loading:lazy;}
.portal-card .pc-body{padding:22px 24px 26px;}
.portal-card .pc-body h3{font-family:'Playfair Display',serif;font-size:clamp(18px, 3vw, 21px);color:var(--text-h);margin-bottom:8px;}
.portal-card .pc-body p{font-size:14px;color:var(--text-s);line-height:1.65;}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.contact-info .ci-item{display:flex;gap:14px;margin-bottom:22px;}
.contact-info .ci-icon{
  width:42px;height:42px;border-radius:11px;background:var(--accent-dim);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
}
.contact-info h3{font-size:15px;color:var(--text-h);margin-bottom:3px;}
.contact-info p{font-size:14px;color:var(--text-s);line-height:1.5;}
.contact-form{background:var(--bg-card);border:1px solid var(--border-card);border-radius:18px;padding:30px;}
.contact-form label{display:block;font-size:13px;font-weight:600;color:var(--text-h);margin-bottom:7px;}
.contact-form input,.contact-form textarea{
  width:100%;padding:12px 14px;border:1px solid var(--border-ui);border-radius:10px;margin-bottom:18px;
  font-family:'DM Sans',sans-serif;font-size:14px;background:#fff;color:var(--text-p);
}
.contact-form textarea{resize:vertical;min-height:120px;}
.demo-note{
  margin-top:18px;font-size:13px;color:var(--gold);background:var(--gold-dim);
  border:1px solid rgba(168,121,47,0.2);border-radius:10px;padding:12px 16px;
}

/* ---------- footer ---------- */
footer,.site-footer,#site-footer{
  max-width:1140px;margin:0 auto;padding:16px 24px;display:flex;justify-content:center;
  align-items:center;font-size:13px;color:var(--text-s);border-top:1px solid var(--border-ui);
}
footer a,.site-footer a,#site-footer a{color:var(--text-s);text-decoration:none;}
footer a:hover,.site-footer a:hover,#site-footer a:hover{color:var(--accent);}

/* ---------- responsive fixes ---------- */
@media (max-width: 1200px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px){
  .nb-links{display:none;}
  h1{font-size:clamp(30px, 5vw, 38px);}
  .feature-grid{grid-template-columns:1fr 1fr;gap:16px;}
  .showcase-grid,.showcase-grid.reverse{grid-template-columns:1fr;gap:24px;}
  .showcase-grid.reverse .shot{order:0;}
  .showcase-grid.reverse .copy{order:1;}
  .tier-grid{grid-template-columns:1fr;}
  .portal-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .audience-grid{grid-template-columns:1fr;}
  .faq-grid{grid-template-columns:1fr;}
  footer,.site-footer,#site-footer{text-align:center;}
  .footer-links { gap: 12px; }
}

@media (max-width: 500px) {
  .hero { padding-top: 60px; padding-bottom: 30px; }
  h1 { font-size: clamp(24px, 6vw, 30px); }
  .eyebrow { margin-bottom: 18px; }
  section { padding: 50px 16px; }
  .section-head { margin-bottom: 32px; }
  .btn-primary { padding: 14px 24px; font-size: 14px; }
  .tag { font-size: 10px; }
}

/* ---------- accessibility improvements ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}