.root-placeholder{}
:root{
  --bg:#060714;
  --surface:#0b1020;
  --muted:#9fb0c8;
  --accent-1:#00d4ff;
  --accent-2:#7b61ff;
  --accent-cta:#ff6b3d;
  --text:#f7fbff;
  --glass: rgba(255,255,255,0.04);
  --max-width:1200px;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,var(--bg) 0%, #0a0f22 80%);color:var(--text);}
.container{max-width:var(--max-width);margin:0 auto;padding:28px}
.site-header{position:sticky;top:0;backdrop-filter:blur(6px);background:linear-gradient(180deg,rgba(6,7,20,0.6),transparent);z-index:30}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px}
.logo{height:96px;filter:drop-shadow(0 22px 48px rgba(123,97,255,0.12));transition:transform .18s ease}
.logo:hover{transform:scale(1.03)}
.nav{display:flex;gap:14px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px}
.nav .btn-sm{padding:8px 12px;font-size:14px}
.nav a{color:var(--text);margin-left:18px;text-decoration:none;opacity:0.9}
.nav a.cta{background:var(--accent);color:#fff;padding:8px 14px;border-radius:8px}

.hero{padding:72px 0}
.hero-wrap{display:grid;grid-template-columns:1fr 420px;gap:36px;align-items:center}
.hero-left{max-width:680px}
.eyebrow{color:var(--accent-1);font-weight:700;margin:0 0 12px}
.hero-left h1{font-size:44px;line-height:1.04;margin:0 0 12px}
.sub{color:var(--muted);margin:0 0 18px}
.cta-row{display:flex;gap:12px;align-items:center;margin:12px 0 20px}
.btn-cta{background:linear-gradient(90deg,#ff5a5f,#ff9a3c);color:#fff;box-shadow:0 20px 50px rgba(255,90,95,0.16);padding:14px 22px;border-radius:12px;font-weight:800}
.btn-ghost{background:transparent;border:1px solid var(--glass);color:var(--text);padding:12px 18px;border-radius:10px}
.highlight{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
.feature-list{display:flex;gap:12px;padding:0;margin:18px 0 0;list-style:none;color:var(--muted)}
.feature-list li{padding:10px 14px;background:var(--glass);border-radius:10px;font-weight:600}

.btn{display:inline-block;padding:12px 18px;border-radius:10px;text-decoration:none;color:var(--text);background:transparent;border:1px solid rgba(255,255,255,0.06);transition:transform .15s ease,box-shadow .15s ease}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 18px 40px rgba(255,65,108,0.14);border:0;color:#fff}
.btn-primary:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(255,65,108,0.18)}
.btn-outline{border:1px solid rgba(255,255,255,0.12)}

.hero-right{display:flex;justify-content:center}
.device-mock{width:360px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);box-shadow:0 30px 80px rgba(11,10,40,0.6);overflow:hidden}
.device-top{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:#001;padding:10px 14px;font-weight:800}
.device-screen{height:260px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#051029, #07112a)}
/* globe animation */
.globe{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.globe svg{width:86%;height:86%;max-width:360px;max-height:260px}
.globe-rotate{transform-origin:100px 100px;animation:globe-rotate 12s linear infinite}
.connections .node{transform-origin:100px 100px}
.orbits .orbit{stroke-dasharray:200;stroke-dashoffset:200;animation:orbit-move 3.6s linear infinite}

@keyframes globe-rotate{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
@keyframes orbit-move{
  0%{stroke-dashoffset:200}
  100%{stroke-dashoffset:0}
}

/* subtle pulsing on nodes */
.connections .node{animation:node-pulse 2s ease-in-out infinite}
@keyframes node-pulse{
  0%{transform:scale(1);opacity:0.95}
  50%{transform:scale(1.45);opacity:0.6}
  100%{transform:scale(1);opacity:0.95}
}

.device-top{position:relative;overflow:hidden}
.device-top::after{content:'';position:absolute;left:-40%;top:0;height:100%;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0.06),rgba(255,255,255,0));transform:skewX(-12deg);animation:shimmer 2.4s linear infinite}
@keyframes shimmer{0%{left:-40%}100%{left:140%}}

@media (prefers-reduced-motion: reduce){
  .globe-rotate{animation:none}
  .orbits .orbit{animation:none}
  .connections .node{animation:none}
  .device-top::after{display:none}
}

.features{padding:48px 0}
.section-title{font-size:22px;margin-bottom:18px}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.f{background:var(--glass);padding:20px;border-radius:12px}

.pricing{padding:36px 0}
.pricing-grid{display:flex;gap:18px;align-items:stretch}
.card{flex:1;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:20px;border-radius:12px;text-align:center}
.card.featured{border:2px solid rgba(123,97,255,0.12);transform:translateY(-6px)}
.price{font-size:20px;font-weight:800;color:var(--accent-2);margin:8px 0}

.plans .note{color:var(--muted);margin-top:12px;font-size:14px}

.partners-grid{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:12px}
.partners-grid img{height:48px;opacity:0.95;filter:grayscale(0.05);background:transparent;padding:8px}
.partner{min-width:140px;height:56px;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:10px;color:var(--muted);font-weight:700;padding:8px 12px;box-shadow:0 10px 30px rgba(2,6,23,0.6)}

.cards{display:flex;gap:18px;flex-wrap:wrap}
.price-card{flex:1;min-width:220px;background:rgba(255,255,255,0.02);padding:20px;border-radius:12px;text-align:center}
.price-card.featured{border:2px solid rgba(124,92,255,0.18);transform:translateY(-6px)}
.price{font-size:22px;margin:6px 0;color:var(--accent-2)}

.testimonials{padding:48px 0}
.test-grid{display:flex;gap:14px}
.t{background:var(--glass);padding:14px;border-radius:10px}
blockquote{background:rgba(255,255,255,0.02);padding:18px;border-radius:8px;margin:0}

.signup{padding:48px 0;text-align:center}
.signup-form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.signup-form input{padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text);min-width:260px}

.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:18px 0;margin-top:40px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}
.footer-links a{color:var(--muted);margin-left:10px;text-decoration:none}

@media(max-width:1100px){
  .hero-wrap{grid-template-columns:1fr 360px}
}
@media(max-width:900px){
  .header-inner{flex-direction:column;gap:8px}
  .nav{flex-wrap:wrap;justify-content:center}
  .hero-wrap{grid-template-columns:1fr;gap:18px}
  .hero-left{text-align:center}
  .feature-list{justify-content:center}
  .features-grid{grid-template-columns:1fr}
  .pricing-grid{flex-direction:column}
  .test-grid{flex-direction:column}
  .device-mock{width:100%}
}