/* Product-specific styles for AI Landing Page Management */
      :root {
        --bg: #07111f;
        --bg-2: #0b1729;
        --panel: rgba(14, 29, 50, 0.86);
        --panel-2: rgba(19, 39, 67, 0.78);
        --text: #edf6ff;
        --muted: #9bb0c6;
        --primary: #5be1ff;
        --primary-2: #6d78ff;
        --accent: #68f2bd;
        --warning: #ffce67;
        --danger: #ff7d8d;
        --line: rgba(255, 255, 255, 0.09);
        --shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
        --radius: 22px;
        --radius-sm: 14px;
        --max: 1180px;
      }

      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        font-family:
          Inter,
          ui-sans-serif,
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          sans-serif;
        color: var(--text);
        background:
          radial-gradient(
            circle at 10% 0%,
            rgba(91, 225, 255, 0.12),
            transparent 35%
          ),
          radial-gradient(
            circle at 90% 8%,
            rgba(109, 120, 255, 0.15),
            transparent 34%
          ),
          linear-gradient(180deg, #06101c 0%, #07111f 48%, #071421 100%);
        line-height: 1.55;
      }

      a {
        color: inherit;
        text-decoration: none;
      }
      button,
      input,
      select,
      textarea {
        font: inherit;
      }
      img {
        max-width: 100%;
      }
      .container {
        width: min(var(--max), calc(100% - 38px));
        margin: 0 auto;
      }
      .section {
        padding: 88px 0;
      }
      .section.compact {
        padding: 68px 0;
      }
      .muted {
        color: var(--muted);
      }
      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 8px 12px;
        color: var(--primary);
        background: var(--primary-glow);
        border: 1px solid var(--line2);
        border-radius: 999px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-bottom: 15px;
      }
      .eyebrow::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 20px rgba(104, 242, 189, 0.8);
      }
      h1,
      h2,
      h3,
      p {
        margin-top: 0;
      }
      h1 {
        font-size: clamp(44px, 6vw, 78px);
        line-height: 1.02;
        letter-spacing: -0.045em;
        margin-bottom: 24px;
      }
      h2 {
        font-size: clamp(32px, 4vw, 50px);
        letter-spacing: -0.035em;
        line-height: 1.08;
        margin-bottom: 18px;
      }
      h3 {
        font-size: 21px;
        line-height: 1.25;
        margin-bottom: 10px;
      }
      .gradient-text {
        background: var(--accent);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      /* Header */
      .nav-wrap {
        position: sticky;
        top: 0;
        z-index: 50;
        backdrop-filter: blur(18px);
        background: rgba(5, 13, 24, 0.74);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }
      .nav {
        height: 74px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 22px;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 11px;
        font-weight: 850;
        letter-spacing: -0.02em;
      }
      .brand small {
        display: block;
        color: var(--muted);
        font-size: 10px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        margin-top: -2px;
      }
      .nav-links {
        display: flex;
        align-items: center;
        gap: 24px;
        color: #bdcad8;
        font-size: 14px;
        font-weight: 650;
      }
      .nav-links a:hover {
        color: #fff;
      }
      
      .mobile-menu {
        display: none;
      }
section{
    padding:88px 0px;
}
      .hero-grid {
        display: grid;
        grid-template-columns: 1.03fr 0.97fr;
        gap: 56px;
        align-items: center;
      }
      .hero-copy > p {
        font-size: 19px;
        color: #acc1d5;
        max-width: 710px;
        margin-bottom: 28px;
      }
      .hero-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 28px;
      }
      .trust-row {
        display: flex;
        gap: 18px;
        flex-wrap: wrap;
        color: #9db3c8;
        font-size: 13px;
      }
      .trust-row span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
      }
      .check {
        width: 18px;
        height: 18px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(104, 242, 189, 0.12);
        color: var(--accent);
        font-size: 11px;
        border: 1px solid rgba(104, 242, 189, 0.2);
      }
      .hero-ui {
        position: relative;
        border-radius: 28px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: linear-gradient(
          180deg,
          rgba(16, 33, 56, 0.95),
          rgba(9, 20, 36, 0.94)
        );
        box-shadow: var(--shadow);
        padding: 18px;
      }
      .hero-ui::before {
        content: "";
        position: absolute;
        inset: -1px;
        z-index: -1;
        border-radius: 28px;
        background: linear-gradient(
          130deg,
          rgba(91, 225, 255, 0.35),
          transparent 34%,
          rgba(109, 120, 255, 0.2),
          transparent 70%
        );
        filter: blur(18px);
      }
      .window-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2px 3px 14px;
        color: #93a9bf;
        font-size: 12px;
      }
      .dots {
        display: flex;
        gap: 6px;
      }
      .dots i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.22);
        display: block;
      }
      .app-shell {
        display: grid;
        grid-template-columns: 144px 1fr;
        min-height: 475px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 18px;
        overflow: hidden;
        background: #091523;
      }
      .sidebar {
        padding: 18px 12px;
        border-right: 1px solid var(--line);
        background: #08121f;
      }
      .side-brand {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        margin-bottom: 24px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, #5be1ff, #777dff);
        color: #07111f;
        font-weight: 900;
      }
      .side-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #70869b;
        padding: 9px 8px;
        border-radius: 9px;
        margin-bottom: 6px;
        font-size: 10px;
        font-weight: 700;
      }
      .side-item.active {
        background: rgba(91, 225, 255, 0.09);
        color: #cdf8ff;
      }
      .side-icon {
        width: 7px;
        height: 7px;
        border-radius: 2px;
        background: currentColor;
        opacity: 0.8;
      }
      .dashboard {
        padding: 16px;
        overflow: hidden;
      }
      .dash-head {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
        margin-bottom: 14px;
      }
      .dash-head strong {
        font-size: 13px;
      }
      .mini-btn {
        font-size: 9px;
        padding: 6px 9px;
        border-radius: 7px;
        background: rgba(91, 225, 255, 0.12);
        color: #bff6ff;
      }
      .metric-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 10px;
      }
      .mini-card {
        border: 1px solid rgba(255, 255, 255, 0.06);
        background: rgba(255, 255, 255, 0.025);
        border-radius: 11px;
        padding: 10px;
      }
      .mini-card small {
        display: block;
        color: #7f95aa;
        font-size: 8px;
        margin-bottom: 5px;
      }
      .mini-card b {
        font-size: 15px;
      }
      .up {
        color: var(--accent);
        font-size: 8px;
        margin-left: 4px;
      }
      .builder-card {
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 13px;
        padding: 12px;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.025),
          rgba(255, 255, 255, 0.012)
        );
        margin-bottom: 10px;
      }
      .builder-title {
        display: flex;
        justify-content: space-between;
        font-size: 10px;
        margin-bottom: 10px;
      }
      .field {
        border: 1px solid rgba(255, 255, 255, 0.07);
        background: #07111d;
        border-radius: 8px;
        padding: 8px 9px;
        color: #8da3b8;
        font-size: 8px;
        margin-bottom: 7px;
      }
      .chips {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
      }
      .chip {
        font-size: 7px;
        color: #a9bfd4;
        padding: 5px 7px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background: rgba(255, 255, 255, 0.025);
      }
      .chip.active {
        color: #d0faff;
        background: rgba(91, 225, 255, 0.09);
        border-color: rgba(91, 225, 255, 0.18);
      }
      .preview {
        display: grid;
        grid-template-columns: 1.4fr 0.6fr;
        gap: 9px;
      }
      .preview-box {
        min-height: 105px;
        border-radius: 11px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        background: linear-gradient(
          135deg,
          rgba(109, 120, 255, 0.12),
          rgba(91, 225, 255, 0.05)
        );
        padding: 11px;
      }
      .sk {
        height: 6px;
        background: rgba(255, 255, 255, 0.12);
        border-radius: 99px;
        margin-bottom: 6px;
      }
      .sk.sm {
        width: 52%;
        height: 5px;
        opacity: 0.7;
      }
      .sk.md {
        width: 76%;
      }
      .sk.lg {
        width: 92%;
      }
      .preview-side {
        display: grid;
        gap: 9px;
      }
      .preview-side .mini-card {
        min-height: 48px;
      }

      /* Logo strip */
      .strip {
        display: none;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        background: rgba(255, 255, 255, 0.018);
      }
      .strip-inner {
        display: grid;
        grid-template-columns: 1.1fr repeat(4, 1fr);
        align-items: center;
        min-height: 92px;
        gap: 22px;
        color: #8299af;
        text-align: center;
      }
      .strip-inner strong {
        color: #d7e4ef;
        text-align: left;
        font-size: 13px;
      }
      .strip-item {
        font-weight: 800;
        letter-spacing: 0.04em;
        font-size: 12px;
        opacity: 0.9;
      }

      /* Sections */
      .section-head {
        max-width: 760px;
        margin-bottom: 40px;
      }
      .section-head.center {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }
      .cards-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
      }
      .cards-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
      }
      .card {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 24px;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.1);
      }
      .card p {
        color: var(--muted);
        margin-bottom: 0;
        font-size: 14px;
      }
      .icon {
        width: 44px;
        height: 44px;
        border-radius: 13px;
        display: grid;
        place-items: center;
        margin-bottom: 18px;
        background: linear-gradient(
          135deg,
          rgba(91, 225, 255, 0.15),
          rgba(109, 120, 255, 0.12)
        );
        color: #9ff1ff;
        border: 1px solid rgba(91, 225, 255, 0.14);
      }
      .icon svg {
        width: 21px;
        height: 21px;
      }

      /* Problem */
      .problem-grid {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: 38px;
        align-items: start;
      }
      .problem-list {
        display: grid;
        gap: 10px;
      }
      .problem-row {
        display: grid;
        grid-template-columns: 36px 1fr auto;
        gap: 12px;
        align-items: center;
        padding: 15px 16px;
        border-radius: 14px;
        border: 1px solid var(--line);
      }
      .problem-row .n {
        width: 31px;
        height: 31px;
        border-radius: 9px;
        display: grid;
        place-items: center;
        background: rgba(255, 125, 141, 0.1);
        color: #ff9dab;
        font-weight: 800;
        font-size: 12px;
      }
      .problem-row b {
        display: block;
        font-size: 14px;
      }
      .problem-row span {
        color: #8197ac;
        font-size: 12px;
      }
      .problem-row .impact {
        color: #ffb0bb;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
      }

      /* Workflow */
      .workflow {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
        position: relative;
      }
      .workflow::before {
        content: "";
        position: absolute;
        left: 8%;
        right: 8%;
        top: 28px;
        height: 1px;
        background: linear-gradient(
          90deg,
          rgba(91, 225, 255, 0.1),
          rgba(91, 225, 255, 0.55),
          rgba(109, 120, 255, 0.5),
          rgba(104, 242, 189, 0.2)
        );
      }
      .step {
        position: relative;
        z-index: 1;
      }
      .step-num {
        width: 56px;
        height: 56px;
        border-radius: 17px;
        display: grid;
        place-items: center;
        margin-bottom: 18px;
        font-weight: 900;
        background: #0b1a2d;
        border: 1px solid rgba(91, 225, 255, 0.22);
        color: var(--primary);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
      }
      .step p {
        color: var(--muted);
        font-size: 13px;
      }

      /* AI builder demo */
      .demo-wrap {
        display: grid;
        grid-template-columns: 0.88fr 1.12fr;
        gap: 22px;
        align-items: stretch;
      }
      .control-panel,
      .result-panel {
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 24px;
        padding: 24px;
      }
      .label {
        display: block;
        color: #b5c5d5;
        font-size: 12px;
        font-weight: 750;
        margin-bottom: 8px;
      }
      .input,
      .select,
      .textarea {
        width: 100%;
        color: #e7f4ff;
        background: var(--bg2);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 11px;
        padding: 12px 13px;
        outline: none;
      }
      .input:focus,
      .select:focus,
      .textarea:focus {
        border-color: rgba(91, 225, 255, 0.48);
        box-shadow: 0 0 0 3px rgba(91, 225, 255, 0.06);
      }
      .form-group {
        margin-bottom: 15px;
      }
      .two-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
      .generate {
        width: 100%;
        margin-top: 4px;
      }
      .result-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 18px;
      }
      .status {
        display: inline-flex;
        gap: 7px;
        align-items: center;
        font-size: 11px;
        color: #baf8df;
        padding: 6px 9px;
        border-radius: 999px;
        border: 1px solid rgba(104, 242, 189, 0.16);
        background: rgba(104, 242, 189, 0.07);
      }
      .status i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
      }
      .score-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 9px;
        margin-bottom: 16px;
      }
      .score {
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 12px;
        padding: 11px;
        background: rgba(255, 255, 255, 0.025);
      }
      .score small {
        color: #8298ad;
        display: block;
        margin-bottom: 4px;
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      .score b {
        font-size: 18px;
      }
      .page-preview {
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 15px;
        overflow: hidden;
        background: #fff;
        color: #10202d;
      }
      .page-preview .pp-top {
        height: 34px;
        background: #edf3f8;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 0 10px;
      }
      .page-preview .pp-top i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #c8d4dd;
      }
      .pp-body {
        padding: 20px;
        background: linear-gradient(160deg, #f7fbff, #ecf8ff 55%, #f5f5ff);
        min-height: 215px;
      }
      .pp-tag {
        display: inline-block;
        font-size: 8px;
        font-weight: 800;
        padding: 5px 7px;
        border-radius: 999px;
        background: #dff7ff;
        color: #0c6680;
        margin-bottom: 9px;
      }
      .pp-title {
        font-weight: 900;
        font-size: 25px;
        line-height: 1.05;
        max-width: 350px;
        margin-bottom: 9px;
        letter-spacing: -0.035em;
      }
      .pp-copy {
        color: #52697b;
        font-size: 9px;
        max-width: 390px;
        margin-bottom: 13px;
      }
      .pp-btn {
        display: inline-block;
        padding: 8px 10px;
        border-radius: 8px;
        background: #102e4b;
        color: white;
        font-size: 8px;
        font-weight: 800;
      }
      .pp-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 7px;
        margin-top: 17px;
      }
      .pp-stat {
        background: rgba(255, 255, 255, 0.68);
        border: 1px solid #e1ebf2;
        border-radius: 8px;
        padding: 8px;
        font-size: 8px;
      }
      .pp-stat b {
        display: block;
        font-size: 12px;
      }

      /* Feature matrix */
      .feature-list {
        display: grid;
        gap: 12px;
      }
      .feature-line {
        display: grid;
        grid-template-columns: 38px 1fr;
        gap: 13px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.065);
        padding: 0 0 15px;
      }
      .feature-line:last-child {
        border-bottom: 0;
      }
      .feature-line .bubble {
        width: 36px;
        height: 36px;
        border-radius: 11px;
        display: grid;
        place-items: center;
        background: rgba(91, 225, 255, 0.08);
        border: 1px solid rgba(91, 225, 255, 0.13);
        color: #8eebff;
        font-size: 12px;
        font-weight: 900;
      }
      .feature-line p {
        margin-bottom: 0;
        color: var(--muted);
        font-size: 13px;
      }
      .feature-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
      }
      .feature-panel {
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 22px;
        padding: 24px;
        background: var(--bg-2);
      }

      /* Architecture */
      .architecture {
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr;
        gap: 14px;
        align-items: stretch;
      }
      .arch-col {
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.025);
        border-radius: 18px;
        padding: 18px;
      }
      .arch-col h3 {
        font-size: 16px;
      }
      .arch-item {
        padding: 10px 11px;
        margin-top: 8px;
        border-radius: 10px;
        font-size: 11px;
        color: #a9bed1;
        border: 1px solid rgba(255, 255, 255, 0.06);
        background: #081421;
      }
      .arrow {
        display: grid;
        place-items: center;
        color: #69dff8;
        font-size: 24px;
      }

      /* KPIs */
      .kpi-band {
        border: 1px solid var(--line);
        border-radius: 26px;
        padding: 27px;
        display: grid;
        grid-template-columns: 1.15fr repeat(4, 1fr);
        gap: 16px;
        align-items: center;
      }
      .kpi-intro h3 {
        font-size: 20px;
        margin-bottom: 5px;
      }
      .kpi-intro p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
      }
      .kpi {
        padding-left: 16px;
        border-left: 1px solid rgba(255, 255, 255, 0.09);
      }
      .kpi b {
        font-size: 30px;
        display: block;
        letter-spacing: -0.03em;
      }
      .kpi span {
        color: #8da4ba;
        font-size: 11px;
      }

      /* Use cases */
      .usecase {
        position: relative;
        overflow: hidden;
      }
      .usecase .tag {
        display: inline-block;
        color: #bfefff;
        background: rgba(91, 225, 255, 0.07);
        border: 1px solid rgba(91, 225, 255, 0.13);
        border-radius: 999px;
        padding: 5px 8px;
        font-size: 10px;
        font-weight: 800;
        margin-bottom: 14px;
      }
      .usecase ul {
        padding-left: 17px;
        margin-bottom: 0;
        color: var(--muted);
        font-size: 13px;
      }
      .usecase li {
        margin: 6px 0;
      }

      /* Comparison */
      .compare {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.02);
      }
      .compare th,
      .compare td {
        padding: 15px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.065);
        text-align: left;
        font-size: 13px;
      }
      .compare th {
        color: #dcecf8;
        background: rgba(255, 255, 255, 0.025);
      }
      .compare td {
        color: #94aac0;
      }
      .compare tr:last-child td {
        border-bottom: 0;
      }
      .compare .good {
        color: #bdf8dd;
        font-weight: 800;
      }
      .compare .bad {
        color: #f3a4ae;
      }
      .compare .label-col {
        color: #d7e5ef;
        font-weight: 700;
      }

      /* FAQ */
      .faq {
        display: grid;
        gap: 10px;
        max-width: 900px;
        margin: 0 auto;
      }
      .faq-item {
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.025);
        border-radius: 15px;
        overflow: hidden;
      }
      .faq-q {
        width: 100%;
        background: none;
        border: 0;
        color: #eaf6ff;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 17px 18px;
        cursor: pointer;
        font-weight: 760;
      }
      .faq-q span:last-child {
        width: 26px;
        height: 26px;
        border-radius: 8px;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, 0.04);
        color: #7fdff4;
      }
      .faq-a {
        display: none;
        padding: 0 18px 18px;
        color: #93a9be;
        font-size: 14px;
      }
      .faq-item.open .faq-a {
        display: block;
      }
      .faq-item.open .faq-q span:last-child {
        transform: rotate(45deg);
      }

      /* CTA */
      .cta {
        border-radius: 30px;
        padding: 48px;
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(
            circle at 12% 20%,
            rgba(91, 225, 255, 0.18),
            transparent 32%
          ),
          radial-gradient(
            circle at 85% 20%,
            rgba(109, 120, 255, 0.2),
            transparent 38%
          ),
          linear-gradient(135deg, #0a1b30, #0b1628);
        border: 1px solid rgba(91, 225, 255, 0.16);
      }
      .cta::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
          linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
          );
        background-size: 28px 28px;
        mask-image: linear-gradient(to bottom, black, transparent);
      }
      .cta > * {
        position: relative;
      }
      .cta-grid {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 28px;
        align-items: center;
      }
      .cta h2 {
        margin-bottom: 12px;
      }
      .cta p {
        color: #a7bccf;
        max-width: 650px;
        margin-bottom: 0;
      }
      .cta-actions {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        flex-wrap: wrap;
      }

      footer {
        padding: 40px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        color: #8299ad;
        font-size: 13px;
      }
      .footer-grid {
        display: flex;
        justify-content: space-between;
        gap: 28px;
        flex-wrap: wrap;
        align-items: center;
      }
      .footer-links {
        display: flex;
        gap: 18px;
        flex-wrap: wrap;
      }
      .footer-links a:hover {
        color: #dcebf7;
      }

      @media (max-width: 980px) {
        .nav-links {
          display: none;
        }
        .mobile-menu {
          display: inline-flex;
        }
        .hero-grid,
        .problem-grid,
        .demo-wrap,
        .feature-layout,
        .cta-grid {
          grid-template-columns: 1fr;
        }
        .hero {
          padding-top: 65px;
        }
        .hero-ui {
          max-width: 760px;
        }
        .cards-4 {
          grid-template-columns: repeat(2, 1fr);
        }
        .workflow {
          grid-template-columns: 1fr 1fr;
        }
        .workflow::before {
          display: none;
        }
        .architecture {
          grid-template-columns: 1fr;
        }
        .arrow {
          transform: rotate(90deg);
          min-height: 25px;
        }
        .kpi-band {
          grid-template-columns: 1fr 1fr;
        }
        .kpi-intro {
          grid-column: 1 / -1;
        }
        .kpi {
          border-left: 0;
          padding-left: 0;
        }
        .cta-actions {
          justify-content: flex-start;
        }
      }

      @media (max-width: 700px) {
        .section {
          padding: 70px 0;
        }
        .nav {
          height: 66px;
        }
        .nav .btn-primary {
          display: none;
        }
        .hero {
          padding-top: 48px;
        }
        .hero-copy > p {
          font-size: 16px;
        }
        .app-shell {
          grid-template-columns: 1fr;
          min-height: 410px;
        }
        .sidebar {
          display: none;
        }
        .cards-3,
        .cards-4,
        .workflow,
        .score-grid,
        .kpi-band {
          grid-template-columns: 1fr;
        }
        .strip-inner {
          grid-template-columns: 1fr 1fr;
          padding: 18px 0;
        }
        .strip-inner strong {
          grid-column: 1/-1;
          text-align: center;
        }
        .two-col {
          grid-template-columns: 1fr;
        }
        .metric-grid {
          grid-template-columns: 1fr 1fr;
        }
        .preview {
          grid-template-columns: 1fr;
        }
        .preview-side {
          grid-template-columns: 1fr 1fr;
        }
        .cta {
          padding: 30px 22px;
        }
        .compare {
          min-width: 720px;
        }
        .table-scroll {
          overflow: auto;
          border-radius: 18px;
        }
        .kpi b {
          font-size: 26px;
        }
      }