@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --black:#050506;
  --red:#ed2823;
  --red-bright:#ff3932;
  --text:#f4f4f5;
  --muted:#a3a3aa;
  --line:rgba(255,255,255,.11);
  --max:1280px;
}

*{box-sizing:border-box}
html{background:var(--black);scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;overflow-x:hidden;background:
  radial-gradient(ellipse 60% 30% at 50% 48%,rgba(112,9,7,.20),transparent 70%),
  radial-gradient(ellipse 40% 30% at 8% 42%,rgba(229,36,32,.07),transparent 70%),
  radial-gradient(ellipse 40% 30% at 92% 42%,rgba(229,36,32,.07),transparent 70%),
  var(--black);
  color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:30;opacity:.035;
  background-image:radial-gradient(rgba(255,255,255,.8) .55px,transparent .55px);
  background-size:5px 5px;
}
.ambient{
  position:fixed;z-index:-1;pointer-events:none;width:34vw;height:34vw;border-radius:50%;
  filter:blur(90px);opacity:.11;background:var(--red);
}
.ambient-left{left:-25vw;top:35vh}
.ambient-right{right:-25vw;top:45vh}

.topbar{
  width:min(calc(100% - 72px),var(--max));height:108px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.brand{display:block;width:245px}
.brand img{width:100%;height:auto;display:block;mix-blend-mode:screen}
.top-status{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-size:9px;letter-spacing:.22em;font-weight:700;color:#74777e;
}
.top-status span{
  display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);
  margin-right:8px;box-shadow:0 0 14px rgba(237,40,35,.8);animation:status 2s infinite;
}

.hero{
  position:relative;text-align:center;padding-top:54px;
}
.eyebrow{
  margin:0 0 22px;font-size:11px;line-height:1;font-weight:600;letter-spacing:.33em;color:#efeff1;
}
h1{
  margin:0;font-size:clamp(44px,6.15vw,88px);line-height:.98;letter-spacing:-.065em;font-weight:900;
}
h1 span{color:#f5f5f5}
h1 b{color:var(--red);font-weight:900}
.headline-line{
  width:160px;height:2px;margin:24px auto 22px;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  box-shadow:0 0 18px rgba(237,40,35,.65);
  position:relative;
}
.headline-line:after{
  content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;
  transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 0 14px 3px var(--red);
}
.subheadline{margin:0;color:#d4d4d7;font-size:14px;line-height:1.7}
.subheadline strong{font-weight:500}
.subheadline em{font-style:normal;color:var(--red-bright)}

.planet-wrap{
  position:relative;height:410px;max-width:1280px;margin:12px auto 0;overflow:hidden;
}
.planet-wrap:before{
  content:"";position:absolute;left:50%;bottom:0;width:120%;height:92%;
  transform:translateX(-50%);
  background:
    linear-gradient(90deg,transparent 0 8%,rgba(237,40,35,.12) 8.1%,transparent 8.2% 18%,rgba(237,40,35,.09) 18.1%,transparent 18.2% 31%,rgba(237,40,35,.1) 31.1%,transparent 31.2% 48%,rgba(237,40,35,.09) 48.1%,transparent 48.2% 67%,rgba(237,40,35,.1) 67.1%,transparent 67.2% 82%,rgba(237,40,35,.08) 82.1%,transparent 82.2%),
    linear-gradient(158deg,transparent 0 40%,rgba(237,40,35,.14) 40.1%,transparent 40.25% 52%,rgba(237,40,35,.08) 52.1%,transparent 52.2%),
    radial-gradient(ellipse at 50% 100%,rgba(237,40,35,.28),transparent 63%);
  opacity:.5;mask-image:linear-gradient(to bottom,transparent 0,black 25%,black 85%,transparent 100%);
}
.planet{
  position:absolute;z-index:2;left:50%;bottom:-310px;width:min(900px,92vw);height:min(900px,92vw);
  transform:translateX(-50%);border-radius:50%;overflow:hidden;
  background:
    radial-gradient(circle at 48% 44%,rgba(255,80,67,.25),transparent 17%),
    radial-gradient(circle at 36% 32%,#ff4d42 0, #d82420 10%, #8d1715 27%, #390b0c 49%, #0b0304 71%);
  box-shadow:
    0 -2px 35px rgba(255,49,40,.6),
    0 -7px 75px rgba(237,40,35,.3),
    inset 0 40px 75px rgba(255,74,62,.12),
    inset 0 -80px 120px #000;
}
.planet:before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(ellipse at 18% 52%,rgba(255,69,57,.55) 0 1%,transparent 1.6%),
    radial-gradient(ellipse at 25% 47%,rgba(255,69,57,.45) 0 1%,transparent 1.5%),
    radial-gradient(ellipse at 34% 39%,rgba(255,69,57,.65) 0 1%,transparent 1.6%),
    radial-gradient(ellipse at 42% 54%,rgba(255,69,57,.4) 0 1%,transparent 1.5%),
    radial-gradient(ellipse at 54% 38%,rgba(255,69,57,.55) 0 1%,transparent 1.6%),
    radial-gradient(ellipse at 65% 48%,rgba(255,69,57,.45) 0 1%,transparent 1.5%),
    radial-gradient(ellipse at 76% 42%,rgba(255,69,57,.5) 0 1%,transparent 1.5%),
    radial-gradient(ellipse at 82% 57%,rgba(255,69,57,.4) 0 1%,transparent 1.5%),
    radial-gradient(ellipse at 30% 60%,rgba(255,69,57,.45) 0 1%,transparent 1.5%),
    radial-gradient(ellipse at 60% 62%,rgba(255,69,57,.55) 0 1%,transparent 1.5%);
  background-size:95px 75px,130px 100px,110px 90px,140px 110px,120px 95px,150px 120px,105px 85px,135px 105px,160px 125px,115px 95px;
  background-position:5% 5%,20% 20%,40% 0,60% 15%,80% 0,100% 20%,15% 70%,50% 75%,85% 70%,30% 90%;
  animation:lights 7s ease-in-out infinite alternate;
}
.planet-land{
  position:absolute;inset:4%;border-radius:50%;opacity:.42;
  background:
    repeating-linear-gradient(9deg,transparent 0 42px,rgba(255,81,70,.13) 43px 45px,transparent 46px 77px),
    repeating-linear-gradient(-22deg,transparent 0 70px,rgba(255,81,70,.11) 71px 73px,transparent 74px 110px);
  transform:rotate(-8deg);animation:land 18s linear infinite;
}
.planet-grid{
  position:absolute;inset:0;border-radius:50%;
  background:
    repeating-radial-gradient(ellipse at 50% 100%,transparent 0 35px,rgba(255,82,70,.13) 36px 37px,transparent 38px 70px),
    repeating-linear-gradient(90deg,transparent 0 42px,rgba(255,82,70,.13) 43px 44px,transparent 45px 86px);
  transform:perspective(500px) rotateX(63deg) scaleY(.65);
  transform-origin:50% 100%;opacity:.8;animation:grid 12s linear infinite;
}
.planet-cities{
  position:absolute;inset:5%;border-radius:50%;opacity:.9;
  background:
    radial-gradient(circle at 12% 57%,#ff6a5b 0 1px,transparent 2px),
    radial-gradient(circle at 18% 48%,#ff6a5b 0 1px,transparent 2px),
    radial-gradient(circle at 24% 52%,#ff6a5b 0 1px,transparent 2px),
    radial-gradient(circle at 31% 43%,#ff6a5b 0 1px,transparent 2px),
    radial-gradient(circle at 38% 51%,#ff6a5b 0 1px,transparent 2px),
    radial-gradient(circle at 46% 39%,#ff6a5b 0 1px,transparent 2px),
    radial-gradient(circle at 54% 47%,#ff6a5b 0 1px,transparent 2px),
    radial-gradient(circle at 62% 41%,#ff6a5b 0 1px,transparent 2px),
    radial-gradient(circle at 69% 52%,#ff6a5b 0 1px,transparent 2px),
    radial-gradient(circle at 77% 44%,#ff6a5b 0 1px,transparent 2px),
    radial-gradient(circle at 84% 57%,#ff6a5b 0 1px,transparent 2px);
  filter:drop-shadow(0 0 3px rgba(255,50,40,.7));animation:cities 5s ease-in-out infinite alternate;
}
.planet-atmosphere{
  position:absolute;inset:-2%;border-radius:50%;
  box-shadow:inset 0 9px 20px rgba(255,76,62,.8),inset 0 18px 55px rgba(255,40,35,.2);
}
.planet-shadow{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 15%,transparent 0 34%,rgba(0,0,0,.45) 54%,rgba(0,0,0,.93) 78%);
}
.planet-halo{
  position:absolute;z-index:1;left:50%;bottom:42px;width:min(940px,98vw);height:80px;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(237,40,35,.35),transparent 66%);
  filter:blur(18px);
}
.network{
  position:absolute;z-index:0;left:0;right:0;top:35px;height:270px;opacity:.65;
  background:
    radial-gradient(circle at 4% 58%,rgba(255,57,48,.95) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 10% 48%,rgba(255,57,48,.85) 0 1px,transparent 2px),
    radial-gradient(circle at 17% 62%,rgba(255,57,48,.9) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 25% 41%,rgba(255,57,48,.8) 0 1px,transparent 2px),
    radial-gradient(circle at 33% 53%,rgba(255,57,48,.85) 0 1px,transparent 2px),
    radial-gradient(circle at 67% 51%,rgba(255,57,48,.85) 0 1px,transparent 2px),
    radial-gradient(circle at 75% 42%,rgba(255,57,48,.9) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 83% 59%,rgba(255,57,48,.85) 0 1px,transparent 2px),
    radial-gradient(circle at 91% 46%,rgba(255,57,48,.9) 0 1.5px,transparent 2.5px),
    linear-gradient(145deg,transparent 0 18%,rgba(237,40,35,.18) 18.1% 18.3%,transparent 18.4% 35%,rgba(237,40,35,.14) 35.1% 35.3%,transparent 35.4%),
    linear-gradient(25deg,transparent 0 21%,rgba(237,40,35,.16) 21.1% 21.3%,transparent 21.4% 54%,rgba(237,40,35,.13) 54.1% 54.3%,transparent 54.4%);
  filter:drop-shadow(0 0 4px rgba(237,40,35,.25));
  animation:network 8s ease-in-out infinite alternate;
}
.network-b{transform:scaleX(-1);opacity:.35;animation-duration:11s}
.planet-title{
  position:absolute;z-index:4;left:50%;top:165px;transform:translateX(-50%);
  display:flex;align-items:center;flex-direction:column;text-align:center;width:100%;
  text-shadow:0 2px 18px #000;
}
.planet-title span{font-size:15px;letter-spacing:.09em;font-weight:500}
.planet-title b{font-size:20px;letter-spacing:.26em;margin-top:5px}
.planet-title i{display:flex;gap:7px;margin:15px 0 17px}
.planet-title i u{display:block;width:7px;height:7px;border-radius:50%;background:var(--red);text-decoration:none;box-shadow:0 0 10px rgba(237,40,35,.8)}
.planet-title small{font-size:12px;line-height:1.85;color:#e0e0e2;font-weight:400}
.scroll-arrow{position:absolute;z-index:5;bottom:7px;left:50%;width:28px;height:28px;transform:translateX(-50%)}
.scroll-arrow i{position:absolute;left:50%;width:12px;height:12px;border-right:2px solid white;border-bottom:2px solid white;transform:translateX(-50%) rotate(45deg);animation:arrow 1.7s infinite}
.scroll-arrow i+ i{top:9px;animation-delay:.2s}

.services{
  width:100%;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(10,10,12,.65);
}
.services article{text-align:center;padding:38px 24px 40px;border-right:1px solid var(--line)}
.services article:last-child{border-right:0}
.icon{height:45px;color:var(--red);font-size:40px;line-height:40px;font-weight:300;text-shadow:0 0 14px rgba(237,40,35,.35)}
.icon.bolt{font-size:46px}.icon.rocket{font-size:44px}.icon.growth{font-size:52px}
.services h2{font-size:12px;letter-spacing:.2em;margin:13px 0 10px}
.services p{margin:0;color:#94969d;font-size:11px;line-height:1.55}

.contact-section{text-align:center;padding:82px 20px 100px}
.contact-section>p{margin:0;font-size:10px;letter-spacing:.32em;color:#ddd;font-weight:500}
.contact-section h2{font-size:32px;letter-spacing:.16em;margin:16px 0 18px}
.contact-rule{display:flex;justify-content:center;align-items:center;gap:7px;margin-bottom:22px}
.contact-rule span{width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--red))}
.contact-rule span:last-child{transform:scaleX(-1)}
.contact-rule b{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 13px rgba(237,40,35,.8)}
.email{
  display:inline-block;padding:12px 23px;border:1px solid rgba(237,40,35,.8);
  color:#eee;text-decoration:none;font-size:15px;letter-spacing:.08em;
  box-shadow:inset 0 0 0 rgba(237,40,35,0),0 0 0 rgba(237,40,35,0);
  transition:.25s ease;
}
.email:hover{background:rgba(237,40,35,.08);box-shadow:0 0 24px rgba(237,40,35,.12);color:#fff}

footer{
  width:min(calc(100% - 72px),var(--max));min-height:76px;margin:auto;
  border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
  color:#64666d;font-size:8px;letter-spacing:.14em;
}

.privacy{
  position:fixed;z-index:100;left:50%;bottom:12px;transform:translateX(-50%);
  width:min(760px,calc(100% - 28px));display:grid;grid-template-columns:30px 1fr;gap:12px;
  padding:12px 16px;border:1px solid rgba(255,255,255,.10);border-radius:10px;
  background:rgba(12,12,15,.9);backdrop-filter:blur(18px);box-shadow:0 14px 50px rgba(0,0,0,.5);
}
.privacy-icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(237,40,35,.11);color:#ff5149;font-size:12px;font-weight:800}
.privacy strong{font-size:9px;letter-spacing:.1em}
.privacy p{margin:4px 0 0;color:#7f8188;font-size:9px;line-height:1.5}

@keyframes status{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes lights{from{opacity:.65}to{opacity:1}}
@keyframes land{from{transform:rotate(-8deg) translateX(-10px)}to{transform:rotate(-8deg) translateX(10px)}}
@keyframes grid{from{transform:perspective(500px) rotateX(63deg) scaleY(.65) translateX(-20px)}to{transform:perspective(500px) rotateX(63deg) scaleY(.65) translateX(20px)}}
@keyframes cities{from{opacity:.55}to{opacity:1}}
@keyframes network{from{transform:translateX(-8px);opacity:.4}to{transform:translateX(8px);opacity:.72}}
@keyframes arrow{0%,100%{opacity:.25;transform:translate(-50%,-3px) rotate(45deg)}50%{opacity:1;transform:translate(-50%,3px) rotate(45deg)}}

@media(max-width:900px){
  .topbar{width:calc(100% - 40px)}
  .top-status{display:none}
  .hero{padding-top:38px}
  .planet-wrap{height:350px}
  .planet{width:760px;height:760px;bottom:-510px}
  .planet-title{top:135px}
  .planet-title span{font-size:12px}.planet-title b{font-size:16px}
  .planet-title small{font-size:10px}
  .services{grid-template-columns:repeat(2,1fr)}
  .services article:nth-child(2){border-right:0}
  .services article:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:560px){
  .topbar{height:82px;width:calc(100% - 28px)}
  .brand{width:190px}
  .hero{padding-top:34px}
  .eyebrow{font-size:8px;letter-spacing:.22em;margin-bottom:18px}
  h1{font-size:clamp(35px,10.8vw,57px)}
  .subheadline{font-size:11px}
  .planet-wrap{height:310px;margin-top:8px}
  .planet{width:650px;height:650px;bottom:-425px}
  .planet-title{top:116px}
  .planet-title span{font-size:9px}.planet-title b{font-size:12px;letter-spacing:.22em}
  .planet-title i{margin:10px 0 10px}.planet-title i u{width:5px;height:5px}
  .planet-title small{font-size:8px;line-height:1.7}
  .network{top:25px;height:220px}
  .services{grid-template-columns:1fr 1fr}
  .services article{padding:26px 12px 28px}
  .services h2{font-size:9px}.services p{font-size:9px}
  .icon{font-size:34px}.icon.bolt{font-size:39px}.icon.rocket{font-size:38px}.icon.growth{font-size:43px}
  .contact-section{padding:62px 20px 90px}
  .contact-section h2{font-size:25px}
  footer{width:calc(100% - 28px);min-height:90px;flex-direction:column;justify-content:center;gap:8px}
  .privacy{width:calc(100% - 20px);bottom:10px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;scroll-behavior:auto!important}
}