:root {
      --aap-bg: #fcfcfc;
      --aap-surface: #fcfcfc;
      --aap-sidebar: #f9f9f9;
      --aap-border: #e5e5e7;
      --aap-active: #ececec;
      --aap-text: #0d0d0d;
      --aap-muted: #6e6e80;
      --aap-accent: #0d0d0d;
      --aap-accent-hover: #0d0d0d;
      --aap-dark: #1f2023;
      --aap-sidebar-w: 264px;
      --aap-sidebar-w-collapsed: 72px;
      --aap-hover: #ececec;
    }

    body {
      background-color: var(--aap-bg);
      color: var(--aap-text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    .text-muted-aap { color: var(--aap-muted) !important; }
    .display-hero {
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.08;
      font-size: 1.5rem;
    }
    .lead-aap { font-size: clamp(1rem, 1.4vw, 1.25rem); color: var(--aap-muted); }

    .btn-accent {
      background-color: var(--aap-accent);
      border-color: var(--aap-accent);
      color: #fff;
      font-weight: 600;
    }
    .btn-accent:hover,
    .btn-accent:focus {
      background-color: var(--aap-accent-hover);
      border-color: var(--aap-accent-hover);
      color: #fff;
    }
    .btn-outline-dark-aap {
      border-color: var(--aap-border);
      color: var(--aap-text);
      font-weight: 600;
      background-color: var(--aap-surface);
    }
    .btn-outline-dark-aap:hover {
      background-color: #f0f0f1;
      color: var(--aap-text);
    }

    .brand-mark {
      width: 40px; height: 40px;
      background-color: var(--aap-accent);
      color: #fff; font-weight: 700; font-size: 1.25rem;
      border-radius: 11px;
      display: inline-flex; align-items: center; justify-content: center;
    }

    /* ===== Sidebar (ChatGPT-style, collapsible) ===== */
    .sidebar {
      width: var(--aap-sidebar-w);
      background-color: var(--aap-sidebar);
      border-right: 1px solid var(--aap-border);
      position: fixed;
      top: 0; bottom: 0; left: 0;
      display: flex;
      flex-direction: column;
      z-index: 1045;
      transition: width 0.2s ease, transform 0.25s ease;
      overflow: hidden;
    }

    .sidebar-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
      padding: .65rem .65rem .65rem .75rem;
      min-height: 60px;
    }
    .sidebar-collapse-btn {
      width: 36px; height: 36px;
      border-radius: 8px;
      border: none;
      background: transparent;
      color: var(--aap-muted);
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background-color .15s ease;
      cursor: pointer;
    }
    .sidebar-collapse-btn:hover { background-color: var(--aap-hover); color: var(--aap-text); }

    .sidebar-scroll { overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; }
    .sidebar .nav-section {
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      font-weight: 700;
      color: var(--aap-muted);
      text-transform: uppercase;
      padding: 0 1rem;
      white-space: nowrap;
    }
    .sidebar .nav-link {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      color: var(--aap-text);
      font-weight: 500;
      border-radius: 10px;
      padding: 0.6rem 0.75rem;
      margin: 0.1rem 0.5rem;
      font-size: .85rem;
      white-space: nowrap;
      overflow: hidden;
    }
    .sidebar .nav-link i { font-size: 1.05rem; color: var(--aap-muted); width: 1.25rem; flex-shrink: 0; text-align: center; }
    .sidebar .nav-link:hover { background-color: var(--aap-hover); }
    .sidebar .nav-link.active { background-color: var(--aap-active); }
    .sidebar .nav-link.active i { color: var(--aap-text); }
    .sidebar .nav-label { overflow: hidden; text-overflow: ellipsis; transition: opacity .15s ease; }

    .sidebar-footer { border-top: 1px solid var(--aap-border); padding: .6rem; }

    .upgrade-card {
      display: flex;
      align-items: center;
      gap: .65rem;
      width: 100%;
      border: none;
      background: transparent;
      border-radius: 10px;
      padding: .55rem .6rem;
      text-align: left;
      cursor: pointer;
      transition: background-color .15s ease;
      text-decoration: none;
      color: var(--aap-text);
    }
    .upgrade-card:hover { background-color: var(--aap-hover); }
    .upgrade-icon {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: linear-gradient(135deg, #b06ab3, #4568dc);
      color: #fff;
      flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: .95rem;
    }
    .upgrade-text { line-height: 1.2; overflow: hidden; }
    .upgrade-text .t1 { font-weight: 600; font-size: .85rem; white-space: nowrap; }
    .upgrade-text .t2 { font-size: .72rem; color: var(--aap-muted); white-space: nowrap; }

    .account-row {
      display: flex;
      align-items: center;
      gap: .65rem;
      width: 100%;
      border: none;
      background: transparent;
      border-radius: 10px;
      padding: .5rem .6rem;
      text-align: left;
      cursor: pointer;
      transition: background-color .15s ease;
      color: var(--aap-text);
    }
    .account-row:hover { background-color: var(--aap-hover); }
    .account-avatar {
      width: 30px; height: 30px;
      border-radius: 50%;
      background-color: var(--aap-accent);
      color: #fff;
      font-weight: 700;
      font-size: .8rem;
      flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .account-text { line-height: 1.2; overflow: hidden; }
    .account-text .t1 { font-weight: 600; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .account-text .t2 { font-size: .72rem; color: var(--aap-muted); white-space: nowrap; }

    .guest-actions { display: grid; gap: .5rem; padding: .25rem .1rem; }

    /* ===== Collapsed state (desktop only) ===== */
    .sidebar.collapsed { width: var(--aap-sidebar-w-collapsed); }
    .sidebar.collapsed .nav-label,
    .sidebar.collapsed .nav-section,
    .sidebar.collapsed .upgrade-text,
    .sidebar.collapsed .account-text,
    .sidebar.collapsed .guest-actions .btn-label { opacity: 0; width: 0; }
    .sidebar.collapsed .nav-link { justify-content: center; padding-left: 0; padding-right: 0; margin: 0.1rem .65rem; }
    .sidebar.collapsed .nav-link i { width: auto; }
    .sidebar.collapsed .sidebar-head { justify-content: center; padding: .85rem; }
    .sidebar.collapsed .sidebar-head .brand-text { display: none; }
    .sidebar.collapsed .sidebar-collapse-btn { margin: 0 auto; }
    .sidebar.collapsed .upgrade-card,
    .sidebar.collapsed .account-row { justify-content: center; padding: .55rem; }
    .sidebar.collapsed .guest-actions { justify-items: center; }
    .sidebar.collapsed .guest-actions .btn { width: 36px; height: 36px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }

    .main {
      margin-left: var(--aap-sidebar-w);
      min-height: 100vh;
      background-color: var(--aap-surface);
      transition: margin-left 0.2s ease;
    }
    .main.collapsed { margin-left: var(--aap-sidebar-w-collapsed); }

    .sidebar-backdrop {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 1044;
      display: none;
    }

    .topbar {
      background-color: rgba(247,247,248,0.85);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--aap-border);
      position: sticky; top: 0; z-index: 1030;
    }

    @media (max-width: 991.98px) {
      .sidebar { transform: translateX(-100%); background-color: var(--aap-sidebar); width: var(--aap-sidebar-w) !important; }
      .sidebar.open { transform: translateX(0); }
      .sidebar.open + .sidebar-backdrop { display: block; }
      .sidebar .nav-label, .sidebar .nav-section, .sidebar .upgrade-text, .sidebar .account-text { opacity: 1; width: auto; }
      .sidebar .nav-link { justify-content: flex-start; padding-left: .75rem; padding-right: .75rem; }
      .main, .main.collapsed { margin-left: 0; }
      .sidebar-desktop-toggle { display: none; }
	  #hero {
			min-height: calc(100dvh - 72px);
		}
    }

    /* ===== Content ===== */
    .surface {
      background-color: var(--aap-surface);
      border: 1px solid var(--aap-border);
      border-radius: 16px;
    }
    .surface-hover { transition: transform .15s ease, box-shadow .15s ease; }
    .surface-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px rgba(31, 32, 35, 0.08);
    }

    .feature-icon {
      width: 46px; height: 46px;
      border-radius: 11px;
      display: inline-flex; align-items: center; justify-content: center;
      background-color: rgba(16, 163, 127, 0.1);
      color: var(--aap-accent);
      font-size: 1.35rem;
    }

    .prompt-box {
      background-color: var(--aap-surface);
      border: 1px solid var(--aap-border);
      border-radius: 18px;
      box-shadow: 0 16px 40px rgba(31, 32, 35, 0.06);
    }
    .prompt-box input {
      border: none;
      box-shadow: none !important;
      background: transparent;
    }
    .chip {
      background-color: #f0f0f1;
      border: 1px solid var(--aap-border);
      color: var(--aap-muted);
      border-radius: 999px;
      font-size: .85rem;
      padding: .35rem .8rem;
      cursor: pointer;
      transition: all .15s ease;
    }
    .chip:hover { background-color: #e7e7e9; color: var(--aap-text); }

    .step-num {
      width: 40px; height: 40px;
      border-radius: 50%;
      background-color: var(--aap-dark);
      color: #fff; font-weight: 700;
      display: inline-flex; align-items: center; justify-content: center;
    }

    .stat-num {
      font-weight: 700;
      font-size: clamp(2rem, 4vw, 3rem);
      color: var(--aap-accent);
      line-height: 1;
    }

    .cta-band { background-color: var(--aap-dark); color: #fff; border-radius: 20px; }

    .accordion-button:not(.collapsed) {
      background-color: rgba(16, 163, 127, 0.08);
      color: var(--aap-text);
      box-shadow: none;
    }
    .accordion-button:focus { box-shadow: none; border-color: var(--aap-border); }
    .accordion-item { border-color: var(--aap-border); border-radius: 12px !important; overflow: hidden; }

    .section-eyebrow {
      text-transform: uppercase;
      letter-spacing: .12em;
      font-size: .78rem;
      font-weight: 700;
      color: var(--aap-accent);
    }
	#hero {
    min-height: 100svh;     /* Small viewport height */
    min-height: 100dvh;     /* Dynamic viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
	}
	
	.surface {
      background-color: var(--aap-surface);
      border: 1px solid var(--aap-border);
      border-radius: 18px;
    }

    .page-title {
      font-weight: 800;
      letter-spacing: -0.02em;
      font-size: clamp(2rem, 4vw, 3rem);
    }
    .req { color: var(--aap-accent); }

    .form-control, .form-select {
      border: 1px solid var(--aap-border);
      padding: 0.75rem 0.9rem;
      border-radius: 11px;
    }
    .form-control:focus, .form-select:focus {
      border-color: var(--aap-accent);
      box-shadow: 0 0 0 0.2rem rgba(16,163,127,0.15);
    }
    .form-label { font-weight: 600; }

    /* Phone mockup */
    .phone {
      width: 280px;
      max-width: 100%;
      border-radius: 38px;
      background: var(--aap-dark);
      padding: 14px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.18);
      margin: 0 auto;
    }
    .phone-notch {
      width: 120px; height: 22px;
      background: var(--aap-dark);
      border-radius: 0 0 14px 14px;
      margin: 0 auto 6px;
    }
    .phone-screen {
      background: var(--aap-surface);
      border-radius: 26px;
      overflow: hidden;
      aspect-ratio: 9 / 17;
      display: flex;
      flex-direction: column;
    }
    .phone-bar {
      background: var(--aap-accent);
      color: #fff;
      padding: 0.85rem 1rem;
      display: flex; align-items: center; justify-content: space-between;
      font-weight: 700;
    }
    .phone-body {
      flex: 1;
      padding: 1.25rem;
      display: flex; flex-direction: column; justify-content: center; gap: 0.85rem;
      text-align: center;
      background: linear-gradient(180deg, #ffffff 0%, #f3f6f5 100%);
    }
	
	  .page-icon {
      width: 48px; height: 48px;
      border-radius: 12px;
      background-color: #eef3f1;
      color: var(--aap-accent);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
    }

    .search-wrap .form-control {
      background-color: var(--aap-surface);
      border: 1px solid var(--aap-border);
      padding-left: 2.75rem;
      height: 52px;
      border-radius: 12px;
    }
    .search-wrap { position: relative; }
    .search-wrap i {
      position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
      color: var(--aap-muted);
    }

    .app-card {
      background-color: var(--aap-surface);
      border: 1px solid var(--aap-border);
      border-radius: 16px;
      height: 100%;
      transition: box-shadow 0.2s ease, transform 0.2s ease;
    }
    .app-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.06); transform: translateY(-2px); }
    .app-thumb {
      width: 56px; height: 56px;
      border-radius: 14px;
      background-color: var(--aap-accent);
      color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 1.5rem;
    }
    .badge-platform {
      background-color: #e6f4ee;
      color: #137a5c;
      font-weight: 600;
    }
    .badge-layout {
      background-color: #eef0fb;
      color: #4a52a3;
      font-weight: 600;
    }

    .topbar {
      background-color: rgba(247,247,248,0.85);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--aap-border);
      position: sticky; top: 0; z-index: 1030;
    }

    .sidebar-backdrop {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 1044;
      display: none;
    }

    @media (max-width: 991.98px) {
      .sidebar { transform: translateX(-100%); background-color: var(--aap-sidebar);}
	  
      .sidebar.open { transform: translateX(0); }
      .sidebar.open + .sidebar-backdrop { display: block; }
      .main { margin-left: 0; }
	  #hero {
			min-height: calc(100dvh - 72px);
		}
    }
	.auth-card {
      background-color: var(--aap-surface);
      border: 1px solid var(--aap-border);
      border-radius: 20px;
      box-shadow: 0 10px 40px rgba(31, 32, 35, 0.06);
    }

    .form-control {
      border-color: var(--aap-border);
      padding: 0.7rem 0.9rem;
    }
    .form-control:focus {
      border-color: var(--aap-accent);
      box-shadow: 0 0 0 0.2rem rgba(16, 163, 127, 0.15);
    }

    .input-group-text {
      background-color: var(--aap-bg);
      border-color: var(--aap-border);
      color: var(--aap-muted);
    }

    .auth-link { color: var(--aap-accent); text-decoration: none; font-weight: 600; }
    .auth-link:hover { color: var(--aap-accent-hover); text-decoration: underline; }

    .divider {
      display: flex; align-items: center; gap: 0.75rem;
      color: var(--aap-muted); font-size: 0.85rem;
    }
    .divider::before, .divider::after {
      content: ""; flex: 1; height: 1px; background-color: var(--aap-border);
    }

    .btn-social {
      background-color: var(--aap-surface);
      border: 1px solid var(--aap-border);
      color: var(--aap-text);
      font-weight: 500;
    }
    .btn-social:hover { background-color: var(--aap-bg); }

    .brand-link { text-decoration: none; color: var(--aap-text); }