/* ==========================================================================
   AirTime Phone — styles.css
   Rules for this file (do not break them):
   1. NO base selector ever sets opacity:0 on content. Transparency exists only
      inside @keyframes, so if animations are disabled the page is fully visible.
   2. No JS is required to see, read, or navigate anything.
   3. All motion is pure CSS and switches off under prefers-reduced-motion.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  --bg:#282f3f;
  --bg-soft:#282f3f;
  --panel:#071228;
  --panel-2:#081228;
  --line:rgba(1,129,208,.15);
  --line-strong:rgba(1,129,208,.28);

  --txt:#fefefe;
  --muted:#8fa8cd;
  --dim:#71829f;

  --blue:#0181d0;
  --blue-deep:#005cb0;
  --teal:#059be1;
  --aqua:#059be1;
  --violet:#0453bd;

  --grad:linear-gradient(115deg,#001f7f 0%,#0453bd 30%,#0181d0 68%,#059be1 100%);
  --grad-soft:linear-gradient(115deg,rgba(4,83,189,.18),rgba(1,129,208,.18));

  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.07);

  --r-sm:12px;
  --r:18px;
  --r-lg:26px;
  --r-xl:34px;

  --shadow:0 26px 70px -26px rgba(0,0,0,.85);
  --shadow-glow:0 0 0 1px rgba(0,92,176,.22), 0 22px 60px -24px rgba(1,129,208,.35);

  --max:1180px;
  --gut:24px;
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.12;letter-spacing:-.025em;font-weight:800}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}

/* page-wide ambient light — decorative only */
body::before{
  content:"";
  position:fixed;
  inset:-30% -10% auto -10%;
  height:120vh;
  background:
    radial-gradient(46% 38% at 18% 12%, rgba(5,155,225,.16), transparent 65%),
    radial-gradient(44% 40% at 82% 8%, rgba(1,129,208,.20), transparent 66%),
    radial-gradient(40% 34% at 50% 52%, rgba(4,83,189,.12), transparent 70%);
  pointer-events:none;
  z-index:0;
  animation:aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-3%,2%,0) scale(1.08)}
  100%{transform:translate3d(3%,-2%,0) scale(1.04)}
}

/* ---------------------------------------------------------------- layout */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut);position:relative;z-index:1}
section{position:relative;z-index:1}
.sec{padding:96px 0}
.sec-tight{padding:64px 0}
.center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}
.narrow{max-width:720px}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);
  background:rgba(1,129,208,.08);
  border:1px solid rgba(1,129,208,.24);
  padding:7px 14px;border-radius:999px;margin-bottom:20px;
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 0 rgba(1,129,208,.6);animation:blip 2.4s ease-out infinite;
}
@keyframes blip{
  0%{box-shadow:0 0 0 0 rgba(1,129,208,.55)}
  70%{box-shadow:0 0 0 9px rgba(1,129,208,0)}
  100%{box-shadow:0 0 0 0 rgba(1,129,208,0)}
}

h1{font-size:clamp(2.35rem,6vw,4.1rem);font-weight:800}
h2{font-size:clamp(1.9rem,4vw,2.9rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
.lede{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--muted);max-width:62ch}
.sec-head{margin-bottom:52px}
.sec-head .lede{margin-left:auto;margin-right:auto}

.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  /* fallback keeps text readable if background-clip is unsupported */
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad-text{color:var(--teal);-webkit-text-fill-color:currentColor}
}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 24px;border-radius:999px;border:1px solid transparent;
  font-weight:650;font-size:15px;letter-spacing:-.01em;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{
  background:var(--grad);color:#fff;border:none;
  box-shadow:0 10px 30px -10px rgba(5,155,225,.7),inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 24px 50px -14px rgba(5,155,225,.9),inset 0 1px 0 rgba(255,255,255,.3),0 0 20px rgba(2,140,223,.4)}
.btn-ghost{background:var(--glass);color:var(--txt);border-color:var(--line-strong);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:var(--glass-2);border-color:rgba(1,129,208,.5);transform:translateY(-2px)}
.btn-lg{padding:16px 30px;font-size:16px}
.btn-sm{padding:9px 18px;font-size:14px}
.btn-block{display:flex;width:100%}
.btn .arrow{transition:transform .2s ease}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------------------------------------------------------------- nav */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(5,7,14,.72);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--max);margin:0 auto;padding:12px var(--gut);
  display:flex;align-items:center;gap:20px;
}
.brand{display:inline-flex;align-items:center;gap:11px;flex:none}
.brand-mark{
  height:40px;width:auto;flex:none;
  display:block;
  transition:transform .3s ease,filter .3s ease;
  filter:drop-shadow(0 2px 8px rgba(2,140,223,.3));
}
.brand:hover .brand-mark{transform:scale(1.1) rotate(-5deg);filter:drop-shadow(0 4px 12px rgba(2,140,223,.5))}
.brand-mark svg{width:auto;height:100%}
.brand-name{display:none}

.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{
  padding:9px 14px;border-radius:10px;font-size:14.5px;font-weight:550;color:var(--muted);
  transition:color .16s ease,background .16s ease;
}
.nav-links a:hover{color:var(--txt);background:var(--glass)}
.nav-links a[aria-current="page"]{color:var(--txt);background:var(--glass-2)}
.nav-cta{margin-left:14px;flex:none}

/* mobile: links stay on the page as a scrollable strip — no hamburger, no JS */
@media (max-width:900px){
  .nav-inner{flex-wrap:wrap;gap:10px;padding:10px 16px}
  .nav-cta{margin-left:auto}
  .nav-links{
    order:3;width:100%;margin-left:0;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    gap:2px;padding-bottom:2px;
    scrollbar-width:none;
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{padding:7px 12px;font-size:14px;white-space:nowrap}
}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;padding:74px 0 84px;overflow:hidden}
.hero-brand{margin-bottom:32px;text-align:left;perspective:800px}
.hero-logo{
  max-width:480px;width:100%;height:auto;display:block;
  filter:drop-shadow(0 6px 28px rgba(2,140,223,.35));
  animation:logoFloat 6s ease-in-out infinite;
  transition:transform .4s ease;
}
.hero-logo:hover{transform:scale(1.03) rotateY(-3deg)}
@keyframes logoFloat{
  0%,100%{transform:translateY(0) rotateX(0)}
  50%{transform:translateY(-8px) rotateX(2deg)}
}
.hero-features{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:38px}
.feature-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:100px;
  background:var(--glass);border:1px solid var(--line);
  font-size:13px;font-weight:600;color:var(--muted);
  transition:color .16s ease,border-color .16s ease,background .16s ease,transform .16s ease;
  animation:badgeIn .6s ease-out backwards;
}
.feature-badge:nth-child(1){animation-delay:.1s}
.feature-badge:nth-child(2){animation-delay:.2s}
.feature-badge:nth-child(3){animation-delay:.3s}
@keyframes badgeIn{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}
.feature-badge:hover{color:var(--txt);border-color:var(--blue);background:var(--glass-2);transform:translateY(-2px) scale(1.05)}
.feature-badge svg{width:16px;height:16px;color:var(--blue);flex:none;animation:iconPulse 3s ease-in-out infinite}
@keyframes iconPulse{0%,100%{opacity:1}50%{opacity:.6}}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(146,178,226,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(146,178,226,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 60% at 50% 30%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(80% 60% at 50% 30%,#000 20%,transparent 78%);
  animation:gridpan 40s linear infinite;
}
@keyframes gridpan{to{background-position:64px 64px,64px 64px}}

.hero-inner{
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  max-width:var(--max);margin:0 auto;padding:0 var(--gut);position:relative;z-index:1;
}
.hero h1{margin-bottom:20px}
.hero .lede{font-size:clamp(1.05rem,1.7vw,1.22rem);margin-bottom:32px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:38px}

.hero-stats{display:flex;flex-wrap:wrap;gap:14px;perspective:600px}
.stat{
  flex:1 1 150px;padding:16px 18px;border-radius:var(--r);
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
  transform-style:preserve-3d;
}
.stat:hover{transform:translateY(-4px) rotateX(4deg);border-color:rgba(1,129,208,.4);box-shadow:0 20px 40px -16px rgba(2,140,223,.4)}
.stat b{display:block;font-size:1.55rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;transition:transform .3s ease}
.stat:hover b{transform:translateZ(15px)}
.stat span{font-size:12.5px;color:var(--dim);font-weight:550;transition:transform .3s ease}
.stat:hover span{transform:translateZ(8px)}

@media (max-width:960px){
  .hero{padding:52px 0 64px}
  .hero-inner{grid-template-columns:1fr;gap:48px}
  .hero-logo{max-width:340px}
}

/* ---------------------------------------------------------------- the phone scene (hero) */
.scene{
  position:relative;
  min-height:480px;
  display:grid;place-items:center;
}
.scene-orb{
  position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(1,129,208,.30),rgba(1,129,208,.14) 45%,transparent 70%);
  filter:blur(12px);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{50%{transform:scale(1.12)}}

/* expanding call rings */
.rings{position:absolute;width:300px;height:300px;pointer-events:none}
.rings span{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(1,129,208,.55);
  animation:ringout 3.2s cubic-bezier(.2,.6,.3,1) infinite;
}
.rings span:nth-child(2){animation-delay:1.05s}
.rings span:nth-child(3){animation-delay:2.1s}
@keyframes ringout{
  0%{transform:scale(.42);opacity:0}
  12%{opacity:.85}
  100%{transform:scale(1.25);opacity:0}
}

/* the handset device */
.device{
  position:relative;z-index:3;
  width:250px;height:456px;border-radius:38px;
  background:linear-gradient(165deg,#131c2e,#0a1120 60%,#070c16);
  border:1px solid rgba(146,178,226,.24);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
  padding:14px;
  animation:ringshake 3.2s ease-in-out infinite;
  transform-origin:50% 90%;
}
@keyframes ringshake{
  0%,58%,100%{transform:rotate(0) translateY(0)}
  62%{transform:rotate(-1.6deg) translateY(-3px)}
  66%{transform:rotate(1.6deg) translateY(-3px)}
  70%{transform:rotate(-1.2deg) translateY(-2px)}
  74%{transform:rotate(1.2deg) translateY(-2px)}
  78%{transform:rotate(0) translateY(0)}
}
.device-notch{
  width:82px;height:6px;border-radius:99px;background:rgba(146,178,226,.3);
  margin:2px auto 14px;
}
.device-screen{
  height:calc(100% - 22px);border-radius:26px;padding:18px 16px;
  background:
    radial-gradient(120% 70% at 50% 0%,rgba(1,129,208,.16),transparent 60%),
    linear-gradient(180deg,#0a1424,#070d18);
  border:1px solid rgba(146,178,226,.14);
  display:flex;flex-direction:column;
}
.call-tag{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);
  font-weight:700;text-align:center;margin-bottom:16px;
  animation:softpulse 1.6s ease-in-out infinite;
}
@keyframes softpulse{50%{opacity:.45}}
.call-avatar{
  width:76px;height:76px;border-radius:50%;margin:0 auto 14px;
  background:var(--grad);display:grid;place-items:center;
  overflow:hidden;
  box-shadow:0 0 0 0 rgba(5,155,225,.5);
  animation:avatarpulse 2.2s ease-out infinite;
}
.call-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
@keyframes avatarpulse{
  0%{box-shadow:0 0 0 0 rgba(5,155,225,.55)}
  70%{box-shadow:0 0 0 18px rgba(5,155,225,0)}
  100%{box-shadow:0 0 0 0 rgba(5,155,225,0)}
}
.call-name{text-align:center;font-weight:700;font-size:16px}
.call-sub{text-align:center;font-size:12.5px;color:var(--dim);margin-bottom:16px}

.eq{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:34px;margin-bottom:auto}
.eq i{
  width:4px;border-radius:3px;background:linear-gradient(180deg,var(--teal),var(--blue));
  height:30%;animation:eqbar 1.1s ease-in-out infinite;
}
.eq i:nth-child(1){animation-delay:-.9s}
.eq i:nth-child(2){animation-delay:-.75s}
.eq i:nth-child(3){animation-delay:-.6s}
.eq i:nth-child(4){animation-delay:-.45s}
.eq i:nth-child(5){animation-delay:-.3s}
.eq i:nth-child(6){animation-delay:-.15s}
.eq i:nth-child(7){animation-delay:-.05s}
@keyframes eqbar{0%,100%{height:22%}50%{height:100%}}

.call-actions{display:flex;justify-content:center;gap:26px;padding-top:14px}
.call-btn{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:none;
}
.call-btn svg{width:22px;height:22px}
.call-accept{background:linear-gradient(140deg,#059be1,#22c55e);color:#04121c;animation:jiggle 1.4s ease-in-out infinite}
.call-decline{background:linear-gradient(140deg,#f43f5e,#e11d48);color:#fff;transform:rotate(134deg)}
@keyframes jiggle{50%{transform:scale(1.09)}}

/* floating chat bubbles around the device */
.bubble{
  position:absolute;z-index:4;
  padding:10px 14px;border-radius:16px;
  background:rgba(12,20,36,.86);
  border:1px solid var(--line-strong);
  backdrop-filter:blur(12px);
  font-size:13px;font-weight:550;line-height:1.4;
  max-width:196px;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
  animation:floaty 6s ease-in-out infinite;
}
.bubble-teal{border-color:rgba(5,155,225,.45);background:rgba(13,42,48,.8)}
.b1{top:6%;left:-4%;animation-delay:-.6s}
.b2{top:30%;right:-6%;animation-delay:-2.4s}
.b3{bottom:16%;left:-8%;animation-delay:-4.1s}
.b4{bottom:2%;right:-2%;animation-delay:-3.2s}
@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-13px)}
}
.bubble small{display:block;color:var(--dim);font-size:11px;font-weight:600;margin-bottom:2px}

.typing{display:inline-flex;gap:4px;align-items:center;height:12px}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--teal);animation:typedot 1.2s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes typedot{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(-5px);opacity:1}}

/* once the hero stacks, keep the scene (and its bubbles) inside the gutters */
@media (max-width:960px){
  .scene{max-width:520px;margin:0 auto;width:100%}
  .b1,.b3{left:-2%}
  .b2,.b4{right:-2%}
}
@media (max-width:520px){
  .scene{min-height:430px}
  .device{width:216px;height:404px}
  .b1{left:-2%;max-width:150px}
  .b2{right:-2%;max-width:150px}
  .b3{left:-2%;max-width:150px}
  .b4{right:0;max-width:150px}
}

/* ---------------------------------------------------------------- feature strip */
.feature-strip{
  background:var(--blue);
  color:#fff;
  text-align:center;
  padding:14px var(--gut);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.02em;
}
.feature-strip span{display:inline-block}
.feature-strip .dot{margin:0 14px;opacity:.6;font-weight:400}

/* ---------------------------------------------------------------- marquee */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02);
  padding:16px 0;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;width:max-content;gap:14px;animation:slide 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.chip{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:8px 16px;border-radius:999px;
  border:1px solid var(--line);background:var(--glass);
  font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap;
}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal)}

/* ---------------------------------------------------------------- cards */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.065),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px;backdrop-filter:blur(12px);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
  transform-style:preserve-3d;
}
.card:hover{transform:translateY(-6px) rotateX(3deg);border-color:rgba(1,129,208,.38);box-shadow:var(--shadow-glow),0 30px 60px -20px rgba(0,0,0,.6)}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 0%,rgba(1,129,208,.12),transparent 70%);
  opacity:0;transition:opacity .3s ease;
}
.card:hover::after{opacity:1}
.card h3{margin-bottom:8px;transition:transform .3s ease}
.card:hover h3{transform:translateZ(12px)}
.card p{color:var(--muted);font-size:15px;margin-bottom:0;transition:transform .3s ease}
.card:hover p{transform:translateZ(6px)}
.card-icon{
  width:50px;height:50px;border-radius:15px;display:grid;place-items:center;
  background:var(--grad-soft);border:1px solid rgba(5,155,225,.28);color:var(--teal);
  margin-bottom:18px;transition:transform .3s ease;
  animation:iconBreathe 4s ease-in-out infinite;
}
@keyframes iconBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.card:hover .card-icon{transform:translateZ(20px) scale(1.1)}
.card-icon svg{width:24px;height:24px}
.card-list{margin-top:16px;display:grid;gap:9px}
/* block + absolute bullet, NOT flex: a flex li turns each inline child
   (e.g. a <b>) into its own flex item and breaks the sentence into columns */
.card-list li{
  position:relative;padding-left:26px;font-size:14.5px;color:var(--muted);
}
.card-list li::before{
  content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:5px;
  background:var(--grad-soft);border:1px solid rgba(5,155,225,.4);
  background-image:linear-gradient(rgba(5,155,225,.18),rgba(5,155,225,.18)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230095e2' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  background-size:cover;
}
.card-link{
  display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  font-weight:650;font-size:14.5px;color:var(--teal);
}
.card-link svg{width:16px;height:16px;transition:transform .2s ease}
.card:hover .card-link svg{transform:translateX(4px)}

.card-feature{padding:24px}
.card-feature .card-icon{width:44px;height:44px;border-radius:13px;margin-bottom:14px}
.card-feature h3{font-size:1.05rem}
.card-feature p{font-size:14.5px}

/* ---------------------------------------------------------------- live panels (video / text / cloud) */
.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:960px){.panels{grid-template-columns:1fr}}
.panel{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  padding:22px;backdrop-filter:blur(12px);
}
.panel h3{font-size:1.08rem;margin-bottom:6px}
.panel p{color:var(--muted);font-size:14.5px;margin-bottom:18px}
.panel-stage{
  border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(180deg,#0a1322,#070d17);
  padding:14px;min-height:196px;position:relative;overflow:hidden;
}

/* video call tiles */
.vc-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:11.5px;color:var(--dim);font-weight:600}
.live-dot{width:7px;height:7px;border-radius:50%;background:#f43f5e;animation:softpulse 1.4s ease-in-out infinite;flex:none}
.vc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vc-tile{
  aspect-ratio:4/3;border-radius:12px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#132033,#0a1220);
  border:1px solid rgba(146,178,226,.16);
  display:grid;place-items:center;
}
.vc-tile.speaking{border-color:rgba(5,155,225,.75);animation:speak 2.6s ease-in-out infinite}
.vc-tile:nth-child(3).speaking{animation-delay:1.3s}
@keyframes speak{
  0%,100%{box-shadow:0 0 0 0 rgba(5,155,225,0)}
  50%{box-shadow:0 0 0 3px rgba(5,155,225,.28)}
}
.vc-face{width:34px;height:34px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#04121c;font-weight:800;font-size:13px}
.vc-tile:nth-child(2) .vc-face{background:linear-gradient(140deg,#0453bd,#0181d0)}
.vc-tile:nth-child(3) .vc-face{background:linear-gradient(140deg,#059be1,#0181d0)}
.vc-tile:nth-child(4) .vc-face{background:linear-gradient(140deg,#0181d0,#0453bd)}
.vc-name{position:absolute;left:7px;bottom:6px;font-size:10px;color:var(--muted);font-weight:600}
.vc-scan{
  position:absolute;left:0;right:0;height:44%;
  background:linear-gradient(180deg,rgba(1,129,208,.14),transparent);
  animation:scan 5s ease-in-out infinite;
}
@keyframes scan{0%,100%{transform:translateY(-110%)}50%{transform:translateY(240%)}}

/* text thread */
.thread{display:flex;flex-direction:column;gap:9px}
.msg{
  max-width:82%;padding:9px 13px;border-radius:15px;font-size:13px;line-height:1.45;
  border:1px solid var(--line);background:rgba(255,255,255,.05);
  animation:msgin 8s ease-in-out infinite;
}
.msg-out{align-self:flex-end;background:rgba(5,155,225,.14);border-color:rgba(5,155,225,.36)}
.msg:nth-child(2){animation-delay:.7s}
.msg:nth-child(3){animation-delay:1.4s}
.msg:nth-child(4){animation-delay:2.1s}
@keyframes msgin{
  0%{transform:translateY(6px) scale(.98)}
  8%,100%{transform:translateY(0) scale(1)}
}
.msg small{display:block;font-size:10.5px;color:var(--dim);font-weight:650;margin-bottom:2px}

/* cloud flow */
.cloud-stage{display:grid;place-items:center;gap:14px}
.cloud{
  width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,rgba(1,129,208,.24),rgba(1,129,208,.08) 60%,transparent);
  border:1px solid rgba(1,129,208,.35);color:var(--teal);
  animation:breathe 5s ease-in-out infinite;
}
.cloud svg{width:44px;height:44px}
.flow{display:flex;gap:22px;width:100%;justify-content:center}
.wire{
  position:relative;width:2px;height:56px;border-radius:2px;
  background:linear-gradient(180deg,rgba(1,129,208,.42),rgba(1,129,208,.06));
  overflow:hidden;
}
.wire::after{
  content:"";position:absolute;left:-2px;width:6px;height:6px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 10px rgba(1,129,208,.9);
  animation:travel 2.4s linear infinite;
}
.wire:nth-child(2)::after{animation-delay:.4s}
.wire:nth-child(3)::after{animation-delay:.8s}
.wire:nth-child(4)::after{animation-delay:1.2s}
.wire:nth-child(5)::after{animation-delay:1.6s}
@keyframes travel{0%{top:-8px}100%{top:60px}}
.endpoints{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.endpoint{
  padding:6px 11px;border-radius:9px;font-size:11px;font-weight:650;color:var(--muted);
  border:1px solid var(--line);background:rgba(255,255,255,.04);
}

/* ---------------------------------------------------------------- split feature rows */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.reverse .split-media{order:-1}
@media (max-width:960px){
  .split{grid-template-columns:1fr;gap:36px}
  .split.reverse .split-media{order:0}
}
.split ul{display:grid;gap:12px;margin-top:22px}
.split ul li{position:relative;padding-left:32px;color:var(--muted);font-size:15px}
.split ul li b{color:var(--txt);font-weight:650}
.split ul li::before{
  content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:7px;
  background:var(--grad-soft);border:1px solid rgba(5,155,225,.4);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230095e2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  background-size:74%;background-position:center;background-repeat:no-repeat;
}

/* routing diagram (services) */
.router{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  backdrop-filter:blur(12px);
}
.router-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.node{
  padding:12px 16px;border-radius:14px;font-size:13.5px;font-weight:650;
  border:1px solid var(--line-strong);background:rgba(255,255,255,.05);
  display:inline-flex;align-items:center;gap:9px;
}
.node svg{width:17px;height:17px;color:var(--teal)}
.node-live{border-color:rgba(5,155,225,.5);box-shadow:0 0 0 0 rgba(5,155,225,.4);animation:avatarpulse 2.6s ease-out infinite}
.arrow-down{
  width:2px;height:34px;margin:12px auto;border-radius:2px;position:relative;
  background:linear-gradient(180deg,rgba(1,129,208,.5),rgba(1,129,208,.06));
  overflow:hidden;
}
.arrow-down::after{
  content:"";position:absolute;left:-2px;width:6px;height:6px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 8px rgba(1,129,208,.9);
  animation:travel2 2s linear infinite;
}
@keyframes travel2{0%{top:-8px}100%{top:38px}}
.branches{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:700px){.branches{grid-template-columns:repeat(2,1fr)}}
.branch{
  border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center;
  background:rgba(255,255,255,.035);
}
.branch b{display:block;font-size:14px;margin-bottom:3px}
.branch span{font-size:12px;color:var(--dim)}
.branch:nth-child(1){animation:branchglow 4s ease-in-out infinite}
.branch:nth-child(2){animation:branchglow 4s ease-in-out infinite 1s}
.branch:nth-child(3){animation:branchglow 4s ease-in-out infinite 2s}
.branch:nth-child(4){animation:branchglow 4s ease-in-out infinite 3s}
@keyframes branchglow{
  0%,100%{border-color:var(--line);background:rgba(255,255,255,.035)}
  22%{border-color:rgba(5,155,225,.55);background:rgba(5,155,225,.08)}
}

/* dial pad */
.dialpad{display:grid;grid-template-columns:repeat(3,58px);gap:10px;justify-content:center}
.key{
  height:52px;border-radius:14px;display:grid;place-items:center;font-weight:700;font-size:17px;
  border:1px solid var(--line);background:rgba(255,255,255,.045);color:var(--muted);
  animation:keylight 5.4s ease-in-out infinite;
}
.key:nth-child(1){animation-delay:0s}
.key:nth-child(2){animation-delay:.45s}
.key:nth-child(3){animation-delay:.9s}
.key:nth-child(4){animation-delay:1.35s}
.key:nth-child(5){animation-delay:1.8s}
.key:nth-child(6){animation-delay:2.25s}
.key:nth-child(7){animation-delay:2.7s}
.key:nth-child(8){animation-delay:3.15s}
.key:nth-child(9){animation-delay:3.6s}
.key:nth-child(10){animation-delay:4.05s}
.key:nth-child(11){animation-delay:4.5s}
.key:nth-child(12){animation-delay:4.95s}
@keyframes keylight{
  0%,88%,100%{border-color:var(--line);color:var(--muted);background:rgba(255,255,255,.045);transform:scale(1)}
  92%{border-color:rgba(5,155,225,.7);color:var(--txt);background:rgba(5,155,225,.14);transform:scale(1.06)}
}

/* ---------------------------------------------------------------- pricing */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
@media (max-width:960px){.pricing{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
.plan{
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px;
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.018));
  backdrop-filter:blur(12px);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.plan:hover{transform:translateY(-5px);border-color:rgba(1,129,208,.4);box-shadow:var(--shadow-glow)}
.plan-pop{
  border-color:rgba(5,155,225,.5);
  background:linear-gradient(165deg,rgba(5,155,225,.12),rgba(1,129,208,.05));
  box-shadow:var(--shadow-glow);
}
.plan-tag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--grad);color:#04121c;font-size:11.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:999px;
  white-space:nowrap;
}
.plan h3{font-size:1.15rem;margin-bottom:4px}
.plan-desc{color:var(--dim);font-size:13.5px;margin-bottom:18px}
.price{display:flex;align-items:flex-end;gap:6px;margin-bottom:4px}
.price b{font-size:3.1rem;font-weight:800;letter-spacing:-.045em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.price b{color:var(--teal);-webkit-text-fill-color:currentColor}}
.price span{color:var(--dim);font-size:14px;font-weight:600;padding-bottom:8px}
.price-note{font-size:12.5px;color:var(--dim);margin-bottom:22px}
.plan ul{display:grid;gap:10px;margin-bottom:26px}
.plan ul li{position:relative;padding-left:27px;font-size:14.5px;color:var(--muted)}
.plan ul li::before{
  content:"";position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:6px;
  background:rgba(5,155,225,.14);border:1px solid rgba(5,155,225,.42);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230095e2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  background-size:72%;background-position:center;background-repeat:no-repeat;
}
.plan .btn{margin-top:auto}
.price-foot{
  margin-top:26px;text-align:center;color:var(--dim);font-size:14px;
}
.price-foot b{color:var(--txt)}

/* add-ons strip */
.addons{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
@media (max-width:860px){.addons{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.addons{grid-template-columns:1fr}}
.addon{
  border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;
  background:rgba(255,255,255,.035);
}
.addon b{display:block;font-size:14.5px}
.addon span{font-size:13px;color:var(--dim)}
.addon em{font-style:normal;display:block;margin-top:6px;font-weight:750;color:var(--teal);font-size:15px}

/* ---------------------------------------------------------------- comparison */
.compare{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  backdrop-filter:blur(12px);
}
.compare-row{
  display:grid;grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--line);
}
.compare-row:last-child{border-bottom:none}
.compare-head{background:rgba(255,255,255,.04);font-weight:750}
.compare-cell{padding:16px 22px;font-size:15px;display:flex;align-items:center;gap:11px}
.compare-cell:first-child{color:var(--dim);border-right:1px solid var(--line)}
.compare-cell.us{color:var(--txt);font-weight:600}
.compare-cell.us::before{
  content:"";flex:none;width:18px;height:18px;border-radius:6px;
  background:rgba(5,155,225,.16);border:1px solid rgba(5,155,225,.45);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230095e2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  background-size:72%;background-position:center;background-repeat:no-repeat;
}
.compare-cell:first-child:not(.compare-head)::before{
  content:"";flex:none;width:18px;height:18px;border-radius:6px;
  background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.32);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f43f5e' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  background-size:66%;background-position:center;background-repeat:no-repeat;
}
.compare-head.compare-cell::before{display:none;content:none}
@media (max-width:560px){.compare-cell{padding:13px 15px;font-size:14px}}

/* ---------------------------------------------------------------- steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{
  position:relative;padding:26px 22px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:rgba(255,255,255,.035);
}
.step-num{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--grad);color:#04121c;font-weight:800;margin-bottom:16px;
  box-shadow:0 12px 26px -14px rgba(1,129,208,.9);
}
.step h3{font-size:1.05rem;margin-bottom:6px}
.step p{color:var(--muted);font-size:14.5px;margin-bottom:0}

/* ---------------------------------------------------------------- quote / promise */
.quote{
  border:1px solid var(--line);border-radius:var(--r-xl);
  padding:46px;text-align:center;
  background:
    radial-gradient(70% 100% at 50% 0%,rgba(1,129,208,.12),transparent 65%),
    linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  backdrop-filter:blur(12px);
}
.quote p{font-size:clamp(1.25rem,2.6vw,1.8rem);font-weight:700;letter-spacing:-.02em;line-height:1.35;max-width:24ch;margin:0 auto 18px}
.quote cite{font-style:normal;color:var(--dim);font-size:14px}
@media (max-width:600px){.quote{padding:32px 22px}}

/* ---------------------------------------------------------------- FAQ (native details — no JS) */
.faq{display:grid;gap:12px;max-width:840px;margin:0 auto}
.faq details{
  border:1px solid var(--line);border-radius:var(--r);
  background:rgba(255,255,255,.035);overflow:hidden;
}
.faq details[open]{border-color:rgba(1,129,208,.35);background:rgba(255,255,255,.055)}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 22px;
  font-weight:650;font-size:15.5px;display:flex;align-items:center;gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";margin-left:auto;flex:none;width:11px;height:11px;
  border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .faq-body{padding:0 22px 20px;color:var(--muted);font-size:14.8px}
.faq .faq-body p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- CTA band */
.cta{
  border:1px solid rgba(5,155,225,.32);border-radius:var(--r-xl);
  padding:52px 46px;position:relative;overflow:hidden;
  background:
    radial-gradient(80% 120% at 15% 0%,rgba(5,155,225,.18),transparent 60%),
    radial-gradient(80% 120% at 85% 100%,rgba(1,129,208,.20),transparent 60%),
    linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  text-align:center;backdrop-filter:blur(12px);
}
.cta h2{margin-bottom:14px}
.cta .lede{margin:0 auto 28px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-note{margin-top:20px;font-size:13.5px;color:var(--dim)}
@media (max-width:600px){.cta{padding:36px 22px}}

/* ---------------------------------------------------------------- forms */
.form-wrap{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.018));
  backdrop-filter:blur(12px);
}
.field{margin-bottom:18px}
.field label{display:block;font-size:13.5px;font-weight:650;margin-bottom:7px}
.field label span{color:var(--teal)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border-radius:var(--r-sm);
  background:rgba(4,8,16,.6);border:1px solid var(--line-strong);
  color:var(--txt);font-family:inherit;font-size:15px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field textarea{min-height:130px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#5c6c88}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:rgba(5,155,225,.7);box-shadow:0 0 0 4px rgba(5,155,225,.12);
}
.field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aabc9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px;
  padding-right:42px;
}
.field select option{background:#0b1120;color:var(--txt)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.form-note{font-size:13px;color:var(--dim);margin-top:14px;text-align:center}
.form-status{
  margin-top:16px;padding:14px 16px;border-radius:var(--r-sm);font-size:14px;
  border:1px solid rgba(5,155,225,.4);background:rgba(5,155,225,.1);color:var(--txt);
}
/* hidden only because it holds no message yet; JS reveals. Never wraps page content. */
.form-status[hidden]{display:none}

/* contact info cards */
.contact-line{
  display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:var(--r);
  border:1px solid var(--line);background:rgba(255,255,255,.035);margin-bottom:14px;
}
.contact-line .card-icon{margin-bottom:0;width:44px;height:44px;border-radius:13px;flex:none}
.contact-line b{display:block;font-size:14px}
.contact-line a,.contact-line span{color:var(--muted);font-size:14.5px;word-break:break-word}
.contact-line a:hover{color:var(--teal)}

/* ---------------------------------------------------------------- hardware (products) */
.hw{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.018));
  display:flex;flex-direction:column;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.hw:hover{transform:translateY(-4px);border-color:rgba(1,129,208,.38);box-shadow:var(--shadow-glow)}
.hw-art{
  height:210px;display:grid;place-items:center;position:relative;overflow:hidden;
  background:
    radial-gradient(60% 70% at 50% 20%,rgba(1,129,208,.16),transparent 70%),
    linear-gradient(180deg,#0a1322,#070d17);
  border-bottom:1px solid var(--line);
}
.hw-art svg{width:150px;height:150px;filter:drop-shadow(0 18px 28px rgba(0,0,0,.6));animation:hover-float 6s ease-in-out infinite}
@keyframes hover-float{50%{transform:translateY(-9px)}}
.hw-body{padding:22px;flex:1;display:flex;flex-direction:column}
.hw-body .hw-price{margin-top:auto}
.hw-body h3{font-size:1.08rem;margin-bottom:5px}
.hw-body p{color:var(--muted);font-size:14.5px;margin-bottom:14px}
.hw-price{font-weight:800;font-size:1.4rem;letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.hw-price{color:var(--teal);-webkit-text-fill-color:currentColor}}
.hw-price small{font-size:12.5px;font-weight:600;color:var(--dim);-webkit-text-fill-color:var(--dim)}
.hw-meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.tag{
  font-size:11.5px;font-weight:650;padding:4px 10px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--dim);
}

/* bundle table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(255,255,255,.03)}
table{width:100%;border-collapse:collapse;min-width:560px}
th,td{padding:15px 20px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--line)}
th{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:700;background:rgba(255,255,255,.03)}
td{color:var(--muted)}
td:first-child{color:var(--txt);font-weight:600}
tr:last-child td{border-bottom:none}
td b{color:var(--teal)}

/* ---------------------------------------------------------------- timeline (about) */
.timeline{position:relative;padding-left:30px;display:grid;gap:26px}
.timeline::before{
  content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(5,155,225,.7),rgba(1,129,208,.25),transparent);
}
.tl{position:relative}
.tl::before{
  content:"";position:absolute;left:-30px;top:6px;width:16px;height:16px;border-radius:50%;
  background:var(--bg);border:2px solid var(--teal);
  box-shadow:0 0 0 0 rgba(5,155,225,.45);animation:avatarpulse 3s ease-out infinite;
}
.tl h3{font-size:1.05rem;margin-bottom:4px}
.tl p{color:var(--muted);font-size:14.8px;margin-bottom:0}
.tl span{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}

/* value cards */
.value{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
  background:rgba(255,255,255,.035);
}
.value b{display:block;font-size:1.05rem;font-weight:750;margin-bottom:7px}
.value p{color:var(--muted);font-size:14.5px;margin-bottom:0}

/* ---------------------------------------------------------------- footer */
.footer{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);
  padding:56px 0 30px;margin-top:20px;
}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer h4{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.footer ul{display:grid;gap:9px}
.footer ul a,.footer ul span{color:var(--muted);font-size:14.5px}
.footer ul a:hover{color:var(--teal)}
.footer-about p{color:var(--muted);font-size:14.5px;max-width:34ch;margin-top:14px}
.footer-bottom{
  margin-top:42px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  color:var(--dim);font-size:13.5px;
}

/* ---------------------------------------------------------------- misc utilities */
.stack-sm > * + *{margin-top:10px}
.mt-40{margin-top:40px}
.mt-24{margin-top:24px}
.mb-0{margin-bottom:0}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ===== Client Login nav link ===== */
.nav-login {
    color: var(--teal, #059be1) !important;
    font-weight: 600;
    padding: 6px 16px;
    border: 1px solid rgba(25, 227, 208, 0.4);
    border-radius: 8px;
    transition: all 0.3s ease;
}
.nav-login:hover {
    background: rgba(25, 227, 208, 0.15);
    border-color: rgba(25, 227, 208, 0.8);
}

/* ===== Client Portal section ===== */
.portal-section {
    padding: 60px 20px;
    text-align: center;
    background: linear-gradient(135deg, #0a0e1a 0%, #0d1525 100%);
    border-top: 1px solid rgba(61, 123, 255, 0.15);
}
.portal-card {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px;
    background: rgba(13, 21, 37, 0.6);
    border: 1px solid rgba(61, 123, 255, 0.25);
    border-radius: 16px;
    backdrop-filter: blur(20px);
}
.portal-card h2 {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 12px;
}
.portal-card p {
    color: #94a2c0;
    margin-bottom: 24px;
}
.portal-btn {
    display: inline-block;
    padding: 14px 36px;
    background: linear-gradient(135deg, #0181d0, #059be1);
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.portal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(61, 123, 255, 0.4);
}

/* ==========================================================================
   Brand visual enhancements — logos, watermarks, infographic, separators
   (Additive only — uses existing brand tokens; no hardcoded colors)
   ========================================================================== */

/* ---- Footer logo strip ---- */
.footer-logo-strip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  padding:28px 0 8px;
  margin-top:18px;
  border-top:1px solid var(--line);
  flex-wrap:wrap;
}
.footer-logo-strip .fls-item{
  display:flex;
  align-items:center;
  gap:10px;
  opacity:.85;
}
.footer-logo-strip .fls-item img{
  height:36px;
  width:auto;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));
}
.footer-logo-strip .fls-mark{
  height:44px;
  opacity:.8;
  filter:drop-shadow(0 2px 8px rgba(2,140,223,.2));
}
.footer-logo-strip .fls-label{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
}

/* ---- "Trusted by" logo bar (about page) ---- */
.trust-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  padding:24px 0;
  margin:0 auto 8px;
  max-width:var(--max);
  flex-wrap:wrap;
}
.trust-bar .tb-logo{
  height:44px;
  width:auto;
}
.trust-bar .tb-mark{
  height:34px;
  opacity:.8;
}
.trust-bar .tb-divider{
  width:1px;
  height:36px;
  background:var(--line-strong);
}
.trust-bar .tb-label{
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
}

/* ---- Hero watermark (index) ---- */
.hero-watermark{
  position:absolute;
  right:2%;
  top:50%;
  transform:translateY(-50%);
  width:clamp(320px,42vw,560px);
  filter:drop-shadow(0 0 40px rgba(2,140,223,.3));
  opacity:.06;
  height:auto;
  pointer-events:none;
  z-index:0;
  user-select:none;
}
.hero-inner{position:relative;z-index:1}

/* ---- Infographic stats bar (Why AirTime) ---- */
.infobar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:40px;
  padding:30px 24px;
  border-radius:var(--r-lg);
  background:var(--grad-soft);
  border:1px solid var(--line);
}
.infobar-item{
  text-align:center;
  padding:14px 8px;
  border-right:1px solid var(--line);
}
.infobar-item:last-child{border-right:none}
.infobar-num{
  display:block;
  font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:8px;
}
.infobar-label{
  display:block;
  font-size:.82rem;
  color:var(--muted);
  letter-spacing:.02em;
  font-weight:500;
}
/* CSS-only animated underline pulse on each number */
.infobar-num::after{
  content:"";
  display:block;
  width:0;
  height:3px;
  margin:10px auto 0;
  border-radius:3px;
  background:var(--grad);
  animation:infobar-fill 2.4s ease-out infinite alternate;
}
.infobar-item:nth-child(2) .infobar-num::after{animation-delay:.3s}
.infobar-item:nth-child(3) .infobar-num::after{animation-delay:.6s}
.infobar-item:nth-child(4) .infobar-num::after{animation-delay:.9s}
@keyframes infobar-fill{
  0%{width:20%;opacity:.4}
  100%{width:70%;opacity:1}
}
@media (max-width:720px){
  .infobar{grid-template-columns:repeat(2,1fr);gap:12px;padding:22px 16px}
  .infobar-item{border-right:none;border-bottom:1px solid var(--line);padding:10px 4px}
  .infobar-item:nth-last-child(-n+2){border-bottom:none}
}

/* ---- Pricing section mark ---- */
.pricing-mark{
  display:block;
  margin:0 auto 14px;
  width:48px;
  height:48px;
  opacity:.9;
  filter:drop-shadow(0 2px 8px rgba(2,140,223,.2));
}

/* ---- Branded section separator ---- */
.brand-sep{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:32px 0;
  max-width:var(--max);
  margin:0 auto;
}
.brand-sep::before,
.brand-sep::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--grad);
  opacity:.35;
  max-width:240px;
}
.brand-sep img{
  width:36px;
  height:36px;
  opacity:.6;
  flex-shrink:0;
  filter:drop-shadow(0 2px 6px rgba(2,140,223,.15));
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .infobar-num::after{animation:none;width:50%}
}