:root {
      --primary: #1f6fff;
      --primary-dark: #164bb8;
      --ink: #14213d;
      --muted: #6b7280;
      --line: #e5e7eb;
      --soft: #f4f8ff;
      --dark: #07162e;
      --success: #10845b;
    }

    body {
      font-family: Arial, sans-serif;
      color: var(--ink);
      background: #fff;
      overflow-x: hidden;
    }

    .container {
      padding-left: 24px;
      padding-right: 24px;
    }

    .navbar {
      padding: 18px 0;
      background: rgba(255, 255, 255, .96);
      backdrop-filter: blur(10px);
    }

    .navbar-brand img { height: 82px; }
    .nav-link { font-weight: 700; color: #111827; margin: 0 6px; }
    img { max-width: 100%; height: auto; }
    h1, h2, h3, h4, h5, p, a, button { overflow-wrap: anywhere; }

    .btn-primary {
      background: var(--primary);
      border-color: var(--primary);
      border-radius: 12px;
      padding: 12px 22px;
      font-weight: 800;
    }

    .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

    .btn-outline-primary {
      border-radius: 12px;
      padding: 12px 22px;
      font-weight: 800;
    }

    .hero {
      position: relative;
      overflow: hidden;
      padding: 78px 0 64px;
      background: linear-gradient(135deg, #fff 0%, #f3f8ff 100%);
    }

    .hero h1 {
      font-size: 56px;
      line-height: 1.08;
      font-weight: 900;
      letter-spacing: 0;
    }

    .hero h1 span { color: var(--primary); }
    .lead-copy { font-size: 18px; color: var(--muted); max-width: 590px; margin: 24px 0 34px; }

    .badge-soft {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #e9f8f1;
      color: var(--success);
      padding: 8px 14px;
      border-radius: 50px;
      font-weight: 800;
      margin-bottom: 26px;
    }

    .hero-img {
      width: 100%;
      border-radius: 24px;
      filter: drop-shadow(0 28px 46px rgba(31,111,255,.18));
    }

    .feature-mini {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 32px;
    }

    .feature-mini div {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #374151;
      font-weight: 800;
    }

    .feature-mini i,
    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #eef5ff;
      color: var(--primary);
    }

    .feature-mini i { width: 38px; height: 38px; border-radius: 12px; }
    .section { padding: 78px 0; }
    .section-soft { background: var(--soft); }

    .section-title { text-align: center; margin-bottom: 42px; }
    .section-title small { color: var(--primary); font-weight: 900; letter-spacing: .5px; }
    .section-title h2 { font-size: 38px; font-weight: 900; margin-top: 10px; }

    .card-box {
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 30px;
      height: 100%;
      background: #fff;
      box-shadow: 0 16px 40px rgba(15,23,42,.06);
      transition: .25s;
    }

    .card-box:hover {
      transform: translateY(-5px);
      box-shadow: 0 22px 55px rgba(15,23,42,.1);
    }

    .icon {
      width: 58px;
      height: 58px;
      border-radius: 16px;
      font-size: 24px;
      margin-bottom: 20px;
    }

    .dark-panel {
      background: var(--dark);
      color: #fff;
      border-radius: 24px;
      padding: 52px;
      overflow: hidden;
    }

    .stat { font-size: 34px; font-weight: 900; color: #fff; }
    .stat-label { color: #b8c3d9; font-size: 14px; }

    .dashboard {
      background: #fff;
      border-radius: 22px;
      box-shadow: 0 25px 70px rgba(15,23,42,.12);
      overflow: hidden;
      border: 1px solid var(--line);
    }

    .dashboard img { width: 100%; display: block; }
    .check-list { list-style: none; padding: 0; margin: 28px 0; }
    .check-list li { margin-bottom: 14px; font-weight: 700; color: #374151; }
    .check-list i { color: var(--primary); margin-right: 10px; }

    .step-card .step-number {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--dark);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      margin-bottom: 18px;
    }

    .audience-pill {
      border-left: 4px solid var(--primary);
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      height: 100%;
      box-shadow: 0 14px 34px rgba(15,23,42,.05);
    }

    .audience-pill a,
    .panel-entry a {
      font-weight: 800;
      text-decoration: none;
    }

    .panel-entry {
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 28px;
      height: 100%;
      background: #fff;
    }

    .panel-entry .icon { margin-bottom: 18px; }

    .faq-item {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 22px;
      background: #fff;
      height: 100%;
    }

    .cta { background: linear-gradient(135deg, #1f6fff, #63a4ff); color: #fff; padding: 58px 0; }

    .site-footer {
      position: relative;
      overflow: hidden;
      padding: 64px 0 26px;
      background:
        linear-gradient(135deg, rgba(7,22,46,.97), rgba(10,38,78,.96)),
        repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 1px, transparent 1px 18px);
      color: #fff;
    }

    .site-footer::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 12% 20%, rgba(31,111,255,.28), transparent 28%),
        radial-gradient(circle at 82% 76%, rgba(16,132,91,.24), transparent 24%);
      pointer-events: none;
    }

    .site-footer .container {
      position: relative;
      z-index: 2;
    }

    .footer-watermark {
      position: absolute;
      inset: 0;
      opacity: .2;
      pointer-events: none;
    }

    .footer-watermark .route-line {
      position: absolute;
      width: 58vw;
      height: 150px;
      border: 2px dashed rgba(255,255,255,.42);
      border-left: 0;
      border-bottom: 0;
      border-radius: 0 90px 0 0;
      transform: rotate(-8deg);
    }

    .footer-watermark .route-line-one {
      right: -8vw;
      top: 44px;
    }

    .footer-watermark .route-line-two {
      left: -18vw;
      bottom: 28px;
      transform: rotate(172deg);
    }

    .footer-watermark i {
      position: absolute;
      right: 13%;
      top: 74px;
      font-size: 82px;
      color: rgba(255,255,255,.5);
      transform: rotate(-8deg);
    }

    .footer-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 32px;
      padding-bottom: 34px;
      border-bottom: 1px solid rgba(255,255,255,.15);
    }

    .footer-brand {
      max-width: 560px;
    }

    .footer-brand img {
      height: 58px;
      width: auto;
      padding: 8px 10px;
      border-radius: 8px;
      background: rgba(255,255,255,.94);
      box-shadow: 0 16px 34px rgba(0,0,0,.18);
    }

    .footer-brand p {
      color: #c8d3e8;
      margin: 18px 0 0;
      font-size: 16px;
      line-height: 1.7;
    }

    .footer-cta {
      min-width: 270px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 14px;
      flex-wrap: wrap;
      text-align: right;
    }

    .footer-cta span {
      color: #e8f1ff;
      font-weight: 900;
      max-width: 190px;
    }

    .footer-cta .btn {
      border-radius: 8px;
      font-weight: 900;
      padding: 12px 18px;
      white-space: nowrap;
    }

    .footer-links {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 28px;
      padding: 34px 0;
    }

    .site-footer h6 {
      color: #fff;
      font-weight: 900;
      margin-bottom: 16px;
    }

    .site-footer a {
      display: block;
      color: #c8d3e8;
      text-decoration: none;
      margin-bottom: 10px;
      transition: color .2s ease, transform .2s ease;
    }

    .site-footer a:hover {
      color: #fff;
      transform: translateX(3px);
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding-top: 22px;
      border-top: 1px solid rgba(255,255,255,.15);
      color: #9fb0cc;
      font-size: 14px;
    }

    .subpage-hero {
      position: relative;
      overflow: hidden;
      padding: 76px 0 54px;
      background:
        radial-gradient(circle at 82% 20%, rgba(31,111,255,.11), transparent 30%),
        radial-gradient(circle at 12% 82%, rgba(16,132,91,.08), transparent 28%),
        repeating-linear-gradient(45deg, rgba(31,111,255,.035) 0 1px, transparent 1px 20px),
        linear-gradient(135deg, #f8fbff 0%, #fff 56%, #eef6ff 100%);
      border-bottom: 1px solid var(--line);
    }

    .subpage-hero::before {
      content: "";
      position: absolute;
      right: -9vw;
      top: 26px;
      width: 50vw;
      height: 150px;
      border: 2px dashed rgba(31,111,255,.16);
      border-left: 0;
      border-bottom: 0;
      border-radius: 0 90px 0 0;
      transform: rotate(-8deg);
      pointer-events: none;
    }

    .subpage-hero::after {
      content: "\f207";
      position: absolute;
      right: 12%;
      top: 44px;
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      font-size: 74px;
      color: rgba(31,111,255,.08);
      transform: rotate(-8deg);
      pointer-events: none;
    }

    .subpage-hero .container {
      position: relative;
      z-index: 1;
    }

    .subpage-hero h1 {
      font-size: 46px;
      line-height: 1.1;
      font-weight: 900;
      margin: 12px 0 18px;
      letter-spacing: 0;
    }

    .subpage-hero p {
      color: var(--muted);
      font-size: 18px;
      max-width: 760px;
      margin: 0;
    }

    .contact-card {
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 26px;
      height: 100%;
      background: #fff;
      box-shadow: 0 16px 40px rgba(15,23,42,.06);
    }

    .contact-card i {
      width: 48px;
      height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      background: #eef5ff;
      color: var(--primary);
      font-size: 20px;
      margin-bottom: 16px;
    }

    .contact-card a {
      color: var(--ink);
      font-weight: 800;
      text-decoration: none;
    }

    .contact-form {
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 30px;
      background: #fff;
      box-shadow: 0 20px 55px rgba(15,23,42,.08);
    }

    .contact-form .form-control,
    .contact-form .form-select {
      border-radius: 12px;
      padding: 12px 14px;
    }

    .contact-side {
      background: var(--dark);
      color: #fff;
      border-radius: 22px;
      padding: 30px;
      height: 100%;
    }

    .contact-side p,
    .contact-side li {
      color: #c8d3e8;
    }

    .contact-side ul {
      padding-left: 18px;
      margin-bottom: 0;
    }

    .subpage-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
    }

    .feature-row {
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 24px;
      background: #fff;
      height: 100%;
      box-shadow: 0 14px 34px rgba(15,23,42,.05);
    }

    .feature-row h3,
    .feature-row h4 {
      font-weight: 900;
    }

    .feature-row p {
      color: var(--muted);
      margin-bottom: 0;
    }

    .feature-row .mini {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: #eef5ff;
      color: var(--primary);
      margin-bottom: 16px;
      font-size: 19px;
    }

    .split-panel {
      border-radius: 24px;
      background: var(--dark);
      color: #fff;
      padding: 34px;
      height: 100%;
    }

    .split-panel p,
    .split-panel li {
      color: #c8d3e8;
    }

    .pricing-card {
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 28px;
      height: 100%;
      background: #fff;
      box-shadow: 0 16px 40px rgba(15,23,42,.06);
    }

    .pricing-card.featured {
      border-color: var(--primary);
      box-shadow: 0 22px 55px rgba(31,111,255,.14);
    }

    .price-note {
      display: inline-flex;
      padding: 7px 12px;
      border-radius: 999px;
      background: #e8f1ff;
      color: var(--primary);
      font-weight: 900;
      font-size: 13px;
      margin-bottom: 14px;
    }

    .pricing-card ul {
      padding-left: 18px;
      color: #374151;
      margin: 18px 0 24px;
    }

    .pricing-hero {
      background:
        radial-gradient(circle at 82% 18%, rgba(31,111,255,.12), transparent 28%),
        repeating-linear-gradient(45deg, rgba(31,111,255,.035) 0 1px, transparent 1px 20px),
        linear-gradient(135deg, #f7fbff 0%, #fff 58%, #eef6ff 100%);
    }

    .pricing-main-section {
      padding-top: 52px;
    }

    .pricing-calculator {
      border: 1px solid rgba(31,111,255,.16);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 28px 85px rgba(15,23,42,.1);
      padding: 34px;
      position: relative;
      overflow: hidden;
    }

    .pricing-calculator::before {
      content: "";
      position: absolute;
      inset: 0;
      border-top: 5px solid var(--primary);
      pointer-events: none;
    }

    .pricing-calculator-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 28px;
      position: relative;
      z-index: 1;
    }

    .pricing-calculator-head h2 {
      font-size: 34px;
      line-height: 1.15;
      font-weight: 900;
      margin: 0 0 8px;
    }

    .pricing-calculator-head p {
      color: var(--muted);
      font-size: 17px;
      max-width: 650px;
      margin: 0;
    }

    .free-trial-card {
      min-width: 170px;
      border-radius: 8px;
      padding: 18px;
      background: #e9f8f1;
      border: 1px solid rgba(16,132,91,.18);
      color: var(--success);
      text-align: center;
    }

    .free-trial-card strong {
      display: block;
      color: var(--success);
      font-size: 34px;
      line-height: 1;
      font-weight: 900;
    }

    .free-trial-card span {
      display: block;
      margin-top: 6px;
      font-weight: 900;
    }

    .calculator-panel {
      display: grid;
      grid-template-columns: 230px minmax(0, 1fr);
      gap: 28px;
      align-items: center;
      padding: 28px;
      border-radius: 8px;
      background: #f8fbff;
      border: 1px solid var(--line);
      position: relative;
      z-index: 1;
    }

    .service-count-box {
      min-height: 220px;
      border-radius: 8px;
      padding: 24px;
      background: var(--dark);
      color: #fff;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-shadow: 0 18px 45px rgba(7,22,46,.18);
    }

    .service-count-box span,
    .service-count-box small {
      color: #c8d3e8;
      font-weight: 800;
    }

    .service-count-box strong {
      display: block;
      font-size: 76px;
      line-height: .95;
      letter-spacing: 0;
      margin: 12px 0;
      white-space: nowrap;
    }

    .service-slider-wrap {
      min-width: 0;
    }

    .range-meta,
    .range-labels,
    .pricing-result {
      display: flex;
      justify-content: space-between;
      gap: 12px;
    }

    .range-meta {
      color: var(--ink);
      font-weight: 900;
      margin-bottom: 20px;
    }

    .service-range {
      --range-fill: 24%;
      display: block;
      width: 100%;
      height: 18px;
      margin: 0;
      appearance: none;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--primary) 0 var(--range-fill), #dbe7f8 var(--range-fill) 100%);
      outline: none;
    }

    .service-range::-webkit-slider-thumb {
      appearance: none;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #fff;
      border: 8px solid var(--primary);
      box-shadow: 0 8px 22px rgba(31,111,255,.28);
      cursor: pointer;
    }

    .service-range::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      border: 8px solid var(--primary);
      box-shadow: 0 8px 22px rgba(31,111,255,.28);
      cursor: pointer;
    }

    .range-labels {
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
      margin-top: 14px;
    }

    .pricing-result {
      grid-column: 1 / -1;
      margin-top: 4px;
    }

    .pricing-result div {
      flex: 1;
      border-radius: 8px;
      background: #fff;
      border: 1px solid var(--line);
      padding: 20px;
    }

    .pricing-result .primary-result {
      border-color: rgba(31,111,255,.25);
      background: #f3f8ff;
    }

    .pricing-result span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 7px;
    }

    .pricing-result strong {
      font-size: 28px;
      line-height: 1.15;
      color: var(--ink);
      font-weight: 900;
    }

    .pricing-feature-panel {
      border-radius: 8px;
    }

    @media (max-width: 991px) {
      .subpage-grid {
        grid-template-columns: 1fr;
      }

      .subpage-hero h1 {
        font-size: 36px;
      }
      .subpage-hero::before {
        right: -42vw;
        top: 30px;
        width: 92vw;
        opacity: .75;
      }
      .subpage-hero::after {
        right: -4px;
        top: 38px;
        font-size: 58px;
        opacity: .85;
      }
    }

    @media (max-width: 991px) {
      .container {
        padding-left: 20px;
        padding-right: 20px;
      }

      .navbar-brand img { height: 64px; }
      .hero { padding-top: 45px; }
      .hero h1 { font-size: 40px; }
      .row.g-5 { --bs-gutter-x: 1.5rem; }
      .dark-panel { padding: 32px; }
      .section { padding: 58px 0; }
      .section-title h2 { font-size: 30px; }
      .navbar .d-flex {
        flex-direction: column;
        align-items: stretch;
        margin-top: 14px;
      }
      .navbar .btn {
        width: 100%;
      }
      .pricing-calculator,
      .calculator-panel {
        padding: 20px;
      }
      .pricing-calculator-head {
        flex-direction: column;
      }
      .free-trial-card {
        width: 100%;
      }
      .calculator-panel {
        grid-template-columns: 1fr;
      }
      .service-count-box {
        min-height: 170px;
      }
      .service-count-box strong {
        font-size: 58px;
      }
      .pricing-result {
        grid-column: auto;
        flex-direction: column;
      }
      .cta .btn {
        width: 100%;
        margin: 6px 0 0 !important;
      }
      .site-footer {
        padding-top: 48px;
      }
      .footer-top,
      .footer-bottom {
        flex-direction: column;
      }
      .footer-cta {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
      }
      .footer-links {
        grid-template-columns: 1fr 1fr;
      }
      .footer-watermark i {
        right: -12px;
        top: 42px;
        font-size: 68px;
      }
    }

    @media (max-width: 575px) {
      .footer-links {
        grid-template-columns: 1fr 1fr;
        gap: 22px 18px;
        padding: 28px 0;
      }
      .footer-cta .btn {
        width: 100%;
      }
    }

    @media (max-width: 360px) {
      .footer-links {
        grid-template-columns: 1fr;
      }
    }

    .holeya-proof-section{
  padding:90px 20px;
  background:linear-gradient(135deg,#f6f9ff 0%,#ffffff 55%,#eef6ff 100%);
  overflow:hidden;
}

.holeya-proof-wrap{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.holeya-mini-title{
  display:inline-block;
  background:#e8f1ff;
  color:#1463ff;
  padding:8px 14px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  margin-bottom:18px;
}

.holeya-proof-left h2{
  font-size:42px;
  line-height:1.15;
  color:#122033;
  margin:0 0 18px;
  letter-spacing:-1px;
}

.holeya-proof-left p{
  font-size:18px;
  line-height:1.7;
  color:#5d6b82;
  margin-bottom:28px;
}

.holeya-proof-list{
  display:grid;
  gap:14px;
}

.holeya-proof-list div{
  background:#fff;
  padding:16px 18px;
  border-radius:16px;
  box-shadow:0 14px 35px rgba(20,99,255,.08);
  color:#26364d;
  font-size:16px;
}

.holeya-proof-list b{
  color:#18b26b;
  margin-right:8px;
}

.route-card{
  position:relative;
  background:#ffffff;
  border-radius:32px;
  padding:28px;
  min-height:430px;
  box-shadow:0 30px 80px rgba(21,46,90,.14);
  border:1px solid #edf2fa;
}

.route-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:45px;
}

.route-top strong{
  color:#15243b;
  font-size:20px;
}

.route-top span{
  background:#16c784;
  color:#fff;
  padding:7px 13px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  animation:pulseLive 1.4s infinite;
}

.route-line{
  position:relative;
  height:120px;
  margin:30px 0 40px;
  border-top:4px dashed #d7e3f5;
}

.route-dot{
  position:absolute;
  top:-22px;
  background:#1463ff;
  color:#fff;
  padding:12px 16px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
}

.route-dot.home{
  left:0;
}

.route-dot.school{
  right:0;
  background:#ff9f1c;
}

.bus{
  position:absolute;
  top:-36px;
  left:0;
  font-size:42px;
  animation:busMove 5s infinite ease-in-out;
}

.notification{
  position:absolute;
  right:28px;
  display:flex;
  align-items:center;
  gap:10px;
  background:#f8fbff;
  border:1px solid #e4eefc;
  padding:13px 16px;
  border-radius:18px;
  box-shadow:0 14px 30px rgba(20,99,255,.08);
  opacity:0;
  transform:translateY(15px);
}

.notification span{
  font-size:21px;
}

.notification p{
  margin:0;
  color:#26364d;
  font-weight:700;
  font-size:14px;
}

.n1{
  top:150px;
  animation:notifyShow 5s infinite;
}

.n2{
  top:215px;
  animation:notifyShow 5s infinite 1.3s;
}

.n3{
  top:280px;
  animation:notifyShow 5s infinite 2.6s;
}

.route-bottom{
  position:absolute;
  left:28px;
  right:28px;
  bottom:28px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.route-bottom div{
  background:#f6f9ff;
  padding:14px;
  border-radius:16px;
}

.route-bottom small{
  display:block;
  color:#7c8ca4;
  font-size:12px;
  margin-bottom:4px;
}

.route-bottom b{
  color:#13243c;
  font-size:14px;
}

@keyframes busMove{
  0%{left:0;}
  50%{left:72%;}
  100%{left:0;}
}

@keyframes notifyShow{
  0%{opacity:0; transform:translateY(15px);}
  15%{opacity:1; transform:translateY(0);}
  70%{opacity:1; transform:translateY(0);}
  100%{opacity:0; transform:translateY(-10px);}
}

@keyframes pulseLive{
  0%{box-shadow:0 0 0 0 rgba(22,199,132,.45);}
  70%{box-shadow:0 0 0 10px rgba(22,199,132,0);}
  100%{box-shadow:0 0 0 0 rgba(22,199,132,0);}
}

@media(max-width:900px){
  .holeya-proof-wrap{
    grid-template-columns:1fr;
  }

  .holeya-proof-left h2{
    font-size:32px;
  }

  .route-card{
    min-height:460px;
  }

  .route-bottom{
    grid-template-columns:1fr;
  }
}