:root{
  --blue:#4f8fd8;
  --blue2:#86bdf2;
  --orange:#5b7fa6;
  --orange2:#d9e7f5;
  --navy:#1f3a5f;
  --text:#344256;
  --muted:#6f7f92;
  --soft:#f6fbff;
  --soft2:#f5f9fe;
  --white:#ffffff;
  --shadow:0 18px 45px rgba(79,143,216,.13);
  --radius:28px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',Arial,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.65;
}
img{max-width:100%;display:block}
a{color:inherit}
.container{width:min(1120px,92%);margin:auto}

.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  box-shadow:0 8px 25px rgba(8,33,63,.06);
}
.nav-wrap{height:86px;display:flex;align-items:center;justify-content:space-between}
.brand img{width:158px;height:auto}
.main-nav{display:flex;gap:28px;align-items:center;font-weight:700;font-size:14px}
.main-nav a{text-decoration:none;position:relative}
.main-nav a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;bottom:-9px;width:0;height:3px;
  background:var(--orange);transition:.25s;border-radius:3px;
}
.main-nav a:hover::after{width:100%}
.nav-cta,.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 24px;border-radius:14px;text-decoration:none;font-weight:800;
  transition:.25s;cursor:pointer;
}
.nav-cta,.btn.primary{
  color:#fff;background:linear-gradient(135deg,var(--blue),var(--orange));
  box-shadow:0 12px 28px rgba(20,95,197,.22);
}
.btn.secondary{border:2px solid var(--blue);color:var(--blue);background:#fff}
.nav-cta:hover,.btn:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(255,107,26,.25)}

.menu-toggle{display:none;background:none;border:0;gap:5px;flex-direction:column}
.menu-toggle span{display:block;width:28px;height:3px;background:var(--navy);border-radius:4px}

.hero{
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 40%,rgba(20,95,197,.10),transparent 28%),
    radial-gradient(circle at 85% 20%,rgba(91,127,166,.08),transparent 24%),
    linear-gradient(135deg,#ffffff 0%,#f2f8ff 72%,#dcecff 100%);
}
.hero-grid{min-height:680px;display:grid;grid-template-columns:1.02fr .98fr;gap:50px;align-items:center}
.eyebrow{
  color:var(--orange);text-transform:uppercase;letter-spacing:.16em;
  font-size:13px;font-weight:900;margin-bottom:14px;
}
.center{text-align:center}
.hero h1,.page-hero h1{
  font-size:clamp(42px,6vw,70px);line-height:1.05;color:var(--navy);letter-spacing:-.045em;
}
.hero h1 span,.page-hero h1 span,h2 span{color:var(--orange)}
.hero-text{font-size:20px;color:var(--muted);max-width:620px;margin:26px 0 34px}
.hero-actions{display:flex;gap:18px;flex-wrap:wrap}

.-stage{height:520px;position:relative}
.{
  position:absolute;width:240px;min-height:450px;background:#fff;border:10px solid #111827;
  border-radius:38px;box-shadow:var(--shadow);padding:34px 20px 22px;
}
.-one{left:60px;top:45px;transform:rotate(7deg)}
.-two{right:30px;top:10px;transform:rotate(-7deg)}
.-top{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:70px;height:8px;background:#111827;border-radius:20px}
. h3{color:var(--blue);margin:18px 0}
.metric,.service-pill{
  background:#f6f9ff;border:1px solid #dcecff;border-radius:16px;padding:14px;margin:12px 0;
}
.metric{display:flex;justify-content:space-between}
.chart{height:90px;border-radius:18px;background:linear-gradient(135deg,#dbeafe,#fff),repeating-linear-gradient(90deg,#e2e8f0 0 1px,transparent 1px 28px)}
.service-pill{font-weight:800;color:var(--navy)}

.service-strip{background:#fff;margin-top:-26px;position:relative;z-index:2;padding:34px 0}
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.strip-card,.card,.portfolio-card{
  background:#fff;border:1px solid #e6eef8;border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow);transition:.25s;
}
.strip-card:hover,.card:hover,.portfolio-card:hover{transform:translateY(-8px)}
.strip-card span{font-size:34px}
.strip-card h3,.card h3,.portfolio-card h3{color:var(--navy);margin:12px 0 6px}

.split-section,.process,.contact-section{padding:96px 0}
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
h2{font-size:clamp(34px,4vw,52px);line-height:1.13;color:var(--navy);letter-spacing:-.035em;margin-bottom:20px}
p{color:var(--muted)}
.app-orbit{
  min-height:430px;border-radius:50px;background:linear-gradient(135deg,#eaf4ff,#fff);
  display:grid;place-items:center;position:relative;overflow:hidden;
}
.orbit-{width:170px;height:320px;border:10px solid var(--navy);border-radius:34px;background:linear-gradient(180deg,var(--blue),#93c5fd)}
.bubble{
  position:absolute;background:linear-gradient(135deg,var(--blue),var(--orange));
  color:#fff;padding:14px 18px;border-radius:18px;font-weight:900;box-shadow:var(--shadow)
}
.b1{left:14%;top:22%}.b2{right:14%;top:26%}.b3{left:18%;bottom:24%}.b4{right:18%;bottom:18%}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px}
.card h3{font-size:22px}

.page-hero{
  padding:110px 0 80px;
  background:
    radial-gradient(circle at 80% 20%,rgba(91,127,166,.08),transparent 26%),
    linear-gradient(135deg,#ffffff,#f2f8ff);
}
.page-hero p{max-width:760px;font-size:19px;margin-top:18px}

.mission-grid{display:grid;grid-template-columns:1fr;gap:18px}
.mission-grid div{
  padding:25px;border-radius:24px;background:#fff;border:1px solid #e6eef8;box-shadow:var(--shadow)
}
.mission-grid span,.portfolio-icon{font-size:34px}
.quote{
  margin-top:25px;padding:22px;border-left:5px solid var(--orange);
  color:var(--navy);background:#fff7ed;border-radius:0 18px 18px 0;font-weight:700;
}

.filter-buttons{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:36px}
.filter{
  border:1px solid #cfe0f6;background:#fff;padding:12px 20px;border-radius:14px;
  color:var(--navy);font-weight:800;cursor:pointer;transition:.2s;
}
.filter.active,.filter:hover{background:linear-gradient(135deg,var(--blue),var(--orange));color:#fff;border-color:transparent}
.portfolio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.portfolio-card.hide{display:none}

.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center}
.contact-visual{
  background:linear-gradient(135deg,#eaf4ff,#fff);border-radius:40px;padding:42px;box-shadow:var(--shadow)
}
.clipboard,.paper-plane{
  width:120px;height:120px;border-radius:26px;background:linear-gradient(135deg,var(--blue),var(--orange));
  display:grid;place-items:center;color:#fff;font-size:48px;font-weight:900;margin-bottom:24px;
}
.smart-form{
  background:#fff;border:1px solid #e6eef8;border-radius:32px;padding:34px;box-shadow:var(--shadow)
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:block;font-weight:800;color:var(--navy);margin-bottom:18px}
input,textarea{
  margin-top:8px;width:100%;padding:15px 16px;border-radius:14px;border:1px solid #d6e3f3;
  font:inherit;outline:none;transition:.2s;background:#fbfdff
}
input:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(20,95,197,.11)}
textarea{min-height:150px;resize:vertical}
button.btn{border:0}
.form-note{font-size:13px;margin-top:14px}

.footer{background:var(--navy);color:#fff;padding:55px 0 24px}
.footer p,.footer a{color:#cbd5e1}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.footer-logo{width:150px;background:#fff;border-radius:16px;padding:8px;margin-bottom:18px}
.footer a{display:block;text-decoration:none;margin:8px 0}
.footer h4{margin-bottom:12px}
.copyright{text-align:center;margin-top:38px;color:#94a3b8;font-size:14px}

.reveal{opacity:0;transform:translateY(26px);transition:.75s ease}
.reveal.visible{opacity:1;transform:none}
.delay{transition-delay:.15s}

@media(max-width:920px){
  .menu-toggle{display:flex}
  .main-nav{
    position:absolute;top:86px;left:0;right:0;background:#fff;display:none;flex-direction:column;
    padding:24px;box-shadow:0 20px 30px rgba(8,33,63,.08)
  }
  .main-nav.open{display:flex}
  .hero-grid,.split-grid,.contact-grid{grid-template-columns:1fr}
  .hero-grid{padding:55px 0;min-height:auto}
  .-stage{height:440px}
  .{width:210px;min-height:390px}
  .-one{left:6%;top:45px}.-two{right:5%;top:20px}
  .strip-grid,.cards,.portfolio-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
}

@media(max-width:560px){
  .brand img{width:132px}
  .nav-wrap{height:78px}
  .main-nav{top:78px}
  .hero h1,.page-hero h1{font-size:39px}
  .hero-text{font-size:17px}
  .-stage{display:none}
  .strip-grid,.cards,.portfolio-grid,.form-grid{grid-template-columns:1fr}
  .split-section,.process,.contact-section{padding:66px 0}
  .page-hero{padding:80px 0 58px}
  .hero-actions .btn{width:100%}
}


/* Soft light JCMobTech theme update */
body{
  background:linear-gradient(180deg,#fbfdff 0%,#ffffff 50%,#fffaf6 100%);
}

.site-header{
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 26px rgba(31,58,95,.07);
}

.hero{
  background:
    radial-gradient(circle at 15% 35%,rgba(134,189,242,.20),transparent 30%),
    radial-gradient(circle at 86% 20%,rgba(91,127,166,.10),transparent 26%),
    linear-gradient(135deg,#ffffff 0%,#f6fbff 62%,#f5f9fe 100%);
}

.page-hero{
  background:
    radial-gradient(circle at 80% 18%,rgba(91,127,166,.08),transparent 28%),
    radial-gradient(circle at 16% 55%,rgba(134,189,242,.18),transparent 30%),
    linear-gradient(135deg,#ffffff,#f6fbff);
}

.hero h1,
.page-hero h1,
h2,
.strip-card h3,
.card h3,
.portfolio-card h3,
label{
  color:#1f3a5f;
}

.hero h1 span,
.eyebrow{
  color:#4f6f94;
}

.nav-cta,
.btn.primary,
.filter.active,
.filter:hover{
  background:linear-gradient(135deg,#6fa8dc,#5b7fa6);
  color:#fff;
  box-shadow:0 14px 30px rgba(111,168,220,.22);
}

.btn.secondary{
  background:#ffffff;
  color:#4f8fd8;
  border-color:#a9cdf0;
}

.strip-card,
.card,
.portfolio-card,
.smart-form,
.mission-grid div{
  background:rgba(255,255,255,.95);
  border-color:#eaf2fb;
  box-shadow:0 16px 38px rgba(79,143,216,.10);
}

.contact-visual,
.app-orbit{
  background:linear-gradient(135deg,#f6fbff,#f5f9fe);
}

.clipboard,
.paper-plane,
.bubble{
  background:linear-gradient(135deg,#6fa8dc,#5b7fa6);
}

.device{
  border-color:#294764;
  box-shadow:0 20px 45px rgba(79,143,216,.15);
}

.device h3{
  color:#4f8fd8;
}

.orbit-device{
  border-color:#294764;
  background:linear-gradient(180deg,#86bdf2,#dbeeff);
}

.footer{
  background:#eef6ff;
  color:#1f3a5f;
  border-top:1px solid #dcecff;
}

.footer p,
.footer a,
.copyright{
  color:#5f7087;
}

.footer-logo{
  background:#ffffff;
  box-shadow:0 8px 20px rgba(79,143,216,.10);
}


/* Final visual fixes */
.nav-cta,
.btn.primary,
.filter.active,
.filter:hover{
  background:#4f8fd8 !important;
  background-image:none !important;
  color:#fff !important;
  box-shadow:0 12px 24px rgba(79,143,216,.18) !important;
}

.nav-cta:hover,
.btn.primary:hover{
  background:#3f7ec6 !important;
  transform:translateY(-2px);
}

.clipboard,
.paper-plane,
.bubble{
  background:#5b7fa6 !important;
  background-image:none !important;
}

.contact-visual{
  overflow:visible !important;
}

.clipboard{
  width:140px !important;
  height:140px !important;
  font-size:56px !important;
  margin:0 auto 30px auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1.2 !important;
}

.contact-grid{
  align-items:center !important;
}

.contact-visual h2{
  margin-top:10px;
}

@media(max-width:920px){
  .clipboard{
    width:120px !important;
    height:120px !important;
    font-size:48px !important;
  }
}


/* Professional accent update */
.hero h1 span,
.page-hero h1 span,
.eyebrow{
  color:#4f6f94 !important;
}

.nav-cta,
.btn.primary,
.filter.active,
.filter:hover{
  background:#4f8fd8 !important;
}

.clipboard,
.paper-plane,
.bubble{
  background:#5b7fa6 !important;
}

.hero{
  background:
    radial-gradient(circle at 15% 35%,rgba(134,189,242,.18),transparent 30%),
    radial-gradient(circle at 86% 20%,rgba(91,127,166,.08),transparent 26%),
    linear-gradient(135deg,#ffffff 0%,#f6fbff 62%,#f5f9fe 100%) !important;
}

.page-hero{
  background:
    radial-gradient(circle at 80% 18%,rgba(91,127,166,.08),transparent 28%),
    radial-gradient(circle at 16% 55%,rgba(134,189,242,.15),transparent 30%),
    linear-gradient(135deg,#ffffff,#f6fbff) !important;
}


/* Requested final tweaks */

/* Transparent logo background */
.brand img,
.footer-logo{
  background:transparent !important;
  box-shadow:none !important;
}

/* Better contrast between headers and secondary text */
.hero h1,
.page-hero h1,
h2,
.strip-card h3,
.card h3,
.portfolio-card h3,
label{
  color:#1b2f4b !important;
}

p,
.hero-text,
.page-hero p,
.form-note{
  color:#6f8094 !important;
}

/* Single centered quote checkmark icon */
.clipboard{
  width:120px !important;
  height:120px !important;
  border-radius:28px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:60px !important;
  line-height:1 !important;
  overflow:hidden !important;
  margin:0 auto 30px auto !important;
  position:relative !important;
}

.clipboard::before{
  content:"✓" !important;
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:white !important;
  font-size:60px !important;
  font-weight:800 !important;
}

.clipboard{
  color:transparent !important;
}