/* ============================================================================
   Clawgate marketing site — SINGLE SOURCE OF BRAND TRUTH
   ----------------------------------------------------------------------------
   Change colors / fonts here and the WHOLE site re-themes (every page loads
   this file, and assets/theme.js maps Tailwind color names to these vars).

   Shared link constants used across pages (kept here for reference — update the
   hrefs in each page's header/footer if these change):
     Dashboard / app : https://console.clawgateai.com
     Sales / contact : info@virstack.com
     Parent brand    : https://www.virstack.ai/
   ========================================================================== */

:root {
  /* Brand */
  --brand:        #4f46e5;   /* indigo — primary */
  --brand-light:  #7c6cf6;   /* indigo — light */
  --brand-dark:   #4338ca;   /* indigo — hover/pressed */
  --brand-grad:   linear-gradient(135deg, #4f46e5 0%, #7c6cf6 100%);

  /* Neutrals */
  --navy:         #0b1220;   /* deepest background (hero / footer) */
  --navy-soft:    #111a2e;   /* raised surfaces on dark */
  --navy-border:  #21304d;   /* hairlines on dark */
  --ink:          #1f232c;   /* primary text on light */
  --muted:        #5b6477;   /* secondary text on light */
  --muted-dark:   #9aa6bf;   /* secondary text on dark */

  /* Surfaces */
  --bg:           #ffffff;
  --bg-soft:      #f5f6fa;
  --border:       #eceef3;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --radius:       16px;
  --shadow-sm:    0 1px 3px rgba(15, 18, 41, 0.06), 0 1px 2px rgba(15, 18, 41, 0.04);
  --shadow-md:    0 10px 30px rgba(15, 18, 41, 0.08);
  --shadow-lg:    0 24px 60px rgba(15, 18, 41, 0.14);
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Reusable component classes (keep markup lean) ---------------------- */

.container-x { width: 100%; max-width: 1180px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }

.brand-gradient { background: var(--brand-grad); }
.text-gradient {
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Hero / dark sections backdrop */
.bg-hero {
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(124,108,246,0.30), transparent 60%),
    radial-gradient(900px 500px at 8% 8%, rgba(79,70,229,0.26), transparent 55%),
    var(--navy);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 12px; font-weight: 600; font-size: 15px;
  line-height: 1; cursor: pointer; transition: transform .12s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
  text-decoration: none; white-space: nowrap; border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 8px 20px rgba(79,70,229,0.30); }
.btn-primary:hover { background: var(--brand-dark); box-shadow: 0 10px 26px rgba(79,70,229,0.40); }
.btn-light { background: #fff; color: var(--brand-dark); }
.btn-light:hover { background: #f3f2ff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-ghost:hover { border-color: #cfd3de; background: #fafafe; }
.btn-ghost-dark { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.22); }
.btn-ghost-dark:hover { background: rgba(255,255,255,0.12); }
.btn-lg { padding: 15px 28px; font-size: 16px; }

/* Cards */
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #dfe3ee; }

.eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand);
}
.eyebrow-dark { color: var(--brand-light); }

.section { padding-top: 88px; padding-bottom: 88px; }
@media (max-width: 640px) { .section { padding-top: 60px; padding-bottom: 60px; } }

/* Prose for legal pages */
.prose h2 { font-size: 22px; font-weight: 700; margin: 34px 0 12px; color: var(--ink); }
.prose h3 { font-size: 17px; font-weight: 700; margin: 22px 0 8px; color: var(--ink); }
.prose p, .prose li { color: var(--muted); line-height: 1.7; font-size: 15.5px; }
.prose p { margin: 10px 0; }
.prose ul { margin: 10px 0 10px 22px; list-style: disc; }
.prose li { margin: 6px 0; }
.prose a { color: var(--brand); text-decoration: underline; }

/* Forms */
.form-label {
  display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 7px;
}
.form-label .req { color: var(--brand); }
.form-input, .form-textarea {
  width: 100%; font-family: var(--font); font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; line-height: 1.4; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
.form-input::placeholder, .form-textarea::placeholder { color: #aab0c0; }
.form-input:focus, .form-textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,0.14);
}
.form-textarea { resize: vertical; min-height: 130px; }
/* Native + JS-flagged invalid state */
.form-input:user-invalid, .form-textarea:user-invalid,
.form-input.is-invalid, .form-textarea.is-invalid {
  border-color: #e0485b; box-shadow: 0 0 0 3px rgba(224,72,91,0.12);
}
.form-error { margin-top: 6px; font-size: 13px; color: #d23a4d; }
/* Honeypot: visually hidden but present in the DOM for bots to fill */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 13px; color: var(--muted); }
.alert-error {
  border: 1px solid #f3c2c9; background: #fdf2f4; color: #b3263a;
  border-radius: 12px; padding: 12px 14px; font-size: 14px;
}

/* Mobile nav */
.mobile-menu { display: none; }
.mobile-menu.open { display: block; }