/* ═══════════════════════════════════════════
       CSS VARIABLES & RESET
    ═══════════════════════════════════════════ */
    :root {
      --blue-950: #06101f;
      --blue-900: #0a1628;
      --blue-800: #0f2140;
      --blue-700: #132d5e;
      --blue-600: #1a3f7a;
      --blue-500: #2563eb;
      --blue-400: #3b82f6;
      --blue-300: #60a5fa;
      --blue-200: #93c5fd;
      --blue-100: #dbeafe;
      --blue-50:  #eff6ff;

      --gray-900: #111827;
      --gray-800: #1f2937;
      --gray-700: #374151;
      --gray-600: #4b5563;
      --gray-500: #6b7280;
      --gray-400: #9ca3af;
      --gray-300: #d1d5db;
      --gray-200: #e5e7eb;
      --gray-100: #f3f4f6;
      --gray-50:  #f9fafb;

      --white: #ffffff;
      --accent: #2563eb;
      --success: #10b981;
      --warning: #f59e0b;
      --danger: #ef4444;

      --font-display: 'Playfair Display', Georgia, serif;
      --font-body: 'DM Sans', system-ui, sans-serif;

      --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
      --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
      --shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
      --shadow-xl: 0 24px 60px rgba(0,0,0,0.12);
      --shadow-glow: 0 0 60px rgba(37, 99, 235, 0.15);

      --radius-sm: 10px;
      --radius-md: 14px;
      --radius-lg: 20px;
      --radius-xl: 28px;
    }

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

    html { scroll-behavior: smooth; scroll-padding-top: 80px; }

    body {
      font-family: var(--font-body);
      color: var(--gray-800);
      background: var(--white);
      line-height: 1.6;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* ═══════════════════════════════════════════
       UTILITIES
    ═══════════════════════════════════════════ */
    .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

    .section-label {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--blue-500);
      background: var(--blue-50); border: 1px solid var(--blue-100);
      padding: 7px 18px; border-radius: 100px; margin-bottom: 18px;
    }

    .section-title {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 500; color: var(--gray-900);
      line-height: 1.15; margin-bottom: 14px;
    }

    .section-subtitle {
      font-size: 1.05rem; color: var(--gray-500);
      max-width: 580px; line-height: 1.7;
    }

    .section-header { text-align: center; margin-bottom: 60px; }
    .section-header .section-subtitle { margin: 0 auto; }

    /* ═══════════════════════════════════════════
       ANIMATIONS
    ═══════════════════════════════════════════ */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(32px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-12px); }
    }
    @keyframes gradient-drift {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    @keyframes bar-grow {
      from { transform: scaleY(0); }
      to   { transform: scaleY(1); }
    }
    @keyframes pulse-ring {
      0%   { transform: scale(1); opacity: 0.5; }
      100% { transform: scale(2.2); opacity: 0; }
    }

    .reveal {
      opacity: 0; transform: translateY(32px);
      transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                  transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    .stagger .reveal:nth-child(1) { transition-delay: 0.04s; }
    .stagger .reveal:nth-child(2) { transition-delay: 0.1s; }
    .stagger .reveal:nth-child(3) { transition-delay: 0.16s; }
    .stagger .reveal:nth-child(4) { transition-delay: 0.22s; }
    .stagger .reveal:nth-child(5) { transition-delay: 0.28s; }

    /* ═══════════════════════════════════════════
       NAVBAR
    ═══════════════════════════════════════════ */
    .navbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
      padding: 16px 0;
      transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .navbar.scrolled {
      background: rgba(255,255,255,0.88);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border-bottom: 1px solid rgba(0,0,0,0.06);
      padding: 10px 0; box-shadow: 0 1px 20px rgba(0,0,0,0.04);
    }
    .navbar .container { display: flex; justify-content: space-between; align-items: center; }

    .nav-brand {
      display: flex; align-items: center; gap: 10px;
      text-decoration: none; color: var(--white); transition: color 0.3s;
    }
    .navbar.scrolled .nav-brand { color: var(--gray-900); }

    .nav-brand-icon {
      width: 38px; height: 38px;
      background: linear-gradient(135deg, var(--blue-500), var(--blue-400));
      border-radius: 10px; display: flex; align-items: center; justify-content: center;
      color: white; font-size: 0.9rem; font-weight: 700;
      box-shadow: 0 2px 12px rgba(37, 99, 235, 0.3);
    }
    .nav-brand-text { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }

    .nav-links { display: flex; list-style: none; gap: 4px; align-items: center; }
    .nav-links a {
      text-decoration: none; color: rgba(255,255,255,0.7);
      font-size: 0.87rem; font-weight: 500; padding: 8px 16px;
      border-radius: 8px; transition: all 0.25s;
    }
    .nav-links a:hover { color: var(--white); background: rgba(255,255,255,0.1); }
    .navbar.scrolled .nav-links a { color: var(--gray-500); }
    .navbar.scrolled .nav-links a:hover { color: var(--gray-900); background: var(--gray-100); }

    .nav-cta {
      background: var(--blue-500) !important; color: var(--white) !important;
      font-weight: 600 !important; padding: 9px 22px !important;
      border-radius: 8px !important; box-shadow: 0 2px 10px rgba(37,99,235,0.25);
    }
    .nav-cta:hover { background: var(--blue-400) !important; transform: translateY(-1px); }

    .nav-toggle {
      display: none; background: none; border: none;
      color: var(--white); font-size: 1.4rem; cursor: pointer; padding: 8px;
    }
    .navbar.scrolled .nav-toggle { color: var(--gray-800); }

    /* ═══════════════════════════════════════════
       HERO
    ═══════════════════════════════════════════ */
    .hero {
      position: relative; min-height: 100vh; display: flex;
      align-items: center; background: var(--blue-950); overflow: hidden;
    }
    .hero::before {
      content: ''; position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 90% 70% at 15% 35%, rgba(37, 99, 235, 0.2) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 85% 20%, rgba(59, 130, 246, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 50% 90%, rgba(96, 165, 250, 0.08) 0%, transparent 50%);
      animation: gradient-drift 15s ease infinite; background-size: 200% 200%;
    }
    .hero::after {
      content: ''; position: absolute; inset: 0;
      background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 32px 32px;
    }

    .hero-content {
      position: relative; z-index: 2;
      display: grid; grid-template-columns: 1fr 1.1fr;
      gap: 64px; align-items: center; padding: 130px 0 90px;
    }
    .hero-text { animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

    .hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(37, 99, 235, 0.15); border: 1px solid rgba(37, 99, 235, 0.25);
      color: var(--blue-200); font-size: 0.78rem; font-weight: 600;
      padding: 7px 18px; border-radius: 100px; margin-bottom: 28px; letter-spacing: 0.04em;
    }
    .hero-badge .pulse {
      width: 8px; height: 8px; background: var(--success); border-radius: 50%; position: relative;
    }
    .hero-badge .pulse::after {
      content: ''; position: absolute; inset: -3px; border-radius: 50%;
      background: var(--success); animation: pulse-ring 2s ease-out infinite;
    }

    .hero h1 {
      font-family: var(--font-display); font-size: clamp(2.4rem, 4.5vw, 3.6rem);
      font-weight: 500; color: var(--white); line-height: 1.12; margin-bottom: 22px;
    }
    .hero h1 em { font-style: italic; color: var(--blue-300); }

    .hero-desc {
      font-size: 1.08rem; color: rgba(255,255,255,0.5);
      line-height: 1.75; margin-bottom: 38px; max-width: 480px;
    }
    .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

    .btn {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: var(--font-body); font-size: 0.93rem; font-weight: 600;
      padding: 14px 28px; border-radius: var(--radius-sm);
      border: none; cursor: pointer; text-decoration: none;
      transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .btn-primary {
      background: var(--blue-500); color: var(--white);
      box-shadow: 0 4px 24px rgba(37, 99, 235, 0.35);
    }
    .btn-primary:hover {
      background: var(--blue-400); transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(37, 99, 235, 0.4);
    }
    .btn-ghost {
      background: rgba(255,255,255,0.07); color: var(--white);
      border: 1px solid rgba(255,255,255,0.12);
    }
    .btn-ghost:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.25); }

    /* Hero visual */
    .hero-visual {
      position: relative;
      animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards; opacity: 0;
    }
    .hero-mockup {
      background: rgba(255,255,255,0.05); backdrop-filter: blur(30px);
      border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg);
      padding: 20px; box-shadow: var(--shadow-xl), var(--shadow-glow);
    }
    .mockup-bar {
      display: flex; align-items: center; gap: 7px;
      padding-bottom: 16px; margin-bottom: 16px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .mockup-dot { width: 10px; height: 10px; border-radius: 50%; }
    .mockup-dot.r { background: #ef4444; }
    .mockup-dot.y { background: #f59e0b; }
    .mockup-dot.g { background: #10b981; }
    .mockup-bar-title {
      margin-left: auto; font-size: 0.72rem;
      color: rgba(255,255,255,0.35); font-weight: 500; letter-spacing: 0.03em;
    }
    .mockup-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
    .mockup-kpi {
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.05);
      border-radius: var(--radius-sm); padding: 14px;
    }
    .mockup-kpi-label {
      font-size: 0.65rem; color: rgba(255,255,255,0.35);
      text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px;
    }
    .mockup-kpi-val { font-size: 1.2rem; font-weight: 700; color: var(--white); }
    .mockup-kpi-val.t-green { color: var(--success); }
    .mockup-kpi-val.t-blue  { color: var(--blue-300); }

    .mockup-chart-area {
      background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05);
      border-radius: var(--radius-sm); padding: 16px;
    }
    .mockup-chart-label {
      font-size: 0.65rem; color: rgba(255,255,255,0.35);
      text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px;
    }
    .chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 70px; }
    .chart-bar {
      flex: 1; border-radius: 4px 4px 0 0; transform-origin: bottom;
      animation: bar-grow 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; opacity: 0.9;
    }
    .chart-bar:nth-child(odd) { background: var(--blue-500); }
    .chart-bar:nth-child(even) { background: var(--blue-300); }
    .chart-bar:nth-child(1) { height: 50%; animation-delay: 0.6s; }
    .chart-bar:nth-child(2) { height: 75%; animation-delay: 0.65s; }
    .chart-bar:nth-child(3) { height: 40%; animation-delay: 0.7s; }
    .chart-bar:nth-child(4) { height: 90%; animation-delay: 0.75s; }
    .chart-bar:nth-child(5) { height: 60%; animation-delay: 0.8s; }
    .chart-bar:nth-child(6) { height: 100%; animation-delay: 0.85s; }
    .chart-bar:nth-child(7) { height: 55%; animation-delay: 0.9s; }
    .chart-bar:nth-child(8) { height: 82%; animation-delay: 0.95s; }

    .hero-pill {
      position: absolute; border-radius: var(--radius-md);
      background: rgba(255,255,255,0.07); backdrop-filter: blur(16px);
      border: 1px solid rgba(255,255,255,0.1); padding: 12px 18px;
      display: flex; align-items: center; gap: 10px;
      animation: float 5s ease-in-out infinite;
      box-shadow: 0 8px 30px rgba(0,0,0,0.15); z-index: 3;
    }
    .hero-pill-icon {
      width: 34px; height: 34px; border-radius: 9px;
      display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
    }
    .hero-pill-text { font-size: 0.8rem; color: var(--white); line-height: 1.3; }
    .hero-pill-text small { display: block; font-size: 0.68rem; color: rgba(255,255,255,0.45); }
    .hero-pill-1 { top: 22%; right: -16px; }
    .hero-pill-1 .hero-pill-icon { background: rgba(16, 185, 129, 0.2); color: var(--success); }
    .hero-pill-2 { bottom: 18%; left: -10px; animation-delay: 2s; }
    .hero-pill-2 .hero-pill-icon { background: rgba(245, 158, 11, 0.2); color: var(--warning); }

    /* ═══════════════════════════════════════════
       ABOUT
    ═══════════════════════════════════════════ */
    .about { padding: 110px 0; background: var(--white); }
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
    .about-card {
      background: var(--gray-50); border: 1px solid var(--gray-200);
      border-radius: var(--radius-lg); padding: 44px;
      transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      position: relative; overflow: hidden;
    }
    .about-card::after {
      content: ''; position: absolute; top: 0; left: 0; right: 0;
      height: 3px; border-radius: 3px 3px 0 0; transition: opacity 0.3s; opacity: 0;
    }
    .about-card:hover::after { opacity: 1; }
    .about-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
    .about-card.problem::after { background: var(--danger); }
    .about-card.solution::after { background: var(--success); }
    .about-icon {
      width: 56px; height: 56px; border-radius: var(--radius-md);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem; margin-bottom: 22px;
    }
    .about-card.problem .about-icon { background: #fef2f2; color: var(--danger); }
    .about-card.solution .about-icon { background: #ecfdf5; color: var(--success); }
    .about-card h3 {
      font-family: var(--font-display); font-size: 1.45rem;
      font-weight: 500; color: var(--gray-900); margin-bottom: 14px;
    }
    .about-card p { color: var(--gray-500); line-height: 1.8; font-size: 0.95rem; }

    /* ═══════════════════════════════════════════
       FEATURES
    ═══════════════════════════════════════════ */
    .features { padding: 110px 0; background: var(--gray-50); border-top: 1px solid var(--gray-200); }
    .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .feature-card {
      background: var(--white); border: 1px solid var(--gray-200);
      border-radius: var(--radius-lg); padding: 36px 30px;
      transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      position: relative; overflow: hidden;
    }
    .feature-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--blue-500), var(--blue-300));
      transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease;
    }
    .feature-card:hover::before { transform: scaleX(1); }
    .feature-card:hover { box-shadow: var(--shadow-lg); border-color: var(--blue-100); transform: translateY(-5px); }

    .feature-icon {
      width: 50px; height: 50px; border-radius: var(--radius-md);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.2rem; margin-bottom: 22px; transition: all 0.35s;
    }
    .fi-blue   { background: var(--blue-50); color: var(--blue-500); }
    .fi-green  { background: #ecfdf5; color: #059669; }
    .fi-amber  { background: #fffbeb; color: #d97706; }
    .fi-violet { background: #f5f3ff; color: #7c3aed; }
    .fi-rose   { background: #fff1f2; color: #e11d48; }
    .feature-card:hover .fi-blue   { background: var(--blue-500); color: var(--white); }
    .feature-card:hover .fi-green  { background: #059669; color: var(--white); }
    .feature-card:hover .fi-amber  { background: #d97706; color: var(--white); }
    .feature-card:hover .fi-violet { background: #7c3aed; color: var(--white); }
    .feature-card:hover .fi-rose   { background: #e11d48; color: var(--white); }
    .feature-card h3 { font-size: 1.08rem; font-weight: 600; color: var(--gray-900); margin-bottom: 10px; }
    .feature-card p { color: var(--gray-500); font-size: 0.9rem; line-height: 1.7; }

    .feature-card.wide {
      grid-column: span 2; display: grid;
      grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: center;
    }
    .feature-visual {
      background: var(--gray-50); border: 1px solid var(--gray-200);
      border-radius: var(--radius-md); padding: 22px;
    }
    .mini-table { width: 100%; font-size: 0.78rem; border-collapse: collapse; }
    .mini-table th {
      text-align: left; padding: 9px 12px; background: var(--blue-50);
      color: var(--blue-700); font-weight: 600;
    }
    .mini-table th:first-child { border-radius: 6px 0 0 6px; }
    .mini-table th:last-child { border-radius: 0 6px 6px 0; }
    .mini-table td { padding: 9px 12px; border-bottom: 1px solid var(--gray-100); color: var(--gray-600); }
    .mini-table tr:last-child td { border-bottom: none; }
    .invoice-total {
      margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--blue-100);
      display: flex; justify-content: space-between; font-size: 0.78rem;
    }
    .invoice-total .isv { color: var(--gray-500); }
    .invoice-total .isv strong { color: var(--blue-600); }
    .invoice-total .total { color: var(--gray-900); font-weight: 700; }

    /* ═══════════════════════════════════════════
       DASHBOARD
    ═══════════════════════════════════════════ */
    .dashboard {
      padding: 110px 0; background: var(--blue-950);
      position: relative; overflow: hidden;
    }
    .dashboard::before {
      content: ''; position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 70% 60% at 25% 50%, rgba(37, 99, 235, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 80% 30%, rgba(96, 165, 250, 0.08) 0%, transparent 60%);
    }
    .dashboard .section-label { background: rgba(37, 99, 235, 0.15); border-color: rgba(37, 99, 235, 0.25); color: var(--blue-200); }
    .dashboard .section-title { color: var(--white); }
    .dashboard .section-subtitle { color: rgba(255,255,255,0.45); }
    .dash-content { position: relative; z-index: 2; }

    .dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; }
    .dash-card {
      background: rgba(255,255,255,0.05); backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-md);
      padding: 28px; transition: all 0.35s;
    }
    .dash-card:hover { background: rgba(255,255,255,0.08); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
    .dash-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
    .dash-card-top span { font-size: 0.75rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
    .dash-icon {
      width: 40px; height: 40px; border-radius: 11px;
      display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
    }
    .dash-icon.blue  { background: rgba(59, 130, 246, 0.15); color: var(--blue-300); }
    .dash-icon.green { background: rgba(16, 185, 129, 0.15); color: var(--success); }
    .dash-icon.amber { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
    .dash-value { font-size: 1.9rem; font-weight: 700; color: var(--white); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
    .dash-meta { font-size: 0.78rem; color: var(--success); display: flex; align-items: center; gap: 5px; }

    /* Dashboard table */
    .dash-table-wrap {
      background: rgba(255,255,255,0.05); backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-lg); overflow: hidden;
    }
    .dash-table-head {
      padding: 22px 28px; border-bottom: 1px solid rgba(255,255,255,0.06);
      display: flex; justify-content: space-between; align-items: center;
    }
    .dash-table-head h3 { font-size: 1rem; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 10px; }
    .dash-table-head h3 i { color: var(--warning); }
    .dash-table-head span { font-size: 0.75rem; color: rgba(255,255,255,0.35); }
    .dash-table { width: 100%; border-collapse: collapse; }
    .dash-table th {
      text-align: left; padding: 13px 28px; font-size: 0.72rem; font-weight: 600;
      color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.07em;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .dash-table td { padding: 16px 28px; font-size: 0.88rem; color: rgba(255,255,255,0.8); border-bottom: 1px solid rgba(255,255,255,0.03); }
    .dash-table tr:last-child td { border-bottom: none; }
    .dash-table tr:hover td { background: rgba(255,255,255,0.02); }
    .avatar {
      width: 34px; height: 34px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 0.72rem; font-weight: 700; color: var(--white);
      margin-right: 12px; vertical-align: middle;
    }
    .pill { padding: 5px 14px; border-radius: 100px; font-size: 0.82rem; font-weight: 600; }
    .pill-green { background: rgba(16,185,129,0.12); color: var(--success); }

    /* ═══════════════════════════════════════════
       BENEFITS
    ═══════════════════════════════════════════ */
    .benefits { padding: 110px 0; background: var(--white); border-top: 1px solid var(--gray-200); }
    .benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
    .benefit-card {
      text-align: center; padding: 44px 22px; border-radius: var(--radius-lg);
      border: 1px solid var(--gray-200); background: var(--white);
      transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .benefit-card:hover { border-color: var(--blue-200); background: var(--blue-50); transform: translateY(-5px); box-shadow: var(--shadow-md); }
    .benefit-ring {
      width: 68px; height: 68px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 22px; font-size: 1.35rem; transition: all 0.35s;
    }
    .br-blue   { background: var(--blue-50); color: var(--blue-500); }
    .br-green  { background: #ecfdf5; color: #059669; }
    .br-amber  { background: #fffbeb; color: #d97706; }
    .br-violet { background: #f5f3ff; color: #7c3aed; }
    .benefit-card:hover .br-blue   { background: var(--blue-500); color: var(--white); }
    .benefit-card:hover .br-green  { background: #059669; color: var(--white); }
    .benefit-card:hover .br-amber  { background: #d97706; color: var(--white); }
    .benefit-card:hover .br-violet { background: #7c3aed; color: var(--white); }
    .benefit-card h3 { font-size: 1rem; font-weight: 600; color: var(--gray-900); margin-bottom: 10px; }
    .benefit-card p { font-size: 0.88rem; color: var(--gray-500); line-height: 1.65; }

    /* ═══════════════════════════════════════════
       TECH
    ═══════════════════════════════════════════ */
    .tech { padding: 110px 0; background: var(--gray-50); border-top: 1px solid var(--gray-200); }
    .tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 820px; margin: 0 auto; }
    .tech-card {
      text-align: center; padding: 50px 28px; background: var(--white);
      border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
      transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .tech-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); }
    .tech-logo {
      width: 70px; height: 70px; margin: 0 auto 18px; border-radius: var(--radius-md);
      display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
    }
    .tech-logo.cs { background: #f0e6ff; color: #7c3aed; }
    .tech-logo.wf { background: #e0f2fe; color: #0284c7; }
    .tech-logo.sq { background: #fef3c7; color: #d97706; }
    .tech-card h3 { font-size: 1.1rem; font-weight: 600; color: var(--gray-900); margin-bottom: 6px; }
    .tech-card p { font-size: 0.85rem; color: var(--gray-500); line-height: 1.6; }

    /* ═══════════════════════════════════════════
       SCREENSHOTS
    ═══════════════════════════════════════════ */
    .screenshots { padding: 110px 0; background: var(--white); border-top: 1px solid var(--gray-200); }
    .ss-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .ss-card {
      border-radius: var(--radius-lg); overflow: hidden;
      border: 1px solid var(--gray-200); background: var(--gray-50);
      transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .ss-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-4px); border-color: var(--blue-200); }
    .ss-card img { width: 100%; height: auto; display: block; }
    .ss-card-label {
      padding: 16px 22px; display: flex; align-items: center; gap: 10px;
      background: var(--white); border-top: 1px solid var(--gray-100);
    }
    .ss-card-label .ss-icon {
      width: 32px; height: 32px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.8rem; background: var(--blue-50); color: var(--blue-500); flex-shrink: 0;
    }
    .ss-card-label span { font-size: 0.88rem; font-weight: 600; color: var(--gray-800); }

    /* ═══════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════ */
    .footer {
      padding: 52px 0; background: var(--blue-950); text-align: center;
      border-top: 1px solid rgba(255,255,255,0.05);
    }
    .footer-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
    .footer-brand-icon {
      width: 34px; height: 34px;
      background: linear-gradient(135deg, var(--blue-500), var(--blue-400));
      border-radius: 9px; display: flex; align-items: center; justify-content: center;
      color: white; font-size: 0.78rem; font-weight: 700;
    }
    .footer-brand-text { font-family: var(--font-display); font-size: 1.2rem; color: var(--white); font-weight: 500; }
    .footer p { color: rgba(255,255,255,0.35); font-size: 0.85rem; line-height: 1.7; }
    .footer-line { width: 40px; height: 2px; background: rgba(255,255,255,0.08); margin: 20px auto; }
    .footer-name { color: rgba(255,255,255,0.55) !important; font-weight: 500; }

    /* ═══════════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════════ */
    @media (max-width: 1024px) {
      .hero-content { grid-template-columns: 1fr; gap: 44px; }
      .hero-visual { max-width: 520px; }
      .about-grid { grid-template-columns: 1fr; }
      .features-grid { grid-template-columns: 1fr 1fr; }
      .feature-card.wide { grid-column: span 2; }
      .dash-stats { grid-template-columns: repeat(3, 1fr); }
      .benefits-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .nav-links {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: var(--white); flex-direction: column;
        padding: 16px 24px; border-bottom: 1px solid var(--gray-200); box-shadow: var(--shadow-md);
      }
      .nav-links.active { display: flex; }
      .nav-links a { color: var(--gray-700) !important; padding: 12px 16px; width: 100%; }
      .nav-toggle { display: block; }
      .hero { min-height: auto; }
      .hero-content { padding: 100px 0 60px; }
      .hero-pill { display: none; }
      .features-grid { grid-template-columns: 1fr; }
      .feature-card.wide { grid-column: span 1; grid-template-columns: 1fr; }
      .dash-stats { grid-template-columns: 1fr; }
      .benefits-grid { grid-template-columns: 1fr; }
      .tech-grid { grid-template-columns: 1fr; }
      .ss-grid { grid-template-columns: 1fr; }
      .dash-table-wrap { overflow-x: auto; }
      .dash-table { min-width: 480px; }
    }
    @media (max-width: 480px) {
      .hero h1 { font-size: 2rem; }
      .hero-actions { flex-direction: column; }
      .hero-actions a { width: 100%; justify-content: center; }
    }