:root {
        --ink: #14213d;
        --muted: #63718a;
        --brand: #2563eb;
        --brand-dark: #123c7c;
        --brand-deep: #0b2447;
        --accent: #38bdf8;
        --soft: #eaf3ff;
        --line: rgba(20, 33, 61, .12);
      }

      * {
        letter-spacing: 0;
      }

      body {
        font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        color: var(--ink);
        background: #f7f9fb;
      }

      .navbar {
        background: rgba(255, 255, 255, .92);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--line);
      }

      .navbar-brand {
        color: var(--brand-dark);
        font-weight: 800;
      }

      .nav-link {
        color: var(--muted);
        font-weight: 600;
      }

      .nav-link:hover {
        color: var(--brand);
      }

      .hero {
        position: relative;
        overflow: hidden;
        min-height: 92vh;
        display: flex;
        align-items: center;
        padding: 7.5rem 0 4rem;
        color: #fff;
        background:
          linear-gradient(110deg, rgba(11, 36, 71, .96) 0%, rgba(37, 99, 235, .78) 48%, rgba(8, 30, 64, .9) 100%),
          url("https://images.unsplash.com/photo-1509062522246-3755977927d7?auto=format&fit=crop&w=1800&q=80") center/cover;
      }

      .hero::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 12rem;
        background: linear-gradient(180deg, rgba(247, 249, 251, 0), #f7f9fb 92%);
        pointer-events: none;
      }

      .hero-content {
        position: relative;
        z-index: 2;
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .45rem .8rem;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 999px;
        background: rgba(255, 255, 255, .11);
        font-size: .86rem;
        font-weight: 700;
      }

      .hero h1 {
        max-width: 780px;
        margin-top: 1.35rem;
        font-size: clamp(3rem, 7vw, 6.4rem);
        line-height: .95;
        font-weight: 800;
      }

      .hero .lead {
        max-width: 760px;
        color: rgba(255, 255, 255, .86);
        font-size: clamp(1.05rem, 2vw, 1.35rem);
        line-height: 1.65;
      }

      .hero-actions .btn {
        min-height: 3rem;
        padding-inline: 1.15rem;
        font-weight: 700;
      }

      .btn-brand {
        --bs-btn-color: #ffffff;
        --bs-btn-bg: #2563eb;
        --bs-btn-border-color: #2563eb;
        --bs-btn-hover-color: #ffffff;
        --bs-btn-hover-bg: #1d4ed8;
        --bs-btn-hover-border-color: #1d4ed8;
      }

      .btn-outline-light {
        --bs-btn-hover-color: #123c7c;
      }

      .hero-panel {
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: 8px;
        background: rgba(255, 255, 255, .12);
        box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
        backdrop-filter: blur(16px);
      }

      .screen-shell {
        border-radius: 8px;
        overflow: hidden;
        background: #f8fbfb;
        color: var(--ink);
      }

      .screen-top {
        height: 2.4rem;
        display: flex;
        align-items: center;
        gap: .42rem;
        padding: 0 .8rem;
        background: #eaf1fb;
        border-bottom: 1px solid #d5e2f2;
      }

      .dot {
        width: .62rem;
        height: .62rem;
        border-radius: 50%;
        background: #9fb0c7;
      }

      .dot:nth-child(1) {
        background: #ef6b67;
      }

      .dot:nth-child(2) {
        background: #f0b44c;
      }

      .dot:nth-child(3) {
        background: #54b96d;
      }

      .mock-app {
        display: grid;
        grid-template-columns: 36% 1fr;
        min-height: 330px;
      }

      .mock-sidebar {
        padding: 1rem;
        background: var(--brand-deep);
        color: #dceafe;
      }

      .mock-item {
        height: 2.35rem;
        margin-bottom: .65rem;
        border-radius: 6px;
        background: rgba(255, 255, 255, .12);
      }

      .mock-item.active {
        background: var(--accent);
      }

      .mock-content {
        padding: 1.1rem;
      }

      .mock-field {
        height: 2.2rem;
        border: 1px solid #d7e2f2;
        border-radius: 6px;
        background: #fff;
      }

      .mock-table {
        border: 1px solid #d7e2f2;
        border-radius: 6px;
        overflow: hidden;
        background: #fff;
      }

      .mock-row {
        height: 2.1rem;
        border-bottom: 1px solid #edf3fb;
      }

      .mock-row:last-child {
        border-bottom: 0;
      }

      .section-pad {
        padding: 5.5rem 0;
      }

      .section-title {
        max-width: 780px;
      }

      .section-title h2 {
        font-weight: 800;
        font-size: clamp(2rem, 4vw, 3.15rem);
      }

      .section-title p {
        color: var(--muted);
        font-size: 1.08rem;
        line-height: 1.7;
      }

      .feature-card,
      .team-card,
      .tech-card {
        height: 100%;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 18px 46px rgba(23, 32, 51, .06);
      }

      .feature-card {
        padding: 1.35rem;
      }

      .icon-box {
        width: 3rem;
        height: 3rem;
        display: inline-grid;
        place-items: center;
        border-radius: 8px;
        color: #fff;
        background: var(--brand);
        font-size: 1.35rem;
        font-weight: 800;
      }

      .feature-card h3,
      .team-card h3,
      .tech-card h3 {
        font-size: 1.12rem;
        font-weight: 800;
      }

      .feature-card p,
      .team-card p,
      .tech-card p {
        color: var(--muted);
        line-height: 1.65;
      }

      .focus-band {
        background: #fff;
        border-block: 1px solid var(--line);
      }

      .focus-panel {
        border-radius: 8px;
        background:
          linear-gradient(135deg, rgba(37, 99, 235, .11), rgba(56, 189, 248, .14)),
          #ffffff;
        border: 1px solid var(--line);
        overflow: hidden;
      }

      .step {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
      }

      .step-number {
        flex: 0 0 2.35rem;
        width: 2.35rem;
        height: 2.35rem;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--brand-dark);
        color: #fff;
        font-weight: 800;
      }

      .gallery-placeholder {
        position: relative;
        overflow: hidden;
        min-height: 260px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 18px 46px rgba(23, 32, 51, .06);
      }

      .image-slot {
        aspect-ratio: 16 / 10;
        background: linear-gradient(135deg, #0b2447, #2563eb);
        overflow: hidden;
      }

      .image-slot img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }

      .placeholder-line {
        height: .72rem;
        border-radius: 999px;
        background: rgba(23, 32, 51, .18);
      }

      .placeholder-line.primary-line {
        background: rgba(37, 99, 235, .62);
      }

      .status-badge {
        background: var(--brand);
      }

      .gallery-caption {
        padding: 1rem 1.1rem;
      }

      .caption-kicker {
        display: inline-flex;
        margin-bottom: .45rem;
        color: var(--brand);
        font-size: .76rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
      }

      .tech-card {
        padding: 1.25rem;
      }

      .tech-badge {
        display: inline-flex;
        align-items: center;
        min-height: 2.3rem;
        padding: .35rem .75rem;
        border-radius: 999px;
        background: var(--soft);
        color: var(--brand-dark);
        font-weight: 800;
      }

      .security-section {
        color: #fff;
        background: var(--brand-deep);
      }

      .security-section .section-title p,
      .security-section .text-muted-soft {
        color: rgba(255, 255, 255, .74);
      }

      .security-box {
        height: 100%;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 8px;
        background: rgba(255, 255, 255, .07);
        padding: 1.2rem;
      }

      .team-card {
        padding: 1.1rem;
      }

      .avatar {
        width: 3.2rem;
        height: 3.2rem;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--brand);
        color: #fff;
        font-weight: 800;
      }

      .team-secondary .avatar {
        background: #52677f;
      }

      .teacher-card .avatar {
        background: var(--accent);
        color: #082f49;
      }

      footer {
        color: rgba(255, 255, 255, .78);
        background: #07162c;
      }

      @media (max-width: 991.98px) {
        .hero {
          min-height: auto;
          padding-top: 6.5rem;
        }

        .mock-app {
          grid-template-columns: 1fr;
        }

        .mock-sidebar {
          display: none;
        }
      }

      @media (max-width: 575.98px) {
        .hero h1 {
          font-size: 3.3rem;
        }

        .section-pad {
          padding: 4rem 0;
        }

        .hero-actions {
          width: 100%;
        }

        .hero-actions .btn {
          width: 100%;
        }
      }