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

    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

    :root {
      --gold: #C9A14A;
      --gold-light: #F2C14E;
      --graphite: #111216;
      --slate: #1E2027;
      --concrete: #2A2D36;
      --chalk: #F5F5F5;
      --chalk-70: rgba(245,245,245,0.7);
      --chalk-60: rgba(245,245,245,0.6);
      --chalk-40: rgba(245,245,245,0.4);
      --chalk-20: rgba(245,245,245,0.2);
      --gold-glow: rgba(201,161,74,0.12);
      --gold-border: rgba(201,161,74,0.25);
      --success: #22c55e;
      --danger: #ef4444;
      --warning: #f97316;
      --info: #3b82f6;
      --radius: 12px;
      --radius-lg: 16px;
      --max-w: 1200px;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--graphite);
      color: var(--chalk);
      line-height: 1.6;
      overflow-x: hidden;
    }

    .container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
    .section { padding: 48px 0; }
    .section-label {
      font-family: 'Sora', sans-serif;
      font-size: 13px; font-weight: 700; letter-spacing: 3px;
      text-transform: uppercase; color: var(--gold); margin-bottom: 16px;
    }
    .section-title {
      font-family: 'Sora', sans-serif;
      font-size: clamp(30px, 5vw, 46px); font-weight: 800; line-height: 1.15; margin-bottom: 20px;
    }
    .section-subtitle { font-size: 17px; color: var(--chalk-60); max-width: 620px; line-height: 1.7; }
    .gold { color: var(--gold); }
    .text-center { text-align: center; }
    .mx-auto { margin-left: auto; margin-right: auto; }

    /* Buttons */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 16px 36px; border-radius: var(--radius); font-weight: 700; font-size: 16px;
      letter-spacing: 0.5px; text-decoration: none; transition: all 0.3s; cursor: pointer; border: none;
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--gold), var(--gold-light));
      color: var(--graphite); box-shadow: 0 4px 24px rgba(201,161,74,0.3);
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(201,161,74,0.45); }
    .btn-outline { background: transparent; color: var(--gold); border: 2px solid var(--gold-border); }
    .btn-outline:hover { background: var(--gold-glow); border-color: var(--gold); }

    /* Nav */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      background: rgba(17,18,22,0.85); backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--gold-border);
    }
    .nav-inner {
      max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
      display: flex; align-items: center; justify-content: flex-start; gap: 20px;
      min-height: 72px; height: 72px;
    }
    .nav-logo {
      display: flex; align-items: center; gap: 14px; text-decoration: none;
      flex: 0 1 auto; min-width: 0;
    }
    .nav-logo img { height: 56px; width: auto; flex-shrink: 0; }
    .nav-logo .nav-memo {
      color: var(--chalk); text-decoration: none; font-size: 13px; font-weight: 600;
      letter-spacing: 0.06em; white-space: nowrap; flex-shrink: 0;
    }
    .nav-logo .nav-memo:hover { color: var(--gold); }
    .nav-logo span { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 800; color: var(--chalk); letter-spacing: 2px; }
    .nav-links {
      display: none; align-items: center; gap: 28px; list-style: none;
      margin: 0; padding: 0; flex: 1 1 auto; justify-content: flex-end;
    }
    .nav-cta { display: none; flex-shrink: 0; }
    .nav-links a { color: var(--chalk-60); text-decoration: none; font-size: 14px; font-weight: 600; transition: color 0.2s; }
    .nav-links a:hover { color: var(--gold); }
    .nav-links .nav-link-portal a { color: var(--gold); }
    .nav-links .nav-link-portal a:hover { color: var(--gold-light); }
    .nav-cta .btn { padding: 10px 18px; font-size: 13px; }
    .mobile-toggle {
      display: block; background: none; border: none; cursor: pointer; padding: 8px;
      margin-left: auto; flex-shrink: 0;
    }
    .mobile-toggle span { display: block; width: 24px; height: 2px; background: var(--gold); margin: 6px 0; }

    /* ═══════ HERO ═══════ */
    .hero { padding-top: 120px; padding-bottom: 40px; text-align: center; position: relative; }
    .hero::before {
      content: ''; position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
      width: 800px; height: 800px; background: radial-gradient(circle, rgba(201,161,74,0.08) 0%, transparent 70%); pointer-events: none;
    }
    .hero-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 28px;
      border-radius: 0;
      border: 2px solid #0a0a0a;
      background: linear-gradient(180deg, #f2d45c 0%, #e6b82e 100%);
      font-family: 'Sora', sans-serif;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.16em;
      color: #0a0a0a;
      margin-bottom: 32px;
      text-transform: uppercase;
    }
    .hero h1 { font-family: 'Sora', sans-serif; font-size: clamp(38px, 7vw, 68px); font-weight: 800; line-height: 1.08; margin-bottom: 24px; letter-spacing: -1px; }
    .hero p { font-size: clamp(16px, 2vw, 19px); color: var(--chalk-60); max-width: 580px; margin: 0 auto 40px; line-height: 1.7; }
    .hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

    /* Hero Devices */
    .hero-devices {
      margin-top: 64px; position: relative; display: flex; align-items: flex-end;
      justify-content: center; gap: 0; max-width: 1000px; margin-left: auto; margin-right: auto;
    }
    .device { position: relative; }
    .device-screen {
      background: var(--slate); overflow: hidden; border: 1px solid var(--gold-border);
    }
    .device-screen-inner { transform-origin: top left; }

    /* Desktop (center) */
    .device-desktop { z-index: 2; }
    .device-desktop .device-bezel {
      background: #1a1a1f; border-radius: 12px 12px 0 0; padding: 8px 8px 0; border: 2px solid #2a2a30;
    }
    .device-desktop .device-screen { border-radius: 4px 4px 0 0; width: 520px; height: 340px; overflow: hidden; }
    .device-desktop .device-screen-inner { transform: scale(0.45); width: 1155px; }
    .device-desktop .device-stand {
      width: 200px; height: 24px; margin: 0 auto;
      background: linear-gradient(180deg, #2a2a30, #1a1a1f);
      clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
    }
    .device-desktop .device-base {
      width: 260px; height: 10px; margin: 0 auto;
      background: #2a2a30; border-radius: 0 0 6px 6px;
    }

    /* Laptop (left) */
    .device-laptop { z-index: 1; margin-right: -60px; margin-bottom: 10px; }
    .device-laptop .device-bezel {
      background: #1a1a1f; border-radius: 10px 10px 0 0; padding: 6px 6px 0; border: 2px solid #2a2a30;
    }
    .device-laptop .device-screen { border-radius: 3px 3px 0 0; width: 340px; height: 213px; overflow: hidden; }
    .device-laptop .device-screen-inner { transform: scale(0.34); width: 1000px; }
    .device-laptop .device-keyboard {
      width: 370px; height: 12px; background: linear-gradient(180deg, #2a2a30, #1a1a1f);
      border-radius: 0 0 8px 8px; margin: 0 auto; border: 1px solid #333;
    }

    /* Phone (right) */
    .device-phone { z-index: 3; margin-left: -50px; margin-bottom: 10px; }
    .device-phone .device-bezel {
      background: #1a1a1f; border-radius: 20px; padding: 8px 5px; border: 2px solid #2a2a30;
    }
    .device-phone .device-notch {
      width: 60px; height: 6px; background: #1a1a1f; border-radius: 3px; margin: 0 auto 4px;
    }
    .device-phone .device-screen { border-radius: 12px; width: 150px; height: 280px; overflow: hidden; }
    .device-phone .device-screen-inner { transform: scale(0.38); width: 394px; transform-origin: top left; }
    .device-phone .device-home {
      width: 40px; height: 4px; background: #333; border-radius: 2px; margin: 6px auto 0;
    }

    @media (max-width: 968px) {
      .hero-devices { transform: scale(0.7); transform-origin: center bottom; }
      .device-laptop { display: none; }
      .device-phone { margin-left: -30px; }
    }
    @media (max-width: 640px) {
      .hero-devices { transform: scale(0.55); }
    }

    /* Trust Bar */
    .trust-bar { padding: 48px 0; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); }
    .trust-inner { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; }
    .trust-item { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border: 1px solid var(--gold-border); border-radius: var(--radius); background: var(--gold-glow); }
    .trust-icon { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-light)); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; color: var(--graphite); font-weight: 800; }
    .trust-text { font-size: 14px; font-weight: 700; }
    .trust-sub { font-size: 12px; color: var(--chalk-60); }

    /* ═══════ APP PANEL (shared mockup frame) ═══════ */
    .app-panel {
      background: var(--slate); border: 1px solid var(--gold-border); border-radius: var(--radius-lg);
      overflow: hidden; box-shadow: 0 32px 64px rgba(0,0,0,0.4);
    }
    .app-topbar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 20px; background: rgba(0,0,0,0.3); border-bottom: 1px solid var(--gold-border);
    }
    .app-topbar-logo { display: flex; align-items: center; gap: 8px; }
    .app-topbar-logo img { height: 40px; width: auto; }
    .app-topbar-logo span { font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 800; color: var(--chalk); letter-spacing: 1.5px; }
    .app-topbar-nav { display: flex; gap: 20px; }
    .app-topbar-nav span { font-size: 11px; color: var(--chalk-40); font-weight: 500; }
    .app-topbar-user { display: flex; align-items: center; gap: 8px; }
    .app-topbar-user span { font-size: 11px; color: var(--chalk-60); }
    .avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-light)); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--graphite); flex-shrink: 0; }
    .avatar-sm { width: 24px; height: 24px; font-size: 9px; }
    .app-body { padding: 20px; }

    /* Stat cards row */
    .stat-cards { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
    .stat-card {
      flex: 1; min-width: 120px; background: var(--concrete); border: 1px solid var(--gold-border);
      border-radius: 8px; padding: 12px 14px;
    }
    .stat-card-label { font-size: 9px; color: var(--chalk-40); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 4px; }
    .stat-card-value { font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 800; color: var(--chalk); }
    .stat-card-value.gold-text { color: var(--gold); }
    .stat-card-sub { font-size: 9px; color: var(--chalk-40); margin-top: 2px; }
    .stat-card-bar { height: 3px; border-radius: 2px; background: var(--gold-border); margin-top: 6px; overflow: hidden; }
    .stat-card-bar-fill { height: 100%; background: var(--gold); border-radius: 2px; }

    /* Grid layouts for panels */
    .panel-grid { display: grid; gap: 12px; }
    .panel-grid-2 { grid-template-columns: 1fr 1fr; }
    .panel-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
    .panel-grid-sidebar { grid-template-columns: 2fr 1fr; }
    .panel-grid-sidebar-left { grid-template-columns: 160px 1fr; }
    .panel-box {
      background: var(--concrete); border: 1px solid var(--gold-border);
      border-radius: 10px; padding: 14px;
    }
    .panel-box-title { font-size: 12px; font-weight: 700; color: var(--chalk); margin-bottom: 10px; }
    .panel-box-title .gold { font-size: 10px; font-weight: 600; }

    /* Table styles */
    .mini-table { width: 100%; border-collapse: collapse; }
    .mini-table th {
      text-align: left; font-size: 9px; color: var(--chalk-40); text-transform: uppercase;
      letter-spacing: 0.5px; padding: 6px 8px; border-bottom: 1px solid var(--gold-border); font-weight: 600;
    }
    .mini-table td { font-size: 11px; color: var(--chalk-70); padding: 8px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); }
    .mini-table td.gold-text { color: var(--gold); font-weight: 600; }

    /* Toggle */
    .toggle { width: 32px; height: 18px; border-radius: 9px; background: var(--concrete); border: 1px solid var(--chalk-20); position: relative; display: inline-block; }
    .toggle.on { background: var(--gold); border-color: var(--gold); }
    .toggle::after { content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--chalk); top: 2px; left: 2px; transition: 0.2s; }
    .toggle.on::after { left: 16px; }

    /* Status badge */
    .badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 9px; font-weight: 700; }
    .badge-success { background: rgba(34,197,94,0.15); color: var(--success); }
    .badge-danger { background: rgba(239,68,68,0.15); color: var(--danger); }
    .badge-warning { background: rgba(249,115,22,0.15); color: var(--warning); }
    .badge-info { background: rgba(59,130,246,0.15); color: var(--info); }
    .badge-gold { background: var(--gold-glow); color: var(--gold); }

    /* Progress bar */
    .progress-bar { height: 4px; background: var(--chalk-20); border-radius: 2px; overflow: hidden; }
    .progress-fill { height: 100%; border-radius: 2px; }
    .progress-fill.green { background: var(--success); }
    .progress-fill.gold { background: var(--gold); }
    .progress-fill.orange { background: var(--warning); }

    /* Gantt bars */
    .gantt-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .gantt-label { font-size: 9px; color: var(--chalk-60); width: 80px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .gantt-track { flex: 1; height: 14px; background: rgba(255,255,255,0.03); border-radius: 3px; position: relative; }
    .gantt-bar { height: 100%; border-radius: 3px; position: absolute; top: 0; }

    /* Form inputs (mockup) */
    .mock-input {
      background: var(--graphite); border: 1px solid var(--gold-border); border-radius: 6px;
      padding: 7px 10px; font-size: 10px; color: var(--chalk-70); width: 100%;
    }
    .mock-select::after { content: '▾'; font-size: 8px; color: var(--chalk-40); }
    .form-label { font-size: 9px; color: var(--chalk-40); margin-bottom: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
    .form-group { margin-bottom: 10px; }

    /* Create New Project mockup — portal-style (dark cards, gold accents) */
    .create-project-mockup .app-panel { background: var(--graphite); border-radius: 16px; }
    .create-project-mockup .app-body { padding: 24px; }
    .create-project-mockup .app-body > div:first-child { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 700; color: var(--chalk); margin-bottom: 20px; }
    .create-project-mockup .panel-box {
      background: var(--slate); border: 1px solid var(--gold-border); border-radius: 12px;
      padding: 16px; margin-bottom: 12px;
    }
    .create-project-mockup .panel-box-title { font-size: 11px; font-weight: 700; color: var(--chalk); margin-bottom: 12px; letter-spacing: 0.3px; }
    .create-project-mockup .mock-input {
      background: var(--graphite); border: 1px solid var(--gold-border); border-radius: 8px;
      padding: 8px 12px; font-size: 11px; color: var(--chalk);
    }
    .create-project-mockup .form-label { font-size: 9px; color: var(--chalk-60); letter-spacing: 0.8px; }
    .create-project-mockup .summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; margin-bottom: 8px; }
    .create-project-mockup .summary-row:last-child { margin-bottom: 0; }
    .create-project-mockup .summary-label { color: var(--chalk-60); }
    .create-project-mockup .summary-value { font-weight: 700; color: var(--chalk); }
    .create-project-mockup .summary-value.gold { color: var(--gold); }
    .create-project-mockup .role-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 11px; }
    .create-project-mockup .role-row:last-child { margin-bottom: 0; }
    .create-project-mockup .role-name { flex: 1; color: var(--chalk); }
    .create-project-mockup .role-role { font-size: 10px; color: var(--chalk-40); }
    .create-project-mockup .upload-zone {
      border: 2px dashed var(--gold-border); border-radius: 10px; padding: 20px; text-align: center;
      background: rgba(0,0,0,0.2);
    }
    .create-project-mockup .upload-zone .icon { font-size: 24px; margin-bottom: 6px; }
    .create-project-mockup .upload-zone .title { font-size: 12px; font-weight: 700; color: var(--chalk); margin-bottom: 4px; }
    .create-project-mockup .upload-zone .sub { font-size: 10px; color: var(--chalk-40); }
    .create-project-mockup .create-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
    .create-project-mockup .create-actions .btn-outline { background: var(--concrete); color: var(--chalk); border: 1px solid var(--gold-border); }
    .create-project-mockup .create-actions .btn-primary { background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: var(--graphite); }
    .create-project-mockup .avatar-sm.avatar-orange { background: #e07c3c; color: #fff; }
    .create-project-mockup .avatar-sm.avatar-red { background: #c94a4a; color: #fff; }
    .create-project-mockup .avatar-sm.avatar-green { background: var(--success); color: #fff; }
    .create-project-mockup .avatar-sm.avatar-blue { background: var(--info); color: #fff; }
    .create-project-mockup .gantt-bar.bar-orange { background: #e07c3c; }
    .create-project-mockup .gantt-bar.bar-red { background: #c94a4a; }
    .create-project-mockup .gantt-bar.bar-green { background: var(--success); }
    .create-project-mockup .gantt-bar.bar-blue { background: var(--info); }

    /* Annotation cards (AI section) */
    .annotation-card {
      padding: 10px 14px; border-radius: 8px; font-size: 11px; line-height: 1.5;
      position: relative; max-width: 260px;
    }
    .annotation-card h5 { font-size: 10px; font-weight: 700; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
    .annotation-card p { font-size: 10px; line-height: 1.5; opacity: 0.9; }
    .annotation-red { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.4); color: #fca5a5; }
    .annotation-green { background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.35); color: #86efac; }
    .annotation-blue { background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.35); color: #93c5fd; }
    .annotation-gold { background: var(--gold-glow); border: 1px solid var(--gold-border); color: var(--gold-light); }
    .annotation-card .btn-sm { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 9px; font-weight: 700; margin-top: 6px; cursor: default; }

    /* Donut chart (CSS only) */
    .donut-wrap { width: 120px; height: 120px; position: relative; margin: 0 auto; }
    .donut {
      width: 120px; height: 120px; border-radius: 50%;
      background: conic-gradient(var(--success) 0deg 259deg, var(--warning) 259deg 320deg, var(--danger) 320deg 340deg, var(--chalk-20) 340deg 360deg);
    }
    .donut-hole {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 72px; height: 72px; border-radius: 50%; background: var(--concrete);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
    }
    .donut-number { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 800; color: var(--chalk); line-height: 1; }
    .donut-label-sm { font-size: 8px; color: var(--chalk-40); margin-top: 2px; }

    /* Plan grid (AI floor plan mockup) */
    .plan-grid {
      background: #e8e0d0; border-radius: 8px; padding: 20px; position: relative;
      min-height: 320px; overflow: hidden;
    }
    .plan-grid-lines {
      position: absolute; inset: 0; opacity: 0.2;
      background-image: linear-gradient(rgba(0,0,0,0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.15) 1px, transparent 1px);
      background-size: 40px 40px;
    }
    .plan-room {
      position: absolute; border: 2px solid rgba(0,0,0,0.3); font-size: 10px;
      font-weight: 700; color: rgba(0,0,0,0.5); display: flex; align-items: center;
      justify-content: center; text-transform: uppercase; letter-spacing: 1px;
    }

    /* Geofence circle */
    .geo-map {
      background: linear-gradient(135deg, #2a3a2a 0%, #1a2a1a 100%);
      border-radius: 8px; min-height: 250px; position: relative; overflow: hidden;
      border: 1px solid var(--gold-border);
    }
    .geo-circle {
      position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%);
      width: 200px; height: 200px; border-radius: 50%;
      border: 2px solid var(--gold); background: rgba(201,161,74,0.08);
    }
    .geo-pin {
      position: absolute; width: 30px; height: 30px; border-radius: 50%;
      border: 2px solid var(--gold); background: var(--slate);
      display: flex; align-items: center; justify-content: center;
      font-size: 9px; font-weight: 700; color: var(--gold);
    }
    .geo-label { position: absolute; top: 12px; right: 14px; font-size: 11px; font-weight: 600; color: var(--gold); }

    /* Showcase layout */
    .showcase-row { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; padding: 0; }
    .showcase-row.reverse { grid-template-columns: 7fr 5fr; }
    .showcase-row.reverse .showcase-text { order: 1; }
    .showcase-text h3 { font-family: 'Sora', sans-serif; font-size: clamp(24px, 3vw, 34px); font-weight: 800; margin-bottom: 14px; line-height: 1.2; }
    .showcase-text p { font-size: 15px; color: var(--chalk-60); line-height: 1.8; margin-bottom: 20px; }
    .feature-tags { display: flex; flex-wrap: wrap; gap: 8px; }
    .feature-tag { padding: 5px 14px; border-radius: 100px; background: var(--gold-glow); border: 1px solid var(--gold-border); font-size: 12px; font-weight: 600; color: var(--gold); }

    /* Features grid */
    .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
    .feature-card { background: var(--slate); border: 1px solid var(--gold-border); border-radius: var(--radius-lg); padding: 28px; transition: all 0.3s; }
    .feature-card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 12px 40px rgba(201,161,74,0.12); }
    .feature-card-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--gold-glow); border: 1px solid var(--gold-border); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px; }
    .feature-card h4 { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 8px; }
    .feature-card p { font-size: 13px; color: var(--chalk-60); line-height: 1.7; }

    /* Stats section */
    .stats { padding: 48px 0; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); }
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
    .stat-item { text-align: center; }
    .stat-number { font-family: 'Sora', sans-serif; font-size: clamp(36px, 5vw, 52px); font-weight: 800; background: linear-gradient(135deg, var(--gold), var(--gold-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .stat-label { font-size: 13px; color: var(--chalk-60); margin-top: 6px; font-weight: 500; }

    /* CTA */
    .cta-section { text-align: center; }
    .cta-box { background: var(--slate); border: 1px solid var(--gold-border); border-radius: var(--radius-lg); padding: 64px; }
    .cta-badges { display: flex; gap: 24px; justify-content: center; margin-top: 32px; }
    .cta-badge { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--gold); }
    .cta-badge-icon { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-light)); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--graphite); font-weight: 800; }

    /* Footer */
    footer { padding: 48px 0 32px; border-top: 1px solid rgba(255,255,255,0.05); }
    .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
    .footer-logo { display: flex; align-items: center; gap: 10px; }
    .footer-logo img { height: 72px; width: auto; }
    .footer-logo span { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: 2px; }
    .footer-links { display: flex; gap: 32px; list-style: none; }
    .footer-links a { color: var(--chalk-60); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; }
    .footer-links a:hover { color: var(--gold); }
    .footer-copy { width: 100%; text-align: center; color: var(--chalk-40); font-size: 13px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.05); }
    .footer-rows { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
    .footer-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; list-style: none; margin: 0; padding: 0; }
    .footer-row--product a {
      color: var(--chalk-60);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      transition: color 0.2s;
    }
    .footer-row--product a:hover { color: var(--gold); }

    /* Home: brand hero + waitlist card */
    .hero-home { padding-bottom: 56px; }
    .hero-tagline { font-family: 'Sora', sans-serif; font-size: clamp(20px, 3.5vw, 28px); font-weight: 600; font-style: italic; color: var(--chalk-70); max-width: 520px; margin: -8px auto 28px; line-height: 1.45; }
    .hero-split h1 .line-gold { color: var(--gold); }
    .hero-split h1 .line-chalk { color: var(--chalk); }
    .waitlist-card {
      max-width: 440px; width: 100%; margin: 0 auto; background: var(--slate); border: 1px solid var(--gold-border);
      border-radius: var(--radius-lg); padding: 28px 28px 24px; text-align: center;
    }
    .waitlist-card h2 { font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 800; color: var(--chalk); margin: 0 0 6px; }
    .waitlist-card .waitlist-card-subtitle {
      font-family: 'Sora', sans-serif;
      font-size: 20px;
      font-weight: 800;
      color: var(--chalk);
      margin: 0 0 12px;
      line-height: 1.3;
    }
    .waitlist-card > p:not(.waitlist-card-subtitle) { font-size: 14px; color: var(--chalk-60); margin-bottom: 20px; line-height: 1.6; }
    .waitlist-card .btn {
      width: 100%; max-width: 100%; margin-bottom: 10px;
      box-sizing: border-box;
      text-align: center;
    }
    .page-hero { padding-top: 120px; padding-bottom: 32px; }
    .page-hero h1 { font-family: 'Sora', sans-serif; font-size: clamp(28px, 4vw, 40px); font-weight: 800; margin-bottom: 12px; }
    .page-hero .lead { color: var(--chalk-60); max-width: 640px; font-size: 17px; line-height: 1.65; }

    @media (min-width: 969px) {
      .nav-links { display: flex !important; margin-right: 36px; }
      .nav-links > li.nav-link-portal { display: none; }
      .nav-cta {
        display: flex !important; align-items: center; gap: 10px;
        flex-wrap: nowrap; justify-content: flex-end;
        margin-left: 8px;
      }
      .mobile-toggle { display: none !important; }
    }

    @media (min-width: 1100px) {
      .nav-cta .btn { padding: 10px 22px; font-size: 14px; }
    }

    /* Responsive */
    @media (max-width: 968px) {
      .showcase-row, .showcase-row.reverse { grid-template-columns: 1fr; gap: 32px; }
      .showcase-row.reverse .showcase-text { order: 0; }
      .features-grid { grid-template-columns: repeat(2, 1fr); }
      .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
      .panel-grid-2, .panel-grid-3, .panel-grid-sidebar, .panel-grid-sidebar-left { grid-template-columns: 1fr; }
      .stat-cards { flex-wrap: wrap; }
      .stat-card { min-width: calc(50% - 8px); }
      .nav-links, .nav-cta { display: none; }
      .mobile-toggle { display: block; }

      /* CRITICAL: Contain all panels to viewport width */
      .app-panel { max-width: 100%; overflow: hidden; }
      .app-panel .app-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }

      /* BYLDRbuddy AI: stack the 5-column flow vertically */
      .ai-flow-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
      .ai-flow-arrow { display: none !important; }

      /* Geofencing: stack map and table */
      .geo-layout { grid-template-columns: 1fr !important; }
      .geo-map { min-height: 220px; }
    }

    @media (max-width: 640px) {
      .container { padding: 0 16px; }
      .section { padding: 36px 0; }
      .section-title { font-size: clamp(26px, 6vw, 38px); }
      .section-subtitle { font-size: 15px; }

      /* CRITICAL: Prevent ANY element from overflowing viewport */
      .container, .section, .app-panel, .app-body { max-width: 100vw; }
      img, table, .panel-box, .panel-grid { max-width: 100%; }

      /* Hero */
      .hero { padding-top: 100px; padding-bottom: 24px; }
      .hero h1 { font-size: clamp(28px, 8vw, 48px); }
      .hero p { font-size: 15px; margin-bottom: 28px; }
      .hero-buttons { flex-direction: column; align-items: stretch; gap: 12px; }
      .hero-buttons .btn { width: 100%; text-align: center; padding: 14px 24px; }

      /* Features grid */
      .features-grid { grid-template-columns: 1fr; gap: 14px; }
      .feature-card { padding: 20px; }

      /* Stats */
      .stats { padding: 36px 0; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

      /* CTA */
      .cta-box { padding: 32px 16px; }
      .cta-badges { flex-direction: column; align-items: center; gap: 12px; }

      /* Showcase */
      .showcase-text h3 { font-size: clamp(22px, 5vw, 30px); }
      .showcase-text p { font-size: 14px; }
      .feature-tags { gap: 6px; }
      .feature-tag { font-size: 11px; padding: 4px 10px; }

      /* App panels — make internal grids stack */
      .app-panel .app-body { padding: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .app-panel .app-body > div[style*="grid-template-columns"] { min-width: 0; }
      .app-topbar { padding: 8px 12px; }
      .app-topbar-nav { display: none; }
      .app-topbar-logo img { height: 31px; }
      .stat-cards { gap: 6px; }
      .stat-card { min-width: calc(50% - 6px); padding: 10px; }
      .stat-card-value { font-size: 16px; }

      /* Donut chart */
      .donut-wrap { width: 100px; height: 100px; }
      .donut { width: 100px; height: 100px; }
      .donut-hole { width: 60px; height: 60px; }
      .donut-number { font-size: 18px; }

      /* Nav logo — keep bar height; room for memo + menu */
      .nav-logo { gap: 10px; }
      .nav-logo img { height: 44px; }
      .nav-logo .nav-memo { font-size: 12px; letter-spacing: 0.04em; }

      /* Footer */
      .footer-inner { flex-direction: column; text-align: center; }
      .footer-links { flex-wrap: wrap; justify-content: center; gap: 16px; }
      .footer-logo img { height: 58px; }

      /* Buttons general */
      .btn { padding: 14px 28px; font-size: 15px; }

      /* Contact form */
      .cta-section .btn { font-size: 16px !important; padding: 16px 32px !important; }

      /* BYLDRbuddy AI section */
      .ai-flow-grid { padding: 0 !important; }
      .ai-stats-bar { flex-wrap: wrap !important; gap: 20px !important; }
      .ai-stats-bar > div { min-width: calc(50% - 20px); }

      /* Geofencing on-site table */
      .geo-layout > div { overflow-x: auto; }

      /* Force inline-styled grids to stack on mobile */
      .dashboard-main-grid { grid-template-columns: 1fr !important; }
      .setup-grid { grid-template-columns: 1fr !important; }
      .accounting-grid { grid-template-columns: 1fr !important; }

      /* Team permissions table - scrollable wrapper */
      .app-panel table.mini-table { min-width: 0; font-size: 10px; }
    }

    /* Mobile nav overlay — Contact, portals, then Sign up / Login (centered) */
    .nav-open .nav-links {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: absolute;
      top: 72px;
      left: 0;
      right: 0;
      background: var(--graphite);
      border-bottom: 1px solid var(--gold-border);
      padding: 28px 24px 32px;
      margin: 0;
      gap: 0;
      z-index: 200;
      list-style: none;
    }
    .nav-open .nav-links > li {
      width: 100%;
      max-width: 320px;
      display: flex;
      justify-content: center;
    }
    .nav-open .nav-links > li + li { margin-top: 18px; }
    .nav-open .nav-links > li.nav-mobile-buttons { margin-top: 22px; }
    .nav-open .nav-links a { font-size: 18px; color: var(--chalk); }
    .nav-open .nav-links .nav-link-portal a { color: var(--gold); }
    .nav-mobile-buttons { display: none; }
    .nav-open .nav-mobile-buttons {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      padding-top: 22px;
      border-top: 1px solid var(--gold-border);
      width: 100%;
      max-width: 320px;
    }
    .nav-mobile-buttons .btn {
      width: 100%;
      max-width: 320px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      justify-content: center;
    }