:root{--bg:#0c1022;--panel:#141b38;--panel-2:#1a234a;--text:#ebf1ff;--muted:#a8b5dd;--grad1:#7b8dff;--grad2:#5eead4}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at 15% -10%,#26356f,var(--bg) 45%);color:var(--text);line-height:1.6}
.container{width:min(1140px,92%);margin:auto}a{text-decoration:none;color:inherit}
header{position:sticky;top:0;background:rgba(12,16,34,.85);backdrop-filter:blur(7px);border-bottom:1px solid rgba(255,255,255,.08);z-index:9}.nav{display:flex;justify-content:space-between;align-items:center;padding:.9rem 0}
.logo{font-weight:800}.logo span{background:linear-gradient(90deg,var(--grad1),var(--grad2));-webkit-background-clip:text;background-clip:text;color:transparent}
nav{display:flex;gap:1rem}nav a{color:var(--muted);font-weight:600}nav a.active,nav a:hover{color:#fff}.toggle{display:none;border:0;background:none;color:#fff;font-size:1.3rem}
.hero{padding:5.5rem 0;background:linear-gradient(rgba(12,16,34,.7),rgba(12,16,34,.82)),url('../images/hero.jpg') center/cover no-repeat}.hero-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:1rem;align-items:center}
h1{font-size:clamp(2rem,4.5vw,3.3rem);line-height:1.1;margin:.3rem 0}.lead{color:var(--muted);max-width:620px}
.btn{display:inline-block;background:linear-gradient(90deg,var(--grad1),var(--grad2));color:#0e1230;padding:.78rem 1.1rem;border-radius:10px;font-weight:800;margin-top:1rem;transition:transform .25s ease,box-shadow .25s ease}
.ghost{margin-left:.5rem;background:transparent;border:1px solid rgba(255,255,255,.28);color:#dfe6ff}
.mock{background:linear-gradient(160deg,var(--panel),var(--panel-2));border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:1rem;box-shadow:0 16px 40px rgba(0,0,0,.28)}
.metric{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.8rem}.metric div{background:#0f1633;border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:.6rem;text-align:center}
.section{padding:3.1rem 0}.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.card{background:var(--panel);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:1rem;transition:transform .25s ease,box-shadow .25s ease}
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.plan{background:var(--panel);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:1rem}.plan.featured{border-color:#7b8dff;transform:translateY(-4px)}
.faq details{background:var(--panel);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.8rem 1rem;margin:.6rem 0}
.form input,.form textarea,.form select{width:100%;padding:.72rem;margin:.3rem 0 .7rem;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:#11183a;color:#fff}
footer{border-top:1px solid rgba(255,255,255,.1);padding:1.6rem 0;color:var(--muted)}
.pulse-strip{padding-top:.4rem}.pulse-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1rem}.pulse-grid img{width:100%;display:block;border-radius:14px;border:1px solid rgba(255,255,255,.14)}.pulse-photo{min-height:290px;object-fit:cover;box-shadow:0 18px 36px rgba(0,0,0,.35)}.pulse-gif{min-height:290px;object-fit:cover}
.card{position:relative;overflow:hidden}.card::after{content:"";position:absolute;top:-120%;left:-35%;width:55%;height:240%;background:linear-gradient(110deg,transparent,rgba(94,234,212,.16),transparent);transform:translateX(-20%) rotate(18deg);opacity:0;transition:transform .7s ease,opacity .7s ease;pointer-events:none}.card:hover::after{opacity:1;transform:translateX(220%) rotate(18deg)}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero h1,.hero .lead,.hero .btn,.hero .ghost{animation:fadeUp .8s ease both}.hero .lead{animation-delay:.1s}.hero .btn{animation-delay:.2s}.hero .ghost{animation-delay:.28s}
@keyframes neonIn{from{opacity:0;transform:translateY(20px) scale(.98);filter:blur(6px) saturate(1.35)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0) saturate(1)}}
.reveal-neon{opacity:0;transform:translateY(20px) scale(.98);filter:blur(5px) saturate(1.2);transition:opacity .72s cubic-bezier(.17,.84,.44,1),transform .72s cubic-bezier(.17,.84,.44,1),filter .72s cubic-bezier(.17,.84,.44,1);will-change:opacity,transform,filter}.reveal-neon.is-visible{opacity:1;transform:translateY(0) scale(1);filter:blur(0) saturate(1)}.reveal-delay-1{transition-delay:.05s}.reveal-delay-2{transition-delay:.12s}.reveal-delay-3{transition-delay:.2s}
.pulse-gif,.mock{animation:floatY 6s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}.reveal-neon{opacity:1;transform:none;filter:none}}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(123,141,255,.35)}.card:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(0,0,0,.24)}
@media(max-width:820px){.toggle{display:block}nav{display:none;position:absolute;right:4%;top:60px;background:#11183a;padding:.7rem;border:1px solid rgba(255,255,255,.15);border-radius:10px;flex-direction:column}nav.open{display:flex}.hero-wrap{grid-template-columns:1fr}}

/* Premium differentiation: high-tech pulse + holographic motion */
body{position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;background:linear-gradient(transparent 96%,rgba(255,255,255,.035) 96%),linear-gradient(90deg,transparent 96%,rgba(123,141,255,.05) 96%);background-size:100% 18px,18px 100%;opacity:.22;pointer-events:none;z-index:0}
.hero{position:relative;overflow:hidden;--sx:50%;--sy:34%}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--sx) var(--sy),rgba(123,141,255,.28),transparent 40%),radial-gradient(circle at 82% 72%,rgba(94,234,212,.18),transparent 45%);pointer-events:none;mix-blend-mode:screen}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,transparent 0 40%,rgba(255,255,255,.05) 40% 46%,transparent 46%);transform:translateX(-115%);animation:neonSweep 8.8s ease-in-out infinite;pointer-events:none}
.hero > .container{position:relative;z-index:1}
.card.is-hovered,.plan.is-hovered{transform:translateY(-6px);box-shadow:0 20px 34px rgba(0,0,0,.32)}
.mock.tilted{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-2px);transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 24px 44px rgba(0,0,0,.34)}
.metric div.active{border-color:rgba(94,234,212,.7);box-shadow:0 0 0 1px rgba(94,234,212,.32),0 12px 22px rgba(16,40,90,.34)}
@keyframes neonSweep{0%{transform:translateX(-115%)}58%,100%{transform:translateX(130%)}}
@media (prefers-reduced-motion: reduce){body::before,.hero::before,.hero::after{display:none}.card.is-hovered,.plan.is-hovered{transform:none;box-shadow:none}.mock.tilted{transform:none;box-shadow:none}.metric div.active{box-shadow:none}}

/* Feature add-ons: rotating product message + pricing spotlight */
.hero .lead{transition:opacity .32s ease,transform .32s ease}
.hero .lead.is-swapping{opacity:.35;transform:translateY(-2px)}
.pricing .plan.plan-focus{border-color:rgba(94,234,212,.7);box-shadow:0 0 0 1px rgba(94,234,212,.35),0 18px 30px rgba(0,0,0,.32);transform:translateY(-6px)}
@media (prefers-reduced-motion: reduce){.hero .lead{transition:none}}