/* Omniia landing — premium dark editorial. No frameworks. */
:root{
  --bg:#07080f; --bg-2:#0b0d1a; --panel:#10132296;
  --txt:#eef0fa; --dim:#9aa0bd; --line:#ffffff14;
  --violet:#8b7cf6; --violet-2:#6a5ae0; --amber:#f0a35e;
  --grad:linear-gradient(100deg,#8b7cf6,#c98ef4 45%,#f0a35e);
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.narrow{max-width:820px}
.center{text-align:center}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
h1{font-size:clamp(44px,7vw,84px);line-height:1.04}
h1 em,h2 em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:clamp(32px,4.4vw,52px);line-height:1.1;margin-bottom:18px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
.sub{color:var(--dim);max-width:560px;margin:0 auto 8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;
  padding:12px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:.2s;white-space:nowrap;
  background:transparent;color:var(--txt);font-family:inherit;line-height:1;-webkit-appearance:none;appearance:none}
.btn.lg{padding:16px 30px;font-size:16px}
.btn.w{width:100%}
.btn.solid{background:var(--grad);color:#0b0716;border:none;box-shadow:0 8px 30px #8b7cf640}
.btn.solid:hover{transform:translateY(-2px);box-shadow:0 12px 38px #8b7cf666}
.btn.ghost{border-color:#ffffff2e;color:var(--txt)}
.btn.ghost:hover{border-color:var(--violet);background:#8b7cf612}
.btn.glass{background:#ffffff10;border-color:#ffffff22;color:var(--txt);backdrop-filter:blur(10px)}
.btn.glass:hover{background:#ffffff1c}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:.25s;padding:18px 0}
.nav.scrolled{background:#07080fd9;backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:10px 0}
.nav-in{display:flex;align-items:center;gap:34px}
.brand{display:flex;align-items:center;gap:10px}
.brand-name{font-family:var(--serif);font-size:24px;letter-spacing:.01em}
.brand-mark{width:26px;height:26px;border-radius:50%;background:
  radial-gradient(circle at 50% 50%,var(--amber) 0 26%,transparent 27%),
  radial-gradient(circle at 50% 50%,transparent 0 44%,var(--violet) 45% 62%,transparent 63%)}
.brand-mark.sm{width:22px;height:22px}
.nav-links{display:flex;gap:26px;font-size:14.5px;color:var(--dim)}
.nav-links a:hover{color:var(--txt)}
.nav-cta{margin-left:auto;display:flex;gap:10px}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url("../assets/img/hero.webp") center/cover no-repeat;transform:scale(1.04)}
.hero-veil{position:absolute;inset:0;background:
  linear-gradient(180deg,#07080f66 0%,#07080f2e 40%,#07080f 96%),
  radial-gradient(90% 60% at 70% 40%,transparent,#07080f8c)}
.hero-in{position:relative;padding-top:120px;padding-bottom:80px;max-width:820px;margin:0}
.lede{font-size:clamp(17px,2vw,20px);color:#c9cde4;max-width:600px;margin:22px 0 30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.trustbar{display:flex;align-items:center;gap:26px;margin-top:58px;flex-wrap:wrap}
.trustbar>div:not(.tsep){display:flex;flex-direction:column}
.trustbar b{font-size:26px;font-family:var(--serif)}
.trustbar span{font-size:12.5px;color:var(--dim)}
.tsep{width:1px;height:34px;background:#ffffff22}

/* strip */
.strip{border-block:1px solid var(--line);padding:26px 0;background:var(--bg-2)}
.strip-line{text-align:center;color:var(--dim);font-size:15px}
.strip-line b{color:var(--txt)}

/* blocks */
.block{padding:110px 0}
.block.alt{background:var(--bg-2)}
.grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.grid-2.rev{grid-template-columns:.95fr 1.05fr}
.col-copy p{color:var(--dim);margin-bottom:18px}
.col-copy p b,.col-copy p i{color:var(--txt)}
.ticks{list-style:none;margin:6px 0 28px;display:grid;gap:12px}
.ticks li{padding-left:30px;position:relative;color:#c9cde4}
.ticks li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle,var(--amber) 0 35%,transparent 36%),radial-gradient(circle,transparent 0 55%,var(--violet) 56% 80%,transparent 81%)}
.col-art img{border-radius:calc(var(--r) + 6px);box-shadow:0 30px 80px #00000080,0 0 0 1px var(--line)}
.col-art figcaption{margin-top:14px;font-size:13.5px;color:var(--dim);text-align:center;font-style:italic}
.col-art.tall img{aspect-ratio:4/4.6;object-fit:cover}

/* channel cards */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:34px 28px;transition:.25s}
.card:hover{transform:translateY(-4px);border-color:#8b7cf655}
.card-ico{margin-bottom:16px}
.card-ico svg{width:34px;height:34px}
.card h3{font-size:21px;margin-bottom:10px}
.card p{color:var(--dim);font-size:15px}
.soon-inline{position:relative;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* telephony banner */
.tel-banner{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);
  border-radius:calc(var(--r) + 6px);overflow:hidden;background:var(--panel)}
.tel-art img{height:100%;object-fit:cover}
.tel-copy{padding:46px 44px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px}
.tel-copy h3{font-family:var(--serif);font-size:32px;font-weight:400}
.tel-copy p{color:var(--dim)}
.pill{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#0b0716;
  background:var(--grad);padding:5px 12px;border-radius:999px}

/* steps */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;counter-reset:s}
.steps li{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:34px 28px}
.steps span{font-family:var(--serif);font-size:15px;color:var(--amber);letter-spacing:.15em}
.steps h3{font-size:20px;margin:10px 0 8px}
.steps p{color:var(--dim);font-size:15px}

/* industries */
.ind-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 30px;margin-top:8px}
.ind-grid h4{font-size:16px;margin-bottom:4px}
.ind-grid p{color:var(--dim);font-size:14px;margin:0}

/* quote */
.quote{padding:120px 0;background:
  radial-gradient(60% 90% at 50% 0%,#8b7cf61c,transparent),var(--bg)}
.quote blockquote{max-width:760px;margin:0 auto;text-align:center}
.quote p{font-family:var(--serif);font-size:clamp(28px,4vw,44px);line-height:1.25}
.quote em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.quote cite{display:block;margin-top:22px;color:var(--dim);font-style:normal;font-size:14px}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);padding:38px 30px;position:relative;display:flex;flex-direction:column}
.plan.hot{border-color:#8b7cf680;box-shadow:0 20px 70px #8b7cf62b;background:linear-gradient(180deg,#161a30d9,#10132296)}
.flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;background:var(--grad);color:#0b0716;padding:5px 14px;border-radius:999px}
.plan h3{font-size:19px;margin-bottom:10px}
.price{margin-bottom:22px}
.price b{font-family:var(--serif);font-size:40px;font-weight:400}
.price span{color:var(--dim);font-size:14px}
.plan ul{list-style:none;display:grid;gap:11px;margin-bottom:30px;color:#c9cde4;font-size:14.5px;flex:1}
.plan li{padding-left:24px;position:relative}
.plan li::before{content:"—";position:absolute;left:0;color:var(--amber)}
.fine{color:var(--dim);font-size:13px;margin-top:26px}

/* faq */
#faq details{border-bottom:1px solid var(--line);padding:22px 4px}
#faq details:first-of-type{margin-top:40px}
#faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;position:relative;padding-right:34px}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{content:"+";position:absolute;right:4px;top:-2px;font-size:24px;color:var(--amber);transition:.2s}
#faq details[open] summary::after{transform:rotate(45deg)}
#faq details p{color:var(--dim);margin-top:12px;max-width:680px}

/* final cta */
.cta-final{padding:130px 0;text-align:center;background:
  radial-gradient(70% 100% at 50% 100%,#8b7cf626,transparent),var(--bg-2)}
.cta-final h2{margin-bottom:30px}
.cta-final .fine{margin-top:16px}

/* footer */
.foot{border-top:1px solid var(--line);background:var(--bg)}
.foot-in{display:flex;justify-content:space-between;gap:40px;padding:56px 28px 40px;flex-wrap:wrap}
.foot-brand{display:flex;gap:12px;align-items:flex-start}
.foot-brand b{font-family:var(--serif);font-size:20px}
.foot-brand p{color:var(--dim);font-size:13.5px}
.foot-cols{display:flex;gap:70px;flex-wrap:wrap}
.foot-cols h5{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.foot-cols a{display:block;color:#c9cde4;font-size:14.5px;margin-bottom:9px}
.foot-cols a:hover{color:var(--txt)}
.foot-base{border-top:1px solid var(--line);padding:20px 28px;color:var(--dim);font-size:13px}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.on{opacity:1;transform:none}

/* responsive */
@media (max-width:960px){
  .grid-2,.grid-2.rev{grid-template-columns:1fr;gap:44px}
  .cards-3,.steps,.plans{grid-template-columns:1fr}
  .tel-banner{grid-template-columns:1fr}
  .tel-art img{aspect-ratio:16/8}
  .nav-links{display:none}
  .col-art.tall img{aspect-ratio:16/10}
}
@media (max-width:560px){
  .trustbar{gap:18px}
  .tsep{display:none}
  .hero-in{padding-top:140px}
}