*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#fff;font-family:Inter,Arial,Helvetica,sans-serif}.page{width:100%;max-width:none;margin:0;background:#020914;overflow:hidden}.header{height:92px;background:#02070f;border-bottom:1px solid #17263a;display:flex;align-items:center;padding:0 44px;gap:30px;position:sticky;top:0;z-index:20}.brand{width:345px;height:82px;display:flex;align-items:center}.brand img{width:250px;height:auto;display:block;object-fit:contain;object-position:left center}.header nav{flex:1;display:flex;justify-content:center;gap:42px}.header nav a{height:92px;display:flex;align-items:center;position:relative;text-decoration:none;color:#f1f5f9;font-size:17px}.header nav a:hover,.header nav a.active{color:#00d8ff}.header nav a.active:after{content:"";position:absolute;bottom:20px;left:50%;width:37px;height:2px;background:#00d8ff;transform:translateX(-50%)}.mobile-score,.score-badge{border:1px solid #2c4057;background:#050d19;border-radius:18px}.mobile-score{width:195px;height:86px;display:grid;grid-template-columns:43px 1fr;grid-template-rows:42px 24px;align-items:center;padding:9px 12px}.mobile-score span,.score-badge span{color:#00d8ff;font-size:31px;grid-row:1/3;text-align:center}.mobile-score b{font-size:30px;color:#087cff}.mobile-score small,.score-badge small{font-size:10px;color:#cbd5df}.hero{min-height:520px;display:grid;grid-template-columns:42% 58%;padding:52px 55px 0;background:radial-gradient(circle at 78% 45%,#006cff20,transparent 38%),#020b16}.hero-copy{position:relative;z-index:4}.eyebrow{display:inline-block;border:1px solid #00aee0;border-radius:22px;color:#00d9ff;font-size:11px;font-weight:700;letter-spacing:.6px;padding:10px 18px}.hero h1{font-size:61px;line-height:.93;letter-spacing:-3px;margin:29px 0 25px}.hero h1 span{color:#08bdf3;text-shadow:0 0 22px #008eff55}.hero-copy>p{font-size:17px;line-height:1.55;color:#e4e9ef;margin:0}.cta{display:flex;gap:18px;margin:31px 0 36px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:15px;text-decoration:none;border-radius:10px;padding:17px 26px;font-weight:700;font-size:16px;transition:.25s}.btn:hover{transform:translateY(-3px);box-shadow:0 14px 35px #0007}.primary{background:#086eff;color:#fff}.ghost{color:#fff;border:1px solid #33475c;background:#050d18}.phone{font-size:22px}.advantages{display:flex;gap:19px}.advantages>div{display:flex;gap:10px;align-items:center;padding-right:20px;border-right:1px solid #21364b}.advantages>div:last-child{border:0}.advantages i{width:46px;height:46px;display:grid;place-items:center;border:1px solid #008fc1;background:#031826;border-radius:11px;color:#00d8ff;font-size:21px;font-style:normal}.advantages p{font-size:11px;line-height:1.4;color:#c7d0db;margin:0}.advantages strong{display:block;color:#fff}.hero-art{position:relative;min-height:510px}.hero-art>img{position:absolute;width:790px;max-width:none;left:-35px;top:-48px;z-index:2;filter:drop-shadow(0 25px 35px #0009);animation:float 5s ease-in-out infinite}.hero-art .glow{position:absolute;width:620px;height:170px;left:60px;bottom:30px;border-radius:50%;background:#006cff33;filter:blur(40px)}.score-badge{display:none;position:absolute;right:0;top:-20px;width:195px;height:86px;z-index:5;padding:9px}.solutions{margin:0 48px 24px;padding:24px 26px 25px;border:1px solid #1a3046;border-radius:24px;background:linear-gradient(145deg,#03101c,#020a14)}.section-head{text-align:center}.section-head h2{font-size:32px;margin:0 0 5px}.section-head h2 span{color:#087dff}.section-head p{font-size:13px;color:#a9b5c2;margin:0 0 18px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{min-height:300px;border:1px solid #1a3148;border-radius:14px;padding:28px 27px;background:linear-gradient(145deg,#071522,#050e18);display:flex;gap:21px;transition:.3s}.card:hover{transform:translateY(-6px);box-shadow:0 20px 40px #0008}.icon{width:70px;height:70px;min-width:70px;border-radius:50%;display:grid;place-items:center;font-size:26px}.blue .icon{background:#063b8d;color:#69b2ff}.green .icon{background:#034a2e;color:#38ed8a}.purple .icon{background:#3b105d;color:#c86bff}.card h3{font-size:21px;margin:7px 0 9px}.card small{font-size:12px;color:#d0d7df}.price{font-size:42px;font-weight:800;margin:2px 0 13px;color:#087dff}.green .price,.green a{color:#32e987}.purple .price,.purple a{color:#c46aff}.price em{font-size:13px;color:#d0d7df;font-style:normal;font-weight:400}.card p{font-size:12px;line-height:1.55;color:#c8d0da;margin:0 0 20px}.card a{font-size:12px;color:#087dff;text-decoration:none}.section,.contact{padding:100px 70px;border-top:1px solid #142a40}.section.dark{background:#010810}.kicker{color:#00d8ff;font-size:11px;letter-spacing:2px;font-weight:700}.section h2,.contact h2{font-size:44px;margin:13px 0}.section h2 span,.contact h2 span{color:#087dff}.section>p{max-width:750px;color:#99a8b8;line-height:1.7}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}.steps div{border:1px solid #1b3249;border-radius:12px;background:#061321;padding:24px}.steps b{color:#087dff}.steps h3{margin:14px 0 7px}.steps p{color:#8d9cac;font-size:12px}.contact{display:grid;grid-template-columns:38% 62%;gap:50px;background:linear-gradient(145deg,#020a14,#061725)}.contact p{color:#9ba9b8}.contact a{color:#00c5ff;text-decoration:none}.contact form{display:flex;flex-direction:column;gap:12px}.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.contact input,.contact select,.contact textarea{background:#061320;color:#fff;border:1px solid #21394f;border-radius:7px;padding:15px;font-size:12px}.contact textarea{min-height:135px;resize:vertical}.contact button{border:0;align-self:flex-start;cursor:pointer}footer{min-height:95px;padding:25px 45px;display:flex;align-items:center;justify-content:space-between;gap:25px;background:#01070d;border-top:1px solid #132a40}footer .footer-brand img{width:190px}footer a{color:#8291a2;text-decoration:none;font-size:11px;margin-right:20px}footer p{color:#627286;font-size:10px}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@media(max-width:1100px){.header{padding:0 22px}.brand{width:240px}.brand img{width:210px}.header nav{gap:20px}.header nav a{font-size:13px}.mobile-score{width:150px}.hero{padding-left:35px}.hero h1{font-size:53px}.hero-art>img{width:730px;left:-60px}.solutions{margin-left:25px;margin-right:25px}}@media(max-width:760px){.header{height:70px;padding:0 14px}.brand{width:auto}.brand img{width:175px}.header nav{display:none}.mobile-score{width:105px;height:50px;border-radius:10px;grid-template-columns:27px 1fr;grid-template-rows:23px 15px;padding:5px}.mobile-score span{font-size:22px}.mobile-score b{font-size:18px}.mobile-score small{font-size:6px}.hero{display:block;padding:35px 20px 0;min-height:auto}.hero-copy{text-align:center}.eyebrow{font-size:8px;padding:8px 12px}.hero h1{font-size:42px;letter-spacing:-1.5px;margin:24px 0 19px}.hero-copy>p{font-size:10px}.cta{justify-content:center;flex-wrap:wrap;gap:8px;margin:23px 0}.btn{font-size:9px;padding:12px 14px}.advantages{justify-content:center;gap:8px;flex-wrap:wrap}.advantages>div{border:0;padding:0}.advantages i{width:32px;height:32px;font-size:14px}.advantages p{font-size:7px;text-align:left}.hero-art{height:290px;min-height:0}.hero-art>img{width:610px;left:50%;top:-8px;transform:translateX(-50%);animation:none}.solutions{margin:0 10px 15px;padding:18px 12px}.section-head h2{font-size:20px}.section-head p{font-size:8px}.cards{grid-template-columns:1fr}.card{min-height:190px;padding:20px}.icon{width:55px;height:55px;min-width:55px}.price{font-size:34px}.section,.contact{padding:60px 22px}.section h2,.contact h2{font-size:30px}.steps{grid-template-columns:1fr 1fr}.contact{grid-template-columns:1fr}.row{grid-template-columns:1fr}footer{flex-direction:column;text-align:center}.desktop{display:none}}
.contact-details{display:flex;flex-direction:column;gap:15px;margin-top:25px}
.contact-details a{font-size:18px;font-weight:700}
@media(max-width:760px){
 .header{height:70px}
 .header nav a{height:70px}
 .hero{min-height:auto}
 .hero-art{height:280px}
 .hero-art>img{width:570px;top:0}
 .contact-details a{font-size:15px}
}

/* V4.1 — clean Weboriva branding: no screenshot/browser chrome in the logo */
.brand{width:345px;height:82px;display:flex;align-items:center;gap:14px;text-decoration:none}
.brand-mark,.footer-brand .brand-mark{width:58px;height:58px;min-width:58px;border:1px solid #176dbe;border-radius:14px;background:linear-gradient(145deg,#102d4c,#6c737b);display:grid;place-items:center;color:#06101d;font-size:39px;font-weight:900;line-height:1;box-shadow:inset 0 0 0 3px #071423,0 0 20px #007cff33}
.brand-copy{display:flex;flex-direction:column;line-height:1.05}
.brand-copy b{font-size:20px;letter-spacing:.3px;color:#f4f7fb}
.brand-copy small{font-size:11px;color:#d2d8df;margin-top:5px}
footer .footer-brand{display:flex;align-items:center;gap:12px}
footer .footer-brand .brand-mark{width:45px;height:45px;min-width:45px;font-size:29px;border-radius:11px}
footer .footer-brand .brand-copy b{font-size:15px}
footer .footer-brand .brand-copy small{font-size:9px}
@media(max-width:1100px){.brand{width:240px}.brand-mark{width:48px;height:48px;min-width:48px;font-size:32px}.brand-copy b{font-size:16px}.brand-copy small{font-size:9px}}
@media(max-width:760px){.brand{width:auto;gap:9px}.brand-mark{width:40px;height:40px;min-width:40px;font-size:27px}.brand-copy b{font-size:13px}.brand-copy small{font-size:7px}}

/* V4.2 — full browser width */
html,body{width:100%;min-width:0}
main{width:100%}
@media(min-width:761px){
  .hero{width:100%}
  .solutions{width:calc(100% - 96px)}
}

/* V4.3 — eliminate legacy screenshot logo everywhere */
.brand img,.footer-brand img{display:none!important}
.brand,.footer-brand{position:relative;z-index:2}

/* V4.4 — optimisation mobile */
@media (max-width:760px){
  body{overflow-x:hidden}
  .header{
    height:64px;
    padding:0 12px;
    gap:8px;
    position:sticky;
  }
  .brand{height:64px;flex:1;min-width:0;gap:7px}
  .brand-mark{width:38px;height:38px;min-width:38px;font-size:25px;border-radius:10px}
  .brand-copy b{font-size:12px}
  .brand-copy small{font-size:7px;margin-top:3px}
  .mobile-score{
    width:92px;height:46px;min-width:92px;
    border-radius:10px;
    grid-template-columns:25px 1fr;
    grid-template-rows:20px 13px;
    padding:5px 7px;
  }
  .mobile-score span{font-size:20px}
  .mobile-score b{font-size:17px}
  .mobile-score small{font-size:5.5px}

  .hero{
    display:flex;
    flex-direction:column;
    padding:28px 16px 0;
    min-height:0;
    background:radial-gradient(circle at 50% 38%,#006cff22,transparent 48%),#020b16;
  }
  .hero-copy{text-align:center}
  .eyebrow{font-size:7px;padding:7px 10px;letter-spacing:.5px}
  .hero h1{
    font-size:38px;
    line-height:.96;
    letter-spacing:-1.7px;
    margin:19px 0 15px;
  }
  .hero-copy>p{
    font-size:10px;
    line-height:1.5;
    max-width:330px;
    margin:0 auto;
  }
  .cta{
    margin:20px 0 22px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .btn{
    width:100%;
    min-height:48px;
    font-size:10px;
    padding:11px 9px;
    border-radius:10px;
    gap:7px;
  }
  .advantages{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    width:100%;
    align-items:start;
  }
  .advantages>div{
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:center;
    padding:0;
    border:0;
  }
  .advantages i{
    width:38px;height:38px;min-width:38px;
    border-radius:10px;
    font-size:16px;
  }
  .advantages p{
    font-size:7px;
    line-height:1.25;
    text-align:center;
  }

  /* Critical fix: show the complete device artwork instead of cropping it */
  .hero-art{
    height:auto;
    min-height:0;
    margin:18px -16px 0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
  }
  .hero-art>img{
    position:static;
    display:block;
    width:100%;
    max-width:745px;
    height:auto;
    transform:none;
    filter:drop-shadow(0 18px 25px #0009);
    animation:none;
  }
  .hero-art .glow{display:none}

  .solutions{
    margin:0 10px 15px;
    padding:22px 12px 16px;
    border-radius:18px;
  }
  .section-head h2{font-size:21px;line-height:1.15}
  .section-head p{font-size:8px;margin-bottom:14px}
  .cards{grid-template-columns:1fr;gap:10px}
  .card{
    min-height:0;
    padding:18px 16px;
    gap:14px;
    border-radius:13px;
  }
  .icon{width:50px;height:50px;min-width:50px;font-size:21px}
  .card h3{font-size:17px;margin:3px 0 6px}
  .card small{font-size:9px}
  .price{font-size:32px;margin:1px 0 9px}
  .price em{font-size:10px}
  .card p{font-size:9px;line-height:1.45;margin-bottom:12px}
  .card a{font-size:9px}

  .section,.contact{padding:50px 18px}
  .section h2,.contact h2{font-size:28px;line-height:1.05}
  .steps{grid-template-columns:1fr;gap:9px}
  .steps div{padding:18px}
  .contact{grid-template-columns:1fr;gap:28px}
  .contact-details{margin-top:20px;gap:12px}
  .contact-details a{font-size:14px}
  .row{grid-template-columns:1fr;gap:9px}
  .contact input,.contact select,.contact textarea{padding:13px;font-size:11px}
  .contact textarea{min-height:120px}
  .contact button{width:auto;min-width:190px}

  footer{
    min-height:130px;
    padding:22px 16px;
    flex-direction:column;
    text-align:center;
    gap:14px;
  }
  footer .footer-brand .brand-mark{width:40px;height:40px;min-width:40px;font-size:26px}
  footer .footer-brand .brand-copy b{font-size:13px}
  footer .footer-brand .brand-copy small{font-size:7px}
  footer a{font-size:10px;margin:0 8px}
  footer p{font-size:9px;margin:0}
}