/* ════════════════════════════════════════
   LUMARIS Labs – Shared Stylesheet
   Deep Crystal Purple Theme
   ════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=DM+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:#07030f; --bg2:#0f0720; --bg3:#160a2e;
  --p-mid:#7c3aed; --p-bright:#a855f7; --p-light:#d8b4fe; --p-glow:#e9d5ff;
  --rose:#f0abfc; --indigo:#818cf8;
  --border:rgba(168,85,247,0.20); --border2:rgba(168,85,247,0.11);
  --t95:rgba(255,255,255,0.95); --t85:rgba(255,255,255,0.85);
  --t78:rgba(255,255,255,0.78); --t72:rgba(255,255,255,0.72);
  --t68:rgba(255,255,255,0.68); --t66:rgba(255,255,255,0.66);
  --t62:rgba(255,255,255,0.62); --t60:rgba(255,255,255,0.60);
  --t56:rgba(255,255,255,0.56); --t48:rgba(255,255,255,0.48);
  --t45:rgba(255,255,255,0.45); --t12:rgba(255,255,255,0.12);
  --t10:rgba(255,255,255,0.10); --t08:rgba(255,255,255,0.08);
  --t06:rgba(255,255,255,0.06); --t04:rgba(255,255,255,0.04);
  --t03:rgba(255,255,255,0.03);
  --pa20:rgba(168,85,247,0.20); --pa12:rgba(168,85,247,0.12);
  --pa08:rgba(168,85,247,0.08); --pa05:rgba(168,85,247,0.05);
}

html{scroll-behavior:smooth}
html{overflow-x:hidden}body{font-family:'DM Sans',sans-serif;background:var(--bg);color:#fff;min-height:100vh;-webkit-font-smoothing:antialiased}

.bg-radial{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 15% 0%,rgba(124,58,237,0.22) 0%,transparent 40%),radial-gradient(ellipse at 85% 15%,rgba(168,85,247,0.14) 0%,transparent 35%),radial-gradient(ellipse at 50% 100%,rgba(76,29,149,0.20) 0%,transparent 40%),radial-gradient(ellipse at 5% 85%,rgba(109,40,217,0.10) 0%,transparent 30%)}
.bg-grid{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0.055;background-image:linear-gradient(rgba(168,85,247,0.9) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,0.9) 1px,transparent 1px);background-size:72px 72px}
.bg-fade{position:fixed;inset:0;pointer-events:none;z-index:0;background:linear-gradient(to bottom,transparent 55%,#030008 100%)}

.wrap{position:relative;z-index:10;max-width:1280px;margin:0 auto;padding:0 24px}
@media(min-width:768px){.wrap{padding:0 40px}}
@media(min-width:1024px){.wrap{padding:0 48px}}

header{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;background:rgba(7,3,15,0.90);backdrop-filter:blur(24px);border-bottom:1px solid var(--border2);margin:0 -24px;padding:18px 24px}
@media(min-width:768px){header{margin:0 -40px;padding:18px 40px}}
@media(min-width:1024px){header{margin:0 -48px;padding:18px 48px}}

.logo-lockup{display:flex;align-items:center;gap:13px;text-decoration:none}
.logo-img{width:42px;height:42px;object-fit:contain;display:block;filter:drop-shadow(0 0 10px rgba(168,85,247,0.6));animation:logoFloat 3.5s ease-in-out infinite, logoSpin 18s linear infinite}
.logo-text .name{font-size:1.05rem;font-weight:600;letter-spacing:0.20em;color:var(--t95)}
.logo-text .sub{font-size:0.65rem;text-transform:uppercase;letter-spacing:0.32em;color:rgba(168,85,247,0.75);margin-top:2px}

nav{display:none;align-items:center;gap:26px}
nav a{font-size:0.875rem;color:var(--t66);text-decoration:none;transition:color 0.2s;padding:4px 0;border-bottom:2px solid transparent}
nav a:hover{color:var(--p-glow)}
nav a.active{color:var(--p-light);border-bottom-color:var(--p-bright)}
@media(min-width:1024px){nav{display:flex}}

.nav-cta{display:none;background:linear-gradient(135deg,var(--p-mid),var(--p-bright));color:#fff;border:none;border-radius:10px;padding:9px 18px;font-size:0.82rem;font-weight:600;font-family:inherit;cursor:pointer;text-decoration:none;white-space:nowrap;transition:opacity 0.2s,transform 0.15s;box-shadow:0 0 20px rgba(168,85,247,0.30)}
.nav-cta:hover{opacity:0.9;transform:translateY(-1px)}
@media(min-width:1024px){.nav-cta{display:inline-flex;align-items:center;gap:6px}}

.nav-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
@media(min-width:1024px){.nav-toggle{display:none}}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--t66);border-radius:2px;transition:0.3s}

.mobile-nav{display:none;flex-direction:column;gap:0;border-radius:20px;border:1px solid var(--border);background:rgba(7,3,15,0.98);backdrop-filter:blur(24px);margin:8px -24px 0;padding:8px;position:relative;z-index:99}
@media(min-width:768px){.mobile-nav{margin:8px -40px 0}}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:14px 18px;font-size:0.9rem;color:var(--t66);text-decoration:none;border-radius:12px;transition:background 0.2s,color 0.2s}
.mobile-nav a:hover{background:var(--pa08);color:var(--p-light)}
.mobile-nav a.active{color:var(--p-bright)}

.page-hero{padding:60px 0 44px}
.page-hero .breadcrumb{font-size:0.75rem;color:var(--t45);margin-bottom:18px}
.page-hero .breadcrumb a{color:var(--t45);text-decoration:none}
.page-hero .breadcrumb a:hover{color:var(--t72)}
.page-hero .breadcrumb span{margin:0 6px}

.sec-label{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.28em}
.sec-label.purple{color:rgba(168,85,247,0.90)}
.sec-label.light{color:rgba(216,180,254,0.85)}
.sec-label.rose{color:rgba(240,171,252,0.85)}
.sec-label.gray{color:var(--t56)}

h1{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:600;line-height:1.07;letter-spacing:-0.02em}
h2{margin-top:12px;font-size:clamp(1.55rem,3vw,2.2rem);font-weight:600;line-height:1.15}
h3{font-size:1.1rem;font-weight:600}
.sec-body{margin-top:16px;font-size:1rem;line-height:1.85;color:var(--t66)}
.lead{font-size:1.1rem;line-height:1.85;color:var(--t68)}

.btn-primary{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--p-mid) 0%,var(--p-bright) 100%);color:#fff;border:none;border-radius:14px;padding:15px 26px;font-size:0.92rem;font-weight:500;font-family:inherit;cursor:pointer;text-decoration:none;transition:opacity 0.2s,transform 0.15s,box-shadow 0.2s;box-shadow:0 0 24px rgba(168,85,247,0.35),0 4px 12px rgba(0,0,0,0.3)}
.btn-primary:hover{opacity:0.92;transform:translateY(-2px);box-shadow:0 0 40px rgba(168,85,247,0.55),0 8px 24px rgba(0,0,0,0.3)}
.btn-primary svg{transition:transform 0.2s}
.btn-primary:hover svg{transform:translateX(3px)}

.btn-outline{display:inline-flex;align-items:center;gap:8px;background:var(--pa05);color:var(--p-light);border:1px solid var(--border);border-radius:14px;padding:15px 26px;font-size:0.92rem;font-weight:500;font-family:inherit;cursor:pointer;text-decoration:none;transition:background 0.2s,transform 0.15s,border-color 0.2s}
.btn-outline:hover{background:var(--pa12);border-color:var(--pa20);transform:translateY(-2px)}

.card{border-radius:24px;border:1px solid var(--border2);background:var(--pa05);padding:28px;backdrop-filter:blur(24px);transition:background 0.25s,transform 0.25s,border-color 0.25s,box-shadow 0.25s}
.card:hover{background:var(--pa08);transform:translateY(-4px);border-color:var(--border);box-shadow:0 0 36px rgba(168,85,247,0.14)}
.card-lg{border-radius:32px;border:1px solid var(--border2);background:var(--pa05);padding:36px;backdrop-filter:blur(24px)}

.icon-box{display:inline-flex;border-radius:14px;border:1px solid var(--border);background:var(--pa08);padding:12px}
.icon-box svg{color:var(--p-light);width:24px;height:24px}

.grid-2{display:grid;gap:24px}
@media(min-width:768px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{display:grid;gap:24px}
@media(min-width:768px){.grid-3{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.grid-3{grid-template-columns:1fr 1fr 1fr}}
.grid-4{display:grid;gap:24px}
@media(min-width:768px){.grid-4{grid-template-columns:1fr 1fr}}
@media(min-width:1280px){.grid-4{grid-template-columns:repeat(4,1fr)}}

.check-list{display:flex;flex-direction:column;gap:12px}
.check-item{display:flex;align-items:flex-start;gap:12px;border-radius:18px;border:1px solid var(--border2);background:var(--bg2);padding:16px 20px;transition:background 0.2s,border-color 0.2s}
.check-item:hover{background:var(--bg3);border-color:var(--border)}
.check-item svg{flex-shrink:0;margin-top:2px;color:var(--p-bright);width:18px;height:18px}
.check-item span{font-size:0.9rem;line-height:1.65;color:var(--t78)}

.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(168,85,247,0.28) 30%,rgba(168,85,247,0.28) 70%,transparent);margin:16px 0}

.badge{display:inline-block;border-radius:8px;padding:4px 10px;font-size:0.68rem;font-weight:500;text-transform:uppercase;letter-spacing:0.15em}
.badge-purple{background:rgba(168,85,247,0.15);color:var(--p-light);border:1px solid rgba(168,85,247,0.30)}
.badge-rose{background:rgba(240,171,252,0.12);color:var(--rose);border:1px solid rgba(240,171,252,0.25)}
.badge-indigo{background:rgba(129,140,248,0.12);color:var(--indigo);border:1px solid rgba(129,140,248,0.25)}
.badge-glow{background:rgba(233,213,255,0.10);color:var(--p-glow);border:1px solid rgba(233,213,255,0.20)}

.highlight-box{border-radius:32px;border:1px solid var(--border);background:linear-gradient(135deg,var(--pa08) 0%,var(--pa05) 60%,var(--bg2) 100%);padding:36px;backdrop-filter:blur(24px)}

.cta-section{border-radius:40px;border:1px solid var(--border);background:linear-gradient(135deg,rgba(124,58,237,0.16) 0%,var(--bg2) 50%,rgba(168,85,247,0.11) 100%);padding:52px 36px;text-align:center;backdrop-filter:blur(32px);margin:40px 0 80px;box-shadow:0 0 80px rgba(124,58,237,0.15)}
.cta-section h2{max-width:680px;margin:12px auto 0}
.cta-section .sec-body{max-width:580px;margin:16px auto 0}
.cta-btns{margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:14px}
@media(min-width:480px){.cta-btns{flex-direction:row;justify-content:center}}

footer{border-top:1px solid var(--border2);padding:28px 0;display:flex;flex-direction:column;gap:12px;align-items:center;font-size:0.8rem;color:var(--t45);text-align:center;position:relative;z-index:10}
@media(min-width:640px){footer{flex-direction:row;justify-content:space-between}}
footer a{color:rgba(168,85,247,0.6);text-decoration:none;transition:color 0.2s}
footer a:hover{color:var(--p-light)}
footer .footer-links{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes logoFloat{0%,100%{filter:drop-shadow(0 0 8px rgba(168,85,247,0.5))}50%{filter:drop-shadow(0 0 20px rgba(168,85,247,0.90))}}
@keyframes logoSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 30px rgba(168,85,247,0.18)}50%{box-shadow:0 0 60px rgba(168,85,247,0.40)}}

.anim-1{animation:fadeUp 0.7s 0.00s ease both}
.anim-2{animation:fadeUp 0.7s 0.09s ease both}
.anim-3{animation:fadeUp 0.7s 0.18s ease both}
.anim-4{animation:fadeUp 0.7s 0.27s ease both}
.anim-5{animation:fadeUp 0.7s 0.36s ease both}

.reveal{opacity:0;transform:translateY(18px);transition:opacity 0.65s ease,transform 0.65s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:0.08s}
.reveal-d2{transition-delay:0.17s}
.reveal-d3{transition-delay:0.26s}

.step-num{font-family:'DM Mono',monospace;font-size:0.72rem;font-weight:500;letter-spacing:0.28em;color:rgba(168,85,247,0.75)}
.stat-strip{display:flex;flex-wrap:wrap;gap:12px}
.stat-pill{border-radius:14px;border:1px solid var(--border2);background:var(--pa05);padding:14px 20px;backdrop-filter:blur(8px)}
.stat-pill .sp-val{font-size:1.5rem;font-weight:600;color:var(--p-light)}
.stat-pill .sp-key{font-size:0.73rem;color:var(--t48);margin-top:3px}

.tag-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tag{display:inline-block;border-radius:999px;border:1px solid var(--border);background:var(--pa05);padding:5px 14px;font-size:0.76rem;color:var(--t66);transition:background 0.2s,color 0.2s}
.tag:hover{background:var(--pa12);color:var(--p-light)}

.quote-block{border-left:2px solid var(--p-bright);padding:4px 0 4px 20px;margin:24px 0;font-size:1.05rem;font-style:italic;line-height:1.85;color:var(--t78)}

.field-label{display:block;font-size:0.76rem;color:var(--t56);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.1em}
.field-input{width:100%;background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:13px 16px;color:#fff;font-size:0.9rem;font-family:inherit;outline:none;transition:border-color 0.2s,box-shadow 0.2s}
.field-input:focus{border-color:rgba(168,85,247,0.55);box-shadow:0 0 0 3px rgba(168,85,247,0.10)}
.field-input::placeholder{color:var(--t45)}
select.field-input option{background:#0f0720}