/* UnseenVision Landing Page Styles */
:root{
  --blue-strong: #4da3ff;
  --purple-strong: #a06bff;
  --muted: #8e94a8;
  --glow: 0 0 40px rgba(77,163,255,.25), 0 0 60px rgba(160,107,255,.18);
}
*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden}
body{margin:0; font-family:'Inter',system-ui,sans-serif; background:#0a0c16; color:#cfe1ff; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.container{max-width:1100px; margin:0 auto; padding:0 24px}
.bg-gradient{position:fixed; inset:0; background:radial-gradient(1200px 600px at 20% 10%, rgba(77,163,255,.15), transparent 60%), radial-gradient(900px 600px at 80% 20%, rgba(160,107,255,.12), transparent 55%); pointer-events:none}

/* Header */
.topbar{position:relative; isolation:isolate; display:flex; justify-content:space-between; align-items:center; padding:10px 16px; border:1px solid #1d2340; border-radius:14px; background:linear-gradient(180deg,rgba(15,18,34,.75),rgba(11,15,26,.75)); backdrop-filter:blur(8px); box-shadow:none}
.topbar::before{content:""; position:absolute; inset:-40px; border-radius:22px; pointer-events:none; z-index:-1; background:radial-gradient(220px 120px at 16% 50%, rgba(77,163,255,.22), transparent 70%), radial-gradient(240px 120px at 84% 45%, rgba(160,107,255,.18), transparent 70%); filter:blur(34px); opacity:.85}
.brand{font-weight:700; letter-spacing:.3px; color:#cfe1ff; text-decoration:none}
.nav-links{display:flex; gap:16px; align-items:center}
.nav-links a{color:#cfe1ff; text-decoration:none; padding:8px 12px; border-radius:10px; border:1px solid transparent; transition:transform .18s ease, background .18s ease, border-color .18s ease}
.nav-links a:hover{background:#131522; border-color:#21304f}
.menu-toggle{display:none; align-items:center; justify-content:center; width:38px; height:34px; border-radius:10px; border:1px solid #1d2340; background:#0f1222; color:#cfe1ff}
.site-header{position:sticky; top:0; z-index:1000; padding:12px 0; background:transparent; overflow:visible}

/* Hero */
.hero{display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:center; padding:20px 0 40px}
.hero h1{font-size:42px; line-height:1.05; margin:0 0 12px}
.hero .subtext{color:var(--muted); font-size:18px; margin:0 0 18px}
.cta-row{display:flex; gap:16px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:12px; padding:12px 18px; text-decoration:none; font-weight:600}
.btn-sm{padding:8px 12px; font-size:13px}
.btn-primary{background:linear-gradient(90deg,var(--blue-strong),var(--purple-strong)); color:white; box-shadow:var(--glow)}
.btn-secondary{background:#131522; color:#cfe1ff; border:1px solid rgba(77,163,255,.25)}
.btn-accent{background:linear-gradient(90deg,#7e59ff,#b07cff); color:white; box-shadow:var(--glow)}
.fine-print{color:#8e94a8; font-size:13px; margin-top:12px}
.center{text-align:center}

/* Hero visual */
.hero__visual{position:relative}
.ba{position:relative; border-radius:16px; overflow:hidden; background:#0d0f18; border:1px solid #212538; box-shadow:var(--glow); aspect-ratio:9/16}
.ba__video{display:block; width:100%; height:100%; object-fit:cover}
.ba__overlay{position:absolute; inset:0; width:50%; overflow:hidden; border-right:1px solid rgba(255,255,255,.45)}
.ba__overlay::after{content:""; position:absolute; right:-1px; top:0; bottom:0; width:2px; background:linear-gradient(180deg, rgba(77,163,255,.85), rgba(160,107,255,.85)); box-shadow:0 0 10px rgba(77,163,255,.35)}
.ba__video--before{filter:saturate(.55)}
.ba__ui{position:absolute; left:12px; right:12px; bottom:14px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; color:#cfd6ee}
.ba__ui input[type="range"]{width:100%}

/* Workflow */
.section-label{margin:26px 0 18px; text-align:center; color:#cfe1ff}
.pillars__grid{position:relative; display:grid; grid-template-columns:1fr 100px 1fr 100px 1fr; gap:22px; align-items:center}
.card{background:linear-gradient(180deg,#121424,#0b0d15); border:1px solid #1d2238; padding:24px; border-radius:16px; box-shadow:var(--glow)}
.card h3{margin:0 0 8px}
.card p{margin:0; color:var(--muted)}
.flow-arrow{height:2px; background:linear-gradient(90deg,transparent, rgba(77,163,255,.6) 30%, rgba(160,107,255,.6) 70%, transparent); position:relative}
.flow-arrow::after{content:"➜"; position:absolute; right:-8px; top:-10px; color:#a06bff}

/* Results */
.results{padding:36px 0}
.results__visuals{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.frame{position:relative; border-radius:16px; overflow:hidden; border:1px solid #20263c; box-shadow:var(--glow)}
.frame img, .frame video{width:100%; height:280px; object-fit:cover}
.frame--raw img, .frame--raw video{filter:saturate(.55) contrast(.96) brightness(.96)}
.frame--real img, .frame--real video{filter:saturate(1.08) contrast(1.08) brightness(1.06)}
.frame figcaption{position:absolute; left:14px; top:12px; padding:4px 8px; border-radius:10px; background:#12152a; border:1px solid #22314a; color:#cfe1ff; font-size:12px}
.results__copy{margin:20px 0 0; color:var(--muted); text-align:center}

/* Offers */
.offers{padding:28px 0}
.offers__grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.offer-card{border-radius:16px; padding:24px; border:1px solid #1d2340; background:linear-gradient(180deg,#111426,#0b0d18); box-shadow:var(--glow)}
.offer-card h3{margin:0 0 6px}
.offer-card p{margin:0 0 12px; color:var(--muted)}
.offer-card--blue{outline:2px solid rgba(77,163,255,.15)}
.offer-card--purple{outline:2px solid rgba(160,107,255,.15)}

/* Proof */
.proof{padding:30px 0}
.proof__grid{display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:center}
.mini-testimonial{border:1px solid #202741; border-radius:16px; padding:20px; background:#0f1220}
.chart{border:1px solid #1f2540; border-radius:16px; padding:20px; background:#0e1120}
.bar{position:relative; height:16px; border-radius:10px; background:#1a1f33; overflow:hidden; margin:10px 0}
.bar span{position:absolute; right:8px; top:-22px; font-size:12px; color:#cfe1ff}
.bar--base::after{content:""; display:block; height:100%; width:52%; background:linear-gradient(90deg,#3a466b,#4a5a85)}
.bar--uv::after{content:""; display:block; height:100%; width:90%; background:linear-gradient(90deg,var(--blue-strong),var(--purple-strong)); box-shadow:var(--glow); transform:scaleX(0); transform-origin:left; animation:grow 1.4s ease forwards .3s}
@keyframes grow{to{transform:scaleX(1)}}

/* Reviews */
.reviews{padding:24px 0 20px}
.reviews__grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.review{position:relative; border:1px solid #1d2340; border-radius:16px; padding:20px; background:linear-gradient(180deg,#0f1222,#0b0f1a); box-shadow:var(--glow); opacity:0; transform:translateY(18px) scale(.98); transition:opacity 600ms ease, transform 700ms cubic-bezier(.22,.61,.36,1), filter 600ms ease}
.review::before{content:""; position:absolute; inset:-1px; border-radius:16px; pointer-events:none; background:radial-gradient(600px 120px at 20% -10%, rgba(77,163,255,.12), transparent 70%), radial-gradient(600px 120px at 80% 110%, rgba(160,107,255,.12), transparent 70%); opacity:.8}
.review.in{opacity:1; transform:translateY(0) scale(1)}
.review h4{margin:6px 0 8px}
.review p{margin:0; color:var(--muted)}
.stars{font-size:14px; letter-spacing:2px; background:linear-gradient(90deg,var(--blue-strong),var(--purple-strong)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}

/* FAQ */
.faq{padding:18px 0 40px}
.faq details{background:#0f1222; border:1px solid #1c2340; border-radius:12px; padding:14px 16px; margin:10px 0}
.faq summary{cursor:pointer; list-style:none; font-weight:600}
.faq summary::marker{content:""}
.faq p{color:var(--muted)}

/* Footer */
.site-footer{padding:40px 0 60px}
.logo-wrap{display:flex; justify-content:center; align-items:center; margin-bottom:8px; filter:drop-shadow(0 0 16px rgba(160,107,255,.25))}

/* Mobile */
@media (max-width: 980px){
.hero{grid-template-columns:1fr;}
.hero .hero__copy{text-align:center}
.cta-row{justify-content:center}
.hero__visual{max-width:480px; margin:0 auto}
.results__visuals, .offers__grid, .proof__grid, .reviews__grid{grid-template-columns:1fr; justify-items:center}
.frame, .offer-card, .mini-testimonial, .chart{width:min(560px, 100%)}
.pillars__grid{grid-template-columns:1fr 60px 1fr 60px 1fr}
.menu-toggle{display:inline-flex}
.nav-links{display:none; position:absolute; right:24px; top:66px; background:#0f1222; border:1px solid #1d2340; border-radius:12px; padding:10px; flex-direction:column; gap:8px}
.topbar.open .nav-links{display:flex}
}
@media (max-width: 640px){
.container{padding:0 16px}
.hero h1{font-size:32px}
}
.banner{padding:6px 0 10px}
.banner__inner{border:1px solid #1d2340; border-radius:12px; padding:12px 16px; background:linear-gradient(90deg, rgba(77,163,255,.10), rgba(160,107,255,.10)); display:flex; align-items:center; justify-content:space-between; gap:14px}
.banner__inner h3{margin:0; font-size:16px}
.banner__inner p{margin:0; color:var(--muted); font-size:14px}

/* Button glow: inviting, diffused */
.btn{position:relative; isolation:isolate; transition:transform .18s ease, filter .2s ease}
.btn:hover{transform:translateY(-1px); filter:brightness(1.04)}
.btn::before{content:""; position:absolute; inset:-6px; border-radius:inherit; z-index:-1; pointer-events:none;
  background: radial-gradient(120px 60px at 50% 50%, rgba(77,163,255,.18), rgba(160,107,255,.18) 40%, transparent 70%);
  filter:blur(14px); opacity:.12; animation:btnGlow 8s ease-in-out infinite}
.btn:hover::before{opacity:.35}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(77,163,255,.35), 0 0 20px rgba(160,107,255,.25)}
@keyframes btnGlow{0%,100%{opacity:.10} 50%{opacity:.22}}

/* Visually hide (accessible) */
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
input[type="file"]{color:#cfe1ff; background:#131522; border:1px solid #1d2340; border-radius:12px; padding:8px 10px}
input[type="file"]::file-selector-button{border:1px solid rgba(77,163,255,.25); border-radius:10px; padding:10px 14px; margin-right:12px;
  background:linear-gradient(90deg,var(--blue-strong),var(--purple-strong)); color:white; font-weight:600; cursor:pointer; box-shadow:var(--glow)}
input[type="file"]::file-selector-button:hover{filter:brightness(1.06)}
input[type="file"]:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(77,163,255,.28)}

/* Companion feature (Replika) */
.companion{padding:20px 0 26px}
.companion__grid{display:grid; grid-template-columns:1fr .9fr; gap:22px; align-items:center}
.offer-card--feature{outline:2px solid rgba(160,107,255,.30); background:linear-gradient(180deg,#121424,#0b0d18); box-shadow: var(--glow), 0 8px 30px rgba(32,40,70,.35)}
.companion__art{position:relative; border:1px solid #212538; border-radius:16px; overflow:hidden; background:#0d0f18; box-shadow:var(--glow), 0 12px 40px rgba(24,32,60,.45); max-width:520px; justify-self:end; aspect-ratio:1/1; transform-style:preserve-3d; transition:transform .25s ease, box-shadow .25s ease}
.companion__art:hover{transform:perspective(800px) rotateY(-4deg) rotateX(1deg) translateY(-2px); box-shadow:var(--glow), 0 16px 50px rgba(24,32,60,.55)}
.companion__art img{display:block; width:100%; height:100%; object-fit:cover}
.companion__art::before{content:""; position:absolute; inset:-1px; border-radius:16px; pointer-events:none; background:radial-gradient(260px 140px at 20% 0%, rgba(77,163,255,.18), transparent 70%), radial-gradient(260px 140px at 80% 100%, rgba(160,107,255,.18), transparent 70%); filter:blur(26px); opacity:.7}
.companion__art::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.08) 45%, transparent 60%); mix-blend-mode:screen; background-size:200% 100%; background-position:-120% 0; animation:shimmerSwipe 6s ease-in-out infinite}
@keyframes shimmerSwipe{0%{background-position:-120% 0} 50%{background-position:120% 0} 100%{background-position:-120% 0}}
@media (max-width: 980px){.companion__grid{grid-template-columns:1fr} .companion__art{max-width:420px; justify-self:center}}
@media (prefers-reduced-motion: reduce){.companion__art::after{animation:none} .btn-cta-pulse::after{animation:none}}

/* Pulsing glow CTA for Replika */
.btn-cta-pulse{position:relative}
.btn-cta-pulse::after{content:""; position:absolute; inset:-10px; border-radius:14px; background:radial-gradient(120px 60px at 50% 50%, rgba(77,163,255,.22), rgba(160,107,255,.22) 40%, transparent 70%); filter:blur(18px); opacity:0; animation:ctaPulse 2.8s ease-in-out infinite; pointer-events:none}
@keyframes ctaPulse{0%{opacity:0; transform:scale(.98)} 50%{opacity:.35; transform:scale(1.02)} 100%{opacity:0; transform:scale(.98)}}