:root{
  --blue:#1557d6;
  --blue-dark:#0b43b5;
  --navy:#08152f;
  --text:#111827;
  --muted:#4b5563;
  --line:#e5e7eb;
  --soft:#f5f8ff;
  --white:#fff;
  --shadow:0 10px 28px rgba(15,39,86,.10);
  --radius:8px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.5;
}
a{text-decoration:none;color:inherit}
button{font:inherit}
.container{width:min(1180px,calc(100% - 48px));margin:auto}

/* Header */
.header{
  height:74px;border-bottom:1px solid #edf0f5;background:#fff;
  display:flex;align-items:center;position:sticky;top:0;z-index:20;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;flex-direction:column;line-height:1}
.brand strong{font-size:24px;letter-spacing:-1px;color:var(--blue)}
.brand span{font-size:12px;margin-top:4px;font-weight:600;color:#1f2937}
.menu{display:flex;align-items:center;gap:38px;font-size:13px;font-weight:600}
.menu a:hover{color:var(--blue)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:5px;border:1px solid var(--blue);padding:12px 20px;
  font-weight:700;font-size:13px;cursor:pointer;transition:.2s;
}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 5px 14px rgba(21,87,214,.18)}
.btn-primary:hover{background:var(--blue-dark);transform:translateY(-1px)}
.btn-outline{background:#fff;color:var(--blue)}
.mobile-menu{display:none}

/* Hero */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(110deg,#fff 0%,#fff 48%,#f2f7ff 100%);
  padding:68px 0 54px;
}
.hero:after{
  content:"";position:absolute;width:470px;height:470px;border-radius:50%;
  background:#eaf2ff;right:-100px;top:-120px;opacity:.85;
}
.hero-grid{display:grid;grid-template-columns:48% 52%;align-items:center;position:relative;z-index:1}
.hero h1{font-size:56px;line-height:1.03;letter-spacing:-2.5px;margin:0 0 18px;color:var(--navy)}
.hero h1 span{color:var(--blue)}
.hero h2{font-size:20px;line-height:1.3;max-width:520px;margin:0 0 12px}
.hero p{font-size:16px;max-width:520px;color:#374151;margin:0 0 26px}
.hero-note{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:12px;color:#374151;font-weight:600}
.shield{color:var(--blue);font-size:16px}
.hero-visual{position:relative;min-height:350px;display:flex;align-items:center;justify-content:center}
.device{
  position:relative;width:570px;height:300px;background:#101318;border-radius:13px;
  padding:10px;box-shadow:0 25px 45px rgba(10,27,58,.22);transform:perspective(1000px) rotateY(-3deg);
}
.device-screen{height:100%;border-radius:7px;background:#fff;overflow:hidden;border:1px solid #dfe5ef}
.app-top{height:38px;border-bottom:1px solid #e7ebf1;display:flex;align-items:center;justify-content:space-between;padding:0 14px}
.app-logo{font-weight:800;color:var(--blue);font-size:13px}
.app-logo small{display:block;font-size:6px;color:#6b7280}
.app-main{padding:14px}
.app-title{font-size:14px;font-weight:800;margin-bottom:10px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.stat{border:1px solid #e6ebf2;border-radius:5px;padding:7px}
.stat small{display:block;font-size:7px;color:#6b7280}.stat b{font-size:9px;color:#0f8b55}
.dashboard{display:grid;grid-template-columns:1.1fr .9fr;gap:8px;margin-top:8px}
.panel{border:1px solid #e6ebf2;border-radius:5px;padding:9px}
.panel h4{font-size:9px;margin:0 0 6px}
.activity{font-size:7px;line-height:2;color:#374151}
.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#24a866;margin-right:4px}
.chart{height:75px;position:relative;background:linear-gradient(to bottom,transparent 24%,#eef2f7 25%,transparent 26%,transparent 49%,#eef2f7 50%,transparent 51%,transparent 74%,#eef2f7 75%,transparent 76%)}
.chart svg{width:100%;height:100%}
.phone{
  position:absolute;width:110px;height:220px;background:#101318;border-radius:17px;
  right:-20px;bottom:15px;padding:7px;box-shadow:0 18px 30px rgba(10,27,58,.28);z-index:2
}
.phone-screen{height:100%;border-radius:11px;background:#fff;padding:10px 6px}
.phone .app-logo{font-size:9px}.phone .app-logo small{font-size:5px}
.phone-title{font-size:9px;font-weight:800;margin:16px 0 8px}
.phone-card{border:1px solid #e7ebf1;border-radius:5px;padding:5px;margin-bottom:5px;font-size:7px}
.laptop-base{position:absolute;width:620px;height:16px;bottom:18px;background:#b9c0ca;border-radius:0 0 20px 20px;transform:perspective(800px) rotateX(60deg);box-shadow:0 5px 10px rgba(0,0,0,.15)}

/* Trust */
.trust{padding:18px 0 28px;border-bottom:1px solid #edf0f5;text-align:center}
.trust-title{font-size:12px;font-weight:800;color:#111827;margin-bottom:16px}
.logos{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;align-items:center;color:#6b7280}
.logo-word{font-weight:800;letter-spacing:1px;font-size:16px}
.logo-word small{display:block;font-size:8px;letter-spacing:2px}

/* Problem */
.problem{background:#f6f9ff;padding:60px 0}
.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.problem h2,.section-title{font-size:30px;line-height:1.15;letter-spacing:-1px;margin:0 0 16px}
.problem p{font-size:14px;color:#4b5563;max-width:490px}
.emphasis{color:var(--blue);font-weight:800;font-size:16px}
.care-line{font-weight:800;font-size:17px;color:var(--navy)}
.services{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.card{background:#fff;border:1px solid #e3e8f0;border-radius:7px;padding:23px;box-shadow:var(--shadow)}
.icon{
  width:35px;height:35px;border-radius:9px;background:#eef4ff;color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px
}
.card h3{font-size:16px;margin:0 0 6px}.card p{font-size:12px;margin:0;color:#4b5563}

/* Pricing */
.pricing{padding:56px 0 44px}
.center{text-align:center}
.section-sub{font-size:13px;color:#6b7280;margin:-6px 0 28px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1030px;margin:auto}
.plan{border:1px solid #e1e6ef;border-radius:8px;padding:25px 22px;box-shadow:0 7px 22px rgba(15,39,86,.07);position:relative;background:#fff}
.plan.popular{border:2px solid var(--blue);padding:23px 21px}
.badge{position:absolute;left:-2px;right:-2px;top:-1px;height:26px;background:var(--blue);color:#fff;border-radius:6px 6px 0 0;text-align:center;font-size:10px;font-weight:800;line-height:26px}
.plan.popular .plan-content{padding-top:20px}
.plan h3{font-size:18px;margin:0}.price{font-size:34px;font-weight:900;color:var(--blue);letter-spacing:-1px;margin:8px 0}.price small{font-size:11px;color:#374151;font-weight:600}
.plan p{font-size:11px;color:#4b5563;min-height:42px}
.features{list-style:none;padding:0;margin:16px 0 20px}.features li{font-size:11px;margin:9px 0;display:flex;gap:7px}.check{color:var(--blue);font-weight:900}
.plan .btn{width:100%}
.plan-foot{display:grid;grid-template-columns:repeat(4,1fr);max-width:950px;margin:20px auto 0;gap:15px;font-size:10px;color:#374151;text-align:center}

/* Steps */
.steps{padding:46px 0 54px;border-top:1px solid #eef1f5}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;margin-top:30px}
.step{position:relative}.step:not(:last-child):after{content:"";position:absolute;top:33px;left:75%;width:70%;border-top:2px dotted #cbd5e1}
.step-icon{width:66px;height:66px;border:2px solid #e7eefb;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:26px;background:#fff;position:relative;z-index:1}
.step h3{font-size:12px;margin:0 0 5px}.step p{font-size:10px;color:#6b7280;margin:auto;max-width:190px}

/* Free check */
.check-section{padding:20px 0 48px}
.check-box{
  background:#f1f6ff;border-radius:9px;padding:28px 40px;
  display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center
}
.check-box h2{font-size:24px;margin:0 0 6px}.check-box p{font-size:12px;color:#4b5563;margin:0 0 13px}
.check-list{display:grid;grid-template-columns:1fr 1fr;gap:5px;font-size:10px;color:#374151}
.check-action{text-align:center}.check-action h3{font-size:16px;margin:0 0 12px}

/* FAQ */
.faq{padding:0 0 48px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-width:950px;margin:25px auto 0}
.faq-item{border:1px solid #e3e8ef;border-radius:6px;padding:12px 15px;font-size:11px;font-weight:700;display:flex;justify-content:space-between;background:#fff}
.faq-item span{font-size:18px;font-weight:400;color:#6b7280}

/* Footer */
.footer{background:#0845b8;color:#fff;padding:35px 0 15px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:40px}
.footer h3{font-size:13px;margin:0 0 10px}.footer p,.footer a{font-size:10px;color:#dce8ff}.footer a{display:block;margin:6px 0}
.footer-brand strong{font-size:22px}.footer-brand span{display:block;font-size:11px;margin-bottom:10px}
.footer .btn{
  background:#fff;
  color:var(--blue);
  border-color:#fff;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
}
.copyright{border-top:1px solid rgba(255,255,255,.2);margin-top:25px;padding-top:12px;display:flex;justify-content:space-between;font-size:9px;color:#dce8ff}

/* Responsive */
@media(max-width:900px){
  .menu{display:none}.mobile-menu{display:block;border:0;background:none;font-size:25px;color:var(--blue)}
  .hero-grid,.problem-grid,.check-box{grid-template-columns:1fr}
  .hero{padding-top:48px}.hero h1{font-size:46px}.hero-visual{margin-top:25px}
  .device{width:min(570px,95vw)}
  .plans{grid-template-columns:1fr;max-width:500px}.plan-foot{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .container{width:min(100% - 28px,1180px)}
  .header{height:66px}.brand strong{font-size:21px}.brand span{font-size:10px}
  .brand-logo {
    height: 50px;
}
  .hero h1{font-size:39px}.hero h2{font-size:17px}.hero p{font-size:14px}
  .hero-visual{min-height:250px}.device{width:92vw;height:215px;padding:7px}.phone{width:90px;height:175px;right:-12px;bottom:10px;}.laptop-base{width:90%;bottom:7px}
  .stats{gap:3px}.stat{padding:4px}.dashboard{gap:4px}.app-main{padding:8px}
  .logos{grid-template-columns:repeat(2,1fr)}.logo-word:last-child{grid-column:1/-1}
  .problem{padding:40px 0}.services,.faq-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr 1fr}.step:not(:last-child):after{display:none}
  .check-box{padding:25px 20px}.check-list{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}.copyright{flex-direction:column;gap:5px}
  .header .btn {
    font-size: 12px;
    padding: 9px 12px;
    max-width: 120px;
    text-align: center;
    line-height: 1.2;
}
}

.brand-logo {
    height: 85px;
    width: auto;
    display: block;
}


/* ==========================================
   CONTACT PAGE - WSITECARE
   ========================================== */

.contact-section {
    background: linear-gradient(135deg, #f5f8ff 0%, #ffffff 100%);
    padding: 75px 0 90px;
    min-height: 650px;
}

.contact-container {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.contact-container h1 {
    font-size: 38px;
    line-height: 1.2;
    letter-spacing: -1.2px;
    color: var(--navy);
    margin: 0 0 18px;
}

.contact-subtitle {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.7;
    margin: 0 auto 35px;
    max-width: 580px;
}

/* Contact form */

.contact-container form {
    background: #ffffff;
    padding: 40px;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: left;
}

.contact-container input,
.contact-container textarea {
    width: 100%;
    padding: 15px 16px;
    border: 1px solid #d5dce8;
    border-radius: 7px;
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    transition: border-color .2s, box-shadow .2s;
}

.contact-container input::placeholder,
.contact-container textarea::placeholder {
    color: #9ca3af;
}

.contact-container input:focus,
.contact-container textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(21, 87, 214, .12);
}

.contact-container textarea {
    min-height: 140px;
    resize: vertical;
}

.contact-container button[type="submit"] {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 7px;
    background: var(--blue);
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.contact-container button[type="submit"]:hover {
    background: var(--blue-dark);
    transform: translateY(-1px);
}

/* Success message */

.success-message {
    background: #ffffff;
    border: 1px solid #dbe7ff;
    border-radius: 12px;
    padding: 45px 30px;
    box-shadow: var(--shadow);
}

.success-message h2 {
    color: var(--blue);
    font-size: 28px;
    margin: 0 0 15px;
}

.success-message p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

/* Mobile responsiveness */

@media (max-width: 620px) {

    .contact-section {
        padding: 45px 0 65px;
        min-height: auto;
    }

    .contact-container h1 {
        font-size: 29px;
        letter-spacing: -0.7px;
    }

    .contact-subtitle {
        font-size: 14px;
        margin-bottom: 25px;
    }

    .contact-container form {
        padding: 24px 18px;
        gap: 15px;
    }

    .contact-container input,
    .contact-container textarea {
        font-size: 16px;
    }

    .success-message {
        padding: 30px 20px;
    }
}

/* Contact trust section */

.contact-trust {

    margin: 35px auto 0;
    text-align: center;
    max-width: 600px;

}


.contact-trust h2 {

    font-size: 22px;
    color: var(--navy);
    margin-bottom: 10px;

}


.contact-trust p {

    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 20px;

}


.trust-items {

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    font-size:13px;
    color:#374151;

}


@media(max-width:620px){

    .trust-items{
        grid-template-columns:1fr;
    }

}