
/* Override app.css constraints — landing page needs full document height */
html, body { height: auto; }

:root{
  --lp-bg:#06101d;
  --lp-bg-2:#0a1624;
  --lp-panel:rgba(11,22,37,.86);
  --lp-panel-2:rgba(13,24,40,.92);
  --lp-line:rgba(175,202,238,.12);
  --lp-text:#f6fbff;
  --lp-muted:#c5d8ef;
  --lp-soft:#9db5d3;
  --lp-accent:#72d4ef;
  --lp-accent-2:#4a91ff;
  --lp-shadow:0 26px 70px rgba(0,0,0,.32);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.lp-modal-open{overflow:hidden}
body{
  margin:0;color:var(--lp-text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 20% 0%, rgba(55,108,211,.16), transparent 28%),
    radial-gradient(circle at 80% 0%, rgba(70,215,197,.10), transparent 26%),
    linear-gradient(180deg, var(--lp-bg) 0%, #050d17 100%);
}
a{color:inherit;text-decoration:none}
.lp-page{min-height:100vh;position:relative;overflow:clip}
.lp-page::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.36;
  background:
    radial-gradient(circle at 50% -10%, rgba(113,212,239,.12), transparent 24%),
    linear-gradient(90deg, transparent 0%, rgba(111,173,255,.06) 52%, transparent 100%);
}
.lp-container{width:min(100% - 48px, 1320px);margin:0 auto;position:relative;z-index:1}
.lp-header{position:sticky;top:0;z-index:20;background:rgba(6,16,29,.72);backdrop-filter:blur(12px);border-bottom:1px solid rgba(177,205,241,.08)}
.lp-nav{display:flex;align-items:center;gap:20px;min-height:82px}
.lp-menu{margin-left:auto}
.lp-brand{display:flex;align-items:center;gap:14px;font-weight:800;font-size:20px;letter-spacing:-.02em}
.lp-brand-mark{
  width:40px;height:40px;border-radius:14px;display:inline-block;position:relative;
  background:linear-gradient(135deg,#0f5dd4,#75d9f2);
  box-shadow:0 14px 34px rgba(41,102,214,.35);
}
.lp-brand-mark::before{
  content:"";position:absolute;inset:7px;border-radius:11px;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(222,241,255,.92));
  clip-path:path("M12 0C18 0 23 4 24 10c0 9-5 16-12 20C5 26 0 19 0 10 1 4 6 0 12 0Z");
}
.lp-menu{display:flex;align-items:center;gap:28px}
.lp-menu a{color:var(--lp-muted);font-weight:600;font-size:15px;transition:color .2s ease}
.lp-menu a:hover{color:#fff}
.lp-btn{
  border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 22px;border-radius:16px;font-weight:700;font-size:16px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.lp-btn:hover{transform:translateY(-1px)}
.lp-btn-primary{color:#fff;background:linear-gradient(135deg, #2d8dff 0%, #4f67ff 100%);box-shadow:0 18px 44px rgba(45,111,255,.24)}
.lp-btn-secondary{color:#eef6ff;background:rgba(255,255,255,.04);border:1px solid rgba(176,205,241,.16)}
.lp-btn-nav{min-height:48px;padding-inline:20px}
.lp-btn-full{width:100%}

.lp-hero{padding:26px 0 8px}
.lp-hero-frame{
  border-radius:34px;overflow:hidden;background:#08111e;border:1px solid rgba(181,207,242,.08);
  box-shadow:0 24px 64px rgba(0,0,0,.26)
}
.lp-hero-frame img{display:block;width:100%;height:auto}
.lp-hero-underbar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-top:18px;padding:18px 22px;border-radius:24px;background:var(--lp-panel);
  border:1px solid var(--lp-line);box-shadow:0 18px 44px rgba(0,0,0,.18)
}
.lp-hero-underbar-below{margin-top:16px}
.lp-hero-undertext{display:grid;gap:6px;max-width:780px}
.lp-hero-undertext strong{font-size:18px;letter-spacing:-.02em}
.lp-hero-undertext span{color:var(--lp-muted);line-height:1.6;font-size:15px}
.lp-hero-actions{display:flex;gap:14px;flex-wrap:wrap}

.lp-section{padding:72px 0}
.lp-section-soft{padding-top:16px}
.lp-section-last{padding-top:56px;padding-bottom:110px}
.lp-section-console{padding-top:44px}
.lp-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px}
.lp-section-head-center{justify-content:center;text-align:center;align-items:center}
.lp-section-tag{
  display:inline-flex;padding:8px 12px;border-radius:999px;margin-bottom:12px;
  color:#d8e8ff;font-weight:700;font-size:13px;background:rgba(255,255,255,.04);border:1px solid rgba(173,201,238,.14)
}
.lp-section-head h2,.lp-faq-shell h2{margin:0;font-size:clamp(30px,4vw,44px);line-height:1.06;letter-spacing:-.04em}
.lp-section-head p,.lp-faq-list p{margin:12px 0 0;color:var(--lp-muted);line-height:1.7;max-width:760px}
.lp-head-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.gallery-arrow{padding-inline:16px;font-size:18px}

.feature-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.feature-panel{
  padding:24px;border-radius:28px;background:var(--lp-panel);
  border:1px solid var(--lp-line);box-shadow:0 18px 44px rgba(0,0,0,.18);
  transition:transform .18s ease,border-color .18s ease,background .18s ease
}
.feature-panel:hover{transform:translateY(-2px);border-color:rgba(114,212,239,.24);background:rgba(13,25,42,.95)}
.feature-icon{
  width:58px;height:58px;border-radius:18px;margin-bottom:18px;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:800;color:#eaf8ff;
  background:linear-gradient(135deg, rgba(45,141,255,.24), rgba(114,212,239,.18));
  border:1px solid rgba(114,212,239,.14)
}
.feature-panel h3{margin:0 0 10px;font-size:26px;line-height:1.05;letter-spacing:-.03em}
.feature-panel p{margin:0;color:var(--lp-muted);line-height:1.65;font-size:15px}

.capability-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.detail-card,
.lp-faq-list article{
  padding:24px;border-radius:24px;background:var(--lp-panel);
  border:1px solid var(--lp-line);box-shadow:0 18px 44px rgba(0,0,0,.18)
}
.detail-pill{
  display:inline-flex;padding:8px 12px;border-radius:999px;margin-bottom:14px;
  background:rgba(114,212,239,.10);border:1px solid rgba(114,212,239,.18);color:#dff7ff;font-size:13px;font-weight:700;
}
.detail-card h3,.lp-faq-list strong{display:block;margin:0 0 10px;font-size:22px;line-height:1.18}
.detail-card p{margin:0;color:var(--lp-muted);line-height:1.7}
.detail-card ul{margin:16px 0 0;padding-left:18px;color:var(--lp-soft);display:grid;gap:8px;line-height:1.5}
.detail-card{scroll-margin-top:110px}

.gallery-shell{position:relative;padding:6px 0 4px}
.gallery-viewport{overflow:hidden;padding:0 0 4px}
.gallery-track{
  display:flex;gap:24px;overflow:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:4px calc((100% - min(980px, 78vw)) / 2) 14px;
}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-card{
  flex:0 0 min(980px, 78vw);scroll-snap-align:center;padding:18px;border-radius:30px;background:var(--lp-panel-2);
  border:1px solid var(--lp-line);box-shadow:var(--lp-shadow)
}
.gallery-meta{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:16px}
.gallery-meta strong{display:block;font-size:20px}
.gallery-meta p{margin:8px 0 0;color:var(--lp-muted);line-height:1.55;max-width:640px}
.gallery-meta span{
  flex:0 0 auto;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.05);
  border:1px solid rgba(180,206,241,.16);color:#ebf5ff;font-weight:700;font-size:13px
}
.gallery-card img{width:100%;aspect-ratio:16/8.2;object-fit:cover;border-radius:22px;border:1px solid rgba(191,214,245,.1)}

/* CTA band */
.lp-section-cta-band{padding:48px 0}
.lp-cta-band{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding:44px 48px;border-radius:32px;
  background:linear-gradient(135deg, rgba(45,141,255,.12) 0%, rgba(114,212,239,.08) 100%);
  border:1px solid rgba(114,212,239,.22);box-shadow:0 24px 64px rgba(0,0,0,.22)
}
.lp-cta-band-text .lp-section-tag{margin-bottom:10px}
.lp-cta-band-text h2{margin:0;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.04em}
.lp-cta-band-text p{margin:10px 0 0;color:var(--lp-muted);line-height:1.65;max-width:540px}
.lp-cta-band-actions{display:flex;gap:14px;flex-wrap:wrap;flex-shrink:0}

/* FAQ */
.lp-faq-shell{text-align:center}
.lp-faq-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px;text-align:left}

/* Footer */
.lp-footer{border-top:1px solid var(--lp-line);padding:28px 0}
.lp-footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.lp-footer-copy{color:var(--lp-soft);font-size:14px}
.lp-footer-nav{display:flex;gap:24px}
.lp-footer-nav a{color:var(--lp-soft);font-size:14px;transition:color .18s ease}
.lp-footer-nav a:hover{color:#fff}

.lp-modal[hidden]{display:none}
.lp-modal{position:fixed;inset:0;z-index:60}
.lp-modal-backdrop{position:absolute;inset:0;background:rgba(2,8,16,.62);backdrop-filter:blur(8px)}
.lp-modal-dialog{
  position:relative;z-index:1;width:min(480px, calc(100% - 28px));margin:8vh auto 0;
  padding:26px;border-radius:26px;background:#0b1624;border:1px solid rgba(177,205,241,.14);
  box-shadow:0 30px 90px rgba(0,0,0,.45)
}
.lp-modal-close{position:absolute;right:14px;top:14px;border:none;background:transparent;color:#d9e7fb;font-size:28px;cursor:pointer;line-height:1}
.lp-modal-tag{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(178,205,242,.12);font-size:13px;font-weight:700;color:#d6e7ff}
.lp-modal-dialog h3{margin:14px 0 8px;font-size:28px;letter-spacing:-.03em}
.lp-modal-text{margin:0 0 18px;color:var(--lp-muted);line-height:1.65}
.lp-form{display:grid;gap:14px}
.lp-form label{display:grid;gap:8px;color:#e9f4ff;font-size:14px;font-weight:600}
.lp-form input{width:100%;height:52px;padding:0 14px;border-radius:14px;border:1px solid rgba(177,205,242,.14);background:rgba(255,255,255,.04);color:#fff;outline:none}
.lp-form input:focus{border-color:rgba(114,212,239,.52);box-shadow:0 0 0 4px rgba(114,212,239,.12)}
.lp-form-error{padding:12px 14px;border-radius:14px;background:rgba(255,106,106,.1);color:#ffd9d9;border:1px solid rgba(255,106,106,.24)}

@media (max-width: 1180px){
  .lp-menu{gap:20px}
  .feature-band{grid-template-columns:repeat(2,minmax(0,1fr))}
  .capability-detail-grid,.lp-faq-list{grid-template-columns:1fr 1fr}
  .gallery-track{padding-inline:calc((100% - min(840px, 88vw)) / 2)}
  .gallery-card{flex-basis:min(840px, 88vw)}
  .lp-hero-underbar{flex-direction:column;align-items:flex-start}
  .lp-cta-band{flex-direction:column;align-items:flex-start;padding:36px 32px}
}

@media (max-width: 820px){
  .lp-container{width:min(100% - 28px, 1320px)}
  .lp-nav{min-height:74px;flex-wrap:wrap;padding:12px 0}
  .lp-menu{display:none}
  .feature-band,.capability-detail-grid,.lp-faq-list{grid-template-columns:1fr}
  .gallery-track{padding-inline:0}
  .gallery-card{flex-basis:100%}
  .lp-section-head{align-items:flex-start;flex-direction:column}
  .gallery-meta{flex-direction:column}
  .lp-cta-band{padding:28px 24px}
  .lp-footer-inner{flex-direction:column;align-items:flex-start;gap:14px}
}

@media (max-width: 560px){
  .lp-brand{font-size:18px}
  .lp-btn{width:100%}
  .lp-hero-undertext strong{font-size:17px}
  .feature-panel h3{font-size:24px}
  .lp-modal-dialog{padding:22px}
}


/* Cookie notice */
.lp-cookie-banner{
  position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:70;
  width:min(calc(100% - 32px), 1100px);display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 16px;border-radius:18px;background:rgba(9,18,31,.94);border:1px solid rgba(177,205,241,.14);
  box-shadow:0 18px 44px rgba(0,0,0,.28)
}
.lp-cookie-banner p{margin:0;color:var(--lp-muted);line-height:1.55;font-size:14px}
.cookie-btn{
  flex:0 0 auto;border:none;cursor:pointer;min-height:44px;padding:0 18px;border-radius:14px;font-weight:700;font-size:15px;
  color:#fff;background:linear-gradient(135deg, #2d8dff 0%, #4f67ff 100%);box-shadow:0 12px 28px rgba(45,111,255,.22)
}

/* Widget positioning overrides */
.mcw-btn{
  right:38px !important;
  bottom:38px !important;
}
.mcw-panel{
  right:38px !important;
  bottom:102px !important;
}

@media (max-width: 820px){
  .lp-cookie-banner{width:min(calc(100% - 20px), 1100px);left:10px;right:10px;transform:none;align-items:flex-start;flex-direction:column}
  .mcw-btn{right:16px !important;bottom:16px !important;}
  .mcw-panel{right:16px !important;bottom:80px !important;}
}

@media (max-width: 560px){
  .lp-cookie-banner p{font-size:13px}
  .cookie-btn{width:100%}
}

/* Demo credentials hint in login modal */
.lp-demo-hint {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 14px; border-radius:14px; margin-bottom:14px;
  background:rgba(114,212,239,.06); border:1px solid rgba(114,212,239,.18);
  font-size:13px; color:var(--lp-muted);
}
.lp-demo-label {
  font-weight:700; color:#dff7ff; white-space:nowrap;
}
.lp-demo-hint code {
  background:rgba(255,255,255,.07); border-radius:6px; padding:2px 7px;
  font-family:monospace; color:#b6edff; font-size:12px;
}
.lp-demo-fill {
  margin-left:auto; border:none; cursor:pointer; background:rgba(114,212,239,.14);
  border-radius:8px; padding:5px 10px; color:#dff7ff; font-size:12px; font-weight:700;
}
.lp-demo-fill:hover { background:rgba(114,212,239,.24); }

/* ── Light theme ─────────────────────────────────────────── */
[data-theme="light"]{
  --lp-bg:#f0f6ff;
  --lp-bg-2:#e6f0fc;
  --lp-panel:rgba(255,255,255,.92);
  --lp-panel-2:rgba(245,250,255,.98);
  --lp-line:rgba(60,100,170,.13);
  --lp-text:#0d1a2d;
  --lp-muted:#3d5a7a;
  --lp-soft:#6a8caa;
  --lp-accent:#1a6fc4;
  --lp-accent-2:#2459c4;
  --lp-shadow:0 26px 70px rgba(0,0,0,.10);
}
[data-theme="light"] body{
  background:
    radial-gradient(circle at 20% 0%, rgba(55,108,211,.10), transparent 28%),
    radial-gradient(circle at 80% 0%, rgba(70,215,197,.07), transparent 26%),
    linear-gradient(180deg, #edf4ff 0%, #f8fbff 100%);
}
[data-theme="light"] .lp-page::before{opacity:.15}
[data-theme="light"] .lp-header{background:rgba(240,246,255,.82)}
[data-theme="light"] .lp-menu a:hover{color:#0d1a2d}
[data-theme="light"] .lp-btn-secondary{color:#1a2e44;background:rgba(0,0,0,.04);border-color:rgba(60,100,170,.18)}
[data-theme="light"] .lp-hero-frame{background:#dce9f8}
[data-theme="light"] .lp-section-tag{color:#1e4a80;background:rgba(0,0,0,.04);border-color:rgba(60,100,170,.16)}
[data-theme="light"] .feature-panel:hover{background:rgba(255,255,255,.98);border-color:rgba(26,111,196,.28)}
[data-theme="light"] .feature-icon{color:#1a3a6a;background:linear-gradient(135deg,rgba(45,141,255,.14),rgba(70,215,197,.10));border-color:rgba(26,111,196,.18)}
[data-theme="light"] .detail-pill{background:rgba(26,111,196,.08);border-color:rgba(26,111,196,.20);color:#1a3a6a}
[data-theme="light"] .gallery-card{background:rgba(255,255,255,.88)}
[data-theme="light"] .gallery-meta strong{color:#0d1a2d}
[data-theme="light"] .gallery-meta p{color:#3d5a7a}
[data-theme="light"] .gallery-meta span{color:#6a8caa}
[data-theme="light"] .lp-cta-band{background:linear-gradient(135deg,rgba(45,141,255,.10) 0%,rgba(70,215,197,.07) 100%);border-color:rgba(26,111,196,.22)}
[data-theme="light"] .lp-cta-band-text p{color:#3d5a7a}
[data-theme="light"] .lp-modal-dialog{background:#f4f9ff;border-color:rgba(60,100,170,.16)}
[data-theme="light"] .lp-modal-tag{color:#1e4a80;background:rgba(26,111,196,.08);border-color:rgba(26,111,196,.16)}
[data-theme="light"] .lp-demo-hint{background:rgba(26,111,196,.06);border-color:rgba(26,111,196,.18);color:#3d5a7a}
[data-theme="light"] .lp-demo-label{color:#1a3a6a}
[data-theme="light"] .lp-demo-hint code{background:rgba(0,0,0,.05);color:#1a4d8a}
[data-theme="light"] .lp-demo-fill{background:rgba(26,111,196,.10);color:#1a3a6a}
[data-theme="light"] .lp-demo-fill:hover{background:rgba(26,111,196,.20)}
[data-theme="light"] .lp-form label span{color:#3d5a7a}
[data-theme="light"] .lp-form input{background:rgba(0,0,0,.04);border-color:rgba(60,100,170,.20);color:#0d1a2d}
[data-theme="light"] .lp-form input:focus{border-color:#1a6fc4;box-shadow:0 0 0 3px rgba(26,111,196,.14)}
[data-theme="light"] .lp-cookie-banner{background:rgba(240,246,255,.96);border-color:rgba(60,100,170,.18)}
[data-theme="light"] .lp-cookie-banner p{color:#3d5a7a}
[data-theme="light"] .cookie-btn{background:rgba(26,111,196,.12);color:#1a3a6a}
[data-theme="light"] #themeToggle{color:#1a3a6a}

/* Theme toggle button in nav */
#themeToggle{
  background:none;border:none;cursor:pointer;font-size:20px;padding:4px 8px;
  color:var(--lp-muted);border-radius:10px;transition:color .2s,background .2s;line-height:1;
}
#themeToggle:hover{background:rgba(128,160,200,.12)}
