/* Minimal shared marketing styles */
:root{
  --bg:#0b0d10; --surface:#0f1216; --border:rgba(255,255,255,0.08);
  --text:#e6e7ee; --muted:#a3a8b3; --accent:#7c3aed; --accent2:#22d3ee;
}
/* Light theme overrides */
:root[data-theme="light"]{
  --bg:#ffffff; --surface:#ffffff; --border:rgba(0,0,0,0.08);
  --text:#0b0d10; --muted:#4b5563; --accent:#7c3aed; --accent2:#22d3ee;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--text); background:var(--bg); line-height:1.6}

.bg-anim{position:fixed; inset:0; z-index:-1; pointer-events:none; background:
  radial-gradient(900px 600px at -10% -20%, rgba(124,58,237,0.12), transparent 50%),
  radial-gradient(700px 500px at 110% 0%, rgba(34,211,238,0.10), transparent 50%),
  linear-gradient(180deg, var(--bg), var(--bg) 60%, #0c0f13);
  -webkit-mask-image: radial-gradient(circle at 50% -20%, black 40%, transparent 70%);
  mask-image: radial-gradient(circle at 50% -20%, black 40%, transparent 70%);
}

/* Light theme specific background gradient tweak */
:root[data-theme="light"] .bg-anim{
  background:
    radial-gradient(900px 600px at -10% -20%, rgba(124,58,237,0.10), transparent 50%),
    radial-gradient(700px 500px at 110% 0%, rgba(34,211,238,0.10), transparent 50%),
    linear-gradient(180deg, #ffffff, #ffffff 60%, #f8fafc);
}

.nav{position:sticky; top:0; border-bottom:1px solid var(--border); background:rgba(255,255,255,0.025); backdrop-filter: blur(12px); box-shadow:0 6px 30px rgba(0,0,0,0.16)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 28px}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:600; letter-spacing:0.2px}
.logo, .brand-logo{width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg, var(--accent), var(--accent2)); display:inline-flex; align-items:center; justify-content:center; overflow:hidden}
.brand-logo img{width:100%; height:100%; object-fit:cover; display:block}
.links{display:flex; gap:22px; align-items:center}
.links a{position:relative; color:var(--text); text-decoration:none; opacity:.9; font-size:15.5px}
.links a:hover{opacity:1}
.links a::after{content:""; position:absolute; left:8px; right:8px; bottom:-8px; height:2px; background:linear-gradient(90deg, var(--accent), var(--accent2)); transform:scaleX(0); transform-origin:left; transition:transform .18s ease, opacity .18s ease; opacity:0}
.links a:hover::after{transform:scaleX(1); opacity:1}
/* Prevent a stuck 'active' underline artifact; show underline only on hover */
.links a.active::after{ transform: scaleX(0); opacity:0 }
.btn{appearance:none; border:1px solid var(--border); background:transparent; color:var(--text); padding:12px 18px; border-radius:999px; cursor:pointer; transition:all .2s ease; display:inline-flex; align-items:center; gap:10px; text-decoration:none}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,0.04)}
.btn.primary{ background:linear-gradient(135deg, var(--accent), var(--accent2)); border:0; color:white; box-shadow:0 10px 28px rgba(124,58,237,0.25) }
.btn.ghost{ background:transparent }
.menu{display:none; background:transparent; color:var(--text); border:0; font-size:20px}

@media (max-width: 860px){
  .links{display:none}
  .menu{display:block}
  body.menu-open .links{position:absolute; left:0; right:0; top:56px; display:flex; flex-direction:column; gap:10px; padding:12px 16px; background:#0f1216; border-bottom:1px solid var(--border)}
}

.hero{padding:12vh 16px 8vh}
.hero-inner{max-width:900px; margin:0 auto; display:block; text-align:center}
.eyebrow{display:inline-block; padding:6px 10px; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:12px; margin-bottom:14px}
.hero-text h1{font-size:clamp(34px, 7vw, 64px); line-height:1.15; margin:0 0 16px; letter-spacing:-0.02em}
.gradient{background:linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-text p{color:var(--muted); margin:0 auto 26px; max-width:680px}
.cta{display:flex; gap:14px; justify-content:center}
.trust{margin-top:18px; color:var(--muted); font-size:14px}

.section{max-width:980px; margin:10vh auto 0; padding:0 16px}
.logos{display:flex; justify-content:center; gap:26px; align-items:center; opacity:.7; flex-wrap:wrap}
.logos img{filter:grayscale(100%); opacity:.8}

.features{display:grid; grid-template-columns: repeat(3,1fr); gap:18px}
.feature{padding:18px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,0.02)}
.feature h3{margin:0 0 8px; letter-spacing:-0.01em}
.feature p{margin:0; color:var(--muted)}

.split{display:grid; grid-template-columns: 1.1fr 1fr; gap:22px}
.split .copy h2{margin:0 0 10px; letter-spacing:-0.01em}
.split .copy p{color:var(--muted)}
.split .shot{border:1px dashed var(--border); border-radius:14px; min-height:200px; background:linear-gradient(135deg, rgba(124,58,237,0.08), rgba(34,211,238,0.08))}

.cta2{text-align:center; padding:12vh 16px}
.cta2 h2{margin:0 0 10px; font-size:clamp(22px,4vw,34px)}
.cta2 p{margin:0 0 16px; color:var(--muted)}

.footer{border-top:1px solid var(--border); padding:24px 16px; margin-top:6vh; background:rgba(255,255,255,0.02)}
.footer-inner{max-width:980px; margin:0 auto; display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:16px}
.footer .brand.small{display:flex; align-items:center; gap:10px; font-weight:600}
.footer .muted{color:var(--muted)}
.footer .label{color:var(--muted); font-size:13px; margin-bottom:6px}
.footer a{color:var(--text); text-decoration:none; opacity:.9}
.footer a:hover{opacity:1}

@media (max-width: 980px){
  .features{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
}

/* Extracted shared styles from landing/index pages */

/* Alpha modal (centralized) */
.alpha-modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:60; background:rgba(0,0,0,0.45); visibility:hidden; opacity:0; transition:opacity .18s ease, visibility .18s ease }
.alpha-modal.show{ visibility:visible; opacity:1 }
.alpha-box{ width:min(560px,94%); background: var(--surface); border:1px solid var(--surface-border); padding:18px; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.6); color:var(--text) }
.alpha-box h3{ margin:0 0 8px 0; font-size:18px }
.alpha-box p{ margin:0 0 12px 0; color:var(--muted) }
.alpha-box .meta{ display:flex; justify-content:space-between; gap:8px; align-items:center }
.alpha-link{ color:var(--accent2); text-decoration:underline; text-underline-offset:3px }

/* Try Demo callout card (centralized) */
.demo-card{ background: linear-gradient(180deg, #030305 0%, #07070b 100%); border:1px solid rgba(255,255,255,0.03); padding:28px; border-radius:16px; box-shadow: 0 14px 42px rgba(0,0,0,0.6), 0 12px 40px rgba(16,185,129,0.12); transition: transform .18s ease, box-shadow .18s ease; display:inline-block; width:100%; max-width:920px }
.demo-card:hover{ transform: translateY(-8px); box-shadow:0 32px 80px rgba(0,0,0,0.75), 0 26px 90px rgba(16,185,129,0.22); outline: 2px solid rgba(16,185,129,0.14); }
.demo-card::after{ content:''; display:block; height:10px; margin-top:12px; border-radius:8px; box-shadow:0 18px 60px rgba(16,185,129,0.22); }
.demo-card .lead{ font-size: clamp(22px,3.6vw,34px); font-weight:900; margin:0 0 10px; color: #e6fdf4 }
.demo-card .meta{ color: #bfeee0; margin:0 0 14px }
.demo-card .cta{ margin-top:12px }
.demo-card .btn.primary{ padding:14px 22px; font-size:16px; border-radius:12px; background: linear-gradient(90deg,#10b981,#34d399); box-shadow: 0 10px 30px rgba(16,185,129,0.16); border:0 }
@media (max-width:640px){ .demo-card{ padding:16px } .demo-card .lead{ font-size:20px } .demo-card .btn.primary{ width:100%; display:inline-block } }

/* Pricing responsive tweaks centralized */
#pricing{ --plan-gap:28px }
#pricing .plans-wrap{ position:relative; margin-top:30px; overflow:visible }
#pricing .pricing-grid{ display:flex; gap:var(--plan-gap); margin:0; padding:8px 6px; overflow:auto; scroll-behavior:smooth }
#pricing .pricing-grid::-webkit-scrollbar{ display:none }
#pricing .pricing-grid .plan{ box-sizing:border-box; flex:1 1 calc((100% - (var(--plan-gap) * 2)) / 3); min-width:0; max-width: calc((100% - (var(--plan-gap) * 2)) / 3) }
#pricing .plan{ padding:34px; border-radius:16px; background:var(--surface); border:1px solid var(--surface-border); min-height:360px; display:flex; flex-direction:column; justify-content:space-between; box-shadow: 0 8px 30px rgba(2,6,23,0.6); color:var(--text) }
#pricing .plan.recommended{ transform:translateY(-8px); border:1px solid rgba(124,58,237,0.22); box-shadow:0 18px 48px rgba(124,58,237,0.12); background: linear-gradient(180deg, rgba(12,6,36,0.6), rgba(124,58,237,0.04)); }
#pricing .ribbon{ font-size:13px; color:var(--accent2); font-weight:600 }
#pricing .plan h3{ margin:8px 0 2px; font-size:20px }
#pricing .plan .tag{ color:var(--muted); font-size:13px }
#pricing .price{ font-size:30px; font-weight:700; margin-top:10px; color:var(--text); display:flex; align-items:baseline; gap:8px }
#pricing .price small{ color:var(--muted); font-size:14px }
#pricing .desc{ color:var(--muted); margin:12px 0 18px }
#pricing .bullets{ margin:0; padding:0; list-style:none; color:var(--muted); line-height:1.9 }
#pricing .bullets li{ display:flex; gap:10px; align-items:flex-start; margin-bottom:10px }
#pricing .bullets svg{ flex:0 0 18px; margin-top:2px; opacity:0.95 }
#pricing .choose-row{ margin-top:18px; display:flex; justify-content:center }
#pricing .cta-choose{ padding:12px 22px; border-radius:999px; text-decoration:none }
#pricing .subtle-note{ text-align:center; color:var(--muted); margin-top:10px; font-size:13px }
#pricing .nav-arrow{ display:none }
@media (max-width:980px){
  #pricing .pricing-grid{ display:block }
  #pricing .pricing-grid .plan{ width:100%; max-width:100%; margin-bottom:16px; flex:1 1 auto }
}
@media (max-width:640px){
  #pricing .pricing-grid{ display:block; padding:8px 4px }
  #pricing .pricing-grid .plan{ width:100%; max-width:100%; padding:18px 14px; min-height:auto; box-sizing:border-box }
  #pricing .plan .price{ font-size:20px }
  #pricing .bullets li{ overflow-wrap:break-word; word-break:break-word }
  #pricing .bullets li svg{ flex:0 0 20px }
}