a { text-decoration: none; }
    .text-primaryc { color: var(--primary) !important; }
    .bg-navy { background-color: var(--navy); }

    .section-eyebrow {
      color: var(--primary);
      font-weight: 700;
      letter-spacing: .12em;
      font-size: .78rem;
      text-transform: uppercase;
    }
    .section-title { font-weight: 800; letter-spacing: -.02em; }

    

    /* ---------- HERO ---------- */
    .hero {
      background:
        radial-gradient(900px 500px at 80% 20%, rgb(0 3 24), transparent 60%), linear-gradient(135deg, #000319 0%, #00041b 55%, #00041a 100%);
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    .hero::before {
      content: ""; position: absolute; inset: 0;
      background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.4), transparent),
        radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,.3), transparent),
        radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.4), transparent),
        radial-gradient(1px 1px at 85% 25%, rgba(255,255,255,.3), transparent);
      opacity: .7; pointer-events: none;
    }
    .breadcrumb-bar { position: relative; z-index: 2; font-size: .85rem; }
    .breadcrumb-bar a { color: #b9c6e6; }
    .breadcrumb-bar .sep { color: #6f83b5; }
    .hero-eyebrow { color: #6ea8ff; font-weight: 700; letter-spacing: .15em; font-size: .8rem; text-transform: uppercase; }
    .hero h1 { font-weight: 800; font-size: 3.4rem; line-height: 1.05; letter-spacing: -.02em; }
    .hero h1 .accent { color: #4f97ff; }
    .hero p.lead-text { color: #c6d3ee; max-width: 520px; font-size: 1.02rem; }
    .btn-ghost {
      border: 1px solid rgba(255,255,255,.35); color: #fff; font-weight: 700;
      border-radius: 999px; padding: .7rem 1.5rem; background: transparent;
    }
    .btn-ghost:hover { background: #fff; color:#1f4a98; }
    .btn-hero {
      background: var(--primary); color:#fff; font-weight:700; border-radius:999px; padding:.7rem 1.6rem;
      box-shadow: 0 10px 26px rgba(28,92,255,.45);
    }
    .btn-hero:hover { background: #fff; color:#1f4a98; }

    /* ---------- HERO LAPTOP ILLUSTRATION ---------- */
    .device-wrap { position: relative; z-index: 2; }
    .laptop { max-width: 460px; margin: 0 auto; position: relative; }
    .laptop-screen {
      background: #fff; border: 8px solid #1c2c52; border-radius: 14px 14px 0 0;
      padding: 14px; box-shadow: 0 26px 70px rgba(0,0,0,.5), 0 0 60px rgba(60,130,255,.35);
    }
    .laptop-base { height: 14px; background: linear-gradient(180deg,#2a3a63,#1c2c52); border-radius: 0 0 16px 16px; margin: 0 auto; width: 108%; margin-left: -4%; box-shadow: 0 12px 24px rgba(0,0,0,.4); }
    .ui-hero-card { background: linear-gradient(135deg,#5b4bff,#7a5cff); border-radius: 12px; padding: 14px; color:#fff; }
    .ui-block { background:#eef1ff; border-radius:10px; height:46px; }
    .ui-purple { background: linear-gradient(135deg,#6a5bff,#9b7bff); }
    .ui-stat { background:#f5f6fc; border-radius:10px; padding:10px; }
    .ui-stat .n { font-weight:800; color:var(--ink); }
    .mini-phone {
      position:absolute; right:-24px; bottom:-8px; width:110px; background:#0c1a3c; border:5px solid #263a6b;
      border-radius:18px; padding:8px; box-shadow: 0 20px 50px rgba(0,0,0,.5);
    }
    .mini-phone .scr { background: linear-gradient(180deg,#f5f6fc,#e7ebff); border-radius:11px; padding:8px; }
    .mini-phone .amt { background: linear-gradient(135deg,#5b4bff,#7a5cff); color:#fff; border-radius:8px; padding:6px 8px; font-weight:700; font-size:.7rem; }
    .float-badge {
      position:absolute; background: rgba(15,35,80,.9); border:1px solid rgba(90,140,255,.4);
      border-radius:14px; padding:10px 14px; backdrop-filter: blur(4px); z-index:3; color:#dce6ff;
      box-shadow: 0 10px 30px rgba(0,0,0,.35); font-weight:700;
    }
    .float-aa { top: 2%; left: 2%; font-size:1.3rem; }
    .float-pen { top: 34%; left: -4%; font-size:1.3rem; color:#ff7ad9; }
    .float-uiux { top: 6%; right: -2%; }

    /* ---------- FEATURE CARDS ---------- */
    .feature-card {
      background:#fff; border:1px solid var(--border); border-radius:16px; padding:26px 22px; height:100%;
      transition:.25s; text-align:center;
    }
    .feature-card:hover { transform: translateY(-6px); box-shadow:0 18px 40px rgba(16,25,58,.1); border-color:#cfe0ff; }
    .feat-ico {
      width:56px; height:56px; border-radius:14px; background:var(--sky); color:var(--primary);
      display:grid; place-items:center; font-size:1.5rem; margin:0 auto 16px;
    }
    .feature-card h5 { font-weight:700; font-size:1.05rem; }
    .feature-card p { color:var(--muted); font-size:.9rem; margin:0; }

    /* ---------- PROCESS ---------- */
    .band { background: var(--light); border-radius: 22px; }
    .proc-ico {
      width:70px; height:70px; border-radius:50%; background:#fff; border:1px solid var(--border);
      color:var(--primary); display:grid; place-items:center; font-size:1.6rem; margin:0 auto 14px;
      box-shadow:0 10px 24px rgba(16,25,58,.06);
    }
    .proc h6 { font-weight:700; }
    .proc p { color:var(--muted); font-size:.82rem; }
    .proc-arrow { color:#9db4e8; font-size:1.1rem; }

    /* ---------- PLATFORMS / TECH ---------- */
    .soft-card { background: var(--light); border-radius:18px; }
    .plat h6 { font-weight:700; }
    .plat p { color:var(--muted); font-size:.82rem; }
    .tech-chip {
      width:78px; height:78px; border-radius:16px; background:#fff; border:1px solid var(--border);
      display:grid; place-items:center; margin:0 auto 10px; font-size:2rem;
    }
    .tech small { font-weight:700; color:var(--ink); }

    /* ---------- APP TYPES ---------- */
    .type-card {
      border:1px solid var(--border); border-radius:16px; padding:24px; text-align:center; height:100%;
      background:#fff; transition:.25s;
    }
    .type-card:hover { transform:translateY(-5px); box-shadow:0 16px 36px rgba(16,25,58,.1); border-color:#cfe0ff; }
    .type-ico { color:var(--primary); font-size:1.8rem; margin-bottom:12px; }
    .type-card h6 { font-weight:700; }
    .type-card p { color:var(--muted); font-size:.82rem; margin:0; }

    /* ---------- INDUSTRIES / WHY ---------- */
    .ind-card {
      border:1px solid var(--border); border-radius:14px; padding:16px 10px; text-align:center; background:#fff;
      transition:.2s;
    }
    .ind-card:hover { border-color:#cfe0ff; box-shadow:0 10px 24px rgba(16,25,58,.08); }
    .ind-card i { color:var(--primary); font-size:1.5rem; }
    .ind-card small { display:block; font-weight:700; margin-top:8px; }
    .why-item i { color:var(--primary); }
    .why-item { font-weight:600; font-size:.95rem; }
    .trophy-ico { font-size:6rem; color:#3f7bff; filter: drop-shadow(0 12px 24px rgba(28,92,255,.4)); }

    /* ---------- STATS ---------- */
    .stats {
      background: linear-gradient(135deg,#0a2050,#0b2a66); color:#fff; border-radius:18px;
    }
    .stat-ico { width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.1); display:grid; place-items:center; font-size:1.3rem; }
    .stat-num { font-weight:800; font-size:1.9rem; line-height:1; }
    .stat-lbl { color:#b9c6e6; font-size:.85rem; }

    /* ---------- CTA ---------- */
    .cta {
      background: linear-gradient(135deg,#1c5cff,#1140c9); color:#fff; border-radius:18px; overflow:hidden; position:relative;
    }
    .cta .env-ico { width:64px; height:64px; border-radius:16px; background:rgba(255,255,255,.15); display:grid; place-items:center; font-size:1.7rem; }
    .btn-white { background:#fff; color:#1a56db; font-weight:700; border-radius:999px; padding:.65rem 1.4rem; }
    .btn-white:hover { background:#1a56db; color:#eef3ff;border: 2px solid #fff }
    .btn-navy { background:var(--navy); color:#fff; font-weight:700; border-radius:999px; padding:.65rem 1.4rem;border: 2px solid #fff }
    .btn-navy:hover { background:#fff; color:#164de2; }

    

    @media (max-width: 991px){
      .hero h1 { font-size: 2.4rem; }
      .float-badge { display:none; }
      .mini-phone { display:none; }
    }