@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
:root{--bg-top:#000e1c;--bg-mid:#071a58;--bg-bottom:#000e1c;--white:#fdfdfd;--muted:rgba(255,255,255,.72);--card:#2e3d70;--line:#4f96ff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--white)}
body.landing-page{background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-mid) 50%,var(--bg-bottom) 100%);min-height:100vh}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
.shell{width:min(1164px,calc(100% - 48px));margin-inline:auto}
.content-shell{max-width:840px}
.site-header{height:80px;background:rgba(0,14,28,.94);position:relative;z-index:50}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;max-width:840px}
.brand{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.brand img{width:40px;height:40px}
.nav-links{display:flex;align-items:center;gap:46px;font-size:13px}
.nav-links a:hover{color:#83b8ff}
.nav-links .mobile-menu-download{display:none}
.store-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:40px;padding:0 27px;border:0;border-radius:22px;color:white;background:linear-gradient(100deg,#4d00e7 0%,#6d56f7 48%,#55acff 100%);font-size:14px;font-weight:600;cursor:pointer;box-shadow:none}
.store-button img{width:25px;height:25px}
.header-download{height:auto;background:none;padding:0;font-size:14px}
.header-download img{width:25px;height:25px}
.menu-toggle{display:none}
.section-block{border-bottom:0}
.hero{padding:72px 0 55px}
.hero-copy h1,.section-copy h2,.faq h2{margin:0;background:linear-gradient(90deg,#72a9ff,#f09de8);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600;letter-spacing:.01em}
.hero-copy h1{font-size:50px;line-height:1.08}
.hero-copy p,.section-copy p{font-size:15px;line-height:1.25;margin:14px 0 0;max-width:510px;color:#fff}
.hero-art{display:block;width:907px;margin:22px 0 0 -34px}
.hero-art img{display:block;width:100%;height:auto}
.hero-action{width:252px;margin:-162px 0 0 auto;position:relative;z-index:2}
.hero-action p{font-size:16px;line-height:1.25;margin:0 0 22px}
.hero-action .store-button{width:100%}
.features{padding:60px 0 48px}
.section-copy h2,.faq h2{font-size:32px;line-height:1.05}
.section-copy p{max-width:510px}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:36px}
.feature-card{height:250px;border-radius:24px;background:var(--card);overflow:hidden;margin:0}
.feature-card>div{height:180px;display:flex;align-items:center;justify-content:center}
.feature-card img{width:120px;height:120px}
.feature-card h3{height:72px;margin:0;padding:17px 20px;font-size:18px;line-height:1.08;font-weight:400}
.cloud>div{background:linear-gradient(180deg,#73f1db,#69c5bd)}
.files>div{background:linear-gradient(180deg,#86b6ff,#3268df)}
.storage>div{background:linear-gradient(180deg,#eb5095,#b52bd7)}
.realtime>div{background:linear-gradient(180deg,#83f778,#55bd55)}
.network{padding:59px 0 45px}
.network-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:42px}
.network-card{height:444px;border-radius:24px;background:#2f3d6a;overflow:hidden;position:relative}
.network-card>p{font-size:20px;line-height:1.15;margin:0;padding:35px 34px;max-width:350px}
.network-card img{position:absolute;left:50%;bottom:0px;transform:translateX(-50%);width:294px;height:auto}
.network-card.image-only img{bottom:0px}
.faq{padding:61px 0 55px}
.faq h2{margin-bottom:25px;text-align:center}
.faq-list{max-width:510px;margin-inline:auto}
.faq-item{border-bottom:1px solid rgba(255,255,255,.22)}
.faq-item button{width:100%;min-height:48px;padding:13px 0;border:0;background:none;color:white;display:flex;align-items:center;justify-content:space-between;text-align:left;cursor:pointer;font-size:14px}
.faq-item button i{width:8px;height:8px;border-right:1px solid white;border-bottom:1px solid white;transform:rotate(45deg);margin:0 8px 5px 20px;transition:.2s}
.faq-item.is-open button i{transform:rotate(225deg);margin-bottom:-3px}
.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s}
.faq-answer p{overflow:hidden;margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.faq-item.is-open .faq-answer{grid-template-rows:1fr}.faq-item.is-open .faq-answer p{padding-bottom:14px}
.contact{padding:60px 0 53px}
.contact .section-copy{text-align:center}
.contact .section-copy h2{font-size:32px}
.contact .section-copy p{margin-left:auto;margin-right:auto}
.contact-form{max-width:510px;margin:34px auto 0;display:flex;flex-direction:column;gap:12px}
.form-field,.consent-field{display:flex;flex-direction:column;gap:6px}
.contact-form .form-field input,.contact-form textarea{width:100%;border:1px solid transparent;border-radius:7px;background:#17233d;color:white;padding:14px;outline:none;font-size:13px;transition:border-color .18s,box-shadow .18s}
.contact-form .form-field input{height:48px}.contact-form textarea{height:120px;resize:none}
.contact-form .form-field input::placeholder,.contact-form textarea::placeholder{color:rgba(255,255,255,.45)}
.contact-form .form-field input:focus,.contact-form textarea:focus{border-color:#71aaff;box-shadow:0 0 0 2px rgba(113,170,255,.16)}
.contact-form .form-field.is-invalid input,.contact-form .form-field.is-invalid textarea{border-color:#ff5964;box-shadow:0 0 0 2px rgba(255,89,100,.16)}
.contact-form .form-field.is-valid input,.contact-form .form-field.is-valid textarea{border-color:#4fcf86}
.field-error{min-height:0;color:#ff6b75;font-size:11px;line-height:1.25;text-align:left}
.field-error:not(:empty){min-height:14px}
.privacy-check{display:flex;align-items:center;gap:9px;font-size:12px;margin:3px 0 0}.privacy-check input{accent-color:#709bff}.privacy-check a{text-decoration:underline}
.consent-field{margin-bottom:13px}.consent-field.is-invalid .privacy-check{color:#ff6b75}.consent-field.is-invalid input{outline:2px solid rgba(255,89,100,.65);outline-offset:2px}
.submit-button{width:252px;align-self:center}
.site-footer{height:99px;background:#000e1c}
.footer-inner{height:99px;max-width:720px;padding:16px 0;display:flex;flex-direction:column;justify-content:space-between;font-size:12px;line-height:1.5;font-weight:500;color:rgba(255,255,255,.56)}
.footer-links{display:flex;align-items:center;gap:16px;color:#fff}
.footer-links>span{width:1px;height:12px;background:rgba(255,255,255,.32)}
.footer-meta{display:flex;align-items:center;justify-content:space-between;width:100%}
.footer-meta p{margin:0}
.form-popup{position:fixed;inset:0;background:rgba(0,7,20,.72);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;z-index:100;transition:.2s}
.form-popup.is-visible{opacity:1;visibility:visible}
.form-popup-card{background:#12214b;border:1px solid #579cff;padding:38px;border-radius:20px;width:min(390px,calc(100% - 32px));text-align:center;position:relative}
.form-popup-card>div{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;margin:auto;background:#684df2;font-size:24px}.form-popup-card h3{margin:18px 0 8px}.form-popup-card p{margin:0;color:var(--muted)}
.form-popup-close{position:absolute;right:14px;top:10px;border:0;background:none;color:white;font-size:26px;cursor:pointer}
@media(max-width:767px){
  .shell{width:calc(100% - 32px)}
  .content-shell{max-width:none}
  .site-header{height:56px;position:relative}
  .header-inner{width:100%;padding:0 16px}
  .brand{font-size:16px}.brand img{width:40px;height:40px}
  .header-download{display:none}
  .menu-toggle{display:block;width:40px;height:40px;padding:0;border:0;background:none;position:relative}
  .menu-toggle img{position:absolute;inset:0;width:40px;height:40px}.menu-close-icon{opacity:0}
  .site-header.is-menu-open .menu-open-icon{opacity:0}.site-header.is-menu-open .menu-close-icon{opacity:1}
  .nav-links{position:absolute;left:0;right:0;top:56px;z-index:60;background:#000e1c;padding:24px 16px 32px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 18px 30px rgba(0,0,0,.28);transform:translateY(-16px);opacity:0;visibility:hidden;pointer-events:none;transition:transform .25s ease,opacity .2s ease,visibility .2s}
  .site-header.is-menu-open .nav-links{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
  .nav-links>a:not(.mobile-menu-download){width:100%;padding:14px 0;border:0;text-align:center;font-size:16px;font-weight:500}
  .nav-links .mobile-menu-download{display:inline-flex;width:100%;height:48px;margin-top:18px;padding:0 24px;border:0;border-radius:24px;font-size:16px}
  .hero{padding:48px 0 44px}
  .hero-copy h1{font-size:40px;line-height:1.18}
  .hero-copy p,.section-copy p{font-size:16px;line-height:1.23;margin-top:12px}
  .hero-art{width:calc(100% + 8px);margin:13px -4px 0}
  .hero-action{width:100%;margin:-30px 0 0}
  .hero-action p{font-size:16px;margin-bottom:17px}
  .hero-action .store-button{height:48px;font-size:17px}
  .features{padding:63px 0 54px}
  .section-copy h2,.faq h2,.contact .section-copy h2{font-size:32px;line-height:1.18}
  .feature-grid{grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
  .feature-card{height:auto;border-radius:22px}
  .feature-card>div{height:auto;aspect-ratio:1/1}
  .feature-card img{width:86px;height:86px}
  .feature-card h3{height:72px;padding:14px 13px;font-size:18px;line-height:1.15}
  .network{padding:61px 0 45px}
  .network-grid{grid-template-columns:1fr;gap:24px;margin-top:34px}
  .network-card{border-radius:24px}
  .network-card>p{font-size:21px;padding:32px 24px}
  .network-card img{width:294px;bottom:-5px}.network-card.image-only img{bottom:0}
  .faq{padding:58px 0}
  .faq-list{max-width:none}.faq-item button{font-size:14px;min-height:52px}
  .contact{padding:59px 0 50px}
  .contact-form{max-width:none;margin-top:30px}
  .submit-button{width:100%;height:48px}
  .site-footer{height:107px}
  .footer-inner{height:107px;max-width:none;padding:16px 0}
  .footer-links{width:100%;justify-content:flex-start;gap:16px;white-space:nowrap}
  .footer-meta{gap:16px;white-space:nowrap}
  .footer-rights{display:block}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
