/* ================================================================
   APPSGAIN TECHNOLOGIES — BRAND DESIGN SYSTEM
   ----------------------------------------------------------------
   Derived from the logo: a warm-to-cool gradient
   orange → red → pink → magenta → purple.

   Surface budget the whole site follows:
     ~80%  white / soft grey
     ~12%  deep navy
     ~8%   brand gradient, used only as a signature accent

   The gradient never covers a large surface. It appears on primary
   CTAs, selected words, thin rules, icon tiles, active nav states,
   key figures and small indicators — nowhere else.

   Seed colours are injected at runtime from Admin → Settings → Brand
   (includes/brand-vars.php); everything below derives from them.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ── Brand seeds ── */
  --brand-accent:    #FF8A00;   /* orange  — gradient start */
  --brand-red:       #FF3030;
  --brand-secondary: #F50072;   /* pink */
  --brand-magenta:   #D000A8;
  --brand-primary:   #6A00FF;   /* purple — the workhorse accent */
  --brand-violet:    #6A00FF;   /* gradient end */
  --brand-ink:       #0B1026;

  /* ── The signature gradient ── */
  --brand-gradient: linear-gradient(135deg,
      #FF8A00 0%, #FF3030 28%, #F50072 52%, #D000A8 72%, #6A00FF 100%);
  --brand-gradient-90: linear-gradient(90deg,
      #FF8A00 0%, #FF3030 28%, #F50072 52%, #D000A8 72%, #6A00FF 100%);
  /* Calmer two-stop version for small controls */
  --brand-gradient-duo: linear-gradient(135deg, #F50072 0%, #6A00FF 100%);

  /* ── Neutrals ── */
  --ink-900: #11162D;   /* primary text / headings */
  --ink-800: #10142B;   /* primary dark surface    */
  --ink-950: #0B1026;   /* deep navy surface       */
  --ink-700: #242A42;
  --ink-500: #5E6475;   /* secondary text          */
  --ink-400: #8B90A0;
  --ink-300: #C9CCD6;
  --ink-200: #E7E9F0;   /* borders                 */
  --ink-100: #F2F4F9;
  --ink-050: #F7F8FC;   /* soft background         */
  --white:   #FFFFFF;

  /* Legacy aliases still referenced by older rules */
  --ink-600: var(--ink-500);
  --primary: var(--brand-primary);
  --secondary: var(--brand-secondary);
  --accent: var(--brand-accent);

  /* ── Semantic (never rebranded) ── */
  --success: #0E9F6E;
  --warning: #D97706;
  --danger:  #DC2626;

  /* ── Typography ── */
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── 8px spacing scale ── */
  --sp-1: 8px;   --sp-2: 16px;  --sp-3: 24px;  --sp-4: 32px;
  --sp-5: 40px;  --sp-6: 48px;  --sp-8: 64px;  --sp-10: 80px;
  --sp-12: 96px; --sp-14: 112px;
  --section-y: clamp(36px, 3.8vw, 58px);

  /* ── Radii ── */
  --r-btn:   11px;
  --r-card:  16px;
  --r-lg:    24px;
  --r-pill:  999px;

  /* ── Elevation: soft, never heavy ── */
  --sh-xs: 0 1px 2px rgba(17,22,45,.05);
  --sh-sm: 0 1px 3px rgba(17,22,45,.06), 0 1px 2px rgba(17,22,45,.04);
  --sh-md: 0 4px 16px rgba(17,22,45,.07), 0 1px 3px rgba(17,22,45,.04);
  --sh-lg: 0 12px 32px rgba(17,22,45,.09), 0 2px 8px rgba(17,22,45,.04);
  --sh-btn: 0 4px 14px rgba(106,0,255,.22);
  --sh-btn-hover: 0 8px 22px rgba(106,0,255,.30);

  /* ── Motion: 150–300ms only ── */
  --t-fast: 150ms cubic-bezier(.4,0,.2,1);
  --t-base: 220ms cubic-bezier(.4,0,.2,1);
  --t-slow: 300ms cubic-bezier(.4,0,.2,1);

  --container: 1200px;
}

/* ================================================================
   1 · BASE
   ================================================================ */
body {
  font-family: var(--font-body);
  color: var(--ink-500);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.65;
}
h1, h2, h3, h4, h5, h6,
.saas-hero-title, .svc3d-title, .s-h, .section-title {
  font-family: var(--font-display);
  color: var(--ink-900);
  letter-spacing: -.02em;
  line-height: 1.18;
  font-weight: 700;
}
h1 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 800; }
h2 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; }
h3 { font-size: clamp(19px, 1.6vw, 22px); }
p  { color: var(--ink-500); }
a  { transition: color var(--t-fast); }

/* One container width everywhere */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 32px);
}

/* Consistent vertical rhythm for every section */
/* Default section rhythm. Components that manage their own padding
   (the hero banner, the footer newsletter card) opt out below. */
section { padding-block: var(--section-y); }
section.hb, section.nlx, .ftx section { padding-block: 0; }

/* Alternating grounds */
.bg-soft { background: var(--ink-050); }
.bg-navy { background: var(--ink-950); color: rgba(255,255,255,.72); }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: #fff; }

/* ================================================================
   2 · BRAND PRIMITIVES
   ================================================================ */

/* Gradient text — for selected words only, never whole headings */
.brand-gradient-text, .txt-gradient, .grad-text,
.saas-hero-title .ht-grad,
.saas-heading .grad,
.svc3d-title span,
.s-h span {
  background: var(--brand-gradient-90);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* No animation: the gradient is an identity mark, not motion. */
  animation: none !important;
}

/* Thin gradient rule, echoing the logo lockup */
.brand-rule {
  height: 3px; width: 56px; border: 0; border-radius: var(--r-pill);
  background: var(--brand-gradient-90);
}

/* Eyebrow label */
.brand-eyebrow, .svc3d-eyebrow, .hs-svc-label, .s-label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-primary);
  background: rgba(106,0,255,.06);
  border: 1px solid rgba(106,0,255,.14);
}

/* ── Buttons: exactly two styles, site-wide ── */
.btn-brand, .btn-primary-brand, .btn-saas-primary,
.svc3d-cta, .nf-btn-primary, .cta-primary, .btn-gradient,
.ag-nav-cta, .ag-cta-btn, .hs-learn-btn, .hs-filter-btn.on, .svc3d-chip.on {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 26px;
  border: 0; border-radius: var(--r-btn);
  font-family: var(--font-body);
  font-size: 15px; font-weight: 600; line-height: 1;
  color: #fff !important; text-decoration: none; cursor: pointer;
  background: var(--brand-gradient) !important;
  background-size: 150% 150% !important;
  background-position: 0% 50% !important;
  box-shadow: var(--sh-btn);
  transition: background-position var(--t-slow), transform var(--t-base), box-shadow var(--t-base);
}
.btn-brand:hover, .btn-primary-brand:hover, .btn-saas-primary:hover,
.svc3d-cta:hover, .nf-btn-primary:hover, .cta-primary:hover, .btn-gradient:hover,
.ag-nav-cta:hover, .ag-cta-btn:hover, .hs-learn-btn:hover {
  background-position: 100% 50% !important;
  transform: translateY(-2px);
  box-shadow: var(--sh-btn-hover);
}

.btn-secondary-brand, .btn-saas-secondary, .nf-btn-ghost, .svc3d-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 24px;
  border-radius: var(--r-btn);
  border: 1px solid var(--ink-200);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 15px; font-weight: 600; line-height: 1;
  color: var(--ink-900); text-decoration: none; cursor: pointer;
  box-shadow: var(--sh-xs);
  transition: border-color var(--t-base), color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.btn-secondary-brand:hover, .btn-saas-secondary:hover, .nf-btn-ghost:hover, .svc3d-chip:hover {
  border-color: rgba(106,0,255,.35);
  color: var(--brand-primary);
  transform: translateY(-1px);
  box-shadow: var(--sh-sm);
}

/* Filter chips sit lower than a full button */
.svc3d-chip, .hs-filter-btn { height: 38px; padding: 0 18px; font-size: 13.5px; border-radius: var(--r-pill); }
.svc3d-chip.on, .hs-filter-btn.on { height: 38px; padding: 0 18px; font-size: 13.5px; border-radius: var(--r-pill); }

/* ── Cards: one treatment everywhere ── */
.brand-card, .saas-card, .svc-card, .testi-card, .blog-card, .proj-card {
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.brand-card:hover, .saas-card:hover, .svc-card:hover,
.testi-card:hover, .blog-card:hover, .proj-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
  border-color: rgba(106,0,255,.20);
}

/* Icon tile — circular, echoing the logo's round forms */
.brand-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 14px;
  font-size: 19px; color: #fff;
  background: var(--brand-gradient);
  box-shadow: 0 4px 12px rgba(106,0,255,.22);
}

/* Focus ring */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 6px;
}
::selection { background: rgba(106,0,255,.16); color: var(--ink-900); }

/* Scrollbar — restrained, not a rainbow */
* { scrollbar-color: var(--ink-300) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: var(--r-pill); border: 3px solid var(--white); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }

/* ================================================================
   4 · STATISTICS — one component, dark navy, used once
   ================================================================ */
.brand-stats {
  background: var(--ink-950);
  border-radius: var(--r-lg);
  padding: clamp(32px, 5vw, 52px) clamp(24px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  position: relative;
  overflow: hidden;
}
.brand-stats::before {              /* one subtle gradient wash, top edge only */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--brand-gradient-90);
}
.brand-stat-val {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 42px); font-weight: 800;
  color: #fff; line-height: 1.05; letter-spacing: -.03em;
}
.brand-stat-lbl {
  display: block; margin-top: 6px;
  font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.60);
}

/* ================================================================
   6 · TONE DOWN THE LEGACY DECORATION
   The old design leaned on glows, floating icons and animated
   gradients. These rules quiet that down without touching markup.
   ================================================================ */

/* Kill the perpetual colour-cycling on gradient text */
@keyframes colorCycle { 0%,100% { background-position: 0% 50%; } }
@keyframes svBorderFlow { 0%,100% { background-position: 0% 50%; } }
@keyframes agBrandFlow { 0%,100% { background-position: 0% 50%; } }

/* Floating background tech icons: keep as texture, not decoration */
.hero-tech-bg, .tech-float, .float-icon { opacity: .32 !important; }
.hero-tech-bg * { animation-duration: 24s !important; }

/* Remove neon glow shadows anywhere they survived */
.saas-hero-title, .svc3d-title, .s-h { text-shadow: none !important; }

/* ================================================================
   7 · RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
  :root { --section-y: clamp(36px, 4vw, 56px); }
}
@media (max-width: 768px) {
  body { font-size: 15.5px; }
  :root { --section-y: 40px; --container: 100%; }
  h1 { font-size: clamp(28px, 7vw, 36px); }
  h2 { font-size: clamp(22px, 5.4vw, 28px); }
  .brand-stats { padding: 28px 20px; gap: 24px; }
  /* Full-width primary CTA on small screens */
  .btn-saas-primary, .svc3d-cta, .nf-btn-primary { width: 100%; }
  .saas-hero-btns, .nf-actions { flex-direction: column; align-items: stretch; }
}
/* Nothing may cause a horizontal scrollbar */
html, body { overflow-x: clip; max-width: 100%; }

/* ================================================================
   8 · REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================================
   9 · HERO — light, premium, two-column
   The brief puts white/off-white as the primary surface and reserves
   deep navy for a small number of contrast sections (CTA + footer).
   The hero was a dark slab; these rules convert it to a light
   composition with a soft gradient wash and a subtle brand glow
   behind the product visual.
   ================================================================ */
.saas-hero {
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(106,0,255,.07) 0%, transparent 62%),
    radial-gradient(760px 460px at 88% 8%,  rgba(245,0,114,.05) 0%, transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, var(--ink-050) 58%, #FFFFFF 100%) !important;
  color: var(--ink-500);
}

/* Headline + copy read as ink on light */
.saas-hero-title { color: var(--ink-900) !important; }
.saas-hero-sub   { color: var(--ink-500) !important; font-size: 17px; max-width: 30rem; }

/* Eyebrow: quiet pill, gradient reserved for the dot/keyword */
.saas-hero-eyebrow {
  background: rgba(106,0,255,.05) !important;
  border: 1px solid rgba(106,0,255,.16) !important;
  color: var(--brand-primary) !important;
  box-shadow: none !important;
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
}

/* Hero metrics: dark numerals, small labels, no gradient text */
.saas-hm-val {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ink-900) !important;
  font-family: var(--font-display);
  font-weight: 800;
}
.saas-hm-lbl { color: var(--ink-400) !important; }
.saas-hm-sep { background: var(--ink-200) !important; }

/* Floating tech marks become faint texture, not decoration */
.hero-tech-bg { opacity: .10 !important; }
.hero-lightbeam { display: none !important; }

/* Secondary CTA on a light ground */
.btn-saas-secondary {
  background: var(--white) !important;
  color: var(--ink-900) !important;
  border: 1px solid var(--ink-200) !important;
}

/* Slide dots */
.hero-slide-dot { background: var(--ink-300) !important; }
.hero-slide-dot.active { background: var(--brand-gradient-90) !important; }

/* The dashboard mockup gets a soft brand glow instead of a neon one */
.saas-hero-visual, .hero-visual, .saas-mock {
  filter: drop-shadow(0 24px 48px rgba(17,22,45,.12));
}

/* Top bar sits above a light hero — keep it navy for contrast */

/* ================================================================
   10 · LIGHT THEME
   The whole site runs light. Deep navy is reserved for exactly two
   places: the single CTA band and the footer. These rules make sure
   text that was written for a dark ground stays readable now that
   its section is white.
   ================================================================ */
.saas-stats, .saas-process, .saas-tech, .saas-testimonials,
.tech3d-section, .why-section, .saas-projects, .saas-blog, .saas-faq {
  color: var(--ink-500);
}
.saas-stats h1, .saas-stats h2, .saas-stats h3, .saas-stats h4,
.saas-process h1, .saas-process h2, .saas-process h3, .saas-process h4,
.saas-tech h1, .saas-tech h2, .saas-tech h3, .saas-tech h4,
.saas-testimonials h1, .saas-testimonials h2, .saas-testimonials h3,
.tech3d-section h1, .tech3d-section h2, .tech3d-section h3, .tech3d-section h4 {
  color: var(--ink-900) !important;
}

/* Anything that was white-on-dark becomes ink-on-light */
.saas-stats [style*="color:#fff"], .saas-process [style*="color:#fff"],
.saas-tech [style*="color:#fff"], .tech3d-section [style*="color:#fff"],
.saas-testimonials [style*="color:#fff"] { color: var(--ink-900) !important; }

/* Section sub-copy and muted labels */
.saas-stats p, .saas-process p, .saas-tech p,
.tech3d-section p, .saas-testimonials p { color: var(--ink-500); }

/* Cards inside those sections follow the single card treatment */
.saas-stat-card, .saas-process-step, .saas-tech-cat,
.tech3d-card, .testi-card, .saas-why-card {
  background: var(--white) !important;
  border: 1px solid var(--ink-200) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--sh-sm) !important;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.saas-stat-card:hover, .saas-process-step:hover, .saas-tech-cat:hover,
.tech3d-card:hover, .testi-card:hover, .saas-why-card:hover {
  transform: translateY(-3px);
  border-color: rgba(106,0,255,.20) !important;
  box-shadow: var(--sh-lg) !important;
}

/* Divider lines that were light-on-dark */
.saas-stats hr, .saas-process hr, .saas-tech hr,
.saas-hm-sep, .ft-stats-sep { background: var(--ink-200) !important; }

/* The two intentional navy areas keep their light-on-dark text */
.saas-cta, .saas-cta h1, .saas-cta h2, .saas-cta h3 { color: #fff !important; }
.saas-cta p { color: rgba(255,255,255,.72) !important; }