/* ════════════════════════════════════════════════════════════════
   styles.css — Page-specific styles for LUMSAS frontend
   Extracted from inline <style> blocks.
   Theme variables and shared utilities live in global.css.
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   PAGE: index.html
   ════════════════════════════════════════════════════════════════ */
/* ── PAGE-SPECIFIC ─────────────────────────────────────── */

    .section-pad { padding: 120px 0; }

    /* Reduce hero top padding — shared.css default is 180px */
    #hero { padding-top: 120px; }

    /* HERO */
    .hero-blob {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 800px; height: 800px;
      opacity: 0.055; pointer-events: none; z-index: 0;
      background: radial-gradient(circle, var(--primary) 0%, var(--primary-200) 50%, transparent 70%);
      animation: blob-morph 16s ease-in-out infinite;
      border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
    }
    @keyframes blob-morph {
      0%,100% { border-radius:60% 40% 30% 70%/60% 30% 70% 40%; transform:translate(-50%,-50%) rotate(0deg); }
      33%      { border-radius:30% 60% 70% 40%/50% 60% 30% 60%; transform:translate(-50%,-50%) rotate(90deg) scale(1.06); }
      66%      { border-radius:50% 60% 30% 60%/40% 30% 70% 50%; transform:translate(-50%,-50%) rotate(180deg); }
    }
    .hero-label {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 1.1rem; font-weight: 600; letter-spacing: 0.06em;
      text-transform: uppercase; color: var(--text-tertiary);
      margin-bottom: 28px;
    }
    .hero-label-line { width: 32px; height: 1px; background: var(--border); }
    .hero-description {
      max-width: 580px; margin: 28px auto 0;
      font-size: var(--text-hero);
      color: var(--text-secondary); line-height: 1.75;
    }

    /* STATEMENT SECTION — big centered text */
    .statement-section {
      padding: 140px 0;
      text-align: center;
      position: relative;
    }
    .statement-text {
      font-family: var(--font-display);
      font-size: var(--text-display);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.05;
      max-width: 1100px;
      margin: 0 auto;
    }
    .statement-sub {
      font-size: var(--text-body-lg);
      color: var(--text-secondary);
      line-height: 1.9;
      max-width: 660px;
      margin: 36px auto 0;
    }

    /* PROSE LINES — staggered reveal */
    .prose-lines { display: flex; flex-direction: column; }
    .prose-line {
      font-size: var(--text-h3);
      font-weight: 400;
      color: var(--text-secondary);
      padding: 28px 0;
      border-bottom: 1px solid var(--border-subtle);
      line-height: 1.4;
    }
    .prose-line:first-child { border-top: 1px solid var(--border-subtle); }
    .prose-line strong { color: var(--text-primary); font-weight: 700; }

    /* SECTION INTRO — centered */
    .section-intro {
      max-width: 900px; margin: 0 auto;
      text-align: center;
    }
    .section-intro p {
      font-size: var(--text-body-lg);
      color: var(--text-secondary);
      line-height: 1.85; margin-top: 24px;
    }

    /* SIX PILLARS GRID */
    .pillars-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      margin-top: 80px;
      border: 1px solid var(--border-subtle);
      border-radius: 28px;
      overflow: hidden;
    }
    .pillar-cell {
      padding: var(--card-padding-lg);
      background: var(--bg-card);
      border-right: 1px solid var(--border-subtle);
      border-bottom: 1px solid var(--border-subtle);
      transition: background var(--t-med);
      position: relative;
      overflow: hidden;
    }
    .pillar-cell:nth-child(3n) { border-right: none; }
    .pillar-cell:nth-child(4),
    .pillar-cell:nth-child(5),
    .pillar-cell:nth-child(6) { border-bottom: none; }
    .pillar-cell:hover { background: rgba(0, 0, 0, 0.05); }
    .pillar-num {
      font-family: var(--font-mono);
      font-size: var(--text-xs); letter-spacing: 0.1em;
      color: var(--text-tertiary);
      margin-bottom: 20px;
      display: block;
    }
    .pillar-name {
      font-family: var(--font-display);
      font-size: var(--text-h3);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.05;
      margin-bottom: 16px;
    }
    .pillar-verb {
      font-size: var(--text-body);
      color: var(--text-tertiary);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      font-weight: 500;
    }

    /* BELIEF SECTION */
    .belief-section {
      text-align: center;
      background: var(--bg-card);
      border-top: 1px solid var(--border-subtle);
      border-bottom: 1px solid var(--border-subtle);
      position: relative;
      overflow: hidden;
      padding: 140px 0;
    }
    .belief-section::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.05) 0%, transparent 70%);
      pointer-events: none;
    }
    .belief-text {
      font-family: var(--font-display);
      font-size: var(--text-display);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.0;
      max-width: 1100px;
      margin: 0 auto;
      position: relative;
    }
    .belief-sub {
      font-size: var(--text-body-lg);
      color: var(--text-secondary);
      line-height: 1.85;
      max-width: 580px;
      margin: 36px auto 0;
      position: relative;
    }

    /* VALUES — horizontal list */
    .values-list {
      display: flex;
      flex-direction: column;
      max-width: 860px;
      margin: 72px auto 0;
    }
    .value-row {
      display: flex;
      align-items: baseline;
      gap: 32px;
      padding: 28px 0;
      border-bottom: 1px solid var(--border-subtle);
    }
    .value-row:first-child { border-top: 1px solid var(--border-subtle); }
    .value-index {
      font-family: var(--font-mono);
      font-size: var(--text-xs); color: var(--text-tertiary);
      letter-spacing: 0.1em; flex-shrink: 0; width: 28px;
    }
    .value-title {
      font-family: var(--font-display);
      font-size: var(--text-h4);
      font-weight: 700;
      letter-spacing: -0.01em;
      flex-shrink: 0;
      min-width: 200px;
    }
    .value-desc {
      font-size: var(--text-body-lg);
      color: var(--text-secondary);
      line-height: 1.7;
    }

    /* FEATURE CARDS */
    .feature-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 64px;
    }
    .feature-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--r-card);
      padding: var(--card-padding-lg);
      transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
      position: relative;
      overflow: hidden;
    }
    .feature-card::before {
      content: '';
      position: absolute; top: 0; left: 0;
      right: 0; height: 3px;
      background: var(--grad);
      opacity: 0;
      transition: opacity var(--t-med);
    }
    .feature-card:hover {
      transform: translateY(-6px);
      border-color: rgba(0, 0, 0, 0.05);
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    }
    .feature-card:hover::before { opacity: 1; }
    .feature-card-title {
      font-family: var(--font-display);
      font-size: var(--text-h3); font-weight: 700;
      letter-spacing: -0.02em;
      margin-bottom: 18px;
    }
    .feature-card-desc {
      font-size: var(--text-body-lg);
      color: var(--text-secondary);
      line-height: 1.75;
    }

    /* REDIRECT CARDS */
    .redirect-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-top: 64px;
    }
    .redirect-card {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 28px;
      padding: var(--card-padding-lg);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: var(--glass-shadow);
      display: flex; flex-direction: column; gap: 32px;
      transition: transform var(--t-med), box-shadow var(--t-med);
      position: relative; overflow: hidden;
    }
    .redirect-card::after {
      content: '';
      position: absolute; top: 0; right: 0;
      width: 220px; height: 220px;
      background: radial-gradient(circle at top right, rgba(0, 0, 0, 0.05), transparent 70%);
      pointer-events: none;
    }
    .redirect-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--glass-hover);
    }
    .redirect-card-tag {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: var(--text-xs); font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
      background: rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(0, 0, 0, 0.05);
      color: var(--text-primary);
      width: fit-content;
    }
    .redirect-card-title {
      font-family: var(--font-display);
      font-size: var(--text-h2);
      font-weight: 900; letter-spacing: -0.04em;
      line-height: 1.05;
    }
    .redirect-card-desc {
      font-size: var(--text-body-lg);
      color: var(--text-secondary);
      line-height: 1.7;
    }

    /* FINAL CTA */
    .final-cta { padding: 160px 0; }
    .final-cta .cta-box {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 36px;
      padding: 120px 80px;
      position: relative;
      overflow: hidden;
      text-align: center;
    }
    .final-cta .cta-box::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.05), transparent 60%);
      pointer-events: none;
    }
    .final-cta .cta-title {
      font-family: var(--font-display);
      font-size: var(--text-display);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.0;
      position: relative;
    }
    .final-cta .cta-sub {
      font-size: var(--text-body-lg);
      color: var(--text-secondary);
      max-width: 540px;
      margin: 32px auto 56px;
      line-height: 1.8;
      position: relative;
    }

    @media (max-width: 900px) {
      .pillars-grid { grid-template-columns: repeat(2, 1fr); }
      .feature-cards-grid { grid-template-columns: 1fr; }
      .redirect-grid { grid-template-columns: 1fr; }
      .final-cta .cta-box { padding: 64px 32px; }
      .value-row { flex-direction: column; gap: 8px; }
      .value-title { min-width: unset; }
    }
    @media (max-width: 600px) {
      .pillars-grid { grid-template-columns: 1fr; }
      .statement-section { padding: 80px 0; }
    }

/* ════════════════════════════════════════════════════════════════
   PAGE: government.html
   ════════════════════════════════════════════════════════════════ */
/*  PAGE-SPECIFIC - GOVERNMENT  */

    /* Reduce hero top padding to match business/index pages */
    #hero { padding-top: 120px; }

    /* Accent color: teal/green for government, brand purple for tech */
    /* theme vars moved to /components/global.css */

    /* Hero badge override for gov page */
    .hero-badge-gov {
      background:rgba(0, 0, 0, 0.05);
      border:1px solid rgba(0, 0, 0, 0.05);
    }

    /* Overview bento for gov */
    .gov-bento {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:20px;
      margin-top:56px;
    }
    .gov-bento-cell {
      background:var(--bg-card);
      border:1px solid var(--border-subtle);
      border-radius:var(--r-card);
      padding:var(--card-padding-sm);
      position:relative;
      overflow:hidden;
      transition:transform var(--t-med), border-color var(--t-med);
    }
    .gov-bento-cell:hover {
      transform:translateY(-4px);
      border-color:rgba(0, 0, 0, 0.05);
    }
    .gov-icon { font-size: var(--text-h2); margin-bottom:18px; display:block; }
    .gov-cell-title {
      font-family:var(--font-display);
      font-size:var(--text-h4); font-weight:700;
      letter-spacing:-0.02em; margin-bottom:12px;
    }
    .gov-cell-desc { font-size:var(--text-sm); color:var(--text-secondary); line-height:1.7; }

    /* Speed visual - big stat strip */
    .speed-strip {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:0;
      border:1px solid var(--border-subtle);
      border-radius:var(--r-card);
      overflow:hidden;
      margin-top:56px;
    }
    .speed-cell {
      padding:40px 32px;
      border-right:1px solid var(--border-subtle);
      text-align:center;
      transition:background var(--t-fast);
    }
    .speed-cell:last-child { border-right:none; }
    .speed-cell:hover { background:var(--bg-hover); }
    .speed-num {
      font-family:var(--font-display);
      font-size:var(--text-h2);
      font-weight:800;
      letter-spacing:-0.04em;
      line-height:1;
      margin-bottom:10px;
    }
    .speed-num.gov-color {
      background:var(--gov-grad);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
    }
    .speed-label { font-size:var(--text-xs); color:var(--text-secondary); line-height:1.5; }
    .speed-before { font-size:var(--text-xs); color:var(--text-tertiary); margin-top:6px; }

    /* Project visual mockups */
    .form-mockup {
      display:flex;
      flex-direction:column;
      gap:12px;
      width:100%;
    }
    .form-field {
      background:rgba(0,0,0,0.03);
      border:1px solid var(--border-subtle);
      border-radius:10px;
      padding:12px 16px;
      font-size:var(--text-xs);
      color:var(--text-secondary);
      display:flex;
      align-items:center;
      justify-content:space-between;
    }
    .form-field .field-label { font-size:var(--text-xs); color:var(--text-tertiary); }
    .form-field .field-value { font-weight:500; color:var(--text-primary); }
    .form-status {
      display:flex;
      align-items:center;
      gap:8px;
      padding:12px 16px;
      border-radius:10px;
      font-size:var(--text-xs);
      font-weight:600;
    }
    .form-status.done {
      background:rgba(0, 0, 0, 0.05);
      border:1px solid rgba(0, 0, 0, 0.05);
      color:var(--success);
    }
    .form-status.processing {
      background:rgba(0, 0, 0, 0.05);
      border:1px solid rgba(0, 0, 0, 0.05);
      color:var(--text-primary);
    }
    .form-progress {
      height:4px;
      background:var(--border-subtle);
      border-radius:2px;
      overflow:hidden;
    }
    .form-progress-bar {
      height:100%;
      background:var(--gov-grad);
      border-radius:2px;
      animation:grow-bar 3s ease-in-out infinite;
    }
    @keyframes grow-bar {
      0%   { width:10%; }
      60%  { width:100%; }
      100% { width:100%; }
    }

    /* Medical record mockup */
    .medical-card {
      background:var(--bg-card);
      border:1px solid var(--border-subtle);
      border-radius:16px;
      padding:20px;
      margin-bottom:12px;
    }
    .medical-card-header {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:12px;
    }
    .patient-name {
      font-family: var(--font-display);
      font-size: var(--text-sm); font-weight:700;
    }
    .patient-id {
      font-family: var(--font-mono);
      font-size: var(--text-xs); color:var(--text-tertiary);
    }
    .medical-row {
      display:flex; justify-content:space-between;
      padding:7px 0;
      border-bottom:1px solid var(--border-subtle);
      font-size: var(--text-xs);
      color:var(--text-secondary);
    }
    .medical-row:last-child { border-bottom:none; }
    .medical-row strong { color:var(--text-primary); font-weight:600; }

    /* How we work - horizontal steps */
    .gov-steps {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:0;
      margin-top:56px;
      position:relative;
    }
    .gov-steps::before {
      content:'';
      position:absolute;
      top:28px; left:10%; right:10%;
      height:1px;
      background:linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
      z-index:0;
    }
    .gov-step {
      text-align:center;
      padding:0 16px;
      position:relative;
      z-index:1;
    }
    .gov-step-circle {
      width:56px; height:56px;
      border-radius:50%;
      background:var(--bg-card);
      border:2px solid rgba(0, 0, 0, 0.05);
      display:flex; align-items:center; justify-content:center;
      font-family: var(--font-mono);
      font-size: var(--text-sm); font-weight:700;
      color:var(--gov-accent);
      margin:0 auto 20px;
    }
    .gov-step-title {
      font-family: var(--font-display);
      font-size: var(--text-sm); font-weight:700;
      margin-bottom:8px;
    }
    .gov-step-desc { font-size: var(--text-xs); color:var(--text-secondary); line-height:1.6; }

    /* Benefits grid */
    .benefits-grid {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:20px;
      margin-top:48px;
    }
    .benefit-card {
      border:1px solid var(--border-subtle);
      border-radius:20px;
      padding: var(--card-padding-sm);
      background:var(--bg-card);
      transition:transform var(--t-med);
    }
    .benefit-card:hover { transform:translateY(-4px); }
    .benefit-icon { font-size: var(--text-h3); margin-bottom:14px; display:block; }
    .benefit-title {
      font-family: var(--font-display);
      font-size: var(--text-body-lg); font-weight:700;
      margin-bottom:10px;
    }
    .benefit-desc { font-size: var(--text-sm); color:var(--text-secondary); line-height:1.65; }

    /* CTA gov variant */
    .cta-gov .cta-title span {
      background:var(--gov-grad);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
    }

    @media (max-width:1024px) {
      .gov-bento { grid-template-columns:repeat(2,1fr); }
      .speed-strip { grid-template-columns:repeat(2,1fr); }
      .gov-steps { grid-template-columns:repeat(2,1fr); gap:40px; }
      .gov-steps::before { display:none; }
      .benefits-grid { grid-template-columns:repeat(2,1fr); }
    }
    @media (max-width:600px) {
      .gov-bento { grid-template-columns:1fr; }
      .speed-strip { grid-template-columns:1fr; }
      .gov-steps { grid-template-columns:1fr; }
      .benefits-grid { grid-template-columns:1fr; }
      .speed-cell { border-right:none; border-bottom:1px solid var(--border-subtle); }
      .speed-cell:last-child { border-bottom:none; }
    }

@keyframes gov-blob {
  0%,100% { border-radius:40% 60% 70% 30%/50% 40% 60% 50%; transform:translate(-50%,-50%) rotate(0deg); }
  50%      { border-radius:60% 40% 30% 70%/40% 60% 40% 60%; transform:translate(-50%,-50%) rotate(120deg) scale(1.06); }
}

/* ════════════════════════════════════════════════════════════════
   PAGE: marketplace/index.html
   ════════════════════════════════════════════════════════════════ */
/* ── PAGE: marketplace/index.html ──────────────────────────────────
   NOTE: :root, resets, .btn, .glass, .card are defined in global.css.
   Only marketplace-specific visual overrides live here.
   ─────────────────────────────────────────────────────────────────── */

    /* brand-gradient-text: marketplace-specific gradient override */
    .brand-gradient-text {
      background: linear-gradient(135deg, var(--primary-100) 0%, var(--primary-200) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 900;
    }

    .orbs-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 50vh;
      overflow: hidden;
      pointer-events: none;
      z-index: 0;
    }

    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(100px);
      animation: orb-drift 20s infinite ease-in-out;
    }

    .orb-1 {
      width: 500px;
      height: 500px;
      top: -150px;
      left: -100px;
      background: rgba(var(--primary-100), 0.12);
      animation-delay: 0s;
    }

    .orb-2 {
      width: 400px;
      height: 400px;
      top: -100px;
      right: -80px;
      background: rgba(var(--accent-200), 0.09);
      animation-delay: -10s;
    }

    @keyframes orb-drift {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(30px, -40px) scale(1.05); }
      66% { transform: translate(-20px, 20px) scale(0.95); }
    }

    #particle-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      opacity: 0.12;
    }

/* ═══════════════════════════════════════════
       MARKETPLACE HERO
    ═══════════════════════════════════════════ */
    .marketplace-hero {
      position: relative;
      padding: 84px 0 36px;
      text-align: center;
      z-index: 2;
    }

    .marketplace-sub {
      font-size: var(--text-body-lg);
      color: var(--text-secondary);
      max-width: 600px;
      margin: 0 auto;
    }

    /* ═══════════════════════════════════════════
       MARKETPLACE GRID
    ═══════════════════════════════════════════ */
    .marketplace-section {
      position: relative;
      z-index: 2;
      padding: 12px 0 48px;
    }

    .section-orb {
      position: fixed;
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
      filter: blur(110px);
    }

    .section-orb-1 {
      width: 500px;
      height: 500px;
      bottom: -180px;
      right: -100px;
      background: rgba(0, 0, 0, 0.08);
    }

    .section-orb-2 {
      width: 350px;
      height: 350px;
      bottom: -100px;
      right: -40px;
      background: var(--primary-100);
    }

    .filters {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-bottom: 48px;
      flex-wrap: wrap;
    }

    .filter-btn {
      background: rgba(0, 0, 0, 0.04);
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
      padding: 10px 20px;
      border-radius: 999px;
      font-size: var(--text-sm);
      font-weight: 500;
      cursor: pointer;
      transition: all var(--transition-fast);
    }

    .filter-btn:hover, .filter-btn.active {
      background: rgba(0, 0, 0, 0.05);
      border-color: rgba(0, 0, 0, 0.2);
      color: var(--text-primary);
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 24px;
    }

    /* .card base is in global.css — only marketplace list-card overrides below */
    .marketplace-card {
      display: flex;
      flex-direction: column;
      padding: 32px;
      border-radius: var(--r-card);
      position: relative;
      transition: transform var(--t-spring);
      cursor: pointer;
      text-decoration: none;
    }

    .marketplace-card:hover {
      transform: translateY(-6px);
    }

    .marketplace-card .shine {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0.5;
      transition: opacity var(--t-fast);
    }

    .card-tag {
      align-self: flex-start;
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 600;
      color: var(--brand);
      background: rgba(0, 0, 0, 0.06);
      padding: 6px 12px;
      border-radius: 6px;
      border: 1px solid var(--border);
      margin-bottom: 20px;
    }

    .card-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: var(--bg-hover);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--text-h4);
      margin-bottom: 20px;
      border: 1px solid var(--border-subtle);
    }

    .card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid var(--border-subtle);
      padding-top: 16px;
      font-size: var(--text-xs);
      color: var(--text-tertiary);
    }

    .card-footer-cta {
      color: var(--brand);
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: gap var(--t-fast);
    }

    .marketplace-card:hover .card-footer-cta {
      gap: 10px;
    }

    /* ═══════════════════════════════════════════
       FOOTER (moved to centralized component)
    ═══════════════════════════════════════════ */

    /* ═══════════════════════════════════════════
       ANIMATIONS
    ═══════════════════════════════════════════ */
    /* data-anim scroll reveal — mirrors .reveal in global.css for marketplace pages */
    [data-anim] {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    }
    [data-anim].anim-visible { opacity: 1; transform: translateY(0); }
    [data-anim='card'] {
      opacity: 0;
      transform: translateY(50px) scale(0.97);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    [data-anim='card'].anim-visible { opacity: 1; transform: translateY(0) scale(1); }
    [data-delay='1'] { transition-delay: 0.1s; }
    [data-delay='2'] { transition-delay: 0.2s; }
    [data-delay='3'] { transition-delay: 0.3s; }
    /* ═══════════════════════════════════════════
       FOOTER CTA BAND
    ═══════════════════════════════════════════ */
    .footer-cta-band {
      position: relative;
      background: var(--bg-dark);
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.06);
      padding: 64px 0;
      text-align: center;
      overflow: hidden;
      z-index: 2;
    }

    .footer-cta-band .cta-orb {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(90px);
    }

    .footer-cta-band .cta-orb-1 {
      width: 400px;
      height: 400px;
      bottom: -180px;
      right: -80px;
      background: rgba(0, 0, 0, 0.08);
    }

    .footer-cta-band .cta-orb-2 {
      width: 300px;
      height: 300px;
      bottom: -120px;
      right: -40px;
      background: var(--primary-100);
    }

    .footer-cta-band .cta-text {
      font-family: 'Ubuntu', -apple-system, sans-serif;
      font-size: clamp(22px, 4vw, 40px);
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 16px;
      position: relative;
      z-index: 2;
    }

    .footer-cta-band .cta-sub-text {
      font-size: var(--text-body);
      color: var(--text-secondary);
      position: relative;
      z-index: 2;
    }

  
    /* ── GLOWING ORBS ── */

/* ════════════════════════════════════════════════════════════════
   PAGE: marketplace/web-mcp/dashboard.html
   ════════════════════════════════════════════════════════════════ */
/* ── GLOWING ORBS ── */

/* ════════════════════════════════════════════════════════════════
   PAGE: marketplace/web-mcp/activate.html
   ════════════════════════════════════════════════════════════════ */
/* Activation-specific premium accents */
    .activate-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.04));
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 980px;
      padding: 6px 14px;
      font-size: var(--text-xs);
      font-weight: 600;
      color: var(--primary-100);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 20px;
    }
    .activate-badge__dot {
      width: 7px; height: 7px;
      background: var(--primary-100);
      border-radius: 50%;
      animation: pulse-dot 2s ease-in-out infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.8); }
    }
    .strength-bar {
      display: flex;
      gap: 4px;
      margin-top: 8px;
    }
    .strength-bar__segment {
      flex: 1;
      height: 4px;
      border-radius: 2px;
      background: var(--border);
      transition: background 0.3s ease;
    }
    .strength-bar__segment.active-weak   { background: var(--accent-100); }
    .strength-bar__segment.active-medium { background: var(--primary-100); }
    .strength-bar__segment.active-strong { background: var(--primary-100); }
    .strength-label {
      font-size: var(--text-xs);
      font-weight: 500;
      margin-top: 4px;
      transition: color 0.3s ease;
    }
    .invalid-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 40px 0;
    }
    .invalid-state__icon {
      font-size: 52px;
      margin-bottom: 20px;
      animation: shake 0.5s ease;
    }
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-8px); }
      75% { transform: translateX(8px); }
    }
  

    /* ── GLOWING ORBS ── */

/* ════════════════════════════════════════════════════════════════
   PAGE: marketplace/web-mcp/setup.html
   NOTE: body base styles are in global.css.
   ════════════════════════════════════════════════════════════════ */

    .setup-wrapper {
      flex: 1;
      padding: clamp(24px, 4vw, 48px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
    }

    .setup-wrapper::-webkit-scrollbar {
      width: 5px;
    }

    .setup-wrapper::-webkit-scrollbar-track {
      background: transparent;
    }

    .setup-wrapper::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.05);
      border-radius: 10px;
      transition: background 0.3s;
    }

    .setup-wrapper:hover::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.08);
    }

    .setup-header {
      text-align: center;
      margin-bottom: clamp(24px, 4vh, 48px);
      animation: fadeDown 0.5s ease-out;
      width: 100%;
      max-width: 1200px;
    }

    .setup-header h1 {
      font-size: clamp(28px, 4vw, 36px);
      letter-spacing: -0.02em;
      margin-bottom: 12px;
    }

    .setup-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: 1300px;
      width: 100%;
      align-items: start;
    }

    .setup-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: var(--sp-8);
      display: flex;
      flex-direction: column;
      box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.4), 0 0 20px 0 rgba(0, 0, 0, 0.4);
      transition: all var(--t-med);
      animation: fadeUp 0.6s ease-out backwards;
      position: relative;
    }

    .setup-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 30px 70px -10px rgba(0, 0, 0, 0.6), 0 0 30px 5px rgba(0, 0, 0, 0.4);
      border-color: var(--border);
      background: var(--bg-hover);
    }

    .setup-card:nth-child(1) { animation-delay: 0.05s; }
    .setup-card:nth-child(2) { animation-delay: 0.1s; }
    .setup-card:nth-child(3) { animation-delay: 0.15s; }

    .step-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      gap: 12px;
    }

    .step-num {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: var(--accent);
      color: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: var(--text-sm);
      flex-shrink: 0;
    }

    .step-title {
      font-size: var(--text-body-lg);
      font-weight: 600;
      margin: 0;
      color: var(--text-primary);
      letter-spacing: -0.01em;
    }

    .step-content {
      color: var(--text-secondary);
      font-size: var(--text-sm);
      line-height: 1.5;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .code-block {
      background: var(--bg-alt);
      color: var(--text-primary);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      font-family: 'SF Mono', ui-monospace, Consolas, monospace;
      font-size: var(--text-xs);
      line-height: 1.5;
      word-break: break-all;
      position: relative;
      margin-top: auto;
    }

    .copy-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      background: rgba(0, 0, 0, 0.06);
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-radius: 6px;
      color: var(--bg-100);
      font-size: var(--text-xs);
      padding: 4px 10px;
      cursor: pointer;

      transition: background 0.2s, transform 0.1s;
    }

    .copy-btn:hover {
      background: var(--accent);
      color: var(--bg-dark);
    }

    .copy-btn:active {
      transform: scale(0.95);
    }

    .os-tabs {
      display: flex;
      gap: 6px;
      background: transparent;
      padding: 4px;
      border-radius: 10px;
    }

    .os-tab {
      flex: 1;
      padding: 6px 0;
      text-align: center;
      font-size: var(--text-xs);
      font-weight: 500;
      border-radius: 6px;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      transition: 0.2s;
    }

    .os-tab.active {
      background: var(--bg-card);
      color: var(--text-primary);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
      font-weight: 600;
    }

    .cmd-mac,
    .cmd-win {
      display: none;
    }

    .cmd-mac.visible,
    .cmd-win.visible {
      display: block;
      animation: fadeIn 0.3s;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(15px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeDown {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @media (max-width: 1100px) {
      .setup-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 650px) {
      .setup-grid {
        grid-template-columns: 1fr;
      }

      .setup-wrapper {
        padding: 20px;
      }
    }
  

    /* ── GLOWING ORBS ── */

/* ════════════════════════════════════════════════════════════════
   PAGE: marketplace/web-mcp/index.html
   ════════════════════════════════════════════════════════════════ */
/* ── SCROLL REVEAL ── */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }
    .reveal-delay-5 { transition-delay: 0.5s; }

    /* ── HERO TITLE: force exactly 2 lines ── */
    .hero__title {
      font-size: clamp(1.9rem, 3.8vw, 3.4rem) !important;
      line-height: 1.08 !important;
      letter-spacing: -0.045em !important;
      max-width: 720px;
      margin-bottom: 28px;
    }

    /* ── GLASSMORPHISM CARD ── */
    .glass-card {
      background: var(--bg-200);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid rgba(0, 0, 0, 0.05);
      border-radius: 24px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
      transition: box-shadow 0.35s cubic-bezier(0.16,1,0.3,1);
      transform-style: preserve-3d;
      will-change: transform;
    }

    /* ── GLOWING ORBS ── */

    /* ── ANIMATED GRID ── */
    .bg-grid {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
      background-size: 60px 60px;
      animation: grid-drift 30s linear infinite;
    }
    @keyframes grid-drift {
      0%   { background-position: 0 0; }
      100% { background-position: 60px 60px; }
    }

    /* ── FLOATING PARTICLES CANVAS ── */
    #particles-canvas {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
    }

    /* ── FLOATING LINES ── */
    .bg-lines {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      overflow: hidden;
    }
    .bg-line {
      position: absolute;
      width: 1px;
      background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05), transparent);
      animation: line-float linear infinite;
      opacity: 0;
    }

    /* ── SECTION BREATHING ── */
    .lp-section {
      padding: clamp(100px, 14vh, 160px) clamp(20px, 6vw, 80px);
      position: relative;
    }

    /* ── DIVIDER LINE ── */
    .lp-divider {
      width: 48px; height: 2px;
      background: linear-gradient(90deg, var(--text-primary), transparent);
      margin: 0 auto 20px;
      border-radius: 2px;
    }

    /* ── LABEL PILL ── */
    .lp-label {
      display: inline-block;
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-tertiary);
      background: rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(0, 0, 0, 0.05);
      border-radius: 100px;
      padding: 5px 14px;
      margin-bottom: 24px;
    }

    /* ── SECTION HEADING ── */
    .lp-h2 {
      font-size: var(--text-h2);
      font-weight: 900;
      letter-spacing: -0.045em;
      line-height: 1.0;
      color: var(--text-primary);
      margin-bottom: 20px;
    }

    /* ── STEP ── */
    .lp-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 64px;
    }
    @media (max-width: 768px) { .lp-steps { grid-template-columns: 1fr; } }

    .lp-step {
      padding: 40px 36px;
    }
    .lp-step__num {
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: 0.1em;
      color: var(--text-tertiary);
      margin-bottom: 20px;
    }
    .lp-step__title {
      font-size: var(--text-h4);
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 10px;
      letter-spacing: -0.02em;
    }
    .lp-step__desc {
      font-size: var(--text-sm);
      color: var(--text-secondary);
      line-height: 1.6;
    }

    /* ── FEATURE GRID ── */
    .lp-features {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 64px;
    }
    @media (max-width: 900px) { .lp-features { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 560px) { .lp-features { grid-template-columns: 1fr; } }

    .lp-feature {
      padding: 36px 32px;
    }
    .lp-feature__icon {
      width: 40px; height: 40px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--primary), var(--primary-200));
      margin-bottom: 20px;
      display: flex; align-items: center; justify-content: center;
    }
    .lp-feature__icon svg { width: 18px; height: 18px; stroke: var(--bg); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .lp-feature__title {
      font-size: var(--text-body);
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 8px;
      letter-spacing: -0.01em;
    }
    .lp-feature__desc {
      font-size: var(--text-sm);
      color: var(--text-secondary);
      line-height: 1.65;
    }

    /* ── WHO IT'S FOR ── */
    .lp-who {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 64px;
    }
    @media (max-width: 640px) { .lp-who { grid-template-columns: 1fr; } }

    .lp-who__card {
      padding: var(--card-padding);
    }
    .lp-who__tag {
      font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--text-tertiary); margin-bottom: 16px;
    }
    .lp-who__title {
      font-size: var(--text-h3); font-weight: 800; color: var(--text-primary); margin-bottom: 12px; letter-spacing: -0.03em;
    }
    .lp-who__desc {
      font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.65;
    }

    /* ── AGENTS STRIP ── */
    .lp-agents {
      display: flex; flex-wrap: wrap; gap: 10px;
      justify-content: center; margin-top: 32px;
    }
    .lp-agent-pill {
      font-size: var(--text-xs); font-weight: 600;
      color: var(--text-primary);
      background: var(--bg-200);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(0, 0, 0, 0.05);
      border-radius: 100px;
      padding: 7px 18px;
    }

    /* ── PRICING ── */
    .lp-pricing-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      max-width: 520px;
      margin: 64px auto 0;
    }
    /* Pricing card: no tilt, no transform animation — always flat */
    .pricing-card {
      transform: none !important;
      transform-style: flat !important;
      will-change: auto !important;
      transition: box-shadow 0.3s ease !important;
    }
    .pricing-card:hover {
      box-shadow: 0 12px 40px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06) !important;
    }

    /* ── FAQ ── */
    .lp-faq { max-width: 680px; margin: 64px auto 0; }
    .lp-faq-item {
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      padding: 24px 0;
    }
    .lp-faq-item:first-child { border-top: 1px solid rgba(0, 0, 0, 0.05); }
    .lp-faq-q {
      width: 100%;
      background: none; border: none;
      display: flex; justify-content: space-between; align-items: center;
      font-size: var(--text-body); font-weight: 600; color: var(--text-primary);
      cursor: pointer; text-align: left; gap: 16px;
      padding: 0;
    }
    .lp-faq-q svg { flex-shrink: 0; transition: transform 0.3s ease; }
    .lp-faq-q[aria-expanded="true"] svg { transform: rotate(180deg); }
    .lp-faq-a {
      display: none;
      font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.7;
      padding-top: 14px;
      text-align: left;
    }
    .lp-faq-a.open { display: block; opacity: 1; max-height: 1000px; }
    .faq-item.open .lp-faq-a { display: block; opacity: 1; max-height: 1000px; }

    /* ── CTA BAND ── */
    .lp-cta {
      text-align: center;
      padding: clamp(80px, 10vh, 120px) clamp(20px, 6vw, 80px);
      background: var(--bg-100);
      backdrop-filter: blur(20px);
      border-top: 1px solid rgba(0, 0, 0, 0.05);
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    .lp-cta__h2 {
      font-size: var(--text-h2);
      font-weight: 900; letter-spacing: -0.045em;
      color: var(--text-primary); margin-bottom: 14px;
    }
    .lp-cta__sub {
      font-size: var(--text-body-lg); color: var(--text-secondary); margin-bottom: 40px;
    }

    /* ── BACKGROUND TEXTURE ── */
    body::before {
      content: '';
      position: fixed; inset: 0; z-index: -1;
      background: var(--bg);
      pointer-events: none;
    }

/* ════════════════════════════════════════════════════════════════
   PAGE: marketplace/web-mcp/login.html
   ════════════════════════════════════════════════════════════════ */
/* ── GLOWING ORBS ── */

/* ════════════════════════════════════════════════════════════════
   PAGE: marketplace/web-mcp/sevak.html
   ════════════════════════════════════════════════════════════════ */
/* ── GLOWING ORBS ── */

/* ════════════════════════════════════════════════════════════════
   PAGE: marketplace/web-mcp/reset-password.html
   ════════════════════════════════════════════════════════════════ */
/* ── GLOWING ORBS ── */

/* ════════════════════════════════════════════════════════════════
   PAGE: marketplace/web-mcp/terms-of-service.html
   NOTE: body, .setup-card, .step-title, .step-content defined above (setup.html section).
   ════════════════════════════════════════════════════════════════ */
    .legal-wrapper {
      flex: 1;
      padding: clamp(24px, 4vw, 48px);
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    /* ── GLOWING ORBS ── */

/* ════════════════════════════════════════════════════════════════
   PAGE: marketplace/web-mcp/privacy-policy.html
   NOTE: All layout classes (.legal-wrapper, .setup-card, etc.) are shared
   with terms-of-service.html above. No additional rules needed.
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   PAGE: marketplace/web-mcp/admin-referrals.html
   NOTE: body is defined in global.css. Status colour aliases below
   use semantic names mapped to global status vars.
   ════════════════════════════════════════════════════════════════ */
    /* Admin referral status colour aliases */
    .admin-referrals {
      --ref-green:  var(--success);
      --ref-amber:  var(--warning);
      --ref-red:    var(--danger);
      --ref-purple: var(--primary-200);
    }

    .admin-wrap {
      max-width: 1100px;
      margin: 0 auto;
      padding: var(--sp-8) var(--sp-6);
    }

    .admin-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--sp-8);
      flex-wrap: wrap;
      gap: var(--sp-4);
    }

    .section-title {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin-bottom: var(--sp-4);
    }

    .ref-table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--text-xs);
    }

    .ref-table th {
      text-align: left;
      padding: 10px 14px;
      font-weight: 600;
      color: var(--text-secondary);
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }

    .ref-table td {
      padding: 10px 14px;
      border-bottom: 1px solid var(--border-subtle);
      vertical-align: top;
    }

    .ref-table tr:last-child td { border-bottom: none; }

    .badge-status {
      display: inline-block;
      border-radius: 4px;
      padding: 2px 8px;
      font-size: var(--text-xs);
      font-weight: 700;
      color: #fff;
    }

    .badge-status.paid     { background: var(--ref-green); }
    .badge-status.unpaid   { background: var(--ref-amber); }
    .badge-status.confirmed { background: var(--ref-green); }
    .badge-status.pending  { background: var(--ref-amber); }
    .badge-status.voided   { background: var(--ref-red); }

    .mark-paid-form {
      display: none;
      margin-top: var(--sp-4);
      padding: var(--sp-4);
      background: var(--bg-subtle, #f1f5f9);
      border-radius: 8px;
      border: 1px solid var(--border);
    }

    .mark-paid-form.open { display: block; }

    .mark-paid-form input,
    .mark-paid-form textarea {
      width: 100%;
      margin-bottom: var(--sp-3);
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
      color: var(--text-primary);
      font-size: var(--text-xs);
    }

    .mark-paid-form textarea { min-height: 60px; resize: vertical; }

    .tabs {
      display: flex;
      gap: var(--sp-3);
      margin-bottom: var(--sp-6);
      border-bottom: 1px solid var(--border);
      padding-bottom: 0;
    }

    .tab-btn {
      padding: 8px 16px;
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--text-secondary);
      cursor: pointer;
      transition: color 0.2s, border-color 0.2s;
      margin-bottom: -1px;
    }

    .tab-btn.active {
      color: var(--text-primary);
      border-bottom-color: var(--ref-purple);
    }

    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    .payment-ids {
      font-size: var(--text-xs);
      color: var(--text-secondary);
      font-family: monospace;
      word-break: break-all;
    }

    .toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
    .toast { padding: 12px 18px; border-radius: 8px; font-size: var(--text-xs); font-weight: 500; color: #fff; animation: fadeIn 0.3s; }
    .toast.success { background: var(--ref-green); }
    .toast.error   { background: var(--ref-red); }
    .toast.info    { background: var(--ref-purple); }
    @keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }


/* ════════════════════════════════════════════════════════
   PAGE: business.html
   ════════════════════════════════════════════════════════ */
/*  PAGE-SPECIFIC STYLES  */

    /* Reduce hero top padding — shared.css default is 180px which is too tall here */
    #hero { padding-top: 120px; }

    .services-grid {
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:24px;
      margin-top:56px;
    }
    .service-card {
      background:var(--bg-card);
      border:1px solid var(--border-subtle);
      border-radius:var(--r-card);
      padding:36px 32px;
      transition:transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
      position:relative;
      overflow:hidden;
    }
    .service-card:hover {
      transform:translateY(-5px);
      border-color:rgba(0, 0, 0, 0.08);
      box-shadow:0 20px 56px rgba(0, 0, 0, 0.2);
    }
    .service-icon { font-size: var(--text-h2); margin-bottom:18px; display:block; }
    .service-title {
      font-family: var(--font-display);
      font-size:22px; font-weight:700;
      letter-spacing:-0.02em; margin-bottom:12px;
    }
    .service-desc { font-size: var(--text-sm); color:var(--text-secondary); line-height:1.7; margin-bottom:20px; }
    .service-points {
      list-style:none;
      display:flex; flex-direction:column; gap:9px;
    }
    .service-points li {
      font-size: var(--text-xs);
      color:var(--text-secondary);
      display:flex; align-items:center; gap:10px;
    }
    .service-points li::before {
      content:'';
      width:5px; height:5px;
      border-radius:50%;
      background:var(--brand);
      flex-shrink:0;
    }

    .industries-grid {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
      margin-top:48px;
    }
    .industry-card {
      background:var(--bg-card);
      border:1px solid var(--border-subtle);
      border-radius:20px;
      padding:28px 22px;
      text-align:center;
      transition:transform var(--t-med), border-color var(--t-med);
    }
    .industry-card:hover {
      transform:translateY(-4px);
      border-color:rgba(255, 255, 255, 0.14);
    }
    .industry-icon { font-size: var(--text-h3); margin-bottom:12px; display:block; }
    .industry-name {
      font-family: var(--font-display);
      font-size: var(--text-sm); font-weight:600;
      margin-bottom:6px;
    }
    .industry-desc { font-size: var(--text-xs); color:var(--text-tertiary); line-height:1.5; }

    .cost-visual {
      display:grid;
      grid-template-columns:1fr auto 1fr;
      gap:32px;
      align-items:center;
      margin-top:56px;
    }
    .cost-box {
      background:var(--bg-card);
      border:1px solid var(--border-subtle);
      border-radius:var(--r-card);
      padding:36px;
    }
    .cost-box-title {
      font-family: var(--font-display);
      font-size: var(--text-body); font-weight:700;
      margin-bottom:20px;
      color:var(--text-tertiary);
    }
    .cost-line {
      display:flex; justify-content:space-between;
      padding:10px 0;
      border-bottom:1px solid var(--border-subtle);
      font-size: var(--text-sm);
      color:var(--text-secondary);
    }
    .cost-line:last-child { border-bottom:none; }
    .cost-total {
      display:flex; justify-content:space-between;
      padding-top:14px;
      font-weight:700;
      font-size: var(--text-body);
    }
    .cost-vs {
      font-family: var(--font-display);
      font-size: var(--text-h3); font-weight:700;
      color:var(--text-tertiary);
      text-align:center;
    }
    .cost-box.lumsas {
      border-color:rgba(0, 0, 0, 0.1);
      background:rgba(255, 255, 255, 0.03);
    }
    .cost-box.lumsas .cost-total { color:var(--text-primary); }

    .process-steps {
      position:relative;
      margin-top:56px;
    }
    .process-line {
      position:absolute;
      left:28px; top:0; bottom:0;
      width:2px;
      background:linear-gradient(to bottom, var(--brand), transparent);
      opacity:0.2;
    }
    .process-item {
      display:flex;
      gap:28px;
      padding-bottom:48px;
      position:relative;
    }
    .process-item:last-child { padding-bottom:0; }
    .process-dot {
      width:56px; height:56px;
      border-radius:50%;
      background:var(--bg-card);
      border:2px solid rgba(0, 0, 0, 0.1);
      display:flex; align-items:center; justify-content:center;
      font-family: var(--font-mono);
      font-size: var(--text-sm); font-weight:700;
      color:var(--text-primary);
      flex-shrink:0;
      position:relative;
      z-index:1;
    }
    .process-content { padding-top:10px; }
    .process-title {
      font-family: var(--font-display);
      font-size: var(--text-h4); font-weight:700;
      letter-spacing:-0.02em; margin-bottom:8px;
    }
    .process-desc { font-size: var(--text-sm); color:var(--text-secondary); line-height:1.7; }

    @media (max-width:900px) {
      .services-grid { grid-template-columns:1fr; }
      .industries-grid { grid-template-columns:repeat(2,1fr); }
      .cost-visual { grid-template-columns:1fr; }
      .cost-vs { padding:0; }
    }
    @media (max-width:600px) {
      .industries-grid { grid-template-columns:1fr 1fr; }
    }

@keyframes blob-morph2 {
  0%,100% { border-radius:60% 40% 30% 70%/60% 30% 70% 40%; }
  50% { border-radius:30% 60% 70% 40%/50% 60% 30% 60%; }
}

/* ════════════════════════════════════════════════════════
   PAGE: reach-us.html
   ════════════════════════════════════════════════════════ */
.reach-hero {
      padding-top: 100px;
      padding-bottom: 60px;
      text-align: center;
      max-width: 800px;
      margin: 0 auto;
    }
    .reach-intro {
      font-size: var(--text-body-lg);
      color: var(--text-secondary);
      margin-top: 16px;
    }
    .form-container {
      max-width: 600px;
      margin: 0 auto 120px;
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--r-card);
      padding: 48px;
      box-shadow: 0 12px 32px rgba(0,0,0,0.03);
    }
    @media (max-width: 600px) {
      .form-container { padding: 32px 20px; }
    }

/* ==========================================================================
   20. 404 ERROR PAGE STYLES
   ========================================================================== */
.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--bg-100);
  text-align: center;
  overflow: hidden;
}

.error-container {
  max-width: 600px;
  padding: var(--card-padding);
  animation: fadeIn 0.8s ease-out forwards;
}

.error-code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 15vw, 10rem);
  font-weight: 700;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 20px;
}

.error-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--text-100);
  margin-bottom: 16px;
}

.error-desc {
  font-size: 1.1rem;
  color: var(--text-200);
  margin-bottom: 32px;
  line-height: 1.6;
}



/* Glitch Effect */
.glitch {
  position: relative;
}
.glitch::before,
.glitch::after {
  content: '404';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}
.glitch::before {
  color: var(--primary-300);
  z-index: -1;
  animation: glitch-anim 4s infinite linear alternate-reverse;
}
.glitch::after {
  color: var(--accent-100);
  z-index: -2;
  animation: glitch-anim2 4s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, 0); }
  20% { clip-path: inset(92% 0 1% 0); transform: translate(1px, 0); }
  40% { clip-path: inset(43% 0 1% 0); transform: translate(-1px, 0); }
  60% { clip-path: inset(25% 0 58% 0); transform: translate(2px, 0); }
  80% { clip-path: inset(54% 0 7% 0); transform: translate(-1px, 0); }
  100% { clip-path: inset(58% 0 43% 0); transform: translate(1px, 0); }
}

@keyframes glitch-anim2 {
  0% { clip-path: inset(24% 0 29% 0); transform: translate(2px, 0); }
  20% { clip-path: inset(54% 0 21% 0); transform: translate(-1px, 0); }
  40% { clip-path: inset(11% 0 14% 0); transform: translate(1px, 0); }
  60% { clip-path: inset(45% 0 54% 0); transform: translate(-2px, 0); }
  80% { clip-path: inset(71% 0 12% 0); transform: translate(1px, 0); }
  100% { clip-path: inset(92% 0 3% 0); transform: translate(-2px, 0); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}