:root {
      --navy: #0F1D3B;
      --navy-mid: #162747;
      --sky: #5BB8F5;
      --bright-blue: #3A9BDC;
      --accent: #1E3A8A;
      --skyline: #2563EB;
      --neutral: #F8F8F8;
      --white: #ffffff;
      --text-muted: #8fa3c0;
      --border: rgba(91, 184, 245, 0.18);
      --glow: rgba(91, 184, 245, 0.22);
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--navy);
      color: var(--white);
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      line-height: 1.65;
      overflow-x: hidden;
    }

    /* ── NOISE TEXTURE OVERLAY ── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 0;
      opacity: .4;
    }

    /* ── GRID PATTERN ── */
    .grid-bg {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(91, 184, 245, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 184, 245, .06) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
    }

    /* ── NAV ── */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 60px;
      background: rgba(15, 29, 59, .85);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
      gap: 16px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--white);
      text-decoration: none;
      font-family: 'Inter', sans-serif;
    }

    .logo img {
      height: 46px;
      width: auto;
      max-width: 100%;
      object-fit: contain;
    }

    .logo-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .logo-text-top {
      font-weight: 900;
      font-size: 1.4rem;
      line-height: 1;
      letter-spacing: -0.01em;
    }

    .logo-text-bottom {
      font-weight: 400;
      font-size: 1.15rem;
      line-height: 1;
      margin-top: 4px;
      letter-spacing: 0.02em;
    }

    .nav-links {
      display: flex;
      gap: 32px;
      list-style: none;
    }

    .nav-links a {
      color: var(--text-muted);
      text-decoration: none;
      font-size: .85rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      transition: color .2s;
    }

    .nav-links a:hover {
      color: var(--sky);
    }

    .nav-cta {
      display: flex;
      gap: 12px;
    }

    /* ── BUTTONS ── */
    .btn {
      padding: 11px 26px;
      border-radius: 6px;
      font-size: .85rem;
      font-weight: 600;
      letter-spacing: .05em;
      cursor: pointer;
      transition: all .2s;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: none;
    }

    .btn-primary {
      background: var(--sky);
      color: var(--navy);
    }

    .btn-primary:hover {
      background: var(--bright-blue);
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(91, 184, 245, .35);
    }

    .btn-outline {
      background: transparent;
      color: var(--sky);
      border: 1px solid var(--sky);
    }

    .btn-outline:hover {
      background: rgba(91, 184, 245, .1);
      transform: translateY(-1px);
    }

    .btn-large {
      padding: 16px 38px;
      font-size: 1rem;
      border-radius: 8px;
    }

    /* ── SECTIONS ── */
    section {
      position: relative;
      overflow: hidden;
    }

    .container {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 40px;
    }

    /* ── HERO ── */
    #hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding-top: 90px;
      background: radial-gradient(ellipse 70% 60% at 60% 50%, rgba(30, 58, 138, .35) 0%, transparent 70%);
    }

    .hero-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      width: 100%;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(91, 184, 245, .12);
      border: 1px solid var(--border);
      border-radius: 100px;
      padding: 6px 16px;
      font-size: .78rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--sky);
      margin-bottom: 24px;
    }

    .hero-eyebrow span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--sky);
      animation: pulse 2s infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .3
      }
    }

    h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.6rem, 5vw, 3.8rem);
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: -.02em;
      margin-bottom: 24px;
    }

    h1 em {
      font-style: normal;
      background: linear-gradient(135deg, var(--sky), var(--skyline));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .hero-sub {
      font-size: 1.1rem;
      color: var(--text-muted);
      max-width: 500px;
      margin-bottom: 36px;
      line-height: 1.75;
    }

    .hero-sub strong {
      color: var(--sky);
      font-weight: 600;
    }

    .hero-buttons {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }

    /* ── ORCHESTRATOR DIAGRAM ── */
    .diagram-card {
      background: rgba(22, 39, 71, .7);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 36px 28px;
      backdrop-filter: blur(10px);
      position: relative;
      overflow: hidden;
    }

    .diagram-card::before {
      content: '';
      position: absolute;
      top: -40px;
      right: -40px;
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, rgba(91, 184, 245, .15), transparent 70%);
      border-radius: 50%;
    }

    .diagram-title {
      text-align: center;
      font-size: .7rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 28px;
    }

    .flow {
      display: flex;
      align-items: center;
      gap: 0;
      justify-content: space-between;
      overflow: hidden;
    }

    .flow-col {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      flex: 1;
    }

    .flow-col-title {
      font-size: .65rem;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--text-muted);
      margin-bottom: 4px;
    }

    .flow-node {
      background: rgba(15, 29, 59, .8);
      border: 1px solid rgba(91, 184, 245, .25);
      border-radius: 10px;
      padding: 8px 12px;
      font-size: .72rem;
      color: var(--white);
      text-align: center;
      width: 100%;
      transition: border-color .3s;
    }

    .flow-node:hover {
      border-color: var(--sky);
    }

    .flow-center {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 0 10px;
    }

    .brain-node {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--skyline));
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      box-shadow: 0 0 40px rgba(37, 99, 235, .4), 0 0 80px rgba(37, 99, 235, .15);
      animation: brain-pulse 3s ease-in-out infinite;
      font-size: .62rem;
      text-align: center;
      font-weight: 600;
      letter-spacing: .04em;
      position: relative;
    }

    .brain-node::before {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 2px solid rgba(91, 184, 245, .3);
      animation: ring-spin 4s linear infinite;
    }

    @keyframes brain-pulse {

      0%,
      100% {
        box-shadow: 0 0 40px rgba(37, 99, 235, .4), 0 0 80px rgba(37, 99, 235, .15)
      }

      50% {
        box-shadow: 0 0 60px rgba(37, 99, 235, .6), 0 0 120px rgba(37, 99, 235, .25)
      }
    }

    @keyframes ring-spin {
      from {
        transform: rotate(0deg)
      }

      to {
        transform: rotate(360deg)
      }
    }

    .brain-icon {
      font-size: 1.5rem;
    }

    .brain-label {
      font-size: .55rem;
      color: rgba(255, 255, 255, .7);
      letter-spacing: .06em;
    }

    .badge-row {
      display: flex;
      gap: 6px;
      justify-content: center;
    }

    .badge {
      background: rgba(91, 184, 245, .15);
      border: 1px solid rgba(91, 184, 245, .3);
      border-radius: 100px;
      padding: 3px 8px;
      font-size: .58rem;
      color: var(--sky);
      letter-spacing: .05em;
    }

    .arrow {
      display: flex;
      align-items: center;
      color: var(--sky);
      font-size: 1.2rem;
      padding: 0 6px;
      animation: arrow-move 2s ease-in-out infinite;
    }

    @keyframes arrow-move {

      0%,
      100% {
        transform: translateX(0)
      }

      50% {
        transform: translateX(4px)
      }
    }
    @keyframes arrow-move-down {
      0%, 100% { transform: rotate(90deg) translateX(0); }
      50%      { transform: rotate(90deg) translateX(4px); }
    }


    .diagram-caption {
      text-align: center;
      font-size: .72rem;
      color: var(--text-muted);
      margin-top: 24px;
      font-style: italic;
    }

    /* ── SECTION HEADERS ── */
    .section-tag {
      display: inline-block;
      font-size: .7rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--sky);
      margin-bottom: 14px;
    }

    h2 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2rem, 3.5vw, 2.8rem);
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 16px;
    }

    h2 em {
      font-style: normal;
      background: linear-gradient(135deg, var(--sky), var(--skyline));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .section-intro {
      font-size: 1.05rem;
      color: var(--text-muted);
      max-width: 560px;
      margin-bottom: 56px;
    }

    /* ── PILLARS SECTION ── */
    #pillars {
      padding: 110px 0;
      background: linear-gradient(180deg, var(--navy) 0%, rgba(22, 39, 71, .4) 50%, var(--navy) 100%);
    }

    .pillars-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .pillar-card {
      background: rgba(22, 39, 71, .5);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 36px 28px;
      position: relative;
      overflow: hidden;
      transition: transform .3s, border-color .3s, box-shadow .3s;
    }

    .pillar-card:hover {
      transform: translateY(-6px);
      border-color: rgba(91, 184, 245, .4);
      box-shadow: 0 20px 60px rgba(30, 58, 138, .3);
    }

    .pillar-number {
      font-family: 'Playfair Display', serif;
      font-size: 4rem;
      font-weight: 900;
      color: rgba(91, 184, 245, .1);
      line-height: 1;
      position: absolute;
      top: 16px;
      right: 20px;
    }

    .pillar-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(91, 184, 245, .2), rgba(37, 99, 235, .2));
      border: 1px solid rgba(91, 184, 245, .3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 20px;
    }

    .pillar-card h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.2rem;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .pillar-card p {
      font-size: .88rem;
      color: var(--text-muted);
      line-height: 1.7;
    }

    .pillar-card p strong {
      color: var(--sky);
      font-weight: 500;
    }

    /* ── FLOW SECTION ── */
    #flow {
      padding: 110px 0;
      background: rgba(22, 39, 71, .2);
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      position: relative;
    }

    .steps::before {
      content: '';
      position: absolute;
      top: 38px;
      left: calc(16.6% + 20px);
      right: calc(16.6% + 20px);
      height: 1px;
      background: linear-gradient(90deg, var(--sky), rgba(91, 184, 245, .2), var(--sky));
    }

    .step {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 0 24px;
    }

    .step-num {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--skyline));
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Playfair Display', serif;
      font-size: 1.6rem;
      font-weight: 900;
      margin-bottom: 24px;
      box-shadow: 0 0 30px rgba(37, 99, 235, .35);
      position: relative;
      z-index: 1;
    }

    .step h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.15rem;
      margin-bottom: 10px;
    }

    .step p {
      font-size: .86rem;
      color: var(--text-muted);
      line-height: 1.7;
    }

    /* ── DEV FEATURES ── */
    #dev {
      padding: 110px 0;
    }

    .dev-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .dev-card {
      background: rgba(22, 39, 71, .5);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 28px 28px;
      display: flex;
      gap: 20px;
      align-items: flex-start;
      transition: border-color .3s, transform .3s;
    }

    .dev-card:hover {
      border-color: rgba(91, 184, 245, .4);
      transform: translateY(-3px);
    }

    .dev-icon {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
      border-radius: 10px;
      background: rgba(91, 184, 245, .1);
      border: 1px solid rgba(91, 184, 245, .25);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }

    .dev-card h3 {
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: 6px;
    }

    .dev-card p {
      font-size: .84rem;
      color: var(--text-muted);
      line-height: 1.65;
    }

    /* ── DASHBOARD SECTION ── */
    #dashboard {
      padding: 110px 0;
      background: rgba(22, 39, 71, .2);
    }

    .dash-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
    }

    .dash-mockup {
      background: rgba(15, 29, 59, .9);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
    }

    .dash-bar {
      background: rgba(22, 39, 71, .9);
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid var(--border);
    }

    .dash-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    .dash-body {
      padding: 20px;
    }

    .dash-stat-row {
      display: flex;
      gap: 12px;
      margin-bottom: 14px;
    }

    .dash-stat {
      flex: 1;
      background: rgba(22, 39, 71, .6);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px;
    }

    .dash-stat-label {
      font-size: .65rem;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--text-muted);
      margin-bottom: 6px;
    }

    .dash-stat-val {
      font-family: 'Playfair Display', serif;
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--sky);
    }

    .dash-chart {
      background: rgba(22, 39, 71, .4);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px;
      height: 90px;
      display: flex;
      align-items: flex-end;
      gap: 5px;
    }

    .bar {
      flex: 1;
      border-radius: 4px 4px 0 0;
      background: linear-gradient(180deg, var(--sky), var(--accent));
      opacity: .7;
      animation: bar-grow .8s ease-out both;
    }

    @keyframes bar-grow {
      from {
        transform: scaleY(0);
        transform-origin: bottom
      }

      to {
        transform: scaleY(1)
      }
    }

    .dash-right p {
      font-size: 1rem;
      color: var(--text-muted);
      line-height: 1.75;
      margin-bottom: 24px;
    }

    .dash-features {
      list-style: none;
    }

    .dash-features li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: .88rem;
      color: var(--text-muted);
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
    }

    .dash-features li:last-child {
      border-bottom: none;
    }

    .dash-features li::before {
      content: '✓';
      color: var(--sky);
      font-weight: 700;
      margin-top: 1px;
    }

    /* ── CTA SECTION ── */
    #cta {
      padding: 130px 0;
      text-align: center;
      background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(30, 58, 138, .3) 0%, transparent 70%);
    }

    .cta-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(91, 184, 245, .1);
      border: 1px solid var(--border);
      border-radius: 100px;
      padding: 8px 20px;
      font-size: .75rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--sky);
      margin-bottom: 28px;
    }

    #cta h2 {
      margin-bottom: 18px;
    }

    .cta-sub {
      font-size: 1.05rem;
      color: var(--text-muted);
      max-width: 520px;
      margin: 0 auto 40px;
    }

    /* ── FORM MODAL ── */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(8, 16, 34, .9);
      backdrop-filter: blur(14px);
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .modal-overlay.active {
      display: flex;
    }

    /* Grid inside overlay */
    .modal-overlay::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(91, 184, 245, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 184, 245, .04) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
    }

    /* Glow orb behind modal */
    .modal-overlay::after {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 700px;
      height: 400px;
      background: radial-gradient(ellipse, rgba(30, 58, 138, .35) 0%, transparent 70%);
      pointer-events: none;
    }

    .modal {
      background: rgba(22, 39, 71, .92);
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 52px 48px;
      width: 100%;
      max-width: 520px;
      position: relative;
      z-index: 1;
      backdrop-filter: blur(12px);
      box-shadow: 0 40px 80px rgba(10, 20, 40, .6);
      animation: modal-in .35s cubic-bezier(.16, 1, .3, 1);
      max-height: 90vh;
      overflow-y: auto;
    }

    @keyframes modal-in {
      from {
        opacity: 0;
        transform: translateY(28px) scale(.97)
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1)
      }
    }

    .modal::-webkit-scrollbar {
      width: 4px;
    }

    .modal::-webkit-scrollbar-track {
      background: transparent;
    }

    .modal::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 4px;
    }

    .modal-close {
      position: absolute;
      top: 18px;
      right: 22px;
      background: rgba(143, 163, 192, .1);
      border: 1px solid var(--border);
      border-radius: 50%;
      width: 32px;
      height: 32px;
      color: var(--text-muted);
      font-size: 1.1rem;
      cursor: pointer;
      transition: all .2s;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    .modal-close:hover {
      background: rgba(91, 184, 245, .15);
      color: var(--white);
      border-color: rgba(91, 184, 245, .4);
    }

    /* Modal header */
    .modal-header {
      text-align: center;
    }

    /* Modal logo */
    .modal-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 28px;
    }

    .modal-logo-icon {
      width: 40px;
      height: 40px;
      background: var(--sky);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }

    .modal-logo-text {
      font-family: 'Playfair Display', serif;
      font-weight: 700;
      font-size: 1rem;
      color: var(--white);
      line-height: 1.2;
    }

    .modal-logo-text span {
      display: block;
      font-size: .62rem;
      letter-spacing: .12em;
      color: var(--text-muted);
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      text-transform: uppercase;
    }

    /* Modal tag */
    .modal-tag {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: rgba(91, 184, 245, .1);
      border: 1px solid var(--border);
      border-radius: 100px;
      padding: 5px 14px;
      font-size: .7rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--sky);
      margin-bottom: 14px;
    }

    .modal-tag-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--sky);
      animation: pulse 2s infinite;
    }

    .modal h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.9rem;
      font-weight: 900;
      line-height: 1.15;
      margin-bottom: 10px;
    }

    .modal h3 em {
      font-style: normal;
      background: linear-gradient(135deg, var(--sky), var(--skyline));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .modal-subtitle {
      font-size: .9rem;
      color: var(--text-muted);
      margin-bottom: 28px;
      line-height: 1.65;
    }

    .modal-divider {
      height: 1px;
      background: var(--border);
      margin-bottom: 26px;
    }

    /* Form rows */
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .form-group {
      margin-bottom: 18px;
    }

    .form-group label {
      display: block;
      font-size: .72rem;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 7px;
      font-weight: 500;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      background: rgba(15, 29, 59, .7);
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 12px 15px;
      color: var(--white);
      font-family: 'Inter', sans-serif;
      font-size: .9rem;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
      -webkit-appearance: none;
    }

    .form-group input::placeholder,
    .form-group textarea::placeholder {
      color: rgba(143, 163, 192, .4);
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--sky);
      box-shadow: 0 0 0 3px rgba(91, 184, 245, .12);
    }

    .form-group select {
      cursor: pointer;
    }

    .form-group select option {
      background: var(--navy);
      color: var(--white);
    }

    .form-group textarea {
      resize: vertical;
      min-height: 90px;
    }

    /* Error states */
    .form-group.error input,
    .form-group.error select,
    .form-group.error textarea {
      border-color: #f87171;
      box-shadow: 0 0 0 3px rgba(248, 113, 113, .12);
    }

    .err-msg {
      display: none;
      font-size: .72rem;
      color: #f87171;
      margin-top: 5px;
    }

    .form-group.error .err-msg {
      display: block;
    }

    /* Submit button */
    .btn-submit {
      width: 100%;
      padding: 15px;
      background: var(--sky);
      color: var(--navy);
      border: none;
      border-radius: 9px;
      font-family: 'Inter', sans-serif;
      font-size: .95rem;
      font-weight: 700;
      letter-spacing: .04em;
      cursor: pointer;
      transition: background .2s, transform .15s, box-shadow .2s;
      margin-top: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .btn-submit:hover {
      background: var(--bright-blue);
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(91, 184, 245, .3);
    }

    .btn-submit:active {
      transform: translateY(0);
    }

    .btn-submit.loading {
      opacity: .7;
      pointer-events: none;
    }

    .form-note {
      text-align: center;
      font-size: .74rem;
      color: var(--text-muted);
      margin-top: 14px;
    }

    /* Success screen */
    .form-success {
      display: none;
      text-align: center;
      padding: 24px 0;
      animation: modal-in .4s ease-out;
    }

    .success-icon {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--skyline));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      margin: 0 auto 24px;
      box-shadow: 0 0 40px rgba(37, 99, 235, .4);
    }

    .form-success h4 {
      font-family: 'Playfair Display', serif;
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .form-success p {
      font-size: .92rem;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 24px;
    }

    .launch-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(91, 184, 245, .1);
      border: 1px solid var(--border);
      border-radius: 100px;
      padding: 8px 20px;
      font-size: .8rem;
      color: var(--sky);
      font-weight: 500;
    }



    /* ── FOOTER ── */
    footer {
      border-top: 1px solid var(--border);
      padding: 28px 0;
      text-align: center;
      font-size: .78rem;
      color: var(--text-muted);
    }

    footer strong {
      color: var(--sky);
    }

    /* ── ANIMATIONS ── */
    .fade-up {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity .7s, transform .7s;
    }

    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── RESPONSIVE ── */

    /* Tablet (≤900px) */
    @media (max-width: 900px) {
      nav {
        padding: 14px 24px;
      }

      .logo img {
        height: 38px;
        width: auto;
      }

      .nav-links {
        display: none;
      }

      .nav-cta .btn {
        padding: 8px 16px;
        font-size: 0.75rem;
        white-space: nowrap;
      }

      .hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
      }

      .hero-text {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .hero-sub {
        max-width: 100%;
        text-align: center;
      }

      .hero-buttons {
        justify-content: center;
      }

      .dash-layout {
        grid-template-columns: 1fr;
      }

      .pillars-grid,
      .steps {
        grid-template-columns: 1fr;
      }

      .steps::before {
        display: none;
      }

      .dev-grid {
        grid-template-columns: 1fr;
      }

      .container {
        padding: 0 24px;
      }

      .modal {
        padding: 36px 28px;
      }

      /* Diagram card on tablet */
      .diagram-card {
        padding: 28px 20px;
      }

      .flow-node {
        font-size: .65rem;
        padding: 7px 8px;
      }

      .brain-node {
        width: 80px;
        height: 80px;
      }
    }

    /* Mobile (≤600px) */
    @media (max-width: 600px) {
      nav {
        padding: 12px 16px;
        gap: 10px;
      }

      .logo img {
        height: 32px;
      }

      .nav-links {
        display: none;
      }

      .nav-cta {
        gap: 8px;
        flex-shrink: 0;
      }

      .nav-cta .btn-outline {
        display: none;
      }

      .nav-cta .btn-primary {
        padding: 9px 14px;
        font-size: 0.75rem;
        white-space: nowrap;
      }

      /* Hero */
      #hero {
        padding-top: 80px;
        min-height: auto;
        padding-bottom: 60px;
      }

      .hero-inner {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
      }

      .hero-text {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .hero-eyebrow {
        font-size: .7rem;
      }

      h1 {
        font-size: clamp(2rem, 8vw, 2.8rem);
      }

      .hero-sub {
        font-size: 1rem;
        max-width: 100%;
        text-align: center;
      }

      .hero-buttons {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 100%;
      }

      .hero-buttons .btn {
        width: 100%;
        justify-content: center;
        max-width: 320px;
      }

      /* Orchestration Diagram – compact vertical layout on small phones */
      .diagram-card {
        padding: 20px 14px;
      }

      .flow {
        flex-direction: column;
        gap: 12px;
        align-items: center;
      }

      .flow-col {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        width: 100%;
      }

      .flow-col-title {
        width: 100%;
        text-align: center;
        margin-bottom: 0;
      }

      .flow-node {
        width: auto;
        font-size: .7rem;
        padding: 6px 10px;
      }

      .arrow {
        animation: arrow-move-down 2s ease-in-out infinite;
        padding: 0;
      }


      .flow-center {
        padding: 0;
      }

      .brain-node {
        width: 72px;
        height: 72px;
      }

      .brain-icon {
        font-size: 1.2rem;
      }

      /* Sections spacing */
      #pillars,
      #flow,
      #dev,
      #dashboard {
        padding: 56px 0;
      }

      #cta {
        padding: 64px 0;
      }

      /* Flow section heading override (inline style has 70px) */
      #flow .fade-up {
        margin-bottom: 32px !important;
      }

      /* Gap between stacked steps on mobile */
      .steps {
        gap: 36px;
      }

      .step {
        padding: 0;
      }

      h2 {
        font-size: clamp(1.6rem, 6vw, 2.2rem);
      }

      .section-intro {
        font-size: .95rem;
        margin-bottom: 36px;
      }

      /* Pillar cards */
      .pillar-card {
        padding: 28px 20px;
      }

      /* Steps */
      .step {
        padding: 0 12px;
      }

      /* Dev cards */
      .dev-card {
        padding: 20px 16px;
        gap: 14px;
      }

      /* Dashboard */
      .dash-stat-val {
        font-size: 1.1rem;
      }

      /* Modal */
      .modal {
        padding: 36px 20px;
        border-radius: 16px;
        max-height: 95vh;
      }

      .modal h3 {
        font-size: 1.5rem;
      }

      .form-row {
        grid-template-columns: 1fr;
      }

      .container {
        padding: 0 16px;
      }
    }

    /* Very small phones (≤380px) */
    @media (max-width: 380px) {
      nav {
        padding: 10px 12px;
      }

      .logo img {
        height: 28px;
      }

      .nav-cta .btn-primary {
        padding: 8px 12px;
        font-size: 0.7rem;
      }

      h1 {
        font-size: 1.9rem;
      }

      .btn-large {
        padding: 13px 24px;
        font-size: .9rem;
      }
    }